/* ============================================================
   juleSpa Skin Studio — design system
   ------------------------------------------------------------
   Client-approved brand system (2026-07-24 spec): Warm Ivory,
   Terracotta, Cocoa Brown, Soft Lavender (small accents only);
   Playlist Script (brand name) + Montserrat. Edit the :root
   block only; every color derives from it.
   ============================================================ */

@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/montserrat-latin-400-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
}
@font-face{
  font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;
  src:url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
}
/* TODO(brand-font): "Playlist Script" is the brand display face (name/wordmark
   only). It is not on npm/Google Fonts — drop the licensed woff2 into
   assets/fonts/playlist-script.woff2 and uncomment:
@font-face{
  font-family:"Playlist Script";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/playlist-script.woff2") format("woff2");
}
*/
/* Moontime — leading candidate for the actual wordmark face (Julie's
   "moon-something" recollection, 2026-07-24; its capital S closely matches
   the logo's sweeping S). EVALUATION ONLY on this preview build: the file
   is the personal-use demo — buy the commercial/webfont license (MyFonts
   "Moon Time" / Creative Market "Moontime Script") or swap back to Whisper
   BEFORE launching on julespaskin.studio. */
@font-face{
  font-family:"Moontime";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/moontime-regular.otf") format("opentype");
}
/* Interim wordmark script — Whisper (OFL, self-hosted), matched by eye to the
   thin monoline signature lettering on Julie's sign artwork (Chad's crop,
   2026-07-24). Fallback behind Moontime while the identification is
   confirmed. */
@font-face{
  font-family:"Whisper";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/whisper-latin-400-normal.woff2") format("woff2");
}

:root{
  /* BRAND SYSTEM (client-approved, 2026-07-24 spec — do not deviate):
     Warm Ivory #F6F2EA - Terracotta #C57A4D - Cocoa Brown #8A5630 -
     Soft Lavender #7E6BA8 (small accents ONLY, never backgrounds/headers).
     Terracotta placement (client feedback 2026-07-24, current-site parity):
     terracotta is the hero color — solid buttons, dark bands, and the footer
     use --terra-deep, a darkened terracotta chosen because brand #C57A4D is
     only 3.4:1 against white (fails AA at button/body sizes) while #AD5F2E
     is 4.7:1 with pure white text. Cocoa stays for small text-level
     interactives (links, nav, ghost buttons) where it clears 4.5:1 on
     ivory; brand terracotta #C57A4D carries accents, hairlines, hovers,
     and imagery washes. Text on any terracotta surface must be #FFFFFF —
     ivory/cream tints drop below AA there. */
  --porcelain:#F6F2EA;      /* Warm Ivory — page ground */
  --surface:#FFFFFF;        /* cards */
  --pine:#8A5630;           /* Cocoa Brown — text-level interactive (AA on white/ivory) */
  --pine-deep:#6E4225;      /* darker cocoa — hover */
  --terra:#C57A4D;          /* Terracotta — accents, hairlines, decorative */
  --terra-deep:#AD5F2E;     /* deep terracotta — buttons, footer, dark bands (4.7:1 w/ white) */
  --terra-hover:#9C5428;    /* button hover (5.7:1 w/ white) */
  --lav:#7E6BA8;            /* Soft Lavender — small accents only */
  --ink:#3E352D;            /* warm charcoal text */
  --ink-soft:#6F6357;
  --sage-line:#E8DFD2;      /* hairlines, borders */
  --sage-tint:#F1E9DC;      /* tinted bands */
  --bronze:#8A5630;         /* eyebrow text (AA on ivory/tint) */
  --focus:#7E6BA8;          /* lavender focus ring — small accent, 4.1:1 on ivory */

  --serif:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --script:"Moontime","Playlist Script","Whisper","Snell Roundhand","Segoe Script",cursive;
  --sans:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  --maxw:1120px;
  --radius:18px;
  --shadow:0 1px 2px rgba(32,56,47,.05),0 12px 32px -16px rgba(32,56,47,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--porcelain);color:var(--ink);
  font:400 17px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--pine)}
:focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:4px}

h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.16;
  letter-spacing:-.015em;margin:0;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.25rem)}
h3{font-size:1.25rem;line-height:1.3}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--ink-soft);max-width:58ch}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font:600 .72rem/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;
  color:var(--bronze);margin-bottom:18px;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--terra);flex:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,242,234,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header{background:var(--sage-tint)}
}
.site-header.scrolled{border-bottom-color:var(--sage-line)}
.header-in{display:flex;align-items:center;gap:28px;min-height:76px}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.wm-logo{width:48px;height:48px;border-radius:50%;flex:none}
.wm-text{display:flex;flex-direction:column;gap:1px}
.wordmark .wm-name{font:400 2.6rem/1 var(--script);letter-spacing:.02em}
/* Wordmark renders in the --script stack per Julie's sign spec (cursive
   "juleSpa"); Great Vibes stands in until the licensed Playlist Script
   file ships (TODO(brand-font) above). */
.wordmark .wm-sub{font:600 .58rem/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;color:var(--terra)}
/* Header wordmark is the ring logo (which reads "juleSpa") + SKIN STUDIO
   alone (per Chad 2026-07-24) — bump the sub so it holds its own. The
   footer keeps the two-line text wordmark, so this stays header-scoped. */
.site-header .wm-sub{font-size:.74rem;letter-spacing:.3em}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.site-nav a{
  font:500 .95rem/1 var(--sans);color:var(--ink);text-decoration:none;
  padding:10px 14px;border-radius:999px;transition:background .18s ease;
}
.site-nav a:hover{background:var(--sage-tint)}
.site-nav a[aria-current="page"]{color:var(--pine);font-weight:600}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:600 .98rem/1 var(--sans);text-decoration:none;cursor:pointer;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease;
}
.btn-solid{background:var(--terra-deep);color:#fff}
.btn-solid:hover{background:var(--terra-hover);transform:translateY(-1px)}
.btn-ghost{border-color:var(--pine);color:var(--pine);background:transparent}
.btn-ghost:hover{background:var(--pine);color:#fff}
.btn-sm{padding:11px 20px;font-size:.9rem}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

.nav-toggle{display:none}
@media (max-width:860px){
  .site-nav{
    position:fixed;inset:76px 0 auto 0;z-index:49;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border-bottom:1px solid var(--sage-line);
    padding:14px 20px 22px;margin:0;
    transform:translateY(calc(-100% - 80px));visibility:hidden;
    transition:transform .28s ease,visibility 0s .28s;
  }
  .site-nav.open{transform:translateY(0);visibility:visible;transition:transform .28s ease}
  .site-nav a{padding:14px 12px;font-size:1.05rem;border-radius:12px}
  .site-nav .btn{margin-top:10px}
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;background:none;border:0;padding:12px;cursor:pointer;
  }
  .nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px;
    transition:transform .22s ease,opacity .22s ease}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .site-nav .nav-book{display:inline-flex}
  .header-book{display:none}
  /* Page scroll locks while the mobile menu is open (class set in main.js) —
     otherwise the whole site keeps scrolling behind the open panel. */
  body.nav-open{overflow:hidden}
}
@media (min-width:861px){.site-nav .nav-book{display:none}}

/* ---------- sections ---------- */
.section{padding-block:clamp(72px,9vw,116px)}
.section--tint{background:var(--sage-tint)}
.section--dark{background:var(--terra-deep);color:#FFFFFF}
.section--dark h2,.section--dark h3{color:#FFFFFF}
.section--dark .lede,.section--dark p{color:#FFFFFF}
.section--dark .eyebrow{color:#FFFFFF}
.section--dark .eyebrow::before{background:#F5E3CC}
.section-head{max-width:64ch;margin-bottom:clamp(36px,5vw,56px)}
.section-head .lede{margin-top:14px}

/* ---------- hero ---------- */
.hero{padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,104px)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:italic;font-weight:400;color:var(--terra-deep)}
.hero .lede{margin-top:22px}

/* Full-bleed hero, styled after the live site's photo hero (headline over a
   warm image). The layered gradients below are a stand-in for the studio
   photo (TODO(new-studio-photos) — no faces); when the real image arrives,
   add it as a background-image layer beneath the first (overlay) gradient,
   which stays for text legibility. */
.hero--full{
  position:relative;display:flex;align-items:center;text-align:center;
  min-height:clamp(520px,68vh,720px);
  /* Real studio photo (Julie, 2026-07-24) under the legibility gradient;
     terracotta fallback paints while the image loads. */
  background:
    linear-gradient(180deg,rgba(62,32,14,.42) 0%,rgba(62,32,14,.26) 40%,rgba(62,32,14,.48) 100%),
    url("/assets/img/studio-treatment-room.webp") center 38% / cover no-repeat,
    #9A5E31;
}
.hero--full .wrap{max-width:880px}
.hero--full .eyebrow{justify-content:center;color:#F7E3C8}
.hero--full .eyebrow::before{background:#F7E3C8}
.hero--full h1{color:#FFFFFF;font-size:clamp(2.5rem,6.2vw,4.4rem);
  text-shadow:0 2px 28px rgba(52,27,11,.45)}
.hero--full h1 em{color:#F7E3C8}
.hero--full .lede{color:#FFFFFF;margin-inline:auto;max-width:52ch;
  text-shadow:0 1px 18px rgba(52,27,11,.45)}
.hero--full .hero-ctas{justify-content:center}
.hero--full .hero-note{justify-content:center;color:#F7E3C8}
.hero--full .btn-ghost{border-color:#FFFFFF;color:#FFFFFF}
.hero--full .btn-ghost:hover{background:#FFFFFF;color:var(--terra-hover)}
.hero--full :focus-visible{outline-color:#F5E3CC}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-note{margin-top:26px;font-size:.9rem;color:var(--ink-soft);display:flex;gap:8px;
  align-items:flex-start;justify-content:center}
/* Icon rides with the FIRST line when the note wraps on mobile (client
   request 2026-07-27: "the small water drop icon needs to be moved up"). */
.hero-note svg{flex:none;margin-top:3px}

.arch{
  position:relative;border-radius:12rem 12rem var(--radius) var(--radius);
  overflow:hidden;aspect-ratio:4/5;box-shadow:var(--shadow);
}
.arch--photo{background:
  radial-gradient(120% 90% at 20% 8%,#F9EEDD 0%,transparent 55%),
  radial-gradient(130% 100% at 85% 20%,#F3DFC5 0%,transparent 50%),
  radial-gradient(120% 120% at 60% 95%,#C57A4D 0%,transparent 60%),
  linear-gradient(170deg,#F5E7D2 0%,#E2C39B 58%,#C57A4D 100%);
}
/* Real photo inside an arch — cover-crop, biased toward the upper third so
   portrait subjects keep their head in frame (source can be any aspect). */
.arch .arch-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* Pure Water panel (About) — brand water motif until a real photo of the
   Phoenix filter station replaces it. */
.water-panel{background:
  radial-gradient(120% 90% at 25% 10%,#FBF4E8 0%,transparent 55%),
  linear-gradient(178deg,#F6F2EA 0%,#F1E5D2 55%,#EAD3B4 100%);
  display:flex;align-items:center;justify-content:center}
.water-panel svg{width:78%;height:auto}
.arch .ph-tag{
  position:absolute;inset:auto 14px 14px auto;
  font:600 .68rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--pine-deep);background:rgba(255,255,255,.82);
  padding:8px 12px;border-radius:999px;
}

/* ---------- trust bar ---------- */
.trustbar{border-block:1px solid var(--sage-line);background:var(--surface)}
.trustbar-in{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 48px;
  padding-block:22px;
  font:600 .8rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.trustbar-in span{display:flex;align-items:center;gap:10px}
.trustbar-in svg{color:var(--terra)}

/* ---------- cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.card-grid{grid-template-columns:1fr}}
.t-card{
  background:var(--surface);border:1px solid var(--sage-line);border-radius:var(--radius);
  padding:30px 28px 28px;display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.t-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
@media (prefers-reduced-motion:reduce){.t-card:hover{transform:none}}
.t-card .t-ico{width:44px;height:44px;border-radius:12px;background:var(--sage-tint);
  display:grid;place-items:center;color:var(--pine)}
.t-card p{color:var(--ink-soft);font-size:.98rem;flex:1}
.t-card .t-link{font:600 .92rem/1 var(--sans);color:var(--pine);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px}
.t-card .t-link:hover{text-decoration:underline}

/* ---------- services menu ---------- */
.menu-cat{margin-top:clamp(40px,5vw,56px)}
.menu-cat > h2{
  font-size:1rem;letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);
  font-weight:600;color:var(--bronze);margin-bottom:8px;
}
.menu-cat > .cat-note{color:var(--ink-soft);font-size:.95rem;max-width:60ch;margin-bottom:10px}
.svc{border-bottom:1px solid var(--sage-line)}
.svc summary{
  list-style:none;cursor:pointer;display:grid;
  grid-template-columns:1fr auto auto;align-items:baseline;gap:18px;
  padding:22px 4px;
}
.svc summary::-webkit-details-marker{display:none}
.svc summary:hover .svc-name{color:var(--pine)}
.svc-name{font-family:var(--serif);font-weight:600;font-size:1.3rem;transition:color .15s ease}
.svc-meta{font:500 .9rem/1 var(--sans);color:var(--ink-soft);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.svc-x{color:var(--bronze);transition:transform .2s ease;font-size:1.1rem;line-height:1}
.svc[open] .svc-x{transform:rotate(45deg)}
.svc-body{padding:0 4px 26px;max-width:66ch;display:grid;gap:16px}
.svc-body p{color:var(--ink-soft)}
@media (max-width:640px){
  .svc summary{grid-template-columns:1fr auto}
  .svc-meta{grid-column:1;grid-row:2;justify-self:start}
}

/* ---------- brand lines ---------- */
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
@media (max-width:900px){.brands{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.brands{grid-template-columns:1fr}}
.brand{
  background:var(--surface);border:1px solid var(--sage-line);border-radius:var(--radius);
  padding:26px 24px;display:flex;flex-direction:column;gap:8px;
}
/* Typographic stand-ins — swap for official brand SVG logo kits
   (with each partner's permission) before launch. */
.brand{text-decoration:none;color:var(--ink);transition:border-color .18s ease,transform .18s ease}
a.brand:hover{border-color:var(--terra);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){a.brand:hover{transform:none}}
.brand .b-mark{font-family:var(--serif);font-weight:600;font-size:1.15rem;letter-spacing:.02em}
.brand .b-visit{font:600 .78rem/1 var(--sans);color:var(--pine);letter-spacing:.06em;text-transform:uppercase;margin-top:auto}
.brand p{font-size:.92rem;color:var(--ink-soft)}

/* ---------- results / gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}
.g-item .arch{aspect-ratio:3/4;border-radius:8rem 8rem 14px 14px}
/* Real before/after photography (landscape pairs with baked-in labels) renders
   as straight rounded cards — the arch crop would clip the caption strip. */
.g-item .ba-img{width:100%;height:auto;border-radius:14px;border:1px solid var(--sage-line);background:var(--surface);box-shadow:var(--shadow)}
.g-item figcaption{margin-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.g-item .g-t{font:600 .95rem/1.3 var(--sans)}
.g-item .g-s{font:500 .82rem/1 var(--sans);color:var(--ink-soft);white-space:nowrap}
.g-2{background:
  radial-gradient(110% 90% at 80% 10%,#FAF0E1 0%,transparent 55%),
  linear-gradient(160deg,#F6EAD8 0%,#E7CBA6 60%,#C9976B 100%)}
.g-3{background:
  radial-gradient(120% 100% at 15% 15%,#F2E6D6 0%,transparent 50%),
  linear-gradient(200deg,#EBDCC8 0%,#D3B490 55%,#A87B50 100%)}
.sample-note{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:28px;
  font:500 .85rem/1.4 var(--sans);color:var(--ink-soft);
  background:var(--surface);border:1px dashed var(--sage-line);
  border-radius:999px;padding:9px 16px;
}

/* ---------- oncology callout ---------- */
.onc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
@media (max-width:860px){.onc-grid{grid-template-columns:1fr}}
.onc-points{display:grid;gap:14px;margin-top:26px}
.onc-points li{display:flex;gap:12px;align-items:flex-start;list-style:none}
.onc-points svg{flex:none;margin-top:4px;color:#F5E3CC}
.onc-points{padding:0;margin-bottom:0}

/* ---------- visit ---------- */
.visit-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px)}
@media (max-width:860px){.visit-grid{grid-template-columns:1fr}}
.hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours td{padding:11px 2px;border-bottom:1px solid var(--sage-line);font-size:.98rem}
.hours td:last-child{text-align:right;color:var(--ink-soft)}
.hours tr.today td{font-weight:600;color:var(--pine)}
.contact-block{display:grid;gap:18px}
.c-line{display:flex;gap:14px;align-items:flex-start}
.c-line svg{flex:none;margin-top:3px;color:var(--pine)}
.c-line a{color:var(--ink);text-decoration:none;font-weight:500}
.c-line a:hover{color:var(--pine);text-decoration:underline}
.c-line .c-k{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:4px}

/* ---------- homepage menu cards ("small windows" per client 2026-07-27) ---------- */
.card-grid--menu{margin-top:8px}
.t-card--menu h3{font-size:1.05rem;line-height:1.35}
.t-card--menu .t-price{font:600 .9rem/1.4 var(--sans);color:var(--terra-deep);margin:8px 0 10px}

/* ---------- first-visit offer pop-up (client request 2026-07-24) ---------- */
.offer-pop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(62,53,45,.45);padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.offer-card{position:relative;background:var(--porcelain);border-radius:var(--radius);
  box-shadow:var(--shadow);max-width:440px;width:100%;padding:38px 34px 34px;text-align:center}
.offer-card .eyebrow{justify-content:center}
.offer-card h2{font-size:1.9rem;margin-bottom:10px}
.offer-card p{color:var(--ink-soft);margin:0 0 22px}
.offer-x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.6rem;
  color:var(--ink-soft);cursor:pointer;padding:6px;line-height:1}
.offer-later{display:block;margin:14px auto 0;background:none;border:0;color:var(--ink-soft);
  font:500 .9rem/1 var(--sans);cursor:pointer;text-decoration:underline;padding:6px}
@media (prefers-reduced-motion:no-preference){.offer-card{animation:offerIn .35s ease}}
@keyframes offerIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- page hero (interior) ---------- */
.page-hero{padding-block:clamp(52px,7vw,84px) clamp(28px,4vw,44px)}
.page-hero .lede{margin-top:16px}

/* ---------- CTA band ---------- */
.cta-band{text-align:center}
.cta-band .btn{margin-top:30px}
.cta-band h2{max-width:22ch;margin-inline:auto}

/* ---------- footer ---------- */
.site-footer{background:var(--terra-deep);color:#FFFFFF;font-size:.95rem}
.footer-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding-block:56px 40px}
@media (max-width:800px){.footer-in{grid-template-columns:1fr}}
.site-footer .wm-name{color:#FFFFFF}
.site-footer h3{font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:#F5E3CC;margin:0 0 14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-footer a{color:#FFFFFF;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-base{border-top:1px solid rgba(255,255,255,.12);padding-block:20px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.82rem;color:#F5E3CC}

/* ---------- reveal ----------
   Hidden state is gated on html.js (set by an inline head script) so content
   is never invisible when JavaScript is unavailable. */
html.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1),transform .6s cubic-bezier(.2,.6,.2,1)}
html.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .site-nav{transition:none}
  .nav-toggle span{transition:none}
}

/* Keyboard focus must stay visible on dark surfaces */
.section--dark :focus-visible,.site-footer :focus-visible{outline-color:#F5E3CC}

/* Anchor targets clear the sticky header */
[id]{scroll-margin-top:96px}

.site-footer .wm-sub{color:#FFFFFF}
/* Footer contact rows with icons (client request 2026-07-25) */
.site-footer .f-line{display:flex;align-items:flex-start;gap:9px}
.site-footer .f-line svg{flex:none;margin-top:4px;opacity:.92}
.section--dark .btn-ghost{border-color:#F5E3CC;color:#FFFFFF}
.section--dark .btn-ghost:hover{background:#F5E3CC;color:#6E4225}
.section--dark a{color:#FFFFFF}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--pine);color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
  font:600 .9rem/1 var(--sans);text-decoration:none;
}
.skip-link:focus{left:0}