/* ============================================================
   Highwater - shared stylesheet
   Refined editorial. Navy + warm off-white carry. Gold = CTA only.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* brand palette (locked spec) */
  --navy:        #1B2A3B;   /* headlines, nav, authority */
  --off-white:   #F5F0EA;   /* page background */
  --slate:       #4A5568;   /* body copy */
  --charcoal:    #2D3748;   /* dividers, dark sections, footer */
  --gold:        #B8975A;   /* CTA ONLY */
  --gold-deep:   #a2823f;   /* CTA hover */
  --stone:       #E8E0D5;   /* cards, blockquotes, dividers */

  /* derived */
  --navy-70:     rgba(27,42,59,.70);
  --navy-12:     rgba(27,42,59,.12);
  --navy-08:     rgba(27,42,59,.08);
  --on-dark:     #F5F0EA;
  --on-dark-mut: #b9c0cb;
  --line:        rgba(27,42,59,.14);
  --line-stone:  rgba(27,42,59,.10);

  /* type - SJP pairing: Noe Display (proprietary) headings, Poppins body.
     Noe Display named first for anyone licensed; Playfair Display is the
     free Google Fonts stand-in that actually loads. */
  --serif: "Noe Display", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  /* motion - RE's lux curve, kept restrained */
  --ease-lux: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,1,.36,1);

  /* shadows - warm/navy-tinted, never grey */
  --shadow-card:  0 1px 2px rgba(27,42,59,.05), 0 2px 8px rgba(27,42,59,.05);
  --shadow-lift:  0 24px 50px -28px rgba(27,42,59,.34), 0 10px 22px -16px rgba(27,42,59,.18);
  --shadow-btn:   0 1px 2px rgba(27,42,59,.18), 0 10px 24px -12px rgba(27,42,59,.28);

  /* shape + rhythm */
  --rad:      4px;          /* square-ish, serious */
  --rad-card: 6px;
  --maxw:        1120px;
  --measure:     720px;     /* narrow editorial reading column */
  --measure-wide: 900px;    /* wider reading column (lists, steps) */
  --sec-pad:  clamp(72px, 11vh, 140px);
  --gutter:   clamp(20px, 5vw, 40px);
  --p-gap:    1.25rem;      /* paragraph-to-paragraph gap, uniform sitewide */
  --h-gap:    clamp(1.25rem, 2.2vh, 1.75rem); /* heading-to-its-body gap, uniform sitewide */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--slate);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- Type ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.3rem); line-height: 1.03; }
h2 { font-size: clamp(1.9rem, 4vw, 2.85rem); letter-spacing: -0.018em; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 1.0625rem; letter-spacing: 0; }
p  { font-size: 1rem; color: var(--slate); }
strong { color: var(--navy); font-weight: 600; }
em { font-style: italic; }

/* italic serif accent (replaces RE's gold word - gold rule forbids colour here) */
.accent { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--navy); }

.eyebrow {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  gap: .7em;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--navy);
  opacity: .55;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.measure { max-width: var(--measure); }
.measure-wide { max-width: 900px; }
section { padding-block: var(--sec-pad); }
.sec-stone { background: var(--stone); }
.sec-dark  { background: var(--charcoal); }
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: var(--off-white); }
.sec-dark p { color: var(--on-dark-mut); }
.sec-dark strong { color: var(--off-white); }
.sec-dark .eyebrow { color: var(--on-dark-mut); }
.sec-dark .eyebrow::before { background: var(--off-white); opacity: .4; }

.lede { font-size: clamp(1.2rem, 2.1vw, 1.4rem); line-height: 1.6; color: var(--navy); font-family: var(--serif); font-weight: 400; }
.center { text-align: center; margin-inline: auto; }
.stack > * + * { margin-top: 1.1em; }
.spacer-sm { height: 1.5rem; }
.spacer    { height: 2.5rem; }

/* ---------- Buttons (gold = the ONE thing) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--sans); font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  background: var(--gold); color: var(--navy);
  padding: 15px 30px; border: 0; border-radius: var(--rad);
  cursor: pointer; box-shadow: var(--shadow-btn);
  transition: transform .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 1px 2px rgba(27,42,59,.2), 0 16px 32px -12px rgba(27,42,59,.34); }
.btn:active { transform: translateY(0); }
.btn .arr { transition: transform .3s var(--ease-out); }
.btn:hover .arr { transform: translateX(3px); }

/* text link with underline grow */
.tlink { color: var(--navy); font-weight: 600; position: relative; }
.tlink::after { content:""; position:absolute; left:0; bottom:-2px; width:100%; height:1px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-lux); }
.tlink:hover::after { transform: scaleX(1); }
/* tlink on dark sections: navy would vanish, use off-white */
.sec-dark .tlink { color: var(--off-white); }
.sec-dark .tlink::after { background: var(--off-white); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,240,234,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out), transform .45s var(--ease-out);
}
.nav.scrolled { border-bottom-color: var(--line); background: rgba(245,240,234,.92); }
/* auto-hide: slide the bar up when scrolling down, drop it back on scroll up */
.nav.nav-hidden { transform: translateY(-100%); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; color: var(--navy); letter-spacing: -.01em; display:flex; align-items:center; gap:.55em; }
.brand .mark { width: 22px; height: 22px; flex: none; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav-links a.navlink { font-size: .92rem; font-weight: 500; color: var(--navy); opacity: .82; transition: opacity .25s; }
.nav-links a.navlink:hover, .nav-links a.navlink.active { opacity: 1; }
.nav-links a.navlink.active { font-weight: 600; }
.nav .btn { padding: 11px 22px; font-size: .88rem; box-shadow: var(--shadow-btn); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display:block; width:24px; height:2px; background: var(--navy); margin:5px 0; transition: .3s var(--ease-out); }

/* ---------- Hero ---------- */
.hero { padding-top: clamp(56px, 8vh, 100px); padding-bottom: clamp(40px, 6vh, 72px); }
.hero h1 { max-width: 44ch; }
@media (max-width: 480px) { .hero h1 { font-size: 2.2rem; } }
.hero .sub { max-width: 52ch; font-size: clamp(1.12rem,1.8vw,1.3rem); line-height: 1.6; color: var(--slate); }
.hero .hero-detail { max-width: 58ch; font-size: 1.02rem; line-height: 1.68; color: var(--slate); opacity: .9; }
/* hero rhythm: one value for the h1-to-subhead step; the sub-to-detail step is the tighter paragraph gap */
.hero .eyebrow + h1 { margin-top: clamp(1.4rem, 2.6vh, 2rem); }
.hero h1 + .sub, .hero h1 + .hero-detail { margin-top: clamp(1.45rem, 2.4vh, 1.8rem); }
.hero .sub + .hero-detail { margin-top: var(--p-gap); }
.hero .cta-row { margin-top: 2.4rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.hero .cta-note { font-size: .9rem; color: var(--slate); opacity: .8; }
/* bare CTA button sitting directly in the hero (homepage) needs its own breathing room */
.hero-load > .btn { margin-top: clamp(1.8rem, 3.2vh, 2.4rem); }

/* ---------- Image placeholders (swap for AI-gen finals) ---------- */
.img-ph {
  position: relative;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(27,42,59,.025) 11px, rgba(27,42,59,.025) 12px),
    var(--stone);
  border: 1px dashed var(--navy-12);
  border-radius: var(--rad-card);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--navy);
}
.img-ph[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.img-ph[data-ratio="1:1"]  { aspect-ratio: 1 / 1; }
.img-ph .ph-inner { text-align: center; padding: clamp(18px,4vw,42px); max-width: 60ch; }
.img-ph .ph-icon { width: 34px; height: 34px; margin: 0 auto 14px; opacity: .5; }
.img-ph .ph-tag { font-family: var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; opacity:.65; }
.img-ph .ph-title { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin-top: 6px; }
.img-ph .ph-prompt { font-size: .82rem; line-height: 1.55; color: var(--slate); margin-top: 10px; opacity: .85; }
.img-ph .ph-ratio { display:inline-block; margin-top: 12px; font-size: .68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--slate); border:1px solid var(--navy-12); padding: 3px 10px; border-radius: 40px; }
.hero-img { position: relative; margin-top: clamp(40px,6vh,72px); box-shadow: var(--shadow-lift); border-radius: var(--rad-card); }
/* floating proof card over the hero image */
.hero-float {
  position: absolute; left: clamp(14px,2.2vw,26px); bottom: clamp(14px,2.2vw,26px); z-index: 2;
  display: flex; flex-direction: column; max-width: 250px;
  padding: 15px 20px 16px; border-radius: 14px;
  background: rgba(245,240,234,.92);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(27,42,59,.08);
  box-shadow: 0 1px 2px rgba(27,42,59,.14), 0 26px 50px -26px rgba(27,42,59,.55);
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s var(--ease-lux) .55s, transform .8s var(--ease-lux) .55s;
}
.hero-img.in .hero-float { opacity: 1; transform: none; }
.hf-k { font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.hf-v { font-family: var(--serif); font-size: 1.5rem; line-height: 1.08; color: var(--navy); margin-top: 4px; }
.hf-m { font-size: .82rem; line-height: 1.45; color: var(--slate); margin-top: 7px; }
@media (max-width: 560px) { .hero-float { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-float { opacity: 1; transform: none; } }

/* mobile-only proof strip under the hero CTA - carries the float-card facts
   on the phone widths where the float card is hidden */
.hero-proof { display: none; }
@media (max-width: 560px) {
  .hero-proof {
    display: flex; flex-wrap: wrap; gap: 8px 10px;
    list-style: none; margin: clamp(1.5rem, 3.4vh, 2rem) 0 0; padding: 0;
  }
  .hero-proof li {
    font-family: var(--sans); font-size: .8rem; line-height: 1.3; color: var(--slate);
    padding: 7px 13px; border: 1px solid var(--navy-12); border-radius: 999px;
    background: rgba(255,255,255,.45);
  }
  .hero-proof strong { color: var(--navy); font-weight: 600; }
}

/* ---------- Real images (AI-gen finals, swapped in for placeholders) ---------- */
figure.hero-img { overflow: hidden; }
figure.hero-img > img,
figure.hero-img > picture > img { display: block; width: 100%; height: auto; border-radius: inherit; }
.site-figure { margin: 0; }
.site-img { display: block; width: 100%; height: auto; border-radius: var(--rad-card); box-shadow: var(--shadow-lift); }

/* ---------- Prose blocks ---------- */
/* reading paragraphs cap at the measure and anchor to the left gutter edge
   (headings may run wider; the shared left edge is what keeps the page aligned) */
.prose p { margin-top: var(--p-gap); max-width: var(--measure); }
.prose p:first-child { margin-top: 0; }
.prose h2 { margin-top: 2.2em; margin-bottom: 0; }
.prose h2:first-child { margin-top: 0; }
.prose h2 + p { margin-top: var(--h-gap); }
.prose h3 { margin-top: 2em; margin-bottom: .2em; }
.prose .lede + p { margin-top: var(--p-gap); }

/* heading-to-its-content gap, uniform wherever an h2 sits above a content block */
h2 + .prose, h2 + .listblock, h2 + .statement, h2 + blockquote { margin-top: var(--h-gap); }
.rule { height:1px; background: var(--line); border:0; margin-block: clamp(40px,6vh,72px); }
.sec-dark .rule { background: rgba(245,240,234,.16); }

/* pull / statement line */
.statement { font-family: var(--serif); font-size: clamp(1.5rem,3vw,2.1rem); line-height: 1.3; color: var(--navy); font-weight: 500; letter-spacing: -.015em; }

/* blockquote */
blockquote {
  background: var(--stone); border-left: 3px solid var(--navy);
  padding: clamp(24px,4vw,38px); border-radius: var(--rad);
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.45; color: var(--navy);
}
blockquote p + p { margin-top: var(--p-gap); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: clamp(18px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: var(--rad-card);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease-lux), box-shadow .4s var(--ease-lux), border-color .4s var(--ease-lux);
}
.sec-stone .card { background: #fbf8f3; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(27,42,59,.28); }
.card .num {
  font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--navy);
  width: 40px; height: 40px; display:flex; align-items:center; justify-content:center;
  border: 1px solid var(--navy-12); border-radius: 50%; margin-bottom: 18px;
  transition: box-shadow .4s var(--ease-lux), background .4s var(--ease-lux), color .4s var(--ease-lux);
}
.card:hover .num { background: var(--navy); color: var(--off-white); border-color: var(--navy); }
.card h3 { margin-bottom: .4em; }
.card .card-label { font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: .35em; }
.card p { font-size: .98rem; }

/* list - the "do / do not" style */
.listblock { display: grid; gap: 1.4rem; max-width: var(--measure-wide); }
.listitem { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.listitem .ic { width: 22px; height: 22px; margin-top: 4px; color: var(--navy); flex:none; }
.listitem.neg .ic { color: var(--slate); opacity: .55; }
.listitem h3, .listitem h4 { margin-bottom: .2em; }
.listitem p { font-size: .98rem; }

/* stat row */
.stats { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,40px); }
.stat .fig { font-family: var(--serif); font-weight: 600; font-size: clamp(2.4rem,4.5vw,3.4rem); color: var(--navy); line-height: 1; letter-spacing: -.02em; }
.sec-dark .stat .fig { color: var(--off-white); }
.stat .lab { margin-top: 10px; font-size: .9rem; color: var(--slate); }
.sec-dark .stat .lab { color: var(--on-dark-mut); }

/* ---------- FAQ ---------- */
.faq-list { max-width: var(--measure); }
.faq-item { border-bottom: 1px solid var(--line-stone); }
.faq-item:first-child { border-top: 1px solid var(--line-stone); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px; font-family: var(--sans); font-size: 1rem;
  color: var(--navy); font-weight: 700; line-height: 1.45;
}
.faq-q .pm { flex:none; width: 22px; height: 22px; position: relative; transition: transform .4s var(--ease-lux); }
.faq-q .pm::before, .faq-q .pm::after { content:""; position:absolute; background: var(--navy); border-radius: 2px; }
.faq-q .pm::before { top:50%; left:0; right:0; height:2px; transform: translateY(-50%); }
.faq-q .pm::after  { left:50%; top:0; bottom:0; width:2px; transform: translateX(-50%); transition: opacity .3s var(--ease-lux); }
.faq-item.open .pm::after { opacity: 0; }
.faq-item.open .pm { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease-lux); }
.faq-a p { font-size: 1rem; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band p { max-width: 54ch; margin: 1.1rem auto 0; }
.cta-band .btn { margin-top: 2rem; }

/* ---------- Footer ---------- */
.footer { background: var(--charcoal); color: var(--on-dark-mut); padding-block: clamp(60px,9vh,100px) 40px; }
.footer .brand { color: var(--off-white); }

/* top deck: brand | why | nav */
.footer-deck {
  display: grid;
  grid-template-columns: 1.25fr 1.5fr .75fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
.footer-brand .brand { font-size: 1.5rem; }
.footer-desc { margin-top: 1.15rem; max-width: 44ch; font-size: .92rem; line-height: 1.7; color: var(--on-dark-mut); }
.footer-brand .btn { margin-top: 1.7rem; }

.footer-head { color: var(--off-white); font-size: clamp(1.3rem, 2vw, 1.65rem); letter-spacing: -.012em; }
.footer-why p { margin-top: 1rem; max-width: 52ch; font-size: .92rem; line-height: 1.72; color: var(--on-dark-mut); }
.footer-why p:first-of-type { margin-top: 1.2rem; }
.footer-why-close { font-family: var(--serif); font-style: italic; color: var(--off-white) !important; font-size: 1.08rem !important; }

.footer-label { font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--off-white); opacity: .6; margin-bottom: 1.15rem; }
.footer-nav { display: flex; flex-direction: column; gap: .72rem; }
.footer-nav a { color: var(--on-dark-mut); font-size: .92rem; width: fit-content; transition: color .25s; }
.footer-nav a:hover { color: var(--off-white); }

.footer-rule { height: 1px; background: rgba(245,240,234,.14); border: 0; margin-block: clamp(36px,5vh,56px); }

/* legal fine print */
.footer-legal { display: grid; gap: .9rem; }
.footer-copy { font-size: .84rem; color: #c3c9d2; }
.footer-company, .footer-disclaimer { font-size: .78rem; line-height: 1.65; color: #a0a7b2; max-width: 92ch; }
.footer-company a { color: inherit; border-bottom: 1px solid rgba(147,154,166,.4); transition: border-color .25s, color .25s; }
.footer-company a:hover { color: var(--off-white); border-bottom-color: var(--off-white); }
.footer-legal-links { display: flex; align-items: center; gap: .85rem; margin-top: .5rem; font-size: .84rem; }
.footer-legal-links a { color: #c3c9d2; transition: color .25s; }
.footer-legal-links a:hover { color: var(--off-white); }
.footer-legal-links span { color: #9aa1ad; }

@media (max-width: 860px) {
  .footer-deck { grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,48px); }
  .footer-nav { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-deck { grid-template-columns: 1fr; }
}

/* ============================================================
   Motion - restrained. ease-lux reveals + hero stagger only.
   ============================================================ */
.reveal { opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity .9s var(--ease-lux), transform .9s var(--ease-lux), filter .9s var(--ease-lux);
  transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }

/* hero word-by-word load */
@keyframes heroLoad { to { opacity:1; transform:none; filter: blur(0); } }
.hero-load > * { opacity: 0; transform: translateY(16px); filter: blur(8px); animation: heroLoad 1.1s var(--ease-lux) forwards; }
.hero-load > *:nth-child(1){ animation-delay:.08s }
.hero-load > *:nth-child(2){ animation-delay:.20s }
.hero-load > *:nth-child(3){ animation-delay:.32s }
.hero-load > *:nth-child(4){ animation-delay:.44s }
.hero-load > *:nth-child(5){ animation-delay:.56s }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .stats  { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding: 28px var(--gutter) 34px;
    background: var(--off-white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lift);
    /* own compositing layer: stops iOS WebKit swallowing taps on an absolute child that
       spills outside the .nav backdrop-filter box (the FAQ "can't select options" bug) */
    transform: translateZ(0);
  }
  .nav-toggle { display: block; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3, .stats { grid-template-columns: 1fr; }
  .footer .f-top { flex-direction: column; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero-load > * { opacity: 1; transform: none; filter: none; }
  html { scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
/* keep the focus ring visible where the background is dark */
.sec-dark :focus-visible, .footer :focus-visible { outline-color: var(--on-dark); }

/* ---------- Brand texture: a faint film grain over the whole page ---------- */
/* static (no animation), click-through, and barely-there so type stays crisp */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Eyebrow mark-line draws in as its block reveals ---------- */
.eyebrow.reveal::before,
.reveal .eyebrow::before { width: 0; transition: width .7s var(--ease-lux) .18s; }
.eyebrow.reveal.in::before,
.reveal.in .eyebrow::before { width: 28px; }

/* ============================================================
   Page-specific components
   ============================================================ */

/* ---------- Page hero variants ---------- */
.hero-page { padding-top: clamp(40px, 6vh, 76px); }
.hero-page h1 { max-width: 20ch; }
.hero-slim { padding-bottom: clamp(32px, 5vh, 60px); }

/* ---------- Steps (How It Works) ---------- */
/* ---------- Steps (how-it-works timeline) ---------- */
.steps {
  --step-gap: clamp(22px, 3vh, 34px);
  --disc: 58px;
  list-style: none; padding: 0; margin: 0; max-width: var(--measure-wide);
  display: grid; gap: var(--step-gap); position: relative;
}
.step {
  position: relative;
  display: grid; grid-template-columns: var(--disc) 1fr; gap: clamp(18px, 3vw, 32px);
  align-items: start;
}
/* spine linking each numbered node to the next */
.step::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--disc) / 2 - 1px); top: var(--disc);
  height: calc(100% - var(--disc) + var(--step-gap));
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, var(--navy-12), var(--navy-08));
}
.steps .step:last-child::before { display: none; }
.step .num {
  position: relative; z-index: 1;
  font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1;
  color: var(--off-white); background: var(--navy);
  width: var(--disc); height: var(--disc); display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex: none;
  box-shadow: 0 0 0 6px var(--off-white), var(--shadow-card);
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux);
}
.step-body {
  background: #FBF8F3; border: 1px solid var(--line-stone); border-radius: var(--rad-card);
  padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux), border-color .5s var(--ease-lux);
}
.step:hover .num { transform: scale(1.06); box-shadow: 0 0 0 6px var(--off-white), var(--shadow-lift); }
.step:hover .step-body { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--navy-12); }
.step-body h3 { margin-bottom: .5em; }
.step-title { font-family: var(--sans); font-size: 1.05rem; font-weight: 700; color: var(--navy); line-height: 1.5; }
.step-body p + p { margin-top: var(--p-gap); }
.step-body .step-title + p { margin-top: .5em; }
.step-body .tlink { display: inline-block; margin-top: 1.1em; }
@media (max-width: 560px) {
  .steps { --disc: 46px; }
  .step .num { font-size: 1.2rem; }
}

/* ---------- List variants ---------- */
/* "firms we work with" qualifying cards with navy check badges */
.listblock-lg { gap: clamp(16px, 2.2vh, 22px); }
.listblock-lg .listitem {
  grid-template-columns: 46px 1fr; gap: clamp(16px, 2vw, 24px); align-items: start;
  background: #FBF8F3; border: 1px solid var(--line-stone); border-radius: var(--rad-card);
  padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--shadow-card);
  transition: transform .5s var(--ease-lux), box-shadow .5s var(--ease-lux), border-color .5s var(--ease-lux);
}
.listblock-lg .listitem:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--navy-12); }
.listblock-lg .listitem .ic {
  width: 46px; height: 46px; margin-top: 0; padding: 11px;
  background: var(--navy); color: var(--off-white); border-radius: 13px;
  box-shadow: var(--shadow-card); transition: transform .5s var(--ease-lux);
}
.listblock-lg .listitem:hover .ic { transform: scale(1.06); }
.listblock-lg .listitem h3 { margin-bottom: .35em; }
@media (max-width: 560px) {
  .listblock-lg .listitem { grid-template-columns: 38px 1fr; }
  .listblock-lg .listitem .ic { width: 38px; height: 38px; padding: 9px; border-radius: 11px; }
}

/* qualification check cards: cap width, anchor to the shared left edge */
.checks { max-width: var(--measure-wide); }

/* dark-section cards keep light type legible on the off-white card face */
.sec-dark .card h3, .sec-dark .card h4 { color: var(--navy); }
.sec-dark .card p { color: var(--slate); }
.sec-dark .card .num { color: var(--navy); border-color: var(--navy-12); }
.sec-dark .card:hover .num { background: var(--navy); color: var(--off-white); border-color: var(--navy); }

/* dark-section list icons + statements */
.sec-dark .listitem .ic { color: var(--off-white); }
.sec-dark .listitem.neg .ic { color: var(--off-white); opacity: .5; }
.sec-dark .statement { color: var(--off-white); }

/* ---------- Economics section (home) ---------- */
.econ > h2 { max-width: 20ch; }
.econ-top {
  margin-top: var(--h-gap);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.econ-evidence p { max-width: 54ch; color: var(--on-dark-mut); }
.econ-evidence p + p { margin-top: var(--p-gap); }
.econ-cite { font-size: .82rem; line-height: 1.6; opacity: .58; }

/* money proof panel (palette-safe glass on charcoal; gold stays CTA-only) */
.econ-card {
  background: rgba(245,240,234,.045);
  border: 1px solid rgba(245,240,234,.16);
  border-radius: var(--rad-card);
  padding: clamp(26px, 3.2vw, 40px);
}
.econ-card-lead {
  font-family: var(--sans); font-weight: 600; color: var(--off-white);
  font-size: 1.02rem; line-height: 1.5;
}
.econ-card-money {
  margin-top: 1.1rem;
  font-family: var(--serif); font-weight: 400; color: var(--on-dark-mut);
  font-size: 1.04rem; line-height: 1.6;
}
.econ-card-money .fig {
  color: var(--off-white); font-weight: 600;
  font-size: 1.4em; letter-spacing: -.01em;
}

.econ .rule { margin-block: clamp(36px, 5vh, 60px); }

.econ-referrals p { max-width: var(--measure); color: var(--on-dark-mut); }
.econ-referrals p + p { margin-top: var(--p-gap); }
.econ-referrals .statement { color: var(--off-white); max-width: 22ch; }
.econ-referrals .statement + p { margin-top: var(--h-gap); }

.econ-batch {
  margin-top: clamp(36px, 5vh, 56px);
  padding-top: clamp(24px, 3vh, 34px);
  border-top: 1px solid rgba(245,240,234,.16);
  font-family: var(--serif); font-weight: 600;
  color: var(--off-white) !important;
  font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; letter-spacing: -.02em;
  max-width: none;
}

/* breathing room between the big batch-price line and its disclaimer */
.econ-batch + .econ-cite {
  margin-top: clamp(16px, 2.4vh, 24px);
  max-width: 62ch;
}
/* calculator link sits clear of the disclaimer above it */
.econ .tlink {
  display: inline-block;
  margin-top: clamp(26px, 3.6vh, 38px);
}

@media (max-width: 860px) {
  .econ-top { grid-template-columns: 1fr; gap: clamp(24px, 4vh, 36px); }
}

/* ---------- FAQ answer inner (JS measures .faq-a scrollHeight) ---------- */
.faq-a-in { padding: 0 4px 24px; }
.faq-a-in p { font-size: 1rem; }

/* ---------- FAQ: themed groups ---------- */
.faq-intro { max-width: 640px; margin-inline: auto; margin-bottom: clamp(34px, 5vh, 54px); }
.faq-intro .eyebrow { justify-content: center; }
.faq-intro h2 { margin-top: 1.1rem; }
.faq-intro p { margin-top: var(--h-gap); color: var(--slate); }
.faq-list { margin-inline: auto; }          /* centre the column (base caps width) */
.faq-group + .faq-group { margin-top: clamp(40px, 6vh, 64px); }
.faq-group-head {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: center;
  margin-bottom: clamp(12px, 1.8vh, 18px);
}
.faq-group-num {
  font-family: var(--serif); font-size: .95rem; font-weight: 600; color: var(--navy);
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--navy-12); border-radius: 50%;
}
.faq-group-title { font-size: clamp(1.25rem, 2.3vw, 1.6rem); }
.faq-group-blurb { margin-top: .3rem; font-size: .9rem; line-height: 1.6; color: var(--slate); max-width: 54ch; }
/* first question in each group needs the top hairline the list otherwise
   only gives its very first child */
.faq-group-head + .faq-item { border-top: 1px solid var(--line-stone); }

/* ---------- FAQ page subtle paper texture (swap for images/faq-texture.jpg) ---------- */
body.faq-page { background: var(--off-white); }
body.faq-page::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: url(../images/faq-texture.png) center / cover no-repeat;
  opacity: .4; pointer-events: none;
}
body.faq-page > :not(.nav) { position: relative; z-index: 1; }

/* ============================================================
   Royal Energy motion port - premium polish layer.
   The MOVEMENT is lifted from royalenergy.co; the PALETTE stays
   Highwater's. Gold remains CTA-only. All other effects are
   navy / off-white / stone, and all are GPU-friendly and
   disabled under prefers-reduced-motion.
   ============================================================ */
:root { --ease-spring: cubic-bezier(.34,1.56,.64,1); }

/* 2 - CTA shine sweep: light travels across the gold button on hover
   (gold button = the one gold thing, so this stays within the rule) */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.42), transparent);
  transform: skewX(-18deg); transition: left .75s var(--ease-out); pointer-events: none;
}
.btn:hover::after { left: 150%; }
.btn:active { transform: translateY(0) scale(.985); }

/* 2b - always-on CTA flash: a gold ring that pulses out of the button at
   all times (motion ported from royalenergy.co's closeGlow). The ring is
   the CTA's own gold, so this stays inside the gold-is-CTA-only rule.
   Spread is em-based, so small buttons (nav, bar) get a proportional halo.
   box-shadow keeps the base --shadow-btn layer underneath, so depth and
   the hover lift read normally while the ring animates. */
@keyframes btnFlash {
  0%, 100% { box-shadow: var(--shadow-btn), 0 0 0 0    rgba(184,151,90,.5); }
  50%      { box-shadow: var(--shadow-btn), 0 0 0 1.15em rgba(184,151,90,0); }
}
.btn { animation: btnFlash 3.6s var(--ease-out) infinite; }
/* hero CTA fades/rises in on load first, then begins flashing (two
   animations, no shared property, so they run together cleanly) */
.hero-load > .btn {
  animation: heroLoad 1.1s var(--ease-lux) .44s both,
             btnFlash 3.6s var(--ease-out) 1.6s infinite;
}

/* 3 - magnetic buttons: JS nudges the button toward the cursor */
.magnetic { transition: transform .25s var(--ease-out); }

/* 5 - cards: weighted 3D tilt with a soft moving glare (JS drives it) */
.card { position: relative; transform-style: preserve-3d; will-change: transform; }
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.55), transparent 42%);
}
.card:hover::after { opacity: .7; }
.card .num, .card h3, .card .card-label { transform: translateZ(26px); }
/* navy top-edge draw on card hover (palette-safe; gold stays on the CTA only) */
.card::before {
  content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 0; height: 2px; border-radius: 0 0 2px 2px; background: var(--navy);
  transition: width .4s var(--ease-out);
}
.card:hover::before { width: 56%; }

/* 6 - hero atmosphere: a faint navy radial depth behind the hero */
.hero { position: relative; overflow-x: clip; } /* clip the radial bleed so it never adds horizontal scroll */
.hero::after {
  content: ""; position: absolute; top: -10%; left: 50%; transform: translateX(-50%);
  width: 1100px; max-width: 130vw; height: 660px; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, var(--navy-08), transparent 70%);
}
.hero > .wrap { position: relative; z-index: 1; }

/* 7 - cursor-reactive light on the dark sections + footer (JS sets --cx/--cy) */
.sec-dark, .footer { position: relative; overflow: hidden; }
.cursor-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .55s ease; border-radius: inherit;
  background: radial-gradient(280px circle at var(--cx,50%) var(--cy,50%), rgba(245,240,234,.10), transparent 60%);
}
.sec-dark > .wrap, .footer > .wrap { position: relative; z-index: 1; }

/* 8 - nav: shrink + heavier glass once the page is scrolled */
.nav-inner { transition: height .4s var(--ease-out); }
.nav.scrolled {
  background: rgba(245,240,234,.80);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 20px -10px rgba(27,42,59,.22);
}
.nav.scrolled .nav-inner { height: 64px; }

/* 9 - brand mark gives a small spring-turn on hover */
.brand .mark { transition: transform .5s var(--ease-spring); }
.brand:hover .mark { transform: rotate(-8deg) scale(1.06); }

/* 10 - hero headline: word-by-word load (motion ported from royalenergy.co).
   The italic accent is navy; gold stays reserved for the CTA only. */

/* words become inline-block units the splitter staggers in */
.hero h1 .word {
  display: inline-block; will-change: transform, filter, opacity;
  /* each word is its own composited layer (will-change), clipped to its line box;
     the tight 1.03 line-height cut deep descenders (pp, g). Loosen the word line
     box to hold them, then pull the margin box back so wrapped-line rhythm is tight. */
  line-height: 1.2; margin-bottom: -.17em;
}
.hero h1.words-split { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
.hero h1 .word.hload {
  opacity: 0; transform: translateY(.85em) rotate(.4deg); filter: blur(10px);
  animation: heroLoad 1.05s var(--ease-lux) forwards;
  animation-delay: calc(140ms + var(--i, 0) * 80ms);
}

/* the italic accent stays navy (gold reserved for the CTA) */
.hero h1 em {
  font-style: italic;
  color: var(--navy);
}
/* when the splitter marks the accent as a word unit, run the load stagger */
.hero h1 em.word.hload {
  animation: heroLoad 1.05s var(--ease-lux) forwards;
  animation-delay: calc(140ms + var(--i, 0) * 80ms);
}

/* respect reduced-motion for every ported effect */
@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none !important; }
  .btn, .hero-load > .btn { animation: none !important; }
  .card { transform: none !important; }
  .card::after, .card::before, .btn::after { display: none !important; }
  /* keep every hero word visible (animation is what revealed them) */
  .hero h1 .word, .hero h1 .word.hload, .hero h1 em {
    opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important;
  }
}

/* ---------- Legal pages (privacy / terms) ---------- */
.legal { max-width: var(--measure-wide); }
.legal .lede { max-width: var(--measure); color: var(--slate); }
.legal-updated { margin-top: 1.3rem; font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .02em; color: var(--slate); opacity: .7; }
.legal h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.62rem);
  line-height: 1.22; letter-spacing: -.012em;
  margin-top: clamp(2.4rem, 5vh, 3.4rem);
  padding-top: clamp(1.4rem, 3vh, 2rem);
  border-top: 1px solid var(--line);
}
.legal h3 { font-size: 1.06rem; line-height: 1.3; margin-top: 1.7rem; margin-bottom: 0; color: var(--navy); }
.legal p { margin-top: var(--p-gap); max-width: var(--measure); color: var(--slate); }
.legal h2 + p, .legal h3 + p { margin-top: var(--h-gap); }
.legal ul { margin-top: var(--h-gap); max-width: var(--measure); list-style: none; padding: 0; display: grid; gap: .72rem; }
.legal ul li { position: relative; padding-left: 1.4rem; line-height: 1.68; }
.legal ul li::before { content: ""; position: absolute; left: .15rem; top: .72em; width: 7px; height: 1px; background: rgba(27,42,59,.34); }
.legal a { color: var(--navy); font-weight: 500; border-bottom: 1px solid var(--navy-12); transition: border-color .25s; }
.legal a:hover { border-bottom-color: var(--navy); }
.legal strong { color: var(--navy); }
.legal-contact { margin-top: var(--h-gap); font-style: normal; line-height: 1.75; color: var(--slate); }
.legal-fill { font-style: normal; border-bottom: 1px dashed rgba(27,42,59,.4); color: var(--slate); }

/* ---------- Booking / calendar (modeled on royalenergy.co) ---------- */
.book { scroll-margin-top: 92px; }
.book-head { text-align: center; max-width: 820px; margin-inline: auto; }
.book-head .eyebrow { justify-content: center; }
.book-head h2 { margin-top: 1.1rem; }
.book-head > p { max-width: 46ch; margin: 1.05rem auto 0; color: var(--slate); }

.book-grid {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 30px);
}

/* dark info band (above the calendar, full width) */
.book-info {
  background: var(--navy);
  border-radius: var(--rad-card);
  padding: clamp(28px, 3.4vw, 44px);
  color: var(--on-dark-mut);
}
.book-info .eyebrow { color: var(--on-dark-mut); }
.book-info .eyebrow::before { background: var(--off-white); opacity: .4; }
.book-info h3 {
  color: var(--off-white);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.2; letter-spacing: -.01em;
  margin-top: 1rem;
}
.book-steps {
  list-style: none; padding: 0;
  margin: clamp(22px,3vh,30px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
}
.book-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 15px; align-items: start; }
.book-steps .bn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: .95rem; font-weight: 600;
  color: var(--off-white); border: 1px solid rgba(245,240,234,.34);
}
.book-steps .bt { font-size: .95rem; line-height: 1.6; color: var(--on-dark-mut); }
.book-steps .bt strong { color: var(--off-white); font-weight: 600; }
.book-divider { height: 1px; background: rgba(245,240,234,.14); border: 0; margin: clamp(22px,2.8vh,30px) 0; }
.book-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.6rem; }
.book-trust { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; }
.book-trust span { display: inline-flex; align-items: center; gap: .5em; font-family: var(--sans); font-size: .84rem; color: var(--on-dark-mut); }
.book-trust svg { width: 16px; height: 16px; flex: none; color: var(--off-white); opacity: .8; }
.book-note { margin: 0; font-size: .82rem; line-height: 1.6; color: #9aa4b2; }

/* calendar card: full width, auto-sized to the embed via postMessage */
.book-cal {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rad-card);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.book-cal iframe {
  width: 100%;
  height: 700px; /* fallback until lemcall:height arrives */
  border: 0;
  display: block;
}

@media (max-width: 760px) {
  .book-steps { grid-template-columns: 1fr; gap: 1.15rem; }
  .book-note { margin-left: 0; }
}

/* ============================================================
   Tier 1 - engagement layer
   1. Stat band (numbers on screen, count-up on scroll)
   2. Split (fills the empty right half of prose sections)
   3. Proof (trust block built from verifiable facts only)
   ============================================================ */

/* ---------- 1. Stat band ---------- */
.statband-sec { padding-block: clamp(48px, 7vh, 88px); }
.statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
  max-width: var(--maxw);
}
.statband .stat { position: relative; padding-left: clamp(18px, 2.4vw, 36px); }
.statband .stat:first-child { padding-left: 0; }
/* hairline divider between figures */
.statband .stat:not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: .1em; bottom: .35em;
  width: 1px; background: var(--line);
}
.sec-dark .statband .stat:not(:first-child)::before { background: rgba(245,240,234,.16); }
.statband .fig {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.3rem, 4.4vw, 3.4rem); line-height: 1;
  color: var(--navy); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  display: inline-flex; align-items: baseline;
}
.sec-dark .statband .fig { color: var(--off-white); }
.statband .fig .pre { font-size: .62em; margin-right: .06em; opacity: .9; }
.statband .fig .suf { font-size: .52em; margin-left: .08em; opacity: .9; letter-spacing: 0; }
.statband .lab {
  margin-top: 12px; font-size: .86rem; line-height: 1.5;
  color: var(--slate); max-width: 22ch;
}
.sec-dark .statband .lab { color: var(--on-dark-mut); }
/* count-up: hold the box so the figure does not reflow as digits land */
.statband .fig[data-count] { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .statband { grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 36px); }
  .statband .stat { padding-left: clamp(18px, 4vw, 30px); }
  .statband .stat:nth-child(odd) { padding-left: 0; }
  .statband .stat:nth-child(odd)::before { display: none; }
}
@media (max-width: 420px) {
  .statband { grid-template-columns: 1fr; }
  .statband .stat, .statband .stat:nth-child(odd) { padding-left: 0; }
  .statband .stat::before { display: none !important; }
}

/* ---------- Proof strip (small trust row under the stat band) ---------- */
.proofstrip {
  list-style: none; padding: 0;
  margin-top: clamp(28px, 4vh, 44px);
  padding-top: clamp(22px, 3vh, 30px);
  border-top: 1px solid var(--line);
  /* desktop: single row of 4, evenly distributed */
  display: flex; flex-wrap: nowrap; justify-content: space-between;
  align-items: center; gap: .8rem .4rem;
}
/* below full-width: let the items wrap (2-up tablet, stacked phone) */
@media (max-width: 1120px) {
  .proofstrip { flex-wrap: wrap; justify-content: flex-start; gap: .9rem 2.2rem; }
}
.sec-dark .proofstrip { border-top-color: rgba(245,240,234,.16); }
.proofstrip li {
  display: inline-flex; align-items: center; gap: .6em; white-space: nowrap;
  font-size: .82rem; letter-spacing: .005em; color: var(--slate);
}
.sec-dark .proofstrip li { color: var(--on-dark-mut); }
.proofstrip .pk {
  width: 17px; height: 17px; flex: none; color: var(--navy); opacity: .85;
}
.sec-dark .proofstrip .pk { color: var(--off-white); }

/* ---------- 2. Split (sticky aside + reading body) ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.split-aside { position: sticky; top: 104px; }
.split-aside .eyebrow { margin-bottom: clamp(1.1rem, 2vh, 1.5rem); }
.split-aside h2 { max-width: 16ch; }
.split-note {
  margin-top: clamp(1.3rem, 2.6vh, 1.9rem);
  padding-top: clamp(1.1rem, 2vh, 1.5rem);
  border-top: 1px solid var(--line);
  font-size: .9rem; line-height: 1.6; color: var(--slate); max-width: 34ch;
}
.sec-stone .split-note { border-top-color: var(--line-stone); }
.sec-dark .split-note { border-top-color: rgba(245,240,234,.16); color: var(--on-dark-mut); }
/* the body owns its own paragraph rhythm (do not also add .prose - it double-caps) */
.split-body > :first-child { margin-top: 0; }
.split-body p { margin-top: var(--p-gap); max-width: 62ch; }
.split-body p:first-child { margin-top: 0; }
.split-body .statement { max-width: 24ch; }
.split-body .statement + p { margin-top: var(--h-gap); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: clamp(20px, 3vh, 30px); }
  .split-aside { position: static; top: auto; }
  .split-aside h2 { max-width: 24ch; }
}

/* ---------- 3. Proof (trust, built from verifiable facts) ---------- */
.proof-head { max-width: 760px; }
.proof-head.center { text-align: center; margin-inline: auto; }
.proof-head.center .eyebrow { justify-content: center; }
.proof-head h2 { margin-top: 1.1rem; }
.proof-grid { margin-top: clamp(36px, 5vh, 60px); }
.proof-card .pc-ic {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--navy-12); border-radius: 50%; margin-bottom: 18px;
  color: var(--navy); transition: background .4s var(--ease-lux), color .4s var(--ease-lux), border-color .4s var(--ease-lux);
}
.proof-card .pc-ic svg { width: 20px; height: 20px; }
.proof-card:hover .pc-ic { background: var(--navy); color: var(--off-white); border-color: var(--navy); }
.proof-foot {
  margin-top: clamp(28px, 4vh, 44px); padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid rgba(245,240,234,.16);
  font-size: .9rem; line-height: 1.7; color: var(--on-dark-mut); max-width: 70ch;
}
.proof-foot a { color: var(--off-white); border-bottom: 1px solid rgba(245,240,234,.4); transition: border-color .25s; }
.proof-foot a:hover { border-bottom-color: var(--off-white); }

/* ============================================================
   Tier 2 - engagement layer
   ============================================================ */

/* ---------- 4. Region availability map (scarcity) ---------- */
.regions-head { max-width: 680px; margin-inline: auto; }
.regions-head.center { text-align: center; }
.regions-head.center .eyebrow { justify-content: center; }
.regions-head h2 { margin-top: 1.1rem; }
.regions-head p:last-child { margin-top: var(--h-gap); color: var(--slate); }

.regions-grid-wrap { margin-top: clamp(36px, 5vh, 56px); }

.regions-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  justify-content: center; margin-bottom: clamp(24px, 3.5vh, 36px);
  font-size: .9rem; color: var(--slate);
}
.rl { display: inline-flex; align-items: center; gap: 8px; }
.rl-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.rl-dot.open { background: var(--navy); }
.rl-dot.taken { background: transparent; border: 1.5px dashed var(--navy-70); }
.rl-count {
  margin-left: 4px; padding-left: 20px; border-left: 1px solid var(--line);
  font-size: .9rem; color: var(--slate);
}
.rl-count strong { color: var(--navy); font-weight: 600; }

.regions-layout {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}

/* geographic UK region map - EER boundaries, web-mercator */
.regions-map {
  width: 100%; max-width: clamp(300px, 42vw, 400px); height: auto;
  margin-inline: auto; display: block; overflow: visible;
}
.region { cursor: pointer; outline: none; }
.region .r-shape {
  fill: #fbf8f3; stroke: var(--navy); stroke-width: 1.1; stroke-linejoin: round;
  fill-rule: evenodd; vector-effect: non-scaling-stroke;
  transition: fill .4s var(--ease-lux), stroke .4s var(--ease-lux);
}
.region:hover .r-shape,
.region:focus-visible .r-shape,
.region.is-active .r-shape { fill: var(--navy); stroke: var(--navy); }
.region:focus-visible { outline: none; }
.region:focus-visible .r-shape { stroke-width: 2.2; }

/* dot marks true status; pulse = live/available (honest urgency) */
.r-dot { fill: var(--navy); transition: fill .35s var(--ease-lux); }
.region:hover .r-dot, .region.is-active .r-dot { fill: var(--off-white); }
.r-ring {
  fill: var(--navy); transform-box: fill-box; transform-origin: center;
  animation: regionPulse 2.6s var(--ease-out) infinite;
}
.region:hover .r-ring, .region.is-active .r-ring { fill: var(--off-white); }
.region:nth-of-type(1) .r-ring{animation-delay:0s}.region:nth-of-type(2) .r-ring{animation-delay:0.9s}.region:nth-of-type(3) .r-ring{animation-delay:1.7s}.region:nth-of-type(4) .r-ring{animation-delay:0.4s}.region:nth-of-type(5) .r-ring{animation-delay:2.0s}.region:nth-of-type(6) .r-ring{animation-delay:1.2s}.region:nth-of-type(7) .r-ring{animation-delay:0.2s}.region:nth-of-type(8) .r-ring{animation-delay:1.5s}.region:nth-of-type(9) .r-ring{animation-delay:0.6s}.region:nth-of-type(10) .r-ring{animation-delay:2.3s}.region:nth-of-type(11) .r-ring{animation-delay:1.0s}.region:nth-of-type(12) .r-ring{animation-delay:0.35s}
@keyframes regionPulse {
  0%   { transform: scale(1);   opacity: .5; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* taken: muted fill, static hollow dot, no pulse */
.region[data-status="taken"] { cursor: default; }
.region[data-status="taken"] .r-shape {
  fill: var(--stone); stroke: var(--navy-70); stroke-dasharray: 3 3;
}
.region[data-status="taken"]:hover .r-shape,
.region[data-status="taken"].is-active .r-shape { fill: var(--navy-08); stroke: var(--navy-70); }
.region[data-status="taken"] .r-ring { display: none; }
.region[data-status="taken"] .r-dot {
  fill: transparent; stroke: var(--navy-70); stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

/* detail panel - navy card, reads state from JS */
.regions-detail {
  background: var(--navy); color: var(--off-white); border-radius: var(--rad-card);
  padding: clamp(26px, 3vw, 38px); align-self: stretch;
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: var(--shadow-lift);
}
.rd-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-mut); margin-bottom: 14px;
}
.rd-name { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem); color: var(--off-white); line-height: 1.15; }
.rd-status { margin-top: .9rem; color: var(--on-dark-mut); font-size: .98rem; line-height: 1.7; }
.rd-cta { margin-top: clamp(1.4rem, 2.5vh, 2rem); align-self: flex-start; }
.regions-detail[data-state="taken"] .rd-name { color: #d8b27a; }

/* close control: hidden on desktop (panel is a permanent side column), shown on mobile overlay */
.rd-close {
  display: none; position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; padding: 0; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%; color: var(--on-dark-mut);
  cursor: pointer; transition: color .25s var(--ease-lux), background .25s var(--ease-lux);
}
.rd-close:hover, .rd-close:focus-visible { color: var(--off-white); background: rgba(245, 240, 234, .1); outline: none; }

@media (max-width: 760px) {
  .regions-layout { grid-template-columns: 1fr; gap: 28px; }
  .rl-count { margin-left: 0; padding-left: 0; border-left: 0; width: 100%; text-align: center; }

  /* detail panel becomes a dismissible bottom sheet that overlays the page on tap */
  .regions-detail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    width: 100%; max-width: 560px; margin: 0 auto;
    /* slightly see-through so the map reads behind the sheet; blur keeps text legible */
    background: rgba(27, 42, 59, .82);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-radius: var(--rad-card) var(--rad-card) 0 0;
    padding-bottom: calc(clamp(26px, 3vw, 38px) + env(safe-area-inset-bottom, 0px));
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(100%);
    box-shadow: 0 -18px 50px rgba(27, 42, 59, .32);
    transition: opacity .4s var(--ease-lux), transform .45s var(--ease-lux), visibility 0s linear .45s;
  }
  .regions-detail::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(13, 20, 28, .5); opacity: 0;
    transition: opacity .4s var(--ease-lux);
  }
  .regions-detail[data-state="open"], .regions-detail[data-state="taken"] {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
    transition: opacity .4s var(--ease-lux), transform .45s var(--ease-lux);
  }
  .regions-detail[data-state="open"]::before, .regions-detail[data-state="taken"]::before { opacity: 1; }
  .rd-close { display: inline-flex; }
}

/* ---------- 5. Sticky section rail (long pages) ---------- */
.section-rail {
  position: fixed; right: 28px; top: 50%; transform: translateY(-50%); z-index: 40;
  display: none; flex-direction: column; gap: 4px;
}
@media (min-width: 1200px) { .section-rail { display: flex; } }
.sr-dot {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 7px 0; text-decoration: none; cursor: pointer;
}
.sr-label {
  font-size: .78rem; font-weight: 500; letter-spacing: .01em; color: var(--slate);
  opacity: 0; transform: translateX(6px); white-space: nowrap;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), color .3s var(--ease-out);
}
.sr-pt {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: transparent; border: 1.5px solid var(--navy-70);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.sr-dot:hover .sr-label { opacity: 1; transform: translateX(0); }
.sr-dot:hover .sr-pt { border-color: var(--navy); }
.sr-dot.active .sr-pt { background: var(--navy); border-color: var(--navy); transform: scale(1.15); }
.sr-dot.active .sr-label { opacity: 1; transform: translateX(0); color: var(--navy); }
/* flip light over dark sections */
.section-rail.on-dark .sr-pt { border-color: rgba(245,240,234,.55); }
.section-rail.on-dark .sr-label { color: var(--on-dark-mut); }
.section-rail.on-dark .sr-dot:hover .sr-pt { border-color: var(--off-white); }
.section-rail.on-dark .sr-dot.active .sr-pt { background: var(--off-white); border-color: var(--off-white); }
.section-rail.on-dark .sr-dot.active .sr-label { color: var(--off-white); }

/* ---------- 6. Sticky "book a call" bar ---------- */
.bookbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--navy); color: var(--off-white);
  box-shadow: 0 -8px 30px -18px rgba(27,42,59,.6);
  transform: translateY(110%); transition: transform .5s var(--ease-lux);
  padding: 12px 0; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.bookbar.show { transform: translateY(0); }
.bookbar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bookbar-text { font-size: .95rem; color: var(--on-dark-mut); margin: 0; }
.bookbar-text strong { color: var(--off-white); font-weight: 600; }
.bookbar .btn { flex: none; padding: 12px 24px; }
@media (max-width: 620px) {
  .bookbar-text span { display: none; }
  .bookbar-text { font-size: .9rem; }
  .bookbar .btn { padding: 12px 18px; font-size: .88rem; }
}
@media (max-width: 420px) {
  .bookbar-text { display: none; }
  .bookbar-in { justify-content: center; }
  .bookbar .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Finish pass - text selection + section-image focus-pull
   ============================================================ */

/* text selection: brand navy, inverts to off-white over dark sections */
::selection { background: var(--navy); color: var(--off-white); }
::-moz-selection { background: var(--navy); color: var(--off-white); }
.sec-dark ::selection, .footer ::selection { background: var(--off-white); color: var(--navy); }
.sec-dark ::-moz-selection, .footer ::-moz-selection { background: var(--off-white); color: var(--navy); }

/* big section images settle from a slight zoom as they reveal (focus-pull).
   scale sits on the inner img so the figure's own reveal (fade/blur/rise) is
   untouched; shares the reveal stagger delay so it lands in sync. */
.site-figure.reveal .site-img {
  will-change: transform;
  transform: scale(1.04);
  transition: transform 1.1s var(--ease-lux);
  transition-delay: var(--d, 0ms);
}
.site-figure.reveal.in .site-img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .site-figure.reveal .site-img { transform: none !important; }
}

/* ============================================================
   About / Team page
   ============================================================ */
.name-story .split-aside h2 { max-width: 12ch; }
.hw-term { font-family: var(--serif); font-style: italic; color: var(--navy); }

.team-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(32px, 5vh, 54px);
}
.team-card {
  background: #fbf8f3;
  border: 1px solid var(--line);
  border-radius: var(--rad-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  transition: transform .4s var(--ease-lux), box-shadow .4s var(--ease-lux), border-color .4s var(--ease-lux);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: rgba(27,42,59,.28); }
.team-portrait { margin: 0; background: var(--navy); line-height: 0; }
.team-portrait img { width: 100%; height: auto; display: block; }
.team-body { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; flex: 1; }
.team-name { font-family: var(--serif); font-size: clamp(1.35rem, 2.4vw, 1.6rem); font-weight: 600; color: var(--navy); line-height: 1.1; margin-bottom: .35rem; }
.team-role { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); }
.team-bio { margin-top: 1rem; }
.team-bio p { font-size: .98rem; color: var(--slate); line-height: 1.62; text-wrap: pretty; }
.team-bio p + p { margin-top: .75em; }
.team-links { margin-top: auto; padding-top: 1.3rem; display: flex; align-items: center; gap: 1.2rem; }
.team-links a { display: inline-flex; align-items: center; gap: .45em; font-family: var(--sans); font-weight: 600; font-size: .92rem; color: var(--navy); }
.team-links a svg { width: 17px; height: 17px; flex: none; }

/* owner-confirm placeholders - DRAFT ONLY, removed before publish (no gold: gold stays CTA-only) */
.todo {
  background: var(--navy-08);
  border-bottom: 1px dashed var(--navy);
  color: var(--navy); font-weight: 600; font-style: normal;
  padding: 0 .3em; border-radius: 3px;
}
.draftnote {
  max-width: var(--measure-wide);
  margin: clamp(28px, 4vh, 44px) auto 0;
  padding: 16px 20px;
  border: 1px dashed var(--navy);
  border-radius: var(--rad);
  background: var(--navy-08);
  font-size: .9rem; line-height: 1.6; color: var(--slate);
}
.draftnote strong { color: var(--navy); }

@media (max-width: 760px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* homepage About teaser */
.teaser { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(28px,5vw,70px); align-items: center; }
.teaser-copy h2 { max-width: 15ch; margin: 1rem 0 .9rem; }
.teaser-copy p { max-width: 46ch; }
.teaser-copy .tlink { display: inline-flex; align-items: center; gap: .4em; margin-top: 1.4rem; }
.teaser-faces { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,22px); }
.teaser-faces figure { margin: 0; }
.teaser-faces picture { display: block; border-radius: var(--rad-card); overflow: hidden; background: var(--navy); box-shadow: var(--shadow-card); }
.teaser-faces img { width: 100%; height: auto; display: block; }
.teaser-faces figcaption { margin-top: .65rem; font-family: var(--sans); font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--slate); }
@media (max-width: 760px) {
  .teaser { grid-template-columns: 1fr; gap: clamp(22px,4vh,34px); }
}

/* ============================================================
   Region toggle (UK / US) - header switch, first-visit modal,
   and the twin-content display rules. Neutral navy/stone only;
   gold stays reserved for the primary CTA.
   ============================================================ */

/* twin content: only the active region's variant is shown. Default
   markup carries data-region="uk" so a no-JS visitor still sees the UK
   copy and the US twins stay hidden. */
[data-region="uk"] .r-us { display: none !important; }
[data-region="us"] .r-uk { display: none !important; }

/* header switch - sits far right in the nav, visible on mobile too */
.region-switch { display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px;
  background: rgba(27,42,59,.04); margin-left: clamp(10px, 2vw, 18px); flex: 0 0 auto; }
.region-switch button { appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  color: var(--slate); padding: .34rem .64rem; border-radius: 999px; cursor: pointer;
  line-height: 1; transition: color .2s var(--ease-out), background .2s var(--ease-out); }
.region-switch button:hover { color: var(--navy); }
.region-switch button.is-on { background: var(--navy); color: var(--on-dark); }
.region-switch button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* first-visit modal */
body.rm-lock { overflow: hidden; }
.region-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: clamp(18px, 5vw, 40px); background: rgba(27,42,59,.52); -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px); opacity: 0; transition: opacity .26s var(--ease-out); }
.region-modal.show { opacity: 1; }
.rm-card { width: min(440px, 100%); background: var(--off-white); border: 1px solid var(--line);
  border-radius: var(--rad-card); box-shadow: var(--shadow-lift); padding: clamp(26px, 4vw, 40px);
  transform: translateY(10px) scale(.985); opacity: .5;
  transition: transform .3s var(--ease-lux), opacity .3s var(--ease-lux); }
.region-modal.show .rm-card { transform: none; opacity: 1; }
.rm-eyebrow { font-family: var(--sans); font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate); margin: 0 0 .5rem; }
.rm-title { font-family: var(--serif); font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.08;
  letter-spacing: -.01em; color: var(--navy); margin: 0 0 .55rem; }
.rm-sub { font-family: var(--sans); font-size: .92rem; line-height: 1.55; color: var(--slate); margin: 0 0 1.4rem; }
.rm-opts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 14px); }
.rm-opt { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.05rem .8rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--rad-card); cursor: pointer;
  font-family: var(--sans); transition: border-color .2s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.rm-opt:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.rm-opt:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.rm-flag { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .04em; color: var(--navy); }
.rm-lab { font-size: .82rem; color: var(--slate); }

@media (max-width: 420px) {
  .rm-opts { grid-template-columns: 1fr; }
  .region-switch { margin-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .region-modal, .rm-card, .rm-opt, .region-switch button { transition: none; }
}