/* ============================================================
   LMO BUILDERS — site.css   (cold-pitch build v1)

   Skin: cjsnyc.com — luxury-minimal LIGHT construction system.
     · Surfaces: white / #F7F7F7, hairline #DDD borders — not shadows.
     · Dark: navy-charcoal #25283D (their exact primary dark).
     · Accent: yellow #FFCB00 / #FFD662 (their exact accents).
     · Type: uppercase tracked display (Poppins standing in for
       Gilroy), Lato body (CJS load it themselves), Inconsolata mono
       for eyebrow labels and counters (theirs too).
   Structure: the Pro Classic build — this file re-skins that skeleton
   light; it is a REBUILD of the component CSS, not a token swap.
   Reviews carousel: the NJ Indoor/Outdoor pattern (arrows + dots).

   House rules baked in:
     · NO tint/wash over any photo or video. Hero + CTA legibility
       comes from clip choice and the mobile recut (measured with
       tools/luma.js). Type may carry its own soft shadow; media
       stays untouched.
     · Large flat dark sections get a real two-stop gradient + the
       .noise-overlay so display pipelines have no flat field to
       dither (the diagonal-hairline bug).
     · Square corners everywhere except avatars, dots and the
       sticky pills.
   ============================================================ */

:root{
  /* Surfaces — light */
  --paper:   #FFFFFF;
  --paper-2: #F7F7F7;   /* alternate band */
  --line:    #DDDDDD;   /* hairlines */
  --line-2:  #ECECEE;   /* softer inner rules */

  /* Dark — CJS navy-charcoal */
  --navy:    #25283D;   /* headings on light, dark surfaces */
  --navy-2:  #2A2D45;   /* gradient partner (lighter) */
  --navy-3:  #1F2233;   /* gradient partner (darker) */
  --ink:     #1B1B1B;   /* text on yellow */

  /* Body text on light */
  --text:    #3D404F;
  --text-2:  #5A5D6E;
  --muted:   #8A8A8A;

  /* Accent — CJS yellow */
  --yellow:    #FFCB00;
  --yellow-2:  #FFD662;
  --yellow-dk: #EBBC00;

  /* On-dark text */
  --white:    #FFFFFF;
  --white-70: rgba(255,255,255,.7);

  --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-sans: 'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Inconsolata', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --track: .2em;

  --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(--paper); color: var(--text);
  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(--yellow); color: var(--ink); }
:focus-visible{ outline: 3px solid var(--navy); outline-offset: 3px; }
/* Navy outlines vanish on the dark contexts — hand those yellow.
   (Not the hero: its plate is bright wood, navy reads fine there.) */
.cta :focus-visible, .footer :focus-visible,
.trust :focus-visible, .lb :focus-visible{ outline-color: var(--yellow); }

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

.skip-link{ position: absolute; left: 14px; top: -60px; z-index: 200; background: var(--yellow); 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: 700; text-transform: uppercase;
  color: var(--navy); line-height: 1.06; letter-spacing: .035em;
}
.h-sec{ font-size: clamp(2rem, 4.6vw, 3.9rem); }
/* 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(2rem, 3.8vw, 3.6rem); }

/* THE specialty device — CJS underline yellow, so the accent word gets a
   marker bar tucked behind its baseline: visible, flat, luxury-minimal.
   nowrap so the accent phrase never splits across lines. */
.hl{
  white-space: nowrap; padding: 0 .06em;
  background-image: linear-gradient(180deg, transparent 60%, var(--yellow) 60%, var(--yellow) 90%, transparent 90%);
}
/* Keep a phrase on one line so mid-width wraps don't orphan a word. */
.nw{ white-space: nowrap; }

.eyebrow{
  display: block; font-family: var(--font-mono); font-size: 13.5px; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase; color: var(--muted); 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(--text-2); font-size: 1.02rem; max-width: 62ch;
  margin-inline: auto; }
.sec-head--left{ text-align: left; margin-inline: 0; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --bg: var(--yellow); --fg: var(--ink); --bd: var(--yellow);
  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(--navy); --fg: var(--white); --bd: var(--navy); }
.btn:hover .ar{ transform: translateX(4px); }
/* Ghost defaults to on-video/on-dark (hero, CTA)… */
.btn--ghost{ --bg: transparent; --fg: var(--white); --bd: rgba(255,255,255,.55); }
.btn--ghost:hover{ --bg: var(--white); --fg: var(--ink); --bd: var(--white); }
/* …and flips navy where it sits on a light surface. */
.svc-more-wrap .btn--ghost{ --fg: var(--navy); --bd: rgba(37,40,61,.4); }
.svc-more-wrap .btn--ghost:hover{ --bg: var(--navy); --fg: var(--white); --bd: var(--navy); }
.btn--solid{ --bg: var(--navy); --fg: var(--white); --bd: var(--navy); }
.btn--solid:hover{ --bg: var(--navy-3); --bd: var(--navy-3); }
.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(--navy); font-weight: 700;
  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: var(--line); }
.tlink::before{ content: ""; position: absolute; left: 0; width: 0; bottom: 0; height: 2px;
  background: var(--yellow); 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; } }

/* ============================================================
   BRAND — text wordmark, "LM●" with a filled dot for the O
   (recreated from the client's black/white Instagram mark)
   ============================================================ */
.brand{ display: inline-flex; align-items: center; margin-right: auto; }
.brand-words{ display: flex; flex-direction: column; line-height: 1; gap: 6px; }
.brand-name{ font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: .06em;
  color: var(--navy); text-transform: uppercase; white-space: nowrap; }
.brand-dot{ display: inline-block; width: .48em; height: .48em; border-radius: 50%;
  background: var(--yellow); margin: 0 .1em 0 .14em; }
.brand-sub{ font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .28em;
  text-transform: uppercase; color: #565A75; white-space: nowrap; }

/* ============================================================
   NAV — transparent over the hero video, solid WHITE past it
   ============================================================ */
/* Solid white from scroll 0 — CJS run a white bar over their hero too, and
   over a busy framing plate no floating nav text survives untinted. The
   .nav--solid class still toggles for the brand handoff timing. */
.nav{ position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); display: flex; align-items: center;
  background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); }
.nav-inner{ width: var(--page-max); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
/* 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; }
/* Navy from the start — the hero plate is bright wood, so light-site nav
   text works over the video too. Solid state only adds the white bar. */
.nav-link{ font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--navy); position: relative; padding: 8px 0; }
.nav-link::after{ content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--yellow); 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(--navy);
  white-space: nowrap; transition: color .2s var(--ease); }
.nav-phone:hover{ color: var(--navy-3); }
.nav-cta{ flex: none; }
/* Solid yellow — a hairline outline disappears against the hero video */
.menu-btn{ display: none; width: 48px; height: 48px; border: 2px solid var(--yellow); position: relative;
  background: var(--yellow); 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 — white sheet, navy display links */
.mobile-menu{ position: fixed; inset: 0; z-index: 55; background: var(--paper); 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); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(1.7rem, 8.5vw, 2.6rem); color: var(--navy); padding: 14px 0; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: baseline; gap: 12px; }
.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(--navy);
  text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ============================================================
   HERO — full-bleed video, UNTINTED (no scrim — house rule).
   The plate is a bright top-down framing shot, so the hero runs
   the LIGHT system: navy type straight on the pale wood, no
   shadow, no wash — contrast is measured with tools/luma.js.
   ============================================================ */
.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(--paper-2); 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-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 2.5x the nav mark, at the head of the copy
   panel so it never fights the plate. It scrolls away with the page and the
   nav mark fades in to replace it. */
.hero-brand{ display: block; text-align: left; margin-bottom: clamp(22px, 2.6vw, 38px);
  padding-bottom: clamp(18px, 2vw, 28px); border-bottom: 1px solid var(--line-2); }
.hero-brand .brand-words{ gap: 10px; align-items: flex-start; }
.hero-brand .brand-name{ font-size: clamp(30px, 3vw, 46px); }
.hero-brand .brand-sub{ font-size: clamp(9px, .8vw, 12px); letter-spacing: .32em; }

.hero-grid{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 3vw, 56px); align-items: center; }
/* The copy sits on a white panel — the sibling of the booking card. Over a
   moving photographic plate no floating ink survives the no-tint rule, so
   both hero columns are panelled and the video stays completely untouched.
   Nudged up off the optical centre so the copy sits higher than the form. */
.hero-copy{ position: relative; top: -30px; background: var(--paper);
  padding: clamp(26px, 2.8vw, 44px); box-shadow: 0 24px 70px -28px rgba(0,0,0,.55); }
.hero-eyebrow{ color: var(--navy); display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: var(--track);
  text-transform: uppercase; margin-bottom: 22px; }
.hero-eyebrow::before{ content: ""; width: 40px; height: 3px; background: var(--yellow); flex: none; }
.hero h1{ max-width: 15ch; color: var(--navy); }
.hero-sub{ color: var(--text-2); font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 46ch;
  margin-top: clamp(18px, 2vw, 26px); }
/* The tel ghost button sits on the white copy panel, so it runs navy. */
.hero .btn--ghost{ --fg: var(--navy); --bd: rgba(37,40,61,.45); }
.hero .btn--ghost:hover{ --bg: var(--navy); --fg: var(--white); --bd: var(--navy); }
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* Booking form — lives in the hero, so there is no separate contact section.
   A solid white card floating on the video; the video around it is the
   separation, so no border furniture. */
.quote-card{ background: var(--paper); padding: clamp(26px, 2.6vw, 38px);
  box-shadow: 0 24px 70px -28px rgba(0,0,0,.55); }
/* The hero's 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(255,203,0,.9), 0 24px 70px -28px rgba(0,0,0,.55); }
  70%  { box-shadow: 0 0 0 20px rgba(255,203,0,0), 0 24px 70px -28px rgba(0,0,0,.55); }
  100% { box-shadow: 0 0 0 0 rgba(255,203,0,0), 0 24px 70px -28px rgba(0,0,0,.55); }
}
.quote-card.pulse{ animation: cardPulse 1.15s var(--ease) 2; }
@media (prefers-reduced-motion: reduce){
  .quote-card.pulse{ animation: none; outline: 3px solid var(--yellow); outline-offset: 2px; }
}
.quote-card h2{ font-size: clamp(1.4rem, 1.9vw, 1.8rem); color: var(--navy); line-height: 1.05; margin-bottom: 10px; }
.quote-card .q-sub{ font-size: 14.5px; color: var(--text-2); margin-bottom: 24px; }

/* ============================================================
   TRUST STRIP — navy band, mono labels (the CJS "process" line).
   Two-stop gradient so the dark field is never flat.
   ============================================================ */
.trust{ background: linear-gradient(92deg, var(--navy-2) 0%, var(--navy-3) 100%); }
.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-family: var(--font-mono);
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.trust span::before{ content: ""; width: 7px; height: 7px; background: var(--yellow); flex: none; }

/* ============================================================
   SERVICES — numbered image cards on a hairline grid
   ============================================================ */
.svc-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.svc{ position: relative; display: flex; flex-direction: column; background: var(--paper);
  transition: background .35s var(--ease); }
.svc:hover{ background: var(--paper-2); }
.svc-media{ position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
/* Untinted, unfiltered — the photo is the photo. */
.svc-media img{ width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease); }
.svc:hover .svc-media img{ transform: scale(1.05); }
.svc-n{ position: absolute; left: 0; bottom: 0; z-index: 2; background: var(--yellow); color: var(--ink);
  font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .08em; padding: 6px 13px; }
.svc-body{ padding: 30px clamp(20px, 2vw, 32px) 34px; display: flex; flex-direction: column; flex: 1; }
.svc h3{ font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--navy);
  font-size: clamp(.98rem, 1.2vw, 1.1rem); letter-spacing: .05em; line-height: 1.32; margin-bottom: 14px; }
.svc p{ font-size: 15px; color: var(--text-2); 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(--paper-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(1.8rem, 3.2vw, 3rem); margin-bottom: 26px; }
.about-body p{ color: var(--text-2); 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(--text-2); }
.about-list li::before{ content: ""; width: 18px; height: 3px; background: var(--yellow); flex: none; margin-top: 10px; }
.about-list b{ color: var(--navy); font-weight: 700; }
.crew{ display: inline-flex; align-items: center; gap: 16px; border: 1px solid var(--line); background: var(--paper);
  padding: 16px 22px; align-self: flex-start; }
.crew svg{ width: 30px; height: 30px; color: var(--navy); flex: none; }
.crew > span{ display: flex; flex-direction: column; gap: 5px; }
.crew .c-name{ font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--navy);
  font-size: 14.5px; letter-spacing: .05em; line-height: 1.32; }
.crew .c-sub{ font-size: 12px; color: var(--muted); }

/* ============================================================
   WORK RAIL — header-mounted controls (Pro Classic pattern)
   ============================================================ */
.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-mono); font-weight: 700; font-size: 15px; letter-spacing: .1em; color: var(--muted); }
.car-count b{ color: var(--navy); font-weight: 700; }
.car-btns{ display: flex; gap: 8px; }
/* Solid yellow 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(--yellow); background: var(--yellow); 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(--navy); border-color: var(--navy); color: var(--white); }
.cbtn[disabled]{ background: transparent; border-color: var(--line); color: var(--muted); cursor: default; }
.cbtn svg{ width: 20px; height: 20px; stroke-width: 2.6; }
.rail{ display: flex; gap: clamp(16px, 1.6vw, 26px); 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; } }

/* Work — framed untinted tiles, caption BELOW the image (light-skin idiom:
   hairline frames, no gradient laid over the photo). */
.work-tile{ flex: 0 0 clamp(260px, 26vw, 380px); scroll-snap-align: start; position: relative;
  padding: 0; border: 1px solid var(--line); display: flex; flex-direction: column; text-align: left;
  cursor: pointer; background: var(--paper); transition: border-color .3s var(--ease); }
.work-tile:hover{ border-color: var(--navy); }
.work-media{ position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.work-media img{ width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease); }
.work-tile:hover .work-media img{ transform: scale(1.05); }
.work-cap{ display: flex; align-items: baseline; gap: 12px; padding: 16px 18px 18px; }
.work-cap .n{ font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; color: var(--muted); }
.work-cap .t{ font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--navy);
  font-size: clamp(.86rem, 1vw, .98rem); letter-spacing: .05em; line-height: 1.32; }
.work-tile .zoom{ position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px;
  background: var(--yellow); 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; }

/* ============================================================
   REVIEWS — Google-style cards (NJ Indoor/Outdoor pattern):
   star row + G glyph up top, testimony, initial-avatar + name
   pinned to the bottom. Arrows at the sides, dots underneath.
   PLACEHOLDER CONTENT — see the HTML comment on the section.
   ============================================================ */
.carousel{ position: relative; }
.car-track{
  display: flex; gap: 24px; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 8px;
}
.car-track::-webkit-scrollbar{ display: none; }
@media (prefers-reduced-motion: reduce){ .car-track{ scroll-behavior: auto; } }

.review{
  flex: 0 0 calc((100% - 72px) / 4);
  margin: 0; padding: 26px 26px 24px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.review:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(37,40,61,.1); }
.rv-top{ display: flex; align-items: center; justify-content: space-between; }
.rv-stars{ display: inline-flex; gap: 3px; color: #FBBC05; }
.rv-stars svg{ width: 18px; height: 18px; }
.rv-g{ width: 22px; height: 22px; flex: 0 0 auto; }
.review blockquote{
  margin: 0; flex: 1 1 auto; min-height: 0;
  font-size: 15px; line-height: 1.65; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}
.review figcaption{ display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--line-2); }
.rv-avatar{ flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: var(--white);
  font-family: var(--font-mono); font-size: 17px; font-weight: 700; line-height: 1; }
.rv-who{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv-name{ font-size: 15px; font-weight: 700; color: var(--navy); }
.rv-meta{ font-size: 12.5px; color: var(--muted); }

.car-nav{
  position: absolute; top: 42%; z-index: 3;
  width: 48px; height: 48px;
  display: none; align-items: center; justify-content: center;
  background: var(--paper); color: var(--navy);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 6px 20px rgba(37,40,61,.12);
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.carousel.is-ready .car-nav{ display: flex; }
.car-nav:hover:not(:disabled){ background: var(--navy); color: var(--white); border-color: var(--navy); }
.car-nav:disabled{ opacity: .3; cursor: default; }
.car-nav svg{ width: 20px; height: 20px; }
.car-prev{ left: -20px; }
.car-next{ right: -20px; }
.car-dots{ display: none; justify-content: center; gap: 4px; margin-top: 20px; }
.carousel.is-ready .car-dots{ display: flex; }
.car-dot{ position: relative; width: 34px; height: 40px; padding: 0; background: transparent; border: none; }
.car-dot::before{
  content: ''; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 3px; margin-top: -1.5px; border-radius: 2px;
  background: #CBCBD2; transition: background-color .2s ease;
}
.car-dot[aria-current="true"]::before{ background: var(--navy); }
.rev-note{ text-align: center; margin-top: 30px; font-size: 13px; color: var(--muted); }

@media (max-width: 1400px){ .review{ flex-basis: calc((100% - 48px) / 3); } }
@media (max-width: 1080px){
  .review{ flex-basis: calc((100% - 24px) / 2); }
  .review blockquote{ -webkit-line-clamp: 8; }
}
@media (max-width: 1340px) and (min-width: 681px){ .car-prev{ left: 6px; } .car-next{ right: 6px; } }
@media (max-width: 680px){
  .review{ flex-basis: 86%; aspect-ratio: auto; min-height: 0; }
  .review blockquote{ -webkit-line-clamp: unset; overflow: visible; }
  .car-track{ gap: 16px; }
  .car-nav{ display: none !important; }
}

/* ============================================================
   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-display); font-weight: 600; text-transform: uppercase; color: var(--navy);
  font-size: clamp(.92rem, 1.2vw, 1.05rem); letter-spacing: .04em; line-height: 1.42;
  transition: color .2s var(--ease); }
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: #565A75; }
.faq summary::after{ content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px;
  margin-top: -7px; border-right: 3px solid var(--yellow); border-bottom: 3px solid var(--yellow);
  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(--text-2); font-size: 15.5px; max-width: 72ch; }
.faq-body a{ color: var(--navy); font-weight: 700; text-decoration: underline;
  text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ============================================================
   FORM FIELDS (used by the hero booking card)
   ============================================================ */
.fld{ margin-bottom: 16px; }
.fld label{ display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 9px; }
.fld input, .fld select, .fld textarea{ width: 100%; font: inherit; font-size: 15.5px; color: var(--navy);
  background: var(--paper); border: 1px solid #C9C9D0; padding: 15px 16px; border-radius: 0;
  transition: border-color .2s var(--ease); }
.fld input::placeholder, .fld textarea::placeholder{ color: var(--muted); }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline: none; border-color: var(--navy); }
.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='%2325283D' 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: #D64541; }
.quote-card .btn{ width: 100%; margin-top: 6px; }
.f-status{ font-size: 13.5px; color: var(--navy); margin-top: 14px; }
.f-status a{ color: var(--navy); text-decoration: underline; text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px; }
.f-note{ font-size: 12px; color: var(--muted); text-align: center; margin-top: 14px; }

/* ============================================================
   CTA BAND — full-bleed video, UNTINTED (house rule; see hero)
   ============================================================ */
.cta{ position: relative; min-height: clamp(460px, 62vh, 640px); display: flex; align-items: center;
  overflow: hidden; background: var(--navy); 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-inner{ position: relative; z-index: 2; width: var(--page-max); margin-inline: auto;
  display: flex; justify-content: center; padding-block: clamp(56px, 7vh, 88px); }
/* The panel is the page's one solid dark block: real two-stop gradient +
   noise, so the flat navy never gives a display pipeline anything to
   dither into a diagonal. */
.cta-panel{ position: relative; overflow: hidden; width: min(100%, 880px); text-align: center;
  background-color: var(--navy-3);
  background-image: linear-gradient(164deg, var(--navy-2) 0%, var(--navy-3) 100%);
  padding: clamp(40px, 5vw, 68px) clamp(24px, 4vw, 64px);
  box-shadow: 0 24px 70px -28px rgba(0,0,0,.55); }
.cta-panel .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>"); }
.cta-panel > *{ position: relative; }
.cta .eyebrow{ color: var(--yellow); }
.cta .h-sec{ color: var(--white); margin-bottom: 34px; font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
/* On the dark panel the marker bar would cross white glyphs (white on
   yellow = mud), so it drops to a clean underline below the baseline. */
.cta-panel .hl{ background-image: linear-gradient(180deg, transparent 88%, var(--yellow) 88%); }
.cta .tlink{ color: var(--white); }
.cta .tlink::after{ background: rgba(255,255,255,.35); }
.cta-btns{ display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; align-items: center; }

/* ============================================================
   FOOTER — navy. Real two-stop gradient + noise so the dark
   field is never flat (display pipelines dither flat darks into
   a visible diagonal — see the global bug note).
   ============================================================ */
.footer{ position: relative; background: linear-gradient(178deg, var(--navy-2) 0%, var(--navy-3) 100%);
  overflow: hidden; }
.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 .brand-name{ color: var(--white); }
.footer .brand-sub{ color: var(--yellow); }
.footer .f-brand p{ margin-top: 20px; color: #9DA0B2; font-size: 14.5px; max-width: 34ch; }
.footer h4{ font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--yellow); margin-bottom: 20px; }
.footer li{ margin-bottom: 12px; }
.footer li a, .footer li span{ font-size: 14.5px; color: #B9BCCB; transition: color .2s var(--ease); }
.footer li a:hover{ color: var(--yellow); }
.footer-bottom{ position: relative; z-index: 1; width: var(--page-max); margin-inline: auto;
  border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0 30px; display: flex; flex-wrap: wrap; gap: 10px 28px;
  justify-content: space-between; font-size: 12.5px; color: #8A8DA0; }

/* ============================================================
   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(31,34,51,.5); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{ position: fixed; inset: 0; z-index: 130; display: none; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 54px); background: rgba(31,34,51,.96); 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-mono); font-weight: 700;
  text-transform: uppercase; color: var(--white); letter-spacing: .1em; font-size: 14px; }
.lb-cap .c{ color: var(--yellow); margin-left: 12px; }
.lb-btn{ position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px;
  background: var(--paper); color: var(--navy); display: grid; place-items: center; }
.lb-btn:hover{ background: var(--yellow); color: var(--ink); }
.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(255,255,255,.14);
  color: var(--white); display: grid; place-items: center; }
.lb-close:hover{ background: var(--yellow); 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; }

  /* ---------- Full-bleed video stays full-bleed ----------
     .hero-media is pinned to the whole hero box, which runs well past one
     screen on a phone once the form card stacks below the copy. A 16:9
     master cannot survive object-fit:cover at that height — you get a
     hugely magnified slice — and it cannot be cropped to portrait either
     (a 720p source caps a 9:16 crop at ~32% of the width). So phones get
     a portrait RECUT of the clip (see site.js): the plate at a readable
     zoom over a blurred, darkened copy of itself. Any darkening lives in
     the recut FILE, not in a CSS scrim — the no-tint rule holds here too.
     Pin the media to the viewport so cover has nothing to trim; below the
     fold the hero background takes over behind the stacked form card. */
  .hero-media{ bottom: auto; height: 100svh; }
  .hero-copy{ top: 0; }
}
@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; gap: 0; }
  .hero-ctas{ flex-direction: column; }
  .hero-ctas .btn{ width: 100%; }
  .lb-prev{ left: 2px; } .lb-next{ right: 2px; }
  .about-body{ padding-inline: var(--gutter); }
  .hero-brand .brand-name{ font-size: clamp(30px, 9vw, 40px); }
}