/* -----------------------------------------------------------------------
   Fonts, self-hosted. No request to Google, no extra DNS lookup or TLS
   handshake before text can paint, and nothing leaks to a third party.

   Both are variable fonts, so each family is one file covering every
   weight we use. Latin subset only. These URLs resolve against this
   stylesheet, so the same path works for pages at any depth.

   Refresh with: node scripts/fonts.js
   ----------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(assets/fonts/archivo-variable.woff2) format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-variable.woff2) format("woff2");
}

/* =================================================================
   Provect — design system
   Palette: void / porcelain with a single claret accent.
   Type:    Archivo (UI + display), JetBrains Mono (labels + data).
   ================================================================= */

:root {
  /* surfaces */
  --porcelain: #f4f5f7;
  --mist: #e2e5ea;
  --card: #fbfcfd;
  --sunken: #e8ebef;
  --void: #0a0d1a;
  --void-soft: #10142330;
  --ink-deep: #05070f;

  /* ink */
  --steel: #5f6675;
  --steel-soft: #868d9b;

  /* accent */
  --claret: #8c2f39;
  --claret-deep: #71242d;
  --claret-light: #c9707a;
  --claret-glow: rgba(140, 47, 57, .14);
  --error: #b3251c;
  --success: #1f6b4b;

  /* lines */
  --border: #d7dbe2;
  --border-strong: #c3c9d3;
  --line-light: rgba(226, 229, 234, .16);
  --line-light-strong: rgba(226, 229, 234, .3);

  /* geometry + motion */
  --shell: min(1180px, calc(100% - 48px));
  --radius: 3px;
  --radius-lg: 6px;
  --header-h: 80px;
  /* Vertical rhythm. Every section reads from these, so the whole page can be
     loosened or tightened here rather than component by component. */
  --section-y: clamp(60px, 6.6vw, 92px);
  --section-y-tight: clamp(44px, 4.6vw, 62px);
  --head-gap: 36px;
  interpolate-size: allow-keywords;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --shadow-sm: 0 1px 2px rgba(10, 13, 26, .05);
  --shadow-md: 0 12px 32px -12px rgba(10, 13, 26, .16), 0 2px 6px rgba(10, 13, 26, .05);
  --shadow-lg: 0 32px 64px -28px rgba(10, 13, 26, .32);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--porcelain);
  color: var(--void);
  font-family: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }
img { height: auto; }
::selection { background: var(--claret); color: #fff; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--claret);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--void :focus-visible, .hero :focus-visible, .page-hero :focus-visible,
.site-header :focus-visible, .site-footer :focus-visible, .proof-quote :focus-visible,
.insights-header :focus-visible, .cta-band :focus-visible { outline-color: var(--claret-light); }

.shell { width: var(--shell); margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--claret); color: #fff; font-weight: 600; border-radius: var(--radius); transition: top .2s var(--ease); }
.skip-link:focus { top: 16px; }

/* ------------------------------------------------------------- header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(10, 13, 26, .92);
  border-bottom: 1px solid transparent;
  transition: transform .35s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(10, 13, 26, .72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
}
.site-header.is-scrolled { background: rgba(8, 11, 22, .9); border-bottom-color: var(--line-light); box-shadow: 0 12px 40px -24px rgba(0, 0, 0, .8); }
.site-header.is-hidden { transform: translateY(-100%); }

main { padding-top: 0; }
/* Every page opens with a full-bleed section that runs behind the fixed
   header, so each one carries the header offset in its own padding. */
.nav-shell { display: flex; min-height: var(--header-h); align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; width: 176px; padding: 8px 0; transition: opacity .2s var(--ease); }
.brand:hover { opacity: .75; }
.brand img { width: 100%; height: auto; display: block; }

.primary-nav { display: flex; align-items: center; gap: 26px; color: var(--mist); font-size: 14px; font-weight: 500; }
.primary-nav > a:not(.nav-cta) { position: relative; padding: 8px 0; white-space: nowrap; color: rgba(226, 229, 234, .82); transition: color .2s var(--ease); }
.primary-nav > a:not(.nav-cta):hover { color: #fff; }
.primary-nav > a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: 2px; width: 0; height: 1px; background: var(--claret-light); transition: width .3s var(--ease); }
.primary-nav > a:not(.nav-cta):hover::after, .primary-nav > a:not(.nav-cta):focus-visible::after { width: 100%; }
.primary-nav > a[aria-current="page"] { color: #fff; }
.primary-nav > a[aria-current="page"]::after { width: 100%; background: var(--claret); }

.read-progress { position: absolute; inset: auto 0 -1px; height: 2px; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--claret), var(--claret-light)); transition: width .1s linear; }

.menu-toggle { display: none; place-content: center; justify-items: center; gap: 7px; width: 44px; height: 44px; padding: 0; margin-right: -10px; }
.menu-toggle span:not(.sr-only) { display: block; width: 24px; height: 1.5px; background: var(--mist); border-radius: 2px; transition: transform .25s var(--ease); }

/* ---------------------------------------------------------- primitives */

.eyebrow { margin: 0 0 18px; color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.eyebrow--light { color: var(--claret-light); }
.display { max-width: 810px; margin: 0; font-size: clamp(42px, 6.4vw, 78px); font-weight: 600; letter-spacing: -.052em; line-height: 1; }
.section-heading { max-width: 700px; margin: 0; font-size: clamp(30px, 3.3vw, 46px); font-weight: 600; letter-spacing: -.042em; line-height: 1.06; }
.section-intro { max-width: 575px; margin: 20px 0 0; color: var(--steel); font-size: 17px; line-height: 1.65; }
.section--void .section-intro, .insights-header .section-intro, .cta-band .section-intro { color: rgba(226, 229, 234, .78); }

.button {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 22px;
  background: var(--claret); color: var(--porcelain);
  border: 1px solid var(--claret); border-radius: var(--radius);
  font-size: 14px; font-weight: 600; letter-spacing: .005em;
  overflow: hidden;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease-out), box-shadow .25s var(--ease);
}
.button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s var(--ease-out); }
.button:hover { background: var(--claret-deep); border-color: var(--claret-deep); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(140, 47, 57, .75); }
.button:hover::after { transform: translateX(120%); }
.button:active { transform: translateY(0); }
.button svg { position: relative; width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
.button:hover svg { transform: translateX(3px); }
.button--quiet { background: transparent; border-color: var(--line-light-strong); color: var(--mist); }
.button--quiet:hover { background: rgba(226, 229, 234, .1); border-color: var(--mist); box-shadow: none; }

.nav-cta { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 11px 16px; background: var(--claret); color: var(--porcelain); border: 1px solid var(--claret); border-radius: var(--radius); font-size: 13px; font-weight: 600; transition: background .25s var(--ease), transform .25s var(--ease-out), box-shadow .25s var(--ease); }
.nav-cta:hover { background: var(--claret-deep); transform: translateY(-1px); box-shadow: 0 10px 22px -12px rgba(140, 47, 57, .8); }

.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--claret); font-size: 14px; font-weight: 600; }
.text-link span { transition: transform .25s var(--ease-out); }
.text-link:hover { color: var(--claret-deep); }
.text-link:hover span { transform: translateX(5px); }
.eyebrow--light ~ .text-link, .section--void .text-link, .cta-band .text-link { color: var(--claret-light); }

.chip { display: inline-flex; align-items: center; padding: 4px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; letter-spacing: .07em; }

/* --------------------------------------------------------------- hero */

/* ---------------------------------------------------------------------
   Dark hero surfaces. One background treatment, applied identically to
   every dark opening section, built from three layers:
     element  — claret aurora + a vignette that softens the hand-off
     ::before — hairline grid, radially masked so it fades out
     ::after  — fine film grain, which is what stops a flat dark panel
                from looking like a plain block of colour
   --------------------------------------------------------------------- */
.hero, .page-hero, .not-found, .insights-header, .cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--porcelain);
  background-color: var(--void);
  background-image:
    linear-gradient(to bottom, rgba(5, 7, 15, 0) 55%, rgba(5, 7, 15, .55) 100%),
    radial-gradient(120% 95% at 8% -15%, rgba(140, 47, 57, .34), transparent 60%),
    radial-gradient(70% 60% at 92% 0%, rgba(201, 112, 122, .13), transparent 65%),
    radial-gradient(90% 70% at 50% 130%, rgba(140, 47, 57, .1), transparent 70%);
}

.hero::before, .page-hero::before, .not-found::before, .insights-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(226, 229, 234, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 229, 234, .055) 1px, transparent 1px);
  background-size: 86px 86px;
  mask-image: radial-gradient(85% 80% at 26% 32%, #000 8%, transparent 76%);
  -webkit-mask-image: radial-gradient(85% 80% at 26% 32%, #000 8%, transparent 76%);
}

.hero::after, .page-hero::after, .not-found::after, .insights-header::after, .cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='g'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='160'%20height='160'%20filter='url(%23g)'/%3E%3C/svg%3E");
}

.hero { min-height: min(72vh, 620px); padding: calc(var(--header-h) + clamp(48px, 5.5vw, 74px)) 0 clamp(56px, 6vw, 78px); display: flex; align-items: center; }
.hero .shell { position: relative; z-index: 1; width: var(--shell); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(36px, 5vw, 76px); align-items: center; }
.hero .display { font-size: clamp(38px, 4.9vw, 66px); }
.hero__copy { position: relative; }
.hero__copy .eyebrow { margin-bottom: 24px; }
.hero__copy .lead { max-width: 560px; margin: 28px 0 0; color: rgba(226, 229, 234, .84); font-size: clamp(17px, 1.65vw, 21px); line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; margin-top: 36px; color: var(--steel-soft); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; }
.hero-trust span { padding: 0 13px; border-right: 1px solid rgba(226, 229, 234, .22); }
.hero-trust span:first-child { padding-left: 0; }
.hero-trust span:last-child { border-right: 0; }



/* Hero visual — a worked example of an automation, not an abstract mark. */
.flow-panel {
  position: relative;
  border: 1px solid rgba(226, 229, 234, .14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .058), rgba(255, 255, 255, .018));
  box-shadow: 0 44px 90px -46px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .07);
  overflow: hidden;
  transition: transform .5s var(--ease-out);
  will-change: transform;
}
@supports (backdrop-filter: blur(1px)) { .flow-panel { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } }
.flow-panel__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 22px; border-bottom: 1px solid rgba(226, 229, 234, .1); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.flow-panel__id { display: flex; align-items: center; gap: 10px; color: var(--mist); }
.flow-panel__id i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--claret-light); }
.flow-panel__id i::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--claret-light); border-radius: 50%; opacity: 0; animation: ping 2.6s var(--ease) infinite; }
@keyframes ping { 0% { opacity: .8; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.3); } }
.flow-panel__state { color: var(--steel-soft); }

.flow-panel__steps { margin: 0; padding: 10px 0; list-style: none; }
.flow-step { position: relative; display: flex; align-items: center; gap: 15px; padding: 12px 22px; }
.flow-step::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 0; width: 1px; background: rgba(226, 229, 234, .14); }
.flow-step:first-child::before { top: 50%; }
.flow-step:last-child::before { bottom: 50%; }
.flow-step::after { content: ""; position: absolute; inset: 3px 12px; border-radius: 8px; background: linear-gradient(90deg, rgba(201, 112, 122, .16), transparent); opacity: 0; pointer-events: none; animation: rowOn 9s linear infinite; animation-delay: calc(var(--i) * .9s); }
@keyframes rowOn { 0%, 2% { opacity: 0; } 6%, 13% { opacity: 1; } 20%, 100% { opacity: 0; } }

.flow-step__marker { position: relative; z-index: 1; flex: none; width: 21px; height: 21px; border: 1px solid rgba(226, 229, 234, .3); border-radius: 50%; background: #0c1020; }
.flow-step__marker::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--claret-light); transform: scale(1); animation: markerOn 9s var(--ease) infinite; animation-delay: calc(var(--i) * .9s); }
@keyframes markerOn { 0%, 2% { transform: scale(0); } 10%, 94% { transform: scale(1); } 100% { transform: scale(0); } }

.flow-step__body { display: grid; gap: 2px; }
.flow-step__body strong { color: var(--porcelain); font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; }
.flow-step__body span { color: var(--steel-soft); font-size: 12.5px; }
.flow-step__tag { margin-left: auto; padding: 3px 9px; border: 1px solid rgba(201, 112, 122, .5); border-radius: 999px; color: var(--claret-light); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.flow-step--human .flow-step__marker { border-color: var(--claret-light); }
.flow-step--human .flow-step__marker::after { background: var(--claret); box-shadow: 0 0 12px rgba(201, 112, 122, .7); }

.flow-panel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 22px; border-top: 1px solid rgba(226, 229, 234, .1); color: var(--steel-soft); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* The panel cycles through several worked examples, so the breadth of what
   we build is visible without the page listing services. */
.flow-panel__stage { position: relative; }
.flow-panel__scene[hidden] { display: none; }
.flow-panel__scene { animation: sceneIn .5s var(--ease-out); }
@keyframes sceneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.flow-panel__dots { display: flex; justify-content: center; gap: 2px; padding: 0 22px 8px; }
/* The button is the hit target; the bar inside it is what you see. */
.flow-dot { display: grid; place-items: center; width: 44px; height: 44px; }
.flow-dot::after { content: ""; width: 28px; height: 3px; border-radius: 2px; background: rgba(226, 229, 234, .26); transition: background .3s var(--ease); }
.flow-dot:hover::after { background: rgba(226, 229, 234, .55); }
.flow-dot[aria-pressed="true"]::after { background: var(--claret-light); }

.page-hero, .not-found { padding: calc(var(--header-h) + clamp(52px, 6vw, 78px)) 0 clamp(64px, 7vw, 96px); }
.page-hero .lead, .not-found .lead { max-width: 650px; margin: 28px 0 0; color: rgba(226, 229, 234, .84); font-size: clamp(17px, 1.65vw, 21px); line-height: 1.55; }
.page-hero .hero-actions, .not-found .hero-actions { margin-top: 38px; }
.not-found { display: flex; align-items: center; min-height: min(62vh, 520px); }

/* ------------------------------------------------------------ sections */

.section { padding: var(--section-y) 0; }
/* Two light sections in a row don't need two full helpings of padding.
   Where the background colour changes, the full gap earns its place. */
.section:not(.section--void):not(.section--mist) + .section:not(.section--void):not(.section--mist) { padding-top: var(--section-y-tight); }
.section:last-child { padding-bottom: var(--section-y); }
.section--mist { background: var(--mist); }
.section--void { background: var(--void); color: var(--porcelain); }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: var(--head-gap); }
.section__head > div > .text-link { margin-top: 20px; }

.friction-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.friction-card { position: relative; min-height: 212px; padding: 28px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--card); transition: background .35s var(--ease), color .35s var(--ease); }
.friction-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--claret); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.friction-card:hover { background: var(--void); color: var(--porcelain); }
.friction-card:hover::before { transform: scaleX(1); }
.friction-card__number { display: block; color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .09em; transition: color .35s var(--ease); }
.friction-card:hover .friction-card__number { color: var(--claret-light); }
.friction-card h3 { margin: 30px 0 10px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.friction-card p { margin: 0; color: var(--steel); font-size: 14px; line-height: 1.6; transition: color .35s var(--ease); }
.friction-card:hover p { color: rgba(226, 229, 234, .78); }

/* solutions */
.solution-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.solution-card { position: relative; display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; padding: 30px; border: 1px solid var(--line-light-strong); border-radius: var(--radius); overflow: hidden; transition: border-color .3s var(--ease), transform .35s var(--ease-out), background .3s var(--ease); }
.solution-card::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 112, 122, .14), transparent 70%); transition: opacity .35s var(--ease); pointer-events: none; }
.solution-card:hover { border-color: rgba(201, 112, 122, .5); transform: translateY(-3px); }
.solution-card:hover::before { opacity: 1; }
.solution-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.solution-card h3 { max-width: 350px; margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.solution-card__glyph { flex: none; width: 42px; height: 42px; color: var(--claret-light); transition: transform .4s var(--ease-out); }
.solution-card:hover .solution-card__glyph { transform: rotate(-6deg) scale(1.06); }
.solution-card p { max-width: 460px; margin: 18px 0 0; color: rgba(226, 229, 234, .74); font-size: 15px; }
.solution-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.solution-card li { padding: 5px 9px; border: 1px solid var(--line-light-strong); border-radius: 999px; color: var(--steel-soft); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .04em; }
.solution-card--light { border-color: var(--border); background: var(--card); color: var(--void); box-shadow: var(--shadow-sm); }
.solution-card--light::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), var(--claret-glow), transparent 70%); }
.solution-card--light:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.solution-card--light p { color: var(--steel); }
.solution-card--light li { border-color: var(--border); color: var(--steel); }
.solution-card--light .solution-card__glyph { color: var(--claret); }
.service-index { color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .1em; }

/* toolstrip marquee */
.toolstrip { padding: 34px 0 40px; background: var(--void); color: var(--mist); border-top: 1px solid var(--line-light); }
.toolstrip__label { margin: 0 0 20px; color: var(--steel-soft); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.toolstrip__track { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.toolstrip__row { display: flex; width: max-content; animation: marquee 52s linear infinite; }
.toolstrip__row span { padding: 0 30px; color: rgba(226, 229, 234, .55); font-size: 17px; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; }
.toolstrip:hover .toolstrip__row { animation-play-state: paused; }
/* An off-screen marquee still drives a compositor animation on every frame.
   Nothing outside the strip depends on its position, so let the browser
   stop it whenever the strip is not being rendered. */
.toolstrip { content-visibility: auto; contain-intrinsic-size: auto 150px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 96px); align-items: center; }
.split-section__copy { max-width: 475px; align-self: end; }
.split-section__copy p { margin: 0 0 27px; color: var(--steel); font-size: 18px; line-height: 1.65; }

.method-layout { display: grid; grid-template-columns: minmax(240px, .68fr) 1.6fr; gap: clamp(40px, 6vw, 88px); }
.method-layout > div:first-child, .faq-layout > div:first-child { position: sticky; top: calc(var(--header-h) + 44px); align-self: start; }
.method-layout .section-intro { margin-bottom: 28px; }
.method-list { border-top: 1px solid var(--border); }
.method-step { position: relative; display: grid; grid-template-columns: 68px 1fr; gap: 20px; padding: 24px 0 25px; border-bottom: 1px solid var(--border); transition: padding-left .3s var(--ease); }
.method-step:hover { padding-left: 8px; }
/* The rule and its markers are positioned on the row, not on the number, so
   the hover nudge slides the text without dragging the sequence with it. */
.method-step::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 1px; background: var(--border-strong); }
.method-step:first-child::before { top: 33px; }
.method-step:last-child::before { bottom: auto; height: 33px; }
.method-step::after { content: ""; position: absolute; left: 0; top: 27px; width: 11px; height: 11px; border: 1px solid var(--claret); border-radius: 50%; background: var(--mist); transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.method-step:hover::after { background: var(--claret); box-shadow: 0 0 0 4px var(--claret-glow); }
.method-step__number { padding-left: 22px; color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .09em; }
.method-step h3 { margin: 0 0 9px; font-size: 20px; font-weight: 600; letter-spacing: -.025em; }
.method-step p { max-width: 510px; margin: 0; color: var(--steel); font-size: 15px; }

/* proof */
.proof { overflow: hidden; background: var(--card); }
.proof-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 430px; }
.proof-quote { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(40px, 6.5vw, 82px); background: var(--void); color: var(--porcelain); overflow: hidden; }
.proof-quote::before { content: "“"; position: absolute; right: 4%; top: -8%; color: rgba(201, 112, 122, .1); font-size: 300px; line-height: 1; pointer-events: none; }
.proof-quote blockquote { position: relative; max-width: 480px; margin: 44px 0; font-size: clamp(26px, 3vw, 40px); font-weight: 500; letter-spacing: -.042em; line-height: 1.12; }
.proof-quote cite { color: var(--steel-soft); font-size: 14px; font-style: normal; }
.proof-system { position: relative; display: flex; flex-direction: column; padding: clamp(40px, 6.5vw, 82px); }
.proof-system h2 { max-width: 440px; margin: 0; font-size: clamp(32px, 3.3vw, 46px); font-weight: 600; letter-spacing: -.046em; line-height: 1.06; }
.proof-system__figure { width: min(100%, 440px); margin: clamp(36px, 5vw, 56px) 0 0; }
.system-line { display: flex; align-items: center; }
.system-node { display: grid; width: 92px; aspect-ratio: 1; place-items: center; border: 1px solid var(--void); border-radius: var(--radius); background: var(--card); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; text-align: center; }
.system-node--accent { border-color: var(--claret); background: var(--claret); color: #fff; box-shadow: 0 12px 30px -14px rgba(140, 47, 57, .7); }
.system-connector { position: relative; flex: 1; height: 1px; background: var(--border-strong); overflow: hidden; }
.system-connector i { position: absolute; top: 0; left: 0; width: 26px; height: 1px; background: var(--claret); animation: travel 3.4s var(--ease) infinite; }
.system-connector:last-of-type i { animation-delay: 1.7s; }
@keyframes travel { 0% { transform: translateX(-30px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(440px); opacity: 0; } }
.system-data { display: flex; justify-content: space-between; margin-top: 13px; color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; }

/* calculator */
.calculator { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 7vw, 95px); align-items: end; }
.calc-form { padding-top: 8px; }
.field { display: block; margin: 0 0 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.field span { display: block; margin-bottom: 9px; color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.field span em { font-style: normal; opacity: .65; }
.field input:not([type="range"]), .field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--border-strong); border-radius: 0; outline: 0; background: transparent; color: var(--void); padding: 12px 0; transition: border-color .25s var(--ease); }
.field input:not([type="range"]) { font-size: 23px; font-weight: 600; letter-spacing: -.025em; }
/* The oversized numerals suit the calculator; the enquiry form wants
   ordinary text sizing so the fields do not sprawl. */
.contact-form .field input:not([type="range"]) { padding: 9px 0; font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.contact-form .field textarea { min-height: 96px; font-size: 15.5px; }
.contact-form .field span { margin-bottom: 6px; }
.field textarea { min-height: 104px; resize: vertical; font-size: 16px; line-height: 1.6; }
.field textarea::placeholder, .field input::placeholder { color: var(--steel-soft); font-size: 15px; }
.field input:focus, .field textarea:focus { border-color: var(--claret); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--error); }
.field--slider label span { display: block; }
.slider-row { display: flex; align-items: center; gap: 18px; }
.slider-row output { min-width: 58px; color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 17px; font-weight: 500; }
input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 2px; background: var(--border-strong); border-radius: 2px; outline: 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid var(--claret); border-radius: 50%; background: var(--claret); cursor: grab; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 0 0 6px var(--claret-glow); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 1px solid var(--claret); border-radius: 50%; background: var(--claret); cursor: grab; }

.calc-result { padding: clamp(28px, 3.6vw, 40px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-md); }
.calc-result__label { margin: 0; color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.calc-result__value { display: block; margin: 20px 0 4px; color: var(--claret); font-size: clamp(44px, 5vw, 64px); font-weight: 600; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; }
.calc-breakdown { display: grid; gap: 12px; margin: 20px 0; padding: 18px 0 0; border-top: 1px solid var(--border); }
.calc-breakdown div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.calc-breakdown dt { color: var(--steel); font-size: 13px; }
.calc-breakdown dd { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-result p:not(.calc-result__label) { margin: 0 0 20px; color: var(--steel); font-size: 13.5px; line-height: 1.6; }

/* cta band */
.cta-band { padding: clamp(60px, 8vw, 96px) 0; border-top: 1px solid var(--line-light); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { max-width: 620px; margin: 0; font-size: clamp(28px, 3.2vw, 42px); font-weight: 600; letter-spacing: -.042em; line-height: 1.08; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------ insights */

.insights-header { padding: calc(var(--header-h) + clamp(48px, 6vw, 74px)) 0 48px; }
.insights-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 45px; }
.filter-set { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-button { min-height: 44px; padding: 9px 16px; border: 1px solid var(--line-light-strong); border-radius: 999px; background: transparent; color: var(--mist); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.filter-button:hover { border-color: var(--claret-light); color: #fff; }
.filter-button[aria-pressed="true"] { border-color: var(--claret-light); background: var(--claret-light); color: var(--void); }
.search-wrap { position: relative; width: min(100%, 290px); }
.search-wrap input { width: 100%; padding: 11px 33px 11px 0; border: 0; border-bottom: 1px solid rgba(226, 229, 234, .35); outline: none; background: transparent; color: var(--porcelain); font-size: 14px; transition: border-color .25s var(--ease); }
.search-wrap input:focus { border-color: var(--claret-light); }
.search-wrap input::placeholder { color: var(--steel-soft); }
.search-wrap input::-webkit-search-cancel-button { filter: invert(1) opacity(.5); }
.search-wrap svg { position: absolute; right: 0; top: 11px; width: 17px; color: var(--steel-soft); pointer-events: none; }
.insight-list { padding: 60px 0 clamp(88px, 10vw, 120px); }
.insight-list__count { margin: 0 0 24px; color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.article-card {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); overflow: hidden; text-align: left;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.article-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.article-card[hidden] { display: none; }
.article-card__cover { position: relative; overflow: hidden; background: var(--void); aspect-ratio: 16 / 9; }
.article-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.article-card:hover .article-card__cover img { transform: scale(1.04); }
.article-card__body { display: flex; flex: 1; flex-direction: column; padding: 24px 24px 26px; }
.article-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.article-card__text { flex: 1; }
.article-card h3 { margin: 20px 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -.035em; line-height: 1.16; }
.article-card p { margin: 0; color: var(--steel); font-size: 14px; line-height: 1.6; }
.article-card__read { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--claret); font-size: 13px; font-weight: 600; }
.article-card__read span { transition: transform .25s var(--ease-out); }
.article-card:hover .article-card__read span { transform: translateX(5px); }

/* Insight rows — the homepage listing. A rule per row, no picture. */
.insight-strip__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.insight-strip__list a {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto 20px;
  align-items: baseline; gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left .3s var(--ease);
}
.insight-strip__list a:hover { padding-left: 8px; }
.insight-row__cat { color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; }
.insight-row__title { font-size: 19px; font-weight: 600; letter-spacing: -.028em; line-height: 1.25; }
.insight-row__read { color: var(--steel-soft); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; }
.insight-row__arrow { color: var(--claret); transition: transform .25s var(--ease-out); }
.insight-strip__list a:hover .insight-row__arrow { transform: translateX(5px); }

/* Example builds — same card chrome as an insight, different anatomy. */
.builds .article-grid { align-items: stretch; }
.build-card { cursor: default; }
.build-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--border); }
.build-card:hover .article-card__cover img { transform: none; }
.build-card .article-card__meta { margin-bottom: 18px; }
.build-card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.2; }
.build-card__problem { margin: 0 0 16px !important; color: var(--steel); font-size: 14px; font-style: italic; }
.build-card__does { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.build-card__does li { position: relative; padding-left: 22px; color: var(--void); font-size: 14px; line-height: 1.45; }
.build-card__does li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 5px; border-left: 1.5px solid var(--claret); border-bottom: 1.5px solid var(--claret); transform: rotate(-45deg); }
.build-card__stack { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); list-style: none; }
.build-card__stack li { padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; }
.builds__note { max-width: 720px; margin: 38px 0 0; color: var(--steel); font-size: 14.5px; line-height: 1.65; }
.builds__note .text-link { margin-left: 4px; font-size: 14.5px; vertical-align: baseline; }

.article-card--featured { grid-column: span 2; flex-direction: row; }
/* Filtering can leave the featured post as the only card on the row. At
   two columns wide and laid out sideways it then reads as a stray banner
   with a hole beside it, so a filtered grid demotes it to a normal card. */
.article-grid.is-filtered .article-card--featured { grid-column: auto; flex-direction: column; }
.article-grid.is-filtered .article-card--featured .article-card__cover { flex: none; aspect-ratio: 16 / 9; }
.article-grid.is-filtered .article-card--featured .article-card__cover img { object-fit: cover; }
.article-grid.is-filtered .article-card--featured .article-card__body { justify-content: flex-start; padding: 24px 24px 26px; }
.article-grid.is-filtered .article-card--featured h3 { font-size: 22px; }
.article-grid.is-filtered .article-card--featured p { font-size: 14px; }
.article-grid.is-filtered .article-card--featured .article-card__text { flex: 1; }
.article-card--featured .article-card__cover { flex: 0 0 52%; aspect-ratio: auto; }
.article-card--featured .article-card__cover img { object-fit: contain; }
.article-card--featured .article-card__body { justify-content: center; padding: clamp(28px, 3vw, 44px); }
.article-card--featured h3 { font-size: clamp(26px, 2.4vw, 32px); }
.article-card--featured p { font-size: 15px; }
.article-card--featured .article-card__text { flex: none; }
.article-card--featured .article-card__read { margin-top: 22px; }

.empty-state { margin: 0; padding: 60px 28px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--steel); text-align: center; }
.empty-state[hidden] { display: none; }

/* ------------------------------------------------------------- contact */

.page-hero--deep { padding-bottom: clamp(140px, 14.5vw, 214px); }
.contact-channels { position: relative; z-index: 2; margin-top: clamp(-132px, -9vw, -80px); padding: 0 0 clamp(60px, 6.5vw, 92px); }
.contact-channels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.channel-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease), border-color .3s var(--ease); }
.channel-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.channel-card__label { margin: 0; color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.channel-card h3 { margin: 11px 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; }
.channel-card > p { flex: 1; margin: 0; color: var(--steel); font-size: 14.5px; line-height: 1.6; }
.channel-card .button { align-self: flex-start; margin-top: 22px; min-height: 46px; }
.channel-card__links { display: grid; gap: 7px; margin-top: 20px; font-size: 15px; font-weight: 600; }
.channel-card__links a:hover { color: var(--claret); }
.channel-card__steps { margin: 18px 0 0; padding-left: 17px; color: var(--steel); font-size: 14px; }
.channel-card__steps li { margin-bottom: 6px; }
.channel-card__steps li::marker { color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }

.contact-facts { margin: 40px 0 0; border-top: 1px solid var(--border-strong); }
.contact-facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--border-strong); }
.contact-facts dt { color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.contact-facts dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; }
.contact-copy { position: sticky; top: calc(var(--header-h) + 44px); align-self: start; }

.contact { padding: clamp(64px, 7.5vw, 104px) 0; background: var(--mist); }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(50px, 12vw, 150px); }
.contact-copy .section-intro { max-width: 430px; }
.contact-meta { display: grid; gap: 20px; margin-top: 48px; }
.contact-meta div { display: grid; gap: 3px; }
.contact-meta span { color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.contact-meta a { font-weight: 600; transition: color .2s var(--ease); }
.contact-meta a:hover { color: var(--claret); }
.contact-form { max-width: 560px; }
.contact-form--card { max-width: none; padding: clamp(24px, 2.6vw, 36px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow-md); }
.contact-form__title { margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border); font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.contact-form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 4px; }
.contact-form__submit .form-note { margin: 0; }
.contact-form.is-sending .button { opacity: .65; pointer-events: none; }
.form-message { min-height: 21px; margin: 12px 0 0; color: var(--steel); font-size: 13.5px; }
.form-message.error { color: var(--error); }
.form-message a { border-bottom: 1px solid currentColor; font-weight: 600; }
.form-message a:hover { color: var(--claret); }
.form-message.success { color: var(--success); font-weight: 600; }
.form-note { margin: 14px 0 0; color: var(--steel); font-size: 12.5px; line-height: 1.6; }
.form-note--legal { margin-top: 4px; }
.form-note a { border-bottom: 1px solid var(--border-strong); }
.form-note a:hover { color: var(--claret); border-color: var(--claret); }

/* -------------------------------------------------------------- article */

.article-page { padding: calc(var(--header-h) + clamp(34px, 4vw, 52px)) 0 0; }
/* The related band is full-bleed and closes the page itself, so the article
   column carries the closing gap rather than the page. */
/* The related band below already opens with a full section's padding of its
   own, so the column only needs a step here, not a second helping. */
.article-page > .shell { padding-bottom: clamp(24px, 2.6vw, 36px); }
/* Unless nothing follows it, in which case this is what clears the footer. */
.article-page > .shell:last-child { padding-bottom: var(--section-y); }
.article-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: clamp(40px, 7vw, 76px); color: var(--claret); font-size: 14px; font-weight: 600; }
.article-back span { transition: transform .25s var(--ease-out); }
.article-back:hover span { transform: translateX(-5px); }
.article-page__header { max-width: 890px; }
.article-page__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.article-page__meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--claret); }
.article-page__header h1 { max-width: 860px; margin: 0; font-size: clamp(38px, 5.4vw, 66px); font-weight: 600; letter-spacing: -.05em; line-height: 1.02; }
.article-page__deck { max-width: 660px; margin: 26px 0 0; color: var(--steel); font-size: 20px; line-height: 1.55; }
.article-cover { margin: clamp(40px, 6vw, 64px) 0 clamp(44px, 6vw, 68px); border-radius: var(--radius-lg); overflow: hidden; background: var(--void); box-shadow: var(--shadow-lg); }
.article-cover img { display: block; width: 100%; height: clamp(200px, 34vw, 380px); object-fit: cover; }

/* Pictures placed inside an article body, as opposed to the cover above it. */
.article-figure { margin: 2.2rem 0; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: 3px; }

.article-layout { display: grid; grid-template-columns: 210px minmax(0, 700px); gap: clamp(38px, 8vw, 110px); }
.article-aside__inner { position: sticky; top: calc(var(--header-h) + 32px); }
.article-aside { color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; line-height: 1.8; text-transform: uppercase; }
.article-aside__brand { margin: 0 0 26px; }
.article-aside__brand strong { display: block; color: var(--void); font-weight: 500; }
.article-aside__brand span { display: block; }
.article-toc { margin: 0 0 26px; padding: 20px 0 0; border-top: 1px solid var(--border); }
.article-toc__label { margin: 0 0 12px; color: var(--steel); }
.article-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; margin-bottom: 9px; }
.article-toc a { display: block; color: var(--steel); text-transform: none; font-family: Archivo, sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1.45; border-left: 1px solid var(--border); padding-left: 12px; transition: color .2s var(--ease), border-color .2s var(--ease); }
.article-toc a:hover, .article-toc a.is-active { color: var(--claret); border-color: var(--claret); }

.article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 20px; border-top: 1px solid var(--border); }
.article-share__label { width: 100%; margin-bottom: 4px; color: var(--steel); }
.article-share a, .article-share__copy { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; color: var(--steel); font-family: Archivo, sans-serif; font-size: 12px; font-weight: 600; text-transform: none; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.article-share__copy { width: auto; min-height: 44px; padding: 0 18px; border-radius: 999px; letter-spacing: 0; }
.article-share a:hover, .article-share__copy:hover { border-color: var(--claret); background: var(--claret); color: #fff; }

.article-content { font-size: 18px; line-height: 1.75; }
.article-content > p:first-child { margin-top: 0; font-size: 21px; line-height: 1.6; color: #1a1f2e; }
.article-content h2 { position: relative; margin: 52px 0 16px; font-size: 30px; font-weight: 600; letter-spacing: -.04em; line-height: 1.14; scroll-margin-top: calc(var(--header-h) + 28px); }
.heading-anchor { position: absolute; left: -24px; color: var(--border-strong); opacity: 0; text-decoration: none; transition: opacity .2s var(--ease), color .2s var(--ease); }
.article-content h2:hover .heading-anchor { opacity: 1; }
.heading-anchor:hover { color: var(--claret); }
.article-content p { margin: 0 0 24px; }
.article-content ul, .article-content ol { margin: 0 0 27px; padding-left: 22px; }
.article-content li { margin-bottom: 10px; }
.article-content li::marker { color: var(--claret); }
.article-content a:not(.button):not(.text-link) { color: var(--claret); border-bottom: 1px solid var(--claret-light); }
.article-content strong { font-weight: 600; }
.article-callout { margin: 40px 0; padding: 28px 30px; border-left: 3px solid var(--claret); border-radius: 0 var(--radius) var(--radius) 0; background: var(--mist); font-size: 17px; line-height: 1.6; }
.article-callout p { margin: 0; }
.article-end { margin-top: 66px; padding-top: 30px; border-top: 1px solid var(--border); }
.article-end p { max-width: 480px; margin: 0 0 22px; color: var(--steel); font-size: 16px; }

.article-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(40px, 4.6vw, 60px); padding-top: 26px; border-top: 1px solid var(--border); }
.article-pager__link { display: block; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); transition: border-color .25s var(--ease), transform .3s var(--ease-out), box-shadow .3s var(--ease); }
.article-pager__link:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.article-pager__link span { display: block; margin-bottom: 8px; color: var(--claret); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.article-pager__link strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.article-pager__link--next { text-align: right; }

.related { padding: var(--section-y) 0; background: var(--mist); }
.related .section__head { margin-bottom: 40px; }

/* A legal notice is one column of reading. The old two-column grid left a
   210px rail empty down the whole page. */
.legal-layout { max-width: 720px; }
.legal-layout .article-content { font-size: 17px; }
.legal-layout__stamp { margin: 0 0 34px; padding-bottom: 18px; border-bottom: 1px solid var(--border); color: var(--steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }

/* --------------------------------------------------------------- faq */

.faq-layout { display: grid; grid-template-columns: minmax(250px, .72fr) 1.28fr; gap: clamp(40px, 6vw, 88px); }
.faq-layout .section-intro { margin-bottom: 24px; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { position: relative; padding: 24px 40px 24px 0; cursor: pointer; font-size: 18px; font-weight: 600; letter-spacing: -.02em; list-style: none; transition: color .2s var(--ease); }
.faq-list summary:hover { color: var(--claret); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 13px; height: 13px; margin-top: -7px; background: linear-gradient(var(--claret), var(--claret)) center/13px 1.5px no-repeat, linear-gradient(var(--claret), var(--claret)) center/1.5px 13px no-repeat; transition: transform .3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(135deg); }
.faq-list p { max-width: 620px; margin: 0; padding: 0 0 26px; color: var(--steel); font-size: 15.5px; line-height: 1.7; }
@supports selector(::details-content) {
  .faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .34s var(--ease), content-visibility .34s allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
}

/* ------------------------------------------------------------- footer */

.site-footer { background: var(--void); color: var(--mist); }
.footer-top { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 42px; padding: 72px 0 58px; }
.footer-brand img { display: block; width: min(240px, 100%); height: auto; }
.footer-brand > p { margin: 24px 0 20px; color: var(--steel-soft); font-size: 14px; line-height: 1.6; }
/* Same round icon button as .article-share, in the dark-surface colours
   .button--quiet already uses. Icon-only, so each link carries an aria-label. */
.footer-social { display: flex; gap: 12px; margin-top: 20px; }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-light-strong); border-radius: 50%; color: var(--mist); transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.footer-social svg { width: 18px; height: 18px; }
.footer-social a:hover { border-color: var(--claret); background: var(--claret); color: #fff; }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 42px; }
.footer-links a { display: block; margin: 0 0 13px; color: rgba(226, 229, 234, .82); font-size: 14px; transition: color .2s var(--ease); }
.footer-links a:last-child { margin-bottom: 0; }
.footer-links a:hover { color: var(--claret-light); }
.footer-label { display: block; margin: 0 0 16px; color: var(--steel-soft); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.footer-newsletter > p:not(.form-message) { max-width: 310px; margin: 0 0 20px; color: var(--steel-soft); font-size: 13px; }
.newsletter-row { display: flex; border-bottom: 1px solid rgba(226, 229, 234, .35); transition: border-color .25s var(--ease); }
.newsletter-row:focus-within { border-color: var(--claret-light); }
.newsletter-row input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--mist); padding: 9px 0; font-size: 14px; }
.newsletter-row input::placeholder { color: var(--steel-soft); }
.newsletter-row button { display: grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--claret-light); padding: 0 0 0 16px; font-size: 23px; line-height: 1; transition: transform .25s var(--ease-out); }
.newsletter-row button:hover { transform: translateX(4px); }
.footer-newsletter .form-message { color: var(--steel-soft); }
.footer-newsletter .form-message.success { color: var(--claret-light); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line-light); color: var(--steel-soft); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .04em; }
.footer-bottom p { margin: 0; }
.footer-bottom a:hover { color: var(--claret-light); }

/* ------------------------------------------------------------ motion */

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].revealed { opacity: 1; transform: none; }
.stagger.revealed > * { animation: rise .6s var(--ease-out) backwards; }
.stagger.revealed > *:nth-child(1) { animation-delay: .05s; }
.stagger.revealed > *:nth-child(2) { animation-delay: .13s; }
.stagger.revealed > *:nth-child(3) { animation-delay: .21s; }
.stagger.revealed > *:nth-child(4) { animation-delay: .29s; }
.stagger.revealed > *:nth-child(5) { animation-delay: .37s; }
.stagger.revealed > *:nth-child(6) { animation-delay: .45s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; padding: 12px 20px; transform: translate(-50%, 20px); background: var(--void); color: var(--porcelain); border-radius: 999px; font-size: 13.5px; box-shadow: var(--shadow-lg); opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease-out); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* -------------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 900px) {
  .primary-nav { gap: 17px; font-size: 13px; }
  .nav-cta { padding: 10px 12px; font-size: 12.5px; }
  .hero { min-height: 0; }
  .hero-layout { grid-template-columns: 1fr; gap: 44px; }
  .hero__copy .lead { max-width: 640px; }
  .hero-trust { margin-top: 40px; }
  .method-layout > div:first-child, .faq-layout > div:first-child, .contact-copy { position: static; }
  .friction-grid { grid-template-columns: repeat(2, 1fr); }
  .friction-card { min-height: 190px; }
  .proof-grid, .calculator, .contact-grid { grid-template-columns: 1fr; }
  .proof-grid { min-height: 0; }
  .proof-quote { min-height: 330px; }
  .proof-system { min-height: 0; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-channels__grid { grid-template-columns: 1fr; }
  .page-hero--deep { padding-bottom: clamp(96px, 14vw, 124px); }
  .article-card--featured { grid-column: span 2; flex-direction: column; }
  .article-card--featured .article-card__cover { flex: none; aspect-ratio: 16 / 9; }
  .split-section, .faq-layout { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-aside__inner { position: static; }
  .article-aside__brand { display: flex; gap: 10px; }
  .article-aside__brand strong { display: inline; }
  .article-toc { display: none; }
  /* Ask people to share after they have read, not before. */
  .article-layout { display: flex; flex-direction: column; }
  .article-content { order: 1; }
  .article-aside { order: 2; margin-top: 44px; }
  .article-share { border-top: 1px solid var(--border); }
  .footer-top { grid-template-columns: 1fr 1.2fr; }
  /* Full-width row, but the input still reads as a field rather than a
     rule across the page. */
  .footer-newsletter { grid-column: 1 / -1; max-width: 460px; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 700px) {
  :root {
    --shell: min(100% - 36px, 1180px); --header-h: 66px;
    --section-y: 56px; --section-y-tight: 44px; --head-gap: 30px;
  }
  .nav-shell { min-height: var(--header-h); }
  .brand { width: 150px; }
  .menu-toggle { display: grid; z-index: 3; }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(4.25px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4.25px) rotate(-45deg); }
  .primary-nav { position: fixed; inset: var(--header-h) 0 auto; display: grid; gap: 0; padding: 21px 18px 26px; transform: translateY(-112%); opacity: 0; visibility: hidden; border-bottom: 1px solid var(--line-light); background: rgba(8, 11, 22, .98); transition: transform .3s var(--ease), opacity .2s, visibility .3s; }
  .primary-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .primary-nav > a:not(.nav-cta) { padding: 15px 0; border-bottom: 1px solid rgba(226, 229, 234, .12); }
  .primary-nav .nav-cta { justify-self: start; margin-top: 19px; }
  .hero { padding-top: calc(var(--header-h) + 48px); }
  .page-hero, .not-found { padding: calc(var(--header-h) + 48px) 0 60px; }
  .page-hero--deep { padding-bottom: 96px; }
  .contact-channels { margin-top: -52px; }
  .hero::before { display: none; }
  .hero__copy { z-index: 1; }
  .hero-trust { gap: 8px; margin-top: 54px; }
  .hero-trust span { padding: 0 10px; }
  .hero-trust span:first-child { padding-left: 0; }
  .section__head { display: block; margin-bottom: var(--head-gap); }
  .section__head .text-link { margin-top: 22px; }
  /* Stacked, a card only needs to be as tall as its own text. */
  .friction-card { min-height: 0; padding: 24px 22px 26px; }
  .friction-card h3 { margin-top: 26px; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-card { min-height: 0; padding: 24px; }
  .method-layout { grid-template-columns: 1fr; gap: 37px; }
  /* Room for the marker rule as well as the numeral. */
  .method-step { grid-template-columns: 52px 1fr; gap: 12px; }
  .method-step__number { padding-left: 20px; }
  .proof-quote { min-height: 0; padding: 35px 24px; }
  .proof-quote blockquote { margin: 40px 0; }
  .proof-system { min-height: 0; padding: 35px 24px; }
  .proof-system__figure { width: 100%; }
  .system-node { width: 70px; }
  .calculator { gap: 35px; }
  .article-grid, .article-card--featured { grid-template-columns: 1fr; grid-column: auto; }
  /* Category above the title; read time stays on the title's line. */
  .insight-strip__list a { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .insight-row__cat { grid-column: 1 / -1; }
  .insight-row__arrow { display: none; }
  .article-card h3 { font-size: 21px; }
  .insights-header { padding-bottom: 37px; }
  .insights-controls { align-items: stretch; }
  .search-wrap { width: 100%; }
  .contact-grid { gap: 40px; }
  .field-row { grid-template-columns: 1fr; }
  .flow-step__tag { display: none; }
  .article-pager { grid-template-columns: 1fr; }
  .article-pager__link--next { text-align: left; }
  .footer-top { grid-template-columns: 1fr; padding: 48px 0 39px; }
  .footer-links { max-width: 420px; }
  .footer-newsletter { grid-column: auto; }
  .footer-bottom { display: grid; padding: 19px 0; }
  .article-content { font-size: 17px; }
  .article-content > p:first-child { font-size: 19px; }
  .article-content h2 { font-size: 26px; margin-top: 44px; }
  .heading-anchor { display: none; }
  .toolstrip__row span { font-size: 15px; padding: 0 20px; }
}

@media (max-width: 390px) {
  .hero-trust { display: grid; gap: 9px; }
  .hero-trust span { padding: 0; border: 0; }
  .hero-actions, .cta-band__actions { display: grid; }
  .hero-actions .button, .cta-band__actions .button { width: 100%; }
}

@media print {
  .site-header, .site-footer, .article-share, .article-toc, .article-pager, .related, .cta-band { display: none !important; }
  body { background: #fff; }
  main { padding-top: 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .toolstrip__row { animation: none; }
  .flow-step::after { opacity: 0; }
  .flow-step__marker::after { transform: scale(1); }
  .flow-panel__id i::after { display: none; }
}