/* DIRECTION A - "Measured Industrial"
   Light base. Editorial restraint: a split hero, hairline borders instead of shadows,
   a 96px section rhythm, near-square corners, one red accent.
   Structure: split hero > two-column motion split > 4-up class tiles >
   typographic part categories > brand plate wall > Big 5 five-up. */

body{background:var(--white);color:var(--ink-600)}
h1,h2,h3,h4{color:var(--ink-800)}
h1{font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-.025em}
h2{font-size:34px;line-height:1.15}
h3{font-size:21px;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}


.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
/* One container for the whole page. The header previously used a 1600px wrap while
   every section used 1280, which broke the left edge by 80px at 1440 and 160px at 1920. */
.wrap-wide{max-width:var(--container);margin:0 auto;padding:0 var(--s5)}
.section{padding:var(--s9) 0}
.section--alt{background:var(--grey-100)}
.eyebrow{font:600 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
         color:var(--red);margin:0 0 var(--s4);display:flex;align-items:center;gap:var(--s3)}
/* Editorial rule. Also carries the brand accent below the fold: without it 92% of the
   red on this page sat in the top 1000px and three whole bands had none. */
.eyebrow::before{content:"";width:28px;height:2px;background:var(--red);flex:0 0 28px}
.eyebrow--muted::before{background:var(--grey-300)}
.eyebrow--muted{color:var(--grey-500)}
.lede{font-size:18px;line-height:1.6;max-width:68ch}
.muted{color:var(--grey-500)}

/* Header - dark in every direction. Client-settled. */
.hdr{background:var(--ink-800);color:#fff}
.hdr__bar{display:flex;align-items:center;gap:var(--s5);padding:var(--s4) 0}
.hdr__logo{min-height:44px;display:inline-flex;align-items:center}
.hdr__logo img{height:40px;width:auto}
.hdr__search{flex:1;display:flex;align-items:stretch;max-width:560px;background:#fff;border-radius:var(--r-sm);overflow:hidden}
.hdr__search input{flex:1;border:0;padding:13px var(--s4);font:400 15px/1 var(--font);color:var(--ink-800);min-width:0}
.hdr__search input::placeholder{color:var(--grey-500)}
.hdr__search button{border:0;background:var(--red);color:#fff;padding:0 var(--s5);font:600 14px/1 var(--font);cursor:pointer}
.hdr__search button:hover{background:var(--red-pressed)}
.hdr__util{display:flex;align-items:center;gap:var(--s3);margin-left:auto;font-size:14px;font-weight:500}
.hdr__util a{color:#fff;text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;padding:0 var(--s2);transition:color .16s ease-out}
.hdr__util a:hover{color:var(--grey-300)}
.hdr__quick{border:1px solid rgba(255,255,255,.35);padding:0 15px;border-radius:var(--r-sm)}
.hdr__nav{border-top:1px solid rgba(255,255,255,.10);display:flex;gap:var(--s6);padding:var(--s3) 0;font-size:14px;font-weight:600}
.hdr__nav a{color:#fff;text-decoration:none;padding:var(--s3) var(--s2);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)}

/* Buttons - two reserved roles. Red is parts and commerce only.
   Solid ink with an arrow is equipment only, so an equipment enquiry can never be
   mistaken for a cart action. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
     font:600 15px/1 var(--font);padding:15px 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--secondary{background:transparent;color:var(--ink-800);border-color:var(--ink-800)}
/* Never fills to solid ink: that is the reserved equipment appearance, and a parts CTA
   must not become an equipment button on hover. */
.btn--secondary:hover{background:var(--grey-100);color:var(--ink-800);border-color:var(--ink-800)}
.btn--ghost{background:transparent;color:var(--ink-800);border-color:var(--grey-300)}
.btn--ghost:hover{border-color:var(--ink-800)}
.btn--equipment{background:var(--ink-800);color:#fff;border-color:var(--ink-800)}
.btn--equipment:hover{background:var(--ink-600);border-color:var(--ink-600)}
.btn--equipment::after{content:"\2192";font-weight:600}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.hdr a:focus-visible,.hdr button:focus-visible,.hdr input:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Hero */
.hero{padding:var(--s8) 0 var(--s9)}
/* stretch, not center: centring a 16:9 photo in a 520px text column left 191px of void. */
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:stretch}
.hero__art{border:1px solid var(--grey-200);border-radius:var(--r-sm);overflow:hidden;display:flex;min-height:420px}
/* object-position crops the blown-out window bays behind the machine. */
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero__cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s6)}
.hero__proof{display:flex;gap:var(--s7);flex-wrap:wrap;margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--grey-200)}
.hero__stat{font:700 26px/1.1 var(--mono);color:var(--ink-800);font-variant-numeric:tabular-nums}
.hero__statlabel{font-size:13px;color:var(--grey-500);margin-top:var(--s2)}

/* Motion split */
.grid{display:grid;gap:var(--s5)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8)}
.lane__search{display:flex;align-items:stretch;background:#fff;border:1px solid var(--ink-800);border-radius:var(--r-sm);overflow:hidden;margin:var(--s5) 0 var(--s4)}
.lane__search input{flex:1;border:0;padding:16px var(--s4);font:400 16px/1 var(--font);color:var(--ink-800);min-width:0}
.lane__search button{border:0;background:var(--red);color:#fff;padding:0 var(--s5);font:600 14px/1 var(--font);cursor:pointer}
.lane__search button:hover{background:var(--red-pressed)}
.lane__art{border:1px solid var(--grey-200);border-radius:var(--r-sm);overflow:hidden;margin:var(--s5) 0 var(--s7)}
/* height:auto is load-bearing: Chrome maps the img height attribute to a CSS
   presentational height, which otherwise beats aspect-ratio and left the equipment
   lane 700px tall against a much shorter parts lane. */
.lane__art img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto}
/* Quick links keep the parts lane the same visual weight as the equipment lane. */
/* Real part rows, not chips. Three things at once: they fill the 206px void the parts
   lane carried against the taller equipment lane, they put part numbers in the mono the
   brand rules reserve for them, and they show a buyer something concrete on a homepage
   that otherwise claimed transparency without demonstrating it. */
.quick{margin-top:var(--s6);border-top:1px solid var(--grey-200)}
.quick__k{font:600 12px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;
          color:var(--grey-500);margin:var(--s4) 0 var(--s2)}
.qrow{display:grid;grid-template-columns:104px 1fr auto;gap:var(--s4);align-items:baseline;
      padding:var(--s3) 0;border-bottom:1px solid var(--grey-200);text-decoration:none;
      color:inherit;min-height:44px;transition:color .16s ease-out}
.qrow:hover{color:var(--red)}
.qrow__sku{font:500 14px/1.4 var(--mono);color:var(--ink-800);font-variant-numeric:tabular-nums}
.qrow:hover .qrow__sku{color:var(--red)}
.qrow__name{font:500 15px/1.4 var(--font);color:var(--ink-800)}
.qrow:hover .qrow__name{color:var(--red)}
.qrow__brand{font-size:13px;color:var(--grey-500);white-space:nowrap}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.tile{background:#fff;border:1px solid var(--grey-200);border-radius:var(--r-sm);text-decoration:none;color:inherit;display:flex;flex-direction:column;overflow:hidden;transition:border-color .16s ease-out}
.tile:hover{border-color:var(--ink-800)}
/* Contain, not cover: every machine image is a cutout on white, so cover would crop
   the mast or boom, which is the exact feature the tile exists to identify. */
.tile__img{aspect-ratio:4/3;background:#fff;object-fit:contain;width:100%;padding:var(--s4)}
.tile__body{padding:var(--s4) var(--s4) var(--s5)}
.tile__label{font-weight:600;color:var(--ink-800);font-size:17px}
/* Spec values set in mono per the brand typography rule. */
.tile__meta{font:500 13px/1.35 var(--mono);color:var(--grey-500);margin-top:var(--s2);font-variant-numeric:tabular-nums}
.tile--text .tile__meta{font:400 13px/1.45 var(--font)}
.tile--text{padding:var(--s5)}
.tile--text .tile__go{font-size:13px;font-weight:600;color:var(--red);margin-top:var(--s4)}

/* Brand plates. Four of the eleven brands have no logo asset anywhere on the current
   site, so the wall must stay even without a mark. */
/* Grid, not centred flex: eleven plates can never fill a flex row evenly, so the last
   row was centred against a left-aligned page and the lone plate at 375 stretched to
   twice the width of its neighbours. */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s3)}
.plate{display:flex;align-items:center;justify-content:center;height:76px;
       text-decoration:none;background:#fff;border:1px solid var(--grey-200);
       border-radius:var(--r-sm);padding:var(--s3);transition:border-color .16s ease-out}
.plate:hover{border-color:var(--ink-800)}
.plate img{max-height:34px;max-width:100%;width:auto;object-fit:contain}
/* 700/40px read as four black headlines louder than the section heading. These are
   stand-in wordmarks for four brands with no logo asset in existence, so they carry
   the weight of a mark, not of a display line. */
.plate__type{font:600 28px/1 var(--font);color:var(--ink-800);letter-spacing:-.02em;white-space:nowrap}

/* Big 5 */
.five{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s5)}

.foot{background:var(--ink-900);color:var(--grey-300);padding:var(--s8) 0 var(--s7);font-size:14px}
.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-300);text-decoration:none}
.foot a:hover{color:#fff}
.foot a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* M7 fix: 1024 is a named brand breakpoint (laptop) and previously collapsed to a single
   column, making the laptop page 7,434px tall - within 1% of the 375px phone - and hiding
   all three of this direction's structural moves. The one-column collapse now happens at
   860px, so a laptop still gets the split hero, the two-column motion split and 4-up tiles. */
@media (max-width:1200px){
  h1{font-size:44px}
  .hero__grid,.split{gap:var(--s7)}
}
@media (max-width:1024px){
  h1{font-size:40px} h2{font-size:29px}
  .section{padding:var(--s8) 0}
  .hero{padding:var(--s7) 0 var(--s8)}
  .hero__grid,.split{gap:var(--s6)}
  .hero__art{min-height:340px}
  .five{grid-template-columns:repeat(3,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .hero__grid,.split{grid-template-columns:1fr;gap:var(--s7)}
  .hero__art{min-height:0}
  .hero__art img{aspect-ratio:16/9;height:auto}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .five{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  body{font-size:16px}
  h1{font-size:33px} h2{font-size:26px} h3{font-size:19px}
  .section{padding:56px 0}
  .hero{padding:var(--s6) 0 56px}
  .wrap,.wrap-wide{padding:0 var(--s4)}
  .hdr__bar{flex-wrap:wrap;gap:var(--s3)}
  /* The part-number field stays the most prominent header control on mobile too.
     The urgent buyer arrives already knowing a number. */
  .hdr__search{order:-1;flex-basis:100%;max-width:none}
  .hdr__logo{order:0}
  .hdr__util{order:1;gap:var(--s1);font-size:13px}
  /* The nav scrolls here. Without the fade the last item shears mid-word at the viewport
     edge and reads as broken rather than as scrollable. */
  .hdr__nav{overflow-x:auto;flex-wrap:nowrap;gap:var(--s5);-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}
  .hero__proof{gap:var(--s6)}
  .foot li a{min-height:44px}
}
@media (max-width:428px){
  .five{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .plates{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .plate__type{font-size:22px}
}