/* 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--dark .la-lbl.la-date{fill:var(--accent-on-dark)}

.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;
}
/* Centered on the portrait, not anchored to the floor. The copy used to end in a
   CTA row that filled the bottom of the column; with the record leading instead,
   bottom alignment left a dead band above the name. */
.hero-copy{padding-bottom:clamp(1.5rem,4vh,3rem);align-self:center}
.hero-copy > :last-child{margin-bottom:0}
.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:28ch;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. */
  /* Cropped to the frame 1080 x 1250 (source rows 90 to 1340: head to below the hands), and drawn
     about 13% larger than the full-length plate it replaced (Mike, 2026-09-21). */
  /* Smaller once the hero lost its buttons (Mike, 2026-09-23): with only the name,
     one line and the credentials beside it, a 600px portrait outweighed the copy. */
  max-width:min(470px, calc((100vh - var(--nav-h) - 14rem) * 0.7));}
/* THE CROP. The box carries the crop's aspect ratio and the photograph is
   scaled UNIFORMLY to cover it (object-fit: cover), so nothing is ever
   stretched: the only thing that changes is how much of the plate shows. */
.hero-fig picture{aspect-ratio:1080 / 1250;overflow:hidden}
.hero-fig picture img{height:100%;object-fit:cover;object-position:50% 47%}
/* 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(340px, 38vh);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(244px, 29vh)}
  .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}
}
/* In the hero the five shifts are one compact row on a phone, not five tall
   rows: stacked, they pushed the record two screens down, and the record is
   what the first screen exists to lead into. The stack stays on light sections. */
@media(max-width:900px){
  .hero-floor .shift-stack{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;
    margin:1rem 0 0;padding:0 1rem .75rem}
  .hero-floor .shift-row{display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:.4rem;padding:0;border:0}
  .hero-floor .shift-art{width:100%;max-width:72px}
  .hero-floor .shift-art .la{padding:0;max-width:none}
  /* The axis: a rule runs through every cell at the dot, so the five read as one
     line in time. Date above label, the last dot coral. */
  .hero-floor .shift-cap{align-items:center;gap:3px;position:relative;width:100%;padding-top:16px}
  .hero-floor .shift-cap::after{content:"";position:absolute;top:4px;left:-.2rem;right:-.2rem;
    height:1px;background:rgba(255,255,255,.28)}
  .hero-floor .shift-cap::before{content:"";position:absolute;top:0;left:50%;margin-left:-4.5px;
    width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.6);z-index:1}
  .hero-floor .shift-row:first-child .shift-cap::after{left:50%}
  .hero-floor .shift-row:last-child .shift-cap::after{right:50%}
  .hero-floor .shift-row:last-child .shift-cap::before{background:var(--accent-on-dark)}
  .hero-floor .shift-label{font-size:.7rem;line-height:1.1;letter-spacing:.03em}
  .hero-floor .shift-date{font-size:10.5px;letter-spacing:.1em}
}
/* 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. */
  /* top:auto matters: the sticky rule above set top:97.6px, and once position
     became relative that offset pushed every rail heading ~98px below the top
     of its own section, on every page. */
  .sec:not(.sec--intro) > .wrap > h2{position:relative;top:auto;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){
  /* relative, not static: static threw the spine node off the heading and
     onto the corner of the section. */
  .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:relative;top:auto}
}

/* ---------- 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}

/* ---------- films and diagrams -----------------------------------------
   Real material from the properties that published it: YouTube films as a
   click-to-play thumbnail (nothing loads from YouTube until asked), and the
   Marketing Helix's own diagrams rather than a redrawing of them. */
.films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.film{margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.film-frame{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:0;
  background:#0C1723;cursor:pointer;overflow:hidden}
.film-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.film-frame:hover img{transform:scale(1.02)}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-play{position:absolute;inset:0;display:grid;place-items:center}
.film-play svg{width:62px;height:62px}
.film-play circle{fill:rgba(12,23,35,.82)}
.film-play path{fill:#fff}
.film-frame:hover .film-play circle,.film-frame:focus-visible .film-play circle{fill:var(--accent-solid)}
.film figcaption{padding:.9rem 1.1rem 1.05rem;display:flex;flex-direction:column;gap:.2rem}
.film figcaption strong{font-family:var(--font-accent);font-weight:600;color:var(--digilu-navy);line-height:1.3}
.film figcaption span{font-size:.88rem;color:var(--cool-gray)}
.figpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin:1.6rem 0}
.diagram{margin:0;background:#fff;border:1px solid var(--line);border-radius:8px;padding:1rem 1rem .9rem}
.diagram img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain}
.diagram figcaption{font-size:.9rem;color:var(--digilu-navy);font-weight:600;margin-top:.5rem;text-align:center}
.diagram-credit{font-size:.85rem;color:var(--cool-gray)}
.page-head-mark .mh-mark{width:100%;max-width:230px;height:auto;display:block;margin-left:auto}
@media(max-width:700px){.films,.figpair{grid-template-columns:1fr}}


/* ---------- prose weight -----------------------------------------------
   Inner pages read washed out next to the homepage: every paragraph was
   cool-gray on white, so a page of record read like a page of footnotes. Prose
   is a dark slate now, and an intro's opening paragraph is a standfirst in navy,
   the way the homepage hero line leads. Dark sections keep their own rules. */
.sec:not(.sec--navy):not(.sec--epic) > .wrap > p,
.sec:not(.sec--navy):not(.sec--epic) > .wrap > .list li,
.sec:not(.sec--navy):not(.sec--epic) .biblio p:not(.meta):not(.cite){color:#3B4552}
.sec--intro > .wrap > p:first-of-type{font-size:clamp(1.12rem,1.5vw,1.28rem);line-height:1.55;
  color:var(--digilu-navy)}

/* ---------- the record band --------------------------------------------
   Mike, 2026-09-23: the proof section read as a continuation of the hero, one
   navy field. It now sits on its own ground: near-black, a fine ledger grid
   (this is the part of the page that can be checked, so it is drawn on paper
   meant for checking), and one coral glow at the top edge where the hero hands
   off. The grid fades toward the bottom so it is texture, not a pattern. */
.sec--epic{
  background:
    radial-gradient(900px 420px at 88% -60px, rgba(232,93,63,.16), transparent 70%),
    radial-gradient(700px 380px at 6% 100%, rgba(79,125,170,.10), transparent 70%),
    #070E15;
}
.sec--epic > .wrap{position:relative;z-index:1}
.sec--epic::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 100%)}
.hero + .sec--epic{border-top:1px solid rgba(232,93,63,.35)}
/* The three rows ran together on one dark field, and a lifted band on the
   middle one cut it off from the other two. They stay on one ground and are
   divided by a hairline rule with a short coral lead, the same mark that opens
   the section: three entries in one record, not three separate panels. */
.sec--epic{overflow-x:clip}
.epic{gap:0}
.epic > li + li{position:relative;margin-top:2.6rem;padding-top:2.6rem;
  border-top:1px solid rgba(255,255,255,.12)}
.epic > li + li::before{content:"";position:absolute;left:0;top:-1px;width:72px;height:2px;
  background:var(--accent-on-dark)}

/* ---------- hero texture ------------------------------------------------
   Mike, 2026-09-23: the hero should carry the same kind of texture as the
   digilu.com hero. Same two layers, same values: a 28px dot matrix and an 80px
   hairline grid, masked to fade at the edges. Color is untouched. Sits under
   .hero-grid (z-index 2) and the floor drawing. */
.hero::before,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.hero::before{background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:28px 28px}
.hero::after{background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 40%,transparent 100%)}

/* ---------- authority pass, 2026-09-23 --------------------------------
   Homepage copy is supplied; these rules only set it. Text links over
   buttons, one megamenu of the record, a footer that is not a directory. */
.hero .lede{max-width:36ch;font-size:clamp(1.02rem,min(1.75vw,2.2vh),1.3rem);line-height:1.42}
.h-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:.55rem}
.sec--epic .h-eyebrow,.sec--navy .h-eyebrow{color:var(--accent-on-dark)}
.epic-eyebrow{display:block;font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-on-dark);margin:.4rem 0 .55rem}
.epic-copy h3{font-size:clamp(1.35rem,2vw,1.7rem)}
.epic-source{font-size:.88rem;color:rgba(255,255,255,.6)}
.epic-source a{color:#fff}
.pattern{font-family:var(--font-accent);font-size:clamp(1.12rem,1.6vw,1.34rem);line-height:1.7;
  color:var(--digilu-navy)!important;max-width:60ch}
.textlinks{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.1rem}
.textlinks a{font-family:var(--font-body);font-weight:600;font-size:.95rem;color:var(--accent-text);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.textlinks a:hover{color:var(--digilu-navy)}
.ideas3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;margin-top:1.8rem;
  border-top:1px solid var(--line);padding-top:1.6rem}
.idea h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.2rem;
  letter-spacing:.01em;color:var(--digilu-navy);margin:0 0 .4rem}
.idea .idea-tag{font-weight:600;color:var(--digilu-navy)!important;margin-bottom:.6rem}
.idea p{font-size:.97rem}
.idea .textlinks{margin-top:.4rem}
@media(max-width:900px){.ideas3{grid-template-columns:1fr;gap:1.6rem}}
.sec--route > .wrap > p:first-child{font-size:1.1rem;color:var(--digilu-navy)}
/* megamenu: the record, three columns of text rows */
.mm-record{padding:14px 10px;gap:6px}
.mm-rec-col{display:flex;flex-direction:column;gap:6px;width:250px}
.mm-record .mm-group + .mm-group{margin-top:4px;border-top:1px solid rgba(255,255,255,.08);padding-top:4px}
.mm-record .mm-ds{line-height:1.4}
/* mobile More group */
.m-more summary{list-style:none;cursor:pointer;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);color:#fff}
.m-more summary::-webkit-details-marker{display:none}
.m-more summary::after{content:" +";color:var(--accent-on-dark)}
.m-more[open] summary::after{content:" \2212"}
/* footer descriptions */
.fdesc{font-size:12.5px;line-height:1.5;color:#8A939D;margin:.2rem 0 0;max-width:26ch}
@media(min-width:1025px){.footer-inner{grid-template-columns:1.1fr 1fr 1fr 1fr 1.1fr}}
@media(min-width:1000px){.sec:not(.sec--intro) > .wrap > .ideas3{grid-column:1 / -1}}
.la .la-date,.shift-date{text-transform:none}
/* The ledger grid now runs the full height of the record band, so the three
   results sit on one continuous sheet, with a coral glow at each end and one
   at the middle row. It only fades in the last few percent. (Mike, 2026-09-23) */
.sec--epic{
  background:
    radial-gradient(900px 420px at 88% -60px, rgba(232,93,63,.16), transparent 70%),
    radial-gradient(760px 460px at 8% 50%, rgba(232,93,63,.08), transparent 70%),
    radial-gradient(900px 420px at 90% 100%, rgba(232,93,63,.10), transparent 70%),
    #070E15;
}
.sec--epic::after{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 92%,transparent 100%)}

/* ======================================================================
   HEADER + SITE INDEX (2026-09-23)
   The six destinations stay in view; MENU opens the full index. On the
   homepage the mark is the monogram alone so the hero H1 is the only name
   on the first screen. The index is a designed layer, not a dropdown: the
   five-eras climb on the left, the record weighted on the right.
   ====================================================================== */
.site-header{box-shadow:0 1px 0 rgba(255,255,255,.06)}
.header-right{display:flex;align-items:center;gap:18px}
.site-header--home .site-logo svg{height:32px;width:auto}
.nav-link{font-size:13.5px;letter-spacing:.01em;padding:9px 11px}
.menu-btn,.burger{display:inline-flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;
  font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;padding:10px 0 10px 18px;border-left:1px solid rgba(255,255,255,.16);height:auto;width:auto}
.menu-btn:hover .mb-text,.menu-btn[aria-expanded=true] .mb-text{color:var(--accent-on-dark)}
.mb-ind{position:relative;width:11px;height:11px;display:inline-block}
.mb-ind::before,.mb-ind::after{content:"";position:absolute;left:0;top:5px;width:11px;height:1.5px;
  background:currentColor;transition:transform .18s}
.mb-ind::after{transform:rotate(90deg)}
[aria-expanded=true] .mb-ind::before{transform:rotate(45deg)}
[aria-expanded=true] .mb-ind::after{transform:rotate(-45deg)}
.burger span:not(.mb-text):not(.mb-ind){display:none}
.burger{display:none}

/* the index panel */
.site-index{position:absolute;left:0;right:0;top:100%;background:#0B151D;
  border-top:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease}
.site-index.open{opacity:1;transform:none}
.site-index::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px}
.ix-inner{position:relative;max-width:var(--container-max);margin:0 auto;padding:3.2rem 5rem 3.4rem;
  display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:4.5rem}
.ix-visual{border-right:1px solid rgba(255,255,255,.08);padding-right:3.5rem;display:flex;flex-direction:column;justify-content:center}
.ix-visual .five-eras{width:100%;max-width:400px;height:auto}
.ix-eyebrow{display:block;margin-top:1.6rem;font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-on-dark)}
.ix-line{margin:.45rem 0 0;font-family:var(--font-accent);font-size:1.15rem;color:rgba(255,255,255,.82);max-width:30ch}
.ix-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem}
.ix-col{display:flex;flex-direction:column;gap:1.9rem}
.ix-label{display:block;padding-bottom:.7rem;margin-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.ix-link{display:block;padding:.35rem 0 .75rem;color:#fff}
.ix-link:hover{text-decoration:none}
.ix-name{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.05;transition:color .15s}
.ix-name::after{content:"\2192";font-family:var(--font-body);font-weight:400;font-size:.75em;opacity:0;
  transform:translateX(-4px);transition:opacity .15s,transform .15s;color:var(--accent-on-dark)}
.ix-link:hover .ix-name,.ix-link:focus-visible .ix-name{color:var(--accent-on-dark)}
.ix-link:hover .ix-name::after,.ix-link:focus-visible .ix-name::after{opacity:1;transform:none}
.ix-desc{display:block;margin-top:.35rem;font-family:var(--font-body);font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.55)}
.ix-t1 .ix-name{font-size:25px}
.ix-t2 .ix-name{font-size:19px}
.ix-t3 .ix-name{font-family:var(--font-body);font-weight:600;text-transform:none;font-size:14.5px;letter-spacing:0}
.ix-col--quiet{gap:1.4rem}
.ix-col--quiet .ix-desc{font-size:12px}
@media(max-width:1180px){.ix-inner{padding:2.6rem 1.5rem;gap:2.5rem}.ix-visual{padding-right:2rem}}

/* tablet and phone: the six collapse into the MENU panel */
@media(max-width:1024px){
  .primary-nav,.menu-btn,.site-index{display:none!important}
  .burger{display:inline-flex}
  .mobile-nav{padding:1.25rem 1.5rem 3rem}
  .m-primary a{font-size:1.35rem;padding:14px 0}
  .m-secondary{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:0 1.6rem}
  .m-secondary a{border:0!important;padding:10px 0!important;font-size:.95rem;color:rgba(255,255,255,.65)!important}
}
/* index polish */
.ix-visual{justify-content:flex-start;padding-top:.2rem}
.ix-visual .five-eras{max-width:440px}
.ix-visual .five-eras .la-ink{stroke-width:1.5}
.ix-visual .five-eras .la-det{stroke-width:1.1}
.ix-label{white-space:nowrap;letter-spacing:.15em}
.ix-inner{padding-top:3rem;padding-bottom:3rem;align-items:start}
.ix-eyebrow{margin-top:2rem}
/* The burger's old three-bar rules also matched its new text spans. Neutralized. */
.burger span.mb-text,.burger span.mb-ind{margin:0;border-radius:0;background:none;transform:none!important;opacity:1!important}
.burger span.mb-text{display:inline;height:auto}
.burger span.mb-ind{display:inline-block;height:11px}
.burger[aria-expanded=true] .mb-text{color:var(--accent-on-dark)}
@media(max-width:1024px){.menu-btn,.burger{padding-left:14px}}
.logo-mob{display:none}
.logo-desk,.logo-mob{align-items:center;gap:10px}
.logo-desk{display:flex}
@media(max-width:1024px){.logo-desk{display:none}.logo-mob{display:flex}}

/* ======================================================================
   SECTION SYSTEM (2026-09-23). The homepage sets it; every page inherits it.
   One gutter, one spine, one rhythm, one link style.
   ====================================================================== */
.wrap{--g:1.5rem}
@media(min-width:1100px){.wrap{--g:5rem}}

/* rhythm: every section breathes the same, and nothing trails a margin */
.sec{padding:clamp(3.5rem,7vw,6rem) 0}
.sec > .wrap > :last-child,.sec .ideas3 > .idea > :last-child{margin-bottom:0}

/* the spine runs through the section nodes, not 65px to their left */
@media(min-width:1000px){
  .sec > .wrap::before{left:calc(var(--g) - 12px)}
  .sec--intro > .wrap::after{left:calc(var(--g) - 15px);top:.62em}
  .sec:not(.sec--intro) > .wrap > h2:has(.h-eyebrow)::after{top:3px}
  .sec:not(.sec--intro) > .wrap > h2{line-height:1.08}
  .h-eyebrow{margin-bottom:.8rem;line-height:1}
}

/* text links: one quiet style, uppercase with a moving arrow */
.textlinks{gap:.6rem 2.2rem;margin-top:1.6rem}
.textlinks a{display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-body);font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--accent-text);
  padding:.3rem 0;border-bottom:1px solid rgba(191,62,42,.3);transition:border-color .15s,color .15s}
.textlinks a::after{content:"\2192";font-size:1.15em;letter-spacing:0;transition:transform .15s}
.textlinks a:hover{color:var(--digilu-navy);border-bottom-color:var(--digilu-navy)}
.textlinks a:hover::after{transform:translateX(3px)}

/* the record band: number and eyebrow on one line */
.epic-copy .epic-n{display:inline-block;margin:0 .9rem 0 0}
.epic-copy .epic-eyebrow{display:inline-block;margin:0}
.epic-copy h3{margin-top:.75rem}
.epic-source a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}

/* the pattern: one editorial thought, set as a single block */
.pattern{border-left:2px solid var(--accent);padding:.15rem 0 .15rem 1.6rem;margin:0 0 1.8rem;
  line-height:1.8;font-size:clamp(1.1rem,1.5vw,1.28rem)}

/* the turning point: the short lines carry the turn, then the room */
.beat{font-family:var(--font-accent);font-weight:500;font-size:1.22rem;color:var(--digilu-navy)!important}
.doc-photo{margin:2.2rem 0 0;border-radius:8px;overflow:hidden;box-shadow:0 18px 40px rgba(12,23,35,.18)}
.doc-photo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}

/* the ideas: three columns that start and end on the same lines */
.ideas3{border-top:0;padding-top:0;margin-top:2.4rem;gap:2.6rem}
.idea{display:flex;flex-direction:column;position:relative;padding-top:1.5rem;border-top:1px solid var(--line)}
.idea::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--accent)}
.idea .textlinks{margin-top:auto;padding-top:1.2rem}
.idea .idea-tag{font-size:1rem;line-height:1.45}

/* the close: routing reads as a sign-off, not another section */
.sec--route{padding:clamp(3rem,5vw,4.5rem) 0}

/* footer: aligned to the same gutter, calmer lists */
.site-footer{padding-top:4.5rem}
.fbrand .socials{margin-top:1.4rem}
.fcol li a{padding:5px 0}
.fh{margin-bottom:12px}
.footer-legal{border-top:0;position:relative;margin-top:3.5rem;padding-top:1.4rem}
.footer-legal::before{content:"";position:absolute;top:0;left:1.5rem;right:1.5rem;height:1px;background:#1D2831}
@media(min-width:1100px){.footer-legal::before{left:5rem;right:5rem}}
/* the spine crosses every section edge: it spans the section padding exactly */
@media(min-width:1000px){.sec > .wrap::before{top:calc(-1 * clamp(3.5rem,7vw,6rem) - 1px);bottom:calc(-1 * clamp(3.5rem,7vw,6rem) - 1px)}
  .sec--route > .wrap::before{top:calc(-1 * clamp(3rem,5vw,4.5rem) - 1px);bottom:calc(-1 * clamp(3rem,5vw,4.5rem) - 1px)}}
/* links wrap as text, underline and arrow included */
.textlinks a{display:inline;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(191,62,42,.35);
  text-decoration-thickness:1px;text-underline-offset:6px;line-height:1.9}
.textlinks a::after{display:inline-block;margin-left:.45em}
.textlinks a:hover{text-decoration-color:var(--digilu-navy)}
.idea p:not(.idea-tag):not(.textlinks){color:#3B4552}
/* one control: MENU alone, so it drops its divider */
.menu-btn{border-left:0;padding-left:0}
.menu-btn .mb-text{font-size:12px}

/* ---------- editorial grids replace boxed cards (section system) -------
   Inner pages were grids of white boxes, which is what read as plain. They
   now use the homepage Ideas treatment: a hairline with a coral lead, the
   title, the text, and the link pinned to the bottom line. Brand cards keep
   their navy logo chip, which needs a box to sit in. */
.cards:not(.cards--brand){gap:2.2rem 2.6rem;margin-top:1.8rem}
.card:not(.card--brand){position:relative;display:flex;flex-direction:column;padding:1.35rem 0 0;border:0;
  border-top:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;transform:none}
.card:not(.card--brand)::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--accent);
  transition:width .25s ease}
a.card:not(.card--brand):hover{transform:none;box-shadow:none;text-decoration:none}
a.card:not(.card--brand):hover::before{width:100%}
.card:not(.card--brand) h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;letter-spacing:.01em;margin-bottom:.5rem}
.card:not(.card--brand) p{color:#3B4552;font-size:.95rem;line-height:1.6}
.card:not(.card--brand) .more{margin-top:auto;padding-top:.8rem;font-family:var(--font-body);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.card:not(.card--brand) .more::after{content:" \2192"}
.sec--navy .card:not(.card--brand),.sec--epic .card:not(.card--brand){border-top-color:rgba(255,255,255,.14)}
.sec--navy .card:not(.card--brand) h3,.sec--epic .card:not(.card--brand) h3{color:#fff}
@media(max-width:900px){.cards:not(.cards--brand){gap:1.8rem}}
/* the index marks where you are */
.ix-link[aria-current=page] .ix-name{color:var(--accent-on-dark)}
.ix-link[aria-current=page] .ix-name::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent-on-dark);margin-right:.2rem}
/* the header settles once the page scrolls */
.site-header.scrolled{box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.25)}
@media(min-width:1000px){.sec:not(.sec--intro) > .wrap > h2 + .cards{margin-top:2.2rem}}
.ladder p,.qa-item p{color:#3B4552}
/* a full-bleed band photo sits inside the page measure, cropped to a band, with its caption set */
.shot--band{max-width:var(--container-max);margin:0 auto;padding:0 var(--g,1.5rem) clamp(3rem,6vw,5rem)}
@media(min-width:1100px){.shot--band{padding-left:5rem;padding-right:5rem}}
.shot--band img{aspect-ratio:21/8;object-fit:cover;object-position:50% 35%;border-radius:8px;box-shadow:0 18px 40px rgba(12,23,35,.18)}
.shot--band figcaption{margin-top:.7rem;font-size:.85rem;color:var(--cool-gray)}
.shot--band img{height:auto!important;aspect-ratio:21/8!important;display:block}
/* index: coral +, logo column, and a bold coral base line so it reads as a layer */
.menu-btn .mb-ind,.burger .mb-ind{color:var(--accent-on-dark)}
.site-index{border-bottom:4px solid var(--accent)}
.ix-marks{display:flex;flex-direction:column;gap:.35rem}
.ix-mark{display:flex;align-items:center;height:48px;padding:0 .2rem;opacity:.72;transition:opacity .15s}
.ix-mark:hover,.ix-mark:focus-visible{opacity:1}
.ix-mark img{max-height:26px;max-width:170px;width:auto;height:auto;display:block}
/* optical sizing: each mark set to the same visual weight, not the same box */
.ix-marks{gap:.2rem}
.ix-mark{height:54px}
.ix-mark:nth-child(1) img{max-height:30px}
.ix-mark:nth-child(2) img{max-height:28px}
.ix-mark:nth-child(3) img{max-height:44px}
.ix-mark:nth-child(4) img{max-height:22px;max-width:150px}
.ix-mark:nth-child(5) img{max-height:24px}
/* logos: one white treatment, the brand's own color on hover */
.ix-mark img{filter:brightness(0) invert(1);transition:filter .2s}
.ix-mark{opacity:.7}
.ix-mark:hover img,.ix-mark:focus-visible img{filter:none}
/* tighter panel: less top and bottom air, drawing centered with its caption */
.ix-inner{padding-top:2.2rem;padding-bottom:2.4rem;gap:3.5rem;align-items:center}
.ix-visual{justify-content:center;padding-top:0}
.ix-visual .five-eras{max-width:380px}
.ix-eyebrow{margin-top:1.3rem}
.ix-col{gap:1.2rem}
.ix-link{padding:.2rem 0 .5rem}
.ix-t1 .ix-name{font-size:23px}
.ix-label{margin-bottom:.6rem}
.ix-mark{height:48px}
.five-eras .la-date{font-size:14px}
/* phone: a small version of the drawing on top, the marks at the bottom */
@media(max-width:1024px){
  .m-art{max-width:260px;margin:.4rem 0 1rem}
  .m-art .five-eras{width:100%;height:auto}
  .m-marks{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1)}
  .m-marks .ix-mark{height:40px;border:0!important;padding:0!important}
  .m-marks .ix-mark img{max-height:22px!important}
  .mobile-nav{border-bottom:4px solid var(--accent)}
}
@media(max-width:1024px){.m-marks .ix-mark:nth-child(3) img{max-height:32px!important}.m-marks{border-top:0;margin-top:1rem}}
/* The record band sits a step LIGHTER than the hero, so the hero stays the
   darkest ground on the page (Mike, 2026-09-23). Slate navy, the same ledger
   grid slightly stronger to read on the lighter field, the coral glows kept. */
.sec--epic{
  background:
    radial-gradient(900px 420px at 88% -60px, rgba(232,93,63,.14), transparent 70%),
    radial-gradient(760px 460px at 8% 50%, rgba(232,93,63,.06), transparent 70%),
    radial-gradient(900px 420px at 90% 100%, rgba(232,93,63,.08), transparent 70%),
    linear-gradient(180deg,#1F3342 0%,#233A4B 55%,#1F3342 100%);
}
.sec--epic::after{background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 28px 100%}
.sec--epic .epic-fig{box-shadow:0 22px 50px rgba(5,12,18,.45)}
.sec--epic .epic-copy p{color:rgba(255,255,255,.78)}
/* index contact: the name in caps like the other destinations, then direct lines */
.ix-lines{list-style:none;margin:.3rem 0 0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.ix-lines a{display:inline-block;padding:.2rem 0;font-family:var(--font-body);font-size:13px;color:rgba(255,255,255,.72);
  text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.ix-lines a:hover,.ix-lines a:focus-visible{color:#fff;border-bottom-color:var(--accent-on-dark)}
@media(max-width:1024px){.m-lines{display:flex;flex-direction:column;margin-top:1.2rem}
  .m-lines a{border:0!important;padding:8px 0!important;font-size:1rem;color:#fff}}
.ix-contact .ix-link{padding-bottom:.1rem}.ix-lines{gap:0;margin-top:.1rem}.ix-lines a{padding:.12rem 0}

/* ---------- the record band header + entry titles ------------------------
   Mike, 2026-09-23: the section title was a rail label, too small for the
   section the page rests on, and the three entry titles were sentence-case
   Barlow, matching nothing else on the site. The band now opens full width
   at display size, and each entry title is set like every other headline:
   condensed, uppercase, large. */
@media(min-width:1000px){
  .sec--epic > .wrap > h2{grid-column:1 / -1;position:relative;top:auto}
  .sec--epic > .wrap > .epic-lede{grid-column:1 / -1}
}
.sec--epic > .wrap > h2{font-size:clamp(2.4rem,4.6vw,4rem)!important;line-height:.98;letter-spacing:-.005em;margin-bottom:0}
.sec--epic > .wrap > h2 .h-eyebrow{font-size:12px;margin-bottom:1rem}
.sec--epic .epic-lede{font-family:var(--font-accent);font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.55;
  color:rgba(255,255,255,.82)!important;max-width:60ch;margin:1.1rem 0 0}
.sec--epic .epic{margin-top:3.4rem}
.epic-copy h3{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.75rem,2.6vw,2.35rem);line-height:1.02;letter-spacing:.005em;margin:.8rem 0 1rem;color:#fff}
@media(min-width:1000px){
  .sec.sec--epic:not(.sec--intro) > .wrap > h2{grid-column:1 / -1;grid-row:auto;max-width:none}
  .sec.sec--epic:not(.sec--intro) > .wrap > .epic-lede{grid-column:1 / -1}
}
.sec.sec--epic > .wrap > h2{padding-left:0}
@media(min-width:1000px){.sec.sec--epic > .wrap > h2::after{left:-37px}}
@media(max-width:900px){
  .epic-fig--badges figcaption{position:absolute;top:calc(100% + .6rem);bottom:auto;margin:0}
  .epic-fig--badges{margin-bottom:3.4rem}
}
@media(max-width:900px){.epic-fig--badges{margin-bottom:4.4rem}}
/* footer contact: the two direct lines, set as quiet rows with their marks */
.fcontact{list-style:none;margin:1.6rem 0 0;padding:1.2rem 0 0;border-top:1px solid #1D2831;max-width:260px}
.fcontact li{margin:0}
.fcontact a{display:flex;align-items:center;gap:.75rem;padding:.45rem 0;color:#C9D1D8;font-size:13.5px;text-decoration:none;transition:color .15s}
.fcontact svg{width:17px;height:17px;flex-shrink:0;color:var(--accent-on-dark)}
.fcontact a:hover span{color:#fff;text-decoration:underline;text-decoration-color:var(--accent-on-dark);text-underline-offset:4px}

/* ======================================================================
   INNER PAGES INHERIT THE HOMEPAGE (2026-09-23)
   Page heads carry the hero's texture and coral hand-off; stats, quotes and
   figures use the homepage treatments instead of white boxes.
   ====================================================================== */
.page-head::before,.page-head::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.page-head::before{background-image:radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px);background-size:28px 28px}
.page-head::after{background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 40%,transparent 100%)}
.page-head{padding:clamp(3rem,6vw,4.6rem) 0 clamp(2.8rem,5vw,4rem)}
.page-head h1{font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:.96}
.page-head .eyebrow{margin-bottom:.9rem}
.crumbs{position:relative;border-top:1px solid rgba(232,93,63,.35)}
.crumbs::before{content:"";position:absolute;top:-1px;left:0;width:120px;height:2px;background:var(--accent)}
.stats{gap:2rem;margin:1.6rem 0 1.4rem}
.stats li{position:relative;padding:1.2rem 0 0;background:none;border:0;border-top:1px solid var(--line);border-radius:0}
.stats li::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--accent)}
.stat{font-size:clamp(2.2rem,3.4vw,2.9rem)}
.stat-l{font-size:13px;line-height:1.45;color:#3B4552}
.quote{background:none;padding:.2rem 0 .2rem 1.6rem;border-left:2px solid var(--accent);margin:1.8rem 0}
.quote p{font-size:clamp(1.6rem,2.6vw,2.1rem)}
.sec--navy .quote p,.sec--epic .quote p{color:#fff}
.shot img,.doc-photo img{border-radius:8px;box-shadow:0 18px 40px rgba(12,23,35,.18)}
.shot figcaption{margin-top:.7rem;font-size:.85rem;color:var(--cool-gray)}
.note{background:none;border:0;border-left:2px solid var(--accent);border-radius:0;padding:.3rem 0 .3rem 1.1rem}
.list li{color:#3B4552}
/* footer: the same five marks as the index, one quiet row above the legal line.
   Curious visitors click through; the row names nothing and sells nothing. */
.fmarks{max-width:var(--container-max);margin:3rem auto 0;padding:0 1.5rem;display:flex;align-items:center;gap:2.2rem;flex-wrap:wrap}
@media(min-width:1100px){.fmarks{padding:0 5rem}}
.fmarks-label{font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);white-space:nowrap}
.fmarks-row{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem 2.4rem;flex:1;justify-content:space-between}
.fmarks .ix-mark{height:44px}
.fmarks .ix-mark:nth-child(1) img{max-height:26px}
.fmarks .ix-mark:nth-child(2) img{max-height:24px}
.fmarks .ix-mark:nth-child(3) img{max-height:36px}
.fmarks .ix-mark:nth-child(4) img{max-height:19px;max-width:140px}
.fmarks .ix-mark:nth-child(5) img{max-height:21px}
.footer-legal{margin-top:2rem}
@media(max-width:700px){.fmarks{gap:1rem}.fmarks-row{justify-content:flex-start;gap:.4rem 1.6rem}}
@media(max-width:700px){.fmarks{flex-direction:column;align-items:flex-start}.fmarks-row{width:100%}}
/* the hero ends on the person now (no timeline floor): close it with room, not a ledge */
.hero{padding-bottom:clamp(2.5rem,6vh,4.5rem)}
.hero-copy{padding-bottom:0}
/* the role reads straight after the name: the first thing under the H1 */
.hero h1{margin-bottom:.12em}
.hero-role{font-family:var(--font-body);font-size:clamp(13px,1.1vw,15px);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-on-dark)!important;margin:0 0 1.6rem;max-width:none}
/* Now: the one-answer drawing sits to the right of the copy on wide screens */
.now-art{margin:2.4rem 0 0;max-width:520px}
.now-art .la{width:100%;height:auto}
@media(min-width:1180px){
  .sec:has(.now-art) > .wrap{grid-template-columns:minmax(210px,268px) minmax(0,1fr) minmax(0,420px)}
  .sec:has(.now-art) > .wrap > .now-art{grid-column:3;grid-row:1 / span 8;margin:0;align-self:center}
}
@media(min-width:1180px){
  .sec:has(.now-art) > .wrap{grid-template-columns:minmax(210px,268px) minmax(0,1fr) minmax(0,360px);column-gap:3rem}
}
/* Now: heading and a large drawing on the left, the copy on the right */
.sec--now .now-art{margin:2rem 0 0;max-width:620px}
.sec--now .now-copy p{color:#3B4552}
@media(min-width:1000px){
  .sec.sec--now > .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:4.5rem}
  .sec.sec--now > .wrap > h2{grid-column:1;grid-row:1}
  .sec.sec--now > .wrap > .now-art{grid-column:1;grid-row:2;margin:2.4rem 0 0;align-self:start;max-width:none}
  .sec.sec--now > .wrap > .now-copy{grid-column:2;grid-row:1 / span 2;align-self:center}
}
@media(max-width:999px){.sec--now .now-art{margin:1.6rem 0 1.8rem}}

/* ---------- the turning point ------------------------------------------
   A documentary photo set as evidence: coral corner brackets, a date tag,
   the story beside it, and three ruled numbers underneath. */
@media(min-width:1000px){
  .sec--turn > .wrap > h2{grid-column:1 / -1;max-width:none}
  .sec--turn > .wrap > .turn,.sec--turn > .wrap > .turn-stats{grid-column:1 / -1}
}
.sec--turn > .wrap > h2{font-size:clamp(2rem,3.6vw,3.1rem)!important;line-height:1}
.turn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem;align-items:center;margin-top:2.6rem}
.turn-fig{position:relative;margin:0;padding:18px}
.turn-fig img{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:4px;
  box-shadow:0 26px 60px rgba(12,23,35,.28)}
.turn-frame{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--accent),var(--accent)) top left/46px 2px,
    linear-gradient(var(--accent),var(--accent)) top left/2px 46px,
    linear-gradient(var(--accent),var(--accent)) bottom right/46px 2px,
    linear-gradient(var(--accent),var(--accent)) bottom right/2px 46px,
    linear-gradient(var(--digilu-navy),var(--digilu-navy)) top right/22px 1px,
    linear-gradient(var(--digilu-navy),var(--digilu-navy)) top right/1px 22px,
    linear-gradient(var(--digilu-navy),var(--digilu-navy)) bottom left/22px 1px,
    linear-gradient(var(--digilu-navy),var(--digilu-navy)) bottom left/1px 22px;
  background-repeat:no-repeat}
.turn-fig::after{content:"";position:absolute;z-index:0;left:48px;top:48px;right:-18px;bottom:-18px;
  background-image:radial-gradient(circle,rgba(26,42,52,.16) 1px,transparent 1.2px);background-size:14px 14px}
.turn-fig figcaption{position:relative;z-index:3;margin-top:1.1rem;font-size:.86rem;color:var(--cool-gray);display:flex;align-items:center;gap:.7rem}
.turn-tag{display:inline-block;padding:.2rem .55rem;background:var(--accent-solid);color:#fff;font-weight:600;
  font-size:11px;letter-spacing:.14em}
.turn-copy p{color:#3B4552}
.turn-copy .beat{margin:1.4rem 0}
.turn-stats{grid-template-columns:repeat(3,1fr);margin-top:3.6rem!important}
@media(max-width:999px){.turn{grid-template-columns:1fr;gap:2rem}.turn-stats{grid-template-columns:1fr}}
@media(min-width:1000px){
  .sec.sec--turn:not(.sec--intro) > .wrap > h2{grid-column:1 / -1;grid-row:auto;max-width:none}
  .sec.sec--turn:not(.sec--intro) > .wrap > .turn,.sec.sec--turn:not(.sec--intro) > .wrap > .turn-stats{grid-column:1 / -1}
}
.sec.sec--turn > .wrap > h2{padding-left:0}
@media(min-width:1000px){.sec.sec--turn > .wrap > h2::after{left:-37px}}
.turn{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.sec .stats.turn-stats li,.sec--mist .stats li{background:none!important;border-left:0;border-right:0;border-bottom:0}
@media(max-width:999px){.turn{grid-template-columns:1fr!important;gap:2rem}.turn-stats{grid-template-columns:1fr!important}}

/* ---------- record band: one visual system for the three --------------
   Each figure gets the Turning Point frame (coral corner brackets, a dotted
   field behind) and a large coral numeral tag on its corner, so the three
   read as one set. The label beside it is set large enough to be read. */
.epic{counter-reset:rec}
.epic > li{counter-increment:rec}
.epic-fig{position:relative;overflow:visible!important;padding:16px;background:none!important;box-shadow:none!important}
.epic-fig img{position:relative;z-index:1;border-radius:4px;box-shadow:0 26px 60px rgba(3,10,16,.5)}
.epic-fig::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(var(--accent-on-dark),var(--accent-on-dark)) top left/48px 2px,
    linear-gradient(var(--accent-on-dark),var(--accent-on-dark)) top left/2px 48px,
    linear-gradient(var(--accent-on-dark),var(--accent-on-dark)) bottom right/48px 2px,
    linear-gradient(var(--accent-on-dark),var(--accent-on-dark)) bottom right/2px 48px,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) top right/22px 1px,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) top right/1px 22px,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) bottom left/22px 1px,
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) bottom left/1px 22px;
  background-repeat:no-repeat}
.epic-fig::after{content:counter(rec,decimal-leading-zero);position:absolute;z-index:3;left:-6px;bottom:-22px;
  font-family:var(--font-display);font-weight:700;font-size:clamp(3.4rem,5vw,4.6rem);line-height:1;
  color:var(--accent-on-dark);text-shadow:0 6px 24px rgba(3,10,16,.55);letter-spacing:-.01em}
.epic-row--flip .epic-fig::after{left:auto;right:-6px}
.epic-fig--badges .fan{inset:16px}
.epic-fig--badges figcaption{z-index:3}
/* the label beside it: the number moves to the photo, the eyebrow grows */
.epic-copy .epic-n{display:none}
.epic-copy .epic-eyebrow{font-size:13px;letter-spacing:.22em;padding-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.18);display:block;margin-bottom:.2rem}
.epic-copy h3{margin-top:1rem}
@media(max-width:900px){.epic-fig::after{font-size:3rem;bottom:-16px}.epic-fig--badges{margin-bottom:5.2rem!important}}
.epic-fig--badges figcaption{bottom:-3.4rem!important;padding-left:5.4rem}@media(max-width:900px){.epic-fig--badges figcaption{padding-left:4.4rem}}
/* turning point: the rename itself, before and after, full width under the story */
@media(min-width:1000px){.sec.sec--turn:not(.sec--intro) > .wrap > .ba{grid-column:1 / -1}}
.sec--turn .ba{margin:3.4rem 0 0;padding-top:2.6rem;border-top:1px solid var(--line)}
/* the numeral returns beside the label, matching the one on the photo */
.epic-copy .epic-n{display:inline-block;margin:0 .8rem 0 0;font-family:var(--font-display);font-weight:700;
  font-size:1.35rem;letter-spacing:0;color:var(--accent-on-dark);line-height:1;vertical-align:-.1em}
.epic-copy .epic-n + .epic-eyebrow{display:inline-block;border-bottom:0;padding-bottom:0;margin-bottom:0}
.epic-copy .epic-eyebrow + h3{margin-top:1.1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.18)}
.ba-plate img{max-height:96px}
/* stacked marks: square-ish plates, both logos set to the same visual height */
.ba-plate{padding:1.6rem}
.ba-plate img{max-height:190px!important}
.ba-item:last-child .ba-plate img{max-height:250px!important;margin:-30px 0}
.ba-item:first-child .ba-plate img{max-height:220px!important;height:220px!important;width:auto}.ba-plate{min-height:260px;display:flex;align-items:center;justify-content:center}
.ba{align-items:start}.ba-plate{height:270px;min-height:0}.ba-item:last-child .ba-plate img{margin:0;max-height:none!important;height:300px!important;width:auto}.ba-item:last-child .ba-plate{overflow:hidden}.ba-arrow{align-self:center;margin-top:-2.5rem}@media(max-width:900px){.ba-plate{height:230px}.ba-item:first-child .ba-plate img{height:190px!important}.ba-item:last-child .ba-plate img{height:260px!important}.ba-arrow{margin-top:0}}
.ba-item .ba-plate img{height:210px!important;max-height:none!important;width:auto;margin:0}@media(max-width:900px){.ba-item .ba-plate img{height:180px!important}}
.ba-item:last-child .ba-plate img,.ba-item:first-child .ba-plate img{height:210px!important;max-height:none!important;width:auto;margin:0}.ba-item:last-child .ba-plate{overflow:visible}@media(max-width:900px){.ba-item:last-child .ba-plate img,.ba-item:first-child .ba-plate img{height:180px!important}}

/* ---------- content pass components (2026-09-23) ---------------------- */
.ideas3.ideas4{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 3rem}
@media(max-width:900px){.ideas3.ideas4{grid-template-columns:1fr}}
.page-support{font-family:var(--font-accent);font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--digilu-navy)!important;font-weight:500}
.ladder--stages .idea-tag{font-weight:600;color:var(--digilu-navy)!important;margin-bottom:.4rem}
.ladder--stages h3{margin-bottom:.2rem}
.rooms{list-style:none;margin:1.4rem 0 1.8rem;padding:0;border-top:1px solid var(--line)}
.rooms li{display:grid;grid-template-columns:minmax(0,1.4fr) 90px minmax(0,1.3fr);gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--line);font-size:.95rem;color:#3B4552}
.rooms b{color:var(--digilu-navy);font-weight:600}
@media(max-width:700px){.rooms li{grid-template-columns:1fr;gap:.2rem}}
.h-sub{font-size:1rem!important;margin:2rem 0 .6rem;text-transform:uppercase;letter-spacing:.06em}
.form--page{max-width:720px;margin-top:1.6rem}
.form--page .phf-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form--page label{display:block;font-size:13px;font-weight:600;color:var(--digilu-navy);margin:.8rem 0 .35rem}
.form--page input,.form--page select,.form--page textarea{width:100%;padding:.75rem .9rem;border:1px solid #C7D0D6;border-radius:6px;background:#fff;font:inherit}
.form--page .btn{margin-top:1.2rem}
@media(max-width:700px){.form--page .phf-row{grid-template-columns:1fr}}
.next-routes{list-style:none;margin:.4rem 0 0;padding:0}
.next-routes li{padding:.6rem 0;border-bottom:1px solid var(--line);color:#3B4552}
.name-note{font-size:.82rem;color:var(--cool-gray)!important;max-width:70ch}
.sec--note{padding:1.6rem 0!important}
.essays-archive .biblio{margin-top:1rem}
.sec--now .now-copy,.idea p:not(.idea-tag):not(.textlinks){color:#3B4552}
@media(min-width:1025px){.footer-inner{grid-template-columns:1.2fr 1fr 1fr 1.2fr}}
/* Turning point copy, 2026-09-23: lead, list, beats, pull quote */
.turn{align-items:start}
.turn-copy p{font-size:1.06rem;line-height:1.7}
.turn-copy .turn-lead{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);line-height:1.08;color:var(--digilu-navy);margin:0 0 1.2rem;letter-spacing:-.005em}
.turn-copy .turn-beat{font-family:var(--font-accent);font-weight:600;font-size:1.3rem;line-height:1.35;color:var(--digilu-navy);margin:1.9rem 0 .9rem}
.turn-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.4rem;counter-reset:tl}
.turn-list li{counter-increment:tl;display:flex;align-items:baseline;gap:.7rem;padding:.7rem 0;border-top:1px solid var(--line);font-weight:500;color:var(--digilu-charcoal);font-size:1rem;line-height:1.35}
.turn-list li::before{content:counter(tl,decimal-leading-zero);font-family:var(--font-display);font-weight:700;font-size:.95rem;color:var(--accent-text);min-width:1.4rem}
.turn-quote{margin:2rem 0 0;padding:.3rem 0 .3rem 1.3rem;border-left:3px solid var(--accent);font-family:var(--font-accent);font-weight:500;font-size:1.3rem;line-height:1.45;color:var(--digilu-navy)}
@media(max-width:600px){.turn-list{grid-template-columns:1fr}.turn-copy .turn-beat,.turn-quote{font-size:1.15rem}}
/* Before/after captions: larger, name on its own line */
.ba-item figcaption{font-size:1rem;line-height:1.5;color:#3B4552;margin-top:1rem}
.ba-item figcaption .ba-tag{display:table;margin-bottom:.55rem}
.ba-name{display:block;font-family:var(--font-display);font-weight:700;font-size:1.45rem;line-height:1.1;color:var(--digilu-navy);margin-bottom:.3rem}
.ba-note{display:block;max-width:40ch}
/* Before/after as cards: graphics in the plate, caption inside at the bottom (2026-09-23) */
.ba--cards{grid-template-columns:1fr 56px 1fr!important;align-items:stretch!important;gap:1.2rem!important}
.ba--cards .ba-item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 18px 40px -28px rgba(15,29,37,.35)}
.ba--cards .ba-plate{position:relative;height:280px!important;min-height:0!important;border:0!important;border-radius:0!important;padding:1.6rem!important;display:flex;align-items:center;justify-content:center;overflow:hidden!important}
.ba--cards .ba-plate img{position:relative;z-index:2;height:190px!important;max-height:none!important;width:auto;margin:0!important}
.ba--cards .ba-item--before .ba-plate{background-color:#F4F6F8;
  background-image:linear-gradient(rgba(99,106,118,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(99,106,118,.14) 1px,transparent 1px),
  linear-gradient(rgba(99,106,118,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(99,106,118,.07) 1px,transparent 1px);
  background-size:60px 60px,60px 60px,12px 12px,12px 12px;background-position:-1px -1px}
.ba--cards .ba-item--before .ba-plate img{filter:saturate(.85)}
.ba--cards .ba-item--after .ba-plate{background:
  radial-gradient(circle at 50% 46%,rgba(76,175,58,.16) 0,rgba(76,175,58,.05) 38%,transparent 62%),
  radial-gradient(rgba(76,175,58,.22) 1.2px,transparent 1.4px) 0 0/16px 16px,#fff}
.ba-corners{position:absolute;inset:16px;z-index:1;pointer-events:none;
  background:linear-gradient(currentColor,currentColor) 0 0/22px 2px,linear-gradient(currentColor,currentColor) 0 0/2px 22px,
  linear-gradient(currentColor,currentColor) 100% 0/22px 2px,linear-gradient(currentColor,currentColor) 100% 0/2px 22px,
  linear-gradient(currentColor,currentColor) 0 100%/22px 2px,linear-gradient(currentColor,currentColor) 0 100%/2px 22px,
  linear-gradient(currentColor,currentColor) 100% 100%/22px 2px,linear-gradient(currentColor,currentColor) 100% 100%/2px 22px;
  background-repeat:no-repeat;color:rgba(99,106,118,.45)}
.ba-item--after .ba-corners{color:var(--accent)}
.ba--cards .ba-item figcaption{margin:0!important;padding:1.2rem 1.5rem 1.4rem;border-top:1px solid var(--line);background:#fff;flex:1}
.ba--cards .ba-item--before figcaption{background:#FAFBFC}
.ba--cards .ba-arrow{align-self:center;margin:0!important;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--accent-text);opacity:1;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -14px rgba(15,29,37,.4);transform:translateY(-40px)}
.ba--cards .ba-arrow svg{width:24px;height:24px}
@media(max-width:900px){
  .ba--cards{grid-template-columns:1fr!important}
  .ba--cards .ba-plate{height:230px!important}.ba--cards .ba-plate img{height:160px!important}
  .ba--cards .ba-arrow{transform:rotate(90deg);margin:-.4rem auto!important;width:46px;height:46px}}
.ba--cards .ba-plate img{mix-blend-mode:multiply}
@media(min-width:901px){.ba--cards .ba-arrow{transform:translateY(-76px)}}
/* Turn stats: one 80px mark column so the numbers line up (2026-09-23) */
.turn-stats li{display:grid!important;grid-template-columns:80px 1fr;column-gap:1.1rem;align-items:center}
.turn-stats li .stat,.turn-stats li .stat-l{grid-column:2}
.turn-stats li .stat-ic{grid-row:1 / span 2;position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center}
.turn-stats .sti,.turn-stats .stat-ic--g{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 20px -14px rgba(15,29,37,.4);display:flex;align-items:center;justify-content:center}
.turn-stats .stat-ic--g{width:68px;height:68px;border-radius:50%}
.turn-stats .stat-ic--g svg{width:32px;height:32px}
.turn-stats .sti{position:absolute;width:52px;height:52px;padding:5px}
.turn-stats .sti img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.turn-stats .sti--old{left:0;top:4px;opacity:.8}
.turn-stats .sti--new{right:0;bottom:4px;z-index:1}
.turn-stats .stat-ic--badge img{height:78px;width:auto;display:block;filter:drop-shadow(0 6px 10px rgba(15,29,37,.28))}
@media(max-width:600px){.turn-stats li{grid-template-columns:68px 1fr}.turn-stats li .stat-ic{width:68px;height:68px}
 .turn-stats .sti{width:44px;height:44px}.turn-stats .stat-ic--g{width:58px;height:58px}.turn-stats .stat-ic--badge img{height:66px}}
.turn-stats li{grid-template-columns:108px 1fr}
.turn-stats li .stat-ic{width:108px}
.turn-stats .sti{width:56px;height:56px;top:50%!important;bottom:auto!important;transform:translateY(-50%)}
.turn-stats .sti--old{left:0;opacity:1}
.turn-stats .sti--new{right:0;left:auto}
.turn-stats .stat-ic--pair::after{content:"";position:absolute;z-index:2;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;
  background:var(--accent-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h11M12 7l5 5-5 5'/%3E%3C/svg%3E") center/12px no-repeat}
@media(max-width:600px){.turn-stats li{grid-template-columns:100px 1fr}.turn-stats li .stat-ic{width:100px;height:68px}.turn-stats .sti{width:50px;height:50px}}
.turn-stats li .stat-ic.stat-ic--g{width:68px;height:68px;justify-self:center}
.turn-stats .sti{padding:7px;overflow:hidden}
@media(max-width:600px){.turn-stats li .stat-ic.stat-ic--g{width:60px;height:60px}}
.turn-stats .sti--new{padding:9px}
/* Now section: lead, paragraph, two logo cards (2026-09-23) */
.now-copy .now-lead{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3vw,2.5rem);line-height:1.1;color:var(--digilu-navy);margin:0 0 1.2rem}
.now-copy p:not(.now-lead){font-size:1.08rem;line-height:1.7;max-width:46ch}
.now-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.now-card{display:flex;flex-direction:column;gap:.9rem;padding:1.4rem 1.4rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:#3B4552;
  box-shadow:0 14px 32px -24px rgba(15,29,37,.45);transition:transform .18s,box-shadow .18s,border-color .18s}
.now-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px -22px rgba(15,29,37,.5);border-color:rgba(226,85,61,.45)}
.now-card img{height:40px;width:auto;align-self:flex-start;display:block}
.now-card .nc-text{font-size:.94rem;line-height:1.55;flex:1}
.now-card .nc-go{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);padding-top:.8rem;border-top:1px solid var(--line)}
.now-card .nc-ext{width:15px;height:15px;transition:transform .18s}
.now-card:hover .nc-ext{transform:translate(2px,-2px)}
.now-card--dark{background:var(--digilu-navy);border-color:var(--digilu-navy);color:rgba(255,255,255,.78)}
.now-card--dark img{height:30px;margin:5px 0}
.now-card--dark .nc-go{color:var(--accent-on-dark);border-top-color:rgba(255,255,255,.14)}
@media(max-width:600px){.now-cards{grid-template-columns:1fr}}
.sec--now .now-copy .now-lead{color:var(--digilu-navy)!important}
.now-card img{height:46px}.now-card--dark img{height:34px;margin:6px 0}
.now-card .nc-text{font-size:1.02rem;line-height:1.55;font-weight:500;color:#1F2A33}
.now-card--dark .nc-text{color:rgba(255,255,255,.94)}
/* Now cards: no underline on the card text on hover (2026-09-23) */
.now-card,.now-card:hover,.now-card:hover .nc-text{text-decoration:none!important}
/* Turning point without the photo (2026-09-23): headline and story left, the lesson right */
.turn--solo{display:block!important}
.turn--solo .turn-copy{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:4rem;align-items:center}
.turn--solo .turn-lead,.turn--solo .turn-copy > p{grid-column:1}
.turn--solo .turn-copy > p:not(.turn-lead){max-width:52ch}
.turn--solo .turn-quote{grid-column:2;grid-row:1 / span 2;margin:0;font-size:1.7rem;line-height:1.4;padding:.4rem 0 .4rem 1.6rem}
.turn--solo .turn-lead{font-size:clamp(2.2rem,3.8vw,3.2rem)}
@media(max-width:999px){.turn--solo .turn-copy{grid-template-columns:1fr}.turn--solo .turn-quote{grid-column:1;grid-row:auto;margin-top:1.8rem;font-size:1.35rem}}
/* Homepage backgrounds, one solid color per block (2026-09-23, Mike):
   near-black header, dark blue hero, medium blue record, light middle, dark blue Now, near-black footer */
.hero ~ .sec--epic{background:
    radial-gradient(900px 420px at 88% -60px, rgba(232,93,63,.14), transparent 70%),
    #243A4C}
.hero ~ .sec--turn{background:var(--light-mist)}
.hero ~ .sec--now{background:#fff}
.hero ~ .sec--pattern{background:linear-gradient(160deg,#1B2C3A 0%,#132433 42%,#0C1723 100%)}
.sec--pattern .pattern,.sec--pattern .pattern *{color:rgba(255,255,255,.88)!important}
.sec--pattern .la .la-ink{stroke:rgba(255,255,255,.6)}
.sec--pattern .la .la-ghost{stroke:#fff}
.sec--pattern .la .la-det{stroke:rgba(255,255,255,.4);opacity:1}
.sec--pattern .la .la-acc{stroke:var(--accent-on-dark)}
.sec--pattern .la .la-dot{fill:rgba(255,255,255,.5)}
.sec--pattern .la .la-dot-acc{fill:var(--accent-on-dark)}
.sec--pattern .la .la-lbl{fill:rgba(255,255,255,.6)}
.sec--pattern .la .la-lbl.la-date{fill:var(--accent-on-dark)}
.sec--pattern .shift-label{color:rgba(255,255,255,.88)}
.sec--pattern .shift-date{color:var(--accent-on-dark)}
.sec--pattern .shift-row{border-color:rgba(255,255,255,.14)!important}
/* Light middle darkened 20% (Mike, 2026-09-23) */
.hero ~ .sec--now{background:#CCD3D8}
.hero ~ .sec--now .now-card:not(.now-card--dark){border-color:transparent}
.hero ~ .sec--now .now-card:not(.now-card--dark){background:#E4E9EC}
/* Hero portrait back inside the content column, centered beside the copy (Mike, 2026-09-23:
   "why am I all the way over there?"). Replaces the container break above. */
@media(min-width:901px){.hero-fig{margin-right:0!important;margin-left:0;justify-self:center}}
/* ---------- templates on inner pages (2026-09-23) ---------------------
   The homepage blocks, generalized. */
.epic-copy .epic-n:empty::before{content:counter(rec,decimal-leading-zero)}
.turn--flip .turn-fig{order:2}
.sec--turn .turn{margin-top:2.4rem}
.sec--turn > .wrap > .ba,.sec--turn > .wrap > .run,.sec--turn > .wrap > .shots{margin-top:3rem}
@media(min-width:1000px){
  .sec.sec--turn:not(.sec--intro) > .wrap > .ba,.sec.sec--turn:not(.sec--intro) > .wrap > .run,
  .sec.sec--turn:not(.sec--intro) > .wrap > .shots{grid-column:1 / -1}
  .sec.sec--now:not(.sec--intro) > .wrap > h2:not(:has(+ .now-art)){grid-row:1}
  .sec:not(.sec--intro) > .wrap > .ideas3,.sec:not(.sec--intro) > .wrap > .la-band,
  .sec:not(.sec--intro) > .wrap > .films,.sec:not(.sec--intro) > .wrap > .figpair{grid-column:1 / -1}
}
.ideas3:not(.ideas4){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.ideas3:not(.ideas4){grid-template-columns:1fr}}
.idea .h-eyebrow{margin-bottom:.5rem}
.sec--now .now-copy .pattern{margin-top:0}
.sec--epic .epic-copy .textlinks a{color:var(--accent-on-dark);text-decoration-color:rgba(238,107,79,.45)}
.sec--epic .epic-copy a:not(.textlinks a){color:#fff}
/* Inner-page ART blocks sit on white or mist, so their line art is navy even
   though the homepage Now block draws light-on-dark. The inner record band uses
   the homepage record color. */
.sec--art .la .la-ink{stroke:var(--digilu-navy)}
.sec--art .la .la-ghost{stroke:var(--digilu-navy)}
.sec--art .la .la-det{stroke:var(--digilu-navy);opacity:.6}
.sec--art .la .la-acc{stroke:var(--accent)}
.sec--art .la .la-dot{fill:var(--digilu-navy)}
.sec--art .la .la-dot-acc{fill:var(--accent)}
.sec--art .la .la-lbl{fill:var(--cool-gray)}
.sec--art .now-copy p{color:#3B4552!important}
.page-head ~ .sec--epic,.crumbs ~ .sec--epic{background:
    radial-gradient(900px 420px at 88% -60px, rgba(232,93,63,.14), transparent 70%),#243A4C}
/* square line drawings are capped so the drawing supports the copy, not the page */
.sec--art .now-art{display:flex;justify-content:center;align-items:center}
.sec--art .now-art svg{width:100%;height:auto;max-height:340px}
@media(min-width:1000px){.sec.sec--art .now-art{align-self:center;margin-top:1.4rem}}
/* portrait photos in a SPLIT are capped so the frame matches landscape ones */
.turn-fig img{max-height:460px;object-fit:cover;object-position:50% 25%}
.sec--turn .turn-fig img[height="1440"],.sec--turn .turn-fig img[height="1200"]{aspect-ratio:4/5;width:100%}

/* ---------- the index, reshuffled and refined (2026-09-23) -------------
   Three numbered columns (the record, public work, contact) over one strip of
   property marks. Numbers run 01 to 06 across the whole index so it reads as
   one contents page; the record is set largest. */
.ix-inner{grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:4rem;padding-top:2.6rem;padding-bottom:2.2rem}
.ix-right{display:flex;flex-direction:column;gap:2rem}
.ix-grid{grid-template-columns:1.15fr 1fr 1fr;gap:2.6rem}
.ix-col{display:flex;flex-direction:column;gap:.35rem}
.ix-label{margin-bottom:.8rem}
.ix-link{display:grid;grid-template-columns:30px 1fr;gap:.2rem;align-items:start;padding:.7rem 0 .8rem;
  border-bottom:1px solid rgba(255,255,255,.07);position:relative}
.ix-link:last-of-type{border-bottom:0}
.ix-link::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--accent-on-dark);transition:width .25s ease}
.ix-link:hover::before,.ix-link:focus-visible::before{width:100%}
.ix-num{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--accent-on-dark);padding-top:.35em}
.ix-body{display:flex;flex-direction:column}
.ix-big .ix-name{font-size:27px}
.ix-mid .ix-name{font-size:20px}
.ix-name{font-family:var(--font-display)!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.02em!important}
.ix-desc{margin-top:.3rem;max-width:30ch}
.ix-lines{margin:.5rem 0 0 30px}
.ix-strip{display:flex;align-items:center;gap:2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1)}
.ix-strip .ix-label{margin:0;padding:0;border:0;white-space:nowrap}
.ix-strip .ix-marks{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem 2.2rem;flex:1;justify-content:space-between}
.ix-strip .ix-mark{height:40px}
.ix-strip .ix-mark:nth-child(1) img{max-height:26px}
.ix-strip .ix-mark:nth-child(2) img{max-height:24px}
.ix-strip .ix-mark:nth-child(3) img{max-height:36px}
.ix-strip .ix-mark:nth-child(4) img{max-height:19px;max-width:140px}
.ix-strip .ix-mark:nth-child(5) img{max-height:21px}
.ix-visual{padding-right:3rem}
.ix-visual .five-eras{max-width:360px}
@media(max-width:1180px){.ix-grid{gap:1.6rem}.ix-big .ix-name{font-size:23px}.ix-mid .ix-name{font-size:18px}}
.ix-link[aria-current=page] .ix-name::before{display:none}
.ix-link[aria-current=page] .ix-num::after{content:" \2022"}
.ix-desc{font-size:12.5px;line-height:1.45;max-width:none}
.ix-link{padding:.55rem 0 .65rem}
.ix-big .ix-name{font-size:25px}
.ix-lines{margin:.3rem 0 0 32px}
.ix-lines li a{padding:.15rem 0}
.ix-inner{padding-top:2.2rem;padding-bottom:1.8rem;align-items:start}
.ix-visual{justify-content:center;align-self:center}
.ix-right{gap:1.4rem}
.ix-strip{padding-top:1.1rem}
.ix-strip{gap:1.6rem}
.ix-strip .ix-marks{flex-wrap:nowrap;gap:1.8rem;justify-content:space-between}
.ix-strip .ix-mark{flex:0 1 auto;min-width:0}
.ix-strip .ix-mark img{max-width:120px}
.ix-strip .ix-mark:nth-child(4) img{max-width:120px}
.ix-strip .ix-marks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem;align-items:center;justify-items:center}
.ix-strip .ix-mark{width:100%;justify-content:center;padding:0}
.ix-strip .ix-mark img{max-width:100%!important}
.ix-lines{margin-left:32px}
.ix-lines li a{padding:.15rem 0 .15rem 1px}
.ix-strip .ix-mark:nth-child(2) img{max-height:30px}
/* index at ~75% height: a narrower drawing column so every description sits on
   two lines, tighter rows, smaller names */
.ix-inner{grid-template-columns:minmax(0,26fr) minmax(0,74fr);gap:3rem;padding-top:1.6rem;padding-bottom:1.4rem}
.ix-visual{padding-right:2.4rem}
.ix-visual .five-eras{max-width:280px}
.ix-eyebrow{margin-top:1rem}
.ix-line{font-size:1rem}
.ix-grid{gap:2.2rem}
.ix-label{margin-bottom:.4rem;padding-bottom:.5rem}
.ix-link{padding:.35rem 0 .45rem}
.ix-big .ix-name{font-size:21px}
.ix-mid .ix-name{font-size:18px}
.ix-desc{margin-top:.15rem;font-size:12px;line-height:1.4}
.ix-right{gap:1rem}
.ix-strip{padding-top:.8rem}
.ix-strip .ix-mark{height:34px}
/* contact lines with their marks */
.ix-lines li a{display:inline-flex;align-items:center;gap:.6rem}
.ix-lines svg{width:15px;height:15px;flex-shrink:0;color:var(--accent-on-dark)}
.ix-eyebrow{white-space:nowrap;font-size:10.5px;letter-spacing:.14em}
/* the property marks in their own brand colors (Mike, 2026-09-23: "They are our
   brands"). The dark-ground versions are used, so nothing is recolored. */
.ix-strip .ix-mark img,.m-marks .ix-mark img{filter:none!important}
.ix-strip .ix-mark,.m-marks .ix-mark{opacity:.92}
.ix-strip .ix-mark:hover,.ix-strip .ix-mark:focus-visible,.m-marks .ix-mark:hover{opacity:1}
@media(max-width:1024px){
  .m-marks{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem 1.2rem;align-items:center}
  .m-marks .ix-mark{justify-content:flex-start;height:36px}
  .m-marks .ix-mark img{max-width:100%;max-height:22px!important}
  .m-marks .ix-mark:nth-child(3) img{max-height:28px!important}
  .m-lines a{display:flex!important;align-items:center;gap:.7rem}
  .m-lines svg{width:16px;height:16px;color:var(--accent-on-dark);flex-shrink:0}
}

/* WORK as the feature: the drawing, its number and name, one link */
.ix-feature{display:flex;flex-direction:column;color:#fff;text-decoration:none!important}
.ix-feature .five-eras{max-width:300px;margin-bottom:1rem;transition:transform .3s ease}
.ix-feature:hover .five-eras{transform:translateY(-3px)}
.ix-fnum{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--accent-on-dark)}
.ix-fname{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:36px;line-height:1;letter-spacing:.02em;margin:.2rem 0 .45rem;transition:color .15s}
.ix-fname::after{content:" \2192";font-family:var(--font-body);font-weight:400;font-size:.55em;color:var(--accent-on-dark);opacity:0;transition:opacity .15s}
.ix-feature:hover .ix-fname,.ix-feature[aria-current=page] .ix-fname{color:var(--accent-on-dark)}
.ix-feature:hover .ix-fname::after{opacity:1}
.ix-fdesc{font-family:var(--font-body);font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.58);max-width:30ch}
.ix-visual{justify-content:center}/* Founder plate on the original portrait (Mike, 2026-09-23): FOUNDER + the Digilu
   wordmark only, set on the lower left of the photo. The wordmark is the real file,
   shown white for the dark ground. */
.hero-cred{position:absolute;z-index:3;left:-6%;bottom:12%;display:flex;align-items:center;gap:.85rem;
  padding:.8rem 1.15rem;background:rgba(12,23,35,.84);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--accent);border-radius:4px;
  box-shadow:0 18px 36px -18px rgba(0,0,0,.7)}
.hero-cred .hc-k{font-family:var(--font-body);font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.hero-cred .hc-logo{height:20px;width:auto;display:block;filter:brightness(0) invert(1)}
.hero .lede::after{display:none}
@media(max-width:900px){.hero-cred{left:-3%;bottom:10%;padding:.65rem .9rem}.hero-cred .hc-logo{height:17px}}
/* Cutout portrait (Mike: "do we need the bg glow? is that what is throwing it off?"). The
   studio backdrop was baked into the photo as a lighter blue box; the portrait is now a
   cutout, so only the bottom edge fades into the hero. */
.hero-fig picture img{
  -webkit-mask-image:linear-gradient(to bottom,#000 82%,transparent 99.5%);
          mask-image:linear-gradient(to bottom,#000 82%,transparent 99.5%)}
/* Portrait pulled in toward the copy (Mike: "move me closer to the text"). The copy
   column is fixed at its measure and the portrait starts right after it; the subject
   sits ~19% into its frame, so his arm lands about 110px from the text. */
@media(min-width:1000px){
  .hero-grid{grid-template-columns:minmax(0,568px) auto!important;justify-content:start;column-gap:0!important}
  .hero-fig{justify-self:start!important;margin-left:28px!important}
  .hero-surround{inset:-6% -10% -4% -3%}
}
@media(min-width:1000px){.hero-grid{grid-template-columns:minmax(0,440px) auto!important}}
/* The portrait's fade mask was also landing on the wordmark (it is an img inside .hero-fig) */
.hero-cred .hc-logo{-webkit-mask-image:none!important;mask-image:none!important}
.hero-cred .hc-k{color:var(--accent-on-dark)!important}
/* Frame BEHIND him, plate part of the frame (Mike: "the founder digilu graphic should be
   working with the graphic framing me... the frame is behind me"). One thin rectangle
   sits behind the cutout: his head rises above its top edge and his body covers the
   bottom edge. The FOUNDER plate is a label set on the frame's bottom line, flush with
   its left side. */
.hero-surround{display:none!important}
.hero-fig{position:relative}
.hero-fig::before{content:"";display:block!important;position:absolute;z-index:0;
  left:7%;right:7%;top:24%;bottom:7%;border:1px solid rgba(255,255,255,.26);pointer-events:none;background:none}
.hero-fig::after{content:"";position:absolute;z-index:0;right:7%;top:24%;width:44px;height:2px;
  background:var(--accent);transform:translate(1px,-1px)}
.hero-fig picture{position:relative;z-index:1}
.hero-cred{left:7%!important;right:auto!important;bottom:7%!important;transform:translate(-1px,50%);
  border-radius:0!important;border:1px solid rgba(255,255,255,.26)!important;border-left:3px solid var(--accent)!important;
  background:#0F1D29!important;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none!important}
@media(max-width:900px){.hero-cred{left:7%!important;bottom:7%!important}}
/* Hero composition, one system (Mike: "my body is a ghost floating... why isn't my photo
   tied to the big H1 and all working together?").
   - He is grounded: the photo runs to the hero's bottom edge with no fade, cropped by the
     section line the way a book cover crops a figure.
   - The frame starts on the same line as the top of MIKE MILLETT and runs down to that
     floor, open at the bottom, so name and frame share one top line.
   - The FOUNDER plate hangs on the frame's left edge, level with the end of the lede. */
@media(min-width:1000px){
  .hero{padding-bottom:0!important}
  .hero-grid{grid-template-columns:minmax(0,440px) 420px!important;align-items:start!important;min-height:0!important}
  .hero-fig{width:420px;max-width:none!important;align-self:end!important;margin-left:28px!important}
  .hero-copy{align-self:start!important;padding-top:118px!important;padding-bottom:0!important}
  .hero-fig::before{top:118px!important;bottom:0!important;left:6%!important;right:6%!important;border-bottom:0!important}
  .hero-fig::after{top:118px!important;right:6%!important}
  .hero-cred{left:6%!important;bottom:auto!important;top:430px;transform:translate(-50%,-50%)!important}
}
.hero-fig picture img{-webkit-mask-image:none!important;mask-image:none!important}
.hero-fig picture img{display:block}
.hero-copy h1{margin-top:0}
@media(max-width:999px){.hero-fig::before{bottom:0!important;border-bottom:0!important}
  .hero-cred{bottom:14%!important;left:6%!important;transform:translateX(-12%)!important}}
@media(min-width:1000px){.hero-cred{transform:translate(-14px,-50%)!important}}
@media(max-width:999px){.hero-fig::before{border-bottom:1px solid rgba(255,255,255,.26)!important}}
/* ===== Homepage hero: the masthead (2026-09-23) ==========================
   Rebuilt in the megamenu's language (Mike rated the menu a 9): tracked caps
   labels over hairlines, condensed display type, coral as the only accent, the
   five-eras climb as the drawing. The name is stacked like a book cover; the
   portrait stands on the hero's hairline floor in front of the climb, whose
   coral "Now" lands at his shoulder: the lede's forty years, drawn behind him. */
.hero--mast{padding:0!important}
.hero--mast .hm-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:3rem;align-items:end;position:relative;z-index:2}
.hm-copy{align-self:center;padding:clamp(2.5rem,7vh,4.5rem) 0 clamp(2.5rem,6vh,4rem)}
.hm-label{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);
  margin:0 0 1.3rem;padding-bottom:.9rem;border-bottom:1px solid rgba(255,255,255,.14);max-width:420px}
.hm-name{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:#fff;
  font-size:clamp(4rem,8.6vw,8.4rem);line-height:.84;letter-spacing:-.005em}
.hm-name span{display:block}
.hm-name span:last-child{color:#fff}
.hm-name span:last-child::after{content:"";display:inline-block;width:.32em;height:.1em;margin-left:.08em;background:var(--accent);vertical-align:baseline}
.hero--mast .lede{margin:1.8rem 0 0;max-width:30rem;font-size:1.12rem;line-height:1.62;color:rgba(255,255,255,.82)}
.hero--mast .lede::after{display:none}
.hm-fig{position:relative;margin:0;align-self:end;justify-self:center;width:min(100%,440px)}
.hm-fig picture{position:relative;z-index:2;display:block}
.hm-fig picture img{display:block;width:100%;height:auto;-webkit-mask-image:none;mask-image:none}
.hm-eras{position:absolute;z-index:1;left:-46%;right:-8%;top:6%;opacity:.9;pointer-events:none}
.hm-eras .five-eras{width:100%;height:auto}
.hm-eras .la-ink{stroke:rgba(255,255,255,.32)!important;stroke-width:1.3}
.hm-eras .la-det{stroke:rgba(255,255,255,.22)!important}
.hm-eras .la-lbl{fill:rgba(255,255,255,.45)!important;font-size:12px}
.hm-strip{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  border-top:1px solid rgba(255,255,255,.14);padding-top:1.1rem;padding-bottom:1.2rem;position:relative;z-index:3}
.hm-strip p{margin:0;display:flex;align-items:center;gap:.9rem}
.hm-k{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-on-dark)}
.hm-logo{height:18px;width:auto;display:block;filter:brightness(0) invert(1)}
.hm-arrow{display:inline-block;width:56px;height:1px;background:rgba(255,255,255,.3);position:relative}
.hm-arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);transform:rotate(45deg)}
.hm-sub{font-family:var(--font-body);font-size:.9rem;color:rgba(255,255,255,.6);margin-left:.6rem}
.hm-eras-note .hm-k:first-child{color:rgba(255,255,255,.55)}
@media(max-width:900px){
  .hero--mast .hm-grid{grid-template-columns:1fr;row-gap:0}
  .hm-copy{padding:2rem 0 1.5rem}
  .hm-name{font-size:clamp(3.4rem,17vw,5rem)}
  .hm-fig{width:min(80%,340px)}
  .hm-eras{left:-30%;right:-10%}
  .hm-strip{flex-direction:column;align-items:flex-start;gap:.7rem}
  .hm-sub{display:block;margin:0}
  .hm-eras-note{flex-wrap:wrap}
}
.hero.hero--mast h1.hm-name{font-size:clamp(4rem,8.2vw,8.6rem)!important;line-height:.84!important;margin:0!important}
.hm-eras .la-lbl{font-size:10.5px!important}
@media(max-width:900px){.hm-fig{width:min(64%,280px)}.hero.hero--mast h1.hm-name{font-size:clamp(3.6rem,19vw,5.2rem)!important}}
.hero--mast .lede{max-width:29rem}
.hero.hero--mast p.lede{max-width:27.5rem!important}
/* Layers around him (Mike: "Marketing Helix on a screen? Something so I'm not the top
   layer so much"). Back to front: the five-eras climb, the Marketing Helix site on a
   screen behind his shoulder, him, then the Elevate or Vanish book and the FOUNDER plate
   in front. His work sits behind and in front of him, so the photo is one layer of many. */
.hm-fig .hm-cred{position:absolute;z-index:4;left:-20%;bottom:13%;margin:0;display:flex;align-items:center;gap:.8rem;
  padding:.75rem 1.1rem;background:rgba(11,22,32,.9);border:1px solid rgba(255,255,255,.16);border-left:3px solid var(--accent);
  box-shadow:0 18px 36px -18px rgba(0,0,0,.8)}
.hm-strip{justify-content:flex-end}
@media(max-width:900px){.hm-fig .hm-cred{left:-26%;bottom:10%}}
@media(max-width:900px){.hm-fig .hm-cred{left:-18%}}
/* The line that says what he does, as the title under his name (Mike: "the 'one question'
   line shouldn't be at the bottom, it should be the title"). The bottom strip is gone, so
   he stands on the section line itself. */
.hm-tag{margin:1.1rem 0 0;font-family:var(--font-accent);font-weight:600;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.25;color:#fff;max-width:26rem}
.hero.hero--mast p.lede{margin-top:1rem!important;color:rgba(255,255,255,.72)!important}
.hm-tag{max-width:none;text-wrap:balance}
/* Proof row under the lede (Mike: "any stat or super impressive thing? Think Pitch
   Anything"). Three numbers already sourced on this page; the prize is shown, not claimed. */
.hm-proof{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;max-width:36rem}
.hm-proof li{display:flex;flex-direction:column;gap:.35rem}
.hp-n{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,3vw,2.7rem);line-height:1;color:#fff;letter-spacing:.01em;white-space:nowrap}
.hp-n i{font-style:normal;color:var(--accent-on-dark);margin:0 .06em}
.hp-l{font-family:var(--font-body);font-size:.78rem;line-height:1.4;color:rgba(255,255,255,.6)}
@media(max-width:900px){.hm-proof{grid-template-columns:1fr 1fr 1fr;gap:1rem}.hp-n{font-size:1.7rem}.hp-l{font-size:.72rem}}
/* The hero's footer row is back and carries the proof (Mike: "gotta put that footer area
   back"): he stands on its hairline, the three numbers sit under it across the width. */
.hm-strip--proof{display:block;border-top:1px solid rgba(255,255,255,.14);padding:1.6rem 0 1.9rem}
.hm-strip--proof .hm-proof{margin:0;max-width:none;gap:3rem}
.hm-strip--proof .hm-proof li{flex-direction:row;align-items:center;gap:1rem}
.hm-strip--proof .hp-l{max-width:15rem}
@media(max-width:900px){.hm-strip--proof .hm-proof{grid-template-columns:1fr;gap:1rem}.hm-strip--proof .hp-l{max-width:none}}
/* The stairs carry the title (Mike: "on the stairs art, like it was the title on there,
   behind me"). The line sits in the open space above the climb's lower steps, behind him. */
.hm-eras{pointer-events:none}
.hm-eras-title{position:absolute;left:0;top:-4%;margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,2.3vw,2.1rem);line-height:.98;letter-spacing:.01em;color:rgba(255,255,255,.9)}
.hm-eras-title::before{content:"";display:block;width:36px;height:3px;background:var(--accent);margin-bottom:.7rem}
/* FOUNDER | DIGILU rests on the floor line in front of him, like a nameplate at his feet. */
@media(max-width:900px){.hm-eras-title{font-size:1.15rem;top:-2%}}
@media(min-width:901px){.hm-eras-title{top:21%}}
@media(max-width:900px){.hm-eras-title{top:-19%;font-size:1.1rem}}
@media(max-width:900px){.hm-fig{margin-top:4.2rem!important}}
/* Plate back over him (Mike: "founder digilu looks weird now"): over his hip, overlapping his body, not beside it. */
.hm-fig .hm-cred{left:-10%;bottom:17%}
@media(max-width:900px){.hm-fig .hm-cred{left:-12%;bottom:14%}}
/* The title runs behind his head (Mike: "it has to be behind my head at least a little to
   sell it"). Larger and nudged right so the last words pass under the portrait. */
@media(min-width:901px){.hm-eras-title{font-size:clamp(2.2rem,3.2vw,3rem);left:9%;top:19%}}
@media(max-width:900px){.hm-eras-title{font-size:1.45rem;left:12%}}
@media(min-width:901px){.hm-eras-title{left:0;font-size:clamp(2.2rem,3.05vw,2.95rem)}}
@media(max-width:900px){.hm-eras-title{left:4%;font-size:1.4rem}}
/* Him smaller, everything else the same size (Mike). Only the photo shrinks; the stairs,
   title and plate keep their scale. */
.hm-fig picture{width:80%;margin:0 auto}
.hm-fig .hm-cred{left:0}
@media(max-width:900px){.hm-fig .hm-cred{left:-4%}}
@media(min-width:901px){.hm-eras-title{top:8%}.hm-fig .hm-cred{bottom:6%}}
@media(min-width:901px){.hm-eras-title{font-size:clamp(2.2rem,3.3vw,2.95rem)}}
@media(min-width:901px) and (max-width:1199px){.hm-eras{left:-14%}.hm-eras-title{font-size:1.7rem;top:12%}}
/* Photo back up (Mike: "now I'm too small, I'm lost"). FOUNDER + Digilu wordmark moves off the
   photo into the label line above the name, the same tracked-caps row as MARKETING STRATEGIST. */
.hm-fig picture{width:92%}
.hm-label{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hm-label-f{display:inline-flex;align-items:center;gap:.6rem;color:var(--accent-on-dark)}
.hm-label-f .hm-logo{height:13px;width:auto;filter:brightness(0) invert(1);opacity:.9}
/* Stairs title drawn like the line art: outline only, no fill (Mike). */
.hm-eras-title{color:transparent!important;-webkit-text-stroke:1.2px rgba(255,255,255,.55);paint-order:stroke}
@media(max-width:900px){.hm-eras-title{-webkit-text-stroke:.9px rgba(255,255,255,.6)}}
/* Title stroke at the stairs' own ink (.32), so it reads as part of the drawing (Mike asked ~20%). */
.hm-eras-title{-webkit-text-stroke-color:rgba(255,255,255,.32)!important}
@media(max-width:900px){.hm-eras-title{-webkit-text-stroke-color:rgba(255,255,255,.4)!important}}
/* FOUNDER | DIGILU as a broadcast super over him (Mike: "a layer on top of me that looks
   professional"). A lower third: set on the floor line he stands on, across his torso,
   frosted so he reads through it, the coral rule the only colour. */
.hm-super{position:absolute;z-index:3;left:50%;bottom:0;transform:translateX(-50%);margin:0;
  display:flex;align-items:center;gap:1rem;padding:.9rem 1.5rem;white-space:nowrap;
  background:rgba(10,20,30,.62);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);
  border-top:2px solid var(--accent);box-shadow:0 -12px 30px -18px rgba(0,0,0,.6)}
.hs-k{font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-on-dark);
  padding-right:1rem;border-right:1px solid rgba(255,255,255,.22);line-height:1}
.hs-logo{height:20px;width:auto;display:block;filter:brightness(0) invert(1)}
@media(max-width:900px){.hm-super{padding:.7rem 1.1rem;gap:.8rem}.hs-logo{height:16px}.hs-k{font-size:10px;padding-right:.8rem}}
/* "The advantage always moves." is shorter, so it is set larger to keep tucking behind his head. */
@media(min-width:1200px){.hm-eras-title{font-size:clamp(3rem,4.5vw,4.2rem)!important;top:6%}}
@media(min-width:901px) and (max-width:1199px){.hm-eras-title{font-size:2.5rem!important}}
@media(max-width:900px){.hm-eras-title{font-size:1.9rem!important}}

/* ======================================================================
   INNER-PAGE GROUNDS (MASTER.md section 2, 2026-09-23)
   One solid color per block, no fades, dark at both ends, light in the middle.
   Page head = hero gradient; g-light #EAEFF2; g-gray #CCD3D8; record band
   #243A4C; g-dark = hero gradient again before the near-black footer.
   ====================================================================== */
.page-head{background:linear-gradient(160deg,#1B2C3A 0%,#132433 42%,#0C1723 100%)!important}
.crumbs{background:#0C1723}
main > .sec.g-light{background:#EAEFF2}
main > .sec.g-gray{background:#CCD3D8}
main > .sec.sec--epic:not(.hero ~ .sec--epic){background:
    radial-gradient(900px 420px at 88% -60px, rgba(232,93,63,.14), transparent 70%),#243A4C!important}
main > .sec.g-dark{background:linear-gradient(160deg,#1B2C3A 0%,#132433 42%,#0C1723 100%)}
main > .sec.g-light,main > .sec.g-gray{border-top-color:rgba(15,29,37,.10)}
.g-gray .idea,.g-gray .stats li,.g-gray .biblio > li,.g-gray .rooms li,.g-gray .next-routes li{border-color:rgba(15,29,37,.16)}
.g-gray .ba-plate,.g-gray .film,.g-gray .diagram{box-shadow:0 10px 26px rgba(15,29,37,.10)}
.g-gray .form--page input,.g-gray .form--page select,.g-gray .form--page textarea{border-color:#AEB8BF}

/* the dark closer: light type, light line art, coral on dark */
.g-dark,.g-dark h2,.g-dark h3{color:#fff}
.g-dark > .wrap > h2{color:#fff}
.g-dark p,.g-dark .now-copy p,.g-dark .pattern,.g-dark .pattern *{color:rgba(255,255,255,.84)!important}
.g-dark .pattern{border-left-color:var(--accent-on-dark)}
.g-dark .h-eyebrow{color:var(--accent-on-dark)}
.g-dark > .wrap::before{background:rgba(255,255,255,.22)!important}
.g-dark > .wrap > h2::after{background:var(--accent-on-dark)!important}
.g-dark .textlinks a{color:var(--accent-on-dark);text-decoration-color:rgba(238,107,79,.45)}
.g-dark .textlinks a:hover{color:#fff;text-decoration-color:#fff}
.g-dark a:not(.textlinks a):not(.btn){color:#fff}
.g-dark .la .la-ink{stroke:rgba(255,255,255,.72)!important}
.g-dark .la .la-ghost{stroke:#fff!important}
.g-dark .la .la-det{stroke:rgba(255,255,255,.45)!important;opacity:1!important}
.g-dark .la .la-acc{stroke:var(--accent-on-dark)!important}
.g-dark .la .la-dot{fill:rgba(255,255,255,.6)!important}
.g-dark .la .la-dot-acc{fill:var(--accent-on-dark)!important}
.g-dark .la .la-lbl{fill:rgba(255,255,255,.6)!important}
.g-dark .la .la-lbl.la-date{fill:var(--accent-on-dark)!important}
.g-dark .shift-label{color:rgba(255,255,255,.88)}
.g-dark .shift-date{color:var(--accent-on-dark)}
.g-dark .shift-row{border-color:rgba(255,255,255,.14)!important}
.cycle-art{max-width:460px;margin:2rem auto 1.4rem}
.cycle-art svg,.room-art svg{width:100%;height:auto}
.room-art{max-width:620px;margin:2.2rem 0 0}
@media(min-width:1000px){.sec:not(.sec--intro) > .wrap > .cycle-art,.sec:not(.sec--intro) > .wrap > .room-art{grid-column:2}}
.cycle-art{max-width:none;margin:2rem 0 1.6rem}
.cycle-art svg.la{width:min(540px,100%);max-width:none;height:auto;display:block}
.sec--art .la .la-lbl.la-date{fill:var(--accent-text);text-transform:uppercase;letter-spacing:.14em}

/* ---------- one photo treatment on inner pages (Mike, 2026-09-23) --------
   The documentary photos were shot in every kind of light. Set in black and
   white they read as one editorial set; the coral corner brackets are the only
   color, and each photo returns to color on hover. Graphics, logos, the
   wildfire photo and site screenshots keep their color. */
main .turn-fig img,main .shots img,main .shot img{filter:grayscale(1) contrast(1.12) brightness(1.03);transition:filter .5s ease}
main .turn-fig:hover img,main .shots .shot:hover img{filter:none}
main .turn-fig img[src*="stratusclean-rebrand"],main .turn-fig img[src*="wildfire"],main .shot img[src*="stratusclean-rebrand"]{filter:none}

/* ======================================================================
   THE RAMP (Mike, 2026-09-23): inner pages go dark -> light -> lightest ->
   light -> dark, like the homepage. Replaces the alternating g-light/g-gray.
   ====================================================================== */
main > .sec.g-dark1{background:#243A4C}
main > .sec.g-l1{background:#CCD3D8}
main > .sec.g-l2{background:#DCE2E6}
main > .sec.g-l3{background:#EAEFF2}
main > .sec.g-l4{background:#F5F7F8}
main > .sec.g-l1,main > .sec.g-l2,main > .sec.g-l3,main > .sec.g-l4{border-top-color:rgba(15,29,37,.08)}
/* the first dark block reads like the homepage record band: light type */
.g-dark1,.g-dark1 h2,.g-dark1 h3{color:#fff}
.g-dark1 p,.g-dark1 .pattern,.g-dark1 .pattern *,.g-dark1 .page-support{color:rgba(255,255,255,.84)!important}
.g-dark1 .page-support{color:#fff!important}
.g-dark1 a:not(.textlinks a){color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.g-dark1 .textlinks a{color:var(--accent-on-dark)}
.g-dark1 > .wrap::before{background:rgba(255,255,255,.22)!important}
.g-dark1 > .wrap::after,.g-dark1 > .wrap > h2::after{background:var(--accent-on-dark)!important}
.g-dark1 .h-eyebrow{color:var(--accent-on-dark)}
.g-dark1 .la .la-ink{stroke:rgba(255,255,255,.72)!important}
.g-dark1 .la .la-det{stroke:rgba(255,255,255,.45)!important;opacity:1!important}
.g-dark1 .la .la-acc{stroke:var(--accent-on-dark)!important}
.g-dark1 .la .la-lbl{fill:rgba(255,255,255,.6)!important}
.g-dark1 .la .la-dot{fill:rgba(255,255,255,.6)!important}
.g-dark1 .idea{border-top-color:rgba(255,255,255,.16)}
.g-dark1 .films .film{background:#1B2E3D;border-color:rgba(255,255,255,.1)}
.g-dark1 .film figcaption strong{color:#fff}

/* ===== Inner-page hero = the homepage masthead (2026-09-23) ===============
   Mike: "How is that like the homepage hero which is the standard and example.
   Not even close." Same parts as .hero--mast: tracked caps label over a hairline
   (here it is the breadcrumb), condensed display headline closing on the coral
   slab, the lede, a hero-scale drawing or framed photograph standing on the
   hairline floor, and the floor strip (proof row, or the page's sections). */
.page-head.ph{padding:0!important;background:linear-gradient(160deg,#1B2C3A 0%,#132433 42%,#0C1723 100%)!important}
.ph .ph-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:3.5rem;align-items:end;position:relative;z-index:2}
.ph:not(.ph--fig) .ph-grid{grid-template-columns:minmax(0,1fr)}
.ph-copy{align-self:center;padding:clamp(2.6rem,7vh,4.6rem) 0 clamp(2.4rem,6vh,3.8rem)}
.ph-label{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:0 0 1.6rem;padding-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.16);font-family:var(--font-body);font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);max-width:34rem}
.ph-label a{color:rgba(255,255,255,.55);text-decoration:none}
.ph-label a:hover{color:#fff}
.ph-label span[aria-hidden]{color:rgba(255,255,255,.3)}
.ph-label > span:last-child{color:var(--accent-on-dark)}
.page-head.ph h1.ph-h1{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;color:#fff;
  letter-spacing:.005em;text-wrap:balance;max-width:15ch}
.page-head.ph h1.ph-h1--s{font-size:clamp(3.4rem,7.4vw,7.6rem);line-height:.86}
.page-head.ph h1.ph-h1--m{font-size:clamp(2.7rem,4.9vw,5.1rem);line-height:.9;max-width:14ch}
.page-head.ph h1.ph-h1--l{font-size:clamp(2.3rem,3.9vw,4.1rem);line-height:.93;max-width:17ch}
.ph-slab{display:inline-block;width:.32em;height:.1em;margin-left:.1em;background:var(--accent);vertical-align:baseline}
.page-head.ph .lede{margin:1.5rem 0 0;max-width:30rem;font-size:1.12rem;line-height:1.6;color:rgba(255,255,255,.74)}
.page-head.ph .lede::after{display:none}
/* the drawing: the homepage stairs' treatment, brighter because here it is the figure */
.ph-fig{margin:0;position:relative;align-self:end}
.ph-fig--art{align-self:center;padding:2rem 0}
.ph-fig--art svg{display:block;width:100%;max-width:560px;height:auto;margin-left:auto;max-height:420px}
.ph-fig--art .la-ink{stroke:rgba(255,255,255,.62)!important;stroke-width:1.4}
.ph-fig--art .la-det{stroke:rgba(255,255,255,.34)!important}
.ph-fig--art .la-lbl{fill:rgba(255,255,255,.55)!important}
.ph-fig--art .la-dot{fill:rgba(255,255,255,.5)!important}
.ph-fig--art [data-draw]{stroke-dasharray:none!important;stroke-dashoffset:0!important}
/* the photograph: black and white in the site's coral bracket, standing on the floor */
.ph-fig--photo{justify-self:center;width:min(100%,360px);margin-top:2.6rem}
.ph-fig--photo img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.12) brightness(1.03)}
.ph-fig--photo .ph-frame{position:absolute;inset:-12px -12px auto auto;width:42%;height:42%;
  border-top:2px solid var(--accent);border-right:2px solid var(--accent);pointer-events:none}
/* the floor */
.ph-strip{position:relative;z-index:2}
.ph .hm-strip--proof{border-top:1px solid rgba(255,255,255,.14);padding:1.6rem 0 1.9rem}
.ph .hm-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem;list-style:none;margin:0;padding:0}
.ph .hm-proof.ph-proof--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:48rem}
.ph .hm-proof li{display:flex;flex-direction:row;align-items:center;gap:1rem}
.ph .hp-l{max-width:15rem}
.ph-strip--index{display:flex;align-items:baseline;gap:2rem;border-top:1px solid rgba(255,255,255,.14);padding:1.35rem 0 1.5rem}
.ph-k{margin:0;flex:none;font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.ph-index{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;list-style:none;margin:0;padding:0}
.ph-index a{display:inline-flex;align-items:baseline;gap:.55rem;color:rgba(255,255,255,.8);text-decoration:none;
  font-family:var(--font-body);font-size:.92rem;font-weight:500}
.ph-index a:hover{color:#fff}
.ph-n{font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--accent-on-dark);letter-spacing:.04em}
h2[id]{scroll-margin-top:90px}
@media(max-width:900px){
  .ph .ph-grid{grid-template-columns:1fr}
  .ph-copy{padding:2rem 0 1.4rem}
  .page-head.ph h1.ph-h1--s{font-size:clamp(3rem,15vw,4.4rem)}
  .page-head.ph h1.ph-h1--m{font-size:clamp(2.3rem,10vw,3.2rem)}
  .page-head.ph h1.ph-h1--l{font-size:clamp(2rem,8.4vw,2.7rem)}
  .ph-fig--art{padding:0 0 1.6rem}
  .ph-fig--art svg{max-width:100%;max-height:230px;margin:0 auto}
  .ph-fig--photo{width:min(62%,250px);margin-top:.5rem;margin-bottom:0}
  .ph .hm-proof,.ph .hm-proof.ph-proof--2{grid-template-columns:1fr;gap:1rem}
  .ph .hp-l{max-width:none}
  .ph-strip--index{display:block}
  .ph-k{margin-bottom:.8rem}
  .ph-index{display:grid;gap:.7rem}
}

/* ===== Inner-page sections, templated from the homepage (2026-09-23) ===== */
/* INTRO: no empty rail. Label over a hairline, the first line at the homepage's
   section-lede scale, the supporting lines beside it. */
.sec--intro > .wrap{max-width:var(--container-max)!important}
.sec--intro > .wrap > .intro-st,.sec > .wrap > .intro-st{grid-column:1 / -1!important}
.intro-st{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.1rem 4rem;align-items:start;margin-bottom:.5rem}
.intro-k{grid-column:1 / -1;margin:0 0 .6rem!important;padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.16);
  font-family:var(--font-body);font-size:11px!important;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-on-dark)}
.sec .intro-st p.intro-lead{margin:0;font-family:var(--font-body);font-size:clamp(1.45rem,2.2vw,1.95rem)!important;line-height:1.32!important;
  font-weight:500;color:#fff;max-width:26ch;letter-spacing:-.005em}
.intro-rest p{margin:0 0 .9rem;font-size:1.02rem!important;line-height:1.6;color:rgba(255,255,255,.72);max-width:44ch}
.intro-rest > :last-child{margin-bottom:0}
.sec--intro > .wrap::before,.sec--intro > .wrap::after{display:none!important}
.sec--epic .intro-st{margin-bottom:3rem}
@media(max-width:900px){.intro-st{grid-template-columns:1fr;gap:1rem}}
/* SOURCES: the homepage's framed cards (before/after), two across, full width. */
.sec:not(.sec--intro) > .wrap > .biblio{grid-column:1 / -1}
.biblio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem;margin-top:1.4rem!important}
.now-copy .biblio,.turn-copy .biblio{grid-template-columns:1fr}
.biblio > li{position:relative;background:#fff;padding:1.5rem 1.6rem 1.4rem!important;border:0!important;
  box-shadow:0 1px 2px rgba(19,36,51,.06),0 10px 28px -18px rgba(19,36,51,.35)}
.biblio > li::before,.biblio > li::after{content:"";position:absolute;top:10px;width:14px;height:14px;border-top:1.5px solid var(--accent)}
.biblio > li::before{left:10px;border-left:1.5px solid var(--accent)}
.biblio > li::after{right:10px;border-right:1.5px solid var(--accent)}
.biblio > li h3{font-size:1.08rem!important;line-height:1.3;margin:.2rem 0 .45rem}
.biblio > li h3 a{color:var(--digilu-navy,#132433);text-decoration:none}
.biblio > li h3 a:hover{color:var(--accent-solid,#C8452C)}
.biblio > li .meta{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#6B7480;margin:0 0 .7rem}
.biblio > li p{font-size:.95rem;line-height:1.55}
.biblio blockquote.excerpt{margin:.9rem 0 0;padding:.1rem 0 .1rem 1rem;border-left:2px solid var(--accent);font-size:.92rem;line-height:1.55;color:#3B4552}
.sec--epic .biblio > li,.g-dark .biblio > li,.g-dark1 .biblio > li{background:rgba(255,255,255,.05);box-shadow:none;outline:1px solid rgba(255,255,255,.1)}
.sec--epic .biblio > li h3 a,.g-dark .biblio > li h3 a,.g-dark1 .biblio > li h3 a{color:#fff}
@media(max-width:900px){.biblio{grid-template-columns:1fr}}
/* GRID items as the homepage's "Now" cards: a raised white card on light grounds,
   a quiet glass card on dark ones, the link pinned to the card's foot. */
.ideas3 > .idea{background:#fff;border-top:0!important;padding:1.7rem 1.7rem 1.5rem!important;
  box-shadow:0 1px 2px rgba(19,36,51,.06),0 12px 30px -20px rgba(19,36,51,.4)}
.ideas3 > .idea::before{left:1.7rem;top:0;width:36px;height:3px}
.ideas3 > .idea > .links,.ideas3 > .idea > p:last-child:has(a){margin-top:auto;padding-top:1rem}
.ideas3.ideas4{gap:1.5rem!important}
.ideas3:not(.ideas4){gap:1.5rem!important}
.sec--epic .ideas3 > .idea,.g-dark .ideas3 > .idea,.g-dark1 .ideas3 > .idea{background:rgba(255,255,255,.05);box-shadow:none;outline:1px solid rgba(255,255,255,.1)}
.g-dark .next-routes li,.sec--epic .next-routes li,.g-dark1 .next-routes li{color:rgba(255,255,255,.62)!important;border-color:rgba(255,255,255,.16)!important}
.g-dark .next-routes a,.sec--epic .next-routes a,.g-dark1 .next-routes a{color:#fff!important}
/* ABM stages as the homepage's numbered cards: big coral numeral, three across. */
.sec > .wrap > .ladder--stages{grid-column:1 / -1}
ol.ladder--stages{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;list-style:none;padding:0!important;margin:2.4rem 0 0!important;border:0!important}
ol.ladder--stages > li{display:block!important;position:relative;background:#fff;padding:1.5rem 1.6rem 1.4rem!important;border:0!important;
  box-shadow:0 1px 2px rgba(19,36,51,.06),0 12px 30px -20px rgba(19,36,51,.4)}
ol.ladder--stages .ladder-n{display:block;position:static!important;font-family:var(--font-display);font-weight:700;font-size:2.6rem!important;line-height:1;color:var(--accent)!important;margin:0 0 .8rem!important;width:auto!important}
ol.ladder--stages h3{font-size:1.15rem;margin:0 0 .25rem}
ol.ladder--stages .idea-tag{font-weight:600;margin:0 0 .6rem;font-size:1rem}
ol.ladder--stages p{font-size:.93rem;line-height:1.55;margin:0 0 .5rem}
@media(max-width:900px){ol.ladder--stages{grid-template-columns:1fr}}
.sec:not(.sec--intro) > .wrap > ol.ladder--stages,.sec:not(.sec--intro) > .wrap > .biblio{grid-column:1 / -1!important}
/* FORMS as a finished object: a raised card with the coral lead, caps labels, a full-width send. */
form.form--page{position:relative;max-width:760px;background:#fff;padding:2.2rem 2.2rem 2rem!important;margin-top:1.8rem;
  box-shadow:0 1px 2px rgba(19,36,51,.06),0 18px 40px -24px rgba(19,36,51,.45)}
form.form--page::before{content:"";position:absolute;left:2.2rem;top:0;width:44px;height:3px;background:var(--accent)}
form.form--page label{font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:#4A5563!important;margin:1rem 0 .4rem!important}
form.form--page input,form.form--page select,form.form--page textarea{background:#F5F7F8!important;border:1px solid #D5DCE1!important;border-radius:4px!important;padding:.85rem .95rem!important;margin-bottom:0!important}
form.form--page input:focus,form.form--page select:focus,form.form--page textarea:focus{background:#fff!important;border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(232,93,63,.14)}
form.form--page .btn,form.form--page button[type=submit]{margin-top:1.6rem;background:var(--accent-solid,#C8452C);border-color:var(--accent-solid,#C8452C);color:#fff;padding:1rem 1.8rem;letter-spacing:.12em}
form.form--page .btn:hover,form.form--page button[type=submit]:hover{background:#132433;border-color:#132433}
@media(max-width:700px){form.form--page{padding:1.6rem 1.25rem 1.4rem!important}form.form--page::before{left:1.25rem}}
.turn ~ .shots,.sec--turn .shots{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr))!important;gap:1.4rem}
.sec .intro-st p.intro-lead--long{font-size:clamp(1.2rem,1.7vw,1.5rem)!important;max-width:34ch}
main .turn-fig img[src*="book-cover"]{filter:none!important}
.turn-fig:has(img[src*="book-cover"]){max-width:300px;justify-self:center}
.turn-fig:has(img[src*="stratus-booth"]){max-width:420px;justify-self:center}
/* Work: "other selected work" cards and the four site screenshots, full width */
.sec:not(.sec--intro) > .wrap > .cards.cards--2,.sec:not(.sec--intro) > .wrap > .shot-grid{grid-column:1 / -1!important}
.ideas3:empty{display:none}
.cards.cards--2{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1.4rem!important;margin-top:2rem}
.cards.cards--2 > .card--static{position:relative;background:#fff!important;border:0!important;border-radius:0!important;padding:1.7rem 1.6rem 1.5rem!important;
  box-shadow:0 1px 2px rgba(19,36,51,.06),0 12px 30px -20px rgba(19,36,51,.4)}
.cards.cards--2 > .card--static::before{content:"";position:absolute;left:1.6rem;top:0;width:36px;height:3px;background:var(--accent)}
.cards.cards--2 > .card--static h3{font-size:1.05rem;margin:0 0 .5rem}
.cards.cards--2 > .card--static p{font-size:.92rem;line-height:1.55;margin:0}
.shot-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1.4rem!important;margin-top:2.6rem!important}
@media(max-width:900px){.cards.cards--2{grid-template-columns:1fr!important}.shot-grid{grid-template-columns:1fr 1fr!important}}
.g-dark .name-note,.sec--epic .name-note,.g-dark1 .name-note{color:rgba(255,255,255,.72)!important}
/* dark grounds: any muted body copy stays readable */
.g-dark p:not(.meta):not(.h-eyebrow),.g-dark li{color:rgba(255,255,255,.78)}
@media(min-width:901px){.ideas3:not(.ideas4) > .idea:last-child:nth-child(3n+1){grid-column:1 / -1}}
@media(min-width:901px){.biblio > li:last-child:nth-child(odd):not(:first-child){grid-column:1 / -1}}
.intro-st--solo{grid-template-columns:1fr}
.intro-st--solo .intro-lead{max-width:34ch!important}
.sec--intro > .wrap > .films{grid-column:1 / -1!important;display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.2rem}
@media(max-width:900px){.sec--intro > .wrap > .films{grid-template-columns:1fr}}
.sec--intro[class*="g-l"] > .wrap > p{color:#2E3A47!important}
.sec--intro[class*="g-l"] > .wrap > p:first-of-type{color:#132433!important}
.ph-fig--logo{align-self:center;justify-self:end;width:min(100%,460px);padding:2rem 0}
.ph-fig--logo img{display:block;width:100%;height:auto}
@media(max-width:900px){.ph-fig--logo{justify-self:start;width:min(80%,300px);padding:0 0 1.4rem}}
.ph-fig--logo:has(img[src*="marketingob1"]){width:min(100%,320px)}
main .turn-fig img[src*="/shots/"]{filter:none!important}
/* engine pages: "In brief" on light grounds */
.sec--intro[class*="g-l"] .intro-k{color:var(--accent-solid,#C8452C);border-bottom-color:rgba(19,36,51,.16)}
.sec--intro[class*="g-l"] .intro-st p.intro-lead{color:#132433!important}
.sec--intro[class*="g-l"] .intro-rest p{color:#3B4552!important}
.sec--intro > .wrap > .intro-k--solo{grid-column:1 / -1!important;max-width:30rem}
.sec--intro-fig > .wrap > .intro-split{grid-column:1 / -1!important;display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)!important;gap:3rem;align-items:center}
.sec--intro-fig .intro-split > div > p:first-child{font-size:clamp(1.2rem,1.7vw,1.5rem)!important;line-height:1.4;color:#132433!important;max-width:36ch}
.sec--intro-fig .intro-split > div > p{color:#3B4552!important;max-width:58ch}
.sec--intro .intro-k--solo{color:var(--accent-solid,#C8452C)!important;padding-bottom:.85rem;border-bottom:1px solid rgba(19,36,51,.16);margin-bottom:1.6rem!important}
@media(max-width:900px){.sec--intro-fig > .wrap > .intro-split{grid-template-columns:1fr!important}}
.sec--intro[class*="g-l"] > .wrap > p.intro-k--solo{color:var(--accent-solid,#C8452C)!important;font-size:11px!important}
/* Engine pages: Related and Common questions as the site's cards */
.sec:not(.sec--intro) > .wrap > ul.list,.sec:not(.sec--intro) > .wrap > .qa{grid-column:1 / -1!important}
.sec > .wrap > ul.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;list-style:none;padding:0;margin:1.6rem 0 0}
.sec > .wrap > ul.list > li{position:relative;background:#fff;padding:1.6rem 1.5rem 1.4rem;margin:0;font-size:.95rem;line-height:1.55;color:#3B4552;
  box-shadow:0 1px 2px rgba(19,36,51,.06),0 12px 30px -20px rgba(19,36,51,.4)}
.sec > .wrap > ul.list > li::before{content:"";position:absolute;left:1.5rem;top:0;width:36px;height:3px;background:var(--accent)}
.sec > .wrap > ul.list > li::marker{content:""}
.sec > .wrap > ul.list > li > a:first-child{display:block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:1.02rem;
  letter-spacing:.01em;color:#132433;text-decoration:none;margin-bottom:.35rem}
.sec > .wrap > ul.list > li > a:first-child:hover{color:var(--accent-solid,#C8452C)}
.sec > .wrap > .qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.3rem;margin-top:1.6rem}
.sec > .wrap > .qa > .qa-item{position:relative;background:#fff;padding:1.6rem 1.6rem 1.4rem;border:0;margin:0;
  box-shadow:0 1px 2px rgba(19,36,51,.06),0 12px 30px -20px rgba(19,36,51,.4)}
.sec > .wrap > .qa > .qa-item::before{content:"Q";position:absolute;right:1.4rem;top:1rem;font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--accent);opacity:.9}
.sec > .wrap > .qa > .qa-item h3{padding-right:2rem;margin:0 0 .6rem}
.sec > .wrap > .qa > .qa-item p{font-size:.93rem;line-height:1.58;color:#3B4552;margin:0}
@media(min-width:901px){.sec > .wrap > .qa > .qa-item:last-child:nth-child(odd):not(:first-child){grid-column:1 / -1}}
@media(max-width:900px){.sec > .wrap > ul.list,.sec > .wrap > .qa{grid-template-columns:1fr}}
.sec > .wrap > .qa > .qa-item h3{max-width:none!important}
.list-line{display:block}

/* ---------- hero form (media, speaking), 2026-09-23 ----------
   The request form IS the hero figure: a booker or organizer sees it first. */
.ph-fig--form{align-self:center;width:100%;max-width:520px;justify-self:end;padding:2rem 0}
.ph-fig--form .form--head label{font-size:.82rem}
.ph-fig--form .form--head select{width:100%;background:rgba(255,255,255,.94);border:1px solid transparent;border-radius:6px;
  margin-bottom:11px;font-size:.9rem;padding:9px 11px;font-family:inherit}
@media(max-width:900px){.ph-fig--form{justify-self:stretch;max-width:none;padding:0 0 1.6rem}}
@media(max-width:520px){.ph-fig--form .phf-row{grid-template-columns:1fr}}

/* Form heroes, second pass (Mike: "move the h1 and description up and add the line art
   back in", "those forms are so bright and in your face"). Copy sits at the top of the
   column with its drawing under it; the form is dark glass, not white slabs. */
.ph--form .ph-grid{align-items:start}
.ph--form .ph-copy{align-self:start;padding-top:clamp(2.2rem,5vh,3.4rem)}
.ph-art-under{margin:2.2rem 0 0;padding:0}
.ph-art-under svg{display:block;width:100%;max-width:420px;height:auto;max-height:230px;margin:0}
.ph-fig--form{align-self:start;padding-top:clamp(2.2rem,5vh,3.4rem)}
.ph-fig--form .form--head{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.11)}
.ph-fig--form .form--head label{color:rgba(255,255,255,.62);font-weight:500}
.ph-fig--form .form--head input,.ph-fig--form .form--head textarea,.ph-fig--form .form--head select{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff}
.ph-fig--form .form--head input:focus,.ph-fig--form .form--head textarea:focus,.ph-fig--form .form--head select:focus{
  outline:none;border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.09)}
.ph-fig--form .form--head select option{color:#1B2A33}
.ph-fig--form .form--head .btn{background:transparent;border:1px solid var(--accent-solid);color:#fff}
.ph-fig--form .form--head .btn:hover{background:var(--accent-solid);border-color:var(--accent-solid);color:#fff}
@media(max-width:900px){.ph-art-under{display:none}.ph--form .ph-copy{padding-bottom:1.2rem}}
.ph-fig--form .form--head .form-status:empty{display:none}
.ph-fig--form .form--head{padding-bottom:1.15rem}

/* ---------- request forms (media, speaking), 2026-09-23 ----------
   Three numbered steps, hairline dividers, pill choices. Dark glass, one accent. */
.rq{position:relative}
.rq-head{margin:0 0 1.1rem}
.rq-k{font-family:var(--font-accent);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-on-dark);margin:0 0 .35rem}
.rq-intro{color:rgba(255,255,255,.72);font-size:.95rem;line-height:1.5;margin:0;max-width:34em}
.ph-fig--form .form--rq{padding:1.4rem 1.5rem 1.3rem;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.rq-step{padding:1.05rem 0 .35rem;border-top:1px solid rgba(255,255,255,.08)}
.rq-step:first-of-type{border-top:0;padding-top:.1rem}
.rq-step-h{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .85rem;font-family:var(--font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem;color:#fff}
.rq-n{font-size:.78rem;color:var(--accent-on-dark);letter-spacing:.08em}
.rq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.rq-wide{grid-column:1/-1}
.rq-field label,.rq-pills legend{display:block;font-size:.8rem;color:rgba(255,255,255,.6);margin:0 0 .35rem;font-weight:500}
.rq-opt{color:rgba(255,255,255,.32);font-weight:400;margin-left:.35rem;font-size:.72rem;letter-spacing:.02em}
.ph-fig--form .form--rq input[type=text],.ph-fig--form .form--rq input[type=email],.ph-fig--form .form--rq input[type=url],
.ph-fig--form .form--rq textarea{width:100%;margin-bottom:12px}
.ph-fig--form .form--rq ::placeholder{color:rgba(255,255,255,.28)}
.rq-pills{border:0;margin:0 0 12px;padding:0;min-width:0}
.rq-pill-row{display:flex;flex-wrap:wrap;gap:6px}
.rq-pill{position:relative;cursor:pointer;margin:0}
.rq-pill input{position:absolute;opacity:0;width:1px;height:1px}
.rq-pill span{display:inline-block;padding:.42rem .8rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  font-size:.82rem;color:rgba(255,255,255,.72);transition:border-color .15s,background .15s,color .15s}
.rq-pill:hover span{border-color:rgba(255,255,255,.4);color:#fff}
.rq-pill input:checked+span{border-color:var(--accent-solid);background:rgba(207,72,50,.14);color:#fff}
.rq-pill input:focus-visible+span{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.rq-foot{display:flex;align-items:center;gap:1rem;margin-top:.6rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}
.ph-fig--form .form--rq .btn{width:auto;flex:0 0 auto;padding-left:1.6rem;padding-right:1.6rem;margin:0}
.rq-note{margin:0;font-size:.78rem;color:rgba(255,255,255,.45)}
@media(max-width:560px){.rq-grid{grid-template-columns:1fr}.rq-foot{flex-direction:column;align-items:stretch}
  .ph-fig--form .form--rq .btn{width:100%}.ph-fig--form .form--rq{padding:1.1rem 1rem}}

/* ---------- the note to Mike (media, speaking), v3 2026-09-23 ----------
   The form is a short letter with blanks. Underlined inputs sit in the sentence at
   reading size, so the request reads like a real one and the page stays short. */
.nt-k{font-family:var(--font-accent);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-on-dark);margin:0 0 .8rem}
.ph-fig--form .form--note{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:1.9rem 2rem 1.6rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.nt-hi,.nt-line{font-family:var(--font-body);font-size:1.22rem;line-height:2.25;color:rgba(255,255,255,.86);margin:0}
.nt-hi{margin-bottom:.2rem;color:#fff}
.ph-fig--form .form--note .nt-in{display:inline-block;width:var(--w,14ch);max-width:100%;margin:0 .15rem;padding:0 .2rem .1rem;
  background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.35);border-radius:0;
  font:inherit;color:#fff;line-height:1.3;vertical-align:baseline}
.ph-fig--form .form--note .nt-in::placeholder{color:rgba(255,255,255,.34);font-style:italic}
.ph-fig--form .form--note .nt-in:focus{outline:none;border-bottom-color:var(--accent-solid);background:rgba(255,255,255,.04)}
.nt-sel{position:relative;display:inline-block;margin:0 .15rem}
.nt-sel select{appearance:none;-webkit-appearance:none;background:transparent;border:0;
  border-bottom:1px solid var(--accent-solid);border-radius:0;font:inherit;color:#fff;padding:0 1.1rem .1rem .2rem;cursor:pointer}
.nt-sel::after{content:"";position:absolute;right:.25rem;top:50%;width:.4rem;height:.4rem;margin-top:-.3rem;
  border-right:1.5px solid var(--accent-on-dark);border-bottom:1.5px solid var(--accent-on-dark);transform:rotate(45deg);pointer-events:none}
.nt-sel select option{color:#1B2A33}
.nt-ask{display:block;margin:1.1rem 0 .2rem}
.nt-ask span{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.45rem}
.ph-fig--form .form--note textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:6px;color:#fff;font:inherit;font-size:1rem;line-height:1.55;padding:.7rem .85rem;margin:0}
.ph-fig--form .form--note textarea::placeholder{color:rgba(255,255,255,.32)}
.ph-fig--form .form--note textarea:focus{outline:none;border-color:rgba(255,255,255,.4)}
.nt-reply{margin-top:.5rem}
.nt-foot{display:flex;align-items:center;gap:1rem;margin-top:1.1rem}
.ph-fig--form .form--note .btn{width:auto;margin:0;padding-left:1.6rem;padding-right:1.6rem}
.nt-note{margin:0;font-size:.8rem;color:rgba(255,255,255,.45)}
@media(max-width:560px){.nt-hi,.nt-line{font-size:1.08rem;line-height:2.1}
  .ph-fig--form .form--note{padding:1.3rem 1.1rem}.nt-foot{flex-direction:column;align-items:stretch}
  .ph-fig--form .form--note .btn{width:100%}}
.ph-fig--form .form--note .nt-sel select{width:auto;margin:0;background:transparent;border:0;
  border-bottom:1px solid var(--accent-solid);border-radius:0;padding:0 1.2rem .1rem .2rem;font:inherit;color:#fff;height:auto;line-height:1.3}
.ph-fig--form .form--note .nt-sel select:focus{outline:none;background:rgba(255,255,255,.04)}
/* even columns: the note fills the hero height, the question box takes the slack */
@media(min-width:901px){
  .ph--form .ph-grid{align-items:stretch}
  .ph--form .ph-fig--form{align-self:stretch;display:flex;flex-direction:column;padding-bottom:clamp(2.4rem,6vh,3.8rem)}
  .ph-fig--form .nt{flex:1;display:flex;flex-direction:column}
  .ph-fig--form .form--note{flex:1;display:flex;flex-direction:column}
  .ph-fig--form .nt-ask{flex:1;display:flex;flex-direction:column}
  .ph-fig--form .form--note .nt-ask textarea{flex:1;min-height:6rem;resize:none}
}
/* footer marks: left-aligned with even spacing (Mike, 2026-09-23) */
.fmarks-row{justify-content:flex-start;flex:0 1 auto;gap:.6rem 2.6rem}
/* the AIOInsights file carries ~30% empty canvas on its right; pull the next mark in */
.fmarks .ix-mark[aria-label="AIOInsights"]{margin-right:-36px}
/* Sun Grove photos (2026-09-24): the volleyball clipping is a tall newspaper photo; show all of it, face included. */
main .turn-fig:has(img[src*="volleyball-chatsworth"]){max-width:440px;justify-self:center}
main .turn-fig img[src*="volleyball-chatsworth"]{max-height:none;object-fit:contain}

/* ---------- Growing up: the High Stepping feature (2026-09-24) ----------
   A newspaper clipping taped to the page, marked up like game film, then
   Mike's own joke about the close-up. Sepia on purpose: it is a 1988 clipping,
   so the site's grayscale photo filter does not apply here. */
@media(min-width:1000px){
  .sec--hs > .wrap > h2{grid-column:1 / -1;max-width:none}
  .sec--hs > .wrap > .hs,.sec--hs > .wrap > .hs-joke{grid-column:1 / -1}
}
.sec--hs > .wrap > h2{font-size:clamp(2.2rem,4.2vw,3.6rem)!important;line-height:.98;padding-left:0}
.hs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4.5rem;align-items:start;margin-top:2.8rem}
.hs-clip{position:relative;margin:0;padding:14px 14px 18px;background:#FBF6EC;transform:rotate(-2deg);
  box-shadow:0 2px 4px rgba(15,29,37,.08),0 24px 50px -18px rgba(15,29,37,.45)}
.hs-clip img{display:block;width:100%;height:auto;filter:none!important}
.hs-clip figcaption{margin-top:.9rem;font-family:var(--font-accent);font-size:.84rem;line-height:1.45;color:#5A5040;font-style:italic}
.hs-tape{position:absolute;z-index:2;top:-14px;left:50%;width:120px;height:30px;transform:translateX(-50%) rotate(3deg);
  background:rgba(240,232,210,.78);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.hs-note{position:absolute;z-index:3;width:0;height:0}
.hs-note i{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border:2.5px solid var(--accent);border-radius:50%;
  background:rgba(226,85,61,.18)}
.hs-note b{position:absolute;top:-15px;white-space:nowrap;padding:5px 11px 4px;background:var(--digilu-navy);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;border-radius:2px}
.hs-note b::before{content:"";position:absolute;top:50%;width:26px;height:2px;background:var(--accent)}
.hs-note--ball b{left:36px}.hs-note--ball b::before{right:100%}
.hs-note--eyes b{right:36px}.hs-note--eyes b::before{left:100%}
.hs-lead{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,2.6vw,2.35rem);
  line-height:1.05;color:var(--digilu-navy);margin:0 0 1.4rem}
.hs-copy > p:not(.hs-lead):not(.hs-verdict){font-size:1.02rem;line-height:1.7;color:#2F3A44;margin:0 0 1rem}
.hs-nums{list-style:none;padding:1.4rem 0 0;margin:1.8rem 0 1.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  border-top:1px solid var(--line)}
.hs-nums b{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,3.4vw,3.2rem);line-height:1;color:var(--digilu-navy)}
.hs-nums b span{color:var(--accent);padding:0 .08em}
.hs-nums em{display:block;margin-top:.5rem;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--cool-gray)}
.hs-verdict{margin:0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--accent);font-family:var(--font-accent);
  font-weight:600;font-size:1.3rem;line-height:1.4;color:var(--digilu-navy)}
.hs-joke{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.15fr) minmax(0,.62fr);grid-template-rows:auto 1fr;
  column-gap:3.2rem;row-gap:1.6rem;align-items:start;margin-top:5.5rem;padding-top:3.2rem;border-top:1px solid var(--line)}
.hs-close{grid-row:1 / span 2;margin:0;padding:10px;background:#FBF6EC;transform:rotate(1.2deg);
  box-shadow:0 2px 4px rgba(15,29,37,.08),0 20px 44px -18px rgba(15,29,37,.4)}
.hs-close img{display:block;width:100%;height:auto;filter:none!important}
.hs-quote{position:relative;margin:0;padding-top:2.4rem}
.hs-quote::before{content:"\201C";position:absolute;top:-1.4rem;left:-.3rem;font-family:var(--font-display);font-weight:700;
  font-size:6rem;line-height:1;color:var(--accent)}
.hs-quote p{margin:0;font-family:var(--font-accent);font-weight:600;font-size:clamp(1.25rem,1.7vw,1.5rem);line-height:1.42;color:var(--digilu-navy)}
.hs-quote cite{display:block;margin-top:1rem;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text)}
.hs-greg{grid-column:2;padding-top:1.2rem;border-top:1px solid var(--line)}
.hs-greg span{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cool-gray)}
.hs-greg p{margin:.45rem 0 0;font-size:.98rem;line-height:1.6;color:#2F3A44}
.hs-snap{grid-column:3;grid-row:1 / span 2;margin:0;padding:10px 10px 0;background:#fff;transform:rotate(3.5deg);
  box-shadow:0 2px 4px rgba(15,29,37,.08),0 18px 40px -16px rgba(15,29,37,.42)}
.hs-snap img{display:block;width:100%;height:auto;filter:none!important}
.hs-snap figcaption{padding:.7rem .2rem .9rem;font-family:var(--font-accent);font-size:.9rem;color:#4A5561;text-align:center}
@media(max-width:999px){
  .hs{grid-template-columns:1fr;gap:3rem}
  .hs-clip{max-width:440px;margin:0 auto;transform:rotate(-1.5deg)}
  .hs-joke{grid-template-columns:minmax(0,1fr) minmax(0,.55fr);grid-template-rows:auto;margin-top:3.6rem}
  .hs-close{grid-column:1 / -1;grid-row:auto;transform:rotate(.8deg)}
  .hs-quote{grid-column:1 / -1}
  .hs-greg{grid-column:1;grid-row:auto;align-self:center}
  .hs-snap{grid-column:2;grid-row:auto}
}
@media(max-width:560px){
  .hs-nums{gap:.8rem}.hs-nums b{font-size:2.1rem}
  .hs-note b{font-size:12.5px;padding:4px 8px 3px}
  .hs-joke{grid-template-columns:1fr}.hs-greg,.hs-snap{grid-column:1}
  .hs-snap{max-width:230px;margin:0 auto}
}
.hs-pic{position:relative;display:block}
@media(min-width:1000px){
  .sec.sec--hs:not(.sec--intro) > .wrap > h2{grid-column:1 / -1;grid-row:auto;max-width:none}
  .sec.sec--hs:not(.sec--intro) > .wrap > .hs,.sec.sec--hs:not(.sec--intro) > .wrap > .hs-joke{grid-column:1 / -1}
}
.sec.sec--hs .hs-copy p.hs-lead,.sec.sec--hs .hs-copy p.hs-verdict{color:var(--digilu-navy)!important;opacity:1}
.hs-note--r b{left:34px}.hs-note--r b::before{right:100%}
.hs-close .hs-note b{font-size:14px}
@media(max-width:560px){.hs-close .hs-note b{font-size:11.5px;padding:3px 7px 2px}.hs-close .hs-note i{width:14px;height:14px;left:-7px;top:-7px}}
.hs-learned{margin:2.2rem 0 0;padding:1.6rem 0 0;border-top:1px solid var(--line)}
.hs-learned p{margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.12;color:var(--digilu-navy)}
.hs-learned p:last-of-type{color:var(--accent-text)}
.hs-learned cite{display:block;margin-top:.9rem;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cool-gray)}
.hs-learned-k{display:block;font-family:var(--font-accent);font-weight:600;font-size:1.05rem;color:var(--cool-gray);margin-bottom:.5rem}
.hs-learned ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.1rem 0}
.hs-learned li{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.55rem,2.3vw,2.1rem);
  line-height:1.15;color:var(--digilu-navy)}
.hs-learned li:not(:last-child)::after{content:"/";color:var(--accent);padding:0 .45rem;font-weight:700}
.hs-src{margin:-.2rem 0 1.6rem!important;font-size:12.5px!important;line-height:1.5!important;color:var(--cool-gray)!important}
.hs-src a,.hs-clip figcaption a{color:inherit;text-decoration:underline;text-decoration-color:rgba(226,85,61,.5);text-underline-offset:2px}
.hs-src a:hover,.hs-clip figcaption a:hover{color:var(--accent-text)}

/* ---------- Line art, Bridge Standard pass 3 (2026-09-26) ----------
   Dashed plan lines (work not yet built, where something used to stand) and
   cutaway earth on the dark grounds and in the page-head figure. Dashed strokes
   never carry data-draw, so the draw-on dash cannot overwrite the dash. */
.la .la-plan{fill:none;stroke:var(--digilu-navy);stroke-width:1.2;stroke-dasharray:4 4;opacity:.6}
.la--dark .la-plan,.g-dark .la .la-plan,.g-dark1 .la .la-plan,.ph-fig--art .la .la-plan{stroke:rgba(255,255,255,.5)!important;opacity:1}
.g-dark .la .la-earth,.g-dark1 .la .la-earth,.ph-fig--art .la .la-earth{stroke:rgba(255,255,255,.55);opacity:.3}
.la .la-acc.la-plan{stroke:var(--accent)!important}
.la .la-glow{fill:var(--digilu-navy);stroke:none;opacity:.12}
.g-dark .la .la-glow,.g-dark1 .la .la-glow,.ph-fig--art .la .la-glow,.la--dark .la-glow{fill:#fff;opacity:.1}
/* Footer Commercial column: the real Digilu logo, the sentence under it (2026-09-28) */
.fcol li a.flogo{display:inline-block;padding:4px 0 2px;opacity:.85;transition:opacity .15s}
.fcol li a.flogo:hover,.fcol li a.flogo:focus-visible{opacity:1}
.fcol .flogo img{display:block;height:34px;width:auto;filter:brightness(0) invert(1)}
.fcol li:has(>.flogo)+li,.fcol ul:has(.flogo){margin-bottom:.35rem}

/* IDEAS HERO: the idea wall (2026-09-28). Mike: "This one should be epic." The one page head
   whose drawing gets the wider column and its full height. */
.ph:has(svg.la--epic) .ph-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:2.6rem}
.ph-fig--art svg.la--epic{max-width:none;max-height:none;width:100%}
.ph-fig--art:has(svg.la--epic){padding:2.4rem 0 1.6rem}
.ph-fig--art svg.la--epic-m{display:none}
@media(max-width:900px){
  .ph:has(svg.la--epic) .ph-grid{grid-template-columns:1fr}
  .ph-fig--art svg.la--epic-d{display:none}
  .ph-fig--art svg.la--epic-m{display:block}
  .ph-fig--art svg.la--epic{max-height:none;width:100%}
  .ph-fig--art:has(svg.la--epic){padding:0 0 1.4rem}
}