/* Salera — 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 Salera 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 Salera" 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; }
}