/* =========================================================
   PRIMO PRO SERVICE — stylesheet (v2)
   Structure and component language modeled on a reference site
   (full-bleed photo sections, serif display type, marquee ticker,
   pillar grid, work gallery, story split, review bar, split
   contact, final CTA, multi-column footer) — rebuilt in Primo's
   own palette pulled from the logo: void black, acid lime, white.
   ========================================================= */

/* =========================================================
   PRIMO PRO SERVICES — stylesheet (v3)
   Colour system rebuilt to the official Primo Pro Services
   Brand Colour & Application Guide: Primo Lime, Primo Midnight,
   and White carry the majority of the design (recommended visual
   balance: ~60% white/light neutral, ~25% midnight/navy, ~10%
   lime, ~5% greys). Off-brand hues (teal, rust/orange, frost
   blue, grass green) have been removed in favour of the approved
   combinations only.
   ========================================================= */

:root{
  /* -- core brand palette (official hex, per brand guide) -- */
  --lime:        #8ccb18;   /* Primo Lime — primary accent / CTA */
  --lime-bright: #a6e51a;   /* Bright Lime — limited highlights/gradients only */
  --midnight:    #07131d;   /* Primo Midnight — primary dark background */

  /* -- supporting palette (official hex, per brand guide) -- */
  --navy:        #0c2238;   /* Deep Navy — digital sections / secondary dark */
  --charcoal:    #202428;   /* Charcoal — secondary dark / elevated panels */
  --graphite:    #3a4147;   /* Graphite — secondary graphics / dividers */
  --silver:      #b8bec3;   /* Silver — reflective / technical accent */
  --light-grey:  #e9ecee;   /* Light Grey — web/document backgrounds */
  --off-white:   #f7f8f6;   /* Off White — warm document/web background */
  --white:       #ffffff;

  /* -- aliases used throughout the component CSS below -- */
  --void:        var(--midnight);
  --obsidian:    var(--midnight);
  --graphite-panel: var(--charcoal);
  --paper:       var(--off-white);
  --ink:         var(--midnight);
  --ink-soft:    #5b6268;   /* Graphite, lightened for body copy on light bg */

  --line:        rgba(184,190,195,0.18);   /* Silver, low opacity — dark-bg dividers */
  --line-soft:   rgba(255,255,255,0.08);

  --lime-soft:   rgba(140,203,24,0.55);
  --lime-dim:    rgba(140,203,24,0.14);

  --w-40:        rgba(255,255,255,0.42);
  --w-50:        rgba(255,255,255,0.55);
  --w-70:        rgba(255,255,255,0.75);

  --f-serif: 'Playfair Display', 'Georgia', serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --container: 90rem;
  --gutter: clamp(20px, 5vw, 48px);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  background: var(--obsidian);
  color: var(--white);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

/* Long unbroken strings (emails, URLs) shouldn't force horizontal overflow
   in narrow flex rows like footer/contact links. */
a[href^="mailto:"], .contact-info-row .val, .footer-contact a{
  overflow-wrap: anywhere; word-break: break-word;
}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--lime);
  display: block;
  margin-bottom: 20px;
}

h1, h2, h3, h4{
  font-family: var(--f-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.05;
}
em{ font-style: italic; color: var(--lime); }

h2{ font-size: clamp(34px, 4.6vw, 58px); }
h3{ font-size: clamp(20px, 2.2vw, 26px); }

p{ margin: 0; color: var(--w-50); }
.on-paper p{ color: var(--ink-soft); }
.on-paper h2, .on-paper h3{ color: var(--ink); }

.divider{ height: 1px; background: var(--line-soft); }
.on-paper .divider{ background: rgba(7,19,29,0.1); }

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space: nowrap;
}
.btn-primary{ background: var(--lime); color: var(--void); }
.btn-primary:hover{ transform: translateY(-2px); background: var(--lime-bright); }
.btn-outline{ border-color: rgba(255,255,255,0.3); color: var(--white); }
.btn-outline:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.btn-outline.on-paper{ border-color: rgba(7,19,29,0.2); color: var(--ink); }
.btn-outline.on-paper:hover{ background: rgba(7,19,29,0.05); }
.btn-block{ width: 100%; justify-content: center; }
.btn:disabled{ opacity: .5; cursor: not-allowed; transform: none !important; }
.btn svg{ transition: transform .25s ease; }
.btn:hover svg{ transform: translateX(3px); }

/* Safety net: on very narrow phones, never let long button labels force
   the page wider than the viewport — wrap instead of overflowing. */
@media (max-width: 420px){
  .btn{ white-space: normal; text-align: center; }
}

/* =============== HEADER =============== */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(7,19,29,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s ease;
}
.nav{
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
  gap: 12px;
}
.brand{ display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.brand img{ height: 55px; width: auto; max-width: 100%; }

.nav-links{ display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); flex-wrap: nowrap; }
.nav-links a{
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--w-50); position: relative; transition: color .2s ease;
  white-space: nowrap;
}
.nav-links a:hover{ color: var(--white); }
.nav-links a.nav-cta-link{ color: var(--white); }
.nav-links a.nav-cta-link::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--lime);
}

.nav-phone{
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: 0.08em; color: var(--w-50);
  transition: color .2s ease;
}
.nav-phone:hover{ color: var(--white); }

.nav-tabs{
  display: flex; align-items: center; gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-soft);
  padding: 4px;
}
.nav-tabs a{
  display: flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--w-40);
  transition: all .25s ease;
}
.nav-tabs a:hover{ color: var(--white); background: rgba(255,255,255,0.06); }
.nav-tabs a.active{ background: var(--lime); color: var(--void); }
.nav-tabs svg{ width: 13px; height: 13px; }

.nav-right{ display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nav-toggle{
  display: none; align-items: center; justify-content: center;
  background: none; border: none; color: var(--white);
  width: 44px; height: 44px; padding: 0; margin: -8px;
  flex-shrink: 0;
}
.nav-toggle svg{ display: block; }

/* Deep-linked sections (nav flyout jumps, footer anchors) need to clear
   the fixed header instead of landing right underneath it. */
#snow-packages{ scroll-margin-top: 92px; }
@media (max-width: 400px){ #snow-packages{ scroll-margin-top: 76px; } }

/* -------- Services dropdown submenu -------- */
.nav-dropdown{
  position: relative;
  /* extends the hoverable hit area down to meet the submenu, without
     affecting layout (compensated by the negative margin) — otherwise
     the gap between the link and the panel breaks :hover on mouse-move */
  padding-bottom: 20px;
  margin-bottom: -20px;
}
.nav-dropdown-toggle{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.nav-dropdown-toggle .chev{ transition: transform .25s ease; }
.nav-dropdown:hover .nav-dropdown-toggle .chev,
.nav-dropdown.open .nav-dropdown-toggle .chev{ transform: rotate(180deg); }

.nav-submenu{
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 250px;
  background: var(--midnight);
  border: 1px solid var(--line-soft);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 60;
}
.nav-dropdown:hover .nav-submenu,
.nav-dropdown:focus-within .nav-submenu,
.nav-dropdown.open .nav-submenu{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-submenu li a{
  display: block;
  padding: 12px 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--w-50); white-space: nowrap; transition: color .2s ease, background .2s ease;
}
.nav-submenu li a:hover{ color: var(--white); background: rgba(255,255,255,0.06); }
.nav-submenu li a.active{ color: var(--lime); }

/* -------- nested "Snow Removal" flyout (submenu within a submenu) -------- */
.nav-subdropdown{ position: relative; }
.nav-subdropdown-row{ display: flex; align-items: center; justify-content: space-between; position: relative; min-height: 44px; }
.nav-subdropdown-row a{
  display: block; flex: 1; padding: 12px 44px 12px 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--w-50); white-space: nowrap; transition: color .2s ease, background .2s ease;
}
.nav-subdropdown-row a:hover{ color: var(--white); background: rgba(255,255,255,0.06); }
.nav-subdropdown-toggle{
  background: none; border: none; color: var(--w-40); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0;
  border-radius: 4px; transition: color .2s ease, background .2s ease;
}
.nav-subdropdown-toggle svg{ display: block; width: 9px; height: 9px; }
.nav-subdropdown-toggle:hover{ color: var(--lime); background: rgba(255,255,255,0.06); }
.nav-subdropdown:hover .nav-subdropdown-toggle{ color: var(--w-50); }
.nav-subdropdown:hover .nav-subdropdown-toggle:hover{ color: var(--lime); }
.nav-subdropdown-toggle .chev-sub{ transition: transform .25s ease; }
.nav-subdropdown:hover .nav-subdropdown-toggle .chev-sub,
.nav-subdropdown.open .nav-subdropdown-toggle .chev-sub{ transform: rotate(90deg); }

.nav-subsubmenu{
  position: absolute; top: -8px; left: 100%; margin-left: 8px;
  min-width: 220px;
  background: var(--midnight);
  border: 1px solid var(--line-soft);
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  transform: translateX(-6px);
  z-index: 70;
}
/* The plan panel belongs to the Services menu as a whole. Keeping it visible
   whenever that menu is open gives Home and service pages the same two-panel
   layout and avoids a second hover target inside the first panel. */
.nav-dropdown:hover .nav-subsubmenu,
.nav-dropdown:focus-within .nav-subsubmenu,
.nav-dropdown.open .nav-subsubmenu{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(0);
}

/* The full panel is already visible, so a separate inner chevron is redundant. */
.nav-subdropdown-toggle{ display: none; }
.nav-subsubmenu li a{
  display: block; padding: 11px 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--w-50); white-space: nowrap; transition: color .2s ease, background .2s ease;
}
.nav-subsubmenu li a:hover{ color: var(--white); background: rgba(255,255,255,0.06); }

@media (max-width: 1080px){
  .nav-tabs{ display: none; }
}
/* Mid-range tablet/laptop buffer: services tabs are already hidden here,
   but brand + full nav-links + phone number can still get tight before the
   hamburger takes over — tighten spacing rather than let anything overflow. */
@media (max-width: 1040px) and (min-width: 941px){
  .nav-links{ gap: 16px; }
  .nav-links a{ font-size: 10.5px; }
  .nav-phone{ font-size: 10.5px; }
  .nav-right{ gap: 14px; }
}
@media (max-width: 940px){
  .nav-links{
    position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
    width: 100%; height: calc(100vh - 76px); height: calc(100dvh - 76px);
    background: var(--obsidian); z-index: 5;
    flex-direction: column; align-items: stretch; padding: 18px var(--gutter) 34px; gap: 4px;
    transform: translateX(100%); transition: transform .35s ease; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-toggle{ display: inline-flex; }
  .nav-phone{ display: none; }

  .nav-links a{
    display: flex; align-items: center; width: 100%;
    padding: 15px 2px; font-size: 14px; letter-spacing: 0.06em;
    border-bottom: 1px solid var(--line-soft);
    white-space: normal;
  }
  .nav-links li{ width: 100%; }

  .nav-dropdown{ width: 100%; padding-bottom: 0; margin-bottom: 0; }
  .nav-dropdown-toggle{ width: 100%; justify-content: space-between; }
  .nav-submenu{
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: none; box-shadow: none; padding: 0 0 0 14px; min-width: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-dropdown.open .nav-submenu{ max-height: 420px; }
  /* The desktop hover rule (.nav-dropdown.open .nav-submenu) sets its own
     transform and out-specifies the plain .nav-submenu reset above — match
     its specificity here so the submenu stays put instead of shifting
     sideways by 50% of its own width on mobile. */
  .nav-dropdown.open .nav-submenu{ transform: none; }
  .nav-submenu li a{ padding: 13px 0; font-size: 13px; color: var(--w-40); border-bottom: none; white-space: normal; }
  .nav-links a.nav-cta-link::after{ display: none; }
  .nav-links li:last-child > a{ border-bottom: none; }

  /* nested "Snow Removal" flyout collapses to an inline expandable list,
     matching the top-level Services dropdown's mobile behaviour. */
  .nav-subdropdown-row{ border-bottom: 1px solid var(--line-soft); }
  .nav-subdropdown-row a{ padding: 13px 0; font-size: 13px; color: var(--w-40); white-space: normal; }
  .nav-subdropdown-toggle{ display: none; }
  .nav-subsubmenu{
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: none; box-shadow: none; padding: 0 0 0 14px; min-width: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s ease;
  }
  .nav-dropdown.open .nav-subsubmenu{ max-height: 260px; }
  .nav-subsubmenu li a{ padding: 12px 0; font-size: 12.5px; color: var(--w-40); border-bottom: none; white-space: normal; }
}
@media (max-width: 400px){
  .nav{ height: 64px; padding: 0 16px; }
  .brand img{ height: 44px; }
  .nav-links{
    top: 64px; height: calc(100vh - 64px); height: calc(100dvh - 64px);
  }
}

/* =============== HERO ===============
   Built from the approved mock-up: copy on a dark left side, the vehicle
   photo bright on the right, photos slide through on a timer.
   - Photos sit under the fixed nav at their natural proportions, tucked
     right. Their left edge dissolves into the midnight background, so the
     whole vehicle stays in frame whatever the shape of the picture.
   - A left-to-right midnight overlay sits behind the copy only. */
.hero{
  --hero-nav: 76px;
  position: relative;
  min-height: clamp(580px, 41vw, 660px);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--midnight);
}
@media (max-width: 400px){ .hero{ --hero-nav: 64px; } }
.hero-bg{ position: absolute; inset: 0; z-index: 0; }
.hero-bg-slide{
  position: absolute; right: 0; bottom: 0; top: var(--hero-nav);
  height: calc(100% - var(--hero-nav)); width: auto; max-width: none;
  opacity: 0; transition: opacity 1.4s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%), linear-gradient(180deg, transparent 0%, #000 6%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%), linear-gradient(180deg, transparent 0%, #000 6%);
  mask-composite: intersect;
}
.hero-bg-slide.active{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .hero-bg-slide{ transition: none; }
}
/* dark side behind the copy: strong at the left edge, gone by ~65% */
.hero-scrim-1{ position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(7,19,29,0.94) 0%, rgba(7,19,29,0.9) 26%, rgba(7,19,29,0.66) 40%, rgba(7,19,29,0.24) 54%, rgba(7,19,29,0) 66%); }
.hero-scrim-2{ position: absolute; inset: 0; z-index: 1; background: none; }
.hero-scrim-3{ position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(7,19,29,0.45) 0%, rgba(7,19,29,0) 22%); }

.hero-content{ position: relative; z-index: 10; flex: 1; display: flex; align-items: center; }
.hero-inner{
  max-width: var(--container); margin: 0 auto; width: 100%;
  padding: calc(var(--hero-nav) + clamp(26px, 3vw, 46px)) var(--gutter) clamp(44px, 4.4vw, 72px);
}
.hero-copy{ max-width: none; }

.brand-tagline{
  font-size: clamp(10.5px, 0.85vw, 13.5px); font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--white); margin-bottom: clamp(14px, 1.3vw, 22px);
}
.brand-tagline em{ font-style: normal; color: var(--lime); }

.hero h1{
  font-size: clamp(38px, 4.4vw, 84px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: clamp(16px, 1.6vw, 26px);
  white-space: nowrap;   /* two fixed lines, like the mock-up: "One Call." / "Consider It Handled." */
}
.hero h1 em{ display: block; color: var(--lime); font-style: normal; }

.hero p.lede{
  font-size: clamp(14px, 1.08vw, 18px); color: rgba(255,255,255,0.88); max-width: clamp(340px, 36.5vw, 660px);
  margin-bottom: clamp(22px, 2.3vw, 38px); font-weight: 400; line-height: 1.52;
}
.hero-actions{ display: flex; gap: clamp(10px, 1.05vw, 16px); flex-wrap: wrap; margin: 0; }
.hero-actions .btn{
  min-height: clamp(46px, 3.7vw, 62px); padding: 0 clamp(24px, 2.6vw, 44px);
  font-size: clamp(11.5px, 0.9vw, 14px); font-weight: 700; letter-spacing: 0.07em;
}
.hero-actions .btn-outline{
  border-width: 1px; border-color: rgba(255,255,255,0.5);
  background: rgba(7,19,29,0.55);
}
.hero-actions .btn-outline:hover{ background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.8); }
.hero-actions .btn-outline svg{ width: 1.3em; height: 1.3em; }
.hero-actions .btn-outline:hover svg{ transform: none; }

/* Stacked layout (phones / small tablets): photo band under the nav,
   copy on solid midnight beneath it, photo fading into it. */
@media (max-width: 900px){
  .hero{ min-height: 0; }
  .hero-bg{ inset: 0 0 auto 0; height: calc(var(--hero-nav) + 62vw); }
  .hero-bg-slide{
    top: 0; right: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 75% 50%);
    -webkit-mask-image: none; mask-image: none;
  }
  .hero-scrim-1{ inset: 0 0 auto 0; height: calc(var(--hero-nav) + 62vw);
    background: linear-gradient(180deg, rgba(7,19,29,0.35) 0%, rgba(7,19,29,0) 30%, rgba(7,19,29,0) 48%, rgba(7,19,29,0.9) 88%, var(--midnight) 100%); }
  .hero-scrim-3{ display: none; }
  .hero-inner{ padding-top: calc(var(--hero-nav) + 50vw); padding-bottom: 44px; }
  .hero-copy{ max-width: 40rem; }
  .hero h1{ font-size: clamp(34px, 8.6vw, 60px); white-space: normal; }
  .hero p.lede{ font-size: clamp(15px, 3.9vw, 17px); max-width: none; }
  .hero-actions .btn{ min-height: 52px; font-size: 12.5px; }
}
@media (max-width: 560px){
  .hero-actions{ flex-direction: column; align-items: stretch; }
  .hero-actions .btn{ width: 100%; justify-content: center; }
}

.hero-infobar{ position: relative; z-index: 10; border-top: 1px solid var(--line-soft); }
.hero-infobar-inner{
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
}
.hero-infobar-item{
  padding: 16px 0; display: flex; align-items: center; gap: 10px;
}
.hero-infobar-item + .hero-infobar-item{ border-left: 1px solid var(--line-soft); padding-left: 22px; }
.hero-infobar-item svg{ color: var(--w-40); flex-shrink: 0; width: 14px; height: 14px; }
.hero-infobar-item a, .hero-infobar-item span.val{ font-size: 11px; letter-spacing: 0.05em; color: var(--w-70); }
.hero-infobar-item a:hover{ color: var(--white); }
.hero-infobar-item .label{ font-size: 11px; font-weight: 700; color: var(--white); margin-right: 4px; }

@media (max-width: 720px){
  .hero-infobar-inner{ grid-template-columns: 1fr; }
  .hero-infobar-item + .hero-infobar-item{ border-left: none; border-top: 1px solid var(--line-soft); padding-left: 0; padding-top: 14px; }
}

/* =============== MARQUEE TICKER =============== */
.marquee{
  background: var(--obsidian);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  padding: 17px 0;
}
.marquee-track{
  display: flex; align-items: center; gap: 32px; white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 38s linear infinite;
}
.marquee-track span.word{
  font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--w-40);
}
.marquee-track span.dot{ width: 5px; height: 5px; border-radius: 50%; background: var(--lime-dim); flex-shrink: 0; }
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =============== SECTION SHELL =============== */
.sec{ padding: clamp(56px, 10vw, 100px) var(--gutter); position: relative; }
.sec.on-paper{ background: var(--paper); }
.sec-head{ margin-bottom: 40px; }
.sec-head h2{ max-width: 32ch; }
.sec-head-row{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.sec-head-side{ text-align: right; }
.sec-head-side .micro{ display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--lime-dim); }
.on-paper .sec-head-side .micro{ color: rgba(7,19,29,0.35); }
@media (max-width: 560px){
  .sec-head-row{ flex-direction: column; align-items: flex-start; gap: 12px; }
  .sec-head-side{ text-align: left; }
}

/* =============== SERVICES GRID (photo tiles) ===============
   Built from the approved mock-up: full-colour photo, logo tile, location line,
   display title (white + lime italic), one line of copy, lime button.
   The whole tile opens the service page; the button opens the quote form. */
.svc-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.svc-card{
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(380px, 29vw, 440px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--midnight); border: 1px solid var(--line-soft);
  transition: transform .5s ease;
}
.svc-card--wide{ grid-column: 1 / -1; }
/* Only 2 services visible (Snow + Junk) — both share one row.
   (Removed old :last-child full-width rule that stretched Junk full screen.) */
.svc-card:hover{ transform: translateY(-4px); }
.svc-card .media{ position: absolute; inset: 0; z-index: 0; }
.svc-card .media img{
  width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  transition: transform .8s ease;
}
.svc-card:hover .media img{ transform: scale(1.05); }
/* soft dark centre so the copy reads on any photo, edges stay bright */
.svc-scrim{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 88% at 50% 52%, rgba(7,19,29,0.82) 0%, rgba(7,19,29,0.58) 52%, rgba(7,19,29,0) 100%),
    linear-gradient(180deg, rgba(7,19,29,0.06) 0%, rgba(7,19,29,0.24) 100%);
}
.svc-cover{ position: absolute; inset: 0; z-index: 2; }
.svc-card .content{
  position: relative; z-index: 3; pointer-events: none;
  width: 100%; max-width: 31rem; padding: 30px 24px;
  display: flex; flex-direction: column; align-items: center;
}
.svc-mark{ width: 48px; height: 48px; border-radius: 9px; margin-bottom: 12px; box-shadow: 0 0 0 1px rgba(255,255,255,0.08); }
.svc-eyebrow{ font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; }
.svc-card h3{ font-size: clamp(28px, 2.6vw, 38px); line-height: 1.04; margin-bottom: 12px; color: var(--white); }
.svc-card h3 a{ color: inherit; pointer-events: auto; }
.svc-card h3 em{ display: block; color: var(--lime); font-style: italic; }
.svc-card p{ font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.86); max-width: 36ch; margin-bottom: 20px; }
.svc-card .btn{ pointer-events: auto; padding: 13px 24px; font-size: 11.5px; }

@media (max-width: 760px){
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-card{ min-height: 400px; }
}

/* =============== BIN RENTALS (functional) =============== */
.bins-intro, .pkg-intro{ max-width: 640px; margin-bottom: 46px; }

.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.form-field.full{ grid-column: 1 / -1; }
.form-field label{ font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--w-40); }
.form-field input, .form-field select, .form-field textarea{
  background: var(--obsidian); border: 1px solid var(--line); padding: 13px 15px; color: var(--white);
  font-family: var(--f-body); font-size: 14px; outline: none; transition: border-color .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{ border-color: var(--lime); }
.form-field textarea{ resize: vertical; min-height: 90px; }

/* -------- Season Coverage CTA card (commercial, custom-quoted) -------- */
.season-cta-wrap{ display: flex; justify-content: center; }
.season-cta-card{
  display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch;
  background: var(--white); border: 1px solid rgba(7,19,29,0.08); border-radius: 16px;
  overflow: hidden; max-width: 920px; width: 100%;
  box-shadow: 0 14px 34px rgba(7,19,29,0.07);
}
.season-cta-media{ position: relative; min-height: 220px; }
.season-cta-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.season-cta-body{ padding: 34px 36px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.season-cta-body h3{ font-size: 24px; color: var(--ink); line-height: 1.25; }
.season-cta-body p{ font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 6px; }
.season-cta-body .btn{ align-self: flex-start; }
@media (max-width: 760px){
  .season-cta-card{ grid-template-columns: 1fr; }
  .season-cta-media{ aspect-ratio: 16/9; min-height: 0; }
  .season-cta-body{ padding: 26px 22px; }
}

/* -------- Hours quantity stepper (commercial equipment request form) -------- */
.qty-stepper{ display: flex; align-items: stretch; border: 1px solid var(--line); background: var(--obsidian); }
.qty-stepper input{ border: none !important; background: transparent !important; text-align: center; width: 100%; padding: 13px 6px !important; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.qty-btn{
  flex: 0 0 40px; background: transparent; border: none; color: var(--white);
  font-size: 18px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.qty-btn:first-child{ border-right: 1px solid var(--line); }
.qty-btn:last-child{ border-left: 1px solid var(--line); }
.qty-btn:hover{ background: var(--lime); color: var(--void); }
.rent-modal .qty-stepper{ background: var(--white); border-color: rgba(7,19,29,0.14); }
.rent-modal .qty-btn{ color: var(--ink); }
.rent-modal .qty-stepper input{ color: var(--ink); }
.equip-estimate-value{ font-family: var(--f-serif); font-size: 22px; font-weight: 700; color: var(--ink); }

.booking-msg{ margin-top: 14px; font-size: 13px; padding: 11px 13px; display: none; }
.booking-msg.show{ display: block; }
.booking-msg.success{ background: rgba(140,203,24,0.12); color: var(--lime); border: 1px solid rgba(140,203,24,0.35); }
.booking-msg.error{ background: rgba(214,69,69,0.1); color: #d64545; border: 1px solid rgba(214,69,69,0.3); }

/* -------- Featured rental cards (product grid) -------- */
.rentals-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-bottom: 8px; }
.rentals-grid.cols-2{ grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.rental-card{
  background: var(--white); border: 1px solid rgba(7,19,29,0.08); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 14px 34px rgba(7,19,29,0.07);
  transition: transform .3s ease, box-shadow .3s ease;
}
.rental-card:hover{ transform: translateY(-5px); box-shadow: 0 22px 44px rgba(7,19,29,0.12); }
.rental-photo{ position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--light-grey); }
.rental-photo img{ width: 100%; height: 100%; object-fit: cover; }
/* Diagram images are 1345×704 (≈19:10). Use a wider aspect ratio so the full
   label text and all dimension arrows are visible without clipping.
   object-fit: contain keeps the image intact; white bg matches the diagram. */
.rental-photo.diagram{ aspect-ratio: 19/10; background: #f8f8f8; overflow: hidden; }
.rental-photo.diagram img{
  object-fit: contain;
  width: 100%; height: 100%;
  padding: 0;
  box-sizing: border-box;
  display: block;
}
.rental-badge{
  position: absolute; top: 14px; left: 14px; background: var(--lime); color: var(--void);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 30px;
}
.rental-price-tag{
  position: absolute; bottom: 0; right: 16px; background: var(--white);
  padding: 10px 16px 8px; border-radius: 10px 10px 0 0; box-shadow: 0 -6px 16px rgba(7,19,29,0.08);
  display: flex; align-items: baseline; gap: 8px;
}
.rental-price-tag .now{ font-family: var(--f-serif); font-size: 22px; font-weight: 700; color: var(--ink); }
.rental-price-tag .was{ font-size: 12.5px; color: var(--ink-soft);  }
.rental-body{ padding: 22px 22px 6px; flex: 1; }
.rental-body h4{ font-size: 19px; color: var(--ink); margin-bottom: 10px; }
.rental-avail{
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); background: var(--lime-dim); border: 1px solid var(--lime-soft);
  padding: 4px 11px; border-radius: 30px; margin-bottom: 14px;
}
.rental-desc{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; line-height: 1.5; }
.rental-specs{ display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.rental-specs li{ display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-soft); }
.rental-specs svg{ color: var(--lime); flex-shrink: 0; }
.rental-cta{ margin: 18px 22px 22px; justify-content: center; border-radius: 8px; }

/* -------- Alberta routes (hotshot hauling page) -------- */
.routes-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.route-card{
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  padding: 23px; background: var(--midnight); color: var(--white); transition: transform .25s ease, box-shadow .25s ease;
}
.route-card::before{ content: ""; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background: var(--lime); }
.route-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 28px rgba(7,19,29,0.28); }
.route-tag{ font-size: 11px; letter-spacing: .12em; color: var(--lime); font-weight: 800; margin-bottom: 8px; text-transform: uppercase; }
.route-card h4{ margin: 0 0 7px; font-size: 19px; color: var(--white); }
.route-meta{ font-size: 12.5px; font-weight: 700; color: var(--lime); margin-bottom: 13px; }
.route-card p{ color: #cbd7dc; font-size: 13px; margin-bottom: 10px; line-height: 1.55; min-height: 40px; }
.route-cta{ color: var(--white); font-weight: 800; font-size: 12.5px; letter-spacing: .03em; display: inline-flex; align-items: center; gap: 4px; }
.route-cta span{ color: var(--lime); }

@media (max-width: 900px){ .routes-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .routes-grid{ grid-template-columns: 1fr; } }

/* -------- Mowing info sections (lawn mowing page) -------- */
.mow-expect-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 8px; }
.mow-expect-grid p{ font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; }
.mow-expect-grid p:last-child{ margin-bottom: 0; }

.mow-pricing-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-bottom: 26px; }
.mow-price-card{
  background: var(--white); border: 1px solid rgba(7,19,29,0.08); border-radius: 16px;
  padding: 30px; box-shadow: 0 14px 34px rgba(7,19,29,0.07);
}
.mow-price-card h4{ font-size: 19px; color: var(--ink); margin-bottom: 16px; }
.mow-price-card .price-row{ display: flex; align-items: baseline; gap: 7px; margin-bottom: 20px; }
.mow-price-card .price-row .from{ font-size: 13px; color: var(--ink-soft); }
.mow-price-card .price-row .amt{ font-family: var(--f-serif); font-size: 32px; font-weight: 700; color: var(--ink); }
.mow-price-card .price-row .unit{ font-size: 13px; color: var(--ink-soft); }
.mow-price-card ul{ display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }
.mow-price-card ul li{ display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.mow-price-card ul li svg{ color: var(--lime); flex-shrink: 0; }
.mow-price-card .btn{ width: 100%; justify-content: center; border-radius: 8px; }

.mow-special-card{
  background: #081c11; /* dark green, matches the lawn page's tinted hero */
  color: var(--white); border-radius: 18px;
  padding: 36px; position: relative; overflow: hidden;
}
.mow-special-badge{
  display: inline-block; background: rgba(140,203,24,0.15); color: var(--lime);
  border: 1px solid rgba(140,203,24,0.35); padding: 6px 13px; border-radius: 30px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px;
}
.mow-special-card h4{ font-size: 27px; margin-bottom: 12px; color: var(--white); }
.mow-special-price{ display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.mow-special-price .from{ font-size: 14px; color: #AFC0C9; }
.mow-special-price .amt{ font-family: var(--f-serif); font-size: 38px; font-weight: 700; color: var(--white); }
.mow-special-price .unit{ font-size: 14px; color: #AFC0C9; }
.mow-special-card > p{ font-size: 14.5px; color: #cbd7dc; margin-bottom: 22px; line-height: 1.65; max-width: 640px; }
.mow-special-note{ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 20px 22px; }
.mow-special-note strong{ display: block; margin-bottom: 8px; color: var(--white); font-size: 14px; }
.mow-special-note p{ margin: 0; font-size: 13.5px; color: #B8C6CD; line-height: 1.65; }

@media (max-width: 760px){
  .mow-expect-grid{ grid-template-columns: 1fr; gap: 8px; }
  .mow-pricing-grid{ grid-template-columns: 1fr; }
}

/* -------- Pricing table (segment + billing toggle) -------- */
.pricing-controls{
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 44px;
}
.pricing-toggle{
  display: inline-flex; background: var(--light-grey); border-radius: 999px; padding: 5px; gap: 2px;
}
.pricing-toggle button{
  border: none; background: transparent; padding: 10px 22px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); cursor: pointer; transition: all .2s ease;
}
.pricing-toggle button.active{ background: var(--midnight); color: var(--white); }
.pricing-toggle button:hover:not(.active){ color: var(--ink); }

.pricing-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-bottom: 20px;
}
.pricing-grid[hidden]{ display: none; }
.pricing-panel[hidden]{ display: none; }
.pricing-card{
  background: var(--white); border: 1px solid rgba(7,19,29,0.08); border-radius: 16px;
  padding: 30px; display: flex; flex-direction: column;
  box-shadow: 0 14px 34px rgba(7,19,29,0.07);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.pricing-card:hover{ transform: translateY(-5px); box-shadow: 0 22px 44px rgba(7,19,29,0.12); }
.pricing-card.featured{ border: 1.5px solid var(--lime); }
.pricing-card .featured-badge{
  position: absolute; top: -13px; left: 30px; background: var(--lime); color: var(--void);
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 30px;
}
/* -------- Lot-size tooltip ("?" next to card headings) -------- */
.rental-body h4{ display: flex; align-items: center; gap: 8px; }
.lot-tooltip-trigger{
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--lime); color: var(--lime); background: transparent;
  font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.lot-tooltip-trigger:hover{ background: var(--lime); color: var(--void); }
.lot-tooltip-popup{
  position: fixed; z-index: 200; max-width: 300px; background: var(--midnight);
  color: var(--white); font-size: 13px; line-height: 1.55; padding: 16px 18px;
  border-radius: 10px; box-shadow: 0 16px 40px rgba(7,19,29,0.35);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.lot-tooltip-popup.open{ opacity: 1; visibility: visible; transform: translateY(0); }
.lot-tooltip-popup strong{ display: block; margin-bottom: 6px; color: var(--lime); }
.lot-tooltip-popup .close-x{
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: var(--w-40); font-size: 16px; cursor: pointer; line-height: 1;
}

.pricing-tag{
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 10px;
}
.pricing-card h3{ font-size: 19px; color: var(--ink); margin-bottom: 6px; }
.pricing-note{ font-size: 12.5px; color: var(--ink-soft); margin-bottom: 18px; }
.pricing-amount{ display: flex; align-items: baseline; gap: 3px; margin-bottom: 20px; }
.pricing-amount .currency{ font-family: var(--f-serif); font-size: 20px; color: var(--ink); font-weight: 700; }
.pricing-amount .amount{ font-family: var(--f-serif); font-size: 42px; color: var(--ink); font-weight: 700; line-height: 1; }
.pricing-amount .period{ font-size: 13px; color: var(--ink-soft); margin-left: 2px; }
.pricing-features{ display: flex; flex-direction: column; gap: 11px; margin-bottom: 24px; flex: 1; }
.pricing-features li{ display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }
.pricing-features svg{ color: var(--lime); flex-shrink: 0; margin-top: 2px; }
.pricing-cta{ border-radius: 8px; }
.pricing-disclaimer{ text-align: center; font-size: 12px; color: var(--ink-soft); max-width: 62ch; margin: 8px auto 0; line-height: 1.6; }

@media (max-width: 700px){
  .pricing-grid{ grid-template-columns: 1fr; }
  .pricing-controls{ flex-direction: column; align-items: center; gap: 10px; }
}
@media (max-width: 400px){
  .pricing-toggle button{ padding: 9px 16px; font-size: 11px; }
}

/* -------- Booking flow -------- */
.book-panel{ display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: start; }
.book-col{ display: flex; flex-direction: column; gap: 36px; }
.book-block h3{ font-size: clamp(19px, 2vw, 24px); color: var(--ink); margin-bottom: 6px; }
.book-block-note{ font-size: 12.5px; color: var(--ink-soft); margin-bottom: 14px; }
.book-block > h3{ margin-bottom: 16px; }

.pick-list{ display: flex; flex-direction: column; gap: 10px; }
.pick-list.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pick-row{
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  background: var(--white); border: 1px solid rgba(7,19,29,0.12); border-radius: 10px;
  cursor: pointer; transition: all .18s ease;
}
.pick-row:hover{ border-color: var(--lime); }
.pick-row.selected{ background: var(--lime); border-color: var(--lime); }
.pick-row.selected .pr-name, .pick-row.selected .pr-sub, .pick-row.selected .pr-price{ color: var(--void); }
.pick-row img{ width: 56px; height: 40px; object-fit: contain; border-radius: 6px; flex-shrink: 0; background: #f0f0f0; }
.pr-main{ flex: 1; min-width: 0; }
.pr-name{ display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.pr-sub{ display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.pick-row.selected .pr-sub{ color: rgba(7,19,29,0.65); }
.pr-price{ font-family: var(--f-serif); font-size: 15px; color: var(--ink); flex-shrink: 0; }
.pr-dot{
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(7,19,29,0.25);
  flex-shrink: 0; position: relative;
}
.pick-row.selected .pr-dot{ border-color: var(--void); background: var(--void); }
.pick-row.selected .pr-dot::after{
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--lime);
}

/* -------- Calendar widget -------- */
.cal-widget{ background: var(--white); border: 1px solid rgba(7,19,29,0.12); border-radius: 12px; padding: 18px; }
.cal-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-head span{ font-family: var(--f-serif); font-size: 16px; font-weight: 700; color: var(--ink); }
.cal-nav{
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(7,19,29,0.15); background: var(--white);
  color: var(--ink); font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.cal-nav:hover:not(:disabled){ background: var(--lime); border-color: var(--lime); color: var(--void); }
.cal-nav:disabled{ opacity: .3; cursor: not-allowed; }
.cal-weekdays{ display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.cal-weekdays span{ text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; }
.cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-day{
  aspect-ratio: 1; border: none; background: transparent; border-radius: 8px; font-size: 13px; color: var(--ink);
  font-family: var(--f-body); cursor: pointer; transition: all .15s ease;
}
.cal-day:hover:not(:disabled){ background: var(--lime-dim); }
.cal-day.today{ font-weight: 700; box-shadow: inset 0 0 0 1px var(--lime-soft); }
.cal-day.selected{ background: var(--lime); color: var(--void); font-weight: 700; }
.cal-day.disabled{ color: rgba(7,19,29,0.2); cursor: not-allowed; }
.cal-day-blank{ visibility: hidden; }

/* -------- Delivery date: field + icon open a pop-up calendar -------- */
.book-block h3 .cal-icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: 10px; vertical-align: middle;
  border-radius: 50%; border: 1px solid rgba(7,19,29,0.18); background: var(--white); color: var(--ink);
  cursor: pointer; transition: all .15s ease; position: relative; top: -1px;
}
.book-block h3 .cal-icon-btn:hover,
.book-block h3 .cal-icon-btn[aria-expanded="true"]{ background: var(--lime); border-color: var(--lime); color: var(--void); }
.date-picker{ position: relative; }
.date-field{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 13px 15px; background: var(--white); border: 1px solid rgba(7,19,29,0.25); border-radius: 8px;
  font-family: var(--f-body); font-size: 15px; color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.date-field:hover, .date-field[aria-expanded="true"]{ border-color: var(--lime); }
.date-field:focus-visible, .cal-icon-btn:focus-visible{ outline: 2px solid var(--lime); outline-offset: 2px; }
.date-field .is-placeholder{ color: var(--ink-soft); }
.date-field svg{ flex-shrink: 0; color: var(--ink); }
.cal-popover{
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: min(340px, 100%); box-shadow: 0 18px 44px rgba(7,19,29,0.22);
}
.cal-popover[hidden]{ display: none; }
.cal-foot{ display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(7,19,29,0.08); }
.cal-foot button{
  background: none; border: none; padding: 6px 4px; font-family: var(--f-body); font-size: 13px; font-weight: 600;
  color: #4a8a00; cursor: pointer;
}
.cal-foot button:hover{ text-decoration: underline; }

/* -------- Booking details form: light card, clear labels, Canadian address -------- */
.book-block [hidden]{ display: none !important; }
.book-block-note strong{ color: var(--ink); }
.req{ color: #c0392b; font-weight: 700; }
.book-block h3 .req{ font-size: .62em; vertical-align: super; margin-left: 3px; }

.rent-modal .quote-form{ background: none; border: 0; padding: 0; box-shadow: none; }
.rent-modal .quote-form form{ display: flex; flex-direction: column; gap: 16px; }
.form-card{
  background: var(--white); border: 1px solid rgba(7,19,29,0.14); border-radius: 12px;
  padding: clamp(18px, 2.6vw, 26px); box-shadow: 0 1px 2px rgba(7,19,29,0.04);
}
.form-card .form-grid{ gap: 0 16px; }
.card-title{
  display: block; margin: 0 0 14px; font-family: var(--f-body); font-size: 16px; font-weight: 700;
  color: #4a7a0a; letter-spacing: 0; text-transform: none;
}
.form-card .form-field:last-child{ margin-bottom: 0; }
.field-hint{ font-size: 13px; line-height: 1.5; color: #4a5258; margin: 0; }
.field-hint a{ color: #4a7a0a; font-weight: 700; text-decoration: none; }
.field-hint a:hover{ text-decoration: underline; }
.billing-q{ margin-top: 22px; }
.billing-q .card-title{ margin-bottom: 10px; }

/* YES / NO segmented toggle */
.pick-list.seg{ display: inline-flex; flex-direction: row; gap: 0; width: min(220px, 100%);
  border: 1px solid rgba(7,19,29,0.2); border-radius: 8px; overflow: hidden; background: var(--white); }
.pick-list.seg .pick-row{ flex: 1; justify-content: center; border: 0; border-radius: 0; padding: 12px 10px; background: var(--white); }
.pick-list.seg .pick-row + .pick-row{ border-left: 1px solid rgba(7,19,29,0.2); }
.pick-list.seg .pick-row.selected{ background: var(--lime); }
.pick-list.seg .pr-main{ flex: none; text-align: center; }
.pick-list.seg .pr-name{ font-size: 14px; letter-spacing: .04em; }
.rent-modal .quote-form .form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rent-modal .quote-form .form-grid > .full{ grid-column: 1 / -1; }
.rent-modal .quote-form .form-field input:not([type="hidden"]),
.rent-modal .quote-form .form-field select{ height: 47px; line-height: 1.3; }
.rent-modal .quote-form .form-field label,
.rent-modal .quote-form .form-label{
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #1d2429;
}
.rent-modal .quote-form .req{ color: #4a7a0a; }
.rent-modal .quote-form .form-field input,
.rent-modal .quote-form .form-field select,
.rent-modal .quote-form .form-field textarea{
  background: var(--white); color: var(--ink); border: 1px solid rgba(7,19,29,0.45);
  border-radius: 6px; font-size: 15px; padding: 12px 14px;
}
.rent-modal .quote-form .form-field input::placeholder,
.rent-modal .quote-form .form-field textarea::placeholder{ color: #7b838a; opacity: 1; }
.rent-modal .quote-form .form-field input:focus,
.rent-modal .quote-form .form-field select:focus,
.rent-modal .quote-form .form-field textarea:focus{ border-color: #6fa510; box-shadow: 0 0 0 3px var(--lime-dim); }
.rent-modal .quote-form .form-field input.is-locked{ background: #eef0f1; color: #4a5258; cursor: not-allowed; }

.form-subhead{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 6px; padding-top: 18px; border-top: 1px solid rgba(7,19,29,0.1);
}
.form-subhead h4{ font-family: var(--f-serif); font-size: 19px; color: var(--ink); margin: 0; }
.form-subhead-tag{
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #35610a; background: var(--lime-dim); padding: 5px 10px; border-radius: 999px;
}
.form-note{ font-size: 12.5px; line-height: 1.55; color: #4a5258; margin: -4px 0 8px; }
.form-note a{ color: #35610a; font-weight: 600; text-decoration: underline; }
.billing-fields .form-grid{ margin: 0; }
.other-location{ margin-top: 14px; }
.rent-modal .booking-msg.error{ color: #a32117; background: #fdecea; border-color: rgba(163,33,23,0.35); }
.rent-modal .booking-msg.success{ color: #2c5406; background: #eef8dc; border-color: rgba(53,97,10,0.4); }

/* -------- Order summary (light) -------- */
.book-summary{
  background: var(--white); border: 1px solid rgba(7,19,29,0.1); border-radius: 12px;
  padding: 24px; align-self: start; position: sticky; top: 100px;
  box-shadow: 0 14px 34px rgba(7,19,29,0.06);
}
.book-summary h4{ font-family: var(--f-body); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 12px; color: var(--ink-soft); margin-bottom: 18px; }
.book-summary .summary-row{ display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 11px 0; border-bottom: 1px solid rgba(7,19,29,0.08); color: var(--ink-soft); }
.book-summary .summary-row strong{ color: var(--ink); font-weight: 600; text-align: right; }
.book-summary .summary-total{ display: flex; justify-content: space-between; align-items: baseline; padding-top: 18px; margin-top: 6px; }
.book-summary .summary-total .amt{ font-family: var(--f-serif); font-size: 32px; color: var(--ink); }
.book-summary .summary-note{ font-size: 11.5px; color: var(--ink-soft); margin-top: 16px; line-height: 1.6; }

@media (max-width: 980px){
  .rentals-grid{ grid-template-columns: 1fr; }
  .rentals-grid.cols-2{ grid-template-columns: 1fr; max-width: 100%; }
}
@media (max-width: 860px){
  .book-panel{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .book-summary{ position: static; }
  .pick-list.two-col{ grid-template-columns: 1fr; }
}

body.nav-open{ overflow: hidden; }

/* -------- Rent Now modal -------- */
body.modal-open{ overflow: hidden; }

.rent-modal-overlay{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(7,19,29,0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 40px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease;
}
.rent-modal-overlay.open{ opacity: 1; visibility: visible; pointer-events: auto; }

.rent-modal{
  background: var(--paper); width: min(1080px, 100%); max-height: min(88vh, 900px);
  border-radius: 16px; position: relative; overflow: hidden;
  box-shadow: 0 30px 80px rgba(7,19,29,0.35);
  transform: translateY(18px) scale(0.98); opacity: 0;
  transition: transform .24s ease, opacity .24s ease;
}
.rent-modal-overlay.open .rent-modal{ transform: translateY(0) scale(1); opacity: 1; }

.rent-modal-scroll{ max-height: min(88vh, 900px); overflow-y: auto; padding: clamp(24px, 4vw, 44px); }

.rent-modal-close{
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--white); border: 1px solid rgba(7,19,29,0.12); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 16px rgba(7,19,29,0.12);
  transition: all .15s ease;
}
.rent-modal-close:hover{ background: var(--lime); border-color: var(--lime); color: var(--void); }

.rent-modal-head{ margin-bottom: 28px; padding-right: 40px; }
.rent-modal-head h3{ font-family: var(--f-serif); font-size: clamp(24px, 3vw, 32px); color: var(--ink); margin-top: 4px; }

/* The modal has a light (--paper) background, so form labels need a dark,
   legible color instead of the site-wide --w-40 (white, 42% opacity) used
   for labels on dark sections. */
.rent-modal .form-field label{ color: rgba(7,19,29,0.5); }
.rent-modal .form-field input, .rent-modal .form-field select, .rent-modal .form-field textarea{
  background: var(--white); border: 1px solid rgba(7,19,29,0.15); color: var(--ink);
}
.rent-modal .form-field input:focus, .rent-modal .form-field select:focus, .rent-modal .form-field textarea:focus{ border-color: var(--lime-dim); }

@media (max-width: 860px){
  .rent-modal-overlay{ padding: 0; }
  .rent-modal{ width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .rent-modal-scroll{ max-height: 100%; height: 100%; }
}

/* =============== JUNK REMOVAL (functional, on dark full-bg) =============== */
.junk-section{ position: relative; overflow: hidden; }
.junk-section .bg{ position: absolute; inset: 0; }
.junk-section .bg img{ width: 100%; height: 100%; object-fit: cover; }
.junk-section .bg::after{ content: ""; position: absolute; inset: 0; background: rgba(7,19,29,0.86); }
.junk-section .sec-inner{ position: relative; z-index: 2; }

/* -------- Service detail page hero (individual service pages) -------- */
.svc-hero-section{ position: relative; overflow: hidden; padding-bottom: 60px; }
.svc-hero-section .bg{ position: absolute; inset: 0; }
.svc-hero-section .bg img{ width: 100%; height: 100%; object-fit: cover; }
.svc-hero-section .bg::after{ content: ""; position: absolute; inset: 0; background: rgba(7,19,29,0.82); }
.svc-hero-section .sec-inner{ position: relative; z-index: 2; }
.svc-hero-section .sec-head h2{ max-width: 20ch; }

/* The plain hero (no truck/photo variant — used by About and Junk Removal) sits
   right under the fixed header instead of being bottom-aligned like the others,
   so it needs its own top clearance instead of relying on .sec's default padding
   (which, at small widths, is shorter than the fixed header and lets the heading
   start behind the nav bar). */
.svc-hero-section:not(.svc-hero-section--truck):not(.svc-hero-section--photo){
  padding-top: calc(76px + clamp(56px, 9vw, 88px));
}
@media (max-width: 400px){
  .svc-hero-section:not(.svc-hero-section--truck):not(.svc-hero-section--photo){
    padding-top: calc(64px + 48px);
  }
}

/* Truck & photo heroes (Snow Removal, Bin Rentals) bottom-align their heading
   inside a min-height box, so on most screens the min-height alone keeps it
   clear of the fixed header. But that only holds while the heading is short
   enough to leave slack in the box — the same fixed header still needs a
   hard top clearance as a floor, same as the plain hero above, so the
   heading can never end up flush against (or under) the nav bar. */
.svc-hero-section--truck,
.svc-hero-section--photo{
  padding-top: calc(76px + clamp(40px, 7vw, 64px));
}
@media (max-width: 400px){
  .svc-hero-section--truck,
  .svc-hero-section--photo{
    padding-top: calc(64px + 48px);
  }
}

/* Photo hero (Bin Rentals): the picture is the point, so instead of the flat dark wash
   the overlay is heavy behind the heading (left) and clears over the truck + bin (right). */
.svc-hero-section--photo{ min-height: clamp(470px, 38vw, 620px); display: flex; align-items: flex-end; }
.svc-hero-section--photo .sec-inner{ width: 100%; }
.svc-hero-section--photo .bg img{ object-position: 62% 55%; }
.svc-hero-section--photo .bg::after{
  background:
    linear-gradient(90deg, rgba(7,19,29,0.9) 0%, rgba(7,19,29,0.74) 32%, rgba(7,19,29,0.3) 60%, rgba(7,19,29,0.08) 100%),
    linear-gradient(180deg, rgba(7,19,29,0.6) 0%, rgba(7,19,29,0) 28%, rgba(7,19,29,0) 68%, rgba(7,19,29,0.55) 100%);
}
/* Tagline line used inside page heroes (About) */
.svc-hero-section .hero-tagline{
  margin-top: clamp(16px, 1.8vw, 26px);
  font-family: var(--f-serif); font-weight: 700; color: var(--white);
  font-size: clamp(22px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -0.005em;
}
.svc-hero-section .hero-tagline em{ font-style: italic; color: var(--lime); }

/* Truck hero (Snow Removal): the branded truck is the point. The photo sits on the right at
   its natural proportions and its left edge dissolves into the dark, so the heading (left)
   and the Primo logo on the truck door (centre) never fight for the same space. */
.svc-hero-section--truck{ min-height: clamp(470px, 38vw, 620px); display: flex; align-items: flex-end; background: var(--midnight); }
.svc-hero-section--truck .sec-inner{ width: 100%; }
/* two fixed lines so the heading stays left of the logo on the truck door */
.svc-hero-section--truck .sec-head h2 em{ display: block; }
.svc-hero-section--truck .bg img{
  position: absolute; right: 0; bottom: 0; width: auto; height: 86%; max-width: none; object-fit: initial;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 12%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%), linear-gradient(180deg, transparent 0%, #000 12%);
  mask-composite: intersect;
}
.svc-hero-section--truck .bg::after{
  background:
    linear-gradient(90deg, rgba(7,19,29,0.55) 0%, rgba(7,19,29,0.32) 34%, rgba(7,19,29,0) 56%),
    linear-gradient(0deg, rgba(7,19,29,0.5) 0%, rgba(7,19,29,0) 26%);
}
/* mid-width screens: photo a touch smaller so the truck logo stays clear of the heading */
@media (min-width: 761px) and (max-width: 1240px){
  .svc-hero-section--truck .bg img{ height: 70%; }
}
@media (max-width: 760px){
  .svc-hero-section--truck{ min-height: 500px; }
  .svc-hero-section--truck .sec-head h2 em{ display: inline; }
  .svc-hero-section--truck .bg img{
    top: 0; left: 0; right: 0; width: 100%; height: 62%; object-fit: cover; object-position: 26% 50%;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  .svc-hero-section--truck .bg::after{ background: linear-gradient(180deg, rgba(7,19,29,0.35) 0%, rgba(7,19,29,0) 30%); }
}

@media (max-width: 760px){
  /* This photo is an ultra-wide panorama (sun + truck + bin + house), so on a phone it can't
     fill a tall box without either cropping most of the scene away or leaving dark bars above
     and below it. Instead the photo becomes a full-width banner at its own proportions,
     sitting flush under the header (nothing cropped, no dark padding around it), and the
     heading follows directly beneath it on the brand's dark background. */
  .svc-hero-section--photo{
    display: block; min-height: 0; background: var(--midnight);
    padding-top: 77px;          /* = fixed header height (76px + 1px border) */
    padding-bottom: 0;
    padding-left: 0; padding-right: 0;   /* let the photo run edge to edge (the text keeps its own container padding) */
  }
  .svc-hero-section--photo .bg{ position: relative; inset: auto; width: 100%; aspect-ratio: 1625 / 656; }
  .svc-hero-section--photo .bg img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .svc-hero-section--photo .bg::after{ background: linear-gradient(180deg, rgba(7,19,29,0) 62%, var(--midnight) 100%); }
  .svc-hero-section--photo .sec-inner{ padding: 6px calc(var(--gutter) * 2) 0; }   /* same inset as the copy below (section gutter + container gutter) */
  .svc-hero-section--photo .sec-head{ margin-bottom: 0; }
  .svc-hero-section--photo .divider{ margin-top: 22px; margin-bottom: 30px !important; }
  .svc-hero-section--about .bg{ aspect-ratio: 1116 / 450; }   /* About photo proportions */
  .svc-hero-section--about .bg img{ object-position: 50% 38%; }   /* keep the crew's heads and jacket logos in frame */
}
@media (max-width: 400px){
  .svc-hero-section--photo{ padding-top: 65px; }   /* header is 64px + 1px border on small phones */
}

/* About hero: same photo-hero behaviour as Bin Rentals (banner + heading under it on phones),
   but on wider screens the photo stays clear and the darkening pools at the BOTTOM, behind the
   tagline, instead of washing the whole picture. */
@media (min-width: 761px){
  .svc-hero-section--about{ padding-bottom: 24px; min-height: clamp(470px, 46vw, 700px); }   /* tall enough to show the photo almost uncropped */
  .svc-hero-section--about .bg img{ object-position: 50% 38%; }   /* keep the crew's heads and jacket logos in frame */
  .svc-hero-section--about .sec-head h2{ max-width: none; }   /* one line at the bottom, clear of the logo on the truck door */
  .svc-hero-section--about .bg::after{
    background: linear-gradient(180deg, rgba(7,19,29,0.55) 0%, rgba(7,19,29,0) 24%, rgba(7,19,29,0) 40%, rgba(7,19,29,0.88) 100%);
  }
}

/* Junk Removal hero: same photo-hero behaviour as About / Bin Rentals. The photo is a
   portrait-shaped picture (excavator + truck over a debris pile), so it's framed on the
   excavator and truck, the darkening pools at the bottom behind the tagline, and on phones
   it becomes a full-width banner with the heading beneath it. */
@media (min-width: 761px){
  .svc-hero-section--junk{ padding-bottom: 24px; min-height: clamp(470px, 42vw, 640px); }
  .svc-hero-section--junk .bg img{ object-position: 50% 24%; }
  .svc-hero-section--junk .sec-head h2{ max-width: none; }
  .svc-hero-section--junk .bg::after{
    background: linear-gradient(180deg, rgba(7,19,29,0.55) 0%, rgba(7,19,29,0) 24%, rgba(7,19,29,0) 38%, rgba(7,19,29,0.9) 100%);
  }
}
@media (max-width: 760px){
  .svc-hero-section--junk .bg{ aspect-ratio: 3 / 2; }
  .svc-hero-section--junk .bg img{ object-position: 50% 26%; }
}

.junk-layout{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-bottom: 40px; }
.junk-steps{ display: flex; flex-direction: column; }
.junk-step{ display: grid; grid-template-columns: 52px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line-soft); }
.junk-step:first-child{ padding-top: 0; }
.junk-step .num-out{
  font-family: var(--f-serif); font-size: 32px; color: transparent;
  -webkit-text-stroke: 1.3px var(--lime);
}
.junk-step h4{ font-family: var(--f-body); font-weight: 700; font-size: 15.5px; text-transform: none; margin-bottom: 6px; color: var(--white); }
.junk-step p{ font-size: 13.5px; }

.junk-gallery{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.junk-gallery img{ width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1/1; filter: grayscale(0.3); }
.junk-gallery a:first-child{ grid-column: 1/-1; aspect-ratio: 16/9; }
.junk-gallery a:first-child img{ aspect-ratio: 16/9; }

.junk-scope{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.scope-chip{ border: 1px solid var(--line-soft); padding: 10px 16px; font-size: 12.5px; color: var(--w-50); }
.scope-chip strong{ color: var(--lime); }
@media (max-width: 640px){
  .junk-scope{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .scope-chip{ text-align: center; box-sizing: border-box; width: 100%; }
}

.quote-form{ background: var(--graphite-panel); border: 1px solid var(--line); padding: clamp(24px, 4vw, 38px); }
.quote-form h3{ margin-bottom: 6px; color: var(--white); }
.quote-form > p{ margin-bottom: 24px; }

@media (max-width: 860px){ .junk-layout{ grid-template-columns: 1fr; } }

/* =============== WHY US (full-bg pillar grid) =============== */
.why-section{ position: relative; overflow: hidden; }
/* shrink this section's overall height (top edge to bottom edge) */
.why-section{ padding: clamp(20px, 4vw, 36px) var(--gutter); }
.why-section .sec-head-row{ margin-bottom: 10px; }
.why-section .pillar{ padding: 14px 0; }
.why-section .bg{ position: absolute; inset: 0; }
.why-section .bg img{ width: 100%; height: 100%; object-fit: cover; }
.why-section .bg::after{ content: ""; position: absolute; inset: 0; background: rgba(7,19,29,0.76); }
.why-glow{
  position: absolute; top: 20%; right: -8%; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(140,203,24,0.07) 0%, transparent 70%);
  pointer-events: none; z-index: 1;
}
.why-section .sec-inner{ position: relative; z-index: 2; }
.pillars{ display: grid; grid-template-columns: repeat(4, 1fr); }
.pillar{ padding: 40px 0; }
.pillar + .pillar{ border-left: 1px solid var(--line-soft); padding-left: 32px; }
.pillar svg{ color: var(--lime); margin-bottom: 22px; }
.pillar .num{ display: block; font-size: 11px; font-weight: 700; letter-spacing: .2em; color: var(--lime); margin-bottom: 12px; }
.pillar h3{ font-size: 21px; color: var(--white); margin-bottom: 10px; }
.pillar p{ font-size: 13.5px; }
@media (max-width: 980px){
  .pillars{ grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(2n+1){ border-left: none; padding-left: 0; }
  .pillar:nth-child(n+3){ border-top: 1px solid var(--line-soft); }
}
@media (max-width: 620px){
  .pillars{ grid-template-columns: 1fr; }
  .pillar{ border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line-soft); }
  .pillar:first-child{ border-top: none; }
}

/* =============== OUR WORK GALLERY =============== */
.work-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-col{ display: flex; flex-direction: column; gap: 16px; }
.work-tile{ position: relative; overflow: hidden; aspect-ratio: 4/3; border: 1px solid rgba(7,19,29,0.1); }
.work-tile img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.work-tile:hover img{ transform: scale(1.06); }
.work-cta{ display: flex; justify-content: center; margin-top: 4px; }
.work-cta a{
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px;
  background: var(--lime); color: var(--void); font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; transition: background .2s ease;
}
.work-cta a:hover{ background: var(--lime-bright); }
@media (max-width: 860px){ .work-grid{ grid-template-columns: 1fr; } }

/* =============== STORY / CREW SPLIT (light, on-paper) =============== */
.story-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.story-copy h2{ color: var(--ink); margin-bottom: 28px; }
.story-quote{ border-left: 2px solid var(--lime); padding-left: 22px; margin-bottom: 34px; }
.story-quote blockquote{
  font-family: var(--f-serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--ink); margin: 0;
}
.story-copy p.body{ font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 18px; }

.crew-list{ display: flex; flex-direction: column; gap: 16px; }
.crew-card{ background: var(--white); border: 1px solid rgba(7,19,29,0.1); display: flex; overflow: hidden; }
.crew-photo{ width: 128px; flex-shrink: 0; position: relative; background: var(--light-grey); aspect-ratio: 3/4;}
.crew-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.crew-placeholder{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(7,19,29,0.4); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 8px;
}
.crew-body{ padding: 22px 24px; flex: 1; min-width: 0; }
.crew-body h3{ font-size: 20px; color: var(--ink); margin-bottom: 4px; }
.crew-role{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.crew-role span{ font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(7,19,29,0.45); }
.crew-role .sep{ color: rgba(7,19,29,0.2); }
.crew-body p{ font-size: 13px; color: var(--ink-soft); }

@media (max-width: 900px){ .story-grid{ grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 480px){ .crew-card{ flex-direction: column; } .crew-photo{ width: 100%; aspect-ratio: 16/9; } }

/* =============== REVIEW BAR =============== */
.review-bar{ background: var(--obsidian); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 50px 0; }
.review-grid{ display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.review-card{ background: rgba(32,36,40,0.85); border: 1px solid var(--line-soft); padding: 26px; }
.review-stars{ display: flex; gap: 3px; margin-bottom: 10px; }
.review-stars svg{ color: #f6c453; fill: #f6c453; }
.review-name{ font-weight: 700; font-size: 14px; color: var(--white); margin-left: 8px; }
.review-quote{ font-size: 14px; line-height: 1.6; color: var(--w-50); font-style: italic; }
.review-nav{ display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.review-dots{ display: flex; gap: 6px; }
.review-dots button{ width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; padding: 0; transition: all .2s ease; }
.review-dots button.active{ background: var(--lime); width: 16px; border-radius: 4px; }
.review-arrows{ display: flex; gap: 8px; }
.review-arrows button{ width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--lime-dim); color: var(--lime); background: transparent; display: flex; align-items: center; justify-content: center; }
.review-arrows button:hover{ background: var(--lime-dim); }

.review-side{ display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.review-overall{ display: flex; align-items: center; gap: 10px; }
.review-overall svg{ width: 15px; height: 15px; color: #f6c453; fill: #f6c453; }
.review-overall span{ font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--w-40); }

@media (max-width: 780px){
  .review-grid{ grid-template-columns: 1fr; }
  .review-side{ align-items: flex-start; }
}

/* =============== CONTACT SPLIT =============== */
.contact-grid{ display: grid; grid-template-columns: 2fr 3fr; gap: 0; }
.contact-visual{ display: flex; flex-direction: column; }
.contact-visual .photo{ position: relative; height: 320px; }
.contact-visual .photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-visual .photo::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(32,36,40,0.9) 0%, rgba(32,36,40,0.2) 55%, transparent 100%); }
.contact-visual .photo .caption{ position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 26px; }
.contact-visual .photo .caption p{ color: var(--w-70); font-size: 13.5px; }
.contact-info-panel{ background: var(--ink); padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.contact-info-row{ display: flex; align-items: center; gap: 14px; }
.contact-info-row .ico{ width: 40px; height: 40px; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info-row .ico svg{ color: var(--w-70); }
.contact-info-row .label{ font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--w-40); }
.contact-info-row .val{ font-size: 13.5px; font-weight: 600; color: var(--white); }
.contact-info-row a:hover .val{ color: var(--lime); }

.contact-social{
  display: flex; align-items: center; gap: 12px;
  padding-top: 18px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.1);
}
.contact-social .label{ font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--w-40); margin-right: 4px; }
.social-ico{
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center;
  color: var(--w-70); flex-shrink: 0; transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-ico:hover{ background: var(--lime); color: var(--void); transform: translateY(-2px); }

.contact-form-panel{
  background: rgba(7,19,29,0.03); border: 1px solid rgba(7,19,29,0.1);
  padding: clamp(26px, 4vw, 46px);
}
.contact-form-panel h3{ color: var(--ink); margin-bottom: 4px; }
.contact-form-panel .hint{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(7,19,29,0.35); margin-bottom: 30px; display: block; }
.contact-form-panel .form-field label{ color: rgba(7,19,29,0.5); }
.contact-form-panel .form-field input, .contact-form-panel .form-field select, .contact-form-panel .form-field textarea{
  background: var(--white); border-color: rgba(7,19,29,0.14); color: var(--ink);
}
.contact-form-panel .form-field input:focus, .contact-form-panel .form-field select:focus, .contact-form-panel .form-field textarea:focus{ border-color: var(--lime-dim); }

@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* =============== FINAL CTA =============== */
.final-cta{ position: relative; overflow: hidden; text-align: center; min-height: clamp(420px, 48vw, 560px); display: flex; align-items: center; }
.final-cta .bg{ position: absolute; inset: 0; }
.final-cta .bg img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px){
  .final-cta{ min-height: clamp(480px, 92vw, 620px); }
}
.final-cta .bg img.lawn-cta-bg{ object-position: 50% 14%; }
@media (max-width: 760px){
  .final-cta .bg img.lawn-cta-bg{ object-position: 20% 8%; }
}
.final-cta .bg::after{ content: ""; position: absolute; inset: 0; background: rgba(7,19,29,0.62); }
.final-glow{ position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 40%, rgba(140,203,24,0.05) 0%, transparent 60%); pointer-events: none; }
.final-cta .sec-inner{ position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.final-cta img.mark{ height: 109px; margin: 0 auto 30px; }
.final-cta h2{ color: var(--white); margin-bottom: 22px; }
.final-cta p.lede{ max-width: 46ch; margin: 0 auto 38px; color: rgba(255,255,255,0.6); font-weight: 300; }
.final-cta-actions{ display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 480px){
  .final-cta-actions{ flex-direction: column; align-items: stretch; }
  .final-cta-actions .btn{ width: 100%; justify-content: center; }
}

/* =============== FOOTER =============== */
.site-footer{ background: var(--midnight); border-top: 1px solid var(--line-soft); padding: 64px var(--gutter) 0; }
.footer-grid{ max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 46px; }
@media (max-width: 780px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 480px){
  .footer-grid{ grid-template-columns: 1fr; gap: 32px; }
}
.footer-brand img{ height: 52px; margin-bottom: 16px; }
.footer-slogan{
  font-style: italic; font-size: 12px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--w-70); margin-bottom: 14px !important;
}
.footer-slogan em{ font-style: italic; color: var(--lime); }
.footer-brand p{ font-size: 13.5px; max-width: 40ch; margin-bottom: 22px; line-height: 1.6; }
.footer-contact{ display: flex; flex-direction: column; gap: 10px; }
.footer-contact a, .footer-contact span{ display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--w-40); transition: color .2s ease; }
.footer-contact a:hover{ color: var(--white); }
.footer-col h4{ font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 18px; }
.footer-col ul{ display: flex; flex-direction: column; gap: 11px; }
.footer-col a{ display: inline-block; font-size: 13.5px; color: var(--w-40); transition: color .2s ease; }
.footer-col li > svg, .footer-col li > .nav-subdropdown-toggle{ display: none; }
.footer-col a:hover{ color: var(--white); }

.footer-bottom{
  max-width: var(--container); margin: 0 auto; padding: 26px 0;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--line-soft);
}
.footer-bottom p{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.2); }
.footer-credit-row{
  max-width: var(--container); margin: 0 auto; padding: 20px 0 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}
.footer-credit-row a{ font-size: 10.5px; color: rgba(255,255,255,0.16); transition: color .2s ease; }
.footer-credit-row a:hover{ color: var(--lime-soft); }

/* =============== REVEAL ON SCROLL =============== */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* =============== CURSOR WATER RIPPLE ===============
   Full-viewport, click-through canvas that draws expanding rings
   trailing the cursor/finger. Kept from the previous build — the
   one motion signature that sits above this new structure rather
   than inside it. */


/* =============== FLOATING CONTACT BUTTONS =============== */
.float-contact{
  position: fixed; left: 22px; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  box-shadow: 0 10px 26px rgba(7,19,29,0.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.float-contact:hover{ transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(7,19,29,0.45); }
.float-contact svg{ width: 28px; height: 28px; display: block; }
.float-contact--call{ bottom: 86px; background: var(--lime); color: #0b140f; }
.float-contact--sms{ bottom: 22px; background: var(--lime); color: #0b140f; }
.float-contact .float-contact-tooltip{
  position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--midnight, #0b1420); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 7px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.float-contact .float-contact-tooltip{ left: 68px; }
.float-contact:hover .float-contact-tooltip{ opacity: 1; }
@media (max-width: 560px){
  .float-contact{ width: 50px; height: 50px; bottom: 16px; }
  .float-contact svg{ width: 25px; height: 25px; }
  .float-contact{ left: 16px; }
  .float-contact--call{ bottom: 76px; }
  .float-contact--sms{ bottom: 16px; }
  .float-contact .float-contact-tooltip{ display: none; }
}