/* ==========================================================================
   Kerala Ayurvedic Panchakarma Centre — Main stylesheet
   CIAMETECH Private Limited · 2026
   --------------------------------------------------------------------------
   Design direction: photography-led, light warm canvas, deep emerald reserved
   for the header, footer and a single accent band. Green is an accent here,
   not a background slab — that is what separates this from a 2015 template.

   Structure:
     01. Design tokens
     02. Reset & base
     03. Accessibility helpers
     04. Layout primitives
     05. Kerala motifs & ornaments
     06. Buttons
     07. Site header & navigation
     08. Heroes (photo-led)
     09. Trust strip & stat band
     10. Section headers & prose
     11. Cards & grids
     12. Split sections & figures
     13. Panels
     14. Forms
     15. Location block
     16. Footer
     17. Floating contact actions
     18. Utilities & motion
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */

:root {
  /* --- Colour: Kerala Ayurveda palette ---
     The greens were re-cut cooler and deeper than the original spec: the old
     #1B3A2F sat close to olive and read muddy behind photography. These hold
     their richness next to warm skin tones and brass. */
  --color-forest: #2A6E56;          /* Primary dark — deep Kerala emerald */
  --color-forest-deep: #1B5240;     /* Header, footer, deepest surfaces */
  --color-forest-soft: #31795F;     /* Raised surfaces on dark */
  --color-turmeric: #C8872A;        /* Accent gold — warm, traditional */
  --color-turmeric-light: #EFB55A;  /* Brighter gold — text/icons on dark */
  /* #EFB55A is only 3.30:1 on --color-forest, so it fails AA as small text on
     the green sections (it is fine as an icon or on the much darker header
     scrim). This is the same gold walked 56% toward cream — the least change
     that clears 4.5:1, measured at 4.56:1. */
  --color-turmeric-on-forest: #F6DCB1;
  --color-turmeric-deep: #A66E1C;   /* Gold that passes AA as text on white (4.35:1) */
  --color-terracotta: #B5562F;      /* Secondary accent — earthy */
  --color-terracotta-deep: #8F3F1E; /* Accent TEXT on light bg (AA: 6.7:1) */
  --color-sage: #6B8F71;            /* Soft green — positive states */
  --color-cream: #FCFAF5;           /* Page background */
  --color-paper: #F4EFE4;           /* Section/card backgrounds */
  --color-paper-deep: #EAE1CE;      /* Deeper warm tint */
  --color-ink: #16241E;             /* Primary text */
  --color-ink-soft: #3D5045;        /* Secondary text (AA: 8.0:1) */
  --color-line: rgba(22, 36, 30, 0.13);
  --color-line-strong: rgba(22, 36, 30, 0.24);
  --color-line-light: rgba(252, 250, 245, 0.16);
  --color-white: #FFFFFF;

  /* Photographic scrim — deliberately NOT the brand green. Near-black with a
     green cast, so it deepens the image rather than washing colour over it. */
  --scrim: 16, 56, 41;

  /* --- Typography --- */
  --font-display: 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Fluid modular scale, roughly a 1.25 (major third) ratio. Each step
     interpolates between a comfortable mobile size and a desktop size, so
     there are no breakpoint jumps in the type. Body sits at 17px on desktop
     — 16px is the web floor, and long-form medical copy reads better a
     notch above it. */
  --text-xs:   0.75rem;                            /* 12px — labels, legal */
  --text-sm:   0.875rem;                           /* 14px — UI, captions  */
  --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);   /* 16 → 17px    */
  --text-lg:   clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem); /* 17 → 19px    */
  --text-xl:   clamp(1.1875rem, 1.11rem + 0.36vw, 1.3125rem);
  --text-2xl:  clamp(1.375rem, 1.24rem + 0.6vw, 1.625rem);
  --text-3xl:  clamp(1.625rem, 1.4rem + 1.05vw, 2.125rem);
  --text-4xl:  clamp(1.875rem, 1.5rem + 1.7vw, 2.625rem);
  --text-5xl:  clamp(2.125rem, 1.6rem + 2.4vw, 3.25rem);
  --text-hero: clamp(2.25rem, 1.7rem + 2.9vw, 3.75rem);

  /* Line lengths. Prose caps at ~68 characters, the readable range for
     body text; lead paragraphs run slightly shorter. */
  --measure: 68ch;
  --measure-lead: 56ch;

  /* --- Spacing (8px base grid) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;   /* was referenced with a var() fallback but never declared */
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Radii, shadows, layout --- */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-soft: 0 1px 2px rgba(22, 36, 30, 0.04), 0 8px 24px -12px rgba(22, 36, 30, 0.12);
  --shadow-lift: 0 2px 6px rgba(22, 36, 30, 0.05), 0 24px 48px -20px rgba(22, 36, 30, 0.22);
  --shadow-raise: 0 4px 10px rgba(22, 36, 30, 0.06), 0 32px 64px -24px rgba(22, 36, 30, 0.3);
  --shadow-media: 0 30px 60px -30px rgba(27, 82, 64, 0.45);
  --wrap: 1200px;
  --header-h: 78px;

  --motif-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C8872A' stroke-width='1.1'%3E%3Cpath d='M36 10c10 8 15 16 15 24s-6.7 14-15 14-15-6-15-14 5-16 15-24z'/%3E%3Cpath d='M36 12v34'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  /* Lining, proportionally spaced numerals — phone numbers and years read
     evenly instead of bouncing on the baseline */
  font-variant-numeric: lining-nums proportional-nums;
}

/* Avoids single-word last lines in body copy where the browser supports it */
p, li, dd { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  color: var(--color-ink);
  letter-spacing: -0.022em;
  /* Stops headings breaking with one orphaned word on the last line */
  text-wrap: balance;
}
h3, h4 { line-height: 1.25; }

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-xl); letter-spacing: -0.012em; }
h4 { font-size: var(--text-lg); letter-spacing: -0.012em; }

/* Playfair is a high-contrast display face — its thin strokes break up below
   roughly 20px on a standard-density screen. Anything smaller uses Inter at
   600, which holds its colour at small sizes. */
h4,
.faq-item summary,
.related-card .related-name {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -0.008em;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-terracotta-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-terracotta); }

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

/* Safety net for inline icons.

   Every icon on this site is an inline <svg> with a viewBox and no width or
   height attribute, which means it has no intrinsic size: dropped into a flex
   or grid container it will happily stretch to fill it. That is exactly what
   happened in the mobile menu, where the one icon nobody had written a sizing
   rule for rendered at 220x220 and filled the panel with a giant telephone.

   Rather than chase each icon, this gives every SVG a sane default. It is a
   bare element selector, so all 30-odd specific rules (.header-phone svg,
   .contact-list svg, .trust-mark svg, and the rest) still win — this only
   catches the ones nobody remembered. Any future icon dropped into new markup
   is now 18px by default instead of enormous. */
svg { width: 18px; height: 18px; flex: none; }

/* A focus ring is a non-text element, so WCAG 1.4.11 asks for 3:1 against what
   sits beside it. A single colour cannot do that here: this site puts focusable
   things on cream, on dark green, on photographs, and on solid gold buttons.
   The brand gold managed only 2.82–2.99 on cream and 1.43 on a gold button —
   a ring you can lose is not a ring.

   So the indicator is two concentric rings, cream inside and near-black
   outside. Whatever sits underneath, one of the two contrasts hard against it
   (and the pair contrast 15:1 with each other), so the ring is always legible.
   The transparent outline is deliberate: box-shadow is dropped in Windows
   High Contrast mode, and the outline is what survives there.                */
:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--color-cream), 0 0 0 6px var(--color-ink);
  border-radius: var(--radius-sm);
}

::selection { background: rgba(200, 135, 42, 0.28); }

/* ==========================================================================
   03. ACCESSIBILITY HELPERS
   ========================================================================== */

.skip-link {
  position: fixed;
  left: var(--space-4);
  top: -100px;
  z-index: 200;
  padding: var(--space-3) var(--space-6);
  background: var(--color-turmeric);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 0; color: var(--color-ink); }

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.section { padding-block: var(--space-24); }
.section--paper { background: var(--color-paper); }
.section--forest { background: var(--color-forest); color: var(--color-cream); }
.section--forest h2,
.section--forest h3 { color: var(--color-cream); }

@media (max-width: 700px) {
  .section { padding-block: var(--space-16); }
}

/* ==========================================================================
   05. KERALA MOTIFS & ORNAMENTS
   ========================================================================== */

.has-motif { position: relative; isolation: isolate; }
.has-motif::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--motif-leaf);
  background-size: 78px 78px;
  opacity: 0.045;
  pointer-events: none;
}
.section--forest.has-motif::before { opacity: 0.08; }

.rule {
  display: block;
  width: 52px;
  height: 2px;
  background: var(--color-turmeric);
  border-radius: 2px;
  margin-bottom: var(--space-4);
}
.rule--center { margin-inline: auto; }


/* ==========================================================================
   06. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  min-height: 52px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold {
  background: var(--color-turmeric);
  color: var(--color-ink);
  box-shadow: 0 6px 20px -8px rgba(200, 135, 42, 0.7);
}
.btn--gold:hover {
  background: var(--color-turmeric-light);
  color: var(--color-ink);
  box-shadow: 0 10px 28px -8px rgba(200, 135, 42, 0.8);
}

/* Frosted secondary — sits over photography */
.btn--outline-light {
  background: rgba(252, 250, 245, 0.1);
  color: var(--color-white);
  border-color: rgba(252, 250, 245, 0.45);
  backdrop-filter: blur(6px);
}
.btn--outline-light:hover {
  background: rgba(252, 250, 245, 0.2);
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--outline {
  background: transparent;
  color: var(--color-forest);
  border-color: var(--color-line-strong);
}
.btn--outline:hover {
  background: var(--color-white);
  border-color: var(--color-forest);
  color: var(--color-forest);
  box-shadow: var(--shadow-soft);
}

.btn--sm { min-height: 42px; padding: var(--space-2) var(--space-6); font-size: var(--text-sm); white-space: nowrap; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.btn-row--center { justify-content: center; }

.btn svg { width: 18px; height: 18px; flex: none; }

/* ==========================================================================
   07. SITE HEADER & NAVIGATION
   Fixed and transparent over the hero photograph, solidifying on scroll.
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
/* Scrim so the logo stays legible over a bright photograph */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--scrim), 0.8), rgba(var(--scrim), 0));
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.site-header.scrolled {
  background: rgba(27, 82, 64, 0.94);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(200, 135, 42, 0.28);
  box-shadow: 0 8px 32px -18px rgba(27, 82, 64, 0.9);
}
.site-header.scrolled::before { opacity: 0; }

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--header-h);
  padding-block: var(--space-3);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  min-width: 0;
}
.brand-mark { flex: none; color: var(--color-turmeric-light); display: block; }
.brand-mark svg { width: 32px; height: 32px; display: block; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.brand-sub {
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* 10px gold over the hero photo measured 4.05:1; the paler gold gives 5.59:1
     and still reads as gold rather than white. */
  color: var(--color-turmeric-on-forest);
  margin-top: 3px;
  /* The lockup must stay two lines. Left free it wrapped to four, which
     inflated the header and threw it out of balance with the nav. */
  white-space: nowrap;
}

/* nowrap keeps the lockup tidy on a wide screen, but on a narrow one it stops
   being a tagline and becomes a truncation: at 412px the line needs 310px and
   has 250px, so it was cutting through the middle of "Visakhapatnam". A phrase
   sliced mid-word reads as a broken page, not a subtitle.

   Below 560px the sub-line is dropped entirely and the centre's name carries
   the header on its own. Nothing is lost — "Traditional Kerala Ayurveda" leads
   the hero directly underneath, and Visakhapatnam appears in the hero heading,
   the address and the footer. */
@media (max-width: 560px) {
  .brand-sub { display: none; }
}

.nav-desktop { display: none; }
.nav-desktop ul { display: flex; align-items: center; gap: var(--space-8); }
.nav-desktop a {
  position: relative;
  color: rgba(252, 250, 245, 0.86);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  padding-block: var(--space-2);
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav-desktop a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-turmeric);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.24s ease;
}
.nav-desktop a:hover { color: var(--color-white); }
.nav-desktop a:hover::after { transform: scaleX(1); }
.nav-desktop a[aria-current="page"] { color: var(--color-turmeric-light); }
.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }

.header-cta { display: none; align-items: center; gap: var(--space-5, 1.25rem); }
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  margin-right: var(--space-2);
}
.header-phone:hover { color: var(--color-turmeric-light); }
.header-phone svg { width: 16px; height: 16px; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  background: rgba(252, 250, 245, 0.1);
  border: 1px solid rgba(252, 250, 245, 0.3);
  border-radius: 999px;
  color: var(--color-white);
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-mobile {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 99;
  background: var(--color-forest-deep);
  overflow-y: auto;
  padding: var(--space-8) 0 var(--space-16);
}
.nav-mobile.open { display: block; }
body.nav-open { overflow: hidden; }

.nav-mobile .nav-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  background: rgba(200, 135, 42, 0.14);
  border: 1px solid rgba(200, 135, 42, 0.38);
  border-radius: var(--radius);
  /* 17px at weight 600 is not "large text" under WCAG, so this needs the full
     4.5:1. The brand gold measured 4.31:1 against the gold-tinted panel it sits
     on — near enough to look fine and still a failure. The paler gold reaches
     5.95:1 and stays unmistakably gold. */
  color: var(--color-turmeric-on-forest);
  font-size: var(--text-lg);
  font-weight: 600;
  text-decoration: none;
}
/* An inline SVG with a viewBox and no width has no intrinsic size — it takes
   whatever the flex container will give it. Every other icon on the site is
   sized by a rule like .header-phone svg; this one had none, so inside a
   full-width flex row it grew to 220x220 and filled the open menu with a
   giant telephone. flex: none stops it being stretched again. */
.nav-mobile .nav-phone svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.nav-mobile ul { margin-bottom: var(--space-8); }
.nav-mobile li + li { border-top: 1px solid var(--color-line-light); }
.nav-mobile a.nav-link {
  display: block;
  padding: var(--space-4) var(--space-2);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-decoration: none;
}
.nav-mobile a.nav-link:hover,
.nav-mobile a.nav-link[aria-current="page"] { color: var(--color-turmeric-light); }

@media (min-width: 1080px) {
  .nav-desktop { display: block; }
  .header-cta { display: flex; }
  .nav-toggle { display: none; }
  .nav-mobile { display: none !important; }
  .brand-mark svg { width: 36px; height: 36px; }
  /* Hold the name on a single line once there is room, so the lockup is one
     line of name over one line of location. */
  .brand-name { white-space: nowrap; }
  .nav-desktop ul { gap: var(--space-6); }
}
/* Below 1240px the full name needs two lines; keep the location on one. */
@media (min-width: 1080px) and (max-width: 1239px) {
  .brand-name { white-space: normal; max-width: 22ch; }
}

/* ==========================================================================
   08. HEROES — photography-led
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-forest-deep);
  color: var(--color-white);
  padding-top: calc(var(--header-h) + var(--space-20));
  padding-bottom: var(--space-20);
}

/* The photograph itself, plus the scrim that keeps type readable over it */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* A pool of shade behind the type, not a flat band across half the frame.
       The previous horizontal-only scrim sat at 0.84-0.92 opacity over nearly
       half the hero, which stops darkening a photograph and starts painting
       over it — the room behind went flat. Concentrating the density where the
       text actually sits holds legibility while letting the photo breathe. */
    /* Peak and floor opacities were not chosen by eye. Both were swept against
       the real photograph, measuring white-text contrast where each line of
       type actually sits against how much tonal range of the room survives.
       0.80 / 0.20 is the point that shows the most photograph while the lead
       paragraph still clears 5.6:1 — well above the 4.5 AA floor. Raising
       them buys contrast nobody needs and costs the picture. */
    radial-gradient(ellipse 80% 115% at 24% 52%,
      rgba(var(--scrim), 0.80) 0%,
      rgba(var(--scrim), 0.70) 40%,
      rgba(var(--scrim), 0.34) 66%,
      rgba(var(--scrim), 0) 84%),
    /* floor across the frame: carries the green, stops the right blowing out */
    linear-gradient(100deg,
      rgba(var(--scrim), 0.20) 0%,
      rgba(var(--scrim), 0.12) 55%,
      rgba(var(--scrim), 0.044) 85%,
      rgba(var(--scrim), 0.02) 100%),
    /* Band beneath the fixed header so the logo stays legible over any image.
       Was 0.45 to 24%. Sampling the composited pixels behind each header
       element found the phone link at the far right sitting over a patch of
       the photograph bright enough (125,140,127) to hold it at 3.54:1 — and
       that text is already pure white, so no colour change could rescue it.
       0.66 fading at 34% lifts it to 5.11:1. The band is confined to the
       header, so the photograph below it is untouched. */
    linear-gradient(180deg, rgba(var(--scrim), 0.66) 0%, transparent 34%);
  pointer-events: none;
}

.hero-inner {
  max-width: var(--wrap);
  margin-inline: auto;
}
.hero-inner > * { max-width: 62ch; }
.hero-inner > h1 { max-width: 19ch; }

/* Imperceptible on its own, but it keeps white type crisp where a bright
   part of the photograph falls behind a letterform. */
.hero h1,
.hero-lead,
.treatment-hero h1,
.treatment-hero .treatment-intro { text-shadow: 0 1px 3px rgba(var(--scrim), 0.55); }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
  background: rgba(252, 250, 245, 0.1);
  border: 1px solid rgba(239, 181, 90, 0.4);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* 12px gold over the hero photo measured 3.51:1 — the paler gold gives 4.85:1 */
  color: var(--color-turmeric-on-forest);
  margin-bottom: var(--space-6);
}
.hero-eyebrow svg { width: 18px; height: 18px; flex: none; }

.hero h1 { color: var(--color-white); margin-bottom: var(--space-6); }

.hero-lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: rgba(252, 250, 245, 0.92);
  max-width: var(--measure-lead);
  margin-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .hero { padding-top: calc(var(--header-h) + var(--space-24)); padding-bottom: var(--space-24); }
  .hero-lead { font-size: var(--text-xl); }
}

/* Compact variant for interior pages */
.hero--page { padding-top: calc(var(--header-h) + var(--space-16)); padding-bottom: var(--space-16); }
.hero--page h1 { font-size: var(--text-5xl); }

/* ==========================================================================
   09. TRUST STRIP & STAT BAND
   ========================================================================== */

.trust-strip {
  /* Lightened at the client's request. #2A6E56 is the lightest the bar can go
     and still hold cream text comfortably — it measures 5.81:1, where the next
     step up (#38876B) drops to 4.15:1 and fails. Four times lighter than the
     scrim green it replaced.

     A gentle vertical gradient rather than one flat colour: a solid band of
     mid-green across the full width reads cheap, while a few percent of
     tonal fall gives it the depth of a painted surface. Gold hairlines top
     and bottom finish it — that thin rule is what makes a band look composed
     rather than dropped in. */
  background: linear-gradient(180deg, #2E7459 0%, var(--color-forest) 55%, #256049 100%);
  border-top: 1px solid rgba(239, 181, 90, 0.45);
  border-bottom: 1px solid rgba(239, 181, 90, 0.45);
  color: var(--color-cream);
}

.trust-strip ul {
  display: grid;
  gap: var(--space-3) var(--space-8);
  grid-template-columns: 1fr;
  padding-block: var(--space-6);
}
.trust-strip li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: rgba(252, 250, 245, 0.94);
}
.trust-strip svg { width: 18px; height: 18px; flex: none; color: var(--color-turmeric-light); margin-top: 3px; }

@media (min-width: 720px) { .trust-strip ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .trust-strip ul { grid-template-columns: repeat(4, 1fr); } }

.stat-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
}
@media (min-width: 700px) { .stat-band { grid-template-columns: repeat(3, 1fr); } }

.stat { text-align: center; }
.stat + .stat { border-top: 1px solid var(--color-line); padding-top: var(--space-8); }
@media (min-width: 700px) {
  .stat + .stat { border-top: 0; border-left: 1px solid var(--color-line); padding-top: 0; }
}
.stat-figure {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  /* Brand gold measures only 3.02:1 on white — technically a pass for large
     text, but too marginal for the headline numbers. This deeper gold is
     4.35:1 and reads as the same colour. */
  color: var(--color-turmeric-deep);
  letter-spacing: -0.03em;
}
.stat-label {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.stat-note { display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-ink-soft); }

/* ==========================================================================
   10. SECTION HEADERS & PROSE
   ========================================================================== */

.section-head { max-width: 44rem; margin-bottom: var(--space-12); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-terracotta-deep);
  margin-bottom: var(--space-3);
}
.section--forest .eyebrow { color: var(--color-turmeric-on-forest); }

.section-head h2 { margin-bottom: var(--space-4); }

.lead {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--color-ink-soft);
  max-width: var(--measure);
}
.section--forest .lead { color: rgba(252, 250, 245, 0.86); }

.prose { max-width: var(--measure); }
.prose p { color: var(--color-ink-soft); line-height: 1.85; }
.prose p + p { margin-top: var(--space-4); }
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); color: var(--color-ink); }
.prose h3:first-child { margin-top: 0; }

.list-leaf li {
  position: relative;
  padding-left: var(--space-8);
  margin-bottom: var(--space-4);
  color: var(--color-ink-soft);
  line-height: 1.8;
}
.list-leaf li:last-child { margin-bottom: 0; }
.list-leaf li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 10px;
  border-radius: 10px 0 10px 0;
  background: var(--color-turmeric);
  transform: rotate(-12deg);
}
.section--forest .list-leaf li { color: rgba(252, 250, 245, 0.88); }
.section--forest .list-leaf li::before { background: var(--color-turmeric-light); }

/* ==========================================================================
   11. CARDS & GRIDS
   ========================================================================== */

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

@media (min-width: 640px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.card h3 { margin-bottom: var(--space-2); }
.card p { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.75; }

.section--forest .card {
  background: var(--color-forest-soft);
  border-color: rgba(200, 135, 42, 0.26);
  box-shadow: none;
}
.section--forest .card h3 { color: var(--color-cream); }
/* 0.82 measured 3.94:1 on --color-forest-soft; 0.94 clears AA at 4.6:1. */
.section--forest .card p { color: rgba(252, 250, 245, 0.94); }
.section--forest .card-icon .icon-badge {
  color: var(--color-turmeric-light);
  border-color: rgba(200, 135, 42, 0.44);
}

/* Condition card — light, editorial, with a gold edge that fills on hover.
   Deliberately not a dark green tile: twelve dark slabs in a grid is exactly
   the heavy, dated look we are moving away from. */
.card-condition {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-8);
  padding-left: calc(var(--space-8) - 3px);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-paper-deep);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-ink);
  overflow: hidden;
  transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.card-condition:hover,
.card-condition:focus-visible {
  transform: translateY(-8px);
  border-color: var(--color-line);
  border-left-color: var(--color-turmeric);
  box-shadow: var(--shadow-raise);
  color: var(--color-ink);
}
.card-condition h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card-condition p {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-6);
}
.card-condition .card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-terracotta-deep);
}
.card-condition .card-link svg { width: 16px; height: 16px; transition: transform 0.24s ease; }
.card-condition:hover .card-link svg { transform: translateX(5px); }

/* --- Condition groups ----------------------------------------------------
   Four labelled families rather than one twelve-card wall. Someone in pain
   scans for their own category first, then the specific condition. */
.condition-group + .condition-group { margin-top: var(--space-16); }
/* auto-fit rather than a fixed column count, so a group of four fills the row
   evenly and no card is ever left sitting alone in a wide empty grid. */
.group-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-line);
}
.group-head h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-ink);
}
.group-head p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; }

/* --- Proof list ----------------------------------------------------------
   Verifiable facts standing in for testimonials we have not earned the right
   to publish yet. */
.proof-list li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5, 1.25rem) 0;
  border-bottom: 1px solid var(--color-line);
}
.proof-list li:last-child { border-bottom: 0; }
.proof-list svg {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 3px;
  padding: 4px;
  color: var(--color-white);
  background: var(--color-sage);
  border-radius: 999px;
}
.proof-list strong {
  display: block;
  color: var(--color-ink);
  font-weight: 600;
  margin-bottom: var(--space-1);
}
.proof-list div { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.7; }

/* --- What happens next ---------------------------------------------------
   Removes the "what am I actually signing up for?" hesitation before the
   enquiry form. */
.next-steps { counter-reset: nstep; display: grid; gap: var(--space-4); }
@media (min-width: 760px) { .next-steps { grid-template-columns: repeat(3, 1fr); } }
.next-steps li {
  counter-increment: nstep;
  padding: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}
.next-steps li::before {
  content: counter(nstep);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  margin-bottom: var(--space-4);
  background: rgba(200, 135, 42, 0.16);
  border: 1px solid rgba(200, 135, 42, 0.42);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-terracotta-deep);
}
.next-steps strong { display: block; color: var(--color-ink); margin-bottom: var(--space-1); }
.next-steps li { color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.7; }

/* Condition links in the footer — real internal linking, and a way to reach
   any treatment page from anywhere on the site. */
.footer-conditions {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2) var(--space-6);
}
@media (min-width: 560px) { .footer-conditions { grid-template-columns: repeat(2, 1fr); } }
.footer-conditions li { margin: 0; }
/* Same reasoning as .footer-links — the row gap becomes tappable padding. */
.footer-conditions a { display: block; font-size: var(--text-sm); line-height: 1.9; padding-block: 5px; }

.card-icon .icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: var(--space-5, 1.25rem);
  background: rgba(200, 135, 42, 0.14);
  border: 1px solid rgba(200, 135, 42, 0.32);
  border-radius: 999px;
  color: var(--color-terracotta-deep);
  flex: none;
}
.card-icon .icon-badge svg { width: 21px; height: 21px; }

/* ==========================================================================
   12. SPLIT SECTIONS & FIGURES
   ========================================================================== */

.split {
  display: grid;
  gap: var(--space-12);
  align-items: center;
  /* minmax(0, 1fr), not 1fr. A bare 1fr track carries an implicit "auto"
     minimum, so it refuses to shrink below its content's min-content width —
     at a 320px viewport the track blew out to 311px inside a 262px container
     and pushed the page into horizontal scroll. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
  .split--media-right > :first-child { order: 1; }
  .split--media-right > :last-child { order: 2; }
}

/* Photograph frame. aspect-ratio + width/height on the <img> means the space
   is reserved before the image loads, so nothing shifts. */
.figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-media);
  background: var(--color-paper-deep);
}
.figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Small gold corner detail — a nod to the brass fittings in the photographs */
.figure::after {
  content: '';
  position: absolute;
  left: var(--space-6); bottom: var(--space-6);
  width: 44px; height: 44px;
  border-left: 2px solid var(--color-turmeric);
  border-bottom: 2px solid var(--color-turmeric);
  border-bottom-left-radius: var(--radius-sm);
  opacity: 0.85;
  pointer-events: none;
}

.figure-caption {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

/* ==========================================================================
   13. PANELS
   ========================================================================== */

.panel {
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-turmeric);
  border-radius: var(--radius);
}
.panel h3 { margin-bottom: var(--space-3); }
.panel p { color: var(--color-ink-soft); }


.notice {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(107, 143, 113, 0.12);
  border: 1px solid rgba(107, 143, 113, 0.4);
  border-radius: var(--radius);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.8;
}
.notice svg { width: 22px; height: 22px; flex: none; color: var(--color-sage); margin-top: 3px; }
.notice strong { color: var(--color-ink); }

/* Red-flag variant — the "see a doctor first" box on every condition page.
   Warmer and more urgent than the sage notice, without being alarming. */
.notice--alert {
  background: rgba(181, 86, 47, 0.09);
  border-color: rgba(181, 86, 47, 0.42);
}
.notice--alert svg { color: var(--color-terracotta-deep); }

/* Symptom self-check — "does this sound like you?".
   The recognition moment: a visitor in pain reads their own week back. */
.symptom-check { margin-top: var(--space-6); }
.symptom-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-3);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  color: var(--color-ink);
  line-height: 1.6;
}
.symptom-check li:last-child { margin-bottom: 0; }
.symptom-check svg {
  width: 20px; height: 20px;
  flex: none;
  margin-top: 4px;
  padding: 3px;
  color: var(--color-white);
  background: var(--color-sage);
  border-radius: 999px;
}

/* ==========================================================================
   14. FORMS
   ========================================================================== */

.form-card {
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
}
.form-card .form-lead {
  color: var(--color-ink-soft);
  line-height: 1.8;
  margin-bottom: var(--space-8);
}

.field { margin-bottom: var(--space-6); }
.field:last-of-type { margin-bottom: var(--space-8); }

.field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}
.field .hint {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

/* --- Pending value -------------------------------------------------------
   Marks a detail the clinic has not supplied yet. Deliberately visible — it
   should be obvious that nothing has been invented — but styled as an
   intentional state rather than a raw template token. Every one of these is
   paired with a CIAMETECH_CONFIRM comment in the HTML. */
.pending {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px var(--space-3) 3px var(--space-2);
  background: rgba(200, 135, 42, 0.12);
  border: 1px dashed rgba(200, 135, 42, 0.55);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-terracotta-deep);
  white-space: nowrap;
}
.pending-dot {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 999px;
  background: var(--color-turmeric);
}
/* On the dark footer the same chip needs a lighter treatment */
.site-footer .pending {
  background: rgba(239, 181, 90, 0.14);
  border-color: rgba(239, 181, 90, 0.5);
  color: var(--color-turmeric-light);
}
/* Wraps rather than overflows in the narrow treatment booking rail */
.rail-meta .pending,
.footer-contact .pending { white-space: normal; }

/* Telugu is outside both webfont subsets, so it renders in the reader's
   system Telugu face. Naming the stack keeps it from falling back to
   something with poor Telugu support. */
[lang="te"] {
  font-family: 'Noto Sans Telugu', 'Gautami', 'Nirmala UI', sans-serif;
  font-size: var(--text-sm);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  min-height: 52px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-cream);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.field textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233D5045' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-12);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-turmeric);
  box-shadow: 0 0 0 4px rgba(200, 135, 42, 0.18);
}

.field .error-text {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-terracotta-deep);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--color-terracotta); }
.field.has-error .error-text { display: block; }

.form-note {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.form-noscript {
  padding: var(--space-4);
  background: rgba(181, 86, 47, 0.1);
  border: 1px solid rgba(181, 86, 47, 0.4);
  border-radius: var(--radius);
}

.form-status {
  display: none;
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.form-status.is-visible { display: block; }
.form-status.is-ok {
  background: rgba(107, 143, 113, 0.16);
  border: 1px solid rgba(107, 143, 113, 0.5);
  color: var(--color-ink);
}
.form-status.is-error {
  background: rgba(181, 86, 47, 0.12);
  border: 1px solid rgba(181, 86, 47, 0.45);
  color: var(--color-ink);
}

/* ==========================================================================
   15. LOCATION BLOCK
   ========================================================================== */

.contact-list { margin-bottom: var(--space-8); }
.contact-list li {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}
.contact-list li:first-child { padding-top: 0; }
.contact-list svg { width: 20px; height: 20px; flex: none; color: var(--color-turmeric); margin-top: 4px; }
.contact-list .contact-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: 2px;
}
.contact-list .contact-value { font-size: var(--text-lg); color: var(--color-ink); font-weight: 600; }
.contact-list a.contact-value { text-decoration: none; color: var(--color-ink); }
.contact-list a.contact-value:hover { color: var(--color-terracotta-deep); }
/* Address runs to three lines, so it needs its own leading */
.contact-list .contact-value { line-height: 1.5; }
/* .hint only had display:block inside .field, so notes in the contact list ran
   on inline — "Monday to Saturday Closed on Sunday" read as one sentence. */
.contact-list .hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
/* 0.62 measured 4.42:1 — just under AA, which still counts as under. */
.closed-day { color: rgba(252, 250, 245, 0.66); font-size: var(--text-xs); }

/* Real map, now that the street address is confirmed — but not loaded until
   the visitor asks for it. See the note in build.js: the embed would otherwise
   hand the visitor's IP to Google before they had agreed to anything. The
   placeholder below occupies exactly the same 4/3 box as the iframe that
   replaces it, so the swap shifts nothing on the page. */
.map-consent {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--space-8);
  text-align: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(200, 135, 42, 0.10), transparent 62%),
    var(--color-paper);
}
.map-consent-inner { max-width: 42ch; }
.map-consent svg {
  width: 30px; height: 30px;
  color: var(--color-turmeric-deep);
  margin-bottom: var(--space-3);
}
.map-consent-address {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-ink);
  line-height: 1.45;
  margin: 0 0 var(--space-3);
}
.map-consent-note {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: 1.75;
  margin: 0 0 var(--space-6);
}
.map-consent-alt { margin: var(--space-5) 0 0; font-size: var(--text-sm); }
.map-consent-alt a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--color-terracotta-deep);
}
.map-consent-alt svg { width: 15px; height: 15px; margin: 0; color: currentColor; }

@media (max-width: 560px) {
  .map-consent { padding: var(--space-6); aspect-ratio: 3 / 4; }
}

.map-frame {
  margin: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--color-paper);
  box-shadow: var(--shadow-soft);
}
.map-frame iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  /* Google's default map is a cold blue-grey next to a warm page; a touch of
     saturation and warmth settles it into the palette without distorting it. */
  filter: saturate(0.9) sepia(0.06);
}
.map-frame figcaption {
  padding: var(--space-4) var(--space-6);
  background: var(--color-white);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: 1.6;
}
.map-frame figcaption a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  white-space: nowrap;
  /* "Open in Google Maps" is the one link a lost visitor most needs; at 22px it
     was the smallest target on the page. min-height gives it a thumb. */
  min-height: 32px;
}
.map-frame figcaption svg { width: 15px; height: 15px; }

@media (max-width: 700px) {
  .map-frame iframe { aspect-ratio: 1 / 1; }
}

/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-forest-deep);
  color: rgba(252, 250, 245, 0.82);
  padding-top: var(--space-20);
  font-size: var(--text-sm);
}
.footer-grid {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-16);
}
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr; } }
@media (min-width: 1080px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr; } }

.site-footer h2 {
  font-size: var(--text-2xl);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}
.site-footer h3 {
  font-size: var(--text-xs);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-turmeric-light);
  margin-bottom: var(--space-4);
}
.site-footer p { line-height: 1.8; }
.site-footer a { color: rgba(252, 250, 245, 0.82); text-decoration: none; }
.site-footer a:hover { color: var(--color-turmeric-light); }

.footer-tagline {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-turmeric-light);
  margin-bottom: var(--space-4);
}
/* The gap between these links used to live in the li's margin, which meant the
   tappable area was only the 17px line box — fine for a mouse, mean to a thumb.
   Moving the same space into the anchor's padding turns dead gap into target:
   ~31px tall instead of 17px, with the footer no taller than before. */
.footer-links li { margin-bottom: 0; }
.footer-links a { display: block; padding-block: 7px; }
.footer-contact li { margin-bottom: var(--space-4); line-height: 1.8; }
.footer-contact .pending { margin-top: var(--space-2); }
.footer-contact .contact-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* 0.56 measured 3.92:1 on the footer green — below the 4.5:1 AA floor. */
  color: rgba(252, 250, 245, 0.66);
  margin-bottom: 2px;
}


.footer-legal {
  border-top: 1px solid var(--color-line-light);
  padding-block: var(--space-8);
}
.footer-legal .disclaimer {
  font-size: var(--text-xs);
  line-height: 1.85;
  color: rgba(252, 250, 245, 0.66);
  max-width: 70rem;
  margin-bottom: var(--space-4);
}
.footer-legal .disclaimer strong { color: rgba(252, 250, 245, 0.9); }
/* 0.56 alpha measured 3.92:1 against the footer green — under the 4.5:1 AA
   floor for text this size. 0.64 lifts it clear without making the line shout
   louder than the disclaimer above it. */
.footer-legal .copyright { font-size: var(--text-xs); color: rgba(252, 250, 245, 0.64); margin: 0; }

/* Privacy, terms and accessibility. Statutory pages, so they sit with the
   disclaimer rather than in the main navigation — findable without competing
   with the pages a patient actually came for. The 44px min-height keeps them
   thumb-sized on a phone even though the type is small. */
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-xs);
  color: rgba(252, 250, 245, 0.72);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-legal-links a:hover,
.footer-legal-links a:focus-visible { color: var(--color-turmeric); }

/* ==========================================================================
   17. FLOATING CONTACT ACTIONS
   ========================================================================== */

.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  transition: transform 0.18s ease;
}
.fab:hover { transform: scale(1.05); }
.fab svg { width: 24px; height: 24px; }
.fab--whatsapp { background: var(--color-turmeric); color: var(--color-ink); }
.fab--whatsapp:hover { background: var(--color-turmeric-light); color: var(--color-ink); }
.fab--call { background: var(--color-forest); color: var(--color-white); }
.fab--call:hover { background: var(--color-forest-deep); color: var(--color-white); }

/* --- Mobile action bar ---------------------------------------------------
   On a phone, a persistent bottom bar converts far better than a floating
   bubble: it is thumb-reachable, always visible, and names the action.
   Below 720px it replaces the floating buttons entirely. */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: rgba(27, 82, 64, 0.97);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(200, 135, 42, 0.3);
  gap: var(--space-3);
}
.mobile-bar a {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 50px;
  border-radius: 999px;
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}
.mobile-bar svg { width: 18px; height: 18px; flex: none; }
.mobile-bar .bar-call {
  color: var(--color-white);
  border: 1px solid rgba(252, 250, 245, 0.42);
}
.mobile-bar .bar-whatsapp { background: var(--color-turmeric); color: var(--color-ink); }

@media (max-width: 719px) {
  .mobile-bar { display: flex; }
  .floating-actions { display: none; }
  /* Keep the bar from covering the last of the footer */
  body { padding-bottom: 78px; }
}

@media (min-width: 1080px) { .fab--call { display: none; } }

/* ==========================================================================
   18. UTILITIES & MOTION
   ========================================================================== */

.text-center { text-align: center; }
.mt-6 { margin-top: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-8 { margin-bottom: var(--space-8); }

.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   19. TRUST BAR
   --------------------------------------------------------------------------
   Sits directly above the footer on every page.

   Everything stated here is verifiable today. Accreditation marks (NABH,
   AYUSH registration, a BAMS-qualified practitioner) are deliberately NOT
   shown: this centre has not supplied evidence of holding any of them, and
   displaying an accreditation a clinic does not hold is a false claim to
   patients making health decisions. The moment the clinic provides a
   registration number, add it as a fourth item — see CONFIRM_CREDENTIALS.
   ========================================================================== */

.trust-bar {
  background: var(--color-paper);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding-block: var(--space-12);
}
/* This heading was meant to be screen-reader-only, but the class that hid it
   had been removed in a cleanup, so it rendered bare on all 18 pages. On
   seeing it, a visible heading is the better call — four claims with no
   heading above them float without context — so it is now a proper section
   head rather than an accident. */
.trust-bar-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--space-12);
}
.trust-bar-head h2 { font-size: var(--text-3xl); }

.trust-bar-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 620px) { .trust-bar-inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .trust-bar-inner { grid-template-columns: repeat(4, 1fr); } }

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.trust-item .trust-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  flex: none;
  color: var(--color-turmeric-deep);
  background: var(--color-white);
  border: 1px solid rgba(200, 135, 42, 0.4);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.trust-item .trust-mark svg { width: 26px; height: 26px; }
.trust-item b {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.35;
}
.trust-item span {
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  line-height: 1.6;
  max-width: 26ch;
}

/* ==========================================================================
   20. TREATMENT MATRIX
   --------------------------------------------------------------------------
   A real table on desktop; on narrow screens each row collapses into a card
   using the data-label attributes, so nothing is clipped and there is no
   awkward sideways scroll on a phone.

   Duration and price columns render as pending until the clinic confirms
   them. The clinic has asked that prices are not published, so the price
   column is built and styled but shows the agreed line instead of a figure.
   ========================================================================== */

.matrix-wrap {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.matrix caption {
  caption-side: top;
  padding: var(--space-6) var(--space-6) 0;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}
.matrix th,
.matrix td {
  padding: var(--space-4) var(--space-6);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}
.matrix thead th {
  background: var(--color-forest);
  color: var(--color-cream);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 0;
}
.matrix tbody tr:nth-child(odd) { background: var(--color-cream); }
.matrix tbody tr:hover { background: var(--color-paper); }
.matrix tbody tr:last-child td { border-bottom: 0; }
.matrix th[scope="row"] { font-weight: 600; color: var(--color-ink); }
/* inline-block + padding so the condition name is a comfortable target in the
   stacked mobile view, where this link is the whole row's way in */
.matrix th[scope="row"] a { display: inline-block; padding-block: 4px; color: var(--color-ink); text-decoration: none; }
.matrix th[scope="row"] a:hover { color: var(--color-terracotta-deep); text-decoration: underline; }
.matrix .matrix-note { color: var(--color-ink-soft); }

/* Below 780px the table becomes a stack of cards. Each cell prints its own
   column heading from data-label, so the meaning survives the reflow. */
@media (max-width: 779px) {
  .matrix, .matrix tbody, .matrix tr, .matrix td, .matrix th { display: block; width: 100%; }
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .matrix tbody tr {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-line);
  }
  .matrix tbody tr:last-child { border-bottom: 0; }
  .matrix th,
  .matrix td { border-bottom: 0; padding: var(--space-1) 0; }
  .matrix th[scope="row"] { font-size: var(--text-lg); margin-bottom: var(--space-2); }
  .matrix td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    margin-top: var(--space-2);
  }
}

/* ==========================================================================
   21. CROSS-PAGE VIEW TRANSITIONS
   --------------------------------------------------------------------------
   Two declarations turn seventeen separate HTML files into something that
   navigates like a single application: the page cross-fades instead of
   flashing white, and the header, mobile bar and floating buttons stay put
   across the change rather than blinking out and back.

   Supported in Chromium browsers; Safari and Firefox simply navigate as
   normal, so nothing is lost. This is a genuine progressive enhancement —
   no JavaScript, no framework, no router.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: 0.22s; animation-timing-function: ease-out; }
::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: ease-out; }

/* Named elements persist across the navigation instead of cross-fading */
.site-header      { view-transition-name: site-header; }
.mobile-bar       { view-transition-name: mobile-bar; }
.floating-actions { view-transition-name: floating-actions; }

/* ==========================================================================
   22. MATERIAL DETAIL
   ========================================================================== */

/* --- Film grain -----------------------------------------------------------
   A very fine noise layer over the dark sections. Flat expanses of colour are
   what make a page read as a template; a little grain gives the green the
   quality of dyed cloth or a printed page. Deliberately near the threshold of
   visibility — if you can consciously see it, it is too strong. */
.hero::before,
.treatment-hero::before,
.site-footer::after,
.trust-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.055;
  mix-blend-mode: overlay;
  z-index: -1;
}
.site-footer,
.trust-strip { position: relative; isolation: isolate; }
.site-footer::after,
.trust-strip::after { z-index: 0; }
.site-footer > *,
.trust-strip > * { position: relative; z-index: 1; }

/* --- Ken Burns ------------------------------------------------------------
   A very slow push on the hero photograph. Over half a minute it is not read
   as animation, only as a room that feels inhabited rather than a flat plate.
   Motion-sensitive visitors get a still image. */
@keyframes slow-push {
  from { transform: scale(1.015); }
  to   { transform: scale(1.075); }
}
.hero-media img {
  animation: slow-push 34s ease-out both;
  transform-origin: 55% 45%;
  will-change: transform;
}

/* --- Gold CTA sheen -------------------------------------------------------
   A soft highlight that travels across the primary button on hover. One
   moment of shine on the single most important control, nowhere else. */
.btn--gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--gold::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn--gold:hover::after { transform: translateX(120%); }

/* --- Prose links ----------------------------------------------------------
   The underline grows from the left rather than switching on. */
.prose a:not(.btn),
.faq-answer a:not(.btn) {
  text-decoration: none;
  background-image: linear-gradient(var(--color-turmeric), var(--color-turmeric));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
.prose a:not(.btn):hover,
.faq-answer a:not(.btn):hover { background-size: 100% 1.5px; }

/* --- Scrollbar ------------------------------------------------------------
   The browser default is a grey rectangle from another design system. */
@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--color-line-strong) transparent; scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--color-paper); }
::-webkit-scrollbar-thumb {
  background: var(--color-line-strong);
  border: 3px solid var(--color-paper);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-turmeric); }

/* ==========================================================================
   23. PRINT
   --------------------------------------------------------------------------
   Patients do print condition pages — to take to a doctor, or to give to the
   relative who will actually drive them. The default print output of a dark
   photographic site is unreadable and wastes a cartridge.
   ========================================================================== */

@media print {
  @page { margin: 18mm; }

  .site-header, .mobile-bar, .floating-actions, .hero-media,
  .breadcrumb, .trust-bar, .footer-grid, form, .btn { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }
  .hero, .treatment-hero, .section--forest {
    background: #fff !important;
    color: #000 !important;
    padding-block: 0 !important;
  }
  .hero h1, .treatment-hero h1, .hero-lead, .treatment-intro,
  .section--forest h2, .section--forest .lead { color: #000 !important; }
  .hero::after, .treatment-hero::after, .hero::before, .treatment-hero::before { display: none; }

  .section { padding-block: 12pt !important; }
  .figure, .card, .booking-rail, .pricing-note, .notice, .symptom-check li {
    border: 1pt solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  h1, h2, h3 { break-after: avoid; }
  .faq-item { break-inside: avoid; }
  .faq-item summary::after { display: none; }
  details:not([open]) .faq-answer { display: block; }   /* print every answer */

  /* Print the destination of a link, since a printed page cannot be clicked */
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }

  .site-footer { background: #fff !important; color: #000 !important; padding-top: 12pt; }
  .footer-legal .disclaimer, .footer-legal .copyright { color: #000 !important; }
}

/* Every animation added above is disabled for motion-sensitive visitors.
   Section 18 already covers transitions; these are the named keyframes and
   the cross-page transition, which need naming explicitly. */
@media (prefers-reduced-motion: reduce) {
  .hero-media img { animation: none; transform: none; }
  .btn--gold::after { display: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   24. TRUST TICKER
   --------------------------------------------------------------------------
   The strip under the hero scrolls continuously. Built as a modern ticker,
   not a marquee: the track holds two identical halves and translates exactly
   -50%, so the loop is seamless with no jump. Both halves are wider than any
   viewport, so there is never a gap on a large screen.

   It pauses on hover and on keyboard focus so anyone can actually read it,
   fades at both edges instead of clipping items mid-word, and stops dead for
   visitors who have asked for reduced motion — continuous horizontal movement
   is a genuine trigger for vestibular disorders.
   ========================================================================== */

.trust-strip .ticker {
  overflow: hidden;
  padding-block: var(--space-5, 1.25rem);
  /* Soft edges rather than a hard clip */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.trust-strip .ticker-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 0;
  padding: 0;
  animation: trust-ticker 108s linear infinite;
}

@keyframes trust-ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.trust-strip .ticker:hover .ticker-track,
.trust-strip .ticker:focus-within .ticker-track { animation-play-state: paused; }

.trust-strip .ticker-track li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  padding-inline: var(--space-8);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  color: rgba(252, 250, 245, 0.94);
}

/* Turmeric diamond between items, in place of a plain bullet.
   Brightened for the lighter bar — the standard golds sit at 3.3:1 and below
   against this green and go weak, so both the tick and the diamond use a
   lifted gold that still reads as the same accent. */
.trust-strip .ticker-track li::after {
  content: '';
  width: 5px; height: 5px;
  margin-left: var(--space-8);
  flex: none;
  background: #F7D9A0;
  transform: rotate(45deg);
  opacity: 0.75;
}

.trust-strip .ticker-track svg {
  width: 17px; height: 17px;
  flex: none;
  color: #F7D9A0;
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .trust-strip .ticker-track { animation: none; }
  /* Static fallback: wrap the items into rows instead of a frozen row that
     runs off the side of the screen. */
  .trust-strip .ticker {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .trust-strip .ticker-track {
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--space-6);
  }
}