/* ==========================================================================
   JUNK BROS - DESIGN SYSTEM
   Red and blue on white, the owner's brief. Pattern from ui-ux-pro-max:
   Trust and Authority plus Conversion, Flat Design (no gradients on
   surfaces, simple hover shifts, fast). Type: Archivo for headings, Public
   Sans for body. Neither is used on another house site.

   Every flat pair is measured with contrast.py (2026-09-05). Text over
   photographs is measured by check_photo_contrast.py against the shipped
   files, effect by effect.
   ========================================================================== */

:root {
  --clr-red:         #B3121F;   /* the action colour. white on it 6.95:1    */
  --clr-red-bright:  #D11A2A;   /* gradients only. white on it 5.40:1       */
  --clr-red-hover:   #96101A;
  --clr-blue:        #1B3F8F;   /* the brand. white on it 9.75:1            */
  --clr-blue-hover:  #163475;
  --clr-navy:        #0F1E3D;   /* deep ground. white on it 16.49:1         */
  --clr-sky:         #C9DAFF;   /* accent on dark. 6.94:1 on blue           */
  --clr-blush:       #FFD6DA;   /* accent on red. 5.25:1                    */

  --clr-bg:          #FFFFFF;
  --clr-tint:        #F4F6FB;
  --clr-tint-2:      #E8EEFA;
  --clr-fg:          #0F1E3D;   /* ink. 16.49:1 on white                    */
  --clr-fg-muted:    #3A4A6B;   /* 7.61:1 on the tint                       */
  --clr-fg-invert:   #FFFFFF;
  --clr-fg-invert-muted: #C9DAFF;

  --clr-rule:        #D8DFEE;
  --clr-border:      #6B7A9C;

  --ff-head: 'Archivo', 'Arial Black', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif;

  --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-md: 1.2rem;
  --fs-lg: 1.5rem; --fs-xl: 2rem;

  --sp-1: .5rem; --sp-2: .75rem; --sp-3: 1rem; --sp-4: 1.5rem; --sp-5: 2rem;
  --sp-6: 3rem; --sp-7: 4.5rem; --sp-8: clamp(5.5rem, 9vw, 8rem);

  --radius: 6px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 2px rgba(15,30,61,.06), 0 2px 6px rgba(15,30,61,.06);
  --shadow-md: 0 2px 4px rgba(15,30,61,.06), 0 12px 28px rgba(15,30,61,.10);
  --shadow-lg: 0 4px 10px rgba(15,30,61,.08), 0 26px 60px rgba(15,30,61,.18);

  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 180ms var(--ease);
  --t-base: 260ms var(--ease);

  --measure: 64ch;
  --wrap: 1180px;
  --wrap-narrow: 760px;
}

/* ==========================================================================
   RESET AND BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--ff-body); font-size: var(--fs-base); line-height: 1.65;
  color: var(--clr-fg); background: var(--clr-bg); -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--ff-head); font-weight: 700; line-height: 1.08; color: inherit; letter-spacing: -.01em; }
h1 { font-size: clamp(2.5rem, 5.8vw, 4.4rem); font-weight: 900; letter-spacing: -.025em; text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); letter-spacing: -.02em; font-weight: 900; }
h3 { font-size: var(--fs-md); }
p { max-width: var(--measure); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

a { color: var(--clr-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clr-navy); }
.on-dark a:not(.btn) { color: var(--clr-sky); }
.on-dark a:not(.btn):hover { color: #fff; }

:focus-visible { outline: 3px solid var(--clr-red); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible { outline-color: var(--clr-blush); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--clr-red); color: #fff; padding: var(--sp-3) var(--sp-4); font-weight: 600; }
.skip-link:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.stack > * + * { margin-top: var(--sp-4); }

/* ==========================================================================
   BUTTONS. Flat, square shouldered. Fitts: 52px minimum. Red is the action.
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 var(--sp-5);
  font-family: var(--ff-head); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--clr-red); color: #fff; }
.btn-primary:hover { background: var(--clr-red-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.on-dark .btn-primary { background: #fff; color: var(--clr-red); }
.on-dark .btn-primary:hover { background: var(--clr-blush); color: var(--clr-red-hover); }
.btn-ghost { background: transparent; color: var(--clr-blue); border-color: var(--clr-blue); }
.btn-ghost:hover { background: var(--clr-tint-2); color: var(--clr-navy); border-color: var(--clr-navy); }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn-white { background: #fff; color: var(--clr-blue); }
.btn-white:hover { background: var(--clr-tint-2); color: var(--clr-navy); }
.btn-sm { min-height: 46px; padding: 0 var(--sp-4); font-size: var(--fs-xs); }

/* ==========================================================================
   HEADER AND NAV. White, the truck mark, a red CTA top right.
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--clr-rule); transition: box-shadow .22s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 8px 28px rgba(15,30,61,.12); }
.site-header .wrap { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) 0; }

/* The client's own logo, recoloured (src/brand.py). Never redrawn. */
.wordmark { display: inline-flex; align-items: center; text-decoration: none; margin-right: auto; line-height: 1; }
.logo-img { height: 46px; width: auto; display: block; }
@media (max-width: 460px) { .logo-img { height: 38px; } }
.logo-full { width: 230px; height: auto; display: block; }

.nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav ul { display: contents; }
.nav a:not(.btn) { color: var(--clr-fg); text-decoration: none; font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--clr-red); }
.site-header .btn { white-space: nowrap; }
.nav-phone { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 700; color: var(--clr-fg); }
.icon-sm { width: 18px; height: 18px; flex: 0 0 18px; }
.icon { width: 28px; height: 28px; }

.nav-toggle { display: none; background: none; border: 1px solid var(--clr-border); border-radius: var(--radius); padding: .55rem .75rem; cursor: pointer; color: var(--clr-fg); min-height: 46px; }
.nav-toggle svg { display: block; }
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: var(--sp-3);
    background: #fff; border-bottom: 1px solid var(--clr-rule); padding: var(--sp-4) 1.25rem var(--sp-5); box-shadow: var(--shadow-lg); max-height: calc(100vh - 70px); overflow: auto; }
  .nav ul { display: grid; gap: var(--sp-3); }
  .nav:not(.is-open) { display: none; }
  .nav .btn { width: 100%; }
  .nav-phone { justify-content: center; padding: var(--sp-2) 0; }
}

/* ==========================================================================
   MEGA MENU. Top level items are buttons that drop a panel; every
   destination inside is a plain <a href>. Under 1180px the panels sit open
   inside the drawer.
   ========================================================================== */
.nav-item { position: static; }
.nav-btn { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: .6rem .2rem; cursor: pointer; color: var(--clr-fg); font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.nav-btn svg { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.nav-btn:hover, .nav-btn[aria-expanded="true"] { color: var(--clr-red); border-bottom-color: var(--clr-red); }
.nav-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--clr-rule); box-shadow: 0 30px 60px rgba(15,30,61,.18); display: none; }
.mega.is-open { display: block; animation: mega-drop .32s var(--ease) both; }
@keyframes mega-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.mega-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: var(--sp-5); padding: var(--sp-5) 0 var(--sp-6); }
.mega-grid.two { grid-template-columns: repeat(2, 1fr) 1.1fr; }
.mega h2 { font-family: var(--ff-head); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--clr-fg-muted); margin-bottom: var(--sp-3); font-weight: 700; }
.mega ul { display: grid; gap: .35rem; }
.mega a.item { display: block; padding: .7rem .8rem; border-radius: var(--radius); text-decoration: none; color: var(--clr-fg); transition: background var(--t-fast), transform var(--t-fast); }
.mega a.item:hover { background: var(--clr-tint); transform: translateX(3px); color: var(--clr-fg); }
.mega a.item b { display: block; font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-sm); }
.mega a.item small { display: block; color: var(--clr-fg-muted); font-size: var(--fs-xs); margin-top: .15rem; }
.mega-cta { background: var(--clr-blue); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); justify-content: space-between; }
.mega-cta p { color: var(--clr-fg-invert-muted); font-size: var(--fs-sm); }
.mega-cta strong { font-family: var(--ff-head); font-size: var(--fs-md); color: #fff; }
.mega-cta .btn { align-self: flex-start; }
.mega-cta .btn-white { color: var(--clr-red); }
.mega-cta .btn-white:hover { color: var(--clr-red-hover); background: var(--clr-blush); }
.mega-backdrop { position: fixed; inset: 0; background: rgba(15,30,61,.28); z-index: 40; display: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mega-backdrop.is-open { display: block; animation: fade .3s var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1180px) {
  .nav-item { display: block; }
  .nav-btn { display: none; }
  .mega { position: static; display: block; box-shadow: none; border: 0; animation: none; }
  .mega-grid, .mega-grid.two { grid-template-columns: 1fr; gap: var(--sp-4); padding: 0 0 var(--sp-3); }
  .mega-cta { display: none; }
  .mega-backdrop { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .mega.is-open, .mega-backdrop.is-open { animation: none; } .nav-btn svg, .mega a.item { transition: none; } }

/* ==========================================================================
   SECTIONS. Every body section carries a photograph behind an effect.
   Crossfade: every section after the first starts 140px inside the one
   before it and is masked to transparent across that band, so no edge
   exists. Type never sits in the band: padding absorbs it.
   ========================================================================== */
.section { position: relative; padding-block: var(--sp-8); overflow: hidden; isolation: isolate; }
.section > .wrap, .section > .wrap-narrow { position: relative; z-index: 2; }
.section + .section { margin-top: -140px; padding-top: calc(var(--sp-8) + 140px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px); mask-image: linear-gradient(180deg, transparent 0, #000 140px); }
.section:has(+ .section) { padding-bottom: calc(var(--sp-8) + 140px); }
.hero { position: sticky; top: 0; z-index: 0; }
.section:not(.hero) { z-index: 1; }
.section-dark { background: var(--clr-navy); color: var(--clr-fg-invert); }
.on-dark { color: var(--clr-fg-invert); }
.on-dark .lead, .on-dark .muted { color: var(--clr-fg-invert-muted); }
.bg { position: absolute; inset: -6% 0; z-index: 0; background-size: cover; background-position: center; background-image: var(--img); }
@media (max-width: 640px) { .bg { background-image: var(--img-m, var(--img)); } }

.lead { font-size: var(--fs-md); color: var(--clr-fg-muted); max-width: 56ch; }
.eyebrow { font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--clr-red); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: .6rem; }
/* No rule mark before eyebrows: the owner reads it as a dash. House rule. */
.on-dark .eyebrow { color: var(--clr-blush); }
.section-head.center .eyebrow { justify-content: center; }
.section-head { margin-bottom: var(--sp-6); }
.section-head .lead { margin-top: var(--sp-3); }
.cta-row { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   EIGHT EFFECTS, written for this site. No two on the same page. Alpha
   values set by check_photo_contrast.py, not by eye.
   ========================================================================== */

/* 1. tailgate: navy shade from the left, the photograph clearing to the
   right, a red hairline along the bottom like a tailgate reflector */
.fx-tailgate::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(0deg, rgba(209,26,42,.9) 0 4px, transparent 4px),
              linear-gradient(90deg, rgba(15,30,61,.96) 0%, rgba(15,30,61,.90) 56%, rgba(15,30,61,.50) 100%); }
.fx-tailgate .bg { background-position: 72% center; }

/* 2. tarp: brand blue with diagonal fold lines */
.fx-tarp::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background-color: rgba(27,63,143,.92);
  background-image: repeating-linear-gradient(-28deg, transparent 0 70px, rgba(201,218,255,.10) 70px 72px); }

/* 3. ratchet: white with horizontal strap lines */
.fx-ratchet::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background-color: rgba(255,255,255,.93);
  background-image: repeating-linear-gradient(180deg, transparent 0 64px, rgba(27,63,143,.09) 64px 66px); }

/* 4. dropcloth: the photograph faded to grey under a pale sheet */
.fx-dropcloth .bg { filter: grayscale(.85); }
.fx-dropcloth::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(244,246,251,.95), rgba(232,238,250,.94)); }

/* 5. loadline: red rolling into navy from the top left */
.fx-loadline::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(179,18,31,.94) 0%, rgba(179,18,31,.92) 28%, rgba(15,30,61,.95) 62%, rgba(15,30,61,.97) 100%); }

/* 6. curbside: a white pane on the left where the words sit, the
   photograph clearing to the right under the white cards */
.fx-curbside::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 52%, rgba(255,255,255,.72) 68%, rgba(255,255,255,.30) 100%); }
.fx-curbside .bg { background-position: 80% 25%; }

/* 7. manifest: the photograph in grey line, pale blue paper over it */
.fx-manifest .bg { filter: grayscale(1) contrast(1.05); }
.fx-manifest::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(232,238,250,.96), rgba(244,246,251,.95)); }

/* 8. lastcall: navy into red at the bottom, the close */
.fx-lastcall::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(15,30,61,.95) 0%, rgba(15,30,61,.94) 55%, rgba(179,18,31,.92) 100%); }

/* Breadcrumbs. Rendered from the schema node, laid over the top of the hero. */
main { position: relative; }
.crumbs { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding-top: var(--sp-3); font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 700; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; color: var(--clr-fg-invert-muted); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; opacity: .6; }
.crumbs a { color: var(--clr-fg-invert-muted); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs [aria-current] span { color: #fff; }
.crumbs + .hero { padding-top: clamp(4.5rem, 12vw, 8.5rem); }
.crumbs + .hero.hero-short { padding-top: clamp(4rem, 9vw, 6rem); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { padding-block: clamp(4rem, 12vw, 8.5rem) clamp(3rem, 7vw, 5rem); min-height: min(80vh, 700px); display: grid; align-items: center; align-content: center; }
.hero-short { min-height: 0; }
.hero.hero-short { min-height: 0; padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero-in { max-width: 680px; }
.hero-in .sub { font-size: var(--fs-md); margin-top: var(--sp-4); color: var(--clr-fg-invert-muted); max-width: 52ch; }
.hero-in .cta-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero-in .hero-text { margin-top: var(--sp-4); font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-sm); color: var(--clr-fg-invert-muted); }
.hero-in .trust { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--clr-fg-invert-muted); max-width: none; }
.hero-in .trust span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-in .trust svg { color: var(--clr-blush); }

/* The trust bar under the hero: four plain facts on a white plate */
.trust-bar { margin-top: clamp(2.5rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(201,218,255,.35); border: 1px solid rgba(201,218,255,.35); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.trust-bar li { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4); background: #fff; color: var(--clr-fg); }
.trust-bar .tb-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; background: var(--clr-tint-2); color: var(--clr-red); }
.trust-bar b { display: block; font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; }
.trust-bar small { display: block; font-size: var(--fs-xs); color: var(--clr-fg-muted); margin-top: .15rem; }
@media (max-width: 1024px) { .trust-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-bar { grid-template-columns: 1fr; } }

/* ==========================================================================
   CARDS AND GRIDS
   ========================================================================== */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .grid-4 { grid-template-columns: 1fr; } }

.card { background: #fff; color: var(--clr-fg); border: 1px solid var(--clr-rule); border-radius: var(--radius-lg); padding: var(--sp-5) var(--sp-5) var(--sp-6); box-shadow: var(--shadow-sm); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #B9C9EA; }
.on-dark .card:hover { border-color: rgba(201,218,255,.55); }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--clr-fg-muted); font-size: var(--fs-sm); }
.on-dark .card { background: rgba(255,255,255,.08); color: var(--clr-fg-invert); border-color: rgba(201,218,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.on-dark .card p { color: var(--clr-fg-invert-muted); }
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
a.card .more { color: var(--clr-red); font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-xs); }

.vcard .vicon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); background: var(--clr-tint-2); color: var(--clr-blue); margin-bottom: var(--sp-3); }

.step { position: relative; padding-top: calc(var(--sp-4) + 30px + var(--sp-3)); }
.step-n { position: absolute; top: var(--sp-4); left: var(--sp-5); font-family: var(--ff-head); font-weight: 900; font-size: var(--fs-xs); color: #fff; background: var(--clr-red); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.plan-list .step { padding-top: calc(var(--sp-4) + 30px + var(--sp-3)); }

.ticks { display: grid; gap: .6rem; }
.ticks li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-sm); }
.ticks svg { color: var(--clr-red); margin-top: .2rem; }
.on-dark .ticks svg { color: var(--clr-blush); }
.ticks.two-col { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .ticks.two-col { grid-template-columns: 1fr; } }
.area-grid { align-items: start; }
.area-note { margin-top: var(--sp-5); font-family: var(--ff-head); font-weight: 700; }

.pcard { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pcard img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.pcard-body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.pcard-body h2 { font-size: var(--fs-lg); }

/* Tiers. The middle one is the featured, most profitable choice. */
.tiers { align-items: stretch; }
.tier { background: rgba(255,255,255,.08); border: 1px solid rgba(201,218,255,.3); border-radius: var(--radius-lg); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.tier-featured { background: #fff; color: var(--clr-fg); border-color: #fff; box-shadow: var(--shadow-lg); transform: scale(1.02); }
.tier .audience { font-family: var(--ff-head); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-blush); }
.tier-featured .audience { color: var(--clr-red); }
.tier h3 { font-size: var(--fs-xl); font-weight: 900; }
.tier .ticks { flex: 1; }
.tier-featured .ticks svg { color: var(--clr-red); }
.tier .btn { width: 100%; }
.tier-featured .btn-primary { background: var(--clr-red); color: #fff; }
.tier-featured .btn-primary:hover { background: var(--clr-red-hover); color: #fff; }
.tier .quiet-link { font-size: var(--fs-sm); text-align: center; }
.on-dark .tier-featured a:not(.btn) { color: var(--clr-blue); }
.on-dark .tier-featured a:not(.btn):hover { color: var(--clr-navy); }
.tiers-close { margin-top: var(--sp-5); color: var(--clr-fg-invert-muted); max-width: none; text-align: center; }
.tiers-more { margin-top: var(--sp-3); max-width: 62ch; margin-inline: auto; }
.related { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--clr-rule); }
.related-list { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-sm); }
@media (max-width: 860px) { .tier-featured { transform: none; } }

/* Guide */
.guide-grid { align-items: start; gap: var(--sp-6); }
.side-card h3 { margin-bottom: var(--sp-3); }
.side-call { margin-top: var(--sp-4); font-family: var(--ff-head); font-weight: 700; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.quotes-page { margin-top: 0; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }
.quote { background: #fff; border: 1px solid var(--clr-rule); border-left: 4px solid var(--clr-red); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-5); box-shadow: var(--shadow-sm); }
.quote blockquote p { font-size: var(--fs-base); color: var(--clr-fg); }
.quote cite { display: block; margin-top: var(--sp-3); font-style: normal; font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-xs); color: var(--clr-blue); }
.quote-links { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-sm); max-width: none; }

/* Explanatory read more */
details.more-block { margin-top: var(--sp-4); }
details.more-block summary { cursor: pointer; font-family: var(--ff-head); font-weight: 700; color: var(--clr-red); display: inline-flex; align-items: center; gap: .5rem; list-style: none; }
details.more-block summary::-webkit-details-marker { display: none; }
details.more-block summary::after { content: "+"; font-weight: 900; }
details.more-block[open] summary::after { content: "\2212"; }
details.more-block > *:not(summary) { margin-top: var(--sp-4); }

/* FAQ and article */
.faq h3 { margin-bottom: .4rem; }
.faq p { color: var(--clr-fg-muted); }
.article h2 { font-size: var(--fs-lg); margin-bottom: .5rem; }
.contact-grid { align-items: start; gap: var(--sp-6); }
.contact-lines { margin-top: var(--sp-5); font-family: var(--ff-head); font-weight: 700; }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form-card { text-align: left; }
.on-dark .form-card { background: #fff; color: var(--clr-fg); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-lg); margin-top: var(--sp-6); }
.form { display: grid; gap: var(--sp-4); }
.form .two { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-xs); color: var(--clr-fg); }
.field input, .field select, .field textarea { font: inherit; color: var(--clr-fg); background: #fff; border: 1px solid var(--clr-border); border-radius: var(--radius); padding: .8rem .95rem; min-height: 50px; width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--clr-blue); outline-offset: 1px; border-color: var(--clr-blue); }
.form-status { font-weight: 600; padding: var(--sp-2) 0; }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { color: #1B5E20; }
.form-status[data-state="bad"] { color: var(--clr-red); }
.form-note { font-size: var(--fs-sm); color: var(--clr-fg-muted); }
.on-dark .form-card a:not(.btn) { color: var(--clr-blue); }
.on-dark .form-card .btn-primary { background: var(--clr-red); color: #fff; }
.on-dark .form-card .btn-primary:hover { background: var(--clr-red-hover); color: #fff; }
.on-dark .form-card .form-note { color: var(--clr-fg-muted); }
.on-dark .form-card .field label { color: var(--clr-fg); }

.form-compact { gap: var(--sp-3); }
.form-compact .row3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: var(--sp-3); }
.form-compact .field label { font-size: .75rem; }
.form-compact .field input, .form-compact .field select, .form-compact .field textarea { min-height: 46px; padding: .6rem .85rem; }
.form-more { border-top: 1px solid var(--clr-rule); padding-top: var(--sp-2); }
.form-more summary { cursor: pointer; list-style: none; font-family: var(--ff-head); font-weight: 700; font-size: var(--fs-xs); color: var(--clr-blue); display: inline-flex; align-items: center; gap: .4rem; }
.form-more summary::-webkit-details-marker { display: none; }
.form-more summary::after { content: "+"; font-weight: 900; }
.form-more[open] summary::after { content: "\2212"; }
.form-more > *:not(summary) { margin-top: var(--sp-3); }
.form-foot { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.form-foot .form-note { margin: 0; }
.form-card h3 { font-size: var(--fs-lg); }
.form-lead { color: var(--clr-fg-muted); margin: .25rem 0 var(--sp-4); font-size: var(--fs-sm); }
.wrap-narrow .form-card { margin-top: var(--sp-6); }
.on-dark .form-card { margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5); }
@media (max-width: 760px) { .form-compact .row3 { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } }

/* ==========================================================================
   FOOTER. The junk drawer.
   ========================================================================== */
.site-footer { background: var(--clr-navy); color: var(--clr-fg-invert); padding-block: var(--sp-7) var(--sp-5); position: relative; z-index: 2; }
.site-footer a { color: var(--clr-fg-invert-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1.2fr 1.3fr 1fr; gap: var(--sp-5); }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-family: var(--ff-head); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--clr-blush); margin-bottom: var(--sp-3); }
.site-footer h2.mt { margin-top: var(--sp-5); }
.site-footer ul { display: grid; gap: .6rem; font-size: var(--fs-sm); }
.site-footer .socials { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
.site-footer .wordmark { margin: 0 0 var(--sp-4); }
.site-footer .blurb { font-size: var(--fs-sm); color: var(--clr-fg-invert-muted); max-width: 36ch; }
.contact-block { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.9; }
.legal { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(201,218,255,.25); font-size: var(--fs-xs); color: var(--clr-fg-invert-muted); }
.legal p { max-width: none; }

/* ==========================================================================
   MOTION. Hiding is done by ADDING .pre, revealing by REMOVING it, so nothing
   can stay stuck invisible. .pre is only applied below the fold.
   ========================================================================== */
.reveal, .hero-in > * { transition: opacity .42s var(--ease), transform .42s var(--ease); }
.js .reveal.pre, .js .hero-in.pre > * { opacity: 0; transform: translateY(14px); }
.js .reveal.pre:nth-child(2) { transition-delay: .06s; }
.js .reveal.pre:nth-child(3) { transition-delay: .12s; }
.js .reveal.pre:nth-child(4) { transition-delay: .18s; }
.js .hero-in.pre > *:nth-child(2) { transition-delay: .08s; }
.js .hero-in.pre > *:nth-child(3) { transition-delay: .16s; }
.js .hero-in.pre > *:nth-child(4) { transition-delay: .24s; }
.bg { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-in > *, .card, .btn, a.card { transition: none !important; }
  .bg { transform: none !important; }
}

/* ==========================================================================
   DYNAMIC LAYER. Everything here is additive: with no JS, or under reduced
   motion, every element is already in its final, visible state.
   ========================================================================== */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; background: var(--clr-red); transform: scaleX(0); transform-origin: 0 50%; }

/* the logo rolls in once, on load (js adds .roll to html) */
.roll .site-header .logo-img { animation: roll-in .7s var(--ease) both; }
@keyframes roll-in { from { transform: translateX(-14px); opacity: 0; } to { transform: none; opacity: 1; } }

/* hero headline rises word by word (js wraps words in .w) */
.hero-in h1 .w { display: inline-block; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .hero-in.pre h1 .w { opacity: 0; transform: translateY(.45em); }
.js .hero-in:not(.pre) h1 .w { transition-delay: calc(var(--i, 0) * 70ms); }

.reveal[data-from="left"]  { --dx: -22px; --dy: 0px; }
.reveal[data-from="right"] { --dx: 22px; --dy: 0px; }
.js .reveal.pre { transform: translate(var(--dx, 0px), var(--dy, 14px)); }
.js .grid > .reveal, .js .grid > .reveal.pre { transition-delay: calc(var(--i, 0) * 80ms); }

/* the hero light: a slow red beam across the shade */
.fx-tailgate .beam { position: absolute; inset: -20%; z-index: 1; pointer-events: none; background: radial-gradient(38% 55% at 30% 40%, rgba(255,214,218,.14), transparent 70%); animation: beam 14s ease-in-out infinite alternate; }
@keyframes beam { from { transform: translate3d(-6%, -4%, 0); } to { transform: translate3d(10%, 6%, 0); } }

/* strap lines and tarp folds drift very slowly */
.fx-ratchet::after { animation: strap-drift 70s linear infinite; }
@keyframes strap-drift { from { background-position: 0 0; } to { background-position: 0 66px; } }
.fx-tarp::after { animation: fold-drift 80s linear infinite; }
@keyframes fold-drift { from { background-position: 0 0; } to { background-position: 152px 0; } }

/* the plan: a line draws across behind the three steps as they arrive */
.plan-steps { position: relative; }
.plan-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46px; height: 2px; background: linear-gradient(90deg, var(--clr-red), var(--clr-blue)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease) .2s; z-index: 0; }
.plan-steps.is-in::before { transform: scaleX(1); }
html:not(.js) .plan-steps::before { transform: scaleX(1); }
.plan-steps .step { z-index: 1; }
.plan-steps.is-in .step-n { animation: pop .5s var(--ease) both; }
.plan-steps.is-in .step:nth-child(2) .step-n { animation-delay: .35s; }
.plan-steps.is-in .step:nth-child(3) .step-n { animation-delay: .7s; }
@keyframes pop { 0% { transform: scale(.6); box-shadow: 0 0 0 0 rgba(179,18,31,.5); } 60% { transform: scale(1.12); } 100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(179,18,31,0); } }
@media (max-width: 860px) { .plan-steps::before { display: none; } }

/* value icons react to hover; the featured tier breathes */
.vcard .vicon svg, .trust-bar .tb-icon svg { transition: transform .3s var(--ease); }
.vcard:hover .vicon svg, .trust-bar li:hover .tb-icon svg { transform: rotate(-8deg) scale(1.12); }
.tier-featured { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1.02) translateY(0); } 50% { transform: scale(1.02) translateY(-6px); } }
@media (max-width: 860px) { .tier-featured { animation: none; } }

/* the tiers: a slow shine */
.fx-loadline .shine { position: absolute; top: 0; bottom: 0; width: 30%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.08), transparent); z-index: 1; pointer-events: none; animation: shine 9s ease-in-out infinite; }
@keyframes shine { 0% { left: -40%; } 60%, 100% { left: 120%; } }

/* FAQ accordions */
details.faq { border: 1px solid var(--clr-rule); border-radius: var(--radius-lg); background: #fff; padding: 0; overflow: hidden; transition: box-shadow var(--t-base), border-color var(--t-base); }
details.faq:hover { border-color: #B9C9EA; box-shadow: var(--shadow-sm); }
details.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary h3 { margin: 0; font-size: var(--fs-md); }
details.faq .faq-x { position: relative; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--clr-tint-2); transition: transform .3s var(--ease), background var(--t-fast); }
details.faq .faq-x::before, details.faq .faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--clr-red); transform: translate(-50%, -50%); }
details.faq .faq-x::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .3s var(--ease); }
details.faq[open] .faq-x { transform: rotate(180deg); background: var(--clr-red); }
details.faq[open] .faq-x::before, details.faq[open] .faq-x::after { background: #fff; }
details.faq[open] .faq-x::after { transform: translate(-50%, -50%) rotate(0deg); }
details.faq .faq-a { padding: 0 var(--sp-5) var(--sp-5); }
details.faq .faq-a p { color: var(--clr-fg-muted); }
details.faq[open] .faq-a p { animation: faq-in .3s var(--ease) both; }
@keyframes faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.site-header .wrap { transition: padding .25s var(--ease); }
.site-header.is-stuck .wrap { padding-block: .35rem; }

@media (prefers-reduced-motion: reduce) {
  .fx-tailgate .beam, .fx-loadline .shine { display: none; }
  .fx-ratchet::after, .fx-tarp::after, .tier-featured, .roll .site-header .logo-img, .plan-steps.is-in .step-n { animation: none !important; }
  .plan-steps::before { transform: scaleX(1); transition: none; }
  details.faq[open] .faq-a p { animation: none; }
  .hero-in h1 .w { transition: none; }
}

/* ==========================================================================
   SCROLL-LINKED MOTION. The page moves with the scroll wheel: headings and
   cards rise as they enter, photographs drift, the pinned hero recedes as
   the first section slides over it. Browsers without scroll timelines use
   the observer reveals in main.js instead.
   ========================================================================== */
@supports (animation-timeline: view()) {
  .section-head, .card, .tier, .quote, .related, .article > .stack > div, .cta-row, .tiers-close, .more-block, .faq, .area-note, .quote-links {
    animation: rise-in linear both; animation-timeline: view();
    animation-range: entry calc(var(--i, 0) * 5%) entry calc(55% + var(--i, 0) * 5%);
  }
  .section:not(.hero) .bg { animation: photo-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .hero .hero-in, .hero .trust-bar { animation: hero-recede linear both; animation-timeline: scroll(root); animation-range: 0 560px; }
  .hero .bg { animation: hero-bg-recede linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  .js .reveal.pre { opacity: 1; transform: none; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
@keyframes photo-drift { from { transform: translateY(-7%) scale(1.10); } to { transform: translateY(7%) scale(1.10); } }
@keyframes hero-recede { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-60px) scale(.96); } }
@keyframes hero-bg-recede { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.08); filter: brightness(.7); } }
@media (prefers-reduced-motion: reduce) {
  .section-head, .card, .tier, .quote, .related, .article > .stack > div, .cta-row, .tiers-close, .more-block, .faq, .area-note, .quote-links, .section .bg, .hero .hero-in, .hero .trust-bar { animation: none !important; }
}

/* ==========================================================================
   THE PHONE: tighter rhythm, shallower crossfade band, one column.
   ========================================================================== */
@media (max-width: 760px) {
  :root { --sp-8: 3.75rem; }
  .section + .section { margin-top: -80px; padding-top: calc(var(--sp-8) + 80px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px); mask-image: linear-gradient(180deg, transparent 0, #000 80px); }
  .section:has(+ .section) { padding-bottom: calc(var(--sp-8) + 80px); }
  .hero { min-height: 0; padding-top: 3rem; }
  .hero-in .sub { font-size: var(--fs-base); }
  .hero-in .cta-group .btn { width: 100%; }
  .trust-bar { margin-top: var(--sp-5); box-shadow: var(--shadow-md); }
  .trust-bar li { padding: var(--sp-3); }
  .trust-bar small { display: none; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.7rem; }
  .section-head { margin-bottom: var(--sp-5); }
  .card { padding: var(--sp-4); }
  .tier { padding: var(--sp-4); }
  .tier h3 { font-size: 1.5rem; }
  .plan-steps.is-in .step-n { animation: none; }
  .crumbs { font-size: .72rem; }
  .guide-grid, .contact-grid { gap: var(--sp-5); }
  .related-list { gap: var(--sp-2) var(--sp-3); }
  .site-footer { padding-block: var(--sp-6) var(--sp-4); }
  .footer-grid { gap: var(--sp-4); }
}
@media (max-width: 420px) {
  .wrap, .wrap-narrow { width: min(100% - 1.75rem, var(--wrap)); }
  h1 { font-size: 2rem; }
}