/* ==========================================================================
   OptiAI Tech — visual standard v4
   Register: warm, spacious, rounded. Soft neutral ground, white cards on
   generous radii, one saturated accent used sparingly, large geometric
   headings against quiet body text.

   This supersedes v3 ("engineering consultancy": flat colour, hairline rules,
   3px radii). v3's ban on pill buttons and eyebrow chips was lifted by a
   director on 2026-09-07 in favour of this direction. The bans that remain,
   because they are what made an earlier version read as machine-made:

     - multi-stop gradients as decoration, and blurred colour blobs
     - a wall of identical shadowed cards in a 3-across grid
     - centred everything: heading, subhead and body all stacked mid-page
     - decoration that carries no information

   The difference between this and that is discipline, not restraint: one
   accent, one radius scale, one grid, and photography that is real.

   Sections
     1  fonts          8  offerings          15  forms
     2  tokens         9  numbered accordion 16  footer
     3  base          10  bands              17  inner-page panels
     4  layout        11  ladder             18  stage stack
     5  type          12  dark sections      19  motion
     6  controls      13  photography        20  responsive
     7  nav           14  cards and facts
   ========================================================================== */

/* ---------- 1. Fonts ---------- */
/* Self-hosted. Google's CDN meant two preconnects plus a render-blocking
   stylesheet, and it put a third-party request in front of the first paint.
   Both files are variable, so one file per family covers every weight. */
@font-face{
  font-family:"Sora";src:url("fonts/sora-var.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Inter";src:url("fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- 2. Tokens ---------- */
:root{
  /* Ground is never pure white at page level. The warm grey is what makes the
     white cards read as objects sitting on something. */
  --wash:#F5F7F4;      /* page ground */
  --wash-2:#E9EBE8;    /* alternating band */
  --tile:#E3E5E2;      /* grey surface: hero shell, bento tiles */
  --paper:#FEFFFD;     /* white card on a grey band */
  --deep:#14181A;
  --deep-2:#1D2225;

  /* Ink. --ink-3 is the floor-tested tertiary: anything lighter fails 4.5:1
     against --wash, which is where most of it sits. */
  --ink:#15191B;
  --ink-2:#4C5457;
  --ink-3:#5C6467;
  --on-deep:#FFFFFF;
  --on-deep-2:#B9C2C5;

  /* Brand blue stays the primary action colour. --pop is the accent doing
     what lime does in the reference: badges, the active nav pill, one hero
     stat. Dark text on it, never light. */
  --brand:#0F4C9E;
  --brand-dark:#0A376F;
  --brand-wash:#E8F0FB;
  --pop:#CBD2FF;       /* light periwinkle, dark text only */
  --pop-deep:#4B47C6;  /* the same hue at a weight that clears 4.5:1 on the wash */

  --line:#DCE0DC;
  --line-2:#BFC6BF;
  --line-deep:#2E3437;

  --display:"Sora",-apple-system,"Segoe UI",system-ui,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",system-ui,sans-serif;

  --r:20px;         /* cards and media */
  --r-sm:12px;      /* inputs, small tiles */
  --r-lg:28px;      /* the hero shell */
  --pill:999px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --gut:clamp(20px,3.4vw,44px);
  --max:1480px;
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--wash);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
figure{margin:0}       /* the UA's 1em 40px stops a full-bleed band reaching the edge */
[hidden]{display:none!important}  /* .field is display:flex, which outranks the UA rule */
img{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.022em;line-height:1.08}
p{margin:0}
a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brand-dark)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}

.skip{
  position:absolute;left:-9999px;top:8px;z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:var(--pill);
}
.skip:focus{left:16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 4. Layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(56px,7vw,96px) 0}
.sec--wash2{background:var(--wash-2)}
.sec--deep{background:var(--deep);color:var(--on-deep)}
.sec--deep h2,.sec--deep h3{color:var(--on-deep)}
.sec--deep p{color:var(--on-deep-2)}

/* The section head: a chip, a large heading, and an optional note set small
   and to the right. The asymmetry is the point — heading over subhead over
   body, all centred, is the single most machine-made shape there is, which is
   why this is left-weighted instead. */
.head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);
  grid-template-areas:"label label" "title note";
  column-gap:clamp(20px,4vw,64px);row-gap:clamp(22px,2.4vw,34px);
  align-items:end;margin-bottom:clamp(32px,5vw,56px);
}
.head>.chip{grid-area:label;margin-bottom:0}
.head>div:first-of-type{grid-area:title}
.head>p{grid-area:note}
.head--solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "title"}
.head h2{font-size:clamp(26px,3.4vw,43px)}
.head-note{color:var(--ink-2);font-size:15.5px;line-height:1.6}
.head-note b{color:var(--ink);font-weight:600}

/* The section label. Was a pill with a dot; now it is the label set small and
   wide over a hairline that runs the full width of the section. The rule is
   what makes it read as a section opening rather than a tag, and it only works
   if the label is a block -- as an inline pill the rule stopped at the words.

   Still one per section. */
.chip{
  display:block;width:100%;background:none;border:0;border-radius:0;
  padding:0 0 13px;margin:0 0 24px;border-bottom:1px solid var(--line);
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);
}
.chip::before{display:none}
.chip--pop{color:var(--pop-deep);border-bottom-color:var(--pop-deep)}
.sec--deep .chip,.hero .chip{color:#AAB4B7;border-bottom-color:rgba(255,255,255,.22)}
.hero .chip--pop{color:var(--pop);border-bottom-color:rgba(203,210,255,.5)}

/* Two real columns, top-aligned, with the section label as a full-width row
   above both. .head is deliberately lopsided and bottom-aligned for a heading
   and a short note; a form or body copy in its 320px right column came out as
   a strip floating above the heading. */
.duo{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  grid-template-areas:"label label" "title body";
  column-gap:clamp(28px,4vw,72px);row-gap:clamp(22px,2.4vw,34px);
  align-items:start;
}
.duo>.chip{grid-area:label;margin-bottom:0}
.duo>div:first-of-type{grid-area:title}
.duo>div:last-of-type{grid-area:body}
.duo h2{font-size:clamp(24px,2.7vw,35px)}

/* ---------- 5. Type ---------- */
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.sec--deep .lead{color:var(--on-deep-2)}
.small{font-size:14.5px;color:var(--ink-3);line-height:1.6}

/* The mixed-weight headline: dark, muted, dark. Makes a long line read as
   three short ones, and adds craft for the price of one span. */
.mute{color:var(--ink-3)}
.sec--deep .mute{color:#7C888C}

/* ---------- 6. Controls ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  border-radius:var(--pill);padding:13px 15px 13px 25px;
  font-size:15.5px;font-weight:500;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{background:#000;border-color:#000;color:#fff;transform:translateY(-1px)}
/* the circular icon well, straight from the reference's Find Your Drone */
.btn .ico{
  width:29px;height:29px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;flex:none;transition:transform .25s var(--ease);
}
.btn:hover .ico{transform:translateX(2px)}
.btn .ico svg{width:13px;height:13px;display:block}
.btn--brand{background:var(--brand);border-color:var(--brand)}
.btn--brand:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn--brand .ico{color:var(--brand)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);padding:13px 25px}
.btn--ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--ink)}
.sec--deep .btn--ghost{color:#fff;border-color:rgba(255,255,255,.32)}
.sec--deep .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn--pop{background:var(--pop);border-color:var(--pop);color:var(--ink)}
.btn--pop:hover{background:#B4BDFF;border-color:#B4BDFF;color:var(--ink)}
.btn--pop .ico{background:var(--ink);color:var(--pop)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 7. Nav ---------- */
/* A floating pill bar rather than a full-width band. It sits on the page
   rather than capping it, which is what keeps the top open instead of
   administrative. */
.top{position:sticky;top:0;z-index:60;padding:14px 0;background:var(--wash)}
.top-in{
  display:flex;align-items:center;gap:18px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--pill);padding:9px 9px 9px 22px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);flex:none}
/* One lockup, header and footer alike, at the sizes the live site uses: a 32px
   mark beside a 120px-wide name-and-tagline wordmark. Two different brand
   treatments on one page is what read as broken.

   The tagline is 31 of the artwork's 222 pixels, so at 120px wide it renders
   around 3px and is decorative rather than readable. That is how the brand is
   presented on the live site. If it ever needs to be legible the lockup has to
   be about 52px tall, which makes the brand ~370px and forces the desktop nav
   to collapse at 1180px -- the reason that is written down here. */
.brand-mark{height:32px;width:auto}
.brand-word{width:120px;height:auto}

/* The wordmark is near-black artwork, so it needs a light plate on the dark
   footer rather than a filter -- recolouring supplied artwork is not ours to do. */
.foot .brand{display:inline-flex;align-items:center;gap:11px;background:#FEFFFD;
             border-radius:var(--r-sm);padding:10px 14px;max-width:100%}

.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a,.nav button{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:var(--pill);border:0;background:transparent;
  color:var(--ink-2);font-size:15px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.nav a:hover,.nav button:hover{background:var(--wash);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--pop);color:var(--ink);font-weight:600}
.nav .caret{width:9px;height:9px;flex:none;transition:transform .2s var(--ease)}
.top .btn{padding:10px 11px 10px 21px;font-size:15px;flex:none}
.top .btn .ico{width:26px;height:26px}

.burger{
  display:none;margin-left:auto;width:44px;height:44px;flex:none;
  border:1px solid var(--line);border-radius:var(--pill);background:var(--paper);
  cursor:pointer;padding:0;place-items:center;align-content:center;justify-items:center;
}
.burger{gap:5px;flex-direction:column}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px}

.has-menu{position:relative}
.menu{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:290px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:8px;
  box-shadow:0 18px 44px -18px rgba(20,24,26,.28);
  opacity:0;visibility:hidden;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.has-menu:hover .menu,.has-menu:focus-within .menu,.has-menu[data-open="true"] .menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.has-menu:hover .caret,.has-menu[data-open="true"] .caret{transform:rotate(180deg)}
.menu a{
  display:block;padding:12px 14px;border-radius:var(--r-sm);
  color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;
}
.menu a span{display:block;color:var(--ink-3);font-weight:400;font-size:13.5px;margin-top:2px;line-height:1.5}
.menu a:hover{background:var(--wash);color:var(--ink)}

/* ---------- 8. Hero ---------- */
/* Full-bleed photograph with the copy laid over it, the way TCS does a section
   hero -- not a picture parked in a column beside the words. The shell keeps
   its radius because that is this site's shape, but the image fills it.

   Everything here is white on a photograph, so the scrim is load-bearing and
   every run of hero text is measured by review/test-over-image.js. The scrim is
   left-weighted rather than flat: a flat one dark enough for the text kills the
   picture, which is the thing it exists to show. */
.hero{padding:clamp(16px,3vw,32px) 0 clamp(12px,2vw,20px)}
.hero-shell{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--deep);color:#fff;
  min-height:clamp(400px,36vw,520px);
  display:flex;align-items:center;
  padding:clamp(30px,4.2vw,72px);
}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,9,11,.94) 0%,rgba(6,9,11,.86) 34%,
                    rgba(6,9,11,.58) 60%,rgba(6,9,11,.3) 82%,rgba(6,9,11,.24) 100%),
    linear-gradient(180deg,rgba(6,9,11,.3),rgba(6,9,11,0) 34%);
}
.hero-copy{position:relative;z-index:2;width:100%;max-width:min(58ch,62%)}

.hero h1{
  font-size:clamp(30px,3.1vw,50px);line-height:1.08;letter-spacing:-.022em;
  font-weight:500;max-width:17ch;color:#fff;
}
.hero h1 .w{display:inline-block}
.hero h1#page-h{font-size:clamp(27px,2.5vw,40px);max-width:20ch;letter-spacing:-.02em;font-weight:500}
.hero-sub{margin-top:20px;max-width:50ch;color:#D8DEE0;font-size:clamp(15.5px,1.4vw,18px)}
.hero .btn-row{margin-top:30px}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.34)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.hero .notice{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);border-left-color:var(--pop);color:#DCE2E4}
.hero .lead{color:#D8DEE0}
/* the muted tail of the statement was --ink-3, which is dark grey on a dark
   photograph */
.hero h1 .mute{color:#9FA9AC}

/* the stage deck is a light card sitting inside a dark shell: every run of
   text in it has to state its own colour or it inherits white on white */
.hero-aside .slab{color:var(--ink)}
.hero-aside .slab .slab-t{color:var(--ink)}
.hero-aside .slab .stack-title{color:var(--ink)}
.hero-aside .slab p:not(.slab-t):not(.stack-title){color:var(--ink-2)}
/* and the cards behind the front one have to drop away faster here, or three
   translucent rectangles pile up on the photograph */
.hero-aside .slab[data-at="1"]{opacity:.46}
.hero-aside .slab[data-at="2"]{opacity:.26}
.hero-aside .slab[data-at="3"]{opacity:.13}

/* an aside -- the stage deck on What we do -- sits to the right of the copy
   rather than replacing the photograph */
.hero-aside{position:relative;z-index:2;flex:1;min-width:0;display:none}
.hero-shell--aside .hero-copy{max-width:min(46ch,50%)}
.hero-shell--aside .hero-aside{display:block}

.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.stat{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;display:flex;flex-direction:column;gap:4px;
}
.stat--pop{background:var(--pop);border-color:transparent}
.stat b{font-family:var(--display);font-size:clamp(17px,1.35vw,20px);font-weight:600;letter-spacing:-.022em;line-height:1.25}
.stat span{font-size:14px;color:var(--ink-2);line-height:1.5}
.stat--pop span{color:#2A2C63}

/* ---------- 8b. The ascent ---------- */
/* The hero diagram: four stages climbing left to right, joined by a lit track.
   Built in CSS and one SVG line rather than placed as an image -- it is crisp
   at any size, it animates, a screen reader gets the list, and it cannot 404.

   Geometry is shared between the track and the cards through --i, so a stage
   sits on the line by construction rather than by a magic number that drifts
   the next time the card padding changes. The line uses
   preserveAspectRatio="none" (it is a straight line, so distortion is
   invisible) with vector-effect so the stroke stays 2px at every width. */
.rise{position:relative;aspect-ratio:8/6;min-height:320px;max-height:520px;width:100%;margin-left:auto;max-width:620px}
.rise--wide{aspect-ratio:16/6.2;max-width:none;margin:0;max-height:none;min-height:340px}
.rise--wide .rise-step{width:22%;left:calc(1% + var(--i) * 25%);bottom:calc(7% + var(--i) * 22%)}
/* Cards of different heights make the staircase look crooked even when
   their bottoms sit exactly on the line, because the eye reads the tops.
   One height fixes what looked like a broken diagonal. */
.rise--wide .rise-card{padding:18px 20px;min-height:172px;display:flex;flex-direction:column}
.rise--wide .rise-d{display:block;margin-top:7px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.rise--wide .rise-step:last-child .rise-d{color:var(--on-deep-2)}
.rise-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rise-line path{fill:none;stroke:var(--pop-deep);stroke-width:3;vector-effect:non-scaling-stroke;opacity:.42}
.rise-line .lit{
  stroke:var(--pop);stroke-width:4;stroke-dasharray:22 178;
  filter:drop-shadow(0 0 5px rgba(127,219,234,.9));opacity:1;
  animation:rise-run 5.2s linear infinite;
}
@keyframes rise-run{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}

.rise-steps{position:absolute;inset:0;list-style:none;margin:0;padding:0}
/* One set of numbers drives everything: a step sits at 1% + 17i across and
   5% + 23.5i up, its node sits on its bottom-left corner, and the SVG track is
   the straight line through those corners. Change a step offset here and the
   path in index.html has to change with it -- they are one geometry. */
.rise-step{
  position:absolute;width:44%;min-width:148px;
  left:calc(1% + var(--i) * 17%);
  bottom:calc(5% + var(--i) * 23.5%);
}
.rise-card{
  display:block;
  background:rgba(254,255,253,.92);border:1px solid rgba(21,25,27,.07);
  border-radius:var(--r-sm);padding:13px 15px;
  box-shadow:0 12px 30px -14px rgba(20,24,26,.3);
  backdrop-filter:blur(3px);
}
.rise-n{
  display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px;
}
.rise-t{display:block;font-family:var(--display);font-size:clamp(15px,1.25vw,19px);font-weight:600;letter-spacing:-.022em}
/* the last stage is the destination, so it is the one that is lit */
.rise-step:last-child .rise-card{background:var(--deep);border-color:var(--deep)}
.rise-step:last-child .rise-n{color:var(--pop)}
.rise-step:last-child .rise-t{color:#fff}
/* the node where each stage meets the track */
.rise-step::after{
  content:"";position:absolute;left:0;bottom:0;
  transform:translate(-50%,50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--pop);border:3px solid var(--tile);
  box-shadow:0 0 0 1.5px var(--pop-deep);
}

/* ---------- 8c. The numbered tiles ---------- */
/* Was one flat slab with a numeral in a column. Now each item is a tile with
   the numeral oversized behind the text and clipped by the tile -- the same
   device as the homepage accordion and at the same scale, so the two read as
   one system rather than as two different ways of numbering a list. */
.plan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.plan-item{
  position:relative;overflow:hidden;
  background:var(--tile);border-radius:var(--r);
  padding:26px 26px 28px;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
.plan-item:hover{background:#DADDD9;transform:translateY(-2px)}
.plan-n{
  position:absolute;right:14px;top:-18px;z-index:0;
  font-family:var(--display);font-size:clamp(64px,5.6vw,86px);font-weight:700;
  line-height:1;letter-spacing:-.055em;color:rgba(21,25,27,.07);
  pointer-events:none;user-select:none;transition:color .25s var(--ease);
}
.plan-item:hover .plan-n{color:rgba(75,71,198,.16)}
.plan-pre{
  position:relative;z-index:1;display:block;font-size:11px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--pop-deep);margin-bottom:8px;
}
.plan-item h3{position:relative;z-index:1;font-size:clamp(17px,1.3vw,19px);margin-bottom:10px;max-width:22ch}
/* A .plan title that is a link -- the 404's route list. It takes the heading's
   ink rather than the brand blue: six blue headings in a slab read as a link
   farm instead of as the same device the rest of the site uses. */
.plan-item h3 a{color:inherit;text-decoration:none}
.plan-item h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.plan-item p{position:relative;z-index:1;font-size:15.5px;color:var(--ink-2);line-height:1.62;max-width:44ch}
.sec--deep .plan-item{background:var(--deep-2)}
.sec--deep .plan-item:hover{background:#252B2E}
.sec--deep .plan-n{color:rgba(255,255,255,.07)}
.sec--deep .plan-item:hover .plan-n{color:rgba(203,210,255,.16)}
.sec--deep .plan-item p{color:var(--on-deep-2)}

/* ---------- 9. Offerings, as a bento ---------- */
/* Heading held left, the tiles travelling right. */
.offers{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2.3fr);gap:clamp(24px,3vw,52px);align-items:start}
.offers-copy h2{font-size:clamp(26px,2.7vw,40px)}
.offers-copy .lead{margin-top:18px;font-size:16px}

/* Grey tiles on the light ground, mixed content, photographs treated as tiles
   rather than as decoration around tiles. The rhythm alternates: text, photo,
   text on one row; text, text, photo on the next, so no column is ever all
   pictures or all prose.

   The reference fills two of these cells with social proof -- a rating and a
   customer count. Those are the cells we cannot copy, so ours carry a
   statement and a capability instead. */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bento-tile{
  background:var(--tile);border-radius:var(--r);padding:clamp(24px,2vw,34px);
  display:flex;flex-direction:column;min-height:250px;
  text-decoration:none;color:inherit;
  transition:background .22s var(--ease),transform .22s var(--ease);
}
a.bento-tile:hover{background:#DADDD9;color:inherit;transform:translateY(-2px)}
.bento-tile h3{font-size:clamp(18px,1.3vw,21px);font-weight:600;margin-bottom:12px}
.bento-tile p{color:var(--ink-2);font-size:15px;line-height:1.6}
.bento-foot{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:10px}
.bento-pill{
  background:var(--ink);color:#fff;border-radius:var(--pill);
  padding:9px 17px;font-size:13px;font-weight:500;
}
.bento-go{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ink)}
.bento-go svg{width:14px;height:14px}
a.bento-tile:hover .bento-go svg{transform:translateX(3px);transition:transform .2s var(--ease)}

/* the display cell: one line set large, the way the reference sets a headline
   figure. Ours is a claim we can stand behind rather than a customer count. */

.bento-photo--wide{grid-column:span 2}
.bento-photo{
  border-radius:var(--r);min-height:250px;
  background-size:cover;background-position:center;
}

/* ---------- 10. Numbered accordion ---------- *//* ---------- 10. Numbered accordion ---------- */
/* The best idea in the reference, and the detail that makes it work is the
   scale: the numeral is TALLER THAN THE ROW and gets clipped by it, so you read
   a band through the middle of the digits rather than a small label. At a size
   that fits inside the row it reads as a bullet and the effect is gone.

   Rows are a fill on a fill -- no borders. The open row differs only in that
   its numeral goes dark; nothing moves. */
.probe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(20px,2.6vw,40px);align-items:start}
.rungs{display:flex;flex-direction:column;gap:12px}
.rung{
  position:relative;background:var(--paper);border:0;
  border-radius:var(--r);overflow:hidden;
}
.rung-btn{
  position:relative;width:100%;display:flex;align-items:center;
  background:transparent;border:0;cursor:pointer;text-align:left;
  padding:26px 30px;min-height:118px;
}
/* out of flow, so its size cannot push the row open */
.rung-n{
  position:absolute;left:34px;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-weight:600;line-height:.78;
  font-size:clamp(66px,5.6vw,104px);letter-spacing:-.055em;
  color:#DFE2DE;pointer-events:none;user-select:none;
  transition:color .3s var(--ease);
}
.rung-t{
  font-family:var(--display);font-size:clamp(16px,1.15vw,18.5px);font-weight:500;
  letter-spacing:-.018em;color:var(--ink-2);line-height:1.28;
  margin-left:clamp(180px,17vw,270px);max-width:34ch;
  transition:color .3s var(--ease);
}
.rung-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.rung-body>div{overflow:hidden}
.rung-body p{
  padding:0 30px 26px;margin-left:clamp(180px,17vw,270px);
  color:var(--ink-2);font-size:15.5px;max-width:46ch;
}
.rung[data-open="true"] .rung-n{color:var(--ink)}
.rung[data-open="true"] .rung-t{color:var(--ink)}
.rung[data-open="true"] .rung-body{grid-template-rows:1fr}
.rung-btn:hover .rung-n{color:#C9CEC8}
.rung[data-open="true"]:hover .rung-n{color:var(--ink)}

.probe-media{position:relative;border-radius:var(--r);overflow:hidden;min-height:100%;background:var(--deep)}
.probe-media .ph{position:absolute;inset:0;background-size:cover;background-position:center}
.probe-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,11,13,.12) 24%,rgba(8,11,13,.7) 58%,rgba(8,11,13,.93))}
.probe-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px}
.probe-cap h3{color:#fff;font-size:clamp(20px,1.7vw,27px);max-width:16ch}
.probe-cap p{color:#D3DADC;font-size:15px;margin-top:10px;max-width:44ch}

/* ---------- 12. Dark sections ---------- */
.vision{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center}
.vision h2{font-size:clamp(24px,3vw,38px)}
.vision-q{
  font-family:var(--display);font-size:clamp(19px,2.1vw,26px);font-weight:600;
  line-height:1.34;letter-spacing:-.03em;color:#fff;
}

/* ---------- 13. Photography ---------- */
/* Figures render a real photograph when the file is present and a designed
   dark panel when it is not, so a missing file never collapses a layout.
   Drop files into assets/ with these exact names. */
.figure{position:relative;border-radius:var(--r);overflow:hidden;background:var(--deep-2);min-height:280px}
.figure .ph{position:absolute;inset:0;background-size:cover;background-position:center}
.figure--office .ph{background-image:url("office.jpg");background-position:center 36%}
.figure--meeting{min-height:clamp(300px,25vw,470px)}
.figure--meeting .ph{background-image:url("meeting.jpg");background-position:center 46%}
.figure figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:46px 22px 20px;color:#fff;font-size:14.5px;
  background:linear-gradient(180deg,transparent,rgba(8,11,13,.5) 42%,rgba(8,11,13,.95));
}

/* a full-bleed photographic band with a two-weight headline over it */
.band{position:relative;min-height:clamp(340px,44vw,520px);display:grid;place-items:center;overflow:hidden;background:var(--deep)}
.band .ph{position:absolute;inset:0;background:url("board.jpg") center/cover no-repeat}
.band::after{content:"";position:absolute;inset:0;background:rgba(8,11,13,.72)}
.band-copy{position:relative;z-index:2;text-align:center;padding:40px var(--gut);max-width:780px}
.band-copy h2{color:#fff;font-size:clamp(26px,4vw,46px);line-height:1.06}
.band-copy h2 em{font-style:normal;font-weight:400;color:#B4C0C3;display:block}
.band-copy p{color:#CFD7D9;margin-top:16px;font-size:16px}

/* ---------- 14. Facts and lists ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts>div{background:var(--paper);padding:22px 24px}
.facts dt{font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--ink-3);margin-bottom:6px}
.facts dd{margin:0;font-size:15.5px;color:var(--ink)}

.bullets li{position:relative;padding-left:28px;margin-bottom:12px;color:var(--ink-2);font-size:15.5px}
.bullets li::before{
  content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--pop-deep);
}
.sec--deep .bullets li{color:var(--on-deep-2)}
.sec--deep .bullets li::before{background:var(--pop)}

/* rows: a numbered editorial list, used on inner pages */

/* FAQ */
.faq{display:flex;flex-direction:column;gap:10px}
.notice + .faq{margin-top:clamp(28px,4vw,48px)}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 62px 20px 24px;position:relative;
  font-size:16.5px;font-weight:600;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:22px;top:50%;width:24px;height:24px;
  margin-top:-12px;border:1px solid var(--line-2);border-radius:50%;
  background:
    linear-gradient(var(--ink),var(--ink)) center/10px 1.6px no-repeat,
    linear-gradient(var(--ink),var(--ink)) center/1.6px 10px no-repeat;
  transition:transform .25s var(--ease);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 24px 22px;color:var(--ink-2);font-size:15.5px}

/* ---------- 15. Forms ---------- */
.form{display:grid;gap:16px;max-width:620px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14.5px;font-weight:600}
.field .hint{font-size:13.5px;color:var(--ink-3);font-weight:400}
.field input,.field select,.field textarea{
  font:inherit;font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:13px 15px;width:100%;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);
}
.field[data-bad="true"] input,.field[data-bad="true"] select,.field[data-bad="true"] textarea{border-color:#A81F1B}
.field .err{font-size:13.5px;color:#8E1A17;display:none}
.field[data-bad="true"] .err{display:block}
.check{display:flex;gap:11px;align-items:flex-start}
.check input{width:19px;height:19px;flex:none;margin-top:2px}
.check label{font-weight:400;font-size:14.5px;color:var(--ink-2)}
.hp{position:absolute;left:-9999px}
.msg{display:none;border-radius:var(--r-sm);padding:15px 18px;font-size:15px}
.msg.is-on{display:block}
.msg--ok{background:#E6F4EC;color:#09472D;border:1px solid #B6DEC9}
.msg--err{background:#FBEBEA;color:#7E1815;border:1px solid #EFC5C3}
.btn[aria-busy="true"]{opacity:.72;pointer-events:none}

/* ---------- 16. Footer ---------- */
.foot{background:var(--deep);color:var(--on-deep-2);padding:clamp(48px,7vw,84px) 0 34px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,48px)}
.foot h2{color:#fff;font-size:15px;font-weight:600;margin-bottom:14px;letter-spacing:-.01em}
.foot a{color:var(--on-deep-2);text-decoration:none;font-size:15px}
.foot a:hover{color:#fff;text-decoration:underline}
.foot li{margin-bottom:9px}
.foot .lead{max-width:36ch;font-size:15px;margin-top:14px;color:var(--on-deep-2)}
.foot-note{
  margin-top:clamp(34px,5vw,56px);padding-top:24px;border-top:1px solid var(--line-deep);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;font-size:14px;
}

/* ---------- 17. Inner-page panels ---------- */
/* A horizontal accordion: one panel open, the others collapsed to a spine.
   Driven by data-open on the container rather than :has(), so it behaves the
   same everywhere. The panel is a column flex container -- as a row the spine
   button and the body sat side by side and halved the open panel's width. */
.panels{display:flex;gap:12px;height:clamp(460px,50vw,560px)}
.panel{
  flex:0 0 clamp(88px,7vw,110px);display:flex;flex-direction:column;position:relative;
  border-radius:var(--r);overflow:hidden;background:var(--deep);
  transition:flex-grow .45s var(--ease),flex-basis .45s var(--ease);
}
.panels[data-open="1"] .panel:nth-child(1),
.panels[data-open="2"] .panel:nth-child(2),
.panels[data-open="3"] .panel:nth-child(3){flex:1 1 auto}
/* The button is the accessible control, but its hit area is stretched over the
   whole panel: clicking anywhere on a collapsed panel opens it, which is what
   you expect from a slide. .panel-copy sits above it so the link inside an open
   panel is still reachable. */
.panel-btn{
  position:relative;z-index:3;background:transparent;border:0;cursor:pointer;
  color:#fff;padding:0;width:100%;text-align:left;flex:none;
}
.panel-btn::after{content:"";position:absolute;inset:0 0 -2000px 0;cursor:pointer}
.panels[data-open="1"] .panel:nth-child(1) .panel-btn::after,
.panels[data-open="2"] .panel:nth-child(2) .panel-btn::after,
.panels[data-open="3"] .panel:nth-child(3) .panel-btn::after{cursor:default}
.panel-copy{position:relative;z-index:4}
.panel-spine{display:flex;align-items:baseline;gap:12px;padding:22px}
.panel-spine .n{font-family:var(--display);font-size:14px;font-weight:600;color:var(--pop);flex:none;letter-spacing:.02em}
.panel-spine h3{font-size:clamp(19px,1.45vw,25px);color:#fff;white-space:nowrap;line-height:1.15;letter-spacing:-.024em}
/* collapsed: the title rotates into a vertical spine, the classic pillar look */
.panels:not([data-open="1"]) .panel:nth-child(1) .panel-spine,
.panels:not([data-open="2"]) .panel:nth-child(2) .panel-spine,
.panels:not([data-open="3"]) .panel:nth-child(3) .panel-spine{
  writing-mode:vertical-rl;transform:rotate(180deg);padding:22px 0;justify-content:flex-end;
}
.panel-body{
  position:relative;z-index:2;margin-top:auto;padding:70px 22px 22px;
  background:linear-gradient(180deg,transparent,rgba(8,11,13,.9) 46%,rgba(8,11,13,.97));
  opacity:0;transition:opacity .3s var(--ease) .1s;pointer-events:none;
}
.panels[data-open="1"] .panel:nth-child(1) .panel-body,
.panels[data-open="2"] .panel:nth-child(2) .panel-body,
.panels[data-open="3"] .panel:nth-child(3) .panel-body{opacity:1;pointer-events:auto}
.panel-media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.66}
.panel-media--opswake{background-image:url("team.jpg");background-position:48% 32%}
.panel-media--custom{background-image:url("board.jpg")}
.panel-media--ai{background-image:url("office.jpg");background-position:center 36%}
.panel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,11,13,.5) 0%,rgba(8,11,13,.34) 34%,rgba(8,11,13,.42) 100%)}
.panel-copy{position:relative;z-index:2;max-width:56ch}
.panel-body{overflow:hidden}
.panel-copy p{color:#E2E7E9;font-size:clamp(15.5px,1.15vw,18px);line-height:1.62}
.panel-copy .bullets{margin-top:14px}
.panel-copy .bullets li{color:#CBD3D6;font-size:15.5px}
.panel-copy .bullets li::before{background:var(--pop)}

/* an inline forward link, used where a full button would be too loud */
.ilink{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;
  color:#fff;font-weight:600;font-size:15px;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;
}
.ilink:hover{color:#fff;border-bottom-color:#fff}
.ilink svg{width:13px;height:13px}

/* ---------- 18. Stage stack ---------- */
/* Four slabs in perspective, the active one lifted forward. Each slab carries
   its own text, so a reader who never sees the animation still gets all four. */
.stack-wrap{display:flex;flex-direction:column;align-items:center}
.stack{position:relative;perspective:1300px;min-height:400px;width:100%;display:grid;place-items:center}
/* In the hero column the deck has to fit inside the shell, which clips. The
   standalone offsets ran about 520px against a 400px well and the back slabs
   were cut off. */
.hero-aside .stack{min-height:440px}
.hero-aside .slab{width:min(420px,98%);padding:22px;min-height:200px;
  background:rgba(254,255,253,.95);border-color:rgba(255,255,255,.5);
  box-shadow:0 20px 50px -22px rgba(0,0,0,.55)}
.hero-aside .slab[data-at="0"]{transform:translateZ(50px) translateY(-52px) rotateX(5deg)}
.hero-aside .slab[data-at="1"]{transform:translateZ(0) translateY(2px) rotateX(5deg) scale(.95)}
.hero-aside .slab[data-at="2"]{transform:translateZ(-50px) translateY(50px) rotateX(5deg) scale(.9)}
.hero-aside .slab[data-at="3"]{transform:translateZ(-100px) translateY(92px) rotateX(5deg) scale(.85)}
.hero-aside .slab p:not(.slab-t):not(.stack-title){font-size:15px}
.hero-aside .stack-dots{margin-top:12px}
.hero-aside .stack-dots button{background:rgba(255,255,255,.4)}
.hero-aside .stack-dots button[aria-current="true"]{background:#fff}
.slab{
  position:absolute;width:min(440px,86%);border-radius:var(--r);
  background:var(--paper);border:1px solid var(--line);padding:26px;
  transform-style:preserve-3d;
  transition:transform .6s var(--ease),opacity .6s var(--ease);
}
/* Only the front card shows its content. The three behind it are blank slabs:
   with all four sets of text painted at once the descriptions overlapped and
   the deck read as a smear rather than as cards. They also need one height, or
   the stack steps unevenly as the text length changes. */
.slab{min-height:196px}
.slab>*{transition:opacity .35s var(--ease)}
.slab:not([data-at="0"])>*{opacity:0}
.slab[data-at="0"]{transform:translateZ(60px) translateY(-40px) rotateX(6deg);opacity:1;z-index:4}
.slab[data-at="1"]{transform:translateZ(0) translateY(14px) rotateX(6deg) scale(.95);opacity:.8;z-index:3}
.slab[data-at="2"]{transform:translateZ(-60px) translateY(56px) rotateX(6deg) scale(.9);opacity:.58;z-index:2}
.slab[data-at="3"]{transform:translateZ(-120px) translateY(96px) rotateX(6deg) scale(.85);opacity:.36;z-index:1}
.slab-t{font-family:var(--display);font-size:clamp(20px,1.6vw,24px);font-weight:600;letter-spacing:-.026em;line-height:1.1;margin-bottom:10px}
.slab p:not(.slab-t):not(.stack-title){font-size:15.5px;color:var(--ink-2);line-height:1.6}
.stack-title{font-family:var(--display);font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:.09em}
.stack-dots{display:flex;gap:9px;justify-content:center;margin-top:20px}
.stack-dots button{
  width:10px;height:10px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:var(--line-2);transition:background .2s var(--ease),transform .2s var(--ease);
}
.stack-dots button[aria-current="true"]{background:var(--ink);transform:scale(1.3)}

/* ---------- 18b. Leadership ---------- */
.leaders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.leader{padding:30px}
.leader{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;display:flex;gap:20px;align-items:flex-start;
}
.leader-portrait{
  width:clamp(96px,8vw,124px);aspect-ratio:1;flex:none;border-radius:var(--r);overflow:hidden;
  background:var(--deep-2) center/cover no-repeat;
  display:grid;place-items:center;
  font-family:var(--display);font-size:30px;font-weight:700;color:#8A979B;letter-spacing:.02em;
}
/* Real portraits when the files land; the lettered plate until then, so the
   layout does not move when they arrive. */
.leader-portrait--1{background-image:url("leader-1.jpg");background-position:center 22%;color:transparent}
.leader-portrait--2{background-image:none;color:#8A979B}
.leader h3{font-size:19px}
.leader-role{display:block;font-size:13px;font-weight:600;letter-spacing:.05em;color:var(--pop-deep);margin:4px 0 10px}
.leader p{font-size:15px;color:var(--ink-2)}

/* ---------- 18c. Small parts ---------- */
.notice{
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--pop-deep);
  border-radius:var(--r-sm);padding:18px 20px;font-size:15px;color:var(--ink-2);
}
.sec--deep .notice{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);border-left-color:var(--pop);color:var(--on-deep-2)}
.req{color:#A81F1B;font-weight:600}
.ops-logo{height:auto;max-width:190px;display:block}
.ops-plate{
  display:inline-block;background:#FEFFFD;border-radius:var(--r-sm);
  padding:14px 20px;margin-bottom:24px;
}

/* ---------- 18d. Blog ---------- */
.post{padding:clamp(28px,5vw,64px) 0 0}
.post-head{max-width:820px;margin-bottom:clamp(28px,4vw,44px)}
.post-head h1{font-size:clamp(28px,3.6vw,46px);line-height:1.04}
.post-sub{font-size:clamp(17px,1.7vw,21px);color:var(--ink-2);margin-top:14px;line-height:1.45}

/* A measure, not a container width. Long-form prose past about 70 characters
   costs the reader a line-find on every wrap. */
.prose{max-width:66ch}
.prose p{margin-bottom:20px;font-size:17.5px;line-height:1.68;color:var(--ink-2)}
.prose h2{font-size:clamp(21px,2.4vw,28px);margin:40px 0 14px;color:var(--ink)}
.prose .bullets{margin-bottom:22px}
.prose .bullets li{font-size:17px}

/* The reference's guide cards: a #tag pill, a title broken across lines with
   alternating dark and grey words, and a reading-time footer. The two-tone
   title is the whole trick -- it makes a three-line heading read as rhythm
   rather than as a block, and it costs one span. */
/* Three equal columns, stretching. Fixed 360px columns left dead space on the
   right, and a lead card spanning two of them left a hole in the last row --
   six posts across three equal columns is exactly two full rows. */
.post-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.post-card a{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper);border-radius:var(--r);padding:26px 26px 22px;
  text-decoration:none;color:inherit;min-height:290px;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.post-card a:hover{transform:translateY(-3px);box-shadow:0 20px 44px -22px rgba(20,24,26,.32);color:inherit}
.post-tag{
  align-self:flex-start;background:var(--wash-2);color:var(--ink-3);
  border-radius:var(--pill);padding:7px 15px;font-size:12.5px;font-weight:500;
}
.post-card h2{
  font-size:clamp(21px,1.6vw,26px);font-weight:500;letter-spacing:-.022em;
  line-height:1.16;margin:26px 0 0;
}
.post-card h2 em{font-style:normal;color:var(--ink-3)}
.post-read{
  margin-top:auto;padding-top:22px;display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--ink-3);
}
.post-read svg{width:15px;height:15px;flex:none;color:var(--ink-2)}
.post-read b{color:var(--ink);font-weight:600}

/* the lead article: the photograph carries the title, one word in the accent */
.post-card--lead a{padding:0;background:var(--deep);overflow:hidden;min-height:340px}
.post-card--lead .post-figure{
  position:relative;min-height:210px;padding:26px;
  display:flex;flex-direction:column;justify-content:space-between;
  background-size:cover;background-position:center;
}
.post-card--lead .post-figure::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,13,.28) 0%,rgba(8,11,13,.2) 40%,rgba(8,11,13,.72));
}
.post-card--lead .post-tag{position:relative;z-index:2;background:rgba(254,255,253,.9);color:var(--ink-2)}
.post-card--lead h2{position:relative;z-index:2;color:#fff;margin:0;font-weight:600}
.post-card--lead h2 em{color:var(--pop)}
.post-card--lead .post-body{background:var(--paper);padding:22px 26px;display:flex;flex-direction:column;flex:1}
.post-card--lead .post-body p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
.post-card--lead .post-read{justify-content:space-between}
.post-card--lead .post-more{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600}

/* ---------- 18e. Legal pages ---------- */
/* A sticky contents column beside the text. Long legal copy without one is a
   wall; with one it is navigable, and the anchors are what people actually
   quote back at you. */
.legal{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.legal-toc{position:sticky;top:96px}
.legal-toc h2{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.legal-toc ol{counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.legal-toc li{counter-increment:toc}
.legal-toc a{
  display:block;padding:7px 12px;border-radius:var(--r-sm);
  font-size:14.5px;color:var(--ink-2);text-decoration:none;line-height:1.4;
}
.legal-toc a::before{content:counter(toc,decimal-leading-zero) "  ";color:var(--ink-3);font-size:12.5px}
.legal-toc a:hover{background:var(--paper);color:var(--ink)}

.legal-body{max-width:74ch}
.legal-item{padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.legal-item:last-child{border-bottom:0;margin-bottom:0}
.legal-item h2{font-size:clamp(19px,1.7vw,23px);margin-bottom:16px;scroll-margin-top:96px}
.legal-item p{color:var(--ink-2);font-size:16.5px;line-height:1.68;margin-bottom:14px}
.legal-item p:last-child{margin-bottom:0}
.legal-item b{color:var(--ink);font-weight:600}
.legal-item .bullets{margin:4px 0 14px}
.legal-item .bullets li{font-size:16px}

.post .wrap{max-width:1080px}

/* the post's rail: meta, contents, and one way out. Same shape as the legal
   pages, so a long read looks the same wherever it appears. */
.post-grid{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);
           gap:clamp(28px,5vw,72px);align-items:start}
.post-rail{position:sticky;top:96px;display:flex;flex-direction:column;gap:26px}
.post-meta-list{display:flex;flex-direction:column;gap:12px;margin:0}
.post-meta-list>div{display:flex;flex-direction:column;gap:2px}
.post-meta-list dt{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.post-meta-list dd{margin:0;font-size:14.5px;color:var(--ink)}
.post-toc h2{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
             color:var(--ink-3);margin-bottom:12px}
.post-toc ol{counter-reset:ptoc;display:flex;flex-direction:column;gap:1px}
.post-toc li{counter-increment:ptoc}
.post-toc a{display:block;padding:7px 11px;border-radius:var(--r-sm);font-size:14px;
            line-height:1.4;color:var(--ink-2);text-decoration:none}
.post-toc a::before{content:counter(ptoc,decimal-leading-zero) "  ";color:var(--ink-3);font-size:11.5px}
.post-toc a:hover{background:var(--paper);color:var(--ink)}
.post-rail-cta{align-self:flex-start}
.prose h2{scroll-margin-top:96px}

/* ---------- 19. Motion ---------- */
/* Entrances are opt-in through .js, so with scripting off nothing is ever
   left invisible. */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .hero h1 .w{opacity:0;transform:translateY(24px);animation:rise .8s var(--ease) forwards;animation-delay:calc(var(--i)*70ms + 120ms)}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js .reveal{opacity:1;transform:none}
  .js .hero h1 .w{opacity:1;transform:none;animation:none}
  .rise-line .lit{animation:none;stroke-dasharray:none;opacity:.9}
}

/* ---------- 20. Responsive ---------- */
@media (max-width:1080px){
  .legal{grid-template-columns:1fr}
  .legal-toc{position:static}
  .post-grid{grid-template-columns:1fr}
  .post-rail{position:static}
  .post-meta-list{flex-direction:row;flex-wrap:wrap;gap:8px 34px}
  .duo{grid-template-columns:1fr;grid-template-areas:"label" "title" "body"}
  .offers{grid-template-columns:1fr}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-photo--wide{grid-column:span 2}
  .probe{grid-template-columns:1fr}
  .vision{grid-template-columns:1fr}
  .plan{grid-template-columns:1fr}
  .leaders{grid-template-columns:1fr}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .top-in{position:relative;flex-wrap:wrap}
  .nav{
    display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:10px;
    box-shadow:0 18px 44px -18px rgba(20,24,26,.28);
  }
  .nav.is-open{display:flex}
  .nav a,.nav button{width:100%;justify-content:space-between;padding:13px 16px}
  .menu{
    position:static;transform:none;opacity:1;visibility:visible;
    box-shadow:none;border:0;border-radius:0;padding:0 0 0 12px;min-width:0;display:none;
  }
  .has-menu[data-open="true"] .menu{display:block;transform:none}
  .burger{display:grid}
  .top-in>.btn{display:none}
  .panels{flex-direction:column;height:auto;min-height:0;gap:10px}
  .panel,
  .panels[data-open="1"] .panel:nth-child(1),
  .panels[data-open="2"] .panel:nth-child(2),
  .panels[data-open="3"] .panel:nth-child(3){flex:0 0 auto;min-height:0}
  .panel-spine{writing-mode:horizontal-tb!important;transform:none!important;
               padding:22px!important;justify-content:flex-start!important}
  .panel-btn{min-height:104px;display:flex;align-items:center}
  .panel-body{display:none;opacity:1;pointer-events:auto;margin-top:0;padding-top:0}
  .panels[data-open="1"] .panel:nth-child(1) .panel-body,
  .panels[data-open="2"] .panel:nth-child(2) .panel-body,
  .panels[data-open="3"] .panel:nth-child(3) .panel-body{display:block}
    }
@media (max-width:760px){
  body{font-size:16px}
  /* The 15ch cap is a measure for a large statement; at phone sizes it is
     wider than the shell and the shell clips, which the overflow sweep cannot
     see because the clipping is what stops the document growing. */
  .hero h1{font-size:clamp(28px,7.2vw,38px);max-width:none}
  .hero h1#page-h{font-size:clamp(27px,6.8vw,36px);max-width:none}
  .hero-sub{max-width:none}
  .hero-shell{flex-direction:column;align-items:stretch;justify-content:center}
  .hero-copy,.hero-shell--aside .hero-copy{max-width:none}
  /* the deck carries the four stages, so it moves below the copy rather than
     being hidden -- and .hero-shell--aside .hero-aside out-specifies a bare
     .hero-aside rule, so it has to be reset by the same selector */
  .hero-shell--aside .hero-aside{display:block;width:100%;margin-top:26px}
  .hero-aside .stack{min-height:290px}
  .hero-aside .slab{width:100%;min-height:172px;padding:18px}
  .top-in{padding:8px 8px 8px 16px;gap:12px}
  .head{grid-template-columns:1fr;grid-template-areas:"label" "title" "note"}
  .duo{grid-template-columns:1fr;grid-template-areas:"label" "title" "body"}
  .stats{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bento-photo--wide{grid-column:auto}
  .bento-tile,.bento-photo{min-height:200px}
  .foot-top{grid-template-columns:1fr}
  .rung-n{font-size:74px;left:20px}
  .rung-t{margin-left:112px}
  .rung-body p{padding:0 22px 22px;margin-left:112px}
  .rung-btn{padding:22px;min-height:104px}
  .probe-media{min-height:310px}
  .band-copy h2{font-size:clamp(28px,8vw,40px)}
  .post-list{grid-template-columns:1fr}
  .post-card--lead{grid-column:auto}
}

/* Below this the diagonal cannot work. The wide variant gives up first: its
   steps are 22% of the container: 297px at 1440, 210px at 1024, one word per
   line below that. It stacks at 1180. `.rise--wide .rise-step` also out-specifies the
   narrow stacking rule, so it has to be reset by name, not inherited. */
@media (max-width:1240px){
  .nav a,.nav button{padding:9px 12px}
  .rise--wide{aspect-ratio:auto;min-height:0;max-height:none;height:auto}
  .rise--wide .rise-line{display:none}
  .rise--wide .rise-steps{position:static;display:grid;gap:12px}
  .rise--wide .rise-step{position:static;width:100%;min-width:0;left:auto;bottom:auto}
  .rise--wide .rise-step::after{display:none}
}

/* the narrow variant, wherever it is used, gives up here */
/* 560px is where <picture> swaps the tagline lockup for the name-only crop.
   These two rules must move together with that media query. */
@media (max-width:560px){
  .brand-mark{height:28px}
  .brand-word{width:104px}
}

@media (max-width:390px){
  .brand-mark{height:26px}
  .brand-word{width:94px}
  .top-in{padding:7px 7px 7px 13px;gap:8px}
  .burger{width:40px;height:40px}
}

@media (max-width:520px){
  .rise{aspect-ratio:auto;min-height:0;max-height:none;max-width:none;height:auto}
  .rise-line{display:none}
  .rise-steps{position:static;display:grid;gap:10px}
  .rise-step{position:static;width:100%;min-width:0;left:auto;bottom:auto}
  .rise-step::after{display:none}
}