/* ============================================================
   PRO CLASSIC CONSTRUCTION — site.css   (rebuild v2)

   Built from two references the client chose:
     · HERO   — moncon.com: huge heavy uppercase display type over a
                full-bleed cinematic AERIAL drone plate. Their faces are
                Manuka 850 + Neue Haas Grotesk; the free stand-ins here
                are Anton + Inter. Their animations are NOT copied.
     · BODY   — the Sunny Design build: dark canvas, centred section
                headers (tracked eyebrow → huge display headline → muted
                sub), numbered cards, carousels, full-bleed video CTA.

   Deliberate departures the client asked for:
     · review cards are PLAIN — no top accent rule, no chips, no extra
       furniture, and the carousel is driven from the header, not from a
       progress bar under the cards.
     · the work carousel uses tall 3:4 tiles with in-image captions,
       not an edge-to-edge 16:9 filmstrip.
     · the "make the word pop" device is NOT a block highlight. It is a
       hard offset screen-print duplicate — see `.pop`.
   ============================================================ */

:root{
  /* Surfaces — dark, navy-graphite (keyed off the logo, not brown) */
  --void:    #0E1117;   /* deepest — hero letterbox, footer */
  --coal:    #141922;   /* section base */
  --coal-2:  #10151d;   /* alternate band */
  --panel:   #1B222D;   /* card */
  --panel-2: #232B38;   /* card hover / hairline */
  --line:    #2A3341;

  /* Light inversions */
  --bone:    #F4F6F8;
  --dust:    #98A3B4;   /* muted body on dark */
  --dust-dk: #6E7A8B;

  /* The one accent — straight off the client's logo gear */
  --amber:   #F0921D;
  --amber-dk:#D97A08;
  --ink:     #0E1117;   /* text on amber */

  --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --track: .22em;

  --page-max: min(92vw, 1620px);
  --gutter: clamp(20px, 3.2vw, 56px);
  --nav-h: 92px;
  --sec-y: clamp(80px, 9vw, 150px);
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------- Reset ---------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id]{ scroll-margin-top: calc(var(--nav-h) + 18px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
body{
  margin: 0; background: var(--coal); color: var(--dust);
  font-family: var(--font-sans); font-size: 16.5px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video{ display: block; max-width: 100%; }
h1,h2,h3,h4,p,ul,blockquote,figure{ margin: 0; }
ul{ padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
cite{ font-style: normal; }
::selection{ background: var(--amber); color: var(--ink); }
:focus-visible{ outline: 3px solid var(--amber); outline-offset: 3px; }

.container{ width: var(--page-max); margin-inline: auto; }
.section{ position: relative; padding-block: var(--sec-y); }
.section--alt{ background: var(--coal-2); }

.skip-link{ position: absolute; left: 14px; top: -60px; z-index: 200; background: var(--amber); color: var(--ink);
  padding: 10px 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 13px;
  transition: top .2s var(--ease); }
.skip-link:focus{ top: 14px; }

/* ============================================================
   TYPE
   ============================================================ */
.display{
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  color: var(--bone); line-height: .9; letter-spacing: .005em;
}
.h-sec{ font-size: clamp(2.6rem, 6.4vw, 5.6rem); }
/* The hero headline shares its row with the booking form, so it is sized to
   the column rather than to the full viewport. */
.h-hero{ font-size: clamp(2.7rem, 5.6vw, 5.4rem); line-height: .9; }

/* Small headings.
   Anton is built for poster sizes — at card-title size its condensed, tightly
   spaced caps close up and become genuinely hard to read. Anything below ~1.6rem
   therefore drops to Inter 700 with real tracking and open leading instead. */
.sub-head{
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; line-height: 1.32; color: var(--bone);
}

/* THE specialty device.
   The body reference pops a word with a solid block highlight behind it.
   This does the same job by a different mechanism: a hard, zero-blur
   offset duplicate in amber, like a mis-registered screen print. */
/* nowrap so the accent phrase never splits across lines — the offset duplicate
   makes a mid-word break (e.g. "IN-/HOUSE.") read as a mistake. */
.pop{ color: var(--bone); text-shadow: .048em .058em 0 var(--amber); white-space: nowrap; }
.pop--solid{ color: var(--amber); text-shadow: .048em .058em 0 var(--void); }

.eyebrow{
  display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--amber); margin-bottom: 20px;
}
.sec-head{ text-align: center; max-width: 1100px; margin-inline: auto; margin-bottom: clamp(46px, 5vw, 76px); }
.sec-head .sub{ margin-top: 24px; color: var(--dust); font-size: 1.02rem; max-width: 62ch;
  margin-inline: auto; }
.sec-head--left{ text-align: left; margin-inline: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg: var(--amber); --fg: var(--ink); --bd: var(--amber);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 30px; border: 2px solid var(--bd); background: var(--bg); color: var(--fg);
  font-size: 13.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn .ar{ transition: transform .2s var(--ease); }
.btn:hover{ --bg: var(--amber-dk); --bd: var(--amber-dk); }
.btn:hover .ar{ transform: translateX(4px); }
.btn--ghost{ --bg: transparent; --fg: var(--bone); --bd: rgba(244,246,248,.32); }
.btn--ghost:hover{ --bg: var(--bone); --fg: var(--ink); --bd: var(--bone); }
.btn--solid{ --bg: var(--bone); --fg: var(--ink); --bd: var(--bone); }
.btn--solid:hover{ --bg: #fff; --bd: #fff; }
.btn--sm{ padding: 12px 20px; font-size: 12.5px; }

/* Text link with a rule that fills on hover */
.tlink{ display: inline-flex; align-items: center; gap: 10px; color: var(--bone); font-weight: 600;
  font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; position: relative; padding-bottom: 6px; }
.tlink::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(244,246,248,.25); }
.tlink::before{ content: ""; position: absolute; left: 0; width: 0; bottom: 0; height: 2px;
  background: var(--amber); z-index: 1; transition: width .3s var(--ease); }
.tlink:hover::before{ width: 100%; }

/* ---------------- Reveal ---------------- */
.rv{ opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.rv.in{ opacity: 1; transform: none; }
.rv.d1{ transition-delay: .08s; } .rv.d2{ transition-delay: .16s; } .rv.d3{ transition-delay: .24s; }
html:not(.js) .rv{ opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ============================================================
   NAV — numbered links, a nod to the hero reference
   ============================================================ */
.nav{ position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease); }
.nav--solid{ background: rgba(14,17,23,.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--line); }
.nav-inner{ width: var(--page-max); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.brand{ display: inline-flex; align-items: center; gap: 13px; margin-right: auto; }
.brand-emblem{ width: 50px; height: 50px; flex: none; }
.brand-words{ display: flex; flex-direction: column; line-height: 1; gap: 5px; }
.brand-name{ font-family: var(--font-display); font-size: 23px; letter-spacing: .02em; color: var(--bone);
  text-transform: uppercase; }
.brand-sub{ font-size: 9px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--amber); }
/* The hero carries an oversized lockup, so the nav mark stays out of the way
   until you have scrolled past it — then it takes over. */
.nav .brand{ opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
html.past-hero .nav .brand{ opacity: 1; transform: none; pointer-events: auto; }
.nav-links{ display: flex; align-items: center; gap: 32px; }
.nav-link{ font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone); position: relative; padding: 8px 0; }
.nav-link::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--amber); transition: right .25s var(--ease); }
.nav-link:hover::after{ right: 0; }
.nav-actions{ display: flex; align-items: center; gap: 22px; flex: none; }
.nav-phone{ font-size: 13.5px; font-weight: 700; letter-spacing: .06em; color: var(--bone);
  white-space: nowrap; transition: color .2s var(--ease); }
.nav-phone:hover{ color: var(--amber); }
.nav-cta{ flex: none; }
/* Solid amber — a hairline outline disappears against the hero video */
.menu-btn{ display: none; width: 48px; height: 48px; border: 2px solid var(--amber); position: relative;
  background: var(--amber); margin-left: auto; }
.menu-btn .bar{ position: absolute; left: 12px; right: 12px; height: 2.5px; background: var(--ink);
  transition: transform .28s var(--ease), opacity .2s var(--ease); }
.menu-btn .bar:nth-child(1){ top: 16px; } .menu-btn .bar:nth-child(2){ top: 22px; } .menu-btn .bar:nth-child(3){ top: 28px; }
.nav--open .menu-btn .bar:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav--open .menu-btn .bar:nth-child(2){ opacity: 0; }
.nav--open .menu-btn .bar:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }
/* The menu button is the only nav control on mobile, so the brand must not
   claim the flex slack that keeps it pinned right. */
@media (max-width: 900px){ .nav .brand{ margin-right: 0; } }

/* ---- no-JS fallbacks ----
   The brand handoff, the mobile menu and the sticky bar are all script-driven.
   Without JS the brand would stay at opacity 0 forever and mobile would have no
   navigation and no contact affordance at all, so hand those back statically. */
html:not(.js) .nav .brand{ opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .menu-btn{ display: none; }
html:not(.js) .sticky{ opacity: 1; visibility: visible; transform: none; }
@media (max-width: 900px){
  html:not(.js) .nav-phone{ display: inline-flex; }
  html:not(.js) .sticky{ display: flex; }
}

.mobile-menu{ position: fixed; inset: 0; z-index: 55; background: var(--void); display: flex; flex-direction: column;
  justify-content: center; gap: 4px; padding: 100px var(--gutter) 40px; opacity: 0; visibility: hidden;
  transform: translateY(-10px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; }
.mobile-menu.open{ opacity: 1; visibility: visible; transform: none; }
.mobile-menu a{ font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 10vw, 3rem);
  color: var(--bone); padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; }
.mobile-menu a .n{ font-family: var(--font-sans); font-size: 12px; font-weight: 700; color: var(--amber); }
.mobile-menu .m-foot{ display: flex; flex-direction: column; gap: 8px; margin-top: 26px; }
/* padded to a 44px tap target, not just the text height */
.mobile-menu .m-foot a{ font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: .12em;
  border: 0; padding: 13px 0; display: inline-flex; align-items: center; color: var(--amber); }

/* ============================================================
   HERO — full-bleed aerial plate, oversized display type
   ============================================================ */
.hero{ position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 28px); padding-bottom: clamp(40px, 6vh, 72px);
  background: var(--void); overflow: hidden; }
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video{ position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; }
.hero-media video{ opacity: 0; transition: opacity 1s var(--ease); }
.hero-media video.ready{ opacity: 1; }
.hero-media::after{ content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,17,23,.72) 0%, rgba(14,17,23,.28) 32%, rgba(14,17,23,.62) 72%, rgba(14,17,23,.94) 100%); }
.hero-inner{ position: relative; z-index: 2; width: var(--page-max); margin-inline: auto;
  display: flex; flex-direction: column; gap: clamp(26px, 4vh, 52px); }

/* Oversized hero lockup — roughly 3x the nav mark. Sits in normal flow so it
   simply scrolls away; the nav mark fades in to replace it. */
.hero-brand{ display: inline-flex; align-items: center; gap: 20px; align-self: center;
  filter: drop-shadow(0 4px 22px rgba(0,0,0,.55)); }
.hero-brand .brand-emblem{ width: clamp(108px, 9.5vw, 148px); height: clamp(108px, 9.5vw, 148px); }
.hero-brand .brand-words{ gap: 9px; }
.hero-brand .brand-name{ font-size: clamp(30px, 3.2vw, 48px); color: var(--bone); }
.hero-brand .brand-sub{ font-size: clamp(10px, .85vw, 13px); letter-spacing: .34em; }

.hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 4vw, 72px); align-items: center; }
/* Nudged up off the optical centre so the copy sits higher than the form.
   `top` rather than margin so it cannot reflow the grid row. */
.hero-copy{ position: relative; top: -30px; }
.hero-eyebrow{ color: var(--bone); display: flex; align-items: center; gap: 14px; font-size: 12px;
  font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; margin-bottom: 22px; }
.hero-eyebrow::before{ content: ""; width: 40px; height: 2px; background: var(--amber); flex: none; }
.hero h1{ max-width: 13ch; }
.hero-sub{ color: var(--bone); font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 46ch; opacity: .92;
  margin-top: clamp(20px, 2.4vw, 30px); }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Booking form — lives in the hero, so there is no separate contact section */
.quote-card{ background: rgba(20,25,34,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); padding: clamp(26px, 2.6vw, 38px); }
/* The hero's "free estimate" CTA has nowhere to navigate to — the form is right
   there — so it flashes a ring around the card instead to point at it. */
@keyframes cardPulse{
  0%   { box-shadow: 0 0 0 0 rgba(240,146,29,.85); border-color: var(--amber); }
  70%  { box-shadow: 0 0 0 20px rgba(240,146,29,0); border-color: var(--amber); }
  100% { box-shadow: 0 0 0 0 rgba(240,146,29,0); border-color: var(--line); }
}
.quote-card.pulse{ animation: cardPulse 1.15s var(--ease) 2; }
@media (prefers-reduced-motion: reduce){
  .quote-card.pulse{ animation: none; border-color: var(--amber); }
}
.quote-card h2{ font-size: clamp(1.5rem, 2.1vw, 2rem); text-transform: uppercase; color: var(--bone);
  line-height: .95; margin-bottom: 10px; }
.quote-card .q-sub{ font-size: 14.5px; color: var(--dust); margin-bottom: 24px; }

/* ============================================================
   TRUST STRIP
   ============================================================ */
.trust{ background: var(--void); border-block: 1px solid var(--line); }
.trust-inner{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 40px; padding-block: 26px; }
.trust span{ display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bone); }
.trust span::before{ content: ""; width: 7px; height: 7px; background: var(--amber); flex: none; }

/* ============================================================
   SERVICES — numbered image cards
   ============================================================ */
.svc-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); }
.svc{ position: relative; display: flex; flex-direction: column; background: var(--coal);
  transition: background .35s var(--ease); }
.svc:hover{ background: var(--panel); }
.svc-media{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-media img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04);
  transition: transform .7s var(--ease), filter .5s var(--ease); }
.svc:hover .svc-media img{ transform: scale(1.05); filter: none; }
.svc-n{ position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--amber); color: var(--ink);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .06em; padding: 7px 14px 5px; }
.svc-body{ padding: 30px clamp(20px, 2vw, 32px) 34px; display: flex; flex-direction: column; flex: 1; }
.svc h3{ font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; color: var(--bone);
  font-size: clamp(1rem, 1.25vw, 1.16rem); letter-spacing: .07em; line-height: 1.32; margin-bottom: 14px; }
.svc p{ font-size: 15px; color: var(--dust); margin-bottom: 26px; }
.svc .tlink{ margin-top: auto; align-self: flex-start; }
.svc-more-wrap{ display: none; justify-content: center; margin-top: 28px; }

/* ============================================================
   ABOUT BAND
   ============================================================ */
.about{ display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.about-media{ position: relative; min-height: 520px; }
.about-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-body{ background: var(--coal-2); padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 88px);
  display: flex; flex-direction: column; justify-content: center; }
.about-body .h-sec{ font-size: clamp(2.2rem, 4vw, 3.6rem); margin-bottom: 26px; }
.about-body p{ color: var(--dust); margin-bottom: 18px; max-width: 54ch; }
.about-list{ display: grid; gap: 14px; margin: 26px 0 34px; }
.about-list li{ display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: var(--dust); }
.about-list li::before{ content: ""; width: 18px; height: 2px; background: var(--amber); flex: none; margin-top: 11px; }
.about-list b{ color: var(--bone); font-weight: 700; }
.crew{ display: inline-flex; align-items: center; gap: 16px; border: 1px solid var(--line);
  padding: 16px 22px; align-self: flex-start; }
.crew svg{ width: 30px; height: 30px; color: var(--amber); flex: none; }
.crew > span{ display: flex; flex-direction: column; gap: 5px; }
.crew .c-name{ font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; color: var(--bone);
  font-size: 15px; letter-spacing: .07em; line-height: 1.32; }
.crew .c-sub{ font-size: 12px; color: var(--dust-dk); }

/* ============================================================
   CAROUSELS — shared rail + header-mounted controls
   (the body reference drives its carousels from a progress bar under
    the cards; the client asked for something other than that.)
   ============================================================ */
.car-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: 28px;
  margin-bottom: clamp(34px, 4vw, 52px); }
.car-ctl{ display: flex; align-items: center; gap: 16px; flex: none; }
.car-count{ font-family: var(--font-display); font-size: 15px; letter-spacing: .1em; color: var(--dust); }
.car-count b{ color: var(--amber); font-weight: 400; }
.car-btns{ display: flex; gap: 8px; }
/* Solid amber by default — as thin outlines these read as decoration and get
   missed entirely. Disabled falls back to a muted outline. */
.cbtn{ width: 54px; height: 54px; border: 2px solid var(--amber); background: var(--amber); color: var(--ink);
  display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.cbtn:hover:not([disabled]){ background: var(--bone); border-color: var(--bone); color: var(--ink); }
.cbtn[disabled]{ background: transparent; border-color: var(--line); color: var(--dust-dk); cursor: default; }
.cbtn svg{ width: 20px; height: 20px; stroke-width: 2.6; }
.rail{ display: flex; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none; }
.rail::-webkit-scrollbar{ display: none; }
/* The JS passes behavior:'auto' for reduced motion, but this CSS declaration
   would still win and animate the scroll, so drop it here too. */
@media (prefers-reduced-motion: reduce){ .rail{ scroll-behavior: auto; } }

/* Reviews — PLAIN cards. No top rule, no chips, no furniture. */
.rev-card{ flex: 0 0 clamp(290px, 30vw, 430px); scroll-snap-align: start; background: var(--panel);
  padding: clamp(30px, 3vw, 44px); display: flex; flex-direction: column;
  transition: background .3s var(--ease); }
.rev-card:hover{ background: var(--panel-2); }
.rev-card blockquote{ color: var(--bone); font-size: 16px; line-height: 1.65; flex: 1; }
.rev-who{ margin-top: 30px; display: flex; flex-direction: column; gap: 6px; }
.rev-who .nm{ font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; color: var(--bone);
  font-size: 14.5px; letter-spacing: .07em; line-height: 1.32; }
.rev-who .jb{ font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.rev-note{ text-align: center; margin-top: 34px; font-size: 13px; color: var(--dust-dk); }

/* Work — tall 3:4 tiles, caption inside the image */
.work-tile{ flex: 0 0 clamp(260px, 26vw, 380px); scroll-snap-align: start; position: relative;
  aspect-ratio: 3 / 4; overflow: hidden; padding: 0; border: 0; display: block; cursor: pointer;
  background: var(--panel); }
.work-tile img{ width: 100%; height: 100%; object-fit: cover; filter: saturate(.88);
  transition: transform .8s var(--ease), filter .5s var(--ease); }
.work-tile:hover img{ transform: scale(1.06); filter: none; }
.work-tile::after{ content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(14,17,23,.9) 100%); }
.work-cap{ position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 24px; text-align: left;
  display: flex; flex-direction: column; gap: 8px; }
.work-cap .n{ font-family: var(--font-display); font-size: 12px; letter-spacing: .16em; color: var(--amber); }
.work-cap .t{ font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; color: var(--bone);
  font-size: clamp(.9rem, 1.05vw, 1.02rem); letter-spacing: .07em; line-height: 1.32; }
.work-tile .zoom{ position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px;
  background: var(--amber); color: var(--ink); display: grid; place-items: center; opacity: 0;
  transform: translateY(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.work-tile:hover .zoom, .work-tile:focus-visible .zoom{ opacity: 1; transform: none; }
.work-tile .zoom svg{ width: 17px; height: 17px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-wrap{ max-width: 960px; margin-inline: auto; }
.faq{ border-bottom: 1px solid var(--line); }
.faq summary{ list-style: none; cursor: pointer; position: relative; padding: 26px 56px 26px 0;
  font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; color: var(--bone);
  font-size: clamp(.95rem, 1.25vw, 1.1rem); letter-spacing: .07em; line-height: 1.42;
  transition: color .2s var(--ease); }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--amber); }
.faq summary::after{ content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px;
  margin-top: -7px; border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); }
.faq[open] summary::after{ transform: rotate(-135deg) translateY(-3px); }
.faq-body{ padding: 0 56px 30px 0; color: var(--dust); font-size: 15.5px; max-width: 72ch; }
.faq-body a{ color: var(--amber); }

/* ============================================================
   FORM FIELDS (used by the hero booking card)
   ============================================================ */
.fld{ margin-bottom: 16px; }
.fld label{ display: block; font-size: 11px; font-weight: 700; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--dust); margin-bottom: 9px; }
.fld input, .fld select, .fld textarea{ width: 100%; font: inherit; font-size: 15.5px; color: var(--bone);
  background: var(--coal); border: 1px solid var(--line); padding: 15px 16px; border-radius: 0;
  transition: border-color .2s var(--ease); }
.fld input::placeholder, .fld textarea::placeholder{ color: var(--dust-dk); }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline: none; border-color: var(--amber); }
.fld select{ appearance: none; padding-right: 40px; background-repeat: no-repeat; background-position: right 16px center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F0921D' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); }
.fld.two{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fld.two > div{ margin: 0; }
.fld input.err, .fld select.err{ border-color: #E2564A; }
.quote-card .btn{ width: 100%; margin-top: 6px; }
.f-status{ font-size: 13.5px; color: var(--bone); margin-top: 14px; }
.f-status a{ color: var(--amber); text-decoration: underline; }
.f-note{ font-size: 12px; color: var(--dust-dk); text-align: center; margin-top: 14px; }

/* ============================================================
   CTA BAND — full-bleed video
   ============================================================ */
.cta{ position: relative; min-height: clamp(460px, 62vh, 640px); display: flex; align-items: center;
  overflow: hidden; background: var(--void); text-align: center; }
.cta img.cta-poster, .cta video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cta video{ opacity: 0; transition: opacity 1s var(--ease); }
.cta video.ready{ opacity: 1; }
.cta::after{ content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(14,17,23,.86) 0%, rgba(14,17,23,.7) 50%, rgba(14,17,23,.9) 100%); }
.cta-inner{ position: relative; z-index: 2; width: var(--page-max); margin-inline: auto; }
.cta .h-sec{ margin-bottom: 34px; }
.cta-btns{ display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position: relative; background: linear-gradient(178deg, var(--coal-2) 0%, var(--void) 100%);
  overflow: hidden; border-top: 1px solid var(--line); }
.footer .noise-overlay{ position: absolute; inset: 0; opacity: .035; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"); }
.footer-inner{ position: relative; z-index: 1; width: var(--page-max); margin-inline: auto;
  padding: clamp(58px, 7vw, 92px) 0 40px; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px; }
.footer .f-brand p{ margin-top: 20px; color: var(--dust-dk); font-size: 14.5px; max-width: 34ch; }
.footer h4{ font-size: 11px; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--amber); margin-bottom: 20px; }
.footer li{ margin-bottom: 12px; }
.footer li a, .footer li span{ font-size: 14.5px; color: var(--dust); transition: color .2s var(--ease); }
.footer li a:hover{ color: var(--amber); }
.footer-bottom{ position: relative; z-index: 1; width: var(--page-max); margin-inline: auto;
  border-top: 1px solid var(--line); padding: 22px 0 30px; display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; font-size: 12.5px; color: var(--dust-dk); }

/* ============================================================
   MOBILE STICKY BAR
   ============================================================ */
/* Two floating pills, not a bar welded to the bottom edge. The container is
   click-through so the gap between/around them doesn't swallow taps. */
.sticky{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; gap: 10px;
  justify-content: center; pointer-events: none;
  padding: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transform: translateY(20px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease); }
.sticky.show{ opacity: 1; visibility: visible; transform: none; }
.sticky a{ pointer-events: auto; flex: 0 1 auto; justify-content: center;
  padding: 14px 24px; font-size: 12px; letter-spacing: .1em; border-radius: 999px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.8); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{ position: fixed; inset: 0; z-index: 130; display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 54px); background: rgba(8,10,14,.95); opacity: 0; transition: opacity .3s var(--ease); }
.lb.open{ display: flex; opacity: 1; }
.lb-stage{ position: relative; max-width: 1180px; width: 100%; }
.lb-stage img{ width: 100%; max-height: 80vh; object-fit: contain; background: #000; }
.lb-cap{ margin-top: 16px; text-align: center; font-family: var(--font-display); text-transform: uppercase;
  color: var(--bone); letter-spacing: .1em; font-size: 14px; }
.lb-cap .c{ color: var(--amber); margin-left: 12px; }
.lb-btn{ position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px;
  background: var(--bone); color: var(--ink); display: grid; place-items: center; }
.lb-btn:hover{ background: var(--amber); }
.lb-prev{ left: -10px; } .lb-next{ right: -10px; }
.lb-btn svg{ width: 22px; height: 22px; }
.lb-close{ position: fixed; top: 22px; right: 24px; width: 48px; height: 48px; background: rgba(244,246,248,.14);
  color: var(--bone); display: grid; place-items: center; }
.lb-close:hover{ background: var(--amber); color: var(--ink); }
.lb-close svg{ width: 22px; height: 22px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .svc-grid{ grid-template-columns: repeat(2, 1fr); }
  .about{ grid-template-columns: 1fr; }
  .about-media{ min-height: 380px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 34px; }
  .hero{ align-items: flex-start; min-height: auto; padding-bottom: 64px; }
  .hero h1{ max-width: 18ch; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px){
  .nav-links{ display: none; }
  .nav-phone{ display: none; }
  /* The sticky bottom bar already carries Call now + Get an estimate, so the
     nav CTA would only crowd the hamburger. */
  .nav-cta{ display: none; }
  .menu-btn{ display: block; }
  .sticky{ display: flex; }
  .hero-ctas{ width: 100%; }
  .hero-ctas .btn{ flex: 1; }
  .car-head{ flex-direction: column; align-items: flex-start; gap: 24px; }

  /* ---------- Aerial plate stays full-bleed ----------
     .hero-media is pinned to the whole hero box, which runs ~1.8 screens
     tall on a phone. object-fit:cover therefore scaled the 1280x720 master
     to ~2691px wide and showed a 390px slice of it — 14.5% of the frame,
     hugely magnified, so the truck drifted in and out of a screen of bare
     asphalt with none of the street around it.

     Cropping cannot fix a 16:9 plate for a portrait screen either: the
     source is 720px tall, so even a full-height 9:16 crop caps at 31.6% of
     the width. So the phone gets a portrait RECUT of the same aerial
     (see site.js) — the plate at a readable zoom over a blurred, darkened
     copy of itself — which fills the screen edge to edge with no bars and
     no second section. The copy still sits over it, as a hero should.

     The one requirement: pin the media to the viewport. Left covering the
     full ~1500px hero, cover would crop the 540x1170 recut back down to
     ~46% of ITS width and undo the whole thing. At 100svh the recut is
     aspect-matched to the screen and cover has nothing to trim. Below the
     fold the scrim has already closed on --void, so the hand-off to the
     hero background is not visible. */
  .hero-media{ bottom: auto; height: 100svh; }
  /* Carries more weight than the desktop scrim: the recut puts the sunlit
     concrete and driveways right under the copy, and white body text on
     that was marginal. Holds ~.5 through the copy band, then closes fully
     on --void rather than .94 so the bottom of the media matches the hero
     behind it and the hand-off is invisible. */
  .hero-media::after{
    background: linear-gradient(180deg,
      rgba(14,17,23,.74) 0%,
      rgba(14,17,23,.46) 20%,
      rgba(14,17,23,.62) 44%,
      rgba(14,17,23,.82) 66%,
      rgba(14,17,23,.92) 84%,
      var(--void) 100%);
  }
  /* .hero-copy is nudged up 30px to sit optically above the form it shares a
     row with. There is no form beside it here — the grid is one column — so
     the nudge only drags the eyebrow up toward the CONSTRUCTION sub-line,
     which was clearing it by about 4px. */
  .hero-copy{ top: 0; }

  /* Anton at .9 leading is a display setting tuned for 5.4rem. At the
     2.7rem floor the headline's two lines close to a 39px line box on a
     43px face, so "Built right." and "Finished clean." run together as one
     mass — and the full stop on the first line lands in the caps below it.
     Open the leading here only; the desktop setting is the intended look. */
  .hero h1{ line-height: 1.06; }

  /* White type over a sunlit aerial needs contrast of its own. More scrim
     was the wrong lever — it flattens the footage the recut exists to show,
     and it cannot help the parts of the frame that are bright concrete
     either way. A soft dark shadow lifts the type off the plate and leaves
     the image alone. Two stops: a tight one for edge definition, a wide
     soft one to darken the ground behind the glyphs. */
  .hero-eyebrow,
  .hero h1,
  .hero-sub{
    text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 3px 18px rgba(0,0,0,.72);
  }
  /* .92 was fine on a solid panel; over the plate it just costs contrast. */
  .hero-sub{ opacity: 1; }
  /* The lockup sits highest, where the scrim is lightest so the plate can
     read — and CONSTRUCTION is small amber caps, the lowest-contrast text
     on the page against sunlit concrete. It needs a tighter shadow than the
     wide ambient one the desktop uses. */
  .hero-brand{
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.85)) drop-shadow(0 5px 22px rgba(0,0,0,.6));
  }
  /* Re-aimed for the band: hold the top dark enough for the nav to read
     over it, keep the middle clear where the truck is, then close on the
     hero background so the band has no hard bottom edge. */
  .hero-media::after{
    background: linear-gradient(180deg,
      rgba(14,17,23,.68) 0%,
      rgba(14,17,23,.14) 30%,
      rgba(14,17,23,.10) 62%,
      rgba(14,17,23,.72) 88%,
      var(--void) 100%);
  }
}
@media (max-width: 640px){
  body{ font-size: 16px; }
  :root{ --sec-y: clamp(64px, 12vw, 92px); }
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-grid.is-collapsed .svc:nth-child(n+4){ display: none; }
  .svc-more-wrap{ display: flex; }
  .footer-inner{ grid-template-columns: 1fr; gap: 34px; }
  .fld.two{ grid-template-columns: 1fr; }
  .hero-ctas{ flex-direction: column; }
  .hero-ctas .btn{ width: 100%; }
  .lb-prev{ left: 2px; } .lb-next{ right: 2px; }
  .about-body{ padding-inline: var(--gutter); }
  /* Stack the oversized lockup so it stays big without squeezing the wordmark */
  .hero-brand{ flex-direction: column; gap: 14px; text-align: center; }
  .hero-brand .brand-words{ align-items: center; }
  .fld.two{ gap: 0; }
}