/* 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: #6E7090;
  --rule: rgba(21, 23, 63, .14);
  --rule-2: rgba(21, 23, 63, .32);
  --band: #0A0A18;
  --band-2: #15163A;
  --on-band: #F6F6FA;
  --on-band-2: rgba(246, 246, 250, .74);
  --on-band-3: rgba(246, 246, 250, .5);
  --band-rule: rgba(246, 246, 250, .14);
  --band-rule-2: rgba(246, 246, 250, .32);
  --acc: #F85000;
  --acc-ink: #D14300;
  --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: 10px; 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: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-hull { position: relative; color: var(--rule-2); pointer-events: none; }
.hero-hull svg { width: 100%; height: clamp(100px, 16vw, 220px); }
.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: .6em; width: 8px; height: 8px; background: var(--grad); }
.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; }
.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); }
.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; }

/* 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 { 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: .62em; width: 7px; height: 7px; background: var(--grad); }

/* 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; 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); }
.footer .brand .logo-light { display: none; }
.footer .brand .logo-dark { display: block; }
.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:hover { color: var(--acc-ink); }

/* Motion: hero line-rise, scroll reveals, and a numbered stagger for repeating rows. */
.rise > .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.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: .55em; width: 8px; height: 8px; background: var(--grad); }
.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; }
}