/* DIRECTION B - "Yard"
   Dark base, image led. The machine carries the page.
   Structure: full-bleed cinematic hero with the part-number search sitting in it >
   two wide numbered lanes for the two ways to buy > an edge-to-edge machine mosaic
   with labels over the photography > a hairline parts matrix > a white brand rail >
   a contrast-reversed light Big 5 band.
   Contrast note: #CD163F measures under 3:1 as TEXT on the dark field, so red text on
   dark uses the lighter tint of the same crimson (#EE7189, 6.4:1 on ink-900) while
   solid red FILLS keep the true brand red with white type (5.55:1). */

body{background:var(--ink-900);color:#D7DEDD}
h1,h2,h3,h4{color:#fff}
h1{font-size:48px;line-height:1.06;font-weight:700;letter-spacing:-.025em}
h2{font-size:34px;line-height:1.15}
h3{font-size:22px;line-height:1.3}
/* Links inherit their surrounding colour by default. A coloured default is not safe here:
   on the bare `a` selector it renders a forbidden red on the dark ground, and any scoped
   version (.hero a, .compare a) outranks the component rules and turns equipment buttons
   red, which is the one pairing the brand file locks. Components set their own colour; a
   genuine inline text link uses .link. */
a{color:inherit}
.link{color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.answers .link{color:var(--red)}
.hero .link,.lane .link{color:var(--red-on-dark)}


.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.wrap-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--s5)}
.section{padding:var(--s9) 0}
.section--tight{padding-bottom:0}
.eyebrow{font:600 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--red-on-dark);margin:0 0 var(--s4)}
.lede{font-size:18px;line-height:1.6;max-width:66ch;color:#D7DEDD}
.muted{color:var(--grey-400)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
     font:600 15px/1 var(--font);padding:14px 28px;border-radius:var(--r-sm);
     text-decoration:none;border:1px solid transparent;cursor:pointer;min-height:48px;
     transition:background .16s ease-out,color .16s ease-out,border-color .16s ease-out}
.btn--primary{background:var(--red);color:#fff}
.btn--primary:hover{background:var(--red-pressed)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:#fff}
/* Equipment role - reserved. Inverted white, never red, always carries the arrow, so an
   equipment enquiry can never be mistaken for a cart action. */
.btn--equipment{background:#fff;color:var(--ink-900);border-color:#fff;padding:15px 28px}
.btn--equipment:hover{background:var(--grey-300);border-color:var(--grey-300)}
.btn--equipment::after{content:"\2192";font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Light surfaces sitting on the dark base need the light-ground ring, or the white one
   renders invisible on white. focus_state is a locked directive: never removed. */
.rail a:focus-visible,.answers a:focus-visible,.arow:focus-visible,
.finder input:focus-visible,.finder button:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* Header - dark, and it sits over the hero photograph rather than above it. */
.hdr{position:absolute;top:0;left:0;right:0;z-index:3;
     background:linear-gradient(to bottom,rgba(14,22,21,.94),rgba(14,22,21,.62) 62%,rgba(14,22,21,0));
     color:#fff}
.hdr__bar{display:flex;align-items:center;gap:var(--s6);padding:var(--s5) 0 var(--s4)}
.hdr__logo{flex:0 0 auto;min-height:44px;display:inline-flex;align-items:center}
.hdr__logo img{height:38px;width:auto}
.hdr__nav{display:flex;gap:var(--s6);font:600 14px/1 var(--font);margin-left:var(--s5)}
.hdr__nav a{color:#fff;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap;flex:0 0 auto;transition:color .16s ease-out}
.hdr__nav a:hover{color:var(--grey-300)}
.hdr__util{display:flex;align-items:center;gap:var(--s4);margin-left:auto;font:500 14px/1 var(--font)}
.hdr__util a{color:#fff;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;white-space:nowrap}
.hdr__util a:hover{color:var(--grey-300)}
.hdr__quick{border:1px solid rgba(255,255,255,.35);padding:0 15px;min-height:40px;border-radius:var(--r-sm)}

/* Hero - one photograph, edge to edge. */
.hero{position:relative;min-height:760px;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-900)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(to right,rgba(14,22,21,.92) 0%,rgba(14,22,21,.72) 42%,rgba(14,22,21,.12) 78%),
             linear-gradient(to top,rgba(14,22,21,.86),rgba(14,22,21,0) 46%)}
.hero__inner{position:relative;z-index:2;width:100%;padding:var(--s10) 0 var(--s8)}
.hero__copy{max-width:36ch}
/* The eyebrow ran the full width of the copy column while its text ends a third of the way
   across, so the empty right of its box sat on the sky glow: 3.2:1 on a phone and 3.7:1 at
   1024, where the type itself never leaves the ink. Hugging the text puts the box where the
   glyphs are. Kept at every width, not only the phone widths the recorded check sampled. */
.hero .eyebrow{display:inline-block}
.hero__find{margin-top:var(--s7);max-width:620px}
.hero__findlabel{display:inline-block;font:600 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:var(--s3)}
.finder{display:flex;align-items:stretch;background:#fff;border-radius:var(--r-sm)}
.finder input{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.finder button{border-radius:0 var(--r-sm) var(--r-sm) 0}
.finder input{flex:1;border:0;padding:20px var(--s5);font:400 17px/1 var(--font);color:var(--ink-800);min-width:0}
.finder input::placeholder{color:var(--grey-500)}
.finder button{border:0;background:var(--red);color:#fff;padding:0 var(--s6);font:600 15px/1 var(--font);cursor:pointer;white-space:nowrap}
.finder button:hover{background:var(--red-pressed)}
.hero__alt{display:flex;gap:var(--s5);align-items:center;flex-wrap:wrap;margin-top:var(--s5)}
.hero__hint{font-size:14px;color:var(--grey-400)}

/* Two ways to buy - wide lanes, hairline separated. */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid rgba(255,255,255,.14)}
.lane{padding:var(--s8) var(--s7) var(--s8) 0}
.lane+.lane{border-left:1px solid rgba(255,255,255,.14);padding-left:var(--s7);padding-right:0}
.lane__num{font:500 13px/1 var(--mono);color:var(--red-on-dark);letter-spacing:.14em;margin-bottom:var(--s4)}
.lane__list{margin:var(--s5) 0 var(--s6);font-size:16px}
.lane__list li{padding:var(--s3) 0;border-bottom:1px solid rgba(255,255,255,.10);color:#D7DEDD}
.lane__list li:first-child{border-top:1px solid rgba(255,255,255,.10)}

/* Machine mosaic - labels sit on the photography, no card chrome. */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.mos{position:relative;display:block;text-decoration:none;overflow:hidden;border-radius:var(--r-sm);background:#fff;aspect-ratio:4/3}
.mos--wide{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
/* Extra bottom padding keeps the machine clear of the caption gradient. */
.mos img{width:100%;height:100%;object-fit:contain;background:#fff;padding:var(--s5) var(--s5) 84px}
.mos--photo img{object-fit:cover;padding:0}
.mos__cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s4) var(--s5);
          background:var(--ink-900)}
.mos--photo .mos__cap{background:linear-gradient(to top,rgba(14,22,21,.96),rgba(14,22,21,.86) 60%,rgba(14,22,21,.55))}
.mos__name{display:block;font:600 17px/1.3 var(--font);color:#fff}
.mos__meta{display:block;font:500 13px/1.35 var(--mono);color:var(--grey-300);margin-top:6px;font-variant-numeric:tabular-nums}
.mos:hover .mos__name{color:var(--red-on-dark)}

/* Parts matrix - hairline grid, no cards. */
.matrix{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.14);border-left:1px solid rgba(255,255,255,.14)}
.cell{display:block;text-decoration:none;padding:var(--s6) var(--s5);
      border-right:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
      transition:background .16s ease-out}
.cell:hover{background:var(--ink-800)}
.cell__idx{display:block;font:500 12px/1 var(--mono);color:var(--grey-400);letter-spacing:.1em}
.cell__name{display:block;font:600 18px/1.3 var(--font);color:#fff;margin-top:var(--s3)}
.cell__meta{display:block;font-size:13px;color:var(--grey-400);margin-top:6px}

/* Brand rail - a white band, because most OEM marks are black and vanish on dark. */
.rail{background:#fff;padding:var(--s7) 0}
.rail__inner{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s7);align-items:center;justify-content:center}
.rail a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
        text-decoration:none;opacity:1;transition:opacity .16s ease-out}
.rail a:hover{opacity:.6}
.rail img{max-height:30px;width:auto;object-fit:contain}
.rail__type{font:700 24px/1 var(--font);color:var(--ink-800);letter-spacing:-.02em;white-space:nowrap}
.rail__note{text-align:center;font-size:13px;color:var(--grey-500);margin:var(--s5) 0 0}

/* Big 5 - the contrast reverses so the long-form zone reads as a different register. */
.answers{background:var(--grey-100);color:var(--ink-600);padding:var(--s9) 0}
.answers h2,.answers h3{color:var(--ink-800)}
.answers .eyebrow{color:var(--red)}
.answers .lede{color:var(--ink-600)}
.arow{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s5);align-items:baseline;
      padding:var(--s6) 0;border-top:1px solid var(--grey-300);text-decoration:none;color:inherit}
.arow:last-child{border-bottom:1px solid var(--grey-300)}
.arow__n{display:block;font:500 14px/1 var(--mono);color:var(--red)}
.arow__q{display:block;font:600 24px/1.25 var(--font);color:var(--ink-800);letter-spacing:-.01em}
.arow__d{display:block;font-size:16px;color:var(--grey-500);margin-top:var(--s2);max-width:62ch}
.arow__go{font:600 14px/1 var(--font);color:var(--red);white-space:nowrap;
          text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.arow:hover .arow__q{color:var(--red)}

.foot{background:var(--ink-900);color:var(--grey-400);padding:var(--s8) 0 var(--s7);font-size:15px}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s5)}
.foot h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s4)}
.foot li{margin-bottom:2px}
.foot li a{display:inline-flex;align-items:center;min-height:34px}
.foot a{color:var(--grey-400);text-decoration:none}
.foot a:hover{color:#fff}

@media (max-width:1200px){
  /* Scrolls rather than disappears. Hiding it left no hamburger, no drawer and no script,
     so the destinations were simply unreachable below desktop. */
  .hdr__nav{overflow-x:auto;flex-wrap:nowrap;gap:var(--s5);margin-left:var(--s4);min-width:0;
            -webkit-overflow-scrolling:touch;scrollbar-width:none;
            -webkit-mask-image:linear-gradient(to right,#000 86%,transparent);
            mask-image:linear-gradient(to right,#000 86%,transparent)}
  .hdr__nav::-webkit-scrollbar{display:none}
}
@media (max-width:1024px){
  h1{font-size:40px} h2{font-size:30px}
  .section{padding:var(--s8) 0}
  .section--tight{padding-bottom:0}
  .hero{min-height:640px}
  .hero__inner{padding:var(--s10) 0 var(--s7)}
  .lanes{grid-template-columns:1fr}
  .lane{padding:var(--s7) 0}
  .lane+.lane{border-left:0;border-top:1px solid rgba(255,255,255,.14);padding-left:0}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mos--wide{grid-column:span 2;grid-row:auto;aspect-ratio:16/9}
  .matrix{grid-template-columns:repeat(2,1fr)}
  .arow{grid-template-columns:44px 1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .arow__go{grid-column:2;margin-top:var(--s3)}
}
@media (max-width:768px){
  body{font-size:16px}
  h1{font-size:32px} h2{font-size:26px} h3{font-size:20px}
  .lede{font-size:17px}
  .section,.answers{padding:56px 0}
  .section--tight{padding-bottom:0}
  .foot li a{min-height:44px}
  .wrap,.wrap-wide{padding:0 var(--s4)}
  .hero{min-height:0}
  /* The header keeps overlaying the photograph on mobile - that is the direction's
     whole argument - but the two-row bar measures 140px there, so the 132px top pad
     let the bar sit on the eyebrow. Padding now clears the bar with room to spare. */
  .hero__inner{padding:190px 0 var(--s7)}
  /* The mobile scrim used to top out at .26 alpha over bright sky, which left the eyebrow
     at 1.58:1 and the lede at 4.43:1. Pushing the machine down in frame and lifting the
     top stop keeps the photograph readable AND the type above AA. */
  .hero__img{object-position:50% 76%}
  /* Two layers on mobile: a horizontal one that keeps the copy column on ink, and a
     vertical one for the base. Measured per-pixel behind the lede, the machine's boom
     showed through the right of the text box and dropped the worst pixel to 2.7:1. */
  .hero__scrim{background:
     linear-gradient(to right,rgba(14,22,21,.92) 0%,rgba(14,22,21,.88) 76%,rgba(14,22,21,.32) 100%),
     linear-gradient(to top,rgba(14,22,21,.88) 0%,rgba(14,22,21,.62) 46%,rgba(14,22,21,.45) 100%)}
  .hdr__bar{gap:var(--s4);padding:var(--s4) 0}
  /* The bar cannot fit logo + nav + utility on one 375px row once the logo is allowed to
     keep its size, so the nav takes its own full-width scrolling row, as Option A does.
     Letting the logo shrink instead crushed the brand mark to 12px wide. */
  .hdr__bar{flex-wrap:wrap;gap:var(--s3) var(--s4)}
  .hdr__logo{order:0}
  .hdr__logo img{height:30px}
  .hdr__util{order:1;margin-left:auto}
  .hdr__nav{order:2;flex-basis:100%;margin-left:0;padding-bottom:var(--s2)}
  .hdr__util{gap:var(--s3);font-size:13px}
  .finder{flex-wrap:wrap}
  .finder input{flex-basis:100%;padding:16px var(--s4);font-size:16px;border-radius:var(--r-sm) var(--r-sm) 0 0}
  .finder button{flex:1;padding:16px;border-radius:0 0 var(--r-sm) var(--r-sm)}
  .arow__q{font-size:20px}
}
@media (max-width:428px){
  /* C1 fix. .mos--wide kept grid-column:span 2 from the 1024 block while .mosaic dropped
     to a single explicit column, so the span created an implicit second column and FOUR
     of the nine machine classes rendered at 0x0 - invisible, with no horizontal scroll,
     no broken image and no console error for the QA harness to catch. */
  .mosaic{grid-template-columns:1fr}
  .mos--wide{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .matrix{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
}