/* =====================================================================
   Vanaya - public site design system
   Mobile first. Every rule starts at 360px and scales up.
   Palette: Rules.md R5.1b, taken from the reference sites on the client's
   instruction of 5 September 2026, with the action colour changed from
   saffron to green on 10 September. Warm cream, green for the thing to
   press, terracotta for a price, leaf for anything botanical.
   One theme. The light and dark pair was removed on 6 September at the
   client's request: "isko ek hi website rakho".
   Radius: buttons pill, cards 18px, inputs 12px, images 18px.
   ===================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

a { color: inherit; }

/* ------------------------------------------------------------- tokens */
:root {
  /* =================================================================
     Palette, reset 5 September 2026 on the client's instruction.
     Rules.md R5.1b. The colour language now follows the reference
     sites rather than the Evergreen logo; that was the client's call,
     made with the trade off in front of them.

     Three accents where there was one. Each has exactly one job:
       green       the thing to press
       terracotta  a price or a saving, never a button
       leaf        anything botanical
     Action and botanical now hold the same green, because the client asked
     for the brand's green on the buttons and inventing a second one to keep
     the roles distinct would be a preference, not a decision. The two names
     are kept because the jobs are still different.
     Every value below passes AA on the surface it is used on. R5.8 did
     not move.
     ================================================================= */

  /* surfaces */
  --bone:       #FBF7F0;   /* warm cream ground */
  --paper:      #F6F1E8;
  --panel:      #FFFFFF;
  --panel-alt:  #F1EADF;
  --wash:       #FCEDE6;   /* blush, for hero and feature bands */

  /* ink */
  --ink:        #221E1A;   /* 15.50:1 on cream */
  --ink-soft:   #4A423A;
  --muted:      #6B6155;

  /* structure */
  --line:       #E4DCCE;
  --line-soft:  #EFE8DC;

  /* brand */
  --forest:     #14432F;   /* deep green, 11.21:1 with white on it */
  --forest-ink: #F4F1EA;

  /* accent 1, action. Green on the client's instruction, 10 September 2026:
     "yellow nahi green color use kro". The saffron that was here is gone
     from every button, chip and link on the site, because it lived in this
     one token.

     The green is the logo's own leaf, which the palette already carried and
     had already measured, so this is the brand's green rather than a new
     one. Unlike saffron it takes WHITE, not dark ink: saffron was light
     enough that a white label on it was unreadable, and green is dark
     enough that a dark one is. */
  --accent:      #3A7549;
  --accent-deep: #2E5D3A;  /* hover. White on it, 7.66:1 */
  --accent-soft: #E9F0E6;
  --on-accent:   #FFFFFF;  /* 5.50:1 */
  /* Words rather than fills. The accent itself is 4.73:1 on accent-soft,
     which passes, but this darker shade passes everywhere the site puts a
     coloured word: 7.17 on cream, 7.66 on panel, 6.59 on accent-soft.
     Use --accent for fills, --accent-ink for text. */
  --accent-ink:  #2E5D3A;

  /* accent 2, price and saving. #D4562F off the reference sites failed
     at 3.80:1 on this cream, so it is darkened until it passes. */
  --sale:        #B8412A;  /* 5.14:1 on cream */
  --sale-soft:   #FBE9E3;
  --on-sale:     #FFFFFF;  /* 5.49:1 */

  /* accent 3, botanical. Carried over from the logo palette. */
  --leaf:        #3A7549;  /* 5.15:1 on cream */
  --leaf-soft:   #E9F0E6;
  --on-leaf:     #FFFFFF;  /* 5.50:1 */

  /* state */
  --ok:    #2C6B45;
  --warn:  #8A5A11;
  --stop:  #A33246;

  /* layout. These were lost in the palette rewrite on 5 September and the
     page told on it immediately: var() with no value makes the whole
     declaration invalid, so .section lost its padding, .product-grid lost
     its gutter and .wrap lost its max width all at once. */
  --wrap:    1200px;
  --gap:     clamp(1.1rem, 2.4vw, 1.75rem);
  /* Two adjacent sections each pay this, so the gap between them is double
     the number. At 5.5rem that was 176px of nothing between the product
     grid and the next heading, which is what the client saw. */
  --section: clamp(2.25rem, 4.5vw, 3.5rem);

  /* shape, locked */
  --r-card:  18px;
  --r-input: 12px;
  --r-pill:  999px;

  /* tinted shadows, never pure black */
  --sh-1: 0 1px 2px rgba(34, 30, 26, .06);
  --sh-2: 0 4px 16px rgba(34, 30, 26, .08);
  --sh-3: 0 18px 48px rgba(34, 30, 26, .12);

  /* type */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-body:    "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* motion. Built-in CSS easings are too weak, so these are the curves
     used everywhere. --ease stays as an alias so older rules keep working. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease:        cubic-bezier(0.23, 1, 0.32, 1);

  --t-press: 120ms;
  --t-hover: 180ms;
  --t-panel: 240ms;
  --t-reveal: 520ms;
}

:root { color-scheme: light; }


/* --------------------------------------------------------------- base */
body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;             /* the page body never scrolls sideways */
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  /* 500 until 5 September 2026. The reference sites both carry their
     headlines much heavier, and at this scale 500 reads as timid next to
     them. Outfit stays: the weight moved, not the family, so this is still
     two families on the site and R5.4 holds. */
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.8rem, 4.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; letter-spacing: -0.005em; }

p { text-wrap: pretty; }

.lede {
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 56ch;
}

.small   { font-size: .875rem; }
.muted   { color: var(--muted); }
.soft    { color: var(--ink-soft); }
.center  { text-align: center; }

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-input) 0;
  z-index: 200;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 768px) {
  .wrap { padding-inline: 32px; }
}

.section       { padding-block: var(--section); }
.section-tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* An eyebrow is rationed: at most one per three sections. */
.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.section-head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section-head p { margin-top: 1rem; }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 500;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;            /* a CTA label never wraps */
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .12s var(--ease),
              box-shadow .25s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--sh-1);
}
.btn-primary:hover { background: var(--accent-deep); box-shadow: var(--sh-2); }

.btn-line {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-line:hover { border-color: var(--ink); background: var(--panel); }

.btn-solid {
  background: var(--ink);
  color: var(--bone);
}
.btn-solid:hover { background: var(--forest); color: var(--forest-ink); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding-inline: .5rem;
}
.btn-ghost:hover { color: var(--accent-ink); }

.btn-sm { min-height: 40px; padding: .5rem 1.05rem; font-size: .875rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* A text link that reads as an action without being a button */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 500;
  color: var(--accent-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow:hover { border-bottom-color: currentColor; gap: .7rem; }

/* --------------------------------------------------------------- nav */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

@supports not (backdrop-filter: blur(1px)) {
  .masthead { background: var(--bone); }
}

.masthead.is-stuck { border-bottom-color: var(--line); }

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
}

@media (min-width: 1024px) {
  .masthead-inner { height: 76px; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
}

/* The leaf sprig from the logo. It carries the brand green on its own, with
   no disc behind it, so the masthead reads as the logo rather than as a
   badge with a letter in it. */
.brand-mark {
  width: 30px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--forest);
}

.brand-mark svg { width: 100%; height: 100%; display: block; }

/* desktop nav, always one line */
.nav-desktop { display: none; }

@media (min-width: 1024px) {
  .nav-desktop {
    display: flex;
    align-items: center;
    gap: clamp(1.1rem, 2.2vw, 2rem);
  }
  .nav-desktop a {
    position: relative;
    font-size: .95rem;
    color: var(--ink-soft);
    text-decoration: none;
    padding-block: .35rem;
    transition: color .25s var(--ease);
  }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav-desktop a:hover { color: var(--ink); }
  .nav-desktop a:hover::after,
  .nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
  .nav-desktop a[aria-current="page"] { color: var(--ink); }
}

.masthead-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: background-color .2s var(--ease);
}
.icon-btn:hover { background: var(--panel-alt); }
.icon-btn svg { width: 20px; height: 20px; }

.cart-count {
  position: absolute;
  top: 5px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .68rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}
.cart-count[hidden] { display: none; }

.nav-toggle { display: grid; }
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* mobile drawer */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bone);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  overflow-y: auto;
}
.nav-mobile.is-open { opacity: 1; visibility: visible; transform: none; }

.nav-mobile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: 1.5rem;
}

.nav-mobile-links { display: flex; flex-direction: column; }
.nav-mobile-links a {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: -.02em;
  text-decoration: none;
  padding-block: .85rem;
  border-bottom: 1px solid var(--line-soft);
}
.nav-mobile-links a[aria-current="page"] { color: var(--accent-ink); }
.nav-mobile-foot { margin-top: auto; padding-top: 2rem; }

/* --------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding-top: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2.25rem, 5vw, 4rem);
  /* The soft warm wash both reference sites put behind their hero. Two
     stops only, and it fades to the page ground rather than stopping on a
     hard edge, so the section still reads as one theme (R5.3). */
  background:
    radial-gradient(120% 90% at 78% 8%, var(--wash) 0%, transparent 62%),
    radial-gradient(90% 70% at 0% 100%, var(--accent-soft) 0%, transparent 55%);
}

.hero-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.hero h1 { margin-bottom: 1.25rem; }
.hero .lede { margin-bottom: 2rem; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.hero-figure {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--panel-alt);
  aspect-ratio: 4 / 5;
  box-shadow: var(--sh-3);
}

@media (min-width: 900px) {
  .hero-figure { aspect-ratio: 4 / 3; }
}

.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------- panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.panel-flat {
  background: var(--panel-alt);
  border-radius: var(--r-card);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.panel-forest {
  background: var(--forest);
  color: var(--forest-ink);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.panel-forest .muted,
.panel-forest .soft { color: color-mix(in srgb, var(--forest-ink) 72%, transparent); }

/* ------------------------------------------------- trust facts strip */
/* The trust strip, and the one place the third accent has a job. Both
   reference sites run a band of reassurance directly under the hero;
   this is that band, tinted with the botanical accent rather than
   shouting in the action colour, because none of it is a thing to press.
   Leaf on leaf-soft is 4.73:1 light and 6.60:1 dark. */
.facts {
  display: grid;
  gap: 0;
  background: var(--leaf-soft);
  border-radius: var(--r-card);
  padding-inline: clamp(1.1rem, 3vw, 2rem);
}
.fact {
  padding: 1.15rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--leaf) 16%, transparent);
}
.fact:last-child { border-bottom: 0; }
.fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--leaf);
  margin-bottom: .2rem;
}
.fact span { font-size: .875rem; color: var(--muted); }

@media (min-width: 720px) {
  .fact { border-bottom: 0; }
  .facts {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    border-bottom: 1px solid var(--line);
  }
  .fact { border-bottom: 0; padding-block: 1.6rem; }
}

/* ------------------------------------------------------- product card */
/* ------------------------------------------------------------ concerns */
/* The cards under /solutions. No image, because a photograph of somebody
   with the problem is exactly the before-and-after language R9.4 and R9.5
   keep off this site. The card is the words and the way in. */
.concern-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

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

.concern {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 44px;                /* R4.4, and every card clears it anyway */
  padding: clamp(1.35rem, 3vw, 1.75rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.concern:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}
.concern h3 { font-size: 1.15rem; }
.concern p  { font-size: .93rem; color: var(--ink-soft); flex: 1; }

.concern-go {
  margin-top: .35rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.concern:hover .concern-go { text-decoration: underline; }

.product-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

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

.product {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.product:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
}

.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--panel-alt);
  overflow: hidden;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }

.product-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.product-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  margin-bottom: .3rem;
}
.product-title a { text-decoration: none; }
.product-title a:hover { color: var(--accent-ink); }
.product-sub { font-size: .875rem; color: var(--muted); margin-bottom: .9rem; }

.product-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .5rem;
}
.price { font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; }
.price s { color: var(--muted); font-size: .85rem; margin-left: .4rem; font-weight: 400; }

/* Terracotta is a price colour and never a button, so it only ever appears
   as text (R5.1b). */
.price-save {
  color: var(--sale);
  font-weight: 600;
  font-size: .85rem;
  margin-left: .45rem;
}

.badge {
  display: inline-block;
  padding: .28rem .65rem;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-line {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.product-media .badge { position: absolute; top: .8rem; left: .8rem; }

/* ---------------------------------------------------------- bento grid */
.bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento-wide  { grid-column: span 4; }
  .bento-half  { grid-column: span 3; }
  .bento-third { grid-column: span 2; }
  .bento-tall  { grid-column: span 2; grid-row: span 2; }
}

.bento-cell {
  border-radius: var(--r-card);
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background: var(--panel);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.bento-cell h3 { margin-bottom: .5rem; }
.bento-cell p { font-size: .93rem; color: var(--ink-soft); }

.bento-cell.is-photo {
  padding: 0;
  overflow: hidden;
  border: 0;
  min-height: 260px;
  background: var(--panel-alt);
}
.bento-cell.is-photo img { width: 100%; height: 100%; object-fit: cover; }

.bento-cell.is-forest {
  background: var(--forest);
  color: var(--forest-ink);
  border-color: transparent;
}
.bento-cell.is-forest p { color: color-mix(in srgb, var(--forest-ink) 74%, transparent); }

.bento-cell.is-accent {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* ------------------------------------------------------- ritual steps */
.ritual {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .ritual { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .ritual-aside { position: sticky; top: 110px; }
}

.ritual-list { border-top: 1px solid var(--line); }
.ritual-item { padding-block: clamp(1.4rem, 3vw, 2.1rem); border-bottom: 1px solid var(--line-soft); }
.ritual-item h3 { margin-bottom: .5rem; }
.ritual-item p { color: var(--ink-soft); max-width: 58ch; }

/* ------------------------------------------------------- who advises */
/* Two columns on desktop, one on a phone, and the numbers are generated
   by the list rather than typed into the content - so the client can add
   or remove a step in /admin/content and the sequence renumbers itself
   instead of drifting out of order. */
.advisor {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .advisor { grid-template-columns: 1fr 1fr; align-items: start; }
  .advisor-intro { position: sticky; top: 110px; }
}

.advisor-photo {
  margin-top: 1.75rem;
  max-width: 320px;
  aspect-ratio: 4 / 5;
}

.advisor-note { margin-top: 1.5rem; }
.advisor-note p { color: var(--ink-soft); max-width: 58ch; }

.advisor-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: advisor-step;
  border-top: 1px solid var(--line);
}

.advisor-step {
  counter-increment: advisor-step;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(.9rem, 3vw, 1.4rem);
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-bottom: 1px solid var(--line-soft);
}

/* decimal-leading-zero so 1 reads as 01 and the column keeps its width
   whether there are three steps or eleven. */
.advisor-step::before {
  content: counter(advisor-step, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  color: var(--leaf);
  padding-top: .25rem;
}

.advisor-step h3 { margin-bottom: .5rem; }
.advisor-step p { color: var(--ink-soft); max-width: 54ch; }

/* --------------------------------------------------------- quote rail */
.quote-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 82vw);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: .75rem;
  margin-inline: -20px;
  padding-inline: 20px;
  scrollbar-width: thin;
}
.quote-rail > * { scroll-snap-align: start; }

@media (min-width: 760px) {
  .quote-rail {
    grid-auto-columns: minmax(320px, 1fr);
    margin-inline: 0;
    padding-inline: 0;
    overflow-x: visible;
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
  }
}

.quote {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(1.35rem, 3vw, 1.85rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.quote blockquote {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.quote figcaption { font-size: .85rem; color: var(--muted); margin-top: auto; }
.quote figcaption b { display: block; color: var(--ink); font-weight: 500; }

/* ---------------------------------------------------------- editorial */
.editorial {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .editorial { grid-template-columns: 1.25fr 1fr; align-items: start; }
}

/* One photograph standing on its own in the flow of a page: the about page,
   the contact page, the routine aside. The ratio is set at the point of use
   so the same frame holds a portrait or a landscape without a second class. */
.photo-frame {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--panel-alt);
}
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

.feature-post-media {
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--panel-alt);
  margin-bottom: 1.35rem;
}
.feature-post-media img { width: 100%; height: 100%; object-fit: cover; }

.post-list { border-top: 1px solid var(--line); }
.post-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1rem;
  align-items: center;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
}
.post-row:hover .post-row-title { color: var(--accent-ink); }
.post-row-thumb {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel-alt);
}
.post-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-row-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  transition: color .25s var(--ease);
}
.post-row-meta { font-size: .8rem; color: var(--muted); margin-top: .25rem; }

/* -------------------------------------------------------------- forms */
.field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.15rem; }

.field label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--ink);
}
/* also used on its own, outside a field, for a one line explanation */
.hint, .field .hint { display: block; font-size: .8rem; color: var(--muted); }

.input, .select, .textarea {
  width: 100%;
  min-height: 48px;
  padding: .72rem .9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  color: var(--ink);
  font-size: 16px;                 /* 16px stops iOS zooming on focus */
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--stop); }

.err { font-size: .82rem; color: var(--stop); }

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
/* Other splits, applied only from 640px so a phone always gets one column.
   They used to be inline styles, which outrank any media query and kept
   three squeezed columns on a 360px screen. */
@media (min-width: 640px) {
  .field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .field-row.cols-short-long { grid-template-columns: 120px 1fr; }
  .field-row.cols-long-short-short { grid-template-columns: 1fr 110px 110px; }
}

.check {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  /* the whole label is the tap target, so it carries the 44px minimum (R4.4);
     a one line consent was 24px tall and easy to miss with a thumb */
  min-height: 44px;
  padding-block: .6rem;
  cursor: pointer;
  font-size: .9375rem;
  color: var(--ink-soft);
}
.check input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--accent); flex: none; }

/* -------------------------------------------------------------- alerts */
.alert {
  border-radius: var(--r-input);
  padding: .9rem 1.1rem;
  font-size: .92rem;
  border: 1px solid;
  margin-bottom: 1.25rem;
}
.alert-ok   { background: color-mix(in srgb, var(--ok) 10%, transparent);   border-color: color-mix(in srgb, var(--ok) 35%, transparent);   color: var(--ok); }
.alert-warn { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); }
.alert-stop { background: color-mix(in srgb, var(--stop) 10%, transparent); border-color: color-mix(in srgb, var(--stop) 35%, transparent); color: var(--stop); }

/* ---------------------------------------------------------- accordion */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line-soft); }
.acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  min-height: 56px;
}
.acc-head .acc-sign {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  transition: transform .3s var(--ease);
}
.acc-head .acc-sign::before,
.acc-head .acc-sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.acc-head .acc-sign::after { transform: rotate(90deg); }
.acc-head[aria-expanded="true"] .acc-sign::after { opacity: 0; transform: rotate(0); }

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.acc-panel > div { overflow: hidden; }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel p { color: var(--ink-soft); padding-bottom: 1.25rem; max-width: 68ch; }

/* --------------------------------------------------------- cart panel */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }

.drawer-veil {
  position: absolute;
  inset: 0;
  background: rgba(43, 38, 32, .45);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.drawer.is-open .drawer-veil { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100%);
  background: var(--bone);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .38s var(--ease);
  box-shadow: var(--sh-3);
}
.drawer.is-open .drawer-panel { transform: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.drawer-body { flex: 1; overflow-y: auto; padding: 1.15rem; }
.drawer-foot { padding: 1.15rem; border-top: 1px solid var(--line); background: var(--panel); }

.cart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: .9rem;
  align-items: center;
  padding-block: .9rem;
  border-bottom: 1px solid var(--line-soft);
}
.cart-line img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.cart-line-name { font-size: .93rem; font-weight: 500; line-height: 1.3; }
.cart-line-meta { font-size: .8rem; color: var(--muted); margin-top: .2rem; }

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.qty button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}
.qty button:hover { background: var(--panel-alt); }
.qty span { min-width: 28px; text-align: center; font-size: .9rem; }

/* ------------------------------------------------------------- footer */
.footer {
  background: var(--forest);
  color: var(--forest-ink);
  padding-block: clamp(3rem, 7vw, 5rem) 2rem;
  margin-top: var(--section);
}

.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--accent-ink); }

.footer-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

.footer h4 {
  font-family: var(--font-body);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--forest-ink) 58%, transparent);
  margin-bottom: 1rem;
}
.footer-links { display: flex; flex-direction: column; gap: .7rem; font-size: .93rem; }

.footer-bottom {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--forest-ink) 16%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .82rem;
  color: color-mix(in srgb, var(--forest-ink) 62%, transparent);
}

.disclaimer {
  margin-top: 1.5rem;
  font-size: .78rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--forest-ink) 55%, transparent);
  max-width: 78ch;
}

.newsletter { display: flex; gap: .5rem; margin-top: 1rem; }
.newsletter .input {
  background: color-mix(in srgb, var(--forest-ink) 8%, transparent);
  border-color: color-mix(in srgb, var(--forest-ink) 22%, transparent);
  color: var(--forest-ink);
  min-height: 46px;
}
.newsletter .input::placeholder { color: color-mix(in srgb, var(--forest-ink) 52%, transparent); }

/* ----------------------------------------------------------- utility */
.tag-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: .875rem;
  text-decoration: none;
  transition: all .25s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

.breadcrumb {
  display: flex;
  gap: .5rem;
  align-items: center;
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

.empty {
  text-align: center;
  padding: clamp(2.5rem, 8vw, 5rem) 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-card);
  color: var(--muted);
}
.empty h3 { color: var(--ink); margin-bottom: .5rem; }

.prose { max-width: 68ch; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.25rem; color: var(--ink-soft); }
.prose h2 { margin: 2.5rem 0 1rem; }
.prose h3 { margin: 2rem 0 .75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--accent-ink); }
.prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 2rem 0;
}

/* Fixed, not sticky. It was `position: sticky` and a sticky element only
   sticks inside its own parent, so this bar lived and died with the
   section it sat in: it vanished the moment somebody scrolled down to the
   questions or the related concerns, which is exactly the part of the page
   where a person has finished reading and is deciding whether to ask.
   Client caught it on 21 September 2026: *"wo pure page per rehna
   chahiye"*. It is the only way to start the conversation on a phone, so
   it belongs to the page and not to one band of it (R4.5). */
.sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--panel);
  border-top: 1px solid var(--line);
  padding: .8rem 20px calc(.8rem + env(safe-area-inset-bottom));
  display: flex;
  gap: .75rem;
  align-items: center;
}

/* So the last thing on the page is not permanently underneath the bar. */
.sticky-buy-space { height: 88px; }

@media (min-width: 900px) {
  .sticky-buy,
  .sticky-buy-space { display: none; }
}

/* =====================================================================
   Motion layer
   Entrances use ease-out, on-screen movement uses ease-in-out, and
   nothing animates a property that triggers layout.
   ===================================================================== */

/* ------------------------------------------------------------- hero photo */
/* This was a WebGL mount and a fallback that faded out behind it. The scene
   is gone, so the photograph is simply the picture now, with none of the
   stacking the two of them needed. */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------- SVG line drawing */
/* stroke-dashoffset is the only way to draw a path. It is cheap here
   because the graphic is small and animates once, on entry. */
.draw path,
.draw circle,
.draw line {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
}
.draw.is-in path,
.draw.is-in circle,
.draw.is-in line {
  transition: stroke-dashoffset 1.4s var(--ease-out);
  stroke-dashoffset: 0;
}
.draw .fade { opacity: 0; transition: opacity 600ms var(--ease-out) 700ms; }
.draw.is-in .fade { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .draw path, .draw circle, .draw line { stroke-dashoffset: 0; transition: none; }
  .draw .fade { opacity: 1; transition: none; }
}

/* ------------------------------------------------------- scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--stagger, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------- 3D tilt on cards */
/* Hover tier, so this is deliberately small: six degrees, fast, and only
   on devices with a real pointer. Touch fires a false hover on tap. */
@media (hover: hover) and (pointer: fine) {
  .tilt {
    transform-style: preserve-3d;
    transition: transform var(--t-hover) var(--ease-out),
                box-shadow var(--t-hover) var(--ease-out);
  }
  .tilt-inner { transform: translateZ(28px); transition: transform var(--t-hover) var(--ease-out); }
}

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

/* --------------------------------------------- cross page transitions */
/* Progressive enhancement. Browsers without view transitions navigate
   normally and lose nothing. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 160ms var(--ease-out) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 260ms var(--ease-out) both;
  }
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* screen reader only */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   Sticky action bar
   Mobile only, and site wide. The sale is closed on the phone, so the
   way to start that conversation is the one control that is always in
   reach (R4.5). Hidden from 900px up, where the header already carries
   the same actions without covering anything.
   ===================================================================== */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.action-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  /* R4.4: the whole cell is the tap target, never just the label. */
  min-height: 56px;
  padding: .5rem .35rem;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.action-bar-item svg { width: 21px; height: 21px; }

.action-bar-item.is-primary {
  background: var(--accent);
  color: var(--on-accent);
}

.action-bar-item:active { background: var(--panel-alt); }
.action-bar-item.is-primary:active { background: var(--accent-deep); }

@media (min-width: 900px) {
  .action-bar { display: none; }
}

/* The bar floats over the page, so the last thing on it needs room to
   clear the bar rather than sitting underneath it for ever. */
@media (max-width: 899px) {
  body:has(.action-bar) .footer { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------------
   The concerns dropdown.

   The header carried one word, "Solutions", with eighteen pages two clicks
   behind it. Somebody who came for hair loss had to read a category page
   first to discover there was a page about hair loss. Client asked for this
   on 20 September 2026.

   Desktop: a panel under the masthead, opened on hover and on focus, and
   closable from the keyboard. Phone: the same list, printed straight into
   the drawer, because on a phone the concerns are the reason the drawer is
   open and hiding them behind a second tap helps nobody.
   --------------------------------------------------------------------- */

/* The caret is desktop only. In the drawer the list is already open. */
.mega-toggle { display: none; }
.has-mega > .mega { display: none; }

@media (min-width: 1024px) {
  .has-mega { position: relative; display: flex; align-items: center; gap: .3rem; }

  .mega-toggle {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    transition: transform .25s var(--ease), color .25s var(--ease);
  }
  .mega-toggle svg { width: 14px; height: 14px; }
  .has-mega.is-open .mega-toggle { transform: rotate(180deg); color: var(--ink); }

  /* A card under the Solutions link. It was a full width panel with a
     column per group, built for five groups; with breast care the only one
     left it was one thin column at the far left of an empty white band,
     which is what the client saw on 22 September 2026. */
  .has-mega > .mega {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    width: min(460px, 90vw);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
    z-index: 60;
  }
  /* A bridge over the gap, so the pointer can travel from the link to the
     card without the hover dropping and the card closing on the way. */
  .has-mega > .mega::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
  }

  .has-mega:hover > .mega,
  .has-mega:focus-within > .mega,
  .has-mega.is-open > .mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .mega .wrap { padding: .75rem; max-width: none; }

  .mega-grid { display: grid; gap: .75rem; }
  .mega-head { padding: .5rem .8rem 0; }

  .mega .mega-list a {
    display: grid;
    gap: .15rem;
    padding: .7rem .8rem;
    border-radius: 12px;
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  .mega .mega-list a:hover { background: var(--accent-soft); }
  /* The masthead's underline belongs to the top level links only. */
  .mega-list a::after { display: none; }
  .mega-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink); }
  .mega-list a:hover .mega-name { color: var(--accent-ink); }
  .mega-desc { display: block; font-size: .82rem; line-height: 1.4; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* The final menu, 22 September 2026: eighteen concerns in five groups.
   The card widens to hold a column per group and is centred on the whole
   masthead instead of on the Solutions link, which sits left of centre and
   would push a wide card off the edge of the screen. */
@media (min-width: 1024px) {
  .masthead-inner { position: relative; }
  .has-mega:has(.mega-grid.is-multi) { position: static; }
  .has-mega > .mega:has(.mega-grid.is-multi) {
    width: min(1120px, calc(100vw - 40px));
    top: calc(100% - 4px);
  }
  .has-mega > .mega:has(.mega-grid.is-multi)::before { top: -24px; height: 24px; }
  .mega .mega-grid.is-multi {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .25rem 1rem;
    padding: .5rem .25rem .25rem;
  }
  .mega-grid.is-multi .mega-col {
    padding: .5rem .5rem .75rem;
    border-radius: 14px;
  }
  .mega-grid.is-multi .mega-col:first-child { background: var(--accent-soft); }
  .mega-grid.is-multi .mega-head {
    padding: .25rem .6rem .5rem;
    margin-bottom: .25rem;
    border-bottom: 1px solid var(--line-soft);
    font-weight: 700;
    color: var(--accent-ink);
  }
  .mega-grid.is-multi .mega-list a { padding: .5rem .6rem; }
  .mega-grid.is-multi .mega-name { font-size: .93rem; font-weight: 500; font-family: var(--font-body); color: var(--ink-soft); }
  .mega-grid.is-multi .mega-list a:hover .mega-name { color: var(--accent-ink); }
  .mega-grid.is-multi .mega-desc { display: none; }
}

.mega-head {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .35rem;
}

.mega-list { list-style: none; padding: 0; margin: 0; }
.mega-list li { margin: 0; }

.mega-list a {
  display: block;
  padding: .4rem 0;
  font-size: .95rem;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.mega-list a:hover { color: var(--accent-ink); }

/* The same list inside the mobile drawer: names only, full size taps. */
.nav-mobile-sub {
  padding: 0 0 .9rem;
  border-bottom: 1px solid var(--line-soft);
}
.nav-mobile-sub .mega-grid { display: grid; gap: .5rem; }
/* A heading per group in the drawer once there is more than one group. */
.nav-mobile-sub .mega-head { display: none; }
.nav-mobile-sub .mega-grid.is-multi .mega-head {
  display: block;
  margin: .6rem 0 .15rem;
  font-weight: 700;
  color: var(--accent-ink);
}
.nav-mobile-sub .mega-desc { display: none; }

/* 44px minimum tap target in the drawer (R4.4). */
.nav-mobile-sub .mega-list a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0 .35rem .9rem;
  font-size: 1rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--line);
}
.nav-mobile-sub .mega-list a:hover { border-left-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .has-mega > .mega { transition: none; }
  .mega-toggle { transition: none; }
}

/* ---------------------------------------------------------------------
   The enquiry card on a concern page, kept in reach.

   The card sat in the right column and scrolled away with the page. A
   concern page is long by design - the herbs, how it works, what is
   realistic, the questions - so by the time somebody had read enough to
   want to ask, the thing they ask with was three screens above them. The
   whole page exists to produce that enquiry.

   Desktop only. Below 900px the column stacks and .sticky-buy already
   keeps a button under the thumb, which is the phone answer to the same
   problem and a better one.

   max-height and overflow are the guard: if the form is ever taller than
   the window, it scrolls inside itself rather than pinning its own submit
   button off the bottom of the screen where nobody can reach it.
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .concern-aside {
    position: sticky;
    top: 110px;
    max-height: calc(100dvh - 130px);
    overflow-y: auto;
    /* Thin, because a second scrollbar inside a page is already one more
       than anybody wants to see. It earns its place: without the overflow
       a form taller than the window pins its own submit button off the
       bottom of the screen. */
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }
}

/* =====================================================================
   Home, rebuilt 21 September 2026
   The client called the old page "basic" and pointed at the reference
   site's flow: a form in the first screen, privacy said out loud, the
   conditions as pictures, a second form at the foot. Same palette, same
   two families, same radii. Prefixed h- so no other page is touched.
   ===================================================================== */

.btn-lg { min-height: 54px; padding: .95rem 1.8rem; font-size: 1rem; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Buttons that sit on a photograph or on the forest panel. */
.btn-glass {
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .24); border-color: #FFFFFF; }
.btn-light { background: var(--forest-ink); color: var(--forest); }
.btn-light:hover { background: #FFFFFF; }
.btn-on-dark {
  background: transparent;
  color: var(--forest-ink);
  border-color: color-mix(in srgb, var(--forest-ink) 50%, transparent);
}
.btn-on-dark:hover { border-color: var(--forest-ink); background: color-mix(in srgb, var(--forest-ink) 10%, transparent); }

/* ---------------------------------------------------------------- hero */
.h-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #FFFFFF;
  padding-block: clamp(2rem, 5vw, 4.5rem) clamp(5rem, 9vw, 7rem);
  background: #1E2A22;
}
.h-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* The scrim. Dark enough on the left that white body copy clears AA over
   any photograph, lighter to the right so the picture still reads. On a
   phone the copy sits over the whole picture, so it is darker all over. */
.h-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(14, 26, 19, .72) 0%, rgba(14, 26, 19, .86) 55%, rgba(14, 26, 19, .94) 100%);
}
@media (min-width: 960px) {
  .h-hero::before {
    background: linear-gradient(90deg, rgba(14, 26, 19, .9) 0%, rgba(14, 26, 19, .74) 45%, rgba(14, 26, 19, .35) 100%);
  }
}

/* Positive layers, photo 0, scrim 1, content 2. With the photo at a
   negative z-index Chrome painted the section's own background over it on
   phones. */
.h-hero-grid { position: relative; z-index: 2; display: grid; gap: clamp(2rem, 5vw, 3rem); align-items: center; }
@media (min-width: 960px) {
  .h-hero-grid { grid-template-columns: 1.15fr .85fr; gap: clamp(3rem, 6vw, 5.5rem); min-height: 560px; }
}

.h-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  margin-bottom: 1.4rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  font-size: .85rem;
  font-weight: 500;
}
.h-pill svg { width: 16px; height: 16px; }

.h-hero h1 {
  color: #FFFFFF;
  font-size: clamp(2.4rem, 6.2vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 14ch;
}
.h-lede {
  margin-top: 1.25rem;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.55;
  max-width: 50ch;
  color: rgba(255, 255, 255, .88);
}

.h-ticks { list-style: none; margin: 1.5rem 0 2rem; padding: 0; display: grid; gap: .6rem; }
.h-ticks li { position: relative; padding-left: 1.9rem; font-size: .98rem; }
.h-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .2rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* The form card. White, so the form itself reads exactly as it does on
   every other page. */
.h-form-card {
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--r-card);
  padding: clamp(1.35rem, 3.5vw, 2rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  scroll-margin-top: 100px;
}
.h-form-card h2 { font-size: clamp(1.3rem, 3vw, 1.55rem); }
.h-form-card .field { margin-bottom: .85rem; }
.h-form-card .input,
.h-form-card .select { min-height: 48px; }
.h-form-card.is-inset { box-shadow: none; }

/* -------------------------------------------------------------- facts */
.h-facts-wrap { position: relative; z-index: 2; margin-top: calc(-1 * clamp(2.75rem, 5vw, 3.5rem)); }
.h-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.h-fact { padding: 1.2rem clamp(1rem, 2.5vw, 1.6rem); text-align: center; border-bottom: 1px solid var(--line-soft); }
.h-fact:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.h-fact strong { display: block; font-family: var(--font-display); font-size: clamp(1rem, 2.2vw, 1.15rem); font-weight: 700; color: var(--forest); line-height: 1.25; }
.h-fact small { display: block; margin-top: .25rem; font-size: .83rem; color: var(--muted); line-height: 1.4; }
@media (min-width: 900px) {
  .h-facts { grid-template-columns: repeat(4, 1fr); }
  .h-fact { border-bottom: 0; padding-block: 1.6rem; }
  .h-fact:nth-child(odd) { border-right: 0; }
  .h-fact + .h-fact { border-left: 1px solid var(--line-soft); }
}

/* ------------------------------------------------------- section head */
.h-head { max-width: 60ch; margin-bottom: clamp(2rem, 5vw, 3rem); }
.h-head.center { margin-inline: auto; text-align: center; }
.h-head .soft { margin-top: .9rem; }
.h-rule { display: block; width: 56px; height: 3px; border-radius: 3px; background: var(--accent); margin: 1rem auto 0; }
.h-head-row { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------------------------------------------------- concern cards */
/* A picture with the name on it, which is how the reference site shows
   what it treats. On a phone it is a row the thumb swipes, so five cards
   do not become five screens of scrolling. */
.h-cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 72%);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin-inline: -20px;
  padding: 0 20px 1rem;
  scrollbar-width: thin;
}
.h-cards > * { scroll-snap-align: start; }
@media (min-width: 700px) {
  .h-cards { grid-auto-columns: minmax(240px, 42%); }
}
@media (min-width: 1100px) {
  .h-cards {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }
}

.h-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--panel-alt);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: var(--sh-2);
}
.h-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.h-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 26, 19, 0) 30%, rgba(14, 26, 19, .82) 68%, rgba(14, 26, 19, .95) 100%);
}
.h-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: .35rem;
  padding: 1.25rem;
}
.h-card-body strong { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.2; }
.h-card-body small {
  font-size: .84rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .86);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h-card-go {
  justify-self: start;
  margin-top: .4rem;
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  font-size: .82rem;
  font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .h-card:hover img { transform: scale(1.05); }
  .h-card:hover .h-card-go { background: var(--accent-deep); }
}

/* ----------------------------------------------------------- practice */
.h-band { background: var(--paper); }
.h-advisor { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .h-advisor { grid-template-columns: 1fr 1fr; } }
.h-advisor-photo {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 4 / 3.4;
  background: var(--panel-alt);
  box-shadow: var(--sh-3);
}
.h-advisor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.h-steps { list-style: none; margin: 1.75rem 0 0; padding: 0; counter-reset: h-step; display: grid; gap: 1.1rem; }
.h-steps li {
  counter-increment: h-step;
  position: relative;
  padding: 1.1rem 1.2rem 1.1rem 4.2rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.h-steps li::before {
  content: counter(h-step);
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--forest);
  color: var(--forest-ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.h-steps h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.h-steps p { font-size: .92rem; color: var(--ink-soft); }

/* ------------------------------------------------------------ privacy */
.h-privacy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--forest);
  color: var(--forest-ink);
  text-align: center;
}
.h-privacy > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.h-privacy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(20, 67, 47, .9);
}
.h-privacy-copy { padding: clamp(2.25rem, 6vw, 4rem) clamp(1.25rem, 5vw, 3rem); max-width: 760px; margin-inline: auto; }
.h-privacy-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  margin-bottom: 1.1rem;
}
.h-privacy-icon svg { width: 26px; height: 26px; }
.h-privacy h2 { color: inherit; font-size: clamp(1.9rem, 4.6vw, 2.8rem); }
.h-privacy p { margin: .9rem auto 1.75rem; max-width: 52ch; color: color-mix(in srgb, var(--forest-ink) 86%, transparent); }

/* -------------------------------------------------------------- herbs */
.h-herb-grid { display: grid; gap: var(--gap); }
@media (min-width: 700px) { .h-herb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .h-herb-grid { grid-template-columns: repeat(4, 1fr); } }
.h-herb {
  position: relative;
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 1.7rem);
  padding-top: 5rem;
  background: var(--leaf-soft);
  border-radius: var(--r-card);
}
.h-herb.is-forest { background: var(--forest); color: var(--forest-ink); }
.h-herb.is-forest p { color: color-mix(in srgb, var(--forest-ink) 80%, transparent); }
.h-herb h3 { position: relative; font-size: 1.25rem; margin-bottom: .5rem; }
.h-herb-native { font-family: var(--font-body); font-weight: 500; font-size: .92rem; opacity: .75; margin-left: .2rem; }
.h-herb p { position: relative; font-size: .92rem; color: var(--ink-soft); }
/* The name in its own script, large and faint. Decoration only; the
   readable copy is in the heading. */
.h-herb-script {
  position: absolute;
  top: .2rem;
  right: 1rem;
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--leaf);
  opacity: .18;
  pointer-events: none;
}
.h-herb.is-forest .h-herb-script { color: var(--forest-ink); opacity: .14; }

/* ---------------------------------------------------------------- faq */
.h-faq { max-width: 820px; margin-inline: auto; }

/* ------------------------------------------------------------ closing */
.h-closing {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.25rem, 4vw, 3rem);
  border-radius: var(--r-card);
  background: var(--forest);
  color: var(--forest-ink);
}
@media (min-width: 900px) { .h-closing { grid-template-columns: 1fr .9fr; } }
.h-closing-copy h2 { color: inherit; font-size: clamp(1.9rem, 4.4vw, 2.8rem); }
.h-closing-copy > p { margin-top: .9rem; max-width: 46ch; color: color-mix(in srgb, var(--forest-ink) 84%, transparent); }
.h-closing .h-ticks { margin-bottom: 0; }

/* --------------------------------------------------------------- blog */
.h-posts { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .h-posts { grid-template-columns: repeat(3, 1fr); } }
.h-post { display: grid; gap: .5rem; text-decoration: none; }
.h-post-media { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-card); overflow: hidden; background: var(--panel-alt); margin-bottom: .4rem; }
.h-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.h-post strong { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
@media (hover: hover) and (pointer: fine) {
  .h-post:hover img { transform: scale(1.04); }
  .h-post:hover strong { color: var(--accent-ink); }
}

/* ------------------------------------------------ hero, phone layout */
/* Client, 22 September 2026: the hero should be better on a phone. It was
   the desktop hero squeezed: the photograph buried under a 90% scrim and a
   screen and a half of text before the form. Now the picture is the top of
   the screen, the heading sits on its lower edge, and the scrim only
   darkens where there is type on it. */
.h-hero-chips { display: none; }
.h-cta-phone { display: none; }

@media (max-width: 959px) {
  .h-hero {
    padding-top: 0;
    padding-bottom: 4.5rem;
    background: #0E1A13;
  }
  .h-hero-bg {
    inset: 0 0 auto 0;
    height: min(118vw, 560px);
    object-position: 50% 12%;
  }
  /* Clear at the top so the face shows, solid by the time the copy
     starts, so the white type is on dark whatever photo sits behind it. */
  .h-hero::before {
    background: linear-gradient(180deg,
      rgba(14, 26, 19, .05) 0,
      rgba(14, 26, 19, .1) calc(min(118vw, 560px) * .45),
      rgba(14, 26, 19, .85) calc(min(118vw, 560px) * .78),
      #0E1A13 min(118vw, 560px));
  }

  /* min-width: 0, or the unbroken chip row widens the grid track past the
     screen and takes the heading and the button with it. */
  .h-hero-grid { gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
  .h-hero-copy { min-width: 0; }
  .h-hero-copy { padding-top: calc(min(118vw, 560px) * .64); }

  .h-pill {
    margin-bottom: .9rem;
    background: rgba(14, 26, 19, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .h-hero h1 {
    font-size: clamp(2.15rem, 9.6vw, 3rem);
    max-width: 13ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
  }
  .h-lede { margin-top: .9rem; font-size: 1rem; }

  /* The three promises as a compact row instead of a stacked list. */
  .h-ticks {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 1.25rem 0 0;
  }
  .h-ticks li {
    padding: .4rem .75rem .4rem 1.85rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: .84rem;
    line-height: 1.3;
  }
  .h-ticks li::before { left: .5rem; top: 50%; width: 1rem; height: 1rem; transform: translateY(-50%); }

  /* The concerns, one swipe wide. The row bleeds to the screen edge so it
     reads as scrollable, and the page itself never scrolls sideways. */
  .h-hero-chips {
    display: flex;
    gap: .5rem;
    margin: 1.4rem -20px 0 0;
    padding: 0 20px .25rem 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .h-hero-chips::-webkit-scrollbar { display: none; }
  .h-hero-chips a {
    flex: none;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .5rem 1rem;
    border-radius: var(--r-pill);
    background: var(--forest-ink);
    color: var(--forest);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .h-hero .hero-cta { margin-top: 1.25rem; }
  .h-cta-desk { display: none; }
  .h-cta-phone { display: inline-flex; flex: 1 1 100%; }
  .h-hero .hero-cta .btn-glass { flex: 1 1 100%; }

  /* The form, tighter. The fields stay full width: a concern name like
     "Saggy Breast (Loose Breast)" does not fit half a phone. */
  .h-form-card { padding: 1.35rem 1.2rem 1.4rem; scroll-margin-top: 80px; }
  .h-form-card h2 { font-size: 1.3rem; }
  .h-form-card .field { margin-bottom: .7rem; }
}

/* =====================================================================
   Concern pages, redesigned 22 September 2026
   The same flow as the home page, so a visitor who opens a card lands on
   a page that plainly belongs to it. The hero and every band below the
   article are the home page's own classes (h-); only the article and its
   card are new (c-).
   ===================================================================== */

.c-hero .h-hero-bg { object-position: 50% 18%; }
@media (min-width: 960px) {
  .c-hero .h-hero-grid { min-height: 520px; }
}

.c-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.1rem;
  font-size: .85rem;
  color: rgba(255, 255, 255, .78);
}
.c-crumbs a { color: inherit; text-decoration: none; }
.c-crumbs a:hover { color: #FFFFFF; text-decoration: underline; }
.c-crumbs [aria-current] { color: #FFFFFF; }

/* ----------------------------------------------------------- article */
.c-body { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 960px) {
  .c-body { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .c-aside { position: sticky; top: 110px; }
}

.c-main { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); min-width: 0; }

.c-chapter {
  padding: clamp(1.35rem, 3.5vw, 2.1rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.c-chapter h2 {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 1rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}
.c-chapter h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  bottom: .15em;
  width: 4px;
  border-radius: 4px;
  background: var(--accent);
}
.c-chapter .prose > :first-child { margin-top: 0; }
.c-realistic { background: var(--leaf-soft); border-color: transparent; }
.c-disclaimer { padding-top: .25rem; }

.c-aside-card {
  padding: clamp(1.35rem, 3.5vw, 1.85rem);
  border-radius: var(--r-card);
  background: var(--forest);
  color: var(--forest-ink);
}
.c-aside-card h3 { color: inherit; font-size: 1.3rem; margin-bottom: .6rem; }
.c-aside-card p {
  font-size: .93rem;
  margin-bottom: 1.25rem;
  color: color-mix(in srgb, var(--forest-ink) 84%, transparent);
}
.c-aside-card .h-privacy-icon { width: 46px; height: 46px; margin-bottom: .9rem; }
.c-aside-card .h-privacy-icon svg { width: 22px; height: 22px; }
.c-aside-card .btn { white-space: normal; text-align: center; }

/* On a phone the article is the page; the card would only repeat the
   sticky bar at the foot of the screen. */
@media (max-width: 959px) {
  .c-aside { display: none; }
  .c-crumbs { display: none; }
}

/* =====================================================================
   About, redesigned 22 September 2026
   Same system as the home and concern pages (h- classes). The a- classes
   are the two parts only this page has: the story and the standards.
   ===================================================================== */

/* The hero has no form, so the copy gets the width and the portrait on the
   right is left light enough to be seen. */
.a-hero .h-hero-bg { object-position: 70% 20%; }
@media (min-width: 960px) {
  /* The face is near the top of this portrait; on a wide screen anything
     lower than this crops it to the chin. */
  .a-hero .h-hero-bg { object-position: 70% 4%; }
  .a-hero .h-hero-grid { grid-template-columns: minmax(0, 640px); min-height: 520px; }
  .a-hero::before {
    background: linear-gradient(90deg, rgba(14, 26, 19, .92) 0%, rgba(14, 26, 19, .78) 42%, rgba(14, 26, 19, .15) 75%, rgba(14, 26, 19, 0) 100%);
  }
}
.a-hero { padding-bottom: clamp(3rem, 7vw, 5rem); }

.a-rule { margin-left: 0; margin-right: 0; }

/* ------------------------------------------------------------ story */
.a-story { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .a-story { grid-template-columns: .95fr 1.05fr; } }

.a-story-media { position: relative; margin: 0 0 2.5rem; }
.a-story-media .photo-frame { aspect-ratio: 1 / 1; box-shadow: var(--sh-3); }
.a-story-note {
  position: absolute;
  right: clamp(-1rem, -2vw, -.5rem);
  bottom: -2rem;
  max-width: 280px;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-card);
  background: var(--forest);
  color: var(--forest-ink);
  box-shadow: var(--sh-3);
}
.a-story-note b { display: block; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; }
.a-story-note span { display: block; margin-top: .35rem; font-size: .85rem; color: color-mix(in srgb, var(--forest-ink) 80%, transparent); }
@media (max-width: 899px) { .a-story-note { right: 1rem; left: 1rem; max-width: none; } }

.a-story-copy h2 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
.a-story-copy .prose { margin-top: 1.25rem; }
.a-story-copy .prose p { color: var(--ink-soft); }
.a-story-copy .prose p:first-child { font-size: 1.12rem; color: var(--ink); }

/* -------------------------------------------------------- standards */
.a-standards { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 960px) {
  .a-standards { grid-template-columns: .8fr 1.2fr; align-items: start; }
  .a-standards-head { position: sticky; top: 110px; }
}
.a-standards-head h2 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); }
.a-standards-photo { margin-top: 1.75rem; aspect-ratio: 4 / 3; }
@media (max-width: 959px) { .a-standards-photo { display: none; } }

.a-rules { list-style: none; margin: 0; padding: 0; counter-reset: a-rule; display: grid; gap: var(--gap); }
@media (min-width: 640px) { .a-rules { grid-template-columns: repeat(2, 1fr); } }
.a-rules li {
  counter-increment: a-rule;
  position: relative;
  padding: clamp(1.35rem, 3vw, 1.75rem);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.a-rules li::before {
  content: counter(a-rule, decimal-leading-zero);
  display: block;
  margin-bottom: .9rem;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--leaf);
}
.a-rules li:nth-child(4n+1),
.a-rules li:nth-child(4n+4) { background: var(--forest); color: var(--forest-ink); border-color: transparent; }
.a-rules li:nth-child(4n+1)::before,
.a-rules li:nth-child(4n+4)::before { color: color-mix(in srgb, var(--forest-ink) 55%, transparent); }
.a-rules h3 { color: inherit; font-size: 1.2rem; margin-bottom: .5rem; }
.a-rules p { font-size: .93rem; color: var(--ink-soft); }
.a-rules li:nth-child(4n+1) p,
.a-rules li:nth-child(4n+4) p { color: color-mix(in srgb, var(--forest-ink) 82%, transparent); }

/* =====================================================================
   Contact, redesigned 22 September 2026
   The shared hero (h-) with the full form in its card, and the ways in as
   glass rows on the photograph (k-).
   ===================================================================== */

.k-hero .h-hero-bg { object-position: 50% 12%; }
@media (min-width: 960px) {
  .k-hero .h-hero-bg { object-position: 50% 6%; }
  .k-hero .h-hero-grid { align-items: start; }
  .k-hero .h-hero-copy { padding-top: 2rem; }
}

.k-ways { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .6rem; max-width: 460px; }
.k-ways a,
.k-ways li > div {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 56px;
  padding: .7rem 1rem;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  text-decoration: none;
}
.k-ways a { transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out); }
.k-ways a:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45); }
.k-way-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
}
.k-way-icon svg { width: 19px; height: 19px; }
.k-ways small { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.k-ways b { display: block; font-weight: 600; font-size: .98rem; line-height: 1.3; }

.k-note { margin-top: 1.25rem; font-size: .85rem; color: rgba(255, 255, 255, .72); max-width: 46ch; }

.k-form form { margin-top: 1.25rem !important; }
.k-form .field { margin-bottom: .85rem; }
.k-form .textarea { min-height: 110px; }

/* =====================================================================
   Blog, redesigned 22 September 2026
   b- is the index (header, feature card, cards), p- is one article. The
   article reuses the concern page's reading column and sticky card (c-).
   ===================================================================== */

/* ------------------------------------------------------------ header */
.b-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(60% 90% at 90% 0%, rgba(111, 181, 126, .22) 0%, transparent 60%),
    var(--forest);
  color: #FFFFFF;
}
.b-head.has-feature { padding-bottom: clamp(7rem, 14vw, 10rem); }
.b-head h1 { color: #FFFFFF; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -.035em; }
.b-head .h-lede { max-width: 56ch; }

.b-topics {
  display: flex;
  gap: .5rem;
  margin-top: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin-right: -20px;
  padding-right: 20px;
}
.b-topics::-webkit-scrollbar { display: none; }
.b-topics a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #FFFFFF;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.b-topics a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.b-topics a[aria-current="true"] { background: var(--forest-ink); color: var(--forest); border-color: var(--forest-ink); font-weight: 600; }

/* ------------------------------------------------------- feature card */
.b-feature-wrap { position: relative; z-index: 2; margin-top: calc(-1 * clamp(5rem, 11vw, 7.5rem)); }
.b-feature {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 860px) { .b-feature { grid-template-columns: 1.2fr 1fr; } }
.b-feature-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel-alt); }
@media (min-width: 860px) { .b-feature-media { aspect-ratio: auto; min-height: 360px; } }
.b-feature-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.b-feature-body { display: grid; align-content: center; gap: .8rem; padding: clamp(1.5rem, 4vw, 2.75rem); }
.b-feature-body strong { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.1; letter-spacing: -.02em; }
.b-feature .b-excerpt { font-size: 1rem; }

.b-badge {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  padding: .35rem .8rem;
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--accent-ink);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: var(--sh-1);
}
.b-feature .b-badge { background: var(--accent); color: var(--on-accent); }

.b-meta { font-size: .8rem; color: var(--muted); letter-spacing: .02em; }
.b-excerpt { color: var(--ink-soft); font-size: .92rem; line-height: 1.55; }
.b-go {
  justify-self: start;
  margin-top: .4rem;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .6rem 1.3rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: .92rem;
  transition: background-color var(--t-hover) var(--ease-out);
}

/* -------------------------------------------------------------- cards */
.b-grid { display: grid; gap: var(--gap); }
@media (min-width: 640px) { .b-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .b-grid { grid-template-columns: repeat(3, 1fr); } }

.b-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow var(--t-panel) var(--ease-out), border-color var(--t-panel) var(--ease-out), transform var(--t-panel) var(--ease-out);
}
.b-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel-alt); }
.b-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.b-card-body { display: flex; flex-direction: column; gap: .55rem; padding: 1.2rem 1.25rem 1.35rem; flex: 1; }
.b-card-body strong { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.25; }
.b-card .b-meta { margin-top: auto; padding-top: .4rem; }

@media (hover: hover) and (pointer: fine) {
  .b-feature:hover img,
  .b-card:hover img { transform: scale(1.04); }
  .b-feature:hover .b-go { background: var(--accent-deep); }
  .b-card:hover { box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); transform: translateY(-3px); }
  .b-card:hover strong { color: var(--accent-ink); }
}

.b-empty { padding: 3rem 1.5rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-card); background: var(--panel); }
.b-empty h2 { font-size: 1.5rem; margin-bottom: .5rem; }

.b-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 3rem; }
.b-pages a {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
}
.b-pages a[aria-current="page"] { background: var(--forest); color: var(--forest-ink); border-color: var(--forest); }

/* ------------------------------------------------------------ article */
.p-hero::before {
  background: linear-gradient(180deg, rgba(14, 26, 19, .55) 0%, rgba(14, 26, 19, .82) 55%, rgba(14, 26, 19, .94) 100%);
}
.p-hero .wrap { position: relative; z-index: 2; }
.p-hero-copy { max-width: 780px; padding-block: clamp(1rem, 4vw, 3rem) 0; }
.p-hero h1 { color: #FFFFFF; font-size: clamp(2.1rem, 5.4vw, 3.6rem); line-height: 1.05; letter-spacing: -.03em; max-width: 22ch; }
.p-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; font-size: .88rem; color: rgba(255, 255, 255, .8); }
.p-hero { padding-bottom: clamp(3rem, 7vw, 5rem); }

@media (max-width: 959px) {
  .p-hero-copy { padding-top: calc(min(118vw, 560px) * .42); }
  .p-hero .h-hero-bg { height: min(80vw, 420px); }
}

.p-article { min-width: 0; }
.p-prose { max-width: 70ch; font-size: 1.06rem; }
.p-prose > :first-child { margin-top: 0; }
.p-prose p { color: var(--ink-soft); line-height: 1.75; }
.p-prose h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin-top: 2.25rem; }
.p-prose h3 { margin-top: 1.75rem; }

.p-author {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 2.5rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--r-card);
  background: var(--leaf-soft);
}
.p-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--forest-ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.p-author small { display: block; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-author strong { display: block; font-family: var(--font-display); font-size: 1.08rem; }
.p-author span:not(.p-avatar) { display: block; font-size: .88rem; color: var(--ink-soft); }
.p-article .c-disclaimer { margin-top: 1.75rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* =====================================================================
   Solutions, redesigned 22 September 2026
   The shared hero with the form (h-), a numbered jump list on the photo,
   and the concerns as large alternating rows (s-).
   ===================================================================== */

.s-hero .h-hero-bg { object-position: 60% 50%; }

.s-jump { display: grid; gap: .5rem; margin-top: 1.75rem; max-width: 520px; }
@media (min-width: 560px) { .s-jump { grid-template-columns: 1fr 1fr; } }
.s-jump a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: .55rem .9rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.s-jump a:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .45); }
.s-jump span {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------- rows */
.s-rows { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.s-row { display: grid; gap: clamp(1.25rem, 3vw, 3rem); align-items: center; scroll-margin-top: 100px; }
@media (min-width: 860px) {
  .s-row { grid-template-columns: 1fr 1fr; }
  .s-row.is-flip .s-row-media { order: 2; }
}

.s-row-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--panel-alt);
  box-shadow: var(--sh-3);
}
.s-row-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .s-row:hover .s-row-media img { transform: scale(1.04); } }

.s-row-body { position: relative; }
.s-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 5rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--leaf);
  opacity: .28;
  margin-bottom: .5rem;
}
.s-row-body h3 { font-size: clamp(1.7rem, 3.8vw, 2.4rem); line-height: 1.08; letter-spacing: -.025em; }
.s-row-body h3 a { text-decoration: none; }
.s-row-body h3 a:hover { color: var(--accent-ink); }
.s-row-body p { margin-top: .9rem; font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; }
.s-row-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* =====================================================================
   The final menu, 22 September 2026: eighteen concerns in five groups
   ===================================================================== */

/* Home: one card per group. */
.g-cards { display: grid; gap: var(--gap); }
@media (min-width: 640px)  { .g-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .g-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .g-cards { grid-template-columns: repeat(5, 1fr); } }

.g-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--line);
  transition: box-shadow var(--t-panel) var(--ease-out), border-color var(--t-panel) var(--ease-out);
}
.g-card:hover { box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.g-card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel-alt); }
.g-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 700ms var(--ease-out); }
.g-card:hover .g-card-media img { transform: scale(1.04); }
.g-count {
  position: absolute;
  left: .8rem;
  bottom: .8rem;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  background: var(--forest);
  color: var(--forest-ink);
  font-size: .76rem;
  font-weight: 700;
}
.g-card-body { padding: 1.1rem 1.15rem 1.25rem; }
.g-card-body h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.g-card-body h3 a { text-decoration: none; }
.g-card-body h3 a:hover { color: var(--accent-ink); }
.g-card-body ul { list-style: none; margin: 0; padding: 0; display: grid; }
.g-card-body li a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: .3rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: .92rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.g-card-body li a::after { content: "\2192"; margin-left: auto; padding-left: .5rem; color: var(--accent-ink); opacity: 0; transition: opacity var(--t-hover) var(--ease-out); }
.g-card-body li a:hover { color: var(--accent-ink); }
.g-card-body li a:hover::after { opacity: 1; }

/* /solutions: a group heading over its rows. */
.s-group { scroll-margin-top: 90px; }
.s-group + .s-group { margin-top: clamp(4rem, 9vw, 6.5rem); padding-top: clamp(3rem, 6vw, 4rem); border-top: 1px solid var(--line); }

/* Concern cards: never more than five across, whatever the count. */
@media (min-width: 1100px) {
  .h-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}