/* ========================================================================== */
/*  Lumina — Natural, green-forward UI (no body theme, no cyan).              */
/*  Alternating section themes that harmonize with --accent #71ff6a.          */
/*  Works with your existing HTML + JS (hero overlay, dot-nav, reveal).       */
/* ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Global dark shell (hero + chrome) */
  --bg:#0f1112;
  --surface:#121415;

  /* Text */
  --text:#ffffff;
  --muted:#b9c0c7;

  /* Brand accents (greens only) */
  --accent:#71ff6a;   /* electric green */
  --accent-2:#39d353; /* supporting green (no blue cast) */

  --shadow: rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); color: var(--text); margin: 0; }
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.4; overflow-x: hidden;
}

/* ========================================================================== */
/*  HEADER / CHROME                                                           */
/* ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.5vw, 28px); z-index: 50; pointer-events: none;
}
.brand { display: inline-flex; align-items: center; gap: 12px; pointer-events: auto; color: var(--text); text-decoration: none; }
.logo {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(65% 65% at 50% 50%, rgba(113,255,106,0.25) 0%, rgba(113,255,106,0.05) 40%, rgba(113,255,106,0.0) 70%);
  box-shadow: 0 0 0 1px rgba(113,255,106,0.35) inset, 0 10px 25px -10px rgba(113,255,106,0.35);
}
.logo svg { width: 60%; height: 60%; }
.brand-name { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(14px, 1.2vw, 15px); }

.badge{
  pointer-events: auto; display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 600; letter-spacing: .06em; border-radius: 999px; padding: 8px 14px;
  background: rgba(255,255,255,0.06); box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
  text-transform: uppercase; font-size: clamp(10px, .9vw, 12px);
}
.badge .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }

/* Left dots — readable on both dark & light sections */
.dot-nav {
  position: fixed; left: clamp(10px, 2vw, 24px); top: 50%; transform: translateY(-50%);
  display: grid; gap: 18px; z-index: 6; list-style: none; margin: 0; padding: 0;
}
.dot-nav li{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(22,25,27,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset, /* inner ring for light bgs */
    0 0 0 1px rgba(0,0,0,.45);             /* outer ring for dark bgs */
}
.dot-nav li.is-active{
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(17,17,17,.55), 0 0 10px var(--accent);
}

/* Email FABs */
.fab {
  position: fixed; left: clamp(10px, 2vw, 24px); bottom: clamp(16px, 2.5vw, 28px);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(3px); z-index: 6; cursor: pointer;
}
.fab svg { width: 22px; height: 22px; }

.social-fab { position: fixed; right: clamp(10px, 2vw, 24px); bottom: clamp(16px, 2.5vw, 28px); display: inline-flex; gap: 10px; z-index: 6; }
.fab-circle{
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); backdrop-filter: blur(3px);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.fab-circle:hover{ transform: translateY(-1px); border-color: var(--accent); background: rgba(255,255,255,0.12); }

/* ========================================================================== */
/*  HERO (kept as‑is; overlay + particles from app.js)                        */
/* ========================================================================== */
.hero{ position: relative; height: 100svh; min-height: 560px; width: 100%; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.hero::before, .hero::after{ content: ""; position: absolute; inset: 0; pointer-events: none; }
.hero::before{ z-index: 0; background: center / cover no-repeat url('assets/hero.jpg'); filter: saturate(110%) contrast(108%); transform: scale(1.02); }
/* Depth vignette overlay — dark edges, soft center */
.hero::after{
  z-index: 1;
  background:
    radial-gradient(circle at 50% 55%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.22) 62%, rgba(0,0,0,0.45) 76%, rgba(0,0,0,0.70) 88%, rgba(0,0,0,0.90) 100%),
    radial-gradient(100% 70% at 50% 55%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.00) 60%),
    linear-gradient(to bottom, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.10) 28%, rgba(0,0,0,0.28) 68%, rgba(0,0,0,0.46) 100%);
  mix-blend-mode: multiply; opacity: 0.95;
}
#particle-canvas{ position: absolute; inset: -10% -10% -10% -10%; z-index: 2; background: transparent; } /* particles above overlay */
.grain{ position: absolute; inset: 0; z-index: 3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.06'/></svg>");
  mix-blend-mode: soft-light; opacity: .55; pointer-events: none;
}
.hero-inner{ position: relative; z-index: 4; text-align: center; max-width: min(1200px, 92vw); padding: 0 1rem; }
.eyebrow{ font-weight:700; font-size:clamp(12px,.95vw,14px); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:1.5rem; text-shadow:0 0 16px rgba(113,255,106,0.4);}
.headline{ margin:0; font-family:"Anton", Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-transform:uppercase; line-height:.9; letter-spacing:.02em; font-size:clamp(44px,9vw,128px); color:#fff; text-shadow:0 .03em .02em rgba(0,0,0,.35); position: relative; isolation:isolate; }
/* Hotspots on headline: green‑only (removed blue/cyan) */
.headline::after{
  content:""; position:absolute; inset:-0.1em -0.2em; pointer-events:none; z-index:1;
  background:
    radial-gradient(7.5em 5.5em at 22% 42%, rgba(113,255,106,.22), rgba(113,255,106,.08) 55%, rgba(113,255,106,0) 72%),
    radial-gradient(5.8em 4.4em at 63% 58%, rgba(57,211,83,.16), rgba(57,211,83,.05) 50%, rgba(57,211,83,0) 70%),
    radial-gradient(5.0em 4.0em at 78% 40%, rgba(113,255,106,.16), rgba(113,255,106,.05) 52%, rgba(113,255,106,0) 74%),
    radial-gradient(5.8em 4.5em at 38% 66%, rgba(57,211,83,.14), rgba(57,211,83,.05) 48%, rgba(57,211,83,0) 72%);
  mix-blend-mode: color-dodge; opacity:.18; filter: blur(.6px) saturate(115%);
}
.subline{ margin:28px auto 0; font-size:clamp(14px,1.35vw,18px); color:var(--accent); opacity:.96; max-width:920px; text-shadow:0 0 16px rgba(113,255,106,0.35), 0 1px 0 rgba(0,0,0,0.35); }

/* Scroll indicator */
.scroll-indicator{
  position:absolute; left:50%; bottom: clamp(36px,7vh,72px); transform:translateX(-50%);
  width:64px; height:64px; border:2px solid rgba(255,255,255,0.75); border-radius:50%;
  display:grid; place-items:center; cursor:pointer; z-index:5; background:rgba(0,0,0,0.15);
  backdrop-filter: blur(2px); transition: border-color .2s ease;
}
.scroll-indicator:hover { border-color: var(--accent); }
.scroll-indicator svg { width:28px; height:28px; animation: float 1.8s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(-4px); } 50%{ transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-indicator svg{ animation:none; } }
@media (max-width: 640px) { .site-header{ padding:16px; } .subline{ padding:0 10px; } .badge{ display:none; } }

/* ========================================================================== */
/*  SECTION THEMES (alternating backgrounds; per‑section classes)             */
/*  These match your current HTML: #proof.theme--charcoal, #approach.theme--ink */
/* ========================================================================== */

/* A) Deep Charcoal — neutral dark with a faint emerald lift (no cyan) */
.theme--charcoal{
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(113,255,106,.045), rgba(113,255,106,0) 60%),
    linear-gradient(180deg, #0f1112 0%, #0b0d0e 100%);
}

/* B) Graphite‑Moss (kept as .theme--ink for your HTML) — distinct dark band */
.theme--ink{
  background:
    radial-gradient(120% 100% at 20% 0%, rgba(57,211,83,.04), rgba(57,211,83,0) 55%),
    linear-gradient(180deg, #0a0f0c 0%, #0b0e0d 100%);
}

/* C) Fog — soft neutral grey (no blue tint), for a light alternate band */
.theme--fog{
  --text:#0b0f14; --muted:#3a4756;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(113,255,106,.025), rgba(113,255,106,0) 60%),
    linear-gradient(180deg, #f5f7f8 0%, #eef1f3 100%);
  color: var(--text);
  position: relative;
}
.theme--fog::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: radial-gradient(140% 140% at 50% -20%, rgba(0,0,0,.08), rgba(0,0,0,0) 55%);
  mix-blend-mode: multiply; opacity:.60;
}

/* D) Paper — clean white, gently warm (pairs with green accent) */
.theme--paper{
  --text:#0b0f14; --muted:#5b6673;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(113,255,106,.02), rgba(113,255,106,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fafcfb 100%);
  color: var(--text);
  position: relative;
}
.theme--paper::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: radial-gradient(150% 160% at 50% -30%, rgba(0,0,0,.08), rgba(0,0,0,0) 58%);
  mix-blend-mode: multiply; opacity:.50;
}

/* ========================================================================== */
/*  PROOF / RESULTS                                                           */
/* ========================================================================== */
.proof{ position: relative; padding: clamp(64px, 9vw, 128px) clamp(16px, 6vw, 80px); }

/* luminous seam line (works on light/dark) */
.proof::before{
  content:""; position:absolute; inset:0 0 auto 0; height: clamp(10px, 1.2vw, 16px); z-index:2;
  background:
    linear-gradient(to right, rgba(113,255,106,0) 0%, var(--accent) 15%, var(--accent) 85%, rgba(113,255,106,0) 100%),
    radial-gradient(140% 120% at 50% 50%, rgba(113,255,106,.30) 0%, rgba(113,255,106,.16) 45%, rgba(113,255,106,0) 70%);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(113,255,106,.26) inset, 0 0 36px rgba(113,255,106,.30), 0 10px 30px -12px rgba(113,255,106,.22);
  filter: saturate(115%) contrast(105%);
}

.proof-head{ max-width:1100px; margin:0 auto 28px auto; text-align:center; }
.proof-eyebrow{ color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-weight:700; font-size:clamp(12px,.95vw,14px); margin:0 0 .4rem 0; text-shadow:0 0 12px rgba(113,255,106,.25); }
.proof-title{ margin:0; color:var(--text); font-weight:800; font-size:clamp(24px,3.4vw,40px); letter-spacing:.01em; }
.proof-subtitle{ margin:.75rem auto 0 auto; max-width:860px; color:var(--muted); font-size:clamp(14px,1.2vw,18px); }

/* Press logos */
.press-marquee{ position:relative; margin: clamp(22px,4vw,36px) auto clamp(28px,5vw,44px) auto; max-width:1200px; overflow:hidden; opacity:.95; }
.press-marquee::before, .press-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:80px; pointer-events:none; z-index:2;
  background: linear-gradient(to right, var(--bg), transparent);
}
.theme--fog .press-marquee::before,
.theme--paper .press-marquee::before{ left:0; background: linear-gradient(to right, #f5f7f8, transparent); }
.theme--fog .press-marquee::after,
.theme--paper .press-marquee::after{ right:0; transform: rotate(180deg); background: linear-gradient(to right, #f5f7f8, transparent); }
.theme--charcoal .press-marquee::before,
.theme--ink .press-marquee::before{ left:0; }
.theme--charcoal .press-marquee::after,
.theme--ink .press-marquee::after{ right:0; transform: rotate(180deg); }

.press-track{ display:flex; gap: clamp(28px,5vw,64px); align-items:center; animation: none !important; }
.press-track img{ opacity:.85; filter: saturate(0) contrast(1.05) brightness(1.12); height:28px; width:auto; }

/* Testimonials */
.t-list{
  max-width:1200px; margin:0 auto; padding:0; list-style:none;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,3.2vw,32px);
}
@media (max-width:960px){ .t-list{ grid-template-columns:1fr; } }

.t-card{
  position:relative; height:100%; display:grid; grid-template-rows:auto 1fr auto; gap:16px;
  padding: clamp(18px,3.2vw,22px);
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; box-shadow: 0 14px 36px -20px rgba(0,0,0,.66);
  backdrop-filter: blur(2px); overflow:hidden;
}
.theme--fog .t-card, .theme--paper .t-card{
  background:#ffffff; border:1px solid rgba(10,14,20,.10);
  box-shadow: 0 14px 36px -22px rgba(2,6,23,.16);
  backdrop-filter: none;
}

/* luminous edge (green only; removed blue) */
.t-card::before{
  content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none; padding:1px;
  background:
    radial-gradient(60% 100% at 10% 0%, rgba(113,255,106,.18), rgba(113,255,106,0) 60%),
    linear-gradient(0deg, rgba(255,255,255,.12), rgba(255,255,255,.12)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.theme--fog .t-card::before, .theme--paper .t-card::before{
  background:
    radial-gradient(60% 100% at 10% 0%, rgba(113,255,106,.10), rgba(113,255,106,0) 60%),
    linear-gradient(0deg, rgba(10,14,20,.10), rgba(10,14,20,.10)) border-box;
}

.t-top{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; }
.t-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6); }
.t-id{ display:grid; gap:2px; }
.t-name{ color:var(--text); font-weight:700; font-size:16px; margin:0; }
.theme--fog .t-name, .theme--paper .t-name{ color:#0b0f14; }
.t-role{ color:var(--muted); font-size:13px; margin:0; }
.t-rating{ font-size:14px; color:#ffd36e; letter-spacing:.1em; }

.t-quote{ margin:0; color:#e8eef5; line-height:1.55; font-size:clamp(14px,1.15vw,16px); text-wrap:balance; }
.theme--fog .t-quote, .theme--paper .t-quote{ color:#16202b; }

.t-metrics{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; margin:2px 0 0 0;
}
.t-metrics div{ display:grid; gap:4px; padding:10px; border-radius:10px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.theme--fog .t-metrics div, .theme--paper .t-metrics div{ background: rgba(10,14,20,.03); border:1px solid rgba(10,14,20,.08); }
.t-metrics dt{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.t-metrics dd{ margin:0; color:var(--text); font-weight:700; }
.theme--fog .t-metrics dd, .theme--paper .t-metrics dd{ color:#0b0f14; }

/* Impact band */
.impact{
  max-width:1200px; margin: clamp(20px,4vw,36px) auto 6px auto;
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px, 2.8vw, 24px);
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding: clamp(12px, 2.6vw, 18px); box-shadow: 0 12px 30px -20px rgba(0,0,0,.6);
}
@media (max-width:960px){ .impact{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.theme--fog .impact, .theme--paper .impact{
  background:#ffffff; border:1px solid rgba(10,14,20,.10); box-shadow: 0 12px 30px -22px rgba(2,6,23,.14);
}

.kpi-num{ display:block; font-weight:800; color:var(--text); font-size: clamp(18px, 2.6vw, 28px); text-shadow: 0 0 12px rgba(113,255,106,.18), 0 .03em .02em rgba(0,0,0,.35); }
.theme--fog .kpi-num, .theme--paper .kpi-num{ color:#0b0f14; text-shadow:none; }
.kpi-label{ display:block; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }

/* Footnote */
.proof-footnote{ margin:8px auto 0 auto; max-width:900px; text-align:center; color:rgba(233,238,245,.8); font-size:12px; }
.theme--fog .proof-footnote, .theme--paper .proof-footnote{ color:#4b5661; }

/* ========================================================================== */
/*  APPROACH                                                                  */
/* ========================================================================== */
.approach{ position:relative; padding: clamp(64px, 9vw, 120px) clamp(16px, 6vw, 80px); isolation:isolate; }
.section-head{ max-width:1100px; margin:0 auto clamp(20px,4vw,36px) auto; text-align:center; }
.section-eyebrow{ color:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-weight:700; font-size:clamp(12px, .95vw, 14px); margin:0 0 .4rem 0; text-shadow:0 0 12px rgba(113,255,106,.25); }
.section-title{ margin:0; color:var(--text); font-weight:800; font-size:clamp(24px,3.4vw,40px); letter-spacing:.01em; }
.section-subtitle{ margin:.75rem auto 0 auto; max-width:860px; color:var(--muted); font-size:clamp(14px,1.2vw,18px); }

/* --- Vertical timeline (for your current #approach HTML) --- */
.tl{ max-width:1100px; margin: clamp(12px,3.4vw,28px) auto 0 auto; display:grid; gap: clamp(12px, 2.6vw, 18px); }
.tl-item{ position:relative; display:grid; grid-template-columns:28px 1fr; column-gap:14px; padding-bottom:14px; }
.tl-item::before{ content:""; position:absolute; left:14px; top:22px; bottom:-6px; width:2px; background: linear-gradient(to bottom, rgba(255,255,255,.12), rgba(255,255,255,.06)); }
.tl-item:last-child::before{ display:none; }
.tl-dot{
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  font-size:12px; font-weight:800; letter-spacing:.02em; color:#0a0c0d;
  background: radial-gradient(circle at 50% 50%, var(--accent), rgba(113,255,106,0.55));
  box-shadow: 0 0 0 2px rgba(113,255,106,.35), 0 8px 16px -10px rgba(0,0,0,.8);
  transform: translateY(2px);
}
.tl-title{ margin:0; font-size:16px; font-weight:800; color:var(--text); }
.tl-body{ margin:6px 0 8px 0; color:#e8eef5; font-size:clamp(13px,1.05vw,15px); line-height:1.55; }
.tl-meta{ display:inline-flex; gap:8px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.tl-meta li{
  font-size:12px; color:var(--text); font-weight:700; padding:6px 8px; border-radius:999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}

/* Light timeline variant (if you switch #approach to .theme--paper) */
.theme--paper .tl-title{ color:#0b0f14; }
.theme--paper .tl-body{ color:#3a4756; }
.theme--paper .tl-item::before{ background: linear-gradient(to bottom, rgba(10,14,20,.12), rgba(10,14,20,.06)); }
.theme--paper .tl-meta li{ color:#0b0f14; background: rgba(10,14,20,.04); border:1px solid rgba(10,14,20,.08); }

/* --- Glass photo cards + 3‑step plan (if you use the 3‑card layout) --- */
.glass-grid{
  max-width:1200px; margin: clamp(8px, 2.6vw, 16px) auto 0 auto;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 2.6vw, 20px);
}
@media (max-width:960px){ .glass-grid{ grid-template-columns:1fr; } }

.glass-card{
  position:relative; overflow:hidden; border-radius:16px;
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.40));
  border:1px solid rgba(10,14,20,.10);
  box-shadow: 0 18px 48px -26px rgba(2,6,23,.16);
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.glass-card::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(113,255,106,.10), rgba(113,255,106,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  mix-blend-mode: soft-light;
}
.theme--ink .glass-card, .theme--charcoal .glass-card{
  background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.12); box-shadow: 0 18px 48px -26px rgba(0,0,0,.75);
}
.glass-card:hover{ transform: translateY(-2px); box-shadow: 0 22px 60px -26px rgba(2,6,23,.22); border-color: rgba(10,14,20,.14); }
.theme--ink .glass-card:hover, .theme--charcoal .glass-card:hover{ box-shadow: 0 22px 60px -26px rgba(0,0,0,.78); border-color: rgba(255,255,255,.16); }

.glass-photo{ width:100%; height: clamp(220px, 36vw, 340px); display:block; object-fit:cover; filter:saturate(110%) contrast(104%); transform:scale(1.02); transition: transform .35s ease; }
.glass-card:hover .glass-photo{ transform:scale(1.035); }

.glass-cap{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px; display:grid; gap:2px;
  background: linear-gradient(to top, rgba(255,255,255,.82), rgba(255,255,255,.46), rgba(255,255,255,0));
  color:#0b0f14; border-top:1px solid rgba(10,14,20,.08);
}
.theme--ink .glass-cap, .theme--charcoal .glass-cap{
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.28), rgba(0,0,0,0));
  color:#fff; border-top:1px solid rgba(255,255,255,.10);
}
.glass-cap .cap-eyebrow{ color:var(--accent); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:11px; }
.glass-cap .cap-title{ font-weight:900; font-size: clamp(16px, 1.6vw, 18px); }

/* 3‑Step plan */
.steps{
  max-width:1200px; margin: clamp(16px, 3vw, 24px) auto 0 auto;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px, 2.4vw, 18px);
}
@media (max-width:960px){ .steps{ grid-template-columns:1fr; } }

.step-item{
  position:relative; display:grid; gap:8px;
  background:#ffffff; color:#0b0f14;
  border:1px solid rgba(10,14,20,.10); border-radius:14px; padding:16px 16px 14px;
  box-shadow: 0 12px 30px -24px rgba(2,6,23,.16);
}
.theme--ink .step-item, .theme--charcoal .step-item{
  background: rgba(255,255,255,.035); color:#fff; border:1px solid rgba(255,255,255,.12); box-shadow: 0 12px 30px -24px rgba(0,0,0,.7);
}
.step-dot{
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  font-size:12px; font-weight:800; letter-spacing:.02em; color:#0a0c0d;
  background: radial-gradient(circle at 50% 50%, var(--accent), rgba(113,255,106,.55));
  box-shadow: 0 0 0 2px rgba(113,255,106,.25), 0 8px 16px -10px rgba(2,6,23,.12);
  transform: translateY(2px);
}
.step-title{ margin:0; font-size:16px; font-weight:800; }
.theme--ink .step-title, .theme--charcoal .step-title{ color:#fff; }
.step-body{ margin:0; color:#5b6673; font-size:14px; line-height:1.55; }
.theme--ink .step-body, .theme--charcoal .step-body{ color:#e8eef5; }
.step-meta{ display:inline-flex; gap:8px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.step-meta li{
  font-size:12px; font-weight:700; color:#0b0f14;
  padding:6px 8px; border-radius:999px; background: rgba(10,14,20,.04); border:1px solid rgba(10,14,20,.08);
}
.theme--ink .step-meta li, .theme--charcoal .step-meta li{
  color:#fff; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}

/* CTA (shared) */
.tl-cta{ max-width:1200px; margin: clamp(16px, 4vw, 28px) auto 0 auto; display:grid; justify-items:center; gap:8px; }
.tl-cta-note{ margin:0; color:var(--muted); font-size:12px; }
.theme--paper .tl-cta-note, .theme--fog .tl-cta-note{ color:#5b6673; }

/* ========================================================================== */
/*  BUTTONS                                                                    */
/* ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color:#fff;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: var(--accent); background: rgba(255,255,255,.1); }
.btn-accent{
  background: linear-gradient(180deg, rgba(113,255,106,.18), rgba(113,255,106,.10));
  border-color: rgba(113,255,106,.38); box-shadow: 0 10px 26px -14px rgba(113,255,106,.45);
}
.theme--paper .btn,
.theme--fog .btn{
  color:#0b0f14; background: linear-gradient(180deg, rgba(10,14,20,.05), rgba(10,14,20,.02));
  border-color: rgba(10,14,20,.12);
}
.theme--paper .btn:hover,
.theme--fog .btn:hover{ background: rgba(10,14,20,.05); border-color: rgba(10,14,20,.2); transform: translateY(-1px); }
.theme--paper .btn-accent,
.theme--fog .btn-accent{
  background: linear-gradient(180deg, rgba(113,255,106,.32), rgba(113,255,106,.18));
  color:#0a0c0d; border-color: rgba(113,255,106,.45); box-shadow: 0 10px 26px -14px rgba(113,255,106,.28);
}

/* ========================================================================== */
/*  REVEAL ON SCROLL (pairs with your existing JS)                            */
/* ========================================================================== */
.reveal{ opacity:0; transform: translateY(14px); will-change: transform, opacity; transition: transform .6s ease, opacity .6s ease; }
.reveal.is-visible{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible{ opacity:1; transform:none; transition:none; }
}
/* === LIGHT THEMES — cyan‑free, green‑friendly ================== */
.theme--paper{
  --text:#0b0f14; --muted:#5b6673;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(113,255,106,.02), rgba(113,255,106,0) 60%),
    linear-gradient(180deg, #ffffff 0%, #fafcfb 100%);
  color: var(--text);
}
.theme--paper::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: radial-gradient(150% 160% at 50% -30%, rgba(0,0,0,.08), rgba(0,0,0,0) 58%);
  opacity:.50; mix-blend-mode: multiply;
}

/* soften the bright seam on white */
#proof.theme--paper::before{ opacity:.35; }

/* Soft grey band */
.theme--fog{
  --text:#0b0f14; --muted:#3a4756;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(113,255,106,.025), rgba(113,255,106,0) 60%),
    linear-gradient(180deg, #f5f7f8 0%, #eef1f3 100%);
  color: var(--text);
}
.theme--fog::after{
  content:""; position:absolute; inset:-1px; pointer-events:none;
  background: radial-gradient(140% 140% at 50% -20%, rgba(0,0,0,.08), rgba(0,0,0,0) 55%);
  opacity:.60; mix-blend-mode: multiply;
}
/* ===================== APPROACH — FULLY CENTERED LAYOUT ===================== */
/* Works with your existing #approach section (timeline + two photos).        */
/* Put this at the bottom of styles.css so it wins over earlier rules.        */

/* 1) Section container & headings */
#approach .section-head { text-align: center; }
#approach > * { margin-left: auto; margin-right: auto; }

/* 2) Photos block — center both images (one is currently right-aligned) */
#approach figure { 
  display: grid; 
  gap: 12px; 
  justify-items: center; 
  max-width: 1200px; 
}
#approach figure img{
  display: block;
  /* override inline margin-left:auto on the second image */
  margin-left: auto !important; 
  margin-right: auto !important;
}

/* 3) Timeline — switch to centered, stacked items */
#approach .tl{
  max-width: 900px;                 /* slightly narrower for nicer measure */
  display: grid;
  justify-items: center;            /* center each tl-item in the track   */
  text-align: center;
}
#approach .tl-item{
  grid-template-columns: 1fr;       /* one column: dot above, text below */
  row-gap: 10px;
  padding-bottom: 22px;
}
#approach .tl-item::before{
  /* move the connector line to the center under the dot */
  left: 50%; transform: translateX(-50%);
  width: 2px;
  top: 32px; bottom: -6px;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.08));
}
#approach .tl-item:last-child::before{ display: none; }
#approach .tl-dot{ margin: 0 auto 6px; }          /* center the step number */
#approach .tl-title, 
#approach .tl-body{ text-align: center; }         /* center copy */
#approach .tl-meta{ justify-content: center; }    /* center the chips */

/* 4) If you swap to the 3 glass cards + 3-step plan later, keep those centered too */
#approach .glass-grid{ justify-items: center; }
#approach .steps{ max-width: 1100px; justify-items: center; }
#approach .step-item{ text-align: center; }
#approach .step-meta{ justify-content: center; }
/* ===== Approach — fix list indentation that nudges items right ===== */
#approach .tl,
#approach .steps{
  list-style: none;           /* remove numbers/bullets */
  padding: 0;                 /* kill the default ~40px left padding */
  margin-left: auto;          /* keep whole block centered */
  margin-right: auto;
}

/* If you’re using the 3‑step cards: center the grid track cleanly */
#approach .steps{
  justify-content: center;    /* centers columns when max-width < container */
}

/* Ensure each card fills its column so it doesn't look offset */
#approach .step-item{
  justify-self: stretch;
}

/* If you applied the centered timeline earlier, keep the rail truly centered */
#approach .tl-item::before{
  left: 50%;
  transform: translateX(-50%);
}
/* =================== SHOWCASE / BILLBOARD (cyan‑free) =================== */
.billboard{ position:relative; padding: clamp(64px,9vw,120px) clamp(16px,6vw,80px); }
.billboard-head{ max-width: 1200px; margin: 0 auto clamp(14px,3vw,24px) auto; text-align: center; }
.billboard-title{
  margin: 0; color: var(--text); font-weight: 800; letter-spacing: .01em;
  font-size: clamp(28px, 3.6vw, 48px); line-height: 1.02; text-wrap: balance;
}

/* Panoramic frame */
.billboard-frame{
  position: relative;
  max-width: 1200px; margin: clamp(12px,3vw,20px) auto 0 auto;
  aspect-ratio: 21 / 10;
  border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(10,14,20,.10);
  box-shadow: 0 18px 48px -24px rgba(2,6,23,.18);
  background: #0a0d10; isolation: isolate;
}
.theme--charcoal .billboard-frame,
.theme--ink .billboard-frame{
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 48px -24px rgba(0,0,0,.85);
}
.billboard-photo{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* On‑image caption (keeps text readable over any photo) */
.billboard-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(100% 85% at 50% 60%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
.billboard-caption{
  position: absolute; left: clamp(14px, 2.4vw, 24px); bottom: clamp(12px, 2.2vw, 22px);
  z-index: 2; display: grid; gap: 4px; text-shadow: 0 .03em .02em rgba(0,0,0,.6);
}
.cap-eyebrow{
  color: var(--accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 11px;
}
/* Strictly green glow (removed cyan) */
.cap-big{
  font-weight: 900; font-size: clamp(22px, 3.4vw, 40px); color: #fff;
  text-shadow: 0 0 .45em rgba(113,255,106,.12), 0 0 1em rgba(113,255,106,.06);
}
.cap-note{ font-size: 12px; color: #e4ebf3; opacity: .92; }

/* Chip rail — the “smaller cards” */
.chip-rail{
  --chip-border: rgba(10,14,20,.10);
  --chip-bg: #ffffff;
  --chip-text: #0b0f14;
  max-width: 1100px; margin: clamp(10px, 2.8vw, 16px) auto 0 auto;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  list-style: none; padding: 0;
}
.chip-rail li{
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 8px 12px; border-radius: 999px; font-weight: 700; font-size: 12px;
  color: var(--chip-text); background: var(--chip-bg); border: 1px solid var(--chip-border);
  box-shadow: 0 10px 24px -18px rgba(2,6,23,.16);
}
.theme--charcoal .chip-rail, .theme--ink .chip-rail{
  --chip-border: rgba(255,255,255,.14);
  --chip-bg: rgba(255,255,255,.06);
  --chip-text: #ffffff;
}
/* Reveal-on-scroll (reuse your existing classes) */
.reveal{ opacity:0; transform: translateY(14px); transition: transform .6s ease, opacity .6s ease; }
.reveal.is-visible{ opacity:1; transform: none; }

/* =================== ASSURANCE — Seal + Policy cards =================== */
.assurance{ position:relative; padding: clamp(64px, 9vw, 120px) clamp(16px, 6vw, 80px); }
.assurance .section-head{ text-align:center; }

/* BIG: luminous circular seal (green only; no cyan) */
.seal{
  --ring-core: #71ff6a;                   /* brand accent */
  --ring-soft: rgba(113,255,106,.25);
  --ring-outer: rgba(113,255,106,.10);
  width: clamp(240px, 35vw, 420px);
  aspect-ratio: 1/1;
  margin: 8px auto;
  position: relative;
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); /* inner field for light themes */
  box-shadow:
    0 24px 60px -26px rgba(2,6,23,.16),
    0 0 0 1px rgba(10,14,20,.10) inset;
}
.theme--ink .seal, .theme--charcoal .seal{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 24px 60px -26px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.12) inset;
}

/* Ring using mask trick (green only) */
.seal::before{
  content:""; position:absolute; inset:10px; border-radius:50%;
  padding: 16px;
  background:
    radial-gradient(70% 70% at 50% 50%, var(--ring-core), rgba(113,255,106,0) 60%) padding-box,
    radial-gradient(90% 90% at 50% 50%, var(--ring-soft), rgba(113,255,106,0) 70%) border-box,
    radial-gradient(120% 120% at 50% 50%, var(--ring-outer), rgba(113,255,106,0) 80%) border-box;
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: saturate(115%);
  pointer-events:none;
}

/* Inner content */
.seal-core{
  position: relative; z-index: 1; text-align: center; padding: 12px 16px;
  display: grid; gap: 4px;
}
.seal-eyebrow{
  color: var(--accent); text-transform: uppercase; letter-spacing: .16em;
  font-weight: 700; font-size: 11px;
}
.seal-title{
  display:block; font-weight: 900; letter-spacing: .01em;
  font-size: clamp(20px, 2.6vw, 32px); color: #0b0f14;
}
.theme--ink .seal-title, .theme--charcoal .seal-title{ color:#fff; }
.seal-note{ font-size: 12px; color: #3a4756; opacity:.9; }
.theme--ink .seal-note, .theme--charcoal .seal-note{ color:#e4ebf3; opacity:.92; }

/* Feature block alignment */
.assure-feature{ max-width: 900px; margin: 0 auto; text-align: center; display: grid; gap: 10px; }
.assure-lede{ margin: 6px 0 4px; color: var(--muted); }
.assure-cta{ display: inline-grid; grid-auto-flow: column; gap: 10px; justify-content: center; }
@media (max-width:640px){ .assure-cta{ grid-auto-flow: row; } }

/* SMALL: policy cards grid (tight, centered) */
.policy-grid{
  --card-bg: #ffffff; --card-border: rgba(10,14,20,.10); --card-text:#0b0f14; --card-muted:#5b6673;
  max-width: 1100px; margin: clamp(14px, 3vw, 24px) auto 0 auto;
  list-style:none; padding:0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px, 2.4vw, 16px);
  justify-items: stretch;
}
@media (max-width:960px){ .policy-grid{ grid-template-columns:1fr; } }

.policy-card{
  display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:2px; align-items:start;
  background: var(--card-bg); color: var(--card-text);
  border:1px solid var(--card-border); border-radius: 12px;
  padding: 12px; box-shadow: 0 12px 30px -24px rgba(2,6,23,.16);
}
.policy-card .policy-ico{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:900; color:#0a0c0d;
  background: radial-gradient(circle at 50% 50%, var(--accent), rgba(113,255,106,.55));
  box-shadow: 0 0 0 2px rgba(113,255,106,.25);
}
.policy-card strong{ display:block; font-weight:800; }
.policy-card span:last-child{ display:block; font-size:12px; color: var(--card-muted); }

/* Dark section variants (if you ever put Assurance on a dark theme) */
.theme--ink .policy-grid, .theme--charcoal .policy-grid{
  --card-bg: rgba(255,255,255,.035); --card-border: rgba(255,255,255,.12);
  --card-text: #ffffff; --card-muted: #e4ebf3;
  /* increase shadow on dark */
}

/* =================== PACKAGES — Featured center + two compacts =================== */
.packages{ position:relative; padding: clamp(64px, 9vw, 120px) clamp(16px, 6vw, 80px); }

.pkg-grid{
  max-width: 1200px; margin: clamp(8px, 2.6vw, 16px) auto 0 auto;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr);
  gap: clamp(12px, 2.6vw, 20px);
}
@media (max-width: 960px){ .pkg-grid{ grid-template-columns: 1fr; } }

.pkg-card{
  position: relative; display: grid; align-content: start; gap: 12px;
  padding: clamp(14px, 2.2vw, 18px);
  background: #ffffff; color: #0b0f14;
  border: 1px solid rgba(10,14,20,.10); border-radius: 14px;
  box-shadow: 0 14px 36px -24px rgba(2,6,23,.16);
}
.theme--ink .pkg-card, .theme--charcoal .pkg-card{
  background: rgba(255,255,255,.035); color:#ffffff;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 36px -24px rgba(0,0,0,.78);
}

/* Featured center card — luminous ring + ribbon (green only, no cyan) */
.pkg-card--featured{
  padding: clamp(18px, 2.6vw, 22px);
  box-shadow: 0 20px 60px -26px rgba(2,6,23,.22);
  transform: translateY(-2px);
}
.pkg-card--featured::before{
  content:""; position:absolute; inset:-1px; border-radius:14px; pointer-events:none; padding:1px;
  background:
    radial-gradient(65% 100% at 12% 0%, rgba(113,255,106,.20), rgba(113,255,106,0) 55%),
    linear-gradient(0deg, rgba(255,255,255,.14), rgba(255,255,255,.14)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.theme--ink .pkg-card--featured::before,
.theme--charcoal .pkg-card--featured::before{
  background:
    radial-gradient(65% 100% at 12% 0%, rgba(113,255,106,.18), rgba(113,255,106,0) 55%),
    linear-gradient(0deg, rgba(255,255,255,.10), rgba(255,255,255,.10)) border-box;
}

/* Centered “Recommended” ribbon */
.pkg-ribbon{
  position:absolute; top: -10px; left: 50%; transform: translateX(-50%);
  display:inline-block; padding: 6px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color:#0a0c0d; background: radial-gradient(circle at 50% 50%, var(--accent), rgba(113,255,106,.65));
  box-shadow: 0 0 0 2px rgba(113,255,106,.28), 0 10px 24px -18px rgba(2,6,23,.20);
}

/* Head */
.pkg-head{ display:grid; gap:2px; }
.pkg-name{ margin:0; font-size: clamp(16px, 1.7vw, 20px); font-weight:900; }
.pkg-tag{ margin:0; font-size:12px; color:#5b6673; }
.theme--ink .pkg-tag, .theme--charcoal .pkg-tag{ color:#e4ebf3; opacity:.92; }

/* Features list */
.pkg-feats{
  list-style: none; padding: 0; margin: 2px 0 0 0; display: grid; gap: 8px;
  font-size: 14px; line-height: 1.55;
}
.pkg-feats .tick{
  display:inline-grid; place-items:center; width:18px; height:18px; margin-right:8px;
  border-radius:999px; font-size:12px; font-weight:900; color:#0a0c0d;
  background: radial-gradient(circle at 50% 50%, var(--accent), rgba(113,255,106,.55));
  box-shadow: 0 0 0 2px rgba(113,255,106,.25);
}
.pkg-feats li{ display:flex; align-items:flex-start; }
.pkg-feats li .tick{ flex: 0 0 18px; }

.pkg-cta{ display: grid; grid-auto-flow: column; gap: 10px; justify-content: start; margin-top: 4px; }
@media (max-width:640px){ .pkg-cta{ grid-auto-flow: row; } }

/* Buttons reuse your existing .btn styles */

/* =================== LEAD — Proposal form (green-forward, cyan‑free) =================== */
.lead{ position:relative; padding: clamp(64px, 9vw, 120px) clamp(16px, 6vw, 80px); }

/* Gentle luminous canopy behind the form (green only) */
.lead::before{
  content:""; position:absolute; inset:0 0 auto 0; height: 40vh; pointer-events:none;
  background:
    radial-gradient(110% 80% at 50% -10%, rgba(113,255,106,.15), rgba(113,255,106,0) 60%);
  opacity:.35; mix-blend-mode: multiply;
}

/* Small confidence chips */
.lead-chips{
  --chip-border: rgba(10,14,20,.10);
  --chip-bg: #ffffff; --chip-text: #0b0f14;
  max-width: 900px; margin: clamp(8px, 2.6vw, 16px) auto 0 auto;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  list-style:none; padding:0;
}
.lead-chips li{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:12px;
  color: var(--chip-text); background: var(--chip-bg); border:1px solid var(--chip-border);
  box-shadow: 0 10px 24px -18px rgba(2,6,23,.16);
}
.theme--ink .lead-chips, .theme--charcoal .lead-chips{
  --chip-border: rgba(255,255,255,.14);
  --chip-bg: rgba(255,255,255,.06);
  --chip-text:#ffffff;
}

/* The form card */
.lead-form{
  position:relative; max-width: 1100px; margin: clamp(14px,3vw,24px) auto 0 auto;
  background:#ffffff; color:#0b0f14;
  border:1px solid rgba(10,14,20,.10); border-radius:16px;
  box-shadow: 0 18px 48px -26px rgba(2,6,23,.18);
  padding: clamp(16px, 2.6vw, 22px);
}
.theme--ink .lead-form, .theme--charcoal .lead-form{
  background: rgba(255,255,255,.035); color:#fff; 
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 48px -26px rgba(0,0,0,.85);
}

/* Grid */
.form-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(12px, 2.2vw, 16px);
}
.field--full{ grid-column: 1 / -1; }
@media (max-width: 800px){ .form-grid{ grid-template-columns: 1fr; } }

/* Fields */
.field{ display:grid; gap:6px; }
.field label{ font-size: 12px; font-weight: 700; letter-spacing:.04em; }
.field input, .field select, .field textarea{
  appearance:none; width:100%;
  border-radius:12px; border:1px solid rgba(10,14,20,.14);
  padding:12px 12px; font: inherit; color: inherit; background:#ffffff;
  box-shadow: 0 1px 0 rgba(2,6,23,.02) inset;
}
.field textarea{ padding-top:12px; resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder{ color:#5b6673; opacity:.9; }

.theme--ink .field input, .theme--ink .field select, .theme--ink .field textarea,
.theme--charcoal .field input, .theme--charcoal .field select, .theme--charcoal .field textarea{
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
  color:#ffffff; box-shadow: none;
}
.theme--ink .field input::placeholder, .theme--ink .field textarea::placeholder,
.theme--charcoal .field input::placeholder, .theme--charcoal .field textarea::placeholder{ color:#e8eef5; opacity:.66; }

/* Focus ring (green) */
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: rgba(113,255,106,.65);
  box-shadow: 0 0 0 3px rgba(113,255,106,.28);
}

/* Honeypot hidden */
.lead-form .hp{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Footer row */
.form-foot{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:10px;
  margin-top: clamp(12px, 2vw, 16px);
}
.form-foot .agree{ display:inline-flex; gap:10px; align-items:center; font-size:13px; }
.form-foot .agree input{ accent-color: var(--accent); }
.form-note{ margin: 0; font-size: 12px; color:#5b6673; grid-column: 1 / -1; text-align: center; }
.theme--ink .form-note, .theme--charcoal .form-note{ color:#e4ebf3; }

/* Success bubble */
.form-success{
  margin: 12px 0 0; padding:10px 12px; border-radius:12px; font-weight:700; text-align:center;
  background: linear-gradient(180deg, rgba(113,255,106,.22), rgba(113,255,106,.12));
  color:#0a0c0d; border:1px solid rgba(113,255,106,.45); box-shadow: 0 10px 26px -14px rgba(113,255,106,.28);
}

/* Buttons reuse your existing .btn / .btn-accent styles */

/* =================== FOOTER (deep, neutral, green-forward) =================== */
.site-footer{ position:relative; padding: clamp(48px, 8vw, 88px) clamp(16px, 6vw, 80px); }
.site-footer::before{
  /* subtle emerald seam at the top edge */
  content:""; position:absolute; left:0; right:0; top:0; height: 10px; pointer-events:none;
  background:
    linear-gradient(to right, rgba(113,255,106,0) 0%, rgba(113,255,106,.55) 18%, rgba(113,255,106,.55) 82%, rgba(113,255,106,0) 100%),
    radial-gradient(100% 120% at 50% 0%, rgba(113,255,106,.28), rgba(113,255,106,0) 60%);
  opacity:.35; filter: saturate(115%);
  border-radius: 0 0 999px 999px / 0 0 12px 12px;
}

.footer-wrap{
  max-width: 1200px; margin: 0 auto;
  display:grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr);
  gap: clamp(16px, 2.6vw, 24px); align-items:start;
}
@media (max-width: 960px){ .footer-wrap{ grid-template-columns: 1fr; } }

.footer-brand{ display:grid; gap:10px; }
.footer-tag{ margin: 4px 0 10px 0; color: var(--muted); }
.footer-social{ display:flex; gap:10px; list-style:none; padding:0; margin: 2px 0 0 0; }
.footer-social .fab-circle{ position: static; } /* reuse your floating button style safely */

.footer-nav{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(12px, 2vw, 18px); }
@media (max-width: 560px){ .footer-nav{ grid-template-columns: 1fr; } }
.footer-col{ display:grid; gap:8px; }
.footer-col h4{
  margin:0; font-weight:800; font-size:14px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text);
}

.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-links a{
  color: #dfe7ee; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px;
}
.footer-links a:hover{ color:#fff; border-bottom-color: rgba(113,255,106,.45); }

.footer-address{ font-style: normal; color: var(--muted); }
.footer-mail{ color:#fff; text-decoration: none; border-bottom: 1px solid rgba(113,255,106,.45); }
.footer-mail:hover{ color:#fff; border-bottom-color: rgba(113,255,106,.8); }

/* Newsletter mini-form */
.footer-form{ display:grid; grid-template-columns: 1fr auto; gap: 8px; align-items:center; }
.footer-form input{
  appearance:none; width:100%;
  border-radius:12px; border:1px solid rgba(255,255,255,.16);
  padding:10px 12px; font:inherit; color:#fff;
  background: rgba(255,255,255,.06);
}
.footer-form input::placeholder{ color:#e8eef5; opacity:.6; }
.footer-form input:focus{
  outline:none; border-color: rgba(113,255,106,.65); box-shadow: 0 0 0 3px rgba(113,255,106,.28);
}
.footer-form .btn{ height: 44px; }

/* Success note */
.footer-form .form-msg{
  grid-column: 1 / -1; margin: 4px 0 0 0; font-weight:700; font-size:12px;
  background: linear-gradient(180deg, rgba(113,255,106,.22), rgba(113,255,106,.12));
  color:#0a0c0d; border:1px solid rgba(113,255,106,.45); border-radius:12px; padding:8px 10px;
}

/* Legal strip */
.legal{
  max-width:1200px; margin: clamp(18px, 3vw, 28px) auto 0 auto; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap: wrap;
  color: rgba(233,238,245,.8); font-size: 12px;
}
.legal-links{ list-style:none; padding:0; margin:0; display:flex; gap:14px; }
.legal-links a{ color: #dfe7ee; text-decoration:none; }
.legal-links a:hover{ color:#fff; text-decoration: underline; }

/* Screen-reader only label */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Light footer variant (if you switch to theme--paper) */
.site-footer.theme--paper{
  color:#0b0f14;
}
.site-footer.theme--paper .footer-links a{ color:#3a4756; }
.site-footer.theme--paper .footer-links a:hover{ color:#0b0f14; border-bottom-color: rgba(113,255,106,.55); }
.site-footer.theme--paper .footer-address{ color:#5b6673; }
.site-footer.theme--paper .footer-mail{ color:#0b0f14; border-bottom-color: rgba(113,255,106,.45); }
.site-footer.theme--paper .legal{ border-top-color: rgba(10,14,20,.10); color:#5b6673; }
.site-footer.theme--paper .footer-form input{
  background:#fff; color:#0b0f14; border-color: rgba(10,14,20,.14);
}

/* === Testimonials — fix right shift on mobile ========================== */
@media (max-width: 960px){
  #proof .t-list{
    /* belt & suspenders: kill any UA or global list indent */
    list-style: none !important;
    padding-inline: 0 !important;
    margin-inline: auto !important;

    /* ensure it truly runs 1-up and fills the track */
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: center;     /* center the single column within its frame */
    justify-items: stretch;      /* cards fill the column */
    width: 100%;
  }

  /* make sure each LI and the card stretch; no stray margins */
  #proof .t-list > li{ list-style: none; margin: 0; justify-self: stretch; }
  #proof .t-card{ margin-inline: 0; }
}

/* === Testimonials — stop metric pill overflow (desktop & up) ============ */
/* Let grid items actually shrink within the pills */
#proof .t-metrics > div{
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Allow the text to wrap instead of blowing past the edge */
#proof .t-metrics dt,
#proof .t-metrics dd{
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;  /* modern */
  word-break: break-word !important;   /* fallback */
  hyphens: auto !important;            /* adds soft hyphens where possible */
  line-height: 1.25;                   /* a touch tighter looks better when wrapped */
}

/* Safety: keep the 3-up grid but allow it to breathe on tighter desktops */
@media (min-width: 961px) and (max-width: 1140px){
  #proof .t-metrics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* === Proof gallery — make all three photos the same shape */
.proof-gallery .photo-grid img{
  aspect-ratio: var(--proof-photo-ratio, 3 / 2);
  width: 100%;
  height: auto;           /* height is now derived from aspect-ratio */
  object-fit: cover;      /* crops excess; keeps composition tight */
  object-position: 50% 50%; /* tweak per-image if needed */
}

/* Optional: nudge the crop for the FIRST image (e.g., keep faces higher) */
.proof-gallery .photo-grid img:first-child{
  object-position: 50% 35%; /* move the focal point up a touch */
}