/* ============================================================
   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); }

/* ---------- 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);
}
.nav.scrolled { border-bottom-color: var(--line); background: rgba(245,240,234,.92); }
.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: 15ch; }
.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 { margin-top: clamp(40px,6vh,72px); box-shadow: var(--shadow-lift); border-radius: var(--rad-card); }

/* ---------- 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: #939aa6; 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: #6b7280; }

@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); }

/* ============================================================
   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 { list-style: none; padding: 0; margin: 0; max-width: var(--measure-wide); display: grid; gap: clamp(32px, 5vh, 56px); }
.step { display: grid; grid-template-columns: 56px 1fr; gap: clamp(18px, 3vw, 34px); align-items: start; padding-bottom: clamp(32px, 5vh, 56px); border-bottom: 1px solid var(--line); }
.steps .step:last-child { border-bottom: 0; padding-bottom: 0; }
.step .num {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--navy);
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--navy-12); border-radius: 50%; flex: none;
}
.step-body h3 { margin-bottom: .5em; }
.step-title { font-family: var(--sans); font-size: 1rem; 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: .35em; }
.step-body .tlink { display: inline-block; margin-top: 1.1em; }

/* ---------- List variants ---------- */
.listblock-lg { gap: 2.1rem; }
.listblock-lg .listitem { grid-template-columns: 26px 1fr; }

/* 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;
}

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

/* ---------- Big closing statement ---------- */
.big-statement {
  font-family: var(--serif); font-weight: 600; color: var(--off-white);
  font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.12; letter-spacing: -.02em;
  max-width: 20ch; margin: .3em auto .7em;
}

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

/* ---------- 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); }

/* 1 - scroll progress: a hairline navy meter at the very top */
#scrollProgress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60;
  background: var(--navy); opacity: .85;
  transition: width .08s linear; will-change: width; pointer-events: none;
}

/* 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); }

/* 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; }
.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) {
  #scrollProgress, .cursor-glow { display: none !important; }
  .hero .cta-row .btn, .cta-band .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; }
}