/* ============================================================
   NELLY'S CONSTRUCTION — site.css

   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;
  /* CJS's editorial serif — the creed band only, one moment per page */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --track: .2em;

  --page-max: min(92vw, 1620px);
  --gutter: clamp(20px, 3.2vw, 56px);
  --nav-h: 92px;
  --sec-y: clamp(56px, 6vw, 96px);
  --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.
   (.slots: the slot toggles sit on photographs.) */
.hero :focus-visible, .cta :focus-visible, .footer :focus-visible,
.slots :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 card, so it is sized
   to the column rather than to the full viewport. */
.h-hero{ font-size: clamp(2rem, 3.9vw, 3.7rem); }

/* 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(32px, 3.4vw, 50px); }
.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); }
.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; gap: 12px; 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; }
/* THE CLIENT'S MARK — THE EMBLEM ONLY, and it could not stay a mask.

   LMO's was a wide WORDMARK rendered through a CSS mask so one asset
   could recolor with currentColor: navy in the nav, white in the
   footer. Nelly's is a round full-colour badge, and a mask flattens
   that to a filled disc, so it is a real <img> in two variants.

   WHAT IS CROPPED OUT, AND WHY. The full badge rings the emblem with
   "NELLY'S CONSTRUCTION" over the top and "BUILDING DREAMS, BRICK BY
   BRICK" under it. That lettering is unreadable at any size a nav bar
   can hold — it was tried at 46px (a smudge) and then at 138px, which
   needed a 168px bar to sit in and made the header look absurd. So
   the ring comes off and only the emblem stays: crescent, house,
   trowel, sparkles. It survives 44px, the wordmark next to it says
   the name in type, and the bar goes back to 92px.

   Three stray fragments of the outer lettering clipped into the crop
   box and were removed by dropping connected components under 80px²,
   which is below the smallest sparkle and above the biggest fragment.

   nellys-emblem-light.png is the dark-ground variant: browns mapped
   to cream, gold untouched. On the footer's ground the original brown
   is close to invisible. */
.brand-mark{ display: block; width: auto; height: 54px; flex: none; }
.brand-mark--light{ display: none; }
.footer .brand-mark{ display: none; }
.footer .brand-mark--light{ display: block; }
}
.brand-mark--light{ display: none; }
.footer .brand-mark{ display: none; }
.footer .brand-mark--light{ display: block; }
.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
   ============================================================ */
/* Over the hero — CJS-style: fully transparent, links floating straight on
   the footage with a hairline rule under the bar's content. The plate's top
   band is the bright sunset sky, so the nav keeps NAVY ink (the dark-ink
   equivalent of CJS's white-on-dusk — measured with tools/luma.js). Goes
   solid white (.nav--solid) past the hero and while the menu sheet is open. */
.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-inner{ width: var(--page-max); margin-inline: auto; display: flex; align-items: center; gap: 28px;
  position: relative; height: 100%; }
/* CJS-style hairline — content width only, gone once the bar goes solid */
.nav-inner::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: rgba(31,34,51,.35); transition: opacity .35s var(--ease); }
.nav--solid{ background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom-color: var(--line); }
.nav--solid .nav-inner::after{ opacity: 0; }
/* Over the untinted sunset sky the standard navy lands 4.4:1 under the
   small nav text on the worst patch — a hair short of 4.5. The darker
   navy-3 clears every nav element (measured, third ink column in
   tools/luma.js). The solid state flips back to standard navy. */
.nav:not(.nav--solid) .nav-link,
.nav:not(.nav--solid) .nav-phone,
.nav:not(.nav--solid) .brand-name{ color: var(--navy-3); }
/* The 9.5px tagline can't clear 4.5:1 on the sky with ANY ink — hide it
   over the hero (the mark reads "LM● Builders" alone, CJS-compact) and
   let the full lockup return with the solid bar. */
.nav:not(.nav--solid) .brand-sub{ display: none; }
/* CJS keep their mark top-left from scroll 0 — same here. (The v1 oversized
   hero lockup + fade-in handoff is gone; the hero plate stays clean, so the
   nav mark is simply always on.) */
.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 nav solidify, the mobile menu and the sticky bar are all script-driven.
   Without JS the bar can never go solid — over white sections a transparent
   nav is invisible — and mobile would have no navigation and no contact
   affordance at all, so hand those back statically. */
html:not(.js) .nav{ background: rgba(255,255,255,.97); border-bottom-color: var(--line); }
html:not(.js) .nav-inner::after{ opacity: 0; }
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 — scenic dusk plate, UNTINTED (no scrim — house rule).
   Copy left / booking card right. The copy is naked white ink in
   the clip's dark lower zone (the sky band up top is too bright
   for any floating ink — measured); the card is dark GLASS so
   the footage keeps moving through it. tools/luma.js measures
   every placement, including through the glass.
   ============================================================ */
.hero{ position: relative; min-height: 100svh; display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 24px); padding-bottom: clamp(36px, 5vh, 64px);
  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; }

/* Bottom-aligned columns: the tall card sets the row height and the copy
   sinks to its foot — which is exactly the plate's dark zone. */
.hero-grid{ display: grid; grid-template-columns: 1.05fr .92fr; gap: clamp(32px, 4vw, 72px);
  align-items: end; }
/* …and then drops a little further still: anchored to the card's foot the
   eyebrow's top edge clips the sun glow (patch ~217 — measured), so the
   copy slides down into the empty hero padding below the baseline. The
   translate keeps the grid row driven by the card alone. */
.hero-copy{ max-width: 680px; padding-bottom: clamp(6px, 1.2vh, 18px);
  transform: translateY(clamp(48px, 8vh, 82px)); }
.hero-eyebrow{ color: var(--white); 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{ color: var(--white); max-width: 15ch; }
/* White glyphs over the marker bar = mud (same call as the CTA panel), so
   on the dark plate the accent drops to the underline variant. */
.hero h1 .hl{ background-image: linear-gradient(180deg, transparent 88%, var(--yellow) 88%); }
.hero-sub{ color: var(--white); font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 46ch;
  margin-top: clamp(16px, 1.8vw, 24px); }
/* .btn--ghost already defaults to on-video white — no override needed. */
.hero-ctas{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ============================================================
   BOOKING CARD — dark GLASS on the dusk plate: the footage stays
   visible through it (navy tint + blur lift legibility — every
   bright patch behind it composites down to ≤~105, so white ink
   clears 4.5:1; measured through the glass by tools/luma.js).
   On mobile the card stacks BELOW the video fold onto the light
   band, so it flips to the solid dark-field treatment (two-stop
   gradient + noise — the anti-dither house rule).
   ============================================================ */
.quote-card{ position: relative; overflow: hidden;
  background: rgba(31,34,51,.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.16);
  padding: clamp(24px, 2.4vw, 38px);
  box-shadow: 0 30px 80px -36px rgba(0,0,0,.6); }
/* No blur support → the tint alone must carry legibility */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .quote-card{ background: rgba(31,34,51,.92); }
}
.quote-card > *{ position: relative; }
.quote-card .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>"); }
.quote-card h2{ font-size: clamp(1.4rem, 1.9vw, 1.8rem); color: var(--white); line-height: 1.05;
  margin-bottom: 10px; }
/* White glyphs over the marker bar = mud, so the accent drops to the
   underline variant (same device as the CTA panel). */
.quote-card .hl{ background-image: linear-gradient(180deg, transparent 88%, var(--yellow) 88%); }
.quote-card .q-sub{ font-size: 14.5px; color: var(--white); margin-bottom: 22px; }
/* The hero CTA flashes a ring around the card so the eye lands on it. */
@keyframes cardPulse{
  0%   { box-shadow: 0 0 0 0 rgba(255,203,0,.9), 0 30px 80px -36px rgba(0,0,0,.6); }
  70%  { box-shadow: 0 0 0 20px rgba(255,203,0,0), 0 30px 80px -36px rgba(0,0,0,.6); }
  100% { box-shadow: 0 0 0 0 rgba(255,203,0,0), 0 30px 80px -36px rgba(0,0,0,.6); }
}
.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; }
}

/* ============================================================
   PLAN · BUILD · DELIVER — the CJS "Dream Design Construct"
   statement band: oversized stacked serif, editorial white,
   eyebrow + copy + yellow-outlined story button on the right.
   The serif appears here and nowhere else — one moment per page.
   ============================================================ */
.creed{ background: var(--paper); border-bottom: 1px solid var(--line-2); }
.creed-grid{ display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 110px);
  align-items: center; padding-block: clamp(56px, 6.5vw, 100px); }
.creed-words{ font-family: var(--font-serif); font-weight: 500; text-transform: uppercase;
  color: var(--navy); font-size: clamp(2.7rem, 6vw, 5.4rem); line-height: 1.14; letter-spacing: .015em; }
.creed-words span{ display: block; }
.creed-lead{ font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 700; color: var(--navy);
  max-width: 44ch; margin-bottom: 16px; }
.creed-side p + p{ color: var(--text-2); max-width: 52ch; }
/* CJS's story button: yellow outline, navy ink, fills yellow on hover */
.creed-side .btn--ghost{ --fg: var(--navy); --bd: var(--yellow); margin-top: 30px; }
.creed-side .btn--ghost:hover{ --bg: var(--yellow); --fg: var(--ink); --bd: var(--yellow); }

/* ============================================================
   SERVICES — six vertical SLOTS (the CJS gallery-slot pattern,
   repurposed): flush image columns, click one and it expands.
   Copy never floats on the photos — the collapsed label is a
   solid navy tag, the expanded copy a solid white plate, and
   the photos themselves stay untinted (house rule).
   ============================================================ */
/* The creed band above carries its own bottom padding — don't stack a
   second full section pad on top of it (kill the dead air). */
#services{ padding-top: clamp(36px, 3.6vw, 56px); }
.slots{ display: flex; gap: 3px; height: clamp(500px, 64vh, 640px); }
.slot{ position: relative; overflow: hidden; flex: 1 1 0; min-width: 0;
  transition: flex-grow .55s var(--ease); }
.slot.open{ flex-grow: 3.3; }
/* Untinted, unfiltered — the photo is the photo. */
.slot > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease); }
.slot:hover > img{ transform: scale(1.04); }
/* The whole slot is the toggle */
.slot-head{ position: absolute; inset: 0; z-index: 2; cursor: pointer; text-align: left; padding: 0; }
.svc-n{ position: absolute; left: 0; top: 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; }
/* Collapsed label — vertical, reading bottom-up, on its own solid tag */
.slot-tag{ position: absolute; left: 14px; bottom: 14px; z-index: 2;
  writing-mode: vertical-rl; transform: rotate(180deg);
  background: var(--navy); color: var(--white); padding: 14px 9px;
  font-family: var(--font-mono); font-weight: 700; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  transition: opacity .3s var(--ease); }
.slot.open .slot-tag{ opacity: 0; }
/* Expanded copy — a solid white plate across the slot's foot. Fixed width
   so the text doesn't reflow while the slot is still animating open;
   the slot's overflow clips it until there is room. */
.slot-body{ position: absolute; left: 0; bottom: 0; z-index: 3;
  width: clamp(380px, 34vw, 520px); max-width: none;
  background: var(--paper); padding: 24px clamp(20px, 2vw, 32px) 26px;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .35s var(--ease) .18s, transform .35s var(--ease) .18s, visibility 0s .53s; }
.slot.open .slot-body{ opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s var(--ease) .18s, transform .35s var(--ease) .18s, visibility 0s .18s; }
.slot-body h3{ font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  color: var(--navy); font-size: clamp(1rem, 1.25vw, 1.15rem); letter-spacing: .05em;
  line-height: 1.3; margin-bottom: 10px; }
.slot-body p{ font-size: 14.5px; color: var(--text-2); margin-bottom: 18px; max-width: 52ch; }
@media (prefers-reduced-motion: reduce){
  .slot, .slot > img, .slot-tag, .slot-body{ transition: none; }
}
/* No JS → nothing can expand: stack the slots as a plain list with the
   copy plates shown, so every service stays reachable. */
html:not(.js) .slots{ flex-direction: column; height: auto; }
html:not(.js) .slot{ min-height: 300px; }
html:not(.js) .slot-tag{ display: none; }
html:not(.js) .slot-body{ position: static; opacity: 1; visibility: visible; transform: none;
  width: auto; }

/* ============================================================
   ABOUT — FULL-BLEED image band: the photo runs edge to edge,
   untinted (house rule); the copy sits on a solid white panel.
   ============================================================ */
.about{ position: relative; overflow: hidden; padding-block: clamp(48px, 6vh, 88px); }
.about-bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-inner{ position: relative; display: flex; justify-content: flex-end; }
.about-panel{ background: var(--paper); max-width: 640px;
  padding: clamp(30px, 3.2vw, 52px);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.45); }
.about-panel .h-sec{ font-size: clamp(1.7rem, 2.9vw, 2.6rem); margin-bottom: 18px; }
.about-panel p{ color: var(--text-2); margin-bottom: 14px; max-width: 54ch; font-size: 15.5px; }
/* Two punchy columns, not four long rows — the panel stays short so the
   full-bleed photo actually shows (user call). */
.about-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 16px 0 20px; }
.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: 22px 22px 20px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  /* Sized by their content, not forced square — square cards left a big
     empty middle under short quotes. */
  min-height: 240px;
  display: flex; flex-direction: column; gap: 14px;
  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: 20px; 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%; 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 — DARK scheme: the
   card is dark glass over the plate, so everything runs white)
   ============================================================ */
.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(--white); margin-bottom: 9px; }
.fld input, .fld select, .fld textarea{ width: 100%; font: inherit; font-size: 15.5px; color: var(--white);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.4); padding: 15px 16px; border-radius: 0;
  transition: border-color .2s var(--ease), background .2s var(--ease); }
.fld input::placeholder, .fld textarea::placeholder{ color: rgba(255,255,255,.55); }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline: none; border-color: var(--yellow);
  background: rgba(255,255,255,.12); }
.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='%23FFFFFF' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>"); }
/* The dropdown list itself paints on the OS sheet (white) — keep its
   option text dark or it vanishes. */
.fld select option{ color: var(--navy); background: var(--paper); }
.fld.two{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fld.two > div{ margin: 0; }
.fld input.err, .fld select.err{ border-color: #FF8B85; }
.quote-card .btn{ width: 100%; margin-top: 6px; }
.f-status{ font-size: 13.5px; color: var(--white); margin-top: 14px; }
.f-status a{ color: var(--white); text-decoration: underline; text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px; }
.f-note{ font-size: 12px; color: var(--white); text-align: center; margin-top: 14px; }

/* ============================================================
   CTA BAND — full-bleed video, UNTINTED (house rule), and NO
   panel: a golden-hour timelapse over a residential street
   (ping-ponged into a seamless loop), bottom-anchored so the
   silhouetted houses fill the band's lower half. The copy is
   naked white ink over the dark houses — measured, tools/luma.js.
   ============================================================ */
.cta{ position: relative; min-height: clamp(440px, 58vh, 600px); display: flex; align-items: flex-end;
  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; object-position: 50% 100%; 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; flex-direction: column; align-items: center;
  padding-block: clamp(48px, 6vh, 76px); }
.cta .eyebrow{ color: var(--yellow); }
.cta .h-sec{ color: var(--white); margin-bottom: 30px; font-size: clamp(1.9rem, 3.6vw, 3.2rem); }
/* White glyphs over the marker bar = mud, so the accent drops to the
   underline variant (same call as the hero headline). */
.cta .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; }
/* Big, loud pills (user call) — same two-button look, just larger.
   nowrap so "Get an estimate" never folds into a blob on narrow phones. */
.sticky a{ pointer-events: auto; flex: 0 1 auto; justify-content: center; white-space: nowrap;
  padding: 17px 22px; font-size: 13px; letter-spacing: .1em; border-radius: 999px;
  box-shadow: 0 16px 38px -8px rgba(31,34,51,.65); }

/* ============================================================
   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){
  .creed-grid{ grid-template-columns: 1fr; gap: 30px; }
  .about-panel{ max-width: 560px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 34px; }
  .hero{ align-items: flex-start; min-height: auto; padding-bottom: 64px; }
  .hero-copy{ transform: none; }   /* stacked flow — margin-top owns the zone */
  .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; }
  /* Phones get a portrait RECUT of the clip (see site.js) — a 16:9 master
     cannot survive object-fit:cover on a tall screen. Pin the media to the
     first viewport; the stacked card scrolls in below it over the light
     hero background. */
  .hero-media{ bottom: auto; height: 100svh; }
  /* The portrait crop centres the sun glow higher in the frame — drop the
     copy into the dark city below it (measured with tools/luma.js 390). */
  .hero-inner{ margin-top: clamp(200px, 28vh, 320px); }
  /* Full-bleed about: give the photo its own clear band above the panel —
     on phones the panel otherwise covers the whole image. */
  .about{ padding-top: min(40vh, 340px); padding-bottom: 24px; }
  .about-panel{ max-width: none; }
  /* Off the video the glass has nothing to show — flip the card to the
     solid dark-field treatment (two-stop gradient + noise, house rule). */
  .quote-card{ background-color: var(--navy-3);
    background-image: linear-gradient(164deg, var(--navy-2) 0%, var(--navy-3) 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgba(255,255,255,.1); }
  /* CTA on phones: cover keeps the full frame height, so the dark house
     band is only ~150px tall — a 3-element stack can't fit it (measured).
     Slide the crop to the darker right-hand houses, drop the eyebrow (the
     areas line already runs in the hero and footer) and tuck the compact
     headline + buttons into the band. */
  .cta img.cta-poster, .cta video{ object-position: 78% 100%; }
  .cta .eyebrow{ display: none; }
  .cta .h-sec{ font-size: 1.7rem; margin-bottom: 14px; }
  .cta-inner{ padding-block: 28px; }
  /* Slots go from columns to stacked rows: a slim photo bar per service,
     the open one grows tall. Same solid-plate rules. */
  .slots{ flex-direction: column; height: auto; }
  .slot{ flex: none; height: 88px; transition: height .5s var(--ease); }
  .slot.open{ flex-grow: 0; height: 470px; }
  .slot .svc-n{ top: 50%; transform: translateY(-50%); }
  .slot.open .svc-n{ top: 0; transform: none; }
  .slot-tag{ writing-mode: horizontal-tb; transform: translateY(-50%);
    left: 62px; top: 50%; bottom: auto; padding: 9px 14px; }
  .slot-body{ width: auto; right: 0; }
}
/* Small phones — HARD requirement: both hero CTAs clear the fold. The
   quote card may scroll; the buttons may not. Tighten the whole stack
   and keep it in the plate's dark zone (measured — tools/luma.js at
   360x640 and 320x568). */
@media (max-width: 900px) and (max-height: 720px){
  .hero{ padding-top: calc(var(--nav-h) + 8px); }
  .hero-inner{ margin-top: clamp(136px, 25vh, 190px); }
  .h-hero{ font-size: 1.5rem; }
  .hero-eyebrow{ font-size: 10px; margin-bottom: 10px; gap: 10px; }
  .hero-eyebrow::before{ width: 24px; }
  .hero-sub{ font-size: .88rem; margin-top: 8px; }
  .hero-ctas{ margin-top: 14px; gap: 8px; }
  .hero-ctas .btn{ padding: 13px 16px; font-size: 11.5px; }
}
@media (max-width: 640px){
  body{ font-size: 16px; }
  :root{ --sec-y: clamp(64px, 12vw, 92px); }
  .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-panel{ max-width: none; padding: 26px 22px; }
  .about-list{ grid-template-columns: 1fr; gap: 8px; }
}