/* ============================================================
   BELTLINE WORKFLOW — Main Stylesheet
   Editorial with Solution Proof. Mobile-first, no frameworks.
   ============================================================ */

:root {
  --bg:            #FDFBF7;
  --bg-tint:       #F6F1E8;
  --bg-tint-soft:  #FAF6EE;
  --ink:           #1A1A1A;
  --ink-soft:      #2B2926;
  --muted:         #6B6557;
  --muted-2:       #8A8478;
  --rule:          rgba(60, 40, 20, 0.10);
  --rule-strong:   rgba(60, 40, 20, 0.22);
  --hairline:      rgba(60, 40, 20, 0.06);

  --cobalt:        #3D6BB5;
  --cobalt-soft:   rgba(61, 107, 181, 0.08);
  --emerald:       #2D8E5E;
  --emerald-soft:  rgba(45, 142, 94, 0.10);
  --marigold:      #F0B429;
  --poppy:         #D96847;

  --font-display:  'Lora', 'Times New Roman', Georgia, serif;
  --font-ui:       'Inter', system-ui, -apple-system, sans-serif;
  --font-hand:     'Caveat', 'Comic Sans MS', cursive;
  --font-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --maxw:    1180px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }


/* ------------------------------------------------------------
   UTILITY STRIP — fixed top bar, phone + location
   ------------------------------------------------------------ */
.utility-strip {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  background: var(--ink);
  color: #E8E3D7;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.utility-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.4rem var(--gutter);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.6rem;
}
.utility-strip a { color: #F0EBDF; }
.utility-strip a:hover { color: #fff; }
.utility-sep { opacity: 0.4; }


/* ------------------------------------------------------------
   NAV — fixed below utility strip
   ------------------------------------------------------------ */
#nav {
  position: fixed;
  top: 28px; left: 0; right: 0;
  z-index: 1000;
  background: rgba(253, 251, 247, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.85rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  flex-shrink: 0;
}
.nav-brand img { width: 32px; height: 32px; }
.nav-brand-name { font-size: 0.98rem; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.15s;
}
.nav-links a:hover,
.nav-links a.active { color: var(--ink); }

.nav-cta {
  background: var(--ink);
  color: #fff;
  padding: 0.55rem 1.05rem;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background 0.15s;
  flex-shrink: 0;
}
.nav-cta:hover { background: #000; }

/* Hamburger toggle — mobile only */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .nav-cta {
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
  }
  .utility-inner {
    justify-content: center;
    font-size: 0.65rem;
  }
}

/* Mobile nav open state */
.nav-links.nav-open {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: rgba(253, 251, 247, 0.98);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 6px 16px rgba(60, 40, 20, 0.08);
  padding: 0 var(--gutter) 1.5rem;
  z-index: 999;
}
.nav-links.nav-open li { width: 100%; }
.nav-links.nav-open a {
  display: block;
  padding: 1rem 0;
  font-size: 1rem;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.nav-links.nav-open li:last-child a { border-bottom: none; }


/* ------------------------------------------------------------
   SECTION FRAME — shared layout scaffold
   ------------------------------------------------------------ */
.section {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  position: relative;
}
.section + .section { border-top: 1px solid var(--hairline); }
.section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  max-width: 22ch;
}
.section-sub {
  margin-top: 1.1rem;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 58ch;
}


/* ------------------------------------------------------------
   01 HERO
   ------------------------------------------------------------ */
#hero {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--cobalt);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.hero-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--cobalt);
}
.hero-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 6.5vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-headline em {
  font-style: italic;
  font-weight: 500;
}
.hero-sub {
  margin-top: 1.6rem;
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 38ch;
}
.hero-cta-row {
  margin-top: 2.4rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 0.95rem 1.5rem;
  border-radius: 4px;
  border: none;
  transition: transform 0.15s, background 0.15s, color 0.15s;
  cursor: pointer;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: #000; transform: translateY(-1px); }

.btn-link {
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.btn-link:hover { color: var(--cobalt); border-color: var(--cobalt); }

/* Medallion */
.hero-medallion {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at 60% 50%, rgba(61, 107, 181, 0.05) 0%, transparent 65%);
}
.hero-medallion img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(60, 40, 20, 0.10));
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-medallion img { max-width: 280px; }
}

@media (max-width: 768px) {
  .hero-headline {
    font-size: clamp(2rem, 9vw, 2.6rem);
    line-height: 1.05;
  }
  .hero-medallion img { max-width: 240px; }
}


/* ------------------------------------------------------------
   02 EVALUATION — productized offer + metrics + table
   ------------------------------------------------------------ */
/* Four-metric strip */
.eval-metrics {
  margin-top: 2.25rem;
  margin-bottom: 3rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.eval-metric {
  padding: 0 1.6rem;
  border-right: 1px solid var(--rule);
}
.eval-metric:first-child { padding-left: 0; }
.eval-metric:last-child { border-right: none; padding-right: 0; }
.eval-metric .num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.2vw, 2.4rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  display: block;
}
.eval-metric .label {
  margin-top: 0.65rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted);
  max-width: 22ch;
}

@media (max-width: 860px) {
  .eval-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
    padding: 1.5rem 0;
  }
  .eval-metric {
    padding: 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1.25rem;
  }
  .eval-metric:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}

@media (max-width: 768px) {
  .eval-metrics {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem 0;
  }
  .eval-metric {
    padding: 0 0 1.1rem 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .eval-metric:last-child { border-bottom: none; padding-bottom: 0; }
  .eval-metric .num { font-size: 1.85rem; white-space: nowrap; }
  .eval-metric .label { max-width: none; }
}

/* Comparison table */
.eval-table {
  margin-top: 3rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.eval-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.2fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}
.eval-cell {
  padding: 1.15rem 1.4rem;
  font-size: 0.96rem;
  line-height: 1.45;
}
.eval-cell.label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  align-self: center;
  padding-left: 0;
}
.eval-cell.tier { background: #FFFFFF; }
.eval-cell.tier-extended { background: rgba(61, 107, 181, 0.07); }
.eval-row.head .eval-cell { padding-top: 2rem; padding-bottom: 2rem; }
.eval-row.head .eval-cell.label { background: transparent; }
.eval-row.head .eval-cell.tier { border-top: 3px solid var(--cobalt); }
.eval-tier-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--ink);
  display: block;
}
.eval-tier-price {
  margin-top: 0.5rem;
  display: block;
}
.eval-tier-price strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--cobalt);
  letter-spacing: -0.02em;
  display: block;
  line-height: 1;
}
.eval-tier-price .price-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 0.3rem;
  display: block;
}
.eval-foot {
  margin-top: 1.5rem;
  font-size: 0.92rem;
  color: var(--muted);
  font-style: italic;
}
.eval-cta-row {
  margin-top: 2.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 720px) {
  /* Restructure as two stacked summary cards at mobile */
  .eval-table {
    border-top: none;
    border-bottom: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .eval-row { display: contents; }
  .eval-row.head { display: contents; }
  .eval-cell.label { display: none; }
  .eval-cell.tier,
  .eval-cell.tier-extended {
    grid-column: 1;
    padding: 0.85rem 1.25rem;
    background: #fff;
    border-left: 1px solid var(--rule-strong);
    border-right: 1px solid var(--rule-strong);
  }
  .eval-cell.tier-extended { background: rgba(61, 107, 181, 0.07); }

  .eval-row.head .eval-cell.tier         { grid-row: 1; border-top: 3px solid var(--cobalt); padding-top: 1.25rem; }
  .eval-row:nth-child(2) .eval-cell.tier { grid-row: 2; }
  .eval-row:nth-child(3) .eval-cell.tier { grid-row: 3; }
  .eval-row:nth-child(4) .eval-cell.tier { grid-row: 4; }
  .eval-row:nth-child(5) .eval-cell.tier { grid-row: 5; }
  .eval-row:nth-child(6) .eval-cell.tier { grid-row: 6; }
  .eval-row:nth-child(7) .eval-cell.tier { grid-row: 7; }
  .eval-row:last-child .eval-cell.tier   { border-bottom: 1px solid var(--rule-strong); padding-bottom: 1.25rem; }

  .eval-row.head .eval-cell.tier-extended         { grid-row: 8; padding-top: 1.25rem; margin-top: 0.5rem; }
  .eval-row:nth-child(2) .eval-cell.tier-extended { grid-row: 9; }
  .eval-row:nth-child(3) .eval-cell.tier-extended { grid-row: 10; }
  .eval-row:nth-child(4) .eval-cell.tier-extended { grid-row: 11; }
  .eval-row:nth-child(5) .eval-cell.tier-extended { grid-row: 12; }
  .eval-row:nth-child(6) .eval-cell.tier-extended { grid-row: 13; }
  .eval-row:nth-child(7) .eval-cell.tier-extended { grid-row: 14; }
  .eval-row:last-child .eval-cell.tier-extended   { border-bottom: 1px solid var(--rule-strong); padding-bottom: 1.25rem; }

  .eval-row:nth-child(2) .eval-cell.tier::before,
  .eval-row:nth-child(2) .eval-cell.tier-extended::before { content: "Timeline"; }
  .eval-row:nth-child(3) .eval-cell.tier::before,
  .eval-row:nth-child(3) .eval-cell.tier-extended::before { content: "Onsite"; }
  .eval-row:nth-child(4) .eval-cell.tier::before,
  .eval-row:nth-child(4) .eval-cell.tier-extended::before { content: "Interviews"; }
  .eval-row:nth-child(5) .eval-cell.tier::before,
  .eval-row:nth-child(5) .eval-cell.tier-extended::before { content: "Processes shadowed"; }
  .eval-row:nth-child(6) .eval-cell.tier::before,
  .eval-row:nth-child(6) .eval-cell.tier-extended::before { content: "Report depth"; }
  .eval-row:nth-child(7) .eval-cell.tier::before,
  .eval-row:nth-child(7) .eval-cell.tier-extended::before { content: "Best for"; }

  .eval-row .eval-cell.tier::before,
  .eval-row .eval-cell.tier-extended::before {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 0.3rem;
  }
  .eval-row.head .eval-cell.tier::before,
  .eval-row.head .eval-cell.tier-extended::before { content: none; }
}


/* ------------------------------------------------------------
   03 CALCULATOR — React component, deliverable-fragment styling
   ------------------------------------------------------------ */
#calculator {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

/* ── Calculator shell ─────────────────────────────────────── */
.calc-shell {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 48px rgba(0,0,0,0.38), 0 2px 8px rgba(0,0,0,0.22);
}

/* ── Left: inputs panel (light) ──────────────────────────── */
.calc-inputs {
  background: #fff;
  border: none;
  border-left: 4px solid var(--cobalt);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
.calc-input-head {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cobalt);
  margin-bottom: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-field {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(60,40,20,0.07);
  margin-bottom: 1.1rem;
}
.calc-field:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.calc-label {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.55rem;
}
.calc-label .hint {
  display: block;
  font-size: 0.76rem;
  font-family: var(--font-ui);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  opacity: 0.7;
  margin-top: 0.15rem;
}
.calc-control {
  position: relative;
  display: flex;
  align-items: center;
}
.calc-input, .calc-select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--bg-tint-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  transition: border-color 0.15s, background 0.15s;
  -webkit-appearance: none;
}
.calc-input:focus, .calc-select:focus {
  outline: none;
  border-color: var(--cobalt);
  background: #fff;
  box-shadow: 0 0 0 2px var(--cobalt-soft);
}
.calc-input.with-prefix { padding-left: 1.75rem; }
.calc-prefix {
  position: absolute;
  left: 0.75rem;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.92rem;
  pointer-events: none;
}
.calc-suffix {
  position: absolute;
  right: 0.75rem;
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.82rem;
  pointer-events: none;
}

/* Slider with cobalt-filled left track via CSS custom property */
.calc-slider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
}
.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--cobalt) var(--fill, 0%),
    rgba(60,40,20,0.15) var(--fill, 0%)
  );
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--cobalt);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.1s;
}
.calc-slider:active::-webkit-slider-thumb { transform: scale(1.2); }
.calc-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--cobalt);
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.calc-slider-val {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--cobalt);
  font-weight: 600;
  min-width: 5ch;
  text-align: right;
}

/* ── Right: output panel (dark) ──────────────────────────── */
.calc-output {
  background: var(--ink);
  border: none;
  border-top: 4px solid var(--cobalt);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  position: relative;
  display: flex;
  flex-direction: column;
}
.calc-output-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253,251,247,0.4);
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(253,251,247,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.calc-output-tag .doc {
  color: rgba(253,251,247,0.25);
  font-weight: 400;
  letter-spacing: 0.1em;
}
.calc-output-headline {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253,251,247,0.4);
  margin-bottom: 0.5rem;
}
.calc-output-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--cobalt);
  letter-spacing: -0.03em;
  margin-bottom: 0.3rem;
}
.calc-output-num .currency {
  font-size: 0.5em;
  color: var(--cobalt);
  opacity: 0.6;
  font-weight: 600;
  vertical-align: super;
  margin-right: 0.05em;
}
.calc-output-period {
  font-size: 0.88rem;
  color: rgba(253,251,247,0.4);
  font-style: italic;
  margin-bottom: 1.75rem;
}
.calc-breakdown {
  border-top: 1px solid rgba(253,251,247,0.1);
  padding-top: 1.1rem;
  margin-top: 0.25rem;
}
.calc-bd-row {
  display: grid;
  grid-template-columns: 8px auto 1fr;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(253,251,247,0.07);
}
.calc-bd-row:last-child { border-bottom: none; }
.calc-bd-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.calc-bd-dot.admin { background: var(--emerald); }
.calc-bd-dot.revenue { background: var(--marigold); }
.calc-bd-amt {
  font-family: var(--font-mono);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--bg);
}
.calc-bd-label {
  font-size: 0.84rem;
  color: rgba(253,251,247,0.45);
  line-height: 1.35;
}
.calc-caveat {
  position: relative;
  margin-top: 1.25rem;
  font-family: var(--font-hand);
  font-size: 1.25rem;
  color: rgba(253,251,247,0.55);
  line-height: 1.2;
  transform: rotate(-1deg);
  padding-left: 1.4rem;
}
.calc-caveat::before {
  content: "↳";
  position: absolute;
  left: 0; top: 0.2rem;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: rgba(253,251,247,0.35);
  transform: rotate(1deg);
}
.calc-cta-block {
  margin-top: auto;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(253,251,247,0.1);
  margin-top: 1.5rem;
}
.calc-cta-block .cta-copy {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(253,251,247,0.55);
  margin-bottom: 1.1rem;
}
.calc-cta-block .cta-copy strong {
  color: var(--bg);
  font-weight: 600;
}

/* Dark section treatment for calculator */
#calculator {
  background: var(--ink);
}

#calculator .section-title {
  color: var(--bg);
}
#calculator .section-sub {
  color: rgba(253, 251, 247, 0.65);
}

@media (max-width: 920px) {
  .calc-shell { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .calc-input, .calc-select {
    padding: 0.95rem 0.85rem;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
  .calc-input.with-prefix { padding-left: 2rem; }
  .calc-slider { height: 44px; padding: 20px 0; background: transparent; }
  .calc-slider::-webkit-slider-runnable-track { height: 4px; background: var(--rule-strong); border-radius: 999px; }
  .calc-slider::-moz-range-track { height: 4px; background: var(--rule-strong); border-radius: 999px; }
  .calc-slider::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -11px; }
  .calc-slider::-moz-range-thumb { width: 26px; height: 26px; }
}


/* ------------------------------------------------------------
   04 WHERE THE LEAKS HIDE — tabbed leak patterns
   ------------------------------------------------------------ */
#leaks { background: var(--bg-tint); }

.leaks-tabs {
  margin-top: 3rem;
  display: flex;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
  gap: 0;
}
.leak-tab {
  background: none;
  border: none;
  padding: 1rem 1.25rem 1.1rem;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.005em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.leak-tab:first-child { padding-left: 0; }
.leak-tab .tab-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}
.leak-tab.active {
  color: var(--ink);
  border-bottom-color: var(--cobalt);
  font-weight: 600;
}
.leak-tab.active .tab-num { color: var(--cobalt); }
.leak-tab:hover:not(.active) { color: var(--ink-soft); }

.leak-panel {
  display: none;
  margin-top: 3rem;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.leak-panel.active { display: grid; }

.leak-text h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
  text-wrap: balance;
}
.leak-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
  max-width: 50ch;
}
.leak-graphic {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}
.leaks-bridge {
  margin-top: 2rem;
  margin-bottom: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--muted);
}

@media (max-width: 720px) {
  .leak-panel.active { grid-template-columns: 1fr; gap: 2rem; }
  .leak-graphic { min-height: 0; transform: none; max-width: none; margin: 0; padding: 0; }
  .leak-graphic > .gfx-record,
  .leak-graphic > .gfx-timeline,
  .leak-graphic > .gfx-gbp { width: 100%; max-width: none; }
  .leak-tab { padding: 0.85rem 0.9rem; font-size: 0.85rem; }
  .gfx-phone .screen { min-height: 0; padding-bottom: 22px; }
}

/* Tabs — horizontally scrollable on narrow mobile */
@media (max-width: 480px) {
  .leaks-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .leaks-tabs::-webkit-scrollbar { display: none; }
  .leak-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}


/* ----- Leak graphics ----- */
.gfx { font-family: var(--font-ui); }

/* GFX 1: Phone mockup */
.gfx-phone {
  width: 280px;
  background: #1A1A1A;
  border-radius: 36px;
  padding: 10px;
  box-shadow: 0 30px 60px -20px rgba(60, 40, 20, 0.25), 0 0 0 1px rgba(0,0,0,0.4);
}
.gfx-phone .screen {
  background: #F2ECE0;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  min-height: 480px;
}
.gfx-phone .notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 70px; height: 18px;
  background: #1A1A1A;
  border-radius: 10px;
  z-index: 2;
}
.gfx-phone .status {
  display: flex;
  justify-content: space-between;
  padding: 11px 22px 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: #1A1A1A;
}
.gfx-phone .body { padding: 14px; }
.gfx-missed-call {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-left: 3px solid var(--poppy);
}
.gfx-missed-call .hd {
  display: flex;
  justify-content: space-between;
  font-size: 0.6rem;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.gfx-missed-call .name { font-weight: 600; font-size: 0.88rem; color: var(--poppy); }
.gfx-missed-call .meta { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.gfx-thread { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 0.74rem;
  line-height: 1.35;
}
.bubble-out {
  align-self: flex-end;
  background: var(--cobalt);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.bubble-in {
  align-self: flex-start;
  background: #fff;
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.bubble-meta { font-size: 0.55rem; color: var(--muted); align-self: flex-end; }
.gfx-booked {
  align-self: center;
  background: var(--emerald);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 10px;
  margin-top: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* GFX 2: Customer record */
.gfx-record {
  width: 340px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(60, 40, 20, 0.18);
}
.gfx-record .hd {
  background: var(--bg-tint);
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.gfx-record .hd-name { font-weight: 600; font-size: 1rem; }
.gfx-record .hd-addr { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
.gfx-record .row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.gfx-record .row:last-child { border-bottom: none; }
.gfx-record .lbl {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.gfx-record .val { font-size: 0.86rem; font-weight: 500; }
.gfx-record .sub { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
.gfx-record .log { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.gfx-record .log-row { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; }
.gfx-record .check {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem; font-weight: 700;
  flex-shrink: 0;
}
.gfx-record .date {
  color: var(--muted);
  font-size: 0.72rem;
  margin-left: auto;
  font-family: var(--font-mono);
}
.gfx-record .next {
  background: var(--emerald-soft);
  border: 1px solid rgba(45, 142, 94, 0.25);
  border-radius: 3px;
  padding: 10px 12px;
  margin-top: 4px;
}
.gfx-record .next-lbl {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 3px;
}
.gfx-record .next-date { font-size: 0.92rem; font-weight: 600; }
.gfx-record .next-sub { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

/* GFX 3: Follow-up timeline */
.gfx-timeline {
  width: 360px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  padding: 22px;
  box-shadow: 0 30px 60px -20px rgba(60, 40, 20, 0.18);
}
.gfx-timeline .hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.gfx-timeline .hd-title { font-weight: 600; font-size: 0.92rem; }
.gfx-timeline .hd-sub { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.gfx-timeline .stage {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobalt);
  font-weight: 600;
}
.gfx-timeline .steps {
  display: flex; flex-direction: column; gap: 14px; position: relative;
}
.gfx-timeline .steps::before {
  content: '';
  position: absolute;
  left: 13px; top: 14px; bottom: 14px;
  width: 2px;
  background: var(--rule);
}
.gfx-timeline .step { display: flex; gap: 14px; align-items: flex-start; }
.gfx-timeline .icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--rule);
  display: flex; align-items: center; justify-content: center;
  color: var(--cobalt);
  flex-shrink: 0;
  position: relative; z-index: 1;
  font-size: 0.78rem;
}
.gfx-timeline .icon.done { background: var(--cobalt); color: #fff; box-shadow: 0 0 0 1px var(--cobalt); }
.gfx-timeline .icon.win  { background: var(--emerald); color: #fff; box-shadow: 0 0 0 1px var(--emerald); }
.gfx-timeline .step-body { flex: 1; padding-top: 3px; }
.gfx-timeline .step-meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.62rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 500; margin-bottom: 3px;
}
.gfx-timeline .step-text { font-size: 0.82rem; line-height: 1.4; color: var(--ink); }
.gfx-timeline .step-text.win { color: var(--emerald); font-weight: 600; }

/* GFX 4: Google Business Profile */
.gfx-gbp {
  width: 340px;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(60, 40, 20, 0.18);
}
.gfx-gbp .hd { padding: 16px 18px 14px; border-bottom: 1px solid var(--rule); }
.gfx-gbp .name { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
.gfx-gbp .cat { font-size: 0.74rem; color: var(--muted); margin-bottom: 10px; }
.gfx-gbp .rate { display: flex; align-items: center; gap: 8px; }
.gfx-gbp .rate-num {
  font-family: var(--font-display);
  font-size: 1.3rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em;
}
.gfx-gbp .stars { color: var(--marigold); font-size: 0.95rem; letter-spacing: -1px; }
.gfx-gbp .count { font-size: 0.78rem; color: var(--cobalt); font-weight: 500; }
.gfx-gbp .trend {
  padding: 14px 18px;
  background: var(--bg-tint);
  border-bottom: 1px solid var(--rule);
}
.gfx-gbp .trend-lbl {
  font-family: var(--font-mono);
  font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  font-weight: 500; margin-bottom: 8px;
}
.gfx-gbp .chart { display: flex; align-items: flex-end; gap: 6px; height: 50px; }
.gfx-gbp .bar { flex: 1; background: var(--cobalt); border-radius: 2px 2px 0 0; opacity: 0.8; }
.gfx-gbp .bar:nth-child(1) { height: 30%; opacity: 0.4; }
.gfx-gbp .bar:nth-child(2) { height: 38%; opacity: 0.5; }
.gfx-gbp .bar:nth-child(3) { height: 45%; opacity: 0.6; }
.gfx-gbp .bar:nth-child(4) { height: 60%; opacity: 0.7; }
.gfx-gbp .bar:nth-child(5) { height: 72%; opacity: 0.8; }
.gfx-gbp .bar:nth-child(6) { height: 85%; opacity: 0.9; }
.gfx-gbp .bar:nth-child(7) { height: 100%; opacity: 1; }
.gfx-gbp .trend-foot {
  display: flex; justify-content: space-between;
  margin-top: 8px;
  font-size: 0.72rem; color: var(--muted);
  font-family: var(--font-mono);
}
.gfx-gbp .trend-foot .change { color: var(--emerald); font-weight: 600; }
.gfx-gbp .review { padding: 14px 18px; }
.gfx-gbp .review-stars { color: var(--marigold); font-size: 0.85rem; letter-spacing: -1px; margin-bottom: 6px; }
.gfx-gbp .review-text { font-size: 0.82rem; line-height: 1.4; color: var(--ink-soft); margin-bottom: 6px; font-style: italic; }
.gfx-gbp .review-author { font-size: 0.7rem; color: var(--muted); }


/* ------------------------------------------------------------
   05 WHAT HAPPENS AFTER — numbered continuation story
   ------------------------------------------------------------ */
#after { background: var(--bg-tint); }

.after-list {
  margin-top: 3rem;
  list-style: none;
  display: flex;
  flex-direction: column;
}
.after-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.5rem;
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.after-item:last-child { border-bottom: 1px solid var(--rule); }
.after-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 5vw, 4.5rem);
  color: var(--cobalt);
  line-height: 1;
  letter-spacing: -0.02em;
}
.after-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.after-content p {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 64ch;
}
.after-cta-row {
  margin-top: 2.8rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .after-item { grid-template-columns: 60px 1fr; gap: 1rem; }
  .after-num { font-size: 2rem; }
}


/* ------------------------------------------------------------
   06 WHO RUNS IT — two-operator team
   ------------------------------------------------------------ */
#team { background: var(--bg-tint); }

.team-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.team-person {
  border-top: 1px solid var(--ink);
  padding-top: 1.8rem;
}
.team-disc {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 1.4rem;
  border: none;
}
.team-name {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.team-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
  margin-bottom: 1.2rem;
}
.team-bio { font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }
.team-close {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .team-grid { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------
   07 BOOK AN EVALUATION — dark section, form + aside
   ------------------------------------------------------------ */
#book {
  background: var(--ink);
  color: var(--bg);
  border-top: none;
}
#book {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
}

#book .section-title { color: var(--bg); }
#book .section-sub { color: rgba(253, 251, 247, 0.7); }

.book-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}
.book-form { display: flex; flex-direction: column; gap: 1.25rem; }
.book-field { display: flex; flex-direction: column; }
.book-field label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.6);
  margin-bottom: 0.55rem;
  font-weight: 500;
}
.book-field input,
.book-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(253, 251, 247, 0.25);
  padding: 0.7rem 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--bg);
  resize: vertical;
  -webkit-appearance: none;
}
.book-field input:focus,
.book-field textarea:focus {
  outline: none;
  border-bottom-color: var(--marigold);
}
.book-field input::placeholder,
.book-field textarea::placeholder { color: rgba(253, 251, 247, 0.3); }

.book-submit {
  align-self: flex-start;
  background: var(--marigold);
  color: var(--ink);
  padding: 1rem 1.8rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  border: none;
  margin-top: 1rem;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.book-submit:hover { background: #fff; transform: translateY(-1px); }

.book-aside {
  border-left: 1px solid rgba(253, 251, 247, 0.15);
  padding-left: clamp(1.5rem, 3vw, 3rem);
}
.book-aside-row { margin-bottom: 2.2rem; }
.book-aside-row:last-child { margin-bottom: 0; }
.book-aside-lbl {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.5);
  margin-bottom: 0.5rem;
}
.book-aside-val {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--bg);
  letter-spacing: -0.01em;
}
.book-aside-val a {
  border-bottom: 1px solid rgba(253, 251, 247, 0.3);
  padding-bottom: 2px;
  color: var(--bg);
}
.book-aside-val a:hover { border-bottom-color: var(--marigold); color: var(--marigold); }
.book-aside-val a + a { display: inline-block; margin-top: 0.4rem; }

/* Form submission thank-you panel (replaces .book-form when ?sent=1 in URL) */
.book-thanks {
  padding: 1rem 0;
}
.book-thanks h3 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 600;
  color: var(--marigold);
  letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
}
.book-thanks p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(253, 251, 247, 0.75);
  max-width: 50ch;
}

.book-calendly {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--marigold);
  border-bottom: 1px solid var(--marigold);
  padding-bottom: 2px;
  font-weight: 500;
}
.book-calendly:hover { color: #fff; border-color: #fff; }

@media (max-width: 720px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-aside {
    border-left: none;
    border-top: 1px solid rgba(253, 251, 247, 0.15);
    padding-left: 0;
    padding-top: 2.5rem;
  }
}


/* ------------------------------------------------------------
   FOOTER — clean, warm off-white
   ------------------------------------------------------------ */
#footer {
  background: var(--bg);
  padding: 3.5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--rule);
}
.footer-inner { max-width: var(--maxw); margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--hairline);
}
.footer-brand { display: flex; align-items: center; gap: 0.7rem; }
.footer-brand img { width: 28px; height: 28px; }
.footer-brand-name { font-weight: 700; font-size: 0.96rem; }
.footer-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
}
.footer-nav {
  margin-top: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  list-style: none;
}
.footer-nav a {
  font-family: var(--font-ui);
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 500;
  transition: color 0.15s;
}
.footer-nav a:hover { color: var(--ink); }

.footer-meta {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.84rem;
  color: var(--muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.footer-contact { word-break: break-word; }
.footer-meta a { color: var(--muted); }
.footer-meta a:hover { color: var(--ink); }
.nowrap { white-space: nowrap; }

@media (max-width: 720px) {
  .footer-top { grid-template-columns: 1fr; text-align: left; }
  .footer-nav { gap: 0.4rem 1.5rem; }
  .footer-meta { flex-direction: column; gap: 0.5rem; }
}