:root {
  --color-bg: #f0f0e0;
  --color-surface: #ffffff;
  --color-text: #141414;
  --color-accent: #f7c600;
  --color-accent-2: #e8b800;
  --color-whatsapp: #25D366;
  --color-divider: rgba(20, 20, 20, 0.13);
  --color-divider-strong: rgba(20, 20, 20, 0.32);

  --color-neutral-100: #f8f6ef;
  --color-neutral-200: #efeadd;
  --color-neutral-300: #dcd7c9;
  --color-neutral-400: #c3bda8;
  --color-neutral-500: #a9a189;
  --color-neutral-600: #8a8878;
  --color-neutral-700: #6b6a5c;
  --color-neutral-800: #47463c;
  --color-neutral-900: #2b2a24;

  --color-accent-100: #fdf6d9;
  --color-accent-600: #d9a800;
  --color-accent-700: #8a6a00;
  --color-accent-800: #5c4700;

  --font: "Archivo", system-ui, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --nav-h: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--color-accent); color: var(--color-bg); }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--color-text);
  color: var(--color-accent);
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.section-dark .eyebrow, .hero .eyebrow { background: var(--color-accent); color: var(--color-text); }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
}

/* ===================== NAV ===================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(240, 240, 224, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
  transition: transform 0.5s var(--ease), background 0.3s;
}
.nav.nav--hidden { transform: translateY(-100%); }
.nav-inner {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0 clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-brand img { height: 30px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: clamp(28px, 3.4vw, 48px); }
.nav-links {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: clamp(20px, 2.6vw, 38px);
}
.nav-right { display: flex; align-items: center; gap: 18px; padding-left: clamp(20px, 2.6vw, 32px); border-left: 1px solid var(--color-divider); }
.nav-links a {
  position: relative;
  font-size: 15.525px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 0;
  color: var(--color-neutral-800);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 2px;
  height: 2px;
  background: var(--color-accent);
  transition: right 0.35s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { right: 0; }
.nav-cta {
  background: var(--color-text);
  color: var(--color-bg) !important;
  padding: 10px 20px;
  font-weight: 800 !important;
}
.nav-cta:hover { background: var(--color-accent) !important; color: var(--color-text) !important; }
.nav-cta::after { display: none; }

/* home-page nav brand — bigger logo + two-line wordmark */
.nav-brand--lg { gap: 14px; }
.nav-brand--lg img { height: 69.3px; }
.nav-brand--lg img.nav-wordmark-img { height: 51.83px; width: auto; flex: none; }

/* home-page nav — phone / email icons in place of the CTA button */
.nav-icons { display: flex; align-items: center; gap: calc(clamp(18px, 2.4vw, 34px) / 2); }
.nav-icon-link { padding: 0; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: var(--color-text); }
.nav-icon-link:hover { color: var(--color-accent-700); }
.nav-icon-link::after { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--color-text); }

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 15px 28px;
  border: 2px solid var(--color-text);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.btn-primary { background: var(--color-text); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-text); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--color-text); }
.btn-outline:hover { background: var(--color-text); color: var(--color-bg); transform: translateY(-2px); }
.btn-light { border-color: var(--color-bg); color: var(--color-bg); }
.btn-light:hover { background: var(--color-bg); color: var(--color-text); transform: translateY(-2px); }

/* ===================== HERO (ported from reference cover page) ===================== */
.hero {
  position: relative;
  background: #FFCC00;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.hero-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 60px 32px 0;
}
.hero-tag {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 {
  font-family: 'Archivo Black', Arial, sans-serif;
  font-weight: 400;
  line-height: 1.05;
  font-size: 72.8px;
}
.hero .sub {
  font-weight: 700;
  font-size: 24px;
  margin-top: 22px;
}
.hero-cta {
  display: inline-block;
  margin-top: 30px;
  background: var(--color-text);
  color: #FFCC00;
  padding: 16px 30px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.hero-photo-wrap {
  position: relative;
  margin-top: 50px;
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0% 100%);
  background: #000;
}
.hero-photo-wrap img { width: 100%; display: block; opacity: 0.95; }
.scroll-cue {
  position: absolute;
  right: clamp(20px, 5vw, 60px);
  top: 25%;
  transform: translateY(calc(-50% + 9px));
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240,240,224,0.75);
  writing-mode: vertical-rl;
}
.scroll-cue .line { width: 1px; height: 46px; background: rgba(240,240,224,0.4); position: relative; overflow: hidden; }
.scroll-cue .line::after {
  content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: #FFCC00;
  animation: scrollcue 1.8s var(--ease) infinite;
}
@keyframes scrollcue { to { top: 100%; } }
/* Mobile-only scroll cue, sitting in the yellow hero area (not inside .hero-photo-wrap) — that
   wrap's clip-path clips anything positioned above its own box, even though bounding-rect math
   said it should be visible (confirmed live before building this separate element). Desktop is
   completely untouched: the original .scroll-cue inside .hero-photo-wrap keeps its own rules. */
.scroll-cue--mobile { display: none; }
@media (max-width: 700px) {
  .hero h1 { font-size: 44.2px; }
}

/* ===================== SECTIONS ===================== */
section { position: relative; }
.section { padding: clamp(64px, 10vw, 130px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }
.section-dark { background: var(--color-text); color: var(--color-bg); }
.section-accent { background: var(--color-accent); color: var(--color-bg); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 64px);
  flex-wrap: wrap;
}
.section-title {
  font-size: clamp(32px, 5vw, 60px);
  margin-top: 18px;
  max-width: 16ch;
}
mark {
  background: var(--color-accent);
  color: var(--color-text);
  padding: 0 0.12em;
  box-decoration-break: clone;
}
.section-desc {
  max-width: 360px;
  font-size: 15px;
  color: var(--color-neutral-700);
  line-height: 1.65;
}
.section-dark .section-desc { color: rgba(240,240,224,0.68); }

.divider { height: 1px; background: var(--color-divider); border: 0; margin: 0; }

/* ===================== STATS ===================== */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--color-divider-strong);
  border-left: 2px solid var(--color-divider-strong);
}
.section-dark .stats { border-color: rgba(240,240,224,0.22); }
.stat {
  padding: 30px 26px;
  border-right: 2px solid var(--color-divider-strong);
  border-bottom: 2px solid var(--color-divider-strong);
}
.section-dark .stat { border-color: rgba(240,240,224,0.22); }
.stat::before { content: ""; display: block; width: 26px; height: 3px; background: var(--color-accent); margin-bottom: 16px; }
.stat-num {
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.section-dark .stat-num { color: var(--color-bg); }
.stat-label { margin-top: 8px; font-weight: 800; font-size: 14.5px; }
.stat-desc { margin-top: 6px; font-size: 13px; color: var(--color-neutral-700); line-height: 1.5; }
.section-dark .stat-desc { color: rgba(240,240,224,0.6); }

/* simple, borderless, evenly-spaced stat row (home page cover stats) */
.stats-simple { grid-template-columns: repeat(3, 1fr); border: none; gap: clamp(16px, 4vw, 40px); }
.stats-simple .stat { border: none; padding: 0; text-align: center; }
.stats-simple .stat::before { margin-left: auto; margin-right: auto; }
.stats-simple .stat-num { font-size: clamp(47.6px, 5.6vw, 72.8px); }
.stats-simple .stat-label { font-size: 21.75px; text-transform: uppercase; font-weight: 700; }
@media (max-width: 560px) { .stats.stats-simple { grid-template-columns: 1fr; gap: 28px; } }

/* ===================== FLEET PERKS BAND (home page, replaces old fleet description) ===================== */
.fleet-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--color-divider-strong);
  border-bottom: 2px solid var(--color-divider-strong);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.fleet-perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 22px 24px;
  border-right: 1px solid var(--color-divider);
}
.fleet-perk:last-child { border-right: none; }
.fleet-perk img { height: 46.8px; width: auto; flex: none; }
.fleet-perk h4 { font-size: 13px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 4px; }
.fleet-perk p { margin: 0; font-size: 12.5px; color: var(--color-neutral-700); line-height: 1.4; }
@media (max-width: 700px) {
  .fleet-perks { grid-template-columns: 1fr; }
  .fleet-perk { border-right: none; border-bottom: 1px solid var(--color-divider); }
  .fleet-perk:last-child { border-bottom: none; }
}

/* ===================== CARDS / GRID ===================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--color-divider-strong); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--color-divider-strong); }

.feature-card {
  background: var(--color-bg);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow-wrap: break-word;
}
.feature-card .num { font-size: 13px; font-weight: 800; color: var(--color-accent-700); }
.section-dark .feature-card .num { color: var(--color-accent); }
.feature-card h3 { font-size: 20px; }
.feature-card p { margin: 0; font-size: 14px; color: var(--color-neutral-700); line-height: 1.6; }

/* home page "Our Focus" — icons instead of numbers, larger type */
.focus-icon { height: 34px; width: auto; }
svg.focus-icon { height: 24px; }
.focus-icon--img { filter: brightness(0) invert(1); }
.focus-icon--trailer { height: 11.9px; }
.focus-icon-wrap { height: 40px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 10px; }
.focus-grid-home .feature-card { align-items: center; text-align: center; }
.focus-grid-home .feature-card h3 { font-size: 30px; }
.focus-grid-home .feature-card p { font-size: 16.8px; }

/* Machine cards (fleet listing) */
.machine-list { display: flex; flex-direction: column; }
.machine-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
  transition: padding-left 0.4s var(--ease);
}
.machine-row:hover { padding-left: 14px; background: var(--color-surface); }
.machine-row .idx { font-weight: 800; font-size: 14px; color: var(--color-accent-700); }
.machine-row .name { font-weight: 700; font-size: clamp(18px,2.4vw,26px); }
.machine-row .model { font-size: 13.5px; color: var(--color-neutral-700); margin-top: 3px; }
.machine-row .arrow { opacity: 0; transform: translateX(-8px); transition: all 0.35s var(--ease); font-size: 22px; }
.machine-row:hover .arrow { opacity: 1; transform: translateX(0); }

.machine-card {
  display: block;
  background: var(--color-bg);
  min-width: 0;
}
.machine-card .photo { aspect-ratio: 4/3; overflow: hidden; background: var(--color-surface); }
.machine-card .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter 0.5s var(--ease), transform 0.6s var(--ease); }
.machine-card:hover .photo img { filter: grayscale(0); transform: scale(1.05); }
#compactors .machine-card .photo img { filter: grayscale(0) contrast(1.05); }
#compactors .machine-card:hover .photo img { transform: scale(1.05); }
/* EC 2420 was shot further back than its siblings — its machine fills ~50% of the frame height
   against ~59-60% for the other compactors, so it read noticeably smaller in the grid.
   Scaled 1.2x (50% -> 60%) to match. Hover keeps the same relative 1.05 nudge (1.2 x 1.05). */
#compactors .machine-card--zoom .photo img { transform: scale(1.2); }
#compactors .machine-card--zoom:hover .photo img { transform: scale(1.26); }
.machine-card .body { padding: 22px 26px 28px; }
.machine-card .kicker { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); }
.machine-card h3 { margin-top: 8px; font-size: 24px; }
.machine-card .specs { margin-top: 14px; }

/* Spec table — a real CSS grid so the value column always lines up, regardless of label length.
   Used both in the full-width machine-detail sections and inside the smaller compactor cards. */
.spec-table { display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; border-top: 2px solid var(--color-divider-strong); }
.spec-table .k, .spec-table .v { padding: 11px 0; border-bottom: 1px solid var(--color-divider); }
.spec-table .k { color: var(--color-neutral-700); white-space: nowrap; }
.spec-table .v { font-weight: 700; text-align: right; min-width: 0; }
.machine-card .spec-table { border-top: none; margin-top: 0; font-size: 12.5px; }
.machine-card .spec-table .k, .machine-card .spec-table .v { padding: 6px 0; border-top: 1px solid var(--color-divider); border-bottom: none; }

/* Machine detail sections. Mobile (≤700px, default here): big full-width image, copy + specs
   stacked below it. Desktop (≥701px, overridden further down): back to the original side-by-side
   split layout — only the mobile version of this page was meant to change. */
.machine-detail-media { width: 100%; max-width: 960px; aspect-ratio: 4/3; }
.machine-detail-body { max-width: 720px; margin-top: 36px; }
@media (max-width: 700px) {
  /* A max-content label column can still reserve too much width on a phone once a label is long
     ("Hydraulic system flow (output)", "Vibration frequency") — stack label above value instead
     of side-by-side there. Applies to every spec-table (this is what was actually hiding the HAMM
     311 card's values on mobile: "Vibration frequency" widened the shared label column enough
     that "Vibratory Soil Compactor (11 ton)" had almost no room and overflowed, unwrapped, right
     off the edge of the card and under its neighbour — invisible, not just cramped). */
  .spec-table { grid-template-columns: 1fr; column-gap: 0; }
  .spec-table .k { white-space: normal; border-bottom: none; padding-bottom: 2px; }
  .spec-table .v { white-space: normal; text-align: left; padding-top: 0; }
  /* Category label (eyebrow) sits above the image here, same for every section regardless of
     which side the image sits on at desktop — a fixed order, not tied to --reverse. */
  .machine-detail { display: flex; flex-direction: column; }
  .machine-detail-eyebrow { order: 1; margin-bottom: 20px; }
  .machine-detail-media { order: 2; }
  .machine-detail-body { order: 3; }
}
@media (min-width: 701px) {
  .machine-detail { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: clamp(30px, 6vw, 70px); row-gap: 14px; align-items: center; }
  /* M — the photo pins while its spec rows scroll past it.
     The frame already has a definite height from the base rule's aspect-ratio, so nothing about
     the photo's size or framing changes here. align-self:start only releases it from the grid's
     centre alignment (it now tops out level with the eyebrow) — which is also what gives sticky
     an area taller than the photo to travel through. */
  .machine-detail-media {
    max-width: none;
    grid-row: span 2;
    align-self: start;
    position: sticky;
    top: calc(var(--nav-h) + 28px);
  }
  .machine-detail-body { max-width: none; margin-top: 0; }
  /* Roomier spec rows: partly for rhythm, partly so the spec column is meaningfully taller
     than the photo — without that height difference sticky has nothing to travel through. */
  .machine-detail .spec-table .k,
  .machine-detail .spec-table .v { padding: 20px 0; }
  /* Rows dim and light up as they pass through the middle of the screen. .specs-focus is added
     by main.js, so with JS off (or reduced-motion on) every row simply stays fully legible. */
  .spec-table.specs-focus .k,
  .spec-table.specs-focus .v { opacity: 0.65; transition: opacity 0.45s var(--ease); }
  .spec-table.specs-focus .k.lit,
  .spec-table.specs-focus .v.lit { opacity: 1; }
  /* Reverse must flip which column is the big one too, not just which side the image lands on —
     otherwise the image ends up in the leftover 1fr column instead of the 1.3fr one, and renders
     visibly smaller than every non-reversed section (confirmed live: this is what was actually
     making Paver/HD 85/F15 look smaller than the rest). */
  .machine-detail--reverse { grid-template-columns: 1fr 1.3fr; }
  .machine-detail--reverse .machine-detail-media { grid-column: 2; }
  /* The eyebrow/body also need an explicit row here, not just column — column alone wasn't enough:
     sparse auto-placement still refused to backfill row 1 once media had explicitly claimed column
     2 there, and kept pushing eyebrow/body into a phantom row 2/3 instead. Pinning both column AND
     row removes the ambiguity. Confirmed live: this was the real cause of the text/image
     misalignment on Paver/HD 85/F15, separate from the sizing bug above — after this, their
     alignment matches their non-reversed counterparts exactly (verified pixel-for-pixel). */
  .machine-detail--reverse .machine-detail-eyebrow { grid-column: 1; grid-row: 1; }
  .machine-detail--reverse .machine-detail-body { grid-column: 1; grid-row: 2; }
}

/* ===================== LOGO MARQUEE ===================== */
.marquee { overflow: hidden; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.marquee-track { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; }
.marquee-item { display: flex; align-items: center; justify-content: center; padding: 0 clamp(30px, 5vw, 60px); height: 110px; }
.marquee-item img { max-height: 56px; max-width: 182px; width: auto; object-fit: contain; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* static, always-colour brand row (home page) — matches .marquee-item spacing/sizing on the about page */
.brand-row-clip { overflow: hidden; }
.brand-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.brand-item { display: flex; align-items: center; justify-content: center; padding: 0 clamp(30px, 5vw, 60px); height: 110px; }
.brand-item img { max-height: 56px; max-width: 182px; width: auto; object-fit: contain; }
/* The duplicate logo set (for the mobile auto-loop) stays out of the layout everywhere else. */
.marquee-item.is-dup, .brand-item.is-dup { display: none; }

/* ===================== CLIENT GRID ===================== */
.client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider-strong); }
.client-tile { background: #fff; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; }
.client-tile img { max-width: 82%; max-height: 66%; object-fit: contain; }

/* home page — sliding client logo marquee, white tiles, always in colour */
.client-marquee {
  margin-top: clamp(30px, 5vw, 50px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.client-marquee-track { display: flex; width: max-content; gap: 18px; animation: scroll 36s linear infinite; }
.client-marquee:hover .client-marquee-track { animation-play-state: paused; }
.client-marquee-item { flex: none; width: 323px; height: 187px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 34px; }
.client-marquee-item img { max-width: 80%; max-height: 60%; object-fit: contain; }
.client-marquee-item img.logo-lg { max-width: 92%; max-height: 74%; }

/* ===================== BENCHMARK PROJECTS (home page) ===================== */
.project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.project-card { background: var(--color-surface); border: 1px solid var(--color-divider); overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg, 0 16px 30px rgba(0,0,0,.12)); }
.project-card img { width: 100%; height: 140px; object-fit: cover; transition: transform 0.4s var(--ease); }
.project-card:hover img { transform: scale(1.06); }
.project-card .cap { padding: 12px; font-weight: 800; font-size: 12.5px; text-align: center; }
@media (max-width: 900px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===================== OPERATIONAL FOOTPRINT (home page) ===================== */
.footprint-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 70px); align-items: center; margin-top: clamp(30px, 5vw, 50px); }
.pin-drop { opacity: 0; transform: translateY(-42px) scale(0.6); transition: transform 0.55s cubic-bezier(.34,1.56,.64,1), opacity 0.35s ease; }
.pin-drop.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.fs-row:hover { background: rgba(247, 198, 0, 0.1); }
.footprint-map { background: var(--color-bg); padding: 20px; }
.legend-block { margin-bottom: 26px; }
.legend-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.legend-dot--on { background: #F41922; }
.legend-dot--cov { background: var(--color-accent); }
.legend-block p { margin: 0; font-size: 14px; color: var(--color-neutral-700); line-height: 1.6; }
@media (max-width: 800px) { .footprint-layout { grid-template-columns: 1fr; } }

/* ===================== PROJECTS LIST ===================== */
.project-list { border-top: 2px solid var(--color-divider-strong); }
.project-row { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
.project-row .name { font-weight: 800; font-size: clamp(17px, 2vw, 22px); }
.project-row .tag { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); }

.state-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.state-tag { font-size: 12.5px; font-weight: 700; padding: 7px 14px; border: 1px solid var(--color-divider-strong); }

/* ===================== CTA BAND ===================== */
.cta-band {
  background: var(--color-accent);
  color: var(--color-text);
  padding: clamp(56px, 9vw, 110px) 0;
  text-align: left;
}
.cta-band h2 { font-size: clamp(34px, 6vw, 76px); max-width: 16ch; }
.cta-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-top: 30px; }
.cta-phone { font-size: clamp(22px, 3vw, 32px); font-weight: 800; }
.cta-contact-icons { display: flex; flex-direction: column; gap: 14px; }
.cta-icon-row { display: flex; align-items: center; gap: 12px; font-size: clamp(18px, 2.4vw, 26px); font-weight: 800; color: var(--color-text); }
.cta-icon-row svg { flex: none; }

/* ---- Scroll progress bar (built by main.js, so no markup needed on any page) ----
   Rides the BOTTOM edge of the nav strip rather than the very top of the screen. At the top it
   would overlap the GT logo, whose top edge sits only ~2.85px down — fine at 3px, not at 4.5px.
   On the nav's bottom edge it can never touch the logo at any thickness, and it moves with the
   nav instead of floating over the page on its own. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4.5px;
  z-index: 200;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}
/* Attached to the nav (every page) and sitting just BELOW its bottom border.
   Not inside the nav: the desktop logo is 69.3px tall inside a 76px nav, so it runs to within
   ~3px of both the top AND bottom edges — a 4.5px bar at either edge clips it (measured: 1.65px
   of overlap at the bottom). Hanging it 4.5px outside clears the logo completely while still
   moving with the nav, and reads as an underline on the nav strip. */
.nav .scroll-progress { position: absolute; top: auto; bottom: -4.5px; z-index: 2; }

/* ===================== FOOTER ===================== */
.footer { background: var(--color-text); color: rgba(240,240,224,0.7); padding: 60px 0 30px; }
.footer-top { display: flex; flex-direction: column; gap: 28px; padding-bottom: 40px; border-bottom: 1px solid rgba(240,240,224,0.15); }
.footer-top-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 14px; color: var(--color-bg); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 15.5px; margin-bottom: 0; }
.footer-brand img { height: 63px; background: #fff; padding: 6px; }
.footer-downloads { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.footer-cols { display: flex; gap: clamp(30px, 6vw, 80px); flex-wrap: wrap; }
.footer-col h4 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-2); margin-bottom: 14px; }
.footer-col a, .footer-col div { display: block; font-size: 14px; margin-bottom: 8px; color: rgba(240,240,224,0.75); }
.footer-col a:hover { color: var(--color-bg); }
.footer-social-link { display: flex; align-items: center; gap: 14px; margin-bottom: 0; font-size: 14px; color: rgba(240,240,224,0.75); }
.footer-social-link:hover { color: var(--color-bg); }
/* display:block matters here: the LinkedIn <svg> defaults to inline (unlike <img>, which already
   gets block from the global reset), and that inline/baseline behavior was inflating its <a>'s
   height by ~6px, which centered it differently from the Instagram icon and made Instagram read
   as sitting ~3px lower. Confirmed live before/after — this is the actual, verified fix. */
.footer-social-icon { display: block; flex: none; border-radius: 4px; }
.footer-col .footer-social-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-size: 12px; flex-wrap: wrap; gap: 10px; color: rgba(240,240,224,0.45); }
.footer-bottom a:hover { color: var(--color-bg); text-decoration: underline; }

/* ===================== REVEAL ANIMATIONS ===================== */

/* --- Standalone reveals: plain fade-up. ---
   IMPORTANT — do NOT put the mask-wipe (clip-path) on a standalone [data-reveal] element.
   The scroll observer watches these elements directly, and clipping one to zero width means the
   browser never registers it entering the screen, so it never un-hides. That shipped once and
   left 16 blocks permanently invisible sitewide — including the entire enquiry form on Contact
   and every machine name/spec block on Products. The wipe is safe only on group CHILDREN
   (see below), because there the observer watches the unclipped parent instead. */
[data-reveal]:not(.media-frame) {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal]:not(.media-frame).is-visible { opacity: 1; transform: translateY(0); }

/* The proprietor portrait sits in the same photo frame as the machine shots but is not a
   product — it opts out of the diagonal and fades in like any other block. */
.media-frame--plain { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.media-frame--plain.is-visible { opacity: 1; transform: translateY(0); }

/* --- A: staggered mask-wipe, on grouped card rows only. ---
   The FINISHED state uses negative insets so the clip region sits outside the element's box —
   a plain inset(0) would keep clipping forever, cutting off hover-scale and shadows after the
   animation had finished. Opt-outs: .stat -> D, .project-card -> its photo is handled by L. */
[data-reveal-group] > *:not(.stat):not(.project-card) {
  opacity: 0;
  clip-path: inset(-40% 100% -40% 0);
  transition: opacity 0.45s var(--ease), clip-path 0.8s var(--ease);
}
[data-reveal-group].is-visible > *:not(.stat):not(.project-card) {
  opacity: 1;
  clip-path: inset(-40% -40% -40% -40%);
}

/* --- D: theatrical number reveal. The stat scales in, then the gold rule that was already
   part of the design (.stat::before) draws itself out underneath it. --- */
[data-reveal-group] > .stat {
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease);
}
[data-reveal-group].is-visible > .stat { opacity: 1; transform: scale(1); }
.stat::before { transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--ease) 0.45s; }
.stats-simple .stat::before { transform-origin: center; }
[data-reveal-group].is-visible > .stat::before { transform: scaleX(1); }

/* --- J: per-line headline reveal. main.js splits <br>-separated lines into .mask-line
   wrappers; each line climbs out from behind its own mask, staggered. The padding/margin
   pair gives descenders room so overflow:hidden never clips a glyph. --- */
.mask-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.mask-line > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
.mask-line.is-in > span { transform: translateY(0); }
.mask-line:nth-child(2) > span { transition-delay: 0.1s; }
.mask-line:nth-child(3) > span { transition-delay: 0.2s; }

/* --- L: diagonal photo reveal. The diagonal is ONLY the moving edge — the finished state
   overshoots the top-right to 125% so the slant sits off-canvas and the photo is never
   cropped at rest. (An earlier version ended at 88% and permanently sliced the corner off.) --- */
.media-frame:not(.media-frame--plain) img, .project-card img {
  clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%);
  transition: clip-path 1.05s var(--ease);
}
.media-frame:not(.media-frame--plain).is-visible img,
[data-reveal-group].is-visible .project-card img {
  clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%);
}
[data-reveal-group].is-visible > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-group].is-visible > *:nth-child(2) { transition-delay: 0.09s; }
[data-reveal-group].is-visible > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group].is-visible > *:nth-child(4) { transition-delay: 0.23s; }
[data-reveal-group].is-visible > *:nth-child(5) { transition-delay: 0.30s; }
[data-reveal-group].is-visible > *:nth-child(6) { transition-delay: 0.37s; }
[data-reveal-group].is-visible > *:nth-child(7) { transition-delay: 0.44s; }
[data-reveal-group].is-visible > *:nth-child(8) { transition-delay: 0.51s; }
[data-reveal-group].is-visible > *:nth-child(9) { transition-delay: 0.58s; }

/* ===================== PAGE HERO (inner pages) ===================== */
.page-hero {
  padding: calc(var(--nav-h) + 90px) 0 70px;
  border-bottom: 2px solid var(--color-divider-strong);
}
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(38px, 6.5vw, 88px); max-width: 20ch; }
.page-hero p { max-width: 560px; margin-top: 24px; font-size: 16px; color: var(--color-neutral-700); line-height: 1.65; }

/* ===================== MISC ===================== */
.tag-pill { display: inline-flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border: 1px solid var(--color-divider-strong); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 70px); align-items: center; }
.media-frame { overflow: hidden; background: var(--color-surface); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.body-copy { font-size: 16px; line-height: 1.75; color: var(--color-neutral-800); }
.body-copy p { margin: 0 0 18px; }

.back-to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 48px;
  height: 48px;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all 0.35s var(--ease);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-accent); color: var(--color-text); }

/* Floating WhatsApp / enquiry button — always visible (not scroll-gated like back-to-top),
   stacked directly above it in the same right-edge column so the two never collide.
   Desktop-only exception: on the homepage, main.js adds .is-hidden while the hero cover photo
   is in view, since the button's corner otherwise sits on top of the hero's scroll-cue graphic.
   Mobile keeps this element permanently visible (see the min-width:901px guard below). */
.whatsapp-float {
  position: fixed;
  right: 26px;
  bottom: 88px;
  z-index: 59;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 22px 0 18px;
  background: var(--color-text);
  color: var(--color-accent);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 1;
  box-shadow: 0 10px 30px rgba(20, 20, 20, 0.28);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), opacity 0.3s var(--ease);
}
.whatsapp-float svg { flex: none; color: var(--color-whatsapp); }
.whatsapp-float:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(20, 20, 20, 0.34); background: #000; }

@media (min-width: 901px) {
  .whatsapp-float.is-hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }
}

@media (max-width: 480px) {
  .whatsapp-float { right: 18px; bottom: 80px; height: 48px; padding: 0 18px 0 14px; font-size: 13px; }
  .back-to-top { right: 18px; }
}

@media (max-width: 900px) {
  /* Original (inside the clipped photo) hidden on mobile; the separate .scroll-cue--mobile element
     (a sibling of .hero-inner / .hero-photo-wrap, unaffected by the photo's clip-path) takes over —
     positioned in the yellow area just below "SUPPORT.", right-edge (x-axis) unchanged from the
     original, coloured dark since it now sits on yellow instead of the black photo. */
  .scroll-cue:not(.scroll-cue--mobile) { display: none; }
  .scroll-cue--mobile {
    display: flex;
    top: 334px;
    transform: none;
    color: var(--color-text);
  }
  .scroll-cue--mobile .line { background: rgba(20, 20, 20, 0.4); }
  .scroll-cue--mobile .line::after { background: var(--color-text); }
  .nav-inner { padding: 0 8px; }
  .nav-links { position: fixed; top: 0; left: 0; right: 0; height: 100vh; padding-top: 76px; background: var(--color-bg); flex-direction: column; justify-content: center; gap: 30px; transform: translateX(100%); transition: transform 0.4s var(--ease); z-index: 99; }
  .nav-links.is-open { transform: translateX(0); }
  .nav-links a { font-size: 20px; }
  .nav-toggle { display: flex; padding: 1px; }
  .nav-toggle span { width: 24.2px; }
  .nav-right { gap: 7px; padding-left: 0; border-left: none; }
  .nav-menu { gap: 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .client-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .machine-row { grid-template-columns: 50px 1fr; }
  .machine-row .arrow { display: none; }
  .machine-card .photo img { filter: contrast(1.05); }
  /* Manufacturer logos, mobile: slides on its own — a plain looping strip (no white tiles, unlike
     the Clients marquee). The 5 logos are duplicated in the markup for the seamless loop; the
     duplicate set stays hidden outside this breakpoint (desktop keeps the single full-width row). */
  .marquee-track, .brand-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    animation: scroll 22s linear infinite;
    touch-action: pan-y;
  }
  .marquee-item, .brand-item { flex: 0 0 auto; padding: 0 22px; }
  .marquee-item.is-dup, .brand-item.is-dup { display: flex; }
  /* Clients strip (index.html) already auto-scrolls at every width; only add hand-drag on mobile. */
  .client-marquee-track { touch-action: pan-y; }
  /* Our Focus cards, mobile: 30px headings in a narrow 2-col card force awkward mid-word breaks ("Experienced", "Mobilisation") — shrink so words wrap cleanly at word boundaries instead. */
  .focus-grid-home .feature-card h3 { font-size: 21px; }
  .focus-grid-home .feature-card p { font-size: 14.5px; }
  /* Clients page, mobile only: 9 logos in a 2-col grid leaves one empty frame at the end — drop Gawar so 8 fills evenly. Desktop's 3-col grid is unaffected. */
  .client-tile--gawar { display: none; }
}
/* Nav logo/icons only shrink to their compact mobile size below 700px, not 900px like the
   nav-links-to-hamburger collapse above. A window between 700–900px already hides the text
   links behind the hamburger, so there's plenty of room left for the full-size logo and icons —
   no reason to shrink them too. This also fixes them looking undersized on a moderately narrow
   (but still clearly desktop) window, e.g. one restored smaller after exiting native fullscreen. */
@media (max-width: 700px) {
  .nav-icons { gap: 5px; }
  .nav-icon-link { width: 22px; height: 22px; }
  .nav-icon-link svg { width: 22px; height: 22px; }
  .nav-brand--lg { gap: 3px; }
  .nav-brand--lg img { height: 36.4px; }
  .nav-brand--lg img.nav-wordmark-img { height: 28.1px; }
}
@media (max-width: 560px) {
  .client-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: 1fr 1fr; }
}