:root{
  --ink:#12151a; --ink-2:#39404a; --ink-3:#5d6570; --ink-4:#676e78;
  --paper:#fff; --panel:#f7f7f6; --line:#e2e2e0; --line-2:#efefed;
  --ox:#7a2e28; --dark:#12151a;
  --dark-2:#1b1f26; --on-dark:#c3c9d1; --on-dark-2:#8e959e; --dark-line:#2a2f38;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --max:min(92vw, 1440px);
  --gutter:clamp(22px,4.4vw,64px);
  --nav-h:68px;
  --z-sticky:60; --z-overlay:80;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--ox);outline-offset:3px}
.btn-p:focus-visible,.dark a:focus-visible,footer a:focus-visible{outline-color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-overlay)}
.skip:focus{left:var(--gutter);top:10px;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:2px;font:600 14px/1 var(--sans)}

h1{font:400 clamp(36px,4.6vw,62px)/1.07 var(--serif);letter-spacing:-.02em;text-wrap:balance}
h2{font:400 clamp(27px,3vw,39px)/1.16 var(--serif);letter-spacing:-.015em;text-wrap:balance}
h3{text-wrap:balance}
p{text-wrap:pretty}
.lede{font:400 clamp(17px,1.5vw,19px)/1.55 var(--sans);color:var(--ink-2)}

/* ---------- nav ---------- */
body>nav{position:sticky;top:0;z-index:var(--z-sticky);background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line-2)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body>nav{background:#fff}}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);height:var(--nav-h);
  display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;flex-shrink:0}
/* stacked lockup: CONSULTING is ~28% of the height, so it needs ~34px total
   before that line becomes legible */
.brand img{display:block;height:34px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:12px}
.nav-links a{font-size:14px;color:var(--ink-3);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink);font-weight:600}
.nav-cta{margin-left:auto;flex-shrink:0}

.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;
  font:600 14px/1 var(--sans);border-radius:2px;
  transition:background .18s cubic-bezier(.22,1,.36,1),border-color .18s cubic-bezier(.22,1,.36,1),color .18s}
.btn-p{background:var(--ink);color:#fff}.btn-p:hover{background:#2b3139}
.btn-g{border:1px solid #8f959d}.btn-g:hover{border-color:var(--ink);background:var(--panel)}
.btn-lg{height:50px;padding:0 26px;font-size:15px}

/* ---------- hero ---------- */
.hero{padding:clamp(64px,8vw,108px) 0 clamp(56px,6vw,80px)}
.hero-in{display:grid;gap:clamp(36px,5vw,56px)}
.hero h1{max-width:16ch}
.hero .lede{max-width:46ch;margin-top:22px}
.hero-btns{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-side{border-top:1px solid var(--line);padding-top:20px;max-width:44ch}
.hero-side h2,.hero-side h3{font:600 13px/1.4 var(--sans);letter-spacing:0;color:var(--ink);margin-bottom:11px}
.hero-side p{font-size:15px;line-height:1.65;color:var(--ink-3)}
.hero-side p+p{margin-top:12px}
@media(min-width:1000px){
  .hero-in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:clamp(48px,6vw,88px);align-items:end}
  .hero-side{padding-bottom:6px}
}

/* ---------- video hero (freight) ---------- */
.hero-v{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(460px,78vh,760px);display:flex;align-items:center;
  padding:clamp(56px,7vw,96px) 0;background:var(--dark)}
.hero-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;pointer-events:none}
/* legibility scrim: darkest at the left, where the type sits */
.hero-v::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    /* Pool of shade over the type only. Tuned by measuring composited luminance
       under the real h1/lede boxes across the clip: holds 4:1 on the headline
       and 6:1 on the lede at their worst frames while leaving ~82% of the
       footage's brightness intact. */
    radial-gradient(ellipse 66% 86% at 20% 46%,
      rgba(9,11,15,.86) 0%,
      rgba(9,11,15,.80) 30%,
      rgba(9,11,15,.56) 56%,
      rgba(9,11,15,.18) 78%,
      rgba(9,11,15,0) 100%),
    /* keeps the white nav from floating on a bright frame */
    linear-gradient(to bottom,rgba(9,11,15,.34) 0%,rgba(9,11,15,0) 20%),
    /* faint overall settle so the footage sits in the palette */
    linear-gradient(rgba(9,11,15,.04),rgba(9,11,15,.04))}
/* Same shell with no footage behind it: solid panel, no scrim to composite.
   Drop `plain`, add the <video> + toggle, and the media hero takes over. */
.hero-v.plain{background:var(--dark);min-height:clamp(400px,62vh,600px)}
.hero-v.plain::after{content:none}
/* the halo only exists to fight busy footage; on a flat panel it just smears */
.hero-v.plain h1,.hero-v.plain .lede{text-shadow:none}
/* no scrim to stay inside of, so the headline gets a wider measure */
.hero-v.plain h1{max-width:24ch}

/* .wrap is a flex item here; without this it shrinks to its content and the
   auto margins centre it, pulling the type off the page's left gutter. */
.hero-v>.wrap{width:100%}
/* A soft halo carries local legibility over the busiest frames, so the scrim
   can stay light enough to keep the footage visible. */
.hero-v h1{color:#fff;max-width:20ch;
  text-shadow:0 2px 28px rgba(6,8,12,.55),0 1px 4px rgba(6,8,12,.40)}
.hero-v .lede{color:#eef1f4;max-width:44ch;margin-top:20px;
  text-shadow:0 1px 12px rgba(6,8,12,.55),0 1px 3px rgba(6,8,12,.40)}
.hero-v .hero-btns{margin-top:32px}
.hero-v .btn-g{border-color:rgba(255,255,255,.62);color:#fff}
.hero-v .btn-g:hover{border-color:#fff;background:rgba(255,255,255,.14)}
/* keeps the dark fill (site convention) but stops the edge dissolving into the video */
.hero-v .btn-p{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hero-v .btn-p:hover{background:#2b3139}

/* Narrow screens: the headline reflows to the full width, so a left-weighted
   pool can't cover it. Swap to a vertical scrim weighted to the text band. */
@media(max-width:820px){
  .hero-v::after{
    background:
      linear-gradient(to bottom,
        rgba(9,11,15,.34) 0%,
        rgba(9,11,15,.50) 28%,
        rgba(9,11,15,.56) 62%,
        rgba(9,11,15,.38) 100%),
      linear-gradient(rgba(9,11,15,.04),rgba(9,11,15,.04))}
}

/* play/pause */
.vtoggle{position:absolute;right:var(--gutter);bottom:clamp(18px,3vw,28px);z-index:2;
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  color:#fff;background:rgba(9,11,15,.62);border:1px solid rgba(255,255,255,.55);
  box-shadow:0 1px 10px rgba(6,8,12,.35);
  border-radius:50%;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .18s cubic-bezier(.22,1,.36,1),border-color .18s,transform .18s}
.vtoggle:hover{background:rgba(9,11,15,.66);border-color:rgba(255,255,255,.7)}
.vtoggle:active{transform:scale(.94)}
.vtoggle svg{width:15px;height:15px;fill:currentColor;display:block}
/* optical centring: the play triangle reads left-heavy inside a circle */
.vtoggle .i-play{display:none;margin-left:2px}
.vtoggle[data-paused="true"] .i-play{display:block}
.vtoggle[data-paused="true"] .i-pause{display:none}

/* two equal columns using the light .hero-side treatment */
.pair{display:grid;gap:32px}
@media(min-width:760px){.pair{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px)}}

/* ---------- sections ---------- */
section{padding:clamp(56px,6.5vw,88px) 0;border-top:1px solid var(--line-2)}
.head{max-width:46ch;margin-bottom:clamp(32px,4vw,48px)}
.head .lede{margin-top:16px;max-width:52ch}

/* engagement — a real ordered sequence, not section scaffolding */
.steps{border-top:1px solid var(--line)}
.st{border-bottom:1px solid var(--line);padding:clamp(22px,2.4vw,30px) 0;display:grid;
  grid-template-columns:1fr;gap:10px;align-items:baseline}
.st .n{font:500 12px/1.5 var(--mono);letter-spacing:.08em;color:var(--ox)}
.st h3{font:400 clamp(21px,2vw,25px)/1.26 var(--serif);letter-spacing:-.012em}
.st p{font-size:15px;line-height:1.65;color:var(--ink-3);max-width:62ch}
@media(min-width:820px){
  .st{grid-template-columns:3.5rem minmax(0,19.5rem) minmax(0,1fr);gap:clamp(24px,3vw,44px)}
}

/* ---------- where we stop ---------- */
.dark{background:var(--dark);color:#fff;border-top:none;padding:clamp(72px,8vw,110px) 0}
.dark-in{display:grid;gap:clamp(28px,4vw,56px)}
.dark h2{color:#fff;max-width:17ch;font-size:clamp(31px,4vw,52px);line-height:1.1}
.dark p{color:var(--on-dark);max-width:46ch;font-size:clamp(16px,1.4vw,18.5px);line-height:1.65}
.dark p+p{margin-top:18px}
@media(min-width:900px){
  .dark-in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;
    gap:clamp(48px,7vw,96px)}
  .dark .dark-body{padding-top:9px}
}

/* ---------- who ---------- */
.two{display:grid;grid-template-columns:1fr;gap:32px}
.who{border-top:2px solid var(--ink);padding-top:20px}
.who .nm{font:400 23px/1.2 var(--serif);margin-bottom:12px}
.who p{font-size:15px;color:var(--ink-3);line-height:1.65;max-width:52ch}
@media(min-width:760px){.two{grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,64px)}}

/* ---------- closing cta ---------- */
.cta{background:var(--panel);padding:clamp(84px,9vw,132px) 0;border-top:1px solid var(--line)}
.cta-in{display:grid;gap:40px;align-items:end}
.cta h2{max-width:19ch}
.cta .lede{max-width:44ch;margin-top:22px}
@media(min-width:880px){
  .cta-in{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,6vw,80px)}
  .cta-in .hero-btns{margin-top:0;padding-bottom:6px}
}

/* ---------- footer ---------- */
footer{background:var(--dark);color:var(--on-dark);
  padding:clamp(56px,6vw,80px) 0 clamp(26px,3vw,34px)}
footer .brand img{height:38px}
.f-top{display:grid;gap:clamp(36px,4vw,48px)}
@media(min-width:700px){.f-top{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){
  /* Site column now carries the two practice links, so it needs more room */
  .f-top{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.1fr);
    gap:clamp(32px,4vw,56px)}
}
.f-about p{font-size:14.5px;line-height:1.65;color:var(--on-dark);max-width:38ch;margin-top:18px}
.f-about .f-loc{color:var(--on-dark-2);font-size:13.5px;margin-top:14px}
.f-col h2{font:600 12px/1 var(--sans);letter-spacing:.02em;color:#fff;margin-bottom:18px}
.f-col li{font-size:14.5px;line-height:1.5;color:var(--on-dark);margin-bottom:11px}
.f-col a{color:var(--on-dark);transition:color .15s}
.f-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.f-steps li,.f-contact li{color:var(--on-dark-2)}
.f-contact a{color:#fff;text-decoration:underline;text-underline-offset:3px}

.f-bot{margin-top:clamp(44px,5vw,64px);padding-top:24px;border-top:1px solid var(--dark-line);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;align-items:baseline}
.f-bot p{font-size:13px;line-height:1.6;color:var(--on-dark-2)}
.f-bot a{color:var(--on-dark-2);text-decoration:underline;text-underline-offset:3px}
.f-bot a:hover{color:#fff}

/* ---------- interior pages ---------- */
.page-head{padding:clamp(52px,6vw,88px) 0 0}
.page-head h1{max-width:17ch}
.page-head .lede{max-width:52ch;margin-top:22px}
.rule{border-top:1px solid var(--line);margin-top:clamp(40px,5vw,60px)}

.block{padding:clamp(40px,4.5vw,58px) 0;border-bottom:1px solid var(--line-2)}
.block:last-of-type{border-bottom:none}
.block-in{display:grid;grid-template-columns:1fr;gap:14px;align-items:baseline}
.block h2{font-size:clamp(22px,2.2vw,28px)}
.block p{font-size:16px;line-height:1.7;color:var(--ink-3);max-width:66ch}
.block p+p{margin-top:16px}
.block b{color:var(--ink);font-weight:600}
@media(min-width:820px){
  .block-in{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
}
.ph{color:var(--ink-4);font-style:italic}

.bios{display:grid;grid-template-columns:1fr;gap:32px;margin-top:8px}
.bio{border-top:2px solid var(--ink);padding-top:20px}
/* 4:5 portrait. Only one founder photo exists so far; capping the width keeps the
   row even rather than leaving a full-column gap next to it. */
.bio-portrait{display:block;width:100%;max-width:196px;aspect-ratio:4/5;
  object-fit:cover;margin:0 0 18px}
.bio .nm+.bio-portrait{margin-top:4px}
.bio .nm{font:400 24px/1.2 var(--serif);margin-bottom:14px}
.bio p{font-size:15px;color:var(--ink-3);line-height:1.7;max-width:50ch}
.bio .meta{margin-top:18px;font:400 13.5px/1.6 var(--sans);color:var(--ink-4)}
.bio .meta a{text-decoration:underline;text-underline-offset:2px}
@media(min-width:760px){.bios{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,64px)}}

/* ---------- contact ---------- */
form{max-width:560px}
.field{margin-bottom:20px}
.field label{display:block;font:600 13.5px/1 var(--sans);color:var(--ink);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;border:1px solid #cfd0cd;background:#fff;
  padding:12px 13px;font:400 15px/1.5 var(--sans);color:var(--ink);border-radius:2px;
  transition:border-color .15s}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#a9aba7}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--ox);
  outline-offset:1px;border-color:transparent}
.field textarea{min-height:120px;resize:vertical}
.hint{font-size:13px;line-height:1.6;color:var(--ink-4)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:start}
/* Each column is one grid item: its heading plus its content. Without the
   wrapper the headings become grid items of their own, which pushes the form
   into the narrow track meant for the contact details. */
.contact-col h2{font-size:clamp(19px,1.8vw,23px);margin-bottom:22px}
@media(min-width:880px){
  .contact-grid{grid-template-columns:minmax(0,560px) minmax(0,21rem);
    justify-content:space-between;gap:clamp(48px,7vw,88px)}
}
.direct{border-top:2px solid var(--ink);padding-top:20px}
.direct dt{font:600 13.5px/1 var(--sans);color:var(--ink);margin-bottom:7px}
.direct dd{font-size:15px;color:var(--ink-3);margin-bottom:22px;line-height:1.6}
.direct dd:last-child{margin-bottom:0}
.direct dd a{text-decoration:underline;text-underline-offset:2px}

@media(max-width:820px){
  .nav-links{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- homepage practice hub ---------- */
#practices .hero-side{border-top-width:2px;border-top-color:var(--ink)}
#practices .hero-side h3{font:400 clamp(21px,2vw,25px)/1.26 var(--serif);
  letter-spacing:-.012em;margin-bottom:12px}
#practices .hero-side h3 a{color:var(--ink)}
#practices .hero-side h3 a:hover{text-decoration:underline;text-underline-offset:3px}

/* A live backdrop blur over moving footage recomposites on every frame.
   :has() scopes this to the one page that actually plays video. */
body:has(.hero-v video) > nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
body:has(.hero-v video) .vtoggle{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(9,11,15,.72)}
body:has(.hero-v video) .vtoggle:hover{background:rgba(9,11,15,.86)}


/* Three practices on the homepage hub: stack until there is room for all three
   side by side, so the last card never orphans onto a row of its own. */
#practices .pair{grid-template-columns:1fr}
#practices .hero-side{max-width:none}
@media(min-width:900px){
  #practices .pair{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* =========================================================================
   Craft pass. The page was one flat white sheet with five identically shaped
   sections, an accent colour that appeared nowhere, and no interaction life.
   Everything below works within the existing palette and type — no new colours,
   no new families.
   ========================================================================= */

/* --- ground rhythm -------------------------------------------------------
   Alternating ground gives the page a spine. The practices sit on the panel
   so the three offers read as one unit rather than three floating columns. */
#practices{background:var(--panel);border-top-color:var(--line)}
#practices+section{border-top:none}

/* --- section pacing ------------------------------------------------------
   Uniform padding everywhere is what made this feel mechanical. The sequence
   and the people section carry more air than the denser practice grid. */
#how,#who{padding:clamp(72px,8vw,124px) 0}

/* --- the ordered sequence ------------------------------------------------
   The ordinals were 12px mono in a colour nobody could see. Setting them in
   the serif at display size makes the list read as a numbered sequence at a
   glance, and gives the accent somewhere real to live. */
.st .n{font:400 clamp(19px,1.7vw,23px)/1.2 var(--serif);letter-spacing:0;
  color:var(--ox);font-variant-numeric:tabular-nums lining-nums;
  transition:opacity .2s cubic-bezier(.22,1,.36,1)}
.st{transition:background-color .2s cubic-bezier(.22,1,.36,1)}
@media(min-width:820px){
  /* hang the rule and the ordinal into the gutter so the list has an edge */
  .st{margin-inline:calc(var(--gutter) * -0.5);padding-inline:calc(var(--gutter) * 0.5)}
  .st:hover{background-color:rgba(122,46,40,.035)}
}
.steps{border-top-width:2px;border-top-color:var(--ink)}

/* --- practice cards ------------------------------------------------------
   The whole card is the target, not just the heading — a 3-word link inside a
   paragraph-sized card is a small tap target and a weak affordance. */
#practices .hero-side{position:relative;
  transition:border-top-color .2s cubic-bezier(.22,1,.36,1)}
#practices .hero-side h3 a::after{content:"";position:absolute;inset:0}
#practices .hero-side:hover{border-top-color:var(--ox)}
#practices .hero-side:hover h3 a{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px}
#practices .hero-side:has(a:focus-visible){border-top-color:var(--ox)}

/* --- typographic detail --------------------------------------------------- */
::selection{background:var(--ox);color:#fff}
.st .n,.f-bot,.direct dd{font-variant-numeric:tabular-nums}
/* inline prose links: underline that sits off the baseline rather than through it */
.block a:not(.btn),.page-head a:not(.btn),.bio .meta a{
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line);
  transition:text-decoration-color .15s}
.block a:not(.btn):hover,.page-head a:not(.btn):hover{text-decoration-color:var(--ox)}

/* --- buttons: give the press a physical response ------------------------- */
.btn{transform:translateZ(0)}
.btn:active{transform:translateY(1px)}

/* --- footer structure ----------------------------------------------------- */
.f-col h2{padding-bottom:14px;border-bottom:1px solid var(--dark-line);margin-bottom:18px}

/* --- one orchestrated arrival, on the hero only --------------------------
   Not a scroll reveal on every section — that uniform reflex is the tell.
   The keyframes end at the element's natural state, so if animation never
   runs the content is simply there. */
@keyframes kkq-rise{from{opacity:0;transform:translateY(9px)}}
.hero h1,.hero .lede,.hero .hero-btns,
.hero-v h1,.hero-v .lede,.hero-v .hero-btns{
  animation:kkq-rise .62s cubic-bezier(.22,1,.36,1) both}
.hero .lede,.hero-v .lede{animation-delay:.07s}
.hero .hero-btns,.hero-v .hero-btns{animation-delay:.14s}

@media(prefers-reduced-motion:reduce){
  .hero h1,.hero .lede,.hero .hero-btns,
  .hero-v h1,.hero-v .lede,.hero-v .hero-btns{animation:none}
  .st,#practices .hero-side{transition:none}
}

/* --- horizontal variant of the sequence ----------------------------------
   Four stages side by side. Each column stacks ordinal / title / detail, with
   a hairline between columns so the order still reads left to right. */
@media(min-width:900px){
  /* Each column is its own grid, so ordinal / title / detail would sit at
     three different heights per column. Subgrid pulls all four columns onto
     the same three rows so the row rules read straight across. */
  .steps-h{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:auto auto auto;
    border-top:2px solid var(--ink)}
  .steps-h .st{grid-row:span 3;grid-template-rows:subgrid;
    grid-template-columns:1fr;gap:10px;align-items:start;
    border-bottom:none;border-left:1px solid var(--line);
    padding:clamp(26px,2.4vw,34px) clamp(18px,1.8vw,30px) 0;
    margin-inline:0}
  @supports not (grid-template-rows:subgrid){
    /* fallback: fix the first two rows so the third still starts level */
    .steps-h .st{grid-template-rows:1.9em 2.6em auto}
  }
  .steps-h .st:first-child{border-left:none;padding-left:0}
  .steps-h .st:last-child{padding-right:0}
  .steps-h .st:hover{background-color:transparent}
  .steps-h .st h3{font-size:clamp(19px,1.6vw,22px)}
  .steps-h .st p{max-width:none}
}

/* --- the team section reads as a centred statement, not a left column ----- */
/* wider measure than the left-aligned sections: a centred statement wants
   two balanced lines, not three narrow ones */
#who .head{text-align:center;margin-inline:auto;max-width:36rem}
#who .head .lede{margin-inline:auto}
#who .hero-btns{justify-content:center}