/* ════════════════════════════════════════════════
   SECURITY LEASING SERVICES — MOBILE-FIRST stylesheet
   Authored phone-up: base = mobile, min-width = scale up.
   Breakpoints:  ≥560 sm · ≥768 md · ≥1024 lg · ≥1200 xl
   ════════════════════════════════════════════════ */

:root {
  /* Copper (primary) */
  --copper-dark:   #AE6D4F;
  --copper:        #C9834A;
  --copper-light:  #E59F78;
  --copper-pale:   #F0DDD0;
  --copper-tint:   #FBF5F1;
  /* Teal (secondary) — CI */
  --teal-bright:   #00A89D;
  --teal:          #1E837A;
  --teal-dark:     #0F4D46;
  /* Accent routing (tweakable) */
  --ac-eye-d: #AE6D4F;  --ac-eye-l: #E59F78;
  --ac-em-d:  #AE6D4F;  --ac-em-l:  #E59F78;
  /* Display voice (tweakable) */
  --h-scale: 1;  --h-weight: 700;  --ey-track: 0.24em;
  /* Hero atmosphere (tweakable) */
  --hero-glow: 0.20;  --hero-grid: 0.85;
  /* Neutrals */
  --charcoal:      #2C2C2C;
  --charcoal-mid:  #4A4A4A;
  --charcoal-light:#6B6B6B;
  /* Dark surfaces */
  --ink:           #1A1715;
  --ink-2:         #221E1B;
  --ink-3:         #2C2723;
  --ink-line:      rgba(255,255,255,0.10);
  /* Light surfaces */
  --bg:            #FFFFFF;
  --bg-surface:    #FAF8F5;
  --bg-warm:       #F6F1EC;
  --border:        #EAE2D9;
  --border-strong: #D8C9BC;
  /* Effects */
  --shadow-sm:     0 1px 3px rgba(44,28,16,0.07);
  --shadow-md:     0 8px 30px rgba(44,28,16,0.10);
  --shadow-lg:     0 24px 60px rgba(26,20,12,0.18);
  /* Type */
  --head: 'Barlow Condensed', sans-serif;
  --body: 'Barlow', sans-serif;
  /* Geometry */
  --radius: 4px;
  --radius-lg: 10px;
  --maxw: 1180px;
  --gutter: 1.5rem;          /* mobile gutter */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--charcoal);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ── PRIMITIVES ──────────────────────────────────── */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: 920px; margin: 0 auto; padding-inline: var(--gutter); }
.copper-rule { height: 3px; border: 0; background: linear-gradient(90deg, var(--copper-dark) 0%, var(--copper-light) 50%, var(--copper-dark) 100%); }
section { position: relative; }
.section-pad { padding-block: 3.25rem; }            /* mobile vertical rhythm */

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--head); font-size: 0.72rem; font-weight: 600;
  letter-spacing: var(--ey-track); text-transform: uppercase; color: var(--ac-eye-d);
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--ac-eye-d); }
.on-dark .eyebrow { color: var(--ac-eye-l); }
.on-dark .eyebrow::before { background: var(--ac-eye-l); }

.sec-title {
  font-family: var(--head); font-weight: var(--h-weight);
  font-size: calc(1.95rem * var(--h-scale)); line-height: 1.04;
  letter-spacing: -0.005em; text-transform: uppercase; color: var(--charcoal);
  margin-top: 0.85rem; text-wrap: balance;
}
.on-dark .sec-title { color: #fff; }
.sec-title em { color: var(--ac-em-d); font-style: normal; }
.on-dark .sec-title em { color: var(--ac-em-l); }

.lede {
  font-size: 1.02rem; color: var(--charcoal-mid);
  max-width: 56ch; margin-top: 1.05rem; line-height: 1.65;
}
.on-dark .lede { color: rgba(255,255,255,0.72); }

.section-head { max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center .lede { margin-inline: auto; }

/* ── BUTTONS (≥44px touch targets) ───────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--head); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 26px; min-height: 48px; border-radius: var(--radius);
  border: 1px solid transparent; width: 100%;          /* full-width on mobile */
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .08s, box-shadow .2s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--copper-dark); color: #fff; box-shadow: 0 6px 18px rgba(174,109,79,0.28); }
.btn-primary:hover { background: var(--copper); box-shadow: 0 10px 26px rgba(174,109,79,0.34); }
.btn-ghost { background: transparent; color: var(--copper-dark); border-color: var(--copper-pale); }
.btn-ghost:hover { background: var(--copper-tint); border-color: var(--copper); }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.on-dark .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ── HEADER / NAV (mobile: hamburger) ────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(26,23,21,0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-line);
  transition: background .3s, border-color .3s;
}
.site-header.scrolled { background: rgba(255,255,255,0.94); border-bottom-color: var(--border); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 34px; width: auto; }
.brand-text { font-family: var(--head); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; }
.brand-text .l1 { display: block; font-size: 0.82rem; color: #fff; }
.brand-text .l2 { display: block; font-size: 0.56rem; letter-spacing: 0.3em; color: var(--copper-light); margin-top: 3px; }
.scrolled .brand-text .l1 { color: var(--charcoal); }
.scrolled .brand-text .l2 { color: var(--copper-dark); }

.nav-links {
  position: fixed; inset: 64px 0 auto 0; z-index: 99;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--ink); padding: 0.5rem var(--gutter) 1.75rem;
  border-bottom: 1px solid var(--ink-line);
  transform: translateY(-130%); transition: transform .35s; visibility: hidden;
}
.nav-links.open { transform: translateY(0); visibility: visible; }
.nav-links a {
  font-family: var(--head); font-weight: 500; font-size: 1rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.82);
  padding: 15px 2px; border-bottom: 1px solid var(--ink-line); min-height: 48px; display: flex; align-items: center;
}
.nav-links a:hover { color: #fff; }
.nav-cta { justify-content: center; margin-top: 1.1rem; border-bottom: 0 !important; }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; background: none; border: 0; padding: 10px; min-width: 44px; min-height: 44px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 3px 0; transition: .3s; }
.scrolled .nav-toggle span { background: var(--charcoal); }

/* ── HERO (mobile: stacked) ──────────────────────── */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(700px 480px at 80% -10%, rgba(201,131,74,var(--hero-glow)), transparent 60%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  padding-block: 2.75rem 3rem;
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--hero-grid);
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 40% 30%, #000, transparent 78%);
          mask-image: radial-gradient(circle at 40% 30%, #000, transparent 78%);
}
.hero-grid { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 2rem; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--head); font-size: 0.74rem; font-weight: 600;
  letter-spacing: var(--ey-track); text-transform: uppercase; color: var(--ac-eye-l); margin-bottom: 1rem;
}
.hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 4px rgba(0,168,157,0.25); }
.hero h1 {
  font-family: var(--head); font-weight: var(--h-weight);
  font-size: calc(2.35rem * var(--h-scale)); line-height: 1.02;
  letter-spacing: -0.01em; text-transform: uppercase; color: #fff; text-wrap: balance;
}
.hero h1 em { color: var(--ac-em-l); font-style: normal; }
.hero-sub { font-size: 1.05rem; color: rgba(255,255,255,0.84); margin-top: 1.2rem; line-height: 1.55; }
.hero-body { font-size: 0.96rem; color: rgba(255,255,255,0.6); margin-top: 0.9rem; }
.hero-ctas { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.8rem; }

.hero-visual { position: relative; }
.hero-emblem { display: none; }
.hero-img-slot { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; margin-bottom: 14px; border-radius: var(--radius-lg); object-fit: cover; }
.hero-stats { display: grid; gap: 10px; position: relative; z-index: 2; }
.hero-stat {
  background: rgba(255,255,255,0.04); border: 1px solid var(--ink-line);
  border-left: 3px solid var(--copper); border-radius: var(--radius-lg);
  padding: 1.05rem 1.2rem; backdrop-filter: blur(6px);
}
.hero-stat .v { font-family: var(--head); font-weight: 700; font-size: 2.1rem; line-height: 1; color: var(--copper-light); letter-spacing: -0.02em; }
.hero-stat .l { font-size: 0.84rem; color: rgba(255,255,255,0.62); margin-top: 5px; }

/* ── POSITIONING BAR ─────────────────────────────── */
.positioning { background: var(--ink-3); color: #fff; border-block: 1px solid var(--ink-line); padding-block: 1.2rem; }
.positioning-inner { display: flex; flex-direction: column; gap: 0.85rem; }
.positioning .label { font-family: var(--head); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--copper-light); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font-size: 0.8rem; color: rgba(255,255,255,0.78); border: 1px solid var(--ink-line); border-radius: 100px; padding: 6px 14px; background: rgba(255,255,255,0.03); display: inline-flex; align-items: center; gap: 7px; }
.chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--teal-bright); }

/* ── CALCULATOR shell (mobile: stacked) ──────────── */
.calculator { background: var(--bg-surface); }
.calc-shell { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.25rem; }

/* ── PRESSURE ────────────────────────────────────── */
.pressure { background: var(--ink); color: #fff; }
.pressure-grid { display: flex; flex-direction: column; gap: 2rem; }
.pressure-list { display: grid; gap: 2px; }
.pressure-item { display: flex; gap: 0.9rem; align-items: baseline; padding: 0.95rem 0; border-bottom: 1px solid var(--ink-line); }
.pressure-item:last-child { border-bottom: 0; }
.pressure-item .n { font-family: var(--head); font-weight: 700; font-size: 1.2rem; color: var(--copper-light); letter-spacing: 0.02em; min-width: 5.5rem; white-space: nowrap; }
.pressure-item p { color: rgba(255,255,255,0.82); font-size: 1rem; }
.pressure-closer { margin-top: 1.5rem; padding: 1.25rem 1.4rem; border-left: 3px solid var(--copper); background: rgba(255,255,255,0.03); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; font-family: var(--head); font-size: 1.2rem; font-weight: 500; color: #fff; text-transform: uppercase; }
.pressure-closer span { color: var(--ac-em-l); }

/* ── COMPARE TABLE (mobile: stacked cards) ───────── */
.compare-table-wrap { margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare-table thead { display: none; }
.compare-table, .compare-table tbody, .compare-table tr, .compare-table td { display: block; }
.compare-table tr { border-bottom: 1px solid var(--border-strong); padding: 0.35rem 0; }
.compare-table tr:last-child { border-bottom: 0; }
.compare-table td { border: 0; padding: 0.7rem 1.1rem; line-height: 1.5; color: var(--charcoal-mid); }
.compare-table td:first-child { font-weight: 600; color: var(--charcoal); font-family: var(--head); letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.95rem; padding-bottom: 0.2rem; }
.compare-table td:nth-child(2)::before { content: 'Traditional — '; font-weight: 600; color: var(--charcoal-light); }
.compare-table td:nth-child(3)::before { content: 'SLS EV — '; font-weight: 600; color: var(--teal-dark); }
.compare-table td:nth-child(3) { background: var(--copper-tint); border-radius: var(--radius); margin: 0.25rem 1.1rem; padding: 0.7rem 0.9rem; }
.table-foot { font-size: 0.82rem; color: var(--charcoal-light); margin-top: 0.9rem; line-height: 1.6; }

/* ── DEPRECIATING ASSETS ─────────────────────────── */
.assets { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); color: #fff; }
.assets-grid { display: flex; flex-direction: column; gap: 2rem; }
.assets-body p { color: rgba(255,255,255,0.75); margin-top: 1rem; font-size: 1.02rem; }
.assets-body p strong { color: #fff; font-weight: 600; }
.capex-card { border: 1px solid var(--ink-line); border-radius: var(--radius-lg); background: rgba(255,255,255,0.03); padding: 1.4rem; backdrop-filter: blur(6px); }
.capex-flip { display: grid; gap: 1rem; }
.flip-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; }
.flip-box { padding: 1rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--ink-line); text-align: center; }
.flip-box .k { font-family: var(--head); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.flip-box .vv { font-family: var(--head); font-weight: 700; font-size: 1.2rem; margin-top: 5px; }
.flip-box.capex .vv { color: var(--copper-light); }
.flip-box.opex { background: rgba(0,168,157,0.10); border-color: rgba(0,168,157,0.3); }
.flip-box.opex .vv { color: var(--teal-bright); }
.flip-arrow { color: var(--copper-light); font-size: 1.2rem; }
.assets-img-slot { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; margin-top: 0.5rem; border-radius: 8px; object-fit: cover; }

/* ── SERVICES ────────────────────────────────────── */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2.25rem; }
.svc-card { background: linear-gradient(155deg, color-mix(in srgb, var(--ac-eye-d) 9%, var(--bg)) 0%, var(--bg) 58%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s, background .3s; position: relative; overflow: hidden; }
.svc-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--ac-em-d); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--copper-pale); background: linear-gradient(155deg, color-mix(in srgb, var(--ac-eye-d) 15%, var(--bg)) 0%, var(--bg) 62%); }
.svc-card:hover::before { transform: scaleX(1); }
.svc-icon { width: 48px; height: 48px; border-radius: var(--radius); display: grid; place-items: center; background: var(--copper-tint); border: 1px solid var(--copper-pale); margin-bottom: 1.1rem; }
.svc-icon svg { width: 24px; height: 24px; stroke: var(--copper-dark); }
.svc-card h3 { font-family: var(--head); font-weight: 700; font-size: 1.22rem; text-transform: uppercase; letter-spacing: 0.02em; color: var(--charcoal); }
.svc-card p { margin-top: 0.5rem; color: var(--charcoal-mid); font-size: 0.95rem; }

/* ── IMAGERY BAND ────────────────────────────────── */
.imagery { background: linear-gradient(180deg, var(--ink-2), var(--ink)); color: #fff; }
.imagery-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 2.25rem; }
.imagery-item image-slot, .imagery-item .baked-img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: var(--radius-lg); object-fit: cover; }
.imagery-cap { padding: 0.9rem 0.2rem 0; }
.imagery-cap .t { font-family: var(--head); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.imagery-cap .d { font-size: 0.88rem; color: rgba(255,255,255,0.62); margin-top: 0.3rem; line-height: 1.5; }

/* ── HOW IT WORKS — FLOW (mobile: 1 col, no rail) ── */
.howitworks { background: var(--bg-warm); }
.flow { position: relative; margin-top: 2.5rem; }
.flow-rail { display: none; }
.flow-grid { display: grid; grid-template-columns: 1fr; gap: 34px; padding-top: 30px; }
.flow-card { position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.flow-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.flow-badge { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: #fff; background: linear-gradient(150deg, var(--copper) 0%, var(--copper-dark) 100%); border: 3px solid var(--bg-warm); box-shadow: 0 5px 14px rgba(0,0,0,.2); }
.flow-img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0; object-fit: cover; }
/* Baked-in images (replacing filled image-slots) cover their box exactly as the slot did */
.baked-img { object-fit: cover; }
img.flow-img { object-fit: cover; }
.flow-ico { align-self: center; margin-top: -26px; z-index: 2; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--copper-tint); border: 1px solid var(--copper-pale); box-shadow: 0 5px 12px rgba(0,0,0,.10); }
.flow-ico svg { width: 24px; height: 24px; stroke: var(--copper-dark); fill: none; stroke-width: 1.8; }
.flow-body { padding: 0.7rem 1.2rem 1.35rem; text-align: center; display: flex; flex-direction: column; flex: 1; }
.flow-body h4 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.1rem; line-height: 1.12; color: var(--charcoal); margin-top: .55rem; }
.flow-body p { font-size: .9rem; color: var(--charcoal-mid); margin-top: .55rem; line-height: 1.5; flex: 1; }
.flow-tag { display: inline-flex; align-items: center; gap: 7px; justify-content: center; margin-top: 1.05rem; font-size: .82rem; font-weight: 600; color: var(--teal); }
.flow-tag svg { width: 16px; height: 16px; stroke: var(--teal); fill: none; stroke-width: 2; flex-shrink: 0; }
.flow-card.dark { background: linear-gradient(170deg, var(--ink-2), var(--ink)); border-color: var(--ink-line); }
.flow-card.dark .flow-body h4 { color: #fff; }
.flow-card.dark .flow-body p { color: rgba(255,255,255,.62); }
.flow-card.dark .flow-ico { background: rgba(0,168,157,.14); border-color: rgba(0,168,157,.4); }
.flow-card.dark .flow-ico svg { stroke: var(--teal-bright); }
.flow-card.dark .flow-tag, .flow-card.dark .flow-tag svg { color: var(--teal-bright); stroke: var(--teal-bright); }
.flow-card.dark .flow-body { padding: 0.7rem 1.6rem 1.8rem; }

/* ── WHY SLS ─────────────────────────────────────── */
.why { background: var(--ink); color: #fff; }
.why-grid { display: flex; flex-direction: column; gap: 1.75rem; }
.benefits { display: grid; gap: 0; }
.benefit { display: flex; align-items: center; gap: 13px; padding: 0.9rem 0; border-bottom: 1px solid var(--ink-line); color: rgba(255,255,255,0.85); font-size: 0.98rem; }
.benefit:last-child { border-bottom: 0; }
.benefit svg { width: 20px; height: 20px; stroke: var(--teal-bright); flex-shrink: 0; }
.why-statement { font-family: var(--head); text-transform: uppercase; font-weight: 600; font-size: 1.25rem; line-height: 1.2; margin-top: 1.5rem; }
.why-statement .accent { color: var(--ac-em-l); }

/* ── PILOT STEPS (mobile: 1 col) ─────────────────── */
.steps { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.step { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform .25s, box-shadow .25s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step .num { font-family: var(--head); font-weight: 700; font-size: 2.3rem; line-height: 1; color: color-mix(in srgb, var(--ac-em-d) 20%, #fff); -webkit-text-stroke: 1px var(--ac-em-d); letter-spacing: -0.02em; }
.step h4 { font-family: var(--head); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 0.6rem; color: var(--charcoal); }
.step p { font-size: 0.9rem; color: var(--charcoal-mid); margin-top: 0.35rem; }

/* ── FINAL CTA ───────────────────────────────────── */
.finalcta { position: relative; overflow: hidden; text-align: center; color: #fff;
  background: radial-gradient(700px 420px at 20% 120%, rgba(201,131,74,0.22), transparent 60%),
              radial-gradient(560px 360px at 90% -20%, rgba(0,168,157,0.12), transparent 60%), var(--ink); }
.finalcta .sec-title { color: #fff; }
.finalcta .lede { color: rgba(255,255,255,0.78); margin-inline: auto; }
.finalcta .hero-ctas { margin-top: 1.8rem; justify-content: center; }
.contact-row { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; }
.contact-item { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.78); font-size: 0.95rem; }
.contact-item svg { width: 18px; height: 18px; stroke: var(--copper-light); }
.contact-item a:hover { color: #fff; }

/* ── FOOTER ──────────────────────────────────────── */
.site-footer { background: #141110; color: rgba(255,255,255,0.6); padding-block: 2.5rem 1.75rem; }
.footer-top { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--ink-line); }
.footer-brand img { height: 42px; margin-bottom: 1rem; }
.footer-lockup { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.footer-lockup img { height: 42px; margin-bottom: 0; width: auto; }
.footer-lockup .brand-text { display: flex; flex-direction: column; line-height: 1; }
.footer-lockup .l1 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; font-size: 0.92rem; color: #fff; }
.footer-lockup .l2 { font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.62rem; color: var(--ac-eye-l); margin-top: 3px; }
.footer-brand p { font-size: 0.9rem; max-width: 40ch; }
.footer-col h5 { font-family: var(--head); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ac-eye-l); margin-bottom: 0.9rem; }
.footer-col a, .footer-col span { display: block; font-size: 0.92rem; padding: 6px 0; color: rgba(255,255,255,0.6); transition: color .2s; min-height: 32px; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.4rem; font-size: 0.8rem; color: rgba(255,255,255,0.4); }

/* ── SCROLL REVEAL ───────────────────────────────── */
.reveal-active .reveal { opacity: 0; transform: translateY(20px) scale(.994); transition: opacity .7s cubic-bezier(.22,.61,.27,1), transform .7s cubic-bezier(.22,.61,.27,1); will-change: opacity, transform; }
.reveal-active .reveal.in { opacity: 1; transform: none; }
.reveal-active .rv-scale { transform: scale(.95); }
.reveal-active .rv-right { transform: translateX(28px); }
.reveal-active .rv-left { transform: translateX(-28px); }
.reveal-active .rv-scale.in, .reveal-active .rv-right.in, .reveal-active .rv-left.in { transform: none; }
.reveal-active .reveal[data-d="1"] { transition-delay: .07s; }
.reveal-active .reveal[data-d="2"] { transition-delay: .14s; }
.reveal-active .reveal[data-d="3"] { transition-delay: .21s; }
.reveal-active .reveal[data-d="4"] { transition-delay: .28s; }
.reveal-active .reveal[data-d="5"] { transition-delay: .35s; }
.reveal-active .reveal[data-d="6"] { transition-delay: .42s; }
.reveal-active .reveal[data-d="7"] { transition-delay: .49s; }
.reveal-active .reveal[data-d="8"] { transition-delay: .56s; }
html.reveal-stuck .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .reveal-active .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ════════════════════════════════════════════════
   ≥ 560px — large phones / small tablets
   ════════════════════════════════════════════════ */
@media (min-width: 560px) {
  :root { --gutter: 2rem; }
  .sec-title { font-size: calc(2.4rem * var(--h-scale)); }
  .hero h1 { font-size: calc(2.9rem * var(--h-scale)); }
  .hero-ctas { flex-direction: row; flex-wrap: wrap; }
  .btn { width: auto; }
  .nav-cta { width: 100%; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-stat:first-child { grid-column: 1 / -1; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .imagery-grid { grid-template-columns: 1fr 1fr; }
  .flow-grid { grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .steps { grid-template-columns: 1fr 1fr; }
  .contact-row { flex-direction: row; justify-content: center; gap: 2rem; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .positioning-inner { flex-direction: row; align-items: center; gap: 0.9rem 1.3rem; flex-wrap: wrap; }
  .compare-table td:nth-child(3) { margin-inline: 1.1rem; }
}

/* ════════════════════════════════════════════════
   ≥ 768px — tablet
   ════════════════════════════════════════════════ */
@media (min-width: 768px) {
  :root { --gutter: 2.5rem; }
  .section-pad { padding-block: 5rem; }
  .sec-title { font-size: calc(2.9rem * var(--h-scale)); }
  .lede { font-size: 1.15rem; margin-top: 1.3rem; }
  .hero { padding-block: 4rem 4.5rem; }
  .hero h1 { font-size: calc(3.6rem * var(--h-scale)); }
  .hero-sub { font-size: 1.2rem; }
  .hero-stats { grid-template-columns: 1fr 1fr 1fr; }
  .hero-stat:first-child { grid-column: auto; }
  .hero-stat .v { font-size: 2.3rem; }
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }

  /* table → real grid */
  .compare-table { font-size: 0.95rem; }
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: revert; }
  .compare-table { display: table; }
  .compare-table thead { display: table-header-group; }
  .compare-table tbody { display: table-row-group; }
  .compare-table tr { display: table-row; padding: 0; border-bottom: 0; }
  .compare-table th, .compare-table td { display: table-cell; }
  .compare-table thead th { font-family: var(--head); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; font-weight: 600; text-align: left; padding: 1.1rem 1.3rem; background: var(--bg-warm); color: var(--charcoal); border-bottom: 2px solid var(--border-strong); }
  .compare-table thead th:nth-child(3) { color: var(--teal-dark); border-left: 1px solid var(--border); }
  .compare-table td { padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--border); vertical-align: top; margin: 0; background: none; }
  .compare-table td:first-child { font-size: 0.92rem; }
  .compare-table td:nth-child(2)::before, .compare-table td:nth-child(3)::before { content: none; }
  .compare-table td:nth-child(3) { border-left: 1px solid var(--border); background: var(--copper-tint); border-radius: 0; }
  .compare-table tbody tr:last-child td { border-bottom: 0; }

  .flow-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .pilot-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════
   ≥ 1024px — desktop (two-column layouts return)
   ════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root { --gutter: 3rem; }
  .section-pad { padding-block: 6.5rem; }
  .nav { height: 76px; }
  .brand img { height: 42px; }
  .brand-text .l1 { font-size: 0.92rem; }
  .brand-text .l2 { font-size: 0.62rem; }

  /* nav becomes inline */
  .nav-toggle { display: none; }
  .nav-links { position: static; transform: none; visibility: visible; flex-direction: row; align-items: center; gap: 2rem; background: none; padding: 0; border: 0; }
  .nav-links a { font-size: 0.82rem; padding: 0; border: 0; min-height: auto; position: relative; color: rgba(255,255,255,0.7); }
  .scrolled .nav-links a { color: var(--charcoal-mid); }
  .nav-links a:hover { color: #fff; }
  .scrolled .nav-links a:hover { color: var(--copper-dark); }
  .nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--copper); transition: width .25s; }
  .nav-links a:hover::after { width: 100%; }
  .nav-cta { width: auto; margin: 0; padding: 11px 22px; min-height: auto; font-size: 0.8rem; letter-spacing: 0.1em; color: #fff !important; }
  .nav-cta::after { display: none; }

  .sec-title { font-size: calc(3.4rem * var(--h-scale)); }
  .hero { padding-block: 5rem 5.5rem; }
  .hero h1 { font-size: calc(4.4rem * var(--h-scale)); line-height: 0.98; }
  .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3.5rem; align-items: center; flex-direction: row; }
  .hero-sub { font-size: 1.28rem; }
  .hero-emblem { display: block; position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(40vw, 440px); opacity: 0.10; filter: drop-shadow(0 0 40px rgba(201,131,74,0.3)); pointer-events: none; }
  /* hero-img-slot uses natural 3:2 aspect ratio; no fixed-height override */

  .calc-shell { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; }
  .pressure-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 4rem; align-items: start; }
  .assets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
  .why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
  .why-statement { font-size: 1.6rem; }
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .imagery-grid { grid-template-columns: repeat(3, 1fr); }

  /* flow: 6 across + connector rail */
  .flow-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; padding-top: 32px; }
  .flow-rail { display: block; position: absolute; top: 38px; left: 0; right: 0; height: 0; z-index: 0; pointer-events: none; }
  .flow-line { position: absolute; left: 8.33%; right: 8.33%; top: 0; height: 2px; background: linear-gradient(90deg, var(--ac-em-d), var(--teal)); opacity: 0.55; border-radius: 2px; }
  .flow-chev { position: absolute; top: 0; transform: translate(-50%, -50%); color: var(--ac-em-d); font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 1; }
  .flow-badge { top: -18px; width: 48px; height: 48px; }
  /* flow-img uses natural 3:2 aspect ratio; no fixed-height override */
  .flow-body h4 { font-size: 1.02rem; }
  .flow-body p { font-size: 0.85rem; }
  .flow-tag { font-size: 0.78rem; }

  .steps, .pilot-steps { grid-template-columns: repeat(6, 1fr); }
}

/* ≥1200 — generous desktop type */
@media (min-width: 1200px) {
  .sec-title { font-size: calc(3.6rem * var(--h-scale)); }
  .hero h1 { font-size: calc(5rem * var(--h-scale)); }
}

/* ════════════════════════════════════════════════
   TWEAKABLE THEME (data-* on <html>) — unchanged contract
   ════════════════════════════════════════════════ */
html[data-mood="tactical"] {
  --ink: #121010; --ink-2: #191613; --ink-3: #211c18; --ink-line: rgba(255,255,255,0.08);
  --bg-surface: #F3EDE6; --bg-warm: #EFE6DC; --border: #E3D8CC; --border-strong: #D2C1B2;
  --shadow-md: 0 10px 34px rgba(18,10,4,0.18); --hero-glow: 0.30; --hero-grid: 1;
}
html[data-mood="premium"] {
  --ink: #241f1b; --ink-2: #2b2520; --ink-3: #342e28; --ink-line: rgba(255,255,255,0.12);
  --bg: #FFFDFB; --bg-surface: #FBF7F2; --bg-warm: #F7F1EA; --border: #EEE6DC;
  --shadow-md: 0 16px 48px rgba(44,28,16,0.09); --hero-glow: 0.15; --hero-grid: 0.5;
}
html[data-accent="teal"] { --ac-eye-d: #1E837A; --ac-eye-l: #00A89D; --ac-em-d: #1E837A; --ac-em-l: #00A89D; }
html[data-accent="dual"] { --ac-eye-d: #1E837A; --ac-eye-l: #00A89D; --ac-em-d: #AE6D4F; --ac-em-l: #E59F78; }
html[data-display="editorial"] { --h-scale: 0.9; --h-weight: 600; --ey-track: 0.3em; }
html[data-display="impact"] { --h-scale: 1.12; --h-weight: 700; --ey-track: 0.18em; }
#tweaks-root:empty { display: none; }

/* ════════════════════════════════════════════════
   PILOT PROGRAMME — progress timeline (replaces plain boxes)
   Mobile: vertical path · Desktop: horizontal stepper
   ════════════════════════════════════════════════ */
.pilot { background: var(--bg-surface); }
.pilot-track { position: relative; margin-top: 2.75rem; }
.pilot-list { list-style: none; position: relative; display: flex; flex-direction: column; gap: 0; }

/* the connecting path (mobile = vertical, runs through node centres at x=24px) */
.pilot-list::before {
  content: ''; position: absolute; left: 23px; top: 26px; bottom: 26px; width: 2px;
  background: linear-gradient(180deg, var(--copper) 0%, var(--copper-light) 50%, var(--teal) 100%);
  border-radius: 2px;
}

.pstep { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 1.1rem; padding-bottom: 1.7rem; align-items: start; }
.pstep:last-child { padding-bottom: 0; }

.pstep-node {
  position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--copper) 0%, var(--copper-dark) 100%);
  border: 3px solid var(--bg-surface);
  box-shadow: 0 5px 14px rgba(174,109,79,.30);
  transition: transform .2s, box-shadow .2s;
}
.pstep-node svg { width: 21px; height: 21px; stroke: #fff; fill: none; }
.pstep-num {
  position: absolute; top: -7px; right: -7px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; color: var(--copper-dark); border: 1px solid var(--copper-pale);
  font-family: var(--head); font-weight: 700; font-size: 0.66rem; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.18); letter-spacing: 0;
}
.pstep:hover .pstep-node { transform: scale(1.07); box-shadow: 0 8px 20px rgba(174,109,79,.36); }

.pstep-body { padding-top: 5px; }
.pstep-body h4 { font-family: var(--head); font-weight: 700; font-size: 1.14rem; text-transform: uppercase; letter-spacing: .03em; color: var(--charcoal); }
.pstep-body p { font-size: .9rem; color: var(--charcoal-mid); margin-top: .2rem; }

/* destination step */
.pstep-goal .pstep-node { background: linear-gradient(150deg, var(--teal-bright) 0%, var(--teal) 100%); box-shadow: 0 6px 18px rgba(0,168,157,.34); }
.pstep-goal .pstep-node::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--teal); opacity: .35; }
.pstep-goal .pstep-num { color: var(--teal-dark); border-color: rgba(0,168,157,.4); }
.pstep-goal:hover .pstep-node { box-shadow: 0 8px 22px rgba(0,168,157,.42); }
.pstep-goal .pstep-body h4 { color: var(--teal-dark); }

/* ≥768 — horizontal stepper */
@media (min-width: 768px) {
  .pilot-list { flex-direction: row; gap: 0; }
  .pilot-list::before {
    left: 8.33%; right: 8.33%; top: 24px; bottom: auto; width: auto; height: 3px;
    background: linear-gradient(90deg, var(--copper) 0%, var(--copper-light) 55%, var(--teal) 100%);
  }
  .pstep { flex: 1; grid-template-columns: 1fr; gap: 0; padding: 0 0.6rem; text-align: center; justify-items: center; align-content: start; }
  .pstep-node { margin: 0 auto; }
  .pstep-body { padding-top: 1rem; max-width: 16ch; }
  .pstep-body h4 { min-height: 1.2em; }
  .pstep-body p { margin-top: .35rem; }
}
@media (min-width: 1024px) { .pstep { padding: 0 0.9rem; } }

/* ════════════════════════════════════════════════════════════════
   INVERTED THEME (client request)
   Each section band has been flipped: previously dark sections are
   now light and previously light sections are now dark. The on-dark
   utility class on each <section> drives the typography colours
   (sec-title, lede, eyebrow); this block handles the bespoke
   per-section backgrounds, gradients, cards, and any colours that
   were hard-coded as #fff / charcoal in the original rules.
   ──────────────────────────────────────────────────────────────── */

/* Header — now white in both states (client request). Brand text and links
   read in charcoal; hamburger bars charcoal. */
.site-header { background: rgba(255,255,255,0.94); border-bottom: 1px solid var(--border); }
.site-header.scrolled { background: rgba(255,255,255,0.98); border-bottom-color: var(--border); }
.site-header .brand-text .l1,
.site-header.scrolled .brand-text .l1 { color: var(--charcoal); }
.site-header .brand-text .l2,
.site-header.scrolled .brand-text .l2 { color: var(--copper-dark); }
.site-header .nav-toggle span,
.site-header.scrolled .nav-toggle span { background: var(--charcoal); }

/* Mobile burger menu flyout — was dark ink with white links; flip it to a
   warm-light panel with charcoal links so the mobile nav reads exactly
   like the desktop one. Scoped to ≤1023px so it doesn't paint a beige
   strip behind the inline desktop nav at ≥1024px. */
@media (max-width: 1023px) {
  .site-header .nav-links { background: var(--bg-warm); border-bottom: 1px solid var(--border); }
  .site-header .nav-links a { color: var(--charcoal-mid); border-bottom-color: var(--border); }
  .site-header .nav-links a:hover { color: var(--copper-dark); }
  .site-header .nav-links .nav-cta { color: #fff; }
}

/* Desktop nav links on the now-white header: charcoal-mid, copper on hover */
@media (min-width: 1024px) {
  .site-header .nav-links a,
  .site-header.scrolled .nav-links a { color: var(--charcoal-mid); }
  .site-header .nav-links a:hover,
  .site-header.scrolled .nav-links a:hover { color: var(--copper-dark); }
}

/* "Know Your Numbers" CTA — flip from copper to teal (client request).
   Padding stays equal on all sides so the text-to-edge gap matches. */
.nav-cta.btn-primary { background: var(--teal); box-shadow: 0 6px 18px rgba(0,168,157,0.28); }
.nav-cta.btn-primary:hover { background: var(--teal-bright); box-shadow: 0 10px 26px rgba(0,168,157,0.34); }
@media (min-width: 1024px) {
  .site-header .nav-cta { padding: 14px 14px; }
}

/* Hero — was dark gradient; now light gradient warm → bg */
.hero {
  color: var(--charcoal);
  background:
    radial-gradient(700px 480px at 80% -10%, rgba(201,131,74,0.18), transparent 60%),
    linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
}
.hero::after { opacity: 0.04; }
.hero h1 { color: var(--charcoal); }
.hero h1 em { color: var(--ac-em-d); }
.hero-eyebrow { color: var(--ac-eye-d); background: rgba(0,0,0,0.04); border: 1px solid var(--border); }
.hero-eyebrow .dot { background: var(--teal-dark); box-shadow: 0 0 0 4px rgba(18,79,52,0.15); }
.hero-sub, .hero-body { color: var(--charcoal-mid); }
.hero-stat { background: rgba(0,0,0,0.025); border: 1px solid var(--border); border-left: 3px solid var(--copper-dark); backdrop-filter: none; }
.hero-stat .v { color: var(--copper-dark); }
.hero-stat .l { color: var(--charcoal-light); }

/* Positioning bar — was dark ink-3; now warm light */
.positioning { background: var(--bg-warm); color: var(--charcoal); border-block: 1px solid var(--border); }
.positioning .label { color: var(--copper-dark); }
.positioning .chip { color: var(--charcoal-mid); background: var(--bg); border-color: var(--border); }
.positioning .chip::before { background: var(--teal-dark); }

/* Calculator — was light bg-surface; now dark ink-2.
   The interior calc-card stays light (white card on dark band reads well). */
.calculator { background: var(--ink-2); }

/* Pressure — was dark ink; now warm light */
.pressure { background: var(--bg-warm); color: var(--charcoal); }
.pressure-closer { color: var(--charcoal); background: rgba(0,0,0,0.03); border-left-color: var(--copper-dark); }
.pressure .pressure-item { border-bottom: 1px solid var(--border); }
.pressure .pressure-item .n { color: var(--copper-dark); }
.pressure .pressure-item p { color: var(--charcoal-mid); }
.pressure .pressure-intro { font-family: var(--head); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-dark); margin-bottom: 0.75rem; }
.pressure .pressure-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--charcoal-mid); font-size: 1rem; line-height: 1.5; }
.pressure .pressure-note strong { color: var(--charcoal); font-weight: 700; }

/* Example Model — bare section, was light; now dark */
#model { background: var(--ink-2); }
/* compare-table sits inside #model on desktop; flip its header to dark */
#model .compare-table-wrap { background: var(--bg); }

/* Assets — was dark gradient; now light gradient */
.assets {
  background: linear-gradient(180deg, var(--bg-warm) 0%, var(--bg) 100%);
  color: var(--charcoal);
}
.assets .assets-body p { color: var(--charcoal-mid); }
.assets .assets-body p strong { color: var(--charcoal); }
.assets .capex-card { border-color: var(--border); background: var(--bg); backdrop-filter: none; box-shadow: var(--shadow-sm); }
.assets .flip-box { border-color: var(--border); }
.assets .flip-box .k { color: var(--charcoal-light); }
.assets .flip-box.capex .vv { color: var(--copper-dark); }
.assets .flip-box.opex { background: rgba(0,168,157,0.06); border-color: rgba(0,168,157,0.3); }
.assets .flip-box.opex .vv { color: var(--teal-dark); }

/* Solutions — bare section, was light; now dark */
#solutions { background: var(--ink-2); }
/* svc-card was a light card with subtle gradient — keep light on dark band.
   Hover wash is now teal-toned (client request) instead of copper. */
#solutions .svc-card:hover {
  background: linear-gradient(155deg, color-mix(in srgb, var(--teal-bright) 18%, var(--bg)) 0%, color-mix(in srgb, var(--teal-bright) 3%, var(--bg)) 70%);
  border-color: var(--teal-bright);
}
#solutions .svc-card::before { background: var(--teal); }

/* Imagery / Operating Environments — was dark gradient; now warm gradient */
.imagery {
  background: linear-gradient(180deg, var(--bg-warm), var(--bg));
  color: var(--charcoal);
}
.imagery-cap .t { color: var(--charcoal); }
.imagery-cap .d { color: var(--charcoal-mid); }

/* How It Works — was bg-warm light; now dark ink. Cards 01–05 stay white
   (their original styling); card 06 uses the existing .flow-card.dark
   variant — both rules are re-asserted under .howitworks to win over the
   generic .flow-card rule that now sits earlier in the cascade. */
.howitworks { background: var(--ink); }
.howitworks .flow-card { background: var(--bg); border-color: var(--border); }
.howitworks .flow-card.dark { background: linear-gradient(170deg, var(--ink-2), var(--ink)); border-color: var(--ink-line); }
.howitworks .flow-card.dark .flow-body h4 { color: #fff; }
.howitworks .flow-card.dark .flow-body p { color: rgba(255,255,255,0.62); }
.howitworks .flow-card.dark .flow-ico { background: rgba(0,168,157,0.14); border-color: rgba(0,168,157,0.4); }
.howitworks .flow-card.dark .flow-ico svg { stroke: var(--teal-bright); }
.howitworks .flow-card.dark .flow-tag,
.howitworks .flow-card.dark .flow-tag svg { color: var(--teal-bright); stroke: var(--teal-bright); }
.howitworks .step h4 { color: #fff; }
.howitworks .step p { color: rgba(255,255,255,0.72); }
.howitworks .flow-badge { border-color: var(--ink); }
.howitworks .flow-rail { opacity: 0.4; }
/* Bump the teal "tag" line under each step up one size step, and force
   every tag block to the same vertical footprint so the tag tops line up
   across cards even when some wrap to 3 lines and others to 2. */
.howitworks .flow-tag {
  font-size: 0.95rem;
  line-height: 1.3;
  align-items: flex-start;
  min-height: 4em;          /* ≈ 3 lines at line-height 1.3 */
}
@media (min-width: 1024px) {
  .howitworks .flow-tag { font-size: 0.9rem; min-height: 3.9em; }
}

/* Why SLS — was dark ink; now warm light */
.why { background: var(--bg-warm); color: var(--charcoal); }
.why .why-statement .accent { color: var(--ac-em-d); }
.why .benefits, .why .benefit { color: var(--charcoal-mid); }
.why .benefit { border-bottom: 1px solid var(--border); }
.why .benefit svg { stroke: var(--teal-dark); }

/* Pilot — was light bg-surface; now dark */
.pilot { background: var(--ink-2); color: rgba(255,255,255,0.85); }
.pilot .pilot-list, .pilot .pilot-list li { color: rgba(255,255,255,0.82); }
.pilot .pilot-list li strong { color: #fff; }
/* Step labels under each circle were charcoal/charcoal-mid — lift them so
   they read on the now-dark band. */
.pilot .pstep-body h4 { color: #fff; }
.pilot .pstep-body p { color: rgba(255,255,255,0.78); }
.pilot .pstep-goal .pstep-body h4 { color: var(--teal-bright); }

/* Final CTA / Contact — was dark with copper/teal radial glows; now
   light with the same glow geometry over a warm/white wash */
.finalcta {
  color: var(--charcoal);
  background:
    radial-gradient(700px 420px at 20% 120%, rgba(201,131,74,0.16), transparent 60%),
    radial-gradient(560px 360px at 90% -20%, rgba(18,79,52,0.10), transparent 60%),
    var(--bg);
}
.finalcta .sec-title { color: var(--charcoal); }
.finalcta .lede { color: var(--charcoal-mid); }
.finalcta .contact-item { color: var(--charcoal-mid); }
.finalcta .contact-item a { color: var(--charcoal); }

.finalcta .contact-item svg { stroke: var(--charcoal-mid); }

.site-footer { background: var(--bg-warm); color: var(--charcoal-mid); border-top: 1px solid var(--border); }
.footer-top { border-bottom: 1px solid var(--border); }
.footer-lockup .l1 { color: var(--charcoal); }
.footer-lockup .l2 { color: var(--copper-dark); }
.footer-brand p { color: var(--charcoal-mid); }
.footer-col h5 { color: var(--copper-dark); }

.footer-col a { color: var(--charcoal-mid); }
.footer-col a:hover { color: var(--charcoal); }
.footer-col span { color: var(--charcoal-light); }
.footer-bottom { color: var(--charcoal-light); border-top: 1px solid var(--border); }