@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/lato-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/lato-700-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/lato-900-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('../assets/fonts/sora-700-800-latin.woff2') format('woff2');
}

/* Torke design tokens.
   APPROVED COLOURS, and nothing else may appear anywhere on this site:
   the five brand colours, plus pure black and pure white.

     Aquamarine     #a9f0d1
     Charcoal       #595959
     Grey           #7f7f7f
     Periwinkle     #e4d9ff
     Lavender Blush #f7ebec
     Black          #000000
     White          #ffffff

   No derived accent, no tint, no translucent surface colour. Where a surface
   used to be a translucent overlay it is now the band colour with a solid
   1px Charcoal or Grey border, which is how depth is built here. The only
   permitted alpha is black in a shadow, because a shadow is shade rather than
   a colour of its own.

   Measured WCAG ratios for every pair the site actually uses:
     Black on Blush       18.05      White on Black        21.00
     Black on White       21.00      Aquamarine on Black   16.07
     Black on Aquamarine  16.07      Periwinkle on Black   15.67
     Black on Periwinkle  15.67      Grey on Black          5.24
     Charcoal on White     7.00      Charcoal on Blush      6.02
   Never used, because they fail: White or Aquamarine on any light surface,
   Grey as body text on light, Charcoal or Periwinkle on Charcoal. */

:root {
  /* ---- Palette ---- */
  --aqua:        #a9f0d1;
  --charcoal:    #595959;
  --grey:        #7f7f7f;
  --periwinkle:  #e4d9ff;
  --blush:       #f7ebec;
  --black:       #000000;
  --white:       #ffffff;

  /* ---- Semantic, light ground ---- */
  --bg:            var(--blush);
  --surface:       var(--white);
  --surface-quiet: var(--periwinkle);
  --surface-hi:    var(--aqua);
  --text:          var(--black);
  --text-2:        var(--charcoal);
  --line:          var(--grey);
  --focus:         var(--black);

  /* ---- Semantic, black ground ---- */
  --surface-dark:   var(--black);
  --text-on-dark:   var(--white);
  --text-2-on-dark: var(--grey);
  --line-on-dark:   var(--charcoal);
  --accent-on-dark: var(--aqua);
  --focus-on-dark:  var(--aqua);

  /* ---- Type ---- */
  --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'Sora', 'Lato', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* ---- Space, 8px scale ---- */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --shell: 1200px;
  --read: 720px;

  --r-card: 12px;
  --r-ctrl: 8px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(35,35,35,0.04), 0 8px 24px rgba(35,35,35,0.06);
  --shadow-lift: 0 2px 4px rgba(35,35,35,0.06), 0 16px 40px rgba(35,35,35,0.10);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================
   TORKE, landing site
   Brand system: torke-brand-1
   Rules held here: Lato body with Sora headings, no period ending a heading, no em dash,
   every text/background pair from the approved contrast list.
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- base ---------- */
body {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-synthesis: none;
}
::selection { background: var(--aqua); color: var(--black); }

a { color: var(--black); text-decoration: underline; text-decoration-color: var(--aqua); text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease); }
a:hover { text-decoration-color: var(--black); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.field-ink :focus-visible { outline-color: var(--focus-on-dark); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--black); color: var(--white); padding: var(--s2) var(--s3);
  text-decoration: none; border-radius: 0 0 var(--r-ctrl) 0;
}
.skip:focus { left: 0; }
.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; }

/* ---------- layout ---------- */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--s4); }
.section { padding: var(--s7) 0; }
.section-tight { padding: var(--s6) 0; }
.centered { text-align: center; }
.prose { max-width: var(--read); font-size: 18px; }
.centered .prose, .prose-center { margin-left: auto; margin-right: auto; }
.prose-wide { max-width: 860px; }
.prose + .prose { margin-top: var(--s3); }
.mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }

/* ---------- fields (section colour bands) ---------- */
.field-blush { background: var(--blush); color: var(--text); }
.field-white { background: var(--white); color: var(--text); }
.field-peri  { background: var(--periwinkle); color: var(--text); }
.field-aqua  { background: var(--aqua); color: var(--text); }
.field-ink   { background: var(--black); color: var(--text-on-dark); }

/* two pastel bands never touch without a rule between them */
.field-blush + .field-peri, .field-peri + .field-blush,
.field-blush + .field-aqua, .field-aqua + .field-blush,
.field-white + .field-blush, .field-blush + .field-white,
.field-peri + .field-aqua,  .field-aqua + .field-peri,
.field-white + .field-peri, .field-peri + .field-white,
.field-white + .field-aqua, .field-aqua + .field-white { border-top: 1px solid var(--line); }

.field-ink .prose, .field-ink p { color: var(--text-on-dark); }
.field-ink .text-2, .field-ink .muted { color: var(--text-2-on-dark); }
.field-ink a:not(.btn) { color: var(--aqua); text-decoration-color: var(--aqua); }
.field-ink a:not(.btn):hover { text-decoration-color: var(--aqua); }

/* A light card inside a dark band keeps the light-surface colours. Without this
   the band rules above win on specificity and paint white text on white. */
.field-ink .on-light,
.field-ink .on-light p,
.field-ink .on-light .prose,
.field-ink .on-light label,
.field-ink .on-light h3 { color: var(--black); }
.field-ink .on-light .caption,
.field-ink .on-light .form-note,
.field-ink .on-light .text-2 { color: var(--charcoal); }
.field-ink .on-light a:not(.btn) { color: var(--black); text-decoration-color: var(--aqua); }
.field-ink h1, .field-ink h2, .field-ink h3, .field-ink h4 { color: var(--text-on-dark); }

/* ---------- type ---------- */
h1, h2, h3, h4,
.sum-big,
.ps-path strong,
.faq summary,
.tab-name,
.ws-h,
.pull-def dt,
.model thead th,
.footer-h {
  font-family: var(--font-heading);
}
h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.14; letter-spacing: -0.015em;
  text-wrap: balance;
}
.sum-big, .faq summary, .tab-name { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
/* the headline breaks after "pull" on wide screens only, where the column can
   hold "behind intelligent" on one line. Below that it wraps on its own. */
.br-wide { display: none; }
@media (min-width: 901px) { .br-wide { display: inline; } }
.display { font-weight: 800; font-size: clamp(36.8px, 5.704vw, 62.56px); line-height: 1.04; letter-spacing: -0.025em; }
.h-lg { font-size: clamp(28.52px, 3.68vw, 40.48px); line-height: 1.1; letter-spacing: -0.02em; }
.h-mid { font-size: clamp(24.84px, 2.76vw, 31.28px); line-height: 1.18; letter-spacing: -0.014em; }
.h-sm { font-size: 22px; line-height: 1.24; letter-spacing: -0.015em; }
.lead { font-size: clamp(19px, 2vw, 22px); line-height: 1.52; font-weight: 400; }
.small { font-size: 15px; line-height: 1.55; }
.caption { font-size: 13px; line-height: 1.45; letter-spacing: 0.01em; color: var(--text-2); }
.field-ink .caption { color: var(--text-2-on-dark); }
.label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2);
}
.field-ink .label { color: var(--aqua); }
.text-2 { color: var(--text-2); }
.section-title { margin-bottom: var(--s3); }
.section-intro { margin-bottom: var(--s6); }
strong, b { font-weight: 700; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  padding: 15px 28px; border-radius: var(--r-ctrl); border: 1.5px solid transparent;
  min-height: 44px;
  font-weight: 700; font-size: 16px; letter-spacing: 0.025em; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-start { font-weight: 800; letter-spacing: 0.025em; }
.cta-link { font-weight: 700; letter-spacing: 0.015em; }
.btn-primary { background: var(--aqua); color: var(--black); }          /* 12.03:1 */
.btn-primary:hover { background: var(--black); color: var(--aqua); } /* 6.80:1 */
.btn-ghost { background: transparent; color: var(--black); border-color: var(--black); }
.btn-ghost:hover { background: var(--black); color: var(--white); }
.field-ink .btn-ghost { color: var(--white); border-color: var(--white); }
.field-ink .btn-ghost:hover { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-sm { padding: 11px 20px; font-size: 15px; }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--blush);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.site-header.stuck { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(0,0,0,0.06); }
.header-inner { display: flex; align-items: center; gap: var(--s4); min-height: 76px; }
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; flex: 0 0 auto;
}
.brand-mark {
  display: block; width: 50px; height: 50px;
  overflow: hidden; flex: 0 0 50px;
}
.brand-mark img {
  display: block; width: 50px; max-width: 100%; height: 50px; object-fit: contain;
}
.brand-mark picture, .footer-logo-mark picture { display: block; }
.logo-wordmark {
  font-family: var(--font-heading); font-weight: 800; line-height: 1;
  letter-spacing: -0.035em;
}
.brand .logo-wordmark { color: var(--black); font-size: 30px; }
.site-nav { display: flex; gap: clamp(16px, 2vw, 32px); margin-left: auto; }
.site-nav a {
  color: var(--text); text-decoration: none; font-size: 15.5px; font-weight: 700;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--black); }
.header-actions { display: flex; align-items: center; gap: var(--s2); }
.nav-toggle {
  display: none; width: 44px; height: 44px; background: transparent; border: 1.5px solid var(--line);
  border-radius: var(--r-ctrl); cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--black); transition: transform .2s var(--ease), opacity .2s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; flex-direction: column; padding: var(--s2) var(--s4) var(--s4); border-top: 1px solid var(--line); background: var(--blush); }
.mobile-nav a { padding: 14px 0; color: var(--text); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--line); }
.mobile-nav.open { display: flex; }

/* ---------- hero ---------- */
.hero { padding: var(--s5) 0 var(--s7); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: var(--s7); align-items: center; }
.hero-eyebrow { margin-bottom: var(--s3); }
.hero h1 { margin-bottom: var(--s3); }
.hero .lead { color: var(--text-on-dark); max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

@media (min-width: 901px) {
  .hero {
    min-height: calc(100svh - 76px - 88px);
    display: grid;
    align-items: center;
    padding: clamp(72px, 8vh, 104px) 0 clamp(96px, 10vh, 128px);
  }
  .hero-main { transform: translateY(46px); }
}

/* hero visual: the load, and the force that moves it */
.hero-viz {
  border: 1px solid var(--line-on-dark); border-radius: var(--r-card);
  padding: var(--s3) var(--s4); background: transparent;
}

/* hero visual: four graphics with one word each. It exists to hold the eye and
   pull it down the page, so it carries almost no copy. Every element is a real
   thing Torke runs rather than decoration, and each graphic animates in once. */
.ws { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ws-card {
  background: transparent; border: 1px solid var(--line-on-dark);
  border-radius: var(--r-card); padding: var(--s3) 18px 16px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3);
  min-height: 132px;
  transition: border-color .2s var(--ease);
}
.ws-card:hover { border-color: var(--aqua); }
.ws-card:nth-child(1) { --d: 0ms; }
.ws-card:nth-child(2) { --d: 90ms; }
.ws-card:nth-child(3) { --d: 180ms; }
.ws-card:nth-child(4) { --d: 270ms; }
.ws-h { font-size: 13.5px; font-weight: 800; line-height: 1.25; color: var(--white); letter-spacing: -0.005em; }
.ws-g { display: block; }
.js .ws-g > * { opacity: 0; animation: ws-in .5s var(--ease) forwards; animation-delay: var(--d, 0ms); }

/* an answer engine result, with one row that is you */
.ws-answer { display: flex; flex-direction: column; gap: 7px; }
.ws-q { display: block; height: 5px; width: 72%; border-radius: 3px; background: var(--charcoal); margin-bottom: 2px; }
.ws-row { display: flex; align-items: center; gap: 7px; }
.ws-row i { width: 6px; height: 6px; border-radius: 50%; background: var(--charcoal); flex: 0 0 auto; }
.ws-row em { display: block; height: 6px; width: 62%; border-radius: 3px; background: var(--charcoal); }
.ws-row-short em { width: 44%; }
.ws-row-you i { background: var(--aqua); }
.ws-row-you b { font-size: 11.5px; font-weight: 900; color: var(--aqua); letter-spacing: 0.05em; }

/* buying signals over time, with the week that matters lit */
.ws-spark { display: flex; align-items: flex-end; gap: 5px; height: 42px; }
.ws-spark i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: var(--charcoal); }
.ws-spark i:nth-child(1) { --h: 36%; }
.ws-spark i:nth-child(2) { --h: 52%; }
.ws-spark i:nth-child(3) { --h: 30%; }
.ws-spark i:nth-child(4) { --h: 88%; }
.ws-spark i:nth-child(5) { --h: 44%; }
.ws-spark i.hot { background: var(--aqua); }
.ws-chips { display: flex; gap: 5px; margin-top: 10px; }
.ws-chips b {
  font-size: 9.5px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--black); background: var(--aqua); padding: 3px 7px; border-radius: var(--r-pill);
}

/* a lifecycle both teams read the same way */
.ws-steps { display: flex; align-items: center; gap: 6px; }
.ws-steps i { height: 9px; flex: 1; border-radius: 3px; background: var(--charcoal); }
.ws-steps i.on { background: var(--aqua); }

/* the eight stages, and the two that stay yours */
.ws-line { display: flex; gap: 4px; }
.ws-line i { height: 12px; flex: 1; border-radius: 2px; }
.ws-line i.us { background: var(--aqua); }
.ws-line i.you { background: var(--periwinkle); }

@keyframes ws-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .ws-g > * { opacity: 1; animation: none; } }

@keyframes cue {
  0%, 100% { transform: rotate(45deg) translate(-2px, -2px); opacity: .55; }
  50%      { transform: rotate(45deg) translate(2px, 2px);   opacity: 1; }
}

/* ---------- generic cards & grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }

.card {
  background: var(--surface); border: 0; border-radius: var(--r-card);
  padding: var(--s4); box-shadow: var(--shadow);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.field-ink .card { background: transparent; border: 1px solid var(--line-on-dark); box-shadow: none; }
.field-ink .card:hover { border-color: var(--aqua); box-shadow: none; }
.card h3 { margin-bottom: var(--s2); }
.card p + p { margin-top: var(--s2); }

/* ---------- illustrated card language ---------- */
.icon-heading { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.icon-heading > div { min-width: 0; }
.icon-heading h3, .sum-card .icon-heading h3, .card .icon-heading h3, .engine-card .icon-heading h3 { margin-bottom: 0; }
.story-icon {
  width: 58px; height: 58px; flex: 0 0 58px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-card);
  color: var(--black);
  transition: transform 180ms var(--ease);
}
.story-icon-aqua { background: var(--aqua); }
.story-icon-peri { background: var(--periwinkle); }
.story-icon-ink { background: var(--black); color: var(--white); }
.story-icon svg { width: 38px; height: 38px; }
.story-icon circle,
.story-icon path,
.story-icon rect {
  fill: none; stroke: currentColor; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
}
.story-icon .icon-fill { fill: currentColor; stroke: none; }
.sum-card:hover .story-icon,
.card:hover .story-icon,
.engine-card:hover .story-icon { transform: translateY(-3px) rotate(-2deg); }
.round-list li {
  position: relative; padding-left: 24px; margin-bottom: 11px; font-size: 16.5px;
}
.round-list li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--black);
}

/* ---------- the pull line (torque story) ---------- */
.pull-quote {
  font-size: clamp(29px, 3.6vw, 42px); font-weight: 800; line-height: 1.14;
  letter-spacing: -0.022em; max-width: 18ch;
}
.pull-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: var(--s7); align-items: start; }
.pull-copy { padding-top: var(--s5); }
.pull-defs { display: grid; gap: var(--s3); margin-top: var(--s4); }
.pull-def { padding: var(--s3); border-radius: var(--r-card); background: var(--white); border: 0; box-shadow: var(--shadow); }
.pull-def dt { font-weight: 800; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); margin-bottom: 6px; }
.pull-def dd { font-size: 17px; }
.pull-outcome { background: var(--aqua); box-shadow: var(--shadow); }
.pull-outcome dd { font-weight: 700; }

/* ---------- ownership handoff ---------- */
.ownership-layout {
  display: grid; grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.72fr);
  gap: var(--s3); align-items: stretch;
}
.ownership-client,
.ownership-torke { border: 0; border-radius: var(--r-card); padding: var(--s5); box-shadow: var(--shadow); }
.ownership-client { background: var(--periwinkle); }
.ownership-client h3,
.ownership-torke h3 { margin: var(--s1) 0 var(--s2); }
.ownership-client-title {
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 700;
  line-height: 1.2;
}
.ownership-client .prose { color: var(--charcoal); }
.ownership-list { margin-top: var(--s4); }
.ownership-list li {
  position: relative; padding-left: 22px; margin-bottom: 13px;
  color: var(--black); font-size: 16.5px; line-height: 1.45;
}
.ownership-list li::before {
  content: ""; position: absolute; left: 1px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--black);
}
.ownership-torke {
  background: var(--black); color: var(--white);
  display: grid; gap: var(--s5);
}
.ownership-torke .label { color: var(--aqua); }
.ownership-torke .prose { color: var(--grey); }
.ownership-intro { max-width: 690px; }
.ownership-work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.ownership-step {
  display: block; margin-bottom: var(--s2); color: var(--aqua);
  font-size: 13px; font-weight: 900; letter-spacing: 0.1em;
}
.ownership-group h4 { margin-bottom: var(--s1); color: var(--white); font-size: 18px; line-height: 1.3; }
.ownership-group p { color: var(--grey); font-size: 15.5px; line-height: 1.55; }
.scope-note { margin-top: var(--s3); }

/* ---------- practices ---------- */
.practice { display: grid; grid-template-columns: 84px 1fr; gap: var(--s4); align-items: start; }
.practice + .practice { margin-top: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--line); }
.practice-n {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--aqua); color: var(--black);
  font-weight: 900; font-size: 30px; letter-spacing: -0.02em;
}
.practice-2 .practice-n { background: var(--periwinkle); }
.practice-3 .practice-n { background: var(--black); color: var(--white); }
.practice-kicker { margin-bottom: var(--s1); }
.practice h3 { margin-bottom: var(--s2); }
.tag-row { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s3); }
.tag {
  font-size: 13.5px; font-weight: 700; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--line); color: var(--text);
}

/* ---------- lists ---------- */
.dashed li { position: relative; padding-left: var(--s3); margin-bottom: 11px; font-size: 16.5px; }
.dashed li::before { content: ""; position: absolute; left: 0; top: 12px; width: 11px; height: 2px; background: var(--black); }
.field-ink .dashed li::before { background: var(--aqua); }
.field-aqua .dashed li::before, .field-peri .dashed li::before { background: var(--black); }

/* ---------- engagement / model table ---------- */
.model { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.model th, .model td { text-align: left; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: top; font-size: 16.5px; }
.model thead th { background: var(--black); color: var(--white); font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; }
.model tbody tr:last-child td { border-bottom: 0; }
.model td:first-child { font-weight: 700; width: 22%; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .model { min-width: 620px; }

/* ---------- content engine ---------- */
.engine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.engine-card {
  padding: var(--s4); border-radius: var(--r-card); background: var(--white); border: 0; box-shadow: var(--shadow);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
.engine-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.engine-card.lead-card { background: var(--white); }
.engine-card h3 { margin-bottom: var(--s2); }

/* ---------- contact ---------- */
.brief-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
.brief-points { margin-top: var(--s4); }
.brief-points li { padding-left: var(--s3); position: relative; margin-bottom: 10px; font-size: 16.5px; }
.brief-points li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }
.brief-form {
  background: var(--white); border-radius: var(--r-card); padding: var(--s4); box-shadow: var(--shadow);
  scroll-margin-top: 92px;
}
.brief-form-head { margin-bottom: var(--s2); }
.brief-form-title {
  font-size: clamp(22px, 2vw, 26px); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.012em;
}
.form-intro { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--charcoal); }
.brief-form .field { margin-bottom: var(--s2); }
.field { margin-bottom: var(--s3); }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 7px; color: var(--black); }
.optional { color: var(--charcoal); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px var(--s2); border: 1px solid var(--grey); border-radius: var(--r-ctrl);
  background: var(--white); color: var(--black); font-size: 16px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--black); border-width: 2px; outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--charcoal); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--black); border-width: 2px; }
.field-err { display: none; font-size: 13.5px; color: var(--black); margin-top: 6px; font-weight: 900; }
.field.invalid .field-err { display: block; }
.form-note { margin-top: var(--s2); font-size: 13.5px; color: var(--charcoal); }
.form-done { display: none; padding: var(--s3); border-radius: var(--r-ctrl); background: var(--aqua); color: var(--black); font-weight: 700; margin-bottom: var(--s3); }
.form-done.show { display: block; }

/* ---------- faq ---------- */
.faq { max-width: 860px; display: grid; gap: 12px; }
.faq details { border: 0; border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--s3) 52px var(--s3) var(--s3);
  font-weight: 800; font-size: 19px; letter-spacing: -0.008em; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: var(--s3); top: 50%; width: 13px; height: 13px;
  border-right: 2.5px solid var(--black); border-bottom: 2.5px solid var(--black);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { padding: 0 var(--s3) var(--s3); max-width: var(--read); color: var(--text-2); }

/* ---------- footer ---------- */
.site-footer { background: var(--black); color: var(--text-on-dark); padding: var(--s7) 0 var(--s4); }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s5); }
.footer-logo { display: flex; align-items: center; gap: 14px; }
.footer-logo-mark {
  display: block; width: 56px; height: 56px;
  overflow: hidden; flex: 0 0 56px;
}
.footer-logo-mark img {
  display: block; width: 56px; max-width: 100%; height: 56px; object-fit: contain;
}
.footer-logo .logo-wordmark { color: var(--white); font-size: 34px; }
.footer-slogan { margin-top: var(--s3); color: var(--aqua); font-weight: 700; font-size: 17px; }
.footer-line { margin-top: var(--s2); color: var(--text-2-on-dark); font-size: 15px; max-width: 34ch; }
.footer-h { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aqua); margin-bottom: var(--s2); }
.footer-col a { display: block; padding: 6px 0; color: var(--text-2-on-dark); text-decoration: none; font-size: 15.5px; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line-on-dark);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); justify-content: space-between;
  font-size: 13.5px; color: var(--text-2-on-dark);
}

/* ---------- reveal, safe without JS ---------- */
.reveal,
.js .reveal,
.js .reveal.in { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1 !important; transform: none !important; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  /* the funnel needs real width, so the hero stacks here rather than at 900 */
  .hero-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .hero-viz { max-width: 620px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .engine-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-actions { margin-left: auto; }
  /* The call to action stays in the header while the logo and gaps contract. */
  .header-inner { min-height: 68px; gap: var(--s2); }
  .brand { gap: 10px; }
  .brand-mark { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-mark img { width: 40px; height: 40px; }
  .brand .logo-wordmark { font-size: 26px; }
  .header-actions .btn-sm { padding: 10px 15px; font-size: 14.5px; }
  .hero { padding: var(--s6) 0 var(--s7); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .pull-grid, .brief-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .pull-copy { padding-top: 0; }
  .ownership-layout { grid-template-columns: 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: var(--s4); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .pull-quote { max-width: none; }
}
@media (max-width: 640px) {
  /* Mobile line-height values are exactly 10% above their desktop source values. */
  body { font-size: 17px; line-height: 1.782; }
  h1, h2, h3, h4 { line-height: 1.254; }
  .display { line-height: 1.144; }
  .h-lg { line-height: 1.21; }
  .h-mid { line-height: 1.298; }
  .h-sm { line-height: 1.364; }
  .lead { line-height: 1.672; }
  .small { line-height: 1.705; }
  .caption { line-height: 1.595; }
  .brief-form-title { line-height: 1.32; }
  .form-intro { line-height: 1.595; }
  .shell { padding: 0 var(--s3); }
  .section { padding: var(--s6) 0; }
  .hero { padding: var(--s5) 0 var(--s6); }
  .card, .sum-card, .brief-form, .hero-viz, .pull-def, .engine-card, .ownership-client, .ownership-torke { padding: var(--s3); }
  .story-icon { width: 48px; height: 48px; flex-basis: 48px; }
  .story-icon svg { width: 31px; height: 31px; }
  .icon-heading { gap: var(--s2); }
  .practice { grid-template-columns: 1fr; gap: var(--s3); }
  .practice-n { width: 64px; height: 64px; font-size: 24px; }
  .practice + .practice { margin-top: var(--s5); padding-top: var(--s5); }
  .ownership-work { grid-template-columns: 1fr; gap: var(--s3); }
  .field-row { grid-template-columns: 1fr; }
  .brief-form .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .footer-inner { grid-template-columns: 1fr; }
  .hero-actions .btn, .brief-form .btn { width: 100%; }
  .model th, .model td { padding: var(--s2) var(--s3); font-size: 15.5px; }
  .model td:first-child { width: auto; }
}

/* the work surface goes to one column only when two would squeeze the labels */
@media (max-width: 420px) {
  .ws { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ws-card { padding: 16px 13px 13px; min-height: 112px; gap: var(--s2); }
  .ws-h { font-size: 12px; }
  .brief-form .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* below 352px the logo, the button and the burger genuinely cannot coexist */
@media (max-width: 352px) {
  .header-actions .btn { display: none; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .nav-toggle, .mobile-nav, .hero-viz, .brief-form, .skip { display: none; }
  .field-ink, .field-aqua, .field-peri { background: #fff !important; color: #000 !important; }
  .field-ink *, .field-ink h1, .field-ink h2, .field-ink h3, .field-ink p { color: #000 !important; }
  .section { padding: 8mm 0; }
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
  h1 + p, h2 + p, h3 + p, h4 + p,
  h1 + ul, h2 + ul, h3 + ul, h4 + ul,
  h2 + .card, h3 + .card, h2 + .ownership-layout, h2 + .table-wrap { break-after: avoid; page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }
  .card, .practice, .engine-card, .pull-def, .ownership-client, .ownership-torke, tr, figure, blockquote { break-inside: avoid; page-break-inside: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Composition layer
   A scroll rule, a tabbed practice switcher, an active nav state,
   counters and card affordance. Every one of these is behaviour a
   reader can use, not decoration: the rule says how far through
   they are, the tabs let them read one practice instead of three,
   the nav says where they are, and the counters draw the eye to
   the two numbers the argument rests on.
   ============================================================ */

/* ---------- scroll progress ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.progress-bar {
  display: block; height: 100%; width: 0%;
  background: var(--aqua);
  transition: width 90ms linear;
}

/* ---------- active nav state ---------- */
.site-nav a { position: relative; }
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--black); transform: scaleX(0); transform-origin: left center;
  transition: transform 180ms cubic-bezier(.2,0,0,1);
}
.site-nav a:hover::after,
.site-nav a.current::after { transform: scaleX(1); }

/* ---------- tabbed practice switcher ---------- */
.tablist {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  border-bottom: 0; padding-bottom: 0;
}
.tab {
  display: flex; gap: 16px; align-items: center;
  padding: 18px 20px; background: transparent; border: 0;
  border-radius: var(--r-card); margin-bottom: 0;
  min-height: 128px;
  font: inherit; color: var(--text-2); text-align: left; cursor: pointer;
  transition: background-color 160ms cubic-bezier(.2,0,0,1),
              color 160ms cubic-bezier(.2,0,0,1),
              box-shadow 160ms cubic-bezier(.2,0,0,1);
}
.tab:hover { background: var(--white); color: var(--text); box-shadow: var(--shadow); }
.tab[aria-selected="true"] {
  background: var(--white); color: var(--text);
  box-shadow: var(--shadow);
}
.tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tab-icon {
  width: 58px; height: 58px; flex: 0 0 58px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-card);
  color: var(--black);
  transition: transform 180ms cubic-bezier(.2,0,0,1);
}
.tab-icon-vis { background: var(--aqua); }
.tab-icon-dem { background: var(--periwinkle); }
.tab-icon-rev { background: var(--black); color: var(--white); }
.tab-icon svg { width: 38px; height: 38px; }
.tab-icon circle,
.tab-icon path,
.tab-icon rect {
  fill: none; stroke: currentColor; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab-icon .tab-icon-dot { fill: currentColor; stroke: none; }
.tab-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tab:hover .tab-icon,
.tab[aria-selected="true"] .tab-icon { transform: translateY(-3px) rotate(-2deg); }
.tab-n {
  font-size: 12px; letter-spacing: .12em; font-weight: 700;
  color: var(--black);
}
.tab-name { font-size: 20px; font-weight: 800; line-height: 1.25; }
.tab-sub { font-size: 13px; color: var(--text-2); }

.tabpanel { background: var(--white); padding: 40px; margin-top: var(--s3); border-radius: var(--r-card); box-shadow: var(--shadow); }
.tabpanel[hidden] { display: none; }
.tabpanel-body > .h-mid { margin-top: 0; }
.js .tabpanel-body { animation: tab-in 260ms cubic-bezier(0,0,.2,1) both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .tablist { grid-template-columns: 1fr; gap: 8px; border-bottom: 0; }
  .tab {
    border: 0; margin-bottom: 0; gap: 14px; min-height: 88px;
  }
  .tab[aria-selected="true"] { box-shadow: var(--shadow); }
  .tab-icon { width: 48px; height: 48px; flex-basis: 48px; }
  .tab-icon svg { width: 31px; height: 31px; }
  .tabpanel { padding: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tab-icon { transition: none; }
  .tab:hover .tab-icon,
  .tab[aria-selected="true"] .tab-icon { transform: none; }
  .story-icon { transition: none; }
  .sum-card:hover .story-icon,
  .card:hover .story-icon,
  .engine-card:hover .story-icon { transform: none; }
}

/* ---------- counters ---------- */
.count { font-variant-numeric: tabular-nums; }

/* ---------- card affordance ---------- */
.card {
  transition: transform 180ms cubic-bezier(.2,0,0,1),
              box-shadow 180ms cubic-bezier(.2,0,0,1),
              border-color 180ms cubic-bezier(.2,0,0,1);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

@media (prefers-reduced-motion: reduce) {
  .progress-bar, .site-nav a::after, .card { transition: none; }
  .js .tabpanel-body { animation: none; }
  .card:hover { transform: none; }
}

/* ============================================================
   FIT CHECK
   ============================================================ */
.fit { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: var(--s5); align-items: start; margin-top: var(--s5); }
.fit-list { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fit-opt {
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 18px var(--s3); background: var(--white); border: 0;
  border-radius: var(--r-card); cursor: pointer;
  box-shadow: var(--shadow);
  transition: background-color .16s var(--ease), transform .16s var(--ease), box-shadow .16s var(--ease);
}
.fit-opt:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.fit-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fit-box {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 0; border-radius: 50%; background: var(--blush);
  display: grid; place-items: center;
  transition: background-color .16s var(--ease);
}
.fit-box::after {
  content: ""; width: 10px; height: 6px;
  border-left: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white);
  transform: rotate(-45deg) scale(0.4); opacity: 0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.fit-opt input:checked ~ .fit-box { background: var(--black); }
.fit-opt input:checked ~ .fit-box::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.fit-opt input:checked ~ .fit-txt { font-weight: 700; }
.fit-opt:has(input:checked) { background: var(--aqua); }
.fit-opt input:focus-visible ~ .fit-box { outline: 3px solid var(--focus); outline-offset: 3px; }
.fit-txt { font-size: 16.5px; line-height: 1.4; color: var(--black); }

.fit-result {
  position: sticky; top: 108px;
  background: var(--black); color: var(--white);
  border-radius: var(--r-card); padding: var(--s4); box-shadow: var(--shadow);
}
.fit-result .label { color: var(--aqua); }
.fit-selection { margin-top: var(--s2); color: var(--grey); font-size: 14px; font-weight: 700; }
.fit-selection strong { display: inline-block; color: var(--aqua); font-size: 28px; margin-right: 6px; transform-origin: center; }
.fit-result-title { margin-top: var(--s3); color: var(--white); }
.fit-solutions { display: grid; gap: 12px; margin-top: var(--s3); }
.fit-solutions li { position: relative; padding-left: 18px; color: var(--white); font-size: 15px; line-height: 1.5; }
.fit-solutions li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--aqua); }
.fit-reassurance { color: var(--grey); font-size: 14px; line-height: 1.5; margin-top: var(--s3); }
.fit-go { margin-top: var(--s3); }
.fit-note { color: var(--grey); margin-top: 10px; }

@media (max-width: 900px) {
  .fit { grid-template-columns: 1fr; gap: var(--s4); }
  .fit-result { position: static; }
      }
@media (max-width: 640px) {
  .fit-opt { padding: 15px var(--s2); gap: 12px; }
  .fit-txt { font-size: 15.5px; }
}

/* ============================================================
   SUMMARY, what we do and how, before the argument for why
   ============================================================ */
.problem-solution { margin-bottom: var(--s8); }
.ps-head { max-width: 920px; margin-bottom: var(--s5); }
.ps-title { margin-top: var(--s2); }
.ps-intro {
  max-width: 840px; margin-top: var(--s3);
  font-size: 19px; line-height: 1.58; color: var(--charcoal);
}
.ps-compare {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: stretch;
}
.ps-panel {
  min-width: 0; padding: var(--s4); border-radius: var(--r-card);
  display: flex; flex-direction: column;
}
.ps-panel h3 { margin-top: var(--s2); }
.ps-panel > p:last-child { margin-top: var(--s3); font-size: 17px; line-height: 1.6; }
.ps-kicker {
  font-size: 12px; font-weight: 700; line-height: 1.3;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.ps-problem { background: var(--black); color: var(--white); }
.ps-problem h3, .ps-problem > p:last-child { color: var(--white); }
.ps-problem .ps-kicker { color: var(--grey); }
.ps-solution { background: var(--periwinkle); color: var(--black); }
.ps-solution .ps-kicker { color: var(--charcoal); }
.ps-bridge { position: relative; display: grid; place-items: center; }
.ps-bridge::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--black);
}
.ps-bridge span {
  position: relative; z-index: 1; display: inline-flex; align-items: center;
  min-height: 40px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--aqua); color: var(--black);
  font-size: 13px; font-weight: 900; letter-spacing: 0.04em;
}
.ps-path {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: var(--s3); border: 1px solid var(--grey);
  border-radius: var(--r-card); overflow: hidden;
}
.ps-path li {
  min-width: 0; min-height: 88px; padding: var(--s2) 20px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  background: var(--white);
}
.ps-path li + li { border-left: 1px solid var(--grey); }
.ps-path span {
  color: var(--charcoal); font-size: 12px; font-weight: 900;
  line-height: 1; letter-spacing: 0.12em;
}
.ps-path strong { font-size: 16px; line-height: 1.3; }
.sum-lead { max-width: 900px; margin-bottom: var(--s7); }
.sum-big {
  font-size: clamp(24px, 2.9vw, 34px); font-weight: 700; line-height: 1.28;
  letter-spacing: -0.018em; color: var(--black); margin-top: var(--s2);
}
.sum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.sum-card {
  background: var(--white); border: 0; border-radius: var(--r-card);
  padding: var(--s4); box-shadow: var(--shadow);
  position: relative;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.sum-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.sum-card .icon-heading { min-height: 58px; padding-right: var(--s4); }
.sum-card .icon-heading > div { min-height: 58px; display: flex; align-items: center; }
.sum-n {
  position: absolute; top: var(--s4); right: var(--s4);
  display: block; font-size: 12px; font-weight: 900; line-height: 1;
  letter-spacing: 0.12em; color: var(--charcoal);
}
.sum-card h3 { margin-bottom: var(--s2); }
.sum-card .prose { font-size: 16.5px; }
@media (min-width: 1081px) {
  .engine-card .icon-heading { min-height: 80px; align-items: center; }
}
@media (max-width: 900px) {
  .problem-solution { margin-bottom: var(--s7); }
  .ps-compare { grid-template-columns: 1fr; }
  .ps-bridge { min-height: 56px; }
  .ps-bridge::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .sum-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .sum-lead { margin-bottom: var(--s5); }
}
@media (max-width: 720px) {
  .ps-path { grid-template-columns: 1fr; }
  .ps-path li { min-height: 72px; }
  .ps-path li + li { border-left: 0; border-top: 1px solid var(--grey); }
}
@media (max-width: 640px) {
  .ps-head { margin-bottom: var(--s4); }
  .ps-intro { font-size: 18px; }
  .ps-panel { padding: var(--s3); }
  .sum-n { top: var(--s3); right: var(--s3); }
}

/* ---------- lightweight pointer motion ----------
   These transforms are applied only after a fine pointer enters an element.
   No layer is reserved while the page is idle. */
@media screen and (hover: hover) and (pointer: fine) {
  .js .motion-depth {
    --motion-lift: 0px;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform: perspective(1000px) translate3d(0, var(--motion-lift), 0)
               rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transform-style: preserve-3d;
    transition: transform 260ms var(--ease), box-shadow 180ms var(--ease);
  }
  .js .motion-depth:hover { --motion-lift: -2px; }
  .js .motion-depth.motion-active {
    transition: transform 70ms linear, box-shadow 180ms var(--ease);
    will-change: transform;
  }
  .js .motion-cta {
    --mag-x: 0px;
    --mag-y: 0px;
    transform: translate3d(var(--mag-x), var(--mag-y), 0);
  }
  .js .motion-cta:hover {
    transform: translate3d(var(--mag-x), calc(var(--mag-y) - 1px), 0);
  }
  .js .motion-cta.motion-active {
    transition: background-color .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform 70ms linear;
    will-change: transform;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .motion-depth,
  .js .motion-cta,
  .js .motion-depth:hover,
  .js .motion-cta:hover { transform: none; }
}

/* the registered address in the footer */
.footer-address {
  font-style: normal; font-size: 14.5px; line-height: 1.55;
  color: var(--grey); margin-top: var(--s3);
}

/* Torke Blog components. The structure follows the useful jobs from the
   Neurock Blog while every visual decision stays inside the Torke system. */

.site-nav a[aria-current="page"] { border-bottom-color: var(--black); }
.mobile-nav a[aria-current="page"] { font-weight: 900; }

.breadcrumbs { margin-bottom: var(--s4); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2-on-dark); }
.breadcrumbs li + li::before { content: "/"; color: var(--grey); }
.breadcrumbs a { color: var(--aqua); }
.field-white .breadcrumbs li, .field-blush .breadcrumbs li { color: var(--charcoal); }
.field-white .breadcrumbs a, .field-blush .breadcrumbs a { color: var(--black); }

.blog-hero, .article-hero { padding: var(--s6) 0 var(--s7); }
.blog-hero-grid, .article-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
  gap: var(--s7); align-items: center;
}
.blog-hero-copy, .article-hero-copy { min-width: 0; }
.blog-title { max-width: 13ch; margin: var(--s2) 0 var(--s3); }
.blog-hero .lead, .article-hero .lead { max-width: 43ch; color: var(--white); }
.blog-featured-link {
  max-width: 640px; margin-top: var(--s4); padding: var(--s3);
  border: 1px solid var(--charcoal); border-radius: var(--r-card);
}
.blog-featured-link span {
  display: block; margin-bottom: var(--s1); color: var(--grey);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.blog-featured-link a { color: var(--aqua); font-family: var(--font-heading); font-size: 18px; font-weight: 800; }

.article-visual {
  position: relative; min-width: 0; min-height: 420px; padding: var(--s3);
  overflow: hidden; border: 1px solid var(--grey); border-radius: var(--r-card);
  background: var(--periwinkle); color: var(--black);
}
.article-visual-demand { border-color: var(--charcoal); background: var(--black); color: var(--white); }
.article-visual-revenue-operations { background: var(--aqua); color: var(--black); }
.article-visual-kicker {
  display: block; position: relative; z-index: 1;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.article-visual-demand .article-visual-kicker { color: var(--aqua); }
.article-visual svg { width: 100%; height: auto; margin-top: var(--s2); }
.article-visual svg circle, .article-visual svg path, .article-visual svg rect {
  fill: none; stroke: currentColor; stroke-width: 2.25;
  stroke-linecap: round; stroke-linejoin: round;
}
.article-visual svg .visual-dot { fill: currentColor; stroke: none; }
.article-visual svg .visual-accent { stroke: var(--aqua); }
.article-visual svg .visual-accent-fill { fill: var(--aqua); stroke: none; }
.article-visual-mark { position: absolute; right: var(--s3); bottom: var(--s3); width: 42px; height: 42px; object-fit: cover; }
.article-visual-mark img { width: 100%; height: 100%; object-fit: contain; }
.article-visual-compact { min-height: 250px; border: 0; border-radius: 0; }
.article-visual-compact svg { max-height: 178px; }
.article-visual-compact .article-visual-mark { width: 34px; height: 34px; }

.section-heading-row {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: var(--s6); align-items: end;
}
.section-heading-row .h-lg { margin-top: var(--s2); max-width: 18ch; }
.section-heading-row > .prose { justify-self: end; }

.topic-path-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4); margin-top: var(--s5);
}
.topic-path-card {
  display: flex; flex-direction: column; min-width: 0; min-height: 390px;
  padding: var(--s4); border-radius: var(--r-card); background: var(--white); box-shadow: var(--shadow);
}
.topic-path-top { display: flex; justify-content: space-between; gap: var(--s2); align-items: flex-start; }
.topic-path-heading { min-width: 0; }
.topic-path-number { display: block; color: var(--charcoal); font-size: 13px; font-weight: 900; line-height: 1.3; letter-spacing: .1em; }
.topic-path-heading > .label { margin-top: var(--s1); }
.topic-path-heading .h-sm { margin-top: var(--s1); }
.topic-path-card > p:not(.label) { margin-top: var(--s2); color: var(--charcoal); font-size: 16.5px; }
.topic-path-card .cta-link { margin-top: auto; padding-top: var(--s3); }
.story-icon-visibility { background: var(--aqua); color: var(--black); }
.story-icon-demand { background: var(--black); color: var(--white); }
.story-icon-revenue-operations { background: var(--periwinkle); color: var(--black); }

.blog-library-heading { padding-bottom: var(--s5); border-bottom: 1px solid var(--grey); }
.blog-tools { display: none; }
.js .blog-tools {
  display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: var(--s3) var(--s4); align-items: end; padding: var(--s4) 0 var(--s5);
}
.blog-search span {
  display: block; margin-bottom: var(--s1); color: var(--charcoal);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.blog-search input {
  width: 100%; min-height: 54px; padding: 13px var(--s2);
  border: 1px solid var(--grey); border-radius: var(--r-ctrl);
  outline: 0; background: var(--white); color: var(--black); font-size: 16px;
}
.blog-search input:focus { border: 2px solid var(--black); box-shadow: 0 0 0 3px var(--aqua); }
.blog-search input::placeholder { color: var(--charcoal); }
.topic-filters { display: flex; flex-wrap: wrap; gap: var(--s1); }
.topic-filters button, .blog-empty button {
  min-height: 44px; padding: 10px 14px; border: 1px solid var(--grey);
  border-radius: var(--r-ctrl); background: var(--white); color: var(--black);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.topic-filters button:hover, .topic-filters button[aria-pressed="true"], .blog-empty button:hover {
  border-color: var(--black); background: var(--black); color: var(--aqua);
}
.blog-result-count { grid-column: 1 / -1; color: var(--charcoal); font-size: 14px; }

.blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.blog-card {
  min-width: 0; overflow: hidden; border-radius: var(--r-card);
  background: var(--white); box-shadow: var(--shadow);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.blog-card-copy { display: flex; flex-direction: column; min-height: 360px; padding: var(--s4); }
.blog-card-meta { display: flex; justify-content: space-between; gap: var(--s2); color: var(--charcoal); font-size: 13px; }
.blog-card-meta span { font-weight: 900; }
.blog-card .h-sm { margin-top: var(--s3); }
.blog-card .h-sm a { color: var(--black); }
.blog-card-copy > p { margin-top: var(--s2); color: var(--charcoal); font-size: 16.5px; }
.blog-card-bottom { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); margin-top: auto; padding-top: var(--s4); }
.keyword-list { display: flex; flex-wrap: wrap; gap: var(--s1); }
.keyword-list li {
  padding: 6px 10px; border: 1px solid var(--grey); border-radius: var(--r-pill);
  background: var(--blush); color: var(--black); font-size: 12px;
}
.blog-empty { padding: var(--s5); border: 1px solid var(--grey); border-radius: var(--r-card); background: var(--blush); text-align: center; }
.blog-empty button { margin-top: var(--s2); }

.editorial-boundary-grid {
  display: grid; grid-template-columns: 220px minmax(0, 760px); gap: var(--s6); align-items: start;
}
.editorial-boundary .h-lg { margin-bottom: var(--s3); }
.editorial-boundary .lead { color: var(--white); }

.blog-closing-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
  gap: var(--s7); align-items: center;
}
.blog-closing .h-lg { max-width: 18ch; margin-top: var(--s2); }
.blog-closing .prose { color: var(--black); }
.blog-closing-btn { margin-top: var(--s3); background: var(--black); color: var(--white); }
.blog-closing-btn:hover { background: var(--white); color: var(--black); }

.article-hero-grid { align-items: center; }
.article-meta { display: flex; flex-wrap: wrap; gap: 10px var(--s2); margin-bottom: var(--s3); color: var(--grey); font-size: 14px; }
.article-meta span { color: var(--aqua); font-weight: 900; }
.article-title { max-width: 14ch; margin-bottom: var(--s3); }
.article-byline { margin-top: var(--s3); color: var(--grey) !important; font-size: 15px; }
.article-byline a { color: var(--aqua); }

.article-layout {
  display: grid; grid-template-columns: 220px minmax(0, 720px);
  gap: var(--s6); justify-content: center; align-items: start;
}
.article-toc { position: sticky; top: 104px; padding-top: var(--s1); }
.article-toc nav { margin-top: var(--s2); }
.article-toc ol { display: grid; gap: 10px; }
.article-toc a { color: var(--black); font-size: 14px; }
.article-content { min-width: 0; }
.article-content p, .article-content li { font-size: 18px; line-height: 1.62; }
.article-quick-answer { padding: var(--s4); border-radius: var(--r-card); background: var(--aqua); color: var(--black); }
.article-quick-answer .h-mid { margin: var(--s1) 0 var(--s2); }
.article-section { padding-top: var(--s6); scroll-margin-top: 104px; }
.article-section + .article-section { margin-top: var(--s6); border-top: 1px solid var(--grey); }
.article-section-number { margin-bottom: var(--s1); color: var(--charcoal); font-size: 13px !important; font-weight: 900; letter-spacing: .1em; }
.article-section .h-mid { margin-bottom: var(--s3); }
.article-section p + p { margin-top: var(--s3); }
.article-checklist { display: grid; gap: 12px; margin-top: var(--s3); }
.article-checklist li { position: relative; padding-left: var(--s3); }
.article-checklist li::before { content: ""; position: absolute; left: 1px; top: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); }
.article-boundary { margin-top: var(--s6); padding: var(--s4); border-radius: var(--r-card); background: var(--periwinkle); color: var(--black); }
.article-boundary p:last-child { margin-top: var(--s2); }
.article-method-note { scroll-margin-top: 104px; }
.article-author {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: start;
  margin-top: var(--s6); padding: var(--s4); border: 1px solid var(--grey);
  border-radius: var(--r-card); background: var(--blush);
}
.article-author .story-icon { background: var(--aqua); }
.article-author .story-icon img { width: 100%; height: 100%; object-fit: cover; }
.article-author .h-sm { margin: var(--s1) 0 var(--s2); }
.article-author p:last-child { color: var(--charcoal); font-size: 16.5px; }

.editorial-method-link { margin-top: var(--s3); }

.practice-hero, .trust-hero { padding: var(--s6) 0 var(--s7); }
.practice-hero-grid, .trust-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr);
  gap: var(--s7); align-items: center;
}
.practice-title, .trust-title { max-width: 15ch; margin: var(--s2) 0 var(--s3); }
.practice-hero .lead, .trust-hero .lead { max-width: 45ch; color: var(--white); }
.practice-card-grid, .method-rule-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4); margin-top: var(--s5);
}
.practice-card, .method-rule {
  padding: var(--s4); border: 1px solid var(--grey); border-radius: var(--r-card);
  background: var(--white);
}
.practice-card p, .method-rule p { margin-top: var(--s2); color: var(--charcoal); font-size: 16.5px; }
.practice-sequence-grid, .practice-output-grid, .practice-boundary-grid, .trust-copy-grid {
  display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
  gap: var(--s7); align-items: start;
}
.practice-sequence, .practice-output-list { display: grid; gap: var(--s2); }
.practice-sequence li {
  display: grid; grid-template-columns: 54px 1fr; gap: var(--s2); align-items: start;
  padding: var(--s3); border-radius: var(--r-card); background: var(--white);
}
.practice-sequence li span, .method-rule > span {
  color: var(--charcoal); font-family: var(--font-heading); font-size: 13px;
  font-weight: 800; letter-spacing: .1em;
}
.practice-output-list li {
  position: relative; padding: var(--s3) var(--s3) var(--s3) 54px;
  border: 1px solid var(--grey); border-radius: var(--r-card); font-weight: 700;
}
.practice-output-list li::before {
  content: ""; position: absolute; left: var(--s3); top: 50%; width: 12px; height: 12px;
  border-radius: 50%; background: var(--aqua); transform: translateY(-50%);
}
.practice-boundary-grid .lead { color: var(--black); }
.practice-related { margin-top: var(--s3); }
.trust-mark {
  width: min(100%, 360px); aspect-ratio: 1; justify-self: end;
  display: grid; place-items: center; border: 1px solid var(--charcoal); border-radius: var(--r-card);
}
.trust-mark img { width: 128px; height: 128px; }
.trust-copy-grid .article-content p + p { margin-top: var(--s3); }
.method-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.method-rule > span { display: block; margin-bottom: var(--s3); }
.not-found { min-height: 70svh; display: grid; align-items: center; padding: var(--s7) 0; }
.not-found-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: var(--s7); align-items: center; }
.not-found .display { max-width: 14ch; margin: var(--s2) 0 var(--s3); }
.not-found .lead { max-width: 45ch; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.not-found-links { display: grid; border: 1px solid var(--charcoal); border-radius: var(--r-card); padding: var(--s3); }
.not-found-links a { padding: var(--s2); border-bottom: 1px solid var(--charcoal); }
.not-found-links a:last-child { border-bottom: 0; }

.related-articles .h-lg { margin: var(--s2) 0 var(--s5); }
.related-grid .blog-card-copy { min-height: 340px; }

@media (max-width: 1080px) {
  .blog-hero-grid, .article-hero-grid, .practice-hero-grid, .trust-hero-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .blog-hero .article-visual, .article-hero .article-visual { max-width: 640px; }
  .practice-hero .article-visual { max-width: 640px; }
  .trust-mark { justify-self: start; width: 280px; }
}

@media (max-width: 900px) {
  .section-heading-row, .blog-closing-grid, .editorial-boundary-grid, .article-layout,
  .practice-sequence-grid, .practice-output-grid, .practice-boundary-grid, .trust-copy-grid,
  .not-found-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .section-heading-row > .prose { justify-self: start; }
  .topic-path-grid, .practice-card-grid { grid-template-columns: 1fr; }
  .topic-path-card { min-height: 0; }
  .js .blog-tools { grid-template-columns: 1fr; }
  .article-toc { position: static; padding: var(--s3); border: 1px solid var(--grey); border-radius: var(--r-card); background: var(--blush); }
  .article-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s3); }
}

@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card-copy { min-height: 0; }
}

@media (max-width: 640px) {
  .blog-hero, .article-hero, .practice-hero, .trust-hero { padding: var(--s5) 0 var(--s6); }
  .blog-title, .article-title, .practice-title, .trust-title { max-width: none; }
  .article-visual { min-height: 300px; padding: var(--s3); }
  .article-visual-compact { min-height: 220px; }
  .topic-path-card, .blog-card-copy, .article-quick-answer, .article-boundary, .article-author { padding: var(--s3); }
  .blog-card-meta { flex-direction: column; gap: 4px; }
  .blog-card-bottom { padding-top: var(--s3); }
  .article-toc ol { grid-template-columns: 1fr; }
  .article-content p, .article-content li { font-size: 17px; line-height: 1.782; }
  .article-section { padding-top: var(--s5); }
  .article-section + .article-section { margin-top: var(--s5); }
  .article-author { grid-template-columns: 1fr; }
  .blog-closing .btn { width: 100%; }
  .method-rule-grid { grid-template-columns: 1fr; }
  .not-found-actions .btn { width: 100%; }
  .trust-mark { width: 220px; }
}

@media (max-width: 360px) {
  .topic-paths .section-heading-row .h-lg { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card { transition: none; }
  .blog-card:hover { transform: none; }
}