/* ==========================================================================
   Group 72 Risk Advisors  ·  styles.css
   Palette and type per Group72_Brand_StyleGuide.pdf, 2026 edition.
   Wheat is the ground. Navy is the ink and the two full-bleed bands.
   Gold is linework. Orange is rationed.
   Artwork rule: *_Dark on light grounds, *_Light on dark grounds.
   ========================================================================== */

/* Palette per Group 72 Brand Style Guide, 2026 edition, section 05.
   Navy #0E2445 · Tan #AC935B · Orange #DD7227 · Wheat #E9E5DC.
   The -700/-500 steps below ARE the published colors; the lighter and
   darker steps are derived from them for interface states only. */
:root {
  --navy-h: 258.4;  --navy-c: 0.068;
  --gold-h:  86.2;  --gold-c: 0.080;

  --navy-900: oklch(0.168 calc(var(--navy-c) * 0.85) var(--navy-h));
  --navy-800: oklch(0.215 calc(var(--navy-c) * 0.95) var(--navy-h));
  --navy-700: oklch(0.2627 var(--navy-c)             var(--navy-h));  /* #0E2445 Navy */
  --navy-600: oklch(0.330 var(--navy-c)              var(--navy-h));

  --gold-700: oklch(0.515 calc(var(--gold-c) * 0.95) var(--gold-h));
  --gold-500: oklch(0.6731 var(--gold-c)             var(--gold-h));  /* #AC935B Tan */
  --gold-300: oklch(0.790 calc(var(--gold-c) * 0.75) var(--gold-h));

  --wheat:      oklch(0.9225 0.0128 var(--gold-h));                    /* #E9E5DC Wheat */
  --wheat-warm: oklch(0.952 0.009  var(--gold-h));
  --paper:      oklch(0.984 0.004  var(--gold-h));

  --orange: oklch(0.6645 0.1571 50.7);                                 /* #DD7227 Orange */

  --ink:       var(--navy-700);
  --ink-soft:  oklch(0.430 calc(var(--navy-c) * 0.55) var(--navy-h));
  --ink-faint: oklch(0.620 calc(var(--navy-c) * 0.30) var(--navy-h));

  --rule:        color-mix(in oklch, var(--navy-700) 14%, transparent);
  --rule-strong: color-mix(in oklch, var(--navy-700) 22%, transparent);
  --rule-gold:   color-mix(in oklch, var(--gold-500) 42%, transparent);
  --rule-onnavy: color-mix(in oklch, var(--gold-500) 30%, transparent);

  --font: 'Poppins', ui-sans-serif, sans-serif;
  --w-light: 300; --w-reg: 400; --w-mid: 500; --w-semi: 600; --w-bold: 700;

  --type-micro:   clamp(0.688rem, 0.66rem + 0.14vw, 0.75rem);
  --type-sm:      clamp(0.813rem, 0.78rem + 0.18vw, 0.906rem);
  --type-body:    clamp(1rem, 0.955rem + 0.22vw, 1.094rem);
  --type-lead:    clamp(1.125rem, 1.02rem + 0.52vw, 1.375rem);
  --type-h3:      clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
  --type-h2:      clamp(1.75rem, 1.25rem + 2.1vw, 3rem);
  --type-display: clamp(2.5rem, 1rem + 4.4vw, 4.5rem);
  --type-mega:    clamp(4.5rem, 0.5rem + 17vw, 17rem);

  /* 0.92 put the descender of "p" in people 6.1px into the ascenders of
     "build." below it. Measured ink bounds clear at 1.05; 1.1 leaves room. */
  --lead-tight: 1.1; --lead-snug: 1.06; --lead-body: 1.62;
  /* guide 06 sets display tracking at +10. the old -0.045em collided the
     "pl" in people and the "il" in build at 600 weight. */
  --track-mega: 0.01em; --track-tight: -0.03em;
  --track-wide: 0.18em;   --track-wider: 0.34em;

  --s-2xs: 8px; --s-xs: 12px; --s-sm: 16px; --s-md: 24px;
  --s-lg: 36px; --s-xl: 56px; --s-2xl: 76px; --s-3xl: 100px;

  --gutter: clamp(20px, 5vw, 92px);
  --measure: 46ch;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-lift: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 240ms; --dur-mid: 620ms; --dur-slow: 980ms;
  --scroll-progress: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wheat); color: var(--ink);
  font-family: var(--font); font-size: var(--type-body);
  line-height: var(--lead-body); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading, body.nav-open { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
/* form controls do not inherit font-family from body. without this the
   submit button and select render in the browser UA font, not Poppins. */
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; letter-spacing: var(--track-tight); line-height: var(--lead-snug); }
p, dl, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
::selection { background: var(--gold-500); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-700); outline-offset: 3px; border-radius: 2px; }

.h2 { font-size: var(--type-h2); font-weight: var(--w-semi); letter-spacing: var(--track-mega); }


/* ── Brand lockup (real artwork, typeset fallback) ─────────────────────── */

.brand { display: inline-block; }
.brand > img { width: clamp(176px, 17vw, 212px); height: auto; }

.brand--foot > img { width: auto; height: 62px; }
.brand__fallback { display: none; gap: 2px; line-height: 1; }
.brand__fallback b {
  font-weight: var(--w-light); font-size: 1.1rem; letter-spacing: .15em;
}
.brand__fallback em {
  font-style: normal; font-weight: var(--w-semi); color: var(--gold-500);
  font-size: 1.1rem; letter-spacing: .15em; margin-left: .3em;
}
.brand__fallback i {
  font-style: normal; display: block; font-size: .563rem; font-weight: var(--w-mid);
  letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--gold-700);
}
.foot .brand__fallback b { color: var(--ink); }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: var(--s-2xs);
  padding: 15px 26px; min-height: 48px;
  border: 1px solid transparent; border-radius: 2px;
  font-family: inherit;
  font-size: var(--type-sm); font-weight: var(--w-mid); letter-spacing: .04em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover svg { transform: translateX(5px); }
.btn--navy  { background: var(--navy-700); color: var(--wheat); }
.btn--navy:hover { background: var(--navy-600); }
.btn--gold  { background: var(--gold-500); color: #fff; }
.btn--gold:hover { background: color-mix(in oklch, var(--gold-500), black 12%); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--quiet:hover { border-color: var(--ink); }
.btn--full { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2xs);
  margin-top: var(--s-xs); padding-bottom: 5px;
  border-bottom: 1px solid var(--rule-gold);
  font-size: var(--type-sm); font-weight: var(--w-mid); letter-spacing: .04em;
  color: var(--gold-700);
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.link-arrow svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--dur-fast) var(--ease-out);
}
.link-arrow:hover { color: var(--ink); border-color: var(--ink); }
.link-arrow:hover svg { transform: translateX(5px); }

/* ══ LOAD SCREEN ═══════════════════════════════════════════════════════════
   Five pillar glyphs cycle in place, then resolve into the stacked lockup. */

.intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--wheat);
  display: grid; place-items: center;
  transition: transform var(--dur-slow) var(--ease-lift);
}
.intro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 50% at 50% 44%,
    color-mix(in oklch, var(--gold-500) 16%, transparent), transparent 72%);
}
.intro__stage {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: var(--s-md);
}

.intro__ring {
  position: relative;
  width: clamp(148px, 24vw, 210px);
  aspect-ratio: 1;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.intro__glyph {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0; transform: scale(.82) rotate(-6deg);
  transition: opacity 260ms var(--ease-out), transform 380ms var(--ease-out);
}
.intro__glyph.is-on { opacity: 1; transform: none; }

.intro__label {
  min-height: 1.2em;
  font-size: var(--type-micro); font-weight: var(--w-mid);
  letter-spacing: var(--track-wider); text-transform: uppercase;
  color: var(--gold-700);
  transition: opacity 400ms var(--ease-out);
}

.intro__lockup {
  position: absolute; left: 50%; top: 50%;
  width: clamp(148px, 24vw, 210px);        /* starts exactly at the ring size */
  height: auto;
  transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none;
  transition: opacity 380ms var(--ease-out),
              width 1150ms var(--ease-in-out);
}

.intro.is-resolved .intro__ring  { opacity: 0; transform: scale(.7); }
.intro.is-resolved .intro__label { opacity: 0; }
.intro.is-resolved .intro__lockup {
  opacity: 1;
  width: min(80vw, 880px);                  /* grows to fill the screen */
}

/* typeset fallback when the artwork is not in /assets */
.intro__fallback { display: none; justify-items: center; gap: 4px; line-height: 1; text-align: center; }
.intro__fallback b  { font-weight: var(--w-light); font-size: clamp(1.9rem, 6.4vw, 3.2rem); letter-spacing: var(--track-wide); color: var(--ink); }
.intro__fallback em { font-style: normal; font-weight: var(--w-semi); font-size: clamp(1.9rem, 6.4vw, 3.2rem); letter-spacing: var(--track-wide); color: var(--gold-500); margin-left: .3em; }
.intro__fallback i  { font-style: normal; font-size: var(--type-micro); letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--gold-700); }
.intro.no-art .intro__ring,
.intro.no-art .intro__lockup { display: none; }

body.intro-done .intro { transform: translateY(-101%); }

/* ══ NAV ═══════════════════════════════════════════════════════════════════ */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s-lg);
  padding: var(--s-sm) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid) var(--ease-out),
              padding var(--dur-mid) var(--ease-out);
}
.nav.is-stuck {
  background: color-mix(in oklch, var(--wheat) 97%, transparent);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
  padding-top: var(--s-xs); padding-bottom: var(--s-xs);
}

/* Over the photographic hero the nav is transparent on a dark ground, so
   it reverses: light lockup, light links, gold CTA. Once it sticks it is
   back on Wheat and returns to the dark artwork. Artwork rule holds,
   *_Dark on light grounds, *_Light on dark. */
.brand__light { display: none; }
.nav:not(.is-stuck) .brand__dark { display: none; }
.nav:not(.is-stuck) .brand__light { display: block; }
.nav:not(.is-stuck) .nav__links a { color: color-mix(in oklch, var(--wheat) 82%, transparent); }
.nav:not(.is-stuck) .nav__links a:hover { color: var(--wheat); }
.nav:not(.is-stuck) .burger span { background: var(--wheat); }
.nav:not(.is-stuck) .btn--navy {
  background: var(--gold-500); color: #fff;
}
.nav:not(.is-stuck) .btn--navy:hover { background: color-mix(in oklch, var(--gold-500), black 12%); }

/* Menu open: the panel behind the bar is Wheat, so the nav drops its
   over-the-photo reversal whatever the scroll position. Without this the
   cream lockup, cream burger and gold CTA all sit on cream and vanish.
   Same specificity as the rules above, so it has to come after them. */
body.nav-open .nav .brand__dark { display: block; }
body.nav-open .nav .brand__light { display: none; }
body.nav-open .nav .burger span { background: var(--ink); }
body.nav-open .nav .btn--navy { background: var(--navy-700); color: var(--wheat); }
body.nav-open .nav .btn--navy:hover { background: var(--navy-600); }
.nav__links { display: flex; gap: var(--s-md); margin-left: auto; }
.nav__links a {
  position: relative; padding: 6px 0;
  font-size: var(--type-sm); color: var(--ink-soft);
  transition: color var(--dur-fast);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold-500);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.burger {
  display: none; order: -1; margin-right: var(--s-2xs);
  position: relative; width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.burger span {
  position: absolute; left: 7px; width: 30px; height: 1.5px;
  background: var(--ink);
  transition: transform .38s var(--ease-out), opacity .2s;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobilenav {
  position: fixed; inset: 0; z-index: 35;
  background: var(--wheat-warm);
  display: grid; align-content: center; gap: var(--s-md); padding: var(--gutter);
}
.mobilenav[hidden] { display: none; }
.mobilenav a { font-size: var(--type-h3); font-weight: var(--w-light); padding: 10px 0; }
.mobilenav__cta { font-weight: var(--w-semi); color: var(--gold-700); }

/* ══ HERO ══════════════════════════════════════════════════════════════════ */

.hero {
  position: relative; min-height: min(100svh, 820px);
  padding: calc(var(--s-2xl) + 34px) var(--gutter) var(--s-2xl);
  display: grid; align-items: center; gap: var(--s-xl); overflow: hidden;
}
/* Photography per guide section 08: golden-hour land, with a Navy overlay
   in the 40 to 60 band so copy stays readable. Weighted heavier on the
   left, where the headline sits, and lighter over the open right side. */
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 52%;
  transform: scale(1.06) translateY(calc(var(--scroll-progress) * 46px));
}
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    /* light pool in the lower left so the buttons sit on a settled ground */
    radial-gradient(66% 56% at 2% 102%,
      color-mix(in oklch, var(--navy-900) 30%, transparent) 0%, transparent 100%),
    linear-gradient(100deg,
      color-mix(in oklch, var(--navy-700) 52%, transparent) 0%,
      color-mix(in oklch, var(--navy-700) 44%, transparent) 46%,
      color-mix(in oklch, var(--navy-700) 26%, transparent) 100%),
    linear-gradient(to bottom,
      color-mix(in oklch, var(--navy-700) 30%, transparent) 0%,
      transparent 24%);
}
.hero__wash {
  position: absolute; inset: -12% -8% -18%; pointer-events: none;
  background:
    radial-gradient(46% 40% at 84% 18%, color-mix(in oklch, var(--gold-500) 16%, transparent), transparent 68%);
  transform: translateY(calc(var(--scroll-progress) * -80px));
}

/* hero copy reverses out of the photograph. the colours live on the base
   rules below, not here, so nothing later in the file can repaint them. */
.hero .btn--navy { background: var(--gold-500); color: #fff; }
.hero .btn--navy:hover { background: color-mix(in oklch, var(--gold-500), black 12%); }
.hero .btn--quiet { color: var(--wheat); border-color: color-mix(in oklch, var(--wheat) 42%, transparent); }
.hero .btn--quiet:hover { border-color: var(--wheat); background: color-mix(in oklch, var(--wheat) 10%, transparent); }
.hero__copy { position: relative; z-index: 1; max-width: 46ch; }
/* ══ SCORECARD BAND ════════════════════════════════════════════════════════
   Sits directly under the hero on the Wheat ground. The whole card is the
   anchor, so every hover cue fires from one target: the card lifts, a Tan
   rule draws across the top, the border warms, and a highlight sweeps the
   0-to-100 bar. */
.score { padding: var(--s-2xl) var(--gutter) var(--s-xl); }
.score__card {
  position: relative; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-xl); align-items: center;
  padding: var(--s-xl); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(14,36,69,.04);
  transition: transform var(--dur-mid) var(--ease-out),
              border-color var(--dur-mid), box-shadow var(--dur-mid);
}
.score__card::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--gold-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.score__card:hover {
  transform: translateY(-6px); border-color: var(--rule-gold);
  box-shadow: 0 2px 4px rgba(14,36,69,.05), 0 30px 60px -28px rgba(14,36,69,.36);
}
.score__card:hover::before { transform: scaleX(1); }

.score__h {
  font-size: var(--type-h2); font-weight: var(--w-semi);
  letter-spacing: var(--track-mega); color: var(--ink);
}
.score__p {
  margin-top: var(--s-xs); max-width: 60ch;
  font-size: var(--type-body); font-weight: var(--w-light);
  line-height: 1.55; color: var(--ink-soft);
}

.score__scale { display: block; margin-top: var(--s-md); max-width: 460px; }
.score__bar {
  position: relative; overflow: hidden; display: block;
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--orange) 72%, transparent),
    var(--gold-500) 60%, var(--navy-700));
}
.score__bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent,
              color-mix(in oklch, var(--paper) 78%, transparent), transparent);
  transform: translateX(-102%);
}
.score__card:hover .score__bar::after { animation: sweep .9s var(--ease-out); }
@keyframes sweep { to { transform: translateX(102%); } }

.score__ends { display: flex; justify-content: space-between; margin-top: 8px; }
.score__ends i {
  font-style: normal; font-size: var(--type-micro); font-weight: var(--w-semi);
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-faint);
}

.score__act { display: grid; justify-items: start; gap: var(--s-sm); max-width: 260px; }
.score__fine {
  font-size: var(--type-micro); font-weight: var(--w-light);
  line-height: 1.5; color: var(--ink-faint);
}

.hero__h { margin: var(--s-md) 0; display: grid; }
/* full Wheat, not a tint: at 82% this measured 2.75 over the photograph,
   under the 3.0 large-text floor. The 300 against 600 weight is what
   separates this line from the one below it. */
.hero__h .thin { font-size: var(--type-h2); font-weight: var(--w-light); line-height: 1.04; color: var(--wheat); }
.hero__h .black {
  font-size: var(--type-display); font-weight: var(--w-semi);
  line-height: var(--lead-tight); letter-spacing: var(--track-mega);
  padding-bottom: .08em; max-width: 13ch; color: var(--wheat);
}

/* Headline build. The thin line types itself, then the black words land one
   at a time. JS adds .is-typing and .is-set, so with scripting off or motion
   reduced the markup renders as plain static type. */
.hero__h .tw { position: relative; }
.hero__h .tw.is-typing::after {
  content: ''; position: absolute; top: .14em; bottom: .1em; right: -.1em;
  width: 2px; background: var(--gold-500);
  animation: caret .72s steps(1) infinite;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.hero__h .black.is-staged .w { opacity: 0; transform: translateY(.34em); }
.hero__h .black .w {
  display: inline-block;
  transition: opacity .56s var(--ease-out), transform .66s var(--ease-out);
}
.hero__h .black.is-staged .w.is-set { opacity: 1; transform: none; }
.hero__lead { max-width: var(--measure); font-size: var(--type-lead); font-weight: var(--w-light); line-height: 1.5; color: color-mix(in oklch, var(--wheat) 86%, transparent); }
.hero__acts { display: flex; flex-wrap: wrap; gap: var(--s-xs); margin-top: var(--s-lg); }
/* Tagline, per guide section 06: SemiBold, +250 tracking, all caps, Orange.
   Orange is reserved for this and for calls to action, nothing else. */


/* ══ COVERAGE ══════════════════════════════════════════════════════════════ */

.written {
  background: var(--paper); padding: var(--s-3xl) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: var(--s-xl) var(--s-2xl); align-items: start;
}
.written__head { position: sticky; top: 104px; }
.written__head .h2 { padding-bottom: .06em; }

.lines { display: grid; }
.lines li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--s-md); align-items: baseline;
  padding: var(--s-md) 0; border-top: 1px solid var(--rule);
  transition: padding-left var(--dur-mid) var(--ease-out), border-color var(--dur-mid);
}
.lines li:nth-child(even) { padding-left: var(--s-lg); }
.lines li:last-child { border-bottom: 1px solid var(--rule); }
.lines li:hover { padding-left: var(--s-xl); border-color: var(--gold-500); }
.lines i { font-style: normal; font-size: var(--type-sm); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--gold-500); }
.lines h3 { font-size: var(--type-h3); font-weight: var(--w-mid); }
.lines p { margin-top: 3px; font-size: var(--type-sm); color: var(--ink-faint); }

.written__lines { grid-column: 2; margin-top: var(--s-md); }
.written__lines h3 {
  font-size: var(--type-body); font-weight: var(--w-mid);
  color: var(--ink); margin-bottom: var(--s-sm);
}
.lines-head { font-size: var(--type-body); font-weight: var(--w-mid); color: var(--ink); margin-bottom: var(--s-sm); }
/* Lines we place. Set as a thin index rather than tagged as pills: each
   line sweeps in left to right with its gold rule, at a rate taken from
   its own character count. --t and --d come from JS. */
.script {
  margin-top: var(--s-sm);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-xs) var(--s-lg);
}
.script li { line-height: 1.5; }
.script li span {
  position: relative; display: inline-block;
  font-weight: var(--w-light);
  font-size: clamp(1.06rem, 1.55vw, 1.34rem);
  letter-spacing: .012em; line-height: 1.3; color: var(--ink);
  clip-path: inset(0 100% -34% 0);
}
.script li span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--gold-500); opacity: .58;
}
.script.is-in li span { animation: write var(--t, .5s) linear var(--d, 0s) forwards; }
@keyframes write { to { clip-path: inset(0 -3% -34% 0); } }


/* ══ OUR STANDARD ══════════════════════════════════════════════════════════ */

.posture { background: var(--wheat); padding: var(--s-3xl) var(--gutter); }
.posture__head { max-width: 62ch; }
.posture__head .h2 { padding-bottom: .06em; }
.posture__note { margin-top: var(--s-sm); font-size: var(--type-lead); font-weight: var(--w-light); color: var(--ink-soft); }

/* the published service calendar */

@media (prefers-reduced-motion: reduce) {
}


/* Five pillars per guide section 03: Luke 10 is the foundation and runs
   full width, the four it supports sit 2x2 beneath it. Separators come
   from a 1px gap over a ruled ground rather than per-card borders, so the
   grid stays correct whatever the card count or span. */
.pillars {
  margin-top: var(--s-lg);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule-strong);
  border: 1px solid var(--rule-strong);
}
.pillar {
  background: var(--wheat); padding: var(--s-md) var(--s-lg) var(--s-lg);
  transition: background var(--dur-mid) var(--ease-out);
}
.pillar:hover { background: var(--paper); }
.pillar__ico { width: 96px; height: auto; margin-bottom: var(--s-sm); }
.pillar__i {
  display: block; margin-bottom: 4px;
  font-size: var(--type-h3); font-weight: var(--w-semi);
  letter-spacing: var(--track-tight); color: var(--gold-700);
}
.pillar p { color: var(--ink-soft); font-weight: var(--w-light); }

/* ══ THE NAME · navy band ══════════════════════════════════════════════════ */

.field {
  background: var(--navy-700); color: var(--wheat);
  padding: var(--s-3xl) var(--gutter);
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-xl); align-items: center;
}
.field .h2 { padding-bottom: .06em; }
.field__body { max-width: var(--measure); display: grid; gap: var(--s-md); color: color-mix(in oklch, var(--wheat) 72%, transparent); }
.field__body .big { font-size: var(--type-lead); font-weight: var(--w-light); line-height: 1.48; color: var(--wheat); }

/* ══ JACE ══════════════════════════════════════════════════════════════════ */

.principal {
  background: var(--paper); padding: var(--s-3xl) var(--gutter);
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--s-2xl); align-items: center;
}
.principal__portrait { position: relative; margin: 0; }
/* Two photographs crossfading in one frame. Both files are pre-cropped to
   4:5, so the box is fixed by aspect-ratio and nothing reflows on swap. */
.portrait {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  border-radius: 2px; overflow: hidden;
}
.portrait img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--ease-in-out);
}
.portrait img.is-on { opacity: 1; }

/* dots sit under the frame and double as manual controls */
.portrait-dots { display: flex; gap: 2px; margin-top: var(--s-xs); }
.portrait-dots button {
  width: 24px; height: 24px; padding: 8px; border: 0; cursor: pointer;
  background: var(--rule-strong); background-clip: content-box;
  border-radius: 50%; transition: background var(--dur-fast);
}
.portrait-dots button[aria-selected="true"] { background: var(--gold-500); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  .portrait img { transition: none; }
}
.principal__copy { display: grid; gap: var(--s-sm); max-width: 54ch; }
.principal__copy .h2 { padding-bottom: .06em; }
.principal__role {
  margin-top: calc(var(--s-2xs) * -1);
  font-size: var(--type-sm); color: var(--ink-faint);
}
.principal__copy p:not(.kicker):not(.principal__role) { color: var(--ink-soft); }

/* ══ CONTACT · navy band ═══════════════════════════════════════════════════ */

.contact {
  background: var(--navy-700); color: var(--wheat);
  padding: var(--s-3xl) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-2xl); align-items: start;
}
.contact .h2 { padding-bottom: .06em; }
.contact__lead { margin-top: var(--s-sm); max-width: var(--measure); font-size: var(--type-lead); font-weight: var(--w-light); line-height: 1.5; color: color-mix(in oklch, var(--wheat) 70%, transparent); }
.form { display: grid; gap: var(--s-sm); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.ff { display: grid; gap: 6px; }
.ff > span { font-size: var(--type-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: color-mix(in oklch, var(--wheat) 52%, transparent); }
.ff input, .ff select, .ff textarea {
  width: 100%; min-height: 48px; padding: 13px 14px;
  font-family: inherit; font-size: 16px;      /* stops iOS zoom on focus */
  color: var(--wheat);
  background: color-mix(in oklch, var(--navy-800) 55%, transparent);
  border: 1px solid var(--rule-onnavy); border-radius: 2px;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.ff textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.ff select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-300) 50%),
                    linear-gradient(135deg, var(--gold-300) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.ff select option { background: var(--navy-800); color: var(--wheat); }
.ff input:focus, .ff select:focus, .ff textarea:focus {
  border-color: var(--gold-500);
  background: color-mix(in oklch, var(--navy-800) 80%, transparent); outline: none;
}
.ff.is-invalid input, .ff.is-invalid select { border-color: var(--orange); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { min-height: 1.3em; margin-top: var(--s-2xs); font-size: var(--type-sm); color: var(--gold-300); }
.form__status.is-error { color: var(--orange); }

/* ══ FOOTER ════════════════════════════════════════════════════════════════ */

.foot { background: var(--wheat); color: var(--ink); padding: var(--s-xl) var(--gutter) var(--s-md); overflow: hidden; }
/* two columns since the verse block came out */
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-lg); padding-top: var(--s-lg); border-top: 1px solid var(--rule); }
/* icon mark, with the line set beside it rather than under the lockup */
.foot__brand { display: flex; align-items: center; gap: var(--s-sm); }
/* Navy, not Orange: the guide sets the tagline in Orange, but Orange on
   Wheat measures 2.57:1 and fails at any size. Navy on Wheat is an
   approved pairing (guide 05) and measures 12.31:1. */
.foot__tag { font-size: var(--type-micro); font-weight: var(--w-semi); letter-spacing: .25em; text-transform: uppercase; line-height: 1.7; color: var(--ink); }
.foot__col { display: grid; gap: 9px; align-content: start; }
.foot__col h4 { margin-bottom: 3px; font-size: var(--type-micro); font-weight: var(--w-mid); letter-spacing: var(--track-wider); text-transform: uppercase; color: var(--ink-faint); }
.foot__col a, .foot__col p { font-size: var(--type-sm); color: var(--ink-soft); }
.foot__col a:hover { color: var(--gold-700); }
.foot__legal { margin-top: var(--s-lg); padding-top: var(--s-sm); border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2xs); }
.foot__legal p { font-size: var(--type-micro); color: var(--ink-faint); }

/* ══ REVEAL ════════════════════════════════════════════════════════════════ */

[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .78s var(--ease-out), transform .78s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-load] { opacity: 0; transform: translateY(22px); transition: opacity .82s var(--ease-out), transform .82s var(--ease-out); }
body.intro-done [data-load] { opacity: 1; transform: none; }
body.intro-done [data-load="1"] { transition-delay: 120ms; }
body.intro-done [data-load="2"] { transition-delay: 210ms; }
body.intro-done [data-load="3"] { transition-delay: 320ms; }
body.intro-done [data-load="4"] { transition-delay: 420ms; }
body.intro-done [data-load="5"] { transition-delay: 520ms; }

/* ── Studio credit ────────────────────────────────────────────────────────
   Lifted verbatim from PPM_rebuildrepo/styles.css so the mark is consistent
   across every site we ship. Do not restyle. */

.site-by { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in oklch, var(--ink) 52%, transparent); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; opacity: .85; transition: color .2s, opacity .2s; }
.site-by:hover { color: var(--ink); opacity: 1; }
.site-by img { height: 15px; width: auto; display: inline-block; }

.foot__legal { align-items: center; }
.foot__legal-text { display: grid; gap: 4px; }
.foot__legal .site-by { margin-top: 0; margin-left: auto; }
.foot .site-by { margin-top: var(--s-md); }

/* ── "Sent two by two" ─────────────────────────────────────────────────────
   One goes ahead, then four pairs follow, gold last. The pairing is the
   meaning of the section, so it is the animation rather than decoration.
   The source icon is drawn for light grounds, so the navy dots are knocked
   out to wheat on the navy band. Gold reads as-is and stays gold. */

.sent { width: clamp(150px, 16vw, 232px); }
.sent svg { width: 100%; height: auto; display: block; overflow: visible; }

.sent .d {
  fill: var(--wheat);
  opacity: .45;                       /* resting: clearly legible, not shouting */
  transform-box: fill-box; transform-origin: center;
  animation: sent 6.4s var(--ease-in-out) infinite;
}
.sent .d--gold { fill: var(--gold-500); opacity: .58; }

.sent .d--0 { animation-delay: 0s; }
.sent .d--1 { animation-delay: .5s; }
.sent .d--2 { animation-delay: 1s; }
.sent .d--3 { animation-delay: 1.5s; }
.sent .d--4 { animation-delay: 2s; }

@keyframes sent {
  0%, 100%  { opacity: .45; transform: scale(1); }
  7%        { opacity: 1;   transform: scale(1.18); }
  14%, 62%  { opacity: 1;   transform: scale(1); }
  78%       { opacity: .45; transform: scale(1); }
}
@keyframes sentGold {
  0%, 100%  { opacity: .58; transform: scale(1); }
  7%        { opacity: 1;   transform: scale(1.18); }
  14%, 62%  { opacity: 1;   transform: scale(1); }
  78%       { opacity: .58; transform: scale(1); }
}
.sent .d--gold { animation-name: sentGold; }

@media (prefers-reduced-motion: reduce) {
  .sent .d { animation: none; opacity: 1; }
  .script li span { animation: none; clip-path: none; }
}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  /* hero stacks, so the card runs the column rather than hugging right */
  .hero { grid-template-columns: 1fr; gap: var(--s-xl); align-content: center; }
  .hero__copy { max-width: 46ch; }
  .score__card { grid-template-columns: 1fr; gap: var(--s-lg); }
  .score__act { max-width: none; justify-items: stretch; }

  .written { grid-template-columns: 1fr; }
  .written__head { position: static; }
  .written__lines { grid-column: 1; }


  .field { grid-template-columns: auto minmax(0, 1fr); }
  .field__body { grid-column: 2; }

  .principal { grid-template-columns: 1fr; gap: var(--s-xl); }
  /* cap the photo, not the figure: auto margins on a grid item cancel
     stretch and collapse it to shrink-to-fit (it rendered at 50px). */
  .portrait { max-width: 520px; margin-inline: auto; }

}

/* The nav collapses to the burger well before the layout breakpoint.
   Measured: the lockup, four links and the CTA stop fitting on one row
   around 860px, where the bar grows from 80px to 102px and wraps. */
@media (max-width: 860px) {
  /* burger takes the left slot, lockup centres, CTA holds the right and
     stays put on scroll. only the link list is dropped. */
  .nav__links { display: none; }
  .burger { display: block; }
  .nav { gap: var(--s-sm); }
  .nav .brand { margin-right: auto; }
  .nav__cta { padding: 11px 16px; min-height: 44px; font-size: var(--type-micro);
              white-space: nowrap; }   /* was wrapping to "Contact / Us" */
  .nav__cta svg { display: none; }
}

/* Any narrow viewport crops this landscape frame tall, which puts the
   sunrise directly behind the headline, so the overlay carries more
   weight than on desktop. This has to cover tablets, not just phones:
   measured at 768 wide, "Insurance for" was 2.61 under the desktop
   overlay and is 4.06 under this one. */
@media (max-width: 900px) {
  .hero__bg::after {
    background:
      radial-gradient(95% 46% at 2% 102%,
        color-mix(in oklch, var(--navy-900) 30%, transparent) 0%, transparent 100%),
      linear-gradient(100deg,
        color-mix(in oklch, var(--navy-700) 66%, transparent) 0%,
        color-mix(in oklch, var(--navy-700) 62%, transparent) 46%,
        color-mix(in oklch, var(--navy-700) 56%, transparent) 100%),
      linear-gradient(to bottom,
        color-mix(in oklch, var(--navy-700) 54%, transparent) 0%,
        transparent 24%);
  }
}

@media (max-width: 700px) {

  .hero { min-height: auto; padding-top: calc(var(--s-2xl) + 36px); padding-bottom: var(--s-xl); }

  .hero__copy { max-width: none; }
  .score { padding: var(--s-xl) var(--gutter); }
  .score__card { padding: var(--s-lg) var(--s-md); }
  .score__act .btn { width: 100%; justify-content: center; }
  .hero__h .black { font-size: clamp(2.4rem, 11vw, 3.4rem); max-width: none; }

  .written, .posture, .principal, .contact { padding-block: var(--s-xl); }
  .lines li { grid-template-columns: 3rem minmax(0, 1fr); gap: var(--s-sm); position: relative; }
  .lines li:nth-child(even) { padding-left: var(--s-sm); }
  .lines li:hover { padding-left: var(--s-md); }

  /* there is no hover on touch, so the desktop indent-and-gild is driven by
     scroll position instead. the row crossing the middle of the screen lights
     up and slides, so the list reads as alive as you thumb through it. */
  .lines li::after {
    content: ''; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px;
    background: var(--gold-500); transform: scaleY(0); transform-origin: top center;
    transition: transform var(--dur-mid) var(--ease-out);
  }
  .lines li i { transition: color var(--dur-mid), transform var(--dur-mid) var(--ease-out); }
  .lines li.is-hot { padding-left: var(--s-md); border-color: var(--gold-500); }
  .lines li:nth-child(even).is-hot { padding-left: calc(var(--s-sm) + var(--s-md)); }
  .lines li.is-hot::after { transform: scaleY(1); }
  .lines li.is-hot i { color: var(--gold-700); transform: translateX(2px); }
  .lines li.is-hot h3 { color: var(--ink); }


  .pillars { grid-template-columns: 1fr; }
  .pillar__ico { width: 92px; }

  .field { grid-template-columns: 1fr; gap: var(--s-md); padding-block: var(--s-xl); }
  .field__body { grid-column: 1; }
  .sent { width: 128px; }


  .contact { grid-template-columns: 1fr; gap: var(--s-xl); }
  .form__row { grid-template-columns: 1fr; }

  /* single column of written lines, so nothing wraps mid-phrase */
  .script { grid-template-columns: 1fr; gap: 2px; }

  /* Footer on mobile: the link columns go 2-up rather than stacking, the
     icon mark comes down off 62px, and the outer padding and gaps tighten.
     Stacked at full desktop spacing this ran ~860px tall on a 375px screen. */
  .foot { padding: var(--s-xl) var(--gutter) var(--s-md); }
  .foot__grid {
    grid-template-columns: 1fr;
    gap: var(--s-md);
    padding-top: var(--s-md);
  }
  .brand--foot > img { width: auto; height: 50px; }
  .foot__brand { gap: var(--s-xs); }
  .foot__legal { flex-direction: column; margin-top: var(--s-lg); padding-top: var(--s-sm); }
  .foot__legal { flex-direction: column; align-items: flex-start; }
  .foot__legal .site-by { margin-left: 0; margin-top: var(--s-sm); }

  /* nav lockup was 176px on a 375px screen, crowding the burger */
  /* guide section 04 sets a 150px floor on the primary logo */
  .brand:not(.brand--foot) > img { width: 152px; }

  /* the two hero buttons were sizing to their labels, so they came out
     348px and 282px side by side. full width reads deliberate. */
  .hero__acts { gap: var(--s-2xs); }
  .hero__acts .btn { width: 100%; justify-content: center; }

  /* 7 cells over 2 columns leaves the last one odd-numbered, which kept a
     border-right and drew a stray rule down the middle */
  /* Timeline goes vertical on mobile: rail down the left, steps stack. */

  /* Cards centre on mobile; running text stays left so it is still readable. */
  .pillar { text-align: center; }
  .pillar__ico { margin-left: auto; margin-right: auto; }
  .sent { margin-left: auto; margin-right: auto; }
  .field { justify-items: center; text-align: center; }
  .field__body, .field__lead { text-align: left; }
}


/* ── Pillar carousel (mobile only) ─────────────────────────────────────────
   Desktop keeps the 2x2 grid. Under 700px the four cards become a snap
   carousel that auto-rotates, which suits four equal cards better than
   stacking them into a 900px column. */

.carousel-dots { display: none; }

@media (max-width: 700px) {
  /* carousel: flex, so the ruled ground behind the grid gaps must go or it
     paints as a strip between cards. */
  .pillars {
    display: flex; gap: var(--s-sm); border: 0; background: none;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .pillars::-webkit-scrollbar { display: none; }

  .pillar {
    flex: 0 0 80%; scroll-snap-align: center;
    border: 1px solid var(--rule-strong); border-radius: 2px;
    padding: var(--s-lg) var(--s-md);
    transition: border-color var(--dur-fast);
  }
  .pillars .pillar { border: 1px solid var(--rule-strong); }
  .pillar.is-active { border-color: var(--rule-gold); }

  /* cards sit off-screen horizontally, so the scroll-reveal would never
     fire for them. show them outright inside the carousel. */
  .pillars [data-reveal] { opacity: 1; transform: none; }

  .carousel-dots { display: flex; justify-content: center; gap: 2px; margin-top: var(--s-md); }
  .carousel-dots button {
    width: 24px; height: 24px; padding: 8px;   /* 24px target, 8px dot */
    border: 0; background: var(--rule-strong); background-clip: content-box;
    border-radius: 50%; cursor: pointer; transition: background var(--dur-fast);
  }
  .carousel-dots button[aria-selected="true"] { background: var(--gold-500); background-clip: content-box; }
}