/* ==========================================================================
   ParoJunks - Junk Removal & Haul-Away, Colorado
   "Working Yard" - industrial utility editorial, hazard yellow on true black
   --------------------------------------------------------------------------
   The whole visual language is borrowed from the equipment this trade
   actually touches: hazard tape, stencilled crate lettering, weigh-ticket
   manifests, load gauges. That vernacular is the reason the site can be
   loud without being a template - the loudness is quoting something real.
   ========================================================================== */

@import url("fonts.css");

/* ---------------------------------- Tokens ---------------------------------- */
:root{
  /* Neutrals run cold and slightly blue - asphalt, not warm brown - so the
     hazard yellow reads as a signal against them instead of blending into a
     sepia scheme. */
  --void:      #0C0C0D;
  --char:      #141417;
  --steel:     #1D1E22;
  --ash:       #2B2C31;
  --smoke:     #6E7078;
  --bone:      #F1EFE9;
  --bone-deep: #E4E1D8;
  --paper:     #FBFAF7;

  --hazard:      #FFC61A;
  --hazard-lift: #FFD95C;
  /* Yellow can never be text on a light background (it fails contrast at any
     size), so every light-surface use of the accent swaps to this darkened
     ochre, which clears 4.5:1 on both --bone and --paper. */
  --hazard-ink:  #7A5A03;
  --pine:        #2F4A35;
  --pine-wash:   #E3EAE2;

  --on-void-70: rgba(241,239,233,0.70);
  --on-void-50: rgba(241,239,233,0.50);
  --ink-70: rgba(12,12,13,0.70);
  --ink-50: rgba(12,12,13,0.52);
  --line-dark:  rgba(241,239,233,0.14);
  --line-light: rgba(12,12,13,0.14);

  /* Big Shoulders comes out of Chicago civic signage: hyper-condensed, tall,
     built to be read fast and from a distance. Its stencil cut is the same
     skeleton with bridges cut through, so the accent face is a variation of
     the display face rather than a second unrelated font. */
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-stencil: "Big Shoulders Stencil Display", "Big Shoulders Display", Impact, sans-serif;
  --font-body:    "Schibsted Grotesk", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  --container: 1320px;
  --pad: clamp(1.15rem, 4vw, 3.5rem);
  --ease:      cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --header-h: 118px;
}

/* ---------------------------------- Reset ---------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.loading{ overflow: hidden; }

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select{ font: inherit; color: inherit; }
h1,h2,h3,h4,h5,p,figure{ margin: 0; }
svg{ display: block; }

::selection{ background: var(--hazard); color: var(--void); }

:focus-visible{
  outline: 3px solid var(--hazard);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-bone :focus-visible, .on-paper :focus-visible,
.on-hazard :focus-visible{ outline-color: var(--void); }

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
  width: 100%;
}
/* The header is sticky, so in-page anchors have to clear it or the section
   heading lands underneath the nav bar. */
:target, [id]{ scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--hazard); color: var(--void);
  padding: .8rem 1.2rem; font-weight: 700;
}
.skip-link:focus{ left: 0; }

/* ---------------------------------- Type ---------------------------------- */
/* Two cuts of one signage family carry the whole site. The solid cut sets
   every heading; the stencil cut is reserved for the single accent word in a
   headline, so the accent reads as the same lettering interrupted rather than
   a decorative font dropped in beside it. */
.h-display{
  font-family: var(--font-display);
  /* No width axis on this family and none needed - it is already narrow by
     construction, so the negative tracking Archivo wanted would close it up
     past legibility. Tracking sits at zero and the word gap does the work. */
  font-variation-settings: "wght" 800;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
  /* This face is narrow enough that adjacent words fuse into one long
     string at display sizes. The word gap has to be opened well past normal
     to keep a headline parsable at a glance. */
  word-spacing: .05em;
  text-wrap: balance;
}
/* Leading opens up as the type gets smaller: a 7rem headline can sit at .9
   and look tight and deliberate, while a 1.4rem card title at the same value
   would look broken. */
/* Sizes run roughly 20% larger than the previous grotesque set them: a
   condensed face covers far less width per point, so matching optical weight
   means matching measure, not matching point size. */
.h1{ font-size: clamp(3.4rem, 2.1rem + 6.9vw, 8.4rem);  line-height: .9; }
.h2{ font-size: clamp(2.5rem, 1.7rem + 4vw, 5.2rem);    line-height: .93; }
.h3{ font-size: clamp(1.78rem, 1.5rem + 1.45vw, 2.6rem); line-height: 1.0; }
.h4{ font-size: clamp(1.3rem, 1.18rem + .5vw, 1.62rem); line-height: 1.12; }

/* The one accent that carries the brand: a yellow word inside a black
   headline, set as a painted block rather than coloured text so it reads at
   a glance the way the trailer lettering does. */
/* This family carries a tall em box, so a painted background drawn on the
   default line box floats well clear of the caps. Shrinking the mark's own
   line-height pulls the paint back onto the letters. Every mark is a single
   word, so inline-block costs no wrapping behaviour. */
.hl-mark{
  display: inline-block;
  color: var(--void);
  background: var(--hazard);
  line-height: .8;
  padding: .1em .14em .04em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.on-bone .hl-mark, .on-paper .hl-mark{ background: var(--void); color: var(--hazard); }
.hl-out{ color: var(--hazard); font-family: var(--font-stencil); }
.on-bone .hl-out, .on-paper .hl-out{ color: var(--hazard-ink); }

.eyebrow{
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  color: var(--hazard);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0;
}
.eyebrow::before{
  content: "";
  width: 26px; height: 3px;
  background: var(--hazard);
  display: inline-block;
  flex: none;
}
.on-bone .eyebrow, .on-paper .eyebrow{ color: var(--hazard-ink); }
.on-bone .eyebrow::before, .on-paper .eyebrow::before{ background: var(--hazard-ink); }
.on-hazard .eyebrow{ color: var(--void); }
.on-hazard .eyebrow::before{ background: var(--void); }

.lede{
  font-size: clamp(1.04rem, 1rem + .38vw, 1.24rem);
  line-height: 1.68;
  color: var(--on-void-70);
  max-width: 52ch;
  text-wrap: pretty;
}
.on-bone .lede, .on-paper .lede{ color: var(--ink-70); }
.on-hazard .lede{ color: rgba(12,12,13,.78); }

/* ------------------------- Vertical rhythm -------------------------
   One place that governs the gaps between an eyebrow, its heading, the
   paragraph under it, and the buttons after. These sibling selectors carry
   more specificity than the .mt-2 utility in the markup, so the rhythm holds
   even where a page reaches for the utility class out of habit. */
.eyebrow + .h1, .eyebrow + .h2, .eyebrow + .h3,
.eyebrow + .quote-block{ margin-top: 1.35rem; }
.h1 + .lede, .h2 + .lede, .h3 + .lede{ margin-top: 1.6rem; }
/* Consecutive paragraphs are one thought continuing, not a new section. */
.lede + .lede{ margin-top: 1.15rem; }
.lede + .btn-row, .tick-list + .btn-row,
.stat-row + .btn-row, .quote-block + .btn-row{ margin-top: 2.4rem; }
.quote-block + .lede{ margin-top: 1.9rem; }
.lede + .tick-list, .lede + .stat-row{ margin-top: 2rem; }

.mono-label{
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .7rem;
  color: var(--on-void-50);
}
.on-bone .mono-label, .on-paper .mono-label{ color: var(--ink-50); }

/* ---------------------------------- Surfaces ---------------------------------- */
.section{ padding: clamp(4.5rem, 9vw, 9rem) 0; position: relative; }
.section-tight{ padding: clamp(3rem, 5vw, 4.5rem) 0; position: relative; }

.on-void { background: var(--void);  color: var(--bone); }
.on-char { background: var(--char);  color: var(--bone); }
.on-steel{ background: var(--steel); color: var(--bone); }
.on-bone { background: var(--bone);  color: var(--void); }
.on-paper{ background: var(--paper); color: var(--void); }
.on-hazard{ background: var(--hazard); color: var(--void); }

.section-head{
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

@media (max-width: 860px){
  .section-head{ grid-template-columns: 1fr; align-items: start; }
}

/* -------------------------- Hazard tape (signature device) --------------------------
   A 14px diagonal-striped band. Used only as a hard edge between two
   surfaces, never as decoration inside content - overusing it would turn the
   whole page into a construction-site clip-art page. */
.hazard-tape{
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--hazard) 0 14px,
    var(--void)   14px 28px
  );
  position: relative;
  z-index: 2;
}
.hazard-tape.is-thin{ height: 8px; background-size: auto; }
.hazard-tape.on-light{
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, var(--bone-deep) 14px 28px);
}

/* ---------------------------------- Buttons ---------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--font-body);
  font-variation-settings: "wght" 800;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .92rem;
  padding: 1.05rem 1.7rem;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .3s var(--ease);
  will-change: transform;
}
.btn-sm{ padding: .7rem 1.1rem; font-size: .8rem; }
.btn-hazard{ background: var(--hazard); color: var(--void); }
.btn-hazard:hover{ background: var(--hazard-lift); }
.btn-solid{ background: var(--void); color: var(--hazard); }
.btn-solid:hover{ background: var(--steel); }
.btn-outline{ border-color: currentColor; color: inherit; }
.btn-outline:hover{ background: var(--hazard); border-color: var(--hazard); color: var(--void); }
.on-bone .btn-outline:hover, .on-paper .btn-outline:hover{ background: var(--void); color: var(--hazard); border-color: var(--void); }
.btn-arrow{ transition: transform .3s var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(4px); }
.btn-block{ width: 100%; }

.btn-row{ display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* Text link with a yellow underline that grows from the left. */
.tlink{
  display: inline-block;
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  padding-bottom: 3px;
  position: relative;
}
.tlink::after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--hazard);
  transform: scaleX(.25); transform-origin: left;
  transition: transform .35s var(--ease);
}
.tlink:hover::after{ transform: scaleX(1); }
.on-bone .tlink::after, .on-paper .tlink::after{ background: var(--hazard-ink); }

/* ---------------------------------- Loader ---------------------------------- */
.loader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--void);
  display: grid; place-content: center; justify-items: center;
  gap: 1.1rem;
  transition: opacity .6s var(--ease), visibility .6s;
}
.loader.is-leaving{ opacity: 0; visibility: hidden; }
.loader-mark{
  font-family: var(--font-display);
  font-variation-settings: "wght" 900;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: .9;
  color: var(--bone);
  letter-spacing: -0.01em;
}
.loader-mark em{ font-style: normal; color: var(--hazard); }
.loader-bar{
  width: min(240px, 52vw); height: 6px;
  background: var(--ash);
  overflow: hidden;
}
.loader-bar span{
  display: block; height: 100%; width: 40%;
  background: var(--hazard);
  animation: loadSlide 1.1s var(--ease-soft) infinite;
}
@keyframes loadSlide{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(350%); }
}
.loader-tag{
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  text-transform: uppercase; letter-spacing: .2em;
  font-size: .68rem; color: var(--on-void-50);
}

/* ---------------------------------- Header ---------------------------------- */
.top-strip{
  background: var(--hazard);
  color: var(--void);
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .72rem;
}
.top-strip .container{
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 38px; padding-block: .35rem;
}
.strip-left{ display: flex; gap: 1.3rem; flex-wrap: wrap; align-items: center; }
.strip-left a{ display: inline-flex; align-items: center; gap: .4em; }
.strip-left a:hover{ text-decoration: underline; text-underline-offset: 3px; }
.strip-right{ display: flex; align-items: center; gap: .5em; opacity: .82; }
@media (max-width: 720px){ .strip-right{ display: none; } }
/* The address is one unbreakable token, so on the narrowest phones it is the
   thing that would force a horizontal scrollbar. The phone number is the
   higher-intent tap anyway, and the address still appears in the footer and
   on the contact page. */
@media (max-width: 560px){ .strip-left a[href^="mailto"]{ display: none; } }

.site-header{
  position: sticky; top: 0; z-index: 500;
  background: rgba(12,12,13,.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled{ background: rgba(12,12,13,.97); }
.site-header .container{
  display: flex; align-items: center; gap: 1.2rem;
  min-height: 76px;
}

/* Wordmark is set in live type, not an image: it stays crisp at any size and
   inherits the same variable-font settings as the headings. */
.logo{
  display: inline-flex; align-items: center; gap: .6rem;
  flex: none; margin-right: auto;
}
.logo-mark{ width: 38px; height: 38px; flex: none; }
.logo-type{
  font-family: var(--font-display);
  font-variation-settings: "wght" 900;
  text-transform: uppercase;
  font-size: 1.5rem; line-height: .9;
  letter-spacing: -0.01em;
  color: var(--bone);
}
.logo-type em{ font-style: normal; color: var(--hazard); }
.logo-sub{
  display: block;
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  font-size: .56rem; letter-spacing: .17em;
  color: var(--on-void-50);
  margin-top: 3px;
}

.main-nav{ display: flex; gap: .2rem; align-items: center; }
.main-nav a{
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .76rem;
  padding: .55rem .72rem;
  color: var(--on-void-70);
  position: relative;
  /* Spanish labels run longer than the English ones; without this a single
     item wraps to two lines and drags the whole header taller. */
  white-space: nowrap;
  transition: color .25s var(--ease);
}
.main-nav a:hover{ color: var(--bone); }
.main-nav a::after{
  content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .18rem;
  height: 2px; background: var(--hazard);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.main-nav a:hover::after, .main-nav a.is-active::after{ transform: scaleX(1); }
.main-nav a.is-active{ color: var(--bone); }
@media (max-width: 1180px){ .main-nav{ display: none; } }

.header-cta{ display: flex; align-items: center; gap: .55rem; flex: none; }

/* EN / ES switch */
.lang-switch{
  display: inline-flex;
  border: 1.5px solid var(--line-dark);
  overflow: hidden;
  flex: none;
}
.lang-switch button{
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .68rem;
  padding: .42rem .6rem;
  color: var(--on-void-50);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.lang-switch button:hover{ color: var(--bone); }
.lang-switch button.is-on{ background: var(--hazard); color: var(--void); }

.nav-toggle{
  display: none;
  width: 46px; height: 46px;
  border: 1.5px solid var(--line-dark);
  position: relative;
  flex: none;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after{
  content: ""; position: absolute; left: 50%; height: 2px; width: 20px;
  background: var(--bone); transform: translateX(-50%);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle::before{ top: 16px; }
.nav-toggle span{ top: 22px; }
.nav-toggle::after{ top: 28px; }
.nav-toggle.is-open::before{ transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-toggle.is-open span{ opacity: 0; }
.nav-toggle.is-open::after{ transform: translateX(-50%) translateY(-6px) rotate(-45deg); }
@media (max-width: 1180px){ .nav-toggle{ display: block; } }
@media (max-width: 560px){ .header-cta .btn{ display: none; } }

.mobile-nav{
  position: fixed; inset: 0; z-index: 480;
  background: var(--void);
  padding: calc(var(--header-h) + 1.5rem) var(--pad) 2rem;
  display: flex; flex-direction: column; gap: .15rem;
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
  overflow-y: auto;
}
.mobile-nav.is-open{ transform: translateY(0); }
.mobile-nav a{
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 8vw, 2.5rem);
  line-height: 1.16;
  padding: .28rem 0;
  border-bottom: 1px solid var(--line-dark);
  color: var(--bone);
}
.mobile-nav a.is-active{ color: var(--hazard); }
.mn-foot{ margin-top: 2rem; display: grid; gap: .7rem; }

/* ---------------------------------- Hero ---------------------------------- */
.hero{
  background: var(--void);
  position: relative;
  overflow: hidden;
}
.hero-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6.5rem);
}
@media (max-width: 940px){
  .hero-grid{ grid-template-columns: 1fr; padding-block: 2.5rem 3rem; }
}

/* No accent bar down the side: the pulsing dot already carries the "we are
   working right now" signal, and a second yellow marker on the same 200px
   chip was decoration competing with it. */
.hero-flag{
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--steel);
  padding: .5rem .95rem;
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; letter-spacing: .13em;
  font-size: .7rem; color: var(--bone);
  margin-bottom: 1.6rem;
}
.dot-live{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hazard); flex: none;
  box-shadow: 0 0 0 0 rgba(255,198,26,.7);
  animation: pulse 2.4s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,198,26,.6); }
  70%{ box-shadow: 0 0 0 10px rgba(255,198,26,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,198,26,0); }
}

.hero-title{ margin-bottom: 1.5rem; }
.hero-lede{ max-width: 46ch; }

.hero-checks{
  display: flex; flex-wrap: wrap; gap: .75rem 1.6rem;
  margin-top: 2rem;
}
.hero-checks li{
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .93rem; color: var(--on-void-70);
}
.hero-checks svg{ width: 17px; height: 17px; color: var(--hazard); flex: none; }

/* Load ticket - the little spec card that anchors the hero, styled after a
   dump-ticket carbon copy. */
.ticket{
  margin-top: 2.4rem;
  background: var(--char);
  border: 1px solid var(--line-dark);
  border-top: 4px solid var(--hazard);
  padding: 1.25rem 1.4rem;
  max-width: 430px;
}
.ticket-row{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .42rem 0;
  border-bottom: 1px dashed var(--line-dark);
  font-size: .9rem;
}
.ticket-row:last-child{ border-bottom: 0; }
.ticket-row span{
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  text-transform: uppercase; letter-spacing: .13em;
  font-size: .66rem; color: var(--on-void-50);
  flex: none;
}
.ticket-row b{
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; font-size: .92rem;
  text-align: right;
}
.ticket-row b.hot{ color: var(--hazard); }

/* ------------------- Before / after reveal card (signature) -------------------
   The two frames in each pair were shot from different standpoints (they are
   Angel's own phone photos, not a tripod pair), so a wipe-slider would look
   broken. A cross-fade with an explicit BEFORE/AFTER control is the honest
   presentation of what these images actually are. */
.ba{
  position: relative;
  background: var(--char);
  border: 1px solid var(--line-dark);
  overflow: hidden;
}
.ba-stage{
  position: relative;
  aspect-ratio: 474 / 960;
  overflow: hidden;
  background: var(--steel);
}
.ba-stage.is-wide{ aspect-ratio: 4 / 5; }
/* The source frames are tall phone portraits; left at their native ratio in
   the hero they push the whole first screen past 1300px. Cropping to 3:4
   keeps the ground - where the junk actually is - and lets the hero balance
   against the copy column beside it. */
.hero .ba-stage{ aspect-ratio: 3 / 4; }
.ba-stage img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transition: opacity .55s var(--ease), transform 6s linear;
}
.ba-stage img.ba-after{ opacity: 0; }
.ba.show-after .ba-stage img.ba-before{ opacity: 0; }
.ba.show-after .ba-stage img.ba-after{ opacity: 1; }

.ba-stamp{
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  font-family: var(--font-body);
  font-variation-settings: "wght" 900;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .74rem;
  padding: .4rem .8rem;
  /* The whole chip inverts black-to-yellow when the state flips, which is a
     far louder signal than an edge bar could be, so the bar came off. */
  background: var(--void); color: var(--bone);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.ba.show-after .ba-stamp{ background: var(--hazard); color: var(--void); }

.ba-toggle{
  display: flex;
  border-top: 1px solid var(--line-dark);
}
.ba-toggle button{
  flex: 1;
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem;
  padding: .85rem .5rem;
  color: var(--on-void-50);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.ba-toggle button + button{ border-left: 1px solid var(--line-dark); }
.ba-toggle button:hover{ color: var(--bone); }
.ba-toggle button.is-on{ background: var(--hazard); color: var(--void); }

.ba-cap{
  padding: 1rem 1.2rem 1.15rem;
  border-top: 1px solid var(--line-dark);
}
.ba-cap b{
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  font-size: 1.28rem; line-height: 1.1; letter-spacing: .015em;
  margin-bottom: .38rem;
}
.ba-cap p{ font-size: .9rem; color: var(--on-void-70); line-height: 1.58; text-wrap: pretty; }

.on-bone .ba, .on-paper .ba{ background: var(--paper); border-color: var(--line-light); }
.on-bone .ba-toggle, .on-paper .ba-toggle,
.on-bone .ba-cap, .on-paper .ba-cap{ border-color: var(--line-light); }
.on-bone .ba-toggle button, .on-paper .ba-toggle button{ color: var(--ink-50); }
.on-bone .ba-toggle button:hover, .on-paper .ba-toggle button:hover{ color: var(--void); }
.on-bone .ba-toggle button + button, .on-paper .ba-toggle button + button{ border-left-color: var(--line-light); }
.on-bone .ba-cap p, .on-paper .ba-cap p{ color: var(--ink-70); }

/* ---------------------------------- Marquee ---------------------------------- */
.marquee{
  background: var(--hazard);
  color: var(--void);
  padding: .85rem 0;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-track{
  display: inline-flex; align-items: center; gap: 2.4rem;
  animation: slide 34s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-track span{
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(.95rem, 2vw, 1.25rem);
  display: inline-flex; align-items: center; gap: 2.4rem;
}
.marquee-track span::after{
  content: ""; width: 9px; height: 9px; background: var(--void);
  transform: rotate(45deg); display: inline-block; flex: none;
}
@keyframes slide{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ------------------------- Photo strip (the job reel) -------------------------
   A continuous band of real job frames. It exists because the proof on this
   site is photographic: nine jobs read at a glance here in the space one hero
   image would take, and the loop makes the operation feel busy without any
   claim the copy would have to back up. */
.photo-strip{
  overflow: hidden;
  background: var(--char);
  border-block: 1px solid var(--line-dark);
}
.photo-strip-track{
  display: flex;
  gap: 12px;
  padding: 12px;
  width: max-content;
  animation: reel 70s linear infinite;
  will-change: transform;
}
.photo-strip:hover .photo-strip-track{ animation-play-state: paused; }
.photo-strip figure{
  position: relative;
  flex: none;
  margin: 0;
  width: clamp(200px, 25vw, 330px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--steel);
}
.photo-strip img{ width: 100%; height: 100%; object-fit: cover; }
.photo-strip figcaption{
  position: absolute; left: 0; bottom: 0;
  background: var(--void); color: var(--bone);
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; letter-spacing: .13em;
  font-size: .58rem;
  padding: .34rem .62rem;
}
.photo-strip figcaption.is-after{ background: var(--hazard); color: var(--void); }
@keyframes reel{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* The global reduced-motion rule collapses animation-duration to ~0, which
   would park both reels at their end frame instead of stopping them. Kill the
   animation outright and hand the visitor a scrollable band instead. */
@media (prefers-reduced-motion: reduce){
  .marquee-track, .photo-strip-track{ animation: none !important; transform: none !important; }
  .marquee, .photo-strip{ overflow-x: auto; }
}

/* A photo with a caption running under it, used where an image needs to
   explain itself rather than just decorate. */
.shot-note{ margin: 2.5rem 0 0; }
.shot-note img{ width: 100%; }
.shot-note figcaption{
  font-size: .87rem;
  line-height: 1.55;
  color: var(--on-void-50);
  border-left: 2px solid var(--hazard);
  padding: .1rem 0 .1rem .8rem;
  margin-top: .9rem;
  max-width: 46ch;
  text-wrap: pretty;
}
.on-bone .shot-note figcaption, .on-paper .shot-note figcaption{
  color: var(--ink-50); border-left-color: var(--hazard-ink);
}

/* -------------------- Manifest list (numbered index rows) -------------------- */
.manifest{ border-top: 1px solid var(--line-light); }
.on-void .manifest, .on-char .manifest, .on-steel .manifest{ border-top-color: var(--line-dark); }

.manifest-row{
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr) 6rem 2.5rem;
  gap: 1.4rem;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line-light);
  position: relative;
  transition: color .3s var(--ease);
}
.on-void .manifest-row, .on-char .manifest-row, .on-steel .manifest-row{ border-bottom-color: var(--line-dark); }
/* Hover is two transforms and nothing else. The row used to animate its own
   padding-left, which relaid out the whole five-column grid every frame; the
   text columns now slide while the thumbnail and arrow stay pinned, which
   also reads better than shoving the entire row sideways. */
.manifest-row::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 5px; background: var(--hazard);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
a.manifest-row:hover::before{ transform: scaleX(1); }
.manifest-num, .manifest-title, .manifest-desc{
  transition: transform .35s var(--ease);
}
a.manifest-row:hover .manifest-num,
a.manifest-row:hover .manifest-title,
a.manifest-row:hover .manifest-desc{ transform: translateX(1rem); }

.manifest-num{
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  font-size: .82rem; letter-spacing: .12em;
  color: var(--hazard-ink);
}
.on-void .manifest-num, .on-char .manifest-num, .on-steel .manifest-num{ color: var(--hazard); }
.manifest-title{
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  font-size: clamp(1.2rem, 2.4vw, 1.75rem);
  line-height: 1.06;
}
.manifest-desc{ font-size: .95rem; color: var(--ink-70); line-height: 1.6; text-wrap: pretty; }
.on-void .manifest-desc, .on-char .manifest-desc, .on-steel .manifest-desc{ color: var(--on-void-70); }
.manifest-thumb{
  width: 100%; aspect-ratio: 1; overflow: hidden;
  background: var(--ash);
}
.manifest-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.manifest-row:hover .manifest-thumb img{ transform: scale(1.07); }
.manifest-arrow{
  font-size: 1.5rem; text-align: right; line-height: 1;
  color: var(--hazard-ink);
  transition: transform .35s var(--ease);
}
.on-void .manifest-arrow, .on-char .manifest-arrow, .on-steel .manifest-arrow{ color: var(--hazard); }
a.manifest-row:hover .manifest-arrow{ transform: translate(4px,-4px); }

@media (max-width: 900px){
  .manifest-row{
    grid-template-columns: 3rem minmax(0,1fr) 4.5rem;
    gap: .9rem 1rem;
    padding: 1.15rem 0;
  }
  .manifest-desc{ grid-column: 2 / 3; }
  .manifest-thumb{ grid-column: 3 / 4; grid-row: 1 / 3; }
  .manifest-arrow{ display: none; }
}

/* ---------------------------------- Split feature ---------------------------------- */
.split{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.split.is-reverse .split-media{ order: -1; }
@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
  .split.is-reverse .split-media{ order: 0; }
}
.split-media{ position: relative; }
.split-media img{ width: 100%; object-fit: cover; }

/* An L-shaped corner bracket that sits behind the image and pokes out past
   its top-right corner - cheap depth without a drop shadow, which would read
   as generic. The two borders are one bracket, not an accent tab on a card;
   dropping either half leaves a stray line. */
.framed{ position: relative; }
.framed::before{
  content: ""; position: absolute;
  inset: -18px -18px auto auto;
  width: 62%; height: 62%;
  border-top: 4px solid var(--hazard);
  border-right: 4px solid var(--hazard);
  z-index: 0;
}
.framed img{ position: relative; z-index: 1; }

/* ---------------------------------- Cards ---------------------------------- */
.card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.15rem;
}
.card-grid.is-3{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

.card{
  background: var(--char);
  border: 1px solid var(--line-dark);
  padding: 1.7rem 1.5rem 1.8rem;
  position: relative;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
  min-width: 0;
}
.card:hover{ transform: translateY(-4px); border-color: rgba(255,198,26,.45); }
.on-bone .card, .on-paper .card{ background: var(--paper); border-color: var(--line-light); }
.on-bone .card:hover, .on-paper .card:hover{ border-color: var(--hazard-ink); }

.card-ico{
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--hazard); color: var(--void);
  margin-bottom: 1.15rem;
}
.card-ico svg{ width: 24px; height: 24px; }
.card h3{
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  word-spacing: .06em;
  font-size: 1.2rem; line-height: 1.08;
  margin-bottom: .72rem;
}
.card p{ font-size: .95rem; color: var(--on-void-70); line-height: 1.62; text-wrap: pretty; }
.on-bone .card p, .on-paper .card p{ color: var(--ink-70); }
.card ul{ margin-top: .9rem; display: grid; gap: .35rem; }
.card ul li{
  font-size: .9rem; color: var(--on-void-70);
  padding-left: 1.05rem; position: relative;
}
.on-bone .card ul li, .on-paper .card ul li{ color: var(--ink-70); }
.card ul li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; background: var(--hazard);
  transform: rotate(45deg);
}
.on-bone .card ul li::before, .on-paper .card ul li::before{ background: var(--hazard-ink); }

/* Diamond-bulleted feature list, used standalone outside a .card. */
.tick-list{ margin-top: 1.5rem; display: grid; gap: .65rem; }
.tick-list li{
  font-size: .97rem; line-height: 1.6; text-wrap: pretty;
  color: var(--on-void-70);
  padding-left: 1.2rem; position: relative;
}
.on-bone .tick-list li, .on-paper .tick-list li{ color: var(--ink-70); }
.tick-list li::before{
  content: ""; position: absolute; left: 0; top: .6em;
  width: 7px; height: 7px; background: var(--hazard); transform: rotate(45deg);
}
.on-bone .tick-list li::before, .on-paper .tick-list li::before{ background: var(--hazard-ink); }

/* ---------------------------------- Steps ---------------------------------- */
.steps{ display: grid; gap: 1px; background: var(--line-dark); }
.on-bone .steps, .on-paper .steps{ background: var(--line-light); }
@media (min-width: 780px){ .steps{ grid-template-columns: repeat(4, 1fr); } }

.step{
  background: var(--void);
  padding: 2rem 1.5rem 2.2rem;
  position: relative;
  min-width: 0;
}
.on-bone .step{ background: var(--bone); }
.on-paper .step{ background: var(--paper); }
.on-char .step{ background: var(--char); }
.step-num{
  font-family: var(--font-display);
  font-variation-settings: "wght" 900;
  font-size: 3.4rem; line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--hazard);
  margin-bottom: 1rem;
  display: block;
}
.step h3{
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  font-size: 1.15rem; line-height: 1.1; margin-bottom: .72rem; word-spacing: .06em;
}
.step p{ font-size: .93rem; color: var(--on-void-70); line-height: 1.62; text-wrap: pretty; }
.on-bone .step p, .on-paper .step p{ color: var(--ink-70); }

/* ------------------- Load meter (pricing signature device) -------------------
   Truck-bed fill is how this trade actually quotes, so the pricing page is
   built around a bed you can fill rather than a table of numbers. */
.loadmeter{
  background: var(--char);
  border: 1px solid var(--line-dark);
  padding: clamp(1.5rem, 4vw, 2.6rem);
}
.lm-bed{
  position: relative;
  height: clamp(150px, 26vw, 230px);
  background:
    repeating-linear-gradient(90deg, rgba(241,239,233,.05) 0 1px, transparent 1px 44px),
    var(--steel);
  border: 3px solid var(--ash);
  border-top-width: 0;
  overflow: hidden;
  display: flex; align-items: flex-end;
}
/* Height, not scaleY, on purpose: the fill is a 45-degree stripe pattern, and
   scaling it vertically would shear the stripes to a different angle as it
   animates. One element, four discrete steps, user-triggered. */
.lm-fill{
  width: 100%;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 16px, #E8B416 16px 32px);
  height: 25%;
  transition: height .55s var(--ease);
}
.lm-marks{
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}
.lm-marks i{ border-right: 1px dashed rgba(241,239,233,.18); }
.lm-marks i:last-child{ border-right: 0; }

.lm-scale{
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: .9rem; gap: .5rem;
}
.lm-scale button{
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; letter-spacing: .07em;
  font-size: .72rem;
  padding: .7rem .3rem;
  border: 1.5px solid var(--line-dark);
  color: var(--on-void-50);
  transition: all .25s var(--ease);
}
.lm-scale button:hover{ color: var(--bone); border-color: var(--smoke); }
.lm-scale button.is-on{ background: var(--hazard); color: var(--void); border-color: var(--hazard); }

.lm-read{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,150px), 1fr));
  gap: 1rem;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--line-dark);
}
.lm-read div span{
  display: block;
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  text-transform: uppercase; letter-spacing: .13em;
  font-size: .64rem; color: var(--on-void-50);
  margin-bottom: .3rem;
}
/* Three of the four readouts are full sentences. In condensed display caps
   they shout and overflow, so only the load size keeps the display voice and
   the rest drop to body type. */
.lm-read div b{
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .97rem;
  line-height: 1.4;
  color: var(--bone);
}
.lm-read div b.hot{
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.05;
  color: var(--hazard);
}

/* ---------------------------------- Stats ---------------------------------- */
.stat-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,180px), 1fr));
  gap: 1px;
  background: var(--line-dark);
  margin-top: 2.5rem;
}
.on-bone .stat-row, .on-paper .stat-row{ background: var(--line-light); }
.stat{
  background: var(--void);
  padding: 1.5rem 1.3rem;
  min-width: 0;
}
.on-bone .stat{ background: var(--bone); }
.on-paper .stat{ background: var(--paper); }
.on-char .stat{ background: var(--char); }
.stat b{
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "wght" 900;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  line-height: .95;
  color: var(--hazard);
  margin-bottom: .4rem;
}
.on-bone .stat b, .on-paper .stat b{ color: var(--hazard-ink); }
.stat span{ font-size: .87rem; color: var(--on-void-70); line-height: 1.4; display: block; }
.on-bone .stat span, .on-paper .stat span{ color: var(--ink-70); }

/* A stat row sitting in a split column gets roughly 190px per cell, which is
   not enough for a nine-letter word at the full figure size. Left alone,
   "0 SURPRISES" and "2 LANGUAGES" broke to a second line and pushed past
   their cell while "1 OWNER" stayed on one, so the three read as a ragged
   list instead of one rank. Scoped down until all three sit on a single
   line; the full-width rows on other pages keep the larger size. */
.split .stat-row .stat{ padding: 1.35rem .85rem; }
.split .stat-row .stat b{ font-size: clamp(1.4rem, 1.1rem + 1.25vw, 1.85rem); }
/* Backstop so no future label can breach its cell, whatever its length. */
.stat b{ overflow-wrap: anywhere; }

/* ---------------------------------- Quote ----------------------------------
   The left rule here is the blockquote convention, marking quoted speech, not
   an accent stripe on a content card. It appears only around Angel's own
   words, which is the one place on the site quoting someone. */
.quote-block{
  border-left: 6px solid var(--hazard);
  padding: .4rem 0 .4rem clamp(1.3rem, 4vw, 2.8rem);
  max-width: 60ch;
}
.quote-block p{
  font-family: var(--font-display);
  font-variation-settings: "wght" 600;
  font-size: clamp(1.3rem, 1rem + 1.8vw, 2.15rem);
  line-height: 1.28;
  text-wrap: pretty;
  text-transform: none;
  letter-spacing: -0.01em;
}
.quote-by{
  margin-top: 1.4rem;
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .74rem; color: var(--hazard);
}
.on-bone .quote-by, .on-paper .quote-by{ color: var(--hazard-ink); }

/* ---------------------------------- Gallery ---------------------------------- */
.ba-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 1.15rem;
}

/* ---------------------------------- FAQ ---------------------------------- */
.faq{ border-top: 1px solid var(--line-light); max-width: 900px; }
.on-void .faq, .on-char .faq{ border-top-color: var(--line-dark); }
.faq-item{ border-bottom: 1px solid var(--line-light); }
.on-void .faq-item, .on-char .faq-item{ border-bottom-color: var(--line-dark); }
.faq-q{
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0;
  font-family: var(--font-display);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  font-size: clamp(1rem, 1.9vw, 1.24rem);
  line-height: 1.14;
  transition: color .25s var(--ease);
}
.faq-q:hover{ color: var(--hazard-ink); }
.on-void .faq-q:hover, .on-char .faq-q:hover{ color: var(--hazard); }
.faq-ico{
  width: 26px; height: 26px; flex: none; position: relative;
}
.faq-ico::before, .faq-ico::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--hazard-ink);
  transform: translate(-50%,-50%);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.on-void .faq-ico::before, .on-void .faq-ico::after,
.on-char .faq-ico::before, .on-char .faq-ico::after{ background: var(--hazard); }
.faq-ico::before{ width: 18px; height: 2.5px; }
.faq-ico::after{ width: 2.5px; height: 18px; }
.faq-item.is-open .faq-ico::after{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq-a{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.faq-item.is-open .faq-a{ grid-template-rows: 1fr; }
.faq-a > div{ overflow: hidden; }
.faq-a p{
  padding-bottom: 1.5rem;
  max-width: 62ch;
  color: var(--ink-70);
}
.on-void .faq-a p, .on-char .faq-a p{ color: var(--on-void-70); }
.faq-a p + p{ padding-top: .8rem; }

/* ---------------------------------- Forms ---------------------------------- */
.form-wrap{
  background: var(--char);
  border: 1px solid var(--line-dark);
  border-top: 5px solid var(--hazard);
  padding: clamp(1.5rem, 4vw, 2.8rem);
}
.on-bone .form-wrap, .on-paper .form-wrap{ background: var(--paper); border-color: var(--line-light); border-top-color: var(--hazard); }

.field{ margin-bottom: 1.15rem; }
.field label{
  display: block;
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .68rem;
  margin-bottom: .5rem;
  color: var(--on-void-70);
}
.on-bone .field label, .on-paper .field label{ color: var(--ink-70); }
.field input, .field textarea, .field select{
  width: 100%;
  background: var(--void);
  border: 1.5px solid var(--line-dark);
  color: var(--bone);
  padding: .85rem 1rem;
  font-size: 1rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.on-bone .field input, .on-bone .field textarea, .on-bone .field select,
.on-paper .field input, .on-paper .field textarea, .on-paper .field select{
  background: var(--paper); border-color: rgba(12,12,13,.2); color: var(--void);
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline: none; border-color: var(--hazard);
}
.field textarea{ min-height: 130px; resize: vertical; }
.field-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem;
}
@media (max-width: 620px){ .field-row{ grid-template-columns: 1fr; gap: 0; } }
.field-hint{ font-size: .82rem; color: var(--on-void-50); margin-top: .45rem; }
.on-bone .field-hint, .on-paper .field-hint{ color: var(--ink-50); }

.chips{ display: flex; flex-wrap: wrap; gap: .5rem; }
.chip{ position: relative; }
.chip input{
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.chip span{
  display: block;
  border: 1.5px solid var(--line-dark);
  padding: .6rem 1rem;
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem;
  transition: all .22s var(--ease);
}
.on-bone .chip span, .on-paper .chip span{ border-color: rgba(12,12,13,.2); }
.chip.is-checked span{ background: var(--hazard); color: var(--void); border-color: var(--hazard); }
.chip input:focus-visible + span{ outline: 3px solid var(--hazard); outline-offset: 2px; }

/* ---------------------------------- Final CTA ---------------------------------- */
.final-cta{
  background: var(--hazard);
  color: var(--void);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta::before{
  content: "";
  position: absolute; inset: auto 0 0 0; height: 14px;
  background: repeating-linear-gradient(-45deg, var(--void) 0 14px, transparent 14px 28px);
}
.final-cta::after{
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 14px;
  background: repeating-linear-gradient(-45deg, var(--void) 0 14px, transparent 14px 28px);
}
.final-cta .lede{ margin-inline: auto; color: rgba(12,12,13,.8); }
.final-cta .btn-row{ justify-content: center; }

/* ---------------------------------- Footer ---------------------------------- */
.site-footer{
  background: var(--char);
  color: var(--bone);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line-dark);
}
.footer-top{
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: 3rem;
}
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }
.footer-brand p{
  color: var(--on-void-70); font-size: .95rem;
  max-width: 40ch; margin-top: 1.1rem;
}
.footer-col h5{
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; letter-spacing: .15em;
  font-size: .7rem; color: var(--hazard);
  margin-bottom: 1.1rem;
}
.footer-col a, .footer-col span{
  display: block;
  font-size: .93rem;
  color: var(--on-void-70);
  padding: .3rem 0;
  transition: color .22s var(--ease);
}
.footer-col a:hover{ color: var(--hazard); }
.socials{ display: flex; gap: .6rem; margin-top: 1.5rem; }
.social{
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1.5px solid var(--line-dark);
  transition: all .25s var(--ease);
}
.social svg{ width: 19px; height: 19px; }
.social:hover{ background: var(--hazard); color: var(--void); border-color: var(--hazard); }

.footer-legal{
  border-top: 1px solid var(--line-dark);
  padding: 1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem;
  justify-content: space-between; align-items: center;
  font-size: .82rem; color: var(--on-void-50);
}
.footer-legal a{ color: var(--on-void-50); }
.footer-legal a:hover{ color: var(--hazard); }
.footer-legal-links{ display: flex; flex-wrap: wrap; gap: 1.1rem; }
/* Must track the .action-bar breakpoint exactly, or the footer's legal row
   sits underneath the sticky call bar. */
@media (max-width: 1180px){
  .site-footer{ padding-bottom: 72px; }
}

/* --------------------- Mobile sticky action bar --------------------- */
.action-bar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 460;
  background: var(--void);
  border-top: 1px solid var(--line-dark);
  display: none;
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar .container{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; padding-inline: 0;
}
.action-bar a{
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .65rem .3rem .6rem;
  font-family: var(--font-body);
  font-variation-settings: "wght" 700;
  text-transform: uppercase; letter-spacing: .09em;
  font-size: .62rem;
  color: var(--on-void-70);
}
.action-bar a svg{ width: 20px; height: 20px; }
.action-bar a.ab-primary{ background: var(--hazard); color: var(--void); }
@media (max-width: 1180px){ .action-bar{ display: block; } }

/* ---------------------------------- Reveal ---------------------------------- */
.js [data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
.js [data-reveal].in{ opacity: 1; transform: none; }
.js [data-reveal][data-reveal-delay="1"]{ transition-delay: .1s; }
.js [data-reveal][data-reveal-delay="2"]{ transition-delay: .2s; }
.js [data-reveal][data-reveal-delay="3"]{ transition-delay: .3s; }

/* ---------------------------------- Cursor ---------------------------------- */
.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button{ cursor: none; }
.cursor-dot, .cursor-ring{
  position: fixed; top: 0; left: 0; z-index: 9998;
  pointer-events: none; border-radius: 50%;
}
.cursor-dot{ width: 6px; height: 6px; background: var(--hazard); }
/* Width/height rather than scale because the ring holds a text label that
   must not stretch with it. It is position:fixed with nothing depending on
   its box, so the layout it dirties is its own. */
.cursor-ring{
  width: 34px; height: 34px;
  border: 1.5px solid rgba(255,198,26,.65);
  display: grid; place-items: center;
  transition: width .28s var(--ease), height .28s var(--ease),
              background .28s var(--ease), border-color .28s var(--ease);
}
.cursor-ring.is-mid{ width: 48px; height: 48px; border-color: var(--hazard); }
.cursor-ring.is-grown{
  width: 82px; height: 82px;
  background: var(--hazard); border-color: var(--hazard);
}
.cursor-label{
  font-family: var(--font-body);
  font-variation-settings: "wght" 800;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .6rem; color: var(--void);
  opacity: 0; transition: opacity .2s var(--ease);
  white-space: nowrap;
}
.cursor-ring.is-grown .cursor-label{ opacity: 1; }
.cursor-dot.is-hidden, .cursor-ring.is-hidden{ opacity: 0; }

/* ---------------------------------- Page header ---------------------------------- */
.page-head{
  background: var(--void);
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-dark);
}
.page-head .h1{ max-width: 18ch; margin-block: 1.4rem 0; }
.crumbs{
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .66rem; color: var(--on-void-50);
  display: flex; gap: .5rem; align-items: center;
}
.crumbs a:hover{ color: var(--hazard); }

/* ---------------------------------- Prose (legal) ---------------------------------- */
.prose{ max-width: 74ch; }
.prose h2{
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.06;
  margin: 3rem 0 1rem;
  padding-top: 1.6rem;
  border-top: 3px solid var(--hazard);
}
.prose h2:first-child{ margin-top: 0; }
.prose h3{
  font-family: var(--font-display);
  font-variation-settings: "wght" 700;
  text-transform: uppercase;
  font-size: 1.05rem; margin: 1.8rem 0 .5rem;
}
.prose p, .prose li{ color: var(--ink-70); margin-bottom: .9rem; }
.on-void .prose p, .on-void .prose li, .on-char .prose p{ color: var(--on-void-70); }
.prose ul{ list-style: none; margin-bottom: 1.2rem; }
.prose ul li{ padding-left: 1.2rem; position: relative; }
.prose ul li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; background: var(--hazard-ink); transform: rotate(45deg);
}
.on-void .prose ul li::before, .on-char .prose ul li::before{ background: var(--hazard); }
.prose a{ color: var(--hazard-ink); text-decoration: underline; text-underline-offset: 3px; }
.on-void .prose a, .on-char .prose a{ color: var(--hazard); }

/* ---------------------------------- Utilities ---------------------------------- */
.center{ text-align: center; }
.center .lede{ margin-inline: auto; }
.center .eyebrow{ justify-content: center; }
.mt-0{ margin-top: 0; }
.mt-2{ margin-top: 2rem; }
.narrow{ max-width: 800px; margin-inline: auto; }
.vh{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ================================ Chatbot ================================
   Guided quick-help, answered from a local knowledge base. No external chat
   service, no third-party script, no data leaving the page - which is the
   only way it can sit on a site that otherwise makes zero outbound requests.
   Square-cornered like everything else here; rounded bubbles would be the one
   soft shape on the entire site. */
.chatbot{ position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 470; }
@media (max-width: 1180px){
  /* Clear the sticky call bar rather than sitting on top of it. */
  .chatbot{ bottom: calc(72px + env(safe-area-inset-bottom) + .9rem); right: .9rem; }
}

.chatbot__launcher{
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--hazard); color: var(--void);
  border: 2px solid var(--void);
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transition: background .25s var(--ease), transform .25s var(--ease);
  position: relative;
}
.chatbot__launcher:hover{ background: var(--hazard-lift); transform: translateY(-2px); }
.chatbot__launcher svg{ width: 25px; height: 25px; }
.chatbot__launcher .ico-close{ display: none; }
.chatbot.is-open .chatbot__launcher .ico-chat{ display: none; }
.chatbot.is-open .chatbot__launcher .ico-close{ display: block; }
.chatbot__dot{
  position: absolute; top: -4px; right: -4px;
  width: 13px; height: 13px; background: var(--bone);
  border: 2px solid var(--void);
}
.chatbot.is-open .chatbot__dot, .chatbot.is-seen .chatbot__dot{ display: none; }

.chatbot__panel{
  position: absolute; right: 0; bottom: calc(100% + .8rem);
  width: min(370px, calc(100vw - 1.8rem));
  background: var(--char);
  border: 1px solid var(--line-dark);
  border-top: 4px solid var(--hazard);
  display: flex; flex-direction: column;
  max-height: min(560px, calc(100vh - 8rem));
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.chatbot.is-open .chatbot__panel{ opacity: 1; visibility: visible; transform: translateY(0); }

.chatbot__head{
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--line-dark);
  flex: none;
}
.chatbot__head img{ width: 32px; height: 32px; flex: none; }
.chatbot__title{
  font-family: var(--font-display);
  font-variation-settings: "wght" 800;
  text-transform: uppercase;
  font-size: 1.05rem; line-height: 1.05; letter-spacing: .015em;
}
.chatbot__sub{
  font-size: .68rem; color: var(--on-void-50);
  display: flex; align-items: center; gap: .35em; margin-top: 2px;
}
.chatbot__sub i{ width: 6px; height: 6px; background: #57C77A; flex: none; }
.chatbot__x{ margin-left: auto; color: var(--on-void-50); padding: .3rem; flex: none; }
.chatbot__x:hover{ color: var(--bone); }
.chatbot__x svg{ width: 16px; height: 16px; }

.chatbot__msgs{
  flex: 1 1 auto; overflow-y: auto;
  padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
  scroll-behavior: smooth;
}
.chatbot__msg{
  font-size: .9rem; line-height: 1.55;
  padding: .6rem .8rem;
  max-width: 88%;
}
.chatbot__msg--bot{ background: var(--steel); color: var(--bone); align-self: flex-start; }
.chatbot__msg--me{ background: var(--hazard); color: var(--void); align-self: flex-end; font-weight: 600; }
/* :not(.btn) matters here. A bare `.chatbot__msg a` selector outranks
   `.btn-hazard`, which painted the CTA button's own text hazard-on-hazard and
   made it vanish. */
.chatbot__msg a:not(.btn){ color: var(--hazard); text-decoration: underline; text-underline-offset: 2px; }
.chatbot__msg--me a:not(.btn){ color: var(--void); }
.chatbot__msg .btn{ margin-top: .7rem; }

.chatbot__typing{
  align-self: flex-start; background: var(--steel);
  padding: .7rem .85rem; display: flex; gap: 4px;
}
.chatbot__typing i{
  width: 6px; height: 6px; background: var(--on-void-50);
  animation: blip 1.1s infinite;
}
.chatbot__typing i:nth-child(2){ animation-delay: .16s; }
.chatbot__typing i:nth-child(3){ animation-delay: .32s; }
@keyframes blip{
  0%,60%,100%{ opacity: .25; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(-3px); }
}

.chatbot__quick{
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: 0 1rem .85rem;
  flex: none;
}
.chatbot__quick button{
  font-family: var(--font-body);
  font-variation-settings: "wght" 600;
  text-transform: uppercase; letter-spacing: .07em;
  font-size: .64rem;
  padding: .45rem .65rem;
  border: 1.5px solid var(--line-dark);
  color: var(--on-void-70);
  transition: all .2s var(--ease);
}
.chatbot__quick button:hover{ background: var(--hazard); color: var(--void); border-color: var(--hazard); }

.chatbot__form{
  display: flex; border-top: 1px solid var(--line-dark); flex: none;
}
.chatbot__form input{
  flex: 1 1 auto; min-width: 0;
  background: var(--void); border: 0;
  padding: .85rem .9rem; font-size: .9rem; color: var(--bone);
}
.chatbot__form input:focus{ outline: none; background: #101013; }
.chatbot__form button{
  flex: none; width: 52px;
  background: var(--hazard); color: var(--void);
  display: grid; place-items: center;
}
.chatbot__form button:hover{ background: var(--hazard-lift); }
.chatbot__form button svg{ width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce){
  .chatbot__msgs{ scroll-behavior: auto; }
}

/* ---------------------------------- Print ---------------------------------- */
@media print{
  .site-header, .top-strip, .mobile-nav, .action-bar, .loader,
  .cursor-dot, .cursor-ring, .marquee, .hazard-tape{ display: none !important; }
  body{ background: #fff; color: #000; }
  .section{ padding: 1.5rem 0; }
  a[href^="http"]::after{ content: " (" attr(href) ")"; font-size: .8em; }
}