/* ==========================================================================
   theme.css — every page except the home page
   --------------------------------------------------------------------------
   Same look as css/home.css (Myntra style): white base with light greys,
   Myntra pink for accents and booking buttons, charcoal for secondary
   buttons and dark bands, square corners everywhere.

   Fonts: Playfair Display (headings) + Poppins (text), from Google Fonts.
   Otherwise: no framework, mobile-first, every image box declares a ratio,
   so Cumulative Layout Shift stays at zero.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Myntra-style palette, same as css/home.css: white + light greys,
     Myntra pink accent, charcoal text. Old token names are kept so every
     rule below still works. */
  --blush-50:  #FFFFFF;
  --blush-100: #F5F5F6;
  --blush-200: #EAEAEC;
  --blush-300: #D4D5D9;

  /* Pink — accents, prices, active states */
  --rose-400:  #FF7B9A;
  --rose-500:  #FF3F6C;          /* Myntra pink */
  --rose-600:  #D91E4F;          /* accent text, readable on white */
  --rose-700:  #B3163F;

  /* Charcoal — text and dark bands (was plum) */
  --plum-900:  #1F2130;
  --plum-800:  #282C3F;
  --plum-700:  #3E4152;
  --ink:       #282C3F;
  --muted:     #696E79;

  --white:     #FFFFFF;
  --wa:        #FF3F6C;          /* booking buttons: Myntra pink (no green) */
  --wa-dark:   #E7335F;

  --line:      #EAEAEC;
  --line-soft: #F5F5F6;
  --line-dark: rgba(255, 255, 255, .15);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", Times, serif;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4rem;

  /* Compact section rhythm — tighter than a typical marketing page,
     because the brief asked for small, compact components. */
  --section-y: clamp(2.75rem, 5.5vw, 4.75rem);

  /* Square by request: every component has hard 90-degree corners.
     These stay as tokens so the whole site can be softened from here. */
  --radius:      0;
  --radius-lg:   0;
  --radius-pill: 0;

  /* Flat, neutral shadows (Myntra style) */
  --shadow-sm: 0 1px 3px rgba(40, 44, 63, .08);
  --shadow-md: 0 2px 10px rgba(40, 44, 63, .10);
  --shadow-lg: 0 6px 22px rgba(40, 44, 63, .12);

  --wrap: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;        /* "should be very smooth" */
  scroll-padding-top: 90px;       /* sticky header must not cover anchors */
}

body {
  margin: 0;
  background: var(--blush-50);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: .975rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 var(--sp-3);
  color: var(--plum-900);
  text-wrap: balance;
}
h1 { font-size: clamp(1.95rem, 5.4vw, 3.3rem); line-height: 1.1; }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); }
h3 { font-size: 1.05rem; letter-spacing: -.005em; }

p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--rose-700); text-underline-offset: .18em; }
a:hover { color: var(--rose-500); }

ul, ol { margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--rose-600); outline-offset: 3px; border-radius: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Icons come from the <symbol> sprite at the top of <body> via <use>, so the
   outer <svg> carries no intrinsic size — this is the default. Components
   below override the size where they need a different one. */
.ico { width: 16px; height: 16px; flex: none; fill: currentColor; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 300;
  padding: var(--sp-3) var(--sp-5);
  background: var(--plum-900); color: var(--white);
  border-radius: 0;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 0; color: var(--white); }

/* Watched by home.js for the header shadow. Needs a real height because
   IntersectionObserver is unreliable on a zero-area target. */
#top-sentinel { height: 1px; margin-bottom: -1px; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 16px;                      /* 16px gutter on phones */
}
@media (min-width: 640px) { .wrap { padding-inline: 26px; } }
.wrap--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); }
.section--blush { background: var(--blush-100); }
.section--white { background: var(--white); }
.section--dark { background: var(--plum-900); color: rgba(255, 255, 255, .8); }
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark a { color: var(--rose-400); }

.section-head { max-width: 640px; margin: 0 auto clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; }
.section--dark .section-head p { color: rgba(255, 255, 255, .72); }

.eyebrow {
  display: block; margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose-600);
}
.section--dark .eyebrow { color: var(--rose-400); }

/* Compact grids — more per row, less padding inside each */
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: 1fr; }
.grid--6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .grid--3 { grid-template-columns: repeat(2, 1fr); }
                            .grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                            .grid--6 { grid-template-columns: repeat(6, 1fr); } }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .65rem 1.25rem;
  border: 1px solid transparent; border-radius: 0;
  font-family: var(--font-sans); font-size: .875rem; font-weight: 600;
  line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* WhatsApp green is used for the booking action and nothing else, so the
   colour itself tells the visitor what the button does. */
.btn--wa { background: var(--wa); color: var(--white); font-weight: 700; }
.btn--wa:hover { background: var(--wa-dark); color: var(--white); }

.btn--rose { background: var(--rose-500); color: var(--white); font-weight: 700; }
.btn--rose:hover { background: var(--rose-700); color: var(--white); }

/* Former white buttons are now solid charcoal, as on the home page */
.btn--outline { background: var(--ink); color: var(--white); border-color: var(--ink); font-weight: 700; }
.btn--outline:hover { background: #000; border-color: #000; color: var(--white); }

.section--dark .btn--outline { background: transparent; color: var(--white); border-color: var(--line-dark); }
.section--dark .btn--outline:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }

.btn--sm { min-height: 36px; padding: .4rem .9rem; font-size: .8rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.arrow { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; text-decoration: none; }
.arrow::after { content: "→"; transition: transform .2s var(--ease); }
.arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   5. TOP BAR + HEADER + DRAWER
   ========================================================================== */
.topbar {
  background: var(--blush-100);
  color: var(--plum-700);
  font-size: .78rem;
}
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5);
  justify-content: center; padding-block: .5rem;
}
@media (min-width: 760px) { .topbar__inner { justify-content: space-between; } }
.topbar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
.topbar a:hover { color: var(--rose-600); }
.topbar svg { width: 13px; height: 13px; fill: var(--rose-600); flex: none; }
.topbar__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: center; }
.topbar__hours { display: none; }
@media (min-width: 980px) { .topbar__hours { display: inline-flex; } }

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
@supports (backdrop-filter: blur(10px)) { .header { backdrop-filter: blur(14px) saturate(150%); } }
.header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 2px 10px rgba(40, 44, 63, .08); }

.header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: 64px; }
@media (min-width: 1000px) { .header__inner { min-height: 74px; gap: var(--sp-5); } }

.brand { display: flex; margin-right: auto; color: var(--plum-900); text-decoration: none; }
.brand svg { width: 152px; height: auto; }
@media (min-width: 1000px) { .brand svg { width: 178px; } }

.nav { display: none; }
@media (min-width: 1000px) { .nav { display: block; } }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .7rem; border: 0; background: none; border-radius: 0;
  font-family: var(--font-sans); font-size: .875rem; font-weight: 500;
  color: var(--plum-800); text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover { background: var(--blush-200); color: var(--rose-700); }
.nav__link[aria-current="page"] { color: var(--rose-700); font-weight: 700; }

.chev {
  width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s var(--ease);
}
[aria-expanded="true"] > .chev { transform: rotate(-135deg) translateY(-2px); }

.nav__menu {
  position: absolute; top: calc(100% + 6px); left: 0;
  display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr));   /* 10 locations in two columns */
  min-width: 215px; padding: 6px; list-style: none;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 0; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu, .nav__menu.is-open {
  opacity: 1; visibility: visible; transform: none;
}
.nav__menu a { display: block; padding: .5rem .65rem; border-radius: 0; font-size: .85rem; color: var(--ink); text-decoration: none; }
.nav__menu a:hover { background: var(--blush-200); color: var(--rose-700); }

.header__cta { display: none; }
@media (min-width: 1000px) { .header__cta { display: inline-flex; } }

.nav-trigger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px;
  background: var(--white); border: 1px solid var(--line); border-radius: 0; cursor: pointer;
}
.nav-trigger span { display: block; height: 1.5px; background: var(--plum-900); border-radius: 0; transition: transform .24s var(--ease), opacity .2s var(--ease); }
.nav-trigger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-trigger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1000px) { .nav-trigger { display: none; } }

/* Covers the FULL viewport and sits ABOVE the header (z-index 110 vs 100).

   It used to start below the header, with JS measuring the header's position
   on open. That is unreliable: the header's distance from the top of the
   viewport is 102px at the top of the page (the top bar is still above it) but
   64px once scrolled, and the value was only measured once — so any scroll
   change left a strip of page content visible above the drawer. Covering
   everything and carrying its own close button removes the dependency. */
.drawer {
  position: fixed; inset: 0; z-index: 110;
  padding: 0 16px calc(var(--sp-8) + 64px);
  background: var(--blush-50);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease), visibility .3s;
}

.drawer__top {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 64px; margin-bottom: var(--sp-2);
  background: var(--blush-50);
  border-bottom: 1px solid var(--line-soft);
}
.drawer__top .brand { margin-right: auto; }
.drawer__top .brand svg { width: 152px; height: auto; }

.drawer__close {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 0;
  color: var(--plum-900); cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.drawer__close:hover { border-color: var(--rose-500); color: var(--rose-700); }
.drawer__close svg { width: 18px; height: 18px; fill: currentColor; }
.drawer.is-open { transform: none; visibility: visible; }
@media (min-width: 1000px) { .drawer { display: none; } }

.drawer__list { list-style: none; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: .85rem 0;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-size: 1.15rem; color: var(--plum-900);
  text-align: left; text-decoration: none; cursor: pointer;
}
.drawer__link[aria-current="page"] { color: var(--rose-600); }
.drawer__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.drawer__sub > div { overflow: hidden; }
.drawer__link[aria-expanded="true"] + .drawer__sub { grid-template-rows: 1fr; }
.drawer__sub ul { list-style: none; padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); }
.drawer__sub a { display: block; padding: .45rem 0; font-size: .92rem; color: var(--muted); text-decoration: none; }
.drawer__sub a:hover { color: var(--rose-600); }
.drawer__foot { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }
.drawer__foot p { font-size: .82rem; color: var(--muted); }

/* ==========================================================================
   25. HOME HERO — layered, translucent banner
   --------------------------------------------------------------------------
   Replaces the flat image-plus-gradient banner. Three stacked layers:
     1. a deep plum base, so the text contrast never depends on the photo,
     2. the photograph at reduced opacity over it, which tints it into the
        palette instead of sitting on top as a separate picture,
     3. a rose glow and a frosted panel holding the copy.
   Because the text sits on the plum base rather than on the photo itself,
   contrast stays well above 4.5:1 whatever the image behind it.
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  background: var(--plum-900);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  opacity: .50;
}
@media (min-width: 900px) { .hero__bg img { opacity: .58; object-position: 62% 42%; } }

/* Rose glow bleeding in from the right, and a plum wash from the left so the
   panel edge never fights the photograph. */
.hero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 90% at 88% 18%, rgba(255, 63, 108, .40), transparent 65%),
    linear-gradient(100deg, rgba(20, 22, 32, .92) 0%, rgba(20, 22, 32, .68) 46%, rgba(20, 22, 32, .25) 100%);
}
@media (max-width: 899px) {
  .hero__glow {
    background:
      radial-gradient(70% 50% at 80% 8%, rgba(255, 63, 108, .38), transparent 70%),
      linear-gradient(180deg, rgba(20, 22, 32, .78) 0%, rgba(20, 22, 32, .94) 100%);
  }
}

/* A thin rose rule along the bottom edge, picked up from the palette. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 1;
  background: linear-gradient(90deg, var(--rose-600), var(--rose-400), transparent);
}

.hero__inner { position: relative; padding-block: clamp(2.5rem, 7vw, 5rem); }

/* The frosted panel. Falls back to a flat translucent plum where
   backdrop-filter is unsupported, which still reads correctly. */
.hero__panel {
  max-width: 620px; padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: rgba(20, 22, 32, .42);
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 3px solid var(--rose-500);
}
@supports (backdrop-filter: blur(6px)) {
  .hero__panel { background: rgba(20, 22, 32, .26); backdrop-filter: blur(10px) saturate(130%); }
}

.hero h1 { color: var(--white); margin-bottom: var(--sp-4); }
.hero h1 em { font-style: normal; color: var(--rose-400); }
.hero__sub {
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  color: rgba(255, 255, 255, .9); margin-bottom: var(--sp-5); max-width: 52ch;
}

.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  margin: 0 0 var(--sp-4); padding: .32rem .8rem .32rem .6rem;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  font-size: .76rem; font-weight: 600; color: var(--white);
}
.pill .dot {
  width: 6px; height: 6px; flex: none; background: var(--wa);
  box-shadow: 0 0 0 3px rgba(255, 63, 108, .25);
}

/* Facts run as a translucent strip across the full width under the panel,
   rather than being boxed inside it. */
.hero__facts {
  position: relative; z-index: 1;
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  list-style: none;
}
@media (min-width: 760px) { .hero__facts { grid-template-columns: repeat(4, 1fr); } }
.hero__facts li {
  padding: var(--sp-4);
  background: rgba(20, 22, 32, .55);
  font-size: .78rem; color: rgba(255, 255, 255, .72);
}
@supports (backdrop-filter: blur(6px)) {
  .hero__facts li { background: rgba(20, 22, 32, .38); backdrop-filter: blur(8px); }
}
.hero__facts strong {
  display: block; margin-bottom: .1rem;
  font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; color: var(--white);
}

/* ==========================================================================
   26. THERAPIST CARDS
   ========================================================================== */
.team { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }   /* one card per row on phones */
@media (min-width: 600px)  { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 680px)  { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .team { grid-template-columns: repeat(5, 1fr); } }

.tcard {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.tcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--rose-400); }

.tcard__pic {
  aspect-ratio: 1 / 1; background: var(--blush-100);
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
}
.tcard__pic img { width: 100%; height: 100%; object-fit: cover; }

.tcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.tcard h3 { font-size: 1rem; margin-bottom: .1rem; }
.tcard__role {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--rose-600); margin-bottom: var(--sp-3);
}
.tcard__desc {
  font-size: .8rem; line-height: 1.55; color: var(--muted);
  margin-bottom: var(--sp-3);
}
.tcard dl { display: grid; gap: .3rem; margin: 0 0 var(--sp-3); font-size: .78rem; }
.tcard dl div { display: flex; justify-content: space-between; gap: .5rem; }
.tcard dt { color: var(--muted); }
.tcard dd { margin: 0; font-weight: 600; color: var(--plum-900); text-align: right; }
.tcard__rate {
  margin-top: auto; padding-top: var(--sp-3); margin-bottom: var(--sp-3);
  border-top: 1px dashed var(--line);
  font-family: var(--font-display); font-size: 1.05rem; color: var(--rose-700);
}
.tcard__rate span { font-family: var(--font-sans); font-size: .7rem; color: var(--muted); }

/* ==========================================================================
   7. CATEGORY TILES — compact, caption over image
   ========================================================================== */
.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: 0; text-decoration: none;
  aspect-ratio: 4 / 3; background: var(--blush-200);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile span {
  position: absolute; inset: auto 0 0; padding: 1.6rem .6rem .55rem;
  background: linear-gradient(to top, rgba(20, 22, 32, .86), transparent);
  color: var(--white); font-size: .78rem; font-weight: 600; text-align: center;
}

/* ==========================================================================
   8. TREATMENT CARDS — compact
   ========================================================================== */
.card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blush-300); }

.card__media { overflow: hidden; background: var(--blush-200); }
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .45s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }

.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-4); }
.card__body h3 { margin-bottom: .35rem; }
.card__body p { font-size: .85rem; line-height: 1.6; color: var(--muted); }

.card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-3); margin-bottom: var(--sp-3);
  border-top: 1px dashed var(--line);
}
.card__price { font-family: var(--font-display); font-size: 1.15rem; color: var(--rose-700); font-variant-numeric: tabular-nums; }
.card__price small { font-size: .68rem; color: var(--muted); font-family: var(--font-sans); }
.card__dur { font-size: .73rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* ==========================================================================
   9. SPLIT (text + image)
   ========================================================================== */
.split { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; }
                            .split--flip > :first-child { order: 2; } }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; box-shadow: var(--shadow-md); }

.ticks { list-style: none; display: grid; gap: .55rem; margin-top: var(--sp-4); }
.ticks li { position: relative; padding-left: 1.6rem; font-size: .9rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 10px; height: 5.5px;
  border-left: 2px solid var(--rose-500); border-bottom: 2px solid var(--rose-500);
  transform: rotate(-45deg);
}
.section--dark .ticks li::before { border-color: var(--rose-400); }

/* ==========================================================================
   10. COMPACT FEATURE / STEP BOXES
   ========================================================================== */
.feature {
  padding: var(--sp-4); background: var(--white);
  border: 1px solid var(--line); border-radius: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.feature:hover { border-color: var(--blush-300); box-shadow: var(--shadow-sm); }
.feature h3 { font-size: .95rem; margin-bottom: .3rem; }
.feature p { font-size: .83rem; line-height: 1.6; color: var(--muted); }
.feature__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-bottom: var(--sp-3);
  background: var(--blush-200); border-radius: 0;
  color: var(--rose-600); font-size: .95rem;
}

.steps { list-style: none; counter-reset: step; display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li {
  counter-increment: step; padding: var(--sp-4);
  background: var(--white); border: 1px solid var(--line); border-radius: 0;
}
.steps li::before {
  content: "0" counter(step);
  display: grid; place-items: center;
  width: 30px; height: 30px; margin-bottom: var(--sp-3);
  background: var(--blush-200); border-radius: 0;
  font-family: var(--font-display); font-size: .85rem; color: var(--rose-600);
}
.steps h3 { font-size: .95rem; margin-bottom: .3rem; }
.steps p { font-size: .83rem; line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   11. PACKAGES + RATE TABLE
   ========================================================================== */
.plan {
  display: flex; flex-direction: column;
  padding: var(--sp-5); background: var(--white);
  border: 1px solid var(--line); border-radius: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan--featured { border-color: var(--rose-400); box-shadow: var(--shadow-md); }
.plan__name { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-600); margin-bottom: var(--sp-2); }
.plan__price { font-family: var(--font-display); font-size: 1.9rem; color: var(--plum-900); line-height: 1; margin-bottom: .15rem; }
.plan__price small { font-size: .72rem; color: var(--muted); font-family: var(--font-sans); }
.plan ul { list-style: none; display: grid; gap: .45rem; margin: var(--sp-4) 0; }
.plan li { position: relative; padding-left: 1.4rem; font-size: .85rem; color: var(--muted); }
.plan li::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 5px; border-left: 2px solid var(--rose-500); border-bottom: 2px solid var(--rose-500); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; }

.rates__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0; }
.rates {
  width: 100%; min-width: 440px; border-collapse: collapse;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 0; overflow: hidden; font-size: .88rem;
}
.rates th, .rates td { padding: .7rem var(--sp-4); text-align: left; border-bottom: 1px solid var(--line-soft); }
.rates thead th {
  background: var(--blush-200);
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rose-700);
}
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 0; }
.rates tbody tr:hover { background: var(--blush-50); }
.rates tbody th { font-family: var(--font-sans); font-size: .88rem; font-weight: 600; color: var(--ink); }
.rates td:last-child { font-family: var(--font-display); font-size: 1rem; color: var(--rose-700); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   12. LOCATION CARDS + AREA PILLS
   ========================================================================== */
.loc { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .loc { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .loc { grid-template-columns: repeat(4, 1fr); } }

.loc .card__body h3 a { color: inherit; text-decoration: none; }
.loc .card__body h3 a:hover { color: var(--rose-600); }

.tag {
  display: inline-block; margin-bottom: var(--sp-2); padding: .18rem .55rem;
  background: var(--blush-200); border-radius: 0;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--rose-700);
}

.pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; list-style: none; }
.pills a {
  display: inline-block; padding: .38rem .9rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: 0;
  font-size: .8rem; color: var(--plum-800); text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.pills a:hover { background: var(--blush-200); border-color: var(--rose-400); color: var(--rose-700); }

/* ==========================================================================
   13. FAQ
   ========================================================================== */
.faq { display: grid; gap: .6rem; }
.faq__item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq__item:hover { border-color: var(--blush-300); }
.faq__item.is-open { border-color: var(--rose-400); box-shadow: var(--shadow-sm); }

.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  width: 100%; padding: .9rem var(--sp-4);
  background: none; border: 0;
  font-family: var(--font-sans); font-size: .92rem; font-weight: 600; line-height: 1.45;
  color: var(--plum-900); text-align: left; cursor: pointer;
}
.faq__q:hover { color: var(--rose-700); }

.plus { position: relative; width: 14px; height: 14px; flex: none; margin-top: .25em; color: var(--rose-600); }
.plus::before, .plus::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1.6px;
  background: currentColor; border-radius: 0;
  transition: transform .24s var(--ease), opacity .24s var(--ease);
}
.plus::after { transform: rotate(90deg); }
[aria-expanded="true"] .plus::after { transform: rotate(0); opacity: 0; }

/* The answer stays in the DOM when collapsed, so crawlers read it and it
   matches the FAQPage structured data. grid-template-rows animates the height
   without a hard-coded max-height.

   Open by DEFAULT, and collapsed only once the inline script in <head> has
   set html.js. Two reasons:
     - without JavaScript the FAQ is still readable rather than nine dead
       buttons, and
     - the collapse applies before first paint, so there is no flash.
   The state class lives on .faq__item, NOT on the button: the button is
   inside its <h3>, so it is not a sibling of .faq__a and no `+` selector
   can reach the answer from it. */
.faq__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .28s var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 var(--sp-4); font-size: .875rem; line-height: 1.65; color: var(--muted); }
.faq__a p:last-child { padding-bottom: var(--sp-4); }
.js .faq__a { grid-template-rows: 0fr; }
.js .faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* ==========================================================================
   14. CTA BAND + NAP
   ========================================================================== */
.cta {
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3.5vw, 3rem);
  background: linear-gradient(135deg, var(--plum-900), var(--rose-700));
  border-radius: 0; color: var(--white); text-align: center;
}
.cta h2 { color: var(--white); }
.cta p { color: rgba(255, 255, 255, .85); max-width: 54ch; margin-inline: auto; }
.cta .btn-row { justify-content: center; margin-top: var(--sp-5); }
.cta .note { margin-top: var(--sp-4); font-size: .78rem; color: rgba(255, 255, 255, .62); }

.nap { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .nap { grid-template-columns: repeat(3, 1fr); } }
.nap > div { padding: var(--sp-4); background: var(--white); border: 1px solid var(--line); border-radius: 0; }
.nap h3 { font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.nap p, .nap a { font-size: .95rem; color: var(--plum-900); text-decoration: none; margin: 0; }
.nap a:hover { color: var(--rose-600); }

/* ==========================================================================
   15. FOOTER + FLOATING ACTIONS
   ========================================================================== */
.footer { padding-block: var(--sp-7) var(--sp-5); background: var(--plum-900); color: rgba(255, 255, 255, .72); font-size: .85rem; }
.footer__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 560px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: var(--sp-6); } }

.footer__brand svg { width: 172px; height: auto; color: var(--white); margin-bottom: var(--sp-3); }
.footer__brand p { max-width: 40ch; }
.footer h2 { font-family: var(--font-sans); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-400); margin-bottom: var(--sp-3); }
.footer ul { list-style: none; display: grid; gap: .45rem; }
.footer a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__contact .label { display: block; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .42); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); justify-content: space-between;
  margin-top: var(--sp-6); padding-top: var(--sp-4);
  border-top: 1px solid var(--line-dark); font-size: .78rem; color: rgba(255, 255, 255, .52);
}
.footer__bottom p { margin: 0; }

/* Floating contact buttons — blue call above green WhatsApp, bottom right */
.float-cta {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 95;
  display: flex; flex-direction: column; gap: 12px;
}
.float-cta__btn {
  position: relative; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  color: #fff; text-decoration: none;
  transition: transform .22s var(--ease);
}
.float-cta__btn:hover { transform: scale(1.08); color: #fff; }
.float-cta__btn svg { width: 28px; height: 28px; fill: currentColor; }
.float-cta__btn--call svg { width: 24px; height: 24px; }
.float-cta__btn--wa   { background: #25D366; box-shadow: 0 6px 18px rgba(37, 211, 102, .45); }
.float-cta__btn--call { background: #1E6FE8; box-shadow: 0 6px 18px rgba(30, 111, 232, .4); }
/* Soft pulse ring so the buttons catch the eye */
.float-cta__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: inherit; animation: cta-ping 2.4s cubic-bezier(0, 0, .2, 1) infinite;
}
.float-cta__btn--call::before { animation-delay: 1.2s; }
@keyframes cta-ping { 0% { transform: scale(1); opacity: .5; } 80%, 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 600px) {
  .float-cta { right: 12px; gap: 10px; }
  .float-cta__btn { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .float-cta__btn::before { animation: none; opacity: 0; } }

/* ==========================================================================
   17. INNER PAGES — breadcrumb, page hero
   ========================================================================== */
.crumb { padding-top: var(--sp-4); }
.crumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; font-size: .78rem; }
.crumb li + li::before { content: "/"; margin-right: .4rem; opacity: .45; }
.crumb ol { justify-content: center; }
/* On the photo banner the breadcrumb sits on a small white strip so it reads on any image */
.phero .crumb ol {
  width: fit-content; margin: 0 auto; padding: .3rem .8rem;
  background: rgba(255, 255, 255, .88); box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  color: var(--muted);   /* keeps the "/" separator visible on every banner */
}
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--rose-600); text-decoration: underline; }
.crumb [aria-current] { color: var(--rose-600); font-weight: 600; }

/* Page banner — light, centred, same look as the home hero */
.phero {
  position: relative; isolation: isolate;
  background: var(--white); color: var(--ink); text-align: center;
}
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.phero__bg::after {
  content: ""; position: absolute; inset: 0;
  /* Photo stays clearly visible: only a soft white glow sits behind the centred text */
  background:
    radial-gradient(ellipse 52% 62% at 50% 52%, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .55) 45%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .18) 100%);
}
@media (max-width: 700px) {
  .phero__bg::after {
    background:
      radial-gradient(ellipse 90% 60% at 50% 55%, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .55) 55%, rgba(255, 255, 255, .10) 100%);
  }
}
.phero__bg img { filter: saturate(1.08) contrast(1.04); }
.phero__inner { padding-block: clamp(1.75rem, 4.5vw, 3.25rem) clamp(2.25rem, 5vw, 3.75rem); max-width: 720px; margin-inline: auto; }
.phero .eyebrow { color: var(--rose-600); }
.phero h1 { color: var(--ink); margin-bottom: var(--sp-3); font-weight: 600; }
.phero h1 em { font-style: italic; color: var(--rose-600); }
.phero__lead { font-size: clamp(.95rem, 1.4vw, 1.08rem); color: var(--plum-700); font-weight: 500; margin: 0 auto; max-width: 60ch; }

/* Gallery banner: the photograph shown full strength, framed, with the
   text set in white over a dark fade at the bottom. */
.phero--gallery {
  display: flex; flex-direction: column;
  min-height: clamp(440px, 68vh, 640px);
  color: var(--white); background: var(--plum-900); overflow: hidden;
}
.phero--gallery > .wrap { flex: 1; display: flex; flex-direction: column; width: 100%; }
.phero--gallery::before {
  content: ""; position: absolute; inset: clamp(10px, 1.6vw, 22px); z-index: -1;
  border: 1px solid rgba(255, 255, 255, .38); pointer-events: none;
}
.phero--gallery .phero__bg img {
  object-position: center 55%; filter: saturate(1.1) contrast(1.05);
  animation: phero-drift 22s var(--ease) both;
}
.phero--gallery .phero__bg::after {
  background:
    linear-gradient(180deg, rgba(14, 15, 22, .28) 0%, rgba(14, 15, 22, .04) 24%, rgba(14, 15, 22, .34) 50%, rgba(14, 15, 22, .84) 100%);
}
@keyframes phero-drift { from { transform: scale(1.1); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .phero--gallery .phero__bg img { animation: none; } }

.phero--gallery .crumb { padding-top: clamp(1.4rem, 3vw, 2.25rem); }
.phero--gallery .phero__inner { margin-top: auto; max-width: 780px; padding-block: 2rem clamp(2.5rem, 6vw, 4rem); }
.phero--gallery .eyebrow {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--white); text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.phero--gallery .eyebrow::before,
.phero--gallery .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--rose-400); }
.phero--gallery h1 { color: var(--white); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.phero--gallery h1 em { color: var(--rose-400); }
.phero--gallery .phero__lead { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 12px rgba(0, 0, 0, .4); }

.phero__stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  margin: clamp(1.25rem, 3vw, 1.75rem) 0 0; padding: 0; list-style: none;
}
.phero__stats li {
  padding: 0 clamp(.9rem, 2.5vw, 1.6rem);
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.phero__stats li + li { border-left: 1px solid rgba(255, 255, 255, .3); }
.phero__stats b {
  display: block; margin-bottom: .15rem;
  font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--white);
}
.phero__cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: .5rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--white); text-decoration: none;
}
.phero__cue::after {
  content: ""; width: 1px; height: 28px; background: currentColor;
  animation: cue-line 1.8s var(--ease) infinite; transform-origin: top;
}
.phero__cue:hover { color: var(--rose-400); }
@keyframes cue-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (prefers-reduced-motion: reduce) { .phero__cue::after { animation: none; } }

/* ==========================================================================
   18. SCROLL REVEAL
   --------------------------------------------------------------------------
   Opacity + a small translate only: both are compositor properties, so this
   never triggers layout and cannot cause jank. Elements are visible by
   default and only hidden once html.js is set, so nothing disappears when
   JavaScript is off or still loading.
   ========================================================================== */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   19. GALLERY
   ========================================================================== */
/* ---- One numbered grid: image1 … image56 -------------------------------
   Every tile is the same 4:5 card, so the grid stays even whatever the
   photo's shape. A slot with no file shows a "?" card instead. */
.gallery-section { scroll-margin-top: 70px; }

.gbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-bottom: .9rem; margin-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.gbar p { margin: 0; }
.gbar__count {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.gbar__count::before { content: ""; width: 22px; height: 2px; background: var(--rose-500); }
.gbar__key { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--muted); }
.gbar__key[hidden] { display: none; }
.gkey {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 1.5px dashed var(--rose-400); color: var(--rose-500);
  font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: .9rem; line-height: 1;
}

.ggrid {
  display: grid; gap: clamp(.75rem, 1.8vw, 1.5rem) clamp(.6rem, 1.4vw, 1.1rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 640px) { .ggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .ggrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ggrid > li { margin: 0; min-width: 0; }

.gtile { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.gtile__frame {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; background: var(--blush-100);
}
.gtile__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
/* Shade that comes up on hover */
.gtile__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(31, 33, 48, .5) 0%, rgba(31, 33, 48, 0) 55%);
  opacity: 0; transition: opacity .35s var(--ease);
}
/* Zoom mark, bottom right */
.gtile__zoom {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 1;
  width: 34px; height: 34px; background: var(--white);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.gtile__zoom::before, .gtile__zoom::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--rose-500);
  transform: translate(-50%, -50%);
}
.gtile__zoom::before { width: 12px; height: 2px; }
.gtile__zoom::after  { width: 2px; height: 12px; }

.gtile__meta {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .6rem 0 0; border-top: 2px solid transparent;
  transition: border-color .3s var(--ease);
}
.gtile__num {
  flex: none; font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 1.05rem; line-height: 1; color: var(--rose-500);
}
.gtile__cap {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: .8rem; font-weight: 500; color: var(--ink);
  transition: color .2s var(--ease);
}

a.gtile { cursor: zoom-in; }
a.gtile:hover .gtile__frame img,
a.gtile:focus-visible .gtile__frame img { transform: scale(1.06); }
a.gtile:hover .gtile__frame::after,
a.gtile:focus-visible .gtile__frame::after { opacity: 1; }
a.gtile:hover .gtile__zoom,
a.gtile:focus-visible .gtile__zoom { opacity: 1; transform: none; }
a.gtile:hover .gtile__cap,
a.gtile:focus-visible .gtile__cap { color: var(--rose-600); }
a.gtile:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 3px; }

/* No photo yet: dashed card with a large "?" */
.gtile--missing { cursor: default; }
.gtile--missing .gtile__frame {
  display: grid; place-items: center;
  background: repeating-linear-gradient(-45deg, var(--blush-100) 0 10px, var(--white) 10px 20px);
  border: 1.5px dashed var(--blush-300);
}
.gtile--missing .gtile__frame::after { content: none; }
.gtile__q {
  font-family: var(--font-display); font-style: italic; font-weight: 600;
  font-size: clamp(3rem, 8vw, 4.75rem); line-height: 1; color: var(--rose-400);
}
.gtile--missing .gtile__num { color: var(--muted); }
.gtile--missing .gtile__cap { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .gtile__frame img, .gtile__zoom, .gtile__cap { transition: none; }
  a.gtile:hover .gtile__frame img { transform: none; }
}

/* ==========================================================================
   20. LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: rgba(14, 15, 22, .95);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox__img {
  max-width: 100%; max-height: 72vh; width: auto; height: auto;
  margin-inline: auto; object-fit: contain; background: var(--plum-800);
}
.lightbox__caption { margin-top: var(--sp-3); color: var(--white); font-size: .95rem; }
.lightbox__count { margin: .35rem 0 0; color: rgba(255, 255, 255, .55); font-size: .78rem; }

.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 0; color: var(--white); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.lightbox__btn svg { width: 18px; height: 18px; fill: currentColor; }
.lightbox__close { top: clamp(.75rem, 3vw, 2rem); right: clamp(.75rem, 3vw, 2rem); }
.lightbox__prev  { left: clamp(.5rem, 2vw, 2rem);  top: 50%; transform: translateY(-50%); font-size: 1.5rem; }
.lightbox__next  { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); font-size: 1.5rem; }

/* ==========================================================================
   21. SERVICE DETAIL ROWS
   ========================================================================== */
.svc {
  display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
  padding-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
@media (min-width: 880px) {
  .svc { grid-template-columns: 1fr 1fr; }
  .svc--flip > :first-child { order: 2; }
}
.svc__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.svc__price {
  display: inline-flex; align-items: baseline; gap: .5rem;
  margin-bottom: var(--sp-2);
  font-family: var(--font-display); font-size: 1.35rem; color: var(--rose-700);
}
.svc__price span { font-family: var(--font-sans); font-size: .73rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.svc p { font-size: .92rem; }

/* ==========================================================================
   22. FORM
   ========================================================================== */
.form { display: grid; gap: var(--sp-4); }
.form__row { display: grid; gap: var(--sp-4); }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block; margin-bottom: .3rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--plum-800);
}
.field .req { color: var(--rose-600); }
.field .hint { font-weight: 400; color: var(--muted); }

.field input, .field select, .field textarea {
  width: 100%; padding: .65rem .8rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 0;
  font-family: var(--font-sans); font-size: .92rem; color: var(--ink);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(255, 63, 108, .18);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C0392B; }
.field__error { display: block; margin-top: .25rem; font-size: .78rem; color: #C0392B; min-height: 1em; }

/* The honeypot: a real field, visually removed. Hidden with position rather
   than display:none because some bots skip fields that are display:none. */
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: 0; font-size: .88rem; font-weight: 600; }
.form__status.is-ok { color: #1E8449; }
.form__status.is-bad { color: #C0392B; }

/* ==========================================================================
   23. SMALL BLOCKS
   ========================================================================== */
.notice {
  padding: var(--sp-4);
  background: var(--blush-100); border-left: 3px solid var(--rose-500);
  font-size: .86rem; color: var(--muted);
}
.notice strong { color: var(--plum-900); }

.checklist { list-style: none; display: grid; gap: .55rem; margin-top: var(--sp-4); }
.checklist li { position: relative; padding-left: 1.6rem; font-size: .9rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 10px; height: 5.5px;
  border-left: 2px solid var(--rose-500); border-bottom: 2px solid var(--rose-500);
  transform: rotate(-45deg);
}
.section--dark .checklist li::before { border-color: var(--rose-400); }

.prose p { font-size: .95rem; }
.prose h2 { margin-top: var(--sp-6); }
.prose h2:first-child { margin-top: 0; }

/* ==========================================================================
   24. LOCATION PAGES — photo bands, directions, related links
   ========================================================================== */

/* A band of square photographs. Each one links to the gallery, so the band
   doubles as internal linking rather than being decoration only. */
.band { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .band { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .band { grid-template-columns: repeat(5, 1fr); } }
/* Always 2x2: this variant only ever sits inside a half-width split column,
   where four across would render thumbnails barely 100px wide. */
.band--4 { grid-template-columns: repeat(2, 1fr); }

.band a {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 1 / 1; background: var(--blush-200);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.band a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); z-index: 2; }
.band img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.band a:hover img { transform: scale(1.07); }

/* Staggered reveal: each child starts a beat after the one before it, so a
   band arrives as a wave instead of all at once. Delay only — the animation
   itself is still just opacity and transform. */
.js .stagger > [data-reveal]:nth-child(1)  { transition-delay: .00s; }
.js .stagger > [data-reveal]:nth-child(2)  { transition-delay: .04s; }
.js .stagger > [data-reveal]:nth-child(3)  { transition-delay: .08s; }
.js .stagger > [data-reveal]:nth-child(4)  { transition-delay: .12s; }
.js .stagger > [data-reveal]:nth-child(5)  { transition-delay: .16s; }
.js .stagger > [data-reveal]:nth-child(6)  { transition-delay: .20s; }
.js .stagger > [data-reveal]:nth-child(7)  { transition-delay: .24s; }
.js .stagger > [data-reveal]:nth-child(8)  { transition-delay: .28s; }
.js .stagger > [data-reveal]:nth-child(9)  { transition-delay: .32s; }
.js .stagger > [data-reveal]:nth-child(10) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .js .stagger > [data-reveal] { transition-delay: 0s !important; }
}

/* Routes and travel times */
.dirs { list-style: none; background: var(--white); border: 1px solid var(--line); }
.dirs li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: .7rem var(--sp-4);
  border-bottom: 1px solid var(--line-soft); font-size: .9rem;
}
.dirs li:last-child { border-bottom: 0; }
.dirs li:nth-child(odd) { background: var(--blush-50); }
.dirs strong { font-weight: 600; color: var(--plum-900); }
.dirs .time { flex: none; font-weight: 700; color: var(--rose-700); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* "Coming from somewhere else?" cross-links between the location pages */
.related { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.related a {
  display: inline-block; padding: .45rem 1rem;
  background: var(--white); border: 1px solid var(--line);
  font-size: .84rem; font-weight: 600; color: var(--plum-800); text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.related a:hover { background: var(--blush-200); border-color: var(--rose-400); color: var(--rose-700); }

/* A two-up photo pair used inside text columns */
.pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-4); }
.pair img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Numbered planner rows (layover timing, visit planning) */
.plan-rows { list-style: none; counter-reset: pr; display: grid; gap: var(--sp-3); }
.plan-rows li {
  counter-increment: pr; position: relative;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) 3.25rem;
  background: var(--white); border: 1px solid var(--line);
}
.plan-rows li::before {
  content: counter(pr, decimal-leading-zero);
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  font-family: var(--font-display); font-size: 1rem; color: var(--rose-600);
}
.plan-rows h3 { font-size: .95rem; margin-bottom: .25rem; }
.plan-rows p { font-size: .86rem; color: var(--muted); margin: 0; }

/* ==========================================================================
   16. PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .topbar, .header, .drawer, .float-cta, .hero__bg, .cta { display: none !important; }
  body { padding: 0; background: #fff; }
  .faq__a { grid-template-rows: 1fr !important; }
}

.team__more { text-align: center; margin-top: var(--sp-5); }
.team__note {
  text-align: center; margin-top: var(--sp-3);
  font-size: .8rem; color: var(--muted);
}

/* ==========================================================================
   SIDE TABS + SCROLL TO TOP (same as css/home.css)
   ========================================================================== */
.side-tab {
  position: fixed; top: 50%; z-index: 94;
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  padding: 1rem .6rem;
  color: var(--white); text-decoration: none; border-radius: 0;
  font-family: var(--font-sans); font-size: .85rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  translate: 0 -50%;
  transition: padding .2s var(--ease), background-color .2s var(--ease);
}
.side-tab:hover { color: var(--white); }
.side-tab__text { writing-mode: vertical-rl; transform: rotate(180deg); }
.side-tab__arrow { width: 0; height: 0; border-block: 6px solid transparent; }
.side-tab--left  { left: 0; }
.side-tab--left:hover  { padding-left: .8rem; }
.side-tab--left .side-tab__arrow  { border-left: 7px solid currentColor; }
.side-tab--right { right: 0; }
.side-tab--right:hover { padding-right: .8rem; }
.side-tab--right .side-tab__arrow { border-right: 7px solid currentColor; }

/* Couples offer: pink tab on the right */
.side-tab--offer { background: var(--rose-500); }
.side-tab--offer:hover { background: var(--rose-700); }

/* Floating gallery button: dark pill, bottom left */
.gallery-fab {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 95;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .4rem 1.15rem .4rem .4rem;
  border-radius: 999px;
  background: #1C1D22; color: #fff; text-decoration: none;
  font-family: var(--font-sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.gallery-fab:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .34); }
.gallery-fab__icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(212, 175, 106, .6); background: rgba(212, 175, 106, .12); color: #D4AF6A;
}
.gallery-fab__icon svg { width: 18px; height: 18px; }
@media (max-width: 600px) { .gallery-fab { left: 12px; } }
@media print { .gallery-fab { display: none !important; } }
@media (max-width: 600px) {
  /* Smaller and lower on phones so the tabs stay clear of the banner text */
  .side-tab { top: 58%; padding: .6rem .3rem; font-size: .62rem; gap: .35rem; letter-spacing: .04em; }
}

.to-top {
  position: fixed; right: 21px; bottom: calc(148px + env(safe-area-inset-bottom)); z-index: 95;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--blush-200); border-radius: 0;
  background: var(--white); color: var(--rose-600); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .25s var(--ease), translate .25s var(--ease), visibility .25s, background-color .2s;
}
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--rose-600); color: var(--white); }
.to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
@media (max-width: 600px) { .to-top { right: 15px; bottom: calc(136px + env(safe-area-inset-bottom)); } }

@media print { .side-tab, .to-top { display: none !important; } }

/* Prices and numbers in Poppins bold: Playfair Display draws old-style digits
   (uneven heights), and Myntra shows prices in a bold sans-serif */
.tcard__rate,
.card__price,
.steps li::before,
.plan__price,
.rates td:last-child,
.svc__price,
.plan-rows li::before { font-family: var(--font-sans); font-weight: 700; }