/* ============================================================
   THEME: Cinematic (video-dominant)
   A modern, editorial direction led by a full-bleed video hero.
   Airy light sections, large Hanken Grotesk type, generous space.
   Brand-locked: navy + white + controlled cyan. The drama comes
   from footage + scale, never from neon.
   ============================================================ */

.theme-cinematic {
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --btn-radius: 100px;
  --section-py: clamp(76px, 9vw, 140px);
  --maxw: 1240px;
  --headline-weight: 800;
  --headline-spacing: -0.035em;
  --eyebrow-spacing: 0.22em;
  --eyebrow-weight: 700;
  --btn-weight: 700;
  --shadow: 0 30px 70px -36px rgba(10,31,60,0.4);
  background: #ffffff;
}
.theme-cinematic .section-head h2,
.theme-cinematic .hero h1 { letter-spacing: -0.04em; }
.theme-cinematic .section-head h2 { font-size: clamp(32px, 5vw, 60px); }

/* ---------- hide the standard grid hero, show the video hero ---------- */
.hero-video { display: none; }
.theme-cinematic .hero-video { display: block; }
/* only hide the grid hero where a video hero precedes it (the home page) */
.theme-cinematic .hero-video ~ .hero { display: none; }

.hero-video {
  position: relative;
  min-height: min(94vh, 880px);
  margin-top: -76px; /* slide full-bleed up under the transparent sticky header */
  overflow: hidden;
  background: #061528;
  isolation: isolate;
}
.hv-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.05) contrast(1.02);
}
.hv-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,21,40,.62) 0%, rgba(6,21,40,.10) 26%, rgba(6,21,40,.18) 56%, rgba(6,21,40,.93) 100%),
    linear-gradient(82deg, rgba(6,21,40,.78) 0%, rgba(6,21,40,.30) 46%, rgba(6,21,40,0) 78%);
}
.hv-inner {
  position: relative; z-index: 2;
  min-height: min(94vh, 880px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 150px; padding-bottom: clamp(54px, 7vw, 86px);
  color: #fff;
}
.theme-cinematic .hv-inner .eyebrow { color: #ffffff; text-shadow: 0 1px 14px rgba(6,21,40,.6); }
.theme-cinematic .hv-inner .eyebrow::before { background: var(--cyan-300); box-shadow: 0 0 10px rgba(0,180,216,.5); }
.hv-inner h1 {
  color: #fff; font-weight: 800;
  font-size: clamp(42px, 7.4vw, 96px); line-height: 0.98;
  max-width: 16ch; margin: 20px 0 0;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hv-inner h1 .accent { color: var(--cyan-300); }
.hv-inner .sub {
  color: #dbe7f3; font-size: clamp(18px, 1.8vw, 23px);
  max-width: 46ch; margin: 24px 0 0; text-shadow: 0 1px 18px rgba(0,0,0,.3);
}
.hv-cta { display: flex; gap: 14px; margin: 34px 0 26px; flex-wrap: wrap; }
.hv-trust { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 14.5px; color: #cfe0f2; }
.hv-trust .stars { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.hv-trust .stars .s { color: #ffc24b; letter-spacing: 1px; }
.hv-trust .pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: #fff; }
.hv-trust .pill svg { width: 17px; height: 17px; color: var(--cyan-300); }
.hv-divider { width: 1px; height: 18px; background: rgba(255,255,255,.25); }
.hv-scrollcue {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.7);
}
.hv-scrollcue .mouse { width: 22px; height: 34px; border: 2px solid rgba(255,255,255,.55); border-radius: 13px; position: relative; }
.hv-scrollcue .mouse::after { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 7px; border-radius: 2px; background: #fff; animation: hvscroll 1.6s ease-in-out infinite; }
@keyframes hvscroll { 0%,100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; } 70% { opacity: 0; transform: translate(-50%, 9px); } }
@media (prefers-reduced-motion: reduce) { .hv-scrollcue .mouse::after { animation: none; opacity: .8; } }

/* floating guarantee chip on the hero */
.hv-badge {
  position: absolute; right: clamp(16px, 4vw, 56px); bottom: clamp(54px, 7vw, 96px); z-index: 3;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px); border-radius: 16px; padding: 16px 20px; color: #fff;
  display: flex; align-items: center; gap: 14px; max-width: 260px;
}
.hv-badge .big { font-family: var(--font-display); font-weight: 800; font-size: 27px; color: var(--cyan-300); line-height: 1; white-space: nowrap; }
.hv-badge .lbl { font-size: 13px; color: #dbe7f3; line-height: 1.3; }
@media (max-width: 1040px) { .hv-badge { display: none; } }

/* ---------- transparent header over the video, navy on scroll ---------- */
body.theme-cinematic .site-header {
  background: transparent; border-bottom: 1px solid transparent;
  backdrop-filter: none; transition: background .25s ease, border-color .25s ease;
}
.theme-cinematic .brand .wordmark .n1 { color: #fff; }
.theme-cinematic .brand .wordmark .n2 { color: var(--cyan-300); }
.theme-cinematic .nav-links a { color: #fff; opacity: .9; }
.theme-cinematic .nav-links a:hover, .theme-cinematic .nav-links a[aria-current="page"] { color: var(--cyan-300); opacity: 1; }
.theme-cinematic .header-phone small { color: rgba(255,255,255,.65); }
.theme-cinematic .header-phone b { color: #fff; }
body.is-scrolled.theme-cinematic .site-header {
  background: rgba(6,21,40,.92); border-bottom-color: rgba(255,255,255,.10); backdrop-filter: blur(12px);
}
/* on inner (non-video) pages the cinematic header needs a solid base from the start */
body.cinematic-solidhead .theme-cinematic .site-header,
.theme-cinematic.cinematic-solidhead .site-header { background: rgba(6,21,40,.96); border-bottom-color: rgba(255,255,255,.10); }

/* ---------- airy editorial sections ---------- */
.theme-cinematic .hero-badge { border-radius: 16px; }
.theme-cinematic .service-card { box-shadow: var(--shadow-sm); border-radius: 14px; }
.theme-cinematic .service-card:hover { box-shadow: var(--shadow); }
.theme-cinematic .reviews { background: var(--bg-soft); }
.theme-cinematic .ctaband { border-radius: 22px; }
.theme-cinematic .eyebrow { color: var(--cyan-600); }

/* inner-page hero (service/about/quote) gets a cinematic dark treatment */
.theme-cinematic .hero:not(.hero-video) {
  background: linear-gradient(150deg, #061528 0%, #0A1F3C 60%, #123a6e 130%);
  color: #eaf2fb;
}
.theme-cinematic .hero h1 { color: #fff; }
.theme-cinematic .hero h1 .accent { color: var(--cyan-300); }
.theme-cinematic .hero .sub { color: #b6cae0; }
.theme-cinematic .hero .eyebrow { color: var(--cyan-300); }
.theme-cinematic .hero .eyebrow::before { background: var(--cyan-300); }
.theme-cinematic .hero-trust { color: #b6cae0; }
.theme-cinematic .hero-trust .stars, .theme-cinematic .hero-trust .pill { color: #fff; }
.theme-cinematic .hero-trust .pill svg { color: var(--cyan-300); }
.theme-cinematic .hero-cta .btn-call { color: #fff; border-color: rgba(255,255,255,.4); }
.theme-cinematic .hero-cta .btn-call:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.theme-cinematic .hero .svc-anchor span { color: #b6cae0; }
.theme-cinematic .hero .svc-anchor b { color: var(--cyan-300); }

@media (max-width: 1024px) {
  .hv-scrollcue { display: none; }
}
@media (max-width: 760px) {
  .hv-inner { padding-top: 110px; }
}

/* keep the placeholder-footage flag clear of the overlaid header */
.theme-cinematic .hero-video .flag { top: 92px; left: 16px; }

/* ---------- home (video hero): full-bleed transparent header (white-bar fix) ----------
   The header is transparent so the hero video shows through it. Previously the
   video was slid up under an IN-FLOW sticky header via margin-top:-76px; iOS
   WebKit did not composite that overlap on the first paint, leaving a white
   strip at the top until a scroll forced a repaint. Fix: take the header OUT of
   flow (position:fixed) so the video is the first in-flow element and fills from
   the very top — there is no overlap left to mis-paint and no gap, and the
   transparent over-video look is preserved. Scoped to the home page (it has no
   .cinematic-solidhead class); the inner pages keep their sticky solid header.
   translateZ(0) keeps the header on its own compositing layer. */
body.theme-cinematic:not(.cinematic-solidhead) .site-header {
  position: fixed; left: 0; right: 0; top: 0;
  transform: translateZ(0);
}
.theme-cinematic .hero-video { margin-top: 0; }

/* ---------- mobile: stack the hero trust badges cleanly (bugfix) ----------
   The two hero trust badges sit in a horizontal flex row with a thin vertical
   divider line between them. When the row wrapped on a narrow screen the
   divider became an orphaned vertical line (trailing the first badge or
   floating beside the second), and the wrap was inconsistent on first paint.
   On small screens stack the badges into a left-aligned column and drop the
   divider, which only makes sense side-by-side. */
@media (max-width: 720px) {
  .hv-trust { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hv-trust .hv-divider { display: none; }
}