/* Self-hosted fonts (latin subset, woff2, font-display:swap).
   Previously fetched from fonts.googleapis.com, which meant a
   render-blocking request to a third party plus a second connection to
   fonts.gstatic.com before any text could paint. Served from our own
   origin they are on a connection the browser already has. 209KB total.
   To change weights, re-download the woff2 rather than re-adding the CDN. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Barlow-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Barlow-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/BarlowCondensed-700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ============================================================================
   mikemillett.com — the canonical Mike Millett person site.

   Built on the Digilu house system, not on a lookalike of it: the same navy
   and coral tokens, the same Barlow Condensed / Barlow / Inter stack, and the
   same `.la` line-art system ported from digilu/styles.css so the two are
   visibly one family. This is a PERSON site, so the layout is editorial rather
   than commercial, but the ink, the type and the drawings are the house's.

   THE HTML IS BUILD OUTPUT. Edit tools/, run python3 build.py.
   ========================================================================= */
:root{
  --digilu-navy:#1A2A34; --digilu-charcoal:#2B353B;
  --white:#fff; --light-mist:#EAEFF2; --cool-gray:#636A76; --proof-dark:#0F1D25;
  --accent:#E2553D; --accent-text:#BF3E2A; --accent-on-dark:#EE6B4F; --accent-rgb:226,85,61;
  /* White on #E2553D is 3.75:1 and fails AA at 13px. This is 4.8:1 and reads
     as the same colour. Solid accent buttons use it; hairlines and rules,
     which carry no text, keep the pure brand accent. */
  --accent-solid:#C9452F;
  --font-display:'Barlow Condensed',sans-serif;
  --font-accent:'Barlow',sans-serif;
  --font-body:'Inter',sans-serif;
  --container-max:1280px; --nav-h:72px;
  --line:#D7DEE2;
  --shadow-lg:0 8px 32px rgba(0,0,0,.18); --shadow-xl:0 16px 48px rgba(0,0,0,.24);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--digilu-navy);
  font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-text);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem}
@media(min-width:1100px){.wrap{padding:0 5rem}}

h1,h2,h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  line-height:1.04;letter-spacing:-.005em;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,6vw,4.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.15rem;font-family:var(--font-accent);font-weight:600;text-transform:none;letter-spacing:0}
p{margin:0 0 1.15em;max-width:68ch}
.eyebrow{display:block;font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:300;background:var(--digilu-navy);color:#fff;padding:12px 18px}

/* ---------- header + megamenu, the Digilu pattern ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--digilu-navy)}
.header-inner{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
@media(min-width:1100px){.header-inner{padding:0 5rem}}
.site-logo{display:flex;align-items:center;gap:10px;color:#fff}
.site-logo:hover{text-decoration:none}
.site-logo svg{width:26px;height:26px;flex-shrink:0}
.site-logo b{font-family:var(--font-display);font-weight:700;font-size:19px;
  letter-spacing:.09em;text-transform:uppercase;color:#fff}
.primary-nav{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:6px;
  font-family:var(--font-body);font-size:13.5px;font-weight:400;color:rgba(255,255,255,.78);
  white-space:nowrap;transition:color .2s,background .2s}
.nav-link:hover,.nav-link[aria-current=page]{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}
.nav-caret{width:12px;height:12px;opacity:.8;transition:transform .2s}
.nav-item:hover .nav-link{color:#fff}
.nav-item:hover .nav-caret{transform:rotate(180deg);opacity:1}
.mega-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-8px);
  opacity:0;visibility:hidden;pointer-events:none;transition:.2s ease;z-index:120}
.mega-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-menu-inner{display:flex;background:var(--proof-dark);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;box-shadow:var(--shadow-xl);overflow:hidden}
.mm-feature{position:relative;display:flex;flex-direction:column;width:270px;padding:22px;
  background:linear-gradient(150deg,#16262F,#0F1D25);border-right:1px solid rgba(255,255,255,.08);overflow:hidden}
.mm-feature:hover{text-decoration:none}
.mm-fx{position:absolute;right:-26px;bottom:-24px;opacity:.5;pointer-events:none}
.mm-flabel{display:block;font-family:var(--font-body);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-on-dark);margin-bottom:10px}
.mm-feature h4{font-family:var(--font-display);font-weight:700;font-size:23px;text-transform:uppercase;
  line-height:1.08;margin:0 0 8px;color:#fff}
.mm-feature p{font-family:var(--font-body);font-size:12.5px;color:rgba(255,255,255,.62);
  line-height:1.5;margin:0 0 16px;max-width:none}
.mm-fcta{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);
  font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-on-dark);transition:gap .2s}
.mm-fcta svg{width:14px;height:14px}
.mm-feature:hover .mm-fcta{gap:11px}
.mm-list{padding:14px;min-width:300px}
.mm-glabel{display:block;padding:8px 14px 6px;font-family:var(--font-body);font-size:10px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8A929C}
.mm-cols{display:flex;gap:8px}
.mm-cols>div{flex:1;min-width:228px}
.mm-row{display:flex;align-items:flex-start;gap:13px;padding:9px 14px;border-radius:6px;transition:background .2s}
.mm-row:hover{background:rgba(255,255,255,.05);text-decoration:none}
.mm-ico{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.24);display:flex;align-items:center;justify-content:center}
.mm-ico svg{width:18px;height:18px}
.mm-tt{display:block;font-family:var(--font-body);font-size:14px;font-weight:600;color:#fff;line-height:1.25}
.mm-ds{display:block;font-family:var(--font-body);font-size:12px;color:rgba(255,255,255,.5);
  margin-top:3px;line-height:1.4}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;margin:5px 0;border-radius:2px;transition:.2s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none}

/* ============================================================================
   LINE ART — ported verbatim in behaviour from digilu/styles.css.
   Navy hairline ink on a real, recognisable subject. The coral accent is spent
   EXACTLY ONCE per piece, on the stroke that carries the meaning. Nothing fades
   in; everything is drawn, in order, by one hand. Every stroke carries
   pathLength="1" so the draw is one dashoffset transition with nothing measured
   in script.

   The two traps are already fixed here and must not be reintroduced:
   `vector-effect:non-scaling-stroke` measures in device space while
   `stroke-dasharray:1` measures in user space, so the dash is scaffolding that
   MUST be removed at rest (.settled), or a finished stroke rests with runs of
   itself missing. And the draw curve needs a real end slope or the pen visibly
   crawls to a halt short of the end.
   ========================================================================= */
.la{display:block;width:100%;height:auto;overflow:visible;fill:none}
.la path,.la circle,.la ellipse,.la line,.la polyline,.la rect{
  fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.la .la-ink{stroke:var(--digilu-navy);stroke-width:1.8}
.la .la-ghost{stroke:var(--digilu-navy);stroke-width:1.8;opacity:.15}
.la .la-det{stroke:var(--digilu-navy);stroke-width:1.4;opacity:.6}
.la .la-acc{stroke:var(--accent);stroke-width:2.2}
.la .la-dot{fill:var(--digilu-navy);stroke:none}
.la .la-dot-acc{fill:var(--accent);stroke:none}
.la .la-lbl{fill:var(--cool-gray);stroke:none;text-anchor:middle;font-family:var(--font-accent);
  font-weight:600;font-size:13px;letter-spacing:.13em;text-transform:uppercase}
.la .la-date{fill:var(--accent);font-size:15px;letter-spacing:.1em}
.la--dark .la-date{fill:var(--accent-on-dark)}
.la--dark .la-ink{stroke:rgba(255,255,255,.6)}
.la--dark .la-det{stroke:rgba(255,255,255,.4);opacity:1}
.la--dark .la-acc{stroke:var(--accent-on-dark)}
.la--dark .la-dot{fill:rgba(255,255,255,.5)}
.la--dark .la-dot-acc{fill:var(--accent-on-dark)}
.la--dark .la-lbl{fill:rgba(255,255,255,.5)}

.la [data-draw]{stroke-dasharray:1;stroke-dashoffset:1}
.la.drawn [data-draw]{stroke-dashoffset:0;
  transition:stroke-dashoffset 1.05s cubic-bezier(.35,.15,.65,.85)}
.la.drawn .la-det[data-draw],.la.drawn .la-det [data-draw]{transition:stroke-dashoffset .55s ease-out .9s}
.la.drawn .la-acc[data-draw],.la.drawn .la-acc [data-draw]{transition:stroke-dashoffset .45s ease-out 1.3s}
.la.settled [data-draw]{stroke-dasharray:none;stroke-dashoffset:0}
.la .la-fade{opacity:0}
.la.drawn .la-fade{opacity:1;transition:opacity .4s ease-out 1.45s}
@media(prefers-reduced-motion:reduce){
  .la [data-draw]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .la.drawn [data-draw],.la.settled [data-draw]{transition:none}
  .la .la-fade{opacity:1;transition:none}
}
/* placements */
.la-band{margin:3rem 0 3.25rem}
.la-fig{max-width:820px;margin:2.5rem auto 2.75rem}
.la-mark{width:84px;height:84px;margin:0 0 1rem}
.la-mark--lg{width:120px;height:120px}

/* ---------- hero ------------------------------------------------------
   FULL BLEED, NOT A CARD. The first version put the headline in one box and
   the portrait in another and it read as a template. Two things fix it.

   First, the studio portrait is already shot on navy: sampled at #101F32 at the
   edges falling to #09111E at the foot, which is within a few points of
   --proof-dark. So the section takes that navy and the photograph is MASKED
   into it rather than framed on top of it. No border, no radius, no shadow.
   The man is standing in the page, not pasted onto it.

   Second, the five-shifts drawing runs along the floor of the hero in the dark
   ink variant. The hero then IS the argument the site makes rather than a
   headline that happens to sit above it: thirty years, five shifts, and the
   coral spent once on the one we are in.
   --------------------------------------------------------------------- */
/* HEIGHT IS THE CONSTRAINT, NOT WIDTH.
   The hero was 1108px tall and put the call to action at 792px, which is below
   the fold on a 1440x900 screen (789 usable after browser chrome) and well below
   it on a 1280x800. Every dimension that drives that height is now tied to the
   viewport rather than fixed, so the hero fits a short laptop instead of
   assuming a tall desktop. */
.hero{
  position:relative;
  background:linear-gradient(160deg,#1B2C3A 0%,#132433 42%,#0C1723 100%);
  color:#fff;border-bottom:0;overflow:hidden;
  padding:clamp(1.75rem,4.5vh,3.25rem) 0 0;
}
.hero-grid{
  display:grid;grid-template-columns:1.06fr .94fr;gap:3rem;align-items:end;
  position:relative;z-index:2;
}
.hero-copy{padding-bottom:clamp(1.5rem,4vh,3rem)}
.hero .eyebrow{color:var(--accent-on-dark)}
.hero h1{
  color:#fff;margin-bottom:.3em;
  /* Also capped against viewport HEIGHT: a 105px headline on a 690px viewport
     is a quarter of the screen before a word of argument. */
  font-size:clamp(2.6rem,min(7.4vw,10.5vh),5.4rem);letter-spacing:-.012em;line-height:.93;
}
.hero .lede{
  color:#fff;font-family:var(--font-accent);font-weight:500;
  font-size:clamp(1.08rem,min(2.1vw,2.5vh),1.5rem);line-height:1.34;
  max-width:24ch;margin-bottom:.85em;
}
/* The one coral mark in the hero: a rule under the claim, not a decoration. */
.hero .lede::after{
  content:"";display:block;width:58px;height:3px;background:var(--accent);
  margin-top:.95rem;
}
.hero .sub{color:rgba(255,255,255,.62);font-size:1rem;max-width:44ch}
.hero .sub strong{color:#fff;font-weight:600}
/* Order matters: the ghost rule must WIN over the solid one, so it comes after. */
.hero .btn{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
.hero .btn:hover{background:#fff;border-color:#fff;color:var(--digilu-navy)}
.hero .btn.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.hero .btn.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--digilu-navy)}

/* The portrait dissolves into the navy on three edges. Both the standard and
   the -webkit- property are set: Safari still needs the prefixed one, and a
   mask that silently does not apply leaves a hard photographic rectangle,
   which is the exact thing this is here to remove. */
.hero-fig{margin:0;align-self:end;position:relative;margin-left:auto;
  /* 0.75 is the portrait's aspect. Solving for width from the height left over
     after the nav, the hero padding and the drawing on the floor. */
  max-width:min(540px, calc((100vh - var(--nav-h) - 14rem) * 0.75));}
/* Break the container on the right so the figure reaches the edge of the screen.
   A portrait that stops short of the edge reads as an image placed in a layout;
   one that runs off it reads as a photograph the page is built around. */
/* Break the container just enough that the figure is not sitting inside a
   margin, and NO FURTHER. The full bleed pulled it 160px past the edge at
   1440 and sliced his arm off, which is a photograph problem dressed up as a
   layout choice: the silhouette has to read complete. */
@media(min-width:901px){
  .hero-fig{margin-right:calc((100vw - min(100vw, var(--container-max))) / -2)}
}
@media(min-width:1100px){
  .hero-fig{margin-right:calc((100vw - min(100vw, var(--container-max))) / -2 - 1rem)}
}
.hero-fig img{
  width:100%;max-width:none;display:block;
  /* The fade was reaching 22% into the frame and eating his shoulder, which
     narrows the figure and is most of why the proportions read wrong. It now
     dissolves only the outer margin of the plate. */
  -webkit-mask-image:
     linear-gradient(to right,transparent 0%,#000 11%,#000 100%),
     linear-gradient(to bottom,#000 80%,transparent 99.5%);
  mask-image:
     linear-gradient(to right,transparent 0%,#000 11%,#000 100%),
     linear-gradient(to bottom,#000 80%,transparent 99.5%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* The argument along the floor of the hero. */
.hero-floor{
  position:relative;z-index:3;margin-top:-1rem;padding:0 0 clamp(1.25rem,3vh,2.25rem);
  opacity:.8;
  /* A soft scrim so the drawing reads over the darkest part of the photograph
     without a visible edge. It sits ABOVE the figure deliberately: the five
     shifts are the ground he is standing on. */
  background:linear-gradient(to bottom,rgba(12,23,35,0) 0%,rgba(12,23,35,.72) 34%,rgba(12,23,35,.96) 100%);
}
.hero-floor .la{max-width:1180px;margin:0 auto;padding:0 1.5rem}
@media(min-width:1100px){.hero-floor .la{padding:0 5rem}}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(1.1rem,2.6vh,1.7rem)}
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--digilu-navy);color:#fff;
  padding:13px 24px;border-radius:4px;font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--digilu-navy);cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.btn:hover{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff;text-decoration:none}
.btn--ghost{background:transparent;color:var(--digilu-navy);border-color:#C9D2D6}
.btn--ghost:hover{background:var(--digilu-navy);border-color:var(--digilu-navy);color:#fff}
.btn--onnavy{background:var(--accent-solid);border-color:var(--accent-solid)}
.btn--onnavy:hover{background:#fff;border-color:#fff;color:var(--digilu-navy)}

/* ---------- page head + sections ---------- */
/* ---------- page head ------------------------------------------------
   Every inner page used to open with a headline on grey, which is why the
   site read as a document rather than as a designed thing. The head is now
   the same navy family as the hero, carries the page's own drawing, and
   gives each page a first screen with weight.
   --------------------------------------------------------------------- */
.page-head{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#1B2C3A 0%,#132433 55%,#0C1723 100%);
  color:#fff;border-bottom:0;padding:2.9rem 0 2.6rem;
}
.page-head .wrap{position:relative;z-index:2}
.page-head-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:2.5rem;align-items:center}
.page-head h1{color:#fff;margin-bottom:.24em;font-size:clamp(2.3rem,5vw,3.9rem)}
.page-head .eyebrow{color:var(--accent-on-dark)}
.page-head .lede{color:rgba(255,255,255,.74);max-width:56ch;font-size:1.1rem;margin-bottom:0;
  font-family:var(--font-accent);font-weight:400}
.page-head-mark{margin:0}
.page-head-mark .la{max-width:230px;margin-left:auto}
/* A HEAD PHOTO HAS TO LIVE IN THE PALETTE, not sit on top of it.
   The portraits are a mix of navy studio and bright outdoor garden. Dropped
   straight onto the navy the garden shots read as a snapshot pasted onto a
   designed page. Desaturating them and laying a navy multiply over the top puts
   every portrait in the same world, whatever it was shot against, and the mask
   dissolves the left edge so there is no frame. */
.page-head-fig{margin:0;position:relative;isolation:isolate}
.page-head-fig::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,#0C1723 0%,rgba(12,23,35,.42) 42%,rgba(19,36,51,.30) 100%);
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
}
.page-head-fig img{
  width:100%;display:block;
  filter:grayscale(.42) contrast(1.04) brightness(.94);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0%,#000 26%,#000 100%);
}
@media(max-width:900px){
  .page-head-grid{grid-template-columns:1fr;gap:1.6rem}
  .page-head-mark{display:none}
  .page-head-fig{max-width:220px}
}
/* Breadcrumbs sit on the navy, immediately under the head. */

.sec{padding:4rem 0;border-bottom:1px solid var(--line)}
.sec--mist{background:var(--light-mist)}
.sec--navy{background:var(--digilu-navy);color:rgba(255,255,255,.82);border-bottom:0}
.sec--navy h2,.sec--navy h3{color:#fff}
.sec--navy a{color:var(--accent-on-dark)}
.sec--navy .eyebrow{color:var(--accent-on-dark)}
.sec p{color:var(--cool-gray)}
.sec--navy p{color:rgba(255,255,255,.72)}
.sec--intro p{font-size:1.06rem}
/* ONE crumbs rule. There were two: a dark one and this light-theme leftover
   sitting after it, so the later declaration won and put cool-gray on navy at
   3.32:1. Two rules for one component is how a fixed colour un-fixes itself. */
.crumbs{background:#0C1723;border-bottom:0;font-size:12px;color:rgba(255,255,255,.72);
  font-family:var(--font-body);letter-spacing:.03em}
.crumbs .wrap{padding-top:11px;padding-bottom:11px}
.crumbs a{color:rgba(255,255,255,.72);display:inline-block;padding:5px 0}
.crumbs a:hover{color:#fff}
.crumbs span[aria-hidden]{margin:0 8px;opacity:.45}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:.5rem}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{display:block;padding:1.6rem;border:1px solid var(--line);border-radius:8px;background:#fff;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.card:hover{border-color:var(--digilu-navy);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(26,42,52,.09);text-decoration:none}
.card h3{color:var(--digilu-navy);margin-bottom:.4em}
.card p{color:var(--cool-gray);font-size:.92rem;margin-bottom:.7em;max-width:none}
.more{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text)}
.sec--navy .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.sec--navy .card:hover{border-color:var(--accent-on-dark)}
.sec--navy .card p{color:rgba(255,255,255,.6)}
.sec--navy .more{color:var(--accent-on-dark)}

/* ---------- lists, timeline, biblio, stats ---------- */
.list{margin:0 0 1em;padding-left:1.15em}
.list li{margin-bottom:.6em;color:var(--cool-gray);max-width:70ch}
.sec--navy .list li{color:rgba(255,255,255,.72)}
.timeline{list-style:none;margin:0;padding:0}
.timeline>li{position:relative;padding:0 0 2.25rem 1.9rem;border-left:2px solid var(--line);margin-left:6px}
.timeline>li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline>li::before{content:"";position:absolute;left:-7px;top:9px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);border:2px solid #fff}
.timeline h2{font-size:1.35rem;margin-bottom:.15em}
.when{font-family:var(--font-body);font-size:12px;font-weight:500;color:var(--cool-gray);
  letter-spacing:.04em;margin-left:10px;text-transform:none}
.role{font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--accent-text);
  text-transform:uppercase;letter-spacing:.13em;margin-bottom:.8em}
.biblio{list-style:none;margin:0;padding:0}
.biblio>li{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.biblio>li:last-child{border-bottom:0}
.biblio h3{margin-bottom:.25em;font-size:1.05rem}
.meta{font-size:12.5px;color:var(--cool-gray);margin-bottom:.6em;letter-spacing:.02em}
.cite{font-size:12.5px;color:var(--cool-gray);padding-left:14px;border-left:2px solid var(--line)}
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:0 0 1.2em;padding:0}
.stats li{padding:1.4rem;background:#fff;border:1px solid var(--line);border-radius:8px}
.stat{display:block;font-family:var(--font-display);font-weight:700;font-size:2.2rem;
  color:var(--digilu-navy);line-height:1}
.stat-l{display:block;font-size:12.5px;color:var(--cool-gray);margin-top:8px}
.note{font-size:13px;color:var(--cool-gray);padding:12px 16px;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:4px}
.quote{margin:0 0 1.4em;padding:1.2rem 1.6rem;border-left:3px solid var(--accent);background:#fff}
.quote p{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.5rem;
  color:var(--digilu-navy);margin:0 0 .1em;line-height:1.1;max-width:none}
.quote cite{font-style:normal;font-size:11px;color:var(--cool-gray);
  text-transform:uppercase;letter-spacing:.14em;font-family:var(--font-body)}
.sec--mist .quote,.sec--mist .stats li,.sec--mist .note{background:#fff}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;margin-bottom:1.4em}
.split h3{color:var(--digilu-navy);margin-bottom:.4em}
.sec--navy .split h3{color:#fff}
.split p{font-size:.95rem}

/* ---------- form ---------- */
.form{margin-top:1.1rem;max-width:520px}
.form label{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.04em;margin-bottom:5px;color:var(--digilu-navy)}
.opt{font-weight:400;color:var(--cool-gray)}
.form input,.form select,.form textarea{width:100%;padding:11px 13px;margin-bottom:14px;
  border:1px solid #C9D2D6;border-radius:4px;font:inherit;font-size:.94rem;background:#fff;color:var(--digilu-navy)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);outline:none}
.form textarea{resize:vertical}
.form-status{font-size:13.5px;margin-top:12px;min-height:1.2em}
.form-status.ok{color:#12633f}.form-status.err{color:#A12727}
.direct{font-size:13.5px;color:var(--cool-gray);margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line)}

/* ---------- footer ---------- */
.site-footer{background:var(--proof-dark);color:#9AA4AE;padding:3.5rem 0 0;font-size:.9rem}
.site-footer a{color:#9AA4AE}
.site-footer a:hover{color:#fff}
.footer-inner{max-width:var(--container-max);margin:0 auto;padding:0 1.5rem;
  display:grid;grid-template-columns:1.7fr 1fr 1fr 1.15fr;gap:2.5rem}
@media(min-width:1100px){.footer-inner{padding:0 5rem}}
.fbrand p{font-size:13px;line-height:1.6;color:#8A939D;max-width:34ch;margin:14px 0 18px}
.fbrand .site-logo b{font-size:16px}
.fh{font-family:var(--font-body);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:#fff;margin-bottom:14px;font-weight:600}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:9px;font-size:13.5px}
.socials{display:flex;gap:10px}
.social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid #26313A;border-radius:4px;color:#8A939D}
.social:hover{background:#16232B;color:#fff;border-color:#3A4650}
.footer-legal{max-width:var(--container-max);margin:2.75rem auto 0;padding:1.2rem 1.5rem 1.9rem;
  border-top:1px solid #1D2831;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12.5px;color:#8A939D}
@media(min-width:1100px){.footer-legal{padding:1.2rem 5rem 1.9rem}}
.footer-legal p{margin:0;max-width:none}
.footer-legal a{margin-right:16px}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .primary-nav{display:none}
  .burger{display:block}
  .mobile-nav{display:block;position:fixed;inset:var(--nav-h) 0 0;background:var(--digilu-navy);
    z-index:99;overflow-y:auto;padding:1rem 1.5rem 3rem;transform:translateX(100%);transition:transform .22s}
  .mobile-nav.open{transform:translateX(0)}
  .mobile-nav a{display:block;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);color:#fff}
  .m-top{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
    font-size:1.05rem;letter-spacing:.03em}
  .m-sub{padding-left:16px!important;font-size:.9rem;color:rgba(255,255,255,.62)!important}
  body.locked{overflow:hidden}
  .hero-grid{grid-template-columns:1fr;gap:1.5rem}
  /* On a phone the portrait stacks ABOVE the copy, so its height is subtracted
     directly from everything the reader can see before scrolling. It put the
     call to action at 915px on a 734px viewport. Capped against the viewport,
     not against a fixed pixel guess. */
  .hero-fig{order:-1;max-width:min(300px, 34vh);margin-left:0}
  .hero-copy{padding-bottom:1.25rem}
  .cards,.cards--4,.cards--2{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero{padding:2.75rem 0 2.5rem}
  .sec{padding:2.75rem 0}
  .cards,.cards--4,.cards--2,.split,.stats,.footer-inner{grid-template-columns:1fr}
  /* NOT 100%. This is inside the 640px block and was overriding the viewport
     cap set at 1024px, which is why the phone fold fix appeared to do nothing:
     the rule was correct and a later one undid it.
     Measured at 390x734: header 72 + hero padding 44 + portrait + gap 24 +
     eyebrow 32 + h1 51 + lede 126 + sub 97 + cta. The portrait and the wrapped
     button row were the only two items big enough to matter. */
  .hero-fig{max-width:min(216px, 26vh)}
  .hero{padding-top:1.5rem}
  /* Both buttons on ONE row. Wrapped, they were 111px instead of 49px, which is
     most of the difference between the call to action being on the phone screen
     and being under it. */
  .hero .cta-row{flex-wrap:nowrap;gap:9px}
  .hero .cta-row .btn{padding:12px 15px;font-size:12px;letter-spacing:.03em;
    white-space:nowrap;flex:1 1 auto;justify-content:center}
  .footer-legal{flex-direction:column}
  .la-mark{width:70px;height:70px}
}


/* ---------- the five shifts ------------------------------------------
   Two renderings of one drawing, never squeezed. The wide panorama is the
   desktop reading; below 900px it is REPLACED by the stack, because five
   stations compressed into a phone width is an unreadable drawing rather
   than a small one.
   --------------------------------------------------------------------- */
.shift-stack{display:none}
.la-shifts{display:block}
@media(max-width:900px){
  .la-shifts{display:none}
  .shift-stack{display:block;list-style:none;margin:1.5rem 0 0;padding:0}
  .shift-row{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:center;
    padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
  .shift-row:last-child{border-bottom:0}
  .shift-art{width:96px}
  .shift-cap{display:flex;flex-direction:column;gap:2px}
  .shift-date{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.14em;
    color:var(--accent-on-dark)}
  .shift-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
    font-size:1.05rem;letter-spacing:.02em;color:#fff}
}
/* On a light section the stack inverts. */
.sec .shift-row{border-bottom-color:var(--line)}
.sec .shift-label{color:var(--digilu-navy)}
.sec .shift-date{color:var(--accent-text)}

/* ---------- the ladder ------------------------------------------------
   A numbered progression where each step depends on the one above it. Used
   where the argument IS the order: on /ideas/, four bodies of work that are
   one argument at four altitudes.
   --------------------------------------------------------------------- */
.ladder{list-style:none;margin:1.5rem 0 0;padding:0;counter-reset:l}
.ladder>li{display:grid;grid-template-columns:64px 1fr;gap:1.5rem;
  padding:1.75rem 0;border-top:1px solid var(--line)}
.ladder>li:first-child{border-top:0;padding-top:.5rem}
.ladder-n{font-family:var(--font-display);font-weight:700;font-size:2rem;
  color:var(--accent);line-height:1;letter-spacing:.01em}
.ladder h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.28rem;letter-spacing:-.005em;color:var(--digilu-navy);margin-bottom:.5em}
.ladder p{max-width:64ch}
.ladder p:last-child{margin-bottom:0;font-size:.9rem}
@media(max-width:640px){
  .ladder>li{grid-template-columns:1fr;gap:.4rem}
  .ladder-n{font-size:1.4rem}
}

/* ---------- section rhythm --------------------------------------------
   A single paragraph in a full-width section left a large empty column to
   its right and read as an unfinished page. Intro prose is measured, and
   sections that carry only prose are narrower than sections that carry a
   grid.
   --------------------------------------------------------------------- */
.sec--intro .wrap{max-width:920px}
.sec--intro p{font-size:1.09rem;line-height:1.62;max-width:64ch}
.sec h2{max-width:22ch}
.sec--intro h2{max-width:none}
/* A card that is not a link should not pretend to be one. */
.card--static{cursor:default}
.card--static:hover{border-color:var(--line);transform:none;box-shadow:none}
.mt{margin-top:2.2rem}
.ladder--tight>li{padding:1.1rem 0}
.ladder--tight h3{font-size:1.05rem;margin-bottom:.25em}
.ladder--tight p{margin-bottom:0;font-size:.94rem}

/* ---------- tap targets ------------------------------------------------
   A 48-combination sweep found 23 links per page under 24px tall, nearly all
   of them in the footer columns and the legal row. On a phone that is a link
   a thumb misses, and "it looks fine" is not the test: the box has to be big
   enough to hit.
   --------------------------------------------------------------------- */
.fcol li{margin-bottom:2px}
.fcol li a{display:inline-block;padding:7px 0;line-height:1.35}
.footer-legal a{display:inline-block;padding:6px 0}
.socials .social{min-width:44px;min-height:44px}
.crumbs a{display:inline-block;padding:5px 0}
.more{display:inline-block;padding-top:4px}
@media(max-width:1024px){
  .mobile-nav a{padding:15px 0}
  .list li a{display:inline-block;padding:3px 0}
}

/* ---------- editorial section rhythm ----------------------------------
   Every section was a heading and a measured column of prose pinned to the
   left of a 1280px container, which left the right half of every screen
   empty. That is what still read as flat after the hero was fixed: not a
   lack of decoration, a lack of USE of the page.

   The heading now sits in its own rail and the prose runs beside it, which
   is how a printed feature is set. Elements that need the full measure
   (grids, timelines, ladders, figures, stats) span both columns.
   --------------------------------------------------------------------- */
@media(min-width:1000px){
  .sec:not(.sec--intro) > .wrap{
    display:grid;grid-template-columns:minmax(210px,268px) minmax(0,1fr);
    column-gap:3.5rem;align-items:start;
  }
  .sec:not(.sec--intro) > .wrap > h2{
    grid-column:1;grid-row:1;position:sticky;top:calc(var(--nav-h) + 1.6rem);
    margin-bottom:0;max-width:none;
    font-size:clamp(1.35rem,1.9vw,1.75rem);
  }
  .sec:not(.sec--intro) > .wrap > *:not(h2){grid-column:2}
  /* Full-measure elements break the rail. */
  .sec:not(.sec--intro) > .wrap > .cards,
  .sec:not(.sec--intro) > .wrap > .timeline,
  .sec:not(.sec--intro) > .wrap > .stats,
  .sec:not(.sec--intro) > .wrap > .la-band,
  .sec:not(.sec--intro) > .wrap > .epic,
  .sec:not(.sec--intro) > .wrap > .shift-stack{grid-column:1 / -1}
  .sec:not(.sec--intro) > .wrap > h2 + .cards,
  .sec:not(.sec--intro) > .wrap > h2 + .timeline,
  .sec:not(.sec--intro) > .wrap > h2 + .stats{margin-top:.4rem}
  .sec p{max-width:66ch}
}
/* The heading rail gets a hairline so the column reads as deliberate. */
@media(min-width:1000px){
  /* superseded by the spine node above: two accents on one heading is a
     decoration competing with a system */
}

/* The intro carries no heading, so it was centred in its own narrower wrap and
   started at a different x than every section below it. One axis for the whole
   page: the intro takes the same grid with an empty rail. */
@media(min-width:1000px){
  .sec--intro > .wrap{
    max-width:var(--container-max);
    display:grid;grid-template-columns:minmax(210px,268px) minmax(0,1fr);
    column-gap:3.5rem;align-items:start;
  }
  .sec--intro > .wrap > *{grid-column:2}
  .sec--intro > .wrap > .la-band,
  .sec--intro > .wrap > .shift-stack{grid-column:1 / -1}
  .sec--intro p{max-width:66ch}
  /* The note under the stats belongs on the prose axis, not indented again. */
  .sec > .wrap > .note{max-width:66ch}
}

/* ---------- the run ---------------------------------------------------
   Four consecutive years at number one, stated in the house type rather
   than with Entrepreneur's award badges. The badges exist and are real, but
   they are Entrepreneur's trademarked artwork licensed to the RANKED
   COMPANY, which is Stratus Building Solutions and not Mike. Reproducing
   somebody else's mark on a personal site to borrow its authority is the
   move this whole site argues against.
   --------------------------------------------------------------------- */
.run{margin:1.6rem 0 1.1rem}
.run-years{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.run-year{background:#fff;padding:1.1rem .9rem;text-align:center}
.run-rank{display:block;font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  color:var(--accent-text);line-height:1}
.run-y{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.13em;color:var(--cool-gray);margin-top:6px}
.run-cap{font-size:13px;color:var(--cool-gray);margin-top:.85rem;max-width:62ch}
.run-cap strong{color:var(--digilu-navy);font-weight:600}
.sec--navy .run-year{background:rgba(255,255,255,.05)}
.sec--navy .run-years{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.sec--navy .run-rank{color:var(--accent-on-dark)}
.sec--navy .run-y,.sec--navy .run-cap{color:rgba(255,255,255,.62)}
@media(max-width:560px){.run-years{grid-template-columns:repeat(2,1fr)}}

/* ---------- the badges ------------------------------------------------
   Entrepreneur's own award artwork, four consecutive years. Mike earned
   them as the marketing lead and Stratus licensed them; his instruction,
   2026-08-21. They are gold on navy and the site is navy and coral, so
   they sit on a white plate with room around them and are captioned with
   whose marks they are and which company won them.
   --------------------------------------------------------------------- */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;
  align-items:end;margin:.4rem 0 0;max-width:620px}
.badge{margin:0;text-align:center}
.badge img{width:100%;height:auto;filter:drop-shadow(0 4px 12px rgba(26,42,52,.14))}
.badge figcaption{font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.13em;color:var(--cool-gray);margin-top:.5rem}
.sec--navy .badge figcaption{color:rgba(255,255,255,.6)}
@media(max-width:640px){.badges{grid-template-columns:repeat(2,1fr);gap:1.3rem}}

/* A real photograph or artwork inside a section, as opposed to a drawing. */
.shot{margin:2rem 0 .5rem}
.shot img{width:100%;border-radius:6px;box-shadow:0 8px 28px rgba(26,42,52,.13)}
.shot figcaption{font-size:13px;color:var(--cool-gray);margin-top:.85rem;max-width:62ch}
.sec--navy .shot figcaption{color:rgba(255,255,255,.6)}

/* ---------- the portrait ring -----------------------------------------
   A circular photograph seated inside the Digilu aperture. The ring is
   drawn, the photograph is masked to the inner circle, and the coral dot
   sits on the locked 22 degree axis. Sized in one place: change --pr and
   both the frame and the photograph follow.
   --------------------------------------------------------------------- */
.portrait-ring{--pr:300px;position:relative;width:var(--pr);height:var(--pr);
  margin:0 auto;flex-shrink:0}
.portrait-ring .portrait-ring-svg{position:absolute;inset:0;width:100%;height:100%}
.portrait-ring img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--pr) * 0.705);height:calc(var(--pr) * 0.705);
  border-radius:50%;object-fit:cover;object-position:50% 22%}
.portrait-ring figcaption{position:absolute;inset:auto 0 -2.2rem 0;text-align:center;
  font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cool-gray)}

/* The intro that introduces him gets the portrait beside the prose. */
/* The portrait sits directly UNDER the heading, not floating in the middle of
   the prose beside it. align-items:center was dropping it 169px down the block,
   which read as unanchored. Mike, 2026-08-22: "move the circle photo up so it is
   under the title." */
.who{display:grid;grid-template-columns:300px minmax(0,1fr);gap:3.5rem;align-items:start}
.who > div > p:first-child{margin-top:-.35rem}
@media(max-width:900px){
  .who{grid-template-columns:1fr;gap:2rem;justify-items:center;text-align:left}
  .portrait-ring{--pr:240px}
}

/* Instrument marks around the hero portrait, behind it and pushed to the
   edges of the box so nothing ever crosses the face. */
.hero-surround{position:absolute;inset:-6% -10% -4% -14%;width:auto;height:auto;
  z-index:0;pointer-events:none;opacity:.55}
.hero-fig picture{position:relative;z-index:1;display:block}
@media(max-width:900px){.hero-surround{display:none}}


/* --- ported with the observatory drawing, 2026-08-22 --------------------
   The sky it watches. These classes come with the drawing and are useless
   without it, so they arrive together.
   ------------------------------------------------------------------- */
/* --- THE OBSERVED FIELD ----------------------------------------------
   The sky the observatory drawing is watching: two broken bands of the
   operating environment, six labelled signal clusters, and the sweep arc
   the instrument travels through.

   THIS LIVES HERE, NOT IN A PAGE, BECAUSE TWO DRAWINGS SHARE IT. The field
   is on the homepage and on /observatory/, and the whole point of it is
   that the two are visibly the same system. Two inline copies of a visual
   contract that must match is the drift this file exists to prevent, and it
   would go unnoticed for exactly as long as nobody opened both pages at once.

   These are the values from Fig. 1 on /adaptive-brand-management/, not
   approximations of them: anything the organisation does not control is
   dashed and cool-gray, anything it owns is solid navy, coral is spent once.
   ---------------------------------------------------------------------- */
.la .obs-field  { fill: none; stroke: var(--cool-gray); stroke-width: 1; stroke-dasharray: 2 8; opacity: 0.34; }
.la .obs-sweep  { fill: none; stroke: var(--digilu-navy); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.42; }
.la .obs-now    { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.85; }
.la .obs-sigdot { fill: var(--cool-gray); stroke: none; opacity: 0.72; }
.la .obs-siglbl {
  fill: var(--cool-gray); stroke: none;
  font-family: var(--font-accent);
  font-weight: 600; font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.8;
}
/* The labels are the first thing that stops being legible as the drawing
   narrows, and the two furthest from the instrument carry least. They go;
   the field they sit in does not. */
@media (max-width: 640px) {
  .la .obs-siglbl { font-size: 26px; letter-spacing: 0.1em; }
  .la .obs-siglbl--far { display: none; }
}


/* The pen wobble is nulled on small screens: at that size it reads as a
   rendering fault rather than as a hand. */
@media (max-width: 900px){ .la .la-tex { filter: none !important; } }
.la .la-fade-late{opacity:0}
.la.drawn .la-fade-late{opacity:1;transition:opacity .45s ease-out 1.65s}
.obs-fig{max-width:760px;margin:2rem auto .5rem}

/* ---------- FIGURES MUST STRETCH --------------------------------------
   `margin-inline:auto` on a grid item makes it shrink to its intrinsic
   width, and an <svg> with no width attribute has an intrinsic width of
   300px. So every figure inside the two-column section grid was rendering
   at 300px regardless of its max-width: the StratusClean rename drawing was
   300 instead of 820, the observatory 300 instead of 760.

   Nothing errored and nothing overflowed, so the QA sweep passed it. It was
   only visible by measuring the boxes, which is the lesson: "renders without
   error" and "renders at the right size" are different checks.
   --------------------------------------------------------------------- */
.la-fig, .obs-fig, .la-band, .shot, .badges, .run{width:100%}
.la-fig, .obs-fig{margin-inline:0}

/* ---------- the three wins --------------------------------------------
   The homepage's proof block. Numbered, each led by the figure, each
   linking to where it can be checked. Win 02 carries an explicit note that
   the settlements belong to the firm: the claim survives scrutiny because
   it does not overreach, and overreaching on this one would be the easiest
   thing on the site to disprove.
   --------------------------------------------------------------------- */
.wins{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;margin-top:.5rem}
.win{background:#fff;padding:1.9rem 2rem;position:relative}
.win-n{position:absolute;top:1.9rem;right:2rem;font-family:var(--font-display);
  font-weight:700;font-size:1.4rem;color:#6E777F}
/* .win p is (0,1,1) and .win-stat is (0,1,0), so the generic paragraph rule was
   winning and the headline figures rendered at body size. Specificity, not order. */
.win p.win-stat{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;color:var(--accent-text);
  margin:0 0 .55rem;letter-spacing:-.01em;max-width:none}
.win p.win-stat span{display:block;font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cool-gray);margin-top:.5rem}
.win h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.22rem;color:var(--digilu-navy);margin:0 0 .55em;max-width:26ch}
.win p{font-size:.96rem;max-width:62ch}
.win p.win-note{font-size:.86rem;color:var(--cool-gray);padding-left:14px;
  border-left:2px solid var(--line);margin-bottom:0}
.win p.win-link{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:0}
@media(min-width:1000px){
  .wins{grid-template-columns:repeat(3,1fr)}
  .win{padding:2rem 1.6rem}
  .win-n{top:1.4rem;right:1.4rem;font-size:1.1rem}
}
.shot--tall{max-width:400px}
.shot--tall img{border-radius:6px}

/* ---------- logo row and site screenshots -----------------------------
   Real logo files and real screenshots of the live sites. Mike, 2026-08-22:
   the site is too plain. Proof beats another paragraph saying the same thing.
   --------------------------------------------------------------------- */
/* ---------- the properties row ----------------------------------------
   ONE HEIGHT FOR ALL LOGOS IS THE WRONG UNIT and it is what made this row
   read, in Mike's words, all over the place. A stacked mark, a wide serif
   wordmark and a lowercase logotype at identical heights look nothing like
   the same size: measured, the five ranged from 9,959 to 144,980 ink pixels,
   a factor of fourteen.

   Equal ink area does not work either, because a wide thin wordmark would
   have to be 700px across to match a compact stacked mark. So each logo gets
   its own height, set by eye, which is what a real logo strip does. Change
   one and look at the row again; there is no formula here.
   --------------------------------------------------------------------- */
.logorow{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:2rem 2.6rem;margin:1.5rem 0 0;padding:0}
.logorow li{flex:0 0 auto;display:flex;align-items:center}
.logorow img{width:auto;opacity:.82;transition:opacity .2s}
.logorow a{display:block;line-height:0}
.logorow a:hover img{opacity:1}
.logo-digilu img{height:32px}
.logo-marketingob1 img{height:42px}
.logo-marketinghelix img{height:32px}
.logo-elevateorvanish img{height:21px}
.logo-stratusclean img{height:25px}
@media(max-width:820px){
  .logorow{justify-content:flex-start;gap:1.7rem 2.2rem}
  .logo-digilu img{height:25px}
  .logo-marketingob1 img{height:33px}
  .logo-marketinghelix img{height:25px}
  .logo-elevateorvanish img{height:17px}
  .logo-stratusclean img{height:20px}
}
.shot-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:.6rem}
.shot-grid--2{grid-template-columns:repeat(2,1fr)}
.site-shot{margin:0}
.site-shot img{width:100%;border:1px solid var(--line);border-radius:6px;display:block;
  box-shadow:0 6px 20px rgba(26,42,52,.08);transition:transform .18s,box-shadow .18s}
.site-shot a:hover img{transform:translateY(-2px);box-shadow:0 12px 30px rgba(26,42,52,.14)}
.site-shot figcaption{font-family:var(--font-body);font-size:12.5px;color:var(--cool-gray);
  margin-top:.6rem}
.sec--navy .site-shot figcaption{color:rgba(255,255,255,.6)}
.sec--navy .site-shot img{border-color:rgba(255,255,255,.14)}
@media(max-width:700px){.shot-grid,.shot-grid--2{grid-template-columns:1fr}}

/* ---------- question and answer ---------------------------------------
   Written as retrievable PASSAGES. Each answer names the person, both brand
   names, the role and the period, so it survives being lifted out of the
   page. An answer that needs the paragraph above it to make sense cannot be
   retrieved, which defeats the point of writing it.
   --------------------------------------------------------------------- */
.qa{margin:0 0 2rem}
.qa-item{padding:1.15rem 0;border-bottom:1px solid var(--line)}
.qa-item:first-child{padding-top:0}
.qa-item:last-child{border-bottom:0}
.qa-item h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.08rem;color:var(--digilu-navy);margin-bottom:.45em;max-width:34ch}
.qa-item p{margin-bottom:0;font-size:.96rem}

/* ---------- before and after ------------------------------------------
   The two marks side by side. The old logo carries three buildings, which is
   the whole reason the market read a cleaning company as construction, so
   the pair makes the argument faster than the paragraph above it can.
   Each sits on a white plate because one is a full-colour RGB file and the
   other has a transparent ground; without the plate they would read as two
   different kinds of object.
   --------------------------------------------------------------------- */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:center;
  margin:1.8rem 0 .5rem}
.ba-item{margin:0}
.ba-plate{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:1.6rem 1.4rem;display:flex;align-items:center;justify-content:center;
  min-height:132px}
.ba-plate img{max-width:100%;height:auto;max-height:76px;width:auto}
.ba-item figcaption{font-size:12.5px;color:var(--cool-gray);margin-top:.7rem;line-height:1.5}
.ba-tag{display:inline-block;font-family:var(--font-body);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cool-gray);
  border:1px solid var(--line);border-radius:3px;padding:2px 7px;margin-right:7px}
.ba-tag--after{color:var(--accent-text);border-color:rgba(226,85,61,.4)}
.ba-arrow{color:var(--cool-gray);width:60px;opacity:.7}
.ba-arrow svg{width:100%;height:auto}
@media(max-width:700px){
  .ba{grid-template-columns:1fr;gap:1rem}
  .ba-arrow{width:34px;transform:rotate(90deg);margin:0 auto}
}

/* The rename drawing and the two logos are ONE unit: the drawing states the
   idea and the marks are the evidence for it. Stacked margins were putting
   73px between them, which read as two separate things that happened to be
   near each other. */
.la-fig + .ba{margin-top:.35rem}
.la-fig:has(+ .ba){margin-bottom:.5rem}

/* ---------- speaking: the head form, and the rooms ----------
   The head form is the ONLY form on the site that sits on navy, so it inverts
   rather than inheriting: white labels, translucent fields, and a border that
   reads against the gradient instead of disappearing into it. */
.page-head-form{margin:0}
.page-head-form .phf-lede{color:rgba(255,255,255,.72);font-size:.92rem;margin:0 0 .9rem;
  font-family:var(--font-accent)}
.form--head{margin-top:0;max-width:none;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:1.15rem 1.15rem .95rem}
.form--head label{color:rgba(255,255,255,.78)}
.form--head .opt{color:rgba(255,255,255,.45)}
.form--head input,.form--head textarea{background:rgba(255,255,255,.94);border-color:transparent;
  margin-bottom:11px;font-size:.9rem;padding:9px 11px}
.form--head input::placeholder{color:#8B9AA3}
.form--head .btn{width:100%;margin-top:.15rem;justify-content:center;
  background:var(--accent-solid);border-color:var(--accent-solid)}
.form--head .btn:hover{background:#fff;color:var(--digilu-navy);border-color:#fff}
.form--head .form-status{color:rgba(255,255,255,.8);margin-top:9px}
.form--head .form-status.ok{color:#8FE3B8}
.form--head .form-status.err{color:#FFB4A6}
.phf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:520px){.phf-row{grid-template-columns:1fr}}
/* A form needs more of the head than a portrait did. Scoped to the wide
   breakpoint on purpose: this rule is later and more specific than the
   max-width:900px stack rule, so unscoped it held two columns at 390px and put
   the whole booking form in a 160px gutter. */
@media(min-width:901px){
  .page-head:has(.page-head-form) .page-head-grid{grid-template-columns:1.05fr .95fr;align-items:start}
  /* The header overlays the top of this section. A portrait or a mark is
     vertically centred so it never noticed; a form column starts at the very
     top, and on /media/ the first line of its lede was sitting behind the nav. */
  .page-head:has(.page-head-form){padding-top:4.5rem}
}
.page-head:has(.page-head-form) .lede{margin-bottom:0}

/* The rooms. One wide plate, then the rest in a grid: five photographs of the
   same claim at five different scales is the evidence, and a single hero shot
   is not. */
.shots--speaking{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
.shots--speaking .shot{margin:0;display:flex;flex-direction:column}
.shots--speaking .shot--wide{grid-column:1 / -1}
/* NO CSS CROP. The files are already the shape they need to be, cropped
   deliberately at generation. object-fit:cover with an aspect-ratio took the
   top off a portrait photograph and cut his head off on the live page: a
   centre crop does not know where the subject is, and a person is never in
   the middle of a stage photograph. */
.shots--speaking .shot img{height:auto;display:block}
.shots--speaking figcaption{margin-top:.6rem;font-size:12.5px}
@media(max-width:900px){.shots--speaking{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shots--speaking{grid-template-columns:1fr}}

/* The three facts the room wants before it fills anything in. */
.head-points{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.6rem 0 0;padding:1.3rem 0 0;
  border-top:1px solid rgba(255,255,255,.14);list-style:none}
.head-points li{color:rgba(255,255,255,.78);font-size:.9rem;max-width:16ch}
.head-points b{display:block;color:#fff;font-family:var(--font-display);font-size:1.5rem;
  letter-spacing:.01em;margin-bottom:.15rem}
@media(max-width:900px){.head-points{gap:1.1rem}.head-points li{font-size:.84rem}}

/* ---------- the primary CTA ----------
   AIOInsights, in the header on every page and first in the mobile drawer.
   Mike, 2026-08-22: this is the primary CTA and speaking is the secondary one.
   Coral, because on this site nothing else is: the accent has been spent one
   stroke at a time in the drawings, and a button wearing it reads as the one
   thing the page is asking for. */
.nav-cta{display:inline-flex;align-items:center;margin-left:auto;padding:8px 14px;
  border-radius:4px;background:var(--accent-solid);color:#fff;font-family:var(--font-body);
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;transition:background .2s,color .2s}
.nav-cta:hover{background:#fff;color:var(--digilu-navy);text-decoration:none}
.m-cta{display:block;margin:0 0 .4rem;padding:14px 0;color:var(--accent-on-dark);
  font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase}
/* it sits between the nav and the burger, so it needs its own right margin
   once the burger appears */
.nc-short{display:none}
@media(max-width:1180px){.nav-cta{margin-right:1rem;padding:7px 12px;font-size:11px}}
@media(max-width:560px){.nav-cta{margin-right:.7rem;padding:7px 10px;letter-spacing:.03em}
  .nc-long{display:none}.nc-short{display:inline}}
/* The lead card is the primary CTA in card form: it is the one that leaves the
   site, so it says so rather than looking like the three beside it. */
.card--lead{border-color:var(--accent-solid);box-shadow:0 6px 22px rgba(201,69,47,.10)}
.card--lead .more{color:var(--accent-solid)}
.cta-note{font-size:13px;color:rgba(255,255,255,.55);margin:.85rem 0 0}

/* ---------- the three that mattered most: a picture each ----------
   Mike, 2026-08-22: "We need impact with visuals not just a bunch of words."
   Three columns of body copy asked the reader to take three claims on trust
   and gave them nothing to look at while deciding. */
.win-media{margin:0 0 1.4rem;border-radius:6px;overflow:hidden;background:var(--light-mist);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.win-media img{width:100%;height:100%;object-fit:cover;display:block}
/* the badges: four of them, overlapping, the fourth at full size in front */
.win-media--badges{position:relative;background:linear-gradient(160deg,#1B2C3A,#0C1723);
  padding:0}
.win-media--badges .wb{position:absolute;height:74%;width:auto;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.win-media--badges .wb--1{left:6%;height:56%;opacity:.72}
.win-media--badges .wb--2{left:22%;height:64%;opacity:.82}
.win-media--badges .wb--3{left:40%;height:72%;opacity:.92}
.win-media--badges .wb--4{left:60%;height:92%}
/* the names, set as a plate. Not logos: these are people, and we hold no marks */
.win-media--names{flex-direction:column;gap:.15rem;padding:1rem;text-align:center;
  background:linear-gradient(160deg,#1B2C3A,#0C1723)}
.win-media--names span{font-family:var(--font-display);font-size:clamp(.8rem,1.5vw,1rem);
  color:rgba(255,255,255,.5);letter-spacing:.02em;line-height:1.25}
.win-media--names .nm-lead{font-size:clamp(1.15rem,2.4vw,1.7rem);color:#fff}
@media(max-width:900px){.win-media{margin-bottom:1rem}}
/* the StratusClean photographs: two landscape, one portrait, so the row is
   defined by a fixed height rather than by whichever image is tallest */
.shots--stratus{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.shots--stratus .shot{margin:0}
.shots--stratus img{width:100%;height:300px;object-fit:cover;display:block}
.shots--stratus figcaption{margin-top:.6rem;font-size:12.5px}
@media(max-width:820px){.shots--stratus{grid-template-columns:1fr}
  .shots--stratus img{height:auto}}
.shot--wide-photo{margin:1.6rem 0 .5rem;max-width:620px}
.shot--band{max-width:none;margin:2rem 0 0}
.shot--band img{width:100%;border-radius:6px}
.shot--face{max-width:190px;margin:0 0 1.4rem}
.shot--face img{border-radius:50%;aspect-ratio:1;object-fit:cover}

/* ---------- THE THREE THAT MATTERED MOST ----------
   Mike, 2026-08-22: "Make those epic. That is the entire story." It was three
   narrow columns of body copy under three small pictures, which is a layout for
   things of equal, minor weight. These are the proof the whole site rests on,
   so each one gets a full row, a photograph at a size you can read, and a
   number set large enough to be the first thing on the page after his name.

   It runs on navy, continuing the hero rather than interrupting it: the three
   claims and the hero are one argument. */
.sec--epic{background:linear-gradient(180deg,#0C1723 0%,#132433 60%,#1B2C3A 100%);
  color:#fff;border-bottom:0;padding:4.6rem 0 4.2rem}
.sec--epic h2{color:#fff}
.sec--epic > .wrap > p{color:rgba(255,255,255,.66);max-width:58ch}
.epic{list-style:none;margin:3rem 0 0;padding:0;display:flex;flex-direction:column;gap:4.4rem}
.epic-row{display:grid;grid-template-columns:1.02fr .98fr;gap:3.2rem;align-items:center}
.epic-row--flip .epic-fig{order:2}
.epic-fig{margin:0;border-radius:8px;overflow:hidden;background:rgba(255,255,255,.04);
  box-shadow:0 18px 50px rgba(0,0,0,.38)}
.epic-fig img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/10}
/* THE BADGES, FANNED. Mike, 2026-08-22, on the two-by-two white plate that
   replaced this: "This photo of the 4 years in a row is terrible. The other one
   was so much better."
   
   He is right and the reason is that the argument is SEQUENCE. Four years in a
   row is a run, and a run reads as overlapping cards in order, each one further
   forward than the last, with the fourth largest because it is the one
   Entrepreneur records as a first in the history of the list. A grid of four
   equal squares says four separate things happened.
   
   The permission condition from his 2026-08-21 instruction is unchanged and is
   the caption, not the plate: these are Entrepreneur Media's marks, licensed to
   Stratus Building Solutions, and the figure says so. My first fan sized them
   by HEIGHT, which on a 220x308 badge drives the width, and the fourth one ran
   off the frame. They are sized by width now, and the four of them end at 86%
   of the box. */
/* overflow:hidden on .epic-fig clipped the caption, which is the part the
   permission condition actually turns on */
.epic-fig--badges{position:relative;aspect-ratio:16/10;background:none;box-shadow:none;
  border-radius:0;overflow:visible}
.epic-fig--badges .fan{position:absolute;inset:0;border-radius:10px;
  background:radial-gradient(120% 100% at 62% 40%,rgba(255,255,255,.10),rgba(255,255,255,.02) 60%,transparent);
  border:1px solid rgba(255,255,255,.08)}
.epic-fig--badges .wb{position:absolute;top:50%;height:auto;
  aspect-ratio:auto;object-fit:contain;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.55))}
.epic-fig--badges .wb--1{left:1%;width:28%;transform:translateY(-53%) rotate(-5deg);opacity:.66}
.epic-fig--badges .wb--2{left:19%;width:29%;transform:translateY(-50%) rotate(-2.5deg);opacity:.8}
.epic-fig--badges .wb--3{left:38%;width:30%;transform:translateY(-47%);opacity:.92}
.epic-fig--badges .wb--4{left:57%;width:36%;transform:translateY(-44%) rotate(2.5deg)}
.epic-fig--badges figcaption{position:absolute;left:0;right:0;bottom:-2.6rem;
  font-size:12px;color:rgba(255,255,255,.5);max-width:52ch}
.epic-row:has(.epic-fig--badges){margin-bottom:2.4rem}
@media(max-width:900px){
  .epic-fig--badges figcaption{position:static;margin-top:.8rem}
  .epic-row:has(.epic-fig--badges){margin-bottom:0}
}
.epic-n{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.16em;color:rgba(255,255,255,.38);margin-bottom:.7rem}
/* .epic-copy p is a class+element selector and beats a bare .epic-stat, so the
   number rendered at body size. Specificity, not cascade order. */
.epic-copy p.epic-stat{font-family:var(--font-display);color:var(--accent-on-dark);
  font-size:clamp(2.9rem,6vw,5rem);line-height:.95;margin:0 0 .9rem;max-width:none}
.epic-stat span{display:block;font-family:var(--font-body);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.7rem}
.epic-copy h3{color:#fff;font-size:clamp(1.25rem,2.1vw,1.7rem);margin:0 0 .9rem}
.epic-copy p{color:rgba(255,255,255,.74);font-size:1rem;margin:0 0 .85rem;max-width:52ch}
.epic-copy a{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.epic-note{border-left:2px solid rgba(255,255,255,.2);padding-left:1rem;
  font-size:.9rem !important;color:rgba(255,255,255,.55) !important}
.epic-link a{font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-on-dark);text-decoration:none}
.epic-link a:hover{text-decoration:underline}
@media(max-width:900px){
  .epic{gap:3rem}
  .epic-row,.epic-row--flip{grid-template-columns:1fr;gap:1.5rem}
  .epic-row--flip .epic-fig{order:0}
}

/* ================= THE SPINE ==========================================
   Mike, 2026-08-22: "The homepage different sections feel very disjointed and
   nothing connects them... Something needs to be fixed to make it all look like
   one thing yet separate."

   The diagnosis under that is real. Every section already had a heading rail,
   and a rail with nothing running through it is just an indent: it separated
   without connecting, so the page read as a stack of unrelated slabs that
   happened to share a font.

   So the rail becomes a SPINE. One hairline runs the length of the page in the
   heading column, and every section puts a coral node on it. That is the whole
   device: continuous line for the one thing, node for the separate parts. It
   costs one pseudo-element per section and no markup at all.
   ===================================================================== */
@media(min-width:1000px){
  /* THE LINE lives on the wrap, so it runs through EVERY section including the
     intro-style ones whose heading is not in the rail. A spine that skips a
     section is not a spine, it is a decoration on some of them. */
  .sec > .wrap{position:relative}
  .sec > .wrap::before{
    content:"";position:absolute;left:3px;top:-4rem;bottom:-4rem;width:1px;
    background:var(--line);pointer-events:none;
  }
  .sec--navy > .wrap::before,.sec--epic > .wrap::before{background:rgba(255,255,255,.26)}
  /* THE NODE marks where one part ends and the next begins. */
  .sec:not(.sec--intro) > .wrap > h2{position:relative;padding-left:22px}
  .sec:not(.sec--intro) > .wrap > h2::after{
    content:"";position:absolute;left:-15px;top:.42em;width:7px;height:7px;border-radius:50%;
    background:var(--accent);margin:0;display:block;
  }
  .sec--navy:not(.sec--intro) > .wrap > h2::after,
  .sec--epic > .wrap > h2::after{background:var(--accent-on-dark)}
  /* an intro section has no heading in the rail, so the node goes on the wrap */
  .sec--intro > .wrap::after{
    content:"";position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;
    background:var(--accent);
  }
  .sec--epic > .wrap > h2{position:static}
}

/* ---------- the seam ---------------------------------------------------
   A navy section meeting a white one edge to edge is the jump he described.
   A seam band carries the navy down into the light section for 64px, so the
   change of ground is a transition rather than a cut. */
.seam{height:64px;background:linear-gradient(180deg,#0C1723 0%,#132433 40%,var(--light-mist) 100%);
  border:0}
.seam--up{background:linear-gradient(180deg,var(--light-mist) 0%,#132433 60%,#0C1723 100%)}

/* ---------- branded cards ---------------------------------------------
   Mike: "Add logos to the current work. Or just the icons. Something. Needs to
   look better." Every one of these logo files is the white variant, which is
   why they were not already there: a white mark on a white card is nothing. A
   navy chip inside the card gives each one its own ground. */
.cards--brand{grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card--brand{display:flex;flex-direction:column}
.card-mark{display:flex;align-items:center;justify-content:flex-start;height:62px;
  padding:0 16px;margin:-1.6rem -1.6rem 1.1rem;border-radius:6px 6px 0 0;
  background:linear-gradient(135deg,#1B2C3A,#0C1723)}
.card-mark img{max-height:30px;max-width:170px;width:auto;height:auto;display:block}
.card--brand h3{margin-bottom:.45em}
.card--brand .more{margin-top:auto}
@media(max-width:1000px){.cards--brand{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards--brand{grid-template-columns:1fr}}

/* A sticky heading and a FULL-WIDTH child are incompatible: the heading follows
   the reader down and lands on top of the thing it is introducing. It showed up
   the moment the cards gained dark logo chips, but it was always true. Sections
   whose content spans both columns keep their heading in place. */
@media(min-width:1000px){
  .sec:not(.sec--intro) > .wrap:has(> .cards) > h2,
  .sec:not(.sec--intro) > .wrap:has(> .epic) > h2,
  .sec:not(.sec--intro) > .wrap:has(> .timeline) > h2,
  .sec:not(.sec--intro) > .wrap:has(> .stats) > h2{position:static}
}

/* ---------- section edges ----------------------------------------------
   Mike, 2026-08-22: "The bg's all blend together. The homepage doesn't feel
   connected." Two different faults with one symptom.
   
   BLENDING was the palette: white against #F4F7F8 is a two percent step and
   reads as one continuous field, so eight sections looked like one long page
   with headings in it. The mist is darker now and every section carries a top
   edge, so a boundary is a fact rather than an inference.
   
   NOT CONNECTED is the opposite fault and needs the opposite fix: the sections
   are separated by the spine and joined by it, which only works if the line
   actually crosses the seam. It runs 4rem past each end for that reason. */
.sec{border-top:1px solid var(--line);border-bottom:0}
.sec + .sec{border-top:1px solid var(--line)}
.sec--mist{background:var(--light-mist)}
/* On dark ground the hairline inverts, and the epic band gets a coral tick at
   its own top edge because it is the one section that is the argument rather
   than a part of it. */
.sec--navy,.sec--epic{border-top-color:rgba(255,255,255,.14)}
.sec--epic{position:relative}
.sec--epic::before{content:"";position:absolute;top:-1px;left:0;width:120px;height:2px;
  background:var(--accent);z-index:2}
.hero + .sec--epic{border-top-color:rgba(255,255,255,.14)}

/* ---------- a figure BESIDE the prose, not under it --------------------
   Mike, on the ABM page: "Please move weather vein up next to the text
   paragraph instead of below it." A drawing under two paragraphs is a footnote;
   beside them it is read at the same time as the sentence it illustrates. */
.intro-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.6rem;align-items:start}
.intro-split .la-fig--beside{margin:0;max-width:300px;width:100%}
.intro-split p:last-child{margin-bottom:0}
@media(max-width:820px){
  .intro-split{grid-template-columns:1fr;gap:1.6rem}
  .intro-split .la-fig--beside{max-width:280px;margin:0 auto}
}
/* Hachures, in the idiom of the digilu climb this drawing is lifted from:
   short strokes down the fall line, lighter than the outline so the silhouette
   carries the form and the hatching only describes the face. */
.la .la-earth{stroke:var(--digilu-navy);stroke-width:1;opacity:.28;fill:none}
.la--dark .la-earth{stroke:rgba(255,255,255,.5);opacity:.34}
/* A wide head mark takes a wide column. */
@media(min-width:901px){
  .page-head:has(.page-head-mark--wide) .page-head-grid{grid-template-columns:1fr 1fr}
}
.page-head-mark--wide .la{max-width:460px}