/* ═══════════════════════════════════════════════════════════
   FREITAS TRENCHLESS & PLUMBING
   Design system: "above grade / below grade"

   The site is built on the one idea that sells trenchless work:
   the problem is under the surface, and the surface stays intact.
   Light "concrete" sections sit above the grade line; deep slate
   "strata" sections sit below it. Every section transition is a
   grade line. Illustrations are cross-sections, never stock photos.
   ═══════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  /* Brand, sampled from the Freitas wordmark */
  --blue-900: #062F63;
  --blue-700: #0847A0;
  --blue:     #0B5FC4;
  --blue-400: #2E86F0;
  --blue-200: #9CC6F7;
  --blue-050: #E8F1FD;

  /* Below grade: wet slate, blue-cast rather than neutral black */
  --deep-900: #070D17;
  --deep-850: #0A1220;
  --deep-800: #0E1B2D;
  --deep-700: #16283F;
  --deep-600: #1F3A57;
  --deep-500: #33536F;

  /* Above grade: concrete, deliberately cooler than the usual cream */
  --con-050: #FAFAF8;
  --con-100: #F2F3F0;
  --con-200: #E4E6E1;
  --con-300: #D2D5CF;
  --con-400: #B0B4AD;

  /* Ink */
  --ink-900: #0B1219;
  --ink-700: #2C3844;
  --ink-500: #566573;
  --ink-400: #7A8894;

  /* Functional accents only, never decorative.
     Green is the APWA uniform locate colour for sanitary sewer;
     it appears where a diagram marks a sewer line, and to signal
     a resolved or intact state. Amber signals urgency. */
  --locate:  #2FA65C;
  --locate-b:#4FD183;
  --amber:   #E08A2B;
  --amber-d: #B96A12;
  --clay:    #8A5A3B;
  --clay-d:  #5E3B25;
  --rust:    #9C4A2A;

  /* Type */
  --display: 'Literata', 'Iowan Old Style', Palatino, Georgia, serif;
  --body:    'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale: fluid, clamped */
  --t-hero:  clamp(2.5rem, 1.15rem + 3.5vw, 4.75rem);
  --t-h1:    clamp(2.15rem, 1.15rem + 2.8vw, 3.85rem);
  --t-h2:    clamp(1.8rem, 1.2rem + 2vw, 2.9rem);
  --t-h3:    clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  --t-h4:    clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
  --t-body:  clamp(1rem, 0.97rem + 0.17vw, 1.09rem);
  --t-lede:  clamp(1.12rem, 1.02rem + 0.5vw, 1.4rem);
  --t-sm:    0.9375rem;
  --t-xs:    0.875rem;
  --t-mono:  0.8125rem;

  /* Layout */
  --gut: clamp(1.15rem, 4vw, 4rem);
  --max: 1280px;
  --max-text: 68ch;
  --sec: clamp(4.5rem, 9vw, 8.5rem);

  /* Phone safe areas. Zero everywhere except a notched device. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --hdr-h: 76px;

  --r-sm: 3px;
  --r:    5px;
  --r-lg: 8px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Header and footer are both dark, so the overscroll areas and the iOS
     status bar should be too. Without this the phone shows white bands
     above the header and below the sticky bar. */
  background: var(--deep-900);
}
body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--con-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--blue); color: #fff; }

/* ── Type primitives ────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.08; font-weight: 600; color: var(--ink-900); }
h1, h2 {
  font-family: var(--display);
  font-optical-sizing: auto;
  letter-spacing: -0.021em;
}
h3, h4 { font-family: var(--body); letter-spacing: -0.012em; font-weight: 650; line-height: 1.25; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.h-hero { font-size: var(--t-hero); font-weight: 600; line-height: 1.045; }
.h1 { font-size: var(--t-h1); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-500); max-width: 56ch; }
.on-deep .lede { color: rgba(255,255,255,.66); }

/* The mono "spec" voice: measurements, methods, footage, labels.
   Borrowed from inspection reports, which is where this business
   actually lives. Never used for prose. */
.spec {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-400);
}
.on-deep .spec { color: var(--blue-200); }
.spec-b { color: var(--blue); }

/* Eyebrow with a leading rule, reads as a survey annotation */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: '';
  width: 2.2rem; height: 1px;
  background: currentColor;
  flex: none;
}
.on-deep .eyebrow { color: var(--blue-400); }

/* ── Layout ─────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.wrap-nar { max-width: 900px; }
.section { padding-block: var(--sec); position: relative; }
.section-tight { padding-block: clamp(3rem,6vw,5rem); }

/* Below-grade sections. The top edge is the grade line: a hard
   hairline with a thin strata band beneath it. */
.on-deep {
  background: var(--deep-900);
  color: rgba(255,255,255,.72);
  position: relative;
}
.on-deep h1, .on-deep h2, .on-deep h3, .on-deep h4 { color: #fff; }
.grade-top { border-top: 1px solid var(--blue); }
.grade-top::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0;
  height: 5px;
  background: linear-gradient(90deg,
    var(--blue) 0 12%, transparent 12% 14%,
    var(--blue-700) 14% 46%, transparent 46% 48%,
    var(--blue) 48% 100%);
  opacity: .5;
  pointer-events: none;
}
.on-con { background: var(--con-100); }
.on-con-alt { background: var(--con-200); }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); align-items: center; }
.split-nar { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); }
.stack-lg { display: grid; gap: clamp(2.5rem,5vw,4rem); }
/* The measure that suits a display heading is far too narrow for the
   paragraph under it, so they get their own. */
.head { max-width: 58ch; margin-bottom: clamp(2.5rem,5vw,4rem); }
.head h2, .head .h2 { max-width: 22ch; }
.head .lede { margin-top: 1.25rem; max-width: 54ch; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  padding: 1.05rem 1.85rem;
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 650;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .18s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-pri { background: var(--blue); color: #fff; }
.btn-pri:hover { background: var(--blue-700); }
.btn-sec { background: transparent; color: var(--ink-900); border-color: var(--con-400); }
.btn-sec:hover { border-color: var(--ink-900); background: var(--con-050); }
/* Every dark container gets the light button treatment. Listing them
   in one place is what stops an ink-on-navy button reappearing the
   next time a button is dropped into a dark region. */
.on-deep .btn-sec,
.cta-band .btn-sec,
.ftr .btn-sec,
.callbar .btn-sec,
.mnav .btn-sec,
.consent .btn-sec,
.hdr .btn-sec { color: #fff; border-color: rgba(255,255,255,.28); }
.on-deep .btn-sec:hover,
.cta-band .btn-sec:hover,
.ftr .btn-sec:hover,
.callbar .btn-sec:hover,
.mnav .btn-sec:hover,
.consent .btn-sec:hover,
.hdr .btn-sec:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.btn-ghost { background: transparent; color: var(--blue); padding-inline: 0; }
.btn-ghost:hover { color: var(--blue-700); }
.btn-amber { background: var(--amber); color: #26160A; }
.btn-amber:hover { background: var(--amber-d); color: #fff; }
.btn-lg { padding: 1.25rem 2.3rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn .ar { transition: transform .3s var(--ease-out); }
.btn:hover .ar { transform: translateX(4px); }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ── Header ─────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--deep-900);
  border-bottom: 1px solid rgba(255,255,255,.09);
  padding-top: var(--safe-top);
}
.hdr-in { display: flex; align-items: center; gap: 1.5rem; height: var(--hdr-h); }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; margin-right: auto; }
.brand svg, .brand img { height: 46px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav-a {
  position: relative;
  padding: .55rem .8rem;
  font-size: var(--t-sm);
  font-weight: 550;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav-a:hover, .nav-a[aria-expanded="true"] { color: #fff; background: rgba(255,255,255,.08); }
.nav-a[aria-current="page"] { color: #fff; }
.nav-a[aria-current="page"]::after {
  content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .2rem;
  height: 1.5px; background: var(--blue-400);
}
.nav-item { position: relative; }
.chev { transition: transform .25s var(--ease); }
.nav-a[aria-expanded="true"] .chev { transform: rotate(180deg); }

.dd {
  position: absolute; top: calc(100% + .5rem); left: -.4rem;
  min-width: 310px;
  background: var(--deep-850);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: var(--r-lg);
  padding: .5rem;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.65);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item[data-open="true"] .dd { opacity: 1; visibility: visible; transform: none; }
.dd-a {
  display: block; padding: .6rem .8rem;
  font-size: var(--t-sm); font-weight: 500;
  color: rgba(255,255,255,.75); text-decoration: none;
  border-radius: var(--r-sm);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.dd-a:hover { background: rgba(255,255,255,.08); color: #fff; }

.hdr-cta { display: flex; align-items: center; gap: .7rem; flex: none; }
.tel {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .8125rem; font-weight: 500;
  letter-spacing: .02em;
  color: #fff; text-decoration: none;
  padding: .5rem .2rem;
  transition: color .2s var(--ease);
}
.tel:hover { color: var(--blue-400); }
.tel .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--locate-b); flex: none;
  box-shadow: 0 0 0 0 rgba(79,209,131,.6);
  animation: live 2.6s var(--ease) infinite;
}
@keyframes live {
  0%   { box-shadow: 0 0 0 0 rgba(79,209,131,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(79,209,131,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,209,131,0); }
}

.burger {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .6rem; margin-right: -.6rem;
}
.burger span {
  display: block; width: 22px; height: 1.5px; background: #fff;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mnav {
  position: fixed; inset: calc(var(--hdr-h) + var(--safe-top)) 0 0; z-index: 89;
  background: var(--deep-900);
  padding: 1.5rem var(--gut) calc(3rem + var(--safe-bottom));
  overflow-y: auto;
  display: none; flex-direction: column; gap: .1rem;
}
.mnav[data-open="true"] { display: flex; }
/* Direct children only. Scoping this to `>` keeps it away from the
   buttons in .m-cta, which need to stay inline-flex to centre their
   label and keep the phone icon on the same line. */
.mnav > a {
  display: block; padding: .95rem 0;
  font-size: 1.1rem; font-weight: 550; color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.mnav > a.sub { padding-left: 1rem; font-size: .95rem; font-weight: 400; color: rgba(255,255,255,.62); }
.mnav .m-cta { margin-top: 1.5rem; display: grid; gap: .7rem; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--deep-900);
  color: rgba(255,255,255,.72);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-in {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(2rem,5vw,4.5rem);
  align-items: center;
  padding-block: clamp(2.75rem,5vw,4.75rem) clamp(2.75rem,5vw,4.25rem);
  min-height: min(80vh, 760px);
}
.hero h1 { color: #fff; margin-bottom: 1.6rem; }
.hero .lede { color: rgba(255,255,255,.7); max-width: 46ch; }

/* Ambient strata glow behind the hero cross-section */
.hero::after {
  content: '';
  position: absolute; z-index: 1;
  right: -10%; top: 30%;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(11,95,196,.22) 0%, transparent 62%);
  pointer-events: none;
}

/* Trust strip under the hero copy */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem;
  margin-top: 2.6rem; padding-top: 1.8rem;
  border-top: 1px solid rgba(255,255,255,.13);
}
.ht { display: grid; gap: .2rem; }
.ht-n {
  font-family: var(--display); font-size: 1.75rem; font-weight: 600;
  color: #fff; line-height: 1;
}
.ht-l { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.5rem,2.6vw,2rem);
  background: var(--con-050);
  border: 1px solid var(--con-300);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .3s var(--ease), transform .3s var(--ease-out), box-shadow .3s var(--ease);
}
a.card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(6,47,99,.4);
}
.on-deep .card { background: var(--deep-850); border-color: rgba(255,255,255,.12); }
.on-deep a.card:hover { border-color: var(--blue-400); box-shadow: 0 18px 40px -18px rgba(0,0,0,.7); }
.card h3 { margin-bottom: .55rem; }
.card p:not(.spec) { font-size: var(--t-sm); color: var(--ink-500); }
.on-deep .card p:not(.spec) { color: rgba(255,255,255,.62); }
.card .spec { margin-bottom: 1.1rem; }
.card-foot { margin-top: auto; padding-top: 1.4rem; }
.card-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm); font-weight: 650; color: var(--blue);
}
.on-deep .card-link { color: var(--blue-400); }
a.card:hover .ar { transform: translateX(4px); }
.ar { transition: transform .3s var(--ease-out); flex: none; }

/* Service card carries its own cross-section thumbnail */
.card-svg { margin: -.4rem 0 1.2rem; border-radius: var(--r-sm); overflow: hidden; background: var(--deep-900); }
.card-svg svg { width: 100%; height: auto; display: block; }

/* ── Audience / who-we-work-for ─────────────────────────── */
.aud {
  display: grid; gap: .9rem;
  padding: 1.6rem 0;
  border-top: 1px solid rgba(255,255,255,.13);
}
.aud:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.aud-h { display: flex; align-items: baseline; gap: 1rem; }
.aud h3 { font-size: var(--t-h3); }
.aud p { color: rgba(255,255,255,.62); max-width: 62ch; }

/* ── The comparator: open-cut vs trenchless ─────────────── */
/* The signature element. It is the single objection every buyer
   of a $15k+ sewer job is weighing, answered visually. */
.cmp {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--deep-600);
  background: var(--deep-900);
  touch-action: pan-y;
  cursor: ew-resize;
  user-select: none;
}
.cmp-b > svg { width: 100%; height: auto; display: block; }
.cmp-b { position: relative; }              /* base layer sets the height */
.cmp-b--top {                                /* overlay, revealed by the split */
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 var(--split, 50%));
}
.cmp-handle {
  position: absolute; top: 0; bottom: 0; left: var(--split, 50%);
  width: 2px; background: #fff; transform: translateX(-1px);
  z-index: 4; pointer-events: none;
  box-shadow: 0 0 18px rgba(0,0,0,.5);
}
.cmp-knob svg { width: 17px; height: 17px; }
.cmp-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--deep-900);
  display: grid; place-items: center;
  cursor: ew-resize;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.cmp-tag {
  position: absolute; top: 1rem; z-index: 5;
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: .42rem .7rem; border-radius: var(--r-sm);
  background: rgba(7,13,23,.8);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}
.cmp-tag--l { left: 1rem; color: var(--amber); }
.cmp-tag--r { right: 1rem; color: var(--locate-b); }
.cmp-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem 1rem;
  margin: 0;
  padding: 1rem clamp(1rem,2.4vw,2.2rem) 1.4rem;
  border-top: 1px solid rgba(255,255,255,.1);
  background: var(--deep-900);
}
.cmp-facts dt {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: .25rem;
}
.cmp-facts dd {
  margin: 0; font-family: var(--mono); font-size: .8125rem;
  letter-spacing: .01em; line-height: 1.3;
}
.cmp-facts--cut dd        { color: var(--amber); }
.cmp-facts--trenchless dd { color: var(--locate-b); }

/* Visually hidden but available to screen readers. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.cmp-hint {
  position: absolute; bottom: 6.6rem; left: 50%; transform: translateX(-50%);
  z-index: 5; font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6); pointer-events: none;
  transition: opacity .4s var(--ease);
}
.cmp[data-touched="true"] .cmp-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem 1rem;
  margin: 0;
  padding: 1rem clamp(1rem,2.4vw,2.2rem) 1.4rem;
  border-top: 1px solid rgba(255,255,255,.1);
  background: var(--deep-900);
}
.cmp-facts dt {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: .25rem;
}
.cmp-facts dd {
  margin: 0; font-family: var(--mono); font-size: .8125rem;
  letter-spacing: .01em; line-height: 1.3;
}
.cmp-facts--cut dd        { color: var(--amber); }
.cmp-facts--trenchless dd { color: var(--locate-b); }

/* Visually hidden but available to screen readers. */
.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.cmp-hint { opacity: 0; }

/* ── Process / steps ────────────────────────────────────── */
/* Numbered because the order genuinely matters: you cannot line
   a pipe you have not cleaned, or clean one you have not surveyed. */
.steps { counter-reset: s; display: grid; gap: 0; }
.step {
  counter-increment: s;
  display: grid;
  grid-template-columns: 4.5rem minmax(0,1fr);
  gap: clamp(1rem,2.5vw,2rem);
  padding: clamp(1.5rem,3vw,2.1rem) 0;
  border-top: 1px solid var(--con-300);
  align-items: start;
}
.on-deep .step { border-color: rgba(255,255,255,.13); }
.steps .step:last-child { border-bottom: 1px solid var(--con-300); }
.on-deep .steps .step:last-child { border-color: rgba(255,255,255,.13); }
.step::before {
  content: counter(s,decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .1em; color: var(--blue);
  padding-top: .35rem;
}
.on-deep .step::before { color: var(--blue-400); }
.step h3 { margin-bottom: .4rem; }
.step p { font-size: var(--t-sm); color: var(--ink-500); max-width: 60ch; }
.on-deep .step p { color: rgba(255,255,255,.62); }

/* ── Checklist ──────────────────────────────────────────── */
.checks { display: grid; gap: .95rem; list-style: none; padding: 0; }
.checks li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem; align-items: start; font-size: var(--t-sm); }
.checks svg { margin-top: .3rem; color: var(--locate); }
.on-deep .checks svg { color: var(--locate-b); }

/* Good-fit / not-a-fit pairing: honesty as a sales asset */
.fit { display: grid; gap: 1px; background: var(--con-300); border: 1px solid var(--con-300); border-radius: var(--r-lg); overflow: hidden; }
.on-deep .fit { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.12); }
.fit-row { background: var(--con-050); padding: 1.4rem clamp(1.2rem,2.4vw,1.8rem); }
.on-deep .fit-row { background: var(--deep-850); }
.fit-row h4 { margin-bottom: .35rem; display: flex; align-items: center; gap: .6rem; }
.fit-row p { font-size: var(--t-sm); color: var(--ink-500); }
.on-deep .fit-row p { color: rgba(255,255,255,.6); }
.fit-hd {
  display: flex; align-items: center; gap: .6rem;
  padding: .95rem clamp(1.2rem,2.4vw,1.8rem);
  background: var(--con-200);
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
}
.on-deep .fit-hd { background: var(--deep-800); }
.fit-hd--y { color: var(--locate); }
.fit-hd--n { color: var(--amber-d); }
.on-deep .fit-hd--y { color: var(--locate-b); }
.on-deep .fit-hd--n { color: var(--amber); }

/* ── Testimonials ───────────────────────────────────────── */
.quote {
  display: flex; flex-direction: column;
  padding: clamp(1.6rem,2.8vw,2.2rem);
  background: var(--deep-850);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
}
.quote blockquote {
  font-family: var(--display); font-size: 1.2rem; line-height: 1.5;
  color: #fff; font-weight: 400; letter-spacing: -.008em;
  margin-bottom: 1.5rem;
}
.stars { display: flex; gap: 2px; color: var(--amber); margin-bottom: 1.1rem; }
.quote-by { margin-top: auto; display: grid; gap: .15rem; }
.quote-by .n { font-size: var(--t-sm); font-weight: 650; color: #fff; }
.quote-by .m { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--con-300); }
.on-deep .faq { border-color: rgba(255,255,255,.13); }
.faq:last-of-type { border-bottom: 1px solid var(--con-300); }
.on-deep .faq:last-of-type { border-color: rgba(255,255,255,.13); }
.faq summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem; padding: 1.5rem 0; cursor: pointer;
  font-weight: 650; font-size: var(--t-h4); color: var(--ink-900);
  list-style: none;
  transition: color .2s var(--ease);
}
.on-deep .faq summary { color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }
.on-deep .faq summary:hover { color: var(--blue-400); }
.faq-i { flex: none; margin-top: .35rem; color: var(--blue); transition: transform .3s var(--ease); }
.on-deep .faq-i { color: var(--blue-400); }
.faq[open] .faq-i { transform: rotate(45deg); }
.faq-a { padding-bottom: 1.6rem; max-width: 68ch; color: var(--ink-500); font-size: var(--t-sm); }
.on-deep .faq-a { color: rgba(255,255,255,.62); }
.faq[open] .faq-a { animation: fade .35s var(--ease-out); }
@keyframes fade { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

/* ── Form ───────────────────────────────────────────────── */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); font-weight: 500; }
.on-deep .field label { color: rgba(255,255,255,.55); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .95rem 1rem;
  background: var(--con-050);
  border: 1px solid var(--con-300);
  border-radius: var(--r);
  font-size: var(--t-sm);
  color: var(--ink-900);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.on-deep .field input, .on-deep .field select, .on-deep .field textarea {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.on-deep .field input::placeholder, .on-deep .field textarea::placeholder { color: rgba(255,255,255,.35); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; }
.on-deep .field input:focus, .on-deep .field select:focus, .on-deep .field textarea:focus { background: rgba(255,255,255,.09); border-color: var(--blue-400); }
.field textarea { resize: vertical; min-height: 110px; }
/* Native select popups don't inherit the dark field styling, which
   would render white options on a white sheet. */
.field select option { background: var(--con-050); color: var(--ink-900); }
.on-deep .field select option { background: #16202F; color: #fff; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237A8894' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.form-note { font-size: var(--t-xs); color: var(--ink-400); }
.form-status:empty { display: none; }
.form-status { font-size: var(--t-sm); color: var(--amber); }
.form-sent { display: grid; gap: .8rem; padding: 1rem 0; }
.form-sent h3 { color: var(--locate); }
.on-deep .form-sent h3 { color: var(--locate-b); }
.form-sent p { font-size: var(--t-sm); }
.on-deep .form-note { color: rgba(255,255,255,.45); }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }

/* Urgency selector, doubles as lead routing */
.urg { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem; }
.urg input { position: absolute; opacity: 0; pointer-events: none; }
.urg label {
  display: block; text-align: center; cursor: pointer;
  padding: .8rem .5rem;
  border: 1px solid var(--con-300);
  border-radius: var(--r);
  font-family: var(--body); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink-500);
  transition: all .2s var(--ease);
}
.on-deep .urg label { border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.6); }
.urg input:checked + label { border-color: var(--blue); background: var(--blue-050); color: var(--blue-900); }
.on-deep .urg input:checked + label { background: rgba(11,95,196,.22); border-color: var(--blue-400); color: #fff; }
.urg input:focus-visible + label { outline: 2px solid var(--blue-400); outline-offset: 2px; }

/* ── Area / town chips ──────────────────────────────────── */
.towns { display: flex; flex-wrap: wrap; gap: .45rem; }
.town {
  font-family: var(--mono); font-size: var(--t-xs);
  padding: .42rem .75rem;
  border: 1px solid var(--con-300);
  border-radius: 100px;
  color: var(--ink-500);
}
.on-deep .town { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.6); }

/* ── CTA band ───────────────────────────────────────────── */
.cta-band { background: var(--blue-900); color: #fff; position: relative; overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 15% 0%, rgba(46,134,240,.28), transparent 70%),
    radial-gradient(ellipse 50% 80% at 90% 100%, rgba(11,95,196,.35), transparent 70%);
  pointer-events: none;
}
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; }
.cta-band .lede { color: rgba(255,255,255,.78); }
/* The band is a below-grade context: components inside it need the
   dark treatment or they render ink-on-navy. */
.cta-band .eyebrow { color: var(--blue-200); }
.cta-band .checks svg { color: var(--locate-b); }
.cta-band .btn-sec { border-color: rgba(255,255,255,.34); }

/* ── Footer ─────────────────────────────────────────────── */
.ftr { background: var(--deep-900); color: rgba(255,255,255,.6); padding-block: clamp(3.5rem,6vw,5rem) 2rem; }
.ftr-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: clamp(2rem,4vw,3rem); }
.ftr h4 { font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.6); margin-bottom: 1.2rem; }
.ftr ul { list-style: none; padding: 0; display: grid; gap: .35rem; }
.ftr a {
  font-size: var(--t-sm); color: rgba(255,255,255,.62);
  text-decoration: none; transition: color .2s var(--ease);
  display: inline-block; padding-block: .3rem;   /* 24px minimum target */
}
.ftr a:hover { color: #fff; }
.ftr .brand svg, .ftr .brand img { height: 40px; margin-bottom: 1.2rem; }
.ftr-bio { font-size: var(--t-sm); max-width: 34ch; margin-bottom: 1.5rem; }
.ftr-bot {
  margin-top: clamp(2.5rem,5vw,4rem); padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: var(--t-xs); color: rgba(255,255,255,.58);
}
.ftr-bot a { font-size: var(--t-xs); }

/* ── Sticky mobile call bar ─────────────────────────────── */
.callbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 88;
  display: none;
  /* Visible by default and hidden only when JS says the hero is on
     screen. Fail-safe on purpose: if the script never runs, the primary
     mobile call-to-action still shows rather than disappearing. */
  transition: transform .4s var(--ease-out);
}
.callbar[data-visible="false"] {
  transform: translateY(105%);
  background: rgba(7,13,23,.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: .7rem var(--gut) calc(.7rem + var(--safe-bottom));
  gap: .6rem;
}
.callbar .btn { flex: 1; padding-block: .95rem; font-weight: 700; }
.callbar .btn-sec {
  background: #fff;
  color: var(--deep-900);
  border-color: #fff;
}
.callbar .btn-sec:hover { background: var(--con-200); border-color: var(--con-200); color: var(--deep-900); }

/* ── Breadcrumb ─────────────────────────────────────────── */
.crumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-family: var(--mono); font-size: var(--t-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); padding-top: 1.6rem; }
.crumb a { text-decoration: none; color: rgba(255,255,255,.6); }
.crumb a:hover { color: #fff; }
.crumb .sep { color: rgba(255,255,255,.6); }

/* ── Prose (guides) ─────────────────────────────────────── */
.prose { max-width: var(--max-text); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--t-h3); font-family: var(--body); font-weight: 650; margin-top: 2.6rem; }
.prose ul { padding-left: 1.2rem; display: grid; gap: .5rem; }

/* ── Scroll reveal ──────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(18px); }
.rv-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.rv-d1 { transition-delay: .07s; }
.rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .21s; }
.rv-d4 { transition-delay: .28s; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1080px) {
  .ftr-grid { grid-template-columns: 1fr 1fr 1fr; }
  .ftr .brand-col { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .nav, .hdr-cta .tel-label { display: none; }
  .burger { display: block; }
  .hero-in { grid-template-columns: 1fr; min-height: 0; gap: 3rem; }
  .split, .split-nar { grid-template-columns: 1fr; gap: 2.5rem; }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  body { padding-bottom: calc(68px + var(--safe-bottom)); }
  .hdr .brand img, .hdr .brand svg { height: 38px; }
  .callbar { display: flex; }
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
  .form-2 { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 1fr; gap: .5rem; }
  .step::before { padding-top: 0; }
  .hero-trust { gap: 1.4rem 1.8rem; }
  .ht-n { font-size: 1.5rem; }
  .urg { grid-template-columns: 1fr; }
  .hdr-cta .btn { display: none; }
  .cmp-facts { grid-template-columns: 1fr 1fr; padding-bottom: 1rem; }
  .cmp-hint { display: none; }
  .cmp-knob { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .ftr-grid { grid-template-columns: 1fr; }
}



/* ═══════════════════════════════════════════════════════════
   HOVER & INTERACTION LAYER

   Gated behind a real pointer so touch devices never inherit a
   stuck hover state after a tap. The recurring gesture is the
   grade line: a hairline that draws left to right, reusing the
   motif the whole site is built on rather than inventing a new
   one for every component.
   ═══════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {

  /* ── Cards: a grade line draws across the top edge ────── */
  a.card::after {
    content: '';
    position: absolute; inset-inline: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--blue-400));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--ease-out);
  }
  a.card:hover::after,
  a.card:focus-visible::after { transform: scaleX(1); }

  .card-svg svg { transition: transform .6s var(--ease-out); }
  a.card:hover .card-svg svg { transform: scale(1.045); }

  .card-link { transition: color .25s var(--ease); }
  a.card:hover .card-link { color: var(--blue-700); }
  .on-deep a.card:hover .card-link { color: var(--blue-200); }

  /* ── Primary navigation ───────────────────────────────── */
  .nav-a::before {
    content: '';
    position: absolute; left: .8rem; right: .8rem; bottom: .2rem;
    height: 1.5px; background: var(--blue-400);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--ease-out);
  }
  .nav-a:hover::before { transform: scaleX(1); }
  .nav-a:hover { background: rgba(255,255,255,.05); }

  .dd-a { transition: background .18s var(--ease), color .18s var(--ease), transform .22s var(--ease-out); }
  .dd-a:hover { transform: translateX(3px); }

  /* ── Buttons lift toward the cursor ───────────────────── */
  .btn-pri:hover   { transform: translateY(-1px); box-shadow: 0 9px 24px -10px rgba(11,95,196,.75); }
  .btn-amber:hover { transform: translateY(-1px); box-shadow: 0 9px 24px -10px rgba(224,138,43,.6); }
  .btn-sec:hover   { transform: translateY(-1px); }
  .btn:hover:active { transform: translateY(1px); box-shadow: none; }

  /* ── Phone: the live dot reacts ───────────────────────── */
  .tel .dot { transition: transform .3s var(--ease-out); }
  .tel:hover .dot { transform: scale(1.4); }

  .brand svg { transition: opacity .25s var(--ease); }
  .brand:hover svg { opacity: .82; }

  /* ── Underline that wipes in, for text-only links ─────── */
  .ftr a, .crumb a {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    background-position: 0 calc(100% - .3rem);
    transition: color .2s var(--ease), background-size .35s var(--ease-out);
  }
  .crumb a { background-position: 0 100%; }
  .ftr a:hover, .crumb a:hover { background-size: 100% 1px; }

  /* ── FAQ: the marker turns before it opens ────────────── */
  .faq:not([open]) summary:hover .faq-i { transform: rotate(90deg); }

  /* ── Comparator: the handle invites the drag ──────────── */
  .cmp-knob { transition: transform .25s var(--ease-out), box-shadow .25s var(--ease); }
  .cmp:hover .cmp-knob {
    transform: translate(-50%,-50%) scale(1.09);
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
  }
  .cmp:active { cursor: grabbing; }

  /* ── Form controls respond before focus ───────────────── */
  .field input:hover:not(:focus),
  .field select:hover:not(:focus),
  .field textarea:hover:not(:focus) { border-color: var(--con-400); }
  .on-deep .field input:hover:not(:focus),
  .on-deep .field select:hover:not(:focus),
  .on-deep .field textarea:hover:not(:focus) { border-color: rgba(255,255,255,.3); }

  .urg input:not(:checked) + label:hover { border-color: var(--ink-400); color: var(--ink-900); }
  .on-deep .urg input:not(:checked) + label:hover { border-color: rgba(255,255,255,.42); color: #fff; }

  /* ── Scanning surfaces: enough feedback to track a row ── */
  .fit-row { transition: background .25s var(--ease); }
  .fit-row:hover { background: var(--con-100); }
  .on-deep .fit-row:hover { background: var(--deep-800); }

  .step { transition: border-color .3s var(--ease); }
  .step::before { transition: color .3s var(--ease); }
  .step:hover::before { color: var(--blue-700); }
  .on-deep .step:hover::before { color: var(--blue-200); }

  .aud h3 { transition: color .3s var(--ease); }
  .aud:hover h3 { color: var(--blue-400); }

  .quote { transition: border-color .35s var(--ease), transform .35s var(--ease-out); }
  .quote:hover { border-color: rgba(255,255,255,.26); transform: translateY(-2px); }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
}

/* ── Print ──────────────────────────────────────────────── */
@media print {
  .hdr, .callbar, .cta-band, .mnav { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .on-deep { background: #fff !important; color: #000 !important; }
  .on-deep h1, .on-deep h2, .on-deep h3 { color: #000 !important; }
}

/* ═══════════════════════════════════════════════════════════
   CONSENT, LEGAL PAGES, AND LAUNCH ODDS AND ENDS
   ═══════════════════════════════════════════════════════════ */

/* ── Cookie consent ─────────────────────────────────────────
   A card rather than a full-width bar: it asks the question
   without holding the page hostage, and it never covers the
   sticky call button on a phone. */
.consent {
  position: fixed;
  left: var(--gut); bottom: var(--gut);
  z-index: 95;
  width: min(30rem, calc(100vw - var(--gut) * 2));
  padding: clamp(1.25rem, 2.4vw, 1.6rem);
  background: var(--deep-850);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -14px rgba(0,0,0,.7);
  color: rgba(255,255,255,.72);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.consent[data-open="true"] { opacity: 1; transform: none; }
.consent[hidden] { display: none; }
.consent h2 {
  font-family: var(--body); font-size: 1rem; font-weight: 650;
  color: #fff; margin-bottom: .5rem; letter-spacing: -.01em;
}
.consent p { font-size: var(--t-sm); line-height: 1.55; }
.consent p a { color: var(--blue-200); }
.consent .btn-row { margin-top: 1.2rem; }
.consent .btn { flex: 1 1 auto; padding-block: .85rem; }
@media (max-width: 720px) {
  .consent { bottom: calc(68px + var(--gut)); }
}

/* Inline text that behaves as a button, for "cookie settings". */
.link-btn {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--blue); }
.on-deep .link-btn:hover, .ftr .link-btn:hover { color: #fff; }

/* ── Legal page prose ───────────────────────────────────── */
.legal { max-width: 74ch; }
.legal h2 {
  font-family: var(--display); font-size: var(--t-h3); font-weight: 600;
  margin-top: 3rem; padding-top: 1.6rem;
  border-top: 1px solid var(--con-300);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 {
  font-size: 1.05rem; font-weight: 650;
  margin-top: 1.9rem; color: var(--ink-900);
}
.legal p, .legal li { color: var(--ink-700); }
.legal a { color: var(--blue); text-underline-offset: 2px; }
.legal code {
  font-family: var(--mono); font-size: .85em;
  background: var(--con-200); padding: .12em .4em; border-radius: 3px;
}
.legal-table {
  width: 100%; border-collapse: collapse; margin-top: 1.2rem;
  font-size: var(--t-sm);
}
.legal-table th, .legal-table td {
  text-align: left; vertical-align: top;
  padding: .8rem .9rem;
  border-bottom: 1px solid var(--con-300);
}
.legal-table th {
  font-family: var(--mono); font-size: var(--t-mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500); font-weight: 500;
  border-bottom-color: var(--ink-400);
}
@media (max-width: 620px) {
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; }
  .legal-table thead { display: none; }
  .legal-table tr { padding: .8rem 0; border-bottom: 1px solid var(--con-300); }
  .legal-table td { border: 0; padding: .2rem 0; }
  .legal-table td:first-child { font-weight: 650; color: var(--ink-900); }
}

/* Anything still needing a real value before launch. Deliberately
   loud: it must be impossible to ship one of these by accident. */
mark.todo {
  background: #FFE8A3; color: #6B4A00;
  font-family: var(--mono); font-size: .82em; font-weight: 500;
  padding: .15em .45em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* ═══════════════════════════════════════════════════════════
   LEAD CAPTURE MODAL

   One modal, fired by whichever trigger comes first. It opens
   with a short scale and fade rather than a slam, because the
   rest of the site is unhurried and an aggressive entrance
   would contradict it.
   ═══════════════════════════════════════════════════════════ */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: var(--gut);
}
.modal[hidden] { display: none; }

.modal-back {
  position: absolute; inset: 0;
  background: rgba(4, 8, 14, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.modal[data-open="true"] .modal-back { opacity: 1; }

.modal-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  width: min(56rem, 100%);
  max-height: calc(100dvh - var(--gut) * 2);
  overflow: auto;
  background: var(--deep-850);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.8);
  opacity: 0;
  transform: translateY(14px) scale(.985);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.modal[data-open="true"] .modal-card { opacity: 1; transform: none; }

.modal-art {
  position: relative;
  background: var(--deep-900);
  border-right: 1px solid rgba(255,255,255,.12);
  display: grid; align-items: center;
  overflow: hidden;
}
.modal-art svg { width: 100%; height: auto; display: block; }

.modal-body {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  color: rgba(255,255,255,.72);
  background: transparent;   /* .on-deep would otherwise repaint the card */
}
.modal-body h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.15rem);
  color: #fff; margin-bottom: .9rem;
}
.modal-body > p { font-size: var(--t-sm); line-height: 1.6; margin-bottom: 1.5rem; }

.modal-form { display: grid; gap: .9rem; position: relative; }
.modal-form .form-note { margin-top: .2rem; }
.modal-form .form-note a { color: var(--blue-200); }

.modal-dismiss {
  display: block; margin: 1.1rem auto 0;
  font-size: var(--t-xs); color: rgba(255,255,255,.45);
}
.modal-dismiss:hover { color: rgba(255,255,255,.8); }

.modal-x {
  position: absolute; top: .7rem; right: .7rem; z-index: 3;
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff; cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.modal-x:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }

/* Secondary buttons inside the modal need the dark treatment.
   Registered here alongside the others, same as every dark container. */
.modal .btn-sec { color: #fff; border-color: rgba(255,255,255,.28); }

@media (max-width: 760px) {
  .modal-card { grid-template-columns: 1fr; }
  .modal-art { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); max-height: 30vh; }
}
@media (max-width: 420px) {
  .modal-art { display: none; }   /* a phone needs the form, not the picture */
}
@media (prefers-reduced-motion: reduce) {
  .modal-card { transform: none; }
}

/* ── GoHighLevel form embed ─────────────────────────────────
   The widget brings its own light styling from inside the
   iframe, so it gets a light panel to sit on. Dropping a light
   form straight onto the dark card reads as a rendering fault. */
.ghl-embed {
  background: #fff;
  border-radius: var(--r);
  overflow: hidden;
  min-height: var(--ghl-h, 685px);
}
.ghl-embed iframe {
  display: block;
  width: 100%;
  height: var(--ghl-h, 685px);
  border: 0;
}

/* A single review gets the full measure and larger type, so one reads
   as a chosen pull-quote rather than as two missing cards. */
.quote-solo { max-width: 46rem; margin-inline: auto; text-align: center; padding: clamp(2rem,4vw,3rem); }
.quote-solo .stars { justify-content: center; }
.quote-solo blockquote { font-size: clamp(1.25rem,1rem + 1.1vw,1.7rem); line-height: 1.45; }
.quote-solo .quote-by { justify-items: center; }

/* ── Guide articles ─────────────────────────────────────────
   One column at a comfortable measure. A long read does not want
   the wide multi-column layout the marketing pages use. */
.guide-body { max-width: 74ch; margin-inline: auto; }

.toc {
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.6rem;
  background: var(--con-050);
  border: 1px solid var(--con-300);
  border-left: 3px solid var(--blue);
  border-radius: var(--r);
}
.toc ol { margin: .8rem 0 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.toc a { color: var(--ink-700); text-decoration: none; text-underline-offset: 2px; font-size: var(--t-sm); }
.toc a:hover { color: var(--blue); text-decoration: underline; }

.guide-body .prose h2 { scroll-margin-top: 100px; }
.guide-body .prose ol { padding-left: 1.3rem; display: grid; gap: .7rem; }
.guide-body .prose ol li { padding-left: .2rem; }

.guide-faq { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--con-300); }

.guide-cta {
  margin-top: 3rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--con-200);
  border-radius: var(--r-lg);
}
.guide-cta p { font-size: var(--t-sm); color: var(--ink-700); max-width: 56ch; }

.guide-more { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--con-300); }

/* Unwritten guides are listed but must not look clickable. */
.card-muted { opacity: .62; }