/* ============================================================
   SV Partners — Components  ·  Advisory, reworked layouts
   ============================================================ */

/* ---------------- NAV ---------------- */
.nav {
  --nav-h: 70px;
  --nav-h-scrolled: 62px;
  position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent;
  background: rgba(11,14,17,0.75);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  backdrop-filter: saturate(150%) blur(8px);
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav--scrolled {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
  padding-block: 10px;
}
.nav__inner {
  display: flex; align-items: center; height: var(--nav-h); position: relative;
  transition: height .35s var(--ease), max-width .4s var(--ease), border-radius .4s var(--ease),
              padding-inline .35s var(--ease), background .3s var(--ease),
              box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.nav--scrolled .nav__inner {
  height: var(--nav-h-scrolled);
  max-width: 860px;
  border-radius: 999px;
  background: rgba(11,14,17,0.97);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border: 1px solid rgba(200,150,62,0.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 12px 40px rgba(0,0,0,0.45);
  padding-inline: 24px;
}
/* logo squeezes with the bar (transform keeps inline width/height intact) */
.logo { transition: transform .3s var(--ease); transform-origin: left center; }
.nav--scrolled .logo { transform: scale(0.9); }
/* CTA collapses to arrow icon on scroll — balances logo side */
.nav__cta { transition: font-size .3s var(--ease), padding .3s var(--ease), gap .3s var(--ease); }
.nav--scrolled .nav__cta { font-size: 0; padding: 10px 11px; gap: 0; }
.nav--scrolled .nav__cta .arr { display: block; width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .nav, .nav__inner, .logo { transition-duration: 0.01ms !important; }
}
.nav__brand { flex: 1; display: flex; align-items: center; }
.nav__links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 34px; }
.nav__link { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); position: relative; transition: color .18s var(--ease); }
.nav__link::after { content: ""; position: absolute; left: 0; bottom: -7px; height: 1px; width: 0; background: var(--accent); transition: width .25s var(--ease); }
.nav__link:hover, .nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after, .nav__link:hover::after { width: 100%; }
.nav__actions { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.nav__burger { display: none; background: none; border: 0; color: var(--ink); padding: 6px; }

/* ---- nav mega-menu (Services dropdown) ---- */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__link--trigger { display: inline-flex; align-items: center; gap: 6px; }
.nav__link--trigger .chev { transition: transform .28s var(--ease); opacity: .7; }
.nav__item:hover .nav__link--trigger .chev,
.nav__item:focus-within .nav__link--trigger .chev { transform: rotate(180deg); opacity: 1; }

.mega {
  position: absolute; top: 100%; left: -16px; transform: translateY(10px);
  width: min(720px, 92vw); padding-top: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  z-index: 90;
}
/* invisible hover bridge so the gap between trigger and panel doesn't close it */
.mega::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 22px; }
.nav__item:hover .mega,
.nav__item:focus-within .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mega__inner {
  display: grid; grid-template-columns: 0.74fr 1.26fr; gap: 30px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-md);
}
.mega__lead { display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
  padding-right: 26px; border-right: 1px solid var(--line); }
.mega__lead-txt { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mega__card { position: relative; display: block; padding: 16px 40px 16px 16px; border-radius: var(--r-md);
  border: 1px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.mega__card:hover { background: var(--gold-soft); border-color: var(--gold-line); }
.mega__n { font-family: var(--font-serif); font-style: italic; font-size: 0.82rem; color: var(--accent); }
.mega__name { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); margin-top: 4px; }
.mega__desc { display: block; font-size: 0.84rem; color: var(--ink-2); line-height: 1.5; margin-top: 5px; }
.mega__arr { position: absolute; top: 18px; right: 14px; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.mega__card:hover .mega__arr { opacity: 1; transform: none; }

/* ---- mobile drawer: services accordion ---- */
.drawer__link--exp { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-align: left; }
.drawer__chev { margin-left: auto; color: var(--accent); display: inline-flex; transition: transform .28s var(--ease); }
.drawer__link--exp.is-open .drawer__chev { transform: rotate(180deg); }
.drawer__sub { display: flex; flex-direction: column; padding: 6px 0 10px 30px; }
.drawer__sublink { display: flex; align-items: center; gap: 8px; padding: 11px 4px; font-family: var(--font-serif);
  font-size: 1.12rem; color: var(--ink-2); border-bottom: 1px solid var(--line); transition: color .18s var(--ease); }
.drawer__sublink:last-child { border-bottom: 0; }
.drawer__sublink:hover { color: var(--accent); }
.drawer__sublink--all { color: var(--accent); font-style: italic; }

.drawer { position: fixed; inset: 0 0 0 auto; width: min(420px, 88vw); z-index: 80; background: var(--bg);
  transform: translateX(100%); display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  /* visibility removes the closed drawer from the tab order (aria-hidden alone
     leaves its links focusable); the delay keeps the slide-out animation */
  visibility: hidden; transition: transform .4s var(--ease), visibility 0s linear .4s; }
.drawer--open { transform: none; visibility: visible; transition: transform .4s var(--ease); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.drawer__close { background: none; border: 0; color: var(--ink); padding: 6px; }
.drawer__links { display: flex; flex-direction: column; gap: 2px; padding-top: 18px; }
.drawer__link { display: flex; align-items: baseline; gap: 14px; padding: 16px 4px; font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.drawer__num { font-family: var(--font-serif); color: var(--accent); font-style: italic; font-size: 0.95rem; }
.drawer__scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 70; }

/* ---------------- HERO (masthead) ---------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(52px, 6.5vw, 96px) 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 76%, var(--bg-2) 100%); }
.hero::before { content: ""; position: absolute; top: -12%; right: -4%; width: 660px; height: 660px; pointer-events: none;
  background: radial-gradient(circle, rgba(200,150,62,0.16), transparent 66%);
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .5s var(--ease); will-change: transform; }
.hero::after { content: ""; position: absolute; bottom: -16%; left: -10%; width: 420px; height: 420px; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(200,150,62,0.10), transparent 68%);
  transform: translate3d(calc(var(--mx, 0px) * -0.6), calc(var(--my, 0px) * -0.6), 0); transition: transform .5s var(--ease); will-change: transform; }
.hero > .container { position: relative; z-index: 1; }
.hero__masthead { position: relative; }
.hero__h1 { font-size: var(--fs-display); margin-top: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.02; max-width: 16ch; }
.hero__h1-em { color: var(--accent); font-style: normal; font-weight: 600; }
.hero__rule { margin: clamp(28px, 4vw, 44px) 0 clamp(26px, 3vw, 36px); background: var(--line-2); }
.hero__meta { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.hero__sub { font-size: var(--fs-lead); color: var(--ink-2); max-width: 42ch; line-height: 1.5; }
.hero__aside { display: flex; flex-direction: column; gap: 24px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__fit { font-size: var(--fs-sm); color: var(--ink-2); padding-top: 20px; border-top: 1px solid var(--line); max-width: 46ch; line-height: 1.55; }
.hero__fit b { color: var(--ink); font-weight: 600; }

.hero__index { margin-top: clamp(48px, 6vw, 84px); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.hidx { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 28px 24px 30px 0; min-height: 168px; color: var(--ink); transition: background .3s var(--ease); }
.hidx:last-child { padding-right: 0; }
.hidx:hover { background: var(--surface); }
.hidx__n { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1.05rem; }
.hidx__t { font-family: var(--font-serif); font-weight: 600; font-size: 1.22rem; display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.hidx__tag, .svc-row__tag { font-family: var(--font-sans); font-style: normal; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: var(--gold-soft); border: 1px solid var(--gold-line); padding: 3px 7px; border-radius: 999px; }
.hidx__arr { color: var(--accent); transition: transform .25s var(--ease); }
.hidx:hover .hidx__arr { transform: translateX(4px); }

/* ---------------- WHAT WE DO (sticky intro + rows) ---------------- */
.svc-wrap { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(40px, 6vw, 92px); align-items: start; }
.svc-intro { position: sticky; top: 108px; }
.svc-intro h2 { font-size: var(--fs-h2); margin-top: 20px; }
.svc-intro .lead { font-size: var(--fs-lead); color: var(--ink-2); margin-top: 18px; line-height: 1.55; }
.svc-intro .link-arrow { margin-top: 28px; }
.svc-list { border-top: 1px solid var(--line-2); }
.svc-row { display: grid; grid-template-columns: 54px 1fr 26px; gap: 22px; align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line-2); color: var(--ink); transition: color .25s var(--ease); }
.svc-row__n { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1.2rem; padding-top: 4px; }
.svc-row__name { font-size: var(--fs-h3); display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; transition: color .25s var(--ease); }
.svc-row__desc { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 10px; max-width: 56ch; line-height: 1.55; }
.svc-row__arr { color: var(--muted); padding-top: 7px; transition: transform .25s var(--ease), color .25s var(--ease); }
.svc-row:hover .svc-row__name { color: var(--accent); }
.svc-row:hover .svc-row__arr { color: var(--accent); transform: translateX(4px); }

/* ---------------- WHO WE WORK WITH ---------------- */
.section--alt { background: var(--bg-2); border-block: 1px solid var(--line-2); }
.who__head { max-width: 760px; }
.who__head h2 { font-size: var(--fs-h2); margin-top: 22px; }
.who__head .lead { font-size: var(--fs-lead); color: var(--ink-2); margin-top: 22px; line-height: 1.55; }

.fit { display: grid; grid-template-columns: 1fr 1fr; margin-top: 52px; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.fit__col { padding: clamp(28px, 3vw, 40px); }
.fit__col--yes { border-right: 1px solid var(--line-2); }
.fit__col--no { background: rgba(20,21,28,0.02); }
.fit__label { display: flex; align-items: center; gap: 13px; font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h4); margin-bottom: 24px; }
.fit__badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.fit__badge--yes { background: var(--gold-soft); color: var(--accent-ink); border: 1px solid var(--gold-line); }
.fit__badge--no { background: transparent; color: var(--muted); border: 1px solid var(--line-2); }
.fit__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.fit__col li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: baseline; font-size: var(--fs-body); color: var(--ink); }
.fit__tick--yes { color: var(--accent); }
.fit__tick--no { color: var(--muted); }
.fit__col--no li { color: var(--ink-2); }

.icp-row { list-style: none; padding: 0; margin: 52px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.icp-card { padding: 28px 24px 0 0; }
.icp-card:last-child { padding-right: 0; }
.icp-card__n { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1rem; }
.icp-card__name { font-size: var(--fs-h4); margin-top: 14px; }
.icp-card__desc { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 9px; line-height: 1.55; }

/* ---------------- PROCESS (vertical timeline) ---------------- */
.process__wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 92px); align-items: start; }
.process__head { position: sticky; top: 108px; }
.process__head h2 { font-size: var(--fs-h2); margin-top: 20px; }
.process__head .lead { font-size: var(--fs-lead); color: var(--ink-2); margin-top: 18px; line-height: 1.55; }
.process__cta { margin-top: 28px; }
.timeline { list-style: none; padding: 0; margin: 0; }
.tl { display: grid; grid-template-columns: 64px 1fr; gap: 26px; padding-bottom: 46px; position: relative; }
.tl:last-child { padding-bottom: 0; }
.tl:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 62px; bottom: 0; width: 1px; background: var(--line-2); }
.tl__n { width: 62px; height: 62px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); display: grid; place-items: center; font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; color: var(--accent); position: relative; z-index: 1; }
.tl__body { padding-top: 9px; }
.tl__name { font-size: var(--fs-h3); }
.tl__desc { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 11px; line-height: 1.6; max-width: 54ch; }

/* ---------------- WHY (deep plum, 2-col) ---------------- */
.why { background: var(--ink-deep); color: var(--on-dark); position: relative; overflow: hidden; }
.why::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 40% at 90% 2%, rgba(200,150,62,0.20), transparent 60%); }
.why__top { position: relative; display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 84px); align-items: start; }
.why__statement { position: sticky; top: 108px; }
.why__h2 { color: var(--on-dark); font-size: var(--fs-h2); margin-top: 22px; max-width: 17ch; }
.why__principles { display: flex; flex-direction: column; border-top: 1px solid var(--on-dark-line-2); }
.why__card { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 30px 0; border-bottom: 1px solid var(--on-dark-line); }
.why__card-n { font-family: var(--font-serif); font-style: italic; color: var(--gold); font-size: 1.2rem; }
.why__t { font-family: var(--font-serif); color: var(--on-dark); font-size: var(--fs-h4); font-weight: 600; }
.why__d { color: var(--on-dark-2); font-size: var(--fs-sm); margin-top: 11px; line-height: 1.6; }
.why__outcomes { position: relative; margin-top: 72px; padding-top: 46px; border-top: 1px solid var(--on-dark-line); }
.why__outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.outcome { display: flex; gap: 14px; align-items: flex-start; }
.outcome__ico { flex: none; color: var(--gold); margin-top: 2px; }
.outcome b { display: block; font-family: var(--font-serif); color: var(--on-dark); font-size: 1.1rem; font-weight: 600; }
.outcome span { display: block; color: var(--on-dark-2); font-size: var(--fs-sm); margin-top: 5px; line-height: 1.5; }
.why__note { display: flex; align-items: baseline; gap: 14px; margin-top: 48px; color: var(--on-dark-2); font-size: var(--fs-sm); max-width: 76ch; font-style: italic; font-family: var(--font-serif); }
.why__note-tag { flex: none; font-family: var(--font-sans); font-style: normal; font-size: 0.64rem; letter-spacing: 0.18em; color: var(--gold); border: 1px solid var(--on-dark-line-2); padding: 4px 9px; border-radius: var(--r-xs); }

/* ---------------- FINAL CTA ---------------- */
.final { background: var(--bg-2); border-top: 1px solid var(--line-2); }
.final__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.final__inner .kicker { justify-content: center; }
.final__h2 { font-size: var(--fs-h2); margin-top: 24px; max-width: 16ch; margin-inline: auto; }
.final__p { color: var(--ink-2); font-size: var(--fs-lead); margin-top: 24px; max-width: 58ch; margin-inline: auto; line-height: 1.6; }
.final__cta { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; margin-top: 40px; }
.final__mail { color: var(--ink); font-size: var(--fs-sm); border-bottom: 1px solid var(--line-2); padding-bottom: 3px; }
.final__mail:hover { border-bottom-color: var(--accent); color: var(--accent); }

/* ---------------- FOOTER ---------------- */
.footer { background: var(--ink-deep); color: var(--on-dark-2); padding-top: 80px; }
.footer__inner { display: grid; grid-template-columns: 1.3fr 1.7fr; gap: 56px; padding-bottom: 52px; }
.footer__logo { display: inline-flex; align-items: center; gap: 11px; color: var(--on-dark); font-family: var(--font-serif); font-weight: 600; font-size: 1.18rem; }
.footer__tag { margin-top: 20px; max-width: 34ch; font-size: var(--fs-sm); color: var(--on-dark-2); line-height: 1.55; }
.footer__li { display: inline-flex; align-items: center; gap: 9px; margin-top: 26px; color: var(--on-dark-2); font-size: var(--fs-sm); transition: color .2s var(--ease); }
.footer__li:hover { color: var(--gold); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.footer__col { display: flex; flex-direction: column; gap: 13px; }
.footer__h { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 5px; }
.footer__link { font-size: var(--fs-sm); color: var(--on-dark-2); transition: color .2s var(--ease); }
.footer__link:hover { color: var(--on-dark); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-block: 28px; border-top: 1px solid var(--on-dark-line); font-size: 0.82rem; color: #7E7790; }

/* ============================================================ CHILD PAGES */
.page-hero { position: relative; overflow: hidden; padding-block: clamp(44px, 6vw, 80px) clamp(40px, 5vw, 60px);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); border-bottom: 1px solid var(--line-2); }
.page-hero::before { content: ""; position: absolute; top: -30%; right: -3%; width: 520px; height: 520px; pointer-events: none; background: radial-gradient(circle, rgba(200,150,62,0.11), transparent 66%); }
.crumbs { position: relative; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 22px; display: flex; gap: 10px; align-items: center; }
.crumbs a { color: var(--ink-2); } .crumbs a:hover { color: var(--accent); }
.crumbs span { color: var(--line-2); }
.page-title { position: relative; font-family: var(--font-serif); font-size: 3.1rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.04; max-width: 18ch; }
.page-title em { color: var(--accent); font-style: italic; }
.page-sub { position: relative; font-size: var(--fs-lead); color: var(--ink-2); margin-top: 22px; max-width: 56ch; line-height: 1.55; }

/* Services detail */
.sdetail__row { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(36px, 5vw, 84px); padding-block: clamp(48px, 6vw, 82px); border-top: 1px solid var(--line-2); align-items: start; }
.sdetail__row:first-child { border-top: 0; }
.sdetail__aside { position: sticky; top: 108px; }
.sdetail__num { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1.5rem; }
.sdetail__name { font-size: var(--fs-h2); margin-top: 12px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.phase-time { display: inline-block; margin-top: 16px; font-family: var(--font-sans); font-size: 0.78rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-2); padding: 5px 12px; border-radius: 999px; }

/* Process phases (5-up, detailed) */
.phase { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(36px, 5vw, 84px); padding-block: clamp(48px, 6vw, 82px); border-top: 1px solid var(--line-2); align-items: start; }
.phase:first-child { border-top: 0; padding-top: 0; }
.phase__aside { position: sticky; top: 108px; }
.phase__n { font-family: var(--font-serif); font-style: italic; color: var(--gold); font-size: 3.4rem; line-height: 1; display: block; }
.phase__label { display: inline-block; margin-top: 14px; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.phase__name { font-size: var(--fs-h2); margin-top: 10px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
.role { display: flex; flex-direction: column; gap: 6px; }
.role__k { font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.role__v { font-size: var(--fs-sm); color: var(--ink); line-height: 1.45; }

/* engagement models */
.models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; margin-top: 52px; }
.model { background: var(--surface); padding: clamp(26px, 3vw, 36px); transition: background .35s var(--ease); }
.model:hover { background: var(--bg); }
.model__n { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1.1rem; }
.model__t { font-size: var(--fs-h4); margin-top: 14px; }
.model__d { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 11px; line-height: 1.58; }

/* timeline expectations */
.tl-expect { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 72px); margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line-2); align-items: start; }
.tl-expect__head h3 { font-size: var(--fs-h3); }
.tl-expect__head p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 14px; line-height: 1.6; max-width: 44ch; }
.tl-expect__list { list-style: none; padding: 0; margin: 0; }
.tl-expect__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); font-size: var(--fs-body); }
.tl-expect__list li:first-child { border-top: 0; padding-top: 0; }
.tl-expect__v { font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--accent); white-space: nowrap; }
.sdetail__lead { font-size: var(--fs-lead); color: var(--ink); margin-bottom: 4px; line-height: 1.45; font-family: var(--font-serif); }
.sdetail__p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 16px; line-height: 1.62; max-width: 60ch; }
.sdetail__h4 { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 30px 0 16px; }
.sdetail__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.sdetail__list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: var(--fs-body); color: var(--ink); align-items: baseline; }
.sdetail__list .tick { color: var(--accent); font-weight: 700; }
.sdetail__out { margin-top: 28px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line-2); border-left: 3px solid var(--gold); border-radius: var(--r-sm); }
.sdetail__out b { font-family: var(--font-serif); }
.sdetail__out span { display: block; color: var(--ink-2); font-size: var(--fs-sm); margin-top: 6px; }

/* Pre-meeting brief feature */
.brief { margin-top: 32px; padding: clamp(24px, 3vw, 34px); background: var(--ink-deep); color: var(--on-dark); border-radius: var(--r-md); position: relative; overflow: hidden; }
.brief::before { content: ""; position: absolute; top: -40%; right: -6%; width: 320px; height: 320px; pointer-events: none; background: radial-gradient(circle, rgba(200,150,62,0.26), transparent 66%); }
.brief__tag { position: relative; display: inline-block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--on-dark-line-2); padding: 5px 11px; border-radius: 999px; }
.brief__title { position: relative; color: var(--on-dark); font-size: 1.6rem; margin-top: 18px; }
.brief__text { position: relative; color: var(--on-dark-2); font-size: var(--fs-sm); margin-top: 14px; line-height: 1.62; max-width: 60ch; }

/* who-it-is-for / what-you-get cards */
.sdetail__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.scard { padding: 24px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.scard:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.scard--gold { border-left: 3px solid var(--gold); }
.scard__k { display: block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.scard p { color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.58; }

/* growth-stage segments */
.seg-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 52px; border-top: 1px solid var(--line-2); }
.seg { padding: 30px 24px 0 0; }
.seg:last-child { padding-right: 0; }
.seg__n { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1.05rem; }
.seg__t { font-size: var(--fs-h4); margin-top: 14px; }
.seg__d { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 10px; line-height: 1.56; }

/* problem list (about) */
.prob-list { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.prob { display: grid; grid-template-columns: 42px 1fr; gap: 18px; align-items: start; padding: 26px 0; border-top: 1px solid var(--line-2); }
.prob__n { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1.15rem; }
.prob p { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.55; }
.prob-close { margin-top: 44px; font-family: var(--font-serif); font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.4; max-width: 40ch; }
.prob-close strong { color: var(--ink); font-weight: 600; }

/* what sets us apart */
.apart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; margin-top: 52px; }
.apart { background: var(--bg-2); padding: clamp(28px, 3vw, 38px); transition: background .35s var(--ease); }
.apart:hover { background: var(--surface); }
.apart__ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-soft); border: 1px solid var(--gold-line); color: var(--accent-ink); margin-bottom: 18px; transition: transform .35s var(--ease); }
.apart:hover .apart__ico { transform: rotate(-8deg) scale(1.08); }
.apart h3 { font-size: var(--fs-h4); }
.apart p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 11px; line-height: 1.58; }

/* contrarian callout */
.contrast { margin-top: 36px; padding: clamp(32px, 4vw, 52px); background: var(--ink-deep); color: var(--on-dark); border-radius: var(--r-md); position: relative; overflow: hidden; }
.contrast::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 92% 0%, rgba(200,150,62,0.34), transparent 62%); }
.contrast__tag { position: relative; display: inline-block; font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.contrast__lead { position: relative; font-family: var(--font-serif); font-size: clamp(1.4rem, 2.1vw, 1.95rem); line-height: 1.32; max-width: 30ch; color: var(--on-dark); }
.contrast__text { position: relative; color: var(--on-dark-2); font-size: var(--fs-body); margin-top: 20px; line-height: 1.64; max-width: 68ch; }
.contrast__text strong { color: var(--on-dark); }

/* About */
.about-lede { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.34; max-width: 22ch; font-weight: 500; }
.about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(36px, 5vw, 84px); align-items: start; }
.about-body p { color: var(--ink-2); font-size: var(--fs-body); margin-top: 18px; line-height: 1.66; max-width: 62ch; }
.about-body p:first-child { margin-top: 0; }
.about-body p strong { color: var(--ink); font-weight: 600; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; border-top: 1px solid var(--line-2); }
.value { padding: 30px 26px 0 0; border-right: 1px solid var(--line-2); }
.value:last-child { border-right: 0; padding-right: 0; }
.value__n { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 1.05rem; }
.value h3 { font-size: var(--fs-h4); margin-top: 14px; }
.value p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 10px; line-height: 1.58; }

/* Contact */
.contact-wrap { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.form { display: flex; flex-direction: column; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: var(--fs-sm); font-weight: 600; }
.field input, .field select, .field textarea { font: inherit; font-size: var(--fs-body); padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--gold-soft); }
.field textarea { min-height: 140px; resize: vertical; }
.form__submit { align-self: flex-start; margin-top: 4px; }
.form__note { font-size: 0.82rem; color: var(--muted); }
.form__success { padding: 22px 24px; background: var(--surface); border: 1px solid var(--gold-line); border-left: 3px solid var(--gold); border-radius: var(--r-sm); }
.form__success b { font-family: var(--font-serif); font-size: 1.15rem; }
.form__success p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 8px; }
.form__success-ico { display: block; margin-bottom: 14px; color: var(--accent); }
.form__recap { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.form__recap span { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.form__recap em { font-style: normal; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.form__error { padding: 12px 16px; background: rgba(246,70,93,0.08); border: 1px solid rgba(246,70,93,0.3); border-radius: var(--r-sm); margin-bottom: 16px; font-size: var(--fs-sm); color: #f6465d; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field__opt { font-weight: 400; color: var(--muted); font-size: 0.8em; }
.prefill-note { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface); border: 1px solid var(--gold-line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 20px; }
/* multi-step form rail */
.mstep { display: flex; flex-direction: column; gap: 28px; }
.mstep__rail { display: flex; align-items: flex-start; gap: 0; position: relative; margin-bottom: 8px; }
.mstep__track { position: absolute; top: 15px; left: 15px; right: 15px; height: 2px; background: var(--line-2); z-index: 0; }
.mstep__track span { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease); }
.mstep__node { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; position: relative; z-index: 1; }
.mstep__dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; background: var(--bg); border: 2px solid var(--line-2); color: var(--muted); transition: background .3s, border-color .3s, color .3s; }
.mstep__node.is-active .mstep__dot { background: var(--accent); border-color: var(--accent); color: #0b0e11; }
.mstep__node.is-done .mstep__dot { background: var(--accent); border-color: var(--accent); color: #0b0e11; }
.mstep__label { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mstep__label b { font-size: 0.72rem; font-weight: 700; color: var(--ink-2); }
.mstep__label em { font-style: normal; font-size: 0.65rem; color: var(--muted); }
.mstep__node.is-active .mstep__label b { color: var(--accent); }
.mstep__pane { display: flex; flex-direction: column; gap: 16px; }
.mstep__h { font-family: var(--font-serif); font-size: var(--fs-h4); margin-bottom: 4px; }
.mstep__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
/* chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { padding: 9px 16px; border: 1px solid var(--line-2); border-radius: 99px; background: var(--surface); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.is-on { border-color: var(--accent); background: var(--gold-soft); color: var(--accent); }
@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
  .mstep__label em { display: none; }
}
.contact-aside { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: clamp(26px, 3vw, 36px); }
.contact-aside h3 { font-family: var(--font-serif); font-size: var(--fs-h4); }
.contact-aside > p { color: var(--ink-2); font-size: var(--fs-sm); margin-top: 12px; line-height: 1.55; }
.cdetail { display: flex; flex-direction: column; gap: 4px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.cdetail__k { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.cdetail__v { font-size: var(--fs-body); color: var(--ink); }
.cdetail__v a:hover { color: var(--accent); }

/* shared inner section heading */
.inner-head { max-width: 720px; margin-bottom: 8px; }
.inner-head h2 { font-size: var(--fs-h2); margin-top: 18px; }
.inner-head .lead { font-size: var(--fs-lead); color: var(--ink-2); margin-top: 18px; line-height: 1.55; }

/* ============================================================ SIGNAL / CHART */
.signal { background: var(--bg); }
.signal__wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.signal__intro h2 { font-size: var(--fs-h2); margin-top: 18px; max-width: 16ch; }
.signal__intro .lead { font-size: var(--fs-lead); color: var(--ink-2); margin-top: 18px; line-height: 1.55; max-width: 46ch; }
.signal__legend { display: flex; gap: 24px; margin-top: 28px; flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--ink-2); }
.lg::before { content: ""; width: 20px; height: 3px; border-radius: 2px; }
.lg--pipe::before { background: var(--gold); }
.lg--act::before { background: var(--muted); background-image: repeating-linear-gradient(90deg, var(--muted) 0 2px, transparent 2px 5px); }
.signal__card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 22px 24px 12px; position: relative; }
.signal__card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.signal__card-k { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.18em; color: var(--muted); }
.signal__card-live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.signal__card-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: livePulse 2.2s var(--ease) infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(200,150,62,0.5); } 70% { box-shadow: 0 0 0 7px rgba(200,150,62,0); } 100% { box-shadow: 0 0 0 0 rgba(200,150,62,0); } }
.signal__card-note { margin: 6px 2px 10px; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.02em; color: var(--muted); }

.chart { width: 100%; height: auto; display: block; }
.chart .ch-grid line { stroke: var(--line); stroke-width: 1; }
.chart .ch-axis { stroke: var(--line-2); }
.ch-activity { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .85; }
.ch-draw { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ch-area { opacity: 1; }
.ch-lbl { fill: var(--muted); font-family: var(--font-sans); font-size: 12px; }
.ch-lbl--end { text-anchor: end; }
.ch-dot { fill: var(--gold); stroke: var(--surface); stroke-width: 2; }
.ch-pulse { fill: var(--gold); opacity: .4; animation: chPulse 2.4s var(--ease) infinite; }
@keyframes chPulse { 0% { r: 5; opacity: .45; } 70% { r: 17; opacity: 0; } 100% { r: 17; opacity: 0; } }

/* draw animation: base = fully visible; armed hides; go draws */
.chart.ch-armed .ch-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.chart.ch-armed.ch-go .ch-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--ease) .15s; }
.chart.ch-armed .ch-area, .chart.ch-armed .ch-end, .chart.ch-armed .ch-lbl, .chart.ch-armed .ch-activity { opacity: 0; }
.chart.ch-armed.ch-go .ch-area { opacity: 1; transition: opacity 1s var(--ease) .7s; }
.chart.ch-armed.ch-go .ch-activity { opacity: .85; transition: opacity 1s var(--ease) .35s; }
.chart.ch-armed.ch-go .ch-end { opacity: 1; transition: opacity .5s var(--ease) 1.25s; }
.chart.ch-armed.ch-go .ch-lbl { opacity: 1; transition: opacity .6s var(--ease) .9s; }
@media (prefers-reduced-motion: reduce) { .ch-pulse, .signal__card-live i { animation: none; } }
.ch-ylabel { font-size: 10px; }
.ch-annot { fill: var(--gold) !important; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; }
.ch-metrics { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 10px; padding-bottom: 12px; }
.ch-met { flex: 1; padding-right: 10px; }
.ch-met + .ch-met { border-left: 1px solid var(--line); padding-left: 10px; }
.ch-met-v { display: block; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; }
.ch-met-v--gold { color: var(--gold); }
.ch-met-l { display: block; font-family: var(--font-sans); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 3px; }
.svc-chart { width: 100%; height: auto; display: block; }
.svc-chart-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 28px 24px 18px; }

/* ============================================================ RESPONSIVE */
@media (max-width: 1200px) { :root { --fs-display: 3.4rem; --fs-h2: 2.35rem; } }
@media (max-width: 1024px) {
  :root { --fs-display: 3.5rem; }
  .hero__meta { grid-template-columns: 1fr; gap: 28px; }
  .svc-wrap, .process__wrap, .why__top, .about-grid, .contact-wrap, .signal__wrap { grid-template-columns: 1fr; }
  .svc-intro, .process__head, .why__statement, .sdetail__aside, .phase__aside { position: static; }
  .phase { grid-template-columns: 1fr; }
  .models { grid-template-columns: 1fr; }
  .tl-expect { grid-template-columns: 1fr; }
  .phase__n { font-size: 2.8rem; }
  .why__outcomes-grid { grid-template-columns: 1fr 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: 2.7rem; }
  .sdetail__cards { grid-template-columns: 1fr; }
  .seg-grid { grid-template-columns: 1fr 1fr; }
  .apart-grid { grid-template-columns: 1fr; }
  .prob-list { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .hero__index { grid-template-columns: 1fr 1fr; }
  .hidx:nth-child(2) { padding-right: 0; }
  .icp-row { grid-template-columns: 1fr 1fr; }
  .seg-grid { grid-template-columns: 1fr 1fr; }
  .values { grid-template-columns: 1fr; gap: 0; }
  .value { border-right: 0; border-bottom: 1px solid var(--line-2); padding: 26px 0; }
  .sdetail__row { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  :root { --section-y: 88px; --fs-display: 2.5rem; --fs-h2: 1.95rem; }
  .hero__h1 { max-width: none; }
  .hero__index, .icp-row { grid-template-columns: 1fr; }

  .seg-grid { grid-template-columns: 1fr; }
  .hidx { min-height: 0; }
  .fit { grid-template-columns: 1fr; }
  .fit__col--yes { border-right: 0; border-bottom: 1px solid var(--line-2); }
  .form__row { grid-template-columns: 1fr; }
  .why__outcomes-grid, .footer__inner, .footer__cols { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  .page-title { font-size: 2.2rem; }
}

/* ============================================================ INTERACTIVE FX
   Custom cursor · scroll progress · kinetic headline · magnetic
   ============================================================ */

/* ---- scroll-progress hairline (top of viewport) ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  background: linear-gradient(90deg, var(--violet), var(--gold-bright));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
  will-change: transform;
}

/* ---- trailing cursor accent — rides ALONGSIDE the native cursor.
   The native cursor is never hidden, so the pointer is always visible. ---- */
.cursor-dot { display: none; } /* native cursor serves as the dot */
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none;
  border-radius: 50%; opacity: 0;
  width: 34px; height: 34px; border: 1.5px solid rgba(200,150,62,0.55);
  transition: opacity .3s var(--ease), width .25s var(--ease), height .25s var(--ease),
              border-color .25s var(--ease), background .25s var(--ease);
  will-change: transform;
}
.has-cursor.cursor-ready .cursor-ring { opacity: 1; }
.has-cursor.cursor-out .cursor-ring { opacity: 0; }

/* hover an interactive target → ring expands + tints */
.has-cursor.cursor-hover .cursor-ring {
  width: 56px; height: 56px; border-color: rgba(200,150,62,0.9); background: rgba(200,150,62,0.07);
}
/* press feedback */
.has-cursor.cursor-down .cursor-ring { width: 26px; height: 26px; }

/* ---- kinetic headline: per-word mask reveal ---- */
.hero__h1 { transition: transform .4s var(--ease); will-change: transform; }
.hero__h1 .kw {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.hero__h1 .kw__i {
  display: inline-block; transform: translateY(116%);
  transition: transform .85s cubic-bezier(0.16, 0.84, 0.32, 1);
  will-change: transform;
}
.hero__h1.kin-in .kw__i { transform: translateY(0); }

/* ---- magnetic buttons return smoothly when released ---- */
.btn--lg, .nav__cta, .hero__cta .btn { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .hero__h1 .kw__i { transform: none !important; transition: none !important; }
  .hero::before, .hero::after { transition: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ============================================================ HERO — ULTRA
   Animated aurora background · grid · grain · scroll parallax · impact
   ============================================================ */
.hero { padding-block: clamp(72px, 9vw, 150px) clamp(40px, 5vw, 80px); }
.hero__h1 {
  font-size: clamp(2.7rem, 6.6vw, 5.4rem); line-height: 0.98; letter-spacing: -0.03em;
  max-width: 18ch;
}

/* layered animated background (sits behind .container content) */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  transform: translate3d(0, var(--hero-sy, 0px), 0); }
.aurora { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.6; will-change: transform; }
.aurora--a { width: 540px; height: 540px; top: -16%; left: -8%;
  background: radial-gradient(circle, rgba(200,150,62,0.38), transparent 70%);
  animation: aurora-a 26s var(--ease) infinite; }
.aurora--b { width: 600px; height: 600px; top: -22%; right: -10%;
  background: radial-gradient(circle, rgba(168,120,48,0.32), transparent 70%);
  animation: aurora-b 30s var(--ease) infinite; }
.aurora--c { width: 520px; height: 520px; bottom: -28%; left: 32%;
  background: radial-gradient(circle, rgba(230,180,107,0.28), transparent 72%);
  animation: aurora-c 34s var(--ease) infinite; }

@keyframes aurora-a {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(90px, 50px) scale(1.18); }
}
@keyframes aurora-b {
  0%,100% { transform: translate(0,0) scale(1.05); }
  50%     { transform: translate(-70px, 60px) scale(0.9); }
}
@keyframes aurora-c {
  0%,100% { transform: translate(0,0) scale(0.95); }
  50%     { transform: translate(60px, -50px) scale(1.2); }
}

/* faint structural grid, masked to fade at the edges */
.hero__grid { position: absolute; inset: 0; opacity: 0.55;
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(ellipse 78% 64% at 48% 28%, #000 32%, transparent 76%);
  mask-image: radial-gradient(ellipse 78% 64% at 48% 28%, #000 32%, transparent 76%); }

/* premium grain texture */
.hero__noise { position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* hero content scales/fades on scroll (set by fx.js) */
.hero__masthead { transform: translate3d(0, calc(var(--hero-sy, 0px) * -0.4), 0); }

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none !important; }
  .hero__bg, .hero__masthead { transform: none !important; }
}

/* ============================================================ INNER-PAGE HERO — ANIMATED
   Aurora background + kinetic title, applied to every non-home page hero
   ============================================================ */
.page-hero--anim { padding-block: clamp(64px, 8vw, 124px) clamp(44px, 5vw, 72px); }
.page-hero--anim > .container { position: relative; z-index: 1; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.page-hero__bg .aurora { opacity: 0.5; filter: blur(78px); }
.page-hero__bg .aurora--a { width: 460px; height: 460px; top: -28%; left: -6%; }
.page-hero__bg .aurora--b { width: 520px; height: 520px; top: -34%; right: -8%; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* kinetic per-word reveal on inner page titles (mirrors .hero__h1) */
.page-title--kin .kw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.page-title--kin .kw__i { display: inline-block; transform: translateY(118%); transition: transform .8s cubic-bezier(0.16, 0.84, 0.32, 1); will-change: transform; }
.page-title--kin.kin-in .kw__i { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .page-title--kin .kw__i { transform: none !important; transition: none !important; }
}

/* ============================================================ SERVICE DETAIL (child pages) */
.sd-context { display: grid; grid-template-columns: 0.4fr 1.6fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.sd-context__aside { position: sticky; top: 112px; }
.sd-context__p { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.66; max-width: 64ch; }
.sd-context__p + .sd-context__p { margin-top: 20px; }
.sd-context__p--lead { font-family: var(--font-serif); font-size: var(--fs-lead); color: var(--ink); line-height: 1.5; letter-spacing: -0.01em; }

.appr-grid { display: flex; flex-direction: column; margin-top: 44px; border-top: 1px solid var(--line-2); }
.appr-step { display: grid; grid-template-columns: 84px 1fr; gap: clamp(18px, 3vw, 44px); padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.appr-step__n { font-family: var(--font-serif); font-style: italic; font-size: 1.4rem; color: var(--accent); }
.appr-step__t { font-size: var(--fs-lead); color: var(--ink); line-height: 1.5; max-width: 60ch; font-weight: 400; }

.sd-eng__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sd-out { margin-top: 18px; padding: clamp(24px, 3vw, 32px); background: var(--ink-deep); color: var(--on-dark); border-radius: var(--r-md); position: relative; overflow: hidden; }
.sd-out::before { content: ""; position: absolute; top: -40%; right: -6%; width: 320px; height: 320px; pointer-events: none; background: radial-gradient(circle, rgba(200,150,62,0.22), transparent 66%); }
.sd-out .scard__k { color: var(--gold-bright); position: relative; }
.sd-out__list { position: relative; list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.sd-out__list li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: baseline; color: var(--on-dark); font-size: var(--fs-sm); line-height: 1.5; }
.sd-out__list .tick { color: var(--gold-bright); }

.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 44px; }
.related-card { position: relative; display: block; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--line-2); }
.related-card__k { display: block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.related-card__t { font-size: var(--fs-h3); margin-top: 12px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.related-card__arr { position: absolute; top: 30px; right: 28px; color: var(--accent); transition: transform .25s var(--ease); }
.related-card:hover .related-card__arr { transform: translateX(4px); }

/* ---- services overview cards (services.html) ---- */
.svcov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.svcov-card {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 38px); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  overflow: hidden;
}
.svcov-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2, #E6B46B));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.svcov-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, var(--shadow-sm)); border-color: var(--line-2); }
.svcov-card:hover::before { transform: scaleX(1); }
.svcov-card__top { display: flex; align-items: center; justify-content: space-between; }
.svcov-card__n { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--accent); }
.svcov-card__name { font-size: var(--fs-h3); margin-top: 14px; letter-spacing: -0.01em; }
.svcov-card__label { display: block; font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-top: 8px; }
.svcov-card__teaser { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.62; margin-top: 16px; }
.svcov-card__list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 11px; }
.svcov-card__list li { display: grid; grid-template-columns: 20px 1fr; gap: 11px; align-items: baseline; color: var(--ink); font-size: var(--fs-sm); line-height: 1.5; }
.svcov-card__list .tick { color: var(--accent); }
.svcov-card__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 24px; font-weight: 600; font-size: var(--fs-sm); color: var(--accent); }
.svcov-card__cta svg { transition: transform .25s var(--ease); }
.svcov-card:hover .svcov-card__cta svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .sd-context { grid-template-columns: 1fr; }
  .sd-context__aside { position: static; }
  .sd-out__list { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 860px) {
  .sd-eng__cards, .related-grid, .svcov-grid { grid-template-columns: 1fr; }
  .appr-step { grid-template-columns: 56px 1fr; }
  .appr-step__t { font-size: var(--fs-body); }
}