/* Snowstone — new site. Register: catalogue, deixis-free. Design: "the reading room" —
 * bond paper, graphite ink, silver rules, one indigo accent; Newsreader display, IBM Plex text.
 * Signature: the swarm sweep in the hero (many threads reading in parallel into one ranked list). */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-latin-opsz-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --paper: #f6f5f1; --chalk: #ffffff; --steel: #e9ecee; --steel-2: #f0f2f3;
  --ink: #17191d; --ink-2: #2a2e34; --slate: #5f6975; --silver: #a7b0b8;
  --rule: #dcdfe2; --rule-strong: #c3c9ce; --accent: #24304a; --accent-soft: #e4e8ef;
  --serif: 'Newsreader', Georgia, 'Iowan Old Style', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shell: 73.75rem;
}
* { box-sizing: border-box; }
/* Grow the layout on wide displays; text and SVGs render at native resolution. */
html { font-size: clamp(100%, 1.111111vw, 250%); background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; font: 1rem/1.6 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3, .serif { font-family: var(--serif); font-optical-sizing: auto; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
.shell { width: min(100% - 3rem, var(--shell)); margin: 0 auto; }
.k { font: 500 0.71875rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.k::before { content: ''; display: inline-block; width: 1.375rem; height: 1px; background: var(--silver); vertical-align: middle; margin-right: 0.625rem; }
.k.bare::before { display: none; }
.lede { font-size: 1.09375rem; line-height: 1.6; color: var(--slate); max-width: 58ch; }
.btn { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0 1.5rem; border-radius: 0.1875rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 0.9375rem/1 var(--sans); transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0.75rem 1.75rem -1.125rem rgba(23, 25, 29, 0.6); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--steel); border-color: var(--ink); color: var(--ink); box-shadow: none; }
.tl { font-weight: 500; color: var(--ink); background: linear-gradient(var(--silver), var(--silver)) no-repeat 0 100% / 100% 1px; padding-bottom: 0.1875rem; transition: background-size 0.3s var(--ease); }
.tl:hover { background-size: 100% 0.125rem; background-image: linear-gradient(var(--accent), var(--accent)); }
:is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.1875rem; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 4.125rem; display: flex; align-items: center; background: rgba(246, 245, 241, 0.86); backdrop-filter: blur(0.875rem) saturate(140%); -webkit-backdrop-filter: blur(0.875rem) saturate(140%); border-bottom: 1px solid var(--rule); }
.nav .shell { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6875rem; font: 500 1.4375rem/1 var(--serif); letter-spacing: -0.012em; }
.brand img { width: 1.625rem; height: 1.625rem; filter: brightness(0) saturate(0); }
.nav .brand { min-height: 2.5rem; }
.nav .brand img { display: block; flex: none; }
/* Newsreader sits high in its line box; optically center the wordmark with the icon and navigation. */
.nav .brand-wordmark { display: block; transform: translateY(0.1em); }
.nav-links { display: flex; align-items: center; gap: 0.375rem; }
.nav-links > a, .nav-links > .dd > button { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; height: 2.5rem; padding: 0 0.75rem; border: 0; background: transparent; color: var(--ink); font: 500 0.90625rem/1 var(--sans); cursor: pointer; border-radius: 0.1875rem; transition: background 0.3s var(--ease); }
.nav-links > a:hover, .nav-links > .dd > button:hover, .dd.is-open > button { background: var(--steel); }
.nav-links > a[aria-current='page'] { color: var(--accent); }
.dd > button svg { width: 0.75rem; height: 0.75rem; transition: transform 0.3s var(--ease); }
.dd.is-open > button svg { transform: rotate(180deg); }
.nav-links > a.btn.cta { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; margin-left: 0.625rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.nav-links > a.btn.cta:hover { background: var(--accent); border-color: var(--accent); }
.progress { position: absolute; left: 0; bottom: -1px; height: 0.125rem; width: 0; background: var(--accent); transition: width 0.15s linear; }
.panel { position: absolute; top: calc(100% + 0.625rem); left: 50%; transform: translateX(-50%) translateY(-0.375rem); width: min(67.5rem, calc(100vw - 3rem)); background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; box-shadow: 0 1.875rem 4.375rem -1.875rem rgba(23, 25, 29, 0.35); padding: 1.625rem 1.875rem 1.75rem; display: grid; grid-template-columns: 18.75rem 1fr; gap: 0 3rem; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.35s var(--ease); }
.dd.is-open .panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.panel-intro { border-right: 1px solid var(--rule); padding-right: 1.875rem; display: grid; gap: 0.625rem; align-content: start; }
.panel-intro h2 { font-size: 1.45rem; line-height: 1.22; max-width: 16ch; }
.panel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: 0 2.5rem; align-items: start; }
.panel-group h3 { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); margin: 0.25rem 0 0.625rem; }
.panel-group h3 a:hover { color: var(--ink); }
.panel-group a.row { position: relative; display: block; padding: 0.5625rem 0.75rem; margin: 0 -0.75rem; border-radius: 0.1875rem; font: 500 1.05rem/1.3 var(--serif); letter-spacing: -0.005em; transition: background 0.35s var(--ease), transform 0.35s var(--ease); }
.panel-group a.row::before { content: ''; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 0.125rem; background: var(--accent); transform: scaleY(0); transition: transform 0.35s var(--ease); }
.panel-group a.row:hover { background: var(--steel-2); transform: translateX(0.375rem); }
.panel-group a.row:hover::before { transform: scaleY(1); }
.burger { display: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--rule-strong); border-radius: 0.1875rem; background: transparent; color: var(--ink); }
.mobile { display: none; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .mobile.is-open { display: grid; position: fixed; inset: 4.125rem 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 1rem 1.5rem 1.5rem; gap: 0.25rem; z-index: 59; }
  .mobile a { padding: 0.625rem 0; font: 500 1.0625rem/1.3 var(--serif); border-bottom: 1px solid var(--rule); }
  .mobile .k { margin-top: 0.75rem; }
  /* The open menu fits the screen and scrolls within it; Book a demo stays visible at the bottom. */
  .mobile.is-open { align-content: start; max-height: calc(100vh - 4.125rem); max-height: calc(100dvh - 4.125rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
  html.menu-open, html.menu-open body { overflow: hidden; }
  html.menu-open .nav { background: var(--paper); }
  .mobile a.sub { padding-left: 1rem; font-size: 1rem; color: var(--ink-2); }
  .mobile-cta { position: sticky; bottom: 0; margin-top: 1rem; padding: 0.875rem 0 1.25rem; background: var(--paper); border-top: 1px solid var(--rule); }
  .mobile .mobile-cta a.btn { display: flex; justify-content: center; width: 100%; padding: 0 1.5rem; border: 1px solid var(--ink); font: 500 1rem/1 var(--sans); color: var(--paper); }
}

/* ── Page rhythm ────────────────────────────────────────────────────────── */
main { padding-top: 4.125rem; }
.sec { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.sec.tint { background: var(--steel-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: 2.75rem; }
.head h2 { font-size: clamp(2rem, 3.3vw, 2.9rem); line-height: 1.06; max-width: 20ch; text-wrap: balance; margin-top: 0.75rem; }
.rule-top { border-top: 1px solid var(--ink); }
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d='1'] { transition-delay: 0.08s; } .reveal[data-d='2'] { transition-delay: 0.16s; } .reveal[data-d='3'] { transition-delay: 0.24s; } .reveal[data-d='4'] { transition-delay: 0.32s; } .reveal[data-d='5'] { transition-delay: 0.4s; }
@keyframes page-in { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }
main { animation: page-in 0.6s var(--ease) both; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(5.5rem, 9vw, 7.5rem) 0 clamp(3rem, 5vw, 4rem); overflow: hidden; }
.hero::before { content: ''; position: absolute; right: -18vw; top: -45vh; width: 64vw; height: 100vh; opacity: 0.75; pointer-events: none; background: radial-gradient(closest-side, var(--steel) 0%, rgba(233, 236, 238, 0.5) 45%, transparent 100%); }
.hero .shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(22.5rem, 0.95fr); gap: 2.5rem 3.5rem; align-items: center; }
.hero .for { font: 500 0.875rem/1.5 var(--sans); color: var(--slate); max-width: 40ch; margin-bottom: 1.125rem; }
.hero h1 .by { display: block; font: 400 clamp(1.05rem, 1.4vw, 1.3rem)/1.2 var(--serif); font-style: italic; letter-spacing: 0; color: var(--slate); margin-top: 0.75rem; }
.hero h1 { font-weight: 400; font-size: clamp(3rem, 6.2vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; text-wrap: balance; }
.hero .sub { margin-top: 1.125rem; font: 500 0.9375rem/1.5 var(--sans); color: var(--slate); max-width: 44ch; }
.hero .lede { margin-top: 1.25rem; max-width: 46ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.875rem 1.375rem; align-items: center; margin-top: 1.875rem; }
.hero .copy > * { opacity: 0; transform: translateY(1.125rem); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.hero.ready .copy > * { opacity: 1; transform: none; }
.hero.ready .copy > *:nth-child(2) { transition-delay: 0.1s; } .hero.ready .copy > *:nth-child(3) { transition-delay: 0.2s; } .hero.ready .copy > *:nth-child(4) { transition-delay: 0.3s; } .hero.ready .copy > *:nth-child(5) { transition-delay: 0.4s; }

/* the swarm sweep */
.swarm { position: relative; aspect-ratio: 640 / 440; width: 100%; opacity: 0; transition: opacity 1s var(--ease) 0.3s; }
.hero.ready .swarm { opacity: 1; }
.swarm svg { width: 100%; height: 100%; overflow: visible; }
.swarm .src { font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--slate); }
.swarm .thread { fill: none; stroke: var(--silver); stroke-width: 1; stroke-linecap: round; opacity: 0.85; stroke-dasharray: 900; stroke-dashoffset: 900; }
.swarm.run .thread { animation: draw 4.6s var(--ease) forwards; animation-delay: var(--d); }
.swarm.settled .thread { stroke-dashoffset: 0; animation: none; }
.swarm .thread.hot { stroke: var(--accent); stroke-width: 1.4; opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.swarm .find { opacity: 0; transform: translateX(0.5rem); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.swarm.run .find { opacity: 1; transform: none; }
.swarm .find rect.bar { fill: var(--chalk); stroke: var(--rule); }
.swarm .find text { font: 500 11.5px var(--sans); fill: var(--ink); }
.swarm .find text.n { font: 500 10px var(--mono); fill: var(--slate); }
.swarm .find rect.mag { fill: var(--silver); }
.swarm .find.hot rect.mag { fill: var(--accent); }
.swarm .find.hot rect.bar { stroke: var(--accent); }
.swarm .lab { font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--slate); }
.swarm .caption { position: absolute; left: 0; bottom: -2.125rem; max-width: 60ch; font: 500 0.65625rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver); }
@media (prefers-reduced-motion: reduce) { .swarm .thread { stroke-dashoffset: 0 !important; animation: none !important; } .swarm .find { opacity: 1 !important; transform: none !important; } .reveal, .hero .copy > *, .swarm { opacity: 1 !important; transform: none !important; transition: none !important; } main { animation: none; } }

/* rails */
.rails { border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rails > div { padding: 1.375rem 1.5rem 1.625rem 0; border-right: 1px solid var(--rule); margin-right: 1.5rem; }
.rails > div:last-child { border-right: 0; margin-right: 0; }
.rails h3 { font-size: 1.35rem; line-height: 1.15; margin-bottom: 0.5rem; }
.rails p { font-size: 0.9375rem; color: var(--slate); }

/* metrics */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.metrics > div { padding: 1.625rem 1.5rem 1.625rem 0; border-right: 1px solid var(--rule); margin-right: 1.5rem; }
.metrics > div:last-child { border-right: 0; }
.metrics b { display: block; font: 400 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.metrics span { display: block; margin-top: 0.625rem; font-size: 0.84375rem; color: var(--slate); line-height: 1.5; }
.fn { margin-top: 1.25rem; font-size: 0.78125rem; color: var(--slate); max-width: 70ch; }

/* register: number | heading | prose */
.reg { border-top: 1px solid var(--ink); }
.reg > div { display: grid; grid-template-columns: 3.5rem minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 0.5rem 2.5rem; align-items: start; padding: 1.5rem 0 1.625rem; border-bottom: 1px solid var(--rule); }
.reg .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); padding-top: 0.4375rem; }
.reg h3 { font-size: 1.5rem; line-height: 1.15; }
.reg p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); }
.reg a.row { display: contents; }
.reg a.row h3 { transition: color 0.3s var(--ease); }
.reg a.row:hover h3 { color: var(--accent); }

/* catalogue lists */
.cat { border-top: 1px solid var(--ink); }
.cat a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.1fr) 1.5rem; gap: 0.5rem 2rem; align-items: baseline; padding: 1.25rem 0 1.375rem; border-bottom: 1px solid var(--rule); transition: transform 0.4s var(--ease); }
.cat a:hover { transform: translateX(0.75rem); }
.cat .n { font: 500 1.15rem/1 var(--serif); color: var(--silver); }
.cat h3 { font-size: 1.45rem; line-height: 1.15; }
.cat p { font-size: 0.9375rem; color: var(--slate); }
.cat .arr { color: var(--silver); font-family: var(--serif); font-size: 1.3rem; transition: transform 0.35s var(--ease), color 0.35s var(--ease); justify-self: end; }
.cat a:hover .arr { transform: translateX(0.375rem); color: var(--accent); }
.cat.sub a { padding-left: 3.5rem; }
.cat.sub a:hover { transform: translateX(0.75rem); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 4rem; }

/* pipeline (numbered bubbles with arrows) */
.pipe { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 2.25rem; border-top: 1px solid var(--rule); padding-top: 2.25rem; position: relative; }
.pipe > div { position: relative; }
.pipe .bub { width: 2.25rem; height: 2.25rem; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 500 0.6875rem var(--mono); }
.pipe > div:not(:last-of-type)::after { content: '→'; position: absolute; top: 0.25rem; right: -1.625rem; font-family: var(--serif); font-size: 1.3rem; color: var(--silver); }
.pipe h3 { font-size: 1.3rem; margin: 1.125rem 0 0.5rem; line-height: 1.15; }
.pipe p { font-size: 0.90625rem; color: var(--slate); }
.loop { margin-top: 2.25rem; display: grid; grid-template-columns: 13.75rem 1fr; gap: 1.5rem; align-items: start; padding-top: 1.375rem; border-top: 1px solid var(--rule); }
.loop p { font-size: 0.96875rem; color: var(--ink-2); max-width: 70ch; }

/* controls accordion */
.acc { border-top: 1px solid var(--ink); max-width: 76ch; }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3rem 1fr 1.5rem; align-items: baseline; gap: 1rem; padding: 1.25rem 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.acc summary h3 { font-size: 1.4rem; line-height: 1.15; transition: color 0.3s var(--ease); }
.acc summary:hover h3 { color: var(--accent); }
.acc summary .pm { font-family: var(--serif); color: var(--silver); font-size: 1.4rem; line-height: 1; transition: transform 0.35s var(--ease); }
.acc details[open] summary .pm { transform: rotate(45deg); }
.acc .body { padding: 0 0 1.5rem 3rem; display: grid; gap: 0.625rem; }
.acc .body p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); max-width: 66ch; }
.acc .body .kept { font-size: 0.90625rem; color: var(--slate); }
.acc .body .kept b { font-weight: 500; color: var(--slate); }

/* four verbs */
.verbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--ink); }
.verbs > div { padding: 1.375rem 0 0.5rem; }
.verbs h3 { font: 500 0.71875rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.625rem; }
.verbs p { font-size: 0.9375rem; color: var(--slate); }

/* questions (pull lines) */
.qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--ink); }
.qs a { display: grid; gap: 0.625rem; padding: 1.625rem 0 1.75rem; border-bottom: 1px solid var(--rule); transition: transform 0.4s var(--ease); }
.qs a:hover { transform: translateX(0.75rem); }
.qs .q { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.qs .a { font-size: 0.9375rem; color: var(--slate); }
.qs .k { margin-top: 0.25rem; }

/* closing */
.close { background: var(--paper); border-top: 1px solid var(--rule); }
.close .frame { background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; padding: clamp(2.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem 3.5rem; align-items: center; }
.close h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; max-width: 18ch; }
.close .side { border-left: 1px solid var(--rule); padding-left: 2rem; }
.close .side p { color: var(--slate); margin-bottom: 1.375rem; }

/* footer */
footer { background: var(--steel-2); border-top: 1px solid var(--rule); padding: 3.5rem 0 1.75rem; color: var(--ink); }
.fgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--rule); }
.fgrid h4 { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); margin: 0 0 0.875rem; }
.fgrid a { display: block; font-size: 0.90625rem; color: var(--slate); padding: 0.25rem 0; transition: color 0.3s ease; }
.fgrid a:hover { color: var(--ink); }
.fgrid .tag { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; margin: 0.875rem 0 0.75rem; max-width: 26ch; }
.fgrid .about { font-size: 0.875rem; color: var(--slate); max-width: 34ch; }
.fbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding-top: 1.125rem; font-size: 0.8125rem; color: var(--slate); }
.fbar a { color: var(--slate); }
.fbar a:hover { color: var(--ink); }

/* inner page header */
.ph { padding: clamp(4.5rem, 7vw, 6rem) 0 clamp(2.5rem, 4vw, 3.5rem); }
.ph .crumb { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.ph h1 { font-weight: 400; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.028em; margin-top: 1.125rem; max-width: 18ch; text-wrap: balance; }
.ph .grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem 4rem; margin-top: 2.125rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); align-items: start; }
.ph .lede { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink); max-width: 44ch; }
.ph .aside .k { margin-bottom: 0.625rem; }
.ph .aside p { font-size: 0.96875rem; color: var(--slate); }
.ph .aside .one { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; color: var(--ink); }

/* steps */
.steps { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.steps h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; margin-top: 0.75rem; }
.steps .lede { margin-top: 1.125rem; font-size: 1rem; }
.steps ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule); transition: transform 0.4s var(--ease); }
.steps li:hover { transform: translateX(0.625rem); }
.steps li .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.steps li span:last-child { font: 500 1.2rem/1.25 var(--serif); }

/* holds */
.holds { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.holds h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; margin-top: 0.75rem; }
.holds ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.holds li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.holds li .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.holds li b { font: 500 1.2rem/1.25 var(--serif); }
.holds li span:last-child { font-size: 0.875rem; color: var(--slate); }
.judg { display: grid; grid-template-columns: 18.75rem 1fr; gap: 1.5rem 3rem; padding: 1.625rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.judg p { font-size: 1.03125rem; color: var(--ink-2); max-width: 70ch; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.related a { display: grid; grid-template-rows: auto 1fr auto; min-height: 9.375rem; background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; padding: 1.25rem 1.375rem; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.related a:hover { transform: translateY(-0.1875rem); box-shadow: 0 1.625rem 3.125rem -2rem rgba(23, 25, 29, 0.35); }
.related a b { font: 500 1.3rem/1.2 var(--serif); margin-top: 0.625rem; }
.related a .arr { justify-self: end; font-family: var(--serif); color: var(--silver); font-size: 1.4rem; }

/* faq / prose pages */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.6rem; line-height: 1.2; margin: 2.125rem 0 0.75rem; padding-top: 1.625rem; border-top: 1px solid var(--rule); }
.prose h2:first-of-type { border-top: 1px solid var(--ink); }
.prose p, .prose li { font-size: 1rem; line-height: 1.65; color: var(--ink-2); }
.prose p + p { margin-top: 0.75rem; }
.prose ul { padding-left: 1.2em; margin: 0.75rem 0 0; }
.demo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem 4rem; align-items: start; }
.demo .cal { background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; overflow: hidden; min-height: 42.5rem; }
.demo iframe { width: 100%; height: 45rem; border: 0; }
.demo .mail { margin-top: 0.875rem; font-size: 0.875rem; color: var(--slate); }

@media (max-width: 1040px) { .metrics, .verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.75rem; } .pipe > div::after { display: none; } .related { grid-template-columns: 1fr; } }
@media (max-width: 880px) {
  .hero .shell, .head, .two, .steps, .holds, .judg, .close .frame, .ph .grid, .demo, .qs, .loop { grid-template-columns: 1fr; }
  .rails, .metrics { grid-template-columns: 1fr; } .rails > div, .metrics > div { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); }
  .reg > div { grid-template-columns: 3rem 1fr; } .reg p { grid-column: 2; }
  .cat a { grid-template-columns: 3rem 1fr 1.5rem; } .cat p { grid-column: 2; }
  .holds li { grid-template-columns: 3rem 1fr; } .holds li span:last-child { grid-column: 2; }
  .close .side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .swarm .caption { position: static; margin-top: 0.625rem; }
}

/* the swarm as a link */
.swarm.is-link { cursor: pointer; border-radius: 0.375rem; transition: transform 0.4s var(--ease); }
.swarm.is-link:hover { transform: translateY(-0.125rem); }
.swarm.is-link.hovering .thread:not(.near) { opacity: 0.35; stroke: var(--silver); stroke-width: 1; }
.swarm.is-link.hovering .find.hot:not(.near) rect.bar { stroke: var(--rule); }
.swarm.is-link.hovering .find.hot:not(.near) rect.mag { fill: var(--silver); }
.swarm .thread.near { stroke: var(--accent); stroke-width: 1.6; opacity: 1; }
.swarm .find.near rect.bar { stroke: var(--accent); }
.swarm .find.near rect.mag { fill: var(--accent); }
.swarm.is-link .caption { color: var(--accent); }
.swarm.is-link:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.5rem; }
.swarm.is-link:hover .caption, .swarm.is-link:focus-visible .caption { text-decoration: underline; text-underline-offset: 0.25rem; }
.swarm .caption:empty::after { content: ''; }
#who-we-serve { scroll-margin-top: 5.375rem; }

/* ── page motifs (one per team, group, capability, directory) ───────────── */
.motif { margin: 0 0 1.375rem; }
.motif svg { width: 100%; height: auto; overflow: visible; display: block; }
.motif figcaption { margin-top: 0.75rem; font: 500 0.65625rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver); max-width: 52ch; line-height: 1.5; }
.motif .lab { font: 500 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--slate); }
.motif .src { font: 500 10.5px var(--mono); letter-spacing: 0.06em; fill: var(--slate); }
.motif .txt { font: 500 12px var(--sans); fill: var(--ink); }
.motif .n { font: 500 10px var(--mono); fill: var(--slate); }
.motif .big { font: 400 26px var(--serif); fill: var(--ink); }
.motif .hotxt { fill: var(--accent); }
.motif .box { fill: var(--chalk); stroke: var(--rule); stroke-width: 1; }
.motif .box.hot { stroke: var(--accent); }
.motif .box.q { fill: var(--paper); stroke: var(--ink); }
.motif .scope { fill: none; stroke: var(--rule-strong); stroke-dasharray: 4 4; }
.motif .ring { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.motif .ring.hot { stroke: var(--accent); }
.motif .bar { fill: var(--steel); stroke: var(--rule); }
.motif .bar.hot { fill: var(--accent-soft); stroke: var(--accent); }
.motif .meter { fill: var(--chalk); stroke: var(--rule); }
.motif .meterfill { fill: var(--silver); }
.motif .hotline { stroke: var(--accent); stroke-width: 1.4; }
.motif .pipe { fill: none; stroke: var(--ink); stroke-width: 1; }
.motif .tick { fill: var(--silver); }
.motif .dot { fill: var(--silver); }
.motif .dot.hot { fill: var(--accent); }
.motif .mk { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.motif .mk.hot { stroke: var(--accent); }
.motif .mk.open { stroke: var(--silver); }
.motif .thread { fill: none; stroke: var(--silver); stroke-width: 1; stroke-linecap: round; opacity: 0.9; }
.motif .thread.hot { stroke: var(--accent); stroke-width: 1.4; opacity: 1; }
.motif .thread.dashed { stroke-dasharray: 4 4 !important; stroke-dashoffset: 0; }
.reveal.in .motif .thread { animation: draw 2.6s var(--ease) forwards; animation-delay: var(--d); }
.reveal.in .motif .thread.dashed { animation: none; }
.motif .box, .motif .bar, .motif .mk, .motif .dot, .motif .ring, .motif .txt, .motif .src, .motif .n, .motif .big, .motif .tick { opacity: 0; transition: opacity 0.9s var(--ease) 0.5s; }
.reveal.in .motif .box, .reveal.in .motif .bar, .reveal.in .motif .mk, .reveal.in .motif .dot, .reveal.in .motif .ring, .reveal.in .motif .txt, .reveal.in .motif .src, .reveal.in .motif .n, .reveal.in .motif .big, .reveal.in .motif .tick { opacity: 1; }
.ph .aside .motif { margin-top: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .motif .thread { stroke-dashoffset: 0 !important; animation: none !important; } .motif * { opacity: 1 !important; transition: none !important; } }
@media (max-width: 880px) { .ph .aside .motif { max-width: 32.5rem; } }

/* ── motif v2: page-specific forms (paper, bridge, dashboard, tree, table, curve, gantt, sheet, funnel, waterfall, roadmap, shelf) ── */
.motif .paper { fill: var(--chalk); stroke: var(--rule); }
.motif .paperhead { fill: var(--ink); }
.motif .h { font: 500 15px var(--serif); fill: var(--ink); }
.motif .cite { font: 500 9.5px var(--mono); fill: var(--slate); }
.motif .card { fill: var(--chalk); stroke: var(--rule); }
.motif .card.hot { stroke: var(--accent); }
.motif .card.open { fill: var(--paper); stroke: var(--rule-strong); }
.motif .mag { fill: var(--silver); }
.motif .mag.hot { fill: var(--accent); }
.motif .src2 { font: 400 10px var(--mono); fill: var(--silver); }
.motif .num { font: 500 11px var(--mono); fill: var(--ink); }
.motif .kpi { font: 400 20px var(--serif); fill: var(--ink); }
.motif .spark { fill: none; stroke: var(--silver); stroke-width: 1; }
.motif .rule { stroke: var(--rule); stroke-width: 1; }
.motif .axis { stroke: var(--ink); stroke-width: 1; }
.motif .grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.motif .conn { stroke: var(--rule-strong); stroke-width: 1; }
.motif .barfill { fill: var(--steel); stroke: var(--rule-strong); }
.motif .barfill.plan { fill: var(--accent-soft); stroke: var(--accent); }
.motif .curve { fill: none; stroke-width: 1.2; }
.motif .curve.plan { stroke: var(--silver); }
.motif .curve.hot { stroke: var(--accent); stroke-width: 1.6; }
.reveal.in .motif .curve { animation: draw 2.4s var(--ease) forwards; animation-delay: var(--d); }
.motif .cell { fill: var(--chalk); stroke: var(--rule); }
.motif .cell.head { fill: var(--steel-2); }
.motif .cell.hot { fill: var(--accent-soft); stroke: var(--accent); }
.motif .row { fill: var(--chalk); stroke: var(--rule); }
.motif .row.hot { stroke: var(--accent); }
.motif .funnel { fill: var(--chalk); stroke: var(--rule-strong); }
.motif .funnel.hot { fill: var(--accent-soft); stroke: var(--accent); }
.motif .folder { fill: var(--steel); stroke: var(--rule-strong); stroke-width: 0.8; }
.motif .zoom { fill: none; stroke: var(--accent); stroke-width: 1.2; rx: 3; }
.motif .dep { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.motif .flag { fill: var(--accent); }
.motif .table { fill: var(--chalk); stroke: var(--ink); stroke-width: 1; }
.motif .table.inner { fill: var(--paper); stroke: var(--rule-strong); }
.motif .seat { fill: var(--steel); stroke: var(--rule-strong); }
.motif .seat.hot { fill: var(--accent-soft); stroke: var(--accent); }
.motif .shelf { stroke: var(--ink); stroke-width: 1.4; }
.motif .spine { fill: var(--chalk); stroke: var(--rule-strong); }
.motif .spine.hot { stroke: var(--accent); fill: var(--accent-soft); }
.motif .spinetxt { font: 500 11px var(--sans); fill: var(--ink); }
.motif .paper, .motif .paperhead, .motif .card, .motif .cell, .motif .row, .motif .funnel, .motif .folder, .motif .zoom, .motif .flag, .motif .table, .motif .seat, .motif .spine, .motif .spinetxt, .motif .barfill, .motif .cite, .motif .h, .motif .kpi, .motif .num, .motif .src2, .motif .spark, .motif .mag, .motif .dep, .motif .rule, .motif .axis, .motif .grid, .motif .conn, .motif .shelf { opacity: 0; transition: opacity 0.9s var(--ease) 0.35s; }
.reveal.in .motif .paper, .reveal.in .motif .paperhead, .reveal.in .motif .card, .reveal.in .motif .cell, .reveal.in .motif .row, .reveal.in .motif .funnel, .reveal.in .motif .folder, .reveal.in .motif .zoom, .reveal.in .motif .flag, .reveal.in .motif .table, .reveal.in .motif .seat, .reveal.in .motif .spine, .reveal.in .motif .spinetxt, .reveal.in .motif .barfill, .reveal.in .motif .cite, .reveal.in .motif .h, .reveal.in .motif .kpi, .reveal.in .motif .num, .reveal.in .motif .src2, .reveal.in .motif .spark, .reveal.in .motif .mag, .reveal.in .motif .dep, .reveal.in .motif .rule, .reveal.in .motif .axis, .reveal.in .motif .grid, .reveal.in .motif .conn, .reveal.in .motif .shelf { opacity: 1; }

/* ── motif v3: animated, SMIL-driven ── */
.motif.anim .agent { fill: var(--accent); }
.motif.anim .agent.faint { fill: var(--silver); }
.motif.anim .flow { fill: var(--silver); }
.motif.anim .flow.leak { fill: var(--accent); }
.motif.anim .person { fill: var(--steel); stroke: var(--ink); stroke-width: 1; }
.motif.anim .doc { fill: var(--chalk); stroke: var(--rule); stroke-width: 0.8; }
.motif.anim .doc.read { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .doc.faint { fill: var(--paper); stroke: var(--rule); }
.motif.anim .sweep { stroke: var(--accent); stroke-width: 1.4; }
.motif.anim .box.q { fill: var(--paper); stroke: var(--ink); }
.motif.anim .box.lit { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .cell.scan { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .cell.lit { fill: var(--chalk); stroke: var(--rule-strong); }
.motif.anim .ring { stroke: var(--accent); stroke-width: 1; fill: none !important; }
.motif.anim .flow.leak { r: 2.6px; }
.motif.anim .thread.faint { stroke: var(--rule); }
/* v3 animates itself: neutralise the v1/v2 reveal-driven opacity rules */
.motif.anim .box, .motif.anim .bar, .motif.anim .mk, .motif.anim .dot, .motif.anim .ring, .motif.anim .txt, .motif.anim .src, .motif.anim .n, .motif.anim .big, .motif.anim .tick,
.motif.anim .paper, .motif.anim .paperhead, .motif.anim .card, .motif.anim .cell, .motif.anim .row, .motif.anim .funnel, .motif.anim .folder, .motif.anim .zoom, .motif.anim .flag, .motif.anim .table, .motif.anim .seat, .motif.anim .spine, .motif.anim .spinetxt, .motif.anim .barfill, .motif.anim .cite, .motif.anim .h, .motif.anim .kpi, .motif.anim .num, .motif.anim .src2, .motif.anim .spark, .motif.anim .mag, .motif.anim .dep, .motif.anim .rule, .motif.anim .axis, .motif.anim .grid, .motif.anim .conn, .motif.anim .shelf { opacity: 1; transition: none; }
.motif.anim .thread, .motif.anim .curve { animation: none !important; }

/* ── v4: colour, layouts, larger motifs, faster motion ─────────────────────── */
:root { --gold: #b8862b; --gold-soft: #f3e7cf; }
.motif.anim .gold, .motif.anim .dot.gold, .motif.anim .agent.gold { fill: var(--gold); }
.motif.anim .goldtxt { fill: var(--gold); }
.motif.anim .ring { stroke: var(--accent); stroke-width: 1.2; fill: none !important; }
.motif.anim .ring.gold { stroke: var(--gold); }
.motif.anim .ring2 { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.motif.anim .curve.gold { stroke: var(--gold); stroke-width: 1.8; fill: none; }
.motif.anim .area { fill: var(--accent-soft); stroke: none; opacity: 0.9; }
.motif.anim .area.gold { fill: var(--gold-soft); }
.motif.anim .bar.gold { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .mag.gold { fill: var(--gold); }
.motif.anim .doc.flag { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .scope.out { stroke: var(--rule); }
.motif.anim .orbitpath { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.motif.anim .chip { fill: var(--chalk); stroke: var(--rule-strong); }
.motif.anim .chip.gold { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .funnel { stroke: var(--rule-strong); }
.motif.anim .funnel.f1 { fill: var(--chalk); } .motif.anim .funnel.f2 { fill: var(--steel-2); } .motif.anim .funnel.f3 { fill: var(--accent-soft); } .motif.anim .funnel.f4 { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .cell.lit { fill: var(--steel-2); stroke: var(--rule-strong); }
.motif.anim .txt { font-size: 12.5px; }
.motif figcaption { font-size: 0.6875rem; color: var(--slate); }

/* page-header compositions: the motif is the centrepiece and varies by page */
.ph .grid.has-motif { display: grid; gap: 1.75rem 3.5rem; align-items: start; }
.ph .grid.has-motif.layout-right { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); }
.ph .grid.has-motif.layout-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); }
.ph .grid.has-motif.layout-left .ph-text { order: 2; }
.ph .grid.has-motif.layout-wide { grid-template-columns: 1fr; }
.ph .grid.has-motif.layout-wide .ph-text { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 4rem; }
.ph .grid.has-motif .ph-text .aside { margin-top: 1.375rem; padding-top: 1.125rem; border-top: 1px solid var(--rule); }
.ph .grid.has-motif.layout-wide .ph-text .aside { margin-top: 0; padding-top: 0; border-top: 0; }
.ph .grid.has-motif .motif { margin: 0; }
.ph .grid.has-motif .motif svg { width: 100%; height: auto; }
.ph .grid.has-motif.layout-wide .motif { max-width: 61.25rem; margin: 0 auto; }
.ph .grid.has-motif.layout-wide .motif svg { max-height: 37.5rem; }
/* type inside a motif shrinks as the canvas grows, so labels stay label-sized */
.motif.layout-wide .lab { font-size: 7px; } .motif.layout-wide .txt { font-size: 8.5px; } .motif.layout-wide .src { font-size: 7.5px; } .motif.layout-wide .src2 { font-size: 7px; }
.motif.layout-left .lab, .motif.layout-right .lab { font-size: 8.5px; } .motif.layout-left .txt, .motif.layout-right .txt { font-size: 10.5px; } .motif.layout-left .src, .motif.layout-right .src { font-size: 9px; } .motif.layout-left .src2, .motif.layout-right .src2 { font-size: 8.5px; }
.ph .grid.has-motif .motif figcaption { margin-top: 0.875rem; }
@media (max-width: 880px) { .ph .grid.has-motif.layout-right, .ph .grid.has-motif.layout-left, .ph .grid.has-motif.layout-wide .ph-text { grid-template-columns: 1fr; } .ph .grid.has-motif.layout-left .ph-text { order: 0; } }

/* ── v5: function colours, hover-to-gold, cleaner motion ─────────────────────── */
:root { --teal: #3f8f8a; --teal-soft: #dff0ee; --plum: #7a5c8e; --plum-soft: #ebe3f1; --moss: #6f8f3f; --moss-soft: #e7eedc; }
.motif.anim .doc.read.c1 { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .doc.read.c2 { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .doc.read.c3 { fill: var(--teal-soft); stroke: var(--teal); }
.motif.anim .doc.read.c4 { fill: var(--plum-soft); stroke: var(--plum); }
.motif.anim .doc.read.c5 { fill: var(--moss-soft); stroke: var(--moss); }
.motif.anim .doc.glow.g1 { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .doc.glow.g2 { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .doc.glow.g3 { fill: var(--teal-soft); stroke: var(--teal); }
.motif.anim .flag-hidden { display: none; }
.motif.anim .funnel:hover, .motif.anim .chip:hover { fill: var(--gold-soft); stroke: var(--gold); cursor: default; }
.motif.anim .funnel:hover + text, .motif.anim .chip:hover + text { fill: var(--gold); }
.motif.anim .curve.plan { stroke: var(--silver); stroke-width: 1.4; }
.motif.anim .lane { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.motif.anim .lane.gold { stroke: var(--gold); }
.motif.anim .station { fill: var(--chalk); stroke: var(--rule-strong); }
.motif.anim .station.hot { stroke: var(--accent); fill: var(--accent-soft); }
.motif.anim .station.gold { stroke: var(--gold); fill: var(--gold-soft); }
.motif.anim .work { fill: var(--slate); }
.motif.anim .work.gold { fill: var(--gold); }
.motif.anim .dep { stroke: var(--accent); }
.motif.anim .dep.gold { stroke: var(--gold); }
.motif.anim .bar.win { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .legend { font: 400 8.5px var(--mono); fill: var(--slate); }

/* Retain the original grid and mini arrows, with the return loop beneath the steps. */
div.pipe.has-flow { padding-bottom: 6.625rem; }
div.pipe .pipe-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--accent); }
.pipe-route { fill: none; stroke: none; }
.pipe-route.pipe-return { stroke: var(--accent); stroke-width: 1.5; }
.pipe-dot { fill: var(--slate); }
.pipe-return-dot { fill: var(--accent); }
.pipe-loop-label { font: 500 11px var(--sans); fill: var(--slate); }
@media (prefers-reduced-motion: reduce) { .pipe-dot { display: none; } }

/* Homepage "MRI for Business" line and the due diligence comparison. */
.hero .mri { margin-top: 0.875rem; font: 400 clamp(1.35rem, 1.9vw, 1.75rem)/1.2 var(--serif); font-style: italic; color: var(--accent); }
.compare { --stag: 0.11s; border-top: 1px solid var(--ink); }
.compare .row { display: grid; grid-template-columns: 12.25rem minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; }
.compare .row > h3, .compare .row > .was { padding: 1rem 2.25rem 1rem 0; border-bottom: 1px solid var(--rule); }
.compare .headrow > span { padding: 0.875rem 0; font: 500 0.71875rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.compare .headrow > span:last-child { padding-left: 1.5rem; color: var(--accent); }
.compare h3 { font-size: 1.2rem; line-height: 1.25; }
.compare .was { font-size: 0.9375rem; line-height: 1.55; color: var(--slate); transition: color 0.9s var(--ease); transition-delay: calc(var(--i) * var(--stag) + 0.55s); }
.compare .now { position: relative; margin: 0; padding: 1rem 1.5rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); background: var(--chalk); border-inline: 1px solid var(--rule); border-bottom: 1px solid var(--steel); }
.compare .row:nth-child(2) .now { border-top: 1px solid var(--rule); border-radius: 3px 3px 0 0; }
.compare .row:last-child .now { border-bottom-color: var(--rule); border-radius: 0 0 3px 3px; }
.compare .now::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); transition-delay: calc(var(--i) * var(--stag) + 0.2s); }
.compare .row:not(.headrow) > * { opacity: 0; transform: translateY(0.5rem); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), color 0.9s var(--ease); transition-delay: calc(var(--i) * var(--stag) + 0.15s); }
.compare .row .now { transform: translateX(-0.5rem); }
.compare.in .row > * { opacity: 1; transform: none; }
.compare.in .now::before { transform: scaleY(1); }
.compare.in .was { color: #7d8792; transition-delay: calc(var(--i) * var(--stag) + 0.15s), calc(var(--i) * var(--stag) + 0.15s), calc(var(--i) * var(--stag) + 0.9s); }
@media (max-width: 880px) { .compare .row { grid-template-columns: 1fr; } .compare .headrow { display: none; } .compare .row > h3 { padding: 1rem 0 0.25rem; border-bottom: 0; font-size: 1.125rem; } .compare .row > .was { padding: 0 0 0.5rem; border-bottom: 0; font-size: 0.875rem; } .compare .row .now, .compare .row:nth-child(2) .now, .compare .row:last-child .now { border: 1px solid var(--rule); border-radius: 3px; padding: 0.75rem 1rem; font-size: 0.9375rem; } .compare .was::before { content: 'Today: '; font-weight: 500; } }
@media (prefers-reduced-motion: reduce) { .compare .row > *, .compare .now::before { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ── v6: the kinds of inefficiency (homepage list, What we find register) ─────────── */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--ink); }
.kinds > div { position: relative; display: grid; align-content: start; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.375rem 0.25rem; padding: 1.5rem 2.25rem 1.625rem 0; border-bottom: 1px solid var(--rule); transition: transform 0.4s var(--ease); }
.kinds .n { grid-row: span 3; font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); padding-top: 0.5rem; }
.kinds h3 { font-size: 1.45rem; line-height: 1.15; transition: color 0.3s var(--ease); }
.kinds p { font-size: 0.9375rem; line-height: 1.55; color: var(--slate); }
.kinds .ex { margin-top: 0.375rem; font: italic 400 1.03rem/1.4 var(--serif); color: var(--ink-2); }
.kinds .ex span { display: block; margin-bottom: 0.3125rem; font: 500 0.625rem/1 var(--mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.kinds-foot { margin-top: 1.375rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; font-size: 0.875rem; color: var(--slate); }
.reg > div { scroll-margin-top: 5.5rem; }
.reg .wf > p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); }
.reg .wf dl { margin: 1rem 0 0; display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); gap: 0.625rem 1.25rem; }
.reg .wf dt { font: 500 0.65625rem/1.5 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); padding-top: 0.125rem; }
.reg .wf dd { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.reg .wf dd.seen { padding-left: 0.75rem; border-left: 2px solid var(--gold); }
@media (max-width: 880px) { .kinds { grid-template-columns: minmax(0, 1fr); } .reg .wf { grid-column: 2; } .reg .wf dl { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; } .reg .wf dd { margin-bottom: 0.5rem; } }

/* motif classes used by the process & automation and organizational alignment pages */
.motif.anim .terr { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.8; }
.motif.anim .terr.b { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .overlapz { fill: var(--gold); opacity: 0.28; }
.motif.anim .station.hand { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .station.auto { fill: var(--teal-soft); stroke: var(--teal); }
.motif.anim .work.hand { fill: var(--gold); }
.motif.anim .work.auto { fill: var(--teal); }
.motif.anim .handtxt { fill: var(--gold); }
.motif.anim .autotxt { fill: var(--teal); }
.motif.anim .lane.auto { stroke: var(--teal); }
.motif.anim .lane.hand { stroke: var(--gold); stroke-dasharray: 3 3; }
.motif.anim .barv { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .flr { fill: var(--chalk); stroke: var(--rule-strong); }
.motif.anim .nd2 { fill: var(--slate); }
.motif.anim .nd2.hot { fill: var(--gold); }
.motif.anim .ring.hand { stroke: var(--gold); }
.motif.anim .doc2 { fill: var(--gold-soft); stroke: var(--gold); }

/* ── Trust and security: review levels, setup, hosting, protection, Trust Center ───────── */
.scale { position: relative; margin: 0 0 2.25rem; padding-top: 1.75rem; }
.scale-labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; font: 500 0.9375rem/1 var(--sans); color: var(--ink); }
.scale-labels em { font-style: normal; color: var(--slate); font-weight: 400; }
.scale-bar { position: relative; height: 0.625rem; border-radius: 999px; background: linear-gradient(90deg, var(--steel), #8d97a6 50%, var(--accent)); }
.scale-bar i { position: absolute; top: 50%; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--chalk); border: 2px solid var(--gold); transform: translate(-50%, -50%); }
.scale-ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; font-size: 0.8125rem; color: var(--slate); }
.ttable { width: 100%; border-collapse: collapse; border-top: 1px solid var(--ink); }
.ttable th { padding: 0.875rem 1.5rem 0.875rem 0; text-align: left; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); border-bottom: 1px solid var(--rule); }
.ttable td { padding: 1.125rem 1.5rem 1.25rem 0; vertical-align: top; border-bottom: 1px solid var(--rule); font-size: 0.96875rem; line-height: 1.55; color: var(--ink-2); }
.ttable td:first-child { width: 14rem; }
.ttable td b { display: block; font: 500 1.2rem/1.2 var(--serif); color: var(--ink); }
.ttable td span { display: block; margin-top: 0.25rem; font-size: 0.84375rem; color: var(--slate); }
.ttable tr.rec td span { color: var(--gold); font-weight: 500; }
.ttable td.time { width: 9rem; padding-right: 0; font: 400 1.2rem/1.2 var(--serif); color: var(--ink); white-space: nowrap; }
.tnote { margin-top: 0.875rem; max-width: 86ch; font-size: 0.8125rem; line-height: 1.55; color: var(--slate); }
.fnm { font: 500 0.75em/0 var(--sans); color: var(--gold); margin-left: 0.125rem; }
.host { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.host > div { padding: 1.375rem 1.375rem 1.5rem; background: var(--chalk); border: 1px solid var(--rule); border-top: 2px solid var(--gold); border-radius: 0 0 0.375rem 0.375rem; }
.host .tg { font: 500 0.65625rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.host .tg.rec { color: var(--gold); }
.host h3 { margin-top: 0.625rem; font-size: 1.35rem; line-height: 1.15; }
.host p { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--slate); }
@media (max-width: 880px) {
  .host { grid-template-columns: minmax(0, 1fr); }
      .scale-labels span { font-size: 0.75rem; white-space: normal; text-align: center; max-width: 7rem; }
  .scale-labels span em { display: block; }
  .scale { padding-top: 2.75rem; }
  .ttable thead { display: none; }
  .ttable, .ttable tbody, .ttable tr, .ttable td { display: block; width: auto !important; }
  .ttable tr { padding: 1rem 0; border-bottom: 1px solid var(--rule); }
  .ttable td { padding: 0.25rem 0; border: 0; }
  .ttable td.time::before { content: 'Client IT time: '; font: 500 0.6875rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
}
.tcb { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; }
.tcb p { font-size: 0.96875rem; color: var(--slate); }
.tcb-qr { display: block; padding: 0.3125rem; background: #fff; border: 1px solid var(--rule); border-radius: 0.25rem; transition: transform 0.35s var(--ease); }
.tcb-qr:hover { transform: translateY(-2px); }
.tcb-qr img { display: block; width: 5.5rem; height: 5.5rem; }
.prose .tc-note { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.9375rem; color: var(--slate); }
#setup { scroll-margin-top: 4.5rem; }

/* ── Trust and security: the security concept ───────────────────────────────────────── */
.tlabels { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 0.625rem; margin-top: 0.25rem; }
.tlabels span { white-space: nowrap; }
.tlabels span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.8125rem; border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--chalk); font: 500 0.8125rem/1 var(--sans); color: var(--ink-2); }
.tlabels span::before { content: ''; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--teal); }
.commit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.commit > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.5rem; align-content: start; padding: 1.5rem 1.75rem 1.625rem 0; border-bottom: 1px solid var(--rule); }
.commit .by { align-self: start; }
.commit > div:not(:nth-child(3n)) { border-right: 1px solid var(--rule); margin-right: 1.75rem; }
.commit .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.commit h3 { font-size: 1.4rem; line-height: 1.15; }
.commit p { font-size: 0.9375rem; line-height: 1.58; color: var(--ink-2); }
.commit .by { margin-top: 0.375rem; padding-top: 0.75rem; border-top: 1px dashed var(--rule-strong); font: 500 0.6875rem/1.45 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); }
.lc-stage { position: relative; padding: 1.25rem 1.25rem 1.375rem; background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; }
.lc-stage .lc-n { font: 500 0.6875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.lc-stage h3 { margin-top: 0.5rem; font-size: 1.3rem; line-height: 1.15; }
.lc-stage p { margin-top: 0.4375rem; font-size: 0.875rem; line-height: 1.55; color: var(--slate); }
.lc-env { position: relative; padding: 2.125rem 1rem 1rem; border: 1.5px dashed var(--teal); border-radius: 0.5rem; background: rgba(63, 143, 138, 0.05); }
.lc-env-k { position: absolute; top: 0.6875rem; left: 1rem; font: 500 0.65625rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--teal); }
.ctrls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem 2.5rem; }
.ctrls > div { padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.ctrls h3 { font: 500 0.71875rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.875rem; }
.ctrls ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.ctrls li { position: relative; padding-left: 1.25rem; font-size: 0.90625rem; line-height: 1.5; color: var(--ink-2); }
.ctrls li::before { content: ''; position: absolute; left: 0; top: 0.4375rem; width: 0.4375rem; height: 0.25rem; border-left: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal); transform: rotate(-45deg); }
.ttable.status td:first-child { width: 20rem; }
.ttable.status td:nth-child(2) { width: 10rem; }
.st { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.875rem/1 var(--sans); }
.st::before { content: ''; flex: none; box-sizing: border-box; width: 0.5625rem; height: 0.5625rem; border-radius: 50%; }
.ttable td .st { display: inline-flex; margin-top: 0; font-size: 0.875rem; }
.st.ok { color: var(--teal); } .st.ok::before { background: var(--teal); }
.st.prog { color: var(--gold); } .st.prog::before { background: transparent; border: 1.5px solid var(--gold); }
.sec-contact { margin-top: 2rem; font-size: 0.875rem; color: var(--slate); }
@media (max-width: 1040px) { .ctrls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 2rem; } .commit { grid-template-columns: repeat(2, minmax(0, 1fr)); } .commit > div:not(:nth-child(3n)) { border-right: 0; margin-right: 0; } .commit > div:nth-child(odd) { border-right: 1px solid var(--rule); margin-right: 1.75rem; } }
@media (max-width: 880px) {
  .commit { grid-template-columns: minmax(0, 1fr); } .commit > div:nth-child(odd) { border-right: 0; margin-right: 0; }
  .ctrls { grid-template-columns: minmax(0, 1fr); }
  .ttable.status td:first-child, .ttable.status td:nth-child(2) { width: auto; }
}
.pnp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.pnp > div { padding: 1.375rem 1.5rem 0.25rem 0; margin-right: 1.5rem; border-right: 1px solid var(--rule); }
.pnp > div:last-child { border-right: 0; margin-right: 0; }
.pnp b { display: block; font: 400 clamp(1.6rem, 2.3vw, 2.1rem)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.pnp span { display: block; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: var(--slate); }
@media (max-width: 1040px) { .pnp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0; } .pnp > div:nth-child(2) { border-right: 0; margin-right: 0; } }
@media (max-width: 560px) { .pnp { grid-template-columns: minmax(0, 1fr); } .pnp > div { border-right: 0; margin-right: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); } }
/* the optional sixth review step */
.pipe > div.opt .bub { border-style: dashed; color: var(--slate); }
.pipe > div.opt h3 { color: var(--ink-2); }
.pipe .opt-tag { position: absolute; top: 0.5rem; left: 2.875rem; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 1040px) { .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1.75rem; } }
@media (max-width: 640px) { .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Who we serve: private equity on the left, consulting and advisory on the right */
.who-two .cat a { grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem; }
.who-two .cat a p { grid-column: 2; }
.who-two .cat .arr { grid-column: 3; grid-row: 1; }
.who-two .cat.sub a { padding-left: 1.5rem; }
/* Who we serve: line the two columns up, row by row, in the menu and on the page */
#p-who .panel-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); }
#p-who .panel-group { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.who-two { grid-template-rows: repeat(4, auto); }
.who-two > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.who-two > div > .cat { display: contents; }
.who-two > div > .cat:first-child > a { border-top: 1px solid var(--ink); }
.who-two .cat a { align-content: start; }
@media (max-width: 880px) { .who-two { grid-template-rows: none; } .who-two > div { grid-row: auto; grid-template-rows: none; } }
/* Capabilities: three on the left, three on the right, rows lined up, in the menu and on the page */
#p-cap .panel-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); }
#p-cap .panel-group { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }
.panel-intro .panel-all { justify-self: start; margin-top: 0.25rem; font-size: 0.875rem; }
.cap-two { grid-template-rows: auto repeat(3, auto); }
.cap-two > div { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
.cap-two > div > .k { margin-bottom: 1rem; }
.cap-two > div > .cat { display: contents; }
.cap-two .cat a { grid-template-columns: 3.25rem minmax(0, 1fr) 1.5rem; align-content: start; }
.cap-two .cat a p { grid-column: 2; }
.cap-two .cat .arr { grid-column: 3; grid-row: 1; }
.cap-two > div > .cat > a:first-child { border-top: 1px solid var(--ink); }
@media (max-width: 880px) { .cap-two { grid-template-rows: none; gap: 2.5rem 0; } .cap-two > div { grid-row: auto; grid-template-rows: none; } }
/* Both menus use the same frame as the page content, so their columns line up */
.panel { width: min(73.75rem, calc(100vw - 3rem)); grid-template-columns: 15rem 1fr; }
@media (min-width: 1240px) { .panel-group a.row { white-space: nowrap; } }
/* compliance and assurance: what is in place today, and what is in progress */
.assure { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.assure > div { padding: 1.5rem 1.625rem 0.5rem; background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; }
.assure .st { font: 500 0.71875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.assure dl { margin: 1rem 0 0; }
.assure dl > div { padding: 1rem 0 1.125rem; border-top: 1px solid var(--rule); }
.assure dt { font: 500 1.2rem/1.25 var(--serif); color: var(--ink); }
.assure dd { margin: 0.375rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: var(--slate); }
@media (max-width: 880px) { .assure { grid-template-columns: minmax(0, 1fr); } }
/* data lifecycle: arrows in their own slots; all five cards share one top and bottom line */
.lc { --lc-top: calc(2.125rem + 1.5px); --lc-bot: calc(1rem + 1.5px); display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 3.2fr) 2rem minmax(0, 1fr); align-items: stretch; }
.lc > .lc-stage, .lc > .lc-arr { margin: var(--lc-top) 0 var(--lc-bot); }
.lc-env-row { display: grid; grid-template-columns: minmax(0, 1fr) 2rem minmax(0, 1fr) 2rem minmax(0, 1fr); align-items: stretch; height: 100%; }
.lc-arr { display: grid; place-items: center; font-family: var(--serif); font-size: 1.2rem; line-height: 1; color: var(--silver); }
@media (max-width: 880px) {
  .lc, .lc-env-row { grid-template-columns: minmax(0, 1fr); }
  .lc > .lc-stage, .lc > .lc-arr { margin: 0; }
  .lc-arr { height: 2rem; transform: rotate(90deg); }
}
/* ── detail pages (capabilities and teams): centered hero, graphic stage, tiles, flow ─────────── */
.dp .btn { border-radius: 62.4375rem; }
.dp-kick { display: block; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.dp-hero { padding: clamp(4rem, 7vw, 6rem) 0 0; text-align: center; }
.dp-hero .crumb { font: 500 0.75rem var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); transition: color 0.3s var(--ease); }
.dp-hero .crumb:hover { color: var(--ink); }
.dp-hero h1 { font-weight: 400; font-size: clamp(2.75rem, 6vw, 5.25rem); line-height: 1; letter-spacing: -0.03em; margin: 1.25rem auto 0; max-width: 16ch; text-wrap: balance; }
.dp-sub { margin: 1.375rem auto 0; max-width: 32ch; font: 400 clamp(1.3rem, 2vw, 1.75rem)/1.3 var(--serif); color: var(--slate); text-wrap: balance; }
.dp-cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; align-items: center; }
.dp-link { font: 500 1rem/1 var(--sans); color: var(--accent); transition: color 0.3s var(--ease); }
.dp-link span { display: inline-block; transition: transform 0.35s var(--ease); }
.dp-link:hover span { transform: translateX(0.25rem); }
.dp-fig { margin: clamp(3rem, 6vw, 4.5rem) 0 0; }
.dp-stage { background: var(--chalk); border-radius: 1.75rem; padding: clamp(1.25rem, 3.4vw, 3rem); }
.dp-scroll svg { display: block; width: 100%; height: auto; }
.dp-swipe { display: none; }
.dp-fig figcaption { margin: 1.125rem auto 0; max-width: 62ch; font-size: 0.9375rem; line-height: 1.5; color: var(--slate); text-align: center; text-wrap: balance; }
.dp-over { padding: clamp(5rem, 9vw, 7.5rem) 0 clamp(5rem, 9vw, 7.5rem); }
.dp-over .shell { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 2.5rem 4.5rem; align-items: end; }
.dp-big { margin: 0; font: 500 clamp(1.45rem, 2.35vw, 2rem)/1.36 var(--sans); letter-spacing: -0.015em; color: var(--slate); text-wrap: pretty; }
.dp-big .ink { color: var(--ink); }
.dp-for p { margin-top: 0.875rem; font-size: 1.125rem; line-height: 1.55; color: var(--ink-2); }
.dp-sec { padding: clamp(5rem, 9vw, 7.5rem) 0; }
.dp-sec.alt { background: var(--chalk); }
.dp-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.75rem, 5vw, 4rem); }
.dp-head h2 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.04; letter-spacing: -0.025em; text-wrap: balance; }
.dp-head p { margin: 1.25rem auto 0; max-width: 40rem; font-size: 1.1875rem; line-height: 1.55; color: var(--slate); text-wrap: balance; }
.dp-tile { background: var(--chalk); border-radius: 1.5rem; padding: clamp(1.75rem, 2.6vw, 2.375rem); }
.dp-sec.alt .dp-tile { background: var(--paper); }
.dp-n { display: block; font: 600 0.875rem/1 var(--sans); letter-spacing: 0.02em; color: var(--gold); }
.dp-qs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.dp-qs li { display: flex; align-items: center; min-height: 8.5rem; font: 400 clamp(1.3rem, 1.9vw, 1.6rem)/1.3 var(--serif); color: var(--ink); text-wrap: balance; }
.dp-finds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; }
.dp-finds > div { grid-column: span 2; }
.dp-finds > div:nth-last-child(2):nth-child(3n + 1), .dp-finds > div:last-child:nth-child(3n + 2) { grid-column: span 3; }
.dp-finds h3, .dp-dlv h3 { margin-top: 1.125rem; font-size: 1.5rem; line-height: 1.16; text-wrap: balance; }
.dp-finds p, .dp-dlv p { margin-top: 0.75rem; font-size: 1.0625rem; line-height: 1.6; color: var(--slate); }
.dp-flow { --n: 5; position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 64rem; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.5rem; }
.dp-flow::before { content: ''; position: absolute; top: 1.5rem; left: calc(100% / (2 * var(--n))); right: calc(100% / (2 * var(--n))); height: 2px; margin-top: -1px; background: var(--rule-strong); transform-origin: left center; transform: scaleX(0); transition: transform 1.8s var(--ease) 0.25s; }
.dp-flow.in::before { transform: none; }
.dp-flow li { position: relative; text-align: center; }
.dp-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0 auto; border-radius: 50%; background: var(--ink); color: var(--paper); font: 500 1rem/1 var(--sans); box-shadow: 0 0 0 0.5rem var(--chalk); }
.dp-flow li:last-child .dp-dot { background: var(--teal); }
.dp-flow p { margin: 1.375rem auto 0; max-width: 13ch; font: 400 1.3rem/1.28 var(--serif); color: var(--ink); text-wrap: balance; }
.dp-dlv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.dp-dlv > div { min-height: 17rem; }
.dp-say { max-width: 54rem; margin: 0 auto; text-align: center; }
.dp-say p { margin-top: 1.5rem; font: 400 clamp(1.45rem, 2.5vw, 2.05rem)/1.34 var(--serif); color: var(--ink); text-wrap: balance; }
.dp-related { margin-top: clamp(4.5rem, 8vw, 6.5rem); }
.dp-related > .dp-kick { text-align: center; }
.dp-rels { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.dp-rel { display: grid; grid-template-rows: auto 1fr auto; min-height: 10.5rem; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.dp-rel b { margin-top: 0.875rem; font: 500 1.45rem/1.2 var(--serif); }
.dp-rel .arr { justify-self: end; font: 400 1.4rem/1 var(--serif); color: var(--slate); transition: transform 0.45s var(--ease); }
.dp-rel:hover { transform: translateY(-0.25rem); box-shadow: 0 1.75rem 3.5rem -2.25rem rgba(23, 25, 29, 0.35); }
.dp-rel:hover .arr { transform: translateX(0.25rem); }
.dp .close { border-top: 0; }
.dp .close .frame { border: 0; border-radius: 1.75rem; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 1.5rem; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem); }
.dp .close .k::before { display: none; }
.dp .close h2 { margin-inline: auto; max-width: 20ch; font-size: clamp(2.2rem, 4.2vw, 3.5rem); text-wrap: balance; }
.dp .close .side { border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
.dp .close .side p { max-width: 44ch; font-size: 1.125rem; }
@media (prefers-reduced-motion: reduce) { .dp-flow::before { transition: none; } }
@media (max-width: 1040px) { .dp-finds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dp-finds > div, .dp-finds > div:nth-last-child(2):nth-child(3n + 1), .dp-finds > div:last-child:nth-child(3n + 2) { grid-column: auto; } }
@media (max-width: 880px) {
  .dp-over .shell, .dp-qs, .dp-finds, .dp-dlv, .dp-rels { grid-template-columns: minmax(0, 1fr); }
  .dp-qs li { min-height: 0; }
  .dp-dlv > div { min-height: 0; }
  .dp-flow { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .dp-flow::before { top: 1.5rem; bottom: 1.5rem; left: 1.5rem; right: auto; width: 2px; height: auto; margin: 0 0 0 -1px; transform-origin: center top; transform: scaleY(0); }
  .dp-flow li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; align-items: center; text-align: left; }
  .dp-flow p { margin: 0; max-width: none; }
  .dp-dot { margin: 0; }
}
@media (max-width: 700px) {
  .dp-stage { padding: 1rem 0; border-radius: 1.25rem; }
  .dp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 1rem; scrollbar-width: none; }
  .dp-scroll::-webkit-scrollbar { display: none; }
  .dp-scroll svg { width: 46rem; max-width: none; }
  .dp-scroll { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .dp-swipe { display: block; margin: 0.875rem 0 0; text-align: center; font: 500 0.875rem/1 var(--sans); color: var(--accent); }
}

/* ── v7: cinematic (October 2026). Graded full-bleed photography, the homepage reel, dark covers,
 *    photo cards and closing bands. One grade for every photo: partly desaturated, cool and dark. ── */
:root { --night: #0e1116; --grade: grayscale(0.68) contrast(1.08) brightness(0.84); --grade-card: grayscale(0.72) contrast(1.08) brightness(0.8); }
main { padding-top: 0; }
.media { position: absolute; inset: 0; overflow: hidden; background: var(--night); }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.media::after { content: ''; position: absolute; inset: 0; background: #1c2840; mix-blend-mode: soft-light; opacity: 0.7; pointer-events: none; }
.media.kb img { transform-origin: 62% 45%; animation: kenburns 26s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } }
.shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(8, 10, 14, 0.62) 0%, rgba(8, 10, 14, 0) 22%),
  linear-gradient(90deg, rgba(8, 10, 14, 0.9) 0%, rgba(8, 10, 14, 0.72) 34%, rgba(8, 10, 14, 0.25) 62%, rgba(8, 10, 14, 0.1) 100%),
  linear-gradient(0deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0) 30%); }
.arrow { display: inline-block; width: 0.9em; height: 1px; background: currentColor; position: relative; vertical-align: middle; }
.arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border: solid currentColor; border-width: 1px 1px 0 0; transform: rotate(45deg); }
.k::before { width: 2rem; }

/* buttons on dark media */
.btn.light { background: #fff; border-color: #fff; color: var(--ink); }
.btn.light:hover { background: var(--steel); border-color: var(--steel); color: var(--ink); }
.btn.line { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.btn.line:hover { background: rgba(255, 255, 255, 0.08); border-color: #fff; box-shadow: none; }

/* navigation: transparent and white over a cover, solid paper once the cover scrolls away */
.nav { transition: background 0.45s var(--ease), border-color 0.45s var(--ease); }
.nav.over { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.over .brand, .nav.over .nav-links > a, .nav.over .nav-links > .dd > button { color: #fff; }
.nav.over .brand img { filter: none; }
.nav.over .nav-links > a:hover, .nav.over .nav-links > .dd > button:hover { background: rgba(255, 255, 255, 0.1); }
.nav.over .nav-links > a.btn.cta { background: #fff; border-color: #fff; color: var(--ink); }
.nav.over .nav-links > a.btn.cta:hover { background: var(--steel); border-color: var(--steel); }
.nav.over .nav-links > a[aria-current='page'] { color: #fff; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55); }
.nav.over .burger { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.nav.over .progress { opacity: 0; }

/* covers: the homepage reel and every page header */
.cv { position: relative; min-height: max(86vh, 40rem); color: #fff; display: flex; flex-direction: column; overflow: hidden; background: var(--night); }
.cv-home { min-height: max(100vh, 45rem); min-height: max(100svh, 45rem); }
.cv-short { min-height: max(62vh, 32rem); }
.cv-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 7.5rem; padding-bottom: 3.5rem; }
.cv .crumb { display: inline-flex; align-items: center; gap: 0.8rem; margin-bottom: 1.6rem; font: 500 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); transition: color 0.3s var(--ease); }
.cv .crumb::before { content: ''; width: 2rem; height: 1px; background: rgba(255, 255, 255, 0.45); }
.cv a.crumb:hover { color: #fff; }
.cv h1 { font-weight: 380; font-size: clamp(3rem, 6vw, 5.6rem); line-height: 0.98; letter-spacing: -0.026em; max-width: 15ch; text-wrap: balance; }
.cv-home h1 { font-size: clamp(4rem, 9.2vw, 8.6rem); line-height: 0.92; letter-spacing: -0.025em; }
.cv-short h1 { font-size: clamp(2.6rem, 4.8vw, 4.4rem); max-width: 22ch; }
.cv-sub { margin-top: 1.1rem; max-width: 30ch; font: italic 340 clamp(1.45rem, 2.2vw, 2.1rem)/1.25 var(--serif); color: rgba(255, 255, 255, 0.88); text-wrap: balance; }
.cv-lede { margin-top: 1.4rem; max-width: 31rem; font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.76); }
.cv-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.3rem; }
.cv-body > * { opacity: 0; transform: translateY(0.75rem); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.cv.ready .cv-body > * { opacity: 1; transform: none; }
.cv.ready .cv-body > :nth-child(2) { transition-delay: 0.1s; } .cv.ready .cv-body > :nth-child(3) { transition-delay: 0.2s; } .cv.ready .cv-body > :nth-child(4) { transition-delay: 0.3s; } .cv.ready .cv-body > :nth-child(5) { transition-delay: 0.4s; }

/* the frosted strip along the bottom of a cover */
.strip { position: relative; background: rgba(10, 13, 18, 0.58); -webkit-backdrop-filter: blur(14px) saturate(0.8); backdrop-filter: blur(14px) saturate(0.8); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.strip dl { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; }
.strip dl > div { padding: 1.45rem 1.6rem 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.strip dl > div:first-child { border-left: 0; padding-left: 0; }
.strip dt { font: 380 1.85rem/1.05 var(--serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.strip dd { margin: 0.55rem 0 0; max-width: 17rem; font-size: 0.8rem; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }
.strip dl[style="--n:2"] dd { max-width: 30rem; }
.strip-for .shell { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; padding: 1.5rem 0 1.6rem; }
.strip-for .k { color: rgba(255, 255, 255, 0.6); }
.strip-for .k::before { background: rgba(255, 255, 255, 0.4); }
.strip-for p { max-width: 62ch; font: 400 1.2rem/1.4 var(--serif); color: rgba(255, 255, 255, 0.88); }

/* section rhythm: paper and white, generous like the covers */
.sec { padding: clamp(5rem, 9vw, 8.5rem) 0; }
.sec.tint { background: var(--chalk); border: 0; }
.head { margin-bottom: clamp(2.75rem, 5vw, 4.5rem); }
.head h2, .split h2, .steps h2 { font-weight: 400; letter-spacing: -0.018em; }
.head h2 { font-size: clamp(2.2rem, 3.6vw, 3.25rem); }
.head .see-all { justify-self: end; }
.see-all { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink); transition: gap 0.3s var(--ease); }
.see-all:hover { gap: 1rem; }
.row-label { margin-bottom: 1.1rem; }
a.k:hover { color: var(--ink); }

/* pillars (the three ways Snowstone differs) */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; margin-bottom: clamp(3.5rem, 6vw, 5.5rem); }
.pillars > div { border-top: 1px solid var(--ink); padding-top: 1.6rem; }
.pillars .n { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; color: var(--slate); }
.pillars h3 { margin: 1.1rem 0 0.9rem; font-weight: 420; font-size: 1.65rem; letter-spacing: -0.01em; }
.pillars p { font-size: 1rem; line-height: 1.65; color: var(--slate); }

/* photo cards */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.pcard { position: relative; display: block; aspect-ratio: 4 / 5.2; overflow: hidden; border-radius: 3px; color: #fff; background: var(--night); }
.pcard .media img { filter: var(--grade-card); transition: transform 1.6s var(--ease); }
.pcard:hover .media img { transform: scale(1.035); }
.pcard-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 10, 14, 0.35) 0%, rgba(8, 10, 14, 0) 26%, rgba(8, 10, 14, 0) 40%, rgba(8, 10, 14, 0.88) 100%); }
.pcard-top { position: absolute; top: 1.4rem; left: 1.6rem; right: 1.6rem; font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }
.pcard-body { position: absolute; left: 1.6rem; right: 1.6rem; bottom: 1.6rem; }
.pcard h3 { font-weight: 400; font-size: 1.85rem; line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance; }
.pcard p { margin-top: 0.75rem; max-width: 34ch; font-size: 0.9375rem; line-height: 1.5; color: rgba(255, 255, 255, 0.74); }
.pcard .more { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.15rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.82); transition: gap 0.3s var(--ease); }
.pcard:hover .more { gap: 1rem; color: #fff; }
.pcard.sm { aspect-ratio: 4 / 3.3; }
.pcard.sm h3 { font-size: 1.55rem; }
.pcards.rel { margin-top: 1.5rem; }
.dir-group + .dir-group { margin-top: clamp(3.5rem, 6vw, 5rem); }
.advisory { display: grid; grid-template-columns: 13rem repeat(3, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid var(--rule); }
.advisory > .k { padding-top: 1.75rem; }
.advisory > a:not(.k) { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem 0; border-left: 1px solid var(--rule); font: 400 1.25rem/1.25 var(--serif); transition: color 0.3s var(--ease); }
.advisory > a:not(.k):hover { color: var(--accent); }
.advisory .arrow { flex: none; margin-top: 0.7rem; color: var(--slate); }
.home-caps { margin-top: clamp(3.5rem, 6vw, 5rem); }

/* split: a tall photo beside a list (homepage: the eight kinds) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--paper); }
.split-photo { position: relative; min-height: 100%; background: var(--night); }
.split-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.split-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8, 10, 14, 0.7) 0%, rgba(8, 10, 14, 0) 40%); }
.split-cap { position: absolute; left: 2rem; right: 2rem; bottom: 2rem; max-width: 22rem; font-size: 0.82rem; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.split-cap::before { content: ''; display: block; width: 2rem; height: 1px; margin-bottom: 0.9rem; background: rgba(255, 255, 255, 0.5); }
.split-body { padding: clamp(5rem, 9vw, 8rem) max(1.5rem, (100vw - var(--shell)) / 2) clamp(5rem, 9vw, 8rem) clamp(2.5rem, 5vw, 5rem); }
.split-body h2 { margin-top: 0.75rem; font-size: clamp(2.2rem, 3.6vw, 3.25rem); line-height: 1.06; text-wrap: balance; }
.split-body .lede { margin: 1.6rem 0 3rem; }
.split .kinds { grid-template-columns: minmax(0, 1fr); }
.split .kinds > div { padding-right: 0; }
.split .kinds-foot { display: block; }

/* bands: full-bleed dark photo interludes and the closing call to action */
.band { position: relative; overflow: hidden; padding: clamp(7rem, 12vw, 10.5rem) 0; color: #fff; background: var(--night); }
.band-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 10, 14, 0.9) 0%, rgba(8, 10, 14, 0.7) 45%, rgba(8, 10, 14, 0.42) 100%); }
.band .shell { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 3rem; }
.band .k { color: rgba(255, 255, 255, 0.6); }
.band .k::before { background: rgba(255, 255, 255, 0.45); }
.band h2 { margin-top: 1.4rem; max-width: 17ch; font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
.band p { margin-top: 1.4rem; max-width: 36rem; font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, 0.74); }
.band .cv-actions { flex: none; margin-top: 0; }

/* footer: night */
footer { background: var(--night); border-top: 0; color: #fff; }
footer .brand img { filter: none; }
/* The footer link style must not reach the logo: keep the same icon-and-wordmark lockup as the navigation. */
.fgrid a.brand { display: inline-flex; padding: 0; font-size: 1.4375rem; color: #fff; }
footer .brand img { display: block; flex: none; }
footer .brand-wordmark { display: block; transform: translateY(0.1em); }
.fgrid { border-bottom-color: rgba(255, 255, 255, 0.1); }
.fgrid h4 { color: rgba(255, 255, 255, 0.5); }
.fgrid a { color: rgba(255, 255, 255, 0.62); }
.fgrid a:hover { color: #fff; }
.fgrid .tag { color: rgba(255, 255, 255, 0.86); }
.fbar, .fbar a { color: rgba(255, 255, 255, 0.5); }
.fbar a:hover { color: #fff; }

/* page-specific pieces under covers */
.stage { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--chalk); border-radius: 4px; }
.stage .motif { margin: 0; }
.related-block { margin-top: clamp(3.5rem, 6vw, 5rem); }
.tc-sec { padding: clamp(2.75rem, 4.5vw, 3.75rem) 0; }
.tcb-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.tcb-row .k { display: block; margin-bottom: 0.75rem; }
.tcb-row p { font-size: 1.05rem; color: var(--ink-2); max-width: 62ch; }
.careers-note { margin-bottom: 2.5rem; color: var(--ink-2); }
.dp .btn { border-radius: 0.1875rem; }
.dp-over .shell { display: block; }
.dp-big { max-width: 46ch; }
.dp-over .dp-fig { margin-top: clamp(3.5rem, 6vw, 5rem); }
.dp-stage, .dp-tile { border-radius: 4px; }
.dp-related .pcards { margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) { .media.kb img { animation: none; } .cv-body > * { opacity: 1; transform: none; transition: none; } }
@media (max-width: 1040px) { .strip dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip dl > div:nth-child(3) { border-left: 0; padding-left: 0; } .strip dl > div:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.1); } }
@media (max-width: 880px) {
  .cv-body { justify-content: flex-end; padding-top: 6.5rem; padding-bottom: 2.5rem; }
  .shade { background: linear-gradient(180deg, rgba(8, 10, 14, 0.6) 0%, rgba(8, 10, 14, 0.42) 28%, rgba(8, 10, 14, 0.8) 55%, rgba(8, 10, 14, 0.92) 100%); }
  .strip-for .shell { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .pillars, .pcards { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .pillars { gap: 2.25rem; }
  .pcard, .pcard.sm { aspect-ratio: 4 / 3.4; }
  .advisory { grid-template-columns: minmax(0, 1fr); }
  .advisory > a:not(.k) { border-left: 0; border-bottom: 1px solid var(--rule); padding: 1.2rem 0; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-photo { min-height: 24rem; }
  .split-sticky { position: absolute; inset: 0; height: auto; }
  .split-body { padding: 4.5rem 1.5rem; }
  .band .shell { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .head .see-all { justify-self: start; }
}
@media (max-width: 600px) { .strip dl > div { padding: 1.1rem 1rem 1.15rem; } .strip dl > div:nth-child(odd) { padding-left: 0; } .strip dt { font-size: 1.45rem; } .strip dd { font-size: 0.75rem; } }

/* v7 round 2: long titles, word strips, the client-decisions band, left-aligned detail headings */
.cv-long h1 { max-width: 20ch; font-size: clamp(2.7rem, 5vw, 4.6rem); line-height: 1; }
.strip.words dt { font-size: 1.55rem; line-height: 1.12; }
.band-quote { padding: clamp(6rem, 10vw, 9rem) 0; }
.band-quote .quote { margin-top: 1.5rem; max-width: 40ch; font: 400 clamp(1.6rem, 2.6vw, 2.35rem)/1.32 var(--serif); letter-spacing: -0.012em; color: rgba(255, 255, 255, 0.92); text-wrap: pretty; }
.dp-over .stage { margin-top: clamp(3.5rem, 6vw, 5rem); }
.dp-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; max-width: none; margin: 0 0 clamp(2.75rem, 5vw, 4.5rem); text-align: left; }
.dp-head h2 { max-width: 18ch; font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.018em; }
.dp-head p { margin: 0; max-width: 36rem; font-size: 1.08rem; line-height: 1.65; text-wrap: pretty; }
.dp-qs li { font-weight: 400; }
.dp-rel-sec .pcards { margin-top: 1.5rem; }
.dp-big { font: 400 clamp(1.6rem, 2.5vw, 2.2rem)/1.3 var(--serif); letter-spacing: -0.012em; max-width: 44ch; }
.nav:not(.over) { background: rgba(246, 245, 241, 0.95); }
.lc-sec { padding-top: clamp(4rem, 7vw, 6rem); }
@media (max-width: 880px) { .dp-head { grid-template-columns: minmax(0, 1fr); } }

/* v7 round 3 (5 Oct 2026): covers fill the screen; How it works chapter strip; capability and team pages
 * organized as overview, questions, findings, approach and deliverables in the register style. */
.cv { min-height: max(100vh, 40rem); min-height: max(100svh, 40rem); }
section[id] { scroll-margin-top: 4.125rem; }
.head-side { display: grid; gap: 1.25rem; justify-items: start; }
.pcards + .row-label { margin-top: clamp(2.75rem, 4.5vw, 3.75rem); }

/* cover strip as a table of contents */
.chapters ol { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.chapters li { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.chapters li:first-child { border-left: 0; }
.chapters a { display: grid; gap: 0.5rem; height: 100%; padding: 1.4rem 1.6rem 1.5rem; color: #fff; transition: background 0.35s var(--ease); }
.chapters li:first-child a { padding-left: 0; }
.chapters a:hover { background: rgba(255, 255, 255, 0.05); }
.chapters .n { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.5); }
.chapters b { font: 380 1.45rem/1.12 var(--serif); letter-spacing: -0.01em; }
.chapters span:last-child { max-width: 17rem; font-size: 0.8rem; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }

/* overview: opening paragraph beside "On this page" */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem 5rem; align-items: start; }
.ov-lede { margin-top: 1.25rem; max-width: 42ch; font: 400 clamp(1.3rem, 1.75vw, 1.6rem)/1.45 var(--serif); letter-spacing: -0.006em; color: var(--ink-2); text-wrap: pretty; }
.ov-lede .ink { color: var(--ink); }
.toc ol { margin: 1.25rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.toc a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); font: 400 1.15rem/1.3 var(--serif); transition: color 0.3s var(--ease), padding 0.35s var(--ease); }
.toc a:hover { color: var(--accent); padding-left: 0.35rem; }
.toc .n { font: 500 0.7rem/1 var(--mono); letter-spacing: 0.1em; color: var(--slate); }
.toc .arrow { color: var(--slate); }

/* questions: two columns of numbered pull lines */
.qlist { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--ink); }
.qlist li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--rule); }
.qlist .n { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; color: var(--slate); }
.qlist p { font: italic 400 clamp(1.25rem, 1.6vw, 1.45rem)/1.3 var(--serif); color: var(--ink); text-wrap: balance; }

/* findings and coverage: the register (number | heading | prose) */
.reg h3 { font-weight: 400; }
.reg .n { color: var(--slate); }

/* approach: numbered steps along one rule */
.proc { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--rule); }
.proc::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 1.8s var(--ease) 0.2s; }
.proc.in::before { transform: none; }
.proc li { padding-top: 1.5rem; }
.proc .n { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.1em; color: var(--slate); }
.proc p { margin-top: 0.9rem; font: 400 1.25rem/1.3 var(--serif); color: var(--ink); text-wrap: balance; }

/* deliverables: three columns under an ink rule */
.pillars.dlv { margin-bottom: 0; }
.pillars.dlv h3 { font-weight: 400; }

.cv.cv-short { min-height: max(58vh, 30rem); }
.cv-short .cv-body { justify-content: flex-end; padding-bottom: 3rem; }
.sec.after-short { padding-top: clamp(3rem, 5vw, 4.25rem); }
/* homepage figures: a dark band under the reel, seen once the visitor starts to scroll */
.figs { background: var(--night); color: #fff; }
.figs .strip { background: var(--night); -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.figs .strip dl > div { padding-top: 2.4rem; padding-bottom: 2.6rem; }
.figs .strip dt { font-size: clamp(2.2rem, 3.2vw, 2.9rem); }
.figs .strip dd { font-size: 0.85rem; }
/* Book a demo: Calendly at full width (its desktop layout needs ~1,000px); site.js sets the height Calendly reports */
.book .cal { max-width: 70rem; height: 660px; margin: 0 auto; overflow: hidden; transition: height 0.35s var(--ease); }
/* Calendly draws at a fixed size; scale it by the same factor the site uses on large screens (--s, set by site.js) */
.book .cal iframe { display: block; width: calc(100% / var(--s, 1)); height: 660px; border: 0; transform: scale(var(--s, 1)); transform-origin: 0 0; }
.book .mail { margin-top: 1.25rem; text-align: center; font-size: 0.9375rem; color: var(--slate); }
/* Optical alignment: large serif capitals carry built-in left spacing, so titles look indented next to the
 * text and buttons below. Pull them back by the measured amount (the homepage C is the widest). */
.cv h1 { margin-left: -0.03em; }
.cv-home h1 { margin-left: -0.045em; }
/* Book a demo: text on the left, calendar on the right; 44rem keeps Calendly's calendar-and-times layout */
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44rem; gap: 2.5rem 4rem; align-items: start; }
.book-grid .cal { max-width: none; margin: 0; }
.book-grid .mail { margin-top: 1.75rem; text-align: left; }
@media (max-width: 1100px) { .book-grid { grid-template-columns: minmax(0, 1fr); } }
/* Calendly leaves ~66px above its card; pull it up so the card lines up with the first line of text */
@media (min-width: 1101px) { .book-grid .cal { margin-top: calc(-66px * var(--s, 1)); } }
@media (prefers-reduced-motion: reduce) { .proc::before { transform: none; transition: none; } }
@media (max-width: 1040px) { .chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } .chapters li:nth-child(3) { border-left: 0; } .chapters li:nth-child(3) a { padding-left: 0; } .chapters li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.1); } }
@media (max-width: 880px) {
  .ov-grid, .qlist { grid-template-columns: minmax(0, 1fr); }
  .proc { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--ink); }
  .proc::before { display: none; }
  .proc li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: baseline; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
  .proc p { margin-top: 0; font-size: 1.15rem; }
}
@media (max-width: 600px) { .chapters a { padding: 1.1rem 1rem 1.15rem; } .chapters li:nth-child(odd) a { padding-left: 0; } .chapters b { font-size: 1.2rem; } .chapters span:last-child { font-size: 0.75rem; } }

/* Book a demo: the calendar drawn from cached Calendly availability, and Calendly's form for the chosen slot */
.slots { position: relative; background: var(--chalk); border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px rgba(23, 25, 29, 0.04), 0 1.5rem 3rem -2.25rem rgba(23, 25, 29, 0.35); }
.slots.is-embed { background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
.slots-pick { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; background: var(--chalk); }
.slots-pick[hidden] { display: none; }
.slots-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.5rem 1.75rem 1.35rem; border-bottom: 1px solid var(--rule); }
.slots-kicker { display: block; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.slots-title { display: block; margin-top: 0.6rem; font: 400 1.65rem/1.05 var(--serif); letter-spacing: -0.015em; color: var(--ink); }
.slots-meta { display: grid; justify-items: end; gap: 0.45rem; margin: 0; text-align: right; font-size: 0.8125rem; line-height: 1.3; color: var(--slate); }
.slots-dur { padding: 0.32rem 0.7rem; border: 1px solid var(--rule-strong); border-radius: 999px; font: 500 0.75rem/1 var(--sans); color: var(--ink-2); }
.slots-dur:empty { display: none; }
.slots-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 12rem; }
.slots-cal { display: flex; flex-direction: column; min-height: 0; padding: 1.35rem 1.75rem 1.5rem; }
.slots-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.slots-month { font: 400 1.2rem/1.2 var(--serif); letter-spacing: -0.01em; }
.slots-nav { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: border-color 0.25s var(--ease); }
.slots-nav:hover:not(:disabled) { border-color: var(--ink); }
.slots-nav:disabled { color: var(--rule-strong); cursor: default; }
.slots-nav svg { width: 0.7rem; height: 0.7rem; }
/* Week rows grow a little with the card, up to a comfortable spacing; the time zone line sits at the bottom. */
.slots-grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: minmax(2.75rem, 3.5rem); align-content: start; align-items: center; justify-items: center; }
.slots-tz { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--slate); }
.slots-wd { align-self: end; padding-bottom: 0.6rem; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); }
.slots-d { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; font: 400 0.9375rem/1 var(--sans); color: var(--silver); }
button.slots-d { background: var(--accent-soft); color: var(--accent); font-weight: 600; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
button.slots-d:hover { background: #d3dae6; }
button.slots-d.on { background: var(--ink); color: var(--paper); }
.slots-times { display: flex; flex-direction: column; min-height: 0; padding: 1.35rem 1.25rem 1.25rem; border-left: 1px solid var(--rule); background: #fbfbf9; }
.slots-day { margin: 0 0 1rem; font: 400 1.15rem/1.2 var(--serif); color: var(--ink); }
.slots-day span { display: block; margin-bottom: 0.4rem; font: 500 0.625rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }
.slots-list { flex: 1; min-height: 0; display: grid; align-content: start; gap: 0.45rem; overflow-y: auto; margin-right: -0.5rem; padding-right: 0.5rem; scrollbar-width: thin; }
.slots-t { height: 2.6rem; border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--chalk); color: var(--ink); font: 500 0.9rem/1 var(--sans); cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); }
.slots-t:hover { border-color: var(--ink); }
.slots-t:active { background: var(--ink); color: var(--paper); }
.slots-wait { font-size: 0.875rem; color: var(--slate); }
.slots-form { position: relative; z-index: 1; padding: 0.75rem 0 0; background: var(--chalk); }
/* Calendly frames load on screen but behind the calendar panel: browsers slow down frames that are hidden or off-screen. */
.slots-form.is-off { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.slots-form-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.5rem 1.5rem 1rem; border-bottom: 1px solid var(--rule); }
.slots-back { padding: 0; border: 0; background: none; font: 500 0.9375rem/1 var(--sans); color: var(--accent); cursor: pointer; }
.slots-back:hover { color: var(--ink); }
.slots-chosen { font: 400 1.1rem/1.3 var(--serif); }
.slots-loading { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; top: 3.75rem; padding: 4rem 1rem; background: var(--chalk); text-align: center; font-size: 0.9375rem; color: var(--slate); }
.slots-form.ready .slots-loading { display: none; }
.book-grid .slots .cal { margin-top: 0; }
.slots-warm { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
@media (max-width: 700px) {
  .slots-top { flex-direction: column; align-items: flex-start; padding: 1.25rem 1rem 1.1rem; }
  .slots-meta { justify-items: start; text-align: left; }
  .slots-body { grid-template-columns: minmax(0, 1fr); }
  .slots-cal { padding: 1.1rem 1rem 1rem; }
  .slots-grid { grid-auto-rows: 2.75rem; }
  .slots-d { width: 2.35rem; height: 2.35rem; }
  .slots-times { padding: 1.25rem 1rem; border-left: 0; border-top: 1px solid var(--rule); }
  .slots-list { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-right: 0; padding-right: 0; }
  .slots-form-head { padding: 0.5rem 1rem 0.875rem; }
}

/* Book a demo (desktop): text column and calendar card share one height. The card is taken out of the row's height so
 * the text sets it, and the calendar spreads its weeks over the card. Our own calendar needs less width than Calendly's
 * embed, so the text column gets more room; Calendly's form (is-form) and the fallback embed keep their own height. */
@media (min-width: 1101px) {
  .book-grid:not(.cal-embed) { grid-template-columns: minmax(0, 1fr) 38rem; align-items: stretch; }
  .book-cal { position: relative; min-height: 33rem; }
  .book-cal .slots:not(.is-form):not(.is-embed) { position: absolute; inset: 0; }
}

/* Homepage comparison: a matching example under each "With Snowstone" cell */
.compare .now .cx { display: block; margin-top: 0.55rem; padding-top: 0.5rem; border-top: 1px dashed var(--rule); font: italic 400 0.9375rem/1.4 var(--serif); color: var(--ink-2); }
.compare .now .cx b { display: block; margin-bottom: 0.25rem; font: 500 0.625rem/1 var(--mono); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); }

/* Solutions menu (Massimo's layout): who we serve on the left, capabilities on the right, rows lined up */
#p-sol .panel-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto repeat(3, auto); }
#p-sol .panel-group { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; }

/* Solution pages (Oct 8): plain explanation, icon steps, lever cards, operational risks, standard deliverables */
.ico { width: 1.25rem; height: 1.25rem; flex: none; }
.sol-what-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem 5rem; align-items: start; }
.sol-what h2 { margin-top: 0.75rem; max-width: 20ch; font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.25rem); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance; }
.sol-lead { margin-top: 1.5rem; font-size: 1.1875rem; line-height: 1.6; color: var(--ink-2); max-width: 40rem; }
.sol-use { padding: 1.75rem 1.75rem 1.5rem; background: var(--chalk); border: 1px solid var(--rule); border-radius: 6px; }
.sol-use ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.95rem; }
.sol-use li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1rem; line-height: 1.45; color: var(--ink); }
.sol-use li .ico { color: var(--accent); margin-top: 0.1rem; }
.sol-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1.25rem; }
.sol-how li { position: relative; padding: 1.6rem 1.5rem 1.7rem; background: var(--chalk); border: 1px solid var(--rule); border-radius: 6px; }
.sol-how .sol-ico { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.sol-how .n { position: absolute; top: 1.6rem; right: 1.5rem; font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.sol-how h3 { margin: 1.25rem 0 0.6rem; font-size: 1.35rem; line-height: 1.2; }
.sol-how p { font-size: 0.9375rem; line-height: 1.55; color: var(--slate); }
.levers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.lever { padding: 1.6rem 1.75rem 1.9rem 0; border-bottom: 1px solid var(--rule); }
.lever:not(:nth-child(3n + 1)) { padding-left: 1.75rem; border-left: 1px solid var(--rule); }
.lever .tag { display: inline-block; padding: 0.3rem 0.6rem; border-radius: 3px; background: var(--accent-soft); font: 500 0.625rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); }
.lever h3 { margin: 1rem 0 0.5rem; font-size: 1.4rem; line-height: 1.2; }
.lever p { font-size: 0.9375rem; line-height: 1.55; color: var(--slate); }
.sol-risks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.sol-risks li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.25rem 1.25rem 1.35rem; background: var(--chalk); border: 1px solid var(--rule); border-radius: 6px; }
.sol-risks .ico { color: var(--gold); margin-top: 0.1rem; }
.sol-risks b { display: block; font: 400 1.15rem/1.25 var(--serif); color: var(--ink); }
.sol-risks span { display: block; margin-top: 0.35rem; font-size: 0.9rem; line-height: 1.5; color: var(--slate); }
/* The open mobile menu covers the whole screen, so the page underneath never shows below it. */
@media (max-width: 900px) { .mobile.is-open { height: calc(100vh - 4.125rem); height: calc(100dvh - 4.125rem); } }
/* Headline and side text: the side text is centred on the headline itself (not the kicker) and never starts above it. */
.head { grid-template-areas: "k ." "h side"; row-gap: 0; align-items: start; }
.head > div:first-child { display: contents; }
.head > div:first-child > .k { grid-area: k; margin-bottom: 0.75rem; }
.head > div:first-child > h2 { grid-area: h; margin-top: 0; }
.head > :nth-child(2) { grid-area: side; align-self: center; }
@media (max-width: 880px) { .head { grid-template-areas: "k" "h" "side"; } .head > :nth-child(2) { margin-top: 1.5rem; } }
.sol-exsec { padding-top: clamp(3.5rem, 6vw, 5rem); padding-bottom: clamp(3.5rem, 6vw, 5rem); }
.sol-ex { margin: 0; padding: 2.25rem 2.5rem; border-left: 3px solid var(--accent); background: var(--chalk); border-radius: 0 6px 6px 0; }
.sol-ex blockquote { margin: 0.9rem 0 0; font: 400 clamp(1.25rem, 2vw, 1.6rem)/1.4 var(--serif); color: var(--ink); max-width: 52rem; }
.row-label.sol-gap { margin-top: 3.25rem; }
#deliverables .row-label { margin-bottom: 1.25rem; }
@media (max-width: 1040px) {
  .sol-how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-how li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .levers, .sol-risks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lever:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .lever:nth-child(2n) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
}
@media (max-width: 700px) {
  .sol-what-grid, .sol-how, .levers, .sol-risks { grid-template-columns: minmax(0, 1fr); }
  .lever:nth-child(2n) { padding-left: 0; border-left: 0; }
  .sol-ex { padding: 1.6rem 1.4rem; }
}
/* Homepage hero: the three things Snowstone does, as a scannable row. */
.cv-points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; font-size: 1.08rem; line-height: 1.4; color: rgba(255, 255, 255, 0.84); }
.cv-points li { display: flex; align-items: center; gap: 0.6rem; }
.cv-points li::before { content: ""; flex: none; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: currentColor; opacity: 0.55; }
@media (max-width: 700px) { .cv-points { flex-direction: column; gap: 0.5rem; } }
/* Homepage hero: the three points as bright square bullets. */
.cv-points-lit { color: #fff; }
.cv-points-lit li::before { border-radius: 0; width: 0.5rem; height: 0.5rem; opacity: 1; }
/* Who we serve: a slightly wider text column keeps the three-sentence intro on three lines. */
@media (min-width: 881px) { #who-we-serve .head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
/* Homepage: explainer mini player beside the Company-wide analysis band. */
.band-video .shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.band-mini { border-radius: 12px; overflow: hidden; background: #0D0C0F; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); }
.band-mini video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 880px) { .band-video .shell { grid-template-columns: minmax(0, 1fr); } }
/* Homepage figures: "Agents working in parallel." stays on one line. */
.figs .strip dl > div:nth-child(3) dd { white-space: nowrap; }
@media (max-width: 600px) { .figs .strip dl > div:nth-child(3) dd { font-size: min(0.75rem, 2.9vw); } }
/* Closing band: the button sits in the centre of the open space to the right of the headline. */
@media (min-width: 881px) {
  .band-close .shell { align-items: center; }
  .band-close .cv-actions { flex: 1 1 auto; justify-content: center; padding-right: 10vw; }
}
/* Homepage hero: the subtitle runs on one line where there is room. */
.cv-home .cv-sub { max-width: none; }
/* Header logo: the wordmark stays exactly where it was; the split S, a quarter taller than the wordmark's S, is lowered onto its baseline. */
.brand { gap: 0.36em; }
.brand img { height: 0.92em; width: auto; }
.nav .brand img, footer .brand img { transform: translateY(-0.1052em); }
/* "What Snowstone has found": a narrower photo, a comfortable line length, and more air around each finding. */
@media (min-width: 881px) {
  .split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .split-body { padding-left: clamp(2.5rem, 6vw, 6.5rem); }
  .split-body > * { max-width: 37rem; }
}
.split .kinds { margin-top: clamp(2.25rem, 3.5vw, 3rem); }
.split .kinds > div { padding: 1.875rem 0 2rem; }
.split .kinds .ex { margin-top: 0.625rem; line-height: 1.5; }
.split .kinds .ex span { margin-bottom: 0.5rem; }
.split .kinds-foot { margin-top: 2rem; }
/* "A review team works through questions one after another. Snowstone works through all of them at once.":
   each sentence starts on its own line, at a size suited to a two-sentence statement. */
.band-statement h2 { max-width: 25ch; font-size: clamp(2.45rem, 3.85vw, 3.5rem); line-height: 1.1; }
.band-statement h2 .band-a { display: block; }
.band-statement h2 .band-b { display: block; }
.band-statement p { margin-top: 2rem; max-width: 37rem; font-size: 1.2rem; }
/* Header wordmark: the split S stands in for the first letter, at the height of the wordmark's S and on its baseline. */
.brand.brand-s { gap: 0.045em; }
.brand.brand-s img { height: 0.765em; }
.nav .brand.brand-s img, footer .brand.brand-s img { transform: translateY(-0.0277em); }
/* The ship band is a little taller than the screen, so the photo fills the whole screen once while scrolling. */
.band.band-statement { min-height: 105vh; min-height: 105svh; display: flex; flex-direction: column; justify-content: center; }