/* ============================================================================
   Mateo Oilfield Services — design 5
   Built to the approved seven-page mockups: white navigation, split heroes
   (solid text panel beside a photograph — text never sits over a truck, a
   face or a logo), charcoal / cream / green / purple panels, uppercase
   grotesque headlines. One stylesheet, no framework.
   ========================================================================== */

/* ---------- fonts --------------------------------------------------------- */
/* The mockups are set in Helvetica / Arial Bold. The system stack renders
   exactly that on every platform with nothing to download. */

/* ---------- tokens -------------------------------------------------------- */
:root{
  --ink:#17201F;            /* charcoal panels and benefit cards, from the mockup */
  --ink-deep:#101716;       /* footer */
  /* Sampled from the mockup PDF's own fill values. It uses TWO greens:
     #006A4E for the nav call button, and a darker #064A3B for the large
     panels on About, Safety and the Careers opening card. */
  --green:#064A3B;          /* large panels: About, Safety, Careers card */
  --green-cta:#006A4E;      /* the nav's Call 24/7 Dispatch button */
  --green-deep:#04382C;
  --green-text:#0F7A57;     /* titles on light backgrounds */
  --green-glow:#3DAE85;     /* eyebrows on dark panels */
  --green-pale:#A7E3CB;     /* eyebrows on green panels */
  --purple:#5C126E;         /* purple buttons and accents, from the mockup */
  --purple-line:#7A2BB8;    /* the thin underline on benefit cards */
  --cream:#F5F2EC;          /* card and section backgrounds, from the mockup */
  --mist:#EEF4F2;           /* the cool grey the Safety graphic uses */
  /* Sampled from the client's Safety graphic, 2026-09-30: the number circles,
     the quote bar and the call band are a mid green between the two above,
     and its body copy is a dark grey rather than the black used elsewhere. */
  --green-mid:#075A46;
  --safety-body:#3F4644;
  --paper:#FFFFFF;
  --line:#E3DED4;
  --text:#17201F;
  --muted:#17201F;          /* card and section body copy — black, not grey */
  --on-dark:#FFFFFF;
  --on-dark-muted:#C9D2CF;
  --danger:#B3261E;
  --radius:6px;
  --shadow:0 12px 32px -20px rgba(27,42,45,.45);
  --ease:cubic-bezier(.16,1,.3,1);
  --font:'Helvetica Neue',Helvetica,Arial,sans-serif;
  /* The mockup's content column runs x30 to x766 on a 792pt page: a 3.8%
     margin each side, so ~93% of the viewport, and the cards line up with
     the hero copy above them. */
  --wrap:1340px;
  --gutter:clamp(16px,3.8vw,55px);
  --nav-h:96px;
  /* The bar's MEASURED height, published by mateo.js for the dropdown to size
     itself against. Deliberately a different variable from --nav-h: --nav-h is
     what sizes the bar, so a measurement must never be written back into it. */
  --nav-real:96px;
  /* Height of the fixed dispatch bar on phones, so the body's bottom padding
     and the bar itself are always derived from one number. */
  --callbar:58px;
  /* the left edge of .wrap, so full-bleed panels can align their text to it */
  --edge:max(var(--gutter),calc((100vw - var(--wrap)) / 2 + var(--gutter)));
  /* Split-hero text panel widths, measured from the mockups. Each is the page
     margin plus a share of the container, so the column keeps its proportion
     at every desktop width. HOME 320/792 = 40%, SERVICES 300/792 = 38%,
     SAFETY 317/792 = 40% (photo left), ABOUT 462/792 = 58%. */
  --panel:minmax(0,calc((100% - var(--wrap)) / 2 + var(--wrap) * 0.40));
  --panel-wide:minmax(0,calc((100% - var(--wrap)) / 2 + var(--wrap) * 0.58));
  /* Hero band height: the mockups draw 236pt on a 792pt-wide page = 29.8% of
     the page width. Held as a ratio so it scales like the drawing does. */
  --hero-h:clamp(360px,29.8vw,470px);
}

/* ---------- base ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--text);
  font:16px/1.6 var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* A page column that always fills the window. Contact carries no photograph
     from 2026-09-21 and the legal pages are a few paragraphs each, so without
     this the foot floated up the screen with white space under it. */
  display:flex; flex-direction:column; min-height:100vh; min-height:100dvh;
}
main{ flex:1 0 auto; }
img,picture{ max-width:100%; display:block; }
a{ color:var(--green-text); }
h1,h2,h3,h4{ line-height:1.15; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; }
button{ font:inherit; }
:focus-visible{ outline:3px solid var(--purple-line); outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--green); color:#fff; padding:12px 18px; border-radius:4px; font-weight:600; text-decoration:none; }
.skip-link:focus{ top:12px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); }
/* The mockups leave 22-26pt between the hero and the cards below it, and the
   same again before the page foot — about 3% of the page width. */
.section{ padding:clamp(30px,3.4vw,48px) 0; }
.section-cream{ background:var(--cream); }
/* Safety draws its page on a cool grey, not the warm cream. */
.section-mist{ background:var(--mist); }
.section-tight{ padding-top:clamp(28px,4vw,40px); }

/* ---------- type ---------------------------------------------------------- */
.eyebrow{ font-size:14px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-text); }
/* Helvetica Bold in the mockups. Rendered at 600 rather than 700: the system
   stack's bold is heavier than the drawing's, and every headline here is
   uppercase, which adds weight again. */
.h1{ font-size:clamp(2.1rem,4.4vw,3.5rem); font-weight:600; line-height:1.06; letter-spacing:.005em; text-transform:uppercase; }
.h2{ font-size:clamp(1.6rem,3vw,2.35rem); font-weight:600; line-height:1.08; letter-spacing:.005em; text-transform:uppercase; }
.h3{ font-size:clamp(1.2rem,2vw,1.55rem); font-weight:600; line-height:1.15; text-transform:uppercase; }
.lead{ font-size:clamp(1rem,1.3vw,1.125rem); line-height:1.6; }
.muted{ color:var(--muted); }
.sec-head{ max-width:720px; margin-bottom:clamp(24px,3vw,40px); }
.sec-head .h2{ margin-top:12px; }
.sec-head p:not(.eyebrow){ margin-top:14px; color:var(--muted); font-size:1.05rem; }
.sec-head .btn{ margin-top:26px; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.sec-head.row{ max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.sec-head.row > div{ max-width:720px; }

/* ---------- buttons ------------------------------------------------------- */
/* The mockup button is 128x34pt on a 792pt page, so ~46px tall at 1440 with
   tight horizontal padding — not the 50px pill this was. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:46px; padding:0 22px; border-radius:4px; border:2px solid transparent;
  font-size:11.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; text-align:center;
  cursor:pointer; transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.btn:hover{ transform:translateY(-1px); }
.btn-green{ background:var(--green-cta); color:#fff; }
.btn-green:hover{ background:var(--green); color:#fff; }
.btn-purple{ background:var(--purple); color:#fff; }
.btn-purple:hover{ background:#48146D; color:#fff; }
.btn-outline{ background:transparent; color:#fff; border-color:#fff; }
.btn-outline:hover{ background:#fff; color:var(--ink); }
.btn-outline-dark{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-outline-dark:hover{ background:var(--ink); color:#fff; }
.btn-white{ background:#fff; color:var(--green); }
.btn-white:hover{ background:#E8F3EE; color:var(--green-deep); }
.btn-sm{ min-height:44px; padding:0 20px; font-size:11.5px; }
.btn-block{ width:100%; }
.actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* ---------- navigation ---------------------------------------------------- */
.nav{ position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); transition:box-shadow .3s; }
.nav.scrolled{ box-shadow:0 10px 28px -18px rgba(27,42,45,.45); }
.nav-in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter); height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.nav-logo{ display:flex; align-items:center; flex:0 0 auto; }
.nav-logo img{ height:58px; width:auto; display:block; }
.nav-links{ display:flex; gap:clamp(18px,2.6vw,36px); margin-left:auto; margin-right:clamp(12px,2.5vw,36px); }
.nav-links a{ position:relative; padding:10px 0; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap; }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:3px; background:var(--green-text); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
/* The current page reads green, matching its underline. */
.nav-links a[aria-current="page"],.nav-links a:hover{ color:var(--green-text); }
.nav-cta{ display:flex; flex-direction:column; align-items:center; gap:3px; background:var(--green-cta); color:#fff; text-decoration:none; padding:11px 24px; border-radius:4px; line-height:1.15; flex:0 0 auto; transition:background .25s; }
.nav-cta:hover{ background:var(--green); }
.nav-cta .k{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.nav-cta .v{ font-size:15px; font-weight:600; letter-spacing:.02em; }
.nav-burger{ display:none; width:46px; height:46px; margin-left:auto; border:0; background:none; padding:0; cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:5px; border-radius:4px; }
.nav-burger span{ display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease),opacity .2s; }
.nav-open .nav-burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-open .nav-burger span:nth-child(2){ opacity:0; }
.nav-open .nav-burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
/* Sized against the bar's measured height, and against dvh where it is
   supported: on a phone 100vh is the tallest the viewport ever gets, so with
   the URL bar showing, a 100vh-based menu runs off the bottom of the screen. */
.nav-panel{ display:none; border-top:1px solid var(--line); background:var(--paper); padding:8px var(--gutter) calc(24px + env(safe-area-inset-bottom)); max-height:calc(100vh - var(--nav-real)); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
@supports (height:100dvh){ .nav-panel{ max-height:calc(100dvh - var(--nav-real)); } }
.nav-panel:not([hidden]){ display:block; }
.np-links a{ display:block; padding:15px 0; border-bottom:1px solid var(--line); font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.np-links a[aria-current="page"]{ color:var(--green-text); }
.np-call{ margin-top:18px; width:100%; }
.np-mail{ display:block; margin-top:14px; text-align:center; font-size:14px; color:var(--muted); }

/* the mobile call button the handoff requires — desktop already has the nav CTA */
.sticky-call{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--green); color:#fff; text-decoration:none; justify-content:center; align-items:center; gap:10px;
  min-height:var(--callbar); padding:0 16px; padding-bottom:env(safe-area-inset-bottom);
  font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-align:center;
  box-shadow:0 -8px 24px rgba(0,0,0,.18);
}

/* ---------- split hero ---------------------------------------------------- */
/* The band has a MINIMUM height, never a fixed one, so a hero whose copy is
   taller than the drawing's simply grows. `height:auto` on the row stops the
   grid pinning it and letting the button spill past the bottom edge. */
.hero{ display:grid; grid-template-columns:var(--panel) minmax(0,1fr); min-height:var(--hero-h); height:auto; background:var(--ink); align-items:stretch; }
.hero-flip{ grid-template-columns:minmax(0,1fr) var(--panel); }
/* About, measured from its mockup: the portrait occupies x30-300 (34.1% of
   the page) and the green panel x300-762 (58.3%), both 350pt tall. The photo
   column is a fixed share of the viewport so the portrait is drawn at the
   same size the drawing gives it, and the image file is cropped to the box's
   own 270:350 ratio so nothing is trimmed off its sides.
   `align-items:start` keeps the portrait at its own height while the green
   panel grows for its copy — without it the taller panel stretched the photo
   and the button fell below the fold. */
.hero-flip.hero-portrait{ grid-template-columns:34.1% 1fr; min-height:0; align-items:start; }
.hero-portrait .hero-media{ min-height:0; aspect-ratio:270/350; }
.hero-portrait .hero-media img{ object-fit:cover; }
.hero-portrait .hero-panel{ min-height:100%; }
/* The band has a min-height, not a fixed one, and the panel is a flex column
   that centres its own content. A panel whose copy runs long at some window
   width therefore GROWS the band rather than overflowing it — which is what
   put the button on top of the paragraph between roughly 1024 and 1300px. */
/* The mockup insets panel text 24-36pt from the panel's own edge, about
   3-4.5% of the page width. var(--edge) followed the centred content column
   instead, which on a wide screen pushed the copy far into the panel. */
.hero-panel{ display:flex; flex-direction:column; justify-content:center; background:var(--ink); color:#fff; padding:clamp(38px,4vw,58px) clamp(28px,3.6vw,56px); }
/* Measured from the mockups: text sits 24-36pt in from the panel's own edge,
   about 3-4.5% of the page width, on BOTH sides. var(--edge) here pushed the
   copy far left of a wide empty gap on a large screen. */
.hero-flip .hero-panel{ order:2; padding-left:clamp(28px,3.6vw,56px); padding-right:clamp(28px,3.6vw,56px); }
.hero-flip .hero-media{ order:1; }
.hero-green .hero-panel{ background:var(--green); }
.hero-panel .eyebrow{ color:var(--green-glow); }
.hero-green .hero-panel .eyebrow{ color:var(--green-pale); }
/* No cap: the panel column is already the measured width, and a second cap
   here made the headline wrap a line early. */
.hero-in{ width:100%; }

/* ---------- rotating hero copy (home) ------------------------------------- */
/* Two sets of copy over the one photograph. Without JavaScript the second
   panel is simply not shown, so the page reads exactly as it did before. With
   JavaScript the two are stacked in a single grid cell: the cell is as tall as
   the taller panel, so nothing below it moves as they change and the buttons
   underneath never shift.

   The change is a hand-off, not a cross-dissolve. Dissolving one block of text
   into another leaves both headlines legible on top of each other through the
   middle of the transition, which is what made it look abrupt. So the old copy
   fades out on its own first, and only then does the new copy rise into place —
   eyebrow, headline, then body, each a breath behind the last. */
.hero-rotator > .hero-slide + .hero-slide{ display:none; }
.js .hero-rotator{ display:grid; }

/* The panel itself only holds the stack and hides the copy that is off. The
   visibility delay matches the fade-out exactly, so the outgoing copy stays on
   screen for precisely as long as it is still visible. */
.js .hero-rotator > .hero-slide{
  grid-area:1/1; display:block;
  visibility:hidden;
  transition:visibility 0s linear .45s;
}
.js .hero-rotator > .hero-slide.is-on{
  visibility:visible;
  transition:visibility 0s;
}

/* Leaving: fade where it stands. transform is held until the line is invisible
   (0s delayed by the length of the fade), so nothing slides on the way out —
   only the arriving copy moves. */
.js .hero-rotator > .hero-slide > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .45s ease-in, transform 0s linear .45s;
}
/* Arriving: wait for the old copy to clear, then rise and settle. */
.js .hero-rotator > .hero-slide.is-on > *{
  opacity:1;
  transform:none;
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.js .hero-rotator > .hero-slide.is-on > :nth-child(1){ transition-delay:.45s; }
.js .hero-rotator > .hero-slide.is-on > :nth-child(2){ transition-delay:.57s; }
.js .hero-rotator > .hero-slide.is-on > :nth-child(3){ transition-delay:.69s; }

@media (prefers-reduced-motion:reduce){
  /* The script leaves the first panel up and never rotates, so drop the whole
     effect rather than transitioning something that no longer moves. */
  .js .hero-rotator > .hero-slide,
  .js .hero-rotator > .hero-slide > *{ transition:none; transform:none; }
}
/* Mockup proportions, taken from the drawing: the eyebrow sits 16pt above a
   22-27pt headline, the body copy 40pt below that, and the buttons 26pt
   below the copy — that last gap is what was missing. */
/* The longest hero line is "THE JOB DONE RIGHT." at ~19 characters. The
   panel is 40% of the viewport less its padding, so the size is capped by
   the panel's own width (cqi-style vw maths) rather than a flat rem value —
   that keeps every line inside the panel at every zoom level. */
.hero-in .h1{ margin-top:14px; font-size:clamp(1.6rem,2.45vw,2.6rem); letter-spacing:0; overflow-wrap:break-word; }
.hero-in .lead{ margin-top:30px; color:var(--on-dark-muted); font-size:clamp(1.08rem,1.36vw,1.32rem); }
.hero-in .lead + .lead{ margin-top:14px; }
.hero-green .hero-in .lead{ color:#DDEFE7; }
.hero-in .dots li{ font-size:inherit; }
.hero-in .dots li::before{ background:var(--green-glow); }
/* Side by side, as the mockup draws them: two buttons on one row with a
   10pt gap. They only stack on a phone. */
/* The two buttons sit side by side as the mockup draws them, but they wrap
   rather than run past the panel's right edge on a narrow column. */
.hero-in .actions{ margin-top:26px; flex-wrap:wrap; gap:12px; }
.hero-in .actions .btn{ flex:0 1 auto; }
.hero-media{ position:relative; min-height:280px; background:var(--cream); }
.hero-media picture{ position:absolute; inset:0; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-media.top img{ object-position:center 12%; }
/* Fleet: the photo column is 62.1% of the width, as the mockup draws it, and
   the band takes the PHOTO'S OWN shape rather than a letterbox. The whole
   frame is therefore in shot — yard, sheds, lawn and driveway — instead of a
   crop into the trucks. The text panel centres itself in the space beside it. */
.hero-wide{ min-height:0; grid-template-columns:37.9% 1fr; }
.hero-wide .hero-panel{ padding-left:clamp(24px,3.4vw,58px); padding-right:clamp(24px,3.4vw,58px); }
.hero-wide .hero-in .h1{ font-size:clamp(1.75rem,2.45vw,2.45rem); }
/* The photo is laid out normally (not absolutely positioned), so its own
   height sets the band's height and the whole frame is in shot at every
   width. The text panel stretches to match it. */
/* The band takes the photograph's own shape, so the whole frame is shown
   rather than cropped to a fixed height. It is an aspect-ratio and not a
   static image, so that on a narrow desktop — where the text panel can end up
   taller than the picture — the cell stretches and the photograph covers it
   instead of leaving a strip of cream underneath. Keep this in step with the
   Fleet hero file's proportions (1230x632). */
.hero-wide .hero-media{ min-height:0; aspect-ratio:1230/632; }
/* Safety: the mockup gives the green panel 317/792 = 40% with the photo on
   the left. That also keeps the 540x540 source photograph from being scaled
   past its own pixels, so it stays sharp. */
.hero-small-photo{ grid-template-columns:minmax(0,1fr) var(--panel); }
/* photo boxes with a fixed height: the <picture> wrapper must fill them too,
   or a percentage-height <img> falls back to its intrinsic size and spills */
.shot picture{ width:100%; height:100%; }
.shot img{ width:100%; height:100%; object-fit:cover; }

/* contained variant used on the contact page: card + photo inside the wrap */
/* Contact: the mockup draws the card 304pt wide and the photo 408pt, with a
   20pt gutter and both 442pt tall — so 43% / 57% of the container. */
.contact-hero{ display:grid; grid-template-columns:minmax(0,43fr) minmax(0,57fr); gap:24px; padding-top:26px; padding-bottom:clamp(36px,4vw,56px); }
/* Card and photo are the same height, as the mockup draws them: whichever is
   taller sets the row and the other stretches to match. */
.contact-card{ background:var(--ink); color:#fff; padding:clamp(28px,4vw,44px); border-radius:var(--radius); }
.contact-card .eyebrow{ color:var(--green-glow); }
.contact-card .h1{ margin-top:14px; font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:0; }
.contact-card .lead{ margin-top:22px; color:var(--on-dark-muted); max-width:38ch; font-size:clamp(1.08rem,1.36vw,1.32rem); }
.contact-shot{ position:relative; border-radius:var(--radius); overflow:hidden; border-bottom:10px solid var(--purple); min-height:320px; background:var(--cream); }
.contact-shot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Contact without the photograph — client change, 2026-09-21. The yard aerial
   moved to Fleet and was not to be repeated here, so the card runs the full
   width on its own. It keeps the purple edge the photo used to carry, and the
   four details spread across the card instead of stacking down one narrow
   column beside an empty half. The two-column rules above are left intact so
   putting a photograph back is a markup change only. */
/* With no photograph beside it the card is the whole page, so it is centred in
   whatever height is left between the navigation and the foot rather than
   sitting under the nav with the rest of the screen empty. :has() scopes this
   to the contact page; a browser without it simply leaves the card at the top. */
main:has(> .contact-hero.is-plain){ display:flex; flex-direction:column; }
.contact-hero.is-plain{ grid-template-columns:1fr; gap:0; flex:1 0 auto; align-content:center; }
.contact-plain{ padding:clamp(32px,5.4vw,76px); border-bottom:10px solid var(--purple); }
.contact-plain .c-details{
  margin-top:clamp(36px,4.6vw,62px); padding-top:clamp(26px,3vw,40px);
  border-top:1px solid rgba(255,255,255,.16);
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 30px;
}
.contact-plain .c-details .k{ font-size:12px; margin-bottom:7px; }
.contact-plain .c-details .v{ font-size:clamp(16px,1.25vw,18px); }
@media (max-width:860px){ .contact-plain .c-details{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:460px){ .contact-plain .c-details{ grid-template-columns:1fr; gap:20px; } }

.c-details{ margin:28px 0 0; display:grid; gap:18px; }
.c-details dd{ margin:0; }
.c-details .k{ display:block; font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green-glow); margin-bottom:4px; }
.c-details .v{ font-size:16px; font-weight:600; color:#fff; text-decoration:none; word-break:break-word; }
.c-details a.v:hover{ color:var(--green-pale); }

/* plain dark band for legal and error pages */
.page-head{ background:var(--ink); color:#fff; padding:clamp(44px,6vw,72px) 0; }
.page-head .eyebrow{ color:var(--green-glow); }
.page-head .h1{ margin-top:12px; }
.page-head .lead{ margin-top:18px; color:var(--on-dark-muted); max-width:60ch; }
/* Privacy and Terms: the title and effective date are set at the same size as
   the hero headline and copy on the other pages (.hero-in .h1 / .hero-in
   .lead), not the larger generic .h1. The error pages keep the default. */
.legal-head .h1{ font-size:clamp(1.6rem,2.45vw,2.6rem); letter-spacing:0; }
.legal-head .lead{ font-size:clamp(1.08rem,1.36vw,1.32rem); }

/* ---------- benefit cards (home) ------------------------------------------ */
/* As drawn in the mockup: a square green strip down the left edge, the card's
   right corners rounded, bold title with the number, a purple rule, white
   copy. Do not round the strip. */
.benefits{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
/* The mockup card is 232x110pt on a 792pt page: it is wider than it is tall,
   roughly a 2.1:1 box, not the tall block this used to draw. */
.bcard{ background:var(--ink); border-left:6px solid var(--green-text); border-radius:0 var(--radius) var(--radius) 0; padding:26px 26px 28px 22px; color:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.35); }
.bcard h3{ font-size:14px; font-weight:600; letter-spacing:0; text-transform:uppercase; }
.bcard h3 .n{ color:#fff; font-weight:600; margin-right:12px; }
.bcard h3::after{ content:""; display:block; width:min(245px,100%); height:2px; background:var(--purple-line); margin:11px 0 16px; }
.bcard p{ font-size:13.5px; line-height:1.5; color:#fff; max-width:34ch; }

/* ---------- service cards ------------------------------------------------- */
/* The mockup: two white cards 351x216pt with a 30pt gutter, and inside each
   a 135x119pt photo inset at the top-left with the copy beside it. */
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(22px,2.6vw,36px); }
.svc-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); display:grid; grid-template-columns:auto 1fr; gap:22px; padding:22px 26px 26px 22px; }
.svc-card.no-shot{ grid-template-columns:1fr; }
.svc-card .shot{ align-self:start; width:clamp(130px,11vw,160px); aspect-ratio:135/119; border-radius:3px; overflow:hidden; }
.svc-card .shot img{ width:100%; height:100%; object-fit:cover; }
.svc-card .body{ padding:2px 0 0; }
.svc-card h3{ font-size:14px; font-weight:600; letter-spacing:0; text-transform:uppercase; color:var(--green-text); }
.svc-card .body > p{ margin-top:10px; font-size:14.5px; color:var(--muted); }
.svc-card .btn{ margin-top:22px; }
.dots{ list-style:none; margin-top:18px; display:grid; gap:12px; }
.dots li{ position:relative; padding-left:20px; font-size:14.5px; line-height:1.45; }
.dots li::before{ content:""; position:absolute; left:0; top:.52em; width:7px; height:7px; border-radius:50%; background:var(--purple-line); }

/* ---------- fleet --------------------------------------------------------- */
/* ---------- verified credential badge (safety) ---------------------------- */
/* Mateo's SECOR badge, in the hero panel where the mockup drew the placeholder
   button. It is supplied with its own cream card and rounded corners, so the
   link adds nothing but a size limit and a focus ring. */
.cred-badge{ display:block; width:min(440px,100%); margin-top:28px; border-radius:10px; }
/* The dark glow the approved graphic draws around the badge. A drop-shadow,
   not a box-shadow: the file has a transparent margin round the card, and a
   drop-shadow follows the card's own edge and rounded corners. */
.cred-badge img{ width:100%; height:auto; filter:drop-shadow(0 0 16px rgba(0,0,0,.6)); }
.cred-badge:focus-visible{ outline:3px solid #fff; outline-offset:4px; }
@media (max-width:1024px){ .cred-badge{ width:min(400px,100%); margin-top:24px; } }

.fleet-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.fcard{ background:var(--cream); border-radius:var(--radius); overflow:hidden; }
.fcard .shot{ height:196px; }
.fcard .shot img{ width:100%; height:100%; object-fit:cover; }
.fcard .body{ padding:26px 24px 30px; }
.fcard h3{ font-size:14px; font-weight:600; letter-spacing:0; text-transform:uppercase; color:var(--green-text); }
.fcard p{ margin-top:12px; font-size:14.5px; color:var(--muted); }

/* ---------- safety -------------------------------------------------------- */
/* Rebuilt 2026-09-30 to the client's approved Safety graphic (1440px wide).
   Sizes below are measured from it at that width. */
/* Hero: the photograph takes 820 of 1440px and the green panel 620. */
.hero-safety{ grid-template-columns:minmax(0,57fr) minmax(0,43fr); min-height:clamp(420px,42vw,610px); }
.hero-safety .hero-in .h1{ font-size:clamp(1.6rem,3vw,2.75rem); line-height:1.12; }
.hero-safety .hero-in .lead{ margin-top:26px; color:#fff; }
.safety-how{ padding:clamp(34px,3.6vw,52px) 0 clamp(40px,5.4vw,78px); }
.safety-h2{ font-size:clamp(1.5rem,2.3vw,2rem); font-weight:600; line-height:1.15; color:var(--green); margin-bottom:clamp(20px,2.3vw,33px); }
.safety-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.5vw,36px) clamp(20px,2.8vw,40px); }
/* Each card is 641x243px in the graphic. The height is capped at 216px here,
   on the developer's instruction, to leave less empty space under the text;
   min-height keeps the four even. */
.scard{ background:#fff; border-radius:var(--radius); box-shadow:0 4px 18px -6px rgba(27,42,45,.22); padding:33px 34px 34px 30px; min-height:clamp(150px,16.8vw,216px); display:grid; grid-template-columns:55px 1fr; gap:26px; align-items:start; align-content:start; }
.scard .num{ width:55px; height:55px; border-radius:50%; background:var(--green-mid); color:#fff; display:grid; place-items:center; font-size:15px; font-weight:600; }
.scard > div{ padding-top:6px; }
.scard h3{ font-size:17px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
.scard p{ margin-top:14px; font-size:16px; line-height:1.45; color:var(--safety-body); }

/* Our commitment beside the environmental box. */
.safety-commit{ padding:clamp(40px,4.4vw,63px) 0 clamp(44px,4.6vw,66px); }
.commit-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,8.3vw,120px); align-items:start; }
.safety-commit .eyebrow{ font-size:15px; letter-spacing:.04em; color:var(--green); }
.safety-commit .h2{ margin-top:14px; font-size:clamp(1.6rem,2.7vw,2.4rem); line-height:1.15; letter-spacing:.02em; color:var(--green); }
.commit-body{ margin-top:30px; font-size:18px; line-height:1.55; color:var(--safety-body); }
.commit-quote{ margin-top:36px; padding:2px 0 2px 18px; border-left:6px solid var(--green-mid); font-size:18px; font-weight:600; line-height:1.5; color:var(--green); }
.env-box{ background:#F8FAF9; border:1px solid #DCE5E0; border-radius:4px; padding:34px 34px clamp(40px,6vw,86px); }
.env-box h3{ font-size:18px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--green); }
.env-box p{ margin-top:22px; font-size:17.5px; line-height:1.6; color:var(--safety-body); }
.env-box .env-note{ margin-top:30px; font-weight:600; color:var(--green); }

/* The call band that closes the page. */
.cta-band{ background:var(--green-mid); color:#fff; padding:clamp(40px,4vw,56px) 0 clamp(38px,3.7vw,52px); }
.cta-in{ display:flex; align-items:center; justify-content:space-between; gap:24px 40px; }
.cta-band h2{ font-size:clamp(1.5rem,2.6vw,2.3rem); font-weight:600; line-height:1.15; letter-spacing:.03em; text-transform:uppercase; }
/* The line under the headline is set a touch lighter than regular. Arial,
   which Windows renders for this stack, has no lighter weight, so
   font-weight:300 would change nothing there; a hairline stroke in the band's
   own colour trims the edge of every letter instead. The stroke must stay the
   same colour as the band background. */
.cta-band p{ margin-top:20px; font-size:17.5px; line-height:1.5; color:#DDEFE7; -webkit-text-stroke:.3px var(--green-mid); }
/* A little tighter than the graphic's 262x67px button, on the developer's
   instruction. */
.cta-call{ flex:0 0 auto; min-height:58px; padding:0 32px; border-radius:3px; font-size:15px; letter-spacing:.05em; color:var(--green); }

/* ---------- about --------------------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.acard{ background:var(--cream); border-radius:var(--radius); padding:32px 28px 34px; }
.acard h3{ font-size:13px; font-weight:600; letter-spacing:0; text-transform:uppercase; color:var(--green-text); }
.acard.is-purple h3{ color:var(--purple); }
.acard p{ margin-top:14px; font-size:14.5px; color:var(--muted); max-width:30ch; }

/* ---------- careers ------------------------------------------------------- */
/* The mockup draws both cards 220pt tall with their tops and bottoms flush:
   the poster card 220x220 and the green card 492x220. `stretch` makes the
   poster match whatever height the opening beside it takes. */
.careers-grid{ display:grid; grid-template-columns:clamp(240px,23vw,300px) 1fr; gap:clamp(18px,2vw,28px); align-items:stretch; }
.poster{ background:#fff; border-radius:var(--radius); padding:12px; box-shadow:var(--shadow); display:flex; }
.poster img{ width:100%; height:100%; object-fit:cover; border-radius:3px; }
.openings{ display:grid; gap:28px; }
.opening{ background:var(--green); color:#fff; border-radius:var(--radius); padding:clamp(28px,3.5vw,40px) clamp(24px,3vw,36px); display:grid; grid-template-columns:1fr 260px; gap:clamp(24px,4vw,48px); align-items:start; }
.opening .eyebrow{ color:var(--green-pale); }
/* White on a solid green panel reads heavier than the same weight on a light
   background, so the job title sits a step below the other headings. */
.opening h3{ margin-top:12px; font-size:clamp(1.55rem,2.4vw,1.95rem); font-weight:600; text-transform:uppercase; letter-spacing:.01em; }
.opening .summary{ margin-top:12px; color:#DDEFE7; font-size:14.5px; max-width:52ch; }
.opening .dots{ margin-top:22px; }
.opening .dots li::before{ background:var(--green-pale); }
.opening .side .btn{ width:100%; }
.opening .side .eyebrow{ margin-top:28px; display:block; }
.opening .side .em{ display:inline-block; margin-top:8px; color:#fff; font-weight:600; font-size:14.5px; text-decoration:none; word-break:break-all; }
.opening .side .em:hover{ color:var(--green-pale); }
.opening .side .note{ margin-top:26px; font-size:13.5px; color:var(--on-dark-muted); }

/* ---------- legal / error ------------------------------------------------- */
/* No max-width: the legal text runs the full width of the page column, like
   the content on the other pages. A 760px measure left most of a desktop
   screen empty to the right of it. */
.legal h2{ font-size:15px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--green-text); margin:30px 0 8px; }
.legal p{ font-size:15.5px; line-height:1.7; margin:0 0 14px; }
.legal .muted{ font-size:14px; }
/* The client's own legal documents: headings are shown as the client wrote
   them, not uppercased, and the intro sits in the shaded box the document
   draws around it. */
.legal-doc h2{ font-size:17px; text-transform:none; letter-spacing:0; margin-top:34px; }
.legal-intro{ background:#EEF5F3; border-radius:4px; padding:18px 22px; margin-bottom:8px !important; }
.legal-list{ margin:0 0 14px; padding-left:22px; display:grid; gap:8px; font-size:15.5px; line-height:1.6; }
/* The Privacy Officer's details, set as the two-column table the policy draws. */
.legal-contact{ margin:4px 0 16px; border:1px solid var(--line); border-radius:4px; font-size:15.5px; line-height:1.5; }
.legal-contact > div{ display:grid; grid-template-columns:minmax(120px,190px) 1fr; }
.legal-contact > div + div{ border-top:1px solid var(--line); }
.legal-contact dt{ padding:10px 16px; background:#EEF5F3; font-weight:600; }
.legal-contact dd{ margin:0; padding:10px 16px; overflow-wrap:anywhere; }
.notice{ display:flex; gap:10px; align-items:center; background:var(--cream); border-left:4px solid var(--purple); padding:12px 16px; border-radius:4px; font-size:13.5px; font-weight:600; margin-bottom:24px; }
.notice svg{ width:16px; height:16px; flex:0 0 auto; color:var(--purple); }
.err-page{ max-width:760px; }
.err-links{ margin-top:36px; background:var(--cream); border-radius:var(--radius); padding:24px 28px; }
.err-links h2{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-text); }
.err-links ul{ list-style:none; margin-top:12px; display:grid; gap:8px; font-size:15px; }
.err-links a{ font-weight:600; }
.err-ref{ margin-top:24px; font-size:13.5px; color:var(--muted); }
.err-ref code{ font-family:ui-monospace,Menlo,Consolas,monospace; background:var(--cream); padding:2px 6px; border-radius:3px; }

/* ---------- page foot -----------------------------------------------------
   The mockups close each page with a thin rule and one line of small print,
   so that is all this is. No link columns, no signup form. */
.footer{ background:var(--paper); border-top:1px solid var(--line); color:var(--muted); }
.f-bar{ padding:20px 0 24px; display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between; font-size:12.5px; }
.f-brand-line{ font-weight:600; color:var(--text); letter-spacing:.02em; }
.f-bar a{ color:var(--muted); text-decoration:none; }
.f-bar a:hover{ color:var(--green-text); }
.f-contact-line a{ font-weight:600; color:var(--green-text); }
.f-bar .dot{ margin:0 6px; }

/* ---------- reveal on scroll ---------------------------------------------- */
.js .rv{ opacity:0; transform:translateY(16px); transition:opacity .75s var(--ease),transform .75s var(--ease); }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1; transform:none; transition:none; }
  .btn:hover{ transform:none; }
}

/* ---------- responsive ---------------------------------------------------- */
@media (max-width:1024px){
  /* Bar and logo both scale with the viewport instead of stepping once at
     1024px and then holding that one size all the way down to a 320px phone,
     where a 46px logo ate nearly half the width of the bar. */
  :root{ --nav-h:clamp(58px,15vw,76px); --nav-real:clamp(58px,15vw,76px); }
  .nav-logo{ min-width:0; }
  .nav-logo img{ height:clamp(28px,8.8vw,44px); }
  .nav-links,.nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .sticky-call{ display:flex; }
  /* Clears the fixed dispatch bar INCLUDING the home-indicator inset: a flat
     58px left the last footer line sitting under the bar on a notched phone. */
  body{ padding-bottom:calc(var(--callbar) + env(safe-area-inset-bottom)); }
  .hero,.hero-flip,.hero-flip.hero-portrait,.hero-small-photo{ grid-template-columns:1fr; min-height:0; }
  /* The safety photograph is only 540x540, so below the breakpoint its band
     is capped at a height it can fill without being enlarged. */
  .hero-small-photo .hero-media{ min-height:0; height:min(56vw,540px); }
  .hero-panel,.hero-flip .hero-panel{ order:1; padding:40px var(--gutter) 44px; }
  .hero-media,.hero-flip .hero-media{ order:2; min-height:clamp(240px,56vw,440px); }
  /* Neale's headshot is a PORTRAIT file (1023x1326, ~4:5). Stacked full width
     in a 4:3 landscape box, cover threw away the bottom third of it and left a
     shallow letterbox of a photograph of a person. Matching the box to the
     file's own shape shows essentially the whole frame. */
  .hero-portrait .hero-media{ min-height:0; aspect-ratio:4/5; }
  .hero-in{ max-width:640px; }
  /* Every hero headline is sized by the same rule below the breakpoint. The
     wide and contact heroes carry their own desktop sizes, which are keyed to
     a column that no longer exists once the hero is stacked. The legal pages'
     title follows it too, so it matches the other pages at every width. */
  .hero-in .h1,.hero-wide .hero-in .h1,.contact-card .h1,.legal-head .h1{ font-size:clamp(1.6rem,7.4vw,3.1rem); }
  .contact-hero{ grid-template-columns:1fr; }
  .contact-shot{ min-height:clamp(240px,56vw,420px); }
  .hero-in .actions{ flex-wrap:wrap; }
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .svc-grid,.safety-grid,.opening{ grid-template-columns:1fr; }
  /* Safety: the commitment and environmental box stack, and the call band
     puts its button under the copy. */
  .commit-grid{ grid-template-columns:1fr; }
  .cta-in{ flex-direction:column; align-items:flex-start; }
  .careers-grid{ grid-template-columns:minmax(0,300px) 1fr; }
  .fleet-grid,.about-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
  .benefits,.fleet-grid,.about-grid,.careers-grid,.form-row{ grid-template-columns:1fr; }
  .svc-card{ grid-template-columns:1fr; }
  /* 3:2, not 16:9: stacked full-width the photo is the card's lead image, and
     16:9 cropped the trucks into a letterbox slot. */
  .svc-card .shot{ width:100%; aspect-ratio:3/2; }
  .poster{ max-width:360px; margin-inline:auto; }
  .poster img{ height:auto; object-fit:contain; }
  .actions .btn,.sec-head .btn{ width:100%; }
  /* The desktop card holds a 3.4:1 shape so four cards stay even side by side.
     Stacked one-up that shape is meaningless and just adds dead space. */
  .scard{ min-height:0; }
  .scard p,.env-box p{ font-size:15.5px; }
  .commit-body,.commit-quote,.cta-band p{ font-size:16.5px; }
  .env-box{ padding:28px 24px 32px; }
  .cta-band .btn{ width:100%; }
  /* Stacked, so the phone number and address read as their own lines rather
     than wrapping mid-phrase across a justified row. */
  .f-bar{ flex-direction:column; align-items:flex-start; gap:10px; font-size:13.5px; }
  .f-bar .f-contact-line,.f-bar .f-legal{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; }
}

/* ---------- phones -------------------------------------------------------- */
@media (max-width:560px){
  /* The hero is the whole first screen on a phone, so it gets its padding back
     as vertical rhythm rather than spending it on a column that is now full
     width. */
  .hero-panel,.hero-flip .hero-panel{ padding:30px var(--gutter) 34px; }
  .hero-in .lead{ margin-top:20px; font-size:1.02rem; }
  .hero-in .lead + .lead{ margin-top:12px; }
  .legal-head .lead{ font-size:1.02rem; }
  .hero-in .actions{ margin-top:22px; }
  .hero-media,.hero-flip .hero-media{ min-height:clamp(200px,52vw,320px); }
  .section{ padding:clamp(26px,6vw,36px) 0; }
  .sec-head{ margin-bottom:22px; }
  /* Full-width tap targets, and never two half-width buttons squeezed onto one
     row at 320px. */
  .actions{ gap:10px; }
  .opening{ padding:26px 20px 30px; }
  .opening .side .btn{ width:100%; }
  .contact-card{ padding:26px 20px 30px; }
  .contact-shot{ min-height:clamp(200px,54vw,300px); }
  .bcard{ padding:22px 20px 24px 18px; }
  .fcard .body,.acard{ padding:24px 20px 26px; }
  .svc-card{ padding:18px 20px 22px; }
  /* Safety cards on a phone: the number and title sit side by side, centred
     on each other, and the description runs the full width of the card below
     them. The wrapper div steps out of the layout (display:contents) so its
     heading and paragraph become the card's own grid items; the markup is
     unchanged. */
  .scard{ padding:22px 20px 24px; grid-template-columns:38px 1fr; gap:14px; }
  .scard .num{ width:38px; height:38px; font-size:13px; align-self:center; }
  .scard > div{ display:contents; }
  .scard h3{ align-self:center; }
  .scard p{ grid-column:1 / -1; margin-top:0; }
  .cta-band br{ display:none; }
}