/* ============================================================
   EMK Construction — shared stylesheet
   Modern corporate treatment: rounded corners and soft elevation
   in place of the sharper institutional edges, a white/light
   background (dark text) with the company's own green kept as the
   identifying accent. The home hero and interior page-header bands
   keep a deliberately dark photo/gradient treatment with light text
   regardless of the base theme, below. Type: Source Serif 4
   (headings — an unhurried, established feel) + Inter (body /
   labels / data — highly legible at small sizes).
   ============================================================ */

:root{
  /* --- color tokens: white/light background, dark text throughout --- */
  --paper:      #F7F6F1;
  --surface:    #EFEDE5;
  --surface-2:  #E3E0D3;
  --ink:        #17181A;
  --ink-soft:   #55524A;
  --ink-faint:  #8D897C;
  --line:       #DAD6C8;
  --line-strong:#C2BDAA;

  --navy-900:   #0E2A45;
  --navy-800:   #17395A;

  --green-700:  #157A3D;
  --green-600:  #1E9A4E;
  --green-500:  #35C167;
  --green-100:  #D7F3E1;
  --green-050:  #EFFBF3;

  --gold-500:   #B7862E;
  --gold-ink:   #3A2900;

  --yellow-500: #F5B700;
  --orange-600: #AE4A24;
  --danger:     #A5391C;

  --shadow: 0 1px 2px rgba(0,0,0,0.08), 0 14px 30px -16px rgba(0,0,0,0.18);
  --radius: 2px;

  --font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* This design commits to one look — white/light background, dark text —
   in both system themes, so dark mode intentionally mirrors the default. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:      #F7F6F1;
    --surface:    #EFEDE5;
    --surface-2:  #E3E0D3;
    --ink:        #17181A;
    --ink-soft:   #55524A;
    --ink-faint:  #8D897C;
    --line:       #DAD6C8;
    --line-strong:#C2BDAA;

    --navy-900:   #0E2A45;
    --navy-800:   #17395A;

    --green-700:  #157A3D;
    --green-600:  #1E9A4E;
    --green-500:  #35C167;
    --green-100:  #D7F3E1;
    --green-050:  #EFFBF3;

    --gold-500:   #B7862E;
    --gold-ink:   #3A2900;

    --yellow-500: #F5B700;
    --orange-600: #AE4A24;
    --danger:     #A5391C;

    --shadow: 0 1px 2px rgba(0,0,0,0.08), 0 10px 26px -16px rgba(0,0,0,0.16);
  }
}
:root[data-theme="dark"]{
  --paper:      #F7F6F1;
  --surface:    #EFEDE5;
  --surface-2:  #E3E0D3;
  --ink:        #17181A;
  --ink-soft:   #55524A;
  --ink-faint:  #8D897C;
  --line:       #DAD6C8;
  --line-strong:#C2BDAA;

  --navy-900:   #0E2A45;
  --navy-800:   #17395A;

  --green-700:  #157A3D;
  --green-600:  #1E9A4E;
  --green-500:  #35C167;
  --green-100:  #D7F3E1;
  --green-050:  #EFFBF3;

  --gold-500:   #B7862E;
  --gold-ink:   #3A2900;

  --yellow-500: #F5B700;
  --orange-600: #AE4A24;
  --danger:     #A5391C;

  --shadow: 0 1px 2px rgba(0,0,0,0.08), 0 10px 26px -16px rgba(0,0,0,0.16);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--paper); scroll-padding-top:calc(var(--header-h, 100px) + 14px); }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.15;
  letter-spacing:0.005em;
  text-transform:uppercase;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
p{ margin:0; }
.container{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:20px;
}
@media (min-width:640px){ .container{ padding-inline:32px; } }

.eyebrow{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--green-700);
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:20px; height:1px;
  background:var(--line-strong);
  flex:none;
}

/* ---------- hazard rule (now a restrained divider) ---------- */
.hazard-rule{
  height:2px;
  background:var(--line-strong);
  border:none;
  margin:0;
}
.hazard-rule.dark{
  background:var(--line-strong);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  padding:14.5px 27px;
  border-radius:var(--radius);
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary{
  background:var(--green-700);
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px -8px rgba(21,122,61,0.45);
}
.btn-primary:hover{ background:var(--green-600); border-color:transparent; transform:translateY(-1px); box-shadow:0 10px 20px -8px rgba(21,122,61,0.5); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line-strong);
}
.btn-ghost:hover{ border-color:var(--ink); color:var(--ink); background:var(--surface-2); }
.btn-sm{ padding:9px 18px; font-size:13px; }

/* ---------- header / nav ---------- */
/* Solid bar, fixed to the top at all times (see --header-h + padding-top
   on .hero/.page-header, which still reserve clearance beneath it). A
   deeper, slightly warmer charcoal than the body surfaces so it reads as
   its own anchor bar without needing a dividing line underneath it. */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--paper);
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}
.header-bar{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:10px 16px;
  padding-block:16px;
}
/* On desktop, let the header bar use the full window width instead of
   sitting inside the capped, centered content column — so the logo sits
   flush at the true left edge and the hamburger flush at the true right
   edge of the browser window, not just the content column's edge. */
@media (min-width:1024px){
  .header-bar{ max-width:none; margin-inline:0; }
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  flex:none;
}
.brand img{ height:34px; width:auto; }
/* Icon mark + HTML wordmark (bold, high-impact sizing) — the two scale
   together via the media queries below, full size from 640px up. */
.brand-mark{ height:42px; width:auto; display:block; flex:none; color:var(--green-700); }
.brand-word{
  font-family:'Inter','Segoe UI',sans-serif;
  font-weight:800;
  font-size:29px;
  line-height:1;
  letter-spacing:0.005em;
  color:var(--green-700);
  white-space:nowrap;
}
.brand-word-sub{ font-weight:700; }
@media (max-width:359px){
  .brand{ gap:6px; }
  .brand-mark{ height:16px; }
  .brand-word{ font-size:11px; }
}
@media (min-width:360px) and (max-width:479px){
  .brand{ gap:8px; }
  .brand-mark{ height:20px; }
  .brand-word{ font-size:14px; }
}
@media (min-width:480px) and (max-width:639px){
  .brand{ gap:9px; }
  .brand-mark{ height:26px; }
  .brand-word{ font-size:18px; }
}
@media (max-width:479px){
  .header-bar{ gap:8px; }
  .btn-sm{ padding:8px 12px; font-size:12px; }
}
.brand-uen{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.03em;
  color:var(--ink-faint);
  white-space:nowrap;
  display:none;
}
@media (min-width:560px){ .brand-uen{ display:inline; } }
.header-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.header-phone{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--ink-soft);
  text-decoration:none;
  display:none;
}
@media (min-width:640px){ .header-phone{ display:inline; } }

/* ---------- nav bar: invisible anchor strip for the dropdown menu ---------- */
.nav-bar{
  background:transparent;
}
.nav-bar .container{
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  padding-block:0;
}
/* Nav is a dropdown behind the hamburger at every width — hidden until
   opened, then a full-width panel anchored under the nav bar. */
.nav-links{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  right:0;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:8px 0;
  list-style:none;
  margin:0;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 20px -12px rgba(20,24,20,0.18);
}
.nav-links.is-open{ display:flex; }
.nav-links li{ width:100%; }
/* Pinned to the top right of the header row (independent of the logo's
   own width/wrapping) — big and in the brand green as the menu control,
   at every screen size. */
.header-bar{ padding-right:78px; }
.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  width:46px;
  height:46px;
  padding:0;
  position:absolute;
  top:50%;
  right:20px;
  transform:translateY(-50%);
  background:none;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  flex:none;
}
@media (min-width:640px){
  .header-bar{ padding-right:90px; }
  .nav-toggle{ right:32px; }
}
.nav-toggle:hover{ background:rgba(63,166,92,0.14); }
.nav-toggle span{
  display:block;
  width:26px;
  height:3px;
  background:var(--green-500);
  border-radius:1.5px;
  transition:transform .18s ease, opacity .18s ease, background .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
.nav-links a{
  display:block;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-soft);
  padding:13px 20px;
  border-radius:0;
  transition:color .15s ease, background .15s ease;
}
.nav-links a:hover{ color:var(--ink); background:var(--surface-2); }
.nav-links a.active{ color:var(--ink); font-weight:700; background:var(--surface-2); }
/* the dropdown panel is always a solid, readable surface regardless of
   header state — it's a functional menu, not part of the hero backdrop */
.site-header .nav-links.is-open{ background:var(--surface); }
.site-header .nav-links.is-open a{ color:var(--ink-soft); }
.site-header .nav-links.is-open a:hover{ color:var(--ink); background:var(--surface-2); }
.site-header .nav-links.is-open a.active{ color:var(--ink); background:var(--surface-2); }

/* ---------- animated lane line (hero illustration) ---------- */
.lane-dash{ animation: lane-dash-move 1.1s linear infinite; }
@keyframes lane-dash-move{ to{ stroke-dashoffset:-32; } }

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:0 52px;
  background:
    radial-gradient(1100px 420px at 82% -10%, var(--surface-2), transparent 60%),
    var(--paper);
}
/* Photo band: a crossfading slideshow of jobsite photos, sitting below the
   fixed header and above the text — not overlaid behind it. Slides are
   stacked and faded between by JS (script.js); the active one also gets a
   slow Ken-Burns zoom for a bit of motion while it's on screen. */
.hero-photo-band{
  position:relative;
  margin-top:var(--header-h, 100px);
  height:clamp(240px, 38vw, 460px);
  overflow:hidden;
}
.hero-photo-band::before,
.hero-photo-band::after{
  content:"";
  position:absolute; left:0; right:0; height:4px; z-index:3;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 28px, transparent 28px 46px);
}
.hero-photo-band::before{ top:0; }
.hero-photo-band::after{ bottom:0; }
.hero-photo-track{
  position:relative;
  height:100%;
}
.hero-photo-slide{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 38%;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.1s ease;
  animation:heroKenBurns 7s ease-out both;
  animation-play-state:paused;
}
.hero-photo-slide.is-active{
  opacity:1;
  z-index:1;
  animation-play-state:running;
}
@keyframes heroKenBurns{
  from{ transform:scale(1.08); }
  to{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .hero-photo-slide{ animation:none; }
}
.hero-photo-slide::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,10,0) 70%, rgba(8,9,10,0.28) 100%);
}
/* 30-years banner slide: a designed graphic, not a photo, so on narrow
   screens it's shown in full (never cropped) on its own dark ground
   rather than cover-cropped like the photo slides */
.hero-banner-slide{
  background-image:url('assets/emk-30-years-banner.jpg');
}
@media (max-width:760px){
  .hero-banner-slide{
    background-image:url('assets/emk-30-years-banner-mobile.jpg');
    background-size:contain;
    background-position:center center;
    background-color:#11140f;
  }
}
.hero-photo-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:7px; z-index:2;
}
.hero-photo-dots span{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.45);
  transition:background .2s ease, transform .2s ease;
}
.hero-photo-dots span.is-active{ background:#fff; transform:scale(1.25); }
.hero-content{ padding-top:44px; }
.hero-photo{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(100deg, rgba(8,24,18,0.90) 0%, rgba(8,24,18,0.74) 46%, rgba(8,24,18,0.42) 74%, rgba(8,24,18,0.14) 100%),
    url('assets/hero-site-photo.jpg');
  background-size:cover;
  background-position:center 42%;
}

/* ---------- hero animated background: parallax "driving view" ---------- */
/* Shared by the home hero and every interior page-header — layered
   darker-grey tones, matching the site's grey theme throughout. */
.hero-anim-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(180deg, #3B3D40 0%, #2A2C2E 46%, #17181A 100%);
}
/* faded jobsite photo — sits under the scrim, static (no animation) */
.hab-photo{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center 38%;
  background-repeat:no-repeat;
  opacity:.26;
  filter:grayscale(.3) contrast(1.05);
}
.hero .hero-anim-bg{ background:none; }
.hero .hab-photo{
  background-image:url('assets/hero-workers-photo.jpg');
  opacity:.18;
  filter:none;
}
.hero .hab-scrim{ background:none; }
.page-header-about .hab-photo{
  background-image:url('assets/about-briefing-photo.jpg');
  background-position:center 30%;
}

/* tunnel portal the road leads into, sitting at the vanishing point —
   sized to overlap the converging lane-edge lines on both sides */
.hab-tunnel{
  position:absolute; left:50%; top:54%; width:16%;
  aspect-ratio:60/44;
  transform:translate(-50%,-100%);
}
.hab-tunnel svg{ width:100%; height:100%; display:block; }
.hab-tunnel .frame{ fill:#6B6E71; }
.hab-tunnel .bore{ fill:#04080f; }
.hab-tunnel .tlight{ fill:var(--gold-500); opacity:.16; animation:hab-tlight-pulse 1.8s ease-in-out infinite; }
@keyframes hab-tlight-pulse{
  0%,100%{ opacity:.13; }
  50%{ opacity:.45; }
}
.hab-road-group{ position:absolute; inset:0; transform:translateX(20%); opacity:.28; }
.hab-road{
  position:absolute; left:0; right:0; bottom:0; top:54%;
  background:#05070c;
  clip-path:polygon(46% 0, 54% 0, 92% 100%, 8% 100%);
}
.hab-edge{ position:absolute; left:0; right:0; top:54%; bottom:0; background:var(--paint-white,#f4f1e8); box-shadow:0 0 7px 1px rgba(244,241,232,0.55); opacity:.5; animation:hab-edge-glow 2.4s ease-in-out infinite; }
.hab-edge.l{ clip-path:polygon(44.2% 0, 45.8% 0, 6.2% 100%, 4.8% 100%); }
.hab-edge.r{ clip-path:polygon(54.2% 0, 55.8% 0, 95.2% 100%, 93.8% 100%); animation-delay:.15s; }
@keyframes hab-edge-glow{
  0%,100%{ opacity:.4; }
  50%{ opacity:.6; }
}
.hab-dash-group{ position:absolute; inset:0; }
/* interior page-headers keep only the base gradient + scrim from
   .hero-anim-bg (see markup) — no animated ring/glow/sweep/road, so the
   colour scheme carries over without the moving scene living on the
   homepage hero */

/* reflective road-stud — nods to EMK's high-reflectivity marking work */
.hab-stud{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:var(--gold-500);
  box-shadow:0 0 6px 1px rgba(183,134,46,0.9);
  opacity:.18;
  animation:hab-stud-blink 2.6s ease-in-out infinite;
}
@keyframes hab-stud-blink{
  0%,100%{ opacity:.15; box-shadow:0 0 4px 0.5px rgba(183,134,46,0.6); }
  50%{ opacity:.5; box-shadow:0 0 9px 2px rgba(183,134,46,1); }
}

/* lane dashes — travel down the road toward the viewer, like markings passing underfoot */
.hab-dash{
  position:absolute; left:50%; top:52%; width:6px; height:12px;
  background:var(--paint-white,#f4f1e8); border-radius:2px;
  box-shadow:0 0 8px 1px rgba(244,241,232,0.5);
  opacity:0;
  animation:hab-dash-travel 3.2s linear infinite;
}
@keyframes hab-dash-travel{
  0%{ top:52%; opacity:0; transform:translate(-50%,0) scale(.4); }
  10%{ opacity:.5; }
  85%{ opacity:.45; }
  100%{ top:104%; opacity:0; transform:translate(-50%,0) scale(1.6); }
}
.hab-dash:nth-child(1){ animation-delay:0s; }
.hab-dash:nth-child(2){ animation-delay:-.53s; }
.hab-dash:nth-child(3){ animation-delay:-1.07s; }
.hab-dash:nth-child(4){ animation-delay:-1.6s; }
.hab-dash:nth-child(5){ animation-delay:-2.13s; }
.hab-dash:nth-child(6){ animation-delay:-2.67s; }
/* Tuned to the grey scene (not navy-black) so light text reads clearly
   against the animated graphic, on both the home hero and page-headers. */
.hab-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(8,9,10,0.82) 0%, rgba(8,9,10,0.6) 30%, rgba(8,9,10,0.28) 56%, rgba(8,9,10,0.08) 76%, transparent 100%),
    radial-gradient(55% 70% at 74% 46%, rgba(8,9,10,0.3) 0%, rgba(8,9,10,0.1) 55%, transparent 78%);
}
.hero h1,
.hero .breadcrumb a{ color:var(--ink); }
.hero .eyebrow{ color:var(--green-700); }
.hero .eyebrow::before{ background:var(--line-strong); }
.hero .hero-lede{ color:var(--ink-soft); }
.hero .chip{
  color:var(--ink-soft);
}
.hero .chip svg{ color:var(--green-600); }
.hero-actions .btn{ border-radius:999px; }
.hero .hero-actions .btn{ border-radius:var(--radius); }
.hero .btn-primary{ box-shadow:0 12px 26px -10px rgba(0,0,0,0.18); }
.hero .btn-ghost{ color:var(--ink); border-color:var(--line-strong); }
.hero .btn-ghost:hover{ background:var(--surface-2); border-color:var(--ink); color:var(--ink); }
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:40px;
  align-items:center;
  max-width:720px;
  text-align:left;
}
.hero h1{
  font-size:clamp(24px,3.4vw,38px);
  letter-spacing:-0.015em;
  margin-block:16px 16px;
}
.hero-lede{
  font-size:18px;
  color:var(--ink-soft);
  max-width:52ch;
  margin-inline:0;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:26px;
  justify-content:center;
}
.hero .hero-actions{ justify-content:flex-start; }

/* ---------- credential badges ---------- */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  row-gap:14px;
  column-gap:28px;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
@media (max-width:640px){
  .chip-row{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:14px; }
}
.chip{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-soft);
  display:inline-flex; align-items:center; gap:9px;
}
.chip svg{ width:19px; height:19px; flex:none; }
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--green-600); flex:none; }

/* ---------- page header (interior pages) ---------- */
.page-header{
  position:relative;
  overflow:hidden;
  padding-block:44px 34px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
/* same fixed-header clearance as .hero, above */
.page-header{ padding-top:calc(44px + var(--header-h, 100px)); }
.page-header h1{ font-size:clamp(28px,4vw,42px); margin-top:12px; }
.page-header .hero-lede{ margin-top:14px; }
.page-header .container{ position:relative; z-index:1; }
.page-header-photo{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(100deg, rgba(8,24,18,0.88) 0%, rgba(8,24,18,0.70) 46%, rgba(8,24,18,0.42) 74%, rgba(8,24,18,0.18) 100%),
    url('assets/about-bg-photo.jpg');
  background-size:cover;
  background-position:center 38%;
}
.page-header-on-photo{ border-bottom-color:rgba(255,255,255,0.14); }
.page-header-on-photo h1{
  color:#FFFFFF;
  max-width:800px;
  text-shadow:0 2px 14px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.55);
}
.page-header-on-photo .breadcrumb{ color:rgba(255,255,255,0.7); }
.page-header-on-photo .breadcrumb a{ color:rgba(255,255,255,0.92); }
.page-header-on-photo .eyebrow{ color:var(--green-700); text-shadow:0 1px 6px rgba(0,0,0,0.5); }
.page-header-on-photo .eyebrow::before{ background:var(--line-strong); }
.page-header-on-photo .hero-lede{
  color:rgba(255,255,255,0.9);
  max-width:640px;
  text-shadow:0 1px 8px rgba(0,0,0,0.4);
}

/* contact / services / projects page headers — the same dark asphalt
   band as the CTA band and site header, lane-line included, so the
   three "interior" pages read as one consistent system */
.page-header-contact,
.page-header-services,
.page-header-projects{ border-bottom-color:transparent; }
.page-header-contact .hero-anim-bg,
.page-header-services .hero-anim-bg,
.page-header-projects .hero-anim-bg{ background:var(--ink); }
.page-header-contact::before,
.page-header-services::before,
.page-header-projects::before{
  content:"";
  position:absolute; top:var(--header-h, 100px); left:0; right:0; height:4px; z-index:2;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 28px, transparent 28px 46px);
}
.page-header-services::after,
.page-header-projects::after,
.page-header-contact::after{
  content:"";
  position:absolute; bottom:0; left:0; right:0; height:4px; z-index:2;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 28px, transparent 28px 46px);
}
.page-header-contact .hab-scrim,
.page-header-services .hab-scrim,
.page-header-projects .hab-scrim{ background:none; }
.page-header-contact h1,
.page-header-services h1,
.page-header-projects h1{ color:#FFFFFF; max-width:800px; text-shadow:none; }
.page-header-contact .breadcrumb,
.page-header-services .breadcrumb,
.page-header-projects .breadcrumb{ color:rgba(255,255,255,0.6); }
.page-header-contact .breadcrumb a,
.page-header-services .breadcrumb a,
.page-header-projects .breadcrumb a{ color:rgba(255,255,255,0.92); }
.page-header-contact .eyebrow,
.page-header-services .eyebrow,
.page-header-projects .eyebrow{ color:var(--green-700); text-shadow:none; }
.page-header-contact .eyebrow::before,
.page-header-services .eyebrow::before,
.page-header-projects .eyebrow::before{ background:var(--line-strong); }
.page-header-contact .hero-lede,
.page-header-services .hero-lede,
.page-header-projects .hero-lede{ color:rgba(255,255,255,0.78); max-width:640px; text-shadow:none; }
.page-header-contact .jump-row a,
.page-header-services .jump-row a,
.page-header-projects .jump-row a{ color:rgba(255,255,255,0.85); border-color:rgba(255,255,255,0.35); }
.page-header-contact .jump-row a:hover,
.page-header-services .jump-row a:hover,
.page-header-projects .jump-row a:hover{ color:#FFFFFF; border-color:#FFFFFF; background:rgba(255,255,255,0.1); }

/* about page header — same light, washed-photo treatment as the home hero */
.page-header-about{ border-bottom-color:var(--line); }
.page-header-about::before,
.page-header-about::after{
  content:"";
  position:absolute; left:0; right:0; height:4px; z-index:2;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 28px, transparent 28px 46px);
}
.page-header-about::before{ top:var(--header-h, 100px); }
.page-header-about::after{ bottom:0; }
.page-header-about .hero-anim-bg{ background:none; }
.page-header-about .hab-scrim{ background:none; }
.page-header-about .hab-photo{ opacity:.18; filter:none; }
.page-header-about h1{ color:var(--ink); max-width:800px; text-shadow:none; }
.page-header-about .breadcrumb{ color:var(--ink-faint); }
.page-header-about .breadcrumb a{ color:var(--ink-soft); }
.page-header-about .eyebrow{ color:var(--green-700); text-shadow:none; }
.page-header-about .hero-lede{ color:var(--ink-soft); max-width:640px; text-shadow:none; }

/* ---------- section rhythm ---------- */
.section{ padding-block:64px; }
.section-tight{ padding-block:40px; }
.section-alt{ background:var(--surface-2); border-block:1px solid var(--line); }
.section-head{
  display:flex; flex-direction:column; gap:12px;
  max-width:64ch;
  margin-bottom:38px;
}
.section-head h2{ font-size:clamp(28px,3.8vw,42px); letter-spacing:-0.01em; }
.section-head p{ color:var(--ink-soft); font-size:16.5px; }

/* ---------- grids ---------- */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.grid-4{ grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

/* ---------- cards ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 24px;
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--green-500); box-shadow:var(--shadow); transform:translateY(-3px); }
a.card{ text-decoration:none; color:inherit; }
#ref-thermoplastic-road-marking,
#ref-car-park-marking,
#ref-enhanced-school-zone,
#ref-give-way-to-bus,
#ref-cycling-track,
#ref-epoxy-coating-system{ scroll-margin-top:120px; }
.card .icon{ width:38px; height:38px; color:var(--green-700); flex:none; }
.card h3{ font-size:18.5px; }
.card p{ color:var(--ink-soft); font-size:14.5px; }
.card .spec{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-faint);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 0;
}
/* each term wraps as a whole unit — never splits mid-word — with the
   dot separator riding along with it rather than orphaning a lone word */
.card .spec span{ white-space:nowrap; }
.card .spec span:not(:last-child)::after{ content:" \00b7 "; color:var(--line-strong); }

.service-card{ position:relative; }
.service-card .num{
  position:absolute; top:18px; right:20px;
  font-family:var(--font-mono);
  font-size:12px; color:var(--line-strong);
}
.service-card-photo{ padding-top:0; }
.service-card-thumb{
  margin:0 -24px 4px;
  height:120px;
  overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;
}
.service-card-thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
}
.service-card-photo .num{
  top:14px; right:20px; color:#FFFFFF; text-shadow:0 1px 4px rgba(0,0,0,0.5);
}

/* ---------- compliance list ---------- */
.compliance-list{ display:flex; flex-direction:column; }
.compliance-row{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:16px;
  padding-block:18px;
  border-top:1px solid var(--line);
}
.compliance-row:last-child{ border-bottom:1px solid var(--line); }
.compliance-row svg{ color:var(--green-700); }
.compliance-row h4{ font-size:16px; margin-bottom:4px; font-family:var(--font-body); font-weight:600; }
.compliance-row p{ color:var(--ink-soft); font-size:14.5px; }

/* ---------- process timeline ---------- */
.timeline{
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.timeline-step{
  padding:22px 20px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
}
.timeline-step .step-no{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--green-700);
  display:block;
  margin-bottom:10px;
}
.timeline-step h4{ font-size:15px; margin-bottom:6px; font-family:var(--font-body); font-weight:600; }
.timeline-step p{ font-size:13.5px; color:var(--ink-soft); }

/* ---------- stat row ---------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.stat{
  padding:22px 20px;
  border-right:1px solid var(--line);
  background:var(--surface);
}
.stat:last-child{ border-right:none; }
.stat .n{
  font-family:var(--font-display);
  font-weight:600;
  font-size:28px;
  color:var(--navy-900);
  display:block;
}
:root:not([data-theme="light"]) .stat .n{ color:var(--ink); }
:root[data-theme="dark"] .stat .n{ color:var(--ink); }
.stat .l{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em; font-family:var(--font-mono); }

/* ---------- CTA band ---------- */
/* A dark asphalt bookend to the site header — same lane-line motif along
   its top edge — with the road-marking yellow reserved for the one
   action that matters here. */
.cta-band{
  background:var(--ink);
  color:rgba(255,255,255,0.86);
  padding-block:74px;
  position:relative;
}
.cta-band::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 28px, transparent 28px 46px);
}
.cta-band::after{
  content:"";
  position:absolute; bottom:0; left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg, var(--line-strong) 0 28px, transparent 28px 46px);
}
.cta-band h2{
  color:#FFFFFF;
  font-size:clamp(28px,3.8vw,42px);
}
.cta-band p{ color:rgba(255,255,255,0.72); margin-top:12px; max-width:56ch; font-size:16.5px; }
.cta-band-inner{
  position:relative;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
/* match the hero's button style — sharp corners, same size/casing as
   "Request a Quote" / "View Our Services" in the hero */
.cta-band .btn{ border-radius:var(--radius); }
.cta-band .btn-primary{ background:var(--green-500); color:#08210F; border-color:var(--green-500); box-shadow:0 12px 26px -10px rgba(0,0,0,0.5); }
.cta-band .btn-primary:hover{ background:#4FDD80; border-color:#4FDD80; transform:translateY(-1px); }
.cta-band .btn-ghost{ color:#FFFFFF; border-color:rgba(255,255,255,0.5); }
.cta-band .btn-ghost:hover{ border-color:#FFFFFF; color:#FFFFFF; background:rgba(255,255,255,0.1); }

/* ---------- footer ---------- */
.site-footer{
  background:var(--surface);
  color:var(--ink-soft);
  padding-block:50px 26px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid;
  gap:32px;
  grid-template-columns:1.3fr 1fr 1fr;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-title{
  font-family:var(--font-display);
  color:var(--ink);
  font-size:18px;
  font-weight:600;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.site-footer a{ text-decoration:none; color:var(--ink-soft); }
.site-footer a:hover{ color:var(--green-700); }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14.5px; }
.footer-meta{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-family:var(--font-mono); color:var(--ink-faint); }
.footer-map{ margin-top:16px; }
.footer-map iframe{ display:block; width:100%; height:180px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line) !important; }
.footer-map svg{ display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.footer-map rect{ fill:rgba(0,0,0,0.04); }
.footer-map g{ stroke:rgba(0,0,0,0.12); }
.footer-map-caption{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-faint); }
.footer-bottom{
  border-top:1px solid var(--line);
  margin-top:38px;
  padding-top:20px;
  display:flex; flex-wrap:wrap; gap:10px 20px;
  justify-content:space-between;
  font-size:12.5px;
  color:var(--ink-faint);
  font-family:var(--font-mono);
}

/* ---------- trust bar (below hero) ---------- */
.trust-bar{
  position:relative;
  background:var(--paper);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding-block:18px;
}
.trust-bar-grid{
  display:flex; flex-direction:column;
  align-items:center;
  row-gap:14px;
}
.trust-row{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  row-gap:10px;
}
.trust-item{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.005em;
  color:var(--ink-soft);
  padding-inline:22px;
  border-right:1px solid var(--line-strong);
  white-space:nowrap;
}
.trust-item:last-child{ border-right:none; }
.trust-item svg{ width:18px; height:18px; flex:none; color:var(--green-700); }
@media (max-width:900px){
  .trust-item{ border-right:none; padding-inline:14px; white-space:normal; }
}
@media (max-width:520px){
  .trust-bar-grid{ align-items:flex-start; }
  .trust-row{ flex-direction:column; align-items:flex-start; gap:12px; }
  .trust-item{ font-size:13px; }
}

/* ---------- floating WhatsApp button ---------- */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:80;
  display:inline-flex; align-items:center; gap:9px;
  background:#25D366; color:#FFFFFF;
  padding:13px 20px 13px 15px;
  border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  text-decoration:none;
  box-shadow:0 10px 26px -6px rgba(0,0,0,0.4);
  transition:transform .15s ease, box-shadow .15s ease;
}
.whatsapp-float:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -6px rgba(0,0,0,0.45);
  color:#FFFFFF;
}
.whatsapp-float svg{ width:22px; height:22px; flex:none; }
@media (max-width:520px){
  .whatsapp-float{ right:14px; bottom:14px; padding:13px; }
  .whatsapp-float span{ display:none; }
}

/* ---------- spec tables (services, standards) ---------- */
.spec-table{ width:100%; border-collapse:collapse; font-size:14px; margin-top:6px; }
.spec-table th{
  text-align:left; font-family:var(--font-mono); font-size:11.5px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint);
  padding:10px 18px 10px 0; border-bottom:1px solid var(--line-strong);
  vertical-align:bottom;
}
.spec-table td{
  padding:14px 18px 14px 0; border-bottom:1px solid var(--line);
  color:var(--ink-soft); vertical-align:top; line-height:1.5;
}
.spec-table td:first-child, .spec-table th:first-child{
  width:190px; padding-right:22px;
}
.spec-table td:first-child{ color:var(--ink); font-weight:600; }
.spec-table tr:last-child td{ border-bottom:none; }
@media (max-width:600px){
  .spec-table, .spec-table thead, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td{ display:block; width:auto; }
  .spec-table th:first-child{ display:none; }
  .spec-table tr{ padding-block:12px; border-bottom:1px solid var(--line); }
  .spec-table tr:first-child{ display:none; }
  .spec-table td{ border-bottom:none; padding:2px 0; }
  .spec-table td:first-child{
    font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
    letter-spacing:.05em; color:var(--ink-faint); font-weight:500; padding-bottom:4px;
  }
}

/* ---------- forms (contact page) ---------- */
.form-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:12.5px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family:var(--font-body);
  font-size:15px;
  padding:11px 13px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--green-500);
  outline-offset:1px;
  border-color:var(--navy-900);
}
.field textarea{ resize:vertical; min-height:110px; font-family:var(--font-body); }

/* ---------- client logos ---------- */
.client-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.client-tile{
  background:#F4F4F4;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  display:flex; align-items:center; justify-content:center;
  height:104px;
}
.client-tile .logo-box{
  width:100%;
  height:56px;
  display:flex; align-items:center; justify-content:center;
}
.client-tile img{
  max-width:100%;
  max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}

/* ---------- misc ---------- */
.badge-strip{
  display:flex; flex-wrap:wrap; gap:10px 26px;
  align-items:center;
}
.badge-strip .b{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--ink-soft);
}
.badge-strip svg{ color:var(--green-700); flex:none; }

.two-col{ display:grid; gap:44px; }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1fr; align-items:start; } }

.figure-frame{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:22px;
}
.figure-frame-photo{
  padding:0;
  overflow:hidden;
}
.figure-frame-photo img{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:3/2;
  object-fit:cover;
}

.breadcrumb{
  font-family:var(--font-mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:var(--ink-faint);
  display:flex; gap:8px; align-items:center;
}
.breadcrumb a:hover{ color:var(--navy-900); text-decoration:underline; }
:root:not([data-theme="light"]) .breadcrumb a:hover{ color:var(--ink); }
:root[data-theme="dark"] .breadcrumb a:hover{ color:var(--ink); }
.contact-line a:hover{ color:var(--green-700); text-decoration:underline; }
.footer-links a:hover, .site-footer .contact-line a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

::selection{ background:var(--gold-500); color:#fff; }

/* ---------- why choose us: stat cards ---------- */
.stat-card{
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  display:flex; flex-direction:column; gap:10px;
  border-top:3px solid var(--line-strong);
  padding-top:20px;
}
.stat-card .stat-figure{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(19px,2.1vw,25px);
  line-height:1.15;
  min-height:2.3em;
  text-wrap:balance;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:0.01em;
}
.stat-card h3{ font-size:16.5px; margin-top:2px; }
.stat-card p{ color:var(--ink-soft); font-size:14px; }

/* ---------- materials & technology ---------- */
.material-card{ gap:14px; }
.material-card .icon{ width:34px; height:34px; color:var(--green-600); flex:none; }
.material-card .mat-logo{ height:44px; width:auto; max-width:170px; flex:none; }
/* A certification logo shown on its own, with no card border/background —
   just centred and sized to sit comfortably beside carded items in the
   same grid row. */
.mat-logo-only{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:26px 24px;
}
.mat-logo-only img{ height:64px; width:auto; max-width:100%; }
.mat-logo-only img.bizsafe-logo{
  height:80px;
  border:2px solid var(--ink);
  padding:8px;
  background:#fff;
}
.cert-logos{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  gap:36px;
}
.cert-logos .mat-logo-only{ padding:0; }
.material-card .mat-code{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.04em;
  color:var(--gold-500);
  text-transform:uppercase;
}
.material-card h3{ font-size:17px; margin-top:-6px; }
.material-card p{ color:var(--ink-soft); font-size:14px; }

/* ---------- WhatsApp floating action button ---------- */
.whatsapp-fab{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:60;
  width:56px; height:56px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,0.18), 0 14px 30px -12px rgba(0,0,0,0.35);
  transition:background .15s ease, transform .15s ease;
}
.whatsapp-fab:hover{ background:#1EBE5A; transform:translateY(-2px); }
.whatsapp-fab svg{ width:27px; height:27px; position:relative; z-index:1; }
.whatsapp-fab::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid #25D366;
  animation:wa-pulse 2.2s ease-out infinite;
}
@keyframes wa-pulse{
  0%{ transform:scale(1); opacity:0.65; }
  100%{ transform:scale(1.55); opacity:0; }
}
@media (max-width:479px){
  .whatsapp-fab{ width:50px; height:50px; right:14px; bottom:14px; }
  .whatsapp-fab svg{ width:24px; height:24px; }
}

/* Yellow dashed "lane line" accents (hero band, page headers, cta band) —
   given a slow, continuous scroll so they read as a moving road line
   rather than a static rule. One dash cycle (28px stripe + 18px gap =
   46px) so the loop is seamless. */
.hero-photo-band::before,
.hero-photo-band::after,
.page-header-contact::before,
.page-header-services::before,
.page-header-projects::before,
.page-header-contact::after,
.page-header-services::after,
.page-header-projects::after,
.page-header-about::before,
.page-header-about::after,
.cta-band::before,
.cta-band::after{
  animation:laneLineMove 1.8s linear infinite;
}
@keyframes laneLineMove{
  from{ background-position-x:0; }
  to{ background-position-x:46px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-photo-band::before,
  .hero-photo-band::after,
  .page-header-contact::before,
  .page-header-services::before,
  .page-header-projects::before,
  .page-header-contact::after,
  .page-header-services::after,
  .page-header-projects::after,
  .page-header-about::before,
  .page-header-about::after,
  .cta-band::before,
  .cta-band::after{
    animation:none;
  }
}