/* Arkē — site stylesheet
   Theme drawn from the arke wordmark: navy and white, near-black, and the orange-to-blue gradient in the a and e.
   Sora for display, Geist for reading, Geist Mono for the ledger. */

:root {
  --bg: #FBFBFD;
  --bg-2: #F3F3F8;
  --bg-3: #E8E8F1;
  --ink: #15173F;
  --ink-2: #40436A;
  --ink-3: #62648A;
  --rule: rgba(21, 23, 63, .14);
  --rule-2: rgba(21, 23, 63, .32);
  --band: #E8E8F1;
  --band-2: #DCDCE9;
  --on-band: #15173F;
  --on-band-2: rgba(21, 23, 63, .74);
  --on-band-3: rgba(21, 23, 63, .66);
  --band-rule: rgba(21, 23, 63, .14);
  --band-rule-2: rgba(21, 23, 63, .32);
  --acc: #F85000;
  --acc-ink: #B83A00;
  --violet: #6B12C4;
  --blue: #0040C8;
  --nav: rgba(251, 251, 253, .86);
  --grad: linear-gradient(135deg, #F85000 0%, #C01F8E 38%, #8400DC 64%, #0040C8 100%);
  --shadow: 0 24px 60px rgba(21, 23, 63, .14);
  --display: 'Sora', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --gutter: clamp(20px, 4.5vw, 64px);
  --max: 1360px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --logo-light: block;
  --logo-dark: none;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #060610;
  --bg-2: #0C0C1C;
  --bg-3: #16162B;
  --ink: #F5F4FA;
  --ink-2: rgba(245, 244, 250, .74);
  --ink-3: rgba(245, 244, 250, .52);
  --rule: rgba(245, 244, 250, .14);
  --rule-2: rgba(245, 244, 250, .32);
  --band: #0E0E23;
  --band-2: #181838;
  --on-band: #F5F4FA;
  --on-band-2: rgba(245, 244, 250, .74);
  --on-band-3: rgba(245, 244, 250, .5);
  --band-rule: rgba(245, 244, 250, .14);
  --band-rule-2: rgba(245, 244, 250, .32);
  --acc: #FF5A1F;
  --acc-ink: #FF7A45;
  --violet: #AE93FF;
  --blue: #6A8CFF;
  --nav: rgba(6, 6, 16, .78);
  --shadow: 0 24px 60px rgba(0, 0, 0, .5);
  --logo-light: none;
  --logo-dark: block;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #060610; --bg-2: #0C0C1C; --bg-3: #16162B;
    --ink: #F5F4FA; --ink-2: rgba(245, 244, 250, .74); --ink-3: rgba(245, 244, 250, .52);
    --rule: rgba(245, 244, 250, .14); --rule-2: rgba(245, 244, 250, .32);
    --band: #0E0E23; --band-2: #181838; --on-band: #F5F4FA; --on-band-2: rgba(245, 244, 250, .74); --on-band-3: rgba(245, 244, 250, .5);
    --band-rule: rgba(245, 244, 250, .14); --band-rule-2: rgba(245, 244, 250, .32);
    --acc: #FF5A1F; --acc-ink: #FF7A45; --violet: #AE93FF; --blue: #6A8CFF;
    --nav: rgba(6, 6, 16, .78); --shadow: 0 24px 60px rgba(0, 0, 0, .5);
    --logo-light: none; --logo-dark: block;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .35s, color .35s;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc-ink); }
img, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.4vw, 80px); line-height: 1; letter-spacing: -.04em; font-weight: 300; }
h2 { font-size: clamp(28px, 3.3vw, 50px); line-height: 1.06; letter-spacing: -.03em; font-weight: 300; }
h3 { font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -.015em; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
.lead { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; color: var(--ink-2); }
.body { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.body p + p, .prose p + p { margin-top: 1.1em; }
.prose { font-size: 17px; line-height: 1.65; color: var(--ink-2); max-width: 66ch; }
.small { font-size: 14px; color: var(--ink-3); line-height: 1.55; }
em, .em { font-style: normal; font-weight: inherit; }
.grad-text, .em, .tagline mark, .plate-idx { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* The macron label: a short gradient bar above a mono caption, after the ē in Arkē. */
.mac {
  display: inline-flex; flex-direction: column; gap: 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); line-height: 1.3;
}
.on-band .mac { color: var(--on-band-2); }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.sec { padding-block: clamp(72px, 9vw, 128px); }
.sec-tight { padding-block: clamp(48px, 6vw, 88px); }
.on-band { background: var(--band); color: var(--on-band); }
.on-band .body, .on-band .lead, .on-band .prose { color: var(--on-band-2); }
.on-band .small { color: var(--on-band-3); }
.on-band a:hover { color: var(--acc-ink); }
.on-bg2 { background: var(--bg-2); }
.on-bg3 { background: var(--bg-3); }
.rule-top { border-top: 1px solid var(--rule); }
.rule-bottom { border-bottom: 1px solid var(--rule); }
.on-band .rule-top { border-top-color: var(--band-rule); }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); row-gap: 40px; }
.c4 { grid-column: span 4; }
.c5 { grid-column: span 5; }
.c6 { grid-column: span 6; }
.c7 { grid-column: span 7; }
.c8 { grid-column: span 8; }
.c12 { grid-column: span 12; }
.c5.o1 { grid-column: 8 / span 5; }
.c6.o1 { grid-column: 7 / span 6; }
.c7.o1 { grid-column: 6 / span 7; }
.head-l { grid-column: 1 / span 4; }
.body-r { grid-column: 6 / span 7; }
.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.split-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); }
.stack { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.sticky { position: sticky; top: calc(var(--nav-h) + 24px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 15px 22px; border: 1px solid var(--ink); border-radius: 2px;
  background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; line-height: 1; letter-spacing: .005em;
  cursor: pointer; white-space: nowrap; position: relative; overflow: hidden; isolation: isolate;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.btn::before { content: ''; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .3s var(--ease); z-index: -1; }
.btn::after { content: '\2192'; font-family: var(--mono); font-size: 15px; transition: transform .3s var(--ease); }
.btn:hover { color: #fff; border-color: transparent; }
.btn:hover::before { opacity: 1; }
.btn:hover::after { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn.ghost:hover { border-color: transparent; color: #fff; }
.on-band .btn { background: var(--on-band); border-color: var(--on-band); color: var(--band); }
.on-band .btn:hover { color: #fff; border-color: transparent; }
.on-band .btn.ghost { background: transparent; color: var(--on-band); border-color: var(--band-rule-2); }
.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule-2); padding-bottom: 6px; color: var(--ink);
  transition: border-color .25s, color .25s;
}
.link::after { content: '\2192'; transition: transform .3s var(--ease); }
.link:hover { color: var(--acc-ink); border-color: var(--acc); }
.link:hover::after { transform: translateX(4px); }
.on-band .link { color: var(--on-band); border-color: var(--band-rule-2); }
.on-band .link:hover { color: var(--acc-ink); border-color: var(--acc); }

/* Hull: the ark, drawn as one stroke. */
.hull { width: 100%; height: auto; overflow: visible; }
.hull path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hull path.grad { stroke-width: 2; }
.hull.animate path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.hull.animate.draw path { animation: hull-draw 2.2s var(--ease) forwards; }
@keyframes hull-draw { to { stroke-dashoffset: 0; } }
.hull-rule { color: var(--rule-2); margin-block: -1px; }
.hull-rule svg { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.on-band .hull-rule { color: var(--band-rule-2); }

/* Navigation: a floating pill, centered, that tightens as the page scrolls. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; justify-content: center; padding: 14px 16px 0; pointer-events: none;
}
.nav-pill {
  pointer-events: auto; position: relative; width: 100%; max-width: 1220px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 10px 12px 10px 20px; border-radius: 18px;
  background: var(--nav); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--rule); box-shadow: 0 10px 34px rgba(21, 23, 63, .1);
  transition: box-shadow .4s, border-color .4s, background .4s, max-width .45s var(--ease), padding .45s var(--ease);
}
:root[data-theme="dark"] .nav-pill { box-shadow: 0 10px 34px rgba(0, 0, 0, .35); }
html.is-scrolled .nav-pill { max-width: 1080px; padding: 8px 10px 8px 18px; box-shadow: var(--shadow); border-color: var(--rule-2); }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--ink); padding: 6px 2px; }
.brand img { height: 26px; width: auto; transition: height .4s var(--ease); }
.brand-sub { font-family: var(--mono); font-size: 8.5px; letter-spacing: .36em; text-transform: uppercase; color: var(--ink-3); line-height: 1; padding-left: 3px; transition: font-size .4s var(--ease); }
.brand:hover { color: var(--ink); }
.brand .logo-light { display: var(--logo-light); }
.brand .logo-dark { display: var(--logo-dark); }
html.is-scrolled .brand img { height: 23px; }
html.is-scrolled .brand-sub { font-size: 8px; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 10px 13px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500; color: var(--ink-2); background: transparent; border: 0; cursor: pointer;
  white-space: nowrap; transition: color .2s, background .2s;
}
.nav-link:hover, .nav-item.open > .nav-link { color: var(--ink); background: var(--bg-2); }
.nav-item.current > .nav-link { color: var(--ink); }
/* The current page reads as a quiet rule, not a gradient: the nav shouldn't compete with the page. */
.nav-item.current > .nav-link::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; background: var(--rule-2); }
/* On an item with a chevron the rule would run past the label and under the arrow, so it
   stops short by the chevron and its gap: the padding, plus 7px, plus 7px. */
.nav-item.has-menu.current > .nav-link::after { right: calc(13px + 7px + 7px); }
.nav-link .chev { width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); opacity: .6; }
.nav-actions { display: flex; align-items: center; gap: 18px; justify-self: end; }
.nav-cta { padding: 12px 18px; font-size: 13.5px; transition: padding .4s var(--ease), color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
html.is-scrolled .nav-cta { padding: 11px 17px; }
.theme-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); flex: none;
  transition: border-color .25s, color .25s, width .4s var(--ease), height .4s var(--ease);
}
html.is-scrolled .theme-btn { width: 37px; height: 37px; }
.theme-btn:hover { border-color: var(--ink); color: var(--ink); }
.theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-btn .i-moon { display: none; }
:root[data-theme="dark"] .theme-btn .i-moon { display: block; }
:root[data-theme="dark"] .theme-btn .i-sun { display: none; }
.menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 260px;
  background: var(--bg); border: 1px solid var(--rule); box-shadow: var(--shadow);
  padding: 10px; display: none; z-index: 5; border-radius: 14px;
}
.nav-item.mega { position: static; }
.menu.wide { min-width: 0; width: auto; left: 16px; right: 16px; top: calc(100% + 8px); display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; }
.nav-item.open > .menu { display: block; }
.nav-item.open > .menu.wide { display: grid; }
.menu a { display: block; padding: 11px 12px; font-size: 14.5px; border-radius: 2px; color: var(--ink-2); }
.menu a:hover { background: var(--bg-2); color: var(--ink); }
.menu-col { padding: 18px 14px; border-right: 1px solid var(--rule); }
.menu-col:last-child { border-right: 0; }
.menu-col .icon { margin-bottom: 12px; }
.menu-col .pillar { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; color: var(--ink); padding: 4px 12px 10px; display: block; }
.menu-col .pillar:hover { color: var(--acc-ink); background: transparent; }
.menu-col a.sub { font-size: 13.5px; padding: 7px 12px; color: var(--ink-2); }
/* Six top-level items need about 1000px of pill. Under that the links hand over to the
   burger and the drawer, which carries the same sections. */
@media (max-width: 1040px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: flex; }
}
.burger { display: none; margin-left: 2px; width: 40px; height: 40px; border: 1px solid var(--rule-2); background: transparent; border-radius: 10px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.burger span { width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
html.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
html.menu-open .burger span:nth-child(2) { opacity: 0; }
html.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.drawer { display: none; position: fixed; inset: 0; z-index: 80; background: var(--bg); overflow-y: auto; padding: calc(var(--nav-h) + 16px) var(--gutter) 40px; }
html.menu-open .drawer { display: block; }
html.menu-open { overflow: hidden; }
.drawer-group { border-top: 1px solid var(--rule); padding: 18px 0; }
.drawer-group .mac { margin-bottom: 8px; font-size: 11px; }
.drawer-group a { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; font-family: var(--display); font-size: 24px; letter-spacing: -.01em; }
.drawer-group a.sub { font-family: var(--sans); font-size: 15px; color: var(--ink-2); padding: 6px 0 6px 14px; }
.drawer .btn { margin-top: 20px; width: 100%; justify-content: center; }

/* Animated icons: small looping motifs -- the four service marks, the ledger marks, the ark. */
.icon { display: inline-block; position: relative; flex: none; line-height: 1; color: var(--acc-ink); }
.on-band .icon { color: var(--acc); }
@keyframes icon-bar { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@keyframes icon-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes icon-unlock { 0%, 55%, 100% { transform: rotate(0); } 75% { transform: rotate(-22deg); } }
@keyframes icon-flip { 0%, 55% { transform: rotateY(0); } 75% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
@keyframes icon-stack { 0%, 8% { transform: translateY(-.3em); opacity: 0; } 30%, 88% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes icon-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Page top */
main { padding-top: var(--nav-h); }
.crumbs { display: flex; flex-wrap: wrap; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.crumbs a { display: inline-block; min-height: 24px; line-height: 24px; }
.crumbs a:hover { color: var(--acc-ink); }
.crumbs span::before { content: '/'; margin-right: 10px; color: var(--rule-2); }
.crumbs span:first-child::before { content: none; }

/* Home hero */
.hero { position: relative; overflow: hidden; padding-top: clamp(64px, 9vw, 128px); }
.hero .h-title { max-width: 13ch; font-size: clamp(40px, 6.6vw, 104px); }
.hero-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; margin-top: clamp(36px, 5vw, 64px); }
.hero-row .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-self: end; }
.ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); position: relative; }
.ledger > div { padding: 26px 24px 26px 0; border-right: 1px solid var(--rule); }
.ledger > div:last-child { border-right: 0; }
.ledger > div + div { padding-left: 24px; }
.figure { font-family: var(--display); font-size: clamp(38px, 4.4vw, 64px); line-height: 1; letter-spacing: -.03em; font-weight: 300; font-variant-numeric: lining-nums; }
.figure sup { font-size: .45em; vertical-align: top; top: .35em; position: relative; color: var(--acc); }
.ledger .mono { color: var(--ink-3); margin-top: 12px; display: block; }
.on-band .ledger { border-top-color: var(--band-rule-2); }
.on-band .ledger > div { border-right-color: var(--band-rule); }
.on-band .ledger .mono { color: var(--on-band-3); }

/* Index strip: numbered, ruled, no icons */
.index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.index > a { display: flex; flex-direction: column; gap: 40px; padding: 28px 24px 30px 0; border-right: 1px solid var(--rule); color: var(--ink); transition: background .3s; position: relative; }
.index > a + a { padding-left: 24px; }
.index > a:last-child { border-right: 0; }
.index > a:hover { background: var(--bg-2); color: var(--ink); }
.index .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--acc-ink); }
.index h3 { font-size: clamp(20px, 1.7vw, 24px); margin-bottom: 10px; }
.index p { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.index .go { margin-top: auto; }

/* Ruled rows (lists that read like a ledger) */
.rows { border-top: 1px solid var(--rule-2); }
.row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.row .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--acc-ink); padding-top: .35em; }
.row .txt { font-family: var(--display); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -.01em; }
.row.link-row { transition: padding-left .3s var(--ease); }
.row.link-row:hover { padding-left: 10px; }
.on-band .rows { border-top-color: var(--band-rule-2); }
.on-band .row { border-bottom-color: var(--band-rule); }

/* Bulleted lists with gradient squares */
.bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bullets li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.bullets li::before { content: ''; position: absolute; left: 0; top: .68em; width: 12px; height: 2px; background: var(--acc); }
.on-band .bullets li { color: var(--on-band-2); }
.bullets.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 14px; }

/* Accordion services (home 05) */
.acc { border-top: 1px solid var(--rule-2); }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 20px; align-items: baseline; padding: 26px 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-3); transition: color .3s; }
.acc summary h3 { font-size: clamp(24px, 2.4vw, 34px); color: var(--ink-3); transition: color .3s; }
.acc summary .plus { font-family: var(--mono); font-size: 20px; color: var(--ink-3); justify-self: end; transition: transform .35s var(--ease), color .3s; line-height: 1; }
.acc details[open] summary .num, .acc details[open] summary h3, .acc details[open] summary .plus { color: var(--ink); }
.acc details[open] summary .num { color: var(--acc-ink); }
.acc details[open] summary .plus { transform: rotate(45deg); }
.acc summary:hover h3 { color: var(--ink); }
.acc .acc-body { padding: 0 0 34px 76px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; max-width: 70ch; }
.acc .acc-body p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--rule); padding-top: 18px; width: 100%; margin: 0; }
.terms dt { font-family: var(--display); font-size: 20px; margin-bottom: 6px; }
.terms dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* Big band (Partner with the best) */
.band { position: relative; overflow: hidden; isolation: isolate; }

/* A solid band blocks the page ambient, so the CTA bands carry their own. They do
   not repeat the page's contours: they get the ridgeline field, one surface sliced
   front to back, running into the space the headline leaves. Same two-plane trick,
   a blurred copy in front of a crisp one. */
.band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 78% at 84% 26%, rgba(248, 80, 0, var(--band-a)), transparent 70%),
    radial-gradient(46% 70% at 62% 96%, rgba(107, 18, 196, var(--band-b)), transparent 72%),
    radial-gradient(44% 66% at 2% 84%, rgba(0, 64, 200, var(--band-c)), transparent 74%),
    radial-gradient(120% 110% at 50% 40%, transparent 44%, var(--amb-sink) 100%);
}
.band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/band.svg') right bottom / cover no-repeat;
  opacity: var(--band-line);
}
/* The animated copy, drawn in script. It replaces both static layers rather than
   sitting on top of them, so the field never shows a moving line over a frozen one. */
.band > canvas.ridge {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  width: 100%; height: 100%; opacity: var(--band-line);
  /* The same falloff band.svg carries, so the swell stays a horizon at the foot of
     the band instead of climbing into the headline. Sideways falloff is already in
     the stroke gradient's alpha. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .72) 62%, #000 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 30%, rgba(0, 0, 0, .72) 62%, #000 100%);
}
.band.ridge-live::after, .band.ridge-live > .wrap::before { display: none; }

.band > .wrap { position: relative; }
.band > .wrap::before {
  content: ''; position: absolute; inset: -40% -30%; z-index: -1; pointer-events: none;
  background: url('/assets/band.svg') right bottom / cover no-repeat;
  opacity: var(--band-near); filter: blur(4px);
}
:root { --band-a: .1; --band-b: .07; --band-c: .07; --band-line: .26; --band-near: .08; }
:root[data-theme="dark"] { --band-a: .26; --band-b: .2; --band-c: .17; --band-line: .34; --band-near: .13; }

/* Plain content sections are transparent, so they all showed the same fixed crop of
   the page contours and the drawing read as one flat wall behind the whole site.
   Every other one now carries the current instead, tagged in script because which
   sections those are depends on what else the page is built from, not on their
   position among their siblings. It is anchored to the section rather than to the
   viewport, so it arrives and leaves with the block.
   The opaque second surface takes it whatever its position. */
.on-bg2, .field-flow { position: relative; isolation: isolate; }
.on-bg2::before, .field-flow::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url('/assets/flow.svg') center / cover no-repeat;
  opacity: var(--flow-line);
}
/* Every second one it lands on is mirrored, so a long page does not repeat itself. */
.field-flow.field-alt::before { background-position: left top; transform: scaleX(-1); }
:root { --flow-line: .26; }
:root[data-theme="dark"] { --flow-line: .3; }

.band .shout { font-family: var(--display); font-weight: 300; font-size: clamp(48px, 10.5vw, 168px); line-height: .92; letter-spacing: -.05em; text-transform: uppercase; }
.band .shout .em { text-transform: none; font-weight: 400; }
.band-hull { position: absolute; right: -10%; bottom: -8%; width: 60%; color: var(--band-rule-2); pointer-events: none; }

/* Plate: the typographic stand-in for a hero photograph. It is a tile sitting on the page,
   not an inverted section, so it takes its surface from the theme the way the mono-tile does.
   Hard-coding it to the band colour left a black box in the middle of every light page. */
.plate {
  position: relative; background: var(--bg-3); overflow: hidden;
  aspect-ratio: 4 / 5; padding: 28px; display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--rule);
}
.plate .plate-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.plate .plate-idx { font-family: var(--display); font-size: clamp(64px, 8vw, 128px); line-height: .85; letter-spacing: -.04em; font-weight: 300; }
.plate .plate-cap { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.01em; max-width: 12ch; }
.plate .hull { position: absolute; left: -10%; right: -10%; bottom: 18%; color: var(--rule-2); width: 120%; }
.plate .hull svg { width: 100%; height: auto; }
.plate.wide { aspect-ratio: auto; min-height: 220px; flex-direction: row; align-items: flex-end; }
.plate.wide .plate-idx { font-size: clamp(56px, 6vw, 96px); }

/* Tagline band: two lines, the second in the brand gradient */
.tagline { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 3.2vw, 48px); line-height: 1.12; letter-spacing: -.03em; max-width: 26ch; }
.tagline .l2 { font-weight: 400; }
.tagline mark { padding: 0; }

/* Question plate (the problem-framing overlay text) */
.qplate { background: var(--bg-3); padding: 32px 28px; min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.qplate .q { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -.015em; }

/* Three columns, ruled, numbered */
.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); }
.cols > div, .cols > a { padding: 30px 28px 34px 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; }
/* :not() rather than * + *, which loses on specificity to the padding shorthand above. */
.cols > *:not(:first-child) { padding-left: 28px; }
.cols > *:last-child { border-right: 0; }
.cols .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--acc-ink); }
.cols h3 { font-size: clamp(22px, 1.9vw, 27px); }
.cols p { font-size: 15.5px; line-height: 1.58; color: var(--ink-2); }
.on-band .cols { border-top-color: var(--band-rule-2); }
.on-band .cols > * { border-right-color: var(--band-rule); }
.on-band .cols p { color: var(--on-band-2); }
.cols.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols a.cell { color: inherit; transition: background .3s; }
.cols a.cell:hover { background: var(--bg-2); color: inherit; }
.cols a.cell:hover .link { color: var(--acc-ink); border-color: var(--acc); }
.cols a.cell:hover .link::after { transform: translateX(4px); }
.on-band .cols a.cell:hover { background: var(--band-2); }

/* Stats bar */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats > div { padding: 30px 24px 32px 0; border-right: 1px solid var(--rule); }
.stats > div + div { padding-left: 24px; }
.stats > div:last-child { border-right: 0; }
.stats .figure { font-size: clamp(34px, 3.6vw, 56px); }
.stats .lbl { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
.stats-head { font-family: var(--display); font-weight: 300; font-size: 20px; color: var(--ink-2); margin-bottom: 28px; }

/* Included: two numbered columns */
.incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); }
.incl ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.incl li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--ink-2); align-items: baseline; }
.incl li .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--acc-ink); }

/* Steps (narrative pages) */
.steps { border-top: 1px solid var(--rule-2); }
.step { display: grid; grid-template-columns: 72px minmax(0, 5fr) minmax(0, 7fr); gap: 24px; padding: 30px 0; border-bottom: 1px solid var(--rule); }
.step .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--acc-ink); padding-top: .5em; }
.step h3 { font-size: clamp(22px, 2vw, 28px); }
.step h3 a:hover { color: var(--acc-ink); }
.step .body { font-size: 16px; }
.steps.plain .step { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* People */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.person { display: flex; flex-direction: column; gap: 16px; }
.mono-tile {
  aspect-ratio: 4 / 5; background: var(--bg-2); border: 1px solid var(--rule);
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 20px; position: relative; overflow: hidden;
  transition: border-color .3s;
}
.mono-tile .ini { font-family: var(--display); font-weight: 300; font-size: clamp(72px, 8vw, 128px); line-height: .8; letter-spacing: -.05em; color: var(--ink); }
.mono-tile .mono { position: absolute; top: 18px; left: 20px; color: var(--ink-3); }
.mono-tile .hull { position: absolute; right: -30%; top: 8%; width: 90%; color: var(--rule-2); }
.person:hover .mono-tile { border-color: var(--acc); }
/* A leader photo fills the tile in place of the initials. Two crops are shipped, one per
   theme surface, so the subject's cut-out background matches the page instead of fighting it. */
.mono-tile.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mono-tile .photo-dark { display: none; }
[data-theme="dark"] .mono-tile .photo-light { display: none; }
[data-theme="dark"] .mono-tile .photo-dark { display: block; }
.person h3 { font-size: 23px; }
.person .role { font-size: 14.5px; color: var(--ink-3); line-height: 1.45; margin-top: 4px; }
.principal { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.principal .mono-tile { max-width: 380px; }
.leader { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); padding: 48px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.leader h3 { font-size: clamp(26px, 2.4vw, 36px); }
.leader .role { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); line-height: 1.6; margin-top: 10px; }
.leader .body { font-size: 16px; }

/* Background. Colour first, then the drawn element on top of it in two planes.
   The far plane is the field at rest: small, thin, faint. The near plane is the same
   field pushed forward, scaled up and thrown out of focus, so the two read as
   different distances rather than as one flat drawing. A vignette sinks the corners
   and the grain sits over everything. Nothing is a grid, and nothing reacts to the
   pointer or the scroll. */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(48vw 46vw at 2% -6%, rgba(248, 80, 0, var(--amb-a)), transparent 62%),
    radial-gradient(40vw 42vw at 80% 4%, rgba(107, 18, 196, var(--amb-c)), transparent 64%),
    radial-gradient(58vw 54vh at 100% 102%, rgba(0, 64, 200, var(--amb-b)), transparent 66%);
}
.ambient span {
  position: absolute; inset: 0; display: block;
  background: url('/assets/ambient.svg') center / cover no-repeat;
}
/* The two planes breathe on different clocks. Because they drift apart and back
   together rather than in step, the gap between them keeps reading as distance. */
.amb-far {
  opacity: var(--amb-far);
  transform-origin: 12% 26%;
  animation: amb-far 47s var(--ease) infinite;
}
.amb-near {
  opacity: var(--amb-near);
  transform: scale(1.75) translate(3%, -4%);
  transform-origin: 18% 30%;
  filter: blur(3px);
  animation: amb-near 34s var(--ease) infinite;
}
@keyframes amb-far {
  0%, 100% { transform: scale(1); opacity: var(--amb-far); }
  50% { transform: scale(1.06); opacity: calc(var(--amb-far) * .76); }
}
@keyframes amb-near {
  0%, 100% { transform: scale(1.75) translate(3%, -4%); opacity: var(--amb-near); }
  50% { transform: scale(1.95) translate(0%, -7%); opacity: calc(var(--amb-near) * 1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .amb-far, .amb-near { animation: none; }
}

/* Vignette. The corners go down, which is what makes the planes sit at depth instead
   of floating on the same surface. */
.ambient::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 38%, transparent 42%, var(--amb-sink) 100%);
}

/* Grain, tiled. It is what keeps the large fields from posterising on cheap panels. */
.ambient::after {
  content: ''; position: absolute; inset: 0; opacity: var(--amb-grain);
  background-image: var(--grain);
  background-size: 180px 180px;
}

:root {
  --amb-a: .085; --amb-b: .075; --amb-c: .05;
  --amb-far: .34; --amb-near: .14; --amb-sink: rgba(21, 23, 63, .07); --amb-grain: .03;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --amb-a: .15; --amb-b: .16; --amb-c: .11;
  --amb-far: .38; --amb-near: .17; --amb-sink: rgba(0, 0, 0, .34); --amb-grain: .05;
}

/* Pull quote */
.quote { font-family: var(--display); font-weight: 300; font-size: clamp(24px, 2.7vw, 40px); line-height: 1.2; letter-spacing: -.02em; max-width: 30ch; }
.quote::before { content: '\201C'; color: var(--acc); }
.quote::after { content: '\201D'; color: var(--acc); }
.cite { margin-top: 24px; }

/* Forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: span 2; }
.field label { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
  padding: 10px 0 12px; font-family: var(--sans); font-size: 17px; color: var(--ink); outline: none;
  transition: border-color .25s;
}
.field input:focus, .field textarea:focus { border-color: var(--acc); }
.field textarea { min-height: 120px; resize: vertical; }
.form .btn { grid-column: span 2; justify-self: start; margin-top: 8px; }
.form-note { grid-column: span 2; }
.subscribe { display: flex; gap: 0; border: 1px solid var(--band-rule-2); padding: 6px; max-width: 520px; }
.subscribe input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--on-band); font-family: var(--sans); font-size: 16px; padding: 12px 16px; }
.subscribe input::placeholder { color: var(--on-band-3); }
.subscribe .btn { padding: 14px 20px; }

/* Definition list (contact details) */
.details { border-top: 1px solid var(--rule-2); }
.details > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.details .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.details .v { font-size: 17px; }
.details .v a { display: inline-block; min-height: 24px; border-bottom: 1px solid var(--rule-2); }
.details .v a:hover { border-color: var(--acc); }

/* Legal documents */
.doc { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.toc { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--rule-2); padding-top: 14px; }
.toc a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 8px 0; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.toc a .num { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--acc-ink); padding-top: .25em; }
.doc-sec { padding: 40px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-h) + 20px); }
.doc-sec:first-child { padding-top: 0; }
.doc-sec h2 { font-size: clamp(26px, 2.4vw, 36px); margin-bottom: 20px; }
.doc-sec .prose { max-width: 72ch; }
.doc-sec dl { margin: 20px 0 0; border-top: 1px solid var(--rule); }
.doc-sec dl > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.doc-sec dt { font-weight: 600; color: var(--ink); }
.doc-sec dd { margin: 0; }
.doc-sec dl > div.solo { grid-template-columns: 1fr; }
.doc-sec dl > div.solo dd { position: relative; padding-left: 22px; }
.doc-sec dl > div.solo dd::before { content: ''; position: absolute; left: 0; top: .68em; width: 12px; height: 2px; background: var(--acc); }

/* Footer */
.footer { background: var(--band); color: var(--on-band); position: relative; }
.footer .ledger > div { padding-block: 44px; }
.footer .figure { font-size: clamp(44px, 5vw, 76px); }
.ledger-icon { margin-bottom: 14px; }
.footer-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding: 72px 0 64px; border-top: 1px solid var(--band-rule); margin-top: 32px; }
.footer-cols .mac { color: var(--on-band-3); margin-bottom: 14px; font-size: 11px; }
.footer-cols a { display: block; padding: 5px 0; min-height: 24px; font-size: 14.5px; color: var(--on-band-2); }
.footer-cols a:hover { color: var(--acc-ink); }
.footer .brand img { height: 34px; }
.footer .brand-sub { font-size: 10.5px; color: var(--on-band-3); }
/* The footer band follows the theme, so the wordmark has to as well: the dark-surface
   logo is the white one, and pinning it here left it invisible on the light band. */
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; padding: 22px 0 32px; border-top: 1px solid var(--band-rule); font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--on-band-3); }
.footer-bottom nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-bottom a { display: inline-block; min-height: 24px; line-height: 24px; }
.footer-bottom a:hover { color: var(--acc-ink); }

/* Motion: hero line-rise, scroll reveals, and a numbered stagger for repeating rows. */
/* The clip box that hides the line before it rises has to clear the descenders too.
   h1 runs at line-height 1, so Sora's tails sit below the content box: .06em left
   about 3px of every g, y and p shaved off the last line. */
.rise > .line { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.rise > .line > span { display: block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; }
.rise > .line:nth-child(2) > span { animation-delay: .08s; }
.rise > .line:nth-child(3) > span { animation-delay: .16s; }
@keyframes rise { to { transform: none; } }
.fade-in { animation: fade .9s var(--ease) both; animation-delay: .35s; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
[data-reveal].revealed { opacity: 1; transform: none; }
[data-stagger]:nth-child(1) { transition-delay: 0ms; }
[data-stagger]:nth-child(2) { transition-delay: 70ms; }
[data-stagger]:nth-child(3) { transition-delay: 140ms; }
[data-stagger]:nth-child(4) { transition-delay: 210ms; }
[data-stagger]:nth-child(5) { transition-delay: 280ms; }
[data-stagger]:nth-child(6) { transition-delay: 350ms; }
[data-parallax] { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise > .line > span { transform: none; animation: none; }
  .fade-in { animation: none; }
  .hull.animate path { stroke-dashoffset: 0; animation: none; }
  .btn::after, .link::after { transition: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .icon *[style*="animation"] { animation: none !important; }
  .seg-panel, .segs-row { animation: none; }
  .segs.is-animating { transition: none; }
}

/* Responsive */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .burger { display: flex; }
  .grid { row-gap: 28px; }
  .head-l, .body-r, .c4, .c5, .c6, .c7, .c8, .c5.o1, .c6.o1, .c7.o1 { grid-column: span 12; }
  .split-2, .split-3 { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .hero-row { grid-template-columns: 1fr; }
  .hero-row .actions { justify-self: start; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .index > a { border-bottom: 1px solid var(--rule); padding-left: 0; }
  .index > a:nth-child(2n) { border-right: 0; padding-left: 24px; }
  .index > a:nth-child(2n+1) { padding-right: 24px; border-right: 1px solid var(--rule); }
  .index > a:nth-last-child(-n+2) { border-bottom: 0; }
  .cols, .cols.four { grid-template-columns: 1fr; }
  .cols > div, .cols > a, .cols > *:not(:first-child) { padding-left: 0; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .cols.two { grid-template-columns: 1fr; }
  .stats, .stats.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div:nth-child(2n) { border-right: 0; }
  .stats > div:nth-child(2n+1) { padding-left: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .incl { grid-template-columns: 1fr; }
  .incl ol + ol { border-top: 0; }
  .step { grid-template-columns: 56px minmax(0, 1fr); }
  .step .body { grid-column: 2; }
  .steps.plain .step { grid-template-columns: 1fr; }
  .steps.plain .step .body { grid-column: 1; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principal, .leader, .doc { grid-template-columns: 1fr; }
  .leader .mono-tile { max-width: 320px; }
  .toc { display: none; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cols > div:first-child { grid-column: span 2; }
  .terms { grid-template-columns: 1fr; }
  .acc .acc-body { padding-left: 0; }
  .plate { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
  :root { --nav-h: 64px; }
  .brand img { height: 22px; }
  .ledger, .stats, .stats.three { grid-template-columns: 1fr; }
  .ledger > div, .ledger > div + div, .stats > div, .stats > div + div { padding-left: 0; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .ledger > div:last-child, .stats > div:last-child { border-bottom: 0; }
  .on-band .ledger > div { border-bottom-color: var(--band-rule); }
  .index { grid-template-columns: 1fr; }
  .index > a, .index > a:nth-child(2n), .index > a:nth-child(2n+1) { border-right: 0; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--rule); }
  .index > a:last-child { border-bottom: 0; }
  .bullets.two { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .field.full, .form .btn, .form-note { grid-column: span 1; }
  .people { grid-template-columns: 1fr; }
  .details > div { grid-template-columns: 1fr; gap: 6px; }
  .footer-cols { grid-template-columns: 1fr; }
  .footer-cols > div:first-child { grid-column: span 1; }
  .row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .band .shout { font-size: clamp(48px, 15vw, 96px); }
  .subscribe { flex-direction: column; gap: 6px; }
  .subscribe .btn { justify-content: center; }
}

/* Segments: the five client types. A ruled row of tiles opens into one panel at a time,
   the plate visual left and the copy right, with the other four collapsed to edge strips. */
.segs { border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.segs-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.seg-tile {
  display: flex; flex-direction: column; gap: 40px; min-height: 260px; text-align: left;
  padding: 28px 24px 30px 0; border: 0; border-right: 1px solid var(--rule);
  background: transparent; color: var(--ink); font-family: var(--sans); cursor: pointer;
  transition: background .3s;
}
.seg-tile + .seg-tile { padding-left: 24px; }
.seg-tile:last-child { border-right: 0; }
.seg-tile:hover { background: var(--bg-2); }
.seg-tile .num { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--acc-ink); }
.seg-tile .seg-name { font-family: var(--display); font-size: clamp(20px, 1.7vw, 25px); line-height: 1.2; letter-spacing: -.015em; }
.seg-tile .go { margin-top: auto; }
.seg-tile:hover .link { color: var(--acc-ink); border-color: var(--acc); }
.seg-tile:hover .link::after { transform: translateX(4px); }

.seg-panel { display: flex; align-items: stretch; background: var(--bg-2); }
.seg-strips { display: flex; flex: none; }
.seg-strip {
  flex: 0 0 56px; width: 56px; padding: 24px 0; cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center;
  background: transparent; border: 0; border-right: 1px solid var(--rule); color: var(--ink-2);
  transition: background .3s, color .25s;
}
.seg-strips.after .seg-strip { border-right: 0; border-left: 1px solid var(--rule); }
.seg-strip:hover { background: var(--bg-3); color: var(--ink); }
.seg-strip span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 14.5px; line-height: 1; }

.seg-main { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* The visual follows the mono-tile convention, not the plate: it takes its surface from the
   theme, so it stays light in light mode instead of sitting as a black block on the page. */
.seg-visual {
  position: relative; overflow: hidden; padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  background: var(--bg-3); border-right: 1px solid var(--rule);
}
.seg-visual .seg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.seg-visual .mono { color: var(--ink-3); }
.seg-visual .seg-idx { font-family: var(--display); font-size: clamp(64px, 8vw, 128px); line-height: .85; letter-spacing: -.04em; font-weight: 300; }
.seg-visual .seg-cap { font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.01em; max-width: 12ch; }
.seg-visual .hull { position: absolute; left: -10%; right: -10%; bottom: 18%; width: 120%; color: var(--rule-2); }
.seg-visual .hull svg { width: 100%; height: auto; }
.seg-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding: clamp(28px, 4vw, 64px); }
.seg-body .seg-title { font-size: clamp(28px, 3vw, 44px); font-weight: 300; letter-spacing: -.03em; }
.seg-body .prose { font-size: 16.5px; }
.seg-body .rows { width: 100%; }
/* The panel column is narrow at every width once the strips take their share, and some CTA
   labels are long, so these buttons wrap instead of running past the content edge. */
.seg-body .btn { white-space: normal; max-width: 100%; line-height: 1.3; }
.seg-body .row { padding: 18px 0; }
.seg-body .row .txt { font-size: 19px; }
.seg-close {
  position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--rule-2); background: var(--bg-2); color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 20px; line-height: 1; transition: border-color .25s, color .25s;
}
.seg-close:hover { border-color: var(--ink); color: var(--ink); }

/* Opening and closing: whichever view arrives fades up, while site.js eases the module's
   height between the two, so the row and the panel never swap with a jump. */
.segs.is-animating { overflow: hidden; transition: height .45s var(--ease); }
.seg-panel, .segs-row { animation: seg-in .45s var(--ease) both; }
@keyframes seg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .segs-row { grid-auto-flow: row; grid-template-columns: 1fr; }
  .seg-tile { min-height: 0; gap: 14px; padding: 22px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .seg-tile + .seg-tile { padding-left: 0; }
  .seg-tile:last-child { border-bottom: 0; }
  .seg-panel { flex-direction: column; }
  .seg-strips { flex-wrap: wrap; }
  .seg-strip { flex: 1 1 auto; width: auto; padding: 14px 16px; align-items: center; }
  .seg-strips.before .seg-strip { border-bottom: 1px solid var(--rule); }
  .seg-strips.after .seg-strip { border-left: 0; border-top: 1px solid var(--rule); }
  .seg-strip:last-child { border-right: 0; }
  .seg-strip span { writing-mode: horizontal-tb; transform: none; }
  .seg-main { grid-template-columns: 1fr; }
  .seg-visual { aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid var(--rule); }
  .seg-close { top: 12px; right: 12px; }
  /* Stacked, the close control sits over the visual, so the index numeral steps aside. */
  .seg-visual .seg-top { padding-right: 40px; }
}
/* The hidden attribute has to beat the display rules above. */
.segs-row[hidden], .seg-panel[hidden] { display: none; }

/* ============================================================================
   Segment pages: the four Who We Work With destinations.
   Every surface below is a theme token, so each module inverts with the rest of
   the site rather than carrying a palette of its own. The scrim is derived from
   --bg, which means it follows the theme without a second definition.
   ============================================================================ */
:root { --scrim: color-mix(in srgb, var(--bg) 86%, transparent); }

.anchor-sec { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* The stand-in visual. Same treatment as the plate and the mono-tile: a themed
   surface with the hull drawn across it, no photography. */
.svis {
  position: relative; overflow: hidden; background: var(--bg-3); border: 1px solid var(--rule);
  padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; justify-content: space-between;
  gap: 32px; min-height: 180px; transition: border-color .3s;
}
.svis .svis-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.svis .mono { color: var(--ink-2); }
.svis-idx { font-family: var(--display); font-weight: 300; font-size: clamp(44px, 5.4vw, 92px); line-height: .85; letter-spacing: -.04em; }
.svis-cap { font-family: var(--display); font-weight: 300; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.01em; max-width: 14ch; }
.svis .hull { position: absolute; left: -10%; right: -10%; bottom: 16%; width: 120%; color: var(--rule-2); }
.svis .hull svg { width: 100%; height: auto; }
.svis.tall { aspect-ratio: 4 / 5; }
.svis.squat { aspect-ratio: 4 / 3; }
.svis.wide { min-height: clamp(240px, 28vw, 380px); }

/* Hero with an overlay card. The card carries the headline, the lead and the
   anchor links into the page's own sections. It sits on the visual over a scrim
   derived from --bg, so the text keeps --ink in both themes rather than being
   pinned to one colour. */
.ohero { position: relative; margin-top: clamp(24px, 3vw, 40px); }
.ohero .svis { min-height: clamp(220px, 30vw, 420px); }
.ohero-card {
  background: var(--bg); background: var(--scrim);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--rule); box-shadow: var(--shadow);
  padding: clamp(24px, 2.6vw, 40px);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: start;
}
.ohero-copy { display: flex; flex-direction: column; gap: 18px; }
.ohero-copy h1 { font-size: clamp(32px, 3.6vw, 56px); }
.ohero-copy .lead { font-size: clamp(17px, 1.25vw, 19px); max-width: 30ch; }
.ohero-nav { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ohero-links { display: flex; flex-direction: column; width: 100%; border-top: 1px solid var(--rule); }
.ohero-links a {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.35; color: var(--ink);
  transition: padding-left .25s var(--ease), color .25s;
}
.ohero-links a::after { content: '\2193'; font-family: var(--mono); font-size: 14px; color: var(--ink-3); transition: transform .3s var(--ease), color .25s; }
.ohero-links a:hover { padding-left: 8px; color: var(--acc-ink); }
.ohero-links a:hover::after { transform: translateY(3px); color: var(--acc); }
.ohero-nav .btn { align-self: stretch; justify-content: center; }
@media (min-width: 961px) {
  .ohero-card { position: relative; width: min(100%, 1040px); margin: clamp(-120px, -9vw, -64px) auto 0; }
}
@media (max-width: 960px) {
  .ohero-card { grid-template-columns: 1fr; border-top: 0; }
  .ohero-copy h1 { font-size: clamp(30px, 7vw, 44px); }
}

/* Expandable solution cards: collapsed shows the title and the client questions,
   open reveals the service list. */
.xcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.xcard { border: 1px solid var(--rule); background: var(--bg); transition: border-color .3s, background .3s; }
.xcard:hover { border-color: var(--rule-2); }
.xcard[open] { border-color: var(--ink); background: var(--bg-2); }
.xcard > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 18px; padding-bottom: 22px; }
.xcard > summary::-webkit-details-marker { display: none; }
.xcard > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: -3px; }
.xcard .svis { border: 0; border-bottom: 1px solid var(--rule); min-height: 0; aspect-ratio: 16 / 10; }
.xcard h3, .xq, .xcard-more, .xcard-body { padding-inline: clamp(18px, 1.6vw, 24px); }
.xq { display: flex; flex-direction: column; gap: 10px; }
.xq .q { position: relative; display: block; padding-left: 24px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.xq .q::before { content: ''; position: absolute; left: 0; top: .62em; width: 12px; height: 2px; background: var(--acc); }
.xcard-more { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); transition: color .25s; }
.xcard-more .plus { font-size: 18px; line-height: 1; transition: transform .35s var(--ease); }
.xcard[open] .xcard-more { color: var(--ink); }
.xcard[open] .xcard-more .plus { transform: rotate(45deg); }
.xcard > summary:hover .xcard-more { color: var(--ink); }
.xcard-body { padding-bottom: clamp(20px, 2vw, 26px); display: flex; flex-direction: column; gap: 14px; }

/* Service lists: an item with no page of its own renders as plain text. */
.svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); width: 100%; }
.svc li { border-bottom: 1px solid var(--rule); }
.svc a, .svc .is-text { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 0; font-size: 15px; line-height: 1.4; }
.svc a { color: var(--ink); transition: padding-left .25s var(--ease), color .25s; }
.svc a::after { content: '\2192'; font-family: var(--mono); color: var(--ink-3); transition: transform .3s var(--ease), color .25s; }
.svc a:hover { padding-left: 6px; color: var(--acc-ink); }
.svc a:hover::after { transform: translateX(4px); color: var(--acc); }
.svc .is-text { color: var(--ink-2); }
.on-band .svc { border-top-color: var(--band-rule); }
.on-band .svc li { border-bottom-color: var(--band-rule); }
.on-band .svc a { color: var(--on-band); }
.on-band .svc .is-text { color: var(--on-band-2); }

/* The question accordion reuses .acc; long questions need a smaller heading, and
   the collapse-all control is a link that closes rather than travels. */
/* The questions run just under the large-text threshold, so the collapsed state takes --ink-2
   rather than the --ink-3 the home accordion uses, and clears AA at every state. */
.acc.qs summary h3 { font-size: clamp(19px, 1.8vw, 26px); }
.acc.qs summary h3, .acc.qs summary .num, .acc.qs summary .plus { color: var(--ink-2); }
.acc-ctl { display: flex; justify-content: flex-start; padding-bottom: 14px; }
.link.collapse-all { background: transparent; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.link.collapse-all::after { content: '\2212'; }
.link.collapse-all:hover::after { transform: none; }
.link.is-text { color: var(--ink-2); border-bottom-color: var(--rule); cursor: default; }
.link.is-text::after { content: none; }

/* Split banner: copy one side, visual the other. .rev mirrors it. */
.sbanner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.sb-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.sbanner.rev .sb-copy { order: 2; }
.sbanner.rev .svis { order: 1; }

/* Stage tiles: an image tile with a label bar beneath that opens its block. */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.stage > summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; }
.stage > summary::-webkit-details-marker { display: none; }
.stage > summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.stage > summary:hover .svis { border-color: var(--acc); }
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0 20px; border-bottom: 1px solid var(--rule-2); }
.stage-bar h3 { color: var(--ink-2); transition: color .3s; }
.stage-bar .plus { font-family: var(--mono); font-size: 20px; line-height: 1; color: var(--ink-3); transition: transform .35s var(--ease), color .3s; }
.stage > summary:hover .stage-bar h3, .stage[open] .stage-bar h3 { color: var(--ink); }
.stage[open] .stage-bar .plus { transform: rotate(45deg); color: var(--ink); }
.stage-body { padding-top: 22px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* The accordion panel's subheading, used by the Next Generation tiles. */
.seg-body .seg-sub { font-family: var(--display); font-weight: 300; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; letter-spacing: -.015em; color: var(--ink-2); }

/* Feature block: one large item, two supporting items in a rail. */
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; border-top: 1px solid var(--rule-2); }
.feature-main { padding: clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) clamp(28px, 3vw, 44px) 0; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.feature-main h3 { font-size: clamp(25px, 2.5vw, 36px); }
.feature-main .stats { width: 100%; }
.feature-rail { display: flex; flex-direction: column; }
.feature-item { padding: clamp(24px, 2.6vw, 36px) 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.feature-item:last-child { border-bottom: 0; }

/* The four-question band. It takes --band-2 rather than --band: on a dark page
   the band has to sit above the page background, not disappear into it. */
.qband { background: var(--band-2); color: var(--on-band); }
.qband .mac { color: var(--on-band-2); }
.qband-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--band-rule-2); margin-top: clamp(36px, 5vw, 64px); }
.qband-grid > div { padding: 32px 24px 36px 0; border-right: 1px solid var(--band-rule); }
.qband-grid > div + div { padding-left: 24px; }
.qband-grid > div:last-child { border-right: 0; }
.qnum { font-family: var(--display); font-weight: 300; font-size: clamp(48px, 5.4vw, 88px); line-height: .85; letter-spacing: -.04em; color: var(--on-band); }
.qband-q { margin-top: 24px; font-size: 16.5px; line-height: 1.5; color: var(--on-band-2); }

/* Full-bleed banner with the copy overlaid. Same scrim principle as the hero. */
.fbanner { position: relative; overflow: hidden; background: var(--bg-3); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: clamp(64px, 8vw, 120px); }
.fbanner .hull { position: absolute; left: -6%; right: -6%; bottom: 10%; width: 112%; color: var(--rule-2); }
.fbanner .hull svg { width: 100%; height: auto; }
.fbanner-card {
  position: relative; max-width: 54ch;
  background: var(--bg); background: var(--scrim);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--rule); padding: clamp(26px, 3vw, 44px);
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}

/* Three cards carrying a visual, a title, body copy and one service link. */
.vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.vcard { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.vcard .svis { width: 100%; }
.vcard p { font-size: 15.5px; line-height: 1.58; color: var(--ink-2); }

/* Position statement: the module that carries a page on copy alone. */
.pos { max-width: 64ch; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: 24px; align-items: center; }
.pos .prose { max-width: none; }

/* Cross-segment row: the .index strip, names only. */
.index > a:hover .link { color: var(--acc-ink); border-color: var(--acc); }
.index > a:hover .link::after { transform: translateX(4px); }

@media (max-width: 960px) {
  .xcards, .stages, .vcards, .sbanner, .feature { grid-template-columns: 1fr; }
  .sbanner.rev .sb-copy { order: 2; }
  .sbanner.rev .svis { order: 1; }
  .feature-main { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .qband-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qband-grid > div:nth-child(2n) { border-right: 0; }
  .qband-grid > div:nth-child(2n+1) { padding-left: 0; }
  .qband-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--band-rule); }
  .ohero .svis { min-height: clamp(200px, 40vw, 280px); }
  .fbanner-card { max-width: none; }
}
@media (max-width: 600px) {
  .qband-grid { grid-template-columns: 1fr; }
  .qband-grid > div, .qband-grid > div + div { padding-left: 0; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--band-rule); }
  .qband-grid > div:last-child { border-bottom: 0; }
  .ohero-card .btn { white-space: normal; line-height: 1.3; text-align: center; }
}