/* ============================================================
   BARNACLE BE GONE LLC — Global Stylesheet
   Identity: working-diver heritage, deep hull navy + diver-down red
   Type: Oswald (condensed display) + Inter (humanist body)
   Built by Benley Creative Agency
   ============================================================ */

/* ── Design tokens ── */
:root {
  /* Hull navies (dark surfaces) */
  --hull:        #0b1d2e;
  --hull-2:      #10293f;
  --hull-3:      #16354f;
  --deep:        #071420;   /* footer / darkest */
  --steel:       #4a708f;   /* muted blue for lines/labels on dark */

  /* Diver-down red (brand accent) */
  --flag:        #c8382e;
  --flag-2:      #e0473a;   /* hover */
  --flag-deep:   #9c2a22;

  /* Light surfaces — cool off-whites tinted toward the hull hue (not warm cream) */
  --foam:        #eef3f6;   /* light section bg */
  --foam-2:      #e3ebf0;
  --surface:     #ffffff;   /* cards */

  /* Ink (text on light) */
  --ink:         #0e2130;   /* headings/body */
  --ink-soft:    #3f5568;   /* muted body — ~5.6:1 on foam */
  --ink-faint:   #586c7f;   /* 4.86:1 on --foam, 5.43:1 on white — was #5d7386 (4.41:1, failed AA) */

  /* Lines */
  --line:        rgba(11,29,46,0.12);
  --line-light:  rgba(255,255,255,0.10);

  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 16px;

  --shadow-sm: 0 1px 3px rgba(7,20,32,0.08), 0 6px 18px rgba(7,20,32,0.06);
  --shadow:    0 4px 12px rgba(7,20,32,0.10), 0 24px 48px rgba(7,20,32,0.14);

  /* Strong custom easings (CSS defaults are too weak) */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-2:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Nav height is the single source of truth for the fixed header AND for the
     mobile menu that hangs off its bottom edge. They used to be set independently
     (74px vs 62px) which left a 12px strip of page showing through once scrolled. */
  --nav-h:          74px;
  --nav-h-scrolled: 62px;

  --wrap: 1180px;
  --pad:  clamp(1.25rem, 5vw, 4rem);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
/* A class like .field { display: flex } outranks the UA sheet's [hidden] { display: none },
   so an element toggled with the hidden attribute would otherwise stay on screen. */
[hidden] { display: none !important; }
img { height: auto; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-wrap: balance;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--flag); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ── Utilities ── */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.dark  { background: var(--hull); color: #eaf1f6; }
.dark-2 { background: var(--hull-2); color: #eaf1f6; }
.light { background: var(--foam); color: var(--ink); }
.center { text-align: center; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }

.dark h1, .dark h2, .dark h3, .dark-2 h1, .dark-2 h2, .dark-2 h3 { color: #fff; }

/* Kicker — used sparingly, NOT on every section */
.kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--flag);
}
.kicker::before { content: ""; width: 26px; height: 2px; background: var(--flag); display: block; }
.dark .kicker, .dark-2 .kicker { color: #f0a59d; }
.dark .kicker::before, .dark-2 .kicker::before { background: var(--flag); }

.h-xl { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.0; text-transform: uppercase; letter-spacing: 0.01em; }
.h-lg { font-size: clamp(1.9rem, 4vw, 3.1rem); text-transform: uppercase; letter-spacing: 0.01em; }
.h-md { font-size: clamp(1.4rem, 2.6vw, 2rem); text-transform: uppercase; }
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 60ch; line-height: 1.7; }
.dark .lede, .dark-2 .lede { color: rgba(233,241,246,0.78); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600; font-size: 0.98rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.95rem 1.9rem; border-radius: var(--r); border: 2px solid transparent; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out),
              border-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--flag); color: #fff; box-shadow: 0 6px 18px rgba(200,56,46,0.28); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--flag-2); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(200,56,46,0.36); } }
.btn-primary:active { transform: scale(0.97) translateY(-1px); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); } }
.btn-dark { background: var(--hull); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-dark:hover { background: var(--hull-2); transform: translateY(-2px); box-shadow: var(--shadow-sm); } }
.btn-outline-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-outline-dark:hover { background: var(--ink); color: #fff; transform: translateY(-2px); } }
.btn-lg { padding: 1.1rem 2.3rem; font-size: 1.05rem; }
.btn svg { flex-shrink: 0; }

/* ── Navigation ── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  /* The lockup is one unbreakable string, so guarantee clearance from the
     first nav link instead of relying on space-between having room left. */
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: 0 var(--pad);
  background: rgba(11,29,46,0.86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-light);
  transition: height 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.nav.scrolled { height: var(--nav-h-scrolled); background: rgba(7,20,32,0.97); }
.nav-logo { display: flex; align-items: center; gap: 0.6rem; color: #fff; }
.nav-logo .mark { width: 30px; height: 30px; flex-shrink: 0; }
.nav-logo .mark path, .nav-logo .mark line, .nav-logo .mark circle { stroke: #fff; }
.nav-logo .mark .flag-fill { fill: var(--flag); stroke: none; }
.nav-logo-text { font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.nav-logo-llc { font-size: 0.6em; letter-spacing: 0.1em; opacity: 0.72; margin-left: 0.4em; }
.nav-logo-text b { color: var(--flag); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 1.9rem; }
.nav-links a { font-family: var(--font-display); font-size: 0.92rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.82); transition: color 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: #fff; } }
.nav-cta { background: var(--flag); color: #fff !important; padding: 0.55rem 1.15rem; border-radius: var(--r); display: inline-flex; align-items: center; gap: 0.4rem; transition: background-color 140ms var(--ease-out), transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-cta:hover { background: var(--flag-2); transform: translateY(-1px); } }
.nav-hamburger { display: none; flex-direction: column; gap: 5px; padding: 6px; cursor: pointer; background: none; border: none; }
.nav-hamburger span { display: block; width: 26px; height: 2px; background: #fff; transition: transform 200ms var(--ease-out), opacity 160ms var(--ease-out); }
.mobile-menu {
  display: none; position: fixed; inset: var(--nav-h) 0 auto 0; z-index: 999;
  background: var(--hull); padding: 1rem var(--pad) 1.5rem;
  border-bottom: 1px solid var(--line-light);
  opacity: 0; transform: translateY(-8px);
  /* display is discrete, so it needs allow-discrete to take part in the
     transition at all -- otherwise the panel pops in at full opacity.
     Browsers without support simply get the old instant open. */
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out),
              top 200ms var(--ease-out), display 200ms allow-discrete;
}
.mobile-menu.open { display: block; opacity: 1; transform: none; }
@starting-style { .mobile-menu.open { opacity: 0; transform: translateY(-8px); } }
/* Follow the header down when it shrinks, so no page content shows between them. */
.nav.scrolled ~ .mobile-menu { top: var(--nav-h-scrolled); }
.mobile-menu a { display: block; padding: 0.85rem 0; color: rgba(255,255,255,0.88); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,0.07); }
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu .mm-call { color: var(--flag-2); font-weight: 600; }

/* ── Hero ── */
.hero { position: relative; min-height: min(92vh, 780px); min-height: min(92svh, 780px); display: flex; align-items: flex-end; background: var(--hull); overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero-scrim { position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(7,20,32,0.72) 0%, rgba(7,20,32,0.35) 40%, rgba(7,20,32,0.86) 100%),
    linear-gradient(90deg, rgba(7,20,32,0.7) 0%, rgba(7,20,32,0.15) 70%); }
.hero-inner { position: relative; z-index: 1; width: 100%; padding-top: 8rem; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.hero h1 { color: #fff; font-size: clamp(2.7rem, 7vw, 5.4rem); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.01em; max-width: 16ch; }
.hero h1 .accent { color: var(--flag-2); }
.hero .hero-sub { margin-top: 1.4rem; font-size: 1.15rem; color: rgba(255,255,255,0.85); max-width: 54ch; line-height: 1.6; font-weight: 400; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 2rem; }
.hero-trust { display: flex; gap: 1.6rem 2rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.14); }
.hero-trust .ti { display: flex; align-items: center; gap: 0.5rem; color: rgba(255,255,255,0.82); font-family: var(--font-display); font-size: 0.86rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.hero-trust .ti svg { color: var(--flag-2); }

/* ── Hero entrance — the site's one first-load moment ──────────────────────
   The photograph settles out of a 6% scale while an extra layer of darkness
   lifts off it; the headline arrives a line at a time from behind its own
   baseline; the sub, the buttons and the trust row follow on a short stagger.
   About 1.2s end to end.

   transform and opacity only, so the whole thing is compositor-side and
   cannot drop a frame. It is a plain CSS load animation with no JS gate --
   the reduced-motion block at the end of this file collapses it to its
   finished state, and a browser that ignores it simply shows the hero. ── */
@keyframes heroBg   { from { transform: scale(1.06); }        to { transform: none; } }
@keyframes heroDip  { from { opacity: 1; }                     to { opacity: 0; } }
@keyframes heroLine { from { transform: translateY(105%); }    to { transform: none; } }
@keyframes heroRise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* Sits above the scrim by document order, so it darkens the whole frame. */
.hero-dip { position: absolute; inset: 0; background: rgba(7,20,32,0.55); opacity: 0; }

/* Each headline line rides in a clipping box. The small pad-and-pull keeps a
   descender from being sliced by that box if the copy ever stops being caps. */
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 .ln > span { display: block; }

.hero .hero-bg  { animation: heroBg  1200ms var(--ease-out-2) both; }
.hero .hero-dip { animation: heroDip 1000ms var(--ease-out)   both; }

.hero h1 .ln > span { animation: heroLine 700ms var(--ease-out-2) both; }
.hero h1 .ln:nth-child(2) > span { animation-delay:  80ms; }
.hero h1 .ln:nth-child(3) > span { animation-delay: 160ms; }

.hero .hero-sub     { animation: heroRise 500ms var(--ease-out) both; animation-delay: 520ms; }
.hero .hero-actions { animation: heroRise 500ms var(--ease-out) both; animation-delay: 610ms; }
.hero .hero-trust   { animation: heroRise 500ms var(--ease-out) both; animation-delay: 690ms; }

/* ── Interior page hero ── */
.page-hero { position: relative; background: var(--hull); padding: 9.5rem var(--pad) 3.5rem; overflow: hidden; }
.page-hero .hero-bg { opacity: 0.22; }
.page-hero .hero-scrim { background: linear-gradient(180deg, rgba(7,20,32,0.6), rgba(7,20,32,0.9)); }
.page-hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.8rem); text-transform: uppercase; }
.page-hero p { color: rgba(255,255,255,0.82); max-width: 60ch; margin-top: 0.9rem; font-size: 1.08rem; line-height: 1.65; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 1.2rem; font-family: var(--font-display); }
.breadcrumb a { color: var(--flag-2); }
.breadcrumb span { color: rgba(255,255,255,0.3); }

/* ── Trust bar ── */
.trustbar { background: var(--deep); color: #fff; }
.trustbar .wrap { display: flex; align-items: center; justify-content: center; gap: 1.4rem 2.4rem; flex-wrap: wrap; padding-top: 1.4rem; padding-bottom: 1.4rem; }
.trustbar .tb { display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: rgba(255,255,255,0.82); }
.trustbar .tb strong { color: #fff; font-weight: 700; }
.trustbar .stars { color: #f2b705; letter-spacing: 1px; }
.trustbar .sep { width: 1px; height: 26px; background: rgba(255,255,255,0.14); }

/* ── Section heading block ── */
.sec-head { max-width: 62ch; }
.sec-head.center { margin-left: auto; margin-right: auto; }
.sec-head h2 { margin-top: 0.6rem; }
.sec-head p { margin-top: 0.9rem; }

/* ── Split / feature rows ── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img { width: 100%; border-radius: var(--r-lg); object-fit: cover; box-shadow: var(--shadow); }
.media-ph { width: 100%; border-radius: var(--r-lg); box-shadow: var(--shadow); background: #b9c0c6; }
.prose p { color: var(--ink-soft); margin-bottom: 1rem; line-height: 1.75; }
.dark .prose p, .dark-2 .prose p { color: rgba(233,241,246,0.8); }
.prose h3 { margin: 1.6rem 0 0.5rem; font-size: 1.3rem; }
.checklist { margin: 1.2rem 0; display: grid; gap: 0.6rem; }
.checklist li { position: relative; padding-left: 2rem; color: var(--ink-soft); line-height: 1.55; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--flag); }
.checklist li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.dark .checklist li, .dark-2 .checklist li { color: rgba(233,241,246,0.85); }

/* ── Service cards ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(200,56,46,0.4); } }
.card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--hull); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover .card-media img { transform: scale(1.05); } }
.card-body { padding: 1.4rem 1.4rem 1.6rem; }
.card-body h3 { font-size: 1.32rem; text-transform: uppercase; letter-spacing: 0.01em; }
.card-body p { color: var(--ink-soft); font-size: 0.94rem; margin-top: 0.5rem; line-height: 1.6; }
.card-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--flag); }
.card-link::after { content: "→"; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover .card-link::after { transform: translateX(4px); } }
.card-link::before { content: ""; position: absolute; inset: 0; }

/* ── Pill / badges ── */
.badges { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.badge { font-family: var(--font-display); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.4rem 0.85rem; border-radius: 100px; background: rgba(200,56,46,0.10); color: var(--flag); border: 1px solid rgba(200,56,46,0.25); }
.dark .badge, .dark-2 .badge { background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.18); }

/* ── Results gallery ── */
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.4rem; }
.result { border-radius: var(--r-lg); overflow: hidden; background: var(--hull); box-shadow: var(--shadow-sm); }
.result img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.result-cap { padding: 0.95rem 1.2rem; color: rgba(255,255,255,0.75); font-size: 0.86rem; }
.result-cap strong { display: block; color: #fff; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 2px; }

/* ── Process steps ── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.6rem; counter-reset: step; }
.step { position: relative; padding-top: 0.5rem; }
.step-n { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--flag); color: var(--flag); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; margin-bottom: 1rem; }
.dark .step-n, .dark-2 .step-n { color: var(--flag-2); border-color: var(--flag); }
.step h3 { font-size: 1.15rem; text-transform: uppercase; }
.step p { margin-top: 0.4rem; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }
.dark .step p, .dark-2 .step p { color: rgba(233,241,246,0.72); }

/* ── Reviews ── */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.4rem; }
.review { background: rgba(255,255,255,0.04); border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: 1.6rem; }
.review .stars { color: #f2b705; letter-spacing: 1px; font-size: 1rem; }
.review p { margin: 0.7rem 0 1rem; color: rgba(255,255,255,0.86); line-height: 1.7; font-size: 0.96rem; }
.review .who { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #fff; font-size: 0.9rem; }
.review .where { font-size: 0.78rem; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* ── Areas ── */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.9rem; }
.area { position: relative; border: 1px solid var(--line-light); border-radius: var(--r); padding: 1.15rem 1.1rem; background: rgba(255,255,255,0.03); transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out), background-color 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .area:hover { transform: translateY(-3px); border-color: var(--flag); background: rgba(200,56,46,0.08); } }
.area .an { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #fff; font-size: 1.02rem; }
.area .ad { font-size: 0.78rem; color: rgba(255,255,255,0.55); margin-top: 2px; }
.area .card-link, .area a { color: #fff; }
/* Area chips on a light section */
.light .area { background: #fff; border-color: var(--line); }
@media (hover: hover) and (pointer: fine) { .light .area:hover { background: rgba(200,56,46,0.06); border-color: var(--flag); } }
.light .area .an { color: var(--ink); }
.light .area .ad { color: var(--ink-faint); }

/* ── FAQ ── */
.faq { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.3rem 0; }
.dark .faq-item, .dark-2 .faq-item { border-color: var(--line-light); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); list-style: none; }
.dark .faq-q, .dark-2 .faq-q { color: #fff; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q .chev { width: 22px; height: 22px; flex-shrink: 0; position: relative; }
.faq-q .chev::before, .faq-q .chev::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 2px; background: var(--flag); transform: translate(-50%,-50%); transition: transform 220ms var(--ease-out); }
.faq-q .chev::after { transform: translate(-50%,-50%) rotate(90deg); }
details[open] .faq-q .chev::after { transform: translate(-50%,-50%) rotate(0deg); }
/* The panel's height still snaps -- animating that needs either a wrapper
   element or ::details-content, which is not safe to rely on yet. The fade
   is enough to stop the answer appearing out of nowhere. */
@keyframes faqOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
details[open] .faq-a { animation: faqOpen 200ms var(--ease-out) both; }
.faq-a { padding-top: 0.9rem; color: var(--ink-soft); line-height: 1.75; font-size: 0.98rem; max-width: 72ch; }
.dark .faq-a, .dark-2 .faq-a { color: rgba(233,241,246,0.78); }

/* ── CTA band ── */
.cta-band { background: linear-gradient(135deg, var(--hull-2), var(--hull) 60%, var(--flag-deep) 160%); border-top: 1px solid var(--line-light); text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.78); margin: 0.7rem auto 1.8rem; max-width: 56ch; }
.cta-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ── Forms ── */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm); }
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.05rem; }
.field > label { font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); }
.field .req { color: var(--flag); }
.field input, .field select, .field textarea {
  padding: 0.82rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); font-size: 1rem;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out); outline: none; appearance: none; -webkit-appearance: none; width: 100%;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233f5568' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--flag); box-shadow: 0 0 0 3px rgba(200,56,46,0.14); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hint { font-size: 0.82rem; color: var(--ink-faint); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.6rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 0.5rem 0.75rem; border: 1.5px solid var(--line); border-radius: var(--r); font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); cursor: pointer;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out),
              color 140ms var(--ease-out), box-shadow 140ms var(--ease-out); }
.choice input:checked + span { border-color: var(--flag); background: rgba(200,56,46,0.08); color: var(--flag); font-weight: 600; }
.choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(200,56,46,0.18); }
.form-submit { width: 100%; margin-top: 0.4rem; }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
.form-consent { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; margin-top: 0.9rem; text-align: center; }
.form-consent a { color: var(--flag); text-decoration: underline; }
.form-success { display: none; margin-top: 0.9rem; padding: 0.9rem 1rem; background: rgba(30,120,60,0.09); border: 1px solid rgba(30,120,60,0.28); border-radius: var(--r); color: #1e7a3c; font-weight: 600; text-align: center; }
.form-note { font-size: 0.86rem; color: var(--ink-faint); margin-top: 0.35rem; }
fieldset { border: none; }
fieldset legend { font-family: var(--font-display); font-size: 0.82rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.5rem; }

/* Estimate section layout */
.estimate-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.estimate-points { display: grid; gap: 0.8rem; margin-top: 1.4rem; }
.estimate-points li { display: flex; gap: 0.6rem; align-items: flex-start; color: rgba(233,241,246,0.88); line-height: 1.5; }
.estimate-points svg { color: var(--flag-2); flex-shrink: 0; margin-top: 3px; }
.estimate-phone { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.7rem; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; color: #fff; font-size: 1.05rem; }
.estimate-phone svg { color: var(--flag-2); }

/* ── Footer ── */
.footer { background: var(--deep); color: rgba(255,255,255,0.66); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; margin-bottom: 1rem; }
.footer-brand .mark { width: 34px; height: 34px; }
.footer-brand .mark path, .footer-brand .mark line { stroke: #fff; }
.footer-brand .mark .flag-fill { fill: var(--flag); stroke: none; }
.footer-brand-text { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; letter-spacing: 0.05em; text-transform: uppercase; }
.footer-desc { font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.1rem; max-width: 34ch; }
.footer-phone { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: #fff; }
@media (hover: hover) and (pointer: fine) { .footer-phone:hover { color: var(--flag-2); } }
.footer-col h2 { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 0.9rem; font-weight: 600; }
.footer-col a { display: block; font-size: 0.9rem; padding: 0.28rem 0; color: rgba(255,255,255,0.6); transition: color 140ms var(--ease-out), transform 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover { color: var(--flag-2); transform: translateX(3px); } }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); margin-top: 2.6rem; padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
.footer-bottom a { color: rgba(255,255,255,0.7); }

/* ── Mobile sticky CTA ── */
.mcta { display: none; position: fixed; inset: auto 0 0 0; z-index: 900; background: var(--hull); border-top: 1px solid var(--line-light); gap: 0.6rem;
  /* Clear the iPhone home indicator. */
  padding: 0.6rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)); }
.mcta a { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.75rem; border-radius: var(--r); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.9rem; }
.mcta .mcta-call { flex: 1; border: 2px solid var(--flag); color: #fff; }
.mcta .mcta-quote { flex: 1.5; background: var(--flag); color: #fff; }

/* ── Scroll reveal — content is visible by default; .in only animates the entrance.
   Never gates visibility on JS, so sections never ship blank (headless render, JS off, hidden tab).

   Reveal is NOT applied to every section. One identical fade-and-rise on every
   block is the thing that reads as generated: it is a macro, not choreography.
   Only two things animate in, and they animate differently because they are
   different things:

     1. Members of a real list (cards, process steps, before/after pairs,
        referral rules) rise together with a short sibling stagger.
     2. A photograph in a split row wipes open from its top edge — the motion
        matches the object, and it is the only single element that moves.

   Section headings, body copy, forms, the star row and the fine print carry no
   reveal at all. They are simply there when you arrive at them. ── */

@keyframes revealIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.reveal.in { animation: revealIn 480ms var(--ease-out) both; }

/* Sibling stagger, capped at three steps. Items five and beyond start
   immediately: in a long grid (the gallery runs to 17 sliders) an accumulating
   delay just makes the bottom of the page feel like it is lagging behind. */
:is(.card, .step, .ba-wrap, .ref-rule).reveal.in:nth-child(2) { animation-delay: 55ms; }
:is(.card, .step, .ba-wrap, .ref-rule).reveal.in:nth-child(3) { animation-delay: 110ms; }
:is(.card, .step, .ba-wrap, .ref-rule).reveal.in:nth-child(4) { animation-delay: 165ms; }

/* The photo in a split row: a top-down wipe rather than a nudge upward.
   Ends on a negative inset so the finished state never clips the image's
   own box-shadow — inset(0) would crop it permanently. */
@keyframes revealMedia {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(-100px); }
}
.split-media.reveal.in { animation: revealMedia 700ms var(--ease-out-2) both; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .nav-links { gap: 1.35rem; }
  .nav-logo-text { font-size: 1.05rem; }
}

@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse .split-media { order: 0; }
  .estimate-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .mcta { display: flex; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .hero { min-height: 88vh; min-height: 88svh; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .trustbar .sep { display: none; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal, .reveal.in { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; }
  details[open] .faq-a, .mobile-menu, .mobile-menu.open { animation: none !important; transform: none !important; }
  .hero .hero-bg, .hero h1 .ln > span, .hero .hero-sub,
  .hero .hero-actions, .hero .hero-trust { animation: none !important; opacity: 1 !important; transform: none !important; }
  .hero .hero-dip { animation: none !important; opacity: 0 !important; }
}

/* ============================================================
   BEFORE / AFTER COMPARISON SLIDER

   Rebuilt on the pattern from Brian's Detail Services (see
   Reference Sites/), which has been deployed and working for months.

   A native <input type="range"> sits invisible over the whole frame and
   IS the interaction. JS writes inline styles straight onto the elements
   on its `input` event. That is the entire mechanism.

   The previous version routed everything through a registered custom
   property (--p) set on the parent. It had `inherits: false`, so the
   children that read it silently fell back to 50% and the wipe never
   moved -- no error, no 404, markup that looked perfectly correct.
   Nothing here can fail that way, because there is nothing to inherit.

   Free from the native input: keyboard (arrows, Home/End, Page keys),
   touch, screen-reader slider semantics, and correct RTL behaviour.
   ============================================================ */

.ba {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--hull);
  box-shadow: var(--shadow-sm);
  touch-action: pan-y;            /* horizontal drag is the range's, vertical scroll is the page's */
  user-select: none; -webkit-user-select: none;
  isolation: isolate;
}
.ba img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;              /* both halves are identical dims, so this never crops */
  display: block;
  pointer-events: none;
}
/* Default split. JS overwrites this inline; if JS never runs, the pair still
   reads as a clean 50/50 and nothing is hidden or cropped. */
.ba-before {
  position: absolute; inset: 0; z-index: 2;
  clip-path: inset(0 50% 0 0);
}

/* ── Divider + grip ──
   One full-width layer, translated. A percentage in translateX resolves
   against the element's own width, so a full-width layer moved 50% lands on
   half the frame -- while the bare 3px line would only move 1.5px. */
.ba-handle {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  transform: translateX(50%);
}
.ba-line {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 3px; margin-left: -1.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(7,20,32,0.28), 0 0 14px rgba(7,20,32,0.45);
}
.ba-grip {
  position: absolute; top: 50%; left: 0;
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--flag);
  box-shadow: 0 2px 6px rgba(7,20,32,0.28), 0 10px 24px rgba(7,20,32,0.30);
  display: flex; align-items: center; justify-content: center; gap: 3px;
  transition: box-shadow 160ms var(--ease-out);
}
.ba-grip::before, .ba-grip::after {
  content: ""; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.ba-grip::before { border-right: 7px solid var(--flag); }
.ba-grip::after  { border-left: 7px solid var(--flag); }

/* ── The control itself: invisible, full-frame, native ── */
.ba-range {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
/* The whole frame is the control, so the focus ring belongs on the frame. */
.ba-range:focus-visible { outline: 3px solid var(--flag); outline-offset: 3px; border-radius: var(--r-lg); }

@media (hover: hover) and (pointer: fine) {
  .ba:hover .ba-grip { box-shadow: 0 2px 6px rgba(7,20,32,0.28), 0 14px 30px rgba(7,20,32,0.38); }
}

/* ── Corner labels ── */
.ba-tag {
  position: absolute; top: 0.85rem; z-index: 5;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
  padding: 0.3rem 0.7rem; border-radius: 100px;
  background: rgba(7,20,32,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.ba-tag-b { left: 0.85rem; }
.ba-tag-a { right: 0.85rem; background: rgba(200,56,46,0.86); }
/* Fade each label out once its own side is nearly gone */
.ba[data-p-low="1"]  .ba-tag-b { opacity: 0; }
.ba[data-p-high="1"] .ba-tag-a { opacity: 0; }

/* ── Caption ── */
.ba-wrap { display: flex; flex-direction: column; }
.ba-cap { padding: 0.85rem 0.1rem 0; }
.ba-cap strong {
  display: block; font-family: var(--font-display); font-size: 1rem;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); margin-bottom: 1px;
}
.ba-cap span { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5; }
.dark .ba-cap strong, .dark-2 .ba-cap strong { color: #fff; }
.dark .ba-cap span, .dark-2 .ba-cap span { color: rgba(233,241,246,0.7); }

/* ── Grid ── */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1.6rem 1.4rem; }
.ba-grid.two { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 720px) {
  .ba-grid, .ba-grid.two { grid-template-columns: 1fr; }
}


/* ── Fix: results tiles crop to the shape of the photo that is actually in them,
   instead of forcing every source into 4/3 and slicing portrait shots in half. ── */
.result img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.result.sq   img { aspect-ratio: 1/1; }
.result.tall img { aspect-ratio: 3/4; }
.result.wide img { aspect-ratio: 16/9; }

/* ============================================================
   REFERRAL LADDER
   The bar length encodes the actual discount percentage, so the
   graphic carries real information rather than decorating.
   ============================================================ */
.ref-ladder { display: grid; gap: 0.55rem; margin-top: 1.8rem; }
.ref-tier {
  display: grid; grid-template-columns: 108px 1fr auto;
  align-items: center; gap: 1.1rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.dark .ref-tier, .dark-2 .ref-tier { background: rgba(255,255,255,0.035); border-color: var(--line-light); }
.ref-n {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
}
.ref-n b { font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-right: 0.34rem; }
.dark .ref-n, .dark-2 .ref-n { color: rgba(233,241,246,0.62); }
.dark .ref-n b, .dark-2 .ref-n b { color: #fff; }
.ref-track { display: block; height: 12px; border-radius: 100px; background: rgba(11,29,46,0.09); overflow: hidden; }
.dark .ref-track, .dark-2 .ref-track { background: rgba(255,255,255,0.10); }
.ref-fill {
  display: block; height: 100%; width: var(--w, 0%); border-radius: 100px; background: var(--flag);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 620ms var(--ease-out);
}
.ref-ladder.in .ref-fill { transform: scaleX(1); }
.ref-tier:nth-child(1) .ref-fill { transition-delay: 0ms; }
.ref-tier:nth-child(2) .ref-fill { transition-delay: 55ms; }
.ref-tier:nth-child(3) .ref-fill { transition-delay: 110ms; }
.ref-tier:nth-child(4) .ref-fill { transition-delay: 165ms; }
.ref-tier:nth-child(5) .ref-fill { transition-delay: 220ms; }
.ref-tier:nth-child(6) .ref-fill { transition-delay: 275ms; }
.ref-tier:nth-child(7) .ref-fill { transition-delay: 330ms; }
.ref-tier:nth-child(8) .ref-fill { transition-delay: 385ms; }
.ref-val {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--flag); text-align: right; white-space: nowrap;
}
.dark .ref-val, .dark-2 .ref-val { color: var(--flag-2); }

/* Top tier reads as the prize, not just another row */
.ref-tier.top { background: var(--flag); border-color: var(--flag); }
.ref-tier.top .ref-n, .ref-tier.top .ref-n b { color: #fff; }
.ref-tier.top .ref-track { background: rgba(255,255,255,0.28); }
.ref-tier.top .ref-fill { background: #fff; }
.ref-tier.top .ref-val { color: #fff; font-size: 1.12rem; }

/* Rules block */
.ref-rules { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.4rem; }
.ref-rule h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.5rem; }
.ref-rule p, .ref-rule li { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.65; }
.dark .ref-rule p, .dark .ref-rule li, .dark-2 .ref-rule p, .dark-2 .ref-rule li { color: rgba(233,241,246,0.78); }
.ref-rule ul { display: grid; gap: 0.35rem; }
.ref-rule ul li { padding-left: 1.05rem; position: relative; }
.ref-rule ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--flag); }

.ref-fine { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--ink-faint); line-height: 1.7; }
.dark .ref-fine, .dark-2 .ref-fine { border-color: var(--line-light); color: rgba(233,241,246,0.55); }

/* Homepage teaser: compact version of the ladder */
.ref-teaser { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
.ref-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.ref-chip {
  font-family: var(--font-display); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.45rem 0.8rem; border-radius: var(--r); border: 1px solid var(--line-light);
  background: rgba(255,255,255,0.05); color: #fff; white-space: nowrap;
}
.ref-chip b { color: var(--flag-2); }
.ref-chip.top { background: var(--flag); border-color: var(--flag); }
.ref-chip.top b { color: #fff; }
@media (max-width: 820px) {
  .ref-teaser { grid-template-columns: 1fr; }
  .ref-tier { grid-template-columns: 92px 1fr auto; gap: 0.7rem; padding: 0.6rem 0.8rem; }
  .ref-n b { font-size: 1.28rem; }
  .ref-val { font-size: 1.1rem; }
}
@media (max-width: 420px) {
  .ref-tier { grid-template-columns: 1fr auto; grid-template-areas: "n v" "t t"; row-gap: 0.5rem; }
  .ref-n { grid-area: n; } .ref-val { grid-area: v; } .ref-track { grid-area: t; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-fill { transition: none !important; transform: scaleX(1) !important; }
}

/* ============================================================
   LEGAL PAGES (terms, privacy)
   ============================================================ */
.legal { max-width: 780px; }
.legal-meta {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline;
  font-size: 0.84rem; color: var(--ink-faint);
  padding-bottom: 1.2rem; margin-bottom: 1.8rem; border-bottom: 1px solid var(--line);
}
.legal-toc {
  background: var(--foam); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.2rem 1.4rem; margin-bottom: 2.4rem;
}
.legal-toc h2 {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.7rem; font-weight: 600;
}
.legal-toc ol { list-style: none; counter-reset: toc; display: grid; gap: 0.28rem; }
.legal-toc li { counter-increment: toc; font-size: 0.92rem; }
.legal-toc li::before {
  content: counter(toc) ". "; color: var(--ink-faint);
  font-variant-numeric: tabular-nums; margin-right: 0.15rem;
}
.legal-toc a { color: var(--ink-soft); border-bottom: 1px solid transparent; transition: color 140ms var(--ease-out), border-color 140ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .legal-toc a:hover { color: var(--flag); border-bottom-color: var(--flag); }
}
.legal section { counter-increment: legal; margin-bottom: 2.2rem; scroll-margin-top: 96px; }
.legal { counter-reset: legal; }
.legal section > h2 {
  font-size: 1.22rem; text-transform: uppercase; letter-spacing: 0.02em;
  margin-bottom: 0.7rem; display: flex; gap: 0.6rem; align-items: baseline;
}
.legal section > h2::before {
  content: counter(legal); font-size: 0.86rem; color: var(--flag);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.legal h3 { font-size: 1rem; text-transform: none; letter-spacing: 0; margin: 1.2rem 0 0.4rem; color: var(--ink); }
.legal p { color: var(--ink-soft); line-height: 1.75; margin-bottom: 0.9rem; }
.legal ul { display: grid; gap: 0.42rem; margin: 0.6rem 0 1rem; }
.legal ul li { position: relative; padding-left: 1.1rem; color: var(--ink-soft); line-height: 1.65; }
.legal ul li::before { content: ""; position: absolute; left: 0; top: 0.66em; width: 5px; height: 5px; border-radius: 50%; background: var(--flag); }
.legal a:not(.btn) { color: var(--flag); text-decoration: underline; text-underline-offset: 2px; }
.legal .callout {
  /* A thick coloured stripe down one side is on impeccable's banned list.
     A full hairline border plus the tinted surface does the same job. */
  background: var(--foam); border: 1px solid var(--line);
  padding: 1rem 1.2rem; border-radius: var(--r); margin: 1rem 0 1.2rem;
}
.legal .callout p:last-child { margin-bottom: 0; }
.legal .callout strong { color: var(--ink); }
.legal dl { display: grid; gap: 0.7rem; margin: 0.8rem 0 1.2rem; }
.legal dt { font-weight: 600; color: var(--ink); font-size: 0.94rem; }
.legal dd { color: var(--ink-soft); font-size: 0.94rem; line-height: 1.65; }

/* ============================================================
   MOBILE LAYOUT FIXES
   .btn carries white-space:nowrap, so long labels such as
   "Send My Free Estimate Request" had a min-content width of
   ~470px. Inside a 350px column on a 390px screen that forced
   the whole document to 492px wide. body{overflow-x:hidden}
   hid the scrollbar but the layout was still being pushed.
   ============================================================ */

/* Grid and flex items default to min-width:auto, which stops them
   shrinking below their content. Let them shrink. */
.split > *, .estimate-grid > *, .ref-teaser > *, .cards > *,
.results > *, .ba-grid > *, .footer-grid > *, .field-row > * { min-width: 0; }

@media (max-width: 600px) {
  /* Let long button labels wrap rather than blow out the page */
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
}

/* Long unbroken strings (an email, a marina name) should never push the page wide */
body { overflow-wrap: break-word; }

/* ── Tap targets: WCAG 2.5.8 asks for 24x24 CSS px minimum ── */
.nav-hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.footer-col a { padding: 0.42rem 0; }
.footer-bottom a { display: inline-block; padding: 0.28rem 0; }
.legal-toc a { display: inline-block; padding: 0.18rem 0; }
.breadcrumb a { display: inline-block; padding: 0.2rem 0; }

/* Shown only while a form's Formspree id is still a placeholder: the submit is
   blocked and the visitor is given the phone number instead of a dead POST. */
.form-fallback {
  display: none; margin-top: 0.9rem; padding: 0.9rem 1rem;
  background: rgba(200,56,46,0.08); border: 1px solid rgba(200,56,46,0.3);
  border-radius: var(--r); color: var(--ink); font-size: 0.94rem; line-height: 1.55; text-align: center;
}
.form-fallback a { color: var(--flag); font-weight: 600; text-decoration: underline; }

/* ============================================================
   BLOG — index listing and long-form article body
   Extends the existing system: Oswald display, Inter body, the
   same navy/foam/flag palette. No new families, no new colours.
   `.prose` is left alone so the service and area pages render
   exactly as before; `.article` is the long-form treatment.
   ============================================================ */

/* ── Blog index ── */
.post-list { max-width: 74ch; margin: 0 auto; }
/* .card-link carries a stretched-link overlay (.card-link::before, absolute
   inset:0). Without a positioned ancestor that overlay escapes the post and
   swallows clicks across the whole page, and the last one in the DOM wins.
   position:relative confines it, and makes the whole row a click target. */
.post-item { position: relative; padding: 2.4rem 0; border-bottom: 1px solid var(--line); }
.post-item:first-child { padding-top: 0; }
.post-item:last-child { border-bottom: 0; padding-bottom: 0; }
.post-date {
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
}
.post-item h2 {
  margin-top: 0.55rem; font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.12; letter-spacing: 0.01em; text-transform: uppercase;
  text-wrap: balance;
}
.post-item h2 a { color: var(--ink); transition: color 160ms var(--ease-out); }
.post-item p { margin-top: 0.7rem; color: var(--ink-soft); line-height: 1.7; text-wrap: pretty; }
.post-item .card-link { margin-top: 0.9rem; }
@media (hover: hover) and (pointer: fine) {
  .post-item h2 a:hover { color: var(--flag); }
}

/* ── Article body ── */
.article { max-width: 68ch; margin: 0 auto; }
.article > * + * { margin-top: 1.15rem; }
.article p { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.75; text-wrap: pretty; }
.article .lead { font-size: 1.2rem; line-height: 1.65; color: var(--ink); }
.article h2 {
  margin-top: 2.7rem; font-size: clamp(1.45rem, 2.6vw, 1.95rem);
  line-height: 1.15; letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--ink); text-wrap: balance;
}
.article h3 {
  margin-top: 2rem; font-size: 1.18rem; line-height: 1.3;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
}
.article h2 + p, .article h3 + p { margin-top: 0.7rem; }
.article strong { color: var(--ink); font-weight: 600; }
.article a { color: var(--flag-deep); text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .article a:hover { color: var(--flag); }
}

.article ul { list-style: none; padding-left: 0; }
.article ul > li { position: relative; padding-left: 1.45rem; }
.article ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--flag);
}
.article ol { padding-left: 1.3rem; }
.article li { color: var(--ink-soft); line-height: 1.7; }
.article li + li { margin-top: 0.55rem; }

/* Full border, never a side stripe. */
.article blockquote {
  margin-top: 2.2rem; padding: 1.5rem 1.6rem;
  background: var(--foam-2); border: 1px solid var(--line); border-radius: var(--r);
}
.article blockquote p { margin: 0; color: var(--ink); font-size: 1.08rem; line-height: 1.6; }
.article blockquote cite {
  display: block; margin-top: 0.8rem; font-style: normal;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}

.article figure { margin-top: 2.2rem; }
.article figure img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.article figcaption { margin-top: 0.65rem; font-size: 0.86rem; color: var(--ink-faint); line-height: 1.5; }

.article .table-wrap { margin-top: 2rem; overflow-x: auto; }
.article table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.article th, .article td {
  text-align: left; padding: 0.8rem 0.9rem;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.article th {
  font-family: var(--font-display); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
  border-bottom-width: 2px;
}
.article td { color: var(--ink-soft); line-height: 1.6; }
.article tbody tr:last-child td { border-bottom: 0; }
.article td:first-child { color: var(--ink); font-weight: 500; }

/* Post meta sits on the dark interior hero. */
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  margin-top: 1.1rem; font-family: var(--font-display); font-size: 0.82rem;
  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.35); }

/* Next/previous reading at the foot of a post. */
.post-next { max-width: 68ch; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid var(--line); }
.post-next .post-date { margin-bottom: 0.4rem; }
.post-next h3 { font-size: 1.22rem; text-transform: uppercase; line-height: 1.25; }
.post-next h3 a { color: var(--ink); transition: color 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .post-next h3 a:hover { color: var(--flag); }
}