/* ==========================================================================
   ETERNAL CONNECTION — 15-page site
   THE SLATE, extended to eight buyer verticals.
   Three laws: nothing centred · colour is signal, not fill · footage is the
   only thing allowed to be loud.
   ========================================================================== */

:root{
  --ink:#070B14; --panel:#0E1626; --panel2:#131F33;
  --line:#1E2C45; --line2:#2B3B57;
  --royal:#2E5BE0; --royal-lt:#4D7FE0;
  --gold:#D4AF37;  --gold-lt:#E3C363;
  --bone:#F0EFE8;  --mute:#8A97AE; --dim:#7683A0;
  --body:#C6CEDC;
  --gut:clamp(20px,5.4vw,88px);
  --sec:clamp(44px,5vw,72px);
  --disp:'Cormorant Garamond',Georgia,serif;
  --sans:'Outfit',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--sans);font-weight:300;
     line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:320px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pad{padding-left:var(--gut);padding-right:var(--gut)}
section{padding:var(--sec) 0}
.wrap{max-width:1560px;margin:0 auto}

/* ---- type ---------------------------------------------------------------- */
.disp{font-family:var(--disp);font-weight:600;line-height:.94;letter-spacing:-.015em}
.slate{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:10px;color:var(--mute)}
em{font-style:normal;color:var(--gold)}

.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.32em;color:var(--gold);
  display:flex;align-items:center;gap:14px;text-transform:uppercase}
.eyebrow::before{content:'';width:38px;height:1px;background:var(--gold);flex:0 0 auto}

h2.sh{font-family:var(--disp);font-weight:600;font-size:clamp(28px,4vw,46px);
  line-height:.96;letter-spacing:-.015em;
  /* 24ch, not 18ch. Measured across 18 headings on five pages: 18ch left one
     orphan line ("Ours, / From This Side of the / Work.") and 24ch leaves none,
     while five headings get more compact. Still a short measure for 46px type. */
  max-width:24ch;
  /* pretty, not balance: the goal is no single word on the last line, not
     even line lengths. "Ours, / From This Side of the / Work." was the case. */
  text-wrap:pretty}
.shead{display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(22px,3vw,36px);gap:clamp(24px,4vw,60px)}
.shead .rt{text-align:right;max-width:340px;flex:0 0 auto}
.shead .rt p{font-size:14.5px;line-height:1.62;color:var(--mute)}
@media(max-width:860px){
  .shead{flex-direction:column;align-items:flex-start;gap:18px}
  .shead .rt{text-align:left;max-width:60ch}
}

/* ---- frame marks — the signature device ---------------------------------- */
.fm{position:relative}
.fm::before,.fm::after{content:'';position:absolute;width:14px;height:14px;pointer-events:none}
.fm::before{top:-1px;left:-1px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.fm::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}

/* ---- nav ----------------------------------------------------------------- */
nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px);padding:16px var(--gut);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;
    background:rgba(7,11,20,.94);backdrop-filter:blur(10px)}
nav .wm{font-family:var(--disp);font-size:19px;font-weight:600;letter-spacing:.005em;flex:0 0 auto}
nav .lk{font-size:13.5px;color:var(--body);white-space:nowrap}
nav .lk:hover{color:var(--bone)}
nav .lk.on{color:var(--gold)}
nav .sp{flex:1}
nav .tel{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gold);white-space:nowrap}
nav .cta{border:1px solid var(--gold);padding:9px 18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;color:var(--gold);white-space:nowrap;transition:background .2s,color .2s}
nav .cta:hover{background:var(--gold);color:#0A1220}
nav .burger{display:none;font-family:var(--mono);font-size:19px;color:var(--gold);
  background:none;border:0;cursor:pointer;line-height:1}
@media(max-width:1180px){ nav .lk{display:none} nav .burger{display:block} }
@media(max-width:620px){ nav .tel{display:none} }

/* mobile drawer */
.drawer{display:none;position:fixed;inset:0;z-index:70;background:rgba(7,11,20,.985);
  padding:22px var(--gut);overflow-y:auto}
.drawer.open{display:block}
.drawer .x{position:absolute;top:16px;right:var(--gut);font-family:var(--mono);font-size:22px;
  color:var(--gold);background:none;border:0;cursor:pointer}
.drawer .dh{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;color:var(--dim);
  margin:26px 0 12px;text-transform:uppercase}
.drawer a{display:block;font-family:var(--disp);font-size:26px;font-weight:600;
  padding:7px 0;color:var(--bone);line-height:1.15}
.drawer a .c{font-family:var(--mono);font-size:10px;color:var(--gold);
  letter-spacing:.16em;margin-right:12px;vertical-align:middle}

/* ---- slate rail ---------------------------------------------------------- */
.srail{display:flex;align-items:center;flex-wrap:wrap;padding:11px var(--gut);
  background:rgba(7,11,20,.82);border-top:1px solid rgba(212,175,55,.28);border-bottom:1px solid var(--line)}
.srail span{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--mute);
  white-space:nowrap;padding:3px 0}
.srail .d{width:1px;height:11px;background:var(--line2);margin:0 clamp(10px,1.6vw,22px);flex:0 0 auto}
.srail .g{color:var(--gold)}
@media(max-width:680px){ .srail .d{margin:0 11px} .srail span{font-size:9.5px;letter-spacing:.16em} }

/* ==========================================================================
   HERO — the film stack
   ========================================================================== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
      min-height:clamp(540px,68vw,780px);display:flex;background:var(--ink)}
.hero.sub{min-height:clamp(420px,50vw,600px)}

.films{position:absolute;inset:0}
.film{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.film.on{opacity:1}
.film video,.film img{width:100%;height:100%;object-fit:cover;object-position:center 50%;
  filter:brightness(.64) contrast(1.02)}

.hgr{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(94deg,#070B14 14%,rgba(7,11,20,.88) 38%,rgba(7,11,20,.46) 68%,rgba(7,11,20,.20) 100%)}
.hfl{position:absolute;left:0;right:0;bottom:0;height:190px;pointer-events:none;
  background:linear-gradient(to top,#070B14 0%,rgba(7,11,20,.72) 42%,rgba(7,11,20,0) 100%)}
/* The royal-blue beams that sat here were a coloured veil over the footage.
   Colour is signal, not fill — and footage is the only thing allowed to be loud. */

.hin{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(56px,8vw,84px) var(--gut) clamp(104px,10vw,132px);max-width:980px;width:100%;z-index:3}
.hcopy{position:relative}
.hslide{opacity:0;transform:translateY(10px);transition:opacity .72s ease,transform .72s ease;
  position:absolute;top:0;left:0;right:0;pointer-events:none}
.hslide.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.hslide h1,.hslide .h1{font-family:var(--disp);font-weight:600;font-size:clamp(44px,8.6vw,92px);
  line-height:.92;letter-spacing:-.018em;margin:clamp(20px,3vw,28px) 0 0;color:var(--bone);
  text-wrap:balance;hyphens:none;overflow-wrap:normal}
.hslide p{margin-top:clamp(18px,2.6vw,26px);font-size:clamp(15.5px,1.9vw,18px);
  line-height:1.62;color:var(--body);max-width:50ch}

.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vw,38px)}
.bprim{background:var(--gold);color:#0A1220;padding:15px 28px;font-weight:600;font-size:14px;
  transition:background .2s}
.bprim:hover{background:var(--gold-lt)}
.bsec{border:1px solid var(--line2);color:var(--bone);padding:15px 28px;font-weight:500;font-size:14px;
  transition:border-color .2s}
.bsec:hover{border-color:var(--gold)}

/* hero film index */
.hix{position:absolute;right:var(--gut);bottom:64px;display:flex;gap:clamp(12px,1.6vw,22px);z-index:5}
.hix button{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--mute);transition:color .3s}
.hix button:hover{color:var(--bone)}
.hix button .bar{display:block;width:clamp(28px,3.2vw,46px);height:2px;
  background:rgba(240,239,232,.22);position:relative;overflow:hidden}
.hix button .bar::after{content:'';position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left}
.hix button[aria-current="true"]{color:var(--gold)}
.hix button[aria-current="true"] .bar::after{animation:fill 8s linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1000px){ .hix{display:none} }

.hero .srail{position:absolute;left:0;right:0;bottom:0;border-bottom:0;z-index:4}

/* ==========================================================================
   BLOCKS
   ========================================================================== */

/* stat strip */
.strip{display:flex;flex-wrap:wrap;border-bottom:1px solid var(--line);background:var(--panel)}
.strip>div{flex:1 1 180px;padding:26px var(--gut) 24px;border-right:1px solid var(--line)}
.strip>div:last-child{border-right:0}
.strip b{display:block;font-family:var(--disp);font-size:clamp(30px,3.6vw,44px);
  font-weight:600;color:var(--gold);line-height:1}
.strip span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  color:var(--mute);margin-top:9px;text-transform:uppercase}
@media(max-width:900px){ .strip>div{flex-basis:50%;padding-left:var(--gut);padding-right:18px} }

/* vertical grid — the eight buyers */
/* three columns, because there are six verticals and six service lines — four
   columns leaves two empty cells that render as a bare slab of --line. */
/* Seven cards in three columns leaves two empty tracks. With a --line gap
   background those render as bare slabs, so the borders live on the cells. */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
@media(max-width:1280px){ .vgrid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:900px){ .vgrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .vgrid{grid-template-columns:1fr} }

/* A last row that does not fill leaves the energy field showing through where a
   card should be. CSS has no "remainder", so these name the counts in use:
   7 = six modes + internal video, 8 = the service lines. A new count needs a
   new line here. */
@media(min-width:1281px){                       /* 4 columns */
  .vgrid > :nth-child(7):last-child{grid-column:span 2}
}
@media(min-width:901px) and (max-width:1280px){ /* 3 columns */
  .vgrid > :nth-child(7):last-child{grid-column:span 3}
  .vgrid > :nth-child(8):last-child{grid-column:span 2}
}
@media(min-width:561px) and (max-width:900px){  /* 2 columns */
  .vgrid > :nth-child(7):last-child{grid-column:span 2}
}
.vcard{background:var(--ink);padding:30px 28px 34px;position:relative;overflow:hidden;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  text-shadow:0 1px 10px rgba(7,11,20,.85);
  display:flex;flex-direction:column;min-height:250px;transition:background .3s}
.vcard:hover{background:var(--panel)}
.vcard .code{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--gold)}
.vcard h3{font-family:var(--disp);font-size:27px;font-weight:600;line-height:1.02;
  margin:16px 0 10px;letter-spacing:-.01em}
.vcard p{font-size:13.5px;line-height:1.6;color:var(--mute);flex:1}
.vcard .go{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--body);margin-top:18px}
.vcard:hover .go{color:var(--gold)}
.vcard .th{position:absolute;inset:0;opacity:.26;transition:opacity .3s;z-index:0}
.vcard:hover .th{opacity:.42}
.vcard .th img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.vcard>*:not(.th){position:relative;z-index:1}
@media(max-width:560px){ .vgrid{grid-template-columns:1fr} .vcard{min-height:0} }

/* spec rail — BUILT FOR / THE PROBLEM / ... */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec>div{background:var(--ink);padding:28px var(--gut) 32px}
.spec>div:not(:first-child){padding-left:28px}
.spec h2{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--gold);
  margin-bottom:12px;text-transform:uppercase}
.spec p{font-size:14px;line-height:1.62;color:var(--body)}
@media(max-width:980px){ .spec{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .spec{grid-template-columns:1fr} .spec>div{padding-left:var(--gut)!important} }

/* two-column deliverables */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
@media(max-width:900px){ .cols{grid-template-columns:1fr} }
.dcard{border:1px solid var(--line);padding:clamp(26px,3vw,38px);background:var(--panel)}
.dcard .k{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.dcard h3{font-family:var(--disp);font-size:clamp(24px,2.8vw,32px);font-weight:600;
  margin:12px 0 6px;line-height:1.04}
.dcard>p{color:var(--mute);font-size:14px;margin-bottom:20px}
.dcard ul{list-style:none}
.dcard li{font-size:14.5px;line-height:1.55;color:var(--body);padding:11px 0 11px 24px;
  border-top:1px solid var(--line);position:relative}
.dcard li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--gold)}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.step{background:var(--ink);padding:28px 26px 32px}
.step i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--gold)}
.step b{display:block;font-family:var(--disp);font-size:24px;font-weight:600;margin:14px 0 8px;line-height:1.05}
.step span{display:block;font-size:13.5px;line-height:1.6;color:var(--mute)}
@media(max-width:980px){ .steps{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .steps{grid-template-columns:1fr} }

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 0;display:flex;gap:20px;
  align-items:baseline;font-family:var(--disp);font-size:clamp(19px,2.2vw,25px);font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;font-family:var(--mono);font-size:18px;color:var(--gold)}
.faq details[open] summary::after{content:'\2013'}
.faq p{padding:0 0 24px;color:var(--body);font-size:15px;max-width:76ch}

/* pull quote / positioning band */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.band .q{font-family:var(--disp);font-size:clamp(28px,4.4vw,54px);font-weight:600;line-height:1.02;
  letter-spacing:-.015em;max-width:20ch}
.band .attr{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--mute);margin-top:24px}

/* gallery of plates */
.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,520px));gap:10px;justify-content:start}
.plates figure{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);border:1px solid var(--line)}
.plates img{width:100%;height:100%;object-fit:cover;filter:brightness(.70);
  transition:filter .4s,transform .6s}
.plates figure:hover img{filter:brightness(.88);transform:scale(1.03)}
.plates figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:9px;
  letter-spacing:.2em;color:var(--bone);text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* tier cards */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.tier{background:var(--ink);padding:clamp(26px,3vw,38px)}
.tier.mid{background:var(--panel)}
.tier .k{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--gold);text-transform:uppercase}
.tier h3{font-family:var(--disp);font-size:clamp(26px,3vw,34px);font-weight:600;margin:12px 0 4px}
.tier .for{font-size:13.5px;color:var(--mute);margin-bottom:20px}
.tier ul{list-style:none}
.tier li{font-size:14px;line-height:1.5;color:var(--body);padding:10px 0 10px 22px;
  border-top:1px solid var(--line);position:relative}
.tier li::before{content:'';position:absolute;left:0;top:18px;width:8px;height:1px;background:var(--gold)}
.tier .px{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--mute);
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line2)}
@media(max-width:900px){ .tiers{grid-template-columns:1fr} }

/* closing CTA */
.close{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.close .bg{position:absolute;inset:0;z-index:0}
.close .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.34)}
.close .sc{position:absolute;inset:0;background:linear-gradient(94deg,#070B14 18%,rgba(7,11,20,.86) 48%,rgba(7,11,20,.42) 100%)}
.close .in{position:relative;z-index:2;padding:clamp(64px,8vw,116px) var(--gut)}
.close h2{font-family:var(--disp);font-size:clamp(34px,5.6vw,66px);font-weight:600;
  line-height:.98;letter-spacing:-.018em;max-width:17ch}
.close p{margin-top:20px;color:var(--body);max-width:52ch;font-size:16px}

/* footer */
footer{border-top:1px solid var(--line);background:var(--ink)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);
  padding:clamp(48px,6vw,80px) var(--gut) 40px}
.fgrid .fh{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--dim);
  margin-bottom:16px;text-transform:uppercase}
.fgrid a,.fgrid p{display:block;font-size:13.5px;color:var(--body);padding:5px 0}
.fgrid a:hover{color:var(--gold)}
.fgrid .wm{font-family:var(--disp);font-size:26px;font-weight:600;color:var(--bone);margin-bottom:10px}
.fgrid .line{font-family:var(--disp);font-size:19px;color:var(--gold);font-style:italic}
.fbot{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  padding:16px var(--gut);border-top:1px solid var(--line)}
.fbot span{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim)}
@media(max-width:980px){ .fgrid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .fgrid{grid-template-columns:1fr} }

/* ---- motion / mobile ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .film,.hslide{transition:none;transform:none}
  .hix button[aria-current="true"] .bar::after{animation:none;transform:scaleX(1)}
}
@media(max-width:640px){
  .film video,.film img{object-position:72% 50%;filter:brightness(.78) contrast(1.02)}
  .hgr{background:linear-gradient(176deg,rgba(7,11,20,.90) 0%,rgba(7,11,20,.70) 40%,
       rgba(7,11,20,.34) 72%,rgba(7,11,20,.22) 100%)}
  .hfl{height:150px}
}

/* ==========================================================================
   INDUSTRY LAYER — the mega panel, the directory, and the trade page
   Six modes stay in the nav; ~22 trades live one click below it. This is the
   whole answer to branching many professions without a chaotic navigation.
   ========================================================================== */

/* the one nav control that opens everything */
nav .lkbtn{background:none;border:0;cursor:pointer;font-family:var(--sans);font-weight:300;
  display:inline-flex;align-items:center;gap:7px}
nav .lkbtn i{font-style:normal;font-size:9px;transition:transform .25s}
nav .lkbtn.open{color:var(--gold)}
nav .lkbtn.open i{transform:rotate(180deg)}

.mega{position:sticky;top:0;z-index:55;background:rgba(7,11,20,.985);
  border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.mega-in{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
.mega-col{background:var(--ink);padding:26px 22px 30px;display:flex;flex-direction:column}
.mega-h{display:block;font-family:var(--disp);font-size:19px;font-weight:600;line-height:1.1;
  color:var(--bone);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mega-h .c{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:var(--gold);margin-bottom:7px}
a.mega-h:hover{color:var(--gold)}
.mega-t{display:block;font-size:13.5px;color:var(--mute);padding:6px 0;line-height:1.35}
.mega-t:hover{color:var(--bone)}
.mega-note{background:var(--panel)}
.mega-note p{font-size:13px;color:var(--mute);line-height:1.55;margin-bottom:14px}
@media(max-width:1180px){ .mega{display:none} }

/* directory rows on industries.html */
.idx{display:grid;grid-template-columns:300px 1fr;gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--line)}
.idx:last-child{border-bottom:1px solid var(--line)}
.idx-h a{display:block;font-family:var(--disp);font-size:clamp(22px,2.6vw,30px);font-weight:600;
  line-height:1.04;color:var(--bone)}
.idx-h a:hover b{color:var(--gold)}
.idx-h .c{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.24em;
  color:var(--gold);margin-bottom:8px}
.idx-h p{font-size:13.5px;color:var(--mute);margin-top:10px;line-height:1.55}
.idx-l{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
  gap:8px;align-content:start}
.idx-l a{background:var(--panel);border:1px solid var(--line);padding:14px 16px;
  font-size:14px;color:var(--body);display:flex;align-items:baseline;gap:10px;
  transition:background .2s,border-color .2s}
.idx-l a:hover{background:var(--panel2);border-color:var(--gold);color:var(--bone)}
.idx-l .c{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--gold);flex:0 0 auto}
@media(max-width:1000px){ .idx{grid-template-columns:1fr} }

/* trade cards */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:10px}
.tcard{background:var(--ink);border:1px solid var(--line);padding:26px 24px 28px;
  display:flex;flex-direction:column;transition:background .25s,border-color .25s}
.tcard:hover{background:var(--panel);border-color:var(--gold)}
.tcard .c{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--gold)}
.tcard b{display:block;font-family:var(--disp);font-size:23px;font-weight:600;line-height:1.05;
  margin:13px 0 9px;color:var(--bone)}
.tcard .ln{font-size:13.5px;color:var(--mute);line-height:1.55;flex:1}
.tcard .go{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim);margin-top:16px}
.tcard:hover .go{color:var(--gold)}


/* the money-shot list — the thing that stops a trade page being a noun swap */
.shotlist{list-style:none;counter-reset:s;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
.shotlist li{background:var(--ink);padding:20px 22px;display:flex;gap:16px;align-items:baseline;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.shotlist i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;
  color:var(--gold);flex:0 0 auto}
.shotlist span{font-size:15px;line-height:1.5;color:var(--body)}

.flagbox{border:1px dashed var(--line2);background:rgba(212,175,55,.04);
  padding:clamp(22px,2.6vw,30px);margin-top:clamp(26px,3vw,36px)}
.flagbox p{margin-top:14px;color:var(--body);font-size:14.5px;line-height:1.62;max-width:53ch}

/* cross-sell strip */
.xsell{border-top:1px solid var(--line);margin-top:clamp(30px,4vw,44px);padding-top:26px}
.xsell p{margin-top:12px;color:var(--body);font-size:15px;max-width:70ch}
.xsell a{color:var(--gold);border-bottom:1px solid rgba(212,175,55,.4)}

.drawer a.sm{font-family:var(--sans);font-size:15px;font-weight:400;padding:5px 0 5px 14px;
  color:var(--mute)}

/* content pillars — the per-trade block that replaced the identical cascade list */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:10px}
.pil{background:var(--panel);border:1px solid var(--line);padding:28px 26px 30px;
  display:flex;flex-direction:column}
.pil .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--gold)}
.pil b{display:block;font-family:var(--disp);font-size:26px;font-weight:600;line-height:1.05;
  margin:14px 0 10px;color:var(--bone)}
.pil p{font-size:14.5px;line-height:1.6;color:var(--body)}

/* ---- platform marks -------------------------------------------------------
   Drawn as vectors, never generated. Used as a lockup under the hero copy on
   the content & social page, and on the calendar plate. Bone, not brand colour:
   these are a caption, not a signal. */
.pdefs{display:none}
.pi{width:26px;height:26px;display:block;flex:0 0 auto}
.pi *{fill:none;stroke:var(--bone);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.pi .f{fill:var(--bone);stroke:none}
.prow{margin-top:clamp(26px,3.6vw,34px);padding-top:18px;
  border-top:1px solid rgba(240,239,232,.16);max-width:430px}
.prow .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  color:var(--mute);text-transform:uppercase}
.pico{display:flex;gap:20px;margin-top:14px;opacity:.72}
@media(max-width:560px){
  .pi{width:22px;height:22px}
  .pico{gap:15px}
}

/* ---- real client work ------------------------------------------------------
   A horizontal strip of verticals. Scroll-into-view only: nothing loads on page load. */
.reelwrap{margin-top:6px}
.reel{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:16px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-color:var(--line2) transparent}
.reel::-webkit-scrollbar{height:6px}
.reel::-webkit-scrollbar-track{background:var(--line)}
.reel::-webkit-scrollbar-thumb{background:var(--line2)}
.rcard{flex:0 0 auto;width:clamp(168px,20vw,224px);margin:0;scroll-snap-align:start}
.rcard video{width:100%;aspect-ratio:9/16;display:block;object-fit:cover;
  background:var(--panel);border:1px solid var(--line);
  filter:brightness(.94) contrast(1.02)}
.rcard:hover video{filter:none}
.rcard figcaption{padding:12px 2px 0}
.rcard .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--gold);text-transform:uppercase}
.rcard b{display:block;margin-top:6px;font-size:13px;font-weight:500;color:var(--mute)}
.reelnote{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  color:var(--dim);text-transform:uppercase}


/* A still hero has no motion to carry the eye past a bright area, so it is graded
   harder than a film plate — the workstation's lit monitors sit directly behind
   the body copy at narrow widths. Only `heroStill()` produces a .hero .film img. */
.hero .film img{filter:brightness(.5) contrast(1.05)}
@media(max-width:700px){
  .hero .film img{filter:brightness(.4) contrast(1.06)}
}

/* ---- straight answers -------------------------------------------------------
   The four questions an owner asks first, on the page where they ask them.
   auto-fit so a short row fills rather than leaving bare slabs of the gap. */
.answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line)}
.ans{background:var(--ink);padding:22px 22px 24px}
.ans b{display:block;font-family:var(--disp);font-size:20px;font-weight:600;
  line-height:1.15;color:var(--bone)}
.ans p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--body)}
.ans-more p a{color:var(--gold);font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase}

/* Sibling trades on a trade page carry name and code only — the full lines live
   on industries.html, where browsing is the task. */
.tcard-sm{min-height:0}
.tcard-sm .go{margin-top:12px}

/* The shot list now sits inside the pillars section as its supporting detail,
   so it needs its own separation from the cards above rather than a section break. */
.shotwrap{margin-top:clamp(26px,3.4vw,40px)}
.shotwrap .eyebrow{display:block;margin-bottom:14px}

/* ---- the mark ---------------------------------------------------------------
   The EC monogram beside the wordmark, not instead of it. At nav scale the mark
   alone is not legible as a name to somebody who has never seen it before. */
nav .wm{display:flex;align-items:center;gap:11px}
nav .wm img{height:26px;width:auto;display:block;flex:0 0 auto}
.fgrid .wm{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.fgrid .wm img{height:44px;width:auto;display:block}
@media(max-width:620px){
  nav .wm img{height:22px}
  nav .wm{gap:9px}
}

/* the deliverable list under the graph — the reference page's register:
   what it is in bold, then where it actually goes */
.odel{margin-top:clamp(30px,4vw,46px);border-top:1px solid var(--line);padding-top:22px}
.odel .eyebrow{display:block;margin-bottom:16px}
.odel ul{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:13px 38px}
@media(max-width:1000px){ .odel ul{grid-template-columns:repeat(2,1fr)} }
@media(max-width:620px){ .odel ul{grid-template-columns:1fr} }
.odel li{font-size:14.5px;line-height:1.6;color:var(--body);padding-left:16px;position:relative}
.odel li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--gold)}
.odel b{color:var(--bone);font-weight:600}

/* The reel strip is the most persuasive thing on the work page, and the moment
   straight after it had no action in it — measured, CTAs sat at 0%, 12% and 83%
   of the page with nothing between. */
.reelcta{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.4vw,30px);
  margin-top:clamp(26px,3.2vw,38px);padding-top:24px;border-top:1px solid var(--line)}
.reelcta p{font-family:var(--disp);font-size:clamp(21px,2.4vw,27px);font-weight:600;
  line-height:1.15;color:var(--bone);margin:0;flex:1 1 320px}
.reelcta .btns{margin-top:0;flex:0 0 auto}

/* Card copy had no measure cap. 584px rendered 82 characters per line, past
   the 45-75 comfort band; 61ch measures ~72. */
.dcard p{max-width:53ch}

.xsell p{max-width:66ch}

/* Real client footage on the trade page it proves. Lazy — Chrome ignores
   preload="metadata" and pulls the whole file, so the source is withheld until
   the block is on screen, same as the reel strip. */
.realfilm{margin:0;max-width:1000px}
.realfilm video{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;
  background:var(--panel);border:1px solid var(--line)}
.realfilm figcaption{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--body);max-width:53ch}

/* Two or more proof clips in one section. The landscape one flexes to fill what
   is left, the portrait keeps its own column, and both align to the top so the
   captions do not float. Below 720px they stack, but the portrait stays capped —
   a 9:16 clip at full phone width is most of a screen. */
.realpair{display:flex;flex-wrap:wrap;gap:clamp(16px,2.2vw,28px);align-items:flex-start}
.realpair .realfilm{flex:1 1 380px;max-width:660px}
.realpair .realfilm.tall{flex:0 0 clamp(240px,22vw,300px);max-width:300px}
@media(max-width:720px){
  .realpair .realfilm{flex:1 1 100%;max-width:100%}
  .realpair .realfilm.tall{flex:1 1 100%;max-width:320px}
}

/* a portrait proof clip — same block, different frame */
.realfilm.tall{max-width:360px}
.realfilm.tall video{aspect-ratio:9/16}

/* ---- graphics-led hero films ------------------------------------------------
   Footage needs darkening so type can sit on it. A motion-graphics film does not:
   it is already near-black, and the site grade was crushing its lockups from a
   mean of 40 to 12. These keep a strong scrim on the LEFT where the copy sits and
   let the right side — where the graphics play — come through. */
.film.gfx video{filter:brightness(.95) contrast(1)}
.hero:has(.film.gfx.on) .hgr{
  background:linear-gradient(94deg,#070B14 10%,rgba(7,11,20,.90) 33%,rgba(7,11,20,.34) 58%,rgba(7,11,20,0) 84%)}
.hero:has(.film.gfx.on) .hfl{opacity:.55}

/* ---- before / after pair ---------------------------------------------------
   The fix-and-flip page argues that a side-by-side only lands if the camera
   stood in the same place, so the two frames are set equal-width with a hairline
   between them: drift between them is meant to be visible rather than hidden by
   a gutter. Both columns are 1fr, so the grid never leaves an unfilled cell
   showing the container through the gap.
   Plates are graded to .70 because they are atmosphere behind a heading. This
   pair IS the argument, so it runs brighter — the comparison lives in detail
   that .70 crushes. */
.bapair{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1px;
  max-width:1060px;background:var(--line);border:1px solid var(--line)}
.bapair figure{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--ink);margin:0}
.bapair img{width:100%;height:100%;object-fit:cover;filter:brightness(.86);
  transition:filter .5s ease,transform .5s ease}
.bapair figure:hover img{filter:brightness(1);transform:scale(1.02)}
.bapair figcaption{position:absolute;left:13px;right:13px;bottom:11px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.14em;line-height:1.5;color:var(--bone);
  text-shadow:0 1px 4px rgba(0,0,0,.95)}
.bapair figcaption .t{display:block;font-size:9px;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:4px}
.bapair .is-before .t{color:var(--dim)}
.bapair .is-after .t{color:var(--gold)}

/* Says on the page what the picture is. Never centred, never dressed up as a
   badge — it is a footnote, and it has to survive a copy pass, so verify.mjs
   fails the build if a generated still ships without it. */
/* The same footnote voice as the illustration label, in gold. The two run on
   one page — under the hero and under the plate — so the reader can tell at a
   glance which picture is a job and which is a drawing. Colour is the signal. */
.illnote.real{color:var(--gold);margin-top:12px;margin-bottom:2px}
.illnote{margin-top:13px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}

/* ---- the one-shoot sting ---------------------------------------------------
   Sits at the head of the outcomes section as its opening image. Left-aligned
   and capped rather than full-bleed: it is a 1280-wide master and stretching it
   across a 1600 viewport would show it. */
.sting{position:relative;margin:0 0 clamp(26px,3.4vw,44px);max-width:1060px;
  border:1px solid var(--line);background:var(--ink);overflow:hidden}
.sting video{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.sting figcaption{position:absolute;left:14px;bottom:12px;font-family:var(--mono);
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 1px 4px rgba(0,0,0,.95)}

/* free-guide.html — the only form outside book.html */
.gform label{display:block;margin-bottom:16px}
.gform .l{display:block;margin-bottom:7px}
.gform input,.gform select,.gform textarea{width:100%;background:var(--ink);border:1px solid var(--line2);
  color:var(--bone);padding:12px 14px;font-family:var(--sans);font-size:15px}
.gform input:focus-visible,.gform select:focus-visible,.gform textarea:focus-visible{border-color:var(--gold)}
/* A <button class="bprim"> inherits the UA's centred label, so it is the one
   primary button on the site whose text is centred. (book.html has this too —
   the real fix is text-align:left on .bprim in ec.css.) */
.gform button{border:0;cursor:pointer;font-family:var(--sans);text-align:left}
/* --dim on --panel measures 3.26:1 at 12px, under AA. --mute clears it. */
.gform .note{margin-top:16px;color:var(--mute);font-size:12px;line-height:1.55;max-width:52ch}


/* pay.html — the invoice card. A ledger row, not a receipt graphic. */
[hidden]{display:none!important}
.inv{border:1px solid var(--line);background:var(--panel);max-width:760px}
.inv-h{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:22px clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.inv-id{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--gold);
  font-variant-numeric:tabular-nums}
.inv-row{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:15px clamp(22px,3vw,34px);border-bottom:1px solid var(--line)}
.inv-k{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--gold);
  text-transform:uppercase;flex:0 0 auto}
.inv-v{font-size:15px;color:var(--body);text-align:right}
.inv-tot{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:24px clamp(22px,3vw,34px)}
.inv-amt{font-family:var(--disp);font-size:clamp(30px,4vw,46px);font-weight:600;color:var(--gold);
  line-height:1;font-variant-numeric:tabular-nums}
.inv-none h3{font-family:var(--disp);font-size:clamp(24px,2.8vw,32px);font-weight:600;
  margin:12px 0 8px;line-height:1.04}
.inv-none p{color:var(--body);font-size:15px;line-height:1.62;max-width:62ch}
.flagbox code{font-family:var(--mono);font-size:12.5px;color:var(--gold)}
@media(max-width:620px){
  .inv-h,.inv-row,.inv-tot{flex-direction:column;align-items:flex-start;gap:6px}
  .inv-v{text-align:left}
}


/* blog.html — the planned-notes grid */
.notegrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:1040px){ .notegrid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .notegrid{grid-template-columns:1fr} }


/* drone.html — the six routing cards read as 3 + 3, not a ragged 4 + 2 */
.drone-routes{grid-template-columns:repeat(3,1fr)}
@media(max-width:1040px){ .drone-routes{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .drone-routes{grid-template-columns:1fr} }

/* ---- what one day becomes --------------------------------------------------
   Key phrases beside a drawn graph. No statistic anywhere in it — the argument
   is structural, and the reader does the arithmetic on his own call-out costs. */
.outc{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);
  gap:clamp(24px,3.6vw,52px);align-items:center}
.ophrase{display:flex;flex-direction:column;gap:22px}
.ophrase div{border-left:1px solid var(--line2);padding-left:18px}
.ophrase b{display:block;font-family:var(--disp);font-size:clamp(26px,3vw,34px);
  font-weight:600;line-height:1;color:var(--gold)}
.ophrase span{display:block;margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--body)}

.ograph{width:100%;height:auto;display:block;overflow:visible}
.og-w{font-family:var(--mono);font-size:15px;letter-spacing:.2em;fill:var(--dim)}
.og-lab{font-family:var(--mono);font-size:16px;letter-spacing:.18em;fill:var(--mute)}
.og-lab.og-gold{fill:var(--gold)}
.og-sub{font-family:var(--sans);font-size:15px;fill:var(--dim)}
.og-tick{stroke:var(--line);stroke-width:1}
.og-base{stroke:var(--line2);stroke-width:1}
.og-blk{fill:var(--panel);stroke:var(--line2);stroke-width:1}
.og-blk.og-on{fill:rgba(212,175,55,.14);stroke:var(--gold)}
.og-cam *{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.og-cam.og-dim *{stroke:var(--dim)}
.og-cam.og-lit *{stroke:var(--gold)}
.og-run{stroke:var(--gold);stroke-width:1.5;opacity:.5}
.og-dot{fill:var(--gold)}
@media(max-width:900px){
  .outc{grid-template-columns:1fr}
  .og-lab{font-size:14px}.og-sub{font-size:14px}.og-w{font-size:13px}
}

/* Line illustrations on the service cards. They sit behind the copy, bleeding
   off the right edge so they read as illustration rather than as an icon, and
   they inherit colour so hover moves the whole drawing at once. */
/* Sits back far enough that where a card's title wraps to two lines and pushes
   the copy down into the drawing, the strokes read as watermark rather than as
   lines struck through the words. "Animation & Motion Graphics" is that card at
   every desktop width. Measured with _build/overlap.mjs, which compares per-line
   text rects — not element boxes, which report collisions that are not on screen. */
.vcard .art{position:absolute;right:6px;bottom:6px;width:132px;height:132px;
  z-index:0;color:var(--line2);opacity:.5;
  transition:color .3s,transform .3s,opacity .3s;pointer-events:none}
.vcard:hover .art{color:var(--gold);opacity:.8;transform:translateY(-4px)}
.svcart{width:100%;height:100%;display:block;
  fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vcard .code,.vcard h3,.vcard p{position:relative;z-index:1}
.vcard p{max-width:30ch}
/* Below ~700px the card is narrower than 30ch plus the drawing, so the copy runs
   into the art. It stays legible — the copy is z-index 1 — but strokes crossing
   the words read as a collision, not as illustration. Pull the art back to a
   watermark and keep the last lines clear of it. */
@media(max-width:700px){
  .vcard .art{width:104px;height:104px;right:4px;bottom:4px;opacity:.4}
  .vcard:hover .art{opacity:.55}
  .vcard p{max-width:none;padding-right:76px}
}
@media(max-width:400px){
  .vcard .art{width:92px;height:92px}
  .vcard p{padding-right:64px}
}

/* ---- proof blocks: gear grid, POV lead, the three standards, founders' quote
   Appended after ec.css, so equal-specificity overrides here win on source order. */

/* An eyebrow above a .shead needs its own separation — .eyebrow is a flex row
   with no margin of its own, exactly like .odel .eyebrow further up. */
.eyebrow.proof-eye{display:flex;margin-bottom:18px}

/* The gear grid. Two things going on here:

   1. The borders are on the CELLS, never a gap drawn over a background color.
      That is the failure this build keeps hitting: an unfilled track paints the
      background as a bare slab. Cell borders mean an empty track draws nothing,
      so a seventh card could be added later without breaking the block.
   2. The track counts are explicit — 3, then 2, then 1 — because six divides
      evenly by all three. auto-fit was tried first and measured 5-across at
      1440px, which left one card stranded on a row of its own. */
.gearg{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(max-width:1000px){ .gearg{grid-template-columns:repeat(2,1fr)} }
/* Single column: the min-height that keeps a row of cards level is just dead
   space once each card is its own row. ec.css drops .vcard's the same way. */
@media(max-width:560px){ .gearg{grid-template-columns:1fr} .gcard{min-height:0} }
.gcard{background:var(--ink);padding:26px 26px 28px;display:flex;flex-direction:column;
  min-height:156px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.gcard .gn{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--gold)}
.gcard b{display:block;font-family:var(--disp);font-size:clamp(20px,1.6vw,24px);
  font-weight:600;line-height:1.04;margin:14px 0 14px;color:var(--bone)}
.gcard .gs{display:block;margin-top:auto;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;line-height:1.75;color:var(--mute);text-transform:uppercase}
.gearnote{margin-top:22px;font-size:14px;line-height:1.62;color:var(--mute);max-width:74ch}

/* The POV lead. A single gold hairline on the left rather than a panel: colour
   is signal, and this is the one block on the page that is the differentiator. */
.povlead{margin:0 0 clamp(26px,3.2vw,38px);padding-left:clamp(18px,2vw,24px);
  border-left:1px solid var(--gold);font-size:clamp(16px,1.9vw,18.5px);
  line-height:1.6;color:var(--body);max-width:60ch}

/* The three standards. Rows with a hanging mono index, not a card grid. */
.ncut{border-top:1px solid var(--line)}
.ncut .row{display:grid;grid-template-columns:clamp(44px,7vw,120px) 1fr;
  gap:clamp(14px,2vw,28px);align-items:start;
  padding:clamp(24px,3vw,34px) 0;border-bottom:1px solid var(--line)}
.ncut .k{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--gold);
  padding-top:.7em}
.ncut b{display:block;font-family:var(--disp);font-size:clamp(22px,2.6vw,30px);
  font-weight:600;line-height:1.06;color:var(--bone);letter-spacing:-.01em}
.ncut p{margin-top:11px;font-size:15px;line-height:1.62;color:var(--body);max-width:66ch}
@media(max-width:620px){
  .ncut .row{grid-template-columns:1fr;gap:9px}
  .ncut .k{padding-top:0}
}

/* .band .q is measured for a six-word line. A thirty-word quotation needs a
   wider measure and smaller type or it runs eight lines deep on a laptop. */
.band .q.fq{max-width:30ch;font-size:clamp(23px,3.1vw,38px);line-height:1.14}
@media(max-width:620px){ .band .q.fq{max-width:24ch} }

/* ---- recovered proof blocks -------------------------------------------------
   Time comparison, attribution explainer, brand session. Every grid here puts
   its border on the cell and sizes with auto-fit: no grid is drawn as gap:1px
   over a line-coloured container, because a row that does not fill then ships
   as a bare slab. */

/* .eyebrow is a flex row, so the space beneath it belongs to the eyebrow rather
   than to an inline style on whatever happens to follow it. */
.tback>.eyebrow,.bsess>.eyebrow,.roi .eyebrow{margin-bottom:22px}
.bsess .eyebrow.mid{margin:clamp(26px,3.2vw,38px) 0 16px}

/* ---- 1 · the time comparison ---------------------------------------------- */

/* THE LABEL. This is the load-bearing element of the whole block and it is set
   at body size on a gold-ruled plate, directly under the heading and above the
   comparison, so it is read before a single figure is reached. It is not a
   caption and it must never be typeset as one. If it will not fit, cut the
   block down until it does. */
.illusbar{background:var(--panel);border:1px solid var(--gold);border-left-width:3px;
  padding:18px 22px 20px;margin-bottom:clamp(22px,3vw,32px);
  font-size:15px;line-height:1.6;color:var(--bone);max-width:92ch}
.illusbar .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}

/* Five steps against three. The cards stretch to equal height, so pinning the
   closing line to the bottom of each lets the difference in list length read as
   the point of the block rather than as a layout accident. */
.tcell{display:flex;flex-direction:column}
.tcell .tfoot{margin-top:auto;margin-bottom:0;padding-top:18px;
  border-top:1px solid var(--line);font-size:13.5px;line-height:1.6;color:var(--mute)}

/* The figure and its label share one box on purpose — the 25x cannot be
   screenshotted, quoted or scrolled past without the caption coming too. */
.ratio{margin-top:clamp(22px,3vw,34px);border:1px solid var(--line2);background:var(--panel);
  padding:clamp(24px,3vw,34px);display:grid;grid-template-columns:minmax(168px,auto) 1fr;
  gap:clamp(20px,3vw,44px);align-items:start}
@media(max-width:760px){ .ratio{grid-template-columns:1fr} }
.rfig b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(50px,7vw,86px);
  line-height:.9;letter-spacing:-.02em;color:var(--bone)}
.rfig .k{display:block;margin-top:12px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim);max-width:22ch}
.rsay p{font-size:14.5px;line-height:1.62;color:var(--body);max-width:64ch}
.rsay .rlab{margin-top:16px;padding-top:16px;border-top:1px solid var(--gold);
  font-size:14.5px;color:var(--bone)}
.rsay .rlab .k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);margin-bottom:9px}

/* ---- 2 · attribution ------------------------------------------------------- */
/* Three steps, so ec.css's fixed four-column .steps is unusable here: its
   gap:1px over background:var(--line) would paint the fourth track as a slab. */
.rlede{font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:var(--bone);
  max-width:72ch;margin-bottom:clamp(22px,3vw,32px)}
.rsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(278px,1fr));gap:10px}
.rstep{background:var(--ink);border:1px solid var(--line);padding:26px 24px 28px}
.rstep i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--gold)}
.rstep b{display:block;font-family:var(--disp);font-size:24px;font-weight:600;
  margin:14px 0 8px;line-height:1.06;color:var(--bone)}
.rstep span{display:block;font-size:14px;line-height:1.6;color:var(--body)}
.rnote{margin-top:clamp(20px,2.6vw,28px);background:var(--ink);border:1px solid var(--line2);
  padding:clamp(22px,2.6vw,30px);max-width:80ch}
.rnote .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.rnote p{font-size:14.5px;line-height:1.62;color:var(--body)}

/* ---- 3 · the brand session ------------------------------------------------- */
.blede{font-size:clamp(16px,1.5vw,18px);line-height:1.6;color:var(--bone);max-width:74ch}
.decs{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:10px}
.dec{background:var(--panel);border:1px solid var(--line);padding:24px 22px 26px;
  display:flex;flex-direction:column}
.dec i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.2em;color:var(--gold)}
.dec b{display:block;font-family:var(--disp);font-size:22px;font-weight:600;margin:12px 0 8px;
  line-height:1.08;color:var(--bone)}
.dec span{display:block;font-size:13.5px;line-height:1.6;color:var(--body)}

/* The three counts sit beside the sentence that says what they are counts OF,
   never above it and never alone. */
.bcount{margin-top:clamp(22px,3vw,32px);background:var(--panel);border:1px solid var(--line2);
  padding:clamp(24px,3vw,32px);display:grid;grid-template-columns:minmax(240px,auto) 1fr;
  gap:clamp(20px,3vw,44px);align-items:start}
@media(max-width:820px){ .bcount{grid-template-columns:1fr} }
.bnums{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,38px)}
.bnums b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(34px,4.4vw,50px);
  line-height:.94;color:var(--bone)}
.bnums span{display:block;margin-top:8px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dim)}
.bnote{font-size:14px;line-height:1.62;color:var(--body);max-width:58ch}
.bnote::before{content:'';display:block;width:38px;height:1px;background:var(--gold);margin-bottom:14px}
.bafter{margin-top:clamp(20px,2.6vw,28px);font-size:14.5px;line-height:1.62;
  color:var(--mute);max-width:70ch}

/* ---- flow field ------------------------------------------------------------
   Light-trails and particles behind a section, carried over from the previous
   site. The SVG stretches to the section box (preserveAspectRatio:none), so the
   curves relax on a tall section instead of tiling. */
.flowsec{position:relative;overflow:hidden;isolation:isolate}
.flowsec .flow{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.flowsec .flowin{position:relative;z-index:1}

/* A card that sits ON the field rather than blocking it out: the panel is
   translucent so the trails still read behind it, with a hairline and a soft
   inner lift along the top edge. */
.flowcard{position:relative;background:rgba(14,22,38,.74);border:1px solid var(--line2);
  padding:clamp(22px,2.8vw,34px);
  box-shadow:inset 0 1px 0 rgba(240,239,232,.06), 0 18px 40px -28px rgba(0,0,0,.9)}
.flowcard h3{font-family:var(--disp);font-size:clamp(20px,2.1vw,25px);font-weight:600;
  line-height:1.1;color:var(--bone);margin:0}
.flowcard p{margin-top:11px;font-size:14.5px;line-height:1.62;color:var(--body);max-width:53ch}
.flowcard .k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.26em;
  color:var(--gold);text-transform:uppercase;margin-bottom:12px}

/* The quote plate: a gold tick centred on the top edge, the way the old site set it. */
.flowquote{position:relative;border:1px solid var(--line2);background:rgba(14,22,38,.62);
  padding:clamp(38px,5vw,62px) clamp(24px,4vw,54px) clamp(30px,4vw,44px);max-width:1000px}
.flowquote::before{content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:74px;height:3px;background:var(--gold)}
.flowquote .q{font-family:var(--disp);font-size:clamp(21px,2.7vw,32px);font-weight:600;
  line-height:1.32;color:var(--bone);margin:0;font-style:italic}
.flowquote .attr{margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;font-style:normal}
@media(prefers-reduced-motion:no-preference){
  .flowsec .flow{will-change:auto}
}

/* ---- energy field ----------------------------------------------------------
   A fixed canvas behind everything. The page ground goes a shade darker than
   --ink so additive light reads against it, and every block that used to paint
   an opaque slab becomes translucent so the current runs through the page
   rather than behind a wall.
   Cards keep a fill — they are the text boxes, and body copy over moving light
   is not readable without one. What they lose is opacity, not ground. */
body.energy{background:#04070E}
.energy-veil{position:fixed;inset:0;z-index:0;width:100%;height:100%;
  display:block;pointer-events:none}

/* Lift the page above the veil. This site has no <main> and no <header> — the
   chrome is a <nav> and the body is a flat run of <section> and <div>, so these
   are the real top-level elements. Naming main/header here would have silently
   matched nothing. */
body.energy > nav,
body.energy > footer,
body.energy > section,
body.energy > div{position:relative;z-index:1}

/* section-scale grounds go: the field IS the page ground now */
body.energy .band{background:transparent}
body.energy footer{background:transparent}

/* card-scale grounds stay, translucent — same formula as .flowcard, which was
   already built to this spec when the quote plate was matched to the old site */
body.energy .dcard,
body.energy .pil,
body.energy .mega-note,
body.energy .strip{background:rgba(14,22,38,.74)}
body.energy .vcard,
body.energy .spec>div,
body.energy .step,
body.energy .tier,
body.energy .ans,
body.energy .tcard,
body.energy .shotlist li,
body.energy .mega-col{background:rgba(7,11,20,.76)}
body.energy .tier.mid,
body.energy .vcard:hover,
body.energy .tcard:hover{background:rgba(14,22,38,.84)}
body.energy .idx-l a{background:rgba(14,22,38,.72)}
body.energy .idx-l a:hover{background:rgba(19,31,51,.88)}

/* Type over moving light needs its edge back. This is the same trick the old
   site used and it is doing real work — without it the body copy shimmers
   wherever a strand passes under it. */
body.energy > section,
body.energy > div,
body.energy footer{text-shadow:0 1px 14px rgba(2,4,10,.75),0 0 3px rgba(2,4,10,.55)}
body.energy .bprim,body.energy .bsec{text-shadow:none}

/* The hero keeps its own ground: footage is the only thing allowed to be loud,
   and light trails over a client's film would be exactly the coloured veil the
   brand rules threw out. */
body.energy .hero{background:var(--ink);z-index:1}

/* The static SVG field was the still version of this. Where the live canvas
   runs, the SVG would double the trails, so it is hidden — the markup stays so
   .flowcard / .flowquote keep their plate treatment. */
body.energy .flowsec .flow{display:none}
body.energy .flowsec{background:transparent}

@media(prefers-reduced-motion:reduce){
  .energy-veil{opacity:.65}
}
@media(max-width:700px){
  /* the field costs a rAF loop and a full-viewport repaint; on a phone that is
     battery for something nobody looks at behind their thumb */
  .energy-veil{opacity:.5}
}

/* on-site search — industries directory filter */
.find{margin:0 0 34px;max-width:560px}
.find label{display:block;margin-bottom:10px}
.find input{width:100%;background:var(--ink);border:1px solid var(--line2);color:var(--body);
  font-family:var(--body-f);font-size:16px;padding:14px 16px;border-radius:2px;
  -webkit-appearance:none;appearance:none}
.find input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.find input::placeholder{color:var(--dim)}
.find-n{margin:10px 0 0;min-height:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.idx[hidden],.idx-l a[hidden]{display:none!important}
.find-none{display:none;margin-top:8px;color:var(--body);font-size:16px;max-width:52ch}
.find-none.on{display:block}
.find-none a{color:var(--gold)}
@media(max-width:620px){.find{margin-bottom:26px}}

.navfind{margin-top:18px}
.navfind label{display:block;margin-bottom:8px}
.navfind input{width:100%;background:var(--ink);border:1px solid var(--line2);color:var(--body);
  font-family:var(--body-f);font-size:14px;padding:10px 12px;border-radius:2px;
  -webkit-appearance:none;appearance:none}
.navfind input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.navfind input::placeholder{color:var(--dim)}
.drawer .navfind{margin:18px 0 8px}