@layer tokens, base, layout, components, pages;
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/switzer-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('/fonts/switzer-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('/fonts/supreme-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('/fonts/supreme-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('/fonts/supreme-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Supreme';
  src: url('/fonts/supreme-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@layer tokens {
  :root {
    /* Brand: sampled from the original shop badge */
    --red: #BF212F;
    --red-deep: #9C1A26;
    --navy: #283A91;
    --navy-ink: #1D2C74;
    --ink: #131A33;
    --steel: #4A5370;
    --mist: #8B93AC;
    --line: #DFE2EA;
    --line-strong: #C6CBD9;
    --bone: #F4F4F1;
    --paper: #FFFFFF;

    /* dawn hero palette (Terminal-inspired dusk gradient, warmed) */
    --dawn-hi: #EEeae1;
    --dawn-warm: #E8CFA8;
    --ground: #0E1220;

    --font-display: 'Switzer', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Supreme', 'Helvetica Neue', Arial, sans-serif;
    /* The techno mono face was retired 2026-08-24 (client read it as robotic and
       dotted). Its token was removed outright so it cannot be reintroduced by
       accident; the release gate fails the build if it reappears. */

    --track-display: -0.035em;
    --track-sub: -0.02em;

    --measure: 66ch;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    /* Total flow height of the floating header: 88px of inner min-height plus its 1px
       top and bottom border. The hero pulls itself up by exactly this to sit flush with
       the top of the viewport, so the two MUST come from one number. Hard-coding -88px
       here left the hero 10px above the fold and made the sticky stage jump on the
       first scroll. The header logo is height-capped below this so art can never grow it. */
    --header-h: 90px;
    --section-pad: clamp(3.5rem, 8vw, 6.5rem);
    --wrap: 1240px;
    --wrap-wide: 1400px;

    --t-eyebrow: 0.72rem;
    --t-h1: clamp(2.5rem, 5.6vw, 4.5rem);
    --t-h2: clamp(1.85rem, 3.4vw, 2.85rem);
    --t-h3: clamp(1.12rem, 2vw, 1.3rem);
    --t-body: 1.0625rem;
    --t-small: 0.9rem;
  }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
  /* no scroll-behavior:smooth here: it corrupts ScrollTrigger refresh measurements
     when a refresh fires mid-scroll (rotation, resize, late image loads) */
  html, body { overflow-x: clip; }
  body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.65;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
  }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  a:hover { color: var(--red); }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.04;
    color: var(--ink);
    margin: 0 0 0.55em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-h1); letter-spacing: var(--track-display); }
  h2 { font-size: var(--t-h2); letter-spacing: var(--track-sub); }
  h3 { font-size: var(--t-h3); letter-spacing: -0.01em; }
  p, ul, ol { margin: 0 0 1.1em; max-width: var(--measure); }
  strong { font-weight: 700; }
  ::selection { background: var(--navy); color: #fff; }

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

@layer layout {
  .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
  .wrap--wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); margin-inline: auto; }
  .section { padding-block: var(--section-pad); }
  .section--bone { background: var(--bone); border-block: 1px solid var(--line); }
  .section--navy { background: var(--ground); color: #E4E7F2; }
  .section--navy h2, .section--navy h3 { color: #fff; }
  .section--navy a { color: #C8D2F5; }
  .grid { display: grid; gap: 1.25rem; }
  @media (min-width: 720px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }
  .split { display: grid; gap: 2.5rem; align-items: center; }
  @media (min-width: 900px) { .split { grid-template-columns: 1.05fr 0.95fr; } .split--rev > :first-child { order: 2; } }

  /* Section heading kit: small mono index + tight display heading */
  .kicker {
    font-family: var(--font-body);
    font-size: var(--t-eyebrow);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--red);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
  }
  .kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--red); flex: none; }
  .section--navy .kicker { color: #F0A9B0; }
  .lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--steel); max-width: 56ch; line-height: 1.55; }
  .section--navy .lede { color: #AEB7D8; }
}

@layer components {
  .cta-band { background: var(--red); color: #fff; }
  .cta-band .wrap--wide {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 1.5rem; padding-block: clamp(2.4rem, 5vw, 3.4rem);
  }
  .cta-band h2 { color: #fff; margin: 0; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: var(--track-sub); }
  .cta-band p { margin: 0.4rem 0 0; color: #FBD9DC; max-width: 52ch; }
  .cta-band .btn--navy { background: #fff; color: var(--red); border-color: #fff; }
  .cta-band .btn--navy:hover { background: var(--ground); color: #fff; border-color: var(--ground); }
  .cta-band .btn--ghost-light:hover { color: var(--red); }

  .phone-xl {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.5rem, 3.6vw, 2.3rem);
    letter-spacing: -0.02em;
    color: #fff; text-decoration: none; white-space: nowrap;
  }
  .phone-xl:hover { color: var(--ground); }

  /* Terminal-style big-numeral stats */
  .stat-row { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
  @media (min-width: 720px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
  .stat { background: var(--paper); padding: 1.8rem 1.5rem; }
  .stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -0.03em; color: var(--ink); line-height: 1; margin-bottom: 0.55rem; }
  .stat b em { font-style: normal; color: var(--red); }
  .stat span { font-size: var(--t-small); color: var(--steel); display: block; max-width: 34ch; }
  .stat .stat__tag { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; letter-spacing: 0; color: var(--mist); display: block; margin-bottom: 0.7rem; }
}

@layer components {
  /* Four-up stat row. The base .stat-row is a three-column grid, so adding the in-shop
     warranty card left it stranded alone on a second row. Two-up in the middle range
     keeps the pairs even rather than dropping a single orphan again at tablet widths. */
  @media (min-width: 720px) and (max-width: 1039px) {
    .stat-row--4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 1040px) {
    .stat-row--4 { grid-template-columns: repeat(4, 1fr); }
  }
  /* This card's value is a phrase, not a figure, so it needs a smaller size than the
     3.4rem the numeric stats use or it wraps to four lines. */
  .stat--long b { font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.15; }
}

@layer components {
  /* Rocky-led identity (2026-08-24). Live type, not a baked image: stays crisp,
     stays selectable, and lets the mascot animate independently. */
  .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
  .brand__rocky {
    width: clamp(40px, 4.4vw, 52px); height: auto; flex: none;
    transform-origin: 50% 85%;
    animation: rocky-idle 5.5s ease-in-out infinite;
  }
  .brand:hover .brand__rocky { animation: rocky-perk 620ms ease-in-out; }
  .brand__type { display: flex; flex-direction: column; line-height: 1; }
  .brand__name {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.22rem, 2vw, 1.5rem); letter-spacing: -0.03em; color: var(--navy);
  }
  .brand__sub {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(0.54rem, 0.82vw, 0.66rem); letter-spacing: 0.17em;
    text-transform: uppercase; color: var(--ink); margin-top: 0.28rem;
  }

  /* idle: a slow breath so he feels alive without pulling focus */
  @keyframes rocky-idle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-2px) rotate(-1.2deg); }
  }
  /* hover: quick ear-perk */
  @keyframes rocky-perk {
    0%   { transform: translateY(0) rotate(0deg) scale(1); }
    35%  { transform: translateY(-4px) rotate(-5deg) scale(1.06); }
    70%  { transform: translateY(-1px) rotate(3deg) scale(1.02); }
    100% { transform: translateY(0) rotate(0deg) scale(1); }
  }

  /* Big mascot: used on the hiring band and the Rocky section */
  .mascot { display: block; width: 100%; height: auto; }
  .mascot--float { animation: rocky-float 6s ease-in-out infinite; transform-origin: 50% 90%; }
  @keyframes rocky-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-9px) rotate(-1.5deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .brand__rocky, .mascot--float { animation: none !important; }
    .brand:hover .brand__rocky { animation: none; }
  }
}

@layer components {
  .hiring__rocky { width: clamp(110px, 13vw, 168px); height: auto; flex: none; order: -1; }
  .about__rocky { width: clamp(130px, 16vw, 200px); height: auto; margin-top: 1.2rem; }
  @media (max-width: 720px) { .hiring__rocky { width: 104px; } }
}

@layer components {
  /* Home page brand band (client revision 2026-08-25: "use this bigger logo on the home
     page"). The reversed lockup is drawn for a dark ground, so it gets one, and it is
     sized to be the largest instance of the mark anywhere on the site: in the header it
     is 68px tall, here it is up to 190px. */
  .brand-band {
    background: var(--ground);
    border-block: 1px solid rgba(255, 255, 255, 0.10);
    text-align: center;
  }
  .brand-band .wrap--wide {
    padding-block: clamp(2.6rem, 5vw, 4.2rem);
    display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  }
  .brand-band__mark {
    width: auto;
    height: clamp(88px, 13vw, 190px);
    max-width: 92%;
    object-fit: contain;
    display: block;
  }
  .brand-band p {
    margin: 0;
    max-width: 60ch;
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body);
    font-size: 0.95rem;
  }
}

@layer components {
  /* Terminal-scale buttons: small mono label, generous horizontal padding */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.98rem;
    letter-spacing: -0.005em;
    text-decoration: none;
    padding: 0.82rem 1.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear;
  }
  .btn--red { background: var(--red); color: #fff; border-color: var(--red); }
  .btn--red:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
  .btn--navy { background: var(--ink); color: #fff; border-color: var(--ink); }
  .btn--navy:hover { background: var(--navy-ink); border-color: var(--navy-ink); color: #fff; }
  .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
  .btn--ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
  .btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.55); }
  .btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
}

@layer components {
  .card {
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 1.5rem 1.4rem 1.35rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 140ms linear, background-color 140ms linear;
  }
  .card::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: transparent; transition: background-color 140ms linear; }
  a.card:hover { border-color: var(--line-strong); background: var(--bone); color: var(--ink); }
  a.card:hover::before { background: var(--red); }
  .card__num {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--mist);
  }
  .card h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
  .card p { margin: 0; font-size: var(--t-small); color: var(--steel); max-width: none; }
  .card__go { margin-top: auto; padding-top: 0.8rem; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; letter-spacing: -0.005em; color: var(--red); }
  a.card:hover .card__go { text-decoration: underline; text-underline-offset: 4px; }

  .panel { background: var(--paper); border: 1px solid var(--line-strong); padding: clamp(1.5rem, 3vw, 2.4rem); position: relative; }
  .panel--navy { background: var(--ground); border-color: var(--ground); color: #E4E7F2; }
  .panel--navy h3 { color: #fff; }
  .panel--bone { background: var(--bone); }

  .media-frame { border: 1px solid var(--line-strong); position: relative; }
  .media-frame img { width: 100%; object-fit: cover; }
  .media-frame::before { content: ""; position: absolute; left: -1px; top: -1px; width: 20px; height: 20px; border-left: 3px solid var(--red); border-top: 3px solid var(--red); z-index: 2; }
}

@layer components {
  /* Scroll-driven exploded truck hero. The section is a 380vh runway; the stage is
     sticky and GSAP scrubs part transforms. Without JS (or with reduced motion) the
     stage is a complete static hero: truck + headline, parts hidden. */
  .xhero { height: 380vh; position: relative; margin-top: calc(var(--header-h) * -1); }
  .xhero__stage {
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
    background:
      linear-gradient(to bottom,
        var(--dawn-hi) 0%, #EDE3D2 34%, var(--dawn-warm) 58%, #C9A97E 72%, var(--ground) 72.2%, #0B0F1B 100%);
  }
  .xhero__copy {
    position: absolute; z-index: 5;
    left: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2));
    top: clamp(6.5rem, 16vh, 10rem);
    max-width: 560px;
  }
  .xhero .btn--ghost { background: rgba(255, 255, 255, 0.78); border-color: rgba(19, 26, 51, 0.3); }
  .xhero .btn--ghost:hover { background: var(--ink); border-color: var(--ink); }
  .xhero__eyebrow {
    font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--red);
    margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.6rem;
  }
  .xhero__eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--red); }
  .xhero__copy h1 { color: var(--ink); margin-bottom: 0.5em; }
  .xhero__copy .lede { color: #4E4636; }
  .xhero__copy .btn-row { margin-top: 1.7rem; }
  .xhero__hint {
    margin-top: 2.2rem; font-family: var(--font-body); font-size: 0.66rem;
    letter-spacing: 0.12em; text-transform: uppercase; color: #7A6B50;
    display: flex; align-items: center; gap: 0.55rem;
  }
  .xhero__hint::after { content: ""; width: 1px; height: 2rem; background: #7A6B50;
    animation: xhero-drip 1.8s ease-in-out infinite; transform-origin: top; }
  @keyframes xhero-drip { 0% { transform: scaleY(0.2); opacity: 0; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .xhero__hint::after { animation: none; } }

  /* Hours, top-right of the hero.
     No panel: the client asked for the box off and the time bigger, so this is set as
     hero typography sitting straight on the gradient, mirroring .xhero__copy across the
     wrap. It belongs to the hero's ARRIVAL state, so the scrub timeline fades it out with
     the copy rather than leaving it to collide with the parts that fan into this same
     upper-right area from 27% of the timeline onward. */
  .xhero__hours {
    position: absolute; z-index: 5;
    right: max(var(--gutter), calc((100% - var(--wrap-wide)) / 2));
    top: clamp(6.5rem, 16vh, 10rem);
    width: min(22rem, 30vw);
    text-align: right;
  }
  .xhero__hours-eyebrow {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.55rem;
    margin: 0 0 0.9rem;
    font-family: var(--font-body); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--red);
  }
  .xhero__hours-days {
    margin: 0;
    font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
    color: #4E4636;
  }
  /* The time is the point of the block, so it is set at headline scale. Tabular figures
     keep the two times optically aligned; proportional digits make "7:00" and "4:00"
     sit at visibly different widths at this size. */
  .xhero__hours-time {
    margin: 0.15rem 0 0.35rem;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.7rem, 2.5vw, 2.5rem);
    line-height: 1.04;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
  }
  .xhero__hours-time span {
    display: block;
    font-family: var(--font-body); font-weight: 500;
    font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--red);
    margin: 0.1rem 0;
  }
  .xhero__hours-closed {
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(19, 26, 51, 0.16);
    font-family: var(--font-body); font-size: 0.9rem; color: #6B6350;
  }
  .xhero__hours-foot {
    margin: 0.7rem 0 0; font-family: var(--font-body); font-size: 0.76rem;
    line-height: 1.5; color: #857A62;
  }
  /* Below this width the headline already owns the full stage: there is no dead
     space left to put it in, and the hours card lower down plus the footer both
     carry the same information. */
  @media (max-width: 1100px) { .xhero__hours { display: none; } }

  .xhero__scene { position: absolute; inset: 0; z-index: 2; }
  /* The tractor is anchored to the RIGHT of the copy column, not to a percentage of the
     stage. Client revision 2026-08-25: at every desktop width the nose was sitting on top
     of the lede and the "Schedule a visit" button. The copy column is a FIXED 560px plus
     gutter, so the clearance has to be expressed in px (41rem covers copy + gutter + a
     gap); a vw-based position drifts back over the text as the viewport narrows.
     The exploded parts are children of this rig, so moving it moves the whole fan: the
     --tx offsets below were retuned by measurement to match. */
  .xhero__rig {
    position: absolute; left: auto; right: 0; bottom: 6vh; transform: none;
    width: min(55vw, calc(100vw - 41rem)); aspect-ratio: 1169 / 564;
  }
  .xhero__body {
    position: absolute; inset: 0; width: 100%; height: auto; z-index: 1;
    filter: drop-shadow(0 22px 34px rgba(11, 15, 27, 0.45));
  }
  .xhero__hood {
    position: absolute; left: 0; top: 34.57%; width: 25.66%; height: auto; z-index: 3;
    transform-origin: 3% 90%;
    filter: drop-shadow(0 10px 16px rgba(11, 15, 27, 0.3));
  }
  /* Each part is a real link to the service page that covers it.
     visibility:hidden (not just opacity:0) is load-bearing: an opacity-0 link with
     pointer events is an invisible click-blocker sitting over the hero CTAs. GSAP's
     autoAlpha flips visibility back on as each part animates in, so the parts become
     clickable and tabbable at exactly the moment they become visible, and stay inert
     with JS off or reduced motion on. */
  .xhero__part {
    position: absolute; left: 15%; top: 55%; z-index: 4;
    margin: 0; opacity: 0; visibility: hidden;
    transform: translate(-50%, -50%) scale(0.5);
    width: var(--pw, 12vw);
    text-decoration: none; display: block;
  }
  .xhero__part-label { transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear; }
  @media (prefers-reduced-motion: reduce) { .xhero__part-label { transition: none; } }
  .xhero__part:hover .xhero__part-label,
  .xhero__part:focus-visible .xhero__part-label {
    background: var(--red); color: #fff; border-top-color: var(--red);
  }
  .xhero__part:focus-visible { outline: 3px solid var(--navy); outline-offset: 6px; }
  .xhero__part img { width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(11, 15, 27, 0.32)); }
  .xhero__part-label {
    font-family: var(--font-body); font-size: 0.62rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
    border-top: 1px solid var(--ink); padding-top: 0.35rem; margin-top: 0.45rem;
    background: rgba(255, 255, 255, 0.55); display: inline-block; padding-inline: 0.3rem;
    white-space: nowrap;
  }
  .xhero__end {
    position: absolute; z-index: 4; left: 50%; bottom: 10vh; transform: translateX(-50%);
    text-align: center; opacity: 0; width: min(92vw, 700px);
  }
  .xhero__end p {
    font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-sub);
    font-size: clamp(1.3rem, 2.6vw, 2rem); color: #fff; margin: 0 0 1rem; max-width: none;
    text-shadow: 0 2px 20px rgba(11, 15, 27, 0.65);
  }
  /* JS ready: hand initial states to the timeline */
  .js .xhero--armed .xhero__part { opacity: 0; }

  /* Static fallbacks: no JS, or reduced motion -> plain composed hero */
  @media (prefers-reduced-motion: reduce) {
    .xhero { height: auto; }
    .xhero__stage { position: relative; height: 100vh; }
  }
  html:not(.js) .xhero { height: auto; }
  html:not(.js) .xhero__stage { position: relative; height: 100vh; min-height: 640px; }
  html:not(.js) .xhero__part, html:not(.js) .xhero__end { display: none; }

  /* part sizing */
  .xhero__part[data-part="engine"] { --pw: clamp(100px, 9.6vw, 200px); }
  .xhero__part[data-part="transmission"] { --pw: clamp(95px, 9.0vw, 185px); }
  .xhero__part[data-part="turbo"] { --pw: clamp(62px, 6.2vw, 125px); }
  .xhero__part[data-part="radiator"] { --pw: clamp(70px, 7.0vw, 140px); }
  .xhero__part[data-part="driveshaft"] { --pw: clamp(105px, 9.6vw, 200px); }
  .xhero__part[data-part="brake"] { --pw: clamp(66px, 6.8vw, 135px); }
  .xhero__part[data-part="dpf"] { --pw: clamp(66px, 6.8vw, 135px); }
  .xhero__part[data-part="springs"] { --pw: clamp(78px, 8.2vw, 160px); }

  /* exploded targets (read by JS): vw/vh offsets from the engine-bay anchor */
  .xhero__part[data-part="engine"] { --tx: -46.0; --ty: -30; --rot: -5; }
  .xhero__part[data-part="transmission"] { --tx: -34.0; --ty: -38; --rot: 4; }
  .xhero__part[data-part="turbo"] { --tx: -22.0; --ty: -46; --rot: -8; }
  .xhero__part[data-part="radiator"] { --tx: -10.0; --ty: -50; --rot: 6; }
  .xhero__part[data-part="driveshaft"] { --tx: 2.0; --ty: -50; --rot: -4; }
  .xhero__part[data-part="brake"] { --tx: 14.0; --ty: -46; --rot: 8; }
  .xhero__part[data-part="dpf"] { --tx: 26.0; --ty: -38; --rot: 3; }
  .xhero__part[data-part="springs"] { --tx: 38.0; --ty: -30; --rot: -3; }

  /* Narrow desktop (1101px to 1300px). The rig is clamped narrow here to stay clear of
     the copy column, but --tx is in vw, so the same fan that fits at 1440 threw the
     right-hand parts off the edge. Measured: springs overran by 37px at 1152 and 60px at
     1101. Pull the whole fan in rather than only the offender, so the spacing stays even. */
  @media (min-width: 1101px) and (max-width: 1300px) {
    .xhero__part[data-part="engine"]       { --tx: -38.0; }
    .xhero__part[data-part="transmission"] { --tx: -28.0; }
    .xhero__part[data-part="turbo"]        { --tx: -18.0; }
    .xhero__part[data-part="radiator"]     { --tx: -8.0; }
    .xhero__part[data-part="driveshaft"]   { --tx: 2.0; }
    .xhero__part[data-part="brake"]        { --tx: 12.0; }
    .xhero__part[data-part="dpf"]          { --tx: 21.0; }
    .xhero__part[data-part="springs"]      { --tx: 30.0; }
  }

  /* Responsive fans below. NOTE: the per-part sizing rules above use
     .xhero__part[data-part="x"] (specificity 0,2,0), so every override here must use the
     same attribute selector or it silently loses the cascade. */

  /* ---- Tablet portrait (solved at 768x1024) ---- */
  @media (min-width: 721px) and (max-width: 1100px) and (min-height: 801px) {
    .xhero__rig { width: 72vw; left: 50%; transform: translateX(-50%); }
    .xhero__part[data-part="engine"]       { --tx: -14; --ty: -29; }
    .xhero__part[data-part="transmission"] { --tx: 5;   --ty: -35; }
    .xhero__part[data-part="turbo"]        { --tx: 11;  --ty: -48; }
    .xhero__part[data-part="radiator"]     { --tx: 25;  --ty: -45; }
    .xhero__part[data-part="driveshaft"]   { --tx: 43;  --ty: -40; }
    .xhero__part[data-part="brake"]        { --tx: 50;  --ty: -29; }
    .xhero__part[data-part="dpf"]          { --tx: -14; --ty: -18; }
    .xhero__part[data-part="springs"]      { --tx: 54;  --ty: -13; }
  }

  /* ---- Short / landscape tablet (solved at 1024x768) ---- */
  @media (min-width: 721px) and (max-width: 1100px) and (max-height: 800px) {
    .xhero__rig { width: 64vw; left: 50%; transform: translateX(-50%); }
    .xhero__part[data-part="engine"]       { --tx: -16; --ty: -47; }
    .xhero__part[data-part="transmission"] { --tx: 0;   --ty: -42; }
    .xhero__part[data-part="turbo"]        { --tx: 14;  --ty: -46; }
    .xhero__part[data-part="radiator"]     { --tx: 26;  --ty: -45; }
    .xhero__part[data-part="driveshaft"]   { --tx: 41;  --ty: -36; }
    .xhero__part[data-part="brake"]        { --tx: 55;  --ty: -47; }
    .xhero__part[data-part="dpf"]          { --tx: -14; --ty: -24; }
    .xhero__part[data-part="springs"]      { --tx: 56;  --ty: -32; }
  }

  /* ---- Mobile portrait: all eight parts in a 2 x 4 exploded grid above the truck ---- */
  @media (max-width: 720px) {
    .xhero { height: 320vh; }
    .xhero__rig { width: 92vw; left: 50%; transform: translateX(-50%); bottom: 4vh; }
    .xhero__copy { top: 5.2rem; right: var(--gutter); max-width: none; }
    .xhero__part-label { font-size: 0.5rem; letter-spacing: 0.05em; padding-top: 0.22rem; margin-top: 0.28rem; }

    /* column 1 at ~25vw, column 2 at ~72vw; rows sized to clear the tallest part in each */
    .xhero__part[data-part="engine"]       { --pw: 21vw; --tx: 7;  --ty: -68; --rot: -4; }
    .xhero__part[data-part="transmission"] { --pw: 21vw; --tx: 54; --ty: -68; --rot: 3; }
    .xhero__part[data-part="radiator"]     { --pw: 19vw; --tx: 7;  --ty: -54; --rot: 4; }
    .xhero__part[data-part="turbo"]        { --pw: 17vw; --tx: 54; --ty: -54; --rot: -5; }
    .xhero__part[data-part="driveshaft"]   { --pw: 28vw; --tx: 7;  --ty: -40; --rot: -2; }
    .xhero__part[data-part="brake"]        { --pw: 18vw; --tx: 54; --ty: -40; --rot: 5; }
    .xhero__part[data-part="dpf"]          { --pw: 24vw; --tx: 7;  --ty: -22; --rot: 2; }
    .xhero__part[data-part="springs"]      { --pw: 26vw; --tx: 54; --ty: -22; --rot: -3; }
  }

  /* Short phones: solved layout, scaled so row one clears the header */
  @media (max-width: 720px) and (max-height: 800px) {
    .xhero__part[data-part="engine"]        { --pw: 16vw; --tx: 7; --ty: -62; }
    .xhero__part[data-part="transmission"]  { --pw: 16vw; --tx: 54; --ty: -65; }
    .xhero__part[data-part="radiator"]      { --pw: 15vw; --tx: 7; --ty: -46; }
    .xhero__part[data-part="turbo"]         { --pw: 13vw; --tx: 60; --ty: -52; }
    .xhero__part[data-part="driveshaft"]    { --pw: 22vw; --tx: 7; --ty: -38; }
    .xhero__part[data-part="brake"]         { --pw: 14vw; --tx: 54; --ty: -35; }
    .xhero__part[data-part="dpf"]           { --pw: 19vw; --tx: 7; --ty: -27; }
    .xhero__part[data-part="springs"]       { --pw: 20vw; --tx: 54; --ty: -19; }
  }

  /* Landscape phones: too short to stack, so one row of eight above the truck */
  @media (max-width: 950px) and (orientation: landscape) and (max-height: 560px) {
    .xhero { height: 300vh; }
    .xhero__rig { width: 46vw; left: 50%; transform: translateX(-50%); bottom: 3vh; }
    .xhero__copy { top: 4.4rem; max-width: 44vw; }
    .xhero__part-label { font-size: 0.44rem; }
    .xhero__part[data-part="engine"]       { --pw: 8vw;  --tx: -27; --ty: -39; }
    .xhero__part[data-part="transmission"] { --pw: 8vw;  --tx: -15; --ty: -39; }
    .xhero__part[data-part="turbo"]        { --pw: 7vw;  --tx: -3;  --ty: -39; }
    .xhero__part[data-part="radiator"]     { --pw: 8vw;  --tx: 9;   --ty: -39; }
    .xhero__part[data-part="driveshaft"]   { --pw: 9vw;  --tx: 21;  --ty: -39; }
    .xhero__part[data-part="brake"]        { --pw: 8vw;  --tx: 33;  --ty: -39; }
    .xhero__part[data-part="dpf"]          { --pw: 10vw; --tx: 45;  --ty: -39; }
    .xhero__part[data-part="springs"]      { --pw: 10vw; --tx: 56;  --ty: -39; }
  }

  /* --- Hero clearance pass, client revision 2026-08-28 ----------------------
     Reported: "move the semi back where the truck clears the writing".
     Measured cause is VERTICAL, not horizontal. Between 901px and 1100px the
     desktop-scale headline pushes the CTA down into the tractor, and on
     wide-but-short screens the full-bleed tractor rises behind the hours card.
     So the headline is scaled for those bands rather than the tractor moved:
     the exploded fan is tuned in vw against the rig, and shifting or resizing
     the rig throws every part off its solved position (measured: shifting the
     rig right put up to 2 parts off-screen by 44px). Verified clean across 31
     viewports from 320x568 to 1920x1080. */
  @media (min-width: 901px) and (max-width: 1100px) {
    .xhero__copy h1 { font-size: 2.9rem; }
    .xhero__rig { bottom: 1vh; }
  }
  @media (min-width: 901px) and (max-width: 1100px) and (max-height: 820px) {
    .xhero__copy h1 { font-size: 2.3rem; }
    .xhero__copy .lede { font-size: 1rem; }
    .xhero__rig { bottom: 0; }
  }
  /* Wide but short: the tractor was rising behind the shop-hours card. */
  @media (min-width: 1101px) and (max-height: 920px) {
    .xhero__rig { width: min(50vw, calc(100vw - 41rem)); bottom: 4vh; }
  }

  /* The sticky header ends at 102px (0.75rem offset + 90px bar). The hero copy
     started at 5.2rem = 83px, so the eyebrow ran UNDER the header on every
     phone from 320px to 720px. Found while measuring the tractor clearance. */
  @media (max-width: 720px) {
    .xhero__copy { top: 7rem; }
  }
  @media (max-width: 720px) and (min-height: 801px) {
    .xhero__part[data-part="engine"]       { --ty: -60; }
    .xhero__part[data-part="transmission"] { --ty: -60; }
  }
  /* On the smallest phones a 100vh hero cannot hold the copy AND clear the
     tractor: at 320x568 the CTA would need the truck reduced to a 23px sliver.
     So stop fighting the overlap there and make the CTA read against it. The
     ghost button is normally 78% white, which goes muddy over the white cab. */
  @media (max-width: 420px) {
    .xhero .btn--ghost { background: #fff; border-color: var(--ink); }
  }

  /* Smallest phones: the headline wrapped so far the CTA fell off the screen. */
  @media (max-width: 380px) {
    .xhero__copy h1 { font-size: 1.95rem; }
    .xhero__copy .lede { font-size: 0.95rem; }
    .xhero__part[data-part="engine"]       { --ty: -58; }
    .xhero__part[data-part="transmission"] { --ty: -60; }
  }
}

@layer components {
  .faq { border: 1px solid var(--line-strong); border-bottom: none; max-width: 860px; }
  .faq details { border-bottom: 1px solid var(--line-strong); background: var(--paper); }
  .faq summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: baseline; gap: 0.9rem;
    padding: 1.1rem 1.3rem;
    font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::before { content: "+"; font-family: var(--font-body); color: var(--red); font-size: 1.15rem; flex: none; }
  .faq details[open] summary::before { content: "-"; }
  .faq details[open] summary { color: var(--navy); }
  .faq .faq__a { padding: 0 1.3rem 1.3rem 3.2rem; color: var(--steel); }
  .faq .faq__a p:last-child { margin-bottom: 0; }
}

@layer components {
  /* Waving flag.
     One animation on the shared .flag component, so every instance sitewide comes alive
     at once: the footer flagline on all 67 pages, the hero hours card, the Now Hiring
     band, the GSA credential mark and the exit prompt.

     The wave is a transform on the SVG itself rather than a per-stripe ripple. Moving the
     stripes individually opens hairline gaps between them at these sizes (the flag renders
     between 19px and 44px wide), and a gap reads as a rendering bug, not as cloth. A
     rotateY sweep hinged on the left edge, hinged where a real flag meets its pole, plus a
     small skew and a brightness breath for light catching the fabric, gives the motion
     without ever breaking the geometry.

     The stars here are dots, not five-pointed stars, and that is deliberate and
     load-bearing: star emblems are prohibited company-wide. Do not "fix" them. */
  .flag {
    transform-origin: left center;
    animation: flag-wave 4.8s ease-in-out infinite;
    /* Promote once: this element animates on every page, in the footer of all of them. */
    will-change: transform, filter;
  }

  @keyframes flag-wave {
    0%   { transform: perspective(64px) rotateY(0deg)   skewY(0deg);    filter: brightness(1); }
    25%  { transform: perspective(64px) rotateY(-10deg) skewY(-1.5deg); filter: brightness(1.07); }
    50%  { transform: perspective(64px) rotateY(0deg)   skewY(0deg);    filter: brightness(1); }
    75%  { transform: perspective(64px) rotateY(10deg)  skewY(1.5deg);  filter: brightness(0.95); }
    100% { transform: perspective(64px) rotateY(0deg)   skewY(0deg);    filter: brightness(1); }
  }

  /* Stagger the instances that share a viewport so they do not beat in lockstep, which
     is the thing that makes multiple animated flags look like a template. */
  .hours-card__eyebrow .flag,
  .xhero__hours-eyebrow .flag { animation-delay: -1.1s; }
  .hiring__flag .flag         { animation-delay: -2.3s; }
  .prompt__eyebrow .flag      { animation-delay: -3.4s; }
  .cred__mark .flag           { animation-delay: -0.6s; }

  /* The credential mark is the one place the flag is the subject rather than a bullet,
     so give it room to actually read as a flag. */
  .cred__mark .flag { width: 44px; }

  /* Flag-stripe texture. Very low contrast on purpose: this is meant to register as
     woven texture behind the type, not as a decorative flag. Anything louder turns a
     procurement page into a bunting advert. */
  .cred,
  .hiring { position: relative; isolation: isolate; }
  .cred::before,
  .hiring::before {
    content: "";
    position: absolute;
    inset: -2rem -50% -2rem -2rem;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(
      -12deg,
      currentColor 0 2px,
      transparent 2px 22px
    );
    opacity: 0.045;
    animation: flag-drift 26s linear infinite;
  }
  .cred::before { color: #FFFFFF; }
  .hiring::before { color: var(--red); opacity: 0.05; }

  @keyframes flag-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-88px); }
  }

  /* Motion is decoration here, never information: with reduced motion the flags simply
     sit still and the texture stops drifting. Nothing is lost. */
  @media (prefers-reduced-motion: reduce) {
    .flag { animation: none; }
    .cred::before, .hiring::before { animation: none; }
  }
}

@layer components {
  /* American flag mark (revision 1). Sized in em so it tracks its label. */
  .flag {
    width: 1.65em; height: auto; display: inline-block; vertical-align: -0.18em;
    border: 1px solid rgba(19, 26, 51, 0.18); flex: none;
  }
  .footer .flag { border-color: rgba(255, 255, 255, 0.25); }
  .footer__flagline { display: inline-flex; align-items: center; gap: 0.5rem; }

  /* Hours card, right column of the home intro (revision 0) */
  .hours-card {
    margin-top: 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-top: 4px solid var(--navy);
    padding: 1.35rem 1.4rem 1.5rem;
  }
  .hours-card__eyebrow {
    display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.9rem;
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--red);
  }
  .hours-card__table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
  .hours-card__table td { padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
  .hours-card__table td:last-child { text-align: right; white-space: nowrap; }
  .hours-card__table b { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; }
  .hours-card__addr { margin: 0 0 1rem; font-size: var(--t-small); color: var(--steel); max-width: none; }
  .hours-card__note { margin: 1rem 0 0; font-size: 0.85rem; color: var(--mist); max-width: none; }
  @media (min-width: 900px) { .hours-card { margin-top: 1.4rem; } }
}

@layer components {
  .prefooter { background: var(--paper); border-top: 1px solid var(--line); }
  .footer { background: var(--ink); color: #B9C0D6; font-size: 0.92rem; }
  .footer a { color: #DDE2F0; text-decoration: none; }
  .footer a:hover { color: #F0A9B0; }
  .footer .wrap--wide { padding-block: 3.5rem 2rem; }
  .footer__grid { display: grid; gap: 2.2rem; }
  @media (min-width: 860px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
  .footer h4 { color: #fff; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.9rem; }
  .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
  .footer__brand img { width: 74px; height: 74px; margin-bottom: 0.9rem; }
  .footer__brand p { max-width: 34ch; }
  .footer__legal {
    margin-top: 2.6rem; padding-top: 1.4rem;
    border-top: 1px solid rgba(255,255,255,0.14);
    display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between;
    font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0; color: #8C93AE;
  }
}

@layer components {
  /* Reversed full-body lockup on the dark footer ground */
  .footer__brand .footer__lockup { width: auto; height: clamp(64px, 7vw, 88px); margin-bottom: 1.1rem; display: block; }
}

@layer components {
  .form { display: grid; gap: 1rem; }
  @media (min-width: 720px) { .form { grid-template-columns: 1fr 1fr; } .form .form__full { grid-column: 1 / -1; } }
  .field { display: flex; flex-direction: column; gap: 0.35rem; }
  .field label { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; letter-spacing: 0; color: var(--steel); }
  .field input, .field select, .field textarea {
    font-family: var(--font-body); font-size: 1rem; color: var(--ink);
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    width: 100%;
  }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); outline: 2px solid var(--navy); outline-offset: 0; }
  .field textarea { min-height: 140px; resize: vertical; }
  .form__note { font-size: 0.85rem; color: var(--mist); margin: 0; }
}

@layer components {
  .field__hint { font-size: 0.8rem; color: var(--mist); line-height: 1.45; }
  .field input:invalid:not(:placeholder-shown) { border-color: var(--red); }

  /* Now hiring band (revision 7) */
  .hiring { background: var(--bone); border-block: 1px solid var(--line); }
  .hiring .wrap--wide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(2.2rem, 4vw, 3rem); }
  .hiring h2 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
  .hiring p { margin: 0; color: var(--steel); max-width: 56ch; }
  .hiring__flag { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
}

@layer components {
  /* Honeypot. In the markup rather than injected by script so the no-JS POST is
     protected too. Taken out of the layout, out of the tab order and off screen,
     but NOT display:none: some bots skip fields that are display:none. */
  .form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
}

@layer components {
  /* Floating Terminal-style bar: detached, translucent, square-cornered */
  .header {
    position: sticky;
    top: 0.75rem;
    z-index: 60;
    width: min(100% - 1.5rem, 1400px);
    margin-inline: auto;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(19, 26, 51, 0.14);
    box-shadow: 0 1px 0 rgba(19, 26, 51, 0.04);
  }
  .header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: calc(var(--header-h) - 2px); padding-inline: 1.1rem; }
  .brand { display: flex; align-items: center; text-decoration: none; color: var(--ink); }
  /* Full-body Rocky lockup: the mascot IS the logo, so give it real height */
  .brand .brand__lockup { width: auto; height: clamp(56px, 5.6vw, 76px); display: block; }
  @media (max-width: 620px) { .brand .brand__lockup { height: 46px; } }


  .nav { margin-left: auto; }
  .nav ul { list-style: none; display: flex; gap: 1.35rem; margin: 0; padding: 0; align-items: center; }
  .nav a:not(.btn) {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-decoration: none;
    color: var(--ink);
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
  }
  .nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
  /* Conversion cluster. Two actions sit here on desktop; the drawer repeats them
     as .nav__cta because this whole cluster is hidden below 1021px. */
  .header__actions { display: flex; align-items: center; gap: 0.55rem; flex: none; margin-left: 1.1rem; }
  .header__cta { flex: none; }
  .header__quote { flex: none; white-space: nowrap; }
  /* Seven links plus two buttons is a lot of bar. Let the link gap breathe on wide
     screens and tighten it before anything can collide on narrower desktops. */
  .nav ul { gap: clamp(0.8rem, 1.15vw, 1.35rem); }
  @media (max-width: 1220px) {
    .nav a:not(.btn) { font-size: 0.9rem; }
    .header__quote { display: none; }
  }

  .nav-toggle { display: none; }
  .nav-burger { display: none; }

  @media (max-width: 1020px) {
    /* backdrop-filter would make .header the containing block for the fixed nav; keep it solid here */
    .header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.97); }
    .nav { position: fixed; inset: 0; background: var(--ground); padding: 6.5rem var(--gutter) 2rem; transform: translateX(100%); transition: transform 200ms ease; margin: 0; }
    @media (prefers-reduced-motion: reduce) { .nav { transition: none; } }
    .nav ul { flex-direction: column; gap: 0.4rem; align-items: stretch; }
    .nav a:not(.btn) { color: #fff; font-size: 1.3rem; display: block; padding: 0.7rem 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
    .nav-toggle:checked ~ .nav { transform: translateX(0); }
    .nav-burger {
      display: flex; flex-direction: column; justify-content: center; gap: 5px;
      width: 44px; height: 44px; margin-left: auto; cursor: pointer; z-index: 70; position: relative;
    }
    .nav-burger span { display: block; height: 2px; background: var(--ink); }
    .nav-toggle:checked ~ .nav-burger span { background: #fff; }
    .header__actions { display: none; }
    .nav .nav__cta { margin-top: 1.4rem; border-bottom: none; }
  }
  @media (min-width: 1021px) { .nav .nav__cta { display: none; } }
}

@layer components {
  /* Rocky lockup (client pick 2026-08-20), sized by HEIGHT on purpose.
     A width-driven logo lets the artwork's aspect ratio decide the header height, so
     lengthening the wordmark (adding "Inc.") silently grew the bar past the negative
     top offset .xhero uses to sit under it. Fixing the height instead means the bar is
     88px whatever the art does, and the width simply follows. */
  .brand .brand__lockup { height: clamp(52px, 5.2vw, 68px); width: auto; }
  @media (max-width: 620px) { .brand .brand__lockup { height: 44px; } }
}

@layer components {
  /* Interior page hero: light, typographic, Terminal-style */
  .hero--page { background: var(--bone); border-bottom: 1px solid var(--line); }
  .hero--page .wrap--wide { padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(2.6rem, 5vw, 4rem); }
  .hero--page h1 { color: var(--ink); max-width: 24ch; font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
  .hero--page .lede { color: var(--steel); }
  .hero__rule { width: 3.2rem; height: 4px; background: var(--red); margin-bottom: 1.3rem; }
  .hero--page .btn-row { margin-top: 1.8rem; }

  .crumbs { font-family: var(--font-body); font-size: 0.88rem; letter-spacing: 0; margin-bottom: 1.4rem; color: var(--mist); }
  .crumbs a { color: var(--steel); text-decoration: none; }
  .crumbs a:hover { color: var(--red); }
  .crumbs span::before { content: "/"; margin: 0 0.5rem; color: var(--red); }
}

@layer components {
  /* DPF ash-service interval table. Square and ruled, like a spec sheet rather than a
     card: this is reference data a fleet manager reads down a column, not a feature
     grid. Scrolls inside its own box so a narrow screen never pushes the page sideways. */
  .interval-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.6rem;
    border: 1px solid var(--line-strong);
  }
  .interval-table th,
  .interval-table td {
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  .interval-table thead th {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--red);
    border-bottom: 2px solid var(--ink);
    background: var(--bone);
  }
  .interval-table tbody tr:last-child td { border-bottom: 0; }
  .interval-table td b {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.02rem;
    color: var(--ink);
  }
  .interval-table td span {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-body);
    font-size: 0.84rem;
    color: var(--mist);
  }
  .interval-table td:last-child {
    font-family: var(--font-body);
    font-size: 0.98rem;
    color: var(--steel);
    white-space: nowrap;
  }
  .interval-note {
    margin-top: 1.1rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--steel);
    max-width: 70ch;
    border-left: 3px solid var(--line-strong);
    padding-left: 1rem;
  }
  .interval-turnaround {
    margin-top: 1.1rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink);
    max-width: 70ch;
    border-left: 3px solid var(--red);
    padding-left: 1rem;
  }
  @media (max-width: 560px) {
    .interval-table th, .interval-table td { padding: 0.7rem 0.75rem; }
    .interval-table td:last-child { white-space: normal; }
  }
}

@layer components {
  /* Client credential band (GSA). Square, plated, engineered: this is a procurement
     signal a fleet manager scans for, not a marketing flourish. Sits on the navy band
     so it reads as a stated credential rather than body copy. */
  .cred { display: flex; gap: 1.6rem; align-items: flex-start; flex-wrap: wrap; }
  .cred__mark {
    flex: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
    width: 7.5rem; padding: 1.1rem 0.75rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-top: 4px solid var(--red);
  }
  .cred__mark span {
    font-family: var(--font-display); font-weight: 700; font-size: 1.6rem;
    letter-spacing: 0.06em; color: #fff; line-height: 1;
  }
  .cred__mark em {
    font-family: var(--font-body); font-style: normal; font-weight: 600;
    font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }
  .cred__mark .flag { width: 26px; height: auto; }
  .cred__body { flex: 1 1 26rem; }
  .cred__body h2 { margin: 0 0 0.7rem; }
  .cred__body p { color: rgba(255, 255, 255, 0.86); max-width: 68ch; }
  .cred__note {
    margin-top: 0.9rem; font-family: var(--font-body); font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.62); border-left: 3px solid var(--red); padding-left: 0.9rem;
  }
  @media (max-width: 560px) { .cred__mark { width: 100%; flex-direction: row; } }
}

@layer components {
  /* Full-width captioned photograph. Square frame with the house red corner tick,
     matching .media-frame rather than introducing a second image treatment. */
  .media-band { margin: 0; }
  .media-band img { width: 100%; height: auto; display: block; border: 1px solid var(--line-strong); }
  .media-band figcaption {
    margin-top: 0.85rem; font-family: var(--font-body); font-size: 0.88rem;
    line-height: 1.6; color: var(--steel); max-width: 74ch;
    border-left: 3px solid var(--red); padding-left: 0.9rem;
  }
}

@layer components {
  .makes-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 640px) { .makes-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 960px) { .makes-grid { grid-template-columns: repeat(5, 1fr); } }
  .make-tile {
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
    padding: 1.4rem 1.2rem;
    min-height: 108px;
  }
  .make-tile img { max-height: 56px; width: auto; max-width: 82%; object-fit: contain; filter: saturate(0.92); }

  /* home page condensed strip */
  .makes-strip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .makes-strip .make-tile { flex: 1 1 140px; min-height: 88px; padding: 1rem; }
  .makes-strip .make-tile img { max-height: 42px; }
}

@layer components {
  /* Typographic wordmark tiles for makes we have no logo file for (revisions 4 and 5).
     Real logo art drops straight into .make-tile alongside these. */
  .wordmark-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 640px) { .wordmark-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 960px) { .wordmark-grid { grid-template-columns: repeat(4, 1fr); } }
  .wordmark {
    background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.3rem; padding: 1.35rem 1rem; min-height: 96px; text-align: center;
  }
  .wordmark b { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; color: var(--ink); }
  .wordmark span { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0; color: var(--mist); }

  .class-row { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 860px) { .class-row { grid-template-columns: repeat(4, 1fr); } }
  .class-cell { background: var(--paper); padding: 1.3rem 1.3rem 1.4rem; }
  .class-cell b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.015em; color: var(--navy); margin-bottom: 0.35rem; }
  .class-cell span { font-size: var(--t-small); color: var(--steel); }
}

@layer components {
  /* Seven coach brands (revision 5). Wide screens get them as one clean row;
     narrower breakpoints step down rather than leaving a ragged tail. */
  .makes-grid--rv { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 560px) { .makes-grid--rv { grid-template-columns: repeat(4, 1fr); } }
  @media (min-width: 1180px) { .makes-grid--rv { grid-template-columns: repeat(7, 1fr); } }
  .makes-grid--rv .make-tile { padding: 1rem 0.85rem; }
  .makes-grid--rv .make-tile img { max-height: 52px; max-width: 90%; }
}

@layer components {
  /* Light and medium duty logo grid (client revision 2026-08-25). Four across on
     desktop so twelve marks land as a clean 3 x 4 block rather than an orphaned row.
     The art is pre-normalised by damped equal ink on a 600x200 canvas, so the tiles
     only need to contain it, not re-balance it. */
  .makes-grid--light { grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 560px) { .makes-grid--light { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 960px) { .makes-grid--light { grid-template-columns: repeat(4, 1fr); } }
  .makes-grid--light .make-tile { padding: 1.1rem 1rem; min-height: 104px; }
  .makes-grid--light .make-tile img { max-height: 46px; max-width: 88%; }
}

@layer components {
  /* Makes logo marquee (Terminal-style partner strip). CSS-only, pauses on hover,
     static wrapped row when reduced motion or no animation support. */
  .marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--paper); }
  .marquee__track { display: flex; width: max-content; animation: marquee-scroll 46s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
  .marquee__set { display: flex; align-items: center; }
  .marquee .make-tile { flex: none; width: 150px; min-height: 84px; padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--line); background: var(--paper); }
  .marquee .make-tile img { max-height: 40px; width: auto; max-width: 100%; object-fit: contain; filter: saturate(0.9); }
  @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; flex-wrap: wrap; width: auto; }
    .marquee__set:last-child { display: none; }
  }
}

@layer components {
  /* Home page prompt components (client revision 9).
     Square, bordered, no frosted glass and no soft floating cards: the same
     engineered treatment as the rest of the site, not a generic marketing modal. */

  /* -- desktop exit-intent invitation ------------------------------------- */
  .prompt {
    width: min(560px, calc(100vw - 3rem));
    padding: 0;
    border: 1px solid var(--ink);
    background: var(--paper);
    color: var(--ink);
  }
  .prompt::backdrop { background: rgba(14, 18, 32, 0.62); }
  .prompt__inner { display: grid; grid-template-columns: 132px 1fr; }
  .prompt__art {
    background: var(--bone);
    border-right: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem 0.55rem;
  }
  /* Centred, not bottom-anchored: the panel is taller than Rocky at this width,
     and bottom-anchoring dumped all the empty ground above his head. */
  .prompt__art img { width: 100%; height: auto; display: block; }
  .prompt__body { padding: 1.6rem 1.6rem 1.5rem; }
  .prompt__eyebrow {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-body); font-size: 0.82rem; color: var(--steel); margin: 0 0 0.5rem;
  }
  .prompt__eyebrow .flag { width: 22px; height: auto; border: 1px solid var(--line-strong); }
  .prompt h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.5rem; letter-spacing: var(--track-display);
    line-height: 1.15; margin: 0 0 0.6rem;
  }
  .prompt p { font-size: 0.98rem; color: var(--steel); margin: 0 0 1.1rem; }
  .prompt .btn-row { gap: 0.6rem; margin: 0; }
  .prompt__no {
    display: inline-block; margin-top: 0.9rem;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--font-body); font-size: 0.9rem; color: var(--mist);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .prompt__no:hover { color: var(--ink); }
  @media (max-width: 620px) {
    .prompt__inner { grid-template-columns: 1fr; }
    .prompt__art { display: none; }
  }

  /* -- mobile quick action bar --------------------------------------------- */
  /* A bar, not a pop-up. It sits under the content instead of over it, so it
     never reads as an intrusive interstitial on a phone. */
  .quick-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: grid; grid-template-columns: 1fr 1fr auto;
    background: var(--ground);
    border-top: 2px solid var(--red);
    transform: translateY(100%);
    transition: transform 200ms ease;
  }
  .quick-bar.is-in { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .quick-bar { transition: none; }
  }
  .quick-bar a {
    display: flex; flex-direction: column; justify-content: center; gap: 0.1rem;
    min-height: 60px; padding: 0.55rem 0.9rem;
    font-family: var(--font-body); text-decoration: none; color: #fff;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
  }
  .quick-bar a b { font-size: 1rem; font-weight: 600; letter-spacing: 0; }
  .quick-bar a span { font-size: 0.78rem; color: rgba(255, 255, 255, 0.66); }
  .quick-bar a:first-child { background: var(--red); border-right-color: rgba(255, 255, 255, 0.28); }
  .quick-bar a:first-child span { color: rgba(255, 255, 255, 0.82); }
  .quick-bar__close {
    width: 46px; min-height: 60px;
    background: none; border: 0; cursor: pointer;
    color: rgba(255, 255, 255, 0.66); font-size: 1.2rem; line-height: 1;
  }
  .quick-bar__close:hover { color: #fff; }
  /* The bar only exists on narrow, touch-first viewports. */
  @media (min-width: 1021px) { .quick-bar { display: none; } }

  /* Keep the last of the page clear of the bar so nothing is trapped underneath. */
  @media (max-width: 1020px) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .footer { padding-bottom: 5rem; }
  }

  /* -- post-submit confirmation ------------------------------------------- */
  .form__sent {
    border: 1px solid var(--line-strong);
    border-left: 3px solid var(--navy);
    background: var(--paper);
    padding: 1rem 1.1rem;
  }
  .form__sent p { font-size: 0.92rem; margin: 0 0 0.6rem; }
  .form__sent p:last-child { margin-bottom: 0; }
  .form__sent .btn { font-size: 0.9rem; padding: 0.5rem 0.9rem; }
  .form__copied { font-size: 0.85rem; color: var(--navy); margin-left: 0.5rem; }
}

@layer components {
  /* engineered spec strip: hairline row, mono labels */
  .spec-strip { background: var(--paper); border-block: 1px solid var(--line); }
  .spec-strip .wrap--wide { display: grid; grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 860px) { .spec-strip .wrap--wide { grid-template-columns: repeat(4, 1fr); } }
  .spec {
    padding: 1.05rem 1.2rem;
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
  }
  .spec:last-child { border-right: 1px solid var(--line); }
  .spec b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; color: var(--ink); }
  .spec span { font-family: var(--font-body); font-size: 0.82rem; letter-spacing: 0; color: var(--steel); }

  .tag {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--line-strong);
    color: var(--steel);
    background: var(--paper);
    margin: 0 0.35rem 0.45rem 0;
    text-decoration: none;
  }
  a.tag:hover { border-color: var(--red); color: var(--red); }
  .tag--red { border-color: var(--red); color: var(--red); }

  .checklist { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
  @media (min-width: 720px) { .checklist--2col { grid-template-columns: 1fr 1fr; max-width: none; } }
  .checklist li { padding-left: 1.6rem; position: relative; }
  .checklist li::before {
    content: ""; position: absolute; left: 0; top: 0.46em;
    width: 0.62rem; height: 0.62rem; background: var(--red);
    clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
  }
  .section--navy .checklist li::before { background: #F0A9B0; }
}

@layer components {
  .quote {
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-left: 5px solid var(--red);
    padding: 1.6rem 1.5rem;
    display: flex; flex-direction: column; gap: 0.9rem;
  }
  .quote p { margin: 0; font-size: 1rem; color: var(--ink); max-width: none; }
  .quote footer { font-family: var(--font-body); font-size: 0.86rem; letter-spacing: 0; color: var(--steel); }
  .quote footer b { color: var(--navy); display: block; font-size: 0.8rem; }
}

@layer pages {
  /* home */
  body.page-home { background: var(--paper); }

  /* contact */
  body.page-contact .map-card {
    display: block; background: var(--ground); color: #fff; text-decoration: none;
    padding: 2rem 1.8rem; border: 1px solid var(--ground); margin-top: 1.2rem;
  }
  body.page-contact .map-card:hover { background: var(--navy-ink); color: #fff; }
  body.page-contact .map-card b { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; display: block; margin-bottom: 0.4rem; }
  body.page-contact .map-card span { color: #C9D2F0; }
  body.page-contact .hours-table { width: 100%; border-collapse: collapse; }
  body.page-contact .hours-table td { border: 1px solid var(--line-strong); padding: 0.7rem 1rem; }
  body.page-contact .hours-table td:first-child { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: var(--steel); }
  body.page-contact .phone-xl { color: var(--red); }
  body.page-contact .phone-xl:hover { color: var(--navy-ink); }

  /* makes */
  body.page-makes .make-tile { min-height: 132px; }

  /* city pages */
  body.page-city .route-tags { margin: 1.2rem 0 0; }

  /* service pages */
  body.page-service .hero--page h1 { max-width: 26ch; }
}