/* ============================================================
   Detalus — shared stylesheet
   Locked direction: Detalus Charcoal (quiet-confident) + gold accent
   Gold #C9A227 is FILL/decoration only; gold-deep #7E6011 for gold text (AA).
   ============================================================ */
:root {
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #666666;
  --gold: #F6B221;        /* Detalus logo gold — fills + decoration only, never text on light */
  --gold-hover: #E2A111;
  --gold-deep: #835F08;   /* deepened logo gold for gold-as-text on light, WCAG AA */
  --teal: #009490;        /* Detalus logo teal — secondary-CTA accent (fills need dark text) */
  --teal-deep: #006B66;   /* deepened teal for teal-as-text / borders on light, WCAG AA */
  --ink-on-gold: #1A1A1A;
  --line: rgba(26,26,26,0.10);
  --line-2: rgba(26,26,26,0.16);
  --maxw: 1140px;
  --measure: 680px;
  --font-head: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-head); text-wrap: balance; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.container { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }
.goldbar { height: 3px; background: var(--gold); width: 100%; }
section[id], [id] { scroll-margin-top: 92px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1;
  min-height: 50px; padding: 0 26px; border-radius: 4px; cursor: pointer;
  text-decoration: none; border: 1px solid var(--gold); background: var(--gold); color: var(--ink-on-gold);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn--ghost { background: transparent; color: var(--teal-deep); border-color: var(--teal); }
.btn--ghost:hover { background: rgba(0,148,144,0.07); color: var(--teal-deep); border-color: var(--teal-deep); }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 16px; }

.eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold-deep); margin: 0 0 20px;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); display: inline-block; }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 60; background: rgba(250,250,247,0.85);
  backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
header.site.scrolled { border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(26,26,26,0.04); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.nav__logo { height: 28px; width: auto; }
.nav__right { display: flex; align-items: center; gap: 28px; }
.nav__links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav__links > li > a, .nav__links > li > .navitem {
  font-weight: 500; font-size: 15px; color: var(--ink); text-decoration: none; cursor: pointer;
  padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; background: none; border: none; font-family: var(--font-body);
}
.nav__links > li > a:hover, .navitem:hover { color: var(--gold-deep); }
.nav__phone { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav__phone:hover { color: var(--gold-deep); }

/* services dropdown (§7a) */
.has-dropdown { position: relative; }
.has-dropdown::after { content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 16px; display: none; }
.has-dropdown:hover::after, .has-dropdown:focus-within::after { display: block; }
.nav__submenu {
  position: absolute; top: calc(100% + 14px); left: -16px; min-width: 290px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 18px 50px rgba(26,26,26,0.12); padding: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown:hover .nav__submenu, .has-dropdown:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__submenu a { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 6px; text-decoration: none; }
.nav__submenu a:hover { background: var(--bg); }
.nav__submenu .ic { color: var(--gold-deep); margin-top: 2px; }
.nav__submenu strong { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; display: block; }
.nav__submenu span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.chev { width: 12px; height: 12px; }

.nav__toggle { display: none; background: none; border: 1px solid var(--line-2); border-radius: 6px; width: 48px; height: 48px; cursor: pointer; align-items: center; justify-content: center; }
.nav__toggle svg { width: 22px; height: 22px; }

/* ---------- hero (2-column home) ---------- */
.hero { padding: clamp(26px, 3.4vw, 52px) 0 clamp(46px, 6vw, 78px); }
.hero__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.hero h1 { font-weight: 700; font-size: clamp(2.5rem, 4.4vw, 3.9rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 24px; max-width: 15ch; }
.hero .lede { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--ink-soft); line-height: 1.62; margin: 0 0 36px; max-width: 54ch; }
.hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero__callnote { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; }
.hero__callnote span { color: var(--ink-soft); font-weight: 500; }
.hero__callnote:hover { color: var(--gold-deep); }

/* hero credentials card */
.hero__card { background: var(--surface); border: 1px solid var(--line); padding: clamp(28px, 3vw, 40px); }
.hero__card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 24px; }
.hc__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 2.6vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.hc__num .star { color: var(--gold); }
.hc__label { font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-top: 10px; line-height: 1.3; }
.hero__verify { display: inline-flex; align-items: center; gap: 7px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); width: 100%; font-weight: 600; font-size: 14px; color: var(--gold-deep); text-decoration: none; }
.hero__verify:hover { color: var(--ink); }

/* homepage hero emphasis — serif italic goal words that fly in, staggered */
.hero-em {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500;
  color: var(--gold-deep); display: inline-block;
  opacity: 0; transform: translateY(0.5em);
  animation: heroEmIn 2.6s cubic-bezier(.22,.78,.32,1) both;
  animation-delay: calc(var(--d, 0) * 620ms + 550ms);
}
@keyframes heroEmIn { from { opacity: 0; transform: translateY(0.9em); filter: blur(9px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* static italic serif accent for sub-page H1s (no fly-in animation) */
.h1-em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; color: var(--gold-deep); }

/* entrance reveals — applied by app.js to below-the-fold sections */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }

/* long-form body copy: avoid orphans/ragged breaks without balancing every line */
.legal p, .prose p, .blog-card p { text-wrap: pretty; }

/* ---------- Wave 3: focus, hover, depth (quiet-confident — no gradients/glows) ---------- */
/* Universal keyboard focus ring — teal (AA UI contrast on light AND dark; gold would fail 3:1) */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
.flip:focus-visible { outline-offset: 5px; }
footer.site--dark :focus-visible, .imghero :focus-visible { outline-color: #3CC9C2; }
/* Subtle hover lift on clickable cards (a soft interaction shadow only — resting state stays flat) */
.jteaser a, .related a, .hub-card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.jteaser a:hover, .related a:hover, .hub-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(26,26,26,0.10); border-color: var(--ink); }

/* hybrid hero — lifestyle image beside the text with the credentials card floating over it */
.hero--hybrid .hero__grid { grid-template-columns: 1.02fr 0.98fr; align-items: center; }
.hero__visual { position: relative; }
.hero__photo { width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; object-position: 50% 58%; display: block; border: 1px solid var(--line); }
.hero--hybrid .hero__card { position: absolute; left: -40px; bottom: -34px; width: min(332px, 94%); margin: 0; box-shadow: 0 26px 64px rgba(26,26,26,0.22); }

/* homepage "Your Financial Journey" teaser — 3 lifestyle stage cards */
.jteaser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.jteaser a { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: border-color .18s ease, transform .18s ease; }
.jteaser a:hover { border-color: var(--ink); }
.jteaser a:hover img { transform: scale(1.03); }
.jteaser .ph { overflow: hidden; }
.jteaser img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; transition: transform .4s ease; }
.jteaser .body { padding: 24px 24px 28px; }
.jteaser .n { font-family: var(--font-head); font-weight: 700; font-size: .82rem; color: var(--gold-deep); letter-spacing: .05em; margin-bottom: 9px; }
.jteaser h3 { font-weight: 600; font-size: 1.18rem; letter-spacing: -0.01em; margin: 0 0 8px; }
.jteaser h3 em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; color: var(--gold-deep); }
.jteaser p { color: var(--ink-soft); font-size: .96rem; line-height: 1.55; margin: 0; }

/* ---------- sub-page hero (single column) ---------- */
.pagehero { padding: clamp(40px,5vw,76px) 0 clamp(30px,4vw,52px); border-bottom: 1px solid var(--line); }
.pagehero h1 { font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1.07; letter-spacing: -0.025em; margin: 0 0 22px; max-width: 19ch; }
.pagehero .lede { font-size: clamp(1.05rem,1.4vw,1.22rem); color: var(--ink-soft); line-height: 1.6; margin: 0; max-width: 62ch; }
.pagehero__cta { margin-top: 34px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* breadcrumb */
.crumbs { padding-top: 20px; font-size: 13px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.crumbs li { color: var(--ink-soft); display: flex; gap: 8px; }
.crumbs li::after { content: "/"; color: var(--line-2); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs li[aria-current] { color: var(--ink); }

/* ---------- sections ---------- */
section { padding: clamp(64px, 8vw, 104px) 0; }
.sec-head { max-width: var(--measure); }
.sec-head h2 { font-weight: 700; font-size: clamp(1.95rem, 3.4vw, 2.85rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 18px; }
.sec-head p { font-size: 1.1rem; color: var(--ink-soft); margin: 0; }
.band-surface { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* services — separated cards that flip on hover / tap */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.flip { perspective: 1400px; min-height: 268px; }
.flip__inner { position: relative; width: 100%; min-height: 268px; transition: transform .55s cubic-bezier(.2,.75,.2,1); transform-style: preserve-3d; }
.flip:hover .flip__inner, .flip:focus-within .flip__inner, .flip.flipped .flip__inner { transform: rotateY(180deg); }
.flip__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; background: var(--surface); border: 1px solid var(--line); padding: 32px 30px; display: flex; flex-direction: column; }
.flip__front .svc__ic { width: 30px; height: 30px; color: var(--ink); margin-bottom: 22px; }
.flip__front .svc__ic svg { width: 30px; height: 30px; }
.flip__face h3 { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; margin: 0 0 10px; }
.flip__face p { font-size: .98rem; color: var(--ink-soft); margin: 0; line-height: 1.55; }
.svc__hint { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 7px; }
.svc__hint svg { width: 14px; height: 14px; color: var(--gold-deep); }
.flip__back { transform: rotateY(180deg); border-color: var(--ink); background: #FAF6EA; }
.flip__back a { margin-top: auto; padding-top: 18px; font-weight: 600; font-size: 14px; color: var(--gold-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.flip__back a:hover { gap: 10px; }
.flip__back a svg { width: 14px; height: 14px; }

/* services hub cards (non-flip) */
.hub-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-top: 12px; }
.hub-card { background: var(--surface); border: 1px solid var(--line); padding: 36px 34px; display: flex; flex-direction: column; }
.hub-card .svc__ic { width: 32px; height: 32px; color: var(--ink); margin-bottom: 20px; }
.hub-card .svc__ic svg { width: 32px; height: 32px; }
.hub-card h3 { font-weight: 600; font-size: 1.35rem; margin: 0 0 10px; letter-spacing: -0.01em; }
.hub-card p { color: var(--ink-soft); margin: 0 0 22px; line-height: 1.6; flex: 1; }
.hub-card a.more { font-weight: 600; font-size: 14px; color: var(--gold-deep); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.hub-card a.more:hover { gap: 10px; }
.hub-card a.more svg { width: 14px; height: 14px; }

/* content + aside (service detail) */
.detail { display: grid; grid-template-columns: 1fr 340px; gap: clamp(40px,5vw,72px); align-items: start; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 22px; }
.prose h2 { font-weight: 700; font-size: clamp(1.55rem,2.6vw,2.05rem); letter-spacing: -0.018em; line-height: 1.2; margin-top: 14px; }
.prose h3 { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.prose p { color: var(--ink); font-size: 1.06rem; line-height: 1.72; }
.prose .muted { color: var(--ink-soft); }
.prose ul.checks { list-style: none; padding: 0; margin: 24px 0; }
.prose ul.checks li { position: relative; padding: 0 0 0 34px; margin-bottom: 15px; color: var(--ink); line-height: 1.55; font-size: 1.04rem; }
.prose ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 21px; height: 21px; background: var(--gold);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15 9-9L20 7.2z"/></svg>') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15 9-9L20 7.2z"/></svg>') no-repeat center / contain;
}

/* aside CTA card */
.aside-card { background: var(--surface); border: 1px solid var(--line); padding: 32px; position: sticky; top: 96px; }
.aside-card h3 { font-weight: 700; font-size: 1.25rem; margin: 0 0 10px; letter-spacing: -0.01em; }
.aside-card p { color: var(--ink-soft); font-size: .98rem; margin: 0 0 22px; line-height: 1.55; }
.aside-card .btn { width: 100%; }
.aside-card .or { text-align: center; margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }
.aside-card .or a { color: var(--ink); font-weight: 600; text-decoration: none; }
.aside-card__list { margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); list-style: none; }
.aside-card__list li { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 10px; }

/* related services */
.related { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 44px; }
.related a { display: block; background: var(--surface); border: 1px solid var(--line); padding: 22px; text-decoration: none; transition: border-color .18s ease; }
.related a:hover { border-color: var(--ink); }
.related strong { font-family: var(--font-head); font-weight: 600; display: block; margin-bottom: 5px; }
.related span { color: var(--ink-soft); font-size: .9rem; }

/* ---------- image hero (overlaid text — P-002 legibility: scrim + text-shadow) ---------- */
.imghero { position: relative; min-height: clamp(460px, 64vh, 640px); display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid var(--line); }
.imghero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imghero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(16,16,16,0.80) 0%, rgba(16,16,16,0.46) 46%, rgba(16,16,16,0.12) 100%),
  linear-gradient(0deg, rgba(16,16,16,0.55) 0%, rgba(16,16,16,0) 42%); }
.imghero > .container { position: relative; z-index: 2; padding: 64px 0 clamp(40px,6vw,76px); }
.imghero .eyebrow { color: #F4C45C; opacity: 1; }
.imghero .eyebrow::before { background: #F4C45C; }
.imghero h1 { color: #fff; text-shadow: 0 1px 24px rgba(0,0,0,0.5); font-weight: 700; font-size: clamp(2.4rem,4.8vw,3.9rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 20px; max-width: 17ch; }
.imghero h1 .hero-em, .imghero h1 em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; color: #F4C45C; }
.imghero .lede { color: rgba(255,255,255,0.93); text-shadow: 0 1px 16px rgba(0,0,0,0.45); font-size: clamp(1.05rem,1.4vw,1.22rem); line-height: 1.6; max-width: 56ch; margin: 0 0 32px; }
.imghero .hero__callnote { color: #fff; }
.imghero .hero__callnote span { color: rgba(255,255,255,0.7); }
.imghero .hero__callnote:hover { color: #F4C45C; }

/* ---------- journey stages (alternating image + editorial text) ---------- */
.jstage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,76px); align-items: center; padding: clamp(56px,7vw,92px) 0; border-top: 1px solid var(--line); }
.jstage:first-of-type { border-top: none; }
.jstage--reverse .jstage__media { order: 2; }
.jstage__media { position: relative; }
.jstage__media img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center 42%; display: block; border: 1px solid var(--line); }
.jstage__media .tag { position: absolute; top: 16px; left: 16px; background: var(--surface); color: var(--ink); font: 600 11px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; padding: 10px 14px; border: 1px solid var(--line); z-index: 2; }

/* Cinematic stage entrance — JS-gated via .cine (added only to below-fold stages) */
.jstage.cine .jstage__media { overflow: hidden; }
.jstage.cine .jstage__media img { transform: scale(1.16); opacity: 0; transition: transform 1.2s cubic-bezier(.16,.84,.28,1), opacity 1.1s ease; will-change: transform, opacity; }
.jstage.cine .jstage__media .tag { opacity: 0; transition: opacity .8s ease .5s; }
.jstage.cine > div:not(.jstage__media) { opacity: 0; transform: translateY(42px); transition: transform 1.05s cubic-bezier(.16,.84,.28,1) .12s, opacity 1s ease .12s; }
.jstage.cine.jstage--in .jstage__media img { transform: scale(1); opacity: 1; }
.jstage.cine.jstage--in .jstage__media .tag { opacity: 1; }
.jstage.cine.jstage--in > div:not(.jstage__media) { opacity: 1; transform: translateY(0); }
.jstage__n { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--gold-deep); letter-spacing: .04em; margin-bottom: 14px; }
.jstage h2 { font-weight: 700; font-size: clamp(1.7rem,2.8vw,2.35rem); letter-spacing: -0.02em; line-height: 1.14; margin: 0 0 16px; }
.jstage h2 em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; color: var(--gold-deep); }
.jstage > div > p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.66; margin: 0 0 22px; }
.jstage ul.checks { margin: 0 0 6px; }
.jstage ul.checks li { font-size: 1rem; margin-bottom: 13px; }

/* full-bleed editorial image band (service detail pages) */
.svc-band { border-bottom: 1px solid var(--line); }
.svc-band img { width: 100%; aspect-ratio: 21 / 9; height: auto; object-fit: cover; object-position: center 40%; display: block; }
@media (max-width: 720px) { .svc-band img { aspect-ratio: 3 / 2; } }

/* why */
.why__wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.why__list { list-style: none; margin: 0; padding: 0; }
.why__list li { display: grid; grid-template-columns: 42px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.why__list li:first-child { padding-top: 0; border-top: none; }
.why__k { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--gold-deep); }
.why__list h3 { font-weight: 600; font-size: 1.12rem; margin: 0 0 6px; letter-spacing: -0.01em; }
.why__list p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }

/* process */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 56px; }
.steps.four { grid-template-columns: repeat(4, 1fr); }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--gold); }
.step__n { font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 14px; }
.step h3 { font-weight: 600; font-size: 1.3rem; margin: 0 0 10px; letter-spacing: -0.01em; }
.step p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

/* founders */
.founders__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px); align-items: center; }
.founders__people { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 8px; }
.person { display: flex; align-items: center; gap: 16px; }
.monogram { width: 64px; height: 64px; border-radius: 4px; border: 1px solid var(--line-2); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--ink); background: var(--bg); }
.monogram b { border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.person strong { font-family: var(--font-head); font-size: 1.05rem; display: block; }
.person span { color: var(--ink-soft); font-size: .9rem; }
.founder-photo { width: 84px; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 18%; border-radius: 6px; border: 1px solid var(--line-2); flex: none; box-shadow: 0 6px 18px rgba(26,26,26,0.10); }
.founders__boards { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.founders__boards h4 { font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }
.founders__boards ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.founders__boards li { font-size: 13.5px; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 7px 12px; }

/* values grid (about) */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; margin-top: 56px; background: var(--line); border: 1px solid var(--line); }
.value { background: var(--surface); padding: 32px 30px; }
.value .svc__ic { width: 28px; height: 28px; color: var(--ink); margin-bottom: 18px; }
.value .svc__ic svg { width: 28px; height: 28px; }
.value h3 { font-weight: 600; font-size: 1.12rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.value p { color: var(--ink-soft); font-size: .98rem; margin: 0; line-height: 1.55; }

/* faq (centered §7b) */
.faq { text-align: center; }
.faq .sec-head { margin-inline: auto; }
.faq__list { max-width: 760px; margin: 48px auto 0; text-align: left; }
details.qa { border-top: 1px solid var(--line); padding: 4px 0; }
details.qa:last-child { border-bottom: 1px solid var(--line); }
details.qa summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--ink); }
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--gold-deep); font-weight: 400; line-height: 1; }
details.qa[open] summary::after { content: "\2212"; }
details.qa p { margin: 0 0 22px; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.62; max-width: 64ch; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px,5vw,72px); align-items: start; }
.form-field { margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field label { display: block; font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 7px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 4px; padding: 13px 14px;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.form-field textarea { min-height: 132px; resize: vertical; }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.form-success { display: none; background: var(--surface); border: 1px solid var(--gold); padding: 30px; }
.form-success.show { display: block; }
.form-success h3 { margin: 0 0 8px; font-weight: 700; }
.form-success p { margin: 0; color: var(--ink-soft); }
.contact-aside .row { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--line); }
.contact-aside .row:first-child { border-top: none; padding-top: 0; }
.contact-aside .ic { color: var(--gold-deep); margin-top: 2px; flex: none; }
.contact-aside .ic svg { width: 20px; height: 20px; }
.contact-aside strong { font-family: var(--font-head); display: block; font-size: 1rem; margin-bottom: 2px; }
.contact-aside a, .contact-aside .v { color: var(--ink-soft); text-decoration: none; font-size: .98rem; }
.contact-aside a:hover { color: var(--gold-deep); }

/* contact form expectation-setter (flat gold top bar — no gradient per design.md) */
.form-promise { border: 1px solid var(--line); border-top: 3px solid var(--gold); background: var(--surface); padding: 22px 24px; margin-bottom: 28px; }
.form-promise ul { list-style: none; margin: 0; padding: 0; }
.form-promise li { display: grid; grid-template-columns: 19px 1fr; gap: 11px; align-items: start; font-size: .95rem; color: var(--ink); line-height: 1.5; padding: 7px 0; }
.form-promise li svg { width: 18px; height: 18px; color: var(--teal-deep); margin-top: 2px; }

/* trust line under CTA bands */
.ctaband__trust { margin-top: 24px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* founder signature flourish (About only — a single handwritten touch) */
.signature { font-family: 'Caveat', 'Segoe Script', cursive; font-size: 2.3rem; line-height: 1; color: var(--ink); margin: 38px 0 6px; }
.signature-cap { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }

/* cta band */
.ctaband { text-align: center; }
.ctaband h2 { font-weight: 700; font-size: clamp(1.95rem, 3.4vw, 2.7rem); letter-spacing: -0.02em; margin: 0 auto 16px; max-width: 20ch; line-height: 1.12; }
.ctaband p { color: var(--ink-soft); font-size: 1.12rem; margin: 0 auto 34px; max-width: 54ch; }
.ctaband__row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* footer */
footer.site { background: var(--bg); border-top: 1px solid var(--line); padding: 64px 0 40px; }
.foot__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.foot__logo { height: 26px; margin-bottom: 18px; }
.foot__about { color: var(--ink-soft); font-size: 14px; line-height: 1.6; max-width: 30ch; }
.foot__about a { color: var(--ink); text-decoration: none; }
.foot h4 { font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 16px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 11px; }
.foot li a { color: var(--ink); text-decoration: none; font-size: 14.5px; }
.foot li a:hover { color: var(--gold-deep); }
.foot__legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; align-items: baseline; }
.foot__legal p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.6; max-width: 70ch; }
.foot__legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.foot__built a { color: var(--gold-deep); }
.foot__contact { color: var(--ink-soft); font-size: 13.5px; line-height: 1.75; margin: 6px 0 16px; }
.foot__contact a { color: inherit; text-decoration: none; }
.foot__contact a:hover { color: var(--gold-deep); }
.brokercheck { display: inline-block; margin-top: 4px; }
.brokercheck img { height: 34px; width: auto; }
.foot__legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 16px; }
.foot__legal-links a { font-size: 12.5px; color: var(--ink); text-decoration: none; }
.foot__legal-links a:hover { color: var(--gold-deep); }

/* legal / long-form prose pages */
.legal { padding: clamp(36px,4vw,60px) 0 clamp(56px,7vw,96px); }
.legal__wrap { max-width: 760px; }
.legal .lede { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 8px; }
.legal h2 { font-weight: 700; font-size: clamp(1.35rem,2.1vw,1.7rem); letter-spacing: -0.015em; line-height: 1.2; margin: 42px 0 14px; }
.legal h3 { font-weight: 600; font-size: 1.1rem; margin: 26px 0 8px; }
.legal p { color: var(--ink); font-size: 1rem; line-height: 1.72; margin: 0 0 16px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { color: var(--ink); font-size: 1rem; line-height: 1.6; margin-bottom: 9px; }
.legal a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal .fineprint { color: var(--ink-soft); font-size: .9rem; line-height: 1.6; }
.legal .reslinks { list-style: none; padding: 0; margin: 28px 0; }
.legal .reslinks li { border-top: 1px solid var(--line); padding: 18px 0; margin: 0; }
.legal .reslinks li:last-child { border-bottom: 1px solid var(--line); }
.legal .reslinks a { font-family: var(--font-head); font-weight: 600; font-size: 1.06rem; text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: 9px; }
.legal .reslinks a:hover { color: var(--gold-deep); }
.legal .reslinks svg { width: 15px; height: 15px; color: var(--gold-deep); }

/* team */
.team-group { margin-top: 56px; }
.team-group:first-of-type { margin-top: 44px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; margin-top: 28px; }
.member__mono { width: 70px; height: 70px; border-radius: 4px; border: 1px solid var(--line-2); background: var(--bg); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--ink); margin-bottom: 16px; }
.member__mono b { border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.member__photo { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; object-position: 50% 14%; border-radius: 8px; border: 1px solid var(--line); display: block; margin-bottom: 16px; box-shadow: 0 10px 26px rgba(26,26,26,0.10); }
.member h3 { font-weight: 600; font-size: 1.12rem; margin: 0 0 4px; letter-spacing: -0.01em; }
.member .role { color: var(--gold-deep); font-weight: 600; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 11px; }
.member p { color: var(--ink-soft); font-size: .95rem; line-height: 1.56; margin: 0; }

/* blog index */
.bloglist { margin-top: 40px; max-width: 760px; }
.blog-card { border-top: 1px solid var(--line); padding: 26px 0; }
.blog-card:last-child { border-bottom: 1px solid var(--line); }
.blog-empty { max-width: 600px; background: var(--surface); border: 1px solid var(--line); padding: 40px; margin-top: 36px; }
.blog-empty h2 { font-weight: 700; font-size: 1.4rem; margin: 0 0 10px; letter-spacing: -0.015em; }
.blog-empty p { color: var(--ink-soft); margin: 0; line-height: 1.65; }

/* dark footer variant (rolls out site-wide) */
footer.site--dark { background: #121212; border-top: 3px solid var(--gold); }
footer.site--dark .foot__logo { filter: brightness(0) invert(1); opacity: .92; }
footer.site--dark .foot__contact { color: rgba(255,255,255,0.80); }
footer.site--dark .foot__contact a:hover { color: #F4C45C; }
footer.site--dark .foot h4 { color: rgba(255,255,255,0.80); }
footer.site--dark .foot li a { color: rgba(255,255,255,0.90); }
footer.site--dark .foot li a:hover { color: #F4C45C; }
footer.site--dark .foot__legal { border-top-color: rgba(255,255,255,0.13); }
footer.site--dark .foot__legal p { color: rgba(255,255,255,0.66); }
footer.site--dark .foot__legal-links a { color: rgba(255,255,255,0.86); }
footer.site--dark .foot__legal-links a:hover { color: #F4C45C; }
footer.site--dark .foot__legal a { color: rgba(255,255,255,0.86); }
footer.site--dark .foot__built a { color: #F4C45C; }
footer.site--dark .foot__about { color: rgba(255,255,255,0.78); }
footer.site--dark .foot__about a { color: #fff; }

/* mobile-only elements — hidden on desktop by default (§7a) */
.callbar { display: none; }
.mobilemenu { display: none; }

@media (max-width: 920px) {
  .nav__links, .nav__right .nav__phone, .nav__right > .btn { display: none; }
  .nav__toggle { display: inline-flex; }
  .mobilemenu.open { display: block; position: fixed; inset: 64px 0 0; background: var(--bg); z-index: 55; padding: 24px; overflow-y: auto; }
  .mobilemenu a { display: block; padding: 16px 4px; font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
  .mobilemenu .btn { margin-top: 22px; width: 100%; }
  .hero__grid, .hero--hybrid .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero--hybrid .hero__card { position: static; left: auto; bottom: auto; width: 100%; box-shadow: none; margin-top: 0; }
  .hero__photo { aspect-ratio: 4 / 3; }
  .svc-grid, .steps, .values, .team-grid { grid-template-columns: 1fr 1fr; }
  .steps.four { grid-template-columns: 1fr 1fr; }
  .why__wrap, .founders__wrap, .detail, .contact-grid, .hub-grid { grid-template-columns: 1fr; }
  .jstage { grid-template-columns: 1fr; gap: 28px; }
  .jstage--reverse .jstage__media { order: 0; }
  .aside-card { position: static; }
  .related { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .hero__card-grid { gap: 26px 20px; }
  .svc-grid, .steps, .values, .steps.four, .jteaser, .team-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr 1fr; }
  body { padding-bottom: 76px; }
  .callbar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(26,26,26,0.06);
    transform: translateY(120%); transition: transform .32s cubic-bezier(.16,.84,.28,1);
  }
  body.is-scrolled .callbar { transform: translateY(0); }
  .callbar .btn { flex: 1; }
}
@media (max-width: 460px) {
  .foot__top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; }
  .hero-em { opacity: 1 !important; transform: none !important; }
}

/* Skip-to-content — hidden until keyboard focus (a11y, §7) */
.skip-link {
  position: absolute;
  left: 12px;
  top: -56px;
  z-index: 2000;
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  border-radius: 8px;
  font: 600 0.9rem/1 'Manrope', system-ui, sans-serif;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus { top: 12px; outline: 2px solid var(--teal); outline-offset: 3px; }

/* Print — drop nav / sticky CTA / dark chrome, ink on white (§L) */
@media print {
  .goldbar, .callbar, #siteHeader, .mobilemenu, .skip-link { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  footer.site, .site--dark, .site--dark * { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  * { box-shadow: none !important; }
  main { padding-top: 0 !important; }
}

/* ---------- cinematic statement band ---------- */
.statement { position: relative; isolation: isolate; background: #0B1F2C; overflow: hidden; }
.statement__img { width: 100%; height: clamp(440px, 66vh, 700px); object-fit: cover; object-position: 50% 40%; display: block; }
.statement__inner { position: absolute; inset: 0; display: flex; align-items: center; }
.statement__inner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,31,44,0.10) 0%, rgba(11,31,44,0.22) 36%, rgba(11,31,44,0.60) 72%, rgba(11,31,44,0.80) 100%); }
.statement__grid { position: relative; display: grid; justify-items: end; }
.statement__copy { max-width: 560px; color: #fff; }
.statement__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #F4C45C; margin: 0 0 18px; }
.statement__big { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 3.7vw, 3.15rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 22px; text-shadow: 0 2px 34px rgba(11,31,44,0.55); }
.statement__big em { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500; color: #F4C45C; }
.statement__sub { font-size: 1.08rem; line-height: 1.62; color: rgba(255,255,255,0.92); max-width: 46ch; margin: 0; text-shadow: 0 1px 20px rgba(11,31,44,0.6); }
@media (max-width: 760px) {
  .statement__img { height: clamp(500px, 86vh, 640px); object-position: 36% 42%; }
  .statement__inner::before { background: linear-gradient(180deg, rgba(11,31,44,0.18) 0%, rgba(11,31,44,0.34) 38%, rgba(11,31,44,0.74) 100%); }
  .statement__grid { justify-items: start; }
  .statement__copy { max-width: 100%; }
  .statement__inner { align-items: flex-end; padding-bottom: 8px; }
}

/* ---------- hero: full-bleed cinematic (homepage) ---------- */
.hero-cine { position: relative; isolation: isolate; min-height: 560px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; background: #0B1F2C url('/assets/hero-stl-end.jpg') center 34% / cover; }
.hero-cine__video, .hero-cine__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; z-index: -2; }
.hero-cine__scrim { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(99deg, rgba(11,31,44,0.92) 0%, rgba(11,31,44,0.72) 30%, rgba(11,31,44,0.42) 58%, rgba(11,31,44,0.28) 100%),
  linear-gradient(0deg, rgba(11,31,44,0.70) 0%, rgba(11,31,44,0.16) 26%, rgba(11,31,44,0.06) 100%); }
@media (prefers-reduced-motion: reduce) { .hero-cine__video { display: none; } }
.hero-cine__body { align-self: center; width: 100%; padding: clamp(44px, 9vh, 92px) 0 clamp(18px, 3vh, 34px); }
.hero-cine__content { max-width: 640px; }
.eyebrow--onimg { color: #F4C45C; }
.eyebrow--onimg::before { background: #F4C45C; }
.hero-cine__h1 { font-family: var(--font-head); font-weight: 700; color: #fff; font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 22px; max-width: 17ch; text-shadow: 0 2px 38px rgba(11,31,44,0.55); }
.hero-cine__h1 .hero-em { color: #F4C45C; }
.hero-cine__lede { font-size: clamp(1.06rem, 1.4vw, 1.22rem); color: rgba(255,255,255,0.92); line-height: 1.6; margin: 0 0 32px; max-width: 50ch; text-shadow: 0 1px 22px rgba(11,31,44,0.55); }
.btn--onimg { background: rgba(255,255,255,0); border-color: rgba(255,255,255,0.55); color: #fff; }
.btn--onimg:hover { background: rgba(255,255,255,0.14); border-color: #fff; color: #fff; }
.hero-cine__trust { position: relative; }
.hero-cine__trust-row { display: flex; align-items: center; gap: 13px; flex-wrap: nowrap; width: max-content; max-width: none; margin-top: 22px; padding: 0; color: rgba(255,255,255,0.92); font-size: 13.5px; white-space: nowrap; text-shadow: 0 1px 16px rgba(11,31,44,0.9); }
.hero-cine__trust-row b { color: #fff; font-family: var(--font-head); font-weight: 700; }
.hdot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.45); flex: none; }
.hero-cine__verify { margin-left: 0; margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; color: #F4C45C; text-decoration: none; font-weight: 600; font-size: 13.5px; }
.hero-cine__verify:hover { color: #fff; }
@media (max-width: 860px) {
  .hero-cine { min-height: 500px; background-position: 28% 34%; }
  .hero-cine__video, .hero-cine__bg { display: block; object-position: 28% 38%; }
  .hero-cine__scrim { background: linear-gradient(0deg, rgba(11,31,44,0.92) 0%, rgba(11,31,44,0.55) 30%, rgba(11,31,44,0.26) 58%, rgba(11,31,44,0.5) 100%); }
  .hero-cine__verify { margin-left: 0; }
  .hero-cine__trust-row { gap: 10px 14px; font-size: 12.5px; flex-wrap: wrap; width: auto; white-space: normal; }
}
@media (max-width: 760px) {
  .hero-cine .eyebrow--onimg { font-size: 10.5px; letter-spacing: .1em; flex-wrap: wrap; line-height: 1.5; }
}
@media (max-width: 760px) {
  .hero-cine .eyebrow--onimg { display: flex; flex-wrap: wrap; font-size: 10px; letter-spacing: .07em; line-height: 1.55; }
}
@media (max-width: 760px) {
  .hero-cine .eyebrow--onimg { display: block; white-space: normal; font-size: 10px; letter-spacing: .06em; line-height: 1.55; }
  .hero-cine .eyebrow--onimg::before { display: none; }
}
@media (max-width: 760px) {
  .hero-cine__body, .hero-cine__trust { min-width: 0; }
  .hero-cine__content { max-width: 100%; min-width: 0; }
  .hero-cine__h1 { font-size: clamp(1.95rem, 8vw, 2.7rem); }
  .hero-cine__lede { font-size: 1rem; }
}
@media (max-width: 760px) {
  .hero-cine__body { min-width: 0; }
  .hero-cine .container { min-width: 0; }
  .hero-cine__content { max-width: 100%; min-width: 0; }
  .hero-cine__h1 { font-size: clamp(1.9rem, 7.6vw, 2.6rem); overflow-wrap: break-word; }
  .hero-cine__h1 .nowrap { white-space: nowrap; }
  .hero-cine .eyebrow--onimg { display: block; white-space: normal; font-size: 10px; letter-spacing: .05em; line-height: 1.5; }
  .hero-cine .eyebrow--onimg::before { display: none; }
  .hero-cine__lede { font-size: 1rem; }
}

/* ---------- Homepage: transparent nav over the video hero, opaque on scroll ---------- */
.home-hero .goldbar { display: none; }
.home-hero header.site { position: fixed; left: 0; right: 0; top: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.home-hero header.site.scrolled { background: rgba(250,250,247,0.88); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(26,26,26,0.05); }
.home-hero header.site, .home-hero .nav__logo,
.home-hero .nav__links > li > a, .home-hero .navitem, .home-hero .nav__phone {
  transition: color .28s ease, background-color .28s ease, filter .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}
.home-hero header.site:not(.scrolled) .nav__links > li > a,
.home-hero header.site:not(.scrolled) .nav__links > li > .navitem,
.home-hero header.site:not(.scrolled) .nav__phone { color: #fff; }
.home-hero header.site:not(.scrolled) .nav__links > li > a:hover,
.home-hero header.site:not(.scrolled) .navitem:hover,
.home-hero header.site:not(.scrolled) .nav__phone:hover { color: #F4C45C; }
.home-hero header.site:not(.scrolled) .nav__logo { filter: brightness(0) invert(1); }
.home-hero header.site:not(.scrolled) .nav__toggle { border-color: rgba(255,255,255,0.55); }
.home-hero header.site:not(.scrolled) .nav__toggle svg { stroke: #fff; }
/* hero spans to the very top behind the fixed nav; nudge content up a touch */
.home-hero .hero-cine__body { align-self: stretch; padding-top: 92px; padding-bottom: clamp(20px, 3vh, 40px); }

/* Mobile menu drawer open → force the nav to its opaque state (cream + dark items)
   regardless of scroll, so the nav + drawer read as one panel. */
.home-hero.menu-open header.site { background: rgba(250,250,247,0.98); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom-color: var(--line); box-shadow: none; }
.home-hero.menu-open header.site .nav__logo { filter: none; }
.home-hero.menu-open header.site .nav__phone,
.home-hero.menu-open header.site .nav__links > li > a,
.home-hero.menu-open header.site .navitem { color: var(--ink); }
.home-hero.menu-open header.site .nav__toggle { border-color: var(--line-2); color: var(--ink); }
.home-hero.menu-open header.site .nav__toggle svg { stroke: var(--ink); }