/* ===========================================================================
   GROWTH SYSTEM v3 — page compositions
   The story section, then every other page block re-skinned on the yellow.
   =========================================================================== */
@media (min-width: 900px){
  .col-span-4{ grid-column-end: span 4; }  .col-span-5{ grid-column-end: span 5; }
  .col-span-6{ grid-column-end: span 6; }  .col-span-7{ grid-column-end: span 7; }
  .col-start-6{ grid-column-start: 6; } .col-start-7{ grid-column-start: 7; }
  .col-start-8{ grid-column-start: 8; } .col-start-9{ grid-column-start: 9; }
}

/* Below the breakpoint the span helpers do not apply, so a .grid child would
   be auto-placed into a single 1-of-6 column and the text would run one word
   per line. Every helper-using child takes the full width instead. */
@media (max-width: 899px){
  .grid > [class*="col-span-"],
  .grid > [class*="col-start-"]{ grid-column: 1 / -1; }
}

/* ============================================================ PAGE HEADS */
.pagehead--type{ padding-block: clamp(3rem, 2.06rem + 4.01vw, 6rem) clamp(2rem, 1.4rem + 2.5vw, 3.5rem); border-bottom: 1px solid var(--ink); }
.pagehead--type .lede{ margin-top: var(--s-6); }
.pagehead__split{ display: grid; gap: var(--s-7); margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
@media (min-width: 860px){ .pagehead__split{ grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: var(--s-9); } }
.pagehead__meta{ display: grid; gap: var(--s-5); align-content: start; }
.pagehead__meta dt{ margin-bottom: var(--s-2); } .pagehead__meta dd{ margin: 0; color: var(--ink-2); }
.pagehead--statement{ padding-block: clamp(3.5rem, 2.4rem + 4.5vw, 7rem) clamp(2rem, 1.4rem + 2.5vw, 3.5rem); border-bottom: 1px solid var(--ink); }
.pagehead--statement .display-xl{ margin-block: var(--s-6); max-width: 15ch; }
.pagehead--media{ position: relative; display: grid; align-items: end; border-bottom: 1px solid var(--ink); }
.pagehead__media{ display: none; }
.pagehead__over{ position: relative; padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.pagehead__over .display-xl{ margin-block: var(--s-5) var(--s-6); max-width: 17ch; }
.pagehead__over .lede{ max-width: 46ch; }
.pagehead + .band.band-y{ padding-top: var(--s-9); }
.pagehead + .band .rv{ opacity: 1; transform: none; }
@media (min-width: 900px){
  .pagehead--split .pagehead__cols{ display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(2.5rem,1rem + 4vw,5.5rem); align-items: start; }
  .pagehead--split .jump{ margin-top: 0; }
}
.jump{ display: grid; gap: 0; margin-top: clamp(2rem,1.5rem + 2vw,3rem); border-top: 1px solid var(--ink); }
.jump__link{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule-strong); font-size: 1rem; font-weight: 600; }
.jump__link .mono{ color: var(--ink-2); }
.jump__link:hover{ background: var(--hover); }

/* ---- chapters (services) ----------------------------------------------- */
.chapter{ border-top: 1px solid var(--ink); }
.chapter__grid{ display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 920px){ .chapter__grid{ grid-template-columns: minmax(0,1fr) minmax(0,.8fr); gap: clamp(2.5rem,1rem + 4vw,5.5rem); } .chapter--flip .chapter__copy{ order: 2; } }
.chapter__fig{ margin: 0; display: grid; place-items: center; min-height: 18rem; }
.chapter__fig img{ width: min(62%, 22rem); object-fit: contain; }
@media (max-width: 919px){ .chapter__fig{ min-height: 0; justify-items: start; } .chapter__fig img{ width: min(46%, 14rem); } }
.chapter__fig figcaption{ display: none; }
.caps{ display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.caps li{ color: var(--ink-2); }
.caps li + li::before{ content: "·"; margin-right: var(--s-4); }
.caps__grid{ display: grid; gap: var(--s-8) var(--s-7); padding-top: var(--s-8); }
@media (min-width: 680px){ .caps__grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px){ .caps__grid{ grid-template-columns: repeat(3, 1fr); gap: var(--s-9) var(--s-8); } }
.caps__group .h3{ margin-block: var(--s-3) var(--s-5); }
.caps__list{ display: grid; gap: var(--s-3); }
.caps__list li{ font-size: var(--t-small); color: var(--ink-2); padding-left: var(--s-5); position: relative; }
.caps__list li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 1.5px; background: var(--ink); }
.bleed{ display: none; }


/* ---- the journey chain: six stages on one drawn line ---------------------
   Without JS the line is drawn and every stage shows. With JS (.chain-js) the
   line draws itself from Discover to Grow when the section arrives, a dot
   travels along it and pauses at each stage, and each stage lights as the
   dot reaches it. Below 1000px the chain is a vertical timeline instead, and
   each stage lights as it scrolls past (site.js writes --pv, --py and .lit). */
.chain-wrap{ position: relative; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); container-type: inline-size; }
.chain{ display: grid; gap: 0; }
.chain__track{ position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--rule); }
.chain__draw{ position: absolute; inset: 0; background: var(--ink); transform-origin: left center; }
.chain__dot{ position: absolute; left: -2px; top: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--em);
  box-shadow: 0 0 0 5px rgba(250, 210, 75, .22); opacity: 0; z-index: 1; }
.chain__node{ position: relative; display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5) var(--s-4) var(--s-7) var(--s-5); }
/* a square per stage, sitting on the line */
.chain__node::before{ content: none; position: absolute; top: -4px; left: var(--s-5); width: 8px; height: 8px; background: var(--accent); }
.chain__n{ font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .14em; color: var(--ink-2); }
.chain__label{ font-family: var(--font-display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); letter-spacing: -.02em; line-height: 1.05; color: var(--ink); }
.chain__d{ font-size: var(--t-small); line-height: 1.4; color: var(--ink-2); max-width: 18ch; }

@media (min-width: 1000px){
  .chain{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .chain__node + .chain__node{ border-left: 1px solid var(--rule); }
  .chain__node:first-child{ padding-left: 0; }
  .chain__node:first-child::before{ left: 0; }
  /* the stops: each stage's square, a sixth of the width apart */
  @keyframes chain-dot{
    0%, 7%   { transform: translate3d(0, 0, 0); opacity: 1; }
    17%, 23% { transform: translate3d(calc(100cqw / 6 + 1.5rem), 0, 0); }
    33%, 39% { transform: translate3d(calc(200cqw / 6 + 1.5rem), 0, 0); }
    49%, 55% { transform: translate3d(calc(300cqw / 6 + 1.5rem), 0, 0); }
    65%, 71% { transform: translate3d(calc(400cqw / 6 + 1.5rem), 0, 0); }
    /* v5.4: the dot used to stop here and sit still from 81% to 100%, parked over
       "06 Grow" at 83.3% while chain-draw carried the line on to scaleX(1). The
       owner circled the gap and asked for the dot to finish at the end of the
       line. It now holds at the sixth stop long enough to light that node (the JS
       STOPS table fires it at 81%), then runs on to the line's tip.
       The dot is 13px wide at left:-2px, so 100cqw - 11px puts its right edge
       flush with the end of the rule. */
    81%, 87% { transform: translate3d(calc(500cqw / 6 + 1.5rem), 0, 0); opacity: 1; }
    100%     { transform: translate3d(calc(100cqw - 11px), 0, 0); opacity: 1; }
  }
  @keyframes chain-draw{
    0%, 7%   { transform: scaleX(0); }
    17%, 23% { transform: scaleX(.18); }
    33%, 39% { transform: scaleX(.35); }
    49%, 55% { transform: scaleX(.51); }
    65%, 71% { transform: scaleX(.68); }
    81%      { transform: scaleX(.85); }
    100%     { transform: scaleX(1); }
  }
  .chain-js .chain__draw{ transform: scaleX(0); }
  .chain-js.is-run .chain__draw{ animation: chain-draw 3400ms cubic-bezier(.45, 0, .3, 1) both; }
  .chain-js.is-run .chain__dot{ animation: chain-dot 3400ms cubic-bezier(.45, 0, .3, 1) both; }
}

/* vertical timeline below 1000px */
@media (max-width: 999px){
  .chain__track{ left: 4px; top: 0; width: 1px; height: 100%; }
  .chain__draw{ transform-origin: center top; }
  .chain__dot{ left: -2px; top: -2px; }
  .chain__node{ padding: 0 0 var(--s-7) var(--s-7); }
  .chain__node::before{ top: .35rem; left: 1px; }
  .chain__node:last-child{ padding-bottom: 0; }
  .chain__d{ max-width: 34ch; }
  /* v5.1: no transition. --py and --pv now change once per animation frame
     with the scroll, so a 700ms near-expo ease could only lag behind the
     thumb and then creep — it covered ~78% of the move in 150ms and crawled
     the rest over 550ms, and was re-targeted mid-flight on every new stage.
     That lunge-and-creep was the "glitchy" the owner reported. */
  .chain-js .chain__draw{ transform: scaleY(var(--pv, 0)); }
  .chain-js .chain__dot{ opacity: 1; transform: translate3d(0, var(--py, 0px), 0); }
}

/* a stage waiting, and a stage lit */
.chain-js .chain__node::before{ opacity: .35; transform: scale(.6); }
.chain-js .chain__n, .chain-js .chain__label, .chain-js .chain__d{ opacity: .28; transform: translate3d(0, 8px, 0); }
.chain-js .chain__node.lit::before{ opacity: 1; animation: chain-pop 520ms var(--ease-out) both; }
.chain-js .chain__node.lit .chain__n, .chain-js .chain__node.lit .chain__label, .chain-js .chain__node.lit .chain__d{
  opacity: 1; transform: none; transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
.chain-js .chain__node.lit .chain__d{ transition-delay: 120ms; }
@keyframes chain-pop{ 0%{ transform: scale(.6); } 55%{ transform: scale(1.9); } 100%{ transform: scale(1); } }
@media (prefers-reduced-motion: reduce){
  .chain-js .chain__draw{ transform: none !important; }
  .chain-js .chain__node::before, .chain-js .chain__n, .chain-js .chain__label, .chain-js .chain__d{ opacity: 1 !important; transform: none !important; }
}

/* the philosophy head and the section-head aside share the page rhythm */
.phil__head .lede{ margin-top: var(--s-6); }
.sec__head-aside{ display: flex; align-items: center; }

/* ---- home: problem, method, industries ---------------------------------- */
.problem__list{ display: grid; gap: 0; }
.problem__item{ padding-block: var(--s-5); border-bottom: 1px solid var(--rule-strong); display: grid; gap: var(--s-2); }
.problem__item:first-child{ border-top: 1px solid var(--ink); }
.problem__item .h3{ font-size: 1.0625rem; }
.problem__item .small{ color: var(--ink-2); max-width: 54ch; }
.problem__pull{ margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-top: var(--s-8); border-top: 1px solid var(--ink); }
.problem__pull .h2{ max-width: 24ch; }
.sec__head{ display: grid; gap: var(--s-5); }
@media (min-width: 900px){ .sec__head{ grid-template-columns: minmax(0,1fr) auto; align-items: end; column-gap: var(--s-8); } .sec__head .label{ grid-column: 1 / -1; } }
.steps{ display: grid; gap: var(--s-6); margin-top: clamp(3rem, 2rem + 4vw, 5rem); }
@media (min-width: 700px){ .steps{ grid-template-columns: 1fr 1fr; column-gap: var(--s-9); } }
@media (min-width: 1100px){ .steps{ grid-template-columns: repeat(4, 1fr); column-gap: var(--s-6); } }
.step{ display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.step__n{ color: var(--em); font-family: var(--font-display); font-weight: 800; font-stretch: 118%; font-size: 2.75rem; line-height: 1; letter-spacing: -.04em; }
.step .small{ color: var(--ink-2); }
.tiles{ display: grid; gap: 0; margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); border-top: 1px solid var(--ink); }
@media (min-width: 700px){ .tiles{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px){ .tiles{ grid-template-columns: repeat(4, 1fr); } }
.tile{ display: grid; gap: var(--s-4); padding: var(--s-6) var(--s-5) var(--s-7) 0; border-bottom: 1px solid var(--rule-strong); }
@media (min-width: 1000px){ .tile + .tile{ padding-left: var(--s-5); border-left: 1px solid var(--rule); } }
.tile__media{ display: none; }
.tile__body{ display: grid; gap: var(--s-3); }
.tile__t{ font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 1.25rem; letter-spacing: -.02em; }
.tile__d{ font-size: .9375rem; color: var(--ink-2); line-height: 1.5; }
.figures{ display: grid; gap: var(--s-8); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 760px){ .figures{ grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
/* v5.2: opacity is part of this reset. story.css loads last and its unscoped
   .fig{opacity:0} (the retired v4.7 walker layer) otherwise applies to these
   cards on the homepage, which were visible only because .stagger.in > * won
   on specificity. Remove `stagger` from that wrapper and they vanish. */
.figures > .fig{ position: static; width: auto; height: auto; transform: none; opacity: 1; padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.figures__note, .results__note{ margin-top: var(--s-8); color: var(--ink-2); max-width: 60ch; }
[data-placeholder]{ padding-left: var(--s-5); border-left: 3px solid var(--warm); }

/* ---- industries / results / about / contact ------------------------------- */
.vert{ border-top: 1px solid var(--ink); }
.vert__grid{ display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px){ .vert__grid{ grid-template-columns: minmax(0,.6fr) minmax(0,1.4fr); gap: clamp(2.5rem,1rem + 4vw,6rem); } .vert--flip .vert__copy{ order: -1; } }
.vert__fig{ margin: 0; display: none; }
.pills{ display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.pill{ font-size: .875rem; color: var(--ink); padding: var(--s-2) var(--s-4); border: 1.5px solid var(--ink); }
.vert__eg{ margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); color: var(--ink-2); }
.case{ padding-block: clamp(2.5rem,1.5rem + 3vw,4rem); border-top: 1px solid var(--ink); }
.case__head{ display: grid; gap: var(--s-3); margin-bottom: var(--s-7); }
@media (min-width: 760px){ .case__head{ grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--s-6); } }
.case__body{ display: grid; gap: var(--s-7); }
@media (min-width: 900px){ .case__body{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.7fr); gap: var(--s-8); } }
.case__col .small{ color: var(--ink-2); margin-top: var(--s-3); }
.case__list{ display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.case__list li{ padding-left: var(--s-5); position: relative; color: var(--ink-2); }
.case__list li::before{ content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 1.5px; background: var(--ink); }
.case__quote-slot{ margin-top: var(--s-7); font-family: var(--font-mono); font-size: var(--t-mono); }
.results__head{ display: grid; gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 860px){ .results__head{ grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: var(--s-9); } }
.results__prov{ display: grid; gap: var(--s-5); } .results__prov dt{ margin-bottom: var(--s-2); } .results__prov dd{ margin: 0; color: var(--ink-2); }
.about__fig{ margin: 0; } .about__fig img{ width: min(100%, 18rem); object-fit: contain; }
.about__fig figcaption{ margin-top: var(--s-4); color: var(--ink-2); max-width: 30ch; }
.matrix{ display: grid; gap: 0; margin-top: clamp(2.5rem,1.5rem + 3vw,4rem); border-top: 1px solid var(--ink); }
@media (min-width: 800px){ .matrix{ grid-template-columns: 1fr 1fr; } }
.matrix__cell{ padding: var(--s-7) var(--s-6) var(--s-7) 0; border-bottom: 1px solid var(--rule-strong); display: grid; gap: var(--s-3); align-content: start; }
@media (min-width: 800px){ .matrix__cell:nth-child(odd){ padding-right: var(--s-9); border-right: 1px solid var(--rule); } .matrix__cell:nth-child(even){ padding-left: var(--s-8); } }
.matrix__cell .small{ color: var(--ink-2); max-width: 46ch; }
.contact{ padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.contact__grid{ display: grid; gap: var(--s-9); }
@media (min-width: 980px){ .contact__grid{ grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(3rem,1rem + 5vw,6.5rem); align-items: start; } .contact__aside{ position: sticky; top: 100px; } }
.contact__aside .lede{ margin-top: var(--s-6); }
.contact__steps{ display: grid; gap: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--ink); }
.contact__steps li{ display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-2) var(--s-4); }
.contact__steps .mono{ grid-row: span 2; padding-top: .2em; }
.contact__steps b{ font-weight: 700; } .contact__steps .small{ color: var(--ink-2); }
.contact__direct{ margin-top: var(--s-7); color: var(--ink-2); } .contact__direct a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--orange); }
.contact__fig{ margin: var(--s-8) 0 0; } .contact__fig img{ width: min(100%, 16rem); object-fit: contain; }
@media (max-width: 979px){ .contact__fig{ display: none; } }
.fs{ border: 0; padding: 0; margin: 0 0 var(--s-8); } .fs legend{ padding: 0 0 var(--s-5); }
.fs__row{ display: grid; gap: 0 var(--s-5); } @media (min-width: 620px){ .fs__row{ grid-template-columns: 1fr 1fr; } }
.prose{ max-width: 68ch; } .prose .h3{ margin-top: var(--s-8); margin-bottom: var(--s-4); } .prose .h3:first-child{ margin-top: 0; }
.pagehead--404{ min-height: 62vh; display: grid; align-items: center; }
@media (max-height: 560px){ .story__copy .label{ display: none; } }

/* ---- home: the problem headline -------------------------------------------
   Three set lines at a size that fits the column; it holds its place while
   the list of problems scrolls beside it. */
.problem__h{ font-family: var(--font-display); font-weight: 800; font-stretch: 100%;
  font-size: clamp(2.1rem, 1.2rem + 2.3vw, 3.5rem); letter-spacing: -.032em; line-height: 1; }
.problem__ln{ display: block; }
.problem__h .em{ color: var(--em); }
@media (min-width: 900px){ .problem__head{ position: sticky; top: 112px; align-self: start; } }

/* ---- home: the method, a gear train beside the headline -------------------
   Four meshed gears, one per step. site.js lays the chain out from tooth
   counts (the same maths as the hero), turns it with scroll, and lights the
   current step's word, gear and card together. */
.method__top{ display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px){ .method__top{ grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); } }
.method__w{ display: inline-block; margin-right: .18em; transition: color 420ms var(--ease-out); }
@media (min-width: 900px){ .method__w{ display: block; margin-right: 0; } }
.method__w.is-on{ color: var(--em); }
/* v5.4: the gear train and every .mgear rule are gone — the owner asked for the
   gears removed three times and the last mark named the replacement, a road
   construction scene generated with Kie. This is the slot it lands in.
   While the slot is empty the heading takes the whole row rather than sitting
   squeezed into a .8fr column beside nothing; once art is dropped in, the
   two-column rule above applies again on its own. */
.method__art{ position: relative; width: 100%; }
.method__art img{ display: block; width: 100%; height: auto; max-width: none; }
@media (min-width: 900px){ .method__top:has(.method__art:empty){ grid-template-columns: minmax(0, 1fr); } }
.step{ transition: border-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
.step.is-on{ border-top-color: var(--em); box-shadow: inset 0 2px 0 var(--em); }
.steps{ align-items: start; }

/* v4: results figures and the service dots pick up the palette */
.stat__fig{ color: var(--em); }

/* ============================================ v4.2 · after the site audit */
/* page headings are on screen at load: they paint at once instead of fading
   in, so the first thing a visitor reads is not waiting on a transition */
h1.rv{ opacity: 1; transform: none; transition: none; }
/* the 404's actions, now that story.css only ships with the homepage */
.pagehead--404 .hero__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); }
/* every illustrative figure and case carries the placeholder rule itself */
.figures > .fig[data-placeholder]{ padding-left: var(--s-5); border-left: 3px solid var(--warm); }
.case[data-placeholder]{ padding-left: var(--s-6); border-left: 3px solid var(--warm); }
/* About · where we work: the facts fill the left column */
.about__facts{ display: grid; gap: var(--s-5); margin-top: var(--s-6); }
.about__facts div{ padding-top: var(--s-4); border-top: 1px solid var(--rule-strong); }
.about__facts dd{ margin: var(--s-2) 0 0; font-family: var(--font-display); font-weight: 800; font-stretch: 108%;
  font-size: var(--t-h3); letter-spacing: -.015em; line-height: 1.15; }
@media (max-width: 899px){ .about__where{ grid-column: 1 / -1; margin-bottom: var(--s-7); } }
/* v4.2 colour sketches: one per industry, on the homepage tiles and /industries/ */
.tile__media{ display: block; height: clamp(5.5rem, 4rem + 4vw, 8rem); }
.tile__media img{ width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
.vert__fig{ display: grid; place-items: center; }
.vert__fig img{ width: min(100%, 22rem); height: auto; object-fit: contain; }
@media (max-width: 899px){ .vert__fig img{ width: min(62%, 15rem); } .vert__fig{ justify-items: start; } }
/* Industries header: the headline shares its row with the jump list, so it
   is sized to its column (the word "businesses" ran under the list) */
@media (min-width: 900px){ .pagehead--split .display-xl{ font-size: min(var(--t-display-xl), 5.4vw); } }
/* Industries entries: the copy always gets the wide column, whichever side it is on */
@media (min-width: 900px){ .vert--flip{ grid-template-columns: minmax(0,1.4fr) minmax(0,.6fr); } }
/* three figures across on a tablet: the numbers size to their column */
@media (min-width: 760px) and (max-width: 1099px){ .figures .figure-xl{ font-size: clamp(2.25rem, .75rem + 4.6vw, 4.25rem); } }
.figures > .fig{ min-width: 0; }

/* ============================================ v4.3 · contact, after the page audit */
/* the aside must fit the screen to stay pinned: the calendar is now a small
   mark beside the email line instead of a 16rem picture under it */
.contact__direct{ display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule-strong); }
.contact__direct .mono{ line-height: 1.7; }
.contact__cal{ width: 4.25rem; height: auto; flex: none; }
@media (min-width: 980px){
  .contact__aside{ top: calc(var(--nav-top, 96px)); }
  .contact__aside .display-l{ font-size: clamp(2.4rem, 1.2rem + 2.6vw, 3.6rem); }
  .contact__steps{ margin-top: var(--s-7); padding-top: var(--s-6); }
}
/* the form opens with what we need to reply well; the rest is one tap away */
.form__req{ margin-bottom: var(--s-6); color: var(--ink-2); }
.form__more{ margin: 0 0 var(--s-8); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule-strong); }
.form__more-sum{ display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-1) var(--s-4);
  padding-block: var(--s-5); cursor: pointer; list-style: none; }
.form__more-sum::-webkit-details-marker{ display: none; }
.form__more-sum::marker{ content: ""; }
.form__more-sum .label{ color: var(--ink); }
.form__more-sum .small{ grid-column: 1; color: var(--ink-2); }
.form__more-chev{ grid-column: 2; grid-row: 1 / span 2; width: 12px; height: 8px; transition: transform var(--dur-2) var(--ease); }
.form__more[open] .form__more-chev{ transform: rotate(180deg); }
.form__more-sum:hover .label, .form__more-sum:focus-visible .label{ text-decoration: underline; text-underline-offset: 3px; }
.form__more[open] > .fs:first-of-type{ margin-top: var(--s-5); }
.form__note a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* fields: a graphite outline joins the orange offset, so focus is plain on yellow */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible{ outline: 2px solid var(--graphite); outline-offset: 2px; }
.check input:focus-visible{ outline: 2px solid var(--graphite); outline-offset: 2px; }

/* ============================================ v4.3 · /services/ chapters fill their half */
/* the illustration is larger and sits level with the headline; under it, the
   service's three-stop route (the same stops as its detail page) fills the
   rest of the column, so neither half reads as empty */
.chapter__side{ display: grid; gap: var(--s-8); align-content: start; }
.chapter__side .chapter__fig{ min-height: 0; place-items: start; }
.chapter__side .chapter__fig img{ width: min(100%, 27rem); height: auto; }
@media (min-width: 920px){
  .chapter__grid{ align-items: stretch; }
  .chapter__side{ align-content: space-between; padding-top: var(--s-5); }
  .chapter--flip .chapter__side .chapter__fig{ place-items: start end; }
}
@media (max-width: 919px){ .chapter__side .chapter__fig img{ width: min(58%, 16rem); } }
.chapter__route{ border-top: 1px solid var(--ink); padding-top: var(--s-5); }
.chapter__route ol{ position: relative; display: grid; gap: var(--s-5); margin-top: var(--s-6); padding-left: 2rem; }
.chapter__route ol::before{ content: ""; position: absolute; left: 6px; top: .45em; bottom: .45em; width: 1.5px; background: var(--rule-strong); }
.chapter__route li{ position: relative; display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; }
.chapter__route .mono{ color: var(--ink-2); }
.chapter__route b{ font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); letter-spacing: -.02em; line-height: 1.15; }
.chapter__dot{ position: absolute; left: -2rem; top: .2em; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--ink); }
.chapter__dot::after{ content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.band--green .chapter__dot::after{ background: var(--yellow); }
/* the cogs and the handshake are wide, short drawings: they get the full column */
@media (min-width: 920px){
  .chapter__side .chapter__fig img{ width: min(100%, 30rem); }
  .chapter--flip .chapter__side .chapter__fig{ place-items: start; }
}
/* the cogs and handshake drawings sit in the middle third of a square file:
   a 16:9 frame crops the empty margin so the drawing itself fills the column */
.chapter__fig--wide img{ aspect-ratio: 16 / 9; object-fit: cover; object-position: center; }
@media (min-width: 920px){ .chapter__side .chapter__fig--wide img{ width: min(100%, 36rem); } }

/* Contact: the form sits on its own paper card, in the brand's hard offset */
.contact__form{ background: var(--white); border: 1.5px solid var(--ink);
  padding: clamp(1.5rem, .9rem + 2vw, 3rem); box-shadow: 8px 8px 0 0 rgba(30, 25, 25, .12); }
/* v5.2: 639.98px, not 640px — max-width is inclusive, so at exactly 640 this
   rule and the two min-width:640px calendar rules below all applied at once. */
@media (max-width: 639.98px){ .contact__form{ box-shadow: 5px 5px 0 0 rgba(30, 25, 25, .12); } }
.contact__form .fs:last-of-type{ margin-bottom: var(--s-6); }
.contact__form .fs{ margin-bottom: var(--s-6); }
/* v4.4: industry tiles are centred, and every tile's rows sit at the top, so
   the titles line up across the row instead of dropping to fill the tallest */
.tile{ align-content: start; justify-items: center; text-align: center; padding: var(--s-6) var(--s-5) var(--s-7); }
@media (min-width: 1000px){ .tile + .tile{ padding-left: var(--s-5); } }
.tile__media{ width: 100%; height: clamp(7rem, 5.5rem + 4vw, 9rem); margin-bottom: var(--s-3); }
.tile__media img{ object-position: center bottom; }
.tile__body{ justify-items: center; max-width: 30ch; }
/* v4.4: the booking calendar on /contact/ — a month grid beside the times */
.cal__note{ color: var(--ink-2); margin: calc(-1 * var(--s-3)) 0 var(--s-5); }
.cal__grid{ display: grid; gap: var(--s-6); }
@media (min-width: 640px){ .cal__grid{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.cal__month{ border: 1.5px solid var(--ink); background: var(--paper); }
.cal__month .field{ padding: var(--s-4); }
.cal__head{ display: flex; align-items: center; justify-content: space-between; background: var(--yellow); border-bottom: 1.5px solid var(--ink); }
.cal__title{ font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 1rem; letter-spacing: -.01em; }
.cal__nav{ width: 44px; height: 44px; background: none; border: 0; font-size: 1.1rem; color: var(--ink); cursor: pointer; }
.cal__nav:hover:not(:disabled){ background: var(--yellow-3); }
.cal__nav:disabled{ opacity: .25; cursor: default; }
.cal__days{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: var(--s-3); }
.cal__dow{ text-align: center; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-block: var(--s-2); }
.cal__day{ aspect-ratio: 1; min-height: 36px; display: grid; place-items: center; background: none; border: 1px solid transparent;
  font: 600 .875rem/1 var(--font-body, inherit); color: var(--ink); cursor: pointer; transition: background var(--dur-1) var(--ease); }
.cal__day:hover:not(:disabled){ background: var(--yellow-3); border-color: var(--ink); }
.cal__day:disabled{ color: var(--ink-3); opacity: .45; cursor: default; }
.cal__day[aria-pressed="true"]{ background: var(--ink); color: var(--yellow); }
.cal__day:focus-visible, .cal__nav:focus-visible{ outline: 2px solid var(--orange); outline-offset: 1px; }
.cal__times{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
@media (min-width: 640px){ .cal__times{ grid-template-columns: repeat(2, 1fr); } }
.cal__slot{ position: relative; cursor: pointer; }
.cal__slot input{ position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cal__slot span{ display: block; padding: .7rem .5rem; text-align: center; border: 1.5px solid var(--ink); background: var(--paper);
  font-family: var(--font-mono); font-size: .8125rem; transition: background var(--dur-1) var(--ease); }
.cal__slot:hover span{ background: var(--yellow-3); }
.cal__slot input:checked + span{ background: var(--ink); color: var(--yellow); }
.cal__slot input:focus-visible + span{ outline: 2px solid var(--orange); outline-offset: 2px; }
.cal__pick{ min-height: 1.5em; margin-top: var(--s-4); font-size: .8125rem; color: var(--ink); }
.cal.is-missing .cal__month{ border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
/* v4.4: on the vertical timeline the travelling dot is centred on the square
   markers (square centre: x 5px, y .35rem + 4px; the dot is 13px, inside the
   track that starts at x 4px) */
@media (max-width: 999px){ .chain__dot{ left: -5.5px; top: calc(.35rem - 2.5px); } }
/* v4.4: every problem carries its own sketch, on a small yellow plate */
.problem__item--art{ grid-template-columns: 4.75rem minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.problem__item--art > div{ display: grid; gap: var(--s-2); }
.problem__art{ width: 4.75rem; height: 4.75rem; object-fit: contain; padding: .45rem; background: var(--yellow); border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 0 rgba(30, 25, 25, .12); transition: transform var(--dur-2) var(--ease); }
.problem__item--art:hover .problem__art{ transform: rotate(-3deg) scale(1.04); }
@media (max-width: 599px){ .problem__item--art{ grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--s-4); }
  .problem__art{ width: 3.75rem; height: 3.75rem; padding: .35rem; } }
/* the statement that used to close the problem band now closes the journey */
.phil__close{ margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: var(--s-6); border-top: 1px solid var(--rule-strong);
  max-width: 34ch; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.2; }

/* v4.4: homepage services as three cards (the capability cards' language) */
.svc-cards{ display: grid; gap: var(--s-5); margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 900px){ .svc-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-card{ display: grid; grid-template-rows: auto 1fr auto; background: rgba(255, 255, 255, .38); border: 1.5px solid var(--ink);
  box-shadow: 5px 5px 0 0 rgba(30, 25, 25, .14); color: var(--ink); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.svc-card:hover{ transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 rgba(30, 25, 25, .18); }
.svc-card:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.svc-card__top{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); background: var(--white); border-bottom: 1.5px solid var(--ink); box-shadow: inset 0 4px 0 var(--c); }
.svc-card__n{ display: inline-grid; place-items: center; min-width: 2rem; height: 1.6rem; padding: 0 .35rem; background: var(--ink); color: var(--yellow); font-size: .6875rem; letter-spacing: .08em; }
.svc-card__t{ font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 1.1875rem; letter-spacing: -.015em; line-height: 1.15; }
.svc-card__img{ width: 3.25rem; height: 3.25rem; object-fit: contain; }
.svc-card__d{ padding: var(--s-5) var(--s-4) var(--s-4); font-size: var(--t-small); line-height: 1.55; color: var(--ink-2); }
.svc-card__go{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 var(--s-4); padding: var(--s-3) 0 var(--s-4);
  border-top: 1px solid var(--rule-strong); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
.svc-card__go .index__go{ display: block; width: 20px; height: 11px; transition: transform var(--dur-2) var(--ease); }
.svc-card:hover .index__go{ transform: translateX(5px); }
.phil__close .em{ color: var(--yellow); }

/* ============================================ v4.4 · Results, redesigned
   A compact head with a note card, three figure cards, then one card per
   case: a white title strip, the story in three columns, the result in a
   coloured panel. Placeholder material carries an "Illustrative" tag. */
.rs-chip{ display: inline-grid; place-items: center; min-width: 2rem; height: 1.6rem; padding: 0 .4rem; background: var(--ink); color: var(--yellow);
  font-size: .6875rem; letter-spacing: .08em; flex: none; }
.rs-head{ padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem); border-bottom: 1px solid var(--ink); }
.rs-head__grid{ display: grid; gap: var(--s-7); align-items: end; }
@media (min-width: 900px){ .rs-head__grid{ grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s-9); } }
.rs-head .display-l{ font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.25rem); line-height: .98; }
.rs-head .lede{ max-width: 46ch; }
.rs-note{ background: var(--white); border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 0 rgba(30, 25, 25, .14); }
.rs-note__top{ display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1.5px solid var(--ink);
  font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 1rem; box-shadow: inset 0 4px 0 var(--orange); }
.rs-note__body{ display: grid; margin: 0; }
.rs-note__body > div{ padding: var(--s-4); }
.rs-note__body > div + div{ border-top: 1px solid var(--rule-strong); }
.rs-note__body > div[data-placeholder]{ padding-left: var(--s-4); border-left: 0; background: rgba(250, 210, 75, .22); }
.rs-note__body dt{ margin-bottom: var(--s-2); }
.rs-note__body dd{ margin: 0; color: var(--ink-2); font-size: .75rem; line-height: 1.5; }

.rs-figs{ padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.rs-figs__row{ display: grid; gap: var(--s-4); }
@media (min-width: 760px){ .rs-figs__row{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.rs-fig{ position: relative; border: 1.5px solid var(--ink); background: var(--paper); box-shadow: 4px 4px 0 0 rgba(30, 25, 25, .12); }
.rs-fig__top{ margin: 0; padding: var(--s-3) var(--s-4); background: var(--white); border-bottom: 1.5px solid var(--ink); box-shadow: inset 0 4px 0 var(--c); }
.rs-fig__n{ padding: var(--s-5) var(--s-4) var(--s-2); font-family: var(--font-display); font-weight: 800; font-stretch: 112%;
  font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem); letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums lining-nums; }
.rs-fig__cap{ padding: 0 var(--s-4) var(--s-5); color: var(--ink-2); font-size: .75rem; }
[data-ph] .rs-fig__top::after, .rs-case[data-ph] .rs-case__top::after{ content: "Illustrative"; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .2rem .45rem; border: 1px solid var(--warm); color: var(--ink); background: rgba(250, 210, 75, .35); }
.rs-fig__top{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.rs-ph{ margin-top: var(--s-6); max-width: 70ch; color: var(--ink-2); font-size: .75rem; }

.rs-cases .shell{ display: grid; gap: var(--s-6); }
.rs-case{ background: rgba(255, 255, 255, .5); border: 1.5px solid var(--ink); box-shadow: 5px 5px 0 0 rgba(30, 25, 25, .14); }
.rs-case__top{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--white); border-bottom: 1.5px solid var(--ink); box-shadow: inset 0 4px 0 var(--c); }
.rs-case__t{ font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); letter-spacing: -.015em; line-height: 1.15; }
.rs-case__where{ color: var(--ink-2); font-size: .75rem; margin-right: auto; }
.rs-case__body{ display: grid; }
.rs-case__col{ display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5) var(--s-4); }
.rs-case__col + .rs-case__col{ border-top: 1px solid var(--rule-strong); }
.rs-case__col .small{ color: var(--ink-2); }
.rs-case__list{ display: grid; gap: var(--s-2); }
.rs-case__list li{ position: relative; padding-left: var(--s-4); color: var(--ink-2); }
.rs-case__list li::before{ content: ""; position: absolute; left: 0; top: .7em; width: 7px; height: 1.5px; background: var(--orange); }
.rs-case__result{ display: grid; align-content: center; gap: var(--s-2); padding: var(--s-5) var(--s-4); background: var(--ink); color: var(--white);
  border-top: 1.5px solid var(--ink); }
.rs-case__result .label{ color: rgba(255, 255, 255, .72); }
.rs-case__result .mono{ font-size: .75rem; color: rgba(255, 255, 255, .8); }
.rs-case__n{ font-family: var(--font-display); font-weight: 800; font-stretch: 112%; font-size: clamp(2.4rem, 1.8rem + 2vw, 3.25rem);
  letter-spacing: -.04em; line-height: .9; color: var(--yellow); }
@media (min-width: 1000px){
  .rs-case__body{ grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .85fr); }
  .rs-case__col + .rs-case__col{ border-top: 0; border-left: 1px solid var(--rule-strong); }
  .rs-case__result{ border-top: 0; border-left: 1.5px solid var(--ink); }
}
@media (min-width: 640px) and (max-width: 999px){
  .rs-case__body{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-case__col:nth-child(2){ border-top: 0; border-left: 1px solid var(--rule-strong); }
  .rs-case__col:nth-child(3){ grid-column: 1 / -1; }
  .rs-case__result{ grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: baseline; column-gap: var(--s-5); }
  .rs-case__result .label{ grid-column: 1 / -1; }
}
.rs-cases{ padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.problem__art[src*="pb-apart"]{ padding: .15rem; }

/* v4.5 (6): the Philosophy band, made minimal. The drafting grid reads as
   texture rather than structure on the solid green, so it comes off this one
   band only; the shared .band component is untouched. The per-stage squares
   are gone with .chain__node::before above — the numeral and the travelling
   dot already say what they said. The connecting line stays: it is the one
   graphic that delivers the headline. */
.band--green:has(#phil-h){ background-image: none; }

/* ===========================================================================
   v5.0 — the mobile round. Additive overrides only.
   =========================================================================== */

/* 1. v5.0 fixed the method gear chips colliding on every phone width; v5.4
   removed the gear train outright, so that override and the .mgear__tag /
   .method__gears rules it carried are gone with it. Numbering kept so the
   items below still line up with the v5.0 round notes. */

/* 2. The problem list: the artwork was centred against the whole row, which is
   right when the heading is one line (desktop) and wrong when it wraps to two
   (every phone), where it left the tile hanging beside the second line. */
@media (max-width: 899px){
  .problem__item--art{ align-items: start; }
}