/* Specialised agent swarms: /agent-swarms on techhorizonlabs.com.
   Loaded after the site's styles.css. The header, menu and footer are the site's own and the site's
   stylesheet styles them. Below the page-level block, every selector starts with :where(#main), so a rule
   reaches only inside <main id="main"> and keeps the weight it was designed with (:where adds none).
   One big moment (the scroll-driven story); everything else is quiet. Orange is the booking button
   and a job in progress, and nowhere else. */

/* ---------- page level ---------- */
/* This page is light only. The site's tokens are pinned to their light values in every theme state
   (system dark, or a stored "dark" choice), so the site's header and footer match the page, and the
   theme switch is hidden here. The three selectors mirror the three places styles.css sets its tokens. */
:root,:root[data-theme="dark"],:root:not([data-theme="light"]){
  color-scheme:light;
  /* the site's tokens (styles.css :root, light). --bg is the home page's ground, as on the home page. */
  --bg:#F5F2EC;--bg-warm:hsl(26 45% 94%);--text:#1E1710;--text-secondary:#4A423B;--text-muted:#6E655D;
  --accent:#E2572A;--accent-hover:#C64515;--accent-light:hsl(17 62% 93%);--flare:#F07800;
  --border:#E4DDD3;--border-light:#EFEAE2;--white:#ffffff;
  /* the page's own tokens */
  --paper:#FBF9F5;--paper-hi:#FFFDF9;--band:#EFE9DF;
  --ink:#1E1710;--ink-2:#3F372F;--text-2:#4A423B;--muted:#6E655D;--muted-band:#62594F;
  --rule:#E0D9CE;--rule-band:#D9D0C2;--rule-strong:#CFC6B8;--hover-line:#B9AE9F;
  --act:#C64515;--act-hover:#A8380F;--job:var(--act);
  --serif:"Fraunces",Georgia,serif;--sans:"Instrument Sans",system-ui,sans-serif;
  --max:1100px;--gut:clamp(20px,3.5vw,36px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sec:clamp(72px,9vw,132px);
  /* the height of the site's header on a wide screen: the pinned opening starts underneath it.
     (Not --nav-h: the site's main.js writes a variable of that name when the phone menu opens.) */
  --sw-nav-h:86px;
}
.theme-toggle{display:none}
html{scroll-behavior:auto;scrollbar-color:#CFC6B8 var(--bg)}
/* styles.css sets overflow-x:hidden on body, which makes body a scroll container and stops the pinned
   opening from sticking. clip hides the same overflow without that. */
body{overflow-x:clip}
/* no paper grain on this page: it sits behind the content and would show a seam round the model */
body::after{display:none}
/* styles.css gives every direct child of body position:relative and z-index:1 (its selector carries an id).
   The page was designed with a plain <main>; the skip link has to leave the flow. */
body > main#main{position:static;z-index:auto}
.skip{position:absolute !important;left:var(--gut);top:-80px;z-index:100 !important;background:var(--ink);color:#fff;font-size:15px;font-weight:600;padding:12px 16px;border-radius:3px}
.skip:hover{color:#fff}
.skip:focus{top:10px;outline:2px solid #fff;outline-offset:-5px}

/* ---------- the site's element rules, set back inside <main> ----------
   styles.css styles bare h1, h2, h3, p and a:hover, and shrinks body text on a phone. The page was designed
   without those rules, so they are returned to the browser's defaults here, before the page's own rules. */
:where(#main){font-family:var(--sans);font-size:1.125rem;line-height:1.6;color:var(--ink)}
:where(#main) :is(h1,h2,h3){font-size:revert;line-height:revert;letter-spacing:revert}
:where(#main) p{margin-bottom:0}
:where(#main) a:hover{color:var(--ink)}
:where(#main) a.btn:hover{color:#fff}

/* ---------- base, inside <main> ---------- */
:where(#main) ::selection{background:#F3D3C2;color:var(--ink)}
:where(#main) img,:where(#main) canvas,:where(#main) video,:where(#main) svg{max-width:100%}
:where(#main) h1,:where(#main) h2,:where(#main) h3{font-family:var(--serif);font-weight:600;color:var(--ink);text-wrap:balance}
:where(#main) a{color:var(--ink);text-decoration:none}
:where(#main) ul,:where(#main) ol{list-style:none}
:where(#main) strong,:where(#main) b{font-weight:600}
:where(#main) a:focus-visible,:where(#main) button:focus-visible,:where(#main) [tabindex]:focus-visible,:where(#main) video:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
:where(#main) .sprite{position:absolute}
:where(#main) .st-wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

/* the three agent marks, as the film draws them */
:where(#main) .ms{fill:var(--gf,#fff);stroke:var(--gc,#1E1710);stroke-width:3;stroke-linejoin:round}
:where(#main) .md{fill:var(--gc,#1E1710)}

/* ---------- the booking button: the page's one orange block ---------- */
:where(#main) .btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 28px;border-radius:3px;background:var(--act);color:#fff;font-weight:600;font-size:16.5px;line-height:1.2;transition:background .18s ease,transform .18s var(--ease-out)}
:where(#main) .btn:hover{background:var(--act-hover)}
:where(#main) .btn:active{transform:scale(.98)}
:where(#main) .btn:focus-visible{outline-offset:4px}
:where(#main) .more{display:inline-flex;align-items:center;min-height:44px;font-size:15.5px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--hover-line);text-underline-offset:4px;text-decoration-thickness:1px}
:where(#main) .more:hover{text-decoration-color:var(--ink)}

/* =====================================================================
   1: the opening. The hero is the first frame of the story.
   Three modes, chosen by the class on <html> and the window:
     no 'anim' (reduced motion, no script)   the headline beside the model's still, then three stills
     'anim', wide and tall enough            this panel pins and the scroll drives the picture
     'anim', otherwise                       the picture plays once by the clock, under the headline
   ===================================================================== */
:where(#main) .open{position:relative}
:where(#main) .open-in{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,44px) var(--gut) 0;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "copy" "btn" "art" "lines" "ctl"}
:where(#main) .eyebrow{grid-area:label;font-size:14.5px;line-height:1.3;color:var(--muted);margin-bottom:16px}
:where(#main) .hero-copy{grid-area:copy}
:where(#main) .hero-copy h1{font-size:clamp(35px,9.4vw,46px);line-height:1.03;letter-spacing:-.032em}
:where(#main) .hero-copy .sub{margin-top:20px;font-size:clamp(17px,1.4vw,19px);line-height:1.58;color:var(--ink-2);max-width:40ch}
:where(#main) .open .btn{grid-area:btn;justify-self:start;margin-top:28px}
:where(#main) .open-art{grid-area:art;position:relative;margin:26px calc(var(--gut) * -1) 0}
:where(#main) .open-lines{grid-area:lines;display:none}
:where(#main) .open-ctl{grid-area:ctl;display:none}
:where(#main) .open-draw{display:none}

/* the model: a still in the HTML; the page script lays the live scene, or its video, over it */
:where(#main) .stage{position:relative;overflow:hidden;background:var(--bg);
  /* the crop cuts the model's soft floor shadow at the edges: fade it out */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,#000 95.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(180deg,#000 95.5%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
:where(#main) .stage picture,:where(#main) .stage-still{display:block;width:100%;height:auto}
:where(#main) .stage-video,:where(#main) .stage-frame{position:absolute;left:0;top:0;border:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
:where(#main) .stage-video{width:100%;height:100%;object-fit:fill;
  /* browsers decode video a level or two off the page ground. The exact still lies underneath,
     so the video's edges are feathered into it and no rectangle shows. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect}
:where(#main) .stage-frame{width:1080px;height:1350px;max-width:none;transform-origin:0 0}
:where(#main) .stage-video.is-on,:where(#main) .stage-frame.is-on{opacity:1}
/* pause and play for the model: an icon button, named by its aria-label */
:where(#main) .stage-toggle{position:absolute;right:var(--gut);bottom:6px;z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--rule-strong);border-radius:50%;background:rgba(245,242,236,.92);color:var(--ink);cursor:pointer;transition:border-color .18s ease}
:where(#main) .stage-toggle:hover{border-color:var(--ink)}
:where(#main) .stage-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
:where(#main) .stage-toggle .i-play{display:none;fill:currentColor;stroke-width:1.4}
:where(#main) .stage-toggle.is-paused .i-pause{display:none}
:where(#main) .stage-toggle.is-paused .i-play{display:block}
:where(#main) .stage-toggle[hidden]{display:none}

/* the story pictures */
:where(#main) .st{display:block;width:100%;height:auto;overflow:visible}
:where(#main) .st-say{font:600 18px var(--sans);fill:var(--ink)}
:where(#main) .st-name{font:600 19px var(--sans);fill:var(--ink)}
:where(#main) .st-lab{font:600 18px var(--serif);letter-spacing:-.012em;fill:var(--ink)}
:where(#main) .st-insc{font:600 21px var(--serif);letter-spacing:-.012em;fill:var(--ink)}
:where(#main) .st-mk.is-hot{--gc:#C64515}
:where(#main) .st-pulse{stroke-dasharray:26 400;stroke-dashoffset:26}

/* ---- still mode: three stills with their lines, after the hero */
:where(#main) .beats{padding:clamp(48px,7vw,96px) 0 var(--sec)}
:where(#main) .beat + .beat{margin-top:clamp(56px,9vw,104px)}
:where(#main) .beat-line{font-size:clamp(27px,3.5vw,46px);line-height:1.08;letter-spacing:-.028em;max-width:19em}
:where(#main) .beat-fig{margin-top:clamp(22px,3vw,34px);max-width:660px}
:where(#main) .beat-fig .st-a{max-width:400px}
@media(max-width:719px){:where(#main) .beat .st-name,:where(#main) .st-anim .st-name{font-size:25px}:where(#main) .beat .st-lab,:where(#main) .st-anim .st-lab{font-size:22px}:where(#main) .beat .st-insc,:where(#main) .st-anim .st-insc{font-size:24px}}
@media(min-width:720px){
  :where(#main) .eyebrow{font-size:15px}
  :where(#main) .hero-copy h1{font-size:clamp(46px,6.4vw,60px);max-width:15ch}
}
@media(min-width:1000px){
  html:not(.anim) :where(#main) .beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 1fr;column-gap:clamp(32px,4vw,56px)}
  html:not(.anim) :where(#main) .beat{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:28px;margin-top:0}
  html:not(.anim) :where(#main) .beat-line{font-size:clamp(24px,2.2vw,30px);line-height:1.12}
  html:not(.anim) :where(#main) .beat-fig{margin-top:0;align-self:center;justify-self:center;width:100%}
  html:not(.anim) :where(#main) .beat-fig .st-a{max-width:250px;margin:0 auto}
}
@media(min-width:720px){html:not(.anim) :where(#main) .open-art{max-width:620px;margin-left:auto;margin-right:auto}html:not(.anim) :where(#main) .stage-toggle{right:0}}
@media(min-width:1040px){
  /* still mode on a wide screen: copy on the left, the model's still on the right, as one full window */
  html:not(.anim) :where(#main) .open-in{--stage-h:clamp(520px,calc(100vh - 110px),860px);max-width:none;min-height:calc(100vh - var(--sw-nav-h));
    padding:0 clamp(16px,2vw,28px) 0 max(var(--gut),calc(50% - var(--max) / 2 + var(--gut)));
    grid-template-columns:minmax(0,470px) minmax(0,1fr);grid-template-rows:1fr auto auto auto 1.2fr;column-gap:clamp(16px,2vw,32px);
    grid-template-areas:". art" "label art" "copy art" "btn art" ". art"}
  html:not(.anim) :where(#main) .hero-copy h1{font-size:clamp(44px,3.75vw,58px);max-width:none}
  html:not(.anim) :where(#main) .open-art{align-self:center;justify-self:end;margin:0;max-width:none;width:calc(var(--stage-h) * 830 / 912)}
}

/* ---- animated modes (class 'anim' on <html>): the drawing is the picture; the model waits under it */
.anim :where(#main) .st-anim :is(.st-job,.st-track,.st-pulse,.st-insc,.st-cornice,.st-lab,.st-floor,.st-name,.st-col,.st-agent,.st-mk,.st-flag,.st-shield,.st-tick,.st-ask,.st-reply,.st-dots,.st-unchecked,.st-typed){opacity:0}
.anim :where(#main) .open-zoom{transform:scale(var(--z,1.4));transform-origin:50% 45%}
@media(max-width:719px){.anim :where(#main) .open-zoom{--z:1.62}}
@media(min-width:900px) and (min-height:600px){.anim :where(#main) .open-zoom{--z:1.3}}
.anim :where(#main) .beats{display:none}
.anim :where(#main) .open-draw{display:block;width:100%;aspect-ratio:528/406;will-change:transform,opacity}
.anim :where(#main) .open-zoom{width:100%;height:100%;will-change:transform}
.anim :where(#main) .open-zoom .st{width:100%;height:100%}
.anim :where(#main) .open-art{display:flex;align-items:center;justify-content:center;aspect-ratio:750/872;margin-top:18px;overflow:hidden;overflow:clip}   /* the close-up is a scaled box wider than the window; only its middle is drawn on */
.anim :where(#main) .stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:100%;width:auto;aspect-ratio:750/872;opacity:0;pointer-events:none}
.anim :where(#main) .stage picture,.anim :where(#main) .stage-still{height:100%;width:100%}
.anim :where(#main) .open-lines{display:grid;margin-top:6px;min-height:3.5em;font-size:clamp(23px,6.2vw,30px)}
:where(#main) .open-line{grid-area:1/1;align-self:start;font-size:1em;line-height:1.1;letter-spacing:-.026em;max-width:17em;opacity:0}
:where(#main) .open-line .w{display:inline-block;will-change:opacity}
.anim :where(#main) .open-ctl{display:flex;align-items:center;gap:14px;min-height:44px;margin:10px 0 clamp(40px,7vw,64px)}
:where(#main) .open-marks{display:flex;gap:7px}
:where(#main) .open-marks i{display:block;width:34px;height:3px;border-radius:2px;background:var(--rule-strong);overflow:hidden;position:relative}
:where(#main) .open-marks i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:0 50%}
:where(#main) .open-replay{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border:1px solid var(--rule-strong);border-radius:999px;background:none;color:var(--ink);font:500 14.5px/1 var(--sans);cursor:pointer;transition:border-color .18s ease}
:where(#main) .open-replay:hover{border-color:var(--ink)}
:where(#main) .open-replay svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:where(#main) .open-replay[hidden]{display:none}
/* played by the clock (narrow or short windows): the first line is the picture's caption from the start */
@media not all and (min-width:900px) and (min-height:600px){
  .anim :where(#main) .open-line[data-beat="a"]{opacity:1}
}
@media(min-width:720px) and (max-width:899px){
  .anim :where(#main) .open-art{aspect-ratio:830/912;max-width:620px;margin-left:auto;margin-right:auto;width:100%}
  .anim :where(#main) .stage{aspect-ratio:830/912}
}

/* ---- pinned: a wide, tall enough window. The panel holds the whole window; the site header lies over its top at first
   and scrolls away, so nothing in the panel moves when the page starts to scroll. */
@media(min-width:900px) and (min-height:600px){
  .anim :where(#main) .open{height:560vh;margin-top:calc(var(--sw-nav-h) * -1)}
  .anim :where(#main) .open-pin{position:sticky;top:0;height:100vh;height:100svh;padding-top:var(--sw-nav-h);overflow:hidden}
  .anim :where(#main) .open-in{height:100%;max-width:none;position:relative;
    padding:0 clamp(16px,2vw,28px) 0 max(var(--gut),calc(50% - var(--max) / 2 + var(--gut)));
    grid-template-columns:minmax(0,452px) minmax(0,1fr);column-gap:clamp(20px,2.6vw,40px);
    grid-template-rows:1fr auto auto auto auto 1.25fr;
    grid-template-areas:". art" "label art" "copy art" "btn art" "ctl art" ". art"}
  .anim :where(#main) .hero-copy h1{font-size:clamp(42px,3.75vw,58px);max-width:none}
  .anim :where(#main) .open-lines{grid-area:copy;margin:0;min-height:0;font-size:clamp(42px,3.75vw,58px);pointer-events:none}
  .anim :where(#main) .open-line{line-height:1.03;letter-spacing:-.032em;max-width:none}
  .anim :where(#main) .open-line .w{opacity:.34}
  .anim :where(#main) .open-ctl{margin:26px 0 0}
  .anim :where(#main) .open-replay{display:none}
  .anim :where(#main) .open-art{aspect-ratio:auto;margin:0;height:100%;padding:8px 0 26px}
  .anim :where(#main) .open-draw{width:min(100%,calc((100vh - var(--sw-nav-h) - 60px) * 528 / 406));max-width:860px}
  .anim :where(#main) .stage{height:min(calc(100% - 34px),820px);aspect-ratio:830/912}
  .anim :where(#main) .stage-toggle{right:12px;bottom:30px}
}
@media(min-width:900px) and (min-height:600px) and (max-width:1099px){
  .anim :where(#main) .open-in{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
  .anim :where(#main) .hero-copy h1,.anim :where(#main) .open-lines{font-size:40px}
}

/* =====================================================================
   2: three pillars, swarms under each. Each row says its outcome (the largest thing in the row) and shows it:
   a small scene on a white sheet that plays once as the row comes into view and rests on its last frame.
   ===================================================================== */
:where(#main) .swarms{background:var(--band);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:var(--sec) 0}
:where(#main) .swarm{display:grid;gap:28px;padding:clamp(40px,6vw,64px) 0;border-top:1px solid var(--rule-strong)}
:where(#main) .swarm:first-child{border-top:0;padding-top:0}
:where(#main) .swarm:last-child{padding-bottom:0}
:where(#main) .swarm h2{font-size:clamp(20px,1.9vw,23px);line-height:1.15;letter-spacing:-.018em}
:where(#main) .trio{display:flex;gap:5px;margin-bottom:12px}
:where(#main) .trio svg{display:block}
:where(#main) .trio .is-hot{--gc:#C64515}
:where(#main) .swarm-out{margin-top:14px;font:600 clamp(32px,8.4vw,46px)/1.05 var(--serif);letter-spacing:-.03em;max-width:13em;text-wrap:balance}
:where(#main) .swarm-does{margin-top:20px;font-size:17.5px;line-height:1.5;color:var(--ink-2);max-width:36ch}
:where(#main) .swarm-detail{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--muted-band);max-width:42ch}
:where(#main) .swarm .more{margin-top:6px}
/* the second layer of a row: real client work, quieter than the outcome above it */
:where(#main) .swarm-work{border-top:1px solid var(--rule);padding-top:20px}
:where(#main) .swarm-work h3{font:600 13.5px/1.3 var(--sans);letter-spacing:.01em;color:var(--muted-band)}
:where(#main) .work{display:grid;row-gap:12px;margin-top:12px}
:where(#main) .work li{font-size:15px;line-height:1.5;color:var(--text-2);max-width:62ch}
:where(#main) .work b{font-weight:600;color:var(--ink)}
@media(min-width:900px){
  :where(#main) .swarm{grid-template-columns:minmax(0,11fr) minmax(0,10fr);column-gap:clamp(36px,5vw,72px);align-items:center}
  :where(#main) .swarm{row-gap:clamp(34px,3.6vw,48px)}
  :where(#main) .swarm-work{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);column-gap:clamp(24px,3vw,40px);padding-top:22px}
  :where(#main) .swarm-work h3{padding-top:2px}
  :where(#main) .work{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,40px);margin-top:0}
}

/* the sheet every picture sits on */
:where(#main) .pic{position:relative;margin:0}
:where(#main) .sheet{position:relative;background:var(--paper-hi);border-radius:10px;padding:clamp(18px,2.4vw,26px);min-height:clamp(268px,24vw,312px);display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 0 0 1px rgba(30,23,16,.07),0 1px 2px rgba(30,23,16,.07),0 30px 60px -36px rgba(30,23,16,.42);font-family:var(--sans);overflow:hidden}
:where(#main) .pic-tag{margin-top:12px;font-size:13px;color:var(--muted-band);text-align:right}
:where(#main) .sheet .bar{display:block;height:11px;border-radius:6px;background:#E6DFD3;width:var(--w,60%)}
:where(#main) .sheet .tk{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* a scene runs when its figure gets .is-run. .is-armed holds it on its first frame until then.
   With neither class (no script, reduced motion) every scene shows its last frame. */
:where(#main) .pic.is-armed *,:where(#main) .pic.is-armed *::before,:where(#main) .pic.is-armed *::after{animation-play-state:paused !important}
@keyframes p-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes p-out{from{opacity:1}to{opacity:0}}
@keyframes p-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}

/* Grow revenue: this week's report card, two columns of results */
:where(#main) .rep-h{font:600 26px/1.1 var(--serif);letter-spacing:-.02em;padding-bottom:14px;border-bottom:1px solid var(--rule-strong)}
:where(#main) .rep-w{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;padding:15px 0 16px;border-bottom:1px solid var(--rule-strong)}
:where(#main) .rep-w .rep-g{margin-bottom:9px}
:where(#main) .rep-w .rep-s{grid-column:2;grid-row:1 / span 2}
:where(#main) .rep-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(16px,2.4vw,28px);margin-top:16px}
:where(#main) .rep-g{font:600 16px/1.3 var(--sans);color:var(--ink);margin-bottom:10px}
:where(#main) .rep-t{display:grid;row-gap:10px;padding:14px 0 15px;border-top:1px solid var(--rule)}
:where(#main) .rep-s{display:flex;align-items:center;gap:10px;min-height:32px}
:where(#main) .rep-s .mk{position:relative;width:32px;height:32px;flex:none}
:where(#main) .rep-s .nf{position:absolute;inset:0;border-radius:50%;border:2px dashed #8C8377;opacity:0}
:where(#main) .rep-s .ok{position:absolute;inset:0;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center}
:where(#main) .rep-s .fd{font:600 19px/1 var(--sans);color:var(--ink)}
:where(#main) .rep-t .fix{font-size:15px;line-height:1.2;color:var(--muted)}
:where(#main) .pic-grow.is-armed .fix,:where(#main) .pic-grow.is-run .fix{animation:p-in .35s ease var(--d) both}
:where(#main) .pic-grow.is-armed .nf,:where(#main) .pic-grow.is-run .nf{opacity:1;animation:p-out .2s ease calc(var(--d) + .5s) both}
:where(#main) .pic-grow.is-armed .ok,:where(#main) .pic-grow.is-run .ok{animation:p-pop .45s var(--ease-out) calc(var(--d) + .55s) both}
:where(#main) .pic-grow.is-armed .fd,:where(#main) .pic-grow.is-run .fd{animation:p-in .35s ease calc(var(--d) + .6s) both}

/* Improve efficiency: two drafts approved in turn, then a payment matched without being asked */
:where(#main) .apv{gap:0;justify-content:space-between}
:where(#main) .apv-r{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;column-gap:16px;flex:1;border-bottom:1px solid var(--rule);padding:10px 0}
:where(#main) .apv-r:nth-last-child(2){border-bottom:0}
:where(#main) .apv .doc b{display:block;font:600 18px/1.2 var(--sans);margin-bottom:10px}
:where(#main) .apv .doc .bar + .bar{margin-top:7px}
:where(#main) .apv .act{position:relative;display:flex;justify-content:flex-end;align-items:center;height:36px}
:where(#main) .apv .ap{position:absolute;right:0;top:-2px;display:flex;align-items:center;justify-content:center;width:100px;height:40px;border-radius:3px;background:var(--ink);color:#fff;font:600 15px/1 var(--sans);opacity:0}
:where(#main) .apv .sent{display:inline-flex;align-items:center;gap:7px;font:600 18px/1 var(--sans);color:var(--ink)}
:where(#main) .apv .mt{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff}
:where(#main) .apv .cursor{position:absolute;right:26px;top:83.3%;width:26px;height:26px;margin-top:2px;opacity:0;fill:var(--ink);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(30,23,16,.3))}
@keyframes ap-press{0%,100%{transform:none}50%{transform:scale(.93)}}
@keyframes ap-go{0%{opacity:1;transform:none}60%{opacity:1;transform:scale(.93)}100%{opacity:0;transform:scale(.93)}}
@keyframes cur{0%{top:118%;opacity:0}11%{opacity:1}17%,24%{top:22%;opacity:1}42%,52%{top:49.5%;opacity:1}68%,100%{top:60%;opacity:0}}
:where(#main) .pic-eff.is-armed .ap,:where(#main) .pic-eff.is-run .ap{opacity:1;animation:ap-go .3s ease var(--d) both}
:where(#main) .pic-eff.is-armed .sent,:where(#main) .pic-eff.is-run .sent{animation:p-pop .45s var(--ease-out) calc(var(--d) + .3s) both}
:where(#main) .pic-eff.is-armed .apv-m .doc b,:where(#main) .pic-eff.is-run .apv-m .doc b{animation:p-in .4s ease var(--d) both}
:where(#main) .pic-eff.is-armed .mt,:where(#main) .pic-eff.is-run .mt{animation:p-pop .45s var(--ease-out) calc(var(--d) + .2s) both}
:where(#main) .pic-eff.is-armed .cursor,:where(#main) .pic-eff.is-run .cursor{animation:cur 3.9s cubic-bezier(.5,0,.2,1) both}

/* Manage risk: one change, checked, checked again, live */
:where(#main) .flow{justify-content:center;gap:clamp(34px,4vw,46px)}
:where(#main) .flow-doc{align-self:center;width:74%;border:1px solid var(--rule);border-radius:8px;padding:18px 20px;display:grid;gap:10px;background:#fff}
:where(#main) .flow-doc .chg{height:16px;border-radius:4px;background:var(--ink)}
:where(#main) .flow-track{position:relative;padding-top:2px}
:where(#main) .flow-track ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
:where(#main) .flow-track li{display:grid;justify-items:center;row-gap:11px;text-align:center;font:600 15px/1.2 var(--sans);color:var(--ink)}
:where(#main) .flow .dot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff}
:where(#main) .flow .dot .tk{width:15px;height:15px}
/* arrival: the last stop wears a ring */
:where(#main) .flow .is-live .dot{box-shadow:0 0 0 4px var(--paper-hi),0 0 0 6px var(--ink)}
:where(#main) .flow-line{position:absolute;left:12.5%;right:12.5%;top:15px;height:2px;background:var(--rule-strong)}
:where(#main) .flow-fill{position:absolute;inset:0;background:var(--ink);transform-origin:0 50%}
:where(#main) .flow-tok{position:absolute;z-index:2;left:87.5%;top:5px;width:22px;height:22px;margin-left:-11px;border-radius:6px;background:var(--job);box-shadow:0 0 0 3px var(--paper-hi);opacity:0}
@keyframes tok{0%{left:12.5%;opacity:0}6%{left:12.5%;opacity:1}28%,38%{left:37.5%;opacity:1}58%,68%{left:62.5%;opacity:1}88%,94%{left:87.5%;opacity:1}100%{left:87.5%;opacity:0}}
@keyframes fill{0%,6%{transform:scaleX(0)}28%,38%{transform:scaleX(.3333)}58%,68%{transform:scaleX(.6667)}88%,100%{transform:scaleX(1)}}
@keyframes dot-on{0%{background:var(--paper-hi);box-shadow:inset 0 0 0 2px var(--rule-strong);color:transparent}100%{background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);color:#fff}}
@keyframes live-on{0%{background:var(--paper-hi);box-shadow:inset 0 0 0 2px var(--rule-strong),0 0 0 4px var(--paper-hi),0 0 0 6px transparent}100%{background:var(--ink);box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px var(--paper-hi),0 0 0 6px var(--ink)}}
@keyframes chg{0%,85%{background:var(--job)}100%{background:var(--ink)}}
:where(#main) .pic-risk.is-armed .flow-tok,:where(#main) .pic-risk.is-run .flow-tok{animation:tok 3.9s cubic-bezier(.5,0,.3,1) both}
:where(#main) .pic-risk.is-armed .flow-fill,:where(#main) .pic-risk.is-run .flow-fill{animation:fill 3.9s cubic-bezier(.5,0,.3,1) both}
:where(#main) .pic-risk.is-armed .dot,:where(#main) .pic-risk.is-run .dot{animation:dot-on .35s ease var(--d) both}
:where(#main) .pic-risk.is-armed .is-live .dot,:where(#main) .pic-risk.is-run .is-live .dot{animation-name:live-on}
:where(#main) .pic-risk.is-armed .chg,:where(#main) .pic-risk.is-run .chg{animation:chg 3.9s ease both}
@media(max-width:480px){:where(#main) .flow-track li{font-size:13.5px}:where(#main) .flow-doc{width:84%}:where(#main) .rep-s .fd{font-size:17.5px}}

/* =====================================================================
   2b: who leads the swarms
   ===================================================================== */
/* who leads the swarms: type only, with the founder's signature from the home page as its one small detail */
:where(#main) .led{padding:var(--sec) 0}
:where(#main) .led-grid{display:grid;gap:26px}
:where(#main) .led h2{font-size:clamp(30px,3.7vw,46px);line-height:1.05;letter-spacing:-.03em;max-width:13em}
:where(#main) .led-body{font-size:clamp(17.5px,1.5vw,19.5px);line-height:1.5;color:var(--ink-2);max-width:38ch}
:where(#main) .led .more{margin-top:10px}
:where(#main) .led-sig{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:13.5px;letter-spacing:.01em;color:var(--muted)}
@media(min-width:900px){
  :where(#main) .led-grid{grid-template-columns:minmax(0,11fr) minmax(0,10fr);column-gap:clamp(36px,5vw,72px);align-items:start}
  :where(#main) .led-text{padding-top:6px}
}

/* =====================================================================
   3: the film, large. A native player; it never autoplays.
   ===================================================================== */
:where(#main) .film-sec{border-top:1px solid var(--rule);padding:var(--sec) 0}
:where(#main) .film-grid{display:grid;gap:32px;align-items:center}
:where(#main) .film-sec h2{font-size:clamp(30px,4vw,48px);line-height:1.06;letter-spacing:-.028em;max-width:12em}
:where(#main) .film{position:relative;width:100%;max-width:540px}
:where(#main) .film video{display:block;width:100%;height:auto;aspect-ratio:4/5;background:#FAF9F6;border-radius:4px;box-shadow:0 0 0 1px rgba(30,23,16,.12),0 1px 2px rgba(30,23,16,.10),0 34px 64px -34px rgba(30,23,16,.5)}
/* At rest: the poster and one round play control in its middle.
   Native controls arrive on play. The control's words stay for screen readers. */
:where(#main) .film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;display:flex;align-items:center;justify-content:center;width:76px;height:76px;padding:0 0 0 5px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;box-shadow:0 0 0 7px rgba(255,253,249,.82),0 16px 34px -10px rgba(30,23,16,.6);transition:background .18s ease}
:where(#main) .film-play:hover{background:#3A2F25}
:where(#main) .film-play:active{transform:translate(-50%,-50%) scale(.97)}
:where(#main) .film-play:focus-visible{outline:2px solid var(--ink);outline-offset:10px}
:where(#main) .film-play svg{width:28px;height:28px;fill:currentColor}
:where(#main) .film-play span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:where(#main) .film.is-idle video{cursor:pointer}
@media(min-width:900px){
  :where(#main) .film-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,6vw,88px)}
  :where(#main) .film{justify-self:end;max-width:min(540px,calc((100vh - 120px) * .8))}
}

/* =====================================================================
   4: proof. The home hero's agent run-log panel (colours, faces and row grammar from home.html's .con), compact.
   ===================================================================== */
:where(#main) .proof{border-top:1px solid var(--rule);padding:var(--sec) 0}
:where(#main) .proof-in{text-align:center}
:where(#main) .proof .con{max-width:700px;margin-left:auto;margin-right:auto}
:where(#main) .proof-cap{font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--ink-2);max-width:30em;margin:0 auto;text-wrap:balance}
:where(#main) .proof-total{margin-top:clamp(26px,3vw,36px);font:600 clamp(30px,4.6vw,58px)/1.06 var(--serif);letter-spacing:-.03em;text-wrap:balance}
:where(#main) .con{--con-bg:#0E1315;--con-line:#28353A;--con-mut:#7C918B;--con-txt:#C9DAD5;--con-ok:#54E08D;--con-amber:#F2B13D;--con-cyan:#58C9D6;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  margin-top:28px;text-align:left;background:var(--con-bg);border:1px solid #1C2629;border-radius:8px;overflow:hidden;font-family:var(--mono);
  box-shadow:0 1px 2px rgba(30,23,16,.10),0 28px 56px -30px rgba(30,23,16,.55)}
:where(#main) .con ::selection{background:#28353A;color:#fff}
:where(#main) .con .bar{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--con-line);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--con-mut)}
:where(#main) .con .bar .t{margin-left:auto;color:var(--con-amber);font-variant-numeric:tabular-nums}
:where(#main) .con .log{padding:12px 16px 14px;font-size:13.5px;line-height:1.45;color:var(--con-txt)}
:where(#main) .con .ln{display:flex;align-items:flex-start;gap:7px;padding:3px 0}
:where(#main) .con .ts{color:var(--con-mut);font-variant-numeric:tabular-nums;flex:none}
:where(#main) .con .sg{width:13px;height:13px;flex:none;display:block;margin-top:.22em}
:where(#main) .con .tag{flex:none;min-width:68px;padding-right:5px;letter-spacing:.02em}
:where(#main) .con .tag.sig,:where(#main) .con .ln:has(.tag.sig) .sg{color:var(--con-cyan)}
:where(#main) .con .tag.ver,:where(#main) .con .ln:has(.tag.ver) .sg{color:var(--con-ok)}
:where(#main) .con .tag.grd,:where(#main) .con .ln:has(.tag.grd) .sg{color:var(--con-amber)}
:where(#main) .con .tag.dft{color:var(--con-txt)}
:where(#main) .con .msg{color:#B7C7C1;min-width:0}
@keyframes sgIn{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
/* Default (no script, reduced motion) is the finished log. Script arms it while it is off screen, then the six
   lines land in turn. Armed lines stay on the panel, dimmed, so nothing is ever blank. */
:where(#main) .con.is-armed .ln{opacity:.3}
:where(#main) .con.is-run .ln{transition:opacity .3s ease calc(var(--i) * .45s)}
:where(#main) .con.is-run .ln .sg{animation:sgIn .5s ease-out both;animation-delay:calc(var(--i) * .45s)}
@media(max-width:480px){:where(#main) .con .log{font-size:13px;padding:10px 12px 12px}:where(#main) .con .ln{gap:6px}:where(#main) .con .tag{min-width:60px;padding-right:2px}}

/* =====================================================================
   5: who we work with, and the data. One calm screen.
   ===================================================================== */
:where(#main) .who-sec{padding:var(--sec) 0}
:where(#main) .who-sec h2{font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.026em}
:where(#main) .ind-lead{margin-top:24px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:64ch}
:where(#main) .ind-lead a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hover-line);text-underline-offset:3px;padding:13px 0}
:where(#main) .ind-lead a:hover{text-decoration-color:var(--ink)}
:where(#main) .figs{margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--rule-strong);display:grid}
:where(#main) .figs li{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
:where(#main) .figs b{font:600 clamp(34px,4.2vw,50px)/1 var(--serif);letter-spacing:-.035em;font-variant-numeric:lining-nums tabular-nums}
:where(#main) .figs b i{font-style:normal;font-size:.44em;letter-spacing:0;color:var(--muted);vertical-align:.92em;margin-left:2px}
:where(#main) .figs span{font-size:15.5px;color:var(--text-2)}
@media(min-width:860px){
  :where(#main) .figs{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px}
  :where(#main) .figs li{border-bottom:0;padding:22px 0 0;flex-direction:column;gap:6px}
}

/* =====================================================================
   6: close
   ===================================================================== */
:where(#main) .close{background:var(--band);border-top:1px solid var(--rule);padding:calc(var(--sec) + 8px) 0;text-align:center}
:where(#main) .close h2{font-size:clamp(32px,5vw,62px);line-height:1.04;letter-spacing:-.032em;max-width:15em;margin:0 auto}
:where(#main) .close .btn{margin-top:clamp(28px,3.4vw,40px)}

/* ---------- phone ---------- */

@media(max-width:719px){
  :where(#main) .hero-copy .sub{margin-top:16px;font-size:16.5px;line-height:1.52}
  :where(#main) .open .btn{margin-top:22px}
  .anim :where(#main) .open-art{margin-top:12px}
}
@media(max-width:420px){
  :where(#main) .open .btn,:where(#main) .close .btn{width:100%;justify-self:stretch}
}

@media(prefers-reduced-motion:reduce){
  :where(#main) *,:where(#main) *::before,:where(#main) *::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;transition-delay:0s !important}
}
@media print{
  :where(#main) .stage-toggle,:where(#main) .open-replay{display:none !important}
  :where(#main) .con.is-armed .ln{opacity:1}
}

/* v11: why a swarm, and pillar names as the row titles */
:where(#main) .have{padding:clamp(72px,9vw,128px) 0 clamp(56px,7vw,96px);border-top:1px solid var(--rule)}
:where(#main) .have-grid{display:grid;gap:clamp(28px,4vw,56px)}
:where(#main) .have h2{font:600 clamp(30px,4.4vw,52px)/1.06 var(--serif);letter-spacing:-.03em;max-width:15em;text-wrap:balance}
:where(#main) .have-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
:where(#main) .have-list li{display:grid;gap:6px;padding:20px 0;border-top:1px solid var(--rule)}
:where(#main) .have-list li:last-child{border-bottom:1px solid var(--rule)}
:where(#main) .have-list b{font:600 clamp(20px,2vw,24px)/1.15 var(--serif);letter-spacing:-.015em}
:where(#main) .have-list span{font-size:17px;line-height:1.5;color:var(--ink-2);max-width:60ch}
@media (min-width:900px){
  :where(#main) .have-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
  :where(#main) .have h2{position:sticky;top:96px}
  :where(#main) .have-list li{grid-template-columns:minmax(0,170px) minmax(0,1fr);column-gap:28px;align-items:baseline;padding:22px 0}
}
:where(#main) .trio{margin-bottom:14px}
:where(#main) .swarm h2.swarm-out{margin-top:0;font:600 clamp(34px,5vw,54px)/1.04 var(--serif);letter-spacing:-.03em;max-width:13em}
:where(#main) .swarm-does{font-size:18px;max-width:44ch}
@media (min-width:960px){.anim :where(#main) .open-line[data-beat="b"]{font-size:.8em;line-height:1.06}}

/* v13: what we do under each pillar, same lines as the capability sheet */
:where(#main) .does{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:20px}
:where(#main) .does h3{font:600 13px/1 var(--sans);letter-spacing:.01em;color:var(--muted-band);margin-bottom:14px}
:where(#main) .does ul{list-style:none;margin:0;padding:0;display:grid;gap:14px 28px}
:where(#main) .does li{display:grid;gap:4px;align-content:start}
:where(#main) .does b{font:600 16px/1.25 var(--sans, inherit);color:var(--ink)}
:where(#main) .does span{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
@media (min-width:640px){:where(#main) .does ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){:where(#main) .does ul{grid-template-columns:repeat(5,minmax(0,1fr));gap:0 26px}:where(#main) .does li{padding-top:12px;border-top:2px solid var(--ink)}}

/* v14: the "what our swarms have" section as a dark spec board */
:where(#main) .have{background:var(--ink);color:#F5F2EC;border-top:0;padding:clamp(72px,9vw,128px) 0}
:where(#main) .have h2{position:static;color:#FFFDF9;max-width:17em;font:600 clamp(30px,4.4vw,52px)/1.06 var(--serif);letter-spacing:-.03em;text-wrap:balance}
:where(#main) .hv-grid{display:grid;gap:16px;margin-top:clamp(32px,4vw,56px)}
:where(#main) .hv{background:rgba(255,253,249,.045);border:1px solid rgba(255,253,249,.16);border-radius:16px;padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:14px;min-width:0}
:where(#main) .hv h3{font:600 clamp(24px,2.4vw,30px)/1.1 var(--serif);letter-spacing:-.02em;color:#FFFDF9}
:where(#main) .hv-lead{font-size:16.5px;line-height:1.5;color:#D9D0C2;max-width:58ch}
:where(#main) .hv-foot{font-size:14px;line-height:1.4;color:#B9AE9F;margin-top:auto}
:where(#main) .hv-chips{display:grid;gap:14px;margin:6px 0 0}
:where(#main) .hv-chips>div{display:grid;gap:8px}
:where(#main) .hv-chips dt{font:600 13px/1.2 var(--sans);letter-spacing:.01em;color:#B9AE9F}
:where(#main) .hv-chips dd{margin:0}
:where(#main) .hv-chips ul,:where(#main) .hv-roles,:where(#main) .hv-stats,:where(#main) .hv-pipe,:where(#main) .hv-sched{list-style:none;margin:0;padding:0}
:where(#main) .hv-chips ul{display:flex;flex-wrap:wrap;gap:8px}
:where(#main) .hv-chips li{font:500 14px/1 var(--sans);color:#FFFDF9;border:1px solid rgba(255,253,249,.3);border-radius:999px;padding:9px 13px;white-space:nowrap}
:where(#main) .hv-stats{display:grid;gap:14px;margin-top:4px}
:where(#main) .hv-stats li{display:grid;gap:2px;padding-top:14px;border-top:1px solid rgba(255,253,249,.16)}
:where(#main) .hv-stats b{font:600 clamp(40px,4.6vw,56px)/1 var(--serif);letter-spacing:-.035em;color:#FFFDF9}
:where(#main) .hv-stats span{font-size:15px;line-height:1.35;color:#D9D0C2}
:where(#main) .hv-roles{display:grid;margin-top:auto;padding-top:8px}
:where(#main) .hv-roles li{display:grid;grid-template-columns:22px 5.6em 1fr;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,253,249,.16)}
:where(#main) .hv-roles b{font:600 15px/1.2 var(--sans);color:#FFFDF9}
:where(#main) .hv-roles span{font-size:14px;line-height:1.3;color:#B9AE9F}
:where(#main) .hv-roles svg .ms{fill:none}
:where(#main) .hv-roles svg{--gc:#F5F2EC;--gf:transparent;color:#F5F2EC;flex:none}
:where(#main) .hv-roles svg.is-hot{--gc:#F0703A;color:#F0703A}
:where(#main) .hv-pipe{display:grid;gap:0;margin-top:auto;padding-top:8px}
:where(#main) .hv-pipe li{display:flex;align-items:baseline;gap:10px;padding:10px 0 10px 22px;position:relative;border-top:1px solid rgba(255,253,249,.16)}
:where(#main) .hv-pipe li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;border-radius:50%;border:1.5px solid #F5F2EC}
:where(#main) .hv-pipe li.is-live::before{background:#F0703A;border-color:#F0703A}
:where(#main) .hv-pipe b{font:600 15.5px/1.2 var(--sans);color:#FFFDF9}
:where(#main) .hv-pipe span{font-size:14px;color:#B9AE9F}
:where(#main) .hv-sched{display:grid;margin-top:auto;padding-top:8px}
:where(#main) .hv-sched li{display:grid;grid-template-columns:6.6em 1fr;gap:12px;padding:10px 0;border-top:1px solid rgba(255,253,249,.16);align-items:baseline}
:where(#main) .hv-sched b{font:600 15px/1.2 var(--sans);color:#FFFDF9}
:where(#main) .hv-sched span{font-size:14.5px;line-height:1.35;color:#D9D0C2}
@media (min-width:900px){
  :where(#main) .hv-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  :where(#main) .hv-conn{grid-column:span 8}:where(#main) .hv-data{grid-column:span 4}
  :where(#main) .hv-depth,:where(#main) .hv-qual,:where(#main) .hv-stay{grid-column:span 4}
  :where(#main) .hv-chips>div{grid-template-columns:8.5em 1fr;align-items:baseline;gap:12px}
}
:where(#main) .does-gov{border-top:0;padding-top:4px}

@media (min-width:1000px){:where(#main) .does-gov ul{grid-template-columns:repeat(4,minmax(0,1fr))}}

:where(#main) .hv-note{font-size:13.5px;line-height:1.4;color:#B9AE9F;margin-top:10px}

/* v18: introduce Huxley before the claim about him */
:where(#main) .led-head{display:grid;gap:22px}
:where(#main) .led-who{display:flex;align-items:center;gap:16px;margin:0}
:where(#main) .led-who img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--rule-strong)}
:where(#main) .led-who figcaption{display:grid;gap:3px}
:where(#main) .led-who b{font:600 19px/1.2 var(--serif);letter-spacing:-.01em;color:var(--ink)}
:where(#main) .led-who span{font-size:14.5px;color:var(--muted)}
:where(#main) .led-body+.led-body{margin-top:14px}