/* ═══════════════════════════════════════════════════════════════════════════
   THEME 02 — "BARE METAL"
   Built from the logo outward: white distressed artwork on near-black, one
   hazard-yellow accent, ember reserved for urgency. Anton display at scale,
   Barlow body, JetBrains Mono for technical labels.

   This file carries tokens AND the structural overrides that make the theme,
   so 01-cannon stays intact and switchable from build/layout.js.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ground: near-black with a cool cast, like blasted steel ── */
  --void:#08090A;
  --steel:#101315;
  --steel-2:#171B1E;
  --steel-3:#212629;
  --line:#2B3237;
  --line-soft:#1C2226;

  /* ── the accent: safety yellow. PPE, caution tape, heavy equipment ── */
  --hazard:#FFD400;
  --hazard-hot:#FFE763;
  --hazard-deep:#C9A800;
  --hazard-dim:rgba(255,212,0,.11);
  --hazard-line:rgba(255,212,0,.34);

  /* ── ember: urgency only, never decoration ── */
  --ember:#FF3B00;
  --ember-dim:rgba(255,59,0,.14);

  /* ── type ── */
  --chalk:#F2F4F5;
  --ash:#98A1A8;
  --ash-2:#69727A;

  --r-sm:2px; --r:3px; --r-lg:4px; --r-xl:5px;
  --shell:1280px;
  --hdr:104px;
  --hdr-tight:74px;

  /* ── aliases so the shared structure in site.css keeps working ── */
  --forest:var(--void);      --sb-track:#101315; --sb-thumb:#39414A; --sb-thumb-hover:#4E5862;

  --forest-2:#050607;   --forest-3:var(--steel-2);
  --forest-line:rgba(255,255,255,.10);
  --orange:var(--hazard);    --orange-hot:var(--hazard-hot);
  --orange-deep:var(--hazard-deep);
  --orange-soft:var(--hazard-dim); --orange-line:var(--hazard-line);
  --accent-soft:var(--hazard);
  --cream:var(--void);       --cream-2:var(--steel);
  --mint:var(--steel);       --mint-2:var(--steel-2);
  --paper:var(--steel);
  --text:var(--chalk);       --text-2:var(--ash);
  --muted:var(--ash);        --muted-2:var(--ash-2);
  --ink:var(--void);         --ink-2:var(--steel);
  --panel:var(--steel);      --panel-2:var(--steel-2);
  --white:var(--chalk);      --grit:var(--ash);
  --green:var(--hazard);     --green-hot:var(--hazard-hot);
  --green-deep:var(--hazard-deep); --green-dim:var(--hazard-dim);
  --green-line:var(--hazard-line);
  --rush:var(--ember);       --rush-dim:var(--ember-dim);
}

/* ══ TYPE ══════════════════════════════════════════════════════════════════ */
body{ background:var(--void); color:var(--chalk); font-family:'Barlow',system-ui,sans-serif; }

h1,h2,h3,h4,.display{
  font-family:'Anton','Barlow Condensed',Impact,sans-serif;
  font-weight:400; text-transform:uppercase; color:var(--chalk);
}
/* Leading is a function of size here. The very tight setting only works on
   display sizes where lines are short; at card and body scale the ascenders
   and descenders of Anton collide, so it opens up as the type gets smaller. */
/* Display scale. The caps came down about a fifth: at 6.6rem the H1 ran
   105px against a 19px lede — a 5.5:1 jump that reads as shouting — and
   pushed the call buttons below the fold on a 1536x730 laptop. Still the
   biggest thing on the page by far, just no longer eating 39% of it. */
h1{ font-size:clamp(2.9rem,5.9vw,5.1rem); line-height:.9; letter-spacing:-.012em; }
h2{ font-size:clamp(1.95rem,4.2vw,3.5rem); line-height:.95; letter-spacing:-.008em; }
h3{ font-size:clamp(1.12rem,1.8vw,1.45rem); line-height:1.16; letter-spacing:.004em; }
h4{ line-height:1.2; letter-spacing:.01em; }
.hero h1 em{ color:var(--hazard); }
.lede{ color:var(--ash); font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.72; }
p{ color:var(--ash); }
.prose strong,.card h3{ color:var(--chalk); }

/* technical labels in mono — the spec-sheet voice */
.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.68rem; font-weight:500; letter-spacing:.24em;
  color:var(--hazard); text-transform:uppercase; margin-bottom:18px;
}
.eyebrow::before{ width:30px; height:1px; background:currentColor; border-radius:0; }
/* An eyebrow that already carries an icon does not also need a rule — two
   leading marks crowd the label and, in a narrow column, push it onto a
   second line. The rush eyebrow on the quote page was doing both. */
.eyebrow:has(svg)::before{ display:none; }

/* ══ GROUND TEXTURE ════════════════════════════════════════════════════════ */
.haze{
  opacity:.30; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* media in flight — white grit, plus one hazard spark field */
.grit{
  opacity:.85;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.42), transparent),
    radial-gradient(1.7px 1.7px at 58% 28%, rgba(255,255,255,.34), transparent),
    radial-gradient(1.1px 1.1px at 77% 74%, rgba(255,212,0,.30), transparent),
    radial-gradient(1.4px 1.4px at 90% 38%, rgba(255,255,255,.28), transparent),
    radial-gradient(1px 1px at 22% 86%, rgba(255,255,255,.38), transparent),
    radial-gradient(1.2px 1.2px at 66% 92%, rgba(255,212,0,.22), transparent);
  background-size:340px 340px,290px 290px,410px 410px,360px 360px,300px 300px,380px 380px,330px 330px;
}
/* machined scan lines + falloff */
.atmos::after{
  content:''; position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(0,0,0,.72) 100%);
}

/* ══ RUSH TICKER — hazard yellow, black type, impossible to miss ═══════════ */
.rushbar{
  background:var(--hazard); color:#0A0A00;
  font-family:'JetBrains Mono',monospace; font-weight:700;
  letter-spacing:.16em; font-size:.68rem;
  border-bottom:1px solid #000;
}
.rushbar b{ color:#0A0A00; font-weight:700; }
.rushbar svg{ color:#0A0A00; }
.rushbar-track{ padding:8px 0; gap:60px; }

/* ══ HEADER — the real lockup, condensing on scroll ═══════════════════════ */
header{
  background:rgba(8,9,10,.90); border-bottom:1px solid var(--line-soft);
  transition:background .2s;
}
.nav{ height:var(--hdr); transition:height .22s cubic-bezier(.4,0,.2,1); }
body.scrolled .nav{ height:var(--hdr-tight); }
header::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--hazard-line) 20%,var(--hazard-line) 80%,transparent);
}
/* the wordmark lockup replaces the icon + typeset name */
.brand-mark{ display:none; }
.brand-txt{ display:none; }
.brand-lockup{ display:block; height:64px; width:auto; transition:height .22s cubic-bezier(.4,0,.2,1); }
body.scrolled .brand-lockup{ height:44px; }

.navlinks a{
  font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:500;
  letter-spacing:.14em; color:var(--ash); padding:10px 13px; border-radius:0;
  position:relative;
}
.navlinks a::after{
  content:''; position:absolute; left:13px; right:13px; bottom:4px; height:1px;
  background:var(--hazard); transform:scaleX(0); transform-origin:left; transition:transform .18s;
}
.navlinks a:hover,.navlinks a.on{ color:var(--chalk); background:transparent; }
.navlinks a:hover::after,.navlinks a.on::after{ transform:scaleX(1); }

/* ══ BUTTONS — hard edges, hazard fill ════════════════════════════════════ */
.btn{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.72rem;
  letter-spacing:.13em; border-radius:var(--r-sm); border-width:1px; padding:14px 22px;
}
.btn-lg{ padding:18px 30px; font-size:.8rem; }
.btn-call{ background:var(--hazard); color:#0A0A00; border-color:var(--hazard); }
.btn-call:hover{ background:var(--hazard-hot); border-color:var(--hazard-hot); transform:none; box-shadow:0 0 26px rgba(255,212,0,.30); }
.btn-text{ background:transparent; color:var(--chalk); border-color:var(--line); }
.btn-text:hover{ background:transparent; color:var(--hazard); border-color:var(--hazard); }
.btn-ghost{ background:transparent; color:var(--ash); border-color:var(--line); }
.btn-ghost:hover{ background:transparent; color:var(--chalk); border-color:var(--chalk); }
.btn-rush{ background:var(--ember); color:#fff; border-color:var(--ember); }
.btn-rush:hover{ background:#FF5722; border-color:#FF5722; transform:none; box-shadow:0 0 26px rgba(255,59,0,.34); }
.dark .btn-ghost{ color:var(--ash); border-color:var(--line); }
.dark .btn-ghost:hover{ background:transparent; color:var(--chalk); border-color:var(--chalk); }
.dark .btn-text{ color:var(--chalk); border-color:var(--line); }
.dark .btn-text:hover{ background:transparent; color:var(--hazard); border-color:var(--hazard); }
.burger{ border-color:var(--line); border-width:1px; border-radius:var(--r-sm); }
.burger span{ background:var(--chalk); }

/* ══ HERO — oversized, with a blast plume behind ══════════════════════════ */
.hero{ padding:clamp(40px,4.4vw,68px) 0 clamp(44px,5vw,80px); }
.hero::before{
  content:''; position:absolute; right:-14%; top:-24%; width:64%; height:118%;
  pointer-events:none; z-index:0;
  background:radial-gradient(closest-side, rgba(255,212,0,.055), transparent 70%);
}
.hero-grid{ position:relative; z-index:1; }
.hero h1{ margin-bottom:22px; }
/* desktop only — site.css collapses this to one column under 900px and the
   theme must not override that */
@media (min-width:901px){
  .hero-grid{ grid-template-columns:1.14fr .86fr; gap:clamp(28px,3.6vw,54px); }
}
.hero-pills{ margin:20px 0 24px; }
.hero .lede{ max-width:52ch; }
.hero-media{ border-radius:var(--r-lg); box-shadow:none; border:1px solid var(--line); background:var(--steel); }
.hero-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.hero-tag{
  background:rgba(8,9,10,.86); color:var(--hazard); border:1px solid var(--hazard-line);
  border-radius:var(--r-sm); font-family:'JetBrains Mono',monospace;
  font-size:.62rem; letter-spacing:.14em; padding:7px 12px; font-weight:500;
}
.pill{
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ash); font-family:'JetBrains Mono',monospace; font-size:.63rem;
  letter-spacing:.14em; padding:7px 12px; font-weight:500;
}
.pill::before{ border-radius:0; width:4px; height:4px; background:var(--hazard); }
.pill.hot{ border-color:var(--ember); color:#FF7A4D; background:var(--ember-dim); }
.pill.hot::before{ background:var(--ember); }
.hero-note{ color:var(--ash-2); font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.04em; }
.hero-note b{ color:var(--hazard); }

/* ══ STATS — huge mono figures on hairline cells ══════════════════════════ */
.stats{ gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.stat{ background:var(--void); border-radius:0; padding:32px 20px; }
.stat b{
  font-family:'Anton',sans-serif; font-weight:400; color:var(--hazard);
  font-size:clamp(1.9rem,3.4vw,3rem); letter-spacing:-.01em;
}
.stat span{
  font-family:'JetBrains Mono',monospace; color:var(--ash-2);
  font-size:.62rem; letter-spacing:.18em; margin-top:12px;
}

/* ══ CARDS — hairline frames, hazard on hover ═════════════════════════════ */
.card{
  background:var(--steel); border:1px solid var(--line-soft); border-radius:var(--r-lg);
  transition:border-color .2s, transform .2s, background .2s;
}
.card:hover{ transform:translateY(-3px); border-color:var(--hazard-line); background:var(--steel-2); box-shadow:none; }
.card-img{ background:var(--steel-2); }
.card-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(8,9,10,.55));
}
.card-link{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; font-weight:700;
  letter-spacing:.16em; color:var(--hazard);
}
.dark .card{ background:var(--steel); border-color:var(--line-soft); }

/* ══ BEFORE / AFTER ═══════════════════════════════════════════════════════ */
.ba{ gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.ba figure{ background:var(--steel-2); border-radius:0; }
.ba figcaption{
  background:rgba(8,9,10,.86); color:var(--chalk); border-radius:var(--r-sm);
  font-family:'JetBrains Mono',monospace; font-size:.58rem; letter-spacing:.18em; font-weight:500;
  border:1px solid var(--line);
}
.ba figure:last-child figcaption{ background:var(--hazard); color:#0A0A00; border-color:var(--hazard); }

/* ══ TILES ════════════════════════════════════════════════════════════════ */
.tile{ border-radius:var(--r-lg); background:var(--steel-2); border:1px solid var(--line-soft); }
.tile figcaption{
  background:linear-gradient(transparent,rgba(8,9,10,.94));
  font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.08em; font-weight:500;
  color:var(--chalk);
}

/* ══ BANDS ════════════════════════════════════════════════════════════════ */
.dark{ background:var(--steel); }
.dark::before{
  background:
    radial-gradient(150px 80px at 10% 100%, rgba(255,212,0,.14), transparent 70%),
    radial-gradient(200px 96px at 38% 106%, rgba(255,212,0,.10), transparent 70%),
    radial-gradient(170px 86px at 68% 102%, rgba(255,212,0,.12), transparent 70%),
    radial-gradient(220px 100px at 92% 104%, rgba(255,212,0,.08), transparent 70%);
}
.dark p,.dark .lede{ color:var(--ash); }
.dark .eyebrow{ color:var(--hazard); }
.band-mint{ background:var(--steel); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.band-mint .card,.band-mint .panel{ background:var(--steel-2); border-color:var(--line-soft); }
.band-mint .pill,.band-mint .area{ background:transparent; border-color:var(--line); }
.band-mint .callout{ background:var(--steel-2); }
.band-mint .field input,.band-mint .field textarea,.band-mint .field select{ background:var(--void); }
.band-mint .prose blockquote{ color:var(--chalk); }

/* ══ SPLIT / TICKS ════════════════════════════════════════════════════════ */
.split-media{ border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:none; }
.ticks li{ color:var(--ash); padding-left:26px; }
.ticks li::before{ background:var(--hazard); border-radius:0; width:8px; height:8px; top:.55em; }
.ticks li strong{ color:var(--chalk); }

/* ══ PANELS / FORMS ═══════════════════════════════════════════════════════ */
.panel{ background:var(--steel); border:1px solid var(--line-soft); border-radius:var(--r-lg); }
.field label{ font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.16em; color:var(--ash-2); }
.field input,.field textarea,.field select{
  background:var(--void); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--chalk);
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--hazard); box-shadow:0 0 0 3px var(--hazard-dim); background:var(--void);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ash-2); }
.drop{ background:var(--void); border:1px dashed var(--line); border-radius:var(--r); color:var(--ash-2); }
.drop:hover,.drop.over{ border-color:var(--hazard); color:var(--hazard); background:var(--hazard-dim); }
.drop b{ color:var(--chalk); }
.filechip{ background:var(--steel-2); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--ash); font-family:'JetBrains Mono',monospace; font-size:.66rem; }
.hint{ color:var(--ash-2); }
.hint a{ color:var(--hazard); }

/* ══ AREAS / FILTER CHIPS ═════════════════════════════════════════════════ */
.area{
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ash); font-family:'JetBrains Mono',monospace; font-size:.66rem;
  letter-spacing:.12em; padding:9px 14px; font-weight:500;
}
.area.hq{ background:var(--hazard); border-color:var(--hazard); color:#0A0A00; font-weight:700; }
#blogFilter .area:hover:not(.hq){ border-color:var(--chalk); color:var(--chalk); }

/* ══ BLOG ═════════════════════════════════════════════════════════════════ */
.post-meta .tag{
  background:var(--hazard); color:#0A0A00; border-radius:var(--r-sm);
  font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.14em; font-weight:700;
}
.post-meta{ color:var(--ash-2); font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.05em; }
.post-hero{ border-radius:var(--r-lg); border:1px solid var(--line); box-shadow:none; }
.prose h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
.prose p,.prose li{ color:var(--ash); }
.prose blockquote{
  border-left:2px solid var(--hazard); color:var(--chalk);
  font-family:'Barlow',sans-serif; font-weight:500;
}
.prose a{ color:var(--hazard); border-bottom-color:var(--hazard-line); }
.callout{
  background:var(--steel); border:1px solid var(--line-soft); border-left:2px solid var(--hazard);
  border-radius:var(--r);
}
.callout b{ color:var(--hazard); font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.16em; }
.prose figure img{ border-radius:var(--r-lg); border:1px solid var(--line); }

/* ══ PORTAL ═══════════════════════════════════════════════════════════════ */
.portal-tabs a{
  background:var(--steel); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ash); font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.14em;
}
.portal-tabs a.on{ background:var(--hazard); border-color:var(--hazard); color:#0A0A00; }
.portal-tabs a:hover:not(.on){ border-color:var(--chalk); color:var(--chalk); }
.portal-body{ background:var(--steel); border:1px solid var(--line-soft); border-radius:var(--r-lg); }
.portal-lockup{ width:230px; }
.err{ background:var(--ember-dim); border:1px solid rgba(255,59,0,.4); color:#FF9B7A; border-radius:var(--r-sm); }

/* ══ FOOTER ═══════════════════════════════════════════════════════════════ */
footer{ background:#050607; border-top:1px solid var(--line-soft); }
.foot-col h4{
  font-family:'JetBrains Mono',monospace; color:var(--hazard);
  font-size:.64rem; letter-spacing:.2em; font-weight:500;
}
.foot-col a,.foot-col p{ color:var(--ash-2); }
.foot-col a:hover{ color:var(--hazard); }
.foot-bar{ border-top:1px solid var(--line-soft); color:var(--ash-2); font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.06em; }
footer .lockup{ opacity:1; }

/* ══ MOBILE DOCK ══════════════════════════════════════════════════════════ */
.dock{ background:rgba(8,9,10,.96); border-top:1px solid var(--line); padding:8px; gap:8px; }
.dock a{ border-radius:var(--r-sm); font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.12em; font-weight:700; }
.dock .d-call{ background:var(--hazard); color:#0A0A00; }
.dock .d-text{ background:transparent; color:var(--chalk); border:1px solid var(--line); }

@media (max-width:900px){
  .navlinks{ background:var(--void); border-bottom:1px solid var(--line); }
  .brand-lockup{ height:46px; }
  body.scrolled .brand-lockup{ height:38px; }
  :root{ --hdr:78px; --hdr-tight:64px; }
}

/* ══ SIGNATURE: caution striping ══════════════════════════════════════════
   Hazard tape as a structural divider. Applied to band edges and the footer
   so it appears automatically without touching the shared templates. */
.band-mint{ position:relative; }
.band-mint::before,
footer::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  /* A hairline that catches light at the left and falls away, the way an edge
     of machined steel does. Replaces the hazard tape, which was a costume
     rather than a detail — decoration borrowed from the trade instead of
     anything the work actually looks like. */
  background:linear-gradient(90deg,
    var(--hazard) 0,
    color-mix(in srgb, var(--hazard) 52%, transparent) 18%,
    color-mix(in srgb, var(--hazard) 16%, transparent) 52%,
    transparent 88%);
}
/* the faintest bloom under the line, so the edge reads as lit, not drawn */
.band-mint::after,
footer::after{
  content:''; position:absolute; top:0; left:0; right:0; height:120px; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--hazard) 5%, transparent), transparent 78%);
}
footer{ position:relative; }

/* ══ IMAGE TREATMENT ══════════════════════════════════════════════════════
   Sit the photography into the dark ground, then let it come up to full
   colour on hover. The proof stays legible; the page stays cohesive. */
.card-img img,
.tile img{
  filter:saturate(.86) contrast(1.06) brightness(.94);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), filter .35s;
}
.card:hover .card-img img,
.tile:hover img{ filter:saturate(1.04) contrast(1.02) brightness(1); }
.hero-media img,.split-media img,.post-hero img{ filter:saturate(.94) contrast(1.04); }
.ba img{ filter:saturate(.9) contrast(1.05) brightness(.96); }

/* ══ ENTRANCE ═════════════════════════════════════════════════════════════
   The headline wipes in like a blast pass across the surface. */
@keyframes bmWipe{
  from{ clip-path:inset(0 100% 0 0); opacity:.2 }
  to  { clip-path:inset(0 0 0 0);    opacity:1 }
}
@keyframes bmRise{
  from{ opacity:0; transform:translateY(14px) }
  to  { opacity:1; transform:none }
}
.hero h1{ animation:bmWipe .78s cubic-bezier(.2,.9,.2,1) both; }
.hero h1 em{ animation:bmWipe .78s cubic-bezier(.2,.9,.2,1) .16s both; }
.hero .eyebrow{ animation:bmRise .5s ease-out both; }
.hero .lede{ animation:bmRise .6s ease-out .28s both; }
.hero-pills{ animation:bmRise .6s ease-out .38s both; }
.hero-cta{ animation:bmRise .6s ease-out .48s both; }
.hero-note{ animation:bmRise .6s ease-out .56s both; }
.hero-media{ animation:bmRise .8s cubic-bezier(.2,.9,.2,1) .2s both; }
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero h1 em,.hero .eyebrow,.hero .lede,
  .hero-pills,.hero-cta,.hero-note,.hero-media{ animation:none; }
}

/* ══ RHYTHM ═══════════════════════════════════════════════════════════════ */
/* A section continuing straight out of a hero shares its ground, so it does
   not need the full section rhythm — but zero left the eyebrow crowded
   against the hero copy. Half the rhythm reads as one block with air. */
.hero + section{ padding-top:clamp(30px,3.4vw,52px); }
.stats{ margin-top:clamp(28px,3vw,44px); }
section{ padding:clamp(64px,6.5vw,104px) 0; }

/* keep the huge display type from crowding its own descenders */
h1,h2{ padding-bottom:.06em; }

/* text-only heroes (blog, gallery, services index) sit tighter to their content */
.hero:not(:has(.hero-media)){ padding-bottom:clamp(24px,2.6vw,40px); }
.hero:not(:has(.hero-media)) .lede{ max-width:56ch; }

/* the blog filter rail reads as a control strip, not decoration */
#blogFilter{ padding-bottom:22px; border-bottom:1px solid var(--line-soft); margin-bottom:30px; }

/* ══ MOBILE ═══════════════════════════════════════════════════════════════ */
@media (max-width:620px){
  h1{ font-size:clamp(2.5rem,10.5vw,3.6rem); }
  h2{ font-size:clamp(1.75rem,7.5vw,2.4rem); }
  .hero{ padding:26px 0 34px; }
  .hero .lede{ font-size:1rem; line-height:1.62; }
  .eyebrow{ font-size:.6rem; letter-spacing:.18em; margin-bottom:12px; }
  .pill{ font-size:.58rem; padding:6px 10px; letter-spacing:.1em; }
  .hero-pills{ gap:6px; margin:16px 0 20px; }
  .btn-lg{ padding:15px 22px; font-size:.72rem; }
  .stat{ padding:22px 14px; }
  .rushbar{ font-size:.6rem; letter-spacing:.12em; }
  .navlinks a{ font-size:.78rem; letter-spacing:.1em; }
  /* the caution stripe is thinner on small screens so it reads as trim */
  .band-mint::after, footer::after{ height:70px; }
}

/* ══ LEADING AT SMALL SIZES ═══════════════════════════════════════════════
   Anton is a display face; it needs air the moment a heading wraps. */
.card h3{ line-height:1.16; letter-spacing:.006em; margin-bottom:10px; }
.prose h2{ line-height:1.0; letter-spacing:-.004em; }
.prose h3{ line-height:1.16; letter-spacing:.006em; }
.portal-body h2{ line-height:1.06; }
.stat b{ line-height:1; }
.hero-tag,.ba figcaption,.pill,.area{ line-height:1.4; }

/* ══ PANEL DEPTH ══════════════════════════════════════════════════════════
   Cards were only a few levels off the ground, so they read as flat regions
   rather than objects. Three things lift them: a lighter face, a hairline of
   light caught on the top edge, and a real ambient shadow underneath. Applied
   in the base theme so every dark variant inherits it. */
.card,
.panel,
.portal-body{
  background:var(--steel-2);
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 26px rgba(0,0,0,.45),
    0 2px 6px rgba(0,0,0,.34);
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--hazard-line);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 20px 44px rgba(0,0,0,.55),
    0 5px 12px rgba(0,0,0,.40);
}
/* on the darker contrast bands the face steps up again so it still separates */
.dark .card,
.dark .panel,
.band-mint .card,
.band-mint .panel{ background:var(--steel-3); }

/* gallery tiles get the lift without the lighter face — the photo IS the face */
.tile{
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.tile:hover{
  transform:translateY(-3px);
  border-color:var(--hazard-line);
  box-shadow:0 18px 38px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.36);
}

/* before/after pairs and hero media sit on the same plane as the cards */
.ba,
.hero-media,
.split-media,
.post-hero{
  box-shadow:0 12px 26px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30);
}


/* ══ WORK GALLERY ═════════════════════════════════════════════════════════ */
.plate{
  border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.30);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.plate:hover{
  transform:translateY(-3px); border-color:var(--hazard-line);
  box-shadow:0 18px 38px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.36);
}
.plate img{ filter:saturate(.9) contrast(1.05) brightness(.94); }
.plate:hover img{ filter:saturate(1.04) contrast(1.02) brightness(1); }
.plate figcaption{
  font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.05em;
  font-weight:500; color:var(--chalk);
  background:linear-gradient(transparent,rgba(8,7,6,.92));
}