/* ==========================================================================
   SP Group of Companies · spgroupcompanies.com
   One stylesheet. Tokens and theme classes follow BRAND-SYSTEMS §2 and §3.
   ========================================================================== */

/* ---------- Fonts (self-hosted, @fontsource 5.3.0) ---------- */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/instrument-serif-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url("/assets/fonts/instrument-serif-latin-ext-400-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/assets/fonts/geist-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Metric-matched fallbacks (BRAND-SYSTEMS §2.4, §3.6): no layout shift on swap */
@font-face{font-family:"Instrument Serif Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Liberation Serif"),local("Tinos");size-adjust:83.31%;ascent-override:118.83%;descent-override:37.21%;line-gap-override:0%}
@font-face{font-family:"Inter Tight Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("Arimo");size-adjust:96.18%;ascent-override:100.72%;descent-override:25.08%;line-gap-override:0%}
@font-face{font-family:"Geist Mono Fallback";src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono"),local("Cousine");size-adjust:99.98%;ascent-override:100.52%;descent-override:29.5%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  /* SP Group raw palette (§3.2) */
  --sp-midnight:#0A1424; --sp-navy:#0E1D33; --sp-navy-2:#142742; --sp-royal:#1F3A63;
  --sp-gold:#DBB963; --sp-gold-300:#E8CF8A; --sp-gold-600:#C9A54A; --sp-gold-ink:#7F611A;
  --sp-ivory:#F7F3EA; --sp-card:#FFFDF8; --sp-sand:#EFE8D9;
  --sp-slate:#5B6372; --sp-hairline:#E2D9C6; --sp-stone:#857D6B;
  --sp-ivory-text:#F3EEE3; --sp-fog:#A9B1BF; --sp-line-dark:#22324B; --sp-steel:#62728C;
  --sp-gold-hair:rgb(219 185 99 / .24);
  --sp-gold-hair-strong:rgb(219 185 99 / .6);
  --sp-ok:#1E7A4C; --sp-warn:#9A5B00; --sp-err:#B3261E; --sp-info:#1F5FA8;
  --sp-ok-d:#5CC48D; --sp-warn-d:#F0B44C; --sp-err-d:#F2726A; --sp-info-d:#7FB0F0;

  /* Type (§3.6) */
  --font-display:"Instrument Serif","Instrument Serif Fallback",Georgia,serif;
  --font-text:"Inter Tight","Inter Tight Fallback",Arial,system-ui,sans-serif;
  --font-mono:"Geist Mono","Geist Mono Fallback","Courier New",monospace;
  --fs-hero:   clamp(2.75rem, 1.6667rem + 4.8148vw, 6rem);
  --fs-h2:     clamp(2.125rem, 1.5833rem + 2.4074vw, 3.75rem);
  --fs-h3:     clamp(1.625rem, 1.4583rem + 0.7407vw, 2.125rem);
  --fs-quote:  clamp(1.75rem, 1.3333rem + 1.8519vw, 3rem);
  --fs-stat:   clamp(2.5rem, 2rem + 2.2222vw, 4rem);
  --fs-h4:     clamp(1.1875rem, 1.125rem + 0.2778vw, 1.375rem);
  --fs-lead:   clamp(1.125rem, 1.0625rem + 0.2778vw, 1.3125rem);
  --fs-body:   clamp(1rem, 0.9792rem + 0.0926vw, 1.0625rem);
  --fs-small:  clamp(0.875rem, 0.8542rem + 0.0926vw, 0.9375rem);
  --fs-eyebrow:clamp(0.75rem, 0.7292rem + 0.0926vw, 0.8125rem);

  /* Space and layout (§2.2, §3.7) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(1rem, 0.5rem + 2.2222vw, 2.5rem);
  --col-gap:clamp(16px, 2vw, 24px);
  --container:1200px; --container-narrow:760px; --container-wide:1360px;
  --section-y:clamp(4.5rem, 3rem + 6.6667vw, 9rem);
  --header-h:64px;
  --radius-1:2px; --radius-2:4px;
  --shadow:0 1px 2px rgb(14 29 51 / .06), 0 12px 32px -16px rgb(14 29 51 / .22);

  /* Motion (§2.5, §3.8) */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --dur-reveal:640ms; --reveal-y:16px;
}
@media (min-width:900px){ :root{ --header-h:72px; } }

/* ---------- Theme bands (§3.2) ---------- */
.t-midnight{ color-scheme:dark;
  --bg:var(--sp-midnight); --surface:var(--sp-navy); --surface-2:var(--sp-navy-2);
  --text:var(--sp-ivory-text); --heading:var(--sp-ivory-text); --muted:var(--sp-fog);
  --line:var(--sp-line-dark); --line-strong:var(--sp-steel); --rule:var(--sp-gold-hair);
  --accent:var(--sp-gold); --eyebrow:var(--sp-gold);
  --link:var(--sp-gold-300); --link-hover:var(--sp-ivory-text);
  --btn-bg:var(--sp-gold); --btn-fg:var(--sp-midnight); --btn-bg-hover:var(--sp-gold-300); --btn-bg-active:var(--sp-gold-600);
  --btn2-fg:var(--sp-ivory-text); --btn2-border:var(--sp-gold); --btn2-bg-hover:var(--sp-gold); --btn2-fg-hover:var(--sp-midnight);
  --field-bg:var(--sp-navy); --field-border:var(--sp-steel); --placeholder:var(--sp-fog);
  --focus:var(--sp-gold);
  --ok:var(--sp-ok-d); --warn:var(--sp-warn-d); --err:var(--sp-err-d); --info:var(--sp-info-d);
}
.t-navy{ color-scheme:dark;
  --bg:var(--sp-navy); --surface:var(--sp-navy-2); --surface-2:var(--sp-navy-2);
  --text:var(--sp-ivory-text); --heading:var(--sp-ivory-text); --muted:var(--sp-fog);
  --line:var(--sp-line-dark); --line-strong:var(--sp-steel); --rule:var(--sp-gold-hair);
  --accent:var(--sp-gold); --eyebrow:var(--sp-gold);
  --link:var(--sp-gold-300); --link-hover:var(--sp-ivory-text);
  --btn-bg:var(--sp-gold); --btn-fg:var(--sp-midnight); --btn-bg-hover:var(--sp-gold-300); --btn-bg-active:var(--sp-gold-600);
  --btn2-fg:var(--sp-ivory-text); --btn2-border:var(--sp-gold); --btn2-bg-hover:var(--sp-gold); --btn2-fg-hover:var(--sp-midnight);
  --field-bg:var(--sp-navy-2); --field-border:var(--sp-steel); --placeholder:var(--sp-fog);
  --focus:var(--sp-gold);
  --ok:var(--sp-ok-d); --warn:var(--sp-warn-d); --err:var(--sp-err-d); --info:var(--sp-info-d);
}
.t-ivory, .t-sand{ color-scheme:light;
  --bg:var(--sp-ivory); --surface:var(--sp-card); --surface-2:var(--sp-sand);
  --text:var(--sp-navy); --heading:var(--sp-navy); --muted:var(--sp-slate);
  --line:var(--sp-hairline); --line-strong:var(--sp-stone); --rule:var(--sp-gold);
  --accent:var(--sp-gold-ink); --eyebrow:var(--sp-gold-ink);
  --link:var(--sp-royal); --link-hover:var(--sp-navy);
  --btn-bg:var(--sp-navy); --btn-fg:var(--sp-ivory); --btn-bg-hover:var(--sp-royal); --btn-bg-active:var(--sp-midnight);
  --btn2-fg:var(--sp-navy); --btn2-border:var(--sp-navy); --btn2-bg-hover:var(--sp-navy); --btn2-fg-hover:var(--sp-ivory);
  --field-bg:var(--sp-card); --field-border:var(--sp-stone); --placeholder:var(--sp-slate);
  --focus:var(--sp-royal);
  --ok:var(--sp-ok); --warn:var(--sp-warn); --err:var(--sp-err); --info:var(--sp-info);
}
.t-sand{ --bg:var(--sp-sand); --surface:var(--sp-card); --surface-2:var(--sp-ivory); }
.t-midnight, .t-navy, .t-ivory, .t-sand{ background:var(--bg); color:var(--text); }

/* ---------- Base ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; font-synthesis:none; font-kerning:normal;
  scroll-padding-top:calc(var(--header-h) + 16px); }
body{ margin:0; min-height:100vh; font-family:var(--font-text); font-size:var(--fs-body); line-height:1.65; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; }
img, svg, picture, video{ display:block; max-width:100%; }
img{ height:auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol{ margin:0; }
h1, h2, h3{ font-family:var(--font-display); font-weight:400; color:var(--heading); text-wrap:balance; }
h4{ font-weight:600; color:var(--heading); }
p, li, dd{ text-wrap:pretty; }
a{ color:inherit; }
button, input, select, textarea{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ cursor:pointer; }
::selection{ background:var(--sp-gold); color:var(--sp-midnight); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
/* The skip-link target is not a control: no ring around the whole page body */
main[tabindex="-1"]:focus{ outline:none; }
[hidden]{ display:none !important; }
html.menu-open{ overflow:hidden; }

/* Links in running text: underlined, colour is never the only cue (§2.3) */
.prose a, .text-link{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
  transition:color var(--dur-1) var(--ease-standard), text-decoration-color var(--dur-1) var(--ease-standard); }
.prose a:hover, .text-link:hover{ color:var(--link-hover); }

/* Visually hidden (shared definition lives in the SP strip block below) */
.skip-link{ position:fixed; top:12px; left:12px; z-index:100; transform:translateY(-200%); transition:transform var(--dur-2) var(--ease-standard); }
.skip-link:focus{ transform:none; }

/* Icons: Lucide (ISC), stroke 1.75, currentColor */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.icon{ width:1.25em; height:1.25em; flex:none; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:calc(var(--container) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter); }
/* Two systematic edges: the 1200 content column (.wrap) and the 1360 wide column (.wrap--wide),
   which lands on the SP strip edge (.sp-strip__in is 1360 including its gutters). */
.wrap--wide{ max-width:var(--container-wide); }
.wrap--narrow{ max-width:calc(var(--container-narrow) + var(--gutter) * 2); }
.wrap--prose{ max-width:calc(66ch + var(--gutter) * 2); }
.nowrap{ white-space:nowrap; }
.section{ padding-block:var(--section-y); position:relative; }

/* ---------- Type roles ---------- */
.h-hero{ font-size:var(--fs-hero); line-height:1.02; letter-spacing:-.015em; }
.h2{ font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.01em; }
.h3{ font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.005em; }
.lead{ font-size:var(--fs-lead); line-height:1.55; letter-spacing:0; }
.small{ font-size:var(--fs-small); line-height:1.5; }
.muted{ color:var(--muted); }
.mono{ font-family:var(--font-mono); font-size:13px; line-height:1.5; letter-spacing:.04em; font-variant-numeric:tabular-nums lining-nums; }
.measure{ max-width:66ch; }

/* Eyebrow (§6.5) */
.eyebrow{ display:flex; align-items:center; gap:12px; font:500 var(--fs-eyebrow)/1.2 var(--font-mono);
  letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin:0 0 var(--s-5); }
.eyebrow__rule{ width:24px; height:1px; flex:none; background:var(--rule); transform-origin:left; }

/* Section heading block */
.section-head{ display:grid; gap:var(--s-5); }
.section-head .eyebrow{ margin:0; }
.section-head__intro{ color:var(--muted); max-width:46ch; }
@media (min-width:900px){
  /* Eyebrow and title keep a fixed 24px rhythm; the intro sits beside them, bottom-aligned,
     and can never push the title away from its eyebrow (the 1fr row absorbs a taller intro). */
  .section-head{ grid-template-columns:repeat(12, minmax(0,1fr)); grid-template-rows:auto 1fr; column-gap:var(--col-gap); align-items:start; }
  .section-head > .eyebrow{ grid-column:1 / span 7; grid-row:1; }
  .section-head > .h2{ grid-column:1 / span 7; grid-row:2; }
  .section-head__intro{ grid-column:9 / span 4; grid-row:1 / span 2; align-self:end; padding-bottom:.45em; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px;
  border:1px solid transparent; border-radius:var(--radius-1); font:500 15px/1 var(--font-text); letter-spacing:.02em;
  text-decoration:none; white-space:nowrap; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
.btn .icon{ width:18px; height:18px; transition:transform var(--dur-2) var(--ease-standard); }
.btn:hover .icon--move{ transform:translateX(3px); }
.btn:hover .icon--diag{ transform:translate(2px,-2px); }
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn--primary:hover{ background:var(--btn-bg-hover); }
.btn--primary:active{ background:var(--btn-bg-active); }
.btn--secondary{ background:transparent; color:var(--btn2-fg); border-color:var(--btn2-border); }
.btn--secondary:hover{ background:var(--btn2-bg-hover); color:var(--btn2-fg-hover); }
.btn--sm{ min-height:44px; padding:0 20px; }
.btn[aria-disabled="true"]{ opacity:.72; cursor:progress; }

/* ---------- Header (§6.3) ---------- */
.site-header{ position:sticky; top:0; z-index:50; height:var(--header-h); border-bottom:1px solid var(--line);
  transition:background-color var(--dur-3) var(--ease-standard), border-color var(--dur-3) var(--ease-standard); }
.js .site-header.is-top:not(.is-open){ background:transparent; border-bottom-color:transparent; }
.header__in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-5); }
.brand{ display:inline-flex; align-items:center; gap:12px; min-height:44px; color:var(--heading); text-decoration:none; }
.brand img{ width:33px; height:40px; }
.brand__name{ font-family:var(--font-display); font-size:19px; line-height:1; letter-spacing:-.005em; white-space:nowrap; }
@media (min-width:900px){
  .brand img{ width:36px; height:44px; }
  .brand__name{ font-size:22px; }
}
.nav-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-right:-10px;
  background:none; border:0; border-radius:var(--radius-1); color:var(--heading); }
.nav-toggle .icon{ width:24px; height:24px; }
.nav-toggle .icon--close{ display:none; }
.site-header.is-open .nav-toggle .icon--open{ display:none; }
.site-header.is-open .nav-toggle .icon--close{ display:block; }
.site-nav ul{ list-style:none; margin:0; padding:0; }
.site-nav__link{ position:relative; display:inline-flex; align-items:center; min-height:44px; color:var(--text); text-decoration:none;
  font:500 15px/1 var(--font-text); letter-spacing:.02em; transition:color var(--dur-1) var(--ease-standard); }
.site-nav__link:hover{ color:var(--link); }

@media (min-width:900px){
  .nav-toggle{ display:none; }
  .site-nav{ display:flex; align-items:center; gap:clamp(20px, 2.6vw, 40px); }
  .site-nav ul{ display:flex; gap:clamp(16px, 2.2vw, 32px); }
  .site-nav__link::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:var(--accent);
    transform:scaleX(0); transform-origin:left; transition:transform var(--dur-2) var(--ease-standard); }
  .site-nav__link:hover::after{ transform:scaleX(1); }
}
@media (max-width:899.98px){
  .js .site-nav{ position:fixed; inset:var(--header-h) 0 0 0; z-index:49; display:flex; flex-direction:column; justify-content:space-between;
    gap:var(--s-7); padding:var(--s-6) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); overflow-y:auto;
    background:var(--bg); border-top:1px solid var(--line);
    visibility:hidden; opacity:0; transform:translateY(-8px);
    transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
  .js .site-header.is-open .site-nav{ visibility:visible; opacity:1; transform:none; transition-delay:0s; }
  .js .site-nav li{ border-bottom:1px solid var(--line); }
  .js .site-nav__link{ display:flex; justify-content:space-between; width:100%; min-height:64px; font:400 clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem)/1.1 var(--font-display); letter-spacing:-.005em; color:var(--heading); }
  .js .site-nav__link .icon{ display:block; width:20px; height:20px; color:var(--accent); }
  .js .site-nav .btn{ width:100%; min-height:52px; }
  /* No JS: no menu button, links wrap in a second row */
  html:not(.js) .nav-toggle{ display:none; }
  html:not(.js) .site-header{ position:relative; height:auto; }
  html:not(.js) .header__in{ flex-wrap:wrap; padding-block:10px; }
  html:not(.js) .site-nav{ width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:0 20px; }
  html:not(.js) .site-nav ul{ display:flex; flex-wrap:wrap; gap:0 20px; }
}
.site-nav__link .icon{ display:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; isolation:isolate; overflow:hidden; padding-top:clamp(24px, 1rem + 4vw, 72px); }
.hero__grid{ display:grid; gap:clamp(28px, 5vw, 56px); align-items:center; }
.hero__copy{ display:grid; gap:var(--s-5); justify-items:start; }
.hero__copy .eyebrow{ margin:0; }
.hero__title{ max-width:13ch; }
.hero__title span{ display:block; }
.hero__title em{ font-style:italic; color:var(--accent); }
.hero__lead{ color:var(--muted); max-width:46ch; }
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-2); width:100%; }
.hero__crest{ position:relative; order:-1; justify-self:center; width:clamp(148px, 40vw, 224px); aspect-ratio:578 / 710; }
.hero__crest::before{ content:""; position:absolute; inset:-55% -70%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgb(219 185 99 / .10), transparent); }
.hero__crest img{ width:100%; height:100%; }
.hero__ring{ position:absolute; z-index:-1; left:50%; top:47%; width:132%; aspect-ratio:1; translate:-50% -50%;
  border:1px solid var(--rule); border-radius:50%; pointer-events:none; }
.hero__ring + .hero__ring{ width:118%; opacity:.6; }
.hero__meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:clamp(48px, 5vw, 72px);
  padding-block:20px 24px; border-top:1px solid var(--rule);
  font:500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hero__meta strong{ font-weight:500; color:var(--accent); }
@media (max-width:599.98px){
  /* Short phones (360x640): crest, title and both buttons fit the first screen */
  .hero{ padding-top:8px; }
  .hero__grid{ gap:20px; }
  .hero__copy{ gap:20px; }
  .hero__crest{ width:112px; margin-top:0; }
  .hero__ctas{ margin-top:4px; }
  .hero__ctas .btn{ flex:1 1 auto; }
}
@media (min-width:600px) and (max-width:899.98px){
  .hero__grid{ grid-template-columns:minmax(0,1fr) auto; column-gap:var(--s-6); align-items:start; }
  .hero__crest{ order:0; grid-column:2; grid-row:1; width:clamp(140px, 22vw, 184px); margin:16px 18px 0 0; }
  .hero__copy{ grid-column:1; grid-row:1; }
  .hero__ring{ width:128%; }
}
@media (min-width:900px){
  /* The hero fills the first screen, with the meta rule at its foot */
  .hero{ display:flex; flex-direction:column; min-height:calc(100svh - var(--header-h)); }
  .hero > .wrap{ flex:1; display:flex; flex-direction:column; }
  .hero__grid{ flex:1; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); min-height:440px; }
  .hero__copy{ grid-column:1 / span 7; }
  .hero__crest{ order:0; grid-column:8 / span 5; width:min(100%, 260px); }
}
@media (min-width:1200px){ .hero__ring{ width:150%; } .hero__crest{ width:min(100%, 340px); } }
/* Crest sheen, once on load (§3.8) */
@media (prefers-reduced-motion:no-preference){
  .hero__crest::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 40%, rgb(255 244 214 / .55) 50%, transparent 60%) 120% 0 / 250% 100% no-repeat;
    -webkit-mask:url("/assets/img/crest-1024.webp") center / contain no-repeat;
            mask:url("/assets/img/crest-1024.webp") center / contain no-repeat;
    animation:crest-sheen 1600ms var(--ease-in-out) 300ms 1 both; }
  @media (max-width:899.98px){
    .hero__crest::after{ -webkit-mask-image:url("/assets/img/crest-360.webp"); mask-image:url("/assets/img/crest-360.webp"); }
  }
  .save-data .hero__crest::after{ content:none; }
}
@keyframes crest-sheen{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }

/* ---------- 01 · The house ---------- */
.house__title{ max-width:20ch; }
.house__rule{ height:1px; background:var(--rule); margin-block:clamp(32px, 5vw, 56px); transform-origin:left; }
.house__body{ display:grid; gap:var(--s-6); }
.house__lead{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem); line-height:1.25; color:var(--heading); max-width:24ch; }
.house__text{ color:var(--text); max-width:40ch; }
.house__fig{ display:grid; grid-template-columns:120px 1fr; gap:16px; align-items:end; }
.house__fig img{ width:120px; border-radius:var(--radius-2); }
.house__fig figcaption{ font:400 12px/1.5 var(--font-mono); letter-spacing:.04em; color:var(--muted); max-width:22ch; }
@media (min-width:600px){
  .house__body{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--col-gap); }
  .house__lead{ grid-column:1 / -1; }
}
@media (min-width:900px){
  .house__body{ grid-template-columns:repeat(12, minmax(0,1fr)); align-items:start; }
  .house__lead{ grid-column:1 / span 6; }
  .house__text{ grid-column:7 / span 4; padding-top:.5em; }
  .house__fig{ grid-column:11 / span 2; grid-template-columns:1fr; justify-items:start; }
  .house__fig img{ width:100%; max-width:168px; }
}

/* ---------- 02 · Companies ---------- */
#companies .section-head{ max-width:var(--container); margin-inline:auto; }
@media (min-width:900px){ #companies .section-head__intro{ grid-column:8 / span 5; } }
.companies{ margin-top:clamp(40px, 6vw, 72px); display:grid; gap:var(--col-gap); grid-template-columns:minmax(0,1fr); }
.co{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-2);
  overflow:hidden; transition:transform var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.co:hover, .co:focus-within{ transform:translateY(-2px); border-color:var(--sp-gold-hair-strong); }
.co:has(.co__link:focus-visible){ outline:2px solid var(--focus); outline-offset:3px; }
@supports selector(:has(*)){ .co__link:focus-visible{ outline:none; } }
.co__plate{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  min-height:128px; padding:24px; background:var(--sp-midnight); border-bottom:1px solid var(--rule); }
.co__mark{ width:auto; height:56px; }
/* Tuned by eye for equal optical weight: the solid Parasvi loop reads heavy, the thin camera light */
.co__mark--wbe{ height:80px; }
.co__mark--parasvi{ height:40px; }
.co__mark--sammara{ height:48px; }
@media (max-width:599.98px){
  .co--featured .co__plate{ display:grid; justify-items:center; gap:20px; padding-block:24px 28px; }
  .co--featured .co__sector{ text-align:center; }
  .co--featured .co__mark{ height:140px; }
}
.co__sector{ font:500 11px/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:right; text-wrap:balance; }
.co__tag{ display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border:1px solid var(--accent); border-radius:var(--radius-1);
  font:500 11px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.co__body{ display:flex; flex-direction:column; gap:12px; flex:1; padding:24px; }
.co__name{ font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.005em; }
.co__promise{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.125rem, 1.05rem + .3vw, 1.3125rem); line-height:1.3; color:var(--accent); text-wrap:balance; }
.co__text{ color:var(--muted); font-size:var(--fs-small); line-height:1.6; max-width:52ch; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:4px 0 0; padding:0; }
.chips li{ display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border:1px solid var(--line-strong); border-radius:var(--radius-1);
  font:500 13px/1.2 var(--font-text); letter-spacing:.01em; color:var(--text); }
.co__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 var(--s-4); margin-top:auto; padding-top:var(--s-5); }
.co__link{ display:inline-flex; align-items:center; gap:8px; min-height:44px; white-space:nowrap; color:var(--link); text-decoration:none;
  font:500 13px/1.3 var(--font-mono); letter-spacing:.04em; }
.co__link::after{ content:""; position:absolute; inset:0; z-index:1; }
.co__link .icon{ width:18px; height:18px; transition:transform var(--dur-2) var(--ease-standard); }
.co:hover .co__link .icon--diag{ transform:translate(3px,-3px); }
.co:hover .co__link .icon--move{ transform:translateX(4px); }
.co:hover .co__link{ color:var(--link-hover); }
.co__note{ font:400 12px/1.4 var(--font-mono); letter-spacing:.04em; color:var(--muted); }
@media (min-width:600px){
  .co__plate, .co__body{ padding-inline:32px; }
  .co__body{ padding-block:28px 32px; }
  .companies{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .co--featured, .co--wide{ grid-column:1 / -1; }
  .co--featured, .co--wide{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .co--featured .co__plate, .co--wide .co__plate{ border-bottom:0; border-right:1px solid var(--rule); justify-content:center; min-height:100%; padding-block:56px; }
  .co--featured .co__mark{ height:clamp(150px, 14vw, 200px); }
  .co--featured .co__tag{ position:absolute; top:24px; left:32px; }
  .co--wide .co__sector{ position:absolute; top:24px; right:32px; }
  .co--featured .co__sector{ position:absolute; left:32px; right:32px; bottom:24px; text-align:left; letter-spacing:.12em; text-wrap:balance; }
  .co--wide .co__plate{ min-height:200px; }
  .co--wide .co__mark{ height:56px; }
}
@media (min-width:900px){
  .co--featured .co__body{ padding:48px 48px 40px; gap:14px; }
  .co--featured .co__name{ font-size:clamp(2rem, 1.6rem + 1.2vw, 2.75rem); }
  .co--featured .co__text{ font-size:var(--fs-body); max-width:58ch; }
}
@media (min-width:1200px){
  .companies{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .co--wide{ grid-column:auto; display:flex; }
  .co--wide .co__plate{ border-right:0; border-bottom:1px solid var(--rule); justify-content:space-between; min-height:128px; padding-block:24px; }
  .co--wide .co__sector{ position:static; }
  .co--wide .co__mark{ height:48px; }
}

/* ---------- 03 · What we do (capability index) ---------- */
.index{ list-style:none; margin:clamp(40px, 6vw, 72px) 0 0; padding:0; border-bottom:1px solid var(--line); isolation:isolate; }
.index__row{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) 24px;
  grid-template-areas:"num by arrow" "title title title" "desc desc desc"; gap:10px 16px; padding:24px 0 28px; border-top:1px solid var(--line); }
.index__row::before{ content:""; position:absolute; inset:0 calc(var(--s-4) * -1); z-index:-1; background:var(--surface);
  opacity:0; transition:opacity var(--dur-2) var(--ease-standard); }
.index__row:hover::before{ opacity:1; }
.index__num{ grid-area:num; font:500 12px/1.6 var(--font-mono); letter-spacing:.08em; color:var(--accent); }
.index__title{ grid-area:title; font-size:clamp(1.5rem, 1.35rem + .7vw, 2rem); line-height:1.15; letter-spacing:-.005em; }
.index__title a{ text-decoration:none; color:inherit; }
.index__title a::after{ content:""; position:absolute; inset:0; }
.index__row:has(a:focus-visible){ outline:2px solid var(--focus); outline-offset:4px; }
@supports selector(:has(*)){ .index__title a:focus-visible{ outline:none; } }
.index__desc{ grid-area:desc; color:var(--muted); font-size:var(--fs-small); line-height:1.6; max-width:56ch; }
.index__by{ grid-area:by; font:500 11px/1.6 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text); }
.index__arrow{ grid-area:arrow; justify-self:end; width:22px; height:22px; color:var(--heading); transition:transform var(--dur-2) var(--ease-standard); }
.index__row:hover .index__arrow--diag{ transform:translate(3px,-3px); }
.index__row:hover .index__arrow--move{ transform:translateX(4px); }
/* Company names never break inside themselves (non-breaking spaces in the HTML); two names stack, one per line */
.index__co{ display:block; }
.index__sep > [aria-hidden]{ display:none; }
@media (min-width:600px) and (max-width:899.98px){
  .index__row{ grid-template-columns:40px minmax(0,1fr) minmax(0,1.25fr) 24px; grid-template-areas:"num by by arrow" "num title desc arrow";
    column-gap:var(--col-gap); row-gap:10px; align-items:baseline; }
  .index__arrow{ align-self:start; }
}
@media (min-width:900px){
  .index__row{ grid-template-columns:48px minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,.95fr) 24px; grid-template-areas:"num title desc by arrow";
    column-gap:var(--col-gap); align-items:baseline; padding:30px 0 32px; }
  .index__arrow{ align-self:center; }
  .index__by{ padding-left:8px; }
}
@media (min-width:900px) and (max-width:1199.98px){ .index__by{ letter-spacing:.08em; } }

/* ---------- 04 · Numbers ---------- */
.numbers{ padding-block:clamp(56px, 3rem + 4vw, 104px); }
.numbers .eyebrow{ margin-bottom:var(--s-6); }
.stats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:var(--s-6); }
.stat{ padding:4px 16px 4px 20px; border-left:1px solid var(--rule); }
.stat__num{ display:block; font:400 var(--fs-stat)/1 var(--font-display); letter-spacing:-.01em; color:var(--accent); font-variant-numeric:lining-nums; }
.stat__label{ display:block; margin-top:14px; font:500 11px/1.5 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); max-width:22ch; }
.numbers__note{ margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--line); font:400 12px/1.6 var(--font-mono); letter-spacing:.04em; color:var(--muted); }
.numbers__note a{ color:var(--link); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em; display:inline-flex; align-items:center; gap:4px; min-height:24px; }
.numbers__note a:hover{ color:var(--link-hover); }
@media (min-width:900px){
  .stats{ grid-template-columns:repeat(4, minmax(0,1fr)); }
  .stat{ padding:4px 24px 4px 28px; }
}

/* ---------- 05 · Featured work ---------- */
.work{ display:grid; gap:var(--s-7); margin-top:clamp(40px, 6vw, 72px); }
.work__media{ display:grid; gap:12px; }
.work__caption{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; font:400 12px/1.5 var(--font-mono); letter-spacing:.04em; color:var(--muted); }
.work__info{ display:grid; gap:var(--s-5); align-content:start; }
.work__kicker{ font:500 var(--fs-eyebrow)/1.4 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.work__text{ max-width:52ch; }
.credits{ display:grid; grid-template-columns:minmax(0,9.5em) minmax(0,1fr); gap:10px 20px; padding-block:20px; border-block:1px solid var(--line); }
.credits dt{ font:500 11px/1.7 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.credits dd{ font-size:var(--fs-small); line-height:1.55; }
.work__links{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.work__links .text-link{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:500; }
.work__links .text-link .icon{ width:18px; height:18px; }
@media (min-width:900px){
  .work{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(32px, 5vw, 72px); align-items:start; }
}

/* lite-youtube (styles adapted from lite-youtube-embed 0.3.4, Apache-2.0; vendor CSS not loaded) */
lite-youtube{ position:relative; display:block; aspect-ratio:16 / 9; contain:content; overflow:hidden; cursor:pointer;
  background-color:var(--sp-midnight); background-position:center; background-size:cover; border-radius:var(--radius-2); }
lite-youtube > picture, lite-youtube > picture img{ position:absolute; inset:0; width:100%; height:100%; }
lite-youtube > picture img{ object-fit:cover; }
lite-youtube > iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
lite-youtube .lyt-playbtn{ position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:pointer; }
lite-youtube .lyt-playbtn::before{ content:""; position:absolute; left:50%; top:50%; width:76px; height:76px; translate:-50% -50%; border-radius:50%;
  background:var(--sp-gold); transition:transform var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
lite-youtube .lyt-playbtn::after{ content:""; position:absolute; left:50%; top:50%; width:22px; height:26px; translate:-38% -50%;
  background:var(--sp-midnight); clip-path:polygon(0 0, 100% 50%, 0 100%); }
lite-youtube:hover .lyt-playbtn::before, lite-youtube .lyt-playbtn:focus-visible::before{ transform:scale(1.06); background:var(--sp-gold-300); }
lite-youtube .lyt-playbtn:focus-visible{ outline:2px solid var(--focus); outline-offset:-6px; }
lite-youtube.lyt-activated{ cursor:unset; }
/* visibility (not only opacity) takes the spent play control out of the tab order */
lite-youtube.lyt-activated > picture, lite-youtube.lyt-activated .lyt-playbtn{ opacity:0; visibility:hidden; pointer-events:none; }
.lyt-visually-hidden{ clip:rect(0 0 0 0); clip-path:inset(50%); height:1px; overflow:hidden; position:absolute; white-space:nowrap; width:1px; }

/* ---------- 06 · Founder ---------- */
/* DOM order: head (eyebrow + title), photo, text. Phones read the eyebrow first; wider screens place the photo beside. */
.founder{ display:grid; gap:var(--s-6); }
.founder__head{ display:grid; gap:var(--s-5); }
.founder__head .eyebrow{ margin:0; }
.founder__photo{ position:relative; width:100%; max-width:440px; border-radius:var(--radius-2); overflow:hidden; background:var(--surface); }
.founder__photo::after{ content:""; position:absolute; inset:0; border:1px solid var(--rule); border-radius:inherit; pointer-events:none; }
.founder__photo img{ width:100%; aspect-ratio:1; object-fit:cover; object-position:50% 30%; }
.founder__text{ display:grid; gap:var(--s-5); align-content:start; }
.founder__title{ font-size:var(--fs-h3); }
.founder__quote{ font:italic 400 var(--fs-quote)/1.2 var(--font-display); color:var(--accent); }
.founder__quote p{ text-wrap:balance; }
@media (max-width:599.98px){ .q-br{ display:none; } }
.founder__note{ display:grid; gap:1em; max-width:60ch; color:var(--text); }
.founder__sign{ display:grid; gap:6px; padding-top:var(--s-5); border-top:1px solid var(--rule); }
.founder__signature{ font:italic 400 clamp(2rem, 1.7rem + 1.2vw, 2.75rem)/1.05 var(--font-display); color:var(--heading); letter-spacing:-.01em; }
.founder__role{ font:500 var(--fs-eyebrow)/1.5 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.founder__links{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 28px; }
.founder__links a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--link); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.25em; font-weight:500; }
.founder__links a:hover{ color:var(--link-hover); }
.founder__links .icon{ width:16px; height:16px; }
@media (min-width:600px){
  .founder__photo{ max-width:none; }
  .founder__photo img{ aspect-ratio:4 / 5; }
}
/* Tablet: photo beside the title and quote; the note, signature and links run full width below,
   so no empty column is left under the portrait. */
@media (min-width:600px) and (max-width:899.98px){
  .founder{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--s-6); row-gap:var(--s-5); }
  .founder__photo{ grid-column:1; grid-row:1 / span 2; align-self:start; }
  .founder__head{ grid-column:2; grid-row:1; align-self:end; }
  .founder__text{ display:contents; }
  .founder__quote{ grid-column:2; grid-row:2; align-self:start; }
  .founder__note, .founder__sign, .founder__links{ grid-column:1 / -1; }
  .founder__note{ margin-top:var(--s-4); }
}
@media (min-width:900px){
  .founder{ grid-template-columns:repeat(12, minmax(0,1fr)); grid-template-rows:auto auto; column-gap:var(--col-gap); row-gap:var(--s-5); }
  .founder__photo{ grid-column:1 / span 5; grid-row:1 / span 2; align-self:center; max-width:none; }
  .founder__head{ grid-column:7 / span 6; grid-row:1; align-self:end; }
  .founder__text{ grid-column:7 / span 6; grid-row:2; align-self:start; }
}

/* ---------- 07 · Journey ---------- */
.journey__controls{ display:flex; justify-content:flex-end; gap:8px; margin-top:var(--s-6); }
.journey__controls:not([hidden]) + .journey__track{ margin-top:var(--s-5); }
.journey__btn{ display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; background:transparent;
  border:1px solid var(--line-strong); border-radius:var(--radius-1); color:var(--heading);
  transition:background-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); }
.journey__btn:hover{ background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg); }
.journey__btn[aria-disabled="true"]{ opacity:.4; cursor:default; background:transparent; color:var(--heading); border-color:var(--line-strong); }
.journey__btn .icon{ width:20px; height:20px; }
.journey__track{ list-style:none; margin:clamp(40px, 6vw, 72px) calc(var(--gutter) * -1) 0; padding:0 var(--gutter) 12px;
  display:grid; grid-auto-flow:column; grid-auto-columns:min(80vw, 320px); column-gap:clamp(24px, 3vw, 40px); align-items:start;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.journey__track:focus-visible{ outline-offset:-2px; }
.milestone{ scroll-snap-align:start; display:grid; align-content:start; gap:var(--s-4); }
.milestone__year{ position:relative; padding-bottom:20px; font-size:var(--fs-stat); line-height:1; letter-spacing:-.01em; font-variant-numeric:lining-nums; }
.milestone__year::before{ content:""; position:absolute; left:0; right:calc(clamp(24px, 3vw, 40px) * -1); bottom:0; height:1px; background:var(--line-strong); }
.milestone:last-child .milestone__year::before{ right:0; }
.milestone__year::after{ content:""; position:absolute; left:0; bottom:-4px; width:9px; height:9px; rotate:45deg; background:var(--sp-gold); outline:1px solid var(--sp-gold-ink); }
.milestone__date{ font:500 11px/1.5 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); padding-top:8px; }
.milestone__text{ font-size:var(--fs-small); line-height:1.6; color:var(--text); }
.milestone__list{ list-style:none; margin:0; padding:8px 0 0; display:grid; gap:var(--s-5); }
.milestone__list li{ display:grid; gap:var(--s-2); }
.milestone__list .milestone__date{ padding-top:0; }
.milestone__fig{ display:grid; grid-template-columns:128px minmax(0,1fr); align-items:end; gap:8px 16px; margin-top:var(--s-2); }
.milestone__fig img{ width:128px; border-radius:var(--radius-2); }
.milestone__fig figcaption{ font:400 12px/1.5 var(--font-mono); letter-spacing:.04em; color:var(--muted); }
/* Below 900px the row becomes a vertical rail: every milestone stays in view, nothing hides behind a swipe. */
@media (max-width:899.98px){
  .journey__track{ position:relative; grid-auto-flow:row; grid-auto-columns:auto; row-gap:var(--s-7); overflow:visible; scroll-snap-type:none;
    margin-inline:0; padding:4px 0 0 32px; }
  .journey__track::before{ content:""; position:absolute; left:4px; top:20px; bottom:8px; width:1px; background:var(--line-strong); }
  .milestone{ position:relative; gap:var(--s-3); }
  .milestone__year{ padding-bottom:0; font-size:clamp(2.25rem, 1.9rem + 1.6vw, 3rem); }
  .milestone__year::before{ display:none; }
  .milestone__year::after{ left:-32px; top:.5em; bottom:auto; }
  .milestone__date{ padding-top:0; }
}
@media (min-width:600px) and (max-width:899.98px){
  .milestone{ grid-template-columns:140px minmax(0,1fr); column-gap:var(--s-6); }
  .milestone > *{ grid-column:2; }
  .milestone > .milestone__year{ grid-column:1; grid-row:1 / span 4; }
}
@media (min-width:900px){
  .journey__track{ grid-auto-columns:minmax(260px, 1fr); }
  /* A small thumbnail with its caption beside it keeps the four columns close in height */
  .milestone__fig{ grid-template-columns:112px minmax(0,1fr); }
  .milestone__fig img{ width:112px; }
}
/* 900-1199: the row scrolls. Fade the cut edge instead of slicing a word (JS adds the classes). */
@media (min-width:900px) and (max-width:1199.98px){
  .journey__track.is-scrollable:not(.at-end){ -webkit-mask-image:linear-gradient(90deg, var(--sp-midnight) calc(100% - 72px), transparent);
    mask-image:linear-gradient(90deg, var(--sp-midnight) calc(100% - 72px), transparent); }
}

/* ---------- 08 · Principles ---------- */
.rules{ list-style:none; margin:clamp(40px, 6vw, 72px) 0 0; padding:0; display:grid; column-gap:clamp(24px, 3vw, 40px); }
.rule{ position:relative; display:grid; align-content:start; gap:12px; padding:28px 0 36px; }
.rule::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line-strong); transform-origin:left; }
.rule__num{ font:500 12px/1.5 var(--font-mono); letter-spacing:.1em; color:var(--accent); }
.rule__title{ font-size:var(--fs-h3); line-height:1.12; }
.rule__text{ color:var(--muted); font-size:var(--fs-small); line-height:1.6; max-width:34ch; }
@media (min-width:600px){ .rules{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
#principles{ padding-bottom:calc(var(--section-y) * .5); }
@media (min-width:1200px){
  .rules{ grid-template-columns:repeat(4, minmax(0,1fr)); grid-template-rows:auto auto auto; }
  @supports (grid-template-rows:subgrid){ .rule{ grid-row:span 3; grid-template-rows:subgrid; } }
}
/* 4-up columns are ~270px: a slightly smaller title keeps every rule on one line, so subgrid leaves no holes */
@media (min-width:1200px){ .rule__title{ font-size:1.75rem; letter-spacing:-.01em; } }

/* ---------- 09 · Contact ---------- */
/* Two ivory bands in a row (principles, contact): a half-height seam with the hairline on the content column */
.contact-band{ padding-top:0; }
.contact{ display:grid; gap:var(--s-7); padding-top:calc(var(--section-y) * .6); border-top:1px solid var(--line); }
.contact__intro{ display:grid; gap:var(--s-5); align-content:start; }
.contact__intro .eyebrow{ margin:0; }
.contact__lede{ color:var(--muted); max-width:40ch; }
.contact__email{ font:400 clamp(1.5rem, 1.3rem + 1vw, 2.125rem)/1.2 var(--font-display); color:var(--link); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:.18em; overflow-wrap:anywhere; justify-self:start; }
.contact__email:hover{ color:var(--link-hover); }
.contact__facts{ display:grid; gap:12px; padding-top:var(--s-5); border-top:1px solid var(--line); }
.contact__fact{ display:flex; gap:12px; align-items:flex-start; font-size:var(--fs-small); color:var(--text); }
.contact__fact .icon{ width:18px; height:18px; margin-top:2px; color:var(--accent); }
.contact__fact .mono{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); display:block; }
/* WhatsApp / phone slot (commented out in the HTML until the client adds a number) */
.contact__direct{ display:flex; flex-wrap:wrap; gap:12px; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-2); box-shadow:var(--shadow); padding:clamp(24px, 1rem + 3vw, 48px); }
.form-grid{ display:grid; gap:20px; }
.field{ display:grid; gap:8px; align-content:start; }
.field label, .field__label{ font:500 15px/1.3 var(--font-text); color:var(--heading); }
.field__opt{ font-weight:400; color:var(--muted); }
.req{ color:var(--accent); }
.input{ width:100%; min-height:52px; padding:12px 16px; font:400 16px/1.4 var(--font-text); color:var(--text); background:var(--field-bg);
  border:1px solid var(--field-border); border-radius:var(--radius-1); transition:border-color var(--dur-1) var(--ease-standard); }
.input:hover{ border-color:var(--heading); }
.input:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-color:var(--heading); }
.input::placeholder{ color:var(--placeholder); opacity:1; }
textarea.input{ min-height:168px; resize:vertical; line-height:1.55; }
.select{ position:relative; }
.select .input{ appearance:none; -webkit-appearance:none; padding-right:48px; cursor:pointer; }
.select .icon{ position:absolute; right:16px; top:50%; width:20px; height:20px; translate:0 -50%; pointer-events:none; color:var(--heading); }
.input[aria-invalid="true"]{ border-color:var(--err); }
.field__error{ display:flex; gap:8px; align-items:flex-start; font-size:14px; line-height:1.4; color:var(--err); }
.field__error .icon{ width:16px; height:16px; margin-top:1px; }
.form-note{ font-size:var(--fs-small); color:var(--muted); }
.form-foot{ display:grid; gap:var(--s-5); margin-top:var(--s-2); }
.consent{ font-size:var(--fs-small); line-height:1.55; color:var(--muted); max-width:56ch; }
.form-foot .btn{ justify-self:stretch; }
.form-status{ display:flex; gap:12px; align-items:flex-start; margin-top:var(--s-5); padding:16px 18px; border:1px solid currentColor; border-radius:var(--radius-1); background:var(--bg); }
/* Empty: zero size but still rendered, so the live region is in the accessibility tree before a message arrives */
.form-status:empty{ margin:0; padding:0; border:0; }
.form-status--pending{ color:var(--muted); border-color:var(--line-strong); }
.form-status .icon{ width:20px; height:20px; margin-top:1px; }
.form-status p{ color:var(--text); }
.form-status strong{ font-weight:600; }
.form-status--ok{ color:var(--ok); }
.form-status--err{ color:var(--err); }
.hp{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
@media (min-width:600px){
  .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .field--full{ grid-column:1 / -1; }
  .form-foot{ grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:var(--s-6); }
  .form-foot .btn{ justify-self:end; }
}
@media (min-width:900px){
  .contact{ grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--col-gap); }
  .contact__intro{ grid-column:1 / span 5; }
  .contact__form{ grid-column:7 / span 6; }
}

/* ---------- Footer (§6.4) ---------- */
.site-footer{ padding-top:clamp(64px, 3rem + 5vw, 112px); }
.footer__top{ display:grid; gap:var(--s-7) var(--col-gap); }
.footer__brand{ display:grid; gap:var(--s-4); align-content:start; }
.footer__lockup{ display:inline-flex; align-items:center; gap:14px; justify-self:start; color:var(--heading); text-decoration:none; min-height:44px; }
.footer__lockup img{ width:46px; height:56px; }
.footer__lockup span{ font:400 26px/1.05 var(--font-display); letter-spacing:-.005em; }
.footer__desc{ color:var(--muted); font-size:var(--fs-small); max-width:36ch; }
.footer__sig{ font:italic 400 22px/1.2 var(--font-display); color:var(--accent); }
.footer__title{ font:500 var(--fs-eyebrow)/1.2 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); margin-bottom:var(--s-3); }
.footer__col ul{ list-style:none; margin:0; padding:0; }
.footer__col a{ display:inline-block; padding-block:11px; line-height:1.5; color:var(--text); text-decoration:none; font-size:var(--fs-small);
  text-underline-offset:.25em; text-decoration-thickness:1px; transition:color var(--dur-1) var(--ease-standard); }
.footer__col a:hover{ color:var(--link); text-decoration-line:underline; }
.footer__col .icon{ display:inline-block; width:14px; height:14px; margin-left:6px; vertical-align:-1px; color:var(--muted); }
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 32px; margin-top:var(--s-8);
  padding-block:20px; border-top:1px solid var(--line); font:400 12px/1.6 var(--font-mono); letter-spacing:.04em; color:var(--muted); }
.footer__legal ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; }
.footer__legal a{ display:inline-flex; align-items:center; min-height:44px; color:var(--text); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em; }
.footer__legal a:hover{ color:var(--link); }
.footer__top{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.footer__brand, .footer__col--contact{ grid-column:1 / -1; }
@media (min-width:600px) and (max-width:899.98px){
  .footer__top{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .footer__col--contact{ grid-column:auto; }
}
@media (min-width:900px){
  .footer__top{ grid-template-columns:repeat(12, minmax(0,1fr)); }
  .footer__brand{ grid-column:1 / span 4; }
  .footer__col--house{ grid-column:5 / span 2; }
  .footer__col--companies{ grid-column:7 / span 3; }
  .footer__col--contact{ grid-column:10 / span 3; }
}
@media (min-width:900px) and (max-width:1199.98px){
  .footer__brand{ grid-column:1 / -1; }
  .footer__col--house{ grid-column:1 / span 3; }
  .footer__col--companies{ grid-column:4 / span 4; }
  .footer__col--contact{ grid-column:8 / span 5; }
}

/* ---------- Inner pages: page head, legal prose, error page ---------- */
.page-head{ padding-block:clamp(48px, 2rem + 5vw, 112px) clamp(40px, 2rem + 3vw, 72px); border-bottom:1px solid var(--rule); }
.page-head .eyebrow{ margin-bottom:var(--s-4); }
.breadcrumb a{ display:inline-flex; align-items:center; min-height:44px; }
.page-head__meta{ margin-top:var(--s-5); font:400 13px/1.5 var(--font-mono); letter-spacing:.04em; color:var(--muted); }
.section--after-head{ padding-top:clamp(48px, 3rem + 3vw, 96px); }
.prose{ max-width:66ch; }
.prose > * + *{ margin-top:1em; }
.prose h2{ font-size:var(--fs-h3); line-height:1.15; margin-top:1.9em; }
.prose h2:first-child{ margin-top:0; }
.prose ul{ padding-left:1.25em; }
.prose li + li{ margin-top:.5em; }
.prose li::marker{ color:var(--accent); }
.prose strong{ font-weight:600; color:var(--heading); }
.prose .callout{ padding:20px 24px; background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--rule); border-radius:var(--radius-2); }

.error-page{ min-height:100vh; min-height:100svh; display:grid; place-items:center; padding:var(--s-8) var(--gutter); text-align:center; }
.error-body{ display:flex; flex-direction:column; min-height:100vh; min-height:100svh; }
.error-body .error-page{ flex:1; min-height:0; }
.error-page__in{ display:grid; justify-items:center; gap:var(--s-5); max-width:34rem; }
.error-page__home{ position:relative; isolation:isolate; display:inline-flex; padding:12px; }
/* Same lit-not-glowing spotlight as the hero crest (§3.9) */
.error-page__home::before{ content:""; position:absolute; inset:-80%; z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgb(219 185 99 / .10), transparent); }
.error-page .error-page__crest{ width:80px; height:97px; }
.error-page .error-page__code{ font:500 var(--fs-eyebrow)/1.2 var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--eyebrow); }
.error-page h1{ font-size:clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); line-height:1.08; letter-spacing:-.01em; }
.error-page p{ color:var(--muted); }
.error-page__ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:var(--s-2); }
@media (max-width:599.98px){
  .error-page__in{ width:100%; }
  .error-page__ctas{ display:grid; grid-template-columns:minmax(0,1fr); width:100%; }
  .error-page__ctas .btn{ width:100%; }
}
.error-page__links{ list-style:none; margin:var(--s-5) 0 0; padding:var(--s-5) 0 0; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; justify-content:center; gap:4px 24px; }
.error-page__links a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--link); font-size:var(--fs-small); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.25em; }
.error-page__links a:hover{ color:var(--link-hover); }
.error-page__links .icon{ width:14px; height:14px; }

/* ---------- SP Group strip: identical on all three sites (BRAND-SYSTEMS §6.2). Do not theme. ---------- */
.sp-strip{background:#0A1424;color:#A9B1BF;border-top:1px solid rgb(219 185 99 / .24);
  font-family:"Geist Mono","Geist Mono Fallback","Courier New",monospace;font-size:13px;line-height:1.5}
.sp-strip__in{max-width:1360px;margin-inline:auto;padding:16px var(--gutter, 16px);display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;justify-content:space-between}
.sp-strip__brand{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:#F3EEE3;text-decoration:none}
.sp-strip__brand img{display:block;width:30px;height:36px;object-fit:contain}
.sp-strip__label{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#A9B1BF}
.sp-strip__links{display:flex;flex-wrap:wrap;gap:4px 24px;list-style:none;margin:0;padding:0}
.sp-strip__links a{display:inline-flex;align-items:center;min-height:44px;color:#F3EEE3;text-decoration:none;text-underline-offset:.25em}
.sp-strip__links a:hover{text-decoration:underline}
.sp-strip__links a[aria-current]{color:#DBB963;text-decoration:underline;text-decoration-thickness:1px}
.sp-strip a:focus-visible{outline:2px solid #DBB963;outline-offset:2px}
/* shared visually-hidden utility (all sites) */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Motion policy (§2.5, §3.8): the finished state is the default ---------- */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
  .js [data-reveal]:not(.is-in){ opacity:0; transform:translateY(var(--reveal-y)); }
  .js [data-reveal]{ transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
  /* Hairline draw */
  .js [data-reveal] .eyebrow__rule, .js .house__rule[data-reveal], .js .rules[data-reveal] .rule::before{ transition:transform 900ms var(--ease-out) 120ms; }
  .js [data-reveal]:not(.is-in) .eyebrow__rule, .js .house__rule[data-reveal]:not(.is-in), .js .rules[data-reveal]:not(.is-in) .rule::before{ transform:scaleX(0); }
  .js .house__rule[data-reveal]{ opacity:1 !important; }
  .js .rules[data-reveal]{ opacity:1; transform:none; }
  .js .rules[data-reveal] .rule{ transition:opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
  .js .rules[data-reveal]:not(.is-in) .rule{ opacity:0; transform:translateY(var(--reveal-y)); }
  .js .rules[data-reveal] .rule:nth-child(2){ transition-delay:80ms; }
  .js .rules[data-reveal] .rule:nth-child(3){ transition-delay:160ms; }
  .js .rules[data-reveal] .rule:nth-child(4){ transition-delay:240ms; }
  @view-transition{ navigation:auto; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  /* The rule above gives every element (default transition-property: all) a .01ms transition, so the
     menu's links would inherit visibility a moment late and could not take focus when it opens. */
  .js .site-nav, .js .site-nav *, .js .site-header.is-open .site-nav{ transition:none !important; }
}