/* ============================================================
   TECHNICAL HDD — PUBLIC SITE · SHARED DESIGN SYSTEM
   THD-SITE-CSS-001 · R1.0 · 2026-09-15

   Ported from ES-SITE-CSS-001 R3.10 (evensteven.team), which was itself
   ported from STE-SITE-CSS-001 R2.27 (steadyeddie.ca) — the estate's
   minimum standard. Structure, component classes and motion are unchanged;
   only the :root tokens moved, plus the contrast patches noted below.

   ONE STYLESHEET, EVERY PAGE. Page-specific style goes in that page's
   own <style> block, built on these tokens. DO NOT FORK.

   COLOUR IS THD-BRD-001 R1.0: sampled from the original Technical HDD
   badge artwork (TechnicalHDD-YellowBadge.png, 2017-03-10).
   Technical Yellow #EADD15 and Technical Charcoal #3E3934 are the mark.

   CONTRAST NOTE — why this port has one token the parent does not.
   Technical Yellow is a signal colour, not a type colour: #EADD15 on white
   is 1.3:1 and cannot carry text at any size. It is superb on ink (12.3:1).
   So the accent splits in two, and every rule in this file respects it:
     --accent       #EADD15  fills, rules, marker bars, and TYPE ON INK only
     --accent-type  #6B6400  the darkened gold, the ONLY accent that carries
                             type on paper (6.1:1, AA at every size)
   Where the parent set accent as a text colour on a light ground, this file
   sets accent-type. Where the parent put white type on an accent fill, this
   file puts ink type on it — white on yellow is 1.4:1 and was never legible.

   Type is the estate kit, self-hosted (assets/fonts/): Barlow for reading,
   Barlow Condensed for display, a system mono stack for eyebrows.
   ============================================================ */

/* ---------- self-hosted type ---------- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/Barlow-400.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/Barlow-500.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/Barlow-600.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/Barlow-700.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/BarlowCondensed-600.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/BarlowCondensed-700.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  /* THD-BRD-001 R1.0 — sampled from the original badge artwork, 2017-03-10.
     The badge is Technical Yellow #EADD15; the T-mark and wordmark on it are
     Technical Charcoal #3E3934. The lockup sits on its own yellow ground. */
  --ink:#1C1A18;         /* near-black, warmed toward the charcoal — text and headings */
  --graphite:#3E3934;    /* Technical Charcoal — sampled; secondary structure, subheads, rules */
  --accent:#EADD15;      /* Technical Yellow — sampled; fills, rules, and type on ink (12.3:1) */
  --accent-l:#F5EA5C;    /* Technical Yellow bright — hover on ink grounds */
  --accent-type:#6B6400; /* the darkened gold — the only accent that carries type on paper (6.1:1) */
  --paper:#FFFFFF;
  --card:#F8F8F5;        /* a hair off-white, warmed, so a tint band reads against paper */
  --line:#E6E4DE;
  --muted:#6A655E;
  /* stable */
  --sans:"Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:"Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1240px;
  --gut:clamp(20px,4vw,56px);
  --band:clamp(56px,7vw,112px);
  --rule:2px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
main p a,main li a{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
main p a[href^="mailto:"]{display:inline-block;padding:12px 0;margin:-12px 0}   /* a 44px tap height, no change to the line */
h1,h2,h3,h4{font-family:var(--disp);text-transform:uppercase;font-weight:600;
  line-height:1.05;letter-spacing:.005em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,74px)}
h2{font-size:clamp(28px,3.6vw,50px)}
h3{font-size:clamp(19px,1.8vw,25px)}
p{margin:0 0 1em;max-width:70ch;text-wrap:pretty}
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin-bottom:.4em;max-width:68ch}

/* ---------- focus ---------- */
:where(a,button):focus-visible{outline:2px solid var(--accent-type);outline-offset:2px}
.sec.ink :where(a,button):focus-visible,
footer.site :where(a,button):focus-visible{outline-color:var(--accent-l)}

/* ---------- skeleton ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.sec{padding-block:var(--band)}
.sec.tint{background:var(--card);border-block:1px solid var(--line)}
.sec.ink{background:var(--ink);color:#fff}
.sec.ink h2,.sec.ink h3{color:#fff}
.sec.ink p,.sec.ink li{color:rgba(255,255,255,.82)}
.kicker{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-type);display:block;margin-bottom:14px;
  padding-left:14px;border-left:3px solid var(--accent-type)}
.sec.ink .kicker{color:#fff;border-left-color:var(--accent-l)}
.lede{font-size:clamp(18px,1.7vw,22px);color:var(--graphite);max-width:62ch}
.sec.ink .lede{color:rgba(255,255,255,.82)}

/* ---------- header ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px}
header.site{position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--line)}
header.site .bar{max-width:var(--wrap);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:20px}
.lockup{display:block;line-height:0;text-decoration:none;flex:0 0 auto}
.lockup img{height:clamp(38px,3.4vw,50px);width:auto;display:block}   /* R3.10: was clamp(30px,2.8vw,36px) — the owner: "make the logo bigger" */
nav.site{margin-left:auto;display:flex;gap:clamp(10px,1.2vw,14px);align-items:center}
nav.site a{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;color:var(--graphite);padding:6px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
nav.site a:hover{color:var(--ink);border-bottom-color:var(--accent-type)}
nav.site a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent-type)}
.burger{display:none;margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line);
  padding:9px 14px;cursor:pointer;color:var(--ink);min-height:44px}
@media (max-width:1240px){nav.site{gap:14px}nav.site a{font-size:11.5px;letter-spacing:.08em}}
@media (max-width:1280px){
  .burger{display:inline-flex;align-items:center}
  .lockup{padding-block:7px}   /* 30px lockup + 14 = a 44px tap height beside the burger */
  nav.site{display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:0}
  nav.site.open{display:flex}
  /* R3.1: the header is pinned, so an open menu taller than the screen must scroll inside itself,
     or its last rows (Hire on, Talk to us) are out of reach on a phone. */
  nav.site.open{max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  nav.site a{width:100%;padding:13px 0;border-bottom:1px solid var(--line)}
  header.site .bar{flex-wrap:wrap}
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(64px,9vw,140px);border-bottom:1px solid var(--line)}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:clamp(19px,2vw,26px);color:var(--graphite)}

/* ---------- grids ---------- */
.cols{display:grid;gap:clamp(20px,2.6vw,38px);grid-template-columns:1fr;
  margin-top:clamp(28px,3.4vw,48px)}
@media (min-width:760px){.cols.c2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:760px) and (max-width:959px){.cols.c4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.cols.c3{grid-template-columns:repeat(3,1fr)}
                         .cols.c4{grid-template-columns:repeat(4,1fr)}}
.blk{border-top:var(--rule) solid var(--line);padding-top:18px;position:relative}
.blk::before{content:"";position:absolute;left:0;top:calc(-1 * var(--rule));
  width:38px;height:var(--rule);background:var(--graphite)}
.blk h3{margin-bottom:9px}
.blk .btn{margin-top:10px}
.blk p{font-size:15.5px;color:var(--graphite);margin-bottom:8px}
.sec.ink .blk{border-top-color:rgba(255,255,255,.22)}
.sec.ink .blk p{color:rgba(255,255,255,.78)}

/* ---------- numbered list ---------- */
.prin{list-style:none;margin:clamp(28px,3.4vw,44px) 0 0;padding:0;
  border-top:1px solid var(--line)}
.prin li{display:grid;grid-template-columns:56px 1fr;gap:clamp(14px,2vw,28px);
  padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line);
  align-items:start;margin:0;max-width:none}
.prin .n{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--accent-type);padding-top:9px}
.sec.ink .prin .n{color:rgba(255,255,255,.62)}   /* text, so AA: not the accent (brand rule 2) */
.prin b{display:block;font-family:var(--disp);text-transform:uppercase;font-weight:600;
  font-size:clamp(21px,2.2vw,32px);line-height:1.05;margin-bottom:7px}
.prin span.d{display:block;font-size:15.5px;line-height:1.55;color:var(--graphite);max-width:62ch}
.sec.ink .prin li{border-color:rgba(255,255,255,.2)}
.sec.ink .prin span.d{color:rgba(255,255,255,.78)}
@media (max-width:620px){.prin li{grid-template-columns:1fr}.prin .n{padding-top:0}}

/* ---------- callout ---------- */
.callout{border-left:3px solid var(--accent-type);padding-left:clamp(16px,2vw,26px);
  margin-block:clamp(24px,3vw,40px);max-width:72ch}
.callout p{font-size:clamp(17px,1.5vw,20px);color:var(--ink)}
.sec.ink .callout{border-left-color:var(--accent-l)}
.sec.ink .callout p{color:rgba(255,255,255,.9)}

/* ---------- tables: scroll in their own box, stack on a phone ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);margin-top:clamp(24px,3vw,40px)}
table.tbl{width:100%;min-width:560px;border-collapse:collapse;background:var(--card)}
.tbl th{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:left;padding:13px 16px;
  border-bottom:var(--rule) solid var(--ink)}
.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px;
  line-height:1.55;vertical-align:top;color:var(--graphite)}
.tbl td b{color:var(--ink)}
@media (max-width:760px){
  .tbl-wrap{border:0;overflow-x:visible}
  table.tbl{display:block;min-width:0}
  table.tbl tbody,table.tbl tr{display:block}
  table.tbl thead{display:none}
  table.tbl tr{border:1px solid var(--line);border-radius:0;   /* ruled, not rounded */
    padding:12px 16px;margin-bottom:12px;background:var(--paper)}
  table.tbl td{display:block;padding:6px 0;border:0}
  table.tbl td::before{content:attr(data-th);display:block;font-family:var(--mono);
    font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--graphite);margin-bottom:2px}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:15px 26px;
  background:var(--ink);color:#fff;border:1px solid var(--ink)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.sec.ink .btn.ghost{color:#fff;border-color:#fff}
.sec.ink .btn.ghost:hover{background:#fff;color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,38px)}
@media (max-width:620px){.btns{flex-direction:column}.btns .btn{width:100%;text-align:center}}

/* ---------- the standing honesty note ---------- */
.stand{border:1px solid var(--line);border-left:3px solid var(--accent-type);
  background:var(--card);padding:clamp(20px,2.4vw,30px);margin-top:clamp(28px,3.4vw,44px)}
.stand .k{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-type);display:block;margin-bottom:11px}
.stand p{font-size:15.5px;color:var(--graphite);margin-bottom:0}
.sec.ink .stand{border-color:rgba(255,255,255,.22);border-left-color:var(--accent-l)}
.sec.ink .stand .k{color:var(--accent)}
.sec.ink .stand p{color:rgba(255,255,255,.80)}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#fff;padding-block:clamp(48px,6vw,80px);
  margin-top:var(--band)}
/* a page that ends on an ink band meets the ink footer without a white seam; a hairline marks the join */
main > .sec.ink:last-child{margin-bottom:calc(-1 * var(--band));border-bottom:1px solid rgba(255,255,255,.16)}
footer.site .cols{margin-top:0}
footer.site h2{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:14px}
footer.site a{display:block;color:rgba(255,255,255,.86);text-decoration:none;
  font-size:14.5px;padding:5px 0}
footer.site a:hover{color:#fff}
@media (max-width:760px){footer.site a{padding:11px 0}}   /* 23px of text + 22 = 45px tap height */
.rule-line{max-width:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:clamp(36px,4vw,56px);
  padding-top:22px;border-top:1px solid rgba(255,255,255,.18)}
.rule-line .cl{white-space:nowrap}   /* a clause never breaks inside itself */
@media (max-width:620px){.rule-line .cl{display:block;margin-bottom:5px}.rule-line .sep{display:none}}
.colophon{font-size:13px;color:rgba(255,255,255,.6);margin-top:14px;max-width:78ch}

/* ---------- motion, only where it is welcome ---------- */
.rv{opacity:1}
@media (prefers-reduced-motion: no-preference){
  html.rv-armed .rv{opacity:0;transform:translateY(14px);
    transition:opacity .6s ease,transform .6s ease}
  html.rv-armed .rv.in{opacity:1;transform:none}
}

/* ---------- print — the covenant page is the one an operator prints ---------- */
@media print{.rv{opacity:1!important;transform:none!important}}
@media print{
  header.site,.burger,.skip,.btns{display:none}
  footer.site .cols{display:none}
  body{font-size:12pt;color:var(--ink);background:var(--paper)}
  /* an ink band prints as black text on white, its rules dark instead of accent or translucent white */
  .sec.ink{background:var(--paper);color:var(--ink)}
  .sec.ink h2,.sec.ink h3{color:var(--ink)}
  .sec.ink p,.sec.ink li{color:var(--ink)}
  .sec.ink .kicker{color:var(--ink);border-left-color:var(--ink)}
  .sec.ink .lede{color:var(--ink)}
  .sec.ink .blk{border-top-color:var(--ink)}
  .sec.ink .blk p{color:var(--ink)}
  .sec.ink .prin .n{color:var(--ink)}
  .sec.ink .prin li{border-color:var(--ink)}
  .sec.ink .prin span.d{color:var(--ink)}
  .sec.ink .callout{border-left-color:var(--ink)}
  .sec.ink .callout p{color:var(--ink)}
  /* the footer is an ink band too; keep .rule-line and .colophon legible on the printed page */
  footer.site{background:var(--paper);color:var(--ink)}
  footer.site .rule-line,footer.site .colophon{color:var(--ink)}
  footer.site .rule-line{border-top-color:var(--line)}
  /* table borders are left as they are — they already read on paper */
}


/* ============================================================
   R2.0 · 2026-09-10 · FULL DEPTH — photographs, splits, galleries,
   steps, watermarks, numbered kickers, the CTA band
   ============================================================ */

/* ---------- numbered section kickers: "The covenant · 01" ---------- */
main{counter-reset:sec}
.kicker.num{counter-increment:sec}
.kicker.num::after{content:"\00a0\00b7\00a0" counter(sec,decimal-leading-zero)}

/* ---------- responsive pictures ---------- */
picture{display:block}
picture.media,picture.media img{display:block}

/* ---------- the cinematic hero: a photograph, a scrim, white type ---------- */
.hero.cine{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-bottom:0;
  padding:0;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(520px,78vh,860px)}
.hero.cine .media,.hero.cine .media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.hero.cine .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(28,26,24,.62) 0%,rgba(28,26,24,.34) 42%,rgba(28,26,24,.04) 76%),
             linear-gradient(180deg,rgba(28,26,24,0) 30%,rgba(28,26,24,.28) 62%,rgba(28,26,24,.66) 100%)}
.hero.cine .plate{position:relative;z-index:2;width:100%;
  padding-top:clamp(72px,12vw,180px);padding-bottom:clamp(40px,6vw,72px)}
.hero.cine .plate-in{max-width:760px}
.hero.cine .kicker{color:#fff;border-left-color:var(--accent-l);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hero.cine h1{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.hero.cine .lede{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.45)}
.hero.cine .btn{background:#fff;color:var(--ink);border-color:#fff}
.hero.cine .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.hero.cine .btn.ghost{background:transparent;color:#fff;border-color:#fff}
.hero.cine .btn.ghost:hover{background:#fff;color:var(--ink)}
/* R3.4: the green button, for the one link the owner wants in Even Green (the farm page in the home hero). White type on the
   bright green passes AA on any ground; contrast.py carries the pair. */
.btn.accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn.accent:hover{background:var(--accent-l);border-color:var(--accent-l);color:var(--ink)}
.hero.cine .btn.accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.hero.cine .btn.accent:hover{background:#fff;border-color:#fff;color:var(--ink)}
/* a wide frame (about three to one) shows more of itself under a shorter hero */
.hero.cine.wide{min-height:clamp(420px,56vh,640px)}
/* R3.6 (2026-09-12, night) — the split hero (owner: "a screen split for construction and ag equipment"): two .media panels
   side by side behind one plate; on a phone they stack. Each panel is a registered picture with its own crop. */
.hero.cine.split .panel{position:absolute;inset:0;width:50%;overflow:hidden}
.hero.cine.split .panel.l{left:0}
.hero.cine.split .panel.r{left:50%}
@media (max-width:760px){.hero.cine.split .panel{width:100%;height:50%}.hero.cine.split .panel.r{left:0;top:50%}}
/* R3.8 (2026-09-12, night) — the slideshow (owner: "can we make the photos change, like a slide show of different equipment"):
   each panel holds one eager picture and three lazy ones; the first shows with no script; once the script marks the panel
   live, .on is the one that shows and the rest cross-fade behind it. Only under html.rv-armed — reduced-motion readers keep
   the first frame, still. */
.hero.cine.split .panel .media{opacity:0;transition:opacity 1.4s ease}
.hero.cine.split .panel .media:first-child{opacity:1}
.hero.cine.split .panel.live .media{opacity:0}
.hero.cine.split .panel.live .media.on{opacity:1}
/* R3.9 (2026-09-12, night) — the cinematic hero sits flush under the header (owner: "tighten the space menu bar to slides"):
   the hero's inherited top margin is zeroed for .hero.cine on every page, so the menu bar meets the photograph. */
.hero.cine{margin-top:0}
/* R3.7 (2026-09-12, night) — the hero's motion, ported from tacitsource.com's tct.css R2.2 (owner: "look at tacit source website
   for effects"): the plate's children rise in, staggered; the photograph settles from a slight zoom over twelve seconds; hero
   images get a small brightness lift; the header fades in. Everything is keyed on html.rv-armed, which the page script sets only
   when the visitor allows motion, so reduced-motion readers see the page whole and still. */
@keyframes es-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes es-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes es-fade{from{opacity:0}to{opacity:1}}
.hero.cine .media img{filter:brightness(1.08) contrast(1.02)}
html.rv-armed .hero.cine .plate-in>*{animation:es-rise .9s cubic-bezier(.22,.61,.36,1) both}
html.rv-armed .hero.cine .plate-in>:nth-child(1){animation-delay:.08s}
html.rv-armed .hero.cine .plate-in>:nth-child(2){animation-delay:.20s}
html.rv-armed .hero.cine .plate-in>:nth-child(3){animation-delay:.32s}
html.rv-armed .hero.cine .plate-in>:nth-child(4){animation-delay:.44s}
html.rv-armed .hero.cine:not(.split) .media img{animation:es-settle 12s cubic-bezier(.16,.6,.3,1) both;transform-origin:50% 60%}
html.rv-armed .hero.cine.split .media.on img{animation:es-settle 12s cubic-bezier(.16,.6,.3,1) both;transform-origin:50% 60%}
html.rv-armed header.site{animation:es-fade .7s ease-out both}

@media (max-width:760px){
  .hero.cine{min-height:min(78svh,720px)}   /* pinned: a tall capture window is not a phone */
  .hero.cine .scrim{background:linear-gradient(180deg,rgba(28,26,24,.18) 0%,rgba(28,26,24,.84) 70%)}
}

/* ---------- the full-bleed photograph band ---------- */
.sec.photo{position:relative;min-height:clamp(420px,60vh,720px);min-height:clamp(420px,60svh,720px);
  display:flex;align-items:flex-end;padding:0;overflow:hidden;background:var(--ink);color:#fff;border:0}
.sec.photo .media,.sec.photo .media img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center}
.sec.photo .scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,26,24,.56) 0%,rgba(28,26,24,.30) 42%,rgba(28,26,24,0) 76%),
             linear-gradient(180deg,rgba(28,26,24,0) 30%,rgba(28,26,24,.26) 62%,rgba(28,26,24,.64) 100%)}
.sec.photo .wrap{position:relative;z-index:2;width:100%;
  padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(36px,5vw,64px)}
.sec.photo .kicker{color:#fff;border-left-color:var(--accent-l);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.sec.photo h2{color:#fff;max-width:24ch;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.sec.photo p{color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.sec.photo .lede{color:rgba(255,255,255,.92)}
.sec.photo .btn.ghost{color:#fff;border-color:#fff}
.sec.photo .btn.ghost:hover{background:#fff;color:var(--ink)}
@media (max-width:760px){
  .sec.photo .scrim{background:linear-gradient(180deg,rgba(28,26,24,.16) 0%,rgba(28,26,24,.82) 72%)}
}
/* a photo band that ends a page meets the ink footer flush */
main > .sec.photo:last-child{margin-bottom:calc(-1 * var(--band))}

/* ---------- figures ---------- */
figure.ph{margin:0;position:relative}
figure.ph img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--card)}
figure.ph.tall img{aspect-ratio:4/3}
figure.ph.wide img{aspect-ratio:21/9}
figure.ph.natural img{aspect-ratio:auto;object-fit:contain;background:var(--paper)}

/* ---------- split: text beside a figure ---------- */
.split{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:1fr;align-items:center;
  margin-top:clamp(28px,3.4vw,48px)}
.split>*{min-width:0}
@media (min-width:761px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split.fig-first figure.ph{order:-1}}
.split .txt h2,.split .txt h3{margin-bottom:14px}
.split .txt p+p{margin-top:12px}
.split .txt .kicker{margin-bottom:12px}

/* ---------- gallery: three figures across, one on a phone ---------- */
.gallery{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,3.4vw,48px)}
.gallery.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.gallery,.gallery.two{grid-template-columns:1fr}}

/* ---------- numbered steps grid ---------- */
.steps{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  margin-top:clamp(28px,3.4vw,48px)}
.step{border-top:var(--rule) solid var(--line);padding-top:16px;position:relative}
.step::before{content:"";position:absolute;left:0;top:calc(-1 * var(--rule));width:38px;height:var(--rule);background:var(--graphite)}
.step .num{display:block;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--accent-type);margin-bottom:10px}
.step h3{font-size:clamp(18px,1.4vw,22px);margin-bottom:8px}
.step p{font-size:15.5px;color:var(--graphite);margin-bottom:0}
.sec.ink .step{border-top-color:rgba(255,255,255,.22)}
.sec.ink .step .num{color:rgba(255,255,255,.62)}
.sec.ink .step p{color:rgba(255,255,255,.78)}

/* ---------- facts: a definition list in columns ---------- */
.facts{display:grid;gap:14px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  margin:clamp(28px,3.4vw,48px) 0 0}
.facts div{border-top:var(--rule) solid var(--line);padding-top:10px}
.facts dt{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-type);margin-bottom:6px}
.facts dd{font-size:16px;color:var(--ink);margin:0}
.sec.ink .facts div{border-top-color:rgba(255,255,255,.22)}
.sec.ink .facts dt{color:rgba(255,255,255,.62)}
.sec.ink .facts dd{color:rgba(255,255,255,.86)}

/* ---------- tick list and refuse list ---------- */
ul.tick{list-style:none;padding:0;margin:clamp(20px,2.4vw,32px) 0 0}
ul.tick li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink)}
ul.tick li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:2px;background:var(--graphite)}
ul.tick.refuse li::before{width:10px;height:10px;top:.5em;border:2px solid var(--graphite);background:transparent;border-radius:50%}
.sec.ink ul.tick li{color:rgba(255,255,255,.86)}
.sec.ink ul.tick li::before{background:var(--accent-l)}
.sec.ink ul.tick.refuse li::before{border-color:var(--accent-l);background:transparent}

/* ---------- the CTA band ---------- */
.cta-band{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(40px,5vw,64px)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.cta-band h2{font-size:clamp(26px,3.4vw,40px);max-width:22ch;margin-bottom:8px}
.cta-band p{color:var(--graphite);margin-bottom:0;max-width:52ch}
.cta-band .btns{margin-top:0}
main > .cta-band:last-child{margin-bottom:calc(-1 * var(--band))}

/* ---------- line-art watermarks: ink on paper, multiplied, ten per cent ---------- */
.wm{position:relative;overflow:hidden}
.wm>.wrap{position:relative;z-index:1}
.wm::before{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
  background-size:auto 118%;background-position:right -6% center;mix-blend-mode:multiply;opacity:.10;
  -webkit-mask-image:radial-gradient(ellipse 78% 88% at 50% 50%,#000 42%,transparent 100%);
  mask-image:radial-gradient(ellipse 78% 88% at 50% 50%,#000 42%,transparent 100%)}
.wm.wm-1::before{background-image:url("../img/es-wm-1-1400.webp")}
.wm.wm-2::before{background-image:url("../img/es-wm-2-1400.webp");background-position:left -8% center;background-size:auto 124%}
.wm.wm-3::before{background-image:url("../img/es-wm-3-1400.webp");background-size:auto 126%;background-position:right -2% center}
.cta-band.wm::before{opacity:.14}
@media (max-width:760px){.wm::before{background-size:auto 72%;opacity:.08}}

/* ---------- print ---------- */
@media print{
  .hero.cine,.sec.photo{min-height:0;background:var(--paper);color:var(--ink)}
  .hero.cine .media,.sec.photo .media,.hero.cine .scrim,.sec.photo .scrim{display:none}
  .hero.cine h1,.sec.photo h2,.sec.photo p,.hero.cine .lede{color:var(--ink);text-shadow:none}
  .hero.cine .kicker,.sec.photo .kicker{color:var(--ink);border-left-color:var(--ink)}
  .wm::before,.cta-band{display:none}
}



/* ============================================================
   R3.0 · 2026-09-11 · THE DEEPENING — grouped navigation, the
   footer with a brand column, and the component set the standard
   carries. Ruled, never rounded.
   ============================================================ */

/* ---------- header: grouped navigation, one row, the ask on the right ---------- */
nav.site .grp{position:relative}
nav.site .grp-t{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite);padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  white-space:nowrap;line-height:inherit}
nav.site .grp-t::after{content:"\00a0\25BE";font-size:9px}
nav.site .grp-t:hover,nav.site .grp.open .grp-t,nav.site .grp.has-current .grp-t{color:var(--ink);border-bottom-color:var(--accent-type)}
nav.site .grp-m{position:absolute;top:calc(100% + 10px);left:0;min-width:280px;background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--accent-type);box-shadow:0 12px 30px rgba(28,26,24,.10);padding:8px;display:none;z-index:60}
nav.site .grp-m::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}   /* the hover bridge */
nav.site .grp.open .grp-m,nav.site .grp:hover .grp-m,nav.site .grp:focus-within .grp-m{display:block}
nav.site .grp-m a{display:block;padding:9px 10px;border-bottom:0;white-space:normal;font-size:12px;line-height:1.3}
nav.site .grp-m a small{display:block;font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}
nav.site .grp-m a:hover{color:var(--ink);background:var(--card);border-bottom-color:transparent}
nav.site .grp-m a[aria-current="page"]{color:var(--ink);background:var(--card);box-shadow:inset 3px 0 0 var(--accent-type);border-bottom-color:transparent}
nav.site .grp.right .grp-m{left:auto;right:0}
/* R3.5: the globe, the way steadyeddie.ca carries it: one glyph before the ask, the Languages page behind it */
nav.site .lang-switch{font-size:16px;padding:8px 8px;line-height:1;opacity:.7;border-bottom:2px solid transparent}
nav.site .lang-switch:hover{opacity:1;border-bottom-color:transparent}
nav.site .lang-switch[aria-current="page"]{opacity:1;border-bottom-color:transparent}
nav.site .enq{border:1px solid var(--ink);padding:8px 14px;margin-left:6px;color:var(--ink)}
nav.site .enq:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* a top-level link in the bar (ES-DEC-010): a group button without the caret */
nav.site>a.top{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite);padding:6px 0;border:0;border-bottom:2px solid transparent;background:none;
  white-space:nowrap;line-height:inherit}
nav.site>a.top:hover{color:var(--ink);border-bottom-color:var(--accent-type)}
nav.site a.top[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent-type)}
@media (max-width:1280px){
  nav.site .grp{width:100%}
  nav.site .grp-t{display:block;pointer-events:none;width:100%;padding:16px 0 4px;color:var(--muted);font-size:10.5px;letter-spacing:.18em;border:0;text-align:left}
  nav.site .grp-t::after{content:""}
  nav.site .grp-m{position:static;display:block;border:0;box-shadow:none;padding:0;min-width:0}
  nav.site .grp-m::before{display:none}
  nav.site .grp-m a{padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}
  nav.site .grp-m a small{display:none}
  nav.site .grp-m a:hover,nav.site .grp-m a[aria-current="page"]{background:none;box-shadow:none;border-bottom-color:var(--line)}
  /* in the burger menu the top-level link is a plain row, sitting above the ask */
  nav.site>a.top{display:block;width:100%;font-size:12px;letter-spacing:.1em;padding:13px 0;
    border-bottom:1px solid var(--line);color:var(--graphite)}
  nav.site>a.top[aria-current="page"]{color:var(--ink);border-bottom-color:var(--line)}
  nav.site .lang-switch{font-size:12px;opacity:1;padding:13px 0;border-bottom:1px solid var(--line)}
  nav.site .lang-switch::after{content:"\00a0\00a0Languages";font-family:var(--mono);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
  nav.site .enq{margin:16px 0 8px;text-align:center;padding:13px;width:100%}
}

/* ---------- footer: a brand column beside the four link columns ---------- */
footer.site .fgrid{display:grid;gap:28px 24px;grid-template-columns:1.5fr repeat(5,1fr)}
@media (max-width:1100px){footer.site .fgrid{grid-template-columns:repeat(3,1fr)}footer.site .brandcol{grid-column:1/-1}}
@media (max-width:760px){footer.site .fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer.site .fgrid{grid-template-columns:1fr}}
footer.site .brandcol .logo-plate{display:inline-block;background:#fff;padding:10px 14px;margin-bottom:14px;line-height:0}
footer.site .brandcol .logo-plate img{height:32px;width:auto;display:block}
footer.site .brandcol p{font-size:14.5px;color:rgba(255,255,255,.72);max-width:40ch;margin-bottom:0}

/* ---------- section head, measures, utilities ---------- */
.sec-head{margin-bottom:clamp(24px,3.4vw,44px)}
.sec-head h2{margin-bottom:12px}
.sec-head .lede{margin-bottom:0}
.wrap.narrow{max-width:900px}
hr.rule{border:0;border-top:2px solid var(--graphite);width:56px;margin:18px 0 22px}
.sec.ink hr.rule{border-top-color:var(--accent-l)}

/* ---------- cards and card grids ---------- */
.grid{display:grid;gap:clamp(16px,2.2vw,26px);margin-top:clamp(28px,3.4vw,48px)}
.grid.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.grid.rows-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.grid.rows-3{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);padding:clamp(20px,2.4vw,28px);position:relative;display:flex;flex-direction:column}
.sec:not(.tint) .card{background:var(--card)}
.card .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-type);margin-bottom:10px}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px;color:var(--graphite);margin-bottom:8px}
.card p:last-child{margin-bottom:0}
.card ul,.card ol{margin-bottom:0}
.card li{font-size:15.5px;color:var(--graphite)}
.card.rule-top{border-top:3px solid var(--graphite)}
.card .n{position:absolute;top:16px;right:18px;font-family:var(--disp);font-weight:700;font-size:28px;line-height:1;color:var(--line)}
.card .btn-text{margin-top:auto;padding-top:14px}
a.card{text-decoration:none;color:inherit}
a.card:hover{border-color:var(--accent-type)}
.choose .card:last-child{border-top:3px solid var(--graphite)}
.sec.ink .card,.sec:not(.tint).ink .card{background:transparent;border-color:rgba(255,255,255,.2)}
.sec.ink .card p,.sec.ink .card li{color:rgba(255,255,255,.8)}
.sec.ink .card .k{color:rgba(255,255,255,.62)}
.sec.ink .card .n{color:rgba(255,255,255,.18)}
.grid.g3>.card>h3,.grid.g4>.card>h3{min-height:2.3em}

/* ---------- compare: two or three columns side by side, one marked ---------- */
.compare{display:grid;gap:clamp(14px,2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));margin-top:clamp(28px,3.4vw,48px)}
.compare .col{border:1px solid var(--line);padding:clamp(18px,2.2vw,26px);background:var(--paper)}
.compare .col.now{border-top:3px solid var(--graphite)}
.compare .col .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:10px}
.compare .col.now .k{color:var(--accent-type)}
.compare .col h3{margin-bottom:10px}
.compare .col p,.compare .col li{font-size:15.5px;color:var(--graphite)}
.compare .col p:last-child{margin-bottom:0}
.sec.ink .compare .col{background:transparent;border-color:rgba(255,255,255,.2)}
.sec.ink .compare .col p,.sec.ink .compare .col li{color:rgba(255,255,255,.8)}
.sec.ink .compare .col .k{color:rgba(255,255,255,.62)}
.sec.ink .compare .col.now .k{color:var(--accent-l)}

/* ---------- quote ---------- */
.quote{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2.6vw,34px);line-height:1.12;text-transform:none;letter-spacing:0;
  color:var(--ink);max-width:26ch;margin:clamp(20px,2.4vw,32px) 0 0}
.quote+.src{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px;max-width:none}
.sec.ink .quote{color:#fff}
.sec.ink .quote+.src{color:rgba(255,255,255,.6)}

/* ---------- note and aside box ---------- */
.note{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--graphite);padding:20px 24px;margin:22px 0;max-width:72ch}
.note .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);margin-bottom:8px}
.note p{font-size:15.5px;color:var(--ink);margin-bottom:0}
.note p+p{margin-top:8px}
.aside-box{border:1px solid var(--line);border-top:3px solid var(--graphite);padding:20px 22px;background:var(--paper);margin-top:clamp(24px,3vw,40px);max-width:72ch}
.aside-box .k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-type);margin-bottom:8px}
.aside-box p{font-size:15px;color:var(--graphite);margin-bottom:0}
.aside-box p+p{margin-top:8px}
.sec.ink .note,.sec.ink .aside-box{background:transparent;border-color:rgba(255,255,255,.22)}
.sec.ink .note{border-left-color:rgba(255,255,255,.5)}
.sec.ink .note .k{color:rgba(255,255,255,.62)}
.sec.ink .note p,.sec.ink .aside-box p{color:rgba(255,255,255,.86)}
.sec.ink .aside-box{border-top-color:var(--accent-l)}
.sec.ink .aside-box .k{color:var(--accent-l)}

/* ---------- on-this-page sub-navigation ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,3vw,36px);max-width:none}
.subnav .lbl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-type)}
.subnav a{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--accent-type);border-bottom-color:var(--accent-type)}
h2[id],h3[id],section[id]{scroll-margin-top:84px}

/* ---------- glossary ---------- */
.gloss{display:grid;grid-template-columns:1fr;margin:clamp(28px,3.4vw,48px) 0 0}
.gloss div{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:12px 24px;padding:14px 0;border-top:1px solid var(--line)}
.gloss div:last-child{border-bottom:1px solid var(--line)}
.gloss dt{font-family:var(--disp);font-weight:600;font-size:20px;text-transform:uppercase;line-height:1.1;color:var(--ink)}
.gloss dt small{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;color:var(--accent-type);margin-top:4px}
.gloss dd{margin:0;font-size:15.5px;color:var(--graphite);max-width:68ch}
@media (max-width:640px){.gloss div{grid-template-columns:1fr;gap:6px}}
.sec.ink .gloss div{border-color:rgba(255,255,255,.2)}
.sec.ink .gloss dt{color:#fff}
.sec.ink .gloss dd{color:rgba(255,255,255,.8)}

/* ---------- the strip: figures in a row that scrolls sideways ---------- */
.strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin-top:clamp(28px,3.4vw,48px)}
.strip figure.ph{flex:0 0 300px;scroll-snap-align:start}
.strip figure.ph img{aspect-ratio:4/3}

/* ---------- text links, small buttons ---------- */
.btn-text{display:inline-block;padding:6px 0;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-type);text-decoration:none}
.btn-text::after{content:"\00a0\2192"}
.btn-text:hover{color:var(--accent-l)}
.btn-text+.btn-text{margin-left:22px}
.sec.ink .btn-text,.sec.photo .btn-text,.hero.cine .btn-text{color:#fff}
.sec.ink .btn-text:hover,.sec.photo .btn-text:hover,.hero.cine .btn-text:hover{color:var(--accent-l)}
.btn.small{padding:10px 16px;font-size:11px}

/* ---------- tables: a key cell ---------- */
.tbl td.k{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--accent-type);white-space:nowrap}
@media (max-width:760px){table.tbl td.k{font-family:var(--disp);font-size:19px;letter-spacing:0;text-transform:uppercase;white-space:normal;color:var(--ink);padding-top:2px}
  table.tbl td.k::before{content:none}}

/* ---------- facts: a second line under a value ---------- */
.facts dd small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.sec.ink .facts dd small{color:rgba(255,255,255,.6)}

/* ---------- the form ---------- */
.form{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));margin-top:clamp(24px,3vw,40px);position:relative}
.form .full{grid-column:1/-1}
.form label{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite);margin-bottom:6px}
.form label .req{color:var(--accent-type)}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid #C9D1CC;padding:12px 14px;min-height:50px}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent-type);outline:none;box-shadow:0 0 0 3px rgba(107,100,0,.20)}
.form select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%233E3934' stroke-width='2'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.form .help{font-size:13px;color:var(--muted);margin-top:6px}
.form .hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-status{font-size:15px;margin-top:6px;min-height:1.4em}
.form-status.ok{color:var(--ink);font-weight:600}
.form-status.err{color:#8A1A1A;font-weight:600}
@media (max-width:760px){.form .btn{width:100%}}

/* ---------- motion, only where it is welcome ---------- */
@media (prefers-reduced-motion: no-preference){
  a.card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
  a.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(28,26,24,.10)}
  .btn{transition:transform .15s ease,background .2s,color .2s,border-color .2s}
  .btn:hover{transform:translateY(-1px)}
  .btn-text::after{display:inline-block;transition:transform .2s ease}
  .btn-text:hover::after{transform:translateX(4px)}
  html.rv-armed .rv img{opacity:0;transition:opacity .9s ease .1s}
  html.rv-armed .rv.in img{opacity:1}
  table.tbl tbody tr{transition:background .15s}
  table.tbl tbody tr:hover{background:rgba(107,100,0,.05)}
  header.site{transition:box-shadow .2s}
  html.scrolled header.site{box-shadow:0 6px 24px rgba(28,26,24,.08)}
}

/* ---------- print ---------- */
@media print{
  .subnav,.form,.strip{display:none}
  .card,.compare .col,.note,.aside-box,.gloss div{border-color:#999}
  nav.site .grp-m{display:block;position:static;border:0;box-shadow:none}
}

/* ============================================================
   THD ADDENDUM — R1.0
   Four components this property needs that the parent stylesheet
   does not carry. Built on the existing tokens; nothing overridden.
     .stat   a large figure with a label, used in counter rows
     .f2     a two-up field pair inside .form (the parent form is single column)
     .fine   the small print note (retired in the parent at ES R3.3, needed here
             for source caveats, which this site carries a lot of)
     .tag    an inline qualifier chip used in the crossing register
   ============================================================ */
.stat{border-top:var(--rule) solid var(--graphite);padding-top:14px}
.stat .n{display:block;font-family:var(--disp);font-size:clamp(30px,3.6vw,46px);font-weight:700;
  line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat .l{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.5}
.sec.ink .stat{border-top-color:var(--accent)}
.sec.ink .stat .n{color:#fff}
.sec.ink .stat .l{color:rgba(255,255,255,.72)}

.form .f2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
@media (max-width:620px){.form .f2{grid-template-columns:1fr}}

.fine{font-size:13px;line-height:1.6;color:var(--muted);margin-top:14px;max-width:80ch}
.sec.ink .fine{color:rgba(255,255,255,.66)}

.tag{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-type);border:1px solid var(--line);padding:2px 6px;
  margin-left:8px;vertical-align:middle;white-space:nowrap}

/* ------------------------------------------------------------
   THD ADDENDUM — scrim weight, R1.0
   The parent's scrims were tuned against dark equipment photography on
   dark ground. This property's photographs are mid-tone and bright —
   a tan compaction reamer, a yellow rig against sky — and white body
   type over them sat at roughly 3:1. The left-to-right wash is carried
   further across and the vertical floor is raised so the plate always
   has a ground to sit on. Geometry and stops are otherwise unchanged.
   ------------------------------------------------------------ */
.hero.cine .scrim{
  background:linear-gradient(90deg,rgba(28,26,24,.78) 0%,rgba(28,26,24,.58) 46%,rgba(28,26,24,.16) 84%),
             linear-gradient(180deg,rgba(28,26,24,.28) 0%,rgba(28,26,24,.30) 46%,rgba(28,26,24,.72) 100%)}
.sec.photo .scrim{
  background:linear-gradient(90deg,rgba(28,26,24,.76) 0%,rgba(28,26,24,.56) 46%,rgba(28,26,24,.14) 84%),
             linear-gradient(180deg,rgba(28,26,24,.30) 0%,rgba(28,26,24,.32) 46%,rgba(28,26,24,.70) 100%)}
@media (prefers-reduced-motion: reduce){
  .hero.cine .scrim{background:linear-gradient(180deg,rgba(28,26,24,.42) 0%,rgba(28,26,24,.86) 70%)}
  .sec.photo .scrim{background:linear-gradient(180deg,rgba(28,26,24,.40) 0%,rgba(28,26,24,.84) 72%)}
}
/* the plate's text column stays off the bright side of a wide frame */
.sec.photo .wrap > *{max-width:62ch}

/* THD ADDENDUM — hero measure, R1.1
   This property's headline is longer than the parent's and broke to five lines
   at the desktop wrap, pushing the buttons under the fold. The plate's measure
   widens on the hero only; body copy keeps the parent's reading width. */
.hero.cine .plate-in{max-width:1000px}
.hero.cine .plate-in .lede{max-width:64ch}