/**
 * ps-meridian — site-specific styles.
 * Bundled from the Claude Designer handoff:
 *   styles.css   — design tokens (:root vars), reset, base type, container, btn
 *   sections.css — shared section chrome (hero variants, services, how, why, cta, footer)
 *   pages.css    — internal pages (About, Services, Contact, Quote)
 *   mobile.css   — responsive overrides
 *
 * Source: claude-design/meridian-website-4/{styles,sections,pages,mobile}.css
 * Bundled 2026-06-24. Do not hand-edit — re-run scripts/bundle-design-css.sh
 * if the handoff CSS changes.
 */

/* =========================================================================
   1. styles.css — tokens + reset + base type + container + btn + footer
   ========================================================================= */
/* =========================================================
   MERIDIAN PROPERTY SERVICES — INDUSTRIAL/BLUEPRINT SYSTEM
   ========================================================= */

:root {
  /* Brand palette — Meridian Property Services */
  --ink: #111111;            /* Charcoal Black — primary */
  --ink-90: #1A1A1A;
  --ink-70: #2E2E2E;

  --blue: #1F3A5F;           /* Deep Slate Blue — primary */
  --blue-ink: #1F3A5F;
  --navy: #0B1F33;           /* Deep Navy — tertiary */
  --steel: #4A6FA5;          /* Steel Blue — tertiary accent */
  --teal: #2F6F73;           /* Muted Teal — secondary accent */
  --sage: #7A9E7E;           /* Sage Green — tertiary accent */
  --stone: #A8A29E;          /* Warm Stone — tertiary accent */
  --safety: #2F6F73;         /* legacy alias → muted teal */

  /* Cool gray ramp anchored on Cool Gray + Soft Concrete */
  --slate-900: #111111;
  --slate-800: #1F3A5F;
  --slate-700: #3D4651;
  --slate-500: #6B7280;      /* Cool Gray */
  --slate-400: #9AA1AB;
  --slate-300: #E5E9EA;      /* Soft Concrete */
  --slate-200: #E2E5EA;
  --slate-100: #F1F3F5;

  /* Surfaces */
  --paper: #FFFFFF;          /* White — neutral foundation */
  --paper-2: #E5E9EA;        /* Soft Concrete — section bands */

  /* Lines */
  --line: #111111;
  --line-soft: rgba(17, 17, 17, 0.12);
  --line-softer: rgba(17, 17, 17, 0.06);

  /* Tinted blue surface for soft callouts */
  --blue-soft: #E6ECF4;

  --font-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Montserrat", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1440px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "ss01", "cv11";
}

img { display: block; max-width: 100%; }

/* ---------- TYPOGRAPHY ---------- */
.mono { font-family: var(--font-mono); font-feature-settings: "zero", "ss02"; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  font-weight: 500;
}
.eyebrow b { color: var(--ink); font-weight: 600; }

.h-display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.92;
  text-transform: none;
}

/* ---------- LAYOUT ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 48px;
}

.rule { height: 1px; background: var(--line); width: 100%; }
.rule-soft { height: 1px; background: var(--line-soft); width: 100%; }

/* Coordinate / corner ticks */
.tick-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tick-row .center { text-align: center; }

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-700);
}
.section-tag .dot {
  width: 6px; height: 6px;
  background: var(--blue);
  display: inline-block;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.btn { background: var(--teal); border-color: var(--teal); }
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn .arrow {
  display: inline-block;
  width: 18px; height: 1px;
  background: currentColor;
  position: relative;
}
.btn .arrow::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--blue);
  padding-bottom: 4px;
  cursor: pointer;
}
.btn-link:hover { color: var(--ink); border-color: var(--ink); }

/* ---------- NAVIGATION ---------- */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.nav-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: 8px 48px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink);
  color: var(--slate-300);
}
.nav-meta .right { text-align: right; }
.nav-meta .blink {
  width: 6px; height: 6px;
  background: var(--safety);
  display: inline-block;
  margin-right: 8px;
  animation: blink 1.6s step-end infinite;
  vertical-align: middle;
}
@keyframes blink { 50% { opacity: 0.25; } }

.nav-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 18px 48px;
  gap: 48px;
}
.nav-logo img {
  height: 30px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 36px;
  justify-content: center;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  position: relative;
  padding: 4px 2px;
}
.nav-links a:hover { color: var(--blue-ink); }
.nav-links a.active { color: var(--blue); }
.nav-links a.active::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--blue);
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav-phone {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}

/* ---------- PLACEHOLDERS ---------- */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      135deg,
      var(--slate-200) 0 1px,
      transparent 1px 10px
    ),
    var(--slate-100);
  border: 1px solid var(--line);
  overflow: hidden;
}
.ph-dark {
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,0.06) 0 1px,
      transparent 1px 10px
    ),
    var(--slate-900);
  border-color: var(--ink);
  color: var(--slate-300);
}
.ph .ph-label {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-700);
  background: var(--paper);
  padding: 6px 8px;
  border: 1px solid var(--line);
}
.ph-dark .ph-label {
  color: var(--slate-100);
  background: var(--ink);
  border-color: var(--slate-700);
}
.ph .ph-corner {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.ph-dark .ph-corner { color: var(--slate-400); }

/* corner ticks */
.ph::before, .ph::after,
.ph .tl, .ph .tr {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--ink);
}
.ph::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.ph::after  { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }
.ph .tl { top: -1px; right: -1px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.ph .tr { bottom: -1px; left: -1px; border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.ph-dark::before, .ph-dark::after,
.ph-dark .tl, .ph-dark .tr { border-color: var(--paper); }

/* ---------- LOGO MARK MINI ---------- */
.mark {
  width: 28px;
  height: 28px;
  background: var(--ink);
  position: relative;
  flex-shrink: 0;
}
.mark::before, .mark::after {
  content: "";
  position: absolute;
  background: var(--paper);
}
.mark::before { left: 6px; top: 4px; width: 4px; height: 20px; }
.mark::after  { left: 14px; top: 8px; width: 4px; height: 16px; }

/* ---------- SECTIONS ---------- */
section { position: relative; }

.section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  padding: 64px 0 40px;
  border-top: 1px solid var(--line);
}
.section-head .label-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 4.5vw, 72px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0;
  max-width: 22ch;
}
.section-head .section-lede {
  max-width: 100%;
}

/* ---------- DARK BLOCKS ---------- */
.dark-block {
  background: var(--ink);
  color: var(--paper);
}
.dark-block .eyebrow,
.dark-block .section-tag { color: var(--slate-400); }
.dark-block .section-tag .dot { background: var(--safety); }
.dark-block .rule,
.dark-block .section-head { border-color: var(--slate-700); }
.dark-block .btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.dark-block .btn:hover {
  background: var(--safety);
  border-color: var(--safety);
  color: var(--ink);
}
.dark-block .btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}

/* ---------- UTILITY ---------- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.col-span-6 { grid-column: span 6; }
.col-span-5 { grid-column: span 5; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

/* =========================================================================
   2. sections.css — hero, services, how, why, cta, footer
   ========================================================================= */
/* =========================================================
   SECTIONS — hero variants, services, why, how, cta, footer
   ========================================================= */

/* ---------- shared ---------- */
.mono-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  margin-right: 8px;
  color: var(--blue-ink);
}
.dark-block .mono-tag { color: var(--safety); }
.blue { color: var(--blue-ink); }
.safety { color: var(--safety); }

.small-meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-500);
  text-transform: uppercase;
  line-height: 1.6;
}
.dark-block .small-meta { color: var(--slate-400); }

.section-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--slate-700);
  max-width: 64ch;
  margin: 24px 0 0;
}
.dark-block .section-lede { color: var(--slate-300); }

.hero-tickrow,
.cta-tickrow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.hero-tickrow.dark { color: var(--slate-400); border-color: var(--slate-700); }
.hero-tickrow .center,
.cta-tickrow .center { text-align: center; }
.hero-tickrow .right,
.cta-tickrow .right { text-align: right; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 32px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.dark-block .hero-eyebrow {
  color: var(--paper);
  background: rgba(255,255,255,0.04);
  border-color: var(--slate-700);
}
.hero-eyebrow .dot {
  width: 8px; height: 8px;
  background: var(--blue);
  display: inline-block;
}
.dark-block .hero-eyebrow .dot { background: var(--safety); }
.hero-eyebrow.center-eyebrow { margin-left: auto; margin-right: auto; display: flex; justify-content: center; max-width: max-content; }

/* =========================================================
   HERO — CINEMA (full-bleed photo banner)
   ========================================================= */
.hero { padding: 0 0 80px; background: var(--paper); }
.hero-cinema { padding-bottom: 0; background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--blue-soft) 100%); }

.hero-cinema .hero-eyebrow {
  margin: 32px 0 28px;
}

.hero-cinema-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 7.4vw, 124px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 0 0 36px;
  max-width: 22ch;
  text-wrap: balance;
}
.hero-cinema-headline .blue { display: inline; }

.hero-photo-frame {
  position: relative;
  border: 1px solid var(--ink);
}
.hero-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0c10;
}
.field-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.hero-photo-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
}
.hero-photo-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%);
}

/* photo overlay tags */
.hp-tag {
  position: absolute;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(10, 10, 11, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 8px 12px;
  backdrop-filter: blur(4px);
  line-height: 1.5;
}
.hp-tag-tl { top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 10px; }
.hp-tag-tr { top: 18px; right: 18px; text-align: right; }
.hp-rec {
  width: 8px; height: 8px;
  background: oklch(0.65 0.22 25);
  display: inline-block;
  border-radius: 50%;
  animation: blink 1.6s step-end infinite;
}

/* live scope card overlay */
.hp-card {
  position: absolute;
  bottom: 24px;
  left: 24px;
  width: 360px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 18px 14px;
}
.hp-card-head {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-500);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.hp-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* CTA card overlay */
.hp-cta {
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 460px;
  background: rgba(10, 10, 11, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 22px 24px;
  backdrop-filter: blur(6px);
  color: var(--paper);
}
.hp-cta-sub {
  font-size: 16px;
  line-height: 1.5;
  color: var(--paper);
  margin: 0 0 18px;
  max-width: 50ch;
}
.hp-cta .hero-actions { margin: 0; gap: 20px; }
.hp-cta .btn {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.hp-cta .btn:hover {
  background: var(--safety);
  border-color: var(--safety);
}
.btn-link.light {
  color: var(--paper);
  border-color: var(--paper);
}
.btn-link.light:hover {
  color: var(--safety);
  border-color: var(--safety);
}

/* crosshair */
.hp-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hp-crosshair .cx-h {
  position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,0.5);
}
.hp-crosshair .cx-v {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.5);
}
.hp-crosshair .cx-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 50%;
}

.hero-stats-strip {
  border-top: none;
  margin-top: 0;
}

.hero-headline,
.hero-sub {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.hero-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  color: var(--slate-700);
  max-width: 50ch;
  letter-spacing: 0;
}
.dark-block .hero-sub { color: var(--slate-300); }

/* legacy support for stacked/dark variants */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  padding-top: 56px;
}
.hero-left { display: flex; flex-direction: column; }
.hero-headline .blue,
.hero-headline .safety { display: inline; }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 56px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: auto;
}
.dark-block .hero-stats { border-color: var(--slate-700); }
.stat {
  padding: 24px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat:last-child { border-right: none; }
.stat-dark { border-color: var(--slate-700); }
.stat-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-l {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
}
.stat-dark .stat-l { color: var(--slate-400); }

/* hero right (split) */
.hero-right { display: flex; flex-direction: column; gap: 20px; }
.hero-ph {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 12px),
    linear-gradient(180deg, #2a3a4f 0%, #1a2536 100%);
}
.hero-ph .ph-label,
.hero-ph .ph-corner { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.hero-ph-overlay {
  position: absolute;
  bottom: 60px;
  left: 24px;
  right: 24px;
}
.overlay-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  max-width: 340px;
}
.oc-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.oc-row span { color: var(--slate-500); }
.oc-row b { color: var(--ink); font-weight: 600; }
.status-ok { color: var(--blue-ink) !important; }

.hero-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.hero-mini { aspect-ratio: 16 / 10; }

/* =========================================================
   HERO — STACKED variant
   ========================================================= */
.hero-stacked .hero-headline-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(72px, 9vw, 168px);
  line-height: 0.88;
  letter-spacing: -0.035em;
  margin: 32px 0 48px;
  text-align: center;
}
.hero-stacked-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.hero-sub-stacked {
  font-size: 22px;
  line-height: 1.45;
  color: var(--slate-700);
  margin: 0;
  max-width: 60ch;
}
.hero-stacked-bottom .hero-actions { margin: 0; justify-self: end; }

.hero-band {
  margin-top: 40px;
}
.hero-band-ph {
  position: relative;
  aspect-ratio: 21 / 8;
  background: var(--ink);
  border-color: var(--ink);
}
.hero-band-ph .ph-label,
.hero-band-ph .ph-corner { color: var(--paper); background: var(--ink); border-color: var(--slate-700); }
.blueprint-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-stats-wide { margin-top: 40px; }

/* =========================================================
   HERO — DARK / MANIFEST variant
   ========================================================= */
.hero-dark { background: var(--ink); color: var(--paper); padding-bottom: 80px; position: relative; overflow: hidden; }
.hero-dark > .container { position: relative; z-index: 2; }
.hero-dark-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-dark-bg-img {
  position: absolute;
  inset: -10% 0 0 0;
  height: 130%;
  will-change: transform;
}
.hero-dark-bg .field-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(0.85) contrast(1.05);
}
.hero-dark-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 1px;
}
.hero-dark-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.78) 45%, rgba(10,10,11,0.4) 100%),
    linear-gradient(180deg, rgba(10,10,11,0.6) 0%, rgba(10,10,11,0) 30%, rgba(10,10,11,0) 70%, rgba(10,10,11,0.85) 100%);
}
.hero-dark .hero-tickrow.dark { border-color: rgba(255,255,255,0.18); }
.hero-dark-inner {
  padding-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hero-headline-dark { color: var(--paper); max-width: 22ch; }
.hero-dark-inner .hero-sub { color: var(--slate-300); margin-bottom: 40px; }
.hero-dark-inner .hero-stats-wide { width: 100%; margin-top: 16px; }
.hero-grid-dark { padding-top: 56px; }
.hero-grid-dark .hero-headline { color: var(--paper); }
.manifest {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--slate-700);
  padding: 20px;
}
.manifest-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-400);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--slate-700);
  margin-bottom: 8px;
}
.manifest-row {
  display: grid;
  grid-template-columns: 1.6fr 1.2fr 1fr 0.8fr;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--slate-700);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.manifest-row:last-of-type { border-bottom: none; }
.m-site { color: var(--paper); font-weight: 600; }
.m-scope { color: var(--slate-300); }
.m-cycle { color: var(--slate-400); }
.m-status.ok { color: oklch(0.78 0.16 145); }
.m-status.warn { color: var(--safety); }
.m-status.queue { color: var(--slate-400); }
.manifest-foot {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--slate-700);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.hero-stats-dark { margin-top: 24px; }

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee {
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  padding: 18px 0;
}
.marquee-track {
  display: flex;
  gap: 56px;
  white-space: nowrap;
  animation: scroll-x 60s linear infinite;
  font-size: 14px;
  letter-spacing: 0.16em;
}
.marquee-item { display: inline-flex; align-items: center; gap: 16px; }
.marquee-item .m-bullet { color: var(--safety); font-size: 8px; }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

/* =========================================================
   SERVICES
   ========================================================= */
.services { padding: 0 0 96px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.service-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #ffffff;
  transition: background 200ms ease;
}
.service-card:hover { background: #fafafa; }
.sc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.sc-n {
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--blue);
}
.hs-n { color: var(--blue); }
.sc-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sc-tag {
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border: 1px solid var(--line);
  color: var(--slate-700);
}
.sc-ph {
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--ink);
}
.sc-ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(0.85) contrast(1.02);
}
.sc-ph-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.sc-ph .ph-label {
  background: rgba(10,10,11,0.82);
  color: var(--paper);
  border-color: rgba(255,255,255,0.18);
}
.sc-ph .ph-corner {
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.sc-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
.sc-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate-700);
  margin: 0;
}
.sc-link { margin-top: auto; align-self: flex-start; }

.services-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
}

/* =========================================================
   WHY
   ========================================================= */
.why { padding: 0 0 96px; position: relative; overflow: hidden; }
.why > .container { position: relative; z-index: 2; }
.why-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.why-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
}
.why-bg-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.85) 0%, rgba(10,10,11,0.75) 50%, rgba(10,10,11,0.85) 100%);
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--slate-700);
  border-left: 1px solid var(--slate-700);
}
.why-card {
  border-right: 1px solid var(--slate-700);
  border-bottom: 1px solid var(--slate-700);
  padding: 36px 32px;
  background: rgba(255,255,255,0.015);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--slate-700);
}
.wc-n {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--safety);
  font-weight: 600;
}
.wc-stat { text-align: right; }
.wc-stat-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--paper);
}
.wc-stat-l {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
  margin-top: 4px;
  text-transform: uppercase;
}
.wc-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--paper);
}
.wc-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-300);
  margin: 0;
}

.why-band {
  margin-top: 64px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 56px;
  align-items: center;
  padding: 48px;
  border: 1px solid var(--slate-700);
  background: rgba(255,255,255,0.02);
}
.why-band-left { display: flex; flex-direction: column; gap: 10px; }
.why-band-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 156px;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--paper);
  display: flex;
  align-items: flex-start;
}
.why-band-n span {
  color: var(--safety);
  font-size: 72px;
  margin-top: 8px;
  margin-left: 4px;
}
.why-band-l {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate-400);
}
.why-band-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.why-band-right p {
  font-size: 19px;
  line-height: 1.5;
  color: var(--slate-300);
  margin: 0;
  max-width: 56ch;
}

/* =========================================================
   HOW
   ========================================================= */
.how { padding: 96px 0; background: #d4dadd; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  padding-top: 16px;
}
.how-step {
  position: relative;
  padding-top: 28px;
}
.hs-rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--ink);
}
.how-step:not(:first-child) .hs-rule { background: var(--line-soft); }
.hs-n {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--blue-ink);
  margin-bottom: 16px;
  font-weight: 600;
}
.hs-t {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.15;
  color: #2F6F73;
}
.hs-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 20px;
  display: block;
}
.hs-icon svg { width: 100%; height: 100%; display: block; }
.hs-b {
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate-700);
  margin: 0;
}

/* =========================================================
   CTA
   ========================================================= */
.cta-block { background: var(--blue-soft); padding: 0 0 80px; }
.cta-inner { padding-top: 0; }
.cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
  padding: 64px 0 0;
}
.cta-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 5.5vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
}
.cta-headline .blue { color: var(--teal); }
.cta-sub {
  font-size: 20px;
  line-height: 1.45;
  color: var(--slate-700);
  max-width: 52ch;
  margin: 0 0 36px;
}
.cta-actions { display: flex; gap: 16px; align-items: center; }

.quote-card {
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 28px;
}
.qc-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--slate-700);
  margin-bottom: 8px;
}
.qc-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px dashed var(--slate-700);
}
.qc-l {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
}
.qc-i {
  font-size: 16px;
  color: var(--paper);
  font-weight: 500;
}
.qc-row-final { border-bottom: none; padding-bottom: 8px; }
.qc-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--slate-700);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
}
.qc-status { color: oklch(0.78 0.16 145); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { padding: 64px 0 24px; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--slate-700);
}
.footer-logo-row { display: flex; align-items: center; gap: 14px; }
.fl-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--paper);
}
.fl-sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--slate-400);
  margin-top: 4px;
}
.footer-tag {
  margin-top: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate-300);
  max-width: 38ch;
}
.footer-coords {
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--slate-400);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.fc-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--slate-400);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-700);
}
.footer-col a {
  font-size: 14px;
  color: var(--paper);
  text-decoration: none;
  transition: color 120ms ease;
}
.footer-col a:hover { color: var(--safety); }

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  padding-top: 24px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-400);
}
.footer-bottom .center { text-align: center; }
.footer-bottom .right { text-align: right; }

/* =========================================================================
   3. pages.css — Internal pages
   ========================================================================= */
/* =========================================================
   PAGES — shared sub-page styles
   ========================================================= */

/* ---------- PAGE HERO ---------- */
.page-hero {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--slate-700);
  padding: 0 0 64px;
  position: relative;
  overflow: hidden;
}
.page-hero > .container { position: relative; z-index: 2; }
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page-hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
}
.page-hero .ph-tickrow {
  border-bottom: 1px solid var(--slate-700);
  color: var(--slate-400);
}
.page-hero .ph-tickrow .mono-tag { color: var(--paper); }
.page-hero .section-tag { color: var(--slate-400); }
.page-hero .section-tag .dot { background: var(--safety); }
.page-hero-title { color: var(--paper); }
.page-hero-accent { color: #2f6f73; }
.ph-tickrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--slate-500);
}
.ph-tickrow .center { text-align: center; }
.ph-tickrow .right { text-align: right; }
.ph-tickrow .mono-tag {
  font-weight: 700;
  color: var(--ink);
  margin-right: 8px;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  padding: 88px 0 24px;
  align-items: end;
}
.page-hero-grid.single {
  grid-template-columns: 1fr;
  padding: 88px 0 64px;
}
.ph-left .section-tag { margin-bottom: 32px; }
.page-hero-title {
  font-family: var(--font-display);
  font-size: 88px;
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0;
}
.page-hero-lede {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 56ch;
}
.page-hero-meta {
  list-style: none;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 32px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
.page-hero-meta li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.phm-k { color: var(--slate-500); }
.phm-v { color: var(--ink); font-weight: 600; }

/* ---------- PAGE CTA ---------- */
.page-cta { padding: 96px 0; }
.page-cta-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: end;
  border-top: 1px solid var(--slate-700);
  border-bottom: 1px solid var(--slate-700);
  padding: 64px 0;
}
.page-cta-title {
  font-family: var(--font-display);
  font-size: 68px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 24px 0 24px;
  color: var(--paper);
}
.page-cta-body {
  font-size: 17px;
  line-height: 1.55;
  color: var(--slate-300);
  max-width: 50ch;
  margin: 0;
}
.pc-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.pc-right .btn,
.pc-right .btn-ghost { padding: 18px 24px; }

/* =========================================================
   SERVICES PAGE
   ========================================================= */
.svc-index { padding: 56px 0 24px; border-bottom: 1px solid var(--line); background: #ffffff; }
.svc-index-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--slate-500);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.svc-index-head .center { text-align: center; }
.svc-index-head .right { text-align: right; }

.svc-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc-index-list li { border-bottom: 1px solid var(--line-soft); }
.svc-index-list li:last-child { border-bottom: 0; }
.svc-index-list a {
  display: grid;
  grid-template-columns: 80px 1fr 40px;
  gap: 32px;
  align-items: center;
  padding: 24px 0;
  text-decoration: none;
  color: var(--ink);
  transition: padding 160ms ease, color 160ms ease;
}
.svc-index-list a:hover {
  padding-left: 16px;
  color: #2f6f73;
}
.svc-idx-n {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--slate-500);
}
.svc-idx-t {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.svc-idx-arrow {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--slate-500);
  text-align: right;
}
.svc-index-list a:hover .svc-idx-arrow { color: #2f6f73; }

/* SERVICE DETAIL */
.svc-detail { padding: 80px 0; border-bottom: 1px solid var(--line); }
.svc-detail.last { border-bottom: 0; }
.svc-detail.flip { background: var(--paper-2); }

.svc-detail-grid {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 64px;
  align-items: start;
}
.svc-detail.flip .svc-detail-grid {
  grid-template-columns: 6fr 6fr;
  direction: rtl;
}
.svc-detail.flip .svc-detail-grid > * { direction: ltr; }

.svc-photo .ph {
  height: 520px;
  position: relative;
}
.svc-photo .ph::before,
.svc-photo .ph::after,
.svc-photo .ph .tl,
.svc-photo .ph .tr { display: none; }
.svc-photo .sc-ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-photo .sc-ph-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0) 60%, rgba(10,10,11,0.45) 100%);
}

.svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.svc-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.svc-n {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--blue);
  font-weight: 700;
}
.svc-kicker {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--slate-500);
}
.svc-title {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 24px;
  color: var(--ink);
}
.svc-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 52ch;
}
.svc-block {
  margin-bottom: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.svc-block-h {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate-500);
  margin-bottom: 12px;
}
.svc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.svc-list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
}
.svc-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--blue);
  font-family: var(--font-mono);
  font-weight: 700;
}
.svc-cadence {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-h2 {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--ink);
}
.about-h2.light { color: var(--paper); }

.about-story { padding: 88px 0 80px; border-bottom: 1px solid var(--line); background: #ffffff; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 64px;
}
.story-side {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 120px;
  align-self: start;
}
.story-cols {
  columns: 2;
  column-gap: 48px;
  margin-top: 24px;
}
.story-cols p {
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 16px;
  break-inside: avoid;
}

/* COVERAGE */
.coverage { padding: 80px 0; border-bottom: 1px solid var(--line); }
.coverage-grid {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: 48px;
  align-items: stretch;
}
.cov-map { position: relative; }
.cov-map-ph {
  height: 460px;
  background: var(--paper-2);
  position: relative;
}
.cov-map-svg {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
.cov-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hq-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.coverage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.coverage-list li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: baseline;
}
.cov-k {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--blue);
  font-weight: 700;
}
.cov-v {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
}

/* TEAM */
.team { padding: 96px 0; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.team-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team-photo {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-90);
  position: relative;
  overflow: hidden;
}
.team-photo .team-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(1);
}
.team-photo::before,
.team-photo::after,
.team-photo .tl,
.team-photo .tr { display: none; }
.team-initials {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 800;
  color: var(--slate-700);
  letter-spacing: -0.02em;
}
.team-meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--slate-400);
  border-top: 1px solid var(--slate-700);
  padding-top: 14px;
}
.team-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--paper);
}
.team-role {
  font-size: 14px;
  color: var(--slate-300);
}
.team-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--slate-700);
  gap: 24px;
}
.team-cta-meta {
  display: flex;
  gap: 24px;
  color: var(--slate-400);
}
.team-cta-meta span:first-child { color: var(--paper); font-weight: 600; }

/* CERTS */
.certs { padding: 96px 0 64px; }
.certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.cert-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 28px 32px;
  background: var(--paper);
}
.cert-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cert-n {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--blue);
  font-weight: 700;
}
.cert-meta {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--slate-500);
}
.cert-t {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.cert-v {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.4;
}
.certs-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32px 0;
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid-section { padding: 80px 0; border-bottom: 1px solid var(--line); }
.contact-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: start;
}
.contact-h2 {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.0;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 24px 0 16px;
  color: var(--ink);
}
.contact-lede {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 32px;
  max-width: 52ch;
  color: var(--ink);
}
.contact-lede a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form {
  display: grid;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field-l {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--slate-500);
}
.field input,
.field textarea,
.field select,
.cad-select {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  padding: 14px 16px;
  border-radius: 0;
  transition: border-color 120ms ease;
  appearance: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
.cad-select:focus {
  outline: none;
  border-color: var(--blue);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select,
.cad-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 12px) 22px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.contact-form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 20px;
}

.contact-aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-card {
  border: 1px solid var(--line);
  padding: 24px;
  background: var(--paper);
}
.cc-h {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 12px;
}
.cc-big {
  display: block;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-bottom: 10px;
}
.cc-big.mid { font-size: 22px; letter-spacing: -0.01em; }
.cc-big.mid-sm { font-size: 18px; letter-spacing: -0.005em; }
.cc-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate-500);
}
.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.hours-list li:last-child { border-bottom: 0; }

/* HQ MAP */
.contact-map-section { padding: 80px 0; background: #ffffff; }
.map-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.hq-map-ph {
  height: 460px;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.hq-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   QUOTE PAGE
   ========================================================= */
.quote-section { padding: 64px 0 96px; }
.quote-stepper {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.qs-step {
  position: relative;
  padding: 20px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-right: 1px solid var(--line-soft);
  transition: background 120ms ease, color 120ms ease;
}
.qs-step:last-child { border-right: 0; }
.qs-step:hover { background: var(--paper-2); }
.qs-step.active {
  background: var(--ink);
  color: var(--paper);
}
.qs-step.active .qs-n { color: var(--safety); }
.qs-step.done .qs-n { color: var(--blue); }
.qs-step.done::after {
  content: "✓";
  position: absolute;
  top: 18px;
  right: 14px;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--blue);
}
.qs-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate-500);
}
.qs-t {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.quote-card {
  border: 1px solid var(--line);
  background: var(--paper);
}
.quote-card-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--slate-300);
}
.quote-card-head .center { text-align: center; color: var(--paper); font-weight: 700; }
.quote-card-head .right { text-align: right; }

.quote-card-body { padding: 40px 28px; }
.quote-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
.qcf-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.btn[disabled],
.btn-ghost[disabled] { opacity: 0.4; cursor: not-allowed; }

.qf-grid {
  display: grid;
  gap: 24px;
}
.qf-grid.two { grid-template-columns: 1fr 1fr; }
.qf-grid.one { grid-template-columns: 1fr; }
.qf-grid .field.full { grid-column: 1 / -1; }

/* SERVICES PICKER */
.quote-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.svc-pick {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  background: var(--paper);
  transition: background 120ms ease;
}
.svc-pick:hover { background: var(--paper-2); }
.svc-pick input { display: none; }
.svc-pick .sp-box {
  width: 22px;
  height: 22px;
  border: 1px solid var(--ink);
  background: var(--paper);
  position: relative;
  transition: background 120ms ease;
}
.svc-pick input:checked + .sp-box { background: var(--ink); }
.svc-pick input:checked + .sp-box::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--safety);
}
.sp-t {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 4px;
  color: var(--ink);
}
.sp-d {
  font-size: 13px;
  color: var(--slate-500);
}

/* CADENCE TABLE */
.cadence-table {
  border: 1px solid var(--line);
}
.cad-h {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  font-size: 11px;
  letter-spacing: 0.14em;
  background: var(--ink);
  color: var(--slate-300);
  padding: 14px 20px;
}
.cad-h .center { text-align: center; }
.cad-h .right { text-align: right; }
.cad-row {
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  gap: 16px;
  padding: 14px 20px;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
}
.cad-row:last-child { border-bottom: 0; }
.cad-t {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

/* UPLOAD */
.upload-block {
  border: 1px solid var(--line);
  padding: 28px;
}
.upload-h {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate-500);
  margin-bottom: 16px;
}
.upload-drop {
  border: 1px dashed var(--ink);
  background: var(--paper-2);
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.upload-drop-i {
  font-size: 32px;
  color: var(--blue);
  font-family: var(--font-mono);
}
.upload-drop-t {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.upload-drop-s {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--slate-500);
}
.upload-or {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate-500);
  padding: 18px 0 6px;
}

/* SUBMIT SUMMARY */
.submit-summary {
  border: 1px solid var(--ink);
  padding: 28px;
  background: var(--paper-2);
}
.ss-h {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 14px;
}
.ss-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
}
.ss-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--slate-500);
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.ss-meta .center { text-align: center; }
.ss-meta .right { text-align: right; color: var(--blue); font-weight: 700; }

/* small responsive guard rails for narrow preview */
@media (max-width: 1100px) {
  .page-hero-grid,
  .story-grid,
  .coverage-grid,
  .contact-grid,
  .page-cta-grid,
  .svc-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .certs-grid { grid-template-columns: 1fr 1fr; }
  .quote-services-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   4. mobile.css — responsive overrides
   ========================================================================= */
/* =========================================================
   MOBILE.CSS  —  responsive layer for Meridian site
   Loaded after styles.css and sections.css so it overrides.
   Breakpoints:
     - 860px : tablet/mobile transition (nav burger appears)
     - 640px : phone layout
   ========================================================= */

/* ---------- BURGER (hidden on desktop) ---------- */
.nav-burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--ink);
  cursor: pointer;
  padding: 0;
  margin-right: 16px;
}
.nav-burger span {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.nav-burger span:nth-child(1) { top: 14px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 28px; }
.nav-burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- DRAWER (hidden on desktop) ---------- */
.nav-drawer {
  display: none;
}

/* =========================================================
   ≤ 860px  —  tablet & phone
   ========================================================= */
@media (max-width: 860px) {

  /* ---- Container padding ---- */
  .container { padding: 0 20px; }

  /* ---- Top meta strip ---- */
  .nav-meta {
    grid-template-columns: 1fr auto;
    padding: 6px 20px;
    font-size: 9.5px;
    gap: 8px;
  }
  .nav-meta .center { display: none; }
  .nav-meta .right { text-align: right; }

  /* ---- Main nav row ---- */
  .nav-main {
    grid-template-columns: 1fr auto !important;
    gap: 16px;
    padding: 12px 20px !important;
  }
  .nav-logo img { height: 26px !important; width: auto !important; }
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-burger { display: inline-block; margin-right: 0; }

  /* ---- Drawer ---- */
  .nav-drawer {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--paper);
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1);
    overflow-y: auto;
    padding-top: env(safe-area-inset-top);
  }
  .nav-drawer.is-open { transform: translateY(0); }
  .nav-drawer-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 80px 24px 32px;
    gap: 24px;
  }
  .nav-drawer-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--slate-500);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .nav-drawer-links {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .nav-drawer-links a {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: baseline;
    gap: 16px;
    padding: 22px 4px;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: var(--ink);
  }
  .nav-drawer-links a .ndl-n {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--slate-500);
  }
  .nav-drawer-links a .ndl-l {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 38px;
    letter-spacing: -0.025em;
    line-height: 0.95;
  }
  .nav-drawer-links a.active .ndl-l { color: var(--blue); }
  .nav-drawer-links a.active .ndl-n { color: var(--blue); }
  .nav-drawer-cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
  }
  .nav-drawer-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 18px 22px;
    font-size: 13px;
  }
  .nav-drawer-phone {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--ink);
    text-decoration: none;
    padding: 12px;
    border: 1px solid var(--line);
  }
  .nav-drawer-foot {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    color: var(--slate-500);
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }

  /* ---- Section heads ---- */
  .section-head {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 0 24px;
  }
  .section-head h2 {
    font-size: clamp(34px, 9vw, 48px) !important;
  }

  /* ---- Hero ---- */
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
    padding-top: 32px;
  }
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hero-stats > * {
    border-bottom: 1px solid var(--line);
  }
  .hero-mini-row { grid-template-columns: 1fr !important; }
  .hero-stacked-bottom {
    grid-template-columns: 1fr !important;
    gap: 24px;
  }

  /* ---- Manifest rows ---- */
  .manifest-row {
    grid-template-columns: 1fr !important;
    gap: 4px;
    padding: 16px 0 !important;
  }

  /* ---- Services / Why / How grids ---- */
  .services-grid { grid-template-columns: 1fr !important; }
  .why-grid { grid-template-columns: 1fr !important; }
  .how-grid { grid-template-columns: 1fr !important; gap: 16px; }

  /* ---- CTA ---- */
  .cta-tickrow {
    grid-template-columns: 1fr !important;
    gap: 8px;
    text-align: left !important;
  }
  .cta-tickrow .center,
  .cta-tickrow .right { text-align: left !important; }
  .qc-row { grid-template-columns: 1fr !important; gap: 4px; }

  /* ---- Footer ---- */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .footer-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px 16px;
  }
  .footer-bottom {
    grid-template-columns: 1fr !important;
    text-align: left !important;
    gap: 4px;
  }
  .footer-bottom .center,
  .footer-bottom .right { text-align: left !important; }

  /* ---- Display type tightening ---- */
  h1, .display-1 {
    font-size: clamp(40px, 11vw, 64px) !important;
    line-height: 0.95 !important;
  }

  /* ---- Generic .grid-12 collapse ---- */
  .grid-12 {
    grid-template-columns: 1fr !important;
    gap: 20px;
  }
  [class*="col-span-"] { grid-column: span 1 !important; }

  /* ---- Sub-page grids (pages.css) ---- */
  .page-hero-grid,
  .page-cta-grid,
  .story-grid,
  .coverage-grid,
  .svc-detail-grid,
  .contact-grid,
  .ph-tickrow,
  .svc-index-head,
  .svc-index-list a,
  .quote-services-grid,
  .qf-grid.two,
  .quote-card-head,
  .cad-h, .cad-row,
  .ss-meta {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    direction: ltr !important;
  }
  .svc-detail.flip .svc-detail-grid { direction: ltr !important; }
  .svc-index-list a { gap: 8px !important; padding: 16px 0 !important; }
  .team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .certs-grid { grid-template-columns: 1fr !important; }
  .quote-stepper { grid-template-columns: repeat(3, 1fr) !important; }
  .quote-stepper > * { font-size: 9px !important; }
  .page-hero-grid { padding: 48px 0 24px !important; }
  .page-cta-grid { padding: 32px 0 !important; gap: 24px !important; }
  .coverage-list li { grid-template-columns: 40px 1fr !important; gap: 8px !important; }
}

/* =========================================================
   ≤ 480px  —  small phone tightening
   ========================================================= */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .nav-drawer-inner { padding: 72px 20px 24px; }
  .nav-drawer-links a .ndl-l { font-size: 32px; }
  .hero-stats { grid-template-columns: 1fr !important; }
}


/* =========================================================================
   BOOTSCORE NEUTRALIZATION — added 2026-06-25
   The Claude Design CSS assumes minimal browser-default base styles. BootScore
   ships with Bootstrap 5 base + its own .site-content / .site-main wrappers
   that add margin, padding, and Bootstrap container behavior. The overrides
   below strip those so design sections render as the prototype intended.
   ========================================================================= */

/* Wrapper chain: zero out BootScore wrappers between <body> and the section */
.site-content,
.content-area,
.site-main,
.aw-entry,
.aw-entry--page {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

/* Ensure articles are block-level full-width with no decoration */
article.aw-entry {
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Body base — re-assert font + color over any inherited Bootstrap */
body.page-template-template-aw-custom {
	font-family: var(--font-body) !important;
	color: var(--ink);
	background: var(--paper);
	font-size: 16px;
	line-height: 1.5;
}

/* Headings — re-assert Montserrat over Bootstrap's h1-h6 */
body.page-template-template-aw-custom h1,
body.page-template-template-aw-custom h2,
body.page-template-template-aw-custom h3,
body.page-template-template-aw-custom h4,
body.page-template-template-aw-custom h5,
body.page-template-template-aw-custom h6 {
	font-family: var(--font-display);
	margin: 0;
}

/* Buttons — Bootstrap's .btn is a fundamentally different element; the design
   .btn is a square, ink/teal background with white text + arrow span. Reset
   Bootstrap's per-element CSS vars to neutral so the design's own .btn rule
   (color: var(--paper); background: var(--teal)) wins without interference. */
body.page-template-template-aw-custom .btn {
	--bs-btn-padding-x: 22px;
	--bs-btn-padding-y: 16px;
	--bs-btn-color: var(--paper);
	--bs-btn-bg: var(--teal);
	--bs-btn-border-color: var(--teal);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--ink);
	--bs-btn-hover-border-color: var(--ink);
	--bs-btn-active-color: var(--paper);
	--bs-btn-active-bg: var(--ink);
	--bs-btn-active-border-color: var(--ink);
	--bs-btn-line-height: 1;
	box-shadow: none;
	border-radius: 0;
}

/* Ghost button — transparent background, dark text, dark border */
body.page-template-template-aw-custom .btn-ghost.btn,
body.page-template-template-aw-custom .btn.btn-ghost {
	--bs-btn-color: var(--ink);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--ink);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-bg: var(--ink);
	--bs-btn-hover-border-color: var(--ink);
}

/* Anchor reset — design uses unstyled anchors with selective restyle */
body.page-template-template-aw-custom a {
	color: inherit;
	text-decoration: none;
}

/* List reset where design wants no bullets (the design CSS resets these per
   list, but Bootstrap's _reboot adds default ul padding) */
body.page-template-template-aw-custom ul,
body.page-template-template-aw-custom ol {
	margin: 0;
}


/* =========================================================================
   DESIGN-PARITY OVERRIDES — added 2026-06-25
   The handoff CSS has .section-head set to a 200px/1fr grid, but every page
   in the Claude Design prototype overrides it to a single column via inline
   styles. Restore the prototype's actual rendered behavior here.
   ========================================================================= */

.section-head {
	grid-template-columns: 1fr !important;
}

/* Hide the BootScore parent's "scroll to top" button (added by parent footer
   before we replaced it; the floating navy button is off-brand). */
.top-button {
	display: none !important;
}

/* The page template's #content / #primary / .site-main no longer wrap our
   sections in a Bootstrap container, but BootScore's parent layout may add
   padding via CSS. Force-strip on Meridian template only. */
body.page-template-template-aw-custom #content,
body.page-template-template-aw-custom .site-main {
	padding: 0;
	margin: 0;
	max-width: none;
}


/* =========================================================================
   HERO DARK — height / padding to match design's inline styles
   The prototype sets `padding: 0; height: 1200px` on the section and
   `padding-top: 241px` on .hero-dark-inner. We reproduce with min-height
   and inner-padding so the hero fills the viewport on first paint.
   ========================================================================= */

.hero.hero-dark {
	min-height: clamp(640px, 100vh, 1200px);
	padding-bottom: 0;          /* design has padding 0 + height 1200 inline */
	display: flex;
	align-items: center;
}

.hero-dark .hero-dark-inner {
	padding-top: clamp(96px, 18vh, 240px);
	width: 100%;
}

@media (max-width: 860px) {
	.hero.hero-dark {
		min-height: 560px;
	}
	.hero-dark .hero-dark-inner {
		padding-top: 96px;
	}
}

/* =========================================================================
   PAGE HERO — meta strip styling for the prototype's bottom-row stat list
   The original meta is rendered as a single horizontal strip with key/value
   pairs separated by hairlines.
   ========================================================================= */

.page-hero {
	position: relative;
	background: var(--ink);
	color: var(--paper);
	min-height: 480px;
	padding: 96px 0 64px;
	overflow: hidden;
}
.page-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; filter: saturate(0.85) contrast(1.05); }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero-grid.single { max-width: 1100px; }
.ph-kicker { color: var(--slate-300); margin-bottom: 12px; }
.page-hero-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(48px, 6vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.025em;
	color: var(--paper);
	margin: 0 0 24px;
}
.page-hero-accent { color: var(--teal); }
.page-hero-lede {
	color: var(--slate-300);
	font-size: 20px;
	line-height: 1.5;
	max-width: 56ch;
	margin: 0 0 40px;
}
.page-hero-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 24px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.phm-item { display: flex; flex-direction: column; gap: 6px; }
.phm-k { color: var(--slate-300); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.phm-v { color: var(--paper); font-size: 20px; font-weight: 600; font-family: var(--font-display); }

/* =========================================================================
   PAGE CTA — dark band, simple two-col grid
   ========================================================================= */

.page-cta.dark-block {
	background: var(--ink);
	color: var(--paper);
	padding: 80px 0;
}
.page-cta-grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 64px;
	align-items: center;
}
.pc-left .section-tag { color: var(--slate-300); margin-bottom: 16px; }
.page-cta-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4vw, 64px); line-height: 0.95; color: var(--paper); margin: 0 0 16px; }
.page-cta-body { color: var(--slate-300); font-size: 18px; max-width: 52ch; margin: 0; }
.pc-right { display: flex; gap: 16px; align-items: center; }
.page-cta .btn-ghost { color: var(--paper); border-color: var(--paper); background: transparent; }
.page-cta .btn-ghost:hover { background: var(--paper); color: var(--ink); }

@media (max-width: 860px) {
	.page-cta-grid { grid-template-columns: 1fr; gap: 32px; }
	.pc-right { flex-direction: column; align-items: stretch; }
	.pc-right .btn { justify-content: center; }
}

/* =========================================================================
   SVC INDEX — Services-page jump list
   ========================================================================= */

.svc-index { background: var(--paper-2); padding: 48px 0 56px; }
.svc-index-head { display: grid; grid-template-columns: 1fr 1fr 1fr; color: var(--slate-700); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.svc-index-head .center { text-align: center; }
.svc-index-head .right { text-align: right; }
.svc-index-list { list-style: none; padding: 0; margin: 0; }
.svc-index-list li { border-bottom: 1px solid var(--line-soft); }
.svc-index-list a { display: grid; grid-template-columns: 80px 1fr 40px; gap: 16px; padding: 20px 0; align-items: center; color: var(--ink); transition: color 120ms; }
.svc-index-list a:hover { color: var(--teal); }
.svc-idx-n { color: var(--slate-500); font-size: 12px; }
.svc-idx-t { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.svc-idx-arrow { text-align: right; font-size: 24px; color: var(--slate-500); }

/* =========================================================================
   ABOUT STORY — two-col body
   ========================================================================= */

.about-story { background: var(--paper-2); padding: 96px 0; }
.story-grid { display: grid; grid-template-columns: 1fr; gap: 48px; max-width: 1100px; }
.story-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.story-cols p { color: var(--slate-700); font-size: 16px; line-height: 1.65; margin: 0 0 16px; }
.about-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 4vw, 64px); line-height: 0.95; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 32px; }

@media (max-width: 860px) {
	.story-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* =========================================================================
   CERTS GRID — About-page compliance cards
   ========================================================================= */

.certs { background: var(--paper); padding: 64px 0 96px; }
.certs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.cert-card { background: var(--paper); border: 1px solid var(--line-soft); padding: 28px; }
.cert-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.cert-n { color: var(--teal); font-size: 12px; }
.cert-meta { color: var(--slate-500); font-size: 11px; letter-spacing: 0.12em; }
.cert-t { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin: 0 0 8px; color: var(--ink); }
.cert-v { color: var(--slate-700); font-size: 16px; }
.certs-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 40px; margin-top: 24px; border-top: 1px solid var(--line-soft); gap: 24px; flex-wrap: wrap; }

/* =========================================================================
   CONTACT GRID — form col + dispatch cards aside
   ========================================================================= */

.contact-grid-section { background: var(--paper); padding: 80px 0 96px; }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
.contact-form-col .section-tag { color: var(--slate-500); margin-bottom: 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--font-mono); }
.contact-h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: 0.95; margin: 0 0 16px; }
.contact-lede { color: var(--slate-700); font-size: 18px; line-height: 1.5; max-width: 52ch; margin: 0 0 32px; }
.contact-aside { display: flex; flex-direction: column; gap: 24px; }
.contact-card { background: var(--paper); border-left: 1px solid var(--line-soft); padding: 18px 0 18px 24px; }
.cc-h { color: var(--teal); font-size: 11px; letter-spacing: 0.12em; margin-bottom: 8px; }
.cc-big { display: block; font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--ink); margin-bottom: 8px; line-height: 1; }
.cc-sub { color: var(--slate-700); font-size: 14px; line-height: 1.5; }
.cc-sub p { margin: 0; }
.hours-list { list-style: none; padding: 0; margin: 0; font-size: 12px; letter-spacing: 0.08em; }
.hours-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line-soft); color: var(--slate-700); }

.contact-map-section { background: var(--paper); padding: 32px 0 96px; }
.contact-map-section .map-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.contact-map-section .section-tag { color: var(--slate-500); }
.contact-map-section .small-meta { color: var(--slate-500); font-size: 11px; letter-spacing: 0.1em; }
.hq-address { margin-top: 16px; color: var(--slate-700); font-size: 16px; }

@media (max-width: 860px) {
	.contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================================
   QUOTE INTAKE — visual stepper + form card
   ========================================================================= */

.quote-section { background: var(--paper); padding: 64px 0 96px; }
.quote-stepper { list-style: none; padding: 0; margin: 0 0 32px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.qs-step { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0; border-top: 2px solid var(--line-soft); position: relative; }
.qs-step.active { border-top-color: var(--teal); }
.qs-n { color: var(--slate-500); font-size: 11px; letter-spacing: 0.12em; }
.qs-step.active .qs-n { color: var(--teal); }
.qs-t { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink); }
.qs-line { display: none; }

.quote-card { background: var(--paper); border: 1px solid var(--line-soft); padding: 32px; }
.quote-card-head { display: grid; grid-template-columns: 1fr 1fr 1fr; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); color: var(--slate-500); font-size: 11px; letter-spacing: 0.12em; }
.quote-card-head .center { text-align: center; }
.quote-card-head .right { text-align: right; }
.quote-card-body { padding-top: 24px; }

@media (max-width: 860px) {
	.quote-stepper { grid-template-columns: repeat(3, 1fr); }
}


/* =========================================================================
   PARITY PASS 1 — fixes against compare.mjs computed-styles diff (2026-06-25)
   ========================================================================= */

/* FIX 1 — .btn text color. Root cause: the anchor reset
   `body.page-template-template-aw-custom a { color: inherit; }` cascades to
   <a class="btn">, overriding both the design's .btn { color: var(--paper); }
   and Bootstrap's --bs-btn-color var. Re-assert with the same specificity. */
body.page-template-template-aw-custom a.btn,
body.page-template-template-aw-custom button.btn {
	color: var(--paper);
}
body.page-template-template-aw-custom a.btn:hover,
body.page-template-template-aw-custom button.btn:hover {
	color: var(--paper);
}

/* Ghost btn keeps ink text on transparent bg */
body.page-template-template-aw-custom a.btn.btn-ghost,
body.page-template-template-aw-custom a.btn-ghost.btn {
	color: var(--ink);
}
body.page-template-template-aw-custom a.btn.btn-ghost:hover,
body.page-template-template-aw-custom a.btn-ghost.btn:hover {
	color: var(--paper);
}

/* Page-CTA dark-block btn-ghost: white text on transparent until hover */
body.page-template-template-aw-custom .page-cta a.btn-ghost,
body.page-template-template-aw-custom .page-cta a.btn.btn-ghost {
	color: var(--paper);
	border-color: var(--paper);
}
body.page-template-template-aw-custom .page-cta a.btn-ghost:hover {
	background: var(--paper);
	color: var(--ink);
}

/* FIX 2 — .btn-link should be blue-ink (deep slate blue), not body ink */
body.page-template-template-aw-custom a.btn-link {
	color: var(--blue-ink);
}
body.page-template-template-aw-custom a.btn-link:hover {
	color: var(--teal);
}

/* FIX 3 — .why-card needs the design's 25%-black overlay bg + matching padding */
.why .why-card {
	background: rgba(0, 0, 0, 0.25);
	padding: 36px 32px;
	border: 0;
}

/* FIX 4 — Home CTA-block uses white bg (design has inline override) */
.cta-block { background: var(--paper); }

/* FIX 5 — .how background is paper-2 (concrete), not default white */
.how { background: var(--paper-2); padding-top: 56px; }

/* FIX 6 — .contact-card uses full-ink hairline, tighter padding */
.contact-card {
	border-left: 1px solid var(--line);
	padding: 10px;
}
.contact-card.hours { border-left: 0; }

/* FIX 7 — page-hero: drop min-height, let content drive */
.page-hero { min-height: 0; padding: 0 0 80px; }

/* FIX 8 — page-hero title: design uses fixed 88px (no clamp) */
.page-hero-title {
	font-size: 88px;
	line-height: 0.96;
	letter-spacing: -1.76px;
}
@media (max-width: 860px) {
	.page-hero-title { font-size: 56px; line-height: 0.96; letter-spacing: -1.12px; }
}

/* FIX 9 — section-head h2: design defaults to 56px on most uses (down from
   the clamp's mid value of ~64px at 1440 viewport). Override the bundled
   .section-head h2 rule with the same selector + new clamp. */
.section-head h2 {
	font-size: clamp(40px, 3.9vw, 56px);
	line-height: 0.95;
	letter-spacing: -1.4px;
}

/* FIX 10 — .nav-main: design uses asymmetric padding (0 right, 48px left).
   Reproduce so the logo / nav align with section content edges. */
.nav-bar .nav-main.container {
	padding: 18px 0 18px 48px;
	display: flex;
	align-items: center;
	gap: 32px;
}
.nav-bar .nav-logo { margin-right: auto; }
.nav-bar .nav-logo img { display: block; height: 28px; width: auto; }

/* FIX 11 — Quote-page parity: card border + padding match design's 28px */
.quote-card {
	border-color: var(--line);
	padding: 28px;
}

/* FIX 12 — Hero-sub typography: design uses 25px / 35px LH */
.hero-dark-inner .hero-sub {
	font-size: 25px;
	line-height: 35px;
}

/* FIX 13 — Hero-headline-dark: hard-set design's 88px clamp values */
.hero-headline.hero-headline-dark {
	font-size: clamp(56px, 6vw, 96px);
	line-height: 0.95;
	letter-spacing: -0.025em;
}


/* =========================================================================
   PARITY PASS 2 — remaining diffs after pass 1 (2026-06-25)
   ========================================================================= */

/* FIX 14 — .btn-ghost INSIDE dark-block / hero-dark / page-cta uses WHITE text.
   Design CSS: `.dark-block .btn { color: var(--ink); }` for the solid btn but
   .btn-ghost in dark contexts gets the inverted treatment. The reliable rule is
   to walk the dark contexts and force white. */
body.page-template-template-aw-custom .hero-dark a.btn-ghost,
body.page-template-template-aw-custom .hero-dark a.btn.btn-ghost,
body.page-template-template-aw-custom .dark-block a.btn-ghost,
body.page-template-template-aw-custom .dark-block a.btn.btn-ghost {
	color: var(--paper);
	border-color: var(--paper);
}
body.page-template-template-aw-custom .hero-dark a.btn-ghost:hover,
body.page-template-template-aw-custom .dark-block a.btn-ghost:hover {
	background: var(--paper);
	color: var(--ink);
}

/* FIX 15 — .svc-detail needs explicit white background (design's inline) */
.svc-detail { background: var(--paper); }

/* FIX 16 — .page-hero padding-bottom to 64px (preview value) */
.page-hero { padding-bottom: 64px; }

/* FIX 17 — .nav-main is a CSS grid in design (not flex), with 48px gap.
   Use grid-template-columns: auto 1fr auto auto so logo / links / cta / burger
   distribute naturally. */
.nav-bar .nav-main.container {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	gap: 48px;
	align-items: center;
	padding: 18px 0 18px 48px;
}
.nav-bar .nav-main .nav-logo { justify-self: start; }
.nav-bar .nav-main .nav-links { justify-self: end; display: flex; gap: 32px; align-items: center; }
.nav-bar .nav-main .nav-cta   { display: flex; gap: 24px; align-items: center; }

/* FIX 18 — Quote stepper qs-step: design has no top border, just clean padding
   with the active state communicated via color rather than border. Match. */
.qs-step {
	border-top: 0;
	padding: 20px 16px;
	background: transparent;
}
.qs-step.active { border-top: 0; }
.qs-step.active .qs-n { color: var(--teal); }
.qs-step.active .qs-t { color: var(--teal); }

/* FIX 19 — h3 default line-height. Bootstrap / BootScore reset gives h3 line-height
   1.2 (= 26.4 at 22px). Design body inherits 1.5 = 33px at 22px. Restore the
   design's line-height for h3 inside the Meridian template body. */
body.page-template-template-aw-custom h3 {
	line-height: 1.5;
}
/* …unless the section explicitly sets a tight heading scale */
body.page-template-template-aw-custom .why-card h3,
body.page-template-template-aw-custom .svc-detail h3,
body.page-template-template-aw-custom .hero h3,
body.page-template-template-aw-custom .how-step h3 {
	line-height: 1.1;
}

/* FIX 20 — h2 sizing variants by section. The design uses different inline
   font-sizes per section. Approximate the most common: 56px standard,
   88px on Why, 64px on How. */
.why .section-head h2 {
	font-size: clamp(56px, 6.1vw, 88px);
	line-height: 0.9;
	letter-spacing: -2.2px;
}
.how .section-head h2 {
	font-size: clamp(40px, 4.5vw, 64px);
	line-height: 0.95;
	letter-spacing: -1.6px;
}

/* FIX 21 — h1 letter-spacing tightened. Design uses ~-0.0294em (= -2.59 at 88px).
   Apply to hero + page hero. */
.hero-headline.hero-headline-dark,
.page-hero-title {
	letter-spacing: -0.0295em;
}

/* FIX 22 — make sure About-page about-h2 (story headline) renders at design's 52px */
.about-story .about-h2 {
	font-size: clamp(40px, 3.6vw, 52px);
	line-height: 0.98;
	letter-spacing: -0.02em;
}
.coverage .about-h2 {
	font-size: clamp(40px, 4vw, 56px);
	line-height: 0.95;
	letter-spacing: -0.025em;
}


/* =========================================================================
   PARITY PASS 3 — final polish (2026-06-25)
   ========================================================================= */

/* FIX 23 — Letter-spacing differs hero (home) vs page-hero (internal).
   Reset my pass-1 blanket and re-scope to the home hero only. */
.hero-headline.hero-headline-dark {
	letter-spacing: -0.0295em;  /* 88px → -2.59 */
}
.page-hero-title {
	letter-spacing: -0.02em;    /* 88px → -1.76 */
}

/* FIX 24 — Revert pass-2 generic h3 line-height; restore selective rules.
   The design has per-element line-heights (sc-title: 1.05, wc-title: 1.05,
   cert-t: 1.5 via body inherit). The generic h3=1.5 over-rode the tight ones. */
body.page-template-template-aw-custom h3 {
	line-height: 1.5;            /* default for unstyled h3 */
}
body.page-template-template-aw-custom .sc-title,
body.page-template-template-aw-custom .wc-title,
body.page-template-template-aw-custom .hs-t {
	line-height: 1.05;
}
body.page-template-template-aw-custom .svc-title {
	line-height: 1;
}

/* FIX 25 — Hero-dark inner padding-top should match design's 241px at desktop */
@media (min-width: 1100px) {
	.hero.hero-dark .hero-dark-inner { padding-top: 240px; }
}

/* FIX 26 — Home services section-head extra top padding (design 86px) */
.services .section-head { padding: 86px 0 46px; }

/* FIX 27 — About coverage section-head padding (design 64/32) */
.coverage .section-head { padding: 64px 0 32px; }

/* FIX 28 — Quote stepper: no gap between cells (auto-fit from grid columns) */
.quote-stepper { gap: 0; }

/* FIX 29 — Why-card border. Design's .dark-block .why-card has a 1px slate-700
   border (rgba(61,70,81)) on three sides + no top border (only bottom on darks).
   Reproduce: top white, right/left/bottom slate-700. */
.why .why-card {
	border-top: 1px solid var(--paper);
	border-right: 1px solid var(--slate-700);
	border-bottom: 1px solid var(--slate-700);
	border-left: 1px solid var(--paper);
}

/* FIX 30 — H2 on Contact should use line-height 56 (preview); my current is 53.2.
   Design probably uses line-height 1 at 56px. Set explicitly for contact-h2. */
.contact-h2 { line-height: 1; }


/* =========================================================================
   PARITY PASS 4 — final pixel-perfection (2026-06-25)
   Remaining diffs after pass 3 are mostly font-size clamps vs design's
   fixed inline values. Replace key clamps with the design's literal values
   at desktop, keep responsive scale-down on mobile.
   ========================================================================= */

/* FIX 31 — Home hero h1: design's React applies inline ~86.4px at 1440 (clamp
   from its own CSS). Match by letting our clamp resolve naturally and just
   pinning the line-height and letter-spacing. */
.hero-headline.hero-headline-dark {
	line-height: 0.92;
	letter-spacing: -0.0294em;
}

/* FIX 32 — About .story-body .about-h2: design 52px, line-height 0.98, ls -0.02em */
@media (min-width: 1100px) {
	.about-story .about-h2 {
		font-size: 52px;
		line-height: 0.98;          /* 50.96 */
		letter-spacing: -0.02em;    /* -1.04 */
	}
}

/* FIX 33 — section-head h2: design uses line-height 0.95 across all uses
   (was 1.0 in pass 4; preview shows 53.2 = 56 * 0.95). Also tighten ls. */
.section-head h2 {
	line-height: 0.95;
	letter-spacing: -0.02em;
}

/* FIX 34 — .svc-title (service detail h2): design 56px line-height 1.0 */
.svc-title {
	font-family: var(--font-display);
	font-size: 56px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.025em;
}
@media (max-width: 860px) {
	.svc-title { font-size: 40px; }
}

/* FIX 35 — How section bg padding-top match (subpixel) */
.how { padding-top: 55px; }


/* =========================================================================
   PARITY PASS 5 — dark-block btn inversion (2026-06-25)
   The design's CSS has `.dark-block .btn { background: paper; color: ink; }`
   so the solid button INVERTS in dark contexts (white bg, ink text). My
   pass-1 override `body...a.btn { color: paper }` was making text white on
   the now-white bg → invisible. Re-invert inside dark blocks.
   ========================================================================= */

body.page-template-template-aw-custom .dark-block a.btn:not(.btn-ghost),
body.page-template-template-aw-custom .hero-dark a.btn:not(.btn-ghost),
body.page-template-template-aw-custom .page-cta a.btn:not(.btn-ghost) {
	background: var(--paper);
	color: var(--ink);
	border-color: var(--paper);
}
body.page-template-template-aw-custom .dark-block a.btn:not(.btn-ghost):hover,
body.page-template-template-aw-custom .hero-dark a.btn:not(.btn-ghost):hover,
body.page-template-template-aw-custom .page-cta a.btn:not(.btn-ghost):hover {
	background: var(--teal);
	color: var(--paper);
	border-color: var(--teal);
}


/* =========================================================================
   PARITY PASS 6 — borders + font sizes deep sweep (2026-06-25)
   ========================================================================= */

/* FIX 36 — .btn line-height: design uses 1.5 (= 18 at 12px), my Bootstrap
   override set --bs-btn-line-height: 1 which squashed text against borders. */
body.page-template-template-aw-custom .btn {
	--bs-btn-line-height: 1.5;
	line-height: 1.5;
}

/* FIX 37 — Strip the hairline border-top from .section-head (toolkit added) */
body.page-template-template-aw-custom .section-head {
	border-top: 0;
}

/* FIX 38 — Nav-bar should have no bottom border (design's nav is borderless) */
.nav-bar { border-bottom: 0; }

/* FIX 39 — .svc-detail no border-bottom (was inherited from .content-section?) */
.svc-detail { border-bottom: 0; }

/* FIX 40 — Nav phone link: weight 500, letter-spacing 0.1em */
.nav-bar .nav-phone {
	font-weight: 500;
	letter-spacing: 0.1em;
}

/* FIX 41 — Svc index list item: 24px padding, label/title sizes match design */
.svc-index-list a { padding: 24px 0; }
.svc-idx-n {
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.12em;
}
.svc-idx-t {
	font-size: 32px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* FIX 42 — Cert-card border: full-ink asymmetric (top/left none; right/bottom 1px) */
.cert-card {
	border: 0;
	border-right: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	padding: 28px 28px 32px;
}

/* FIX 43 — Cert text colors: title + value use ink; number badge uses blue-ink */
.cert-v { color: var(--ink); }
.cert-n { color: var(--blue-ink); }
.cert-t { color: var(--ink); }

/* FIX 44 — Contact-card border: LEFT only (1px solid ink), top/right/bottom 0 */
.contact-card {
	border: 0;
	border-left: 1px solid var(--ink);
	padding: 10px;
}
.contact-card.hours { border-left: 0; }
.contact-card.hq { border-left: 1px solid var(--ink); }

/* FIX 45 — Contact card type colors */
.cc-h { color: var(--blue-ink); }
.cc-big {
	font-size: 36px;
	line-height: 1.5;
	letter-spacing: -0.02em;
}
.cc-sub { color: var(--slate-500); }

/* FIX 46 — Hours list: solid border-bottom, 10px padding, ink text */
.hours-list li {
	border-bottom: 1px solid var(--ink);
	padding: 10px 0;
	color: var(--ink);
}
.hours-list li:last-child { border-bottom: 0; }

/* FIX 47 — Small-meta letter-spacing 0.1em (= 1.1 at 11px) */
.small-meta { letter-spacing: 0.1em; }

/* FIX 48 — Contact-lede + body paragraphs: 17px font, ink color */
.contact-lede {
	font-size: 17px;
	line-height: 1.55;
	color: var(--ink);
}

/* FIX 49 — Quote stepper text: 18px, font-weight 700, white color (visible
   against the white card the design uses), tighter letter-spacing */
.qs-t {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink);
}
/* qs-n stays small-mono but with design's 0.14em tracking */
.qs-n { letter-spacing: 0.14em; }
.qs-step.active .qs-t { color: var(--teal); }

/* FIX 50 — Quote-card-head: top/right/left use paper-2 hairline; no bottom border */
.quote-card-head {
	border: 0;
	border-top: 1px solid var(--paper-2);
	border-right: 1px solid var(--paper-2);
	border-left: 1px solid var(--paper-2);
	padding: 12px 16px;
}

/* FIX 51 — Why-card border: design uses none top + none left; ink right/bottom.
   (Asymmetric to give the "cards punched into a darker field" look.) */
.why .why-card {
	border: 0;
	border-right: 1px solid var(--slate-700);
	border-bottom: 1px solid var(--slate-700);
	border-top: 0;
	border-left: 0;
}


/* =========================================================================
   PARITY PASS 7 — quote card + small letter-spacing corrections
   ========================================================================= */

/* FIX 52 — Quote card is a DARK card (design: bg ink + white text). My pass-2
   set it to white. Flip to ink with paper text + ink border. */
.quote-card {
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	padding: 28px;
}
.quote-card-head {
	border: 0;
	border-bottom: 1px solid var(--paper-2);
	padding: 16px 28px;
	color: var(--paper-2);
}
.quote-card-body { color: var(--paper); padding-top: 24px; }
.quote-card-body em { color: var(--paper-2); }

/* FIX 53 — qs-t INSIDE the quote-card chrome: text needs to be visible on
   the dark card. Stepper sits OUTSIDE the card in the design preview though,
   so it stays ink — but the active one is teal. */
.qs-step .qs-t { color: var(--ink); }
.qs-step.active .qs-t { color: var(--teal); }

/* FIX 54 — cc-h letter-spacing 0.14em (= 1.54 at 11px) */
.cc-h { letter-spacing: 0.14em; }

/* FIX 55 — Hours list border-bottom uses semi-transparent ink (line-soft) */
.hours-list li { border-bottom: 1px solid var(--line-soft); }
.hours-list li:last-child { border-bottom: 0; }

/* FIX 56 — cc-sub line-height fine-tune (21.7 = 14 * 1.55) */
.cc-sub { line-height: 1.55; }


/* =========================================================================
   PARITY PASS 8 — Quote chrome correctly modeled (2026-06-25)
   The design's quote system is:
     .quote-card       — WHITE bg, INK border
     .quote-card-head  — INK band (bg ink, text slate-300, .center white)
     .quote-card-body  — white inside, padding 40px 28px
     .qs-step          — default WHITE bg with INK text
     .qs-step.active   — INK bg, PAPER text, .qs-n turns TEAL
   ========================================================================= */

/* FIX 57 — Quote card: WHITE with ink border (revert pass 7's dark) */
.quote-card {
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--line);
	padding: 0;                       /* head/body manage their own padding */
}

/* FIX 58 — Quote card head: INK band */
.quote-card-head {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	background: var(--ink);
	color: var(--slate-300);
	border: 0;
	padding: 16px 28px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.quote-card-head .center {
	text-align: center;
	color: var(--paper);
	font-weight: 700;
}
.quote-card-head .right { text-align: right; }

/* FIX 59 — Quote card body: white with padding */
.quote-card-body {
	background: var(--paper);
	color: var(--ink);
	padding: 40px 28px;
}
.quote-card-body em { color: var(--slate-500); }

/* FIX 60 — qs-step: white bg + ink text by default, ink bg + paper text active */
.qs-step {
	background: var(--paper);
	color: var(--ink);
	border: 0;
	border-right: 1px solid var(--line-soft);
	padding: 20px 16px;
	cursor: default;
}
.qs-step:last-child { border-right: 0; }
.qs-step .qs-n { color: var(--slate-500); }
.qs-step .qs-t { color: var(--ink); }
.qs-step.active {
	background: var(--ink);
	color: var(--paper);
}
.qs-step.active .qs-n { color: var(--safety); }
.qs-step.active .qs-t { color: var(--paper); }

/* FIX 61 — Body p in About should be ink not slate-700 (story-cols inherit too) */
body.page-template-template-aw-custom .story-cols p { color: var(--ink); line-height: 1.6; }

/* FIX 62 — Services .svc-detail .svc-title letter-spacing -0.02em (= -1.12 at 56px) */
.svc-title { letter-spacing: -0.02em; }

/* FIX 63 — Home services .section-head h2 letter-spacing -0.025em (= -1.4 at 56px) */
.services .section-head h2 { letter-spacing: -0.025em; }


/* =========================================================================
   PARITY PASS 9 — svc-index polish to match design exactly (2026-06-25)
   ========================================================================= */

/* FIX 64 — .svc-idx-arrow: design uses mono font + 20px (mine was 24px + body
   font, which renders the ↘ as an emoji-style glyph instead of mono arrow). */
.svc-idx-arrow {
	font-family: var(--font-mono);
	font-size: 20px;
	color: var(--slate-500);
	text-align: right;
}
.svc-index-list a:hover .svc-idx-arrow { color: var(--teal); }

/* FIX 65 — .svc-index-list a grid gap 32px (was 16px), padding 24px (already
   set in pass 6 but reaffirm). Add hover indent + teal color from design. */
.svc-index-list a {
	display: grid;
	grid-template-columns: 80px 1fr 40px;
	gap: 32px;
	align-items: center;
	padding: 24px 0;
	color: var(--ink);
	transition: color 120ms, padding-left 120ms;
}
.svc-index-list a:hover {
	color: var(--teal);
	padding-left: 16px;
}

/* FIX 66 — .svc-index section chrome (bg paper, border-bottom hairline) */
.svc-index {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	padding: 56px 0 24px;
}
.svc-index-list li { border-bottom: 1px solid var(--line-soft); }
.svc-index-list li:last-child { border-bottom: 0; }


/* =========================================================================
   PARITY PASS 10 — certs-grid: 3×2 lattice with edge-touching borders
   ========================================================================= */

/* FIX 67 — Design uses 3 fixed columns with gap:0 and top+left border on the
   grid container; each card has right + bottom border. Together they form
   a clean 3×2 lattice with no internal gutters. */
.certs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
@media (max-width: 860px) {
	.certs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.certs-grid { grid-template-columns: 1fr; }
}