/* ==========================================================================
   AVALON — stylesheet
   --------------------------------------------------------------------------
   BRAND IS NOT FINAL. Every colour, font and spacing value used anywhere in
   this project is declared once, below, as a CSS custom property. To re-skin
   the entire site when the real brand identity is confirmed, change the
   values in the :root block and nothing else.

   Class naming: camelCase throughout (project convention).
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

  /* ---- Colour: neutrals -------------------------------------------------
     PLACEHOLDER: working palette only. Warm, muted, editorial — parchment,
     stone and ink. Swap these values to change the whole site's mood. */
  --colorParchment:      #F4F0E7;  /* page background                         */
  --colorParchmentDeep:  #EBE4D6;  /* alternating band background             */
  --colorParchmentWarm:  #E3DACA;  /* card / inset background                 */
  --colorStone:          #C6BCAA;  /* hairlines, dividers, disabled states    */
  --colorInk:            #1E1C19;  /* primary text, warm near-black           */
  --colorInkSoft:        #46423B;  /* secondary text                          */
  --colorInkMuted:       #6C665C;  /* captions, meta, eyebrow text            */
  --colorPaperWhite:     #FBF9F4;  /* form fields, cards on deep backgrounds  */

  /* ---- Colour: accents --------------------------------------------------
     PLACEHOLDER: a single quiet accent (the Serra de Sintra woodland) plus a
     warm secondary drawn from the house's own terracotta render. */
  --colorAccent:         #4C5F52;  /* primary accent — muted forest green     */
  --colorAccentDeep:     #38473D;  /* accent hover / darker surfaces          */
  --colorAccentWarm:     #A8705A;  /* secondary accent — house terracotta     */

  /* ---- Colour: dark surfaces (footer, quote band, image overlays) ------- */
  --colorInkSurface:     #211F1B;
  --colorOnDark:         #F1ECE1;
  --colorOnDarkMuted:    #A9A296;

  /* ---- Colour: functional ---------------------------------------------- */
  --colorFocusRing:      #4C5F52;
  --colorError:          #8C3B2E;
  --colorSuccess:        #4C5F52;

  /* ---- Colour: image overlays ------------------------------------------
     Full-bleed photography sits under text; these scrims keep contrast
     accessible without washing the photograph out. */
  /* Two layers: a vertical gradient for the header and the caption line, and
     a left-hand wash so the headline and lede stay readable over bright sky. */
  --scrimHero:
    linear-gradient(180deg, rgba(20,18,16,0.58) 0%, rgba(20,18,16,0.20) 38%, rgba(20,18,16,0.78) 100%),
    linear-gradient(90deg, rgba(20,18,16,0.62) 0%, rgba(20,18,16,0.34) 48%, rgba(20,18,16,0.06) 100%);
  --scrimBand:
    linear-gradient(180deg, rgba(20,18,16,0.42) 0%, rgba(20,18,16,0.62) 100%),
    linear-gradient(90deg, rgba(20,18,16,0.52) 0%, rgba(20,18,16,0.12) 70%);
  --scrimCard: linear-gradient(180deg, rgba(20,18,16,0.05) 0%, rgba(20,18,16,0.72) 100%);

  /* ---- Typography: families --------------------------------------------
     PLACEHOLDER: working pairing only, not final brand type.
     Display — Cormorant Garamond, an elegant editorial serif.
     Body    — Inter, a clean neutral sans.
     Both carry real fallback stacks so the site holds up if webfonts fail. */
  --fontDisplay: "Cormorant Garamond", Cormorant, Garamond, Georgia, "Times New Roman", serif;
  --fontBody: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Typography: scale (fluid, clamped between mobile and desktop) ---- */
  --sizeDisplayXl: clamp(2.75rem, 7vw, 5.75rem);     /* hero headline        */
  --sizeDisplayLg: clamp(2.15rem, 4.8vw, 3.75rem);   /* page / section title */
  --sizeDisplayMd: clamp(1.7rem, 3.1vw, 2.5rem);     /* sub-section title    */
  --sizeDisplaySm: clamp(1.3rem, 2.1vw, 1.7rem);     /* card title           */
  --sizeLead:      clamp(1.06rem, 1.45vw, 1.28rem);  /* standfirst paragraph */
  --sizeBody:      1rem;                             /* body copy            */
  --sizeSmall:     0.875rem;                         /* captions, footnotes  */
  --sizeEyebrow:   0.72rem;                          /* label above titles   */

  /* ---- Typography: weight, leading, tracking ---------------------------- */
  --weightDisplay:     300;
  --weightDisplayBold: 500;
  --weightDisplayHeavy: 600;
  --weightBody:        400;
  --weightBodyMedium:  500;
  --weightBodyStrong:  600;

  --leadingDisplay: 1.06;
  --leadingTitle:   1.18;
  --leadingBody:    1.72;
  --leadingLead:    1.6;

  --trackingDisplay: -0.015em;
  --trackingBody:    0em;
  --trackingEyebrow: 0.19em;

  /* ---- Spacing scale ---------------------------------------------------- */
  --space3xs: 0.25rem;
  --space2xs: 0.5rem;
  --spaceXs:  0.75rem;
  --spaceSm:  1rem;
  --spaceMd:  1.5rem;
  --spaceLg:  2.25rem;
  --spaceXl:  3.5rem;
  --space2xl: 5rem;
  --space3xl: 7.5rem;

  /* Vertical rhythm between major page sections (fluid). */
  --sectionPadding:      clamp(4.5rem, 9vw, 9rem);
  --sectionPaddingTight: clamp(3rem, 5.5vw, 5rem);

  /* ---- Layout ----------------------------------------------------------- */
  --shellWidth:       1240px;  /* outer container                            */
  --shellWidthNarrow: 760px;   /* single-column reading measure              */
  --shellWidthMid:    980px;   /* mid-width blocks                           */
  --shellGutter:      clamp(1.25rem, 4vw, 3.5rem);
  --headerHeight:     84px;
  --headerHeightSm:   68px;

  /* ---- Borders and radii ------------------------------------------------ */
  --radiusSm:   2px;
  --radiusMd:   3px;
  --radiusLg:   4px;   /* deliberately near-square: editorial, not SaaS      */
  --radiusPill: 999px;
  --hairline:       1px solid var(--colorStone);
  --hairlineOnDark: 1px solid rgba(241,236,225,0.22);

  /* ---- Shadow (used sparingly — the reference sites are flat and calm) --- */
  --shadowSoft: 0 1px 2px rgba(30,28,25,0.04), 0 8px 24px rgba(30,28,25,0.06);
  --shadowLift: 0 2px 4px rgba(30,28,25,0.06), 0 18px 44px rgba(30,28,25,0.11);

  /* ---- Motion ----------------------------------------------------------- */
  --easeOut:   cubic-bezier(0.22, 1, 0.36, 1);
  --easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
  --durationFast:   180ms;
  --durationMedium: 380ms;
  --durationSlow:   720ms;

  /* ---- Z-index ledger --------------------------------------------------- */
  --zSubNav:     40;
  --zHeader:     100;
  --zMobileMenu: 110;
  --zSkipLink:   120;
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

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

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

/* Anchor links from the in-page section navigation must not land under the
   fixed header. */
:target { scroll-margin-top: calc(var(--headerHeight) + var(--spaceLg)); }

body {
  margin: 0;
  background-color: var(--colorParchment);
  color: var(--colorInk);
  font-family: var(--fontBody);
  font-size: var(--sizeBody);
  font-weight: var(--weightBody);
  line-height: var(--leadingBody);
  letter-spacing: var(--trackingBody);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menuOpen { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--fontDisplay);
  font-weight: var(--weightDisplay);
  line-height: var(--leadingTitle);
  letter-spacing: var(--trackingDisplay);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--spaceMd); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol { margin: 0 0 var(--spaceMd); padding-left: 1.15rem; }
li { margin-bottom: var(--space2xs); }
li:last-child { margin-bottom: 0; }

/* Inline emphasis inside body copy. Body text is set in a muted ink, so a
   <strong> both gains weight and steps up to the full ink colour, which is
   what actually makes it read as emphasis. On dark surfaces it steps the
   other way, towards the light. <em> stays quiet and is for phrasing. */
strong { font-weight: var(--weightBodyStrong); color: var(--colorInk); }
.bandInk strong,
.ctaBand strong,
.imageBandContent strong,
.heroContent strong,
.siteFooter strong { color: var(--colorOnDark); }
em { font-style: italic; }

:focus-visible {
  outline: 2px solid var(--colorFocusRing);
  outline-offset: 3px;
}

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

.skipLink {
  position: absolute;
  top: -100px;
  left: var(--spaceMd);
  z-index: var(--zSkipLink);
  background: var(--colorInk);
  color: var(--colorOnDark);
  padding: var(--spaceXs) var(--spaceMd);
  font-size: var(--sizeSmall);
  text-decoration: none;
}
.skipLink:focus { top: var(--spaceMd); }

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.sectionShell {
  width: 100%;
  max-width: var(--shellWidth);
  margin-inline: auto;
  padding-inline: var(--shellGutter);
}

.shellNarrow { max-width: var(--shellWidthNarrow); margin-inline: auto; }
.shellMid    { max-width: var(--shellWidthMid);    margin-inline: auto; }

/* Constrain the measure but keep the block flush with the page's left edge,
   so headings line up down the whole page rather than drifting to centre. */
.shellFlush { margin-inline: 0; }

.sectionBlock      { padding-block: var(--sectionPadding); }
.sectionBlockTight { padding-block: var(--sectionPaddingTight); }

.bandParchmentDeep { background-color: var(--colorParchmentDeep); }
.bandParchmentWarm { background-color: var(--colorParchmentWarm); }
.bandInk           { background-color: var(--colorInkSurface); color: var(--colorOnDark); }
.bandInk h1, .bandInk h2, .bandInk h3 { color: var(--colorOnDark); }

.ruleHairline { border: 0; border-top: var(--hairline); margin: 0; }

/* ==========================================================================
   4. TYPOGRAPHIC COMPONENTS
   ========================================================================== */

.eyebrow {
  display: block;
  font-family: var(--fontBody);
  font-size: var(--sizeEyebrow);
  font-weight: var(--weightBodyMedium);
  letter-spacing: var(--trackingEyebrow);
  text-transform: uppercase;
  color: var(--colorInkMuted);
  margin-bottom: var(--spaceMd);
}
.bandInk .eyebrow { color: var(--colorOnDarkMuted); }

.displayXl { font-size: var(--sizeDisplayXl); line-height: var(--leadingDisplay); }
.displayLg { font-size: var(--sizeDisplayLg); }
.displayMd { font-size: var(--sizeDisplayMd); }
.displaySm { font-size: var(--sizeDisplaySm); }

.leadText {
  font-size: var(--sizeLead);
  line-height: var(--leadingLead);
  color: var(--colorInkSoft);
  max-width: 60ch;
}
.bandInk .leadText { color: var(--colorOnDark); }

.bodyText { color: var(--colorInkSoft); }
.bandInk .bodyText { color: var(--colorOnDarkMuted); }

.smallText { font-size: var(--sizeSmall); color: var(--colorInkMuted); line-height: 1.6; }

/* Section heading pattern: eyebrow + title + optional lead. */
.sectionHead { margin-bottom: var(--spaceXl); }
.sectionHead .leadText { margin-top: var(--spaceMd); }

/* The single-sentence mission statement, given a screen of its own. */
.measureShort { max-width: 24ch; }

/* --------------------------------------------------------------------------
   PLACEHOLDER MARKER
   A discreet inline tag rendered wherever the copy on the page is holding
   text rather than final content, so a non-technical reviewer can see every
   open item on the site itself. Every one also carries a matching
   "PLACEHOLDER:" comment in the source and a row in PLACEHOLDERS.md.

   TO HIDE ALL MARKERS FOR A CLIENT-FACING VIEW: change the `display` value
   in the next rule from `inline-block` to `none`.
   -------------------------------------------------------------------------- */
.placeholderTag {
  display: inline-block;
  font-family: var(--fontBody);
  font-size: 0.65rem;
  font-weight: var(--weightBodyMedium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--colorAccentWarm);
  border: 1px dashed var(--colorAccentWarm);
  border-radius: var(--radiusSm);
  padding: 0.15em 0.5em;
  margin-left: 0.4em;
  vertical-align: middle;
  line-height: 1.5;
  white-space: nowrap;
}
.bandInk .placeholderTag,
.heroContent .placeholderTag { color: #D9A78E; border-color: #D9A78E; }

/* ==========================================================================
   5. BUTTONS AND LINKS
   ========================================================================== */

.buttonPrimary,
.buttonSecondary,
.buttonGhost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space2xs);
  font-family: var(--fontBody);
  font-size: var(--sizeSmall);
  font-weight: var(--weightBodyMedium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2em;
  border-radius: var(--radiusSm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--durationFast) var(--easeOut),
              color var(--durationFast) var(--easeOut),
              border-color var(--durationFast) var(--easeOut),
              transform var(--durationFast) var(--easeOut);
}

.buttonPrimary { background-color: var(--colorAccent); color: var(--colorOnDark); }
.buttonPrimary:hover { background-color: var(--colorAccentDeep); }

.buttonSecondary { background-color: transparent; color: var(--colorInk); border-color: var(--colorInk); }
.buttonSecondary:hover { background-color: var(--colorInk); color: var(--colorOnDark); }

.buttonGhost { background-color: transparent; color: var(--colorOnDark); border-color: rgba(241,236,225,0.55); }
.buttonGhost:hover { background-color: var(--colorOnDark); color: var(--colorInk); }

.buttonPrimary:active,
.buttonSecondary:active,
.buttonGhost:active { transform: translateY(1px); }

/* Quiet text link with an underline that grows on hover. */
.linkQuiet {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--sizeSmall);
  font-weight: var(--weightBodyMedium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--colorAccent);
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--durationMedium) var(--easeOut);
}
.linkQuiet:hover { background-size: 100% 1px; }
.linkQuiet .linkArrow { transition: transform var(--durationMedium) var(--easeOut); }
.linkQuiet:hover .linkArrow { transform: translateX(4px); }
.bandInk .linkQuiet { color: var(--colorOnDark); }
/* The CTA band is a dark green surface: the accent green used for links on
   parchment all but disappears against it. Light ink instead. */
.ctaBand .linkQuiet { color: var(--colorOnDark); }
.ctaBand .linkQuiet:hover { color: var(--colorOnDark); }

.buttonRow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceSm);
  margin-top: var(--spaceLg);
}

/* ==========================================================================
   6. SITE HEADER
   Transparent over the hero; becomes a solid, minimal bar once scrolled.
   ========================================================================== */

.siteHeader {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--zHeader);
  height: var(--headerHeight);
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--durationMedium) var(--easeOut),
              border-color var(--durationMedium) var(--easeOut),
              height var(--durationMedium) var(--easeOut);
}

.siteHeader.isScrolled {
  background-color: rgba(244,240,231,0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--colorStone);
  height: var(--headerHeightSm);
}

.headerInner {
  width: 100%;
  max-width: var(--shellWidth);
  margin-inline: auto;
  padding-inline: var(--shellGutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spaceMd);
}

/* ---- Wordmark ------------------------------------------------------------
   The logo is an inline <svg> (see wordmark() in js/chrome.js) filled with
   currentColor, so the light/dark colour rules below move the artwork with
   the rest of the header. Height is set here; width follows the aspect ratio. */
.brandWordmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--colorOnDark);
  line-height: 1;
  transition: color var(--durationMedium) var(--easeOut);
}
.brandWordmarkArt {
  display: block;
  height: 20px;
  width: auto;
}
@media (min-width: 760px) { .brandWordmarkArt { height: 24px; } }
.siteHeader.isScrolled .brandWordmark,
.siteHeader.headerOnLight .brandWordmark { color: var(--colorInk); }

/* The footer sits on a dark surface and carries the logo a little larger. */
.footerBrand .brandWordmarkArt { height: 28px; }

/* ---- Primary navigation --------------------------------------------------
   Seven top-level items plus a language toggle and a call to action is a lot
   to fit. The nav appears at 1080px; the header button waits until 1300px,
   where there is genuinely room for it. Below those widths the menu button
   takes over. */
.navPrimary { display: none; }
@media (min-width: 1080px) { .navPrimary { display: block; } }

.navList li { margin: 0; }

.navList {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.35vw, 1.35rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navLink {
  font-size: 0.72rem;
  font-weight: var(--weightBodyMedium);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--colorOnDark);
  padding-bottom: 3px;
  white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--durationMedium) var(--easeOut),
              color var(--durationMedium) var(--easeOut);
}
.navLink:hover { background-size: 100% 1px; }
.navLink.isCurrent { background-size: 100% 1px; }

.siteHeader.isScrolled .navLink,
.siteHeader.headerOnLight .navLink { color: var(--colorInk); }

.headerActions { display: flex; flex: none; align-items: center; gap: var(--space2xs); }

/* ---- Language toggle ----------------------------------------------------- */
.langToggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  border: 1px solid rgba(241,236,225,0.45);
  border-radius: var(--radiusPill);
  overflow: hidden;
  transition: border-color var(--durationMedium) var(--easeOut);
}
.siteHeader.isScrolled .langToggle,
.siteHeader.headerOnLight .langToggle { border-color: var(--colorStone); }

.langOption {
  font-family: var(--fontBody);
  font-size: 0.68rem;
  font-weight: var(--weightBodyMedium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--colorOnDark);
  background: transparent;
  border: 0;
  padding: 0.5em 0.85em;
  cursor: pointer;
  transition: background-color var(--durationFast) var(--easeOut),
              color var(--durationFast) var(--easeOut);
}
.siteHeader.isScrolled .langOption,
.siteHeader.headerOnLight .langOption { color: var(--colorInkMuted); }

.langOption.isActive { background-color: var(--colorOnDark); color: var(--colorInk); }
.siteHeader.isScrolled .langOption.isActive,
.siteHeader.headerOnLight .langOption.isActive { background-color: var(--colorInk); color: var(--colorOnDark); }

/* ---- Header waitlist button ---------------------------------------------- */
.headerCta { display: none; flex: none; white-space: nowrap; padding: 0.75em 1.2em; font-size: 0.68rem; letter-spacing: 0.07em; }
@media (min-width: 1300px) { .headerCta { display: inline-flex; } }

.siteHeader:not(.isScrolled):not(.headerOnLight) .headerCta {
  background-color: transparent;
  color: var(--colorOnDark);
  border-color: rgba(241,236,225,0.55);
}
.siteHeader:not(.isScrolled):not(.headerOnLight) .headerCta:hover {
  background-color: var(--colorOnDark);
  color: var(--colorInk);
}

/* ---- Mobile menu button -------------------------------------------------- */
.menuButton {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
@media (min-width: 1080px) { .menuButton { display: none; } }

.menuButton span {
  display: block;
  height: 1px;
  width: 24px;
  background-color: var(--colorOnDark);
  transition: background-color var(--durationMedium) var(--easeOut),
              transform var(--durationMedium) var(--easeOut),
              opacity var(--durationFast) var(--easeOut);
}
.siteHeader.isScrolled .menuButton span,
.siteHeader.headerOnLight .menuButton span { background-color: var(--colorInk); }

body.menuOpen .menuButton span { background-color: var(--colorInk); }
body.menuOpen .menuButton span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menuOpen .menuButton span:nth-child(2) { opacity: 0; }
body.menuOpen .menuButton span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   7. MOBILE MENU DRAWER
   ========================================================================== */

.mobileMenu {
  position: fixed;
  inset: 0;
  z-index: var(--zMobileMenu);
  background-color: var(--colorParchment);
  padding: calc(var(--headerHeight) + var(--spaceLg)) var(--shellGutter) var(--spaceXl);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--durationMedium) var(--easeOut),
              transform var(--durationMedium) var(--easeOut),
              visibility var(--durationMedium) var(--easeOut);
}
.mobileMenu.isOpen { opacity: 1; visibility: visible; transform: translateY(0); }

.mobileMenuList { list-style: none; margin: 0; padding: 0; }
.mobileMenuList > li { border-bottom: var(--hairline); }

.mobileMenuLink {
  display: block;
  font-family: var(--fontDisplay);
  font-size: 1.8rem;
  font-weight: var(--weightDisplay);
  text-decoration: none;
  color: var(--colorInk);
  padding: var(--spaceMd) 0 var(--space2xs);
}

.mobileMenuSub {
  list-style: none;
  margin: 0 0 var(--spaceMd);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space2xs) var(--spaceMd);
}
.mobileMenuSub li { margin: 0; }
.mobileMenuSub a { font-size: var(--sizeSmall); color: var(--colorInkMuted); text-decoration: none; }
.mobileMenuSub a:hover { color: var(--colorAccent); text-decoration: underline; }

.mobileMenuFooter { margin-top: var(--spaceXl); }

/* ==========================================================================
   8. HERO
   ========================================================================== */

.heroSection {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--colorInkSurface); /* holds the frame before the image paints */
}

/* The media layer is taller than the section so the parallax has room to
   travel without exposing an edge. */
.heroMedia { position: absolute; inset: -8% 0 -8% 0; z-index: 0; }
.heroMedia img,
.heroMedia video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.heroScrim { position: absolute; inset: 0; z-index: 1; background: var(--scrimHero); }

.heroContent {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--space2xl) var(--spaceXl);
  color: var(--colorOnDark);
}
.heroContent .eyebrow { color: rgba(241,236,225,0.78); }

.heroTitle { color: var(--colorOnDark); max-width: 15ch; margin-bottom: var(--spaceMd); }

.heroLede {
  font-size: var(--sizeLead);
  line-height: var(--leadingLead);
  color: rgba(241,236,225,0.9);
  max-width: 52ch;
}

/* Carries a caption, a scroll hint, or both — house.html has only the caption
   and index.html only the hint, so this has to sit correctly with one child. */
.heroFooter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spaceMd);
  margin-top: var(--spaceXl);
}
.heroFooter > .scrollHint:only-child { margin-left: auto; }

.heroCaption { font-size: var(--sizeSmall); color: rgba(241,236,225,0.62); max-width: 36ch; }

.scrollHint {
  display: none;
  font-size: var(--sizeEyebrow);
  letter-spacing: var(--trackingEyebrow);
  text-transform: uppercase;
  color: rgba(241,236,225,0.6);
}
@media (min-width: 900px) { .scrollHint { display: block; } }

/* ---- Subpage hero (shorter, same language) -------------------------------- */
.pageHero {
  position: relative;
  min-height: clamp(460px, 62vh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--colorInkSurface);
}
.pageHero .heroContent { padding-block: var(--spaceXl); }
.pageHero .heroTitle { max-width: 20ch; }

/* ==========================================================================
   9. IN-PAGE SECTION NAVIGATION (pillar pages)
   ========================================================================== */

.subNav {
  position: sticky;
  top: var(--headerHeightSm);
  z-index: var(--zSubNav);
  background-color: rgba(244,240,231,0.96);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--hairline);
}

.subNavInner {
  max-width: var(--shellWidth);
  margin-inline: auto;
  padding-inline: var(--shellGutter);
  display: flex;
  gap: var(--spaceLg);
  overflow-x: auto;
  scrollbar-width: none;
}
.subNavInner::-webkit-scrollbar { display: none; }

.subNavLink {
  flex: none;
  padding: var(--spaceSm) 0;
  font-size: 0.75rem;
  font-weight: var(--weightBodyMedium);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--colorInkMuted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color var(--durationFast) var(--easeOut),
              border-color var(--durationFast) var(--easeOut);
}
.subNavLink:hover { color: var(--colorInk); }
.subNavLink.isActive { color: var(--colorAccent); border-bottom-color: var(--colorAccent); }

/* ==========================================================================
   10. CARDS
   ========================================================================== */

.cardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}
.cardGridTwo { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

/* ---- Teaser card: photograph, title, one line, quiet link ---------------- */
.teaserCard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radiusLg);
  background-color: var(--colorParchmentWarm);
  text-decoration: none;
  color: var(--colorOnDark);
  isolation: isolate;
}

.teaserCardMedia { position: absolute; inset: 0; z-index: -2; }
.teaserCardMedia img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--easeOut);
}
.teaserCard:hover .teaserCardMedia img { transform: scale(1.045); }

.teaserCard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrimCard);
}

.teaserCardBody { margin-top: auto; padding: var(--spaceLg); }
.teaserCardTitle {
  font-size: var(--sizeDisplaySm);
  font-weight: var(--weightDisplayHeavy);
  color: var(--colorOnDark);
  margin-bottom: var(--space2xs);
}
.teaserCardText { font-size: var(--sizeSmall); color: rgba(241,236,225,0.82); margin-bottom: var(--spaceSm); max-width: none; }
/* The "Read more" label closes the card, so it sits a step below the card
   text rather than competing with it. */
.teaserCardMeta {
  font-size: 0.66rem;
  letter-spacing: var(--trackingEyebrow);
  text-transform: uppercase;
  color: rgba(241,236,225,0.7);
}

/* ---- Plain card: no photograph, used for calm content grids -------------- */
.plainCard {
  background-color: var(--colorPaperWhite);
  border: var(--hairline);
  border-radius: var(--radiusLg);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: var(--spaceXs);
}
.bandParchmentDeep .plainCard { border-color: transparent; }
.plainCardTitle { font-size: var(--sizeDisplaySm); font-weight: var(--weightDisplayHeavy); }
.plainCardIndex {
  font-family: var(--fontDisplay);
  font-size: var(--sizeSmall);
  color: var(--colorAccent);
  letter-spacing: 0.1em;
}

/* ---- Numbered process steps ---------------------------------------------- */
.stepList { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spaceLg); }
.stepItem {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--spaceMd);
  align-items: start;
  padding-bottom: var(--spaceLg);
  border-bottom: var(--hairline);
  margin: 0;
}
.stepItem:last-child { border-bottom: 0; padding-bottom: 0; }
.stepNumber {
  font-family: var(--fontDisplay);
  font-size: 1.75rem;
  color: var(--colorAccent);
  line-height: 1;
  padding-top: 0.1em;
}
.stepTitle { font-size: var(--sizeDisplaySm); margin-bottom: var(--space2xs); }

/* ==========================================================================
   11. SPLIT BLOCK — image beside text, alternating
   ========================================================================== */

.splitBlock { display: grid; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
@media (min-width: 860px) {
  .splitBlock { grid-template-columns: 1fr 1fr; }
  .splitBlock.splitReverse .splitMedia { order: 2; }
}

.splitMedia {
  position: relative;
  overflow: hidden;
  border-radius: var(--radiusLg);
  background-color: var(--colorParchmentWarm);
}
.splitMedia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.splitMedia.mediaLandscape img { aspect-ratio: 4 / 3; }

.mediaCaption { font-size: var(--sizeSmall); color: var(--colorInkMuted); margin-top: var(--spaceXs); }

/* ---- Image placeholder: used where no real photograph exists yet ----------
   A muted brand-coloured block. Never a stock photo. */
.mediaPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  background-color: var(--colorParchmentWarm);
  background-image: repeating-linear-gradient(135deg,
    rgba(108,102,92,0.055) 0 12px, transparent 12px 24px);
  border: 1px dashed var(--colorStone);
  border-radius: var(--radiusLg);
  color: var(--colorInkMuted);
  font-size: var(--sizeEyebrow);
  letter-spacing: var(--trackingEyebrow);
  text-transform: uppercase;
  text-align: center;
  padding: var(--spaceLg);
}
.mediaPlaceholder.mediaLandscape { aspect-ratio: 4 / 3; }

/* ==========================================================================
   12. FULL-BLEED IMAGE BAND (parallax)
   ========================================================================== */

.imageBand {
  position: relative;
  min-height: clamp(420px, 66vh, 720px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--colorInkSurface);
  color: var(--colorOnDark);
}
.imageBandMedia { position: absolute; inset: -10% 0 -10% 0; z-index: 0; }
.imageBandMedia img { width: 100%; height: 100%; object-fit: cover; }
.imageBandScrim { position: absolute; inset: 0; z-index: 1; background: var(--scrimBand); }
.imageBandContent { position: relative; z-index: 2; width: 100%; padding-block: var(--spaceXl); }
.imageBandContent h2 { color: var(--colorOnDark); }
.imageBandContent .bodyText { color: rgba(241,236,225,0.84); }
.imageBandContent .eyebrow { color: rgba(241,236,225,0.78); }
.imageBandContent .linkQuiet { color: var(--colorOnDark); }

/* ---- Photo strip: three or four images in a row --------------------------- */
.photoStrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
.photoStrip figure { margin: 0; }
.photoStrip img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radiusLg); }
.photoStrip figcaption { font-size: var(--sizeSmall); color: var(--colorInkMuted); margin-top: var(--space2xs); }

/* ==========================================================================
   13. TRUST STRIP
   ========================================================================== */

.trustStrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--spaceLg);
  border-block: var(--hairline);
  padding-block: var(--spaceXl);
}
.trustItem { display: flex; flex-direction: column; gap: var(--space3xs); }
.trustItemLabel { font-family: var(--fontDisplay); font-size: 1.3rem; line-height: 1.3; }
.trustItemText { font-size: var(--sizeSmall); color: var(--colorInkMuted); }

/* ==========================================================================
   14. QUOTE BLOCK
   ========================================================================== */

/* ==========================================================================
   15. LONG-FORM CONTENT SECTIONS (conditions, therapies, policies)
   ========================================================================== */

.contentSection { padding-block: var(--sectionPadding); border-top: var(--hairline); }
.contentSection.noRule { border-top: 0; }

.contentSectionHead { display: grid; gap: var(--spaceMd); margin-bottom: var(--spaceXl); }
@media (min-width: 900px) {
  .contentSectionHead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--spaceXl);
    align-items: start;
  }
  .contentSectionHead .contentSectionTitle { position: sticky; top: calc(var(--headerHeight) + 3.5rem); }
}

.signList { list-style: none; margin: 0 0 var(--spaceMd); padding: 0; display: grid; gap: var(--spaceXs); }
.signList li { position: relative; padding-left: var(--spaceMd); color: var(--colorInkSoft); margin: 0; }
.signList li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 6px; height: 1px;
  background-color: var(--colorAccent);
}

/* Pull-out note: gentle, supportive framing set apart from the body copy. */
.calloutNote {
  border-left: 2px solid var(--colorAccent);
  padding: var(--spaceXs) 0 var(--spaceXs) var(--spaceMd);
  margin-block: var(--spaceLg);
}
.calloutNote p { font-size: var(--sizeBody); color: var(--colorInkSoft); }

/* ==========================================================================
   17. FORMS
   ========================================================================== */

.formShell {
  background-color: var(--colorPaperWhite);
  border: var(--hairline);
  border-radius: var(--radiusLg);
  padding: clamp(1.5rem, 3.4vw, 3rem);
}

.formGrid { display: grid; gap: var(--spaceMd); }
@media (min-width: 720px) {
  .formGrid { grid-template-columns: 1fr 1fr; }
  .fieldFull { grid-column: 1 / -1; }
}

.fieldGroup { display: flex; flex-direction: column; gap: var(--space2xs); }

.fieldLabel { font-size: var(--sizeSmall); font-weight: var(--weightBodyMedium); color: var(--colorInkSoft); }
.fieldOptional { color: var(--colorInkMuted); font-weight: var(--weightBody); }

.inputField,
.selectField,
.textareaField {
  font-family: var(--fontBody);
  font-size: var(--sizeBody);
  color: var(--colorInk);
  background-color: var(--colorParchment);
  border: var(--hairline);
  border-radius: var(--radiusSm);
  padding: 0.85em 0.95em;
  width: 100%;
  transition: border-color var(--durationFast) var(--easeOut),
              background-color var(--durationFast) var(--easeOut);
}
.inputField:focus,
.selectField:focus,
.textareaField:focus { border-color: var(--colorAccent); background-color: var(--colorPaperWhite); }
.textareaField { min-height: 120px; resize: vertical; }

.selectField {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236C665C' stroke-width='1.2' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
}

.fieldError { font-size: var(--sizeSmall); color: var(--colorError); min-height: 0; }
.inputField[aria-invalid="true"],
.selectField[aria-invalid="true"],
.textareaField[aria-invalid="true"] { border-color: var(--colorError); }

.formConsent { font-size: var(--sizeSmall); color: var(--colorInkMuted); }
.formActions { margin-top: var(--spaceLg); display: flex; flex-wrap: wrap; align-items: center; gap: var(--spaceMd); }

/* ---- Warm confirmation state --------------------------------------------- */
.formConfirmation { display: none; border-left: 2px solid var(--colorSuccess); padding-left: var(--spaceMd); }
.formConfirmation.isVisible { display: block; }
.formConfirmationTitle { font-size: var(--sizeDisplayMd); margin-bottom: var(--spaceSm); }

/* ==========================================================================
   18. WAITLIST CALL TO ACTION (soft, ever-present)
   ========================================================================== */

.ctaBand { position: relative; overflow: hidden; background-color: var(--colorAccentDeep); color: var(--colorOnDark); }
.ctaBand h2 { color: var(--colorOnDark); }
.ctaBand .bodyText { color: rgba(241,236,225,0.82); }
.ctaBandInner { display: grid; gap: var(--spaceLg); align-items: center; }
@media (min-width: 900px) { .ctaBandInner { grid-template-columns: 1.4fr 1fr; gap: var(--space2xl); } }

/* ==========================================================================
   19. FOOTER
   ========================================================================== */

.siteFooter {
  background-color: var(--colorInkSurface);
  color: var(--colorOnDarkMuted);
  padding-block: var(--space2xl) var(--spaceXl);
}

.footerTop { display: grid; gap: var(--spaceXl); padding-bottom: var(--spaceXl); border-bottom: var(--hairlineOnDark); }
@media (min-width: 860px) { .footerTop { grid-template-columns: 1.1fr 2fr; } }

.footerBrand .brandWordmark { color: var(--colorOnDark); font-size: 1.4rem; }
.footerBlurb { font-size: var(--sizeSmall); color: var(--colorOnDarkMuted); margin-top: var(--spaceMd); max-width: 34ch; }

.footerNavGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  gap: var(--spaceLg);
}
.footerNavTitle {
  font-family: var(--fontBody);
  font-size: var(--sizeEyebrow);
  font-weight: var(--weightBodyMedium);
  letter-spacing: var(--trackingEyebrow);
  text-transform: uppercase;
  color: var(--colorOnDark);
  margin-bottom: var(--spaceSm);
}
.footerNavList { list-style: none; margin: 0; padding: 0; }
.footerNavList li { margin-bottom: var(--space2xs); }
.footerNavList a {
  font-size: var(--sizeSmall);
  color: var(--colorOnDarkMuted);
  text-decoration: none;
  transition: color var(--durationFast) var(--easeOut);
}
.footerNavList a:hover { color: var(--colorOnDark); }

.footerBottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spaceMd);
  justify-content: space-between;
  padding-top: var(--spaceLg);
  font-size: var(--sizeSmall);
}

/* ==========================================================================
   20. SCROLL REVEAL
   The hidden starting state applies ONLY when JS has confirmed GSAP loaded
   (html.gsapReady). If the CDN fails or JS is off, nothing is hidden and the
   site reads as a plain, complete document.
   ========================================================================== */

html.gsapReady .revealItem { opacity: 0; }
html.gsapReady .revealStagger > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.gsapReady .revealItem,
  html.gsapReady .revealStagger > * { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   21. UTILITIES
   ========================================================================== */

.stackSm > * + * { margin-top: var(--spaceSm); }
.stackMd > * + * { margin-top: var(--spaceMd); }
.stackLg > * + * { margin-top: var(--spaceLg); }
.stackXl > * + * { margin-top: var(--spaceXl); }

.textMeasure { max-width: 62ch; }
.marginTopLg { margin-top: var(--spaceLg); }
.marginTopXl { margin-top: var(--spaceXl); }

.noscriptNotice {
  background-color: var(--colorAccentWarm);
  color: var(--colorPaperWhite);
  padding: var(--spaceSm) var(--shellGutter);
  font-size: var(--sizeSmall);
  text-align: center;
}