/* ═══════════════════════════════════════════════════════════
   TRADESPARK ADVISORY — LIGHT EDITORIAL SYSTEM
   White canvas · deep-violet accent · dark feature bands
   Every colour is a token, so .band-dark flips a whole section.
   ═══════════════════════════════════════════════════════════ */

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

:root{
  /* ── Canvas (light) ── */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F6F6F9;
  --surface-3:#F0F0F5;
  --inv:#0A2230;          /* the dark counterweight card */
  --inv-2:#123C52;

  /* ── Structure ── */
  --line:#E5E5EC;
  --line-2:#D6D6DF;
  --line-bright:rgba(0,0,0,.10);

  /* ── Type ── */
  --text:#14141A;
  --text-2:#4B4B57;
  --text-3:#6B6B76;      /* was #76767F — 4.50:1 was borderline on white */
  --text-on-inv:#FFFFFF;
  --text-on-inv-2:#AFC8D6;

  /* ── Accent — from the logo. Deep brand blue carries anything on
        white (cyan is only 1.7:1 there); cyan is for dark bands and fills. ── */
  --accent:#14608A;        /* 6.5:1 on white — safe for text, icons, rules */
  --accent-hi:#0E4A6D;     /* hover / pressed on light */
  --accent-lo:#1FC4DE;     /* brand cyan — dark surfaces and fills only */
  --accent-cyan:#12D8E0;   /* pure logo cyan, decorative */
  --accent-wash:rgba(20,96,138,.07);
  --accent-line:rgba(20,96,138,.26);
  --accent-glow:rgba(31,196,222,.30);

  --font-d:'Archivo','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-b:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --max-w:1320px;
  --radius:8px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --nav-h:76px;
  --shadow:0 1px 2px rgba(20,20,26,.04),0 8px 24px rgba(20,20,26,.06);
  --shadow-lift:0 2px 6px rgba(20,20,26,.06),0 16px 40px rgba(20,20,26,.10);
}

/* ── Dark feature band: re-declares the same tokens, so every
      component inside inverts without a single bespoke rule ── */
.band-dark{
  --bg:#062232;
  --surface:#062232;
  --surface-2:#0A2E42;
  --surface-3:#0E3A52;
  --inv:#FFFFFF;
  --inv-2:#F0F6F9;
  --line:#123C52;
  --line-2:#1B5675;
  --line-bright:rgba(255,255,255,.16);
  --text:#FFFFFF;
  --text-2:#AFC8D6;
  --text-3:#7C9CAF;
  --text-on-inv:#0A2230;
  --text-on-inv-2:#41586A;
  --accent:#3ED8E8;        /* cyan reads beautifully on navy */
  --accent-hi:#84E9F4;
  --accent-lo:#1FC4DE;
  --accent-cyan:#12D8E0;
  --accent-wash:rgba(62,216,232,.12);
  --accent-line:rgba(62,216,232,.32);
  --accent-glow:rgba(31,196,222,.34);
  --shadow:none;
  --shadow-lift:none;
  background:var(--bg);
  color:var(--text-2);
}

html{scroll-behavior:smooth;background:var(--bg)}
body{
  font-family:var(--font-b);
  background:var(--bg);
  color:var(--text-2);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}
a{color:var(--text);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--accent-hi)}
ul{list-style:none}
img{max-width:100%}

/* ═══ LAYOUT ═══ */
.container{max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}
.section{padding:clamp(4rem,8vw,7.5rem) 0;position:relative}
.section + .section{border-top:1px solid var(--line)}
.section-soft{background:var(--surface)}
.section-inv{background:var(--inv);color:var(--text-on-inv-2)}
.text-center{text-align:center}
.text-left{text-align:left}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}

/* ═══ TYPE ═══ */
.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:1.25rem;display:block;position:relative;padding-top:1.1rem;
}
.eyebrow::before{content:"";position:absolute;top:0;left:0;width:36px;height:2px;background:var(--accent)}
.text-center .eyebrow::before,.eyebrow.text-center::before{left:50%;transform:translateX(-50%)}

.heading{
  font-family:var(--font-d);
  font-size:clamp(1.9rem,4vw,3.15rem);
  color:var(--text);line-height:1.04;letter-spacing:-.035em;
  font-weight:700;margin-bottom:1rem;text-wrap:balance;
}
.heading-hero{
  font-family:var(--font-d);
  font-size:clamp(2.75rem,8.2vw,7rem);
  color:var(--text);line-height:.92;letter-spacing:-.045em;
  font-weight:800;text-transform:uppercase;
}
.sub{
  font-size:clamp(1rem,1.4vw,1.1rem);color:var(--text-2);
  max-width:620px;margin-bottom:2rem;line-height:1.7;
}
.section-head{margin-bottom:3rem;max-width:760px}
.section-head.text-center{margin-left:auto;margin-right:auto}
.section-head .heading{margin-bottom:.75rem}
.section-head .sub{margin-bottom:0}
.section-inv .heading,.section-inv .eyebrow{color:var(--text-on-inv)}
.section-inv .sub,.section-inv p{color:var(--text-on-inv-2)}

/* ═══ BUTTONS ═══ */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:1rem 1.75rem;border-radius:0;font-weight:600;font-size:.875rem;
  letter-spacing:.01em;border:none;cursor:pointer;font-family:var(--font-b);
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
  position:relative;overflow:hidden;
}
.btn span,.btn svg{transition:transform .3s var(--ease)}
.btn:hover span{transform:translateX(4px)}

.btn-p{background:var(--accent);color:#fff}
.btn-p:hover,.btn-p:focus,.btn-p:active,.btn-p:visited{background:var(--accent-hi);color:#fff !important}
.btn-s{background:transparent;border:1px solid var(--line-2);color:var(--text)}
.btn-s:hover{border-color:var(--accent);color:var(--accent-hi);background:var(--accent-wash)}
.btn-small{padding:.7rem 1.35rem;font-size:.8rem}
.nav-links a.btn,.mobile-menu a.btn,.btn.btn-p{color:#fff !important}
.section-inv .btn-s{border-color:rgba(0,0,0,.2);color:var(--text-on-inv)}
.section-inv .btn-s:hover{border-color:var(--accent);color:var(--accent-lo)}

/* Arrow chip link — the workhorse CTA */
.arrow-link{
  display:inline-flex;align-items:center;gap:.75rem;
  font-size:.875rem;font-weight:600;color:var(--text);
}
.arrow-link{position:relative}
.arrow-link .chev{
  width:26px;height:26px;flex:0 0 26px;background:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.arrow-link .chev svg{width:12px;height:12px;stroke:#fff;stroke-width:2.5;fill:none}
.arrow-link:hover{color:var(--accent-hi)}
.arrow-link:hover .chev{transform:translateX(5px);background:var(--accent-hi)}
.section-inv .arrow-link{color:var(--text-on-inv)}

/* ═══ NAV ═══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(0,0,0,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s;
}
.nav.scrolled{border-color:var(--line);background:rgba(0,0,0,.92)}
.nav-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem);
  display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);
}
.nav-logo{
  font-family:var(--font-d);font-size:1.02rem;font-weight:700;color:var(--text);
  display:flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:-.01em;
}
.nav-logo:hover{color:var(--text)}
.logo-mark{
  width:26px;height:26px;background:transparent;border-radius:0;
  display:flex;align-items:center;justify-content:center;flex:0 0 26px;
}
.logo-mark svg{width:26px;height:26px}
.logo-mark svg path{fill:var(--accent)}
.nav-links{display:flex;align-items:center;gap:2.25rem}
.nav-links a{
  color:var(--text-2);font-size:.85rem;font-weight:500;position:relative;padding:.35rem 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:2px;
  background:var(--accent);transition:width .3s var(--ease);
}
.nav-links a:hover{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--text)}
.nav-links a.btn::after{display:none}

.hamburger{display:none;background:none;border:none;cursor:pointer;padding:.5rem}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0;transition:.3s}
.mobile-menu{
  display:none;position:fixed;inset:0;background:var(--bg);z-index:200;
  flex-direction:column;align-items:flex-start;justify-content:center;gap:.25rem;
  padding:0 clamp(1.5rem,8vw,4rem);
}
.mobile-menu.open{display:flex}
.mobile-menu a{
  font-family:var(--font-d);font-size:clamp(1.3rem,5.5vw,1.75rem);color:var(--text);
  font-weight:700;text-transform:uppercase;letter-spacing:-.02em;padding:.85rem 0;
  border-bottom:1px solid var(--line);width:100%;
}
.mobile-menu a.btn{
  font-family:var(--font-b);font-size:.9rem;text-transform:none;width:auto;
  border:none;margin-top:1.75rem;letter-spacing:0;
  padding:.95rem 1.6rem;          /* must be restated: .mobile-menu a wins on specificity */
  justify-content:center;
}
.mobile-menu .close-btn{
  position:absolute;top:1.75rem;right:1.75rem;background:none;border:none;
  font-size:1.5rem;cursor:pointer;color:var(--text);
}

/* ═══ HERO ═══ */
.hero{
  padding-top:calc(var(--nav-h) + clamp(3rem,7vw,6rem));
  padding-bottom:clamp(3rem,7vw,6rem);
  position:relative;overflow:hidden;background:var(--bg);
}
/* ambient field behind the type */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(680px 460px at 68% 32%,rgba(31,196,222,.20),transparent 68%),
    radial-gradient(520px 380px at 12% 74%,rgba(109,62,232,.13),transparent 70%);
}
/* faint technical grid — the "system" motif */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(circle at 60% 45%,#000,transparent 78%);
  mask-image:radial-gradient(circle at 60% 45%,#000,transparent 78%);
}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:end}

.hero-title{margin:0}
.hero-title .line{display:block}
/* the brand star that replaces a letter — Tradespark's signature move */
.brand-glyph{
  /* Box is sized to the font's measured cap height (0.687em for Archivo at
     this weight) and to the bolt's own 0.8148 aspect, so the mark rises to
     exactly the height of the capitals beside it. */
  display:inline-block;height:.687em;width:.56em;vertical-align:baseline;
  margin:0 .06em;position:relative;top:0;
}
.brand-glyph svg{width:100%;height:100%;display:block;fill:var(--accent);
  filter:drop-shadow(0 0 22px var(--accent-glow))}

.hero-meta{padding-bottom:.5rem;border-left:1px solid var(--line);padding-left:clamp(1.25rem,2.5vw,2rem)}
.hero-meta .kicker{
  font-family:var(--font-d);font-size:1.35rem;font-weight:700;color:var(--text);
  letter-spacing:-.02em;margin-bottom:.85rem;line-height:1.2;
}
.hero-meta .kicker::before{content:"";display:block;width:40px;height:2px;background:var(--accent);margin-bottom:1.1rem}
.hero-meta p{font-size:.975rem;color:var(--text-2);line-height:1.72;margin-bottom:1.5rem}

.hero-btns{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2.25rem}
.hero-stats{
  display:flex;flex-wrap:wrap;gap:0;margin-top:3.25rem;
  border-top:1px solid var(--line);
}
.hero-stat{padding:1.5rem 2.5rem 0 0;margin-right:2.5rem;border-right:1px solid var(--line)}
.hero-stat:last-child{border-right:none;margin-right:0}
.hero-stat .n{
  font-family:var(--font-d);font-size:clamp(1.9rem,3vw,2.6rem);font-weight:700;
  color:var(--text);line-height:1;letter-spacing:-.04em;display:block;margin-bottom:.35rem;
}
.hero-stat .n em{font-style:normal;color:var(--accent)}
.hero-stat .l{font-size:.75rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}

/* legacy hero visual bits — retired */
.hero-visual,.hero-motion-layer,.motion-dot,.rupee,.glow-orb,.hero-bg-graph{display:none !important}

/* ═══ EDITORIAL CARD STRIP (Accenture-style checkerboard) ═══ */
.edit-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.edit-card{
  background:var(--surface);padding:2rem 1.75rem 2.25rem;min-height:290px;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:background .35s var(--ease);cursor:pointer;
}
.edit-card::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;
  background:var(--accent);transition:width .45s var(--ease);
}
.edit-card:hover::after{width:100%}
.edit-card:hover{background:var(--surface-3)}
.edit-card.inv{background:var(--inv)}
.edit-card.inv:hover{background:#fff}
.edit-card .kick{
  font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.25rem;
}
.edit-card.inv .kick{color:var(--accent-lo)}
.edit-card h3{
  font-family:var(--font-d);font-size:1.3rem;font-weight:700;color:var(--text);
  line-height:1.18;letter-spacing:-.025em;margin-bottom:.75rem;
}
.edit-card.inv h3{color:var(--text-on-inv)}
.edit-card p{font-size:.875rem;color:var(--text-3);line-height:1.6}
.edit-card.inv p{color:var(--text-on-inv-2)}
.edit-card .go{
  margin-top:auto;padding-top:1.5rem;display:inline-flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:600;color:var(--text);
}
.edit-card.inv .go{color:var(--text-on-inv)}
.edit-card .go svg{width:14px;height:14px;stroke:var(--accent);stroke-width:2.5;fill:none;
  transition:transform .3s var(--ease)}
.edit-card:hover .go svg{transform:translateX(5px)}

/* ═══ CARDS ═══ */
.card{
  background:var(--surface);border-radius:0;padding:2.25rem;
  border:1px solid var(--line);box-shadow:none;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.card:hover{background:var(--surface-3);border-color:var(--line-2);transform:none;box-shadow:none}
.grid-2 > .card,.grid-3 > .card,.grid-4 > .card{border:none}

/* ═══ NUMBERED PROBLEM BLOCKS ═══ */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.problem-card{
  padding:2.5rem 2rem;position:relative;overflow:hidden;background:var(--surface);
  border:none;border-radius:0;box-shadow:none;
  transition:background .35s var(--ease);
}
.problem-card::before{
  content:counter(prob,decimal-leading-zero);counter-increment:prob;
  position:absolute;top:1.5rem;right:1.75rem;
  font-family:var(--font-d);font-size:3.5rem;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--line-2);
  background:none;width:auto;height:auto;border-radius:0;inset:auto 1.75rem auto auto;
  transition:-webkit-text-stroke-color .35s var(--ease);
}
.problem-grid{counter-reset:prob}
.problem-card:hover{background:var(--surface-3)}
.problem-card:hover::before{-webkit-text-stroke-color:var(--accent-line)}
.problem-card h3{
  font-family:var(--font-d);font-size:1.2rem;font-weight:700;color:var(--text);
  margin-bottom:.85rem;letter-spacing:-.02em;position:relative;z-index:1;line-height:1.25;
}
.problem-card p{font-size:.9rem;line-height:1.65;color:var(--text-3);position:relative;z-index:1}
.problem-card.highlight{background:var(--inv);border-color:transparent}
.problem-card.highlight::before{-webkit-text-stroke-color:rgba(0,0,0,.18)}
.problem-card.highlight:hover{background:#fff}
.problem-card.highlight:hover::before{-webkit-text-stroke-color:var(--accent)}
.problem-card.highlight h3{color:var(--text-on-inv)}
.problem-card.highlight p{color:var(--text-on-inv-2)}

.icon-pill{
  width:44px;height:44px;border-radius:0;background:transparent;
  border:1px solid var(--line-2);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;
  position:relative;z-index:1;transition:.3s var(--ease);
}
.problem-card:hover .icon-pill{border-color:var(--accent);background:var(--accent-wash)}
.icon-pill svg{width:20px;height:20px}
.icon-pill.dark{background:var(--accent);border-color:var(--accent);color:#fff}

/* ═══ FEATURE ROW ═══ */
.feature-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.feature-card{
  background:var(--surface);border:none;border-radius:0;padding:2.25rem 1.75rem;
  box-shadow:none;transition:background .35s var(--ease);
}
.feature-card:hover{background:var(--surface-3)}
.feature-icon{
  width:46px;height:46px;border-radius:0;background:transparent;
  border:1px solid var(--line-2);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;
  transition:.3s var(--ease);
}
.feature-card:hover .feature-icon{border-color:var(--accent);background:var(--accent-wash)}
.feature-icon svg{width:22px;height:22px}
.feature-card h3{
  font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--text);
  margin-bottom:.6rem;letter-spacing:-.015em;
}
.feature-card p{font-size:.875rem;line-height:1.65;color:var(--text-3)}

/* ═══ TEAM ═══ */
.team-card{
  text-align:left;padding:0 0 1.75rem;border:none;background:transparent;
  border-radius:0;box-shadow:none;display:flex;flex-direction:column;
  border-top:1px solid var(--line);
}
.team-card:hover{background:transparent;border-color:var(--line)}
.photo-slot{
  width:100%;max-width:100%;aspect-ratio:3/3.6;border-radius:0;border:none;
  margin:0 0 1.5rem;background:var(--surface-2);overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.photo-slot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55) 100%);
  z-index:2;
}
.photo-slot img{
  width:100%;height:100%;object-fit:cover;border-radius:0;
  filter:grayscale(1) contrast(1.06) brightness(.92);
  transition:filter .5s var(--ease),transform .7s var(--ease);
}
.team-card:hover .photo-slot img,.team-detail:hover .photo-slot img{
  filter:grayscale(0) contrast(1) brightness(1);transform:scale(1.04);
}
.photo-slot .ph-icon{width:34px;height:34px;color:var(--text-3);opacity:.7}
.photo-slot .ph-text{font-size:.62rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em}
.photo-slot-lg{max-width:200px;aspect-ratio:3/3.8;border-radius:0}
.avatar{
  width:88px;height:88px;border-radius:0;background:var(--surface-2);
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  margin:0 auto 1rem;font-size:1.25rem;font-weight:700;color:var(--accent);font-family:var(--font-d);
}
.team-years{
  font-family:var(--font-d);font-size:clamp(1.6rem,2.2vw,2rem);color:var(--accent);
  line-height:1;font-weight:700;margin:0 0 .3rem;letter-spacing:-.05em;
}
.team-label{font-size:.68rem;color:var(--text-3);margin-bottom:1.15rem;text-transform:uppercase;letter-spacing:.12em}
.team-name{
  font-family:var(--font-d);font-size:1.12rem;font-weight:700;color:var(--text);
  margin-bottom:.25rem;letter-spacing:-.02em;
}
.team-role{font-size:.775rem;font-weight:600;color:var(--text-3);margin-bottom:.9rem;
  line-height:1.45;text-transform:uppercase;letter-spacing:.08em}
.team-desc{font-size:.875rem;line-height:1.68;margin:0 0 1rem;color:var(--text-2)}
.team-list{list-style:none;padding:0;margin:.25rem 0 0;display:flex;flex-direction:column;gap:.35rem}
.team-list li{position:relative;padding-left:1rem;font-size:.8rem;line-height:1.55;color:var(--text-3)}
.team-list li::before{content:'';position:absolute;left:0;top:.6em;width:5px;height:1px;background:var(--accent)}
.team-link{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:.75rem;
  font-size:.825rem;font-weight:600;color:var(--text);
}
.team-link:hover{color:var(--accent-hi)}

/* ═══ CLIENT LOGOS ═══ */
.logo-grid{--logo-w:150px;--logo-gap:1px;overflow:hidden;border:1px solid var(--line);background:var(--line)}
.logo-track{display:grid;grid-template-columns:repeat(5,1fr);gap:1px}
.logo-set{display:contents}
.logo-set-dup{display:none}
.logo-slot{
  height:112px;border-radius:0;background:var(--surface);border:0;
  display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease);overflow:hidden;
}
.logo-slot:hover{background:var(--surface-3)}
.logo-slot img{
  max-height:42px;max-width:74%;object-fit:contain;mix-blend-mode:normal;
  filter:brightness(0) invert(1);opacity:.42;transition:opacity .3s var(--ease),filter .3s var(--ease);
}
.logo-slot:hover img{opacity:.95}
.logo-slot .logo-ph{font-size:.7rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}

/* ═══ SERVICE SPLITS ═══ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split.reverse .split-text{order:2}.split.reverse .split-visual{order:1}
.split-visual{
  display:flex;justify-content:center;align-items:center;background:transparent;
  border-radius:0;padding:0;min-height:auto;box-shadow:none;
}
.split-visual svg{width:100%;max-width:420px;height:auto}
.split-visual img{width:100%;max-width:520px;height:auto;display:block;border-radius:0;box-shadow:none}

/* Designed capability panel — replaces the stock illustrations */
.cap-panel{
  width:100%;aspect-ratio:4/3.35;background:var(--surface);border:1px solid var(--line);
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.5rem,2.6vw,2.25rem);transition:border-color .4s var(--ease);
}
.cap-panel::before{
  content:"";position:absolute;inset:0;opacity:.65;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:44px 44px;
}
.cap-panel::after{
  content:"";position:absolute;right:-18%;bottom:-28%;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,var(--accent-glow),transparent 68%);
  filter:blur(30px);pointer-events:none;transition:opacity .5s var(--ease);opacity:.8;
}
.cap-section:hover .cap-panel{border-color:var(--line-2)}
.cap-panel .cp-num{
  font-family:var(--font-d);font-size:clamp(4.5rem,11vw,8.5rem);font-weight:800;line-height:.82;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--line-2);
  position:relative;z-index:1;transition:-webkit-text-stroke-color .45s var(--ease);
}
.cap-section:hover .cp-num{-webkit-text-stroke-color:var(--accent-line)}
.cap-panel .cp-body{position:relative;z-index:1}
.cap-panel .cp-lead{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);
  margin-bottom:.9rem;display:flex;align-items:center;gap:.6rem;
}
.cap-panel .cp-lead::before{content:"";width:22px;height:1px;background:var(--accent)}
.cap-panel .cp-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.cap-panel .cp-tags span{
  font-size:.7rem;font-weight:500;color:var(--text-2);padding:.4rem .75rem;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02);letter-spacing:.01em;
}
.cap-panel .cp-mark{
  position:absolute;top:clamp(1.5rem,2.6vw,2.25rem);right:clamp(1.5rem,2.6vw,2.25rem);
  width:30px;height:30px;z-index:1;opacity:.9;
}
.cap-panel .cp-mark svg{width:100%;height:100%;fill:var(--accent)}

/* ═══ CAP CARDS (service grid) ═══ */
.cap-icon{
  width:44px;height:44px;border-radius:0;background:transparent;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:.3s var(--ease);
}
.cap-icon svg{width:21px;height:21px;color:var(--accent)}
.card:hover .cap-icon{border-color:var(--accent);background:var(--accent-wash)}
.cap-title{
  font-family:var(--font-d);font-size:1.12rem;font-weight:700;color:var(--text);
  margin-bottom:.6rem;letter-spacing:-.02em;
}
.cap-body{font-size:.875rem;margin-bottom:1.25rem;color:var(--text-3);line-height:1.65}
.cap-link{font-size:.8rem;font-weight:600;color:var(--text)}
.cap-link:hover{color:var(--accent-hi)}

/* ═══ PERSONAS ═══ */
.persona-badge{
  display:inline-block;background:transparent;border:1px solid var(--accent-line);
  color:var(--accent-hi);font-size:.68rem;font-weight:700;padding:.35rem .8rem;
  border-radius:0;margin-bottom:1.25rem;letter-spacing:.08em;
}
.persona-title{
  font-family:var(--font-d);font-size:1.12rem;font-weight:700;color:var(--text);
  margin-bottom:.75rem;letter-spacing:-.02em;
}
.persona-quote{
  font-style:normal;color:var(--text-2);font-size:.875rem;margin-bottom:1.25rem;
  line-height:1.6;padding-left:1rem;border-left:2px solid var(--accent);
}
.persona-label{
  font-size:.65rem;font-weight:700;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:.5rem;
}

/* ═══ VERTICALS ═══ */
.vert-row{display:flex;flex-wrap:wrap;justify-content:center;gap:1px;background:var(--line);border:1px solid var(--line)}
.vert-item{
  text-align:center;width:auto;flex:1 1 160px;padding:2rem 1rem;background:var(--surface);
  transition:background .3s var(--ease);
}
.vert-item:hover{background:var(--surface-3)}
.vert-icon{
  width:46px;height:46px;border-radius:0;background:transparent;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;transition:.3s var(--ease);
}
.vert-item:hover .vert-icon{border-color:var(--accent);background:var(--accent-wash)}
.vert-icon svg{width:22px;height:22px;color:var(--accent)}
.vert-label{font-size:.8rem;font-weight:500;color:var(--text-2);line-height:1.4}

/* ═══ TRUST STRIP ═══ */
.trust-strip{background:var(--surface);padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-row{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem 2.5rem}
.trust-item{font-size:.78rem;font-weight:500;color:var(--text-2);display:flex;align-items:center;gap:.6rem;
  text-transform:uppercase;letter-spacing:.08em}
.trust-dot{width:5px;height:5px;border-radius:0;background:var(--accent)}

/* ═══ CTA ═══ */
.cta-dark{
  text-align:left;padding:clamp(5rem,10vw,8rem) 0;background:var(--bg);
  position:relative;overflow:hidden;border-top:1px solid var(--line);
}
.cta-dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 420px at 78% 50%,rgba(31,196,222,.18),transparent 70%);
}
.cta-dark .container{position:relative;z-index:1}
.cta-dark .heading{
  color:#fff;font-size:clamp(2.5rem,6.5vw,5.25rem);text-transform:uppercase;
  letter-spacing:-.045em;line-height:.95;font-weight:800;max-width:14ch;
}
.cta-dark .sub{color:var(--text-2);margin:1.5rem 0 2.5rem;max-width:560px}
.cta-dark .email-link{
  color:var(--text-3);font-size:.85rem;display:inline-block;margin-top:2rem;
  border-bottom:1px solid var(--line-2);padding-bottom:.25rem;
}
.cta-dark .email-link:hover{color:var(--accent-hi);border-color:var(--accent)}

/* ═══ ABOUT ═══ */
.story-text{max-width:720px}
.story-text p{margin-bottom:1.35rem;font-size:1.0rem;color:var(--text-2);line-height:1.78}
.story-text p:first-child{font-size:1.15rem;color:var(--text);line-height:1.6}
.phil-item{padding:2.25rem}
.phil-item h3{
  font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--text);
  margin-bottom:.6rem;letter-spacing:-.02em;
}
.phil-item p{color:var(--text-3)}
.team-detail{
  display:flex;gap:2.5rem;padding:2.5rem 0;margin-bottom:0;align-items:flex-start;
  background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;
}
.team-detail:hover{background:transparent}
.team-detail-grid{display:flex;flex-direction:column;gap:0;margin-top:2rem}
.team-detail-grid .team-detail{margin-bottom:0;display:flex;flex-direction:row;gap:2.5rem;align-items:flex-start}
.team-detail-grid .team-detail-left{flex-shrink:0;text-align:left;min-width:220px;width:220px}
.team-detail-grid .photo-slot-lg{max-width:200px;width:100%;margin:0 0 .5rem}
.team-detail-grid .team-detail-left .avatar{width:100px;height:100px;font-size:1.75rem;margin:0 0 1rem}
.team-detail-grid .td-right{flex:1}
.td-right h3,.team-detail-grid .td-right h3{
  font-family:var(--font-d);font-size:1.3rem;font-weight:700;color:var(--text);
  margin-bottom:.35rem;letter-spacing:-.025em;
}
.td-right .role,.team-detail-grid .td-right .role{
  font-size:.75rem;color:var(--text-3);font-weight:600;margin-bottom:1.1rem;
  text-transform:uppercase;letter-spacing:.12em;
}
.td-right p,.team-detail-grid .td-right p{margin-bottom:.6rem;font-size:.925rem;color:var(--text-2)}
.creds,.team-detail-grid .creds{margin-top:1rem;padding-left:0}
.creds li{position:relative;padding-left:1rem;margin-bottom:.45rem;font-size:.875rem;color:var(--text-3)}
.creds li::before{content:'';position:absolute;left:0;top:.7em;width:6px;height:1px;border-radius:0;background:var(--accent)}

/* ═══ COMPARE TABLE ═══ */
.compare-table{width:100%;border-collapse:collapse;font-size:.85rem}
.compare-table th,.compare-table td{
  padding:1rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);color:var(--text-3);
}
.compare-table th{
  font-weight:600;color:var(--text);background:var(--surface);
  text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;
}
.compare-table th:last-child{background:var(--accent);color:#fff}
.compare-table td:last-child{background:var(--accent-wash);color:var(--accent-hi);font-weight:600}
.compare-table td:first-child{font-weight:600;color:var(--text)}
.compare-table tr:hover td{background:var(--surface-2)}
.compare-table tr:hover td:last-child{background:rgba(31,196,222,.16)}
.table-wrap{overflow-x:auto;border:1px solid var(--line)}

/* ═══ CAPABILITIES PAGE ═══ */
.cap-section{border-bottom:1px solid var(--line)}
.cap-section:last-child{border-bottom:none}
.cap-section h3{
  font-family:var(--font-d);font-size:clamp(1.75rem,3.4vw,2.6rem);color:var(--text);
  margin-bottom:1rem;font-weight:700;letter-spacing:-.035em;line-height:1.05;
}
.cap-section p{color:var(--text-2)}
.what-list{padding-left:0;margin:1.75rem 0;
  display:grid;grid-template-columns:1fr 1fr;gap:.15rem 1.5rem}
.what-list li{
  position:relative;padding-left:1.1rem;margin-bottom:.55rem;font-size:.875rem;
  color:var(--text-3);line-height:1.55;
}
.what-list li::before{content:'';position:absolute;left:0;top:.65em;width:6px;height:1px;border-radius:0;background:var(--accent)}
.for-text{
  font-size:.875rem;margin-top:1.5rem;padding:1.25rem 1.5rem;background:var(--surface);
  border-radius:0;border:1px solid var(--line);border-left:2px solid var(--accent);color:var(--text-3);
}
.for-text strong{color:var(--text);font-weight:600}
#page-capabilities .card{background:transparent;border:0;box-shadow:none;padding:1.75rem 0}
#page-capabilities .split-visual{background:transparent;border-radius:0;padding:0;box-shadow:none}

/* ═══ PRICING ═══ */
.pricing-card{padding:2.5rem 2rem;position:relative;background:var(--surface);border:1px solid var(--line)}
.pricing-card.hero-card{background:var(--inv);color:var(--text-on-inv-2);border-color:transparent}
.pricing-card.hero-card:hover{background:#fff}
.pricing-card.hero-card .pricing-title{color:var(--text-on-inv)}
.pricing-card.hero-card .pricing-price{color:var(--accent-lo)}
.pricing-card.hero-card .pricing-list li{color:var(--text-on-inv-2)}
.pricing-card.hero-card .best{color:var(--accent-lo)}
.pricing-card.hero-card .best span{color:var(--text-on-inv-2)}
.pricing-badge{
  position:absolute;top:0;left:0;transform:none;background:var(--accent);color:#fff;
  font-size:.62rem;font-weight:700;padding:.4rem .85rem;border-radius:0;
  text-transform:uppercase;letter-spacing:.12em;
}
.pricing-title{
  font-family:var(--font-d);font-size:1.25rem;font-weight:700;color:var(--text);
  margin-bottom:.35rem;letter-spacing:-.025em;
}
.pricing-price{font-size:.8rem;font-weight:600;color:var(--accent-hi);margin-bottom:1.5rem;
  text-transform:uppercase;letter-spacing:.1em}
.pricing-div{height:1px;background:var(--line);margin-bottom:1.5rem}
.hero-card .pricing-div{background:rgba(0,0,0,.12)}
.pricing-list{margin-bottom:1.5rem}
.pricing-list li{padding:.4rem 0;font-size:.875rem;color:var(--text-3);position:relative;padding-left:1.1rem}
.pricing-list li::before{content:'';position:absolute;left:0;top:1.05em;width:6px;height:1px;background:var(--accent)}
.hero-card .pricing-list li::before{background:var(--accent-lo)}
.best{font-size:.72rem;font-weight:700;color:var(--accent-hi);text-transform:uppercase;letter-spacing:.1em}
.best span{display:block;font-weight:400;color:var(--text-3);font-style:normal;margin-top:.35rem;
  font-size:.8rem;text-transform:none;letter-spacing:0}

/* ═══ STEPS ═══ */
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.step{text-align:left;background:var(--surface);padding:2.25rem 1.75rem;transition:background .3s var(--ease)}
.step:hover{background:var(--surface-3)}
.step-num{
  width:auto;height:auto;border-radius:0;background:transparent;color:var(--accent);
  font-family:var(--font-d);font-size:2.25rem;font-weight:800;line-height:1;
  display:block;margin:0 0 1.25rem;letter-spacing:-.05em;
}
.step h4{
  font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--text);
  margin-bottom:.5rem;letter-spacing:-.02em;
}
.step p{font-size:.85rem;color:var(--text-3);line-height:1.6}

/* ═══ ARTICLES ═══ */
.article-card{background:var(--surface);border:1px solid var(--line);transition:background .35s var(--ease)}
.article-card:hover{background:var(--surface-3)}
.article-tag{
  display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--accent);background:transparent;padding:0;
  border-radius:0;margin-bottom:1rem;
}
.article-card h3{
  font-family:var(--font-d);font-size:1.25rem;font-weight:700;color:var(--text);
  margin-bottom:.6rem;letter-spacing:-.025em;line-height:1.2;
}
.article-card p{font-size:.875rem;color:var(--text-3);line-height:1.65}
.article-date{font-size:.72rem;color:var(--text-3);margin-top:1rem;text-transform:uppercase;letter-spacing:.1em}
.card-illo{
  width:100%;height:150px;border-radius:0;background:var(--surface-2);
  border:1px solid var(--line);margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.card-illo svg{width:100%;height:100%}
.card-illo img{width:100%;height:100%;object-fit:contain;padding:0;background:transparent;border-radius:0;box-shadow:none}
#page-capabilities .card-illo{margin-bottom:1rem}

/* ═══ CONTACT ═══ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem)}
.form-group{margin-bottom:1.25rem}
.form-group label{
  display:block;font-size:.7rem;font-weight:600;color:var(--text-3);margin-bottom:.5rem;
  text-transform:uppercase;letter-spacing:.12em;
}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:.9rem 1rem;border:1px solid var(--line-2);border-radius:0;
  font-size:.9rem;font-family:var(--font-b);color:var(--text);transition:.2s;
  background:var(--surface);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-3)}
.form-group select option{background:var(--surface-2);color:var(--text)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash);background:var(--surface-2);
}
.form-group textarea{resize:vertical}
.contact-info h3{
  font-family:var(--font-d);font-size:1.1rem;font-weight:700;color:var(--text);
  margin-bottom:.75rem;letter-spacing:-.02em;
}
.contact-panel{border:1px solid var(--line);background:var(--surface);padding:2.25rem}
.contact-panel .row{padding:1.1rem 0;border-bottom:1px solid var(--line)}
.contact-panel .row:last-child{border-bottom:none}
.contact-panel .k{font-size:.65rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);margin-bottom:.35rem}
.contact-panel .v{font-size:.95rem;color:var(--text);font-weight:500}
.contact-panel .v a{color:var(--text)}
.contact-panel .v a:hover{color:var(--accent-hi)}
.form-success{
  display:none;padding:2rem;background:var(--surface);border:1px solid var(--accent);
  border-radius:0;color:var(--text);font-weight:500;text-align:center;
}

/* ═══ FOOTER ═══ */
.footer{background:var(--bg);color:var(--text-3);padding:clamp(3.5rem,7vw,5rem) 0 1.5rem;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem}
.footer-brand{
  font-family:var(--font-d);font-size:1.02rem;color:#fff;margin-bottom:.6rem;
  display:flex;align-items:center;gap:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
}
.footer-tagline{font-style:normal;font-size:.78rem;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.1em}
.footer h4{
  color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;margin-bottom:1rem;
}
.footer a{color:var(--text-3);font-size:.825rem;display:block;padding:.3rem 0}
.footer a:hover{color:var(--accent-hi)}
.footer-bottom{
  border-top:1px solid var(--line);margin-top:3rem;padding-top:1.5rem;
  font-size:.72rem;text-align:left;color:var(--text-3);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;
}

/* ═══ PAGES ═══ */
.page{display:none}
.page.active{display:block;animation:pageIn .5s var(--ease)}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:2.5rem;align-items:start}
  .hero-meta{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:2rem;max-width:620px}
  .edit-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1024px){
  .split{grid-template-columns:1fr}
  .split.reverse .split-text{order:1}.split.reverse .split-visual{order:2}
  .split-visual{margin-top:1.5rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .logo-track{grid-template-columns:repeat(3,1fr)}
  .problem-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .steps-row{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr}
  .what-list{grid-template-columns:1fr}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:block}
  .grid-2,.grid-3,.grid-4,.feature-grid,.edit-strip{grid-template-columns:1fr}
  .steps-row{grid-template-columns:1fr}
  .team-detail,.team-detail-grid .team-detail{flex-direction:column;align-items:flex-start;text-align:left;gap:1.5rem}
  .team-detail-grid .team-detail-left{width:100%;min-width:0}
  .team-detail-grid .photo-slot-lg{max-width:220px}
  .creds{text-align:left}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
  .trust-row{flex-direction:column;align-items:center;gap:.6rem}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns .btn{width:100%;justify-content:center}
  .hero-stats{gap:0}
  .hero-stat{padding-right:1.5rem;margin-right:1.5rem}
  .section{padding:3.5rem 0}
  .feature-card,.problem-card,.team-card,.card,.pricing-card{padding:1.75rem}
  .team-card{padding:0 0 1.5rem}
  .cap-panel{aspect-ratio:auto;min-height:280px}
  .vert-item{flex:1 1 45%}

  /* Client logos: one auto-scrolling row. */
  .logo-grid{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;--logo-gap:1px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .logo-grid::-webkit-scrollbar{display:none}
  .logo-track{display:flex;width:max-content;gap:var(--logo-gap);animation:logo-marquee 24s linear infinite}
  .logo-set{display:flex;gap:var(--logo-gap)}
  .logo-set-dup{display:flex}
  .logo-slot{flex:0 0 var(--logo-w);height:92px}
}
@keyframes logo-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-5 * (var(--logo-w) + var(--logo-gap))))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ═══ ADDENDA ═══ */
.nb{white-space:nowrap}
.brand-glyph{width:.56em;height:.687em;top:0}
.edit-strip-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.edit-strip{border:none;border-left:1px solid var(--line);border-right:1px solid var(--line)}
/* hero third line — outlined counter-voice, keeps the star the only solid mark */
.hero-title .line.alt{
  font-size:.66em;letter-spacing:-.035em;margin-top:.12em;
  color:transparent;-webkit-text-stroke:1.6px rgba(255,255,255,.5);
}
.hero-title .line.alt .brand-glyph svg{-webkit-text-stroke:0}
@media(max-width:768px){.hero-title .line.alt{-webkit-text-stroke-width:1.1px;font-size:.72em}}

/* ── grid corrections ── */
.grid-plain{background:transparent;gap:2rem}
.team-grid{margin-top:1rem}
form .grid-2{background:transparent;gap:0 1.25rem}
.grid-3 > .card,.grid-4 > .card{display:flex;flex-direction:column}
.cap-link,.persona-label + p{margin-top:auto}
.cap-link{padding-top:1rem}

/* ── client logos: opaque white-background PNGs, inverted then screened onto black ── */
.logo-slot img{
  filter:grayscale(1) invert(1) contrast(1.08);
  mix-blend-mode:screen;opacity:.7;max-height:46px;
}
.logo-slot:hover img{opacity:1}
.persona-badge,.article-tag{align-self:flex-start}
.logo-slot img{filter:grayscale(1) contrast(1.3) invert(1)}
@media(max-width:768px){
  .hero-stats{display:grid;grid-template-columns:1fr 1fr}
  .hero-stat{padding:1.25rem 1rem 1.25rem 0;margin-right:0;border-right:1px solid var(--line);
    border-bottom:1px solid var(--line)}
  .hero-stat:nth-child(2n){border-right:none;padding-left:1rem}
  .hero-stat:last-child{border-bottom:none}
}

/* ═══════════════════════════════════════════════════════════
   LIGHT-THEME CORRECTIONS
   Rules below assume the light canvas and are written to be
   band-aware: inside .band-dark the same tokens resolve dark.
   ═══════════════════════════════════════════════════════════ */

body{background:var(--bg);color:var(--text-2)}
.section-soft{background:var(--surface-2)}
.band-dark + .section,.section + .band-dark,.band-dark + .band-dark{border-top:none}
.section.band-dark{border-top:none}

/* ── Nav: solid white, sits above the dark hero ── */
.nav{background:rgba(255,255,255,.86);border-bottom:1px solid var(--line)}
.nav.scrolled{background:rgba(255,255,255,.97);box-shadow:0 1px 3px rgba(20,20,26,.06)}
.hamburger span{background:var(--text)}
.mobile-menu{background:var(--bg)}

/* ── Cards: 8px radius, hairline border, shadow on lift ── */
.card,.feature-card,.problem-card,.article-card,.pricing-card,.step,.vert-item,.edit-card,.logo-slot{
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:background .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease),transform .3s var(--ease);
}
.card:hover,.feature-card:hover,.problem-card:hover,.article-card:hover,
.step:hover,.vert-item:hover,.edit-card:hover{
  background:var(--surface);border-color:var(--line-2);
  box-shadow:var(--shadow-lift);transform:translateY(-2px);
}
.band-dark .card:hover,.band-dark .feature-card:hover,.band-dark .problem-card:hover,
.band-dark .article-card:hover,.band-dark .step:hover,.band-dark .vert-item:hover{
  background:var(--surface-2);transform:none;
}

/* ── Grids: real gaps instead of 1px hairline plates ── */
.grid-2,.grid-3,.grid-4,.problem-grid,.feature-grid,.steps-row,.vert-row,.edit-strip,.logo-track{
  background:transparent;gap:1.25rem;border:none;
}
.problem-grid,.feature-grid,.steps-row,.edit-strip{border:none}
.vert-row{gap:1rem}
.grid-3 > .card,.grid-4 > .card{border:1px solid var(--line)}
.edit-strip{border-left:none;border-right:none}
.edit-strip-wrap{border-top:none;border-bottom:none;background:transparent;
  padding:clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,4.5rem)}

/* ── Inverted (dark) cards on the light canvas ── */
.edit-card.inv:hover,.problem-card.highlight:hover,.pricing-card.hero-card:hover{
  background:var(--inv-2);border-color:transparent;
}
.edit-card.inv,.problem-card.highlight,.pricing-card.hero-card{border-color:transparent}
.problem-card.highlight::before{-webkit-text-stroke-color:rgba(255,255,255,.22)}
.problem-card.highlight:hover::before{-webkit-text-stroke-color:var(--accent-lo)}
.hero-card .pricing-div{background:rgba(255,255,255,.16)}
.pricing-card.hero-card .pricing-price{color:var(--accent-lo)}
.pricing-card.hero-card .pricing-list li::before{background:var(--accent-lo)}
.pricing-card.hero-card .best{color:var(--accent-lo)}
.pricing-card.hero-card .best span{color:var(--text-on-inv-2)}
.edit-card.inv .kick{color:var(--accent-lo)}
.edit-card.inv .go svg{stroke:var(--accent-lo)}

/* ── Capability panels: technical grid needs ink, not light ── */
.cap-panel{background:var(--surface-2);border-radius:var(--radius)}
.cap-panel::before{background-image:
  linear-gradient(to right,rgba(20,20,26,.05) 1px,transparent 1px),
  linear-gradient(to bottom,rgba(20,20,26,.05) 1px,transparent 1px)}
.cap-panel .cp-tags span{background:var(--bg);border-radius:4px}
.cap-panel .cp-num{-webkit-text-stroke-color:var(--line-2)}

/* ── Illustration tiles stay dark so the violet line art reads ── */
.card-illo{background:var(--inv);border:none;border-radius:6px}

/* ── Client logos: white-background PNGs multiply cleanly on white ── */
.logo-grid{border:none;background:transparent;overflow:visible}
.logo-slot img{filter:grayscale(1);mix-blend-mode:multiply;opacity:.62}
.logo-slot:hover img{filter:none;opacity:1}

/* ── Forms ── */
.form-group input,.form-group select,.form-group textarea{
  background:var(--surface-2);border-radius:6px;border-color:var(--line-2);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:var(--bg)}
.btn,.btn-p,.btn-s{border-radius:6px}
.persona-badge,.arrow-link .chev,.pricing-badge{border-radius:4px}
.icon-pill,.feature-icon,.cap-icon,.vert-icon,.avatar{border-radius:6px}
.photo-slot{border-radius:var(--radius)}
.table-wrap{border-radius:var(--radius)}
.contact-panel,.for-text,.form-success{border-radius:var(--radius)}

/* ── Team band: portraits read better with a touch more contrast on dark ── */
.band-dark .photo-slot{background:var(--surface-2)}
.band-dark .logo-slot img{filter:grayscale(1) contrast(1.3) invert(1);mix-blend-mode:screen;opacity:.7}

/* ── Footer sits in its own dark band ── */
.footer{border-top:none}

/* ── Contrast fixes ── */
/* Nav is opaque: a translucent white over the dark hero read as grey */
.nav{background:#FFFFFF}
.nav.scrolled{background:#FFFFFF}
/* Primary button inside a dark band needs a deeper violet under white text */
.band-dark .btn-p{background:#1FC4DE;color:#062232}
.band-dark .btn-p:hover,.band-dark .btn-p:focus,.band-dark .btn-p:active{background:#5FE0EC;color:#062232 !important}
.band-dark .arrow-link .chev{background:#1FC4DE}
.band-dark .arrow-link .chev svg{stroke:#062232}
.band-dark .arrow-link:hover .chev{background:#3ED8E8}
/* Verticals: 7 fixed columns beat flex-wrap, which stranded the last item */
.vert-row{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem}
.vert-item{flex:none;width:auto;padding:1.75rem .75rem}
@media(max-width:1100px){.vert-row{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.vert-row{grid-template-columns:repeat(2,1fr)}}
/* CTA email dropped below the button instead of colliding with it */
.cta-dark .email-link{display:block;width:fit-content;margin-top:2rem}

/* ═══════════════════════════════════════════════════════════
   SECTION 2 — CAPABILITY RAIL
   Four cards on one register. No dark/light checkerboard.
   ═══════════════════════════════════════════════════════════ */
.rail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.rail-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem 1.6rem 1.75rem;cursor:pointer;overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
/* violet wash that rises from the base on hover */
.rail-card::before{
  content:"";position:absolute;inset:auto 0 0 0;height:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,96,138,.05),rgba(20,96,138,.11));
  transition:height .5s var(--ease);
}
/* accent rule that draws across the top */
.rail-card::after{
  content:"";position:absolute;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--accent),#5FE0EC);
  transition:width .55s var(--ease);
}
.rail-card:hover,.rail-card:focus-visible{
  transform:translateY(-6px);box-shadow:var(--shadow-lift);
  border-color:var(--accent-line);outline:none;
}
.rail-card:hover::before,.rail-card:focus-visible::before{height:100%}
.rail-card:hover::after,.rail-card:focus-visible::after{width:100%}

.rail-num{
  position:absolute;top:1.4rem;right:1.5rem;
  font-family:var(--font-d);font-size:2.4rem;font-weight:800;line-height:1;
  letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--line-2);
  transition:-webkit-text-stroke-color .45s var(--ease),transform .45s var(--ease);
}
.rail-card:hover .rail-num{-webkit-text-stroke-color:var(--accent-line);transform:translateY(-2px)}
.rail-icon{
  width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:10px;color:var(--accent);
  margin-bottom:1.5rem;background:var(--surface-2);
  transition:background .4s var(--ease),border-color .4s var(--ease),
             color .4s var(--ease),transform .5s var(--ease);
}
.rail-icon svg{width:26px;height:26px}
.rail-card:hover .rail-icon{
  background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.06);
}
.rail-kick{
  font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.7rem;
}
.rail-card h3{
  font-family:var(--font-d);font-size:1.14rem;font-weight:700;color:var(--text);
  line-height:1.25;letter-spacing:-.02em;margin-bottom:.7rem;
}
.rail-card p{font-size:.865rem;color:var(--text-3);line-height:1.62}
.rail-go{
  margin-top:auto;padding-top:1.5rem;display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8rem;font-weight:600;color:var(--text);
}
.rail-go svg{width:13px;height:13px;stroke:var(--accent);stroke-width:2.5;fill:none;
  transition:transform .35s var(--ease)}
.rail-card:hover .rail-go svg{transform:translateX(6px)}

/* ═══════════════════════════════════════════════════════════
   SECTION 3 — THE GAP vs HOW WE CLOSE IT
   ═══════════════════════════════════════════════════════════ */
.gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:stretch}
.gap-col{display:flex;flex-direction:column;gap:1.25rem}
.gap-label{
  display:flex;align-items:center;gap:.7rem;font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:.25rem;
}
.gap-label span{width:26px;height:1px;background:var(--line-2)}

.gap-item{
  display:flex;gap:1.25rem;padding:1.75rem;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);flex:1;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.gap-item:hover{border-color:var(--line-2);background:var(--surface-2)}
.gap-ico{
  width:46px;height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--surface-2);color:var(--text-3);
  border:1px solid var(--line);transition:.35s var(--ease);
}
.gap-item:hover .gap-ico{background:var(--bg)}
.gap-ico svg{width:23px;height:23px}
.gap-item h3{
  font-family:var(--font-d);font-size:1.05rem;font-weight:700;color:var(--text);
  letter-spacing:-.02em;margin-bottom:.5rem;line-height:1.3;
}
.gap-item p{font-size:.865rem;color:var(--text-3);line-height:1.62;margin-bottom:.9rem}
.gap-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.gap-tags span{
  font-size:.68rem;font-weight:500;color:var(--text-3);padding:.28rem .6rem;
  border:1px solid var(--line);border-radius:4px;background:var(--surface-2);
}

/* The answer panel — violet, not black */
.solve-panel{
  position:relative;overflow:hidden;border-radius:var(--radius);
  padding:clamp(1.75rem,3vw,2.5rem);
  background:linear-gradient(160deg,#F5FCFE 0%,#E7F5FA 55%,#DAEFF7 100%);
  border:1px solid var(--accent-line);
  display:flex;flex-direction:column;
  box-shadow:0 2px 8px rgba(20,96,138,.05),0 20px 48px rgba(20,96,138,.10);
}
.solve-panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#5FE0EC,var(--accent));
  background-size:200% 100%;animation:solveSheen 6s linear infinite;
}
@keyframes solveSheen{to{background-position:200% 0}}
.solve-glow{
  position:absolute;right:-18%;top:-22%;width:62%;aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(31,196,222,.30),transparent 66%);
  filter:blur(34px);animation:solveFloat 11s ease-in-out infinite alternate;
}
@keyframes solveFloat{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-16px,18px,0) scale(1.10)}
}
.solve-head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.5rem;position:relative;z-index:1}
.solve-mark{
  width:40px;height:40px;flex:0 0 40px;border-radius:8px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(20,96,138,.32);
}
.solve-mark svg{width:19px;height:19px;fill:#fff}
.solve-badge{
  font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.solve-panel h3{
  font-family:var(--font-d);font-size:clamp(1.3rem,2vw,1.65rem);font-weight:700;
  color:var(--text);letter-spacing:-.028em;line-height:1.18;margin-bottom:.9rem;
  position:relative;z-index:1;
}
.solve-panel p{font-size:.94rem;color:var(--text-2);line-height:1.7;margin-bottom:1.5rem;position:relative;z-index:1}
.solve-list{margin:0 0 1.75rem;display:flex;flex-direction:column;gap:.7rem;position:relative;z-index:1}
.solve-list li{
  position:relative;padding-left:1.9rem;font-size:.88rem;color:var(--text-2);font-weight:500;line-height:1.5;
}
.solve-list li::before{
  content:"";position:absolute;left:0;top:.05em;width:19px;height:19px;border-radius:50%;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='black'/></svg>") center/contain no-repeat;
}
.solve-list li::after{
  content:"";position:absolute;left:5px;top:.42em;width:9px;height:5px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);
}
.solve-panel .arrow-link{margin-top:auto;position:relative;z-index:1}

@media(max-width:1024px){
  .rail-grid{grid-template-columns:repeat(2,1fr)}
  .gap-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .rail-grid{grid-template-columns:1fr}
  .gap-item{flex-direction:column;gap:1rem}
}

/* ═══════════════════════════════════════════════════════════
   MOTION LAYER
   Everything here is disabled under prefers-reduced-motion
   (see the guard at the end of this file).
   ═══════════════════════════════════════════════════════════ */

/* ── Scroll reveal: opacity + rise, staggered via --d ── */
html.js-anim .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)}
html.js-anim .reveal.in{opacity:1;transform:none}

/* ── Scroll progress bar under the nav ── */
.scroll-bar{
  position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),#5FE0EC);z-index:101;will-change:transform;
}

/* ── Hero ambient field: drifting violet orbs behind the type ── */
.hero-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero-field .orb{
  position:absolute;border-radius:50%;filter:blur(46px);
  background:radial-gradient(circle,rgba(31,196,222,.42),rgba(20,96,138,.10) 45%,transparent 70%);
  animation:orbDrift 18s ease-in-out infinite alternate;
}
.hero-field .orb-a{width:420px;height:420px;left:52%;top:-12%;animation-duration:20s}
.hero-field .orb-b{width:340px;height:340px;left:8%;bottom:-16%;animation-duration:26s;animation-delay:-6s}
.hero-field .orb-c{width:260px;height:260px;right:6%;bottom:8%;animation-duration:23s;animation-delay:-12s}
@keyframes orbDrift{
  from{transform:translate3d(0,0,0) scale(.94)}
  to{transform:translate3d(46px,-38px,0) scale(1.14)}
}
/* slow parallax drift on the technical grid */
.hero::after{animation:gridDrift 40s linear infinite}
@keyframes gridDrift{to{background-position:72px 72px}}

/* ── The brand star breathes ── */
.brand-glyph svg{animation:markPulse 4.5s ease-in-out infinite}
@keyframes markPulse{
  0%,100%{filter:drop-shadow(0 0 18px var(--accent-glow))}
  50%{filter:drop-shadow(0 0 34px rgba(62,216,232,.75))}
}

/* ── Hero headline: lines rise in on load ── */
html.js-anim .hero-title .line{
  opacity:0;transform:translateY(28px);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
html.js-anim .hero-title .line:nth-child(1){transition-delay:.06s}
html.js-anim .hero-title .line:nth-child(2){transition-delay:.16s}
html.js-anim .hero-title .line:nth-child(3){transition-delay:.26s}
html.js-anim .hero-meta,html.js-anim .hero-stats{
  opacity:0;transform:translateY(20px);
  transition:opacity .9s var(--ease) .42s,transform .9s var(--ease) .42s;
}
/* .hero-shown is added by JS and never removed, so coming back to Home
   from another page always finds the hero already revealed. */
html.js-anim .hero.hero-shown .hero-title .line,
html.js-anim .hero.hero-shown .hero-meta,
html.js-anim .hero.hero-shown .hero-stats{opacity:1;transform:none}

/* ── Counters hold their width so the layout doesn't jump ── */
.hero-stat .n .count{display:inline-block;font-variant-numeric:tabular-nums}

/* ── Client logos: always-on marquee, paused on hover ── */
.logo-grid{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.logo-track{
  display:flex;width:max-content;gap:1.25rem;
  animation:logo-marquee 34s linear infinite;
}
.logo-set{display:flex;gap:1.25rem}
.logo-set-dup{display:flex}
.logo-slot{flex:0 0 210px;height:104px}
.logo-grid:hover .logo-track{animation-play-state:paused}
@keyframes logo-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-5 * (210px + 1.25rem)))}
}
@media(max-width:768px){
  .logo-slot{flex:0 0 150px;height:88px}
  @keyframes logo-marquee{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-5 * (150px + 1.25rem)))}
  }
}

/* ── Interactive lift on the remaining tiles ── */
.feature-card,.vert-item,.step,.article-card,.card{will-change:transform}
.feature-card:hover .feature-icon,.vert-item:hover .vert-icon,.card:hover .cap-icon{
  transform:translateY(-2px) scale(1.05);
}
.feature-icon,.vert-icon,.cap-icon{transition:transform .4s var(--ease),background .3s,border-color .3s}
.team-card .photo-slot{overflow:hidden}
.compare-table tr{transition:background .25s var(--ease)}

/* ── Respect the user's motion preference ── */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-title .line,.hero-meta,.hero-stats{opacity:1 !important;transform:none !important;transition:none !important}
  .hero-field .orb,.hero::after,.brand-glyph svg,.logo-track,.solve-glow,.solve-panel::before{animation:none !important}
  .scroll-bar{display:none}
}

/* ═══════════════════════════════════════════════════════════
   BRAND LOCKUP
   TSAbiglogo.png is 1639x610 (2.687:1) with a transparent
   background. Height is the control; width follows the ratio.
   ═══════════════════════════════════════════════════════════ */
.brand-logo{
  height:46px;width:auto;display:block;
  /* the intrinsic width/height attrs reserve space; override the box here */
  max-width:none;
  transition:opacity .25s var(--ease),transform .35s var(--ease);
}
.nav-logo{gap:0;padding:.25rem 0}
.nav-logo:hover .brand-logo{opacity:.82}

/* Footer sits on a dark band: reverse the lockup to solid white */
.brand-logo-ft{height:54px;filter:brightness(0) invert(1);opacity:.95}
.footer-brand{display:block;margin-bottom:1rem}

@media(max-width:1024px){.brand-logo{height:42px}}
@media(max-width:768px){
  .brand-logo{height:36px}
  .brand-logo-ft{height:44px}
}
@media(max-width:380px){.brand-logo{height:32px}}
/* Badge sits on the dark Retainer card, which is outside .band-dark, so the
   light-theme --accent (navy) would land navy-on-navy. Use cyan there. */
.pricing-card.hero-card .pricing-badge{background:var(--accent-lo);color:#062232}

/* ═══════════════════════════════════════════════════════════
   HERO BACKGROUND VIDEO
   Layer order (bottom → top):
     hero background gradient  →  video  →  scrim  →  orbs  →  grid  →  text
   The video is opt-in: .has-video is set by JS only once a file
   actually starts playing, so a missing/failed file changes nothing.
   ═══════════════════════════════════════════════════════════ */
:root{
  --hero-video-opacity:.32;   /* tune this one value to taste */
  --hero-scrim-top:.30;       /* black veil, weakest at the top-right */
  --hero-scrim-bottom:.72;    /* strongest behind the stats row */
}

.hero-media{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  opacity:0;transition:opacity 1.1s var(--ease);
}
.hero.has-media .hero-media{opacity:1}

.hero-video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;width:auto;height:auto;
  object-fit:cover;
  opacity:var(--hero-video-opacity);
  filter:grayscale(.35) contrast(1.05);   /* keeps footage from fighting the brand palette */
}

/* Black veil so the headline never depends on what the footage is doing.
   Two layers: a vertical wash, plus a left-weighted wash under the type. */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.42) 38%,
      rgba(0,0,0,.14) 68%,
      rgba(0,0,0,.28) 100%),
    linear-gradient(180deg,
      rgba(6,34,50,var(--hero-scrim-top)) 0%,
      rgba(6,34,50,.34) 45%,
      rgba(6,34,50,var(--hero-scrim-bottom)) 100%);
}

/* With footage behind, dial the orbs back so they read as glow, not blobs */
.hero.has-media .hero-field .orb{opacity:.55}
.hero.has-media::after{opacity:.30}

/* Never autoplay video for people who asked for less motion */
/* Reduced motion keeps the still poster frame — just never any movement.
   Playback is started by JS, so nothing can autoplay behind our back. */

@media(max-width:768px){
  :root{--hero-video-opacity:.26}
  .hero-scrim{background:
    linear-gradient(180deg,rgba(6,34,50,.45) 0%,rgba(6,34,50,.55) 50%,rgba(6,34,50,.80) 100%)}
}

/* ═══════════════════════════════════════════════════════════
   TEAM — padding fix + scalable horizontal rail
   .team-card/.team-detail carried a border from .card but zero
   horizontal padding, so text sat flush against the border.
   ═══════════════════════════════════════════════════════════ */
.team-card{
  padding:1.25rem;
  overflow:hidden;                 /* clips the photo to the card radius */
}
/* photo stays full-bleed across the top despite the new padding */
.team-card .photo-slot{
  margin:-1.25rem -1.25rem 1.25rem;
  width:calc(100% + 2.5rem);max-width:none;
  border-radius:var(--radius) var(--radius) 0 0;
}
.team-detail{padding:2rem}
.team-detail-grid .team-detail{padding:2rem}

/* ── Horizontal rail: scales to any number of people ── */
.team-rail{position:relative;margin-top:1.5rem}
.team-scroller{
  display:flex;gap:1.25rem;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  padding:.25rem .25rem 1.1rem;margin:-.25rem -.25rem 0;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  -webkit-overflow-scrolling:touch;
}
.team-scroller > .team-card{
  flex:0 0 calc((100% - 3 * 1.25rem) / 4);   /* four across when there's room */
  min-width:250px;                            /* below that, it scrolls */
  scroll-snap-align:start;
}
.team-scroller::-webkit-scrollbar{height:6px}
.team-scroller::-webkit-scrollbar-track{background:var(--line);border-radius:99px}
.team-scroller::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
.team-scroller::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.team-scroller:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.rail-nav{
  position:absolute;top:34%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line-2);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;
  box-shadow:0 4px 18px rgba(0,0,0,.28);
  transition:background .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease);
}
.rail-nav svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none}
.rail-nav:hover{background:var(--accent);border-color:var(--accent);color:#062232}
.rail-prev{left:-18px}
.rail-next{right:-18px}
.rail-nav[disabled]{opacity:0;pointer-events:none}
@media(max-width:1400px){.rail-prev{left:4px}.rail-next{right:4px}}

@media(max-width:768px){
  .team-scroller > .team-card{flex-basis:80vw;min-width:0}
  .rail-nav{display:none}          /* touch devices just swipe */
  .team-card{padding:1.1rem}
  .team-card .photo-slot{margin:-1.1rem -1.1rem 1.1rem;width:calc(100% + 2.2rem)}
  .team-detail,.team-detail-grid .team-detail{padding:1.5rem}
}

/* ═══════════════════════════════════════════════════════════
   CAPABILITY PANEL — schematic fills the space the
   "Led by …" line used to leave empty.
   ═══════════════════════════════════════════════════════════ */
.cap-panel{display:flex;flex-direction:column;justify-content:flex-start}
.cp-art{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:.75rem 0 1.25rem;position:relative;z-index:1;min-height:0;
}
.cp-art svg{
  width:100%;max-width:380px;height:auto;color:var(--accent);
  opacity:.9;overflow:visible;
}
.cap-section:hover .cp-art svg{opacity:1}
.cp-art svg,.cap-section:hover .cp-art svg{transition:opacity .4s var(--ease)}
.cap-panel .cp-num{align-self:flex-start}
.cap-panel .cp-body{margin-top:auto}
/* brief ring so a deep-linked member is obvious on arrival */
.team-detail.member-focus{
  box-shadow:0 0 0 2px var(--accent), var(--shadow-lift);
  transition:box-shadow .35s var(--ease);
}

/* ═══ FOOTER — registered office + CIN ═══ */
.footer-addr{margin-top:1.75rem}
.footer-addr h4{margin-bottom:.55rem}
.footer address{
  font-style:normal;font-size:.8rem;line-height:1.8;
  color:var(--text-3);max-width:34ch;
}
.footer-cin{white-space:nowrap}
.footer-cin .cin-no{
  font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--text-2);
  -webkit-user-select:all;user-select:all;      /* one click selects the whole number */
}
@media(max-width:1024px){.footer-addr{margin-top:1.25rem}}
@media(max-width:768px){
  .footer-bottom{gap:.35rem}
  .footer-cin{white-space:normal}
}
.footer address .addr-name{color:var(--text-2);font-weight:500}

/* ═══════════════════════════════════════════════════════════
   MOBILE HERO
   Desktop stacks headline+stats in one column and the pitch in
   another. Flattened on phones (display:contents) so the order
   can be resequenced: headline -> pitch -> CTA -> proof.
   Previously the stats pushed the CTA to y=796 on a 390x844
   screen - past the fold before browser chrome is even counted.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .hero{padding-top:calc(var(--nav-h) + 1.75rem);padding-bottom:2.5rem}
  .hero-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .hero-grid > div:first-child{display:contents}

  .hero-title{order:1;margin-bottom:1.4rem}
  .heading-hero{font-size:clamp(2.4rem,11vw,3.1rem)}

  .hero-meta{
    order:2;display:flex;flex-direction:column;
    border-top:none;border-left:none;padding:0;max-width:none;
  }
  .hero-meta .kicker{order:1;font-size:1.05rem;margin-bottom:.65rem}
  .hero-meta .kicker::before{width:32px;margin-bottom:.85rem}
  .hero-meta p{order:2;font-size:.9rem;line-height:1.62;margin-bottom:1.35rem}
  .hero-btns{order:3;margin-top:0;margin-bottom:1.1rem}      /* CTA ahead of the text link */
  .hero-meta .arrow-link{order:4;align-self:flex-start}

  /* Proof row: one compact line of three, below the ask */
  .hero-stats{
    order:3;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    margin-top:2rem;padding-top:1.1rem;border-top:1px solid var(--line);
  }
  .hero-stat{
    padding:0 .55rem;margin:0;text-align:left;
    border-right:1px solid var(--line);border-bottom:none;
  }
  .hero-stat:first-child{padding-left:0}
  .hero-stat:nth-child(2n){padding-left:.55rem}
  .hero-stat:last-child{border-right:none;padding-right:0}
  .hero-stat .n{font-size:1.45rem;margin-bottom:.2rem}
  .hero-stat .l{font-size:.56rem;letter-spacing:.07em;line-height:1.35;
    min-height:2.7em;display:block}   /* reserve 2 lines so the row bottoms align */
}
@media(max-width:360px){
  .heading-hero{font-size:2.15rem}
  .hero-stat .n{font-size:1.25rem}
}