/* ═══════════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════════ */
:root {
  --bg: #0A0A0A;
  --charcoal: #222222;
  /* Accent. The portfolio demo this was built from uses #F5C800 yellow; this is
     deliberately different so the showcase and a real client site are not twins,
     and orange-red reads "act now" on an emergency page. Var name kept so the 24
     existing references still resolve. */
  --yellow: #E4572E;
  --text: #DDDDDD;
  --muted: #AAAAAA;
  --alert: #C94B2A;
  --light: #F5F5F5;
  --nav-h: 72px;
  --nav-h-small: 52px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* The demo hid the system cursor everywhere and drew its own trail. Removed:
   on a page someone reaches mid-emergency, a missing cursor reads as broken. */
a, button, [role="button"] { cursor: pointer; }

html { scroll-behavior: auto; } /* Lenis handles smooth scroll */

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ═══════════════════════════════════════════
   LOADER
═══════════════════════════════════════════ */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-inner { text-align: center; width: 260px; }

.loader-logo {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--yellow);
  margin-bottom: 28px;
}

.loader-bar-wrap {
  height: 3px;
  background: var(--charcoal);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 14px;
}
.loader-bar {
  height: 100%;
  width: 0%;
  background: var(--yellow);
  border-radius: 2px;
  transition: width 0.2s ease;
}

.loader-label {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 32px;
  z-index: 1000;
  border-bottom: 1px solid rgba(245,200,0,0.15);
  transition: height 0.3s ease, background 0.25s ease, border-color 0.25s ease;
}
#nav.scrolled { height: var(--nav-h-small); }

/* While the circle-wipe is opening, the bar goes transparent. A 95%-opaque bar with a
   hairline border otherwise slices a flat top off the circle: the wipe is centred on the
   viewport and expands underneath the nav, so the arc is cut off rather than completing.
   Gated on the wipe rather than on .scrolled, which fires at 60px — long before the wipe
   finishes — and would put the solid bar back mid-animation. */
#nav.wipe-open {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.nav-logo {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--yellow);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  gap: 28px;
  margin-left: auto;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--yellow); }

.nav-cta {
  display: inline-block;
  background: var(--yellow);
  color: #000;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.nav-cta:hover { background: #FFD700; transform: translateY(-1px); }

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--yellow);
  font-size: 1.5rem;
  cursor: pointer;
  margin-left: auto;
}

/* Mobile nav drawer */
.nav-drawer {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--charcoal);
  border-bottom: 2px solid var(--yellow);
  z-index: 999;
  padding: 24px 32px;
  flex-direction: column;
  gap: 20px;
}
.nav-drawer.open { display: flex; }
.drawer-link {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.drawer-cta {
  display: inline-block;
  background: var(--yellow);
  color: #000;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 3px;
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 8vw;
  padding-top: calc(var(--nav-h) + 24px); /* nav height plus clearance from its hairline */
  z-index: 2;
}

/* Cross-axis auto margins centre the block like align-items:center but can never go
   negative — so on a short desktop window the content pushes DOWN instead of overflowing
   upward under the fixed nav, which was clipping the top of the eyebrow. */
.hero-inner { max-width: 800px; margin: auto 0; }

.hero-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 20px;
}

.hero-heading {
  font-size: clamp(3.5rem, 9vw, 10rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 28px;
}
.hero-heading .word { display: block; }
.hero-heading .accent { color: var(--yellow); }

.hero-sub {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 40px;
  line-height: 2;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
  transform: rotate(45deg);
  animation: arrowBounce 1.4s ease-in-out infinite;
}
@keyframes arrowBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(5px); }
}

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  background: var(--yellow);
  color: #000;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: 3px;
  transition: background 0.2s, transform 0.15s;
  position: relative;
}
.btn-primary:hover { background: #FFD700; transform: translateY(-2px); }
.btn-primary.large { font-size: 1.2rem; padding: 20px 44px; }

/* Emergency pulse ring */
.btn-primary.pulse::before {
  content: '';
  position: absolute;
  inset: -6px;
  border: 2px solid var(--alert);
  border-radius: 5px;
  animation: pulseBorder 2s ease-in-out infinite;
}
@keyframes pulseBorder {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.04); }
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  color: var(--yellow);
  border: 1.5px solid var(--yellow);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 3px;
  transition: background 0.2s, color 0.2s;
}
.btn-secondary:hover { background: var(--yellow); color: #000; }

/* ═══════════════════════════════════════════
   CANVAS
═══════════════════════════════════════════ */
#canvasWrap {
  position: fixed;
  inset: 0;
  z-index: 1;
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
}
#mainCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ═══════════════════════════════════════════
   DARK OVERLAY
═══════════════════════════════════════════ */
#darkOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0);
  z-index: 2;
  pointer-events: none;
  transition: none; /* GSAP controls this */
}

/* ═══════════════════════════════════════════
   MARQUEE
═══════════════════════════════════════════ */
.marquee-wrap {
  position: fixed;
  bottom: 48px;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.marquee-wrap.visible { opacity: 1; }

.marquee-text {
  font-size: 12vw;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--yellow);
  text-transform: uppercase;
  line-height: 1;
  will-change: transform;
}

/* ═══════════════════════════════════════════
   SCROLL CONTAINER
═══════════════════════════════════════════ */
#scrollContainer {
  position: relative;
  height: 800vh;
  z-index: 3;
}

/* ═══════════════════════════════════════════
   SCROLL SECTIONS (common)
═══════════════════════════════════════════ */
.scroll-section {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}
.scroll-section.visible { pointer-events: auto; }

/* Side-aligned text zones */
.align-left {
  padding-left: 5vw;
  padding-right: 55vw;
}
.align-right {
  padding-left: 55vw;
  padding-right: 5vw;
}

.section-inner { max-width: 44vw; }

.section-inner.dark-panel {
  background: rgba(10,10,10,0.82);
  padding: 36px 40px;
  border-left: 3px solid var(--yellow);
  backdrop-filter: blur(6px);
}

.section-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 16px;
}

.section-heading {
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.section-body {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 28px;
  max-width: 38ch;
}

.section-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  border-bottom: 1px solid var(--yellow);
  padding-bottom: 2px;
  transition: color 0.2s;
}
.section-link:hover { color: #FFD700; }

/* ═══════════════════════════════════════════
   STATS SECTION
═══════════════════════════════════════════ */
.section-stats {
  align-items: center;
  justify-content: center;
  padding: 0 5vw;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  width: 100%;
  max-width: 1100px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.stat-number {
  font-size: clamp(3rem, 6vw, 7rem);
  font-weight: 800;
  color: var(--yellow);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat-suffix {
  font-size: clamp(1.5rem, 3vw, 3.5rem);
  font-weight: 700;
  color: var(--yellow);
  line-height: 1;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ═══════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════ */
.section-cta .section-inner { display: flex; flex-direction: column; gap: 24px; }
.cta-heading { color: var(--yellow); }
.cta-sub {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ═══════════════════════════════════════════
   MOBILE (<768px)
═══════════════════════════════════════════ */
/* onEnter sets section.style.opacity = 1 outright. Without a transition that is a hard snap,
   and because each section sits at the MIDPOINT of its scroll range it snaps in mid-screen.
   Transitioning the container lets it cross-fade while the GSAP child stagger runs. */
.scroll-section { transition: opacity .5s ease; }

@media (max-width: 768px) {
  #scrollContainer { height: 700vh; }   /* was 550vh: too compressed, entrances landed on top of each other */

  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-hamburger { display: block; }

  .align-left,
  .align-right {
    padding: 0 6vw;
    justify-content: flex-start;
    align-items: flex-end;
    padding-bottom: 12vh;
  }

  .section-inner { max-width: 100%; }
  .section-body { max-width: 100%; }

  .section-heading { font-size: clamp(1.8rem, 7vw, 3rem); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  .hero-heading { font-size: clamp(3rem, 13vw, 6rem); }

  .marquee-text { font-size: 18vw; }

  .scroll-section {
    /* No background here. This wrapper is a huge absolutely-positioned box, so an 82%
       black on it dimmed the photograph across most of the screen and showed as a grey
       slab wherever the box extended past the card. The card (.dark-panel) is opaque and
       carries its own contrast; the imagery underneath it stays at full brightness. */
    padding-top: var(--nav-h);
  }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  /* stretch, not flex-start: otherwise the two buttons size to their own text and look ragged */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; text-align: center; }
}


/* The horizontally-sliding absolute sections overhang the viewport mid-transition, which
   let the page scroll sideways on a phone. `clip` contains them WITHOUT making body a
   scroll container, which `hidden` would do and which would break the scroll-driven canvas. */
html, body { overflow-x: clip; }


/* ═══════════════════════════════════════════
   STICKY CALL BAR  (mobile)
   The single highest-impact element on this page. The visitor never has to find
   a CTA — the CTA is always under their thumb.
═══════════════════════════════════════════ */
.call-bar { display: none; }

@media (max-width: 860px) {
  .call-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 18px calc(10px + env(safe-area-inset-bottom));
    background: var(--yellow);
    color: #14100E;
    box-shadow: 0 -8px 28px rgba(0,0,0,.55);
  }
  .call-bar__icon { font-size: 22px; line-height: 1; }
  .call-bar__text { display: flex; flex-direction: column; line-height: 1.2; }
  .call-bar__text strong { font-size: 18px; font-weight: 800; letter-spacing: .01em; }
  .call-bar__text em { font-style: normal; font-size: 12px; font-weight: 600; opacity: .8; }
  /* keep the footer clear of the bar */
  .site-footer { padding-bottom: 96px; }
  /* the nav's own number is redundant once the bar is present */
  .nav-cta { display: none; }

  /* The marquee is position:fixed, so the footer's padding-bottom cannot push it
     clear. Lift it above the call bar (64px min-height + the iPhone safe-area
     inset it pads with) or the bar crops the wordmark. */
  .marquee-wrap { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

/* ═══════════════════════════════════════════
   OBJECTIONS  (replaces the old stats grid)
═══════════════════════════════════════════ */
.faq-grid { gap: 22px; }
.faq {
  text-align: left;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 20px 22px;
}
.faq-q {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
}
.faq-a { font-size: .95rem; line-height: 1.6; color: var(--muted); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 60;
  background: #070707;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 56px 24px 48px;
}
.foot-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.foot-brand {
  font-size: 1.15rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
}
.foot-brand span { color: var(--muted); font-weight: 600; margin-left: 8px; }
.foot-phone {
  display: inline-block; margin: 18px 0 14px;
  font-size: 2rem; font-weight: 800; letter-spacing: -.01em;
  color: var(--yellow);
}
.foot-meta { color: var(--muted); font-size: .95rem; }
.foot-fine { color: #666; font-size: .8rem; margin-top: 22px; }

@media (max-width: 600px) {
  .foot-phone { font-size: 1.6rem; }
  .site-footer { padding: 44px 20px 40px; }
}

/* Legal name under the hero CTA — needs clearance from the button's pulse ring. */
.hero-note {
  margin-top: 26px;
  color: var(--muted);
  font-size: .95rem;
  letter-spacing: .01em;
}

/* The objection block carries three cards, not the stats grid's four (the fourth
   asserted an unconfirmed licence and was pulled). Scoped to min-width so it cannot
   override the narrower .stats-grid rules further up. */
@media (min-width: 861px) {
  .faq-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ═══════════════════════════════════════════
   NO GLYPH ICONS
   The ☎ and ☰ characters were removed from the markup — they render as an OS
   emoji on some devices, which looks like a consumer app rather than a trade
   business. The hamburger is now three drawn bars; the call CTAs carry the
   number alone, which is what people scan for anyway.
═══════════════════════════════════════════ */
.nav-hamburger {
  width: 30px;
  height: 22px;
  padding: 0;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 860px) { .nav-hamburger { display: flex; } }
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
}

/* icon span is gone from the call bar; centre the label */
.call-bar__text { text-align: center; }

/* ═══════════════════════════════════════════
   MOBILE: ONE LAYER OF DARKENING, NOT TWO
   #darkOverlay ramps to 0.90 black and .dark-panel adds another 0.82 on top —
   fine on desktop where the cards are half-width and the overlay supplies their
   contrast, but on a phone the cards run nearly edge to edge, so the two stack to
   roughly 98% black across the whole screen and the imagery turns to mud.
   The overlay is dropped to 0.30 in app.js; here the card becomes the single
   deliberate surface. backdrop-filter also goes — it is invisible behind an almost
   opaque panel and it is one of the most expensive things you can ask a phone GPU
   to do while a canvas is repainting every frame.
═══════════════════════════════════════════ */
@media (max-width: 860px) {
  .section-inner.dark-panel {
    /* Fully opaque, not 0.86. At 86% the photo bleeds 14% through the card, so it reads
       as a slightly-lighter translucent slab sitting between the imagery and the text
       rather than as a deliberate card. Solid also means the overlay behind it no longer
       has to carry the card's legibility, so the photo can stay brighter. */
    background: #0B0B0B;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 26px 24px;
    border-left-width: 2px;
    border-radius: 0 10px 10px 0;
  }
  .faq {
    background: rgba(255, 255, 255, .05);
    padding: 16px 18px;
  }
}

/* ═══════════════════════════════════════════
   MOBILE: THE OBJECTION BLOCK IS ONE PANEL, NOT THREE FLOATING CARDS
   Captured at 390px mid-scroll: sections 003 and 004 overlap by design (their
   data-enter/data-leave ranges cross, which cross-fades nicely on desktop where
   cards are half-width). On a phone the cards are edge to edge, so the previous
   section's body text and CTA were legible in the gaps BETWEEN the three cards,
   and the marquee bled through underneath. Three translucent boxes over a live
   canvas over another section is the "busy" — not just the double-darkening.

   So on mobile the three become a single opaque surface with hairline dividers:
   one thing on screen, nothing showing through, and the Q&A text gets full width
   instead of being squeezed two-across at 390px.
═══════════════════════════════════════════ */
@media (max-width: 860px) {
  .stats-grid.faq-grid {
    grid-template-columns: 1fr;
    gap: 0;
    /* Opaque, same as the cards. At 0.94 the photograph bled through the panel and it read
       as a translucent slab rather than a surface. Ryan's standing steer on this build:
       solid surfaces, not stacked alphas. */
    background: #0B0B0B;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 12px;
    padding: 4px 18px;
    max-width: 92vw;
    margin: 0 auto;
  }
  .faq-grid .faq {
    background: none;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    padding: 18px 0;
  }
  .faq-grid .faq:last-child { border-bottom: 0; }
  .faq-q { font-size: 1rem; margin-bottom: 6px; }
  .faq-a { font-size: .92rem; line-height: 1.55; }
}