/* Dennison G.E.S — prototype site styles */
:root{
  --bg:#f6f7f9; --surface:#fff; --surface-2:#fafbfc; --surface-3:#eef1f5;
  --ink:#0f1419; --ink-2:#4d5866; --ink-3:#6b7684; --ink-4:#93a0ad;
  --line:#dfe4ea; --line-2:#eef1f5;
  --accent:#1b589e; --accent-dark:#204588; --accent-ink:#fff;
  --ok:#0f6b52; --ok-bg:#e3f3ec;
  --warn:#8a5200; --warn-bg:#fdf0dc;
  --info:#1b4a8f; --info-bg:#e7edf7;
  --amber:#ffb057; --dark:#0f1419;
  --shadow:0 1px 2px rgba(15,20,25,.05), 0 12px 28px -18px rgba(15,20,25,.28);
  --f-sans:'Archivo',system-ui,-apple-system,sans-serif;
  --f-cond:'Archivo',system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1240px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- masthead ---------- */
.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top-in{max-width:var(--wrap);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.brand{font-family:var(--f-cond);font-weight:700;font-size:23px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.brand span{color:var(--accent)}
.nav{display:flex;gap:20px;font-size:14px;font-weight:500;flex-wrap:wrap}
.nav a{color:var(--ink-2)}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a.on{box-shadow:inset 0 -2px 0 var(--accent)}
.top-cta{display:flex;gap:10px;align-items:center;margin-left:auto;flex-wrap:wrap}
.tel{font-family:var(--f-mono);font-size:14px;color:var(--ink-2);white-space:nowrap}

/* ---------- alert bar ---------- */
.alert{background:var(--dark);color:#fff}
.alert-in{max-width:var(--wrap);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.alert svg{flex:none}
.alert b{font-size:15px;font-weight:600}
.alert p{font-size:14px;color:#b9c5d1;margin:0}
.alert .grp{display:flex;gap:14px;align-items:center;margin-left:auto;flex-wrap:wrap}
.alert .num{font-family:var(--f-mono);font-size:19px;font-weight:600;letter-spacing:-.01em;color:#fff}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--f-sans);font-size:15px;font-weight:600;padding:12px 22px;border-radius:5px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface-3);color:var(--ink)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#21170a}
.btn.amber:hover{background:#ffa03a;border-color:#ffa03a;color:#21170a}
.btn.light{background:#fff;border-color:#fff;color:var(--dark)}
.btn.on-dark{background:transparent;border-color:#33414f;color:#aebbc8}
.btn.sm{font-size:13px;padding:8px 14px}
.btn.lg{font-size:16px;padding:14px 26px}

/* ---------- shared bits ---------- */
.eyebrow{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow.acc{color:var(--accent)}
.lede{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:58ch}
.muted{color:var(--ink-2)}
.small{font-size:13px;color:var(--ink-3);line-height:1.55}
.sec{padding-block:52px}
.sec.tight{padding-block:36px}
.sec.white{background:var(--surface);border-block:1px solid var(--line)}
.sec.dark{background:var(--dark);color:#eef2f6}
.sec.dark h2,.sec.dark h1{color:#fff}
.sec.dark p{color:#aebbc8}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
h1.page{font-family:var(--f-cond);font-size:clamp(34px,5vw,58px);line-height:1.04;font-weight:600;letter-spacing:-.022em}
h2{font-family:var(--f-cond);font-size:clamp(26px,3.4vw,34px);font-weight:600;letter-spacing:-.018em;line-height:1.12}
h3{font-family:var(--f-cond);font-size:22px;font-weight:600;letter-spacing:-.012em}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.card.flat{box-shadow:none}
.card h3{margin:0}
.pill{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-family:var(--f-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:3px}
.pill.ok{color:var(--ok);background:var(--ok-bg)}
.pill.warn{color:var(--warn);background:var(--warn-bg)}
.pill.info{color:var(--info);background:var(--info-bg)}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--f-mono);font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1}
.stat span{font-size:13px;color:var(--ink-3);line-height:1.45}
.arrow{font-weight:600;font-size:15px;color:var(--accent)}
.disclaimer{font-size:13px;color:var(--ink-3);line-height:1.55;max-width:96ch;margin-top:18px}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center;padding-block:56px}
.hero-copy{display:flex;flex-direction:column;gap:18px}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:32px;padding-block:36px}}

/* panel */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.panel-head{padding:14px 20px;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:10px}
.panel-head .t{font-weight:600;font-size:15px}
.panel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-2)}
.panel-grid>div{padding:17px 18px;background:var(--surface)}
@media (max-width:900px){.panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel-foot{padding:15px 20px;background:var(--surface-2);border-top:1px solid var(--line-2);display:flex;gap:10px;align-items:flex-start}
.panel-foot span{font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* spec list */
dl.specs{margin:0;display:grid;border-top:1px solid var(--line-2)}
dl.specs>div{display:grid;grid-template-columns:13ch 1fr;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-2)}
dl.specs dt{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
dl.specs dd{margin:0;font-family:var(--f-mono);font-size:13px;font-variant-numeric:tabular-nums}

/* stock */
.stock{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden}
.thumb{background:var(--surface-3);border-bottom:1px solid var(--line-2);aspect-ratio:16/9;display:grid;place-items:center;padding:14px}
.thumb svg{width:88%;height:auto}
.stock-body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:9px;flex:1}
.stock-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--line-2);padding-top:12px;margin-top:auto}
.price b{font-family:var(--f-mono);font-size:18px;font-weight:600}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;font-weight:600;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl .mono{font-size:13px;color:var(--ink-2)}
.scroll-x{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px}

/* footer */
footer.site{background:var(--dark);color:#aebbc8;padding-block:44px 30px;margin-top:8px}
footer.site a{color:#d4dde5}
footer.site a:hover{color:#fff}
footer.site h4{font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#7e93a8;margin:0 0 12px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:32px}
.foot-links{display:flex;flex-direction:column;gap:8px;font-size:14px}
.foot-bottom{border-top:1px solid #24303a;margin-top:32px;padding-top:20px;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#7e93a8}
.proto{background:var(--accent);color:#fff;font-size:13px;text-align:center;padding:8px 20px}
.proto b{font-weight:600}
@media (max-width:560px){
  .panel-grid{grid-template-columns:1fr}
  .top-in{gap:12px}
  .nav{gap:14px;font-size:13px;order:3;width:100%}
  .top-cta{margin-left:0}
}

/* --- imagery --- */
.shot{display:block;width:100%;height:auto;border-radius:6px;background:#eef1f5}
.shot-sq{aspect-ratio:1/1;object-fit:cover}
.banner{position:relative;border-radius:8px;overflow:hidden;background:#0f1419}
.banner img{display:block;width:100%;height:auto}
.banner-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 26px;color:#fff;
  background:linear-gradient(to top,rgba(10,14,18,.82),rgba(10,14,18,0))}
.oem-logo{height:30px;width:auto;display:block}

/* --- brand marks --- */
.brand img{height:34px;width:auto;display:block}
.brand-word{font-family:var(--f-cond);font-weight:700;font-size:24px;letter-spacing:.02em;text-transform:uppercase}
.foot-logo{height:34px;width:auto;display:block;margin-bottom:14px}

/* =========================================================
   EDITORIAL LAYER — bigger type, rules not boxes,
   asymmetric splits, full-bleed bands
   ========================================================= */
:root{
  --navy:#132c52;        /* band navy, from the logo family */
  --navy-2:#0c1f3c;
  --paper:#f4f2ed;       /* warm off-white */
  --rule:#cbd1d6;
}

/* type scale */
h1.big{font-family:var(--f-cond);font-weight:600;
  font-size:clamp(2.9rem,5.4vw,5.1rem);line-height:.98;letter-spacing:-.04em;
  margin:0 0 26px;max-width:16ch;text-wrap:balance}
h2.big{font-family:var(--f-cond);font-weight:600;color:var(--ink);
  font-size:clamp(2rem,3.9vw,3.5rem);line-height:1.04;letter-spacing:-.035em;
  margin:0 0 20px;text-wrap:balance}
h3.mid{font-family:var(--f-cond);font-weight:600;font-size:clamp(1.2rem,1.9vw,1.65rem);
  letter-spacing:-.015em;margin:0;color:var(--ink)}

.kicker{font-family:var(--f-mono);font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 16px}
.kicker.dim{color:var(--ink-3)}
.kicker.light{color:#8fb0da}

/* sections */
.ed{padding-block:clamp(64px,8.5vw,118px)}
.ed.paper{background:var(--paper)}
.ed.white{background:#fff}
.ed.navy{background:var(--navy);color:#fff}
.ed.navy h2.big,.ed.navy h3.mid{color:#fff}
.ed.tightish{padding-block:clamp(48px,6vw,80px)}

/* asymmetric intro split */
.split{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(34px,6vw,92px);align-items:start}
.split.flip{grid-template-columns:1.18fr .82fr;align-items:stretch}
.split.even-ish{grid-template-columns:1.08fr .92fr}
.split p.lead{font-size:clamp(1.02rem,1.35vw,1.14rem);color:var(--ink-2);max-width:66ch;margin:0}
.ed.navy .split p.lead{color:#bccadd}

/* numbered rule list */
.rows{margin-top:clamp(38px,5vw,60px);border-top:1px solid var(--rule)}
.row-item{display:grid;grid-template-columns:62px .8fr 1.35fr auto;gap:24px;
  padding:28px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.row-item .n{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--accent)}
.row-item p{margin:0;color:var(--ink-2);max-width:62ch}
.row-item .go{font-weight:600;font-size:14px;color:var(--accent);white-space:nowrap}
.ed.navy .rows,.ed.navy .row-item{border-color:#32496b}
.ed.navy .row-item p{color:#bccadd}

/* plain group grid, rules not cards */
.groups{display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--ink)}
.group{padding:24px 28px 26px 0;border-bottom:1px solid var(--line)}
.group:nth-child(even){padding-left:28px;border-left:1px solid var(--line)}
.group p{margin:6px 0 0;color:var(--ink-2)}

/* big figures */
.figs{display:grid;grid-template-columns:1fr 1fr;margin-top:44px;border-top:1px solid #32496b}
.fig{padding:22px 18px 22px 0;border-bottom:1px solid #32496b}
.fig:nth-child(even){padding-left:22px;border-left:1px solid #32496b}
.fig b{display:block;font-family:var(--f-cond);font-size:clamp(2.1rem,3.8vw,3.4rem);
  line-height:1;letter-spacing:-.04em;color:#fff}
.fig span{color:#a9bdd6;font-size:14px}

/* full-bleed two-up band */
.bleed{display:grid;grid-template-columns:1fr 1fr}
.bleed > *{min-height:340px;padding:clamp(40px,5.5vw,76px);color:#fff}
.bleed .a{background:var(--accent)}
.bleed .b{background:#24313e}
.bleed .c{background:var(--navy)}
.bleed .d{background:var(--accent-dark)}
.bleed h3{font-family:var(--f-cond);font-weight:600;font-size:clamp(1.6rem,2.7vw,2.4rem);
  letter-spacing:-.025em;margin:0 0 14px;color:#fff}
.bleed p{color:#e2eaf4;max-width:48ch;margin:0}

/* image placeholder that does not look like a bug */
.imgslot{position:relative;min-height:420px;overflow:hidden;
  background:linear-gradient(140deg,#5f6e7a 0%,#2f3e4d 48%,var(--navy-2) 100%)}
.imgslot::after{content:attr(data-note);position:absolute;inset:auto 24px 24px 24px;
  color:rgba(255,255,255,.72);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.7}
.imgslot::before{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(6,16,30,.55),transparent 55%)}

.tline{margin-top:40px;display:flex;gap:14px 26px;flex-wrap:wrap;color:#9fb3cc;font-size:14px}
.tline span{display:inline-flex;align-items:center;gap:9px}
.tline span::before{content:"";width:5px;height:5px;border-radius:50%;background:#e8933c}

.tlink{font-weight:600;color:var(--accent);border-bottom:1px solid #aac5e5;padding-bottom:3px}
.ed.navy .tlink,.bleed .tlink{color:#fff;border-color:rgba(255,255,255,.45)}

@media (max-width:960px){
  .split,.split.flip,.split.even-ish,.groups,.bleed,.figs{grid-template-columns:1fr}
  .group:nth-child(even){padding-left:0;border-left:0}
  .fig:nth-child(even){padding-left:0;border-left:0}
  .row-item{grid-template-columns:44px 1fr}
  .row-item p,.row-item .go{grid-column:2}
}
@media (max-width:680px){
  .row-item{grid-template-columns:34px 1fr;gap:12px}
  .imgslot{min-height:300px}
}


/* --- Archivo standing in for Sculpin: it is wider, so rein the display sizes in --- */
h1.big{font-size:clamp(2.6rem,4.7vw,4.4rem);letter-spacing:-.035em;max-width:17ch}
h2.big{font-size:clamp(1.85rem,3.4vw,3.1rem);letter-spacing:-.03em}
h3.mid{letter-spacing:-.012em}
.brand-word{letter-spacing:.01em}

/* --- CMYK as section markers only. The mark carries the colour; the page does not --- */
.row-item:nth-child(1) .n{color:#00b4f8}
.row-item:nth-child(2) .n{color:#e6008c}
.row-item:nth-child(3) .n{color:#c9a400}
.row-item:nth-child(4) .n{color:var(--ink)}

/* --- WordPress bits the prototype never needed --- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:#fff;
  padding:12px 18px;border-radius:0 0 4px 0;font-weight:600}
.skip:focus{left:0}
.prose{font-size:1.05rem;line-height:1.7;color:var(--ink-2);max-width:74ch}
.prose h2{font-family:var(--f-cond);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.025em;
  color:var(--ink);margin:2em 0 .5em;line-height:1.15}
.prose h3{font-family:var(--f-cond);font-size:1.25rem;letter-spacing:-.015em;color:var(--ink);
  margin:1.8em 0 .4em}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em;line-height:1.9}
.prose img{max-width:100%;height:auto;border-radius:6px}
.prose blockquote{margin:1.6em 0;padding-left:20px;border-left:4px solid #e8933c;
  font-weight:600;color:var(--ink)}
.prose a{border-bottom:1px solid #aac5e5}

.pagination,.navigation.pagination{margin-top:38px;display:flex;gap:8px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:14px}
.pagination .page-numbers{padding:9px 14px;border:1px solid var(--line);border-radius:4px;
  color:var(--ink-2);background:#fff}
.pagination .page-numbers.current{background:var(--accent);border-color:var(--accent);color:#fff}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

.searchform input[type=search]{padding:12px 14px;border:1px solid var(--line);border-radius:4px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink)}

/* WooCommerce, parts only. Enough to stop Woo's defaults fighting the design. */
.woocommerce ul.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:18px;margin:0;padding:0;list-style:none}
.woocommerce ul.products li.product{background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:18px;margin:0;width:auto;float:none;text-align:left}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--f-cond);
  font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);padding:0;margin:10px 0 4px}
.woocommerce ul.products li.product .price{color:var(--ink);font-family:var(--f-mono);font-size:15px;
  font-weight:600}
.woocommerce ul.products li.product img{border-radius:5px;margin-bottom:6px}
.woocommerce .button,.woocommerce a.button,.woocommerce button.button{background:var(--accent);
  color:#fff;border-radius:4px;font-weight:600;font-size:14px;padding:11px 16px;font-family:inherit}
.woocommerce .button:hover,.woocommerce a.button:hover{background:var(--accent-dark);color:#fff}
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--accent);
  background:var(--surface-2);border-radius:6px}
.woocommerce .woocommerce-breadcrumb{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}

/* staging banner reuses the prototype strip */
/* the review banner scrolls away. Only the header sticks. */
body.is-staging .proto{position:static}


/* ---------------------------------------------------------------------------
   Sticky header vs the WordPress admin bar
   ---------------------------------------------------------------------------
   The admin bar is position:fixed at top:0 and 32px tall, 46px under 782px
   wide. A sticky header at top:0 slides underneath it and gets clipped. Only
   logged in users ever see this, which is exactly the people reviewing the
   site, so it looks like a fault when it is not.
   --------------------------------------------------------------------------- */
body.admin-bar .top{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .top{top:46px}
}

/* Give the sticky header a shadow once it lifts off the page, so it reads as
   a layer rather than as content that failed to scroll. */
.top{transition:box-shadow .18s ease}
.top.is-stuck{box-shadow:0 1px 0 var(--line),0 8px 24px -14px rgba(15,20,25,.4)}

/* Header contents must never wrap, or the sticky bar grows and eats the page. */
.top-in{flex-wrap:nowrap}
.top .nav{min-width:0;overflow:hidden}
@media (max-width:900px){
  .top-in{flex-wrap:wrap;row-gap:10px}
  .top .nav{order:3;width:100%;overflow:visible}
  .top-cta{margin-left:auto}
}


/* ---------------------------------------------------------------------------
   Layout stability
   ---------------------------------------------------------------------------
   Pages were jumping while they loaded. Three causes, all addressed here.

   1. Web font swap. Archivo arrives from Google and the browser paints in a
      fallback first. With display type at 4rem and -.035em tracking, the
      reflow when it swaps is violent. The @font-face below gives the fallback
      matched metrics so the swap barely moves anything.
   2. Nothing reserved space. Hero and image panels could collapse and then
      expand once content arrived.
   3. The footer logo had no size, so it painted at its natural width first.
   --------------------------------------------------------------------------- */

/* Metric matched fallback. size-adjust is tuned so Arial occupies close to the
   same space as Archivo. Nudge it if a headline still shifts: bigger number
   means the fallback renders larger. */
@font-face{
  font-family:'Archivo fallback';
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:97%;
  ascent-override:92%;
  descent-override:24%;
  line-gap-override:0%;
}

:root{
  --f-sans:'Archivo','Archivo fallback',system-ui,-apple-system,sans-serif;
  --f-cond:'Archivo','Archivo fallback',system-ui,-apple-system,sans-serif;
}

/* Reserve the space a section will end up occupying, so nothing collapses
   and then pushes the page down. */
.hero,.split.even-ish{min-height:clamp(420px,52vh,640px)}
.imgslot{min-height:420px}
@media (max-width:680px){
  .hero,.split.even-ish{min-height:0}
  .imgslot{min-height:300px}
}

/* Both logos get a fixed height and a reserved box. */
.brand img,.foot-logo,footer.site .wrap img{height:34px;width:auto;display:block}
.brand{min-height:34px;display:flex;align-items:center}
footer.site .wrap > .foot-grid > div:first-child img{height:40px;margin-bottom:14px}

/* Images never render at natural size first. */
img{max-width:100%;height:auto}