/* ============================================================
   FILL MY BAYS — Brand System (grafted onto live page markup)
   "Your shop's performance team."
   Carbon + refined Canadian Signal Red. Engineered / telemetry feel.
   Saira Condensed (display) · Saira (body) · JetBrains Mono (data).
   Targets the existing fillmybays.ca class names so all SEO/schema/
   form markup stays untouched — only the skin changes.
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  /* new brand neutrals (warm-leaning carbon) */
  --carbon:    #15161A;
  --carbon-2:  #1C1E24;
  --carbon-3:  #25282F;
  --steel-900: #2C2F37;
  --steel-700: #4A4E58;
  --steel-500: #6E737E;
  --steel-300: #A7ABB4;
  --paper:     #F6F5F2;
  --bone:      #ECEAE4;
  --bone-line: #DBD8D0;
  --ink:       #16171B;
  --ink-60:    #5A5C62;

  /* signal red */
  --red:        #D81E2C;
  --red-bright: #EE2434;
  --red-deep:   #9E1419;
  --red-wash:   #FBEAEA;
  --red-glow:   rgba(216,30,44,.28);

  /* hairlines */
  --hair-dark:  rgba(255,255,255,.10);
  --hair-light: rgba(20,22,26,.12);

  /* type */
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --body:    'Saira', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* geometry */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;

  /* ---- re-map the OLD live tokens so inline var() refs re-skin ---- */
  --red-dark:   #9E1419;
  --red-light:  #EE2434;
  --black:      #15161A;
  --black2:     #1C1E24;
  --white:      #FFFFFF;
  --off-white:  #F6F5F2;
  --border:     #DBD8D0;
  --text-dark:  #16171B;
  --text-mid:   #3A3A3A;
  --text-muted: #5A5C62;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- the bay mark (logo glyph) ---------- */
.baymark{
  --bm:1em;
  display:inline-grid;
  grid-template-columns:repeat(3,1fr);
  gap:calc(var(--bm) * .12);
  width:calc(var(--bm) * 1.18);
  height:var(--bm);
  padding:calc(var(--bm) * .12);
  background:#0d0e11;
  border-radius:calc(var(--bm) * .12);
  flex:none;
  vertical-align:middle;
}
.baymark > i{ display:block; border-radius:1px; background:var(--steel-700); }
.baymark > i.lit{ background:var(--red); }

/* ---------- icon ---------- */
.icon{
  width:1em; height:1em;
  display:inline-block; vertical-align:middle;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; flex:none;
}
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  height:68px; padding:0 6%;
  background:rgba(21,22,26,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair-dark);
}
.nav-logo{ display:inline-flex; align-items:center; gap:.55em; flex-wrap:nowrap; }
.nav-logo .baymark{ font-size:22px; }
.nav-logo a{ display:inline-flex; align-items:center; gap:.5em; text-decoration:none; }
.nav-logo-main{
  font-family:var(--display); font-weight:800; font-size:1.15rem;
  color:#fff; text-transform:uppercase; letter-spacing:.01em; white-space:nowrap;
}
.nav-logo-main .red{ color:var(--red-bright); }
.nav-logo-divider, .nav-logo-sub{
  font-family:var(--display); font-weight:800; font-size:1.15rem; color:#fff; text-transform:uppercase;
}
.nav-phone{
  color:#fff !important; text-decoration:none;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  display:inline-flex; align-items:center; gap:.5em; opacity:.9;
}
.nav-phone:hover{ opacity:1; color:var(--red-bright) !important; }
.nav-phone .icon{ font-size:15px; color:var(--red); }
.nav-cta{
  background:var(--red); color:#fff; border:none; border-radius:var(--r-sm);
  padding:11px 22px; font-family:var(--display); font-weight:700; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.03em; cursor:pointer; text-decoration:none;
  box-shadow:0 1px 0 var(--red-deep); transition:background .15s ease, transform .12s ease;
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--red-bright); transform:translateY(-1px); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary{
  background:var(--red); color:#fff; border:1px solid transparent; border-radius:var(--r-sm);
  padding:15px 30px; font-family:var(--display); font-weight:700; font-size:1.02rem;
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.6em; box-shadow:0 1px 0 var(--red-deep);
  transition:background .15s ease, transform .12s ease; line-height:1; white-space:nowrap;
}
.btn-primary:hover{ background:var(--red-bright); transform:translateY(-1px); }
.btn-primary .icon{ stroke-width:1.9; }
.btn-secondary{
  background:transparent; color:currentColor; border:1px solid currentColor; border-radius:var(--r-sm);
  padding:14px 28px; font-family:var(--display); font-weight:700; font-size:1.02rem;
  text-transform:uppercase; letter-spacing:.04em; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:.6em; opacity:.92;
  transition:background .15s ease, opacity .15s ease; line-height:1;
}
.btn-secondary:hover{ background:rgba(127,127,127,.10); opacity:1; }

/* ============================================================
   HERO  (carbon, bay-grid backdrop, real photo behind dark gradient)
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:var(--carbon); color:var(--paper);
  /* Tightened 2026-05-30 (pass 2) — was clamp(56,7vw,88) / clamp(48,6vw,72); originally clamp(64,9vw,104) / clamp(56,8vw,96) */
  padding:clamp(40px,5vw,64px) 6% clamp(36px,4.5vw,56px);
}
/* bay-grid: vertical hairlines */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(90deg, var(--hair-dark) 1px, transparent 1px);
  background-size:clamp(60px,8vw,104px) 100%;
  opacity:.5;
}
/* red glow */
.hero::after{
  content:""; position:absolute; right:-12%; top:-25%; z-index:1; pointer-events:none;
  width:60vw; height:60vw; background:radial-gradient(circle, var(--red-glow), transparent 62%);
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center right; z-index:0; opacity:.5; }
/* dark carbon gradient so the headline stays readable over the photo */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--carbon) 0%, rgba(21,22,26,.92) 42%, rgba(21,22,26,.55) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:1180px; margin:0 auto; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--carbon-2); border:1px solid var(--hair-dark); color:var(--steel-300);
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.14em;
  padding:7px 14px; border-radius:999px; margin-bottom:28px; text-transform:uppercase;
}
.hero-badge .icon{ font-size:14px; color:var(--red); }
.hero h1{
  font-family:var(--display); font-weight:800; line-height:.95; letter-spacing:-.01em;
  font-size:clamp(2.8rem,6.2vw,5.2rem); max-width:16ch; margin:0 0 22px; color:#fff; text-transform:uppercase;
}
.hero h1 span{ color:var(--red); }
.hero-sub{ font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--steel-300); max-width:48ch; margin:0 0 36px; line-height:1.7; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.hero-ctas .btn-secondary{ color:var(--paper); }
/* "powered by LocaliQ" eyebrow above the stat bar */
.hero-inner > div[style*="Powered by"]{
  font-family:var(--mono) !important; font-size:.7rem !important; letter-spacing:.14em !important;
  text-transform:uppercase; color:var(--steel-500) !important;
}

/* stat bar */
.stat-bar{
  display:grid; grid-template-columns:repeat(3,1fr);
  background:transparent; border-top:1px solid var(--hair-dark);
  margin-top:clamp(28px,4vw,44px); padding-top:clamp(26px,3.5vw,40px); gap:1.5rem;
  border-radius:0; overflow:visible;
}
.stat-item{ border:none; padding:0; text-align:left; }
.stat-num{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,4.4vw,3.4rem); line-height:.9; color:#fff; letter-spacing:-.01em; }
.stat-label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-500); margin-top:.55rem; }
@media(max-width:680px){ .stat-bar{ grid-template-columns:1fr; gap:1.3rem; } }

/* ============================================================
   GENERIC SECTION SHELL
   ============================================================ */
/* Section padding tightened again 2026-05-30 (pass 2) — halved from clamp(44,5.5vw,80); originally clamp(64,9vw,120). Targets ~85px content-to-content gap at desktop. */
section{ padding:clamp(20px,2.5vw,36px) 6%; }
.section-header{ max-width:780px; margin-bottom:clamp(1.2rem,2.4vw,1.9rem); }
.section-label{
  font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin-bottom:14px;
  display:inline-flex; align-items:center; gap:.6em;
}
.section-label::before{ content:""; width:22px; height:1px; background:var(--red); display:inline-block; }
.section-title{
  font-family:var(--display); font-weight:700; line-height:1.0; letter-spacing:.005em;
  font-size:clamp(2rem,4.4vw,3.4rem); color:var(--ink); text-transform:uppercase;
}
.section-sub{ font-size:1.08rem; color:var(--ink-60); margin-top:16px; max-width:600px; line-height:1.7; }

/* ============================================================
   PROBLEMS  (light, hairline grid)
   ============================================================ */
.problems{ background:var(--paper); border-top:1px solid var(--hair-light); border-bottom:1px solid var(--hair-light); }
.problems-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--hair-light); border:1px solid var(--hair-light);
}
@media(max-width:880px){ .problems-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .problems-grid{ grid-template-columns:1fr; } }
.problem-card{
  background:var(--paper); border:none; border-radius:0; padding:2rem 1.8rem 1.8rem;
  display:flex; flex-direction:column; transition:background .18s ease;
}
.problem-card:hover{ background:#fff; }
.problem-icon{
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--hair-light); border-radius:var(--r-sm);
  color:var(--red); margin-bottom:1.1rem; font-size:1.7rem;
}
.problem-icon .icon{ font-size:24px; }
.problem-card h3{ font-family:var(--display); font-weight:700; font-size:1.3rem; text-transform:uppercase; letter-spacing:.01em; line-height:1.05; margin-bottom:.6rem; color:var(--ink); }
.problem-card p{ font-size:.97rem; color:var(--ink-60); line-height:1.6; margin:0 0 1.1rem; }
.problem-stat{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--hair-light);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--red); font-weight:700; line-height:1.5;
}

/* ============================================================
   PLATFORM  (dark, hairline grid)
   ============================================================ */
.platform{ background:var(--carbon); color:var(--paper); }
.platform .section-title{ color:#fff; }
.platform .section-sub{ color:var(--steel-300); }
.platform-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--hair-dark); border:1px solid var(--hair-dark);
}
@media(max-width:880px){ .platform-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .platform-grid{ grid-template-columns:1fr; } }
.platform-card{
  background:var(--carbon); border:none; border-radius:0; padding:2.1rem 1.9rem;
  transition:background .18s ease;
}
.platform-card:hover{ background:var(--carbon-2); box-shadow:none; }
.platform-card-tag{
  display:inline-block; background:transparent; color:var(--red); padding:0; border-radius:0;
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; margin-bottom:1rem;
}
.platform-card .icon{ font-size:30px; stroke-width:1.4; color:var(--paper); margin-bottom:.9rem; display:block; }
.platform-card:hover .icon{ color:var(--red-bright); }
.platform-card h3{ font-family:var(--display); font-weight:700; font-size:1.3rem; text-transform:uppercase; line-height:1.05; margin-bottom:.55rem; color:#fff; }
.platform-card p{ font-size:.96rem; color:var(--steel-300); line-height:1.6; margin:0; }

/* ============================================================
   TACTICS TABLE  (dark, spec-sheet)
   ============================================================ */
.tactics{ background:var(--carbon); color:var(--paper); }
.tactics .section-label{ color:var(--red-bright); }
.tactics .section-title{ color:#fff; }
.tactics .section-sub{ color:var(--steel-300); }
.tactics-table{ width:100%; border-collapse:collapse; }
.tactics-table th{
  text-align:left; padding:14px 18px; font-family:var(--mono); font-size:.66rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--steel-500);
  border-bottom:1px solid var(--hair-dark);
}
.tactics-table td{ padding:18px; font-size:.95rem; border-bottom:1px solid var(--hair-dark); vertical-align:top; }
.tactics-table tr:last-child td{ border-bottom:none; }
.tactics-table tr:hover td{ background:rgba(255,255,255,.03); }
.problem-text{ color:var(--steel-500); font-style:normal; }
.solution-text{ color:#fff; font-weight:500; display:flex; gap:.6em; align-items:flex-start; }
.fix-badge{
  display:inline-flex; align-items:center; background:var(--red); color:#fff;
  font-family:var(--mono); font-size:.6rem; font-weight:500; letter-spacing:.08em;
  padding:3px 7px; border-radius:3px; margin-right:8px; text-transform:uppercase; flex:none;
}
.tactic-tag{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--red-bright); font-weight:500; white-space:nowrap; }

/* ============================================================
   CASE STUDY  (dark)
   ============================================================ */
.casestudy{ background:var(--carbon); color:var(--paper); }
.casestudy .section-label{ color:var(--red-bright); }
.casestudy .section-title{ color:#fff; }
.cs-card{
  background:var(--carbon-2); border:1px solid var(--hair-dark); border-radius:var(--r-md);
  padding:clamp(2rem,4vw,3.4rem); display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(32px,5vw,60px); align-items:center;
}
@media(max-width:840px){ .cs-card{ grid-template-columns:1fr; gap:32px; } }
.cs-tag{
  display:inline-flex; align-items:center; gap:.5em; background:transparent; color:var(--red);
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.1em;
  padding:0; border-radius:0; margin-bottom:18px; text-transform:uppercase;
}
.cs-tag .icon{ font-size:15px; }
.cs-card h3{ font-family:var(--display); font-weight:700; font-size:clamp(1.6rem,3vw,2.2rem); text-transform:uppercase; letter-spacing:.005em; line-height:1.04; margin-bottom:16px; color:#fff; }
.cs-card blockquote{
  font-family:var(--display); font-weight:700; text-transform:none; font-style:normal;
  font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.18; color:#fff;
  border-left:3px solid var(--red); padding-left:20px; margin:22px 0;
}
.cs-card p{ color:var(--steel-300); font-size:.96rem; line-height:1.7; }
/* case-study "who" credit line + any inline leaf needs explicit sizing */
.who{ font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-500); margin-top:1.2rem; }
.who .icon{ font-size:15px; color:var(--red); vertical-align:-2px; }
.cs-tag .icon{ font-size:15px; }
.cs-metrics{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair-dark); border:1px solid var(--hair-dark); border-radius:var(--r-md); overflow:hidden; }
.cs-metric{ background:var(--carbon); border:none; border-radius:0; padding:24px 18px; text-align:left; }
.cs-metric-num{ font-family:var(--display); font-weight:800; font-size:2rem; color:#fff; letter-spacing:-.01em; line-height:.95; }
.cs-metric-label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; color:var(--steel-500); margin-top:8px; line-height:1.4; text-transform:uppercase; }

/* ============================================================
   APPROACH  (light, numbered steps)
   ============================================================ */
.approach{ background:var(--bone); border-top:1px solid var(--hair-light); border-bottom:1px solid var(--hair-light); }
.steps{ display:flex; flex-direction:column; max-width:820px; }
.step{ display:flex; gap:26px; padding:34px 0; border-bottom:1px solid var(--hair-light); }
.step:last-child{ border-bottom:none; }
.step-num{
  width:46px; height:46px; flex-shrink:0; margin-top:2px;
  background:var(--red); border-radius:var(--r-sm); color:#fff;
  font-family:var(--display); font-weight:800; font-size:1.15rem;
  display:flex; align-items:center; justify-content:center; box-shadow:0 1px 0 var(--red-deep);
}
.step-content h3{ font-family:var(--display); font-weight:700; font-size:1.35rem; text-transform:uppercase; letter-spacing:.005em; margin-bottom:8px; color:var(--ink); }
.step-content p{ font-size:.97rem; color:var(--ink-60); line-height:1.7; }

/* ============================================================
   BENCHMARKS  (light, spec gauges)
   ============================================================ */
.benchmarks{ background:var(--paper); }
.bench-grid{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:1px; background:var(--hair-light); border:1px solid var(--hair-light); border-radius:var(--r-md); overflow:hidden;
}
@media(max-width:880px){ .bench-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media(max-width:520px){ .bench-grid{ grid-template-columns:1fr 1fr; } }
.bench-card{ background:var(--paper); border:none; border-radius:0; padding:1.7rem 1.3rem; transition:background .18s ease; }
.bench-card:hover{ background:#fff; box-shadow:none; }
.bench-service{ font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.08em; color:var(--ink-60); margin-bottom:14px; text-transform:uppercase; line-height:1.4; }
.bench-cpl{ font-family:var(--display); font-weight:800; font-size:2.1rem; color:var(--ink); letter-spacing:-.01em; line-height:1; }
.bench-cpl::first-letter{ color:var(--red); font-size:1.3rem; }
.bench-label{ font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-60); margin-top:6px; }

/* ============================================================
   SWO CITIES  (light, hairline grid)
   ============================================================ */
.swo{ background:var(--bone); border-top:1px solid var(--hair-light); border-bottom:1px solid var(--hair-light); }
.city-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1px; background:var(--hair-light); border:1px solid var(--hair-light);
}
.city-card{
  background:var(--paper); border:none; border-radius:0; padding:1.6rem 1.5rem;
  transition:background .15s ease;
}
.city-card:hover{ background:var(--carbon); }
.city-card:hover .city-name{ color:#fff; }
.city-card:hover .city-note{ color:var(--steel-300); }
.city-name{ font-family:var(--display); font-weight:700; font-size:1.3rem; text-transform:uppercase; line-height:1.05; color:var(--ink); margin-bottom:8px; }
.city-note{ font-size:.86rem; color:var(--ink-60); line-height:1.55; }
.city-tag{
  display:inline-block; background:transparent; color:var(--red); padding:0; border-radius:0; margin-top:12px;
  font-family:var(--mono); font-size:.64rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
}
.city-card:hover .city-tag{ color:var(--red-bright); }
/* grid overflow paragraph */
.city-grid > p{ grid-column:1/-1; background:var(--bone); margin:0; padding:1.4rem 1.5rem; font-size:.95rem; color:var(--ink-60); line-height:1.7; }
.city-grid > p a{ color:var(--red); font-weight:600; text-decoration:none; }
.swo-cta-bar{
  margin-top:40px; padding:30px 34px; background:var(--carbon); border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.swo-cta-bar-text .label{ font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--red-bright); margin-bottom:8px; }
.swo-cta-bar-text .heading{ font-family:var(--display); font-weight:700; font-size:1.2rem; text-transform:uppercase; color:#fff; }
.swo-cta-bar-text .sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--steel-500); margin-top:6px; }
@media(max-width:760px){ .swo-cta-bar{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   TRUST STRIP  (dark)
   ============================================================ */
.trust{ background:var(--carbon); padding:40px 6%; border-top:1px solid var(--hair-dark); border-bottom:1px solid var(--hair-dark); }
.trust-inner{ display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:center; }
.trust-item{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--steel-500); }
.trust-item a{ color:var(--steel-500) !important; text-decoration:none; }
.trust-item a:hover{ color:var(--red-bright) !important; }
.trust-dot{ width:5px; height:5px; background:var(--red); border-radius:50%; flex-shrink:0; }

/* ============================================================
   FAQ  (light, hairline rows)
   ============================================================ */
.faq{ background:var(--paper); }
.faq-list{ max-width:820px; border-top:1px solid var(--hair-light); }
.faq-item{ border-bottom:1px solid var(--hair-light); padding:26px 0; }
.faq-item:first-child{ border-top:none; }
.faq-q{ font-family:var(--display); font-weight:600; font-size:1.18rem; text-transform:uppercase; letter-spacing:.01em; color:var(--ink); margin-bottom:10px; }
.faq-a{ font-size:.97rem; color:var(--ink-60); line-height:1.7; }

/* ============================================================
   CONTACT / CTA  (carbon — red used as signal, not a full wall)
   ============================================================ */
.cta-block{ background:var(--carbon); color:var(--paper); padding:clamp(32px,4vw,56px) 6%; text-align:center; }  /* tightened 2026-05-30 pass 2, was clamp(52,6.5vw,84); originally clamp(72,9vw,108) */
.cta-block .section-label{ color:var(--red-bright) !important; justify-content:center; }
.cta-block h2{ font-family:var(--display); font-weight:800; font-size:clamp(2rem,4.4vw,3.2rem); text-transform:uppercase; letter-spacing:.005em; line-height:1.04; margin-bottom:16px; color:#fff; }
.cta-block h2 span, .cta-block h2 .red{ color:var(--red); }
.cta-block > p{ font-size:1.06rem; color:var(--steel-300); max-width:540px; margin:0 auto 40px; line-height:1.7; }
.cta-form{ display:flex; flex-direction:column; gap:14px; max-width:480px; margin:0 auto; text-align:left; }
.cta-form input{
  background:var(--carbon-2); border:1px solid var(--hair-dark); border-radius:var(--r-sm);
  padding:15px 16px; font-family:var(--body); font-size:.98rem; color:#fff; outline:none;
  transition:border-color .15s ease;
}
.cta-form input::placeholder{ color:var(--steel-500); }
.cta-form input:focus{ border-color:var(--red); }
.cta-form input[aria-invalid="true"]{ border-color:var(--red-bright) !important; }
.cta-form input[aria-invalid="false"]{ border-color:#3f7d57 !important; }
.cta-form button{
  background:var(--red); color:#fff; border:none; border-radius:var(--r-sm); padding:17px;
  font-family:var(--display); font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:.04em;
  cursor:pointer; box-shadow:0 1px 0 var(--red-deep); transition:background .15s ease, transform .12s ease;
}
.cta-form button:hover{ background:var(--red-bright); transform:translateY(-1px); }
.cta-form button:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
.form-field{ display:flex; flex-direction:column; gap:5px; }
.form-label{ font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--steel-500); }
.field-error{ font-family:var(--mono); font-size:.72rem; color:var(--red-bright); min-height:15px; }
.form-success{ background:var(--carbon-2); border:1px solid var(--hair-dark); border-radius:var(--r-sm); padding:16px; font-size:.94rem; color:#fff; margin-top:8px; }
.form-success a{ color:#fff; font-weight:700; }
.form-note{ font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; color:var(--steel-500); margin-top:8px; }

/* ============================================================
   FOOTER  (carbon)
   ============================================================ */
footer{
  background:#0d0e11; border-top:1px solid var(--hair-dark);
  padding:30px 6%; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
footer p{ font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--steel-500); text-transform:uppercase; }
.footer-logo{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--display); font-weight:800; font-size:1.05rem; color:#fff; text-transform:uppercase; }
.footer-logo .baymark{ font-size:20px; }
.footer-logo span{ font-weight:800; }

/* ============================================================
   reveal-on-scroll
   ============================================================ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================
   CITY-PAGE EXTRAS
   ============================================================ */
/* inner container used by every city section */
.section-inner{ max-width:1180px; margin:0 auto; }

/* city "← Home" back-link (small, muted; inline style sets its color/size) */
.nav-home{ font-family:var(--mono); letter-spacing:.04em; }
.nav-home:hover{ color:var(--red-bright) !important; }

/* breadcrumb */
.crumb, .breadcrumb{ display:flex; align-items:center; gap:.4em; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; }
.crumb a, .breadcrumb a{ text-decoration:none; }
.crumb a:hover, .breadcrumb a:hover{ color:var(--red-bright) !important; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }

/* market-context section (light) — reuses .problems-grid / .problem-card */
.market-context .section-title{ color:var(--ink); }

/* "how it works" playbook — force dark to match the homepage platform band */
#how-it-works{ background:var(--carbon) !important; }
#how-it-works .section-title{ color:#fff; }
#how-it-works .section-label{ color:var(--red-bright); }

/* CPL benchmark callout */
.bench-callout{ background:var(--paper) !important; border:1px solid var(--hair-light) !important; border-radius:var(--r-md) !important; }
.bench-callout [style*="font-weight:900"]{ font-family:var(--display) !important; letter-spacing:-.01em; }

/* other-markets cross-links */
.cross-link-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:24px; }
.cross-link-card{ background:var(--paper) !important; border:1px solid var(--hair-light) !important; border-radius:var(--r-md) !important; transition:background .15s ease, border-color .15s ease; }
.cross-link-card:hover{ border-color:var(--red) !important; }
.cross-link-card span:first-child{ font-family:var(--display) !important; text-transform:uppercase; letter-spacing:.01em; font-size:1.12rem !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:768px){
  .nav-logo-divider, .nav-logo-sub{ display:none; }
  .nav-logo-main{ font-size:1rem; }
  .nav-phone{ display:none; }
  .cs-metrics{ grid-template-columns:1fr 1fr; }
  .tactics-table{ font-size:.85rem; }
  .tactics-table th, .tactics-table td{ padding:12px 10px; }
}
/* tighter nav on small phones so the wordmark + back-link + CTA never overflow */
@media(max-width:560px){
  nav{ padding:0 4%; gap:10px; }
  .nav-logo .baymark{ font-size:20px; }
  .nav-logo-main{ font-size:.95rem; }
  .nav-home{ display:none; }              /* logo already links home */
  .nav-cta{ padding:9px 14px; font-size:.78rem; letter-spacing:.02em; }
  nav > div:last-child{ gap:10px !important; }

  /* tactics table -> stacked rows (a real <table> has an intrinsic min-width
     that overflows narrow phones; flatten it to blocks) */
  .tactics-table, .tactics-table tbody, .tactics-table tr, .tactics-table td{ display:block; width:100%; }
  .tactics-table thead{ display:none; }
  .tactics-table tr{ padding:1.2rem 0; border-bottom:1px solid var(--hair-dark); }
  .tactics-table tr:last-child{ border-bottom:none; }
  .tactics-table td{ border:none; padding:.35rem 0; }
  .tactics-table .tactic-tag{ display:inline-block; margin-top:.4rem; }
}

/* skip link */
a[href="#main-content"]:focus{ left:16px !important; width:auto !important; height:auto !important; background:var(--red) !important; color:#fff !important; }