/* ═══════════════════════════════════════════════════════════════════════
   FOX COATINGS & EXTERIORS — JOBSITE LIVERY
   The graphic language painted on the truck that pulls into your driveway.

   Materials: hazard chevrons (45°, the signature), plate steel, spray
   stencil, reflective tape, die-cut decal keylines.
   Ink budget is strictly two: high-vis orange #FD6101 and machine black.
   Bone white is the substrate, not a third ink.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Ink 1: high-vis orange (sampled from the supplied logo art) ── */
  --fox:        #FD6101;
  --fox-hot:    #FF7A2E;
  --fox-deep:   #C74A00;
  --fox-ink:    #A03900;  /* AA-safe orange for body text on light grounds */

  /* ── Ink 2: machine black ── */
  --machine:      #0A0B0D;
  --machine-deep: #050506;
  --plate:        #14161A;
  --plate-hi:     #1F2228;
  --plate-edge:   #2C3037;

  /* ── Substrate ── */
  --tape:      #F5F3F0;
  --tape-deep: #E4E0DA;
  --white:     #FDFDFD;

  /* ── Text ── */
  --text-dark:       #0A0B0D;
  --text-dark-mid:   #33383F;
  --text-dark-muted: #545C66;
  --text-lt:         #FDFDFD;
  --text-lt-mid:     rgba(253, 253, 253, 0.86);
  --text-lt-muted:   rgba(253, 253, 253, 0.66);

  /* ── Borders ── */
  --edge-lt:     rgba(10, 11, 13, 0.14);
  --edge-lt-soft:rgba(10, 11, 13, 0.08);
  --edge-dk:     rgba(253, 253, 253, 0.14);
  --edge-dk-soft:rgba(253, 253, 253, 0.07);

  /* ── Type ── */
  /* One family, two registers. Archivo is a squared grotesque that matches
     the wordmark's geometry; at 900 expanded it behaves as structural plate,
     at 400-500 normal width it is a clean workhorse for body copy. Shipping
     one family instead of two removes a render-blocking font request. */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* ── Rhythm ── */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --shell:  1280px;
  --pad-section: clamp(4rem, 9vw, 8.5rem);

  /* ── Materials ── */
  --chev-w: 14px;
  --tape-h: 8px;
  --dur: 0.34s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}
body {
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-dark);
  background: var(--tape);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 3px solid var(--fox);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--fox);
  color: var(--machine);
  padding: 0.85rem 1.4rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ═══ TYPE SCALE ═══
   Display type is structural: it behaves as the plate, not a label resting
   on one. Tight tracking, heavy weight, uppercase, optical size cranked. */

.d1, .d2, .d3, .d4 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.025em;
  font-stretch: 112%;
  text-wrap: balance;
}
.d1 { font-size: clamp(2.6rem, 7.2vw, 5.9rem); }
.d2 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 0.92; }
.d3 { font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 0.98; letter-spacing: -0.02em; }
.d4 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.1; letter-spacing: -0.01em; font-weight: 800; }

/* Orange emphasis inside a display line. Never italic-for-decoration —
   the slant echoes the wordmark and is used only on a whole emphasis span. */
.d1 em, .d2 em, .d3 em {
  font-style: italic;
  font-weight: 900;
  color: var(--fox);
  font-stretch: 112%;
}
.on-dark .d1 em, .on-dark .d2 em, .on-dark .d3 em { color: var(--fox); }

/* Technical hairline label — the spec-plate voice. */
.rule-label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-display);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--fox-ink);
  margin-bottom: 1.1rem;
}
.on-dark .rule-label { color: var(--fox); }
.rule-label::before {
  content: "";
  width: 26px;
  height: 3px;
  background: var(--fox);
  flex: none;
}
.rule-label--center { justify-content: center; }

.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.68;
  color: var(--text-dark-mid);
  max-width: 62ch;
}
.on-dark .lead { color: var(--text-lt-mid); }
.lead--center { margin-inline: auto; }

p + p { margin-top: 1.05rem; }

/* Stencil numeral — spray-stencil unit number on equipment. */
.stencil {
  font-family: var(--f-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--fox);
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
}
.stencil--solid { color: var(--fox); -webkit-text-stroke: 0; }
.stencil--sm { font-size: 1.5rem; -webkit-text-stroke-width: 1.5px; }

/* ═══ MATERIAL: HAZARD CHEVRON ═══
   The signature. 45° high-vis striping off the back of a work truck. */

.chevron {
  --chev-a: var(--fox);
  --chev-b: var(--machine);
  background-image: repeating-linear-gradient(
    45deg,
    var(--chev-a) 0 var(--chev-w),
    var(--chev-b) var(--chev-w) calc(var(--chev-w) * 2)
  );
  background-size: calc(var(--chev-w) * 2.828) calc(var(--chev-w) * 2.828);
}
.chevron--light { --chev-b: var(--tape); }
.chevron--fine  { --chev-w: 8px; }

.chevron-band {
  height: clamp(10px, 1.5vw, 16px);
  width: 100%;
  flex: none;
}
.chevron-band--tall { height: clamp(18px, 2.6vw, 30px); }

/* Marching stripes. Bound, GPU-cheap, and off under reduced motion. */
.chevron--march { animation: march 2.4s linear infinite; }
@keyframes march {
  to { background-position: calc(var(--chev-w) * 2.828) 0; }
}

/* ═══ MATERIAL: PLATE STEEL ═══
   Machined panel with a hairline highlight where light catches the edge. */

.plate {
  position: relative;
  background: var(--plate);
  border: 1px solid var(--plate-edge);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent, rgba(253, 253, 253, 0.22) 22%, rgba(253, 253, 253, 0.22) 78%, transparent
  );
  pointer-events: none;
}
.plate--lt {
  background: var(--white);
  border-color: var(--edge-lt);
}
.plate--lt::before { background: none; }

/* Die-cut decal keyline — vinyl edge, offset. */
.decal-edge {
  position: relative;
}
.decal-edge::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid var(--fox);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), inset var(--dur) var(--ease);
  pointer-events: none;
}
.decal-edge:hover::after,
.decal-edge:focus-within::after { opacity: 1; inset: -9px; }

/* Corner cut — the angular notch language from the fox mask. */
.notch {
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.notch-tr {
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}

/* ═══ LAYOUT ═══ */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.section { padding-block: var(--pad-section); }
.section--tight { padding-block: clamp(2.75rem, 5.5vw, 4.5rem); }

.on-dark {
  background: var(--machine);
  color: var(--text-lt);
}
.on-plate {
  background: var(--plate);
  color: var(--text-lt);
}
.on-tape { background: var(--tape); }
.on-white { background: var(--white); }

.section-head { max-width: 780px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .rule-label { justify-content: center; }
.section-head .lead { margin-top: 1.3rem; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ═══ BUTTONS ═══
   Rebuilt in the form's vocabulary: hard edges, stencil caps, chevron fill. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0.95rem 1.75rem;
  font-family: var(--f-display);
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  line-height: 1;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform 0.16s var(--ease);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.btn:active { transform: translateY(1px); }

.btn-fox {
  background: var(--fox);
  color: var(--machine);
  border-color: var(--fox);
}
.btn-fox:hover { background: var(--fox-hot); border-color: var(--fox-hot); }

/* Outline on dark */
.btn-line {
  background: transparent;
  color: var(--text-lt);
  border-color: rgba(253, 253, 253, 0.35);
}
.btn-line:hover { border-color: var(--fox); color: var(--fox); }

/* Outline on light */
.btn-line-dk {
  background: transparent;
  color: var(--machine);
  border-color: rgba(10, 11, 13, 0.28);
}
.btn-line-dk:hover { border-color: var(--fox); color: var(--fox-ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}
.btn-row--center { justify-content: center; }

/* Inline text link with a moving underline rule. */
.link-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-display);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--fox-ink);
  padding-bottom: 3px;
  border-bottom: 2px solid var(--fox);
  transition: gap var(--dur) var(--ease);
}
.on-dark .link-rule, .on-plate .link-rule { color: var(--fox); }
.link-rule:hover { gap: 0.85rem; }

/* ═══ HEADER ═══ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--machine);
  border-bottom: 1px solid var(--edge-dk-soft);
}
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  height: 84px;
}

/* Header lockup: the supplied fox mask beside a CSS wordmark.
   The full banner logo is ~3:1, so at header scale its "COATINGS &
   EXTERIORS" line renders around 6px and cannot be read. Rebuilding the
   wordmark in Archivo keeps it crisp at every size and matches the
   supplied mark's character. The full banner art still ships in the
   footer and in structured data, where there is room for it. */
.logo-block {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
}
.logo-block img { height: 46px; width: auto; }
.logo-word { display: grid; gap: 0.15rem; }
.logo-word-main {
  font-family: var(--f-display);
  font-size: 1.55rem;
  font-weight: 900;
  font-style: italic;
  font-stretch: 118%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.8;
  color: var(--white);
}
.logo-word-sub {
  font-family: var(--f-display);
  font-size: 0.54rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  line-height: 1;
  color: var(--fox);
  white-space: nowrap;
}
@media (max-width: 400px) {
  .logo-block img { height: 38px; }
  .logo-word-main { font-size: 1.28rem; }
  .logo-word-sub { font-size: 0.47rem; letter-spacing: 0.15em; }
}

.nav-desk {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
.nav-link {
  padding: 0.6rem 0.8rem;
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-lt-mid);
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.8rem; right: 0.8rem; bottom: 0.25rem;
  height: 2px;
  background: var(--fox);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--white); }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.6rem 0.8rem;
  font-family: var(--f-display);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-lt-mid);
  transition: color var(--dur) var(--ease);
}
.nav-drop-btn:hover, .nav-drop-btn[aria-expanded="true"] { color: var(--white); }
.nav-drop-btn svg { transition: transform var(--dur) var(--ease); }
.nav-drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-drop-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 480px;
  background: var(--plate);
  border: 1px solid var(--plate-edge);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility var(--dur);
}
.nav-drop-btn[aria-expanded="true"] + .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-drop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0.6rem;
  gap: 1px;
}
.nav-drop-grid a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-lt-mid);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-drop-grid a:hover { background: var(--plate-hi); color: var(--white); }
.nav-drop-grid .unit {
  font-family: var(--f-display);
  font-size: 0.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--fox);
  letter-spacing: 0.06em;
}
.nav-drop-foot {
  border-top: 1px solid var(--plate-edge);
  padding: 0.85rem 1.45rem;
}

.nav-cta {
  margin-left: 0.6rem;
  min-height: 46px;
  padding: 0.7rem 1.3rem;
  font-size: 0.78rem;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
  background: none;
  border: 2px solid rgba(253, 253, 253, 0.25);
  color: var(--white);
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  min-height: 46px;
  font-family: var(--f-display);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.nav-toggle-bars { display: grid; gap: 4px; }
.nav-toggle-bar { width: 20px; height: 2px; background: var(--fox); }

@media (min-width: 1060px) {
  .nav-desk { display: flex; }
  .nav-toggle { display: none; }
}

/* ═══ MOBILE DRAWER ═══ */
.nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(92vw, 420px);
  background: var(--machine);
  z-index: 120;
  transform: translateX(101%);
  transition: transform 0.42s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.5rem 3rem;
  border-left: 1px solid var(--plate-edge);
}
.nav-drawer.is-open { transform: translateX(0); }
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 6, 0.72);
  z-index: 110;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

.nav-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--edge-dk-soft);
}
.nav-drawer-top img { height: 34px; width: auto; }
.nav-drawer-close {
  background: none;
  border: 0;
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
}
.nav-drawer-links { display: grid; margin-top: 0.5rem; }
.nav-drawer-links > a,
.nav-drawer-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  border-bottom: 1px solid var(--edge-dk-soft);
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-lt);
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.nav-drawer-sub-toggle svg { transition: transform var(--dur) var(--ease); flex: none; }
.nav-drawer-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drawer-sub { display: none; }
.nav-drawer-sub.is-open {
  display: grid;
  animation: faq-open 0.28s var(--ease) both;
}

.nav-drawer-sub a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.72rem 0.25rem 0.72rem 1rem;
  border-bottom: 1px solid var(--edge-dk-soft);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-lt-muted);
}
.nav-drawer-sub a .unit {
  font-family: var(--f-display);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--fox);
  font-variant-numeric: tabular-nums;
}
.nav-drawer-cta { width: 100%; margin-top: 1.6rem; }
.nav-drawer-contact {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--edge-dk-soft);
  font-size: 0.9rem;
  color: var(--text-lt-muted);
  display: grid;
  gap: 0.45rem;
}
.nav-drawer-contact a { color: var(--fox); font-weight: 600; }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ FORMS ═══
   16px minimum on every input (iOS zoom). Focus is a border-color change
   only — never a box-shadow spread, which overflows the mobile viewport. */

.field { display: grid; gap: 0.45rem; }
.field + .field { margin-top: 1rem; }
.field-label {
  font-family: var(--f-display);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-lt-muted);
}
.on-white .field-label, .on-tape .field-label { color: var(--text-dark-muted); }

.input {
  width: 100%;
  font-size: 16px;
  font-family: var(--f-body);
  padding: 0.9rem 1rem;
  min-height: 52px;
  background: var(--machine-deep);
  border: 2px solid var(--plate-edge);
  color: var(--white);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.input::placeholder { color: rgba(253, 253, 253, 0.34); }
.input:focus {
  outline: none;
  border-color: var(--fox);
  background: var(--machine);
}
.input:focus-visible { outline: none; }
textarea.input { min-height: 128px; resize: vertical; line-height: 1.6; }

.input--lt {
  background: var(--white);
  border-color: var(--edge-lt);
  color: var(--text-dark);
}
.input--lt::placeholder { color: var(--text-dark-muted); }
.input--lt:focus { border-color: var(--fox); background: var(--white); }

.field-row { display: grid; gap: 1rem; }
@media (min-width: 620px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form-note {
  margin-top: 1rem;
  font-size: 0.84rem;
  color: var(--text-lt-muted);
  line-height: 1.6;
}
.form-status {
  position: relative;
  margin-top: 1rem;
  padding: 1rem 1.1rem 0.9rem;
  background: rgba(253, 97, 1, 0.09);
  font-size: 0.9rem;
  display: none;
}
/* Hazard tape across the top edge rather than a left accent tab. */
.form-status::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background-image: repeating-linear-gradient(
    45deg, var(--fox) 0 6px, var(--machine) 6px 12px
  );
}
.form-status.is-shown { display: block; }
.form-status.is-error { background: rgba(255, 68, 68, 0.12); }
.form-status.is-error::before {
  background-image: repeating-linear-gradient(45deg, #FF4444 0 6px, var(--machine) 6px 12px);
}

altcha-widget { display: block; margin-top: 1rem; }

/* ═══ FLOATING CALL CTA ═══
   Hides on input focus (iOS keyboard) and near the contact form. */
.floating-cta {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.4rem;
  min-height: 56px;
  background: var(--fox);
  color: var(--machine);
  font-family: var(--f-display);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.floating-cta.is-hidden {
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 1060px) { .floating-cta { display: none; } }

/* ═══ FOOTER ═══ */
.site-footer { background: var(--machine); color: var(--text-lt); }
.footer-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.footer-brand img { height: 46px; width: auto; margin-bottom: 1.3rem; }
.footer-brand p {
  font-size: 0.92rem;
  color: var(--text-lt-muted);
  max-width: 38ch;
  line-height: 1.7;
}
.footer-meta {
  margin-top: 1.4rem;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-lt-muted);
}
.footer-meta a { color: var(--fox); font-weight: 600; }
.footer-head {
  font-family: var(--f-display);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--white);
  margin-bottom: 1.15rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--fox);
  display: inline-block;
}
.footer-links { display: grid; gap: 0.62rem; }
.footer-links a {
  font-size: 0.9rem;
  color: var(--text-lt-muted);
  transition: color var(--dur) var(--ease);
}
.footer-links a:hover { color: var(--fox); }
.footer-bottom {
  border-top: 1px solid var(--edge-dk-soft);
  padding-block: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-lt-muted);
}
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a:hover { color: var(--fox); }

/* ═══ BREADCRUMB ═══ */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-lt-muted);
  margin-bottom: 1.5rem;
}
.crumb a { color: var(--fox); }
.crumb span[aria-current] { color: var(--text-lt-mid); }

/* ═══ REVEAL (scroll-in) ═══
   Content is visible by default; JS opts in. A visitor with JS disabled or
   a failed script never gets a blank page. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}