/* ============================================================
   MESHAD PLUMBING — site.css

   Written from zero against the BERB reference rather than re-tokenised
   from the donor build: the shapes, radii, type scale and density are
   all different, so only the JS contract and the section order carried
   over. See the header of index.html for the two references.

   The system in one paragraph: a near-black page ground; content sits
   in inset panels rounded to 36px that float on it; a transitional
   serif (STIX Two Text) carries display type and the wordmark while a
   soft geometric sans (Ubuntu) carries everything functional; buttons
   and the nav are full pills; rules between items are hairlines, never
   boxes; photography is framed and never tinted.
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Ground. Deliberately a PAIR, not one flat value — see .grain below. */
  --ink:        #161723;
  --ink-top:    #191A28;
  --ink-bottom: #121320;
  --ink-deep:   #0E0F19;

  --paper:      #FFFFFF;
  --paper-2:    #F7F7F7;
  --paper-3:    #ECECEE;

  /* Accent sampled from the hero footage itself (the brass mixer), so
     the palette is keyed to the imagery instead of picked off a wheel. */
  --brass:      #C2912F;
  --brass-lift: #D9AE55;
  --brass-soft: #C5AC7B;

  --on-ink:      #FFFFFF;
  --on-ink-mute: #A7A9B8;
  --on-paper:      #14151F;
  --on-paper-mute: #55576A;

  --line-dark:  rgba(255,255,255,.14);
  --line-light: rgba(20,21,31,.14);

  --r-panel: 36px;
  --r-tile:  24px;
  --r-pill:  999px;

  --serif: "STIX Two Text", "Times New Roman", Times, serif;
  --sans:  Ubuntu, "Segoe UI", system-ui, -apple-system, sans-serif;

  --gut: clamp(16px, 3vw, 34px);
  --wrap: 1280px;
  /* Height of the nav row. The hero is pulled up by exactly this so the
     footage runs edge to edge UNDER the bar rather than starting below
     it — the brief called the full bleed non-negotiable. */
  --nav-h: 76px;

  --t: 220ms cubic-bezier(.2,.6,.2,1);

  /* z-scale: ground/grain 0 · content 1 · sticky 30 · menu 50 · nav 60.
     The nav sits ABOVE the mobile menu on purpose: the panel is a
     disclosure, not a dialog, so the burger that opened it has to stay
     on top and clickable to close it. Put the nav under the panel and
     the only ways out are Escape or picking a link — a trap on touch. */
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--on-ink);
  background: var(--ink);   /* fallback only; .ground paints the real one */
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.06; letter-spacing: -.015em; }
p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

/* ---------- THE DARK GROUND (anti-dither) ----------
   A perfectly flat dark blue-grey gets spatial-dithered by the display
   pipeline into a visible diagonal hairline across the whole viewport, so
   the ground is a real two-stop gradient with a noise layer over it.

   Both are FIXED ELEMENTS rather than `body { background-attachment: fixed }`.
   That property is unreliable on iOS Safari, and it also renders only one
   viewport's worth into a full-page capture — which is how this was caught:
   every dark section below the fold screenshotted white, taking the white
   body text with it. A real fixed layer gives each viewport the full
   gradient range and paints correctly everywhere. */
.ground {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(168deg, var(--ink-top) 0%, var(--ink) 46%, var(--ink-bottom) 100%);
}
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .035; mix-blend-mode: overlay;
  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>");
}
.util, .nav, main, .footer, .mobile-cta, .mobile-menu { position: relative; z-index: 1; }

.container { width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--paper); color: var(--on-paper);
  padding: .7rem 1.1rem; border-radius: 0 0 var(--r-tile) 0; font-weight: 500;
}
.skip-link:focus { left: 0; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brass-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- TYPE ---------- */
.label {
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--brass-soft); margin-bottom: 1.1rem;
}
.sec-title { font-family: var(--serif); font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.sec-head { max-width: 46rem; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.sec-note {
  margin-top: 1.1rem; color: var(--on-ink-mute); font-size: .95rem;
  max-width: 34rem;
}

/* The signature treatment: exactly one word per major heading sits in a
   solid brass block. It is the only chromatic element in the type. */
.hl {
  background: var(--brass);
  color: #17130A;
  padding: .02em .26em .1em;
  border-radius: 5px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- BUTTONS (full pills, per the reference) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .8rem 1.7rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: .98rem; font-weight: 500;
  letter-spacing: .01em; text-align: center;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.btn--brass { background: var(--brass); color: #17130A; }
.btn--brass:hover { background: var(--brass-lift); }
.btn--dark { background: var(--on-paper); color: var(--paper); }
.btn--dark:hover { background: #2A2C3D; }
/* Sits directly on footage — solid enough to read against any frame. */
.btn--onmedia { background: rgba(255,255,255,.94); color: var(--on-paper); }
.btn--onmedia:hover { background: #FFF; }
.btn--ghost-dark { background: transparent; color: var(--on-paper); border-color: rgba(20,21,31,.4); }
.btn--ghost-dark:hover { background: rgba(20,21,31,.07); }

/* ---------- NAV ---------- */
.nav { position: sticky; top: 0; z-index: 60; padding: .7rem 0; min-height: var(--nav-h); display: flex; align-items: center; transition: background-color var(--t); }
.nav--solid { background: rgba(18,19,32,.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line-dark); }
/* Transparent nav sits straight on the footage, so its loose text gets a
   shadow — never a scrim, the clip stays untouched. */
.nav:not(.nav--solid) .brand,
.nav:not(.nav--solid) .nav-link,
.nav:not(.nav--solid) .nav-phone { text-shadow: 0 1px 14px rgba(0,0,0,.7); }
.nav-inner {
  width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: flex; align-items: baseline; gap: .5rem; }
.brand-name {
  font-family: var(--serif); font-weight: 600; font-size: 1.6rem;
  letter-spacing: .01em; line-height: 1;
}
.brand-sub {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--on-ink-mute);
}
/* Plain links, no pill. An underline grows from the accent on hover. */
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav-link {
  position: relative; color: var(--on-ink); font-size: .98rem; font-weight: 400;
  padding: .3rem 0; transition: color var(--t);
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -1px; height: 2px;
  background: var(--brass); transition: right var(--t);
}
.nav-link:hover { color: var(--brass-lift); }
.nav-link:hover::after { right: 0; }
.nav-right { display: flex; align-items: center; gap: 1.4rem; }
.nav-phone { font-size: .95rem; font-weight: 500; transition: color var(--t); }
.nav-phone:hover { color: var(--brass-lift); }
.nav-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--brass); color: #17130A;
  padding: .6rem 1.35rem; border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 500; transition: background-color var(--t);
}
.nav-btn:hover { background: var(--brass-lift); }

.menu-btn {
  display: none; width: 46px; height: 46px; border: 0; background: transparent;
  padding: 0; place-items: center; border-radius: 50%; position: relative;
}
/* The bars are positioned ABSOLUTELY off the button's centre rather than
   flowed. Flowed, their spacing is whatever the grid decides to
   distribute (measured: 15.3px, not the 10px the margins imply), so any
   hardcoded translate for the X is wrong the moment the button resizes —
   which is exactly why the first attempt rendered as a chevron. */
.menu-btn .bar {
  position: absolute; left: 50%; width: 22px; height: 2px; margin-left: -11px;
  background: var(--on-ink); border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}
.menu-btn .bar:nth-child(1) { top: calc(50% - 7px); }
.menu-btn .bar:nth-child(2) { top: calc(50% - 1px); }
.menu-btn .bar:nth-child(3) { top: calc(50% + 5px); }
/* Burger becomes an X while the panel is open, so the control that closes
   it reads as a close control rather than as the same open control. */
.menu-btn[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--ink-deep);
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: calc(var(--nav-h) + 2.5rem) var(--gut) 2rem;
  transform: translateY(-100%); transition: transform 320ms cubic-bezier(.2,.7,.2,1);
  visibility: hidden;
}
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu a { font-family: var(--serif); font-size: 2rem; padding: .5rem 0; }
.mobile-menu .mm-phone { font-family: var(--sans); font-size: 1.2rem; color: var(--brass-lift); margin-top: 1rem; }
.mobile-menu .mm-btn { font-family: var(--sans); font-size: 1rem; margin-top: 1rem; align-self: flex-start; }

/* ============================================================
   HERO
   Full-bleed video, edge to edge. The copy has NO panel behind it and
   the footage has NO scrim over it — legibility comes from the cut
   (the copy column sits on the black vanity wall) plus a text-shadow.
   ============================================================ */
.hero {
  position: relative;
  /* Pull up under the transparent nav so the video reaches the top edge,
     then give the padding back inside so the copy still clears the bar. */
  margin-top: calc(var(--nav-h) * -1);
  min-height: 88vh;
  min-height: 88svh;   /* svh, not vh: iOS shrinks the visual viewport when
                          the URL bar retracts and vh alone overshoots it. */
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + clamp(2rem, 5vw, 4.5rem)) 0 clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; background: var(--ink-deep); }
.hero-media img, .hero-media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Biased UP the frame. On a short, wide viewport a centred cover crops
     out the whole upper third — which is where the brass mixer is — and
     leaves the copy sitting on featureless black that reads as a panel
     rather than as footage. luma.js says the copy column still clears
     10:1 here, so the headroom is spent on showing the composition. */
  object-position: 50% 26%;
  /* Pushed brighter than source, never darker. */
  filter: saturate(1.06) brightness(1.03);
}
.hero-media video { opacity: 0; transition: opacity 700ms ease; }
.hero-media video.ready { opacity: 1; }
.hm-mob { display: none; }

.hero-inner {
  position: relative; z-index: 1;
  width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .78fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.hero-copy { max-width: 40rem; }
.hero-eyebrow {
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: #FFF; margin-bottom: 1.4rem; font-weight: 500;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}
.hero-title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  color: #FFF;
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
  margin-bottom: 1.5rem;
  max-width: 15ch;          /* stops "Jersey" falling to a line of its own */
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(1rem, 1.25vw, 1.14rem); color: #FFF; max-width: 33rem;
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
  margin-bottom: 2.1rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.1rem; }
.hero-trust {
  display: flex; flex-wrap: wrap; gap: .55rem 1.5rem;
  font-size: .9rem; color: #FFF; text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.hero-trust li { display: flex; align-items: center; gap: .55rem; }
.hero-trust li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brass-lift); flex: none;
}

/* The one solid panel in the hero, as briefed. */
.hero-quote {
  background: var(--paper); color: var(--on-paper);
  border-radius: var(--r-panel); padding: clamp(1.5rem, 2.4vw, 2.1rem);
  box-shadow: 0 30px 70px rgba(0,0,0,.36);
}
.quote-title { font-family: var(--serif); font-size: 1.72rem; margin-bottom: .45rem; }
.quote-sub { font-size: .92rem; color: var(--on-paper-mute); margin-bottom: 1.3rem; }
.q-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.q-field { margin-bottom: .7rem; display: flex; flex-direction: column; }
.q-label { font-size: .78rem; font-weight: 500; color: var(--on-paper-mute); margin-bottom: .3rem; }
.q-opt { font-weight: 400; opacity: .7; }
.q-input {
  font: inherit; font-size: .95rem; color: var(--on-paper);
  background: var(--paper-2); border: 1px solid transparent;
  border-radius: 12px; padding: .68rem .8rem; min-height: 44px;
  width: 100%; transition: border-color var(--t), background-color var(--t);
}
.q-input::placeholder { color: #9A9CAB; }
.q-input:focus { border-color: var(--brass); background: var(--paper); outline-offset: 1px; }
textarea.q-input { min-height: 88px; resize: vertical; line-height: 1.55; }
.q-select { appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2355576A' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.2rem; }
.q-submit { width: 100%; margin-top: .3rem; }
.q-submit:disabled { opacity: .6; cursor: progress; }
.q-note { font-size: .8rem; color: var(--on-paper-mute); text-align: center; margin-top: .7rem; }
.q-note.is-error { color: #B4232B; }
.q-done { font-size: 1rem; line-height: 1.6; padding: 1.4rem 0; }
/* Honeypot: off-screen rather than display:none so bots still fill it. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- SECTIONS ----------
   Padding roughly halved from the first cut — the page read too airy,
   with a gap between every section you could lose a paragraph in. */
.section { padding: clamp(3rem, 5vw, 5rem) 0; }
.label--dark { color: #8A6A22; }

/* ---------- SERVICES (compact grid — six cards in one place) ---------- */
.srv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.srv-card { border-radius: var(--r-tile); }
.srv-card-link {
  display: flex; flex-direction: column; height: 100%;
  background: rgba(255,255,255,.035); border: 1px solid var(--line-dark);
  border-radius: var(--r-tile); overflow: hidden;
  transition: border-color var(--t), background-color var(--t), transform var(--t);
}
.srv-card-link:hover { border-color: rgba(194,145,47,.55); background: rgba(255,255,255,.06); transform: translateY(-3px); }
.srv-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.srv-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.6,.2,1); }
.srv-card-link:hover .srv-card-media img { transform: scale(1.05); }
.srv-card-body { padding: clamp(1.1rem, 1.8vw, 1.5rem); display: flex; flex-direction: column; flex: 1; }
.srv-card-title { font-family: var(--sans); font-weight: 700; font-size: 1.24rem; letter-spacing: -.01em; margin-bottom: .5rem; }
.srv-card-copy { color: var(--on-ink-mute); font-size: .92rem; line-height: 1.55; margin-bottom: 1rem; }
.srv-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 500; color: var(--brass-lift); }
.srv-card-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform var(--t); }
.srv-card-link:hover .srv-card-cta svg { transform: translate(2px, -2px); }

/* ---------- ABOUT (full-bleed image, text sitting ON it — no card) ----------
   BERB's "how can we help you" band. The image runs wall to wall; the
   copy sits on the clean, bright left third with near-black ink. No
   scrim — the image was chosen and framed so the ink clears contrast
   there, checked by tools/luma.js. A short white gradient on the left
   only lifts that third; it fades to fully transparent well before the
   subject, so the photo itself is untouched. */
.about { position: relative; overflow: hidden; }
.about-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
  filter: saturate(1.04) brightness(1.02);
}
.about::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 26%, rgba(255,255,255,0) 46%);
}
.about-inner {
  position: relative; z-index: 2;
  width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}
.about-copy { max-width: 32rem; color: var(--on-paper); }
.about-copy .sec-title { color: var(--on-paper); font-size: clamp(1.9rem, 3.2vw, 2.8rem); margin-bottom: 1.2rem; }
.about-text { color: #33353F; font-size: 1rem; margin-bottom: 1rem; text-shadow: 0 1px 10px rgba(255,255,255,.5); }
.about-copy .btn { margin-top: .6rem; }

/* ---------- WORK CAROUSEL ---------- */
/* Two tiles per view on desktop, so each reads BIG. Each tile is a
   button that opens the lightbox. */
.car-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 1.6rem) / 2);
  gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: .3rem;
}
.car-track::-webkit-scrollbar { display: none; }
.work-tile {
  position: relative; margin: 0; padding: 0; border: 0; background: none;
  scroll-snap-align: start; border-radius: var(--r-tile); overflow: hidden;
  cursor: zoom-in; display: block;
}
.work-tile img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 600ms cubic-bezier(.2,.6,.2,1); }
.work-tile:hover img, .work-tile:focus-visible img { transform: scale(1.04); }
/* The zoom affordance — a magnifier that lifts in on hover/focus so it's
   obvious the tile opens. */
.work-zoom {
  position: absolute; top: 14px; right: 14px; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(14,15,25,.55); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(-4px); transition: opacity var(--t), transform var(--t);
}
.work-tile:hover .work-zoom, .work-tile:focus-visible .work-zoom { opacity: 1; transform: none; }
.work-zoom svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; }
.car-ui { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.8rem; }
.car-dots { display: flex; gap: .1rem; }
/* The dot LOOKS 9px but the button is a 32px target: a 9px tap area is
   unusable on a phone and fails the interactive-size check. The visible
   dot is painted with an inset box-shadow rather than a background so the
   padding stays transparent and clickable. */
.car-dot {
  width: 32px; height: 32px; padding: 0; border: 0; background: transparent;
  border-radius: 50%; position: relative;
}
.car-dot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: rgba(255,255,255,.26);
  transition: background-color var(--t), transform var(--t);
}
.car-dot[aria-current="true"]::before { background: var(--brass); transform: scale(1.3); }
.car-dot:hover::before { background: rgba(255,255,255,.5); }
/* Arrows the earlier version left as faint ghost rings you couldn't find.
   Now solid brass with a dark glyph — unmistakably buttons. */
.car-arrows { display: flex; gap: .7rem; }
.car-btn { width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brass); color: #17130A; transition: background-color var(--t), opacity var(--t), transform var(--t); }
.car-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.car-btn:hover:not(:disabled) { background: var(--brass-lift); transform: scale(1.06); }
.car-btn:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); cursor: default; }

/* ---------- REVIEWS (designed empty state) ---------- */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.rev { border-radius: var(--r-tile); padding: clamp(1.6rem, 2.4vw, 2.2rem); background: rgba(255,255,255,.04); border: 1px solid var(--line-dark); }
.rev.is-empty { border-style: dashed; border-color: rgba(255,255,255,.22); background: transparent; }
.rev-quote { font-family: var(--serif); font-size: 1.22rem; line-height: 1.45; color: var(--on-ink-mute); margin-bottom: 1.5rem; }
.rev.is-empty .rev-quote { color: rgba(255,255,255,.42); }
.rev-by { display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; }
.rev-name { font-weight: 500; color: rgba(255,255,255,.5); }
.rev-loc { color: rgba(255,255,255,.32); }

/* ---------- CTA (second full-bleed video, content CENTRED) ----------
   BERB's "we help you further" band: everything centred over the clip
   with the phone as a headline number. Bright footage, so near-black ink;
   contrast measured by tools/luma.js. */
.cta { position: relative; min-height: 64vh; min-height: 64svh; display: flex; align-items: center; padding: clamp(4rem, 8vw, 7rem) 0; overflow: hidden; }
.cta-media { position: absolute; inset: 0; z-index: 0; background: var(--paper-3); }
.cta-media img, .cta-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06) brightness(1.03); }
.cta-media video { opacity: 0; transition: opacity 700ms ease; }
.cta-media video.ready { opacity: 1; }
.cta-inner { position: relative; z-index: 1; width: min(100% - var(--gut) * 2, var(--wrap)); margin-inline: auto; }
.cta-copy { max-width: 40rem; margin-inline: auto; text-align: center; color: var(--on-paper); }
.cta-copy .label--dark { color: #7A5C1A; }
.cta-title { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1.1rem; text-shadow: 0 1px 18px rgba(255,255,255,.55); }
.cta-sub { color: #2E3040; margin: 0 auto 1.6rem; max-width: 34rem; text-shadow: 0 1px 14px rgba(255,255,255,.7); }
.cta-phone {
  display: inline-block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--on-paper);
  margin-bottom: 1.6rem; text-shadow: 0 1px 14px rgba(255,255,255,.7);
  transition: color var(--t);
}
.cta-phone:hover { color: #7A5C1A; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- FOOTER ---------- */
.footer { padding-top: clamp(2rem, 4vw, 3rem); }
.foot-panel { background: var(--paper); color: var(--on-paper); border-radius: var(--r-panel) var(--r-panel) 0 0; padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3.4rem) clamp(2.4rem, 4vw, 3rem); }
.foot-brand { display: block; text-align: center; width: 100%; }
.foot-brand .brand-name { font-size: clamp(2.4rem, 6vw, 3.8rem); }
.foot-brand-sub { font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--on-paper-mute); vertical-align: middle; margin-left: .4rem; }
.foot-rule { border: 0; border-top: 1px solid var(--line-light); margin: 1.8rem 0 2.4rem; }
/* Blurb + contact left, two link columns pushed to the right — BERB's
   split, with a real gap in the middle rather than three even columns. */
.foot-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.5rem); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.foot-blurb { color: var(--on-paper-mute); font-size: .95rem; max-width: 24rem; margin-bottom: .6rem; }
.foot-h { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--on-paper-mute); margin-bottom: .5rem; }
.foot-link { font-size: .95rem; color: var(--on-paper); transition: color var(--t); min-height: 30px; display: inline-flex; align-items: center; }
.foot-link:hover { color: var(--brass); }
.foot-link--strong { font-size: 1.15rem; font-weight: 500; }
/* #63657A on the white panel = 5.7:1, comfortably over AA for 13px text
   (the earlier #8A8C9C was 3.33:1 and failed). */
.foot-note { font-size: .82rem; color: #63657A; margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light); }
.foot-strip { padding: 1.2rem 0 1.4rem; }
.foot-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; font-size: .84rem; color: var(--on-ink-mute); }
.foot-social { display: flex; gap: .5rem; }
.foot-soc { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-dark); color: var(--on-ink-mute); transition: color var(--t), border-color var(--t), background-color var(--t); }
.foot-soc:hover { color: #17130A; background: var(--brass); border-color: var(--brass); }
.foot-soc svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- MOBILE STICKY BAR ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: none; gap: .6rem; padding: .7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(14,15,25,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%); transition: transform 260ms ease;
}
.mobile-cta.show { transform: none; }
.mobile-cta .btn { flex: 1; min-height: 48px; }

/* ---------- LIGHTBOX ---------- */
.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(8,9,15,.9); backdrop-filter: blur(4px); animation: lb-fade var(--t) ease; }
.lb-frame { position: relative; z-index: 1; width: min(94vw, 1200px); display: flex; align-items: center; justify-content: center; gap: .4rem; }
.lb-figure { margin: 0; max-width: 100%; animation: lb-pop 240ms cubic-bezier(.2,.7,.2,1); }
.lb-img { max-width: 100%; max-height: 82vh; border-radius: var(--r-tile); display: block; }
.lb-cap { margin-top: .8rem; text-align: center; color: var(--on-ink-mute); font-size: .9rem; }
.lb-close {
  position: absolute; top: -3.2rem; right: 0; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; transition: background-color var(--t);
}
.lb-close:hover { background: rgba(255,255,255,.24); }
.lb-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lb-nav {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff;
  transition: background-color var(--t);
}
.lb-nav:hover { background: var(--brass); color: #17130A; }
.lb-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lb-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- REVEALS ---------- */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms ease, transform 640ms cubic-bezier(.2,.6,.2,1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: the quote card and the copy stop fitting side by side long
   before the phone breakpoint. Stacking here rather than at 680px keeps
   the card from squeezing the headline into a column of single words. */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  .nav-right .nav-phone { display: none; }
  /* With the links gone, space-between strands the CTA in the middle of
     the bar; keep it beside the burger where it reads as one group. */
  .nav-right { margin-left: auto; margin-right: .75rem; }
  .hero-inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .hero-copy { max-width: 46rem; }
  .hero-quote { max-width: 34rem; }
  .srv-grid { grid-template-columns: repeat(2, 1fr); }
  .about-copy { max-width: 26rem; }
  .rev-grid { grid-template-columns: 1fr; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-col--about { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  body { font-size: 1rem; }
  /* The nav has to survive 390px: the wordmark, a CTA pill and the burger
     do not fit on one row. The hero carries its own two CTAs, so both nav
     extras come out here rather than being shrunk into illegibility. */
  .nav-right { display: none; }
  .brand-sub { display: none; }

  .hm-desk { display: none; }
  .hm-mob { display: block; }

  /* Phone layout: the video owns the FIRST SCREEN with the copy bottom-set
     on it, and the quote card drops below onto the dark ground. Leaving the
     card inside a full-height hero made the hero ~1.9 viewports tall and
     pushed the headline up underneath the nav. */
  .hero { min-height: 0; align-items: stretch; padding: 0 0 clamp(2rem, 8vw, 3rem); }
  .hero-media { bottom: auto; height: 100vh; height: 100svh; }
  .hero-inner { display: block; }
  .hero-copy {
    min-height: calc(100svh - var(--nav-h) - 3.5rem);
    padding-top: calc(var(--nav-h) + 1rem);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding-bottom: 2.2rem;
  }
  .hero-title { font-size: clamp(2.1rem, 9.5vw, 3rem); max-width: none; }
  .hero-sub-more { display: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-trust { gap: .4rem 1.1rem; font-size: .84rem; }
  .hero-quote { max-width: none; margin-top: 1.6rem; }
  .srv-grid { grid-template-columns: 1fr; }
  /* On a phone the left-fade over a portrait crop can't clear the whole
     copy block, so the about text moves onto its own dark panel below the
     image instead of sitting on it. */
  .about { display: flex; flex-direction: column; }
  .about-img { position: relative; height: 46vw; min-height: 220px; }
  .about::before { display: none; }
  .about-inner { padding: clamp(1.8rem, 7vw, 2.6rem) 0 clamp(2rem, 8vw, 3rem); }
  .about-copy { max-width: none; }
  .about-copy .sec-title, .about-copy .label--dark { color: var(--on-ink); }
  .about-text { color: var(--on-ink-mute); text-shadow: none; }
  .about-copy .btn { background: var(--brass); color: #17130A; }
  .car-track { grid-auto-columns: 88%; }
  .foot-cols { grid-template-columns: 1fr; }
  .foot-panel { border-radius: var(--r-tile) var(--r-tile) 0 0; }
  .foot-col--about { grid-column: auto; }
  .mobile-cta { display: flex; }
  .cta { min-height: 68vh; min-height: 68svh; }
  .cta-copy { max-width: 100%; }
  .cta-actions .btn { flex: 1 1 100%; }
  /* Lightbox: close moves inside the frame, side nav buttons stack under
     the image where thumbs can reach them. */
  .lb-close { top: .6rem; right: .6rem; background: rgba(8,9,15,.55); }
  .lb-frame { flex-wrap: wrap; }
  .lb-nav { order: 2; }
}

/* Short phones: the hero has to fit a headline, two buttons and the trust
   row above the fold, so the least important line goes first. */
@media (max-width: 680px) and (max-height: 700px) {
  .hero-eyebrow { display: none; }
  .hero-trust { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
  .srv:hover .srv-media img { transform: none; }
}

/* Coarse pointers need real targets. This block is LAST on purpose: a
   media query adds no specificity, so anything appended after it would
   silently override the touch sizing. */
@media (pointer: coarse) {
  .btn, .nav-btn, .foot-link, .srv-link, .util-item { min-height: 44px; }
  .car-btn { width: 48px; height: 48px; }
  .mobile-menu a { min-height: 48px; display: flex; align-items: center; }
}