@font-face{font-family:"Oswald Sub";src:url("fonts/oswald-200.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Oswald Sub";src:url("fonts/oswald-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ── Direction A "Aperture" — single-theme by intent: a dark instrument panel.
      Every colour is painted explicitly so the page holds on any host ground. ── */
:root{
  --paper:#17120F; --paper-2:#1C1613; --surface:#201A17; --surface-2:#262020;
  --field:#141010; --field-focus:#1A1514;

  --ink:#F4EEE9; --dim:#A99C93; --faint:#91867F;

  --line:rgba(255,255,255,.085); --line-2:rgba(255,255,255,.34);
  --hover:rgba(255,255,255,.035); --chip:rgba(255,255,255,.05);

  --accent:#FF2D87; --accent-2:#FF7AB2;
  --accent-w:rgba(255,45,135,.12); --accent-b:rgba(255,45,135,.34);
  --amber:#F5A81C; --ok:#6FBF3B; --danger:#FF7A66; --arc-stone:#8A7A72;

  --btn-bg:linear-gradient(135deg,#D42570,#A3004A); --btn-fg:#FFF4F8;
  --rule:linear-gradient(90deg,var(--accent) 0%,var(--amber) 46%,transparent 100%);
  --card-shadow:0 1px 0 rgba(255,255,255,.055) inset, 0 40px 90px -46px #000;
  --nav-bg:rgba(23,18,15,.82); --nav-bg-solid:#17120F;
  --stage-bg:radial-gradient(760px 520px at 78% 28%, rgba(255,45,135,.15), transparent 66%),
             radial-gradient(600px 440px at 92% 76%, rgba(245,168,28,.09), transparent 68%);

  --f-display:"Oswald Sub","Oswald","Haettenschweiler","Arial Narrow",sans-serif;
  --f-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  --r:4px; --r-lg:10px;
  --t-fast:120ms; --t:220ms; --t-slow:520ms;
  --ease:cubic-bezier(.22,.61,.36,1);

  --rail:clamp(20px,5vw,72px);
  --maxw:1240px;
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--rail)}

/* ── type ─────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--faint); margin:0;
}
.display{
  font-family:var(--f-display); font-weight:200; text-transform:uppercase;
  letter-spacing:.115em; line-height:1.04; margin:0; text-wrap:balance; overflow-wrap:break-word;
  color:var(--ink);
}
h2.display{font-size:clamp(1.75rem,4.4vw,3rem)}
h3{font-size:1.0625rem; font-weight:600; letter-spacing:-.005em; margin:0; color:var(--ink)}
p{margin:0; color:var(--dim)}
.lede{font-size:1.0625rem; line-height:1.7; max-width:58ch}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ── nav ──────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50; background:var(--nav-bg);
  backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(1px)){.nav{background:var(--nav-bg-solid)}}
.nav-in{display:flex; align-items:center; gap:24px; height:66px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; min-width:0}
.brand .bt{display:block; min-width:0}
.brand b{
  font-family:var(--f-display); font-weight:500; font-size:.9375rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap; display:block;
}
.brand .sb{display:block; font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.2em; color:var(--faint); text-transform:uppercase}
.nav-links{display:flex; gap:26px; align-items:center}
.nav-links a{
  text-decoration:none; font-size:.8125rem; color:var(--dim); letter-spacing:.02em;
  transition:color var(--t-fast) var(--ease); padding:6px 0; position:relative;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right var(--t) var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{right:0}
@media (max-width:860px){.nav-links{display:none}}
@media (max-width:560px){
  .nav-in{gap:12px}
  .brand .sb{display:none}
  .nav .btn{padding:11px 15px; font-size:.75rem}
}

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-size:.8125rem; font-weight:600; letter-spacing:.03em;
  padding:12px 22px; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
             background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg); box-shadow:0 0 0 0 var(--accent-b)}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 26px -12px var(--accent-b)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--hover); border-color:var(--accent-b)}
.btn-ghost:active{background:var(--chip)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.42; cursor:not-allowed; transform:none; box-shadow:none}

/* ── hero ─────────────────────────────────────────────────── */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--stage-bg);
}
.hero-in{
  position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px); align-items:center;
  padding-block:clamp(56px,9vw,116px) clamp(56px,9vw,108px);
}
.hero-copy{display:flex; flex-direction:column; gap:26px; align-items:flex-start; min-width:0}
h1.display{font-size:clamp(2.25rem,6.4vw,4.5rem)}
h1.display em{font-style:normal; color:var(--accent)}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px}
.hero-meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; padding-top:8px;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}
.hero-meta i{font-style:normal; color:var(--amber)}

.stage{position:relative; display:flex; justify-content:center; align-items:center; min-width:0}
#aperture{width:min(100%,460px); height:auto; aspect-ratio:1; display:block}
.stage figcaption{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap;
}
@media (max-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr); gap:44px}
  .stage{order:-1}
  #aperture{width:min(74%,320px)}
}

/* ── section frame ────────────────────────────────────────── */
.section{padding-block:clamp(56px,8.5vw,108px); border-bottom:1px solid var(--line)}
.sec-head{display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(32px,4.5vw,56px); max-width:60ch}
.bar{width:56px; height:2px; background:var(--rule); border-radius:2px}

/* ── practice list ────────────────────────────────────────── */
.practice{border-top:1px solid var(--line)}
.prow{
  display:grid; grid-template-columns:auto minmax(0,22ch) minmax(0,1fr) auto;
  gap:clamp(16px,3vw,40px); align-items:baseline;
  padding:clamp(22px,3vw,30px) clamp(10px,1.6vw,18px);
  border-bottom:1px solid var(--line); position:relative;
  text-decoration:none; transition:background-color var(--t) var(--ease);
}
.prow::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--hue,var(--accent)); transform:scaleY(0); transform-origin:50% 0;
  transition:transform var(--t) var(--ease);
}
.prow:hover,.prow:focus-visible{background:var(--hover)}
.prow:hover::before,.prow:focus-visible::before{transform:scaleY(1)}
.prow .idx{font-family:var(--f-mono); font-size:.6875rem; color:var(--faint); letter-spacing:.1em}
.prow h3{font-family:var(--f-display); font-weight:200; font-size:clamp(1.25rem,2.6vw,1.75rem);
  text-transform:uppercase; letter-spacing:.09em; line-height:1.15;
  transition:color var(--t-fast) var(--ease)}
.prow:hover h3{color:var(--hue,var(--accent))}
.prow p{font-size:.9375rem}
.prow .arrow{
  font-family:var(--f-mono); color:var(--faint); font-size:1rem;
  transition:transform var(--t) var(--ease), color var(--t-fast) var(--ease);
}
.prow:hover .arrow{transform:translateX(5px); color:var(--hue,var(--accent))}
@media (max-width:820px){
  .prow{grid-template-columns:auto minmax(0,1fr); row-gap:10px}
  .prow .idx{grid-row:1}
  .prow h3{grid-column:2}
  .prow p{grid-column:2}
  .prow .arrow{display:none}
}

/* ── generic card grid ────────────────────────────────────── */
.grid{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g-4,.g-2{grid-template-columns:minmax(0,1fr)}}
.cell{
  background:var(--surface); padding:clamp(20px,2.6vw,28px);
  display:flex; flex-direction:column; gap:10px; min-width:0;
  transition:background-color var(--t) var(--ease);
}
.cell:hover{background:var(--surface-2)}
.cell .k{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.cell p{font-size:.875rem; line-height:1.62}

/* ── engagement ───────────────────────────────────────────── */
.eng{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
@media (max-width:1000px){.eng{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.eng{grid-template-columns:minmax(0,1fr)}}
.eng article{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,26px); display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--card-shadow); min-width:0;
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.eng article:hover{border-color:var(--line-2); transform:translateY(-2px)}
.eng .tag{
  align-self:flex-start; font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.18em;
  text-transform:uppercase; padding:4px 8px; border-radius:3px;
  background:var(--chip); color:var(--dim); border:1px solid var(--line);
}
.eng p{font-size:.875rem; line-height:1.6}
.eng dl{margin:auto 0 0; padding-top:14px; border-top:1px solid var(--line); display:grid; gap:6px}
.eng dt{font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.eng dd{margin:0; font-size:.8125rem; color:var(--ink)}

/* ── process (numbered: genuinely sequential) ─────────────── */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{padding:26px clamp(16px,2.2vw,26px) 26px 0; position:relative; min-width:0}
.step::before{content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:var(--line)}
.step:first-child::before{background:var(--accent)}
.n{
  font-family:var(--f-display); font-weight:200; font-size:2.25rem; line-height:1;
  color:var(--accent); letter-spacing:.04em; display:block; margin:18px 0 12px;
  font-variant-numeric:tabular-nums;
}
.step h3{margin-bottom:8px}
.step p{font-size:.875rem; line-height:1.6}
.dur{display:inline-block; margin-top:10px; font-family:var(--f-mono); font-size:.625rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}

/* ── HExA callout ─────────────────────────────────────────── */
.hexa{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,4vw,48px); box-shadow:var(--card-shadow);
}
@media (max-width:820px){.hexa{grid-template-columns:minmax(0,1fr)}}
.hexa .big{
  font-family:var(--f-display); font-weight:200; text-transform:uppercase;
  letter-spacing:.14em; font-size:clamp(2rem,5.5vw,3.25rem); line-height:1.02; margin:0;
}
.hexa .big i{font-style:normal; color:var(--amber)}
.hexa ul{margin:16px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.hexa li{display:flex; gap:11px; font-size:.9375rem; color:var(--dim); line-height:1.55}
.hexa li b{color:var(--ink); font-weight:600}
.hexa li::before{content:"—"; color:var(--accent); flex:none; font-family:var(--f-mono)}

/* ── contact ──────────────────────────────────────────────── */
.contact{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px)}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
.form{display:grid; gap:14px}
.field{display:grid; gap:7px; min-width:0}
.field label{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.17em; text-transform:uppercase; color:var(--dim)}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--f-body); font-size:.9375rem; color:var(--ink);
  background:var(--field); border:1px solid var(--line-2); border-radius:var(--r);
  padding:11px 13px; transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.field textarea{min-height:104px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--faint)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; background:var(--field-focus); border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-w);
}
.field input:disabled,.field textarea:disabled{opacity:.45; cursor:not-allowed}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:560px){.row2{grid-template-columns:minmax(0,1fr)}}
.form-note{font-size:.75rem; color:var(--faint); line-height:1.55}
.msg{
  display:none; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:var(--r);
  background:var(--accent-w); border:1px solid var(--accent-b); font-size:.875rem; color:var(--ink);
}
.msg.show{display:flex}

.coord{display:grid; gap:22px; align-content:start}
.coord .block{display:grid; gap:5px; padding-bottom:20px; border-bottom:1px solid var(--line)}
.coord .block:last-child{border-bottom:0; padding-bottom:0}
.coord .k{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
.coord .v{font-size:.9375rem; color:var(--ink); line-height:1.62; overflow-wrap:anywhere}
.coord a.v{text-decoration:none; border-bottom:1px solid var(--line-2); justify-self:start;
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease)}
.coord a.v:hover{color:var(--accent-2); border-color:var(--accent-b)}
.coord .v.mono{font-size:.8125rem; letter-spacing:.03em}

/* ── footer ───────────────────────────────────────────────── */
.foot{padding-block:44px 40px}
/* footer rules live with the multi-page additions below */

/* ── logo mark ────────────────────────────────────────────── */
.mark{width:26px; height:26px; flex:none; display:block}

/* ── reveal ───────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(14px); transition:opacity 620ms var(--ease), transform 620ms var(--ease)}
.reveal.in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ══ multi-page additions ════════════════════════════════════════════════════
   Everything below serves the interior pages, the mobile menu and the server-
   rendered form. Same tokens throughout — no new colours are introduced here. */

/* ── accessibility helpers ────────────────────────────────── */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{
  position:absolute; left:8px; top:-56px; z-index:100;
  background:var(--surface); color:var(--ink); border:1px solid var(--accent);
  border-radius:var(--r); padding:10px 16px; font-size:.8125rem; text-decoration:none;
  transition:top var(--t) var(--ease);
}
.skip:focus{top:8px}

/* ── nav: current page + mobile menu ──────────────────────── */
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{right:0}
.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:36px; padding:0 8px; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r);
  transition:border-color var(--t-fast) var(--ease);
}
.burger:hover{border-color:var(--accent-b)}
.burger span[aria-hidden]{display:block; height:1.5px; background:var(--ink); border-radius:2px;
  transition:transform var(--t) var(--ease), opacity var(--t) var(--ease)}
body.menu-open .burger span[aria-hidden]:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span[aria-hidden]:nth-child(2){opacity:0}
body.menu-open .burger span[aria-hidden]:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:860px){
  .burger{display:flex; order:3}
  .nav-cta{display:none}
  .nav-links{
    display:none; order:4; width:100%; flex-direction:column; gap:0;
    border-top:1px solid var(--line); padding-block:6px 14px;
  }
  body.menu-open .nav-links{display:flex}
  body.menu-open .nav-in{flex-wrap:wrap; height:auto; padding-bottom:6px}
  .nav-links a{padding:12px 2px; font-size:.9375rem; border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
  .nav-links a:last-child{border-bottom:0}
}
@media (max-width:560px){
  .nav-in{gap:12px}
  .brand .sb{display:none}
}

/* ── interior page masthead ───────────────────────────────── */
.page-hero{
  position:relative; border-bottom:1px solid var(--line); overflow:hidden;
  padding-block:clamp(28px,4vw,44px) clamp(40px,6vw,72px);
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; background:var(--stage-bg);
  opacity:.65;
}
.page-hero > .wrap{position:relative; display:grid; gap:16px}
.page-hero h1.display{font-size:clamp(2rem,5.2vw,3.5rem); margin-top:2px}
.page-hero .bar{margin-top:6px}
.crumb{
  display:flex; align-items:center; gap:9px; margin-bottom:6px;
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); flex-wrap:wrap;
}
.crumb a{color:var(--dim); text-decoration:none; transition:color var(--t-fast) var(--ease)}
.crumb a:hover{color:var(--accent-2)}
.crumb [aria-current]{color:var(--ink)}

/* ── inline link ──────────────────────────────────────────── */
.link{
  color:var(--accent-2); text-decoration:none; font-size:.875rem; font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
  border-bottom:1px solid transparent; transition:border-color var(--t-fast) var(--ease);
}
.link:hover{border-color:var(--accent-b)}
.link .arrow{transition:transform var(--t) var(--ease)}
.link:hover .arrow{transform:translateX(4px)}
.more{margin-top:clamp(20px,3vw,30px)}
.btn .arrow{font-family:var(--f-mono)}

/* ── practice: jump bar + area blocks ─────────────────────── */
.jump{border-bottom:1px solid var(--line); background:var(--paper-2)}
.jump-in{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line)}
@media (max-width:820px){.jump-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.jump-in{grid-template-columns:minmax(0,1fr)}}
.jump a{
  background:var(--paper-2); display:flex; align-items:center; gap:10px;
  padding:14px clamp(12px,2vw,18px); text-decoration:none; min-width:0;
  font-size:.8125rem; color:var(--dim);
  transition:background-color var(--t) var(--ease), color var(--t-fast) var(--ease);
}
.jump a:hover{background:var(--surface); color:var(--ink)}
.jump .sw{width:10px; height:10px; border-radius:50%; background:var(--hue,var(--accent)); flex:none}

.area{scroll-margin-top:76px}
.area-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,5vw,64px);
  align-items:start}
@media (max-width:900px){.area-in{grid-template-columns:minmax(0,1fr)}}
.area-head{display:grid; gap:16px; justify-items:start}
.area-head .hue{color:var(--hue,var(--accent))}
.area-head h2.display{font-size:clamp(1.75rem,4vw,2.75rem)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none}
.chips li{
  font-family:var(--f-mono); font-size:.6875rem; color:var(--dim);
  background:var(--chip); border:1px solid var(--line); border-radius:20px; padding:3px 10px;
  white-space:nowrap;
}
.area-detail{margin:0; display:grid; gap:0; border-top:1px solid var(--line)}
.area-detail dt{
  font-size:1rem; font-weight:600; color:var(--ink); padding-top:18px;
  position:relative; padding-left:18px;
}
.area-detail dt::before{
  content:""; position:absolute; left:0; top:26px; width:8px; height:1.5px;
  background:var(--hue,var(--accent));
}
.area-detail dd{
  margin:6px 0 0; padding:0 0 18px 18px; font-size:.9375rem; line-height:1.62; color:var(--dim);
  border-bottom:1px solid var(--line);
}
.area-detail dd:last-child{border-bottom:0}

/* ── engineering: discipline rows ─────────────────────────── */
.disc{border-top:1px solid var(--line)}
.disc-row{
  display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:clamp(20px,4vw,56px);
  padding:clamp(26px,3.5vw,40px) 0; border-bottom:1px solid var(--line); align-items:start;
}
@media (max-width:860px){.disc-row{grid-template-columns:minmax(0,1fr); gap:18px}}
.disc-head{display:grid; gap:10px; justify-items:start}
.disc-head .idx{font-family:var(--f-mono); font-size:.6875rem; color:var(--faint); letter-spacing:.1em}
.disc-head h2.display{font-size:clamp(1.375rem,2.8vw,2rem)}
.disc-body{display:grid; gap:16px}
.ticks{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.ticks li{
  position:relative; padding-left:20px; font-size:.9375rem; line-height:1.6; color:var(--dim);
}
.ticks li b{color:var(--ink); font-weight:600}
.ticks li::before{
  content:""; position:absolute; left:0; top:.62em; width:8px; height:1.5px; background:var(--accent);
}

/* ── engagement: model kind line, split columns, table ────── */
.eng .kind{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--amber); margin-top:-4px;
}
.split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  margin-top:clamp(20px,3vw,32px)}
@media (max-width:760px){.split{grid-template-columns:minmax(0,1fr)}}
.split-col{background:var(--surface); padding:clamp(20px,2.8vw,30px); display:grid; gap:12px;
  align-content:start; min-width:0}
.split-col .k{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--amber); margin:0}
.split-col p{font-size:.9375rem; line-height:1.64}

.tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:720px; font-size:.875rem}
caption{caption-side:bottom; text-align:left; padding:12px 16px; font-size:.75rem;
  color:var(--faint); line-height:1.55}
th,td{padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
thead th{
  font-family:var(--f-mono); font-weight:400; font-size:.625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dim); background:var(--surface-2); white-space:nowrap;
}
tbody tr{transition:background-color var(--t-fast) var(--ease)}
tbody tr:hover{background:var(--hover)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:600; color:var(--ink); white-space:nowrap}
td.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums;
  white-space:nowrap; color:var(--ink)}

/* ── process: gated stages ────────────────────────────────── */
.gates{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.gate{display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,3.5vw,44px);
  padding:clamp(24px,3.4vw,38px) 0; border-bottom:1px solid var(--line); align-items:start}
@media (max-width:680px){.gate{grid-template-columns:minmax(0,1fr); gap:10px}}
.gate-n .n{margin:0}
.gate-body{display:grid; gap:14px}
.gate-body h2.display{font-size:clamp(1.375rem,2.8vw,2rem)}
.gate-meta{display:flex; flex-wrap:wrap; gap:8px 20px}

/* ── three-up grid ────────────────────────────────────────── */
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g-3{grid-template-columns:minmax(0,1fr)}}

/* ── form: server-rendered states ─────────────────────────── */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.field label .opt{color:var(--faint); text-transform:none; letter-spacing:0; font-size:.6875rem}
.field [aria-invalid="true"]{border-color:var(--danger)}
.field [aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(255,122,102,.18)}
.err-t{font-size:.75rem; color:var(--danger); line-height:1.5}
.msg.err{background:rgba(255,122,102,.12); border-color:rgba(255,122,102,.4); color:var(--ink)}
.form-acts{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.done{display:grid; gap:14px; justify-items:start; align-content:start;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:clamp(24px,3.6vw,40px); box-shadow:var(--card-shadow)}
.done h2.display{font-size:clamp(1.5rem,3.4vw,2.25rem)}

/* ── closing call to action ───────────────────────────────── */
.closer{border-bottom:0}
.closer-in{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,48px);
  align-items:end; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(26px,4vw,48px); box-shadow:var(--card-shadow);
}
@media (max-width:760px){.closer-in{grid-template-columns:minmax(0,1fr); align-items:start}}
.closer-in > div:first-child{display:grid; gap:14px; align-content:start}
.closer-acts{display:flex; flex-wrap:wrap; gap:12px}

/* ── footer ───────────────────────────────────────────────── */
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.3fr) auto minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(22px,3.5vw,44px); padding-bottom:28px; border-bottom:1px solid var(--line);
}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-nm{font-size:.9375rem; color:var(--ink); font-weight:600}
.foot-mr{font-size:.8125rem; color:var(--dim); margin-top:4px}
.foot .k{
  font-family:var(--f-mono); font-size:.5625rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--faint); margin-bottom:10px;
}
.foot-nav{display:grid; gap:7px; align-content:start}
.foot-nav a{
  font-size:.8125rem; color:var(--dim); text-decoration:none; justify-self:start;
  transition:color var(--t-fast) var(--ease);
}
.foot-nav a:hover{color:var(--ink)}
.foot-blk p{font-size:.8125rem; line-height:1.7; color:var(--dim)}
.foot-blk a{color:var(--dim); text-decoration:none; transition:color var(--t-fast) var(--ease)}
.foot-blk a:hover{color:var(--accent-2)}
.legal{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.06em; color:var(--faint);
  line-height:1.8; padding-top:22px; max-width:96ch;
}

/* ── the lead block: what the firm sells ─────────────────────────────────
   Deliberately the loudest thing after the hero — its own ground, an accent
   ribbon along the top edge, and cards carrying a magenta rail. Everything
   below it is quieter by comparison, which is what makes this read first. */
.usp{
  position:relative; background:var(--paper-2); scroll-margin-top:76px;
  border-bottom:1px solid var(--line);
  padding-block:clamp(44px,6.5vw,84px);
}
.usp::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule)}
.usp::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(620px 340px at 12% 0%, rgba(255,45,135,.10), transparent 70%);
}
.usp > .wrap{position:relative}
.usp-head{display:flex; flex-direction:column; gap:14px; max-width:62ch;
  margin-bottom:clamp(28px,4vw,44px)}
.usp-head h2.display{font-size:clamp(1.875rem,4.6vw,3.125rem)}

.usp-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:980px){.usp-grid{grid-template-columns:minmax(0,1fr)}}
.usp-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:var(--r-lg);
  padding:clamp(22px,2.8vw,30px); display:flex; flex-direction:column; gap:12px;
  min-width:0; box-shadow:var(--card-shadow);
  transition:border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.usp-card:hover{transform:translateY(-2px); border-color:var(--line-2); border-left-color:var(--accent)}
.usp-card .no{
  font-family:var(--f-display); font-weight:200; font-size:1.75rem; line-height:1;
  color:var(--accent); letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.usp-card h3{
  font-family:var(--f-display); font-weight:200; font-size:clamp(1.125rem,2vw,1.4375rem);
  text-transform:uppercase; letter-spacing:.085em; line-height:1.18; color:var(--ink);
}
.usp-card .usp-lede{color:var(--ink); font-size:.9375rem; line-height:1.55; font-weight:600}
.usp-card p{font-size:.875rem; line-height:1.62}


/* anchored sections must clear the sticky header when jumped to */
.section[id]{scroll-margin-top:76px}

/* the USP band opens with its own 2px ribbon — no hairline directly above it */
.section:has(+ .usp){border-bottom:0}
/* likewise when the band opens the page directly under the hero */
.hero:has(+ main > .usp){border-bottom:0}

/* ── a plain bullet list in two columns, for flat specified lists ───────── */
.ticks.cols2{columns:2; column-gap:clamp(24px,5vw,64px)}
.ticks.cols2 li{break-inside:avoid; margin-bottom:9px}
@media (max-width:680px){.ticks.cols2{columns:1}}
/* group headings inside a split column sit tight to their list */
.split-col h3 + .ticks{margin-top:2px}