/* GTA Equipment Rentals — built by Fuller Media */
:root{
  --ink:#122a54; --ink-2:#1a3767; --paper:#f5f7fa; --white:#fff;
  --green:#3fae49; --green-dark:#2f9139; --green-ink:#1e6f27;
  --blue:#1b75bc; --blue-dark:#155e97; --navy:#204080;
  --steel:#556179; --line:#e2e7ee; --amber:#ffb703;
  --radius:14px; --shadow:0 10px 30px rgba(18,42,84,.10);
  color-scheme:only light;   /* stop Chrome Android auto-dark repainting our backgrounds */
  --disp:'Barlow Condensed',sans-serif; --body:'Inter',-apple-system,'Segoe UI',sans-serif;
}
button,a,.btn,.qbtn,.car-btn{touch-action:manipulation}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--white);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- top bar ---------- */
.topline{background:var(--ink);color:#aeb8c2;font-size:13px}
.topline .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topline a{color:#fff;font-weight:600}
.topline .tl-right{display:flex;gap:18px;align-items:center}
.topline .dot{color:var(--green)}
@media(max-width:700px){
  .topline .tl-left{display:none}
  .topline .wrap{justify-content:center;gap:0}
  .topline .tl-right{gap:14px;white-space:nowrap;font-size:12.5px}
  .topline .tl-right span{display:none}             /* hide long toll-free label on mobile */
}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
header.site.scrolled{box-shadow:0 6px 24px rgba(18,42,84,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:46px;width:auto}
.navlinks{display:flex;align-items:center;gap:6px;list-style:none}
.navlinks>li{position:relative}
.navlinks a{display:block;padding:10px 13px;color:var(--ink);font-weight:600;font-size:14.5px;border-radius:8px}
.navlinks a:hover{background:var(--paper);color:var(--green-ink)}
.navlinks a.active{color:var(--green-ink)}
.dd{position:absolute;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);min-width:250px;padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s}
.navlinks li:hover .dd,.navlinks li:focus-within .dd{opacity:1;visibility:visible;transform:translateY(0)}
.dd a{padding:9px 12px;font-size:14px;border-radius:8px;font-weight:500}
.dd a strong{display:block;font-weight:700}
.nav-cta{display:flex;align-items:center;gap:10px}
.cta-btn{background:var(--green);color:#fff !important;font-weight:700;padding:12px 22px;border-radius:10px;font-size:15px;white-space:nowrap;transition:.2s;box-shadow:0 4px 14px rgba(63,174,73,.35)}
.cta-btn:hover{background:var(--green-dark);transform:translateY(-1px)}
.cta-call{background:#fff;color:var(--green-ink) !important;font-weight:700;padding:11px 20px;border-radius:10px;font-size:15px;white-space:nowrap;transition:.2s;border:2px solid var(--green)}
.cta-call:hover{background:var(--paper);transform:translateY(-1px)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:.25s}
@media(max-width:960px){
  .burger{display:block}
  .navlinks{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:18px 24px 26px;gap:2px;display:none;overflow:auto;z-index:89;max-height:calc(100vh - 120px);border-bottom:1px solid var(--line);box-shadow:0 22px 34px rgba(18,42,84,.16)}
  .navlinks.open{display:flex}
  .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-left:14px;display:none}
  .navlinks li.open .dd{display:block}
  .nav .nav-cta{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--ink)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;animation:heroZoom 18s ease-out forwards;opacity:.55}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.hero .bgvid.on{opacity:1}
.hero.vid-on .bg{opacity:0;animation:none}
.hero .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,25,52,.78) 22%,rgba(13,25,52,.34) 58%,rgba(13,25,52,.08))}
.hero.vid-on .veil{background:rgba(10,18,38,.52)}
.hero .bg{opacity:1}
.hero .wrap{position:relative;padding:96px 24px 84px}
.kicker{font-family:var(--disp);letter-spacing:3px;text-transform:uppercase;font-weight:600;font-size:15px;color:var(--green);display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:34px;height:3px;background:repeating-linear-gradient(-45deg,var(--amber) 0 6px,var(--ink) 6px 12px)}
.hero h1{font-family:var(--disp);font-size:clamp(44px,6.5vw,76px);line-height:.98;font-weight:700;text-transform:uppercase;margin:14px 0 18px;max-width:750px}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .sub{font-size:18px;color:#e8eef3;max-width:560px;margin-bottom:32px;text-shadow:0 1px 10px rgba(6,12,26,.55)}
.hero h1{text-shadow:0 2px 16px rgba(6,12,26,.45)}
.hero .actions,.page-hero .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:stretch}
.page-hero .actions .btn{display:inline-flex;align-items:center;justify-content:center}
.btn{display:inline-block;padding:15px 30px;border-radius:10px;font-weight:700;font-size:15.5px;transition:.2s;cursor:pointer;border:0}
/* An author `display` overrides the UA [hidden]{display:none} rule, so every .btn
   ignored its hidden attribute - which is why step 2 showed Next AND Get Quote at
   the same time. Put it back. (Aug 18) */
.btn[hidden]{display:none}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 6px 20px rgba(63,174,73,.4)}
.btn.primary:hover{background:var(--green-dark);transform:translateY(-2px)}
/* Solid, not see-through. The translucent version disappeared into whatever the
   hero photo happened to be doing behind it. (Aug 18) */
.btn.ghost{background:#fff;color:var(--ink);border:1px solid #fff;box-shadow:0 6px 20px rgba(6,12,26,.28)}
.btn.ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);transform:translateY(-2px)}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-dark)}
.hero .stats{display:flex;gap:0;margin-top:58px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.15)}
.hero .stat{padding:22px 38px 0 0;margin-right:38px}
.hero .stat .n{font-family:var(--disp);font-size:40px;font-weight:700;color:#fff}
.hero .stat .n em{font-style:normal;color:var(--green)}
.hero .stat .l{font-size:12.5px;text-transform:uppercase;letter-spacing:1.4px;color:#93a0ac}
@media(max-width:700px){
  .hero .wrap{padding-top:34px}
  .hero .actions{flex-wrap:nowrap;gap:10px}
  .hero .actions .btn{flex:1 1 0;text-align:center;padding:14px 12px;font-size:14.5px;white-space:nowrap}
  .page-hero .wrap{padding-top:34px}
  .page-hero .actions{flex-direction:column;align-items:stretch;gap:12px;width:100%}
  .page-hero .actions .btn{width:100%;text-align:center;padding:15px 18px;font-size:15px;min-height:52px;line-height:1.2}
  /* lighter scrim on mobile so the machines read through - heavier at the
     bottom where the headline and buttons sit, so text stays legible */
  .hero .bg{opacity:.75}
  .hero .veil{background:linear-gradient(180deg,rgba(9,17,38,.38) 0%,rgba(9,17,38,.66) 100%)}
  .hero .sub{color:#f1f5f8}
  .hero .stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 16px;margin-top:40px}
  .hero .stat{padding:16px 0 0;margin-right:0}
  .hero .stat .n{font-size:28px}
  .hero .stat .l{font-size:11px;letter-spacing:1px}
}

/* ---------- page hero (subpages) ---------- */
.page-hero{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.page-hero .veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(13,25,52,.95) 35%,rgba(13,25,52,.6))}
.page-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.45}
.page-hero .wrap{position:relative;padding:68px 24px 58px}
.page-hero h1{font-family:var(--disp);font-size:clamp(36px,5vw,58px);line-height:1;font-weight:700;text-transform:uppercase;margin:12px 0 12px}
.page-hero .sub{color:#c8d1d9;max-width:640px;font-size:17px}
.crumbs{font-size:13px;color:#8d99a5;margin-top:26px}
.crumbs a{color:#b9c3cd}

/* ---------- sections ---------- */
section{padding:78px 0}
section.tight{padding:56px 0}
section.alt{background:var(--paper)}
section.dark{background:var(--ink);color:#fff}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head.center{margin:0 auto 44px;text-align:center}
.sec-head.center .kicker{justify-content:center}
h2{font-family:var(--disp);font-size:clamp(32px,4vw,46px);line-height:1.02;font-weight:700;text-transform:uppercase;margin:10px 0 12px}
h2 em{font-style:normal;color:var(--green)}
.sec-head p{color:var(--steel);font-size:16.5px}
.dark .sec-head p{color:#aab5c0}

/* ---------- category grid ---------- */
.catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);transition:.25s;display:flex;flex-direction:column}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe8d2}
.cat .ph{background:#f1f3ef;height:150px;display:flex;align-items:center;justify-content:center;padding:14px}
.cat .ph img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply;transition:transform .3s}
.cat:hover .ph img{transform:scale(1.06)}
.cat .tx{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.cat h3{font-family:var(--disp);font-size:21px;text-transform:uppercase;font-weight:700;line-height:1.05}
.cat .count{font-size:13px;color:var(--steel);margin-top:3px}
.cat .go{margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:700;color:var(--green-ink)}
.cat .go::after{content:" →";transition:.2s}
.cat:hover .go::after{padding-left:4px}
@media(max-width:960px){.catgrid{grid-template-columns:repeat(2,1fr)}}
/* Delivery zones on /service-areas/. Explicit tracks rather than auto-fit so the
   column count is knowable, which is what lets the odd card out be centred. */
.zonegrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
@media(max-width:1000px){.zonegrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.zonegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:359px){.zonegrid{grid-template-columns:1fr}}
/* Five zones in a 2-up grid leaves Toronto stranded on the left. Centre it.
   Range-scoped so it can't fire in the 1-column or 3-column layouts. */
@media(min-width:360px) and (max-width:760px){
  .zonegrid > :last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 9px);justify-self:center}
}
@media(max-width:520px){.catgrid{grid-template-columns:1fr 1fr;gap:12px}.cat .ph{height:110px}}

/* ---------- product cards ---------- */
.prodgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.prod:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.prod .ph{height:210px;background:#f1f3ef;display:flex;align-items:center;justify-content:center;padding:18px;position:relative}
.prod .ph img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.prod .tag{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:4px 10px;border-radius:20px}
.prod .tx{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column;gap:8px}
.prod h3{font-size:16.5px;font-weight:700;line-height:1.3}
.prod .brand{font-size:13px;color:var(--steel)}
.prod .row{margin-top:auto;display:flex;gap:10px;align-items:center;padding-top:12px}
/* nowrap: on a narrow carousel card "Get a Quote" broke across two lines and the
   arrow landed on its own row. One line, always. (Aug 18) */
.qbtn{flex:1;text-align:center;background:var(--green);color:#fff;font-weight:700;font-size:14px;padding:11px 10px;border-radius:9px;border:0;cursor:pointer;transition:.2s;white-space:nowrap}
.qbtn:hover{background:var(--green-dark)}
.qbtn.o{background:#fff;color:var(--ink);border:1.5px solid var(--line);flex:0 0 auto;padding:11px 16px}
.qbtn.o:hover{border-color:var(--green);color:var(--green-ink);background:#fff}
@media(max-width:960px){.prodgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.prodgrid{grid-template-columns:1fr}}

/* ---------- carousels ---------- */
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.head-row .sec-head{margin-bottom:0}
.car-ctl{display:flex;gap:10px;flex:0 0 auto}
.car-ctl.center{justify-content:center;margin-top:24px}
.car-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font-size:17px;cursor:pointer;transition:.2s;color:var(--ink);display:flex;align-items:center;justify-content:center;line-height:1}
.car-btn:hover{border-color:var(--green);color:var(--green-ink);transform:translateY(-2px)}
.car-btn:disabled{opacity:.3;cursor:default;transform:none;border-color:var(--line);color:var(--ink)}
.car-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:18px}
.car-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:#cdd5dd;cursor:pointer;transition:.2s}
.car-dot:hover{background:#9aa6b1}
.car-dot.on{background:var(--green);transform:scale(1.3)}
.car-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 10px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.car-track::-webkit-scrollbar{display:none}
.car-track img{-webkit-user-drag:none;user-select:none;pointer-events:none}
.car-btn{user-select:none;-webkit-user-select:none}
.car-track>*{flex:0 0 calc((100% - 40px)/3);scroll-snap-align:start;min-width:0}
.car-wrap .car-track{margin-top:36px}
#favCar>*{scroll-snap-align:center}
@media(max-width:960px){.car-track>*{flex-basis:calc((100% - 20px)/2)}}
@media(max-width:640px){
  .car-track>*{flex-basis:calc(100% - 34px)}
  #favCar>*{flex-basis:calc(100% - 76px)}
  .head-row{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:30px}
  .car-ctl{display:none}
}

/* ---------- filter bar ---------- */
.filterbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:30px}
.fdd{position:relative;flex:0 0 auto}
.fdd-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:190px;padding:11px 16px;border:1.5px solid var(--line);border-radius:24px;background:#fff;font-size:14.5px;font-weight:600;font-family:var(--body);color:var(--ink);cursor:pointer;transition:.18s}
.fdd-trigger:hover,.fdd.open .fdd-trigger{border-color:var(--green)}
.fdd-chev{width:12px;height:8px;fill:none;stroke:var(--steel);stroke-width:2;flex:0 0 auto;transition:transform .2s}
.fdd.open .fdd-chev{transform:rotate(180deg)}
.fdd-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:100%;max-height:320px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1.5px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:none}
.fdd.open .fdd-menu{display:block}
.fdd-opt{padding:9px 14px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap}
.fdd-opt:hover{background:#f1f3ef}
.fdd-opt.sel{background:var(--ink);color:#fff}
.search{flex:1;min-width:220px;display:flex}
@media(max-width:600px){.fdd{width:100%}.fdd-trigger{width:100%}}
.search input{width:100%;padding:11px 18px;border:1.5px solid var(--line);border-radius:24px;font-size:14.5px;font-family:var(--body);outline:none}
.search input:focus{border-color:var(--green)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.stp{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative}
.dark .stp{background:var(--ink-2);border-color:#2b4a80}
.stp::before{counter-increment:st;content:"0" counter(st);font-family:var(--disp);font-size:44px;font-weight:700;color:var(--green);opacity:.9;line-height:1}
.stp h3{font-family:var(--disp);font-size:21px;text-transform:uppercase;margin:10px 0 6px}
.stp p{font-size:14px;color:var(--steel)}
.dark .stp p{color:#aab5c0}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* A 3-across variant for the 9 leasing benefits. This used to be an inline
   style="grid-template-columns:repeat(3,1fr)" on the div, which beats every media
   query below - so on a phone it stayed 3 columns and each card rendered one word
   per line. Never put a grid template in an inline style. (Fixed Aug 18) */
.steps.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.steps.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps.three{grid-template-columns:1fr}}

/* ---------- reviews ---------- */
.rev-badge{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 24px;box-shadow:var(--shadow)}
.rev-badge .score{font-family:var(--disp);font-size:44px;font-weight:700;line-height:1}
.rev-badge .stars{color:var(--amber);font-size:18px;letter-spacing:2px}
.rev-badge .sub{font-size:13px;color:var(--steel)}
.revgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.rev{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.rev .stars{color:var(--amber);letter-spacing:2.5px;font-size:15px}
.rev p{font-size:14.5px;margin:12px 0 16px;color:#2b333c}
.rev .who{display:flex;align-items:center;gap:12px}
.rev .av{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.rev .who .nm{font-weight:700;font-size:14px}
.rev .who .dt{font-size:12.5px;color:var(--steel)}
.gbadge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--steel);margin-top:14px}
@media(max-width:900px){.revgrid{grid-template-columns:1fr}}

/* ---------- brand marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;padding:20px 0}
.marquee .track{display:flex;gap:64px;white-space:nowrap;animation:mq 34s linear infinite;width:max-content}
.marquee span{font-family:var(--disp);font-size:24px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:#a9b2ab}
.marquee span b{color:var(--green);font-weight:600}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- split / about ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.split .im{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative}
/* The global img rule caps at max-width:100% but never stretches, so a photo narrower
   than its column left a gap down the right-hand side (Aug 17). */
.split .im img{width:100%}
.split .im .im-cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(13,25,52,.88));color:#fff;font-size:13px;font-weight:600;padding:34px 18px 14px}
.split ul.ticks{list-style:none;margin-top:18px}
.split ul.ticks li{padding:7px 0 7px 32px;position:relative;font-size:15.5px}
.split ul.ticks li::before{content:"✓";position:absolute;left:0;top:7px;width:22px;height:22px;background:var(--green);color:#fff;border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}}

/* ---------- area chips ---------- */
.areas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.area{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:10px 20px;font-weight:600;font-size:14.5px;color:var(--ink);transition:.18s}
.area:hover{border-color:var(--green);color:var(--green-ink);transform:translateY(-2px)}
.area.hub{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- brand tiles (small squares, logo-ready) ---------- */
.brandgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.brandtile{flex:1 1 116px;max-width:134px;display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:1/1;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px;transition:.18s}
.brandtile span{font-family:var(--disp);text-transform:uppercase;letter-spacing:.5px;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.15}
.brandtile img{max-width:100%;max-height:100%;object-fit:contain}
.brandtile:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.07)}
.brandtile:hover span{color:var(--green-ink)}
@media(max-width:520px){.brandgrid{gap:10px}.brandtile{flex-basis:96px;max-width:112px}.brandtile span{font-size:12px}}

/* ---------- category groups (compact mega-menu) ---------- */
.catgroups{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:26px 30px}
.catgroup h3{font-family:var(--disp);font-size:16px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:9px;padding-bottom:9px;border-bottom:2px solid var(--line)}
.catgroup h3 a{color:var(--ink)}
.catgroup h3 a:hover{color:var(--green-ink)}
.catgroup ul{list-style:none}
.catgroup li{margin-bottom:6px}
.catgroup li a{color:var(--steel);font-size:14px}
.catgroup li a:hover{color:var(--green-ink)}
@media(max-width:720px){
  .catgroups.acc{grid-template-columns:1fr;gap:0}
  .catgroups.acc .catgroup ul{display:none;padding:4px 0 6px}
  .catgroups.acc .catgroup.open ul{display:block}
  .catgroups.acc .catgroup h3{cursor:pointer;position:relative;margin-bottom:0;padding:12px 30px 12px 0}
  .catgroups.acc .catgroup.open h3{border-bottom-color:transparent}
  .catgroups.acc .catgroup h3::after{content:'+';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:400;color:var(--steel)}
  .catgroups.acc .catgroup.open h3::after{content:'\2013'}
}

/* ---------- delivery map ---------- */
.geo{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.geo-sub{color:#aab5c0;margin:6px 0 24px;max-width:520px}
.geo-areas{justify-content:center}
.geo-areas .area,.geo-areas .area.hub{background:#fff;border-color:#fff;color:#10151b;cursor:default;font-weight:600}
.geo-areas .area:hover{border-color:#fff;color:#10151b;transform:none}
.geo-map{border-radius:var(--radius);overflow:hidden;border:1px solid #2b4a80;box-shadow:var(--shadow);position:relative;isolation:isolate}
.geo-map::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(-45deg,var(--amber) 0 14px,var(--ink) 14px 28px);z-index:600}
#geoMap{height:470px;background:#dde5ee}
@media(max-width:640px){#geoMap{height:340px}}
.gm-dot{width:13px;height:13px;border-radius:50%;background:var(--navy);border:2.5px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.gm-hub{width:22px;height:22px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3);position:relative}
.gm-hub span{position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--green);animation:geopulse 2.4s ease-out infinite}
.gm-label{background:#fff;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-weight:700;font-family:var(--body);font-size:12px;padding:3px 8px;box-shadow:0 2px 6px rgba(18,42,84,.18)}
.gm-label-hub{background:var(--green);color:#fff;border-color:var(--green);font-size:12.5px}
.leaflet-tooltip.gm-label-hub::before{border-top-color:var(--green)}
.hub-pulse{animation:geopulse 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes geopulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(3.2);opacity:0}100%{transform:scale(3.2);opacity:0}}
@media(prefers-reduced-motion:reduce){.hub-pulse{animation:none}}
@media(max-width:900px){.geo{grid-template-columns:1fr;gap:36px}}

/* ---------- product page & card links ---------- */
.prod .ph{text-decoration:none}
.prod h3 a{color:var(--ink);text-decoration:none}
.prod h3 a:hover{color:var(--green-ink)}
a.ph{cursor:pointer}
.pd-im{background:#f1f3ef;display:flex;align-items:center;justify-content:center;padding:34px;min-height:380px}
/* The machine photo keeps its own height instead of stretching to match the text
   column - otherwise opening the attachment panel blows the image box out (Aug 17). */
.pd-split{align-items:start}
.pd-left{align-self:start;min-width:0}
/* Details & specs sits under the photo in the left column (Aug 17). Scaled down from
   the old full-width section: smaller heading, denser spec table, since the column is
   about half the width it used to have. */
.pd-side{margin-top:34px}
.pd-side .sec-head{margin-bottom:16px}
.pd-side .sec-head h2{font-size:clamp(24px,2.4vw,32px)}
.pd-side .pd-desc p{font-size:15px;line-height:1.65;color:var(--steel);margin-bottom:12px}
.pd-side .pd-feat-h{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--ink);margin:22px 0 10px}
.pd-side .pd-spec{width:100%;border-collapse:collapse;font-size:14px}
.pd-side .pd-spec td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.pd-side .pd-spec td:first-child{font-weight:700;color:var(--ink);width:52%}
.pd-side .pd-spec td:last-child{color:var(--steel)}
.pd-side .pd-spec tr:nth-child(odd) td{background:var(--paper)}
.pd-side .pd-feats{margin:0;padding:0}
.pd-side .pd-feats li{font-size:14.5px}
@media(max-width:900px){ .pd-side{margin-top:26px} }
.pd-im img{max-height:420px;width:auto;object-fit:contain;mix-blend-mode:multiply}

/* ---------- leasing calculator ---------- */
.lc-out{display:flex;gap:34px;margin:22px 0;padding:18px 22px;background:var(--paper);border-radius:12px;flex-wrap:wrap}
.lc-out b{font-family:var(--disp);font-size:34px;font-weight:700;color:var(--green-ink);display:block;line-height:1.05}
.lc-out span{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--steel)}

/* ---------- social block / phone mockup ---------- */
.soc{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.soc-btns{margin-top:24px}
.soc-links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.soc-links a{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:9px 18px;font-weight:600;font-size:14px;color:var(--ink);transition:.18s}
.soc-links a:hover{border-color:var(--green);color:var(--green-ink);transform:translateY(-2px)}
.phone-mock{display:block;max-width:330px;margin:0 auto;background:#fff;border:9px solid var(--ink);border-radius:38px;overflow:hidden;box-shadow:var(--shadow);transition:.25s;text-decoration:none;color:var(--ink)}
.phone-mock:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:0 18px 44px rgba(18,42,84,.22)}
.pm-head{display:flex;align-items:center;gap:12px;padding:16px 16px 10px}
.pm-ring{width:56px;height:56px;border-radius:50%;padding:3px;background:conic-gradient(#f9ce34,#ee2a7b,#6228d7,#f9ce34);flex:0 0 auto}
.pm-ring img{width:100%;height:100%;border-radius:50%;background:#fff;border:2.5px solid #fff;object-fit:contain}
.pm-id b{display:block;font-size:15px}
.pm-id span{font-size:12.5px;color:var(--steel)}
.pm-stats{display:flex;gap:0;padding:4px 16px 12px}
.pm-stats>div{flex:1;text-align:center}
.pm-stats b{font-size:16px;display:block;line-height:1.1}
.pm-stats span{font-size:11.5px;color:var(--steel)}
.pm-follow{margin:0 16px 14px;background:#1b75bc;color:#fff;text-align:center;font-weight:700;font-size:14px;padding:9px;border-radius:9px}
.pm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.pm-grid img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
@media(max-width:900px){.soc{grid-template-columns:1fr;gap:36px}}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(115deg,var(--ink) 45%,#1d3f78);color:#fff;position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;top:0;right:0;bottom:0;width:260px;background:repeating-linear-gradient(-45deg,transparent 0 26px,rgba(63,174,73,.09) 26px 52px)}
.cta-band .wrap{padding:66px 24px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;position:relative;z-index:1}
.cta-band h2{margin:6px 0 8px}
.cta-band p{color:#aab5c0;max-width:520px}
.cta-band .phone{font-family:var(--disp);font-size:34px;font-weight:700;color:#fff}
.cta-band .phone small{display:block;font-family:var(--body);font-size:13px;color:#8d99a5;letter-spacing:1px;text-transform:uppercase;font-weight:600}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.faq summary{padding:18px 22px;font-weight:700;font-size:15.5px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";font-size:22px;color:var(--green);transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 18px;color:var(--steel);font-size:14.5px}

/* ---------- forms ---------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:34px;box-shadow:var(--shadow)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid .full{grid-column:1/-1}
label{font-size:13px;font-weight:700;display:block;margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px}
input,select,textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;font-family:var(--body);outline:none;background:#fff;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--green)}
input::placeholder,textarea::placeholder{color:#98a2b3;opacity:1}
/* accepted / error field states (custom, no native bubbles) */
.field-ok{border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(63,174,73,.14)}
.field-err{border-color:#e5484d!important;box-shadow:0 0 0 3px rgba(229,72,77,.12)}
.field-msg{color:#e5484d;font-size:12px;font-weight:600;margin-top:6px}
.form-note{font-size:12.5px;color:var(--steel);margin-top:12px}
/* Rental start + Duration stay side by side inside the quote on mobile: stacked they
   cost ~80px on step 2, which is the step that sets the shared height for all three.
   Contact-page fields still stack - they're full-width labels. (Aug 18) */
@media(max-width:640px){
  .modal .qstep[data-step="2"] > .fgrid{grid-template-columns:1fr 1fr;gap:12px}
  .modal .qstep[data-step="2"] > .fgrid label{font-size:11px;letter-spacing:.5px}
}
@media(max-width:640px){.fgrid{grid-template-columns:1fr}
  /* 16px min prevents iOS Safari from auto-zooming on input focus */
  input,select,textarea{font-size:16px}
}

/* ---------- info tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.tile h3{font-family:var(--disp);font-size:20px;text-transform:uppercase;margin-bottom:8px}
.tile p{font-size:14.5px;color:var(--steel)}
.tile .big{font-family:var(--disp);font-size:30px;font-weight:700;color:var(--green-ink)}
@media(max-width:860px){.tiles{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#9aa6b1;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:40px;padding:60px 0 40px}
footer h4{font-family:var(--disp);color:#fff;font-size:18px;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a{color:#9aa6b1}
footer a:hover{color:#fff}
footer .flogo img{height:52px;width:auto;margin-bottom:16px;background:#fff;padding:6px;border-radius:8px}
footer .assoc{display:flex;gap:12px;margin-top:18px;align-items:center}
footer .assoc img{height:40px;width:auto;background:#fff;border-radius:6px;padding:4px}
footer .base{border-top:1px solid #274572;padding:20px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}
@media(max-width:900px){
  footer .cols{display:block;columns:2;column-gap:40px}
  footer .flogo{column-span:all;margin-bottom:32px}
  footer .cols>div{break-inside:avoid;margin-bottom:28px}
}

/* ---------- newsletter & legal ---------- */
.f-soc{display:flex;gap:8px;margin-top:16px;flex-wrap:nowrap}
.f-soc a{width:38px;height:38px;flex:0 0 auto;border-radius:10px;background:var(--ink-2);border:1px solid #274572;display:flex;align-items:center;justify-content:center;color:#9aa6b1;transition:.2s}
.f-soc a:hover{color:#fff;border-color:var(--green);transform:translateY(-2px)}
.f-soc svg{width:18px;height:18px}
.nl label{color:#fff;font-size:12px}
.nl-row{display:flex;gap:8px}
.nl-row input{flex:1;padding:11px 14px;border-radius:9px;border:1px solid #274572;background:var(--ink-2);color:#fff;font-size:14px;outline:none}
.nl-row input:focus{border-color:var(--green)}
.nl-row .qbtn{flex:0 0 auto;padding:11px 16px}
.nl-ok{color:var(--green);font-weight:700;font-size:14px;margin-top:8px}
.legal{max-width:820px}
.legal h3{font-family:var(--disp);font-size:22px;text-transform:uppercase;margin:26px 0 8px}
.legal p{color:#2b333c;font-size:15px;margin-bottom:10px}

/* ---------- product description ---------- */
.pd-desc{max-width:820px;color:var(--steel);font-size:15.5px}
.pd-desc p{margin-bottom:12px}
.pd-feat-h{font-family:var(--disp);font-size:22px;text-transform:uppercase;margin:26px 0 6px}
.pd-feats{list-style:none;max-width:820px;columns:2;column-gap:40px}
.pd-feats li{padding:6px 0 6px 30px;position:relative;font-size:14.5px;break-inside:avoid}
.pd-feats li::before{content:"✓";position:absolute;left:0;top:6px;width:20px;height:20px;background:var(--green);color:#fff;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:800}
@media(max-width:640px){.pd-feats{columns:1}}
.pd-spec{width:100%;max-width:820px;border-collapse:collapse}
.pd-spec td{padding:10px 14px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--steel)}
.pd-spec td:first-child{font-weight:700;color:var(--ink);width:45%}
.pd-spec tr:nth-child(odd){background:var(--paper)}

/* ---------- quote modal ---------- */
.modal{position:fixed;inset:0;height:100vh;height:100dvh;background:rgba(13,25,52,.7);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;overscroll-behavior:contain}
.modal.open{display:flex}
.modal .box{background:#fff;border-radius:16px;max-width:520px;width:100%;padding:34px;position:relative;animation:pop .25s ease;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain}
/* freeze the page behind the modal (prevents iOS from scrolling the background into view) */
html.modal-open,html.modal-open body{overflow:hidden}
html.modal-open body{position:fixed;left:0;right:0;width:100%}
html.modal-open .sticky-call{display:none!important}
@keyframes pop{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal .x{position:absolute;top:14px;right:16px;background:none;border:0;font-size:24px;cursor:pointer;color:var(--steel)}
.modal h3{font-family:var(--disp);font-size:26px;text-transform:uppercase;margin-bottom:4px}
.modal .m-sub{font-size:14px;color:var(--steel);margin-bottom:18px}
.modal .ok{text-align:center;padding:30px 10px}
.modal .ok .ic{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:pop .3s ease}

/* ---------- quote two-step form ---------- */
.qsteps{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.qstep-pill{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--steel);white-space:nowrap}
.qstep-num{width:22px;height:22px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line);color:var(--steel);font-size:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.2s}
.qstep-pill.on{color:var(--ink)}
.qstep-pill.on .qstep-num{background:var(--green);border-color:var(--green);color:#fff}
.qstep-pill.done .qstep-num{background:var(--green);border-color:var(--green);color:#fff}
.qstep-line{flex:1;height:2px;background:var(--line);border-radius:2px}
.qstep-pill .lb-short{display:none}
/* Three pills of uppercase text overflow a phone, and the 3rd fell off screen
   entirely. Short labels, tighter tracking, thinner connectors. (Aug 18) */
@media(max-width:700px){
  .qsteps{gap:7px;margin-bottom:18px}
  .qstep-pill{font-size:11px;letter-spacing:.3px;gap:6px;min-width:0}
  .qstep-num{width:20px;height:20px;font-size:11px}
  .qstep-pill .lb-full{display:none}
  .qstep-pill .lb-short{display:inline}
  .qstep-line{min-width:8px}
}
.qstep[hidden]{display:none}
.qstep{animation:pop .2s ease}
.qnav{margin-top:18px}
.qnav.two{display:flex;gap:12px}
.qnav.two .btn.primary{flex:1}
.btn.qback{background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.btn.qback:hover{border-color:var(--steel)}

/* date field + calendar */
.datewrap{position:relative}
.datepick{width:100%;min-width:0;max-width:100%;-webkit-appearance:none;appearance:none;text-align:left;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556179' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:18px}
.datepick::-webkit-calendar-picker-indicator{opacity:0}
.datepick::-webkit-date-and-time-value{text-align:left;margin:0;min-width:0}
.datewrap{display:block;width:100%}
.cal{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:266px;max-width:calc(100vw - 60px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 42px rgba(18,42,84,.2);padding:10px;animation:pop .15s ease}
.cal.up{top:auto;bottom:calc(100% + 6px)}
.cal[hidden]{display:none}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-title{font-family:var(--disp);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink)}
.cal-nav{width:27px;height:27px;border-radius:8px;border:1px solid var(--line);background:#fff;font-size:19px;line-height:1;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.cal-nav:hover{background:var(--paper);border-color:var(--green)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--steel);text-transform:uppercase;letter-spacing:.4px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-empty{height:28px}
.cal-day{height:28px;border:0;background:none;border-radius:7px;font-size:13px;color:var(--ink);cursor:pointer;font-family:var(--body);transition:.12s;padding:0}
.cal-day:hover{background:var(--paper)}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--green);font-weight:700}
.cal-day.sel{background:var(--green);color:#fff;font-weight:700}
.cal-day.sel:hover{background:var(--green-dark)}
.cal-day.past{color:#c7cede;cursor:default}
.cal-day.past:hover{background:none}
.cal-foot{display:flex;justify-content:space-between;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.cal-clear,.cal-today{background:none;border:0;color:var(--green-ink);font-weight:700;font-size:13px;cursor:pointer;padding:4px 6px}
.cal-clear:hover,.cal-today:hover{text-decoration:underline}

/* keep the two step-2 buttons on one line each */
.qnav.two .btn{white-space:nowrap}

@media(max-width:640px){
  .modal .box{padding:22px 20px}
  .qnav.two{gap:10px}
  .qnav.two .btn{padding:15px 14px;font-size:15px}
  .qnav.two .btn.qback{flex:0 0 auto}
}

/* ---------- quote add-ons (frequently rented together) ---------- */
.addons{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.addons[hidden]{display:none}
.addons-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--steel);margin-bottom:12px}
.addons-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.addon{border:1px solid var(--line);border-radius:11px;overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:.2s}
.addon.on{border-color:var(--green);box-shadow:0 0 0 1.5px var(--green)}
.addon-ph{aspect-ratio:1/1;background:var(--paper);overflow:hidden}
.addon-ph img{width:100%;height:100%;object-fit:cover;display:block}
.addon-n{font-size:12.5px;font-weight:700;line-height:1.25;padding:8px 8px 0}
.addon-d{font-size:11px;color:var(--steel);line-height:1.35;padding:3px 8px 8px;flex:1}
.addon-add{margin:0 8px 8px;background:var(--green);color:#fff;border:1.5px solid var(--green);border-radius:8px;font-weight:700;font-size:11.5px;padding:7px 4px;cursor:pointer;transition:.18s}
.addon-add:hover{background:var(--green-dark);border-color:var(--green-dark)}
.addon.on .addon-add{background:var(--green-dark);color:#fff;border-color:var(--green-dark)}
@media(max-width:640px){
  .addon-d{display:none}
  /* clean single-column rows on mobile so the green button always fits on one line */
  .addons-grid{grid-template-columns:1fr;gap:8px}
  .addon{flex-direction:row;align-items:center;gap:11px;padding:8px}
  .addon-ph{width:52px;height:52px;aspect-ratio:auto;border-radius:9px;flex:0 0 auto}
  .addon-n{padding:0;flex:1;font-size:13.5px}
  .addon-add{margin:0;flex:0 0 auto;white-space:nowrap;padding:9px 14px;font-size:12.5px}
}

/* ---------- service-area pages ---------- */
.hero-trust{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.82);font-weight:600;letter-spacing:.2px}
.area-prose{max-width:820px}
.area-prose p{color:var(--steel);font-size:16.5px;margin-bottom:16px}
.area-prose p:last-child{margin-bottom:0}
.area-prose a{color:var(--green-ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.catgrid.area-cats{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.catgrid.area-cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.catgrid.area-cats{grid-template-columns:1fr}}
.cat.catcard{border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.25s}
.cat.catcard:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow)}
.cat.catcard .tx{padding:20px}
.cat.catcard h3{font-size:18px;margin-bottom:6px}
.cat.catcard .count{font-size:14px;color:var(--steel);line-height:1.5;margin-bottom:10px}
.cat.catcard .go{color:var(--green-ink);font-weight:700;font-size:13.5px}
.ticks.area-projects{max-width:840px;columns:2;column-gap:40px}
.ticks.area-projects li{break-inside:avoid;margin-bottom:14px}
.ticks.area-projects strong{color:var(--ink)}
@media(max-width:640px){.ticks.area-projects{columns:1}}
/* placeholder gallery */
.galgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal-ph{position:relative;aspect-ratio:4/3;border-radius:var(--radius);background:
  repeating-linear-gradient(-45deg,var(--paper) 0 14px,#eef1f6 14px 28px);
  border:1px dashed #c8d2df;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--steel)}
.gal-ph .gal-ic{font-size:26px;opacity:.5}
.gal-ph .gal-t{font-size:13px;font-weight:700;letter-spacing:.3px}
@media(max-width:640px){.galgrid{grid-template-columns:1fr 1fr;gap:12px}}

/* ---------- reveal animations ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero .bg{animation:none}.marquee .track{animation:none}}

/* ---------- misc ---------- */
.note-band{background:#eef7ef;border:1px solid #cfe8d2;border-radius:12px;padding:16px 22px;font-size:14.5px;color:var(--green-ink);margin-bottom:30px}
.hazard{height:8px;background:repeating-linear-gradient(-45deg,var(--amber) 0 16px,var(--ink) 16px 32px);opacity:.9}
.sticky-call{display:none}
@media(max-width:700px){
  .sticky-call{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:95;background:var(--ink);gap:1px;transform:translateY(110%);transition:transform .28s ease}
  .sticky-call.show{transform:translateY(0)}
  .sticky-call a{flex:1;text-align:center;padding:15px 10px;color:#fff;font-weight:700;font-size:14.5px}
  .sticky-call a.g{background:var(--green)}
  /* Room for the fixed call bar, and no white gap under the footer.
     Do NOT paint the body navy to do this: there is no <main> wrapper on this
     site, so a navy body shows straight through every unclassed <section> and
     the ink-coloured headings/body copy vanish into it. Put the strip on the
     footer instead - the footer is already navy. (Fixed Aug 18) */
  body{padding-bottom:0;background:var(--white)}
  footer.site{padding-bottom:58px}
}

/* floating "Text us" button (Twilio tracking number) — every page */
.sticky-text{position:fixed;right:18px;bottom:18px;z-index:96;display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-weight:700;font-size:14.5px;padding:12px 18px;border-radius:40px;box-shadow:0 8px 22px rgba(18,42,84,.22);text-decoration:none}
.sticky-text:hover{background:var(--green-dark);color:#fff;transform:translateY(-1px)}
.sticky-text .i{font-size:16px;line-height:1}
html.modal-open .sticky-text{display:none!important}
@media(max-width:700px){.sticky-text{bottom:74px;right:12px;padding:11px 15px;font-size:14px}}

/* ===== Aug 2026 fleet update: filters, fleet notice, attachment prompts ===== */
.fleet-note{background:#fff7e0;border:1px solid #f0ddA0;border-left:4px solid var(--amber);
  color:var(--ink);border-radius:10px;padding:12px 16px;font-size:14.5px;margin:18px 0 4px}
.page-hero + .wrap > .fleet-note{margin:18px 0 -6px}
.facetbar{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin:14px 0 22px}
.facet{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--steel);font-weight:600}
.facet select{font:inherit;font-weight:500;color:var(--ink);border:1px solid var(--line);border-radius:9px;
  padding:9px 34px 9px 12px;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23556179' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right 12px center/12px 8px;
  appearance:none;-webkit-appearance:none;min-width:170px;cursor:pointer}
.facet select:focus{outline:2px solid var(--blue);outline-offset:1px}
.facet-count{margin-left:auto;font-size:14px;color:var(--steel);padding-bottom:9px}
.facet-empty{grid-column:1/-1;color:var(--steel);margin:0 0 18px}
.spec-line{font-size:13px;color:var(--steel);margin:4px 0 10px}
.addon-ic{display:flex;align-items:center;justify-content:center;color:var(--blue);background:var(--paper)}
.addons.att .addon-ic{width:52px;height:52px;aspect-ratio:auto;border-radius:9px;flex:0 0 auto}
.addon-ask{padding:0 10px 10px}
.addon-ask input{width:100%;font:inherit;font-size:13.5px;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.addon-ask input:focus{outline:2px solid var(--green);outline-offset:1px}
@media (max-width:700px){
  .facetbar{gap:10px}
  .facet{flex:1 1 45%}
  .facet select{min-width:0;width:100%}
  .facet-count{margin-left:0;flex-basis:100%;padding-bottom:0}
}
/* attachment-prompt mode: compact rows, wrench icon instead of photos */
.addons.att .addons-grid{grid-template-columns:1fr 1fr;gap:8px}
.addons.att .addon{flex-direction:row;flex-wrap:wrap;align-items:center;gap:11px;padding:8px}
.addons.att .addon-n{padding:0;flex:1;font-size:13px}
.addons.att .addon-d{display:none}
.addons.att .addon-add{margin:0;flex:0 0 auto;white-space:nowrap;padding:8px 12px;font-size:12px}
.addons.att .addon-ask{flex-basis:100%;padding:0}
@media(max-width:640px){ .addons.att .addons-grid{grid-template-columns:1fr} }
/* ---- product-page CTA + inline attachment panel ---------------------------------
   Aug 17: one Call and one Get a Quote, stacked under the bullets. On a machine that
   takes attachments the first Get a Quote click opens the panel below instead of the
   modal; the second click opens the quote with the ticked attachments carried in. */
.pd-cta{margin-top:26px;display:flex;flex-direction:column;gap:10px;max-width:440px}
.pd-cta .btn{width:100%;justify-content:center;text-align:center}
.pd-cta-note{font-size:13px;color:var(--steel);margin-top:14px}
/* Closed: Call, then Get a Quote. Open: the panel takes the quote button's slot and
   the button drops to the bottom of the list, so it reads as unfurling out of the
   button rather than appearing under it. One Get a Quote on screen either way. */
.pd-cta-call{order:1}
.att-dd{order:2}
.pd-cta-quote{order:3}
.pd-cta.att-open .att-dd{order:2}
.pd-cta.att-open .pd-cta-quote{order:3}
.att-dd{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;
  box-shadow:0 6px 24px rgba(18,42,84,.07)}
.att-dd[hidden]{display:none}
.att-dd.in{animation:attslide .24s cubic-bezier(.22,.61,.36,1) both;transform-origin:top center}
@keyframes attslide{from{opacity:0;transform:scaleY(.82) translateY(-10px)}to{opacity:1;transform:none}}
.att-dd-head{display:flex;align-items:baseline;gap:12px;padding:14px 16px 0}
.att-dd-label{flex:1;font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.3}
.att-dd-state{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--steel);
  text-transform:uppercase;letter-spacing:.6px}
.att-dd-state.on{color:var(--green-dark)}
.att-dd-sub{color:var(--steel);font-size:13px;line-height:1.5;margin:6px 16px 12px}
.att-dd-rows{border-top:1px solid var(--line)}
.att-row{position:relative;border-top:1px solid var(--line)}
.att-row:first-child{border-top:0}
.att-cb{position:absolute;opacity:0;width:0;height:0}
/* opt out of the global uppercase form-label styling - these are content, not labels */
.att-lb{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;
  margin-bottom:0;text-transform:none;letter-spacing:normal;font-size:inherit;font-weight:400}
.att-lb:hover{background:var(--paper)}
.att-lb .addon-ic{width:36px;height:36px;aspect-ratio:auto;border-radius:9px;flex:0 0 auto}
.att-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.att-n{font-weight:700;font-size:14.5px;line-height:1.25}
.att-d{font-size:12.5px;color:var(--steel);line-height:1.35}
/* tick box drawn on the label, so the native input can stay visually hidden */
.att-lb::after{content:"";flex:0 0 auto;width:21px;height:21px;border:1.8px solid var(--line);
  border-radius:6px;background:#fff;transition:.15s}
.att-cb:checked + .att-lb::after{background:var(--green);border-color:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:15px;background-repeat:no-repeat;background-position:center}
.att-cb:focus-visible + .att-lb::after{outline:2px solid var(--green);outline-offset:2px}
.att-row.on{background:rgba(63,174,73,.05)}
/* Aug 18: the product-page list is reference only - picking happens on step 2 of the
   quote - so the rows are no longer labels wrapping a checkbox. */
.att-dd .att-row.static .att-lb{cursor:default}
.att-dd .att-row.static .att-lb:hover{background:none}
.att-dd .att-row.static .att-lb::after{content:none}
.att-ask{padding:0 16px 12px 64px}
.att-ask input{width:100%;max-width:260px;font:inherit;font-size:13.5px;border:1px solid var(--line);
  border-radius:8px;padding:7px 10px}
.att-ask input:focus{outline:2px solid var(--green);outline-offset:1px}
@media(max-width:560px){
  .pd-cta{max-width:none}
  .att-dd-head{padding:13px 14px 0}
  .att-dd-label{font-size:14.5px}
  .att-dd-sub{margin:6px 14px 10px}
  .att-lb{padding:10px 14px;gap:10px}
  .att-lb .addon-ic{width:32px;height:32px}
  .att-d{display:none}
  .att-ask{padding:0 14px 12px 56px}
}
/* ---- add-on variant controls: dropdown of options, capped quantity counter ---- */
.addon-sel{padding:0 10px 10px}
.addons.att .addon-sel{flex-basis:100%;padding:0}
.addon-sel select,.att-sel select{width:100%;max-width:280px;font:inherit;font-size:13px;
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff}
.addon-sel select:focus,.att-sel select:focus{outline:2px solid var(--green);outline-offset:1px}
.addon-qty{display:flex;align-items:center;gap:8px;padding:0 10px 10px;flex-wrap:wrap}
.att-qty{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.addon-qty label,.att-qty label{display:flex;align-items:center;gap:6px;font-size:12px;
  font-weight:700;color:var(--steel);margin-bottom:0}
.addon-qty input,.att-qty input{width:52px;font:inherit;font-size:13px;border:1px solid var(--line);
  border-radius:8px;padding:6px 8px}
.addon-qty input:focus,.att-qty input:focus{outline:2px solid var(--green);outline-offset:1px}
.addon-qty-max,.att-qty-max{font-size:11.5px;color:var(--steel)}
.att-sel,.att-qty{padding:0 16px 12px 66px}
@media(max-width:560px){ .att-sel,.att-qty{padding:0 14px 12px 58px} }
/* ---- attachments carried from the product page into the quote modal ---- */
.q-att{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.q-att[hidden]{display:none}
.q-att-head{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--steel);margin-bottom:9px}
.q-att-list{display:flex;flex-wrap:wrap;gap:7px}
.q-att-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(63,174,73,.1);
  border:1px solid rgba(63,174,73,.35);color:var(--green-dark);border-radius:999px;
  padding:5px 12px;font-size:12.5px;font-weight:700}
.q-att-chip::before{content:"\2713";font-size:11px}
/* real photos (non-cutout) fill their box edge to edge */
.prod .ph.cover{padding:0}
.prod .ph.cover img{width:100%;height:100%;max-height:none;object-fit:cover;mix-blend-mode:normal}
.pd-im.cover{padding:0;overflow:hidden}
.pd-im.cover img{width:100%;height:100%;max-height:none;align-self:stretch;object-fit:cover;mix-blend-mode:normal}
/* bigger product images in cards + solid tag chip (Aug 12 tweaks) */
.prod .ph{padding:8px}
.prod .ph img{width:100%;height:100%;max-height:none;object-fit:contain}
.prod .tag{background:var(--ink);color:#fff;z-index:2;box-shadow:0 2px 10px rgba(18,42,84,.28)}
/* image boxes white so contained cutouts visually fill corner to corner; photos still cover */
.prod .ph{background:#fff}
.pd-im{background:#fff}

/* mobile: carousel dots were 9px squares - too small to tap reliably */
@media(max-width:700px){
  .car-dots{gap:16px;margin-top:20px}
  .car-dot{width:12px;height:12px;position:relative}
  .car-dot::before{content:"";position:absolute;inset:-8px;border-radius:50%}
}

/* real jobsite photos in the "Recent work" grid (was a camera-icon placeholder) */
.gal-ph.has-img{border:0;background:#e6eaf0;overflow:hidden;margin:0;display:block}
.gal-ph.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gal-ph .gal-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:30px 14px 11px;
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.3px;text-align:left;
  background:linear-gradient(180deg,rgba(9,17,38,0),rgba(9,17,38,.55) 45%,rgba(9,17,38,.88))}
@media(max-width:640px){.gal-ph .gal-cap{font-size:12px;padding:26px 10px 9px}}

/* Quote modal: both steps share one height so the box never jumps. Step 2 is the
   taller one, so its add-ons render as compact rows rather than tall photo cards -
   that keeps the shared height near step 1's natural height instead of leaving a
   dead gap under step 1's fields (Aug 17). */
.modal .box{display:flex;flex-direction:column}
.modal .box > form{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.modal .box > form > .qstep:not([hidden]){flex:1 1 auto;display:flex;flex-direction:column}
.modal .box > form > .qstep > .qnav{margin-top:auto;padding-top:20px}
.modal .box > .ok{flex:1 1 auto}
/* Add-on cards in the modal keep their photos but drop the description line, and the
   photo runs to a fixed 96px rather than a full square. Both are about keeping step 2
   close to step 1's natural height, since the two steps share one box height. */
.modal .addon-d{display:none}
.modal .addon-ph,.modal .addon-ic{height:82px;aspect-ratio:auto}
.modal .addon-n{padding:8px 9px 0;min-height:2.6em;flex:1 1 auto}
.modal .addon-add{margin:8px 9px 9px}
/* narrow screens: the add-on grid stacks, so shrink each row hard - otherwise step 2
   towers over step 1 and the shared height leaves a big gap on step 1 */
@media(max-width:700px){
  /* Grid, not wrapping flex. Flex line-breaking measures each item at its
     max-content width, so "U17 Mini Excavator" pushed + Add to quote onto a second
     line and every row grew to 100px of mostly dead space. With an explicit
     thumb | name | button track the three always share one row, the name column
     shrinks and wraps inside itself, and the optional variant controls drop to a
     full-width row underneath. (Fixed Aug 18) */
  .modal .addon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:11px;padding:8px 10px}
  .modal .addon-ph,.modal .addon-ic{width:46px;height:46px;border-radius:8px}
  .modal .addon-n{padding:0;min-height:0;font-size:13.5px}
  .modal .addon-add{margin:0;white-space:nowrap;padding:9px 13px;font-size:12.5px}
  .modal .addon-sel,.modal .addon-qty,.modal .addon-ask{grid-column:1/-1;padding:0}
}
.modal .addons{margin-top:16px;padding-top:14px}
.modal .addons-head{margin-bottom:9px}
.modal .q-att{margin-top:14px;padding-top:12px}
/* Step 1 has fewer fields than step 2, and the two share a height. Centring its field
   group spreads the leftover space above and below instead of dumping it all in one
   gap above the button. */
.modal .qstep[data-step="1"] > .fgrid{margin-top:auto;margin-bottom:auto}
.modal .addons.att .addons-grid{grid-template-columns:1fr 1fr;gap:7px}
.modal .addons.att .addon{flex-wrap:nowrap;gap:9px;padding:7px}
.modal .addons.att .addon-ic{width:40px;height:40px;border-radius:8px}
.modal .addons.att .addon-ic svg{width:24px;height:24px}
.modal .addons.att .addon{align-items:center}
/* .modal .addon-n reserves min-height:2.6em so photo cards line up. Attachment
   rows have no photo and one-line names, so that reserve was pure whitespace
   below the text. (Aug 18) */
.modal .addons.att .addon-n{font-size:13.5px;line-height:1.25;min-height:0;padding:0;align-self:center}
.modal .addons.att .addon-add{padding:7px 9px;font-size:11px}
.modal .addons{margin-top:16px;padding-top:14px}
.modal .addons-head{margin-bottom:9px}
/* the 3rd step only exists on machines that take attachments */
.qsteps .q3only[hidden]{display:none}
.qslot:empty{display:none}
/* step 3 is add-ons only, so its one block shouldn't carry a top rule/gap */
.qstep[data-step="3"] .qslot > .addons{margin-top:0;padding-top:0;border-top:0}
/* Step 3 carries one block, so scale the cards up rather than leaving a dead gap
   beneath them. The description line comes back too - there is room for it here. */
.qstep[data-step="3"] .addons-grid{gap:14px}
.qstep[data-step="3"] .addon-ph{height:112px}
.qstep[data-step="3"] .addon-n{font-size:16px;line-height:1.2;padding:12px 13px 0;min-height:0}
.qstep[data-step="3"] .addon-d{display:block;font-size:12.5px;line-height:1.4;padding:5px 13px 10px;flex:1 1 auto}
.qstep[data-step="3"] .addon-add{margin:0 13px 13px;font-size:13px;padding:11px 8px}
@media(max-width:700px){
  .qstep[data-step="3"] .addons-grid{gap:10px}
  .qstep[data-step="3"] .addon{padding:10px 12px;gap:13px}
  .qstep[data-step="3"] .addon-ph{width:64px;height:64px;border-radius:10px}
  .qstep[data-step="3"] .addon-n{font-size:15px;padding:0}
  .qstep[data-step="3"] .addon-d{display:none}
  .qstep[data-step="3"] .addon-add{margin:0;font-size:13px;padding:11px 15px}
}
@media(max-width:700px){
  /* Two columns on mobile as well. Six attachments stacked single-file made step 2
     roughly twice the height of step 1, and every step shares one height. */
  .modal .addons.att .addons-grid{grid-template-columns:1fr 1fr;gap:6px}
  .modal .addons.att .addon{grid-template-columns:auto minmax(0,1fr);gap:8px;padding:7px 8px}
  .modal .addons.att .addon-ic{width:30px;height:30px;border-radius:7px}
  .modal .addons.att .addon-ic svg{width:18px;height:18px}
  .modal .addons.att .addon-n{font-size:12px;line-height:1.15}
  /* the button drops under the name so two cards fit a 390px row */
  .modal .addons.att .addon-add{grid-column:1/-1;margin:0;padding:7px 6px;font-size:11.5px}
  .modal .box{min-height:min(460px,calc(100dvh - 40px))}
  /* Step 1 is the shortest step and they all share one height, so centre its field
     group: the leftover splits above and below instead of becoming one dead gap
     under the button. */
  .modal .qstep[data-step="1"] > .fgrid{margin-top:auto;margin-bottom:auto}
}
/* ---- About: milestones / achievements rail (Aug 14) ---- */
.ms-rail{list-style:none;margin:0;padding:0;max-width:760px}
/* year column | 2px rail with a dot on it | text. The rail and the dot share the same
   x (the 92px column boundary) so the line runs dead through the middle of each dot. */
.ms{display:flex;padding:0 0 28px;position:relative}
.ms::before{content:"";position:absolute;left:92px;margin-left:-1px;top:14px;bottom:0;
  width:2px;background:var(--line)}
.ms:last-child{padding-bottom:0}
.ms:last-child::before{display:none}
.ms-yr{flex:0 0 92px;padding-right:26px;text-align:right;font-weight:800;font-size:15px;
  color:var(--green-dark);letter-spacing:.2px;line-height:1.5}
.ms-tx{flex:1;min-width:0;padding-left:26px;position:relative}
.ms-tx::before{content:"";position:absolute;left:-6px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px #fff,0 0 0 5.5px var(--line)}
.ms-tx h3{margin:0 0 4px;font-size:17px;line-height:1.45}
.ms-tx p{margin:0;color:var(--steel);font-size:14.5px;line-height:1.55}
@media(max-width:640px){
  /* stack: rail moves to the far left, year sits above the title */
  .ms{flex-direction:column;padding:0 0 24px 26px}
  .ms::before{left:5px;top:16px}
  .ms-yr{flex:0 0 auto;text-align:left;padding-right:0;font-size:12.5px;
    text-transform:uppercase;letter-spacing:.8px;line-height:1.3}
  .ms-tx{padding-left:0}
  .ms-tx::before{left:-27px;top:-14px}
  .ms-tx h3{font-size:16px;line-height:1.35}
}
/* ---- About: company timeline (Aug 17) ------------------------------------------
   Centre rail with cards alternating either side on desktop; stacks to a single
   left-hand rail on narrow screens. Entries render with or without a photo. */
.tl-sec{overflow:hidden}
.tl-rail{list-style:none;margin:38px auto 0;padding:0;max-width:960px;position:relative}
.tl-rail::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:6px;bottom:6px;
  width:2px;background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:start;
  margin-bottom:26px}
.tl-item:last-child{margin-bottom:0}
.tl-yr{grid-column:2;display:flex;justify-content:center;padding-top:14px}
.tl-yr span{background:var(--ink);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.6px;
  padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 0 0 5px #fff}
.tl-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  box-shadow:0 6px 22px rgba(18,42,84,.06);position:relative}
.tl-l .tl-card{grid-column:1;grid-row:1}
.tl-r .tl-card{grid-column:3;grid-row:1}
/* little pointer toward the rail */
.tl-card::after{content:"";position:absolute;top:22px;width:10px;height:10px;background:#fff;
  border:1px solid var(--line);transform:rotate(45deg)}
.tl-l .tl-card::after{right:-6px;border-left:0;border-bottom:0}
.tl-r .tl-card::after{left:-6px;border-right:0;border-top:0}
.tl-card h3{font-size:19px;line-height:1.3;margin:0 0 8px}
.tl-card p{color:var(--steel);font-size:14.8px;line-height:1.62;margin:0 0 9px}
.tl-card p:last-child{margin-bottom:0}
.tl-img{margin:-20px -22px 15px;border-radius:14px 14px 0 0;overflow:hidden;background:var(--paper)}
.tl-img img{display:block;width:100%;height:auto}
@media(max-width:820px){
  .tl-rail{max-width:none;margin-top:28px}
  .tl-rail::before{left:9px;transform:none}
  .tl-item{grid-template-columns:1fr;margin-bottom:20px;padding-left:38px}
  .tl-yr{grid-column:1;justify-content:flex-start;padding:0 0 9px;margin-left:-38px}
  .tl-yr span{box-shadow:0 0 0 4px #fff}
  .tl-l .tl-card,.tl-r .tl-card{grid-column:1;grid-row:auto}
  .tl-card{padding:17px 18px}
  .tl-card::after{display:none}
  .tl-img{margin:-17px -18px 13px}
}

/* Images carry intrinsic width/height attributes (added Aug 17 for layout stability).
   Where CSS constrains only one axis, the other must be auto or the attribute pins it
   and the image stretches - which is exactly what happened to the footer logos. */
img[width][height]{max-width:100%}
/* ---- mobile: product page order + footer tidy (Aug 17) ----
   On a phone the two columns stack, which put the whole spec table between the
   machine photo and the Get a Quote buttons. display:contents lifts the left
   column's children into the grid so the CTA can sit directly under the photo and
   the specs drop below it. */
@media(max-width:900px){
  .pd-split > .pd-left{display:contents}
  .pd-split > .pd-left > .im{order:1}
  .pd-split > .pd-right{order:2}
  .pd-split > .pd-left > .pd-side{order:3;margin-top:8px}
}
/* yard hours read as one line rather than breaking across two */
footer .fhours{white-space:nowrap}
/* timeline photo sits opposite its card, filling the empty half of the rail */
.tl-l .tl-img{grid-column:3;grid-row:1}
.tl-r .tl-img{grid-column:1;grid-row:1}
.tl-img{margin:0;border-radius:14px;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 6px 22px rgba(18,42,84,.06);align-self:start}
.tl-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:820px){
  .tl-l .tl-img,.tl-r .tl-img{grid-column:1;grid-row:auto}
  .tl-img{margin-top:12px}
  .tl-img img{aspect-ratio:16/10}
}

/* ---- blog cards (homepage strip + blog index) ---- */
.bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:960px){.bcards{grid-template-columns:1fr;max-width:560px}}
.bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:.18s;box-shadow:0 1px 3px rgba(18,42,84,.06)}
.bcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,42,84,.13)}
.bcard img{width:100%;height:185px;object-fit:cover;display:block}
.bcard .bc-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.bcard .bc-kick{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--steel);margin-bottom:10px}
.bcard .bc-kick::before{content:"";width:22px;height:3px;background:var(--green);border-radius:2px;flex:none}
.bcard h3{margin:0 0 8px;font-size:19px;line-height:1.28;color:var(--ink)}
.bcard p{margin:0 0 14px;color:var(--steel);font-size:14.5px;line-height:1.55}
.bcard .bc-read{margin-top:auto;font-weight:700;font-size:14px;color:var(--green-ink)}
.bcard:hover .bc-read{text-decoration:underline}
.btn.outline{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.outline:hover{border-color:var(--green);background:var(--paper)}