/* ============================================================================
   SIBERIENNE — design system
   Aesthetic: a plan sheet, not a contractor template. Rules, tabular numerals,
   oversized numerals, mono labels. Built for builders who read drawings.
   ========================================================================== */
:root{
  --orange:#F15A22;
  --orange-dark:#C7451A;
  --orange-soft:#FEF0EA;
  --black:#0E0E0E;
  --ink:#1A1A1A;
  --ink-2:#242424;
  --steel:#565B61;
  --steel-light:#8A9096;
  --paper:#FAFAF8;
  --paper-2:#F2F1ED;
  --line:#E4E1DA;
  --line-dark:#33322F;
  --white:#fff;
  --green:#1B7F45;

  --display:'Oswald',sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --r:3px;
  --t:.16s cubic-bezier(.4,0,.2,1);
  --sh:0 10px 34px rgba(14,14,14,.11);
  --nav-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);color:var(--ink);background:var(--white);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
svg{display:block;flex-shrink:0}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}

h1,h2,h3,h4,h5{font-family:var(--display);font-weight:600;line-height:1.05;text-transform:uppercase}
h1{font-size:clamp(36px,5.4vw,68px);font-weight:700;letter-spacing:-.01em}
h2{font-size:clamp(26px,3.4vw,42px)}
h3{font-size:clamp(19px,2vw,24px)}
h4{font-size:18px}

.wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.narrow{max-width:860px;margin:0 auto;padding:0 22px}
.sec{padding:clamp(52px,6.5vw,92px) 0}
.sec-sm{padding:clamp(36px,4vw,56px) 0}

/* mono label — the signature element */
.lab{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);display:flex;align-items:center;gap:10px;
}
.lab::before{content:'';width:20px;height:1px;background:var(--orange)}
.lab.plain::before{display:none}
.lab.mut{color:var(--steel-light)}
.lab.mut::before{background:var(--steel-light)}

.lede{font-size:17.5px;color:var(--steel);max-width:68ch;line-height:1.62}
.lede.big{font-size:19px}
.hr{height:1px;background:var(--line);border:none;margin:0}
.stripe{height:7px;background:repeating-linear-gradient(135deg,var(--orange) 0 13px,var(--black) 13px 26px)}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 26px;border-radius:var(--r);border:2px solid transparent;
  font-size:15px;font-weight:600;transition:var(--t);white-space:nowrap;text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-pri{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-pri:hover{background:var(--orange-dark);border-color:var(--orange-dark)}
.btn-out{border-color:var(--line);color:var(--ink)}
.btn-out:hover{border-color:var(--ink);background:var(--paper)}
.btn-dk{background:var(--black);color:#fff;border-color:var(--black)}
.btn-dk:hover{background:var(--ink-2)}
.btn-on{border-color:rgba(255,255,255,.32);color:#fff}
.btn-on:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{height:42px;padding:0 17px;font-size:14px}
.btn-xl{height:64px;padding:0 34px;font-size:18px;font-weight:700;letter-spacing:.01em}
.btn-xl svg{width:19px;height:19px}
.btn-blk{width:100%}
.arw{display:inline-flex;align-items:center;gap:7px;color:var(--orange);font-weight:600;font-size:14.5px;transition:var(--t)}
.arw:hover{gap:11px}

/* ---------------------------------------------------------------- header */
.util{background:var(--black);color:rgba(255,255,255,.6);font-size:12.5px;font-family:var(--mono)}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:36px;gap:14px}
.util b{color:var(--orange);font-weight:500}
.util .u-r{display:flex;gap:18px;align-items:center}
.util a:hover{color:#fff}

.nav{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand-mark{width:34px;height:34px;flex-shrink:0}
.brand-t{display:flex;flex-direction:column}
.brand-t b{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:.05em;line-height:1;color:var(--black)}
.brand-t span{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--orange);text-transform:uppercase;margin-top:3px}

.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{position:relative;padding:9px 11px;font-size:14.5px;font-weight:500;
  transition:color var(--t);white-space:nowrap;color:var(--ink)}
.nav-links a::after{content:'';position:absolute;left:11px;right:11px;bottom:2px;height:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.nav-links a:hover{color:var(--orange)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.on{color:var(--orange);font-weight:600}
.nav-links a.on::after{transform:scaleX(1)}
/* the quote link is the one action in the bar, so it reads as one */
.nav-links .nav-quote{margin-left:8px;padding:9px 16px;border:1.5px solid var(--orange);
  border-radius:var(--r);color:var(--orange);font-weight:600}
.nav-links .nav-quote:hover{background:var(--orange);color:#fff}
.nav-links .nav-quote::after{display:none}
.nav-act{display:flex;gap:8px;align-items:center;flex-shrink:0}
.tel{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 15px;background:var(--black);color:#fff;border-radius:var(--r);font-size:14.5px;font-weight:600;transition:var(--t)}
.tel:hover{background:var(--ink-2)}
.wa{width:44px;height:44px;display:grid;place-items:center;background:#25D366;color:#fff;border-radius:var(--r);transition:var(--t)}
.wa:hover{background:#1DA851}
.burger{display:none;width:44px;height:44px;place-items:center;border:1.5px solid var(--line);border-radius:var(--r)}

/* ------------------------------------------------------------------ hero */
.hero{background:var(--black);color:#fff;position:relative;overflow:hidden}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(241,90,34,.10) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(241,90,34,.10) 1px,transparent 1px);
  background-size:46px 46px;
}
.hero .wrap{
  position:relative;z-index:2;
  padding-top:clamp(44px,5vw,70px);padding-bottom:clamp(38px,4vw,56px);
  display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,58px);align-items:center;
}
.hero h1{color:#fff;max-width:17ch;margin:16px 0 0;font-size:clamp(33px,4.3vw,55px)}
.hero h1 .or{color:var(--orange);display:block}
.hero .lede{color:rgba(255,255,255,.74);margin:20px 0 30px;max-width:46ch}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* the image beside the slogan — swap the <img> src for a photo */
.hero-fig{position:relative;margin:0}
.hero-fig img{
  width:100%;aspect-ratio:5/3;object-fit:cover;display:block;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);background:#111;
}
.hero-fig::after{
  content:'';position:absolute;left:0;top:0;width:56px;height:56px;
  border-left:3px solid var(--orange);border-top:3px solid var(--orange);
  border-radius:var(--r) 0 0 0;pointer-events:none;
}
.hero-cap{
  position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:9px;
  background:rgba(14,14,14,.86);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:7px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero-cap i{width:7px;height:7px;background:var(--orange);border-radius:50%;flex-shrink:0}

/* service area — a radius drawing, not a wall of chips */
.area{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.area .wrap{padding-top:clamp(30px,3.4vw,46px);padding-bottom:clamp(34px,4vw,56px)}
.area-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(28px,4vw,56px);align-items:center}
.area-copy h2{margin-top:14px}
.area-copy .lede{margin-top:16px;font-size:16px}
.area-facts{display:flex;gap:34px;margin:24px 0 20px}
.area-facts b{display:block;font-family:var(--display);font-size:34px;font-weight:600;
  color:var(--orange);line-height:1}
.area-facts span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--steel);margin-top:6px}
.area-map{margin:0}
.area-map .radius{width:100%;height:auto;display:block}
.area-map figcaption{font-family:var(--mono);font-size:10.5px;color:var(--steel-light);
  text-align:center;margin-top:8px}
.area-list{display:none;font-family:var(--mono);font-size:12px;line-height:1.9;
  color:var(--steel);text-align:center;margin-top:14px}
@media(max-width:860px){
  .radius .callouts{display:none}
  .area-list{display:block}
}

/* the big quote call-out — impossible to miss */
.qband{background:var(--orange);color:#fff}
.qband .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding-top:30px;padding-bottom:30px;flex-wrap:wrap}
.qband h2{color:#fff;font-size:clamp(24px,3vw,38px);line-height:1.02}
.qband p{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.82);margin-top:9px}
.qband .btn{background:#fff;color:var(--orange-dark);border-color:#fff}
.qband .btn:hover{background:var(--black);color:#fff;border-color:var(--black)}

/* ---------------------------------------------------------- credit strip */
.creds{background:var(--ink);color:#fff;border-top:1px solid var(--line-dark)}
.creds .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);padding-left:0;padding-right:0}
.cred{background:var(--ink);padding:22px 24px}
.cred b{display:block;font-family:var(--display);font-size:clamp(28px,3vw,38px);font-weight:600;color:var(--orange);line-height:1}
.cred span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:7px}
.cred small{display:block;font-size:12.5px;color:rgba(255,255,255,.42);margin-top:5px;line-height:1.4}

/* ═══════════════════════════ CAPABILITY MATRIX — the signature block ═══ */
.matrix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:32px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table.matrix{width:100%;border-collapse:collapse;min-width:600px}
table.matrix th,table.matrix td{padding:0;text-align:center}
table.matrix thead th{
  background:var(--black);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;padding:14px 10px;vertical-align:bottom;
}
table.matrix thead th:first-child{text-align:left;padding-left:20px;width:40%}
table.matrix tbody td{border-top:1px solid var(--line);padding:15px 10px;font-size:14px}
table.matrix tbody tr:hover td{background:var(--orange-soft)}
table.matrix td.scope{text-align:left;padding-left:20px}
table.matrix td.scope b{display:block;font-family:var(--display);font-size:18px;font-weight:600;text-transform:uppercase;line-height:1.1}
table.matrix td.scope span{display:block;font-size:13px;color:var(--steel);margin-top:2px}
table.matrix td.scope a{color:inherit}
table.matrix td.scope a:hover b{color:var(--orange)}
.tick{color:var(--green);display:inline-block;font-size:19px;font-weight:700;line-height:1}
.tick-no{color:var(--steel-light);opacity:.5;font-family:var(--mono);font-size:15px}
.mx-note{
  font-family:var(--mono);font-size:11.5px;color:var(--steel);padding:14px 20px;
  border-top:1px solid var(--line);background:var(--paper);line-height:1.6;
}
.mx-note b{color:var(--ink)}

/* section slogan — same two-tone treatment as the hero headline */
h2.slogan{margin-top:14px;font-size:clamp(27px,3.6vw,47px);line-height:1.04;max-width:23ch}
h2.slogan .or{color:var(--orange);display:block}
h2.slogan + .lede{margin-top:16px;font-size:18px}

/* what we run — the fleet, named */
.fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);margin-top:26px;overflow:hidden}
.fleet div{background:var(--paper);padding:16px 18px}
.fleet b{display:block;font-family:var(--display);font-size:17px;font-weight:600;
  text-transform:uppercase;line-height:1.1;color:var(--ink)}
.fleet span{display:block;font-family:var(--mono);font-size:11px;color:var(--steel);
  margin-top:5px;line-height:1.45}

/* the open-ended row at the foot of the matrix */
table.matrix tr.any td{background:var(--black);border-top:2px solid var(--orange)}
table.matrix tr.any:hover td{background:var(--ink-2)}
table.matrix tr.any td.scope b{color:#fff}
table.matrix tr.any td.scope span{color:rgba(255,255,255,.6)}
table.matrix tr.any a:hover b{color:var(--orange)}
table.matrix tr.any .ask{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);white-space:nowrap;transition:var(--t)}
table.matrix tr.any .ask:hover{gap:13px}

/* --------------------------------------------------------------- promise */
.promise{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;border:1px solid var(--line);background:var(--line);border-radius:var(--r);overflow:hidden}
.pitem{background:#fff;padding:26px 24px}
.pitem .pn{font-family:var(--mono);font-size:11px;color:var(--orange);letter-spacing:.14em;display:block;margin-bottom:12px}
.pitem h4{font-size:20px;margin-bottom:8px}
.pitem p{font-size:14.5px;color:var(--steel);line-height:1.55}

/* ------------------------------------------------------------- who cards */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.who-card{border:1px solid var(--line);border-radius:var(--r);padding:26px;background:#fff;transition:var(--t);display:flex;flex-direction:column;gap:12px}
.who-card:hover{border-color:var(--black);box-shadow:var(--sh)}
.who-card .wn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--orange)}
.who-card h4{font-size:22px}
.who-card p{font-size:14.5px;color:var(--steel);flex:1}
.who-card ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
.who-card li{display:flex;gap:9px;align-items:flex-start;line-height:1.45}
.who-card li::before{content:'';width:5px;height:5px;background:var(--orange);margin-top:8px;flex-shrink:0}

/* the black row now ends the matrix, so pull the fleet shot up to meet it */
#capabilities{padding-bottom:clamp(26px,3vw,40px)}
#machines{padding-top:clamp(22px,2.6vw,34px);padding-bottom:clamp(18px,2.2vw,30px)}
#quote{padding-top:clamp(26px,3vw,42px)}

/* our machines — one wide shot of the yard */
.mach-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,60px);
  align-items:center;margin-bottom:20px}
.mach-t h2{white-space:nowrap}
.mach-r{display:flex;align-items:center;justify-content:flex-end;gap:24px;flex-wrap:wrap}
.mach-r .lede{font-size:15.5px;max-width:46ch;margin:0}
/* the figure hugs the image, and the image is capped by VIEWPORT HEIGHT so it
   never fills the screen — you always see the heading above and the section below */
.fleet-shot{margin:0 auto;width:fit-content;max-width:min(100%,960px);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--paper);line-height:0}
.fleet-shot img{display:block;width:auto;height:auto;max-width:100%;max-height:62vh}

/* ------------------------------------------------------------ work cards */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.job{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:var(--t)}
.job:hover{border-color:var(--black);box-shadow:var(--sh)}
.job-img{height:186px;position:relative;border-bottom:1px solid var(--line)}
.job-img .slot{height:100%;border:none;border-radius:0}
.job-tag{position:absolute;top:11px;left:11px;z-index:3;background:var(--orange);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:2px}
.job-b{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.job-b h4{font-size:19px;line-height:1.12}
.job-b .hard{font-size:14px;color:var(--steel);border-left:2px solid var(--orange);padding-left:13px;line-height:1.55;flex:1}
.job-f{border-top:1px solid var(--line);padding-top:11px;margin-top:auto;font-family:var(--mono);font-size:11.5px}
.job-f div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.job-f dt{color:var(--steel-light)}
.job-f dd{color:var(--ink);font-weight:500;text-align:right}

/* ----------------------------------------------------------- price bands */
.bands{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin-top:26px}
.band-h{background:var(--black);color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.band-h h3{color:#fff;font-size:21px}
.band-h span{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.1em;text-transform:uppercase}
.band{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 22px;border-top:1px solid var(--line)}
.band:first-of-type{border-top:none}
.band-l b{display:block;font-size:15.5px;font-weight:600}
.band-l span{display:block;font-size:13.5px;color:var(--steel);margin-top:2px}
.band-p{font-family:var(--display);font-size:clamp(19px,2.2vw,25px);font-weight:600;color:var(--orange);white-space:nowrap;font-variant-numeric:tabular-nums}
.band-min{background:var(--paper);border-top:1px solid var(--line);padding:16px 22px;font-size:14.5px;line-height:1.6}
.band-min b{color:var(--black)}
.band-why{background:var(--black);color:rgba(255,255,255,.72);padding:20px 22px;font-size:14.5px;line-height:1.6}
.band-why b{color:var(--orange)}

/* ---------------------------------------------------------- availability */
.avail{display:flex;flex-direction:column;gap:9px;margin-top:28px}
.arow{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 20px;transition:var(--t)}
.arow:hover{border-color:var(--black)}
.arow .an b{display:block;font-family:var(--display);font-size:19px;font-weight:600;text-transform:uppercase;line-height:1.1}
.arow .an span{font-size:13.5px;color:var(--steel)}
.arow .aw{text-align:right;font-family:var(--mono)}
.arow .aw b{display:block;font-size:13.5px;color:var(--orange);white-space:nowrap}
.arow .aw span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-light)}

/* ---------------------------------------------------------------- scopes */
.scopes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.scp{border:1px solid var(--line);border-radius:var(--r);padding:22px}
.scp.y{background:#F5FBF7;border-color:#CBE6D6}
.scp.n{background:var(--paper)}
.scp h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;margin-bottom:14px}
.scp.y h4{color:var(--green)}
.scp.n h4{color:var(--steel-light)}
.scp ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.scp li{display:flex;gap:11px;font-size:14.5px;align-items:flex-start;line-height:1.45}
.scp li svg{margin-top:4px}
.scp.y li svg{color:var(--green)}
.scp.n li{color:var(--steel)}
.scp.n li svg{color:var(--steel-light)}

/* --------------------------------------------------------------- drivers */
.drv{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:22px}
.drv-i{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.drv-i .dn{font-family:var(--mono);font-size:12px;color:var(--orange);flex-shrink:0;width:22px;padding-top:2px}
.drv-i b{display:block;font-size:15px;margin-bottom:3px}
.drv-i span{font-size:14px;color:var(--steel);line-height:1.55}

/* ------------------------------------------------------------------ faq */
.faq{margin-top:26px;border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-i > button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;text-align:left;font-size:16.5px;font-weight:600}
.faq-i > button svg{color:var(--steel-light);transition:transform var(--t)}
.faq-i.op > button svg{transform:rotate(180deg)}
.faq-a{display:none;padding:0 0 20px;font-size:15px;color:var(--steel);max-width:78ch;line-height:1.65}
.faq-i.op .faq-a{display:block}

/* ----------------------------------------------------------------- quote */
.qbox{display:grid;grid-template-columns:.82fr 1.18fr;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:32px}
.qside{background:var(--black);color:#fff;padding:clamp(26px,3.2vw,40px);display:flex;flex-direction:column;gap:18px}
.qside .qtel{margin-top:18px}
.qside h3{color:#fff;font-size:25px}
.qside p{font-size:14.5px;color:rgba(255,255,255,.68)}
/* the drawing sits at the foot of a drafting-grid panel, so the space the
   column has to fill reads as paper instead of dead black */
.qs-fig{margin:18px 0 0;flex:1;min-height:260px;display:flex;align-items:center;
  border:1px solid rgba(255,255,255,.13);border-radius:var(--r);overflow:hidden;
  background-color:#101010;
  background-image:linear-gradient(rgba(241,90,34,.09) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(241,90,34,.09) 1px,transparent 1px);
  background-size:24px 24px}
.qs-scene{width:100%;height:100%;display:block;object-fit:contain}

.qlist{list-style:none;display:flex;flex-direction:column;gap:14px}
.qlist li{display:flex;gap:13px;font-size:14.5px;color:rgba(255,255,255,.74);
  align-items:flex-start;line-height:1.45}
.qlist li b{color:#fff;font-weight:600}
.qs-i{flex-shrink:0;width:34px;height:34px;display:grid;place-items:center;
  border:1px solid rgba(241,90,34,.4);border-radius:var(--r);color:var(--orange);
  background:rgba(241,90,34,.08)}
.qs-i svg{width:19px;height:19px}
.qtel{margin-top:auto;padding-top:20px;border-top:1px solid rgba(255,255,255,.14)}
.qtel a{display:flex;align-items:center;gap:10px;color:var(--orange);font-family:var(--display);font-size:23px;font-weight:600}
.qtel span{display:block;font-size:13px;color:rgba(255,255,255,.5);margin-top:6px}
.qform{padding:clamp(24px,3vw,36px);background:#fff}
.qtabs{display:flex;border-bottom:2px solid var(--line);margin-bottom:24px}
.qtab{padding:12px 18px;font-size:15px;font-weight:600;color:var(--steel);border-bottom:2.5px solid transparent;margin-bottom:-2px;transition:var(--t)}
.qtab:hover{color:var(--ink)}
.qtab.on{color:var(--orange);border-bottom-color:var(--orange)}
.fs{display:none}.fs.on{display:block}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.full{grid-column:1/-1}
.fld label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--steel)}
.fld label i{color:var(--orange);font-style:normal}
.fld input,.fld select,.fld textarea{height:48px;padding:0 13px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;font-size:15px;outline:none;transition:var(--t);width:100%;font-family:var(--body)}
.fld textarea{height:auto;min-height:100px;padding:12px 13px;resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.fld .hint{font-size:12.5px;color:var(--steel-light);line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chips.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.chips.cols3 .chip,.chips.cols2 .chip{text-align:center;padding:11px 10px}
.chip{border:1.5px solid var(--line);border-radius:var(--r);padding:9px 14px;font-size:14px;font-weight:500;color:var(--steel);transition:var(--t);background:#fff}
.chip:hover{border-color:var(--steel-light);color:var(--ink)}
.chip.on{border-color:var(--orange);background:var(--orange-soft);color:var(--orange-dark);font-weight:600}
.ok-box{display:none;text-align:center;padding:46px 20px}
.ok-box .ic{width:62px;height:62px;border-radius:50%;background:#E9F6EE;color:var(--green);display:grid;place-items:center;margin:0 auto 16px}
.ok-box p{color:var(--steel);max-width:44ch;margin:8px auto 0}

/* ── job-type picker: collapsed categories, opened on demand ───────── */
.jobwrap{border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.jobhead{background:var(--paper);border-bottom:1.5px solid var(--line);padding:13px 16px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.jobhead b{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--steel)}
.jobhead .cnt{font-family:var(--mono);font-size:11.5px;color:var(--orange)}

.jcat{border-bottom:1px solid var(--line);background:#fff}
.jcat:last-of-type{border-bottom:none}
.jcat > button{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;
  text-align:left;transition:var(--t)}
.jcat > button:hover{background:var(--paper)}
.jcat.op > button{background:var(--paper)}
.jcat .jname{font-family:var(--display);font-size:17px;font-weight:600;text-transform:uppercase;
  line-height:1.1;color:var(--ink);flex:1;min-width:0}
.jcat .jnum{font-family:var(--mono);font-size:11px;color:var(--steel-light);white-space:nowrap}
.jcat .jsel{display:none;font-family:var(--mono);font-size:10.5px;font-weight:500;
  background:var(--orange);color:#fff;padding:3px 8px;border-radius:20px;white-space:nowrap}
.jcat.has .jsel{display:inline-block}
.jcat > button > svg{color:var(--steel-light);transition:transform var(--t)}
.jcat.op > button > svg{transform:rotate(180deg)}
.jbody{display:none;padding:2px 16px 16px}
.jcat.op .jbody{display:block}
.jchips{display:flex;flex-wrap:wrap;gap:7px}
.jchip{border:1.5px solid var(--line);border-radius:var(--r);padding:7px 12px;font-size:13.5px;
  color:var(--steel);background:#fff;transition:var(--t);line-height:1.3;text-align:left}
.jchip:hover{border-color:var(--steel-light);color:var(--ink)}
.jchip.on{border-color:var(--orange);background:var(--orange-soft);color:var(--orange-dark);font-weight:600}
.jobfoot{background:var(--paper);border-top:1.5px solid var(--line);padding:12px 16px;
  font-size:13px;color:var(--steel);line-height:1.5}
.jobfoot b{color:var(--ink)}

/* ---------------------------------------------------------------- footer */
footer{background:var(--black);color:var(--steel-light);padding:clamp(36px,4vw,52px) 0 24px}

/* a last, unmissable call to action */
.f-cta{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding-bottom:clamp(28px,3.4vw,40px);margin-bottom:clamp(28px,3.4vw,40px);
  border-bottom:1px solid var(--line-dark)}
.f-cta h3{color:#fff;font-size:clamp(22px,2.6vw,32px);margin-top:8px}
.f-cta-btns{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-wa{width:52px;height:52px;flex-shrink:0;display:grid;place-items:center;background:#25D366;
  color:#fff;border-radius:var(--r);transition:var(--t)}
.btn-wa:hover{background:#1DA851}

.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.05fr;gap:34px;
  padding-bottom:30px;border-bottom:1px solid var(--line-dark)}
footer h5{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin-bottom:15px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px}
footer a:hover{color:var(--orange)}
.f-more{color:var(--orange);font-family:var(--mono);font-size:11.5px;padding-top:3px}
.fb{display:block;margin-bottom:2px}
.fb b{font-family:var(--display);font-size:22px;font-weight:600;color:#fff;letter-spacing:.04em;
  display:block;line-height:1}
.fb span{display:block;margin-top:3px;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
  color:var(--orange);text-transform:uppercase}
.fa{font-size:14px;margin-top:14px;max-width:38ch;line-height:1.6}

/* contact column carries the phone at full weight */
.f-contact .f-tel{display:block;font-family:var(--display);font-size:clamp(21px,2.2vw,26px);
  font-weight:600;color:var(--orange);line-height:1;letter-spacing:.01em}
.f-contact .f-tel:hover{color:#fff}
.f-contact .f-mail{display:block;font-size:14px;margin-top:9px;color:var(--steel-light)}
.f-contact .f-loc{font-family:var(--mono);font-size:11.5px;color:#5F6469;margin-top:9px}
.f-links{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-dark);gap:8px !important}

.f-bottom{display:flex;justify-content:space-between;gap:16px;padding-top:20px;
  font-family:var(--mono);font-size:11.5px;flex-wrap:wrap}

/* ------------------------------------------------------------ photo slot */
.slot{
  position:relative;background:var(--ink);border:1px dashed rgba(255,255,255,.2);border-radius:var(--r);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:18px;text-align:center;overflow:hidden;min-height:120px;
}
.slot::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(241,90,34,.07) 0 10px,transparent 10px 20px)}
.slot svg{color:rgba(241,90,34,.65);position:relative;z-index:1}
.slot b{position:relative;z-index:1;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(241,90,34,.9)}
.slot span{position:relative;z-index:1;font-size:12.5px;color:rgba(255,255,255,.55);max-width:32ch;line-height:1.45}
.hero-bg .slot b,.hero-bg .slot span,.hero-bg .slot svg{display:none}

/* ------------------------------------------------------------ mobile bar */
.mbar{position:fixed;bottom:0;left:0;right:0;z-index:95;display:none;gap:9px;padding:10px 14px;background:rgba(255,255,255,.97);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
.mbar .btn{flex:1;height:48px}

/* ------------------------------------------------------------- breadcrumb */
.crumb{font-family:var(--mono);font-size:11.5px;color:var(--steel-light);padding:16px 0;display:flex;gap:8px;flex-wrap:wrap}
.crumb a:hover{color:var(--orange)}

/* ------------------------------------------------------------- responsive */
@media(max-width:1040px){
  .area-grid{grid-template-columns:1fr;gap:26px}
  .fleet{grid-template-columns:repeat(2,1fr)}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  .hero h1,.hero .lede{max-width:none}
  .hero-fig{order:-1}
  .hero-fig img{aspect-ratio:16/9}
  .who-grid,.work-grid,.pgrid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr}
  .mach-head{grid-template-columns:1fr;gap:16px;align-items:start}
  .mach-t h2{white-space:normal}
  .creds .wrap{grid-template-columns:repeat(2,1fr)}
  .qbox{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}
}
@media(max-width:1000px){
  .nav-links{display:none}
  .burger{display:grid}
}
/* narrow phones: the bar has to fit without the brand wrapping */
@media(max-width:440px){
  .nav .wrap{gap:10px}
  .brand{gap:8px}
  .brand-mark{width:30px;height:30px}
  .brand-t b{font-size:18px}
  .brand-t span{font-size:7.5px;letter-spacing:.13em}
  .nav-act{gap:6px}
  .nav-act .wa{display:none}
  .tel,.burger{width:40px;height:40px}
  .btn-xl{height:58px;padding:0 18px;font-size:15.5px}
}
@media(max-width:840px){
  .tel span{display:none}
  .tel{width:44px;padding:0}
  .scopes,.drv{grid-template-columns:1fr}
  .mbar{display:flex}
  body{padding-bottom:68px}
  .util .u-l{display:none}
  .util .wrap{justify-content:center}
  .arow{grid-template-columns:1fr;gap:11px}
  .arow .aw{text-align:left}
  .arow .btn{width:100%}
}
@media(max-width:600px){
  .who-grid,.work-grid,.pgrid,.frow,.f-grid,.fleet,.chips.cols3,.chips.cols2{grid-template-columns:1fr}
  .f-cta-btns{width:100%}
  .f-cta-btns .btn{flex:1;min-width:0}
  .creds .wrap{grid-template-columns:1fr}
  .hero-btns .btn{width:100%}
  .band{flex-direction:column;align-items:flex-start;gap:6px}
}

/* trade rental board — a machine we keep for ourselves reads quieter */
.arow.muted{opacity:.6}
.arow.muted .btn{border-color:var(--line);color:var(--steel)}
/* renting bare when you need an operator: nudge, not a block */
.opwarn{background:#FFF6EF;border:1px solid #F3C9AE;border-radius:var(--r);
  padding:13px 15px;font-size:14px;line-height:1.5;color:var(--ink)}
.opwarn a,.opwarn button{color:var(--orange);font-weight:600;text-decoration:underline;margin-left:4px}