/* ============ Tokens ============ */
:root{
  /* Brand mark colours, for reference only. The logo is now a PNG
     (assets/logo-mark*.png) because Chrome for Android mis-renders SVG
     fills. To change the brand blue you must re-render those PNGs and
     the favicons; editing this value alone will do nothing. */
  --brand-blue:#0037ff;
  --brand-teal:#29ffc2;
  --brand-yellow:#ffec00;

  --navy-950:#081a30;
  --navy-900:#0d2744;
  --navy-800:#153a5f;
  --navy-700:#204c72;
  --navy-600:#2e5f88;
  --teal-500:#14a3c7;
  --teal-400:#3fc2de;
  --teal-300:#8adcec;
  --teal-100:#e2f5fa;
  --ink-900:#0d2744;
  --slate-600:#48586d;
  --slate-400:#8497ac;
  --slate-300:#c1cbd8;
  --bg-light:#f4f6f9;
  --bg-white:#ffffff;
  --line:#e2e8f0;
  --shadow-sm: 0 1px 2px rgba(13,39,68,.06);
  --shadow-md: 0 8px 24px rgba(13,39,68,.10);
  --shadow-lg: 0 24px 60px rgba(8,26,48,.28);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --container: 1180px;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ============ Reset ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--bg-white);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; color:var(--ink-900); }
p{ margin:0; }
button{ font:inherit; cursor:pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--teal-500); outline-offset:3px;
}

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 2.5rem); }
.container-narrow{ width:100%; max-width:820px; margin-inline:auto; padding-inline:clamp(1.25rem, 4vw, 2.5rem); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal-400);
}
.eyebrow::before{ content:""; width:16px; height:1.5px; background:var(--teal-400); display:inline-block; }
.eyebrow.on-light{ color:#0d8aa8; }
.eyebrow.on-light::before{ background:#0d8aa8; }
.eyebrow.center{ justify-content:center; }

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn svg{ width:16px; height:16px; }
.btn-primary{ background:var(--teal-500); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--teal-400); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-ghost-dark{ border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-1px); }
.btn-ghost-light{ border-color:var(--navy-700); color:var(--navy-900); }
.btn-ghost-light:hover{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.btn-block{ width:100%; }
.btn-sm{ padding:.6rem 1.1rem; font-size:.85rem; }

/* ============ Nav ============ */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(13,39,68,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#fff; }
/* PNG, not inline SVG. Chrome for Android renders SVG fills of the brand
   blue as a pale lavender (#0037ff came out #9fa6ff); raster images render
   the declared colour correctly. Verified by pixel measurement, not by eye.
   srcset supplies 1x/2x/3x rendered natively at each size. */
.brand-mark{ width:34px; height:34px; flex:none; display:block; }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{ color:var(--slate-300); font-size:.92rem; font-weight:500; transition:color .15s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:#fff; }
.nav-actions{ display:flex; align-items:center; gap:.9rem; }
.nav-toggle{ display:none; background:none; border:0; color:#fff; padding:.4rem; }
.nav-toggle svg{ width:24px; height:24px; }

@media (max-width:900px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0;
    background:var(--navy-900); border-bottom:1px solid rgba(255,255,255,.08);
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  /* Was max-height:320px with overflow:hidden, which clipped the expanded
     Services panel with no way to scroll to the rest. Bound to the viewport
     and allow scrolling instead. dvh accounts for mobile browser chrome. */
  .nav-links.open{
    max-height:calc(100vh - 64px);
    max-height:calc(100dvh - 64px);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
  .nav-links a{ width:100%; padding:.9rem clamp(1.25rem,4vw,2.5rem); border-top:1px solid rgba(255,255,255,.06); }
  .nav-actions .btn-sm span.long{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ============ Hero (home) ============ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(63,194,222,.18), transparent 60%),
    radial-gradient(700px 500px at 100% 90%, rgba(32,76,114,.55), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 60%, var(--navy-900));
  color:#fff;
  padding-block:5.5rem 6rem;
}
.hero .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.hero-ring{ position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08); }
.hero-ring.r1{ width:640px; height:640px; right:-220px; top:-260px; }
.hero-ring.r2{ width:420px; height:420px; right:-80px; top:60px; border-color:rgba(63,194,222,.16); }
.hero-copy h1{ font-size:clamp(2.2rem, 3.4vw, 3.15rem); line-height:1.08; color:#fff; margin-top:1.1rem; }
.hero-copy .lede{ margin-top:1.25rem; font-size:1.15rem; color:var(--slate-300); max-width:32rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.25rem; }

.hero-visual{ position:relative; display:flex; justify-content:center; }
.dash-card{
  position:relative; width:100%; max-width:420px;
  background:linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-lg);
  padding:1.5rem; box-shadow:var(--shadow-lg);
  backdrop-filter:blur(6px);
}
.dash-chrome{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.4rem; }
.dash-dots{ display:flex; gap:6px; }
.dash-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); }
.dash-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; color:var(--teal-300); text-transform:uppercase; display:flex; align-items:center; gap:.4rem; }
.dash-label .dot{ width:6px; height:6px; border-radius:50%; background:var(--teal-400); box-shadow:0 0 0 3px rgba(63,194,222,.25); }

.gauge-row{ display:flex; align-items:center; gap:1.4rem; padding-bottom:1.3rem; border-bottom:1px solid rgba(255,255,255,.1); }
.gauge{ position:relative; width:96px; height:96px; flex:none; }
.gauge svg{ width:100%; height:100%; transform:rotate(-90deg); }
.gauge-value{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-value strong{ font-family:var(--font-display); font-size:1.5rem; color:#fff; line-height:1; }
.gauge-value span{ font-size:.6rem; color:var(--slate-300); margin-top:2px; letter-spacing:.03em; }
.gauge-copy strong{ display:block; font-size:1.02rem; color:#fff; font-weight:600; }
.gauge-copy p{ margin-top:.3rem; font-size:.85rem; color:var(--slate-300); }

.dash-rows{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.dash-item{ display:flex; align-items:center; gap:.7rem; }
.dash-icon{ width:30px; height:30px; border-radius:8px; background:rgba(63,194,222,.14); display:flex; align-items:center; justify-content:center; flex:none; }
.dash-icon svg{ width:16px; height:16px; color:var(--teal-300); }
.dash-item-text{ flex:1; font-size:.85rem; color:#e7edf3; font-weight:500; }
.status-pill{ font-family:var(--font-mono); font-size:.66rem; padding:.28rem .55rem; border-radius:999px; font-weight:600; letter-spacing:.03em; }
.status-pill.ok{ background:rgba(63,194,222,.16); color:var(--teal-300); }
.status-pill.active{ background:rgba(255,255,255,.1); color:var(--slate-300); }

.float-chip{
  position:absolute; top:-18px; right:-10px;
  background:#fff; color:var(--ink-900); border-radius:999px;
  padding:.55rem 1rem; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-mono); font-size:.75rem; font-weight:600;
}
.float-chip svg{ width:14px; height:14px; color:#0d8aa8; }

@media (max-width:900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-visual{ margin-top:1rem; }
}

/* ============ Page hero (interior pages) ============ */
.page-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 480px at 88% -25%, rgba(63,194,222,.16), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 85%);
  color:#fff; padding-block:4.25rem 3.75rem;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(2rem, 3.2vw, 2.85rem); color:#fff; margin-top:.9rem; max-width:40rem; }
.page-hero p{ margin-top:1rem; font-size:1.08rem; color:var(--slate-300); max-width:36rem; }
.page-hero .hero-ring.r1{ width:520px; height:520px; right:-180px; top:-220px; }

/* ============ Section shells ============ */
section{ padding-block:5.5rem; }
.section-head{ max-width:44rem; }
.section-head h2{ font-size:clamp(1.7rem, 2.6vw, 2.35rem); margin-top:.9rem; line-height:1.15; }
.section-head p{ margin-top:1rem; font-size:1.05rem; color:var(--slate-600); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }
.section-alt{ background:var(--bg-light); }

/* ============ Outcomes / card grid (reused: About "Our Difference") ============ */
.outcomes{ background:var(--bg-light); }
.outcomes-grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(5, 1fr); gap:1rem; }
.outcomes-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.outcomes-grid.cols-4{ grid-template-columns:repeat(4,1fr); }
.outcome-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:1.6rem 1.2rem; text-align:center; box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.outcome-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.outcome-icon{ width:52px; height:52px; border-radius:50%; margin-inline:auto; background:var(--teal-100); display:flex; align-items:center; justify-content:center; }
.outcome-icon svg{ width:24px; height:24px; color:#0d8aa8; }
.outcome-item p{ margin-top:1rem; font-size:.88rem; font-weight:600; color:var(--ink-900); line-height:1.35; }

@media (max-width:1000px){ .outcomes-grid, .outcomes-grid.cols-4{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:640px){ .outcomes-grid, .outcomes-grid.cols-3, .outcomes-grid.cols-4{ grid-template-columns:repeat(2, 1fr); } }
/* NOTE: do not add a single-column breakpoint here. Every outcomes grid on
   the site shares these rules, so stacking below 520px makes users scroll
   far more on every page. Two columns at 640px is the intended floor.
   .cols-4 is listed above only so the Adversary Emulation grid follows the
   same responsive path as the rest instead of staying at four and
   overflowing the viewport. */

/* ============ Pillars (home teaser) ============ */
.pillars{ background:radial-gradient(900px 500px at 10% 0%, rgba(63,194,222,.08), transparent 55%), var(--navy-900); color:#fff; }
/* The global h1-h4 rule sets colour:var(--ink-900), which is #0d2744 — the
   SAME value as --navy-900 used for this section's background. The heading
   was rendering dark-on-dark and was effectively invisible in light mode.
   (Chrome's auto dark theme inverted it to white, which is why dark mode
   looked correct and hid the bug.) Inherit the section colour instead. */
.pillars .section-head h2{ color:#fff; }
.pillars .section-head p{ color:var(--slate-300); }
.pillars-grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; }
.pillar-card{
  background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1); border-radius:var(--radius-md);
  padding:1.75rem 1.5rem; transition:transform .15s ease, border-color .15s ease;
}
.pillar-card:hover{ transform:translateY(-4px); border-color:rgba(63,194,222,.4); }
.pillar-icon{ width:46px; height:46px; border-radius:12px; background:rgba(63,194,222,.14); display:flex; align-items:center; justify-content:center; }
.pillar-icon svg{ width:22px; height:22px; color:var(--teal-300); }
.pillar-card h3{ margin-top:1.1rem; font-size:1.08rem; color:#fff; }
.pillar-card .desc{ margin-top:.55rem; font-size:.85rem; color:var(--slate-300); line-height:1.5; }
.pillar-tags{ margin-top:1.1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column; gap:.45rem; }
.pillar-tags li{ font-size:.78rem; color:var(--slate-300); display:flex; align-items:center; gap:.5rem; }
.pillar-tags li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--teal-400); flex:none; }
.pillar-card a.card-link{ display:inline-flex; align-items:center; gap:.35rem; margin-top:1.1rem; font-size:.8rem; font-weight:600; color:var(--teal-300); }
.pillar-card a.card-link svg{ width:13px; height:13px; }

@media (max-width:1000px){ .pillars-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .pillars-grid{ grid-template-columns:1fr; } }

/* ============ Philosophy / lifecycle ============ */
.philosophy{ background:linear-gradient(180deg, #eaf1f7, var(--bg-light)); }
.philosophy .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
.philosophy-copy .tagline{ margin-top:1.1rem; font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:#0d8aa8; }
.philosophy-copy p.body{ margin-top:1rem; font-size:1.05rem; color:var(--slate-600); max-width:34rem; }

.lifecycle{ position:relative; width:300px; height:300px; margin-inline:auto; }
.lifecycle-ring{
  width:100%; height:100%; border-radius:50%;
  background:conic-gradient(from -90deg,
    var(--teal-500) 0deg 88deg, var(--bg-light) 88deg 92deg,
    var(--navy-700) 92deg 178deg, var(--bg-light) 178deg 182deg,
    var(--teal-400) 182deg 268deg, var(--bg-light) 268deg 272deg,
    var(--navy-600) 272deg 358deg, var(--bg-light) 358deg 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 54px), #000 calc(100% - 53px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 54px), #000 calc(100% - 53px));
}
.lifecycle-center{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.lifecycle-center svg{ width:30px; height:30px; color:var(--ink-900); }
.lifecycle-center span{ margin-top:.4rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; color:var(--slate-600); text-transform:uppercase; text-align:center; max-width:80px; }
.lifecycle-label{ position:absolute; font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.05em; color:var(--ink-900); background:#fff; padding:.35rem .65rem; border-radius:999px; box-shadow:var(--shadow-sm); border:1px solid var(--line); }
.lifecycle-label.build{ top:-10px; left:50%; transform:translateX(-50%); }
.lifecycle-label.deploy{ right:-34px; top:50%; transform:translateY(-50%); }
.lifecycle-label.operate{ bottom:-10px; left:50%; transform:translateX(-50%); }
.lifecycle-label.scale{ left:-30px; top:50%; transform:translateY(-50%); }
.lifecycle.sm{ width:220px; height:220px; }
.lifecycle.sm .lifecycle-ring{ -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 39px)); mask:radial-gradient(farthest-side, transparent calc(100% - 40px), #000 calc(100% - 39px)); }

@media (max-width:900px){
  .philosophy .container{ grid-template-columns:1fr; }
  .lifecycle{ margin-top:1rem; }
}

/* ============ Results / case study teasers ============ */
.results{ background:var(--bg-white); }
.results-grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem; }
.result-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:1.85rem 1.6rem; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.result-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.result-kicker{ font-size:.78rem; font-weight:600; color:var(--slate-400); text-transform:uppercase; letter-spacing:.05em; }
.result-org{ margin-top:.4rem; font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.result-divider{ margin-block:1.1rem; border:0; border-top:1px solid var(--line); }
.result-stat{ font-family:var(--font-mono); font-weight:700; font-size:1.7rem; color:#0d8aa8; line-height:1; }
.result-stat-label{ margin-top:.5rem; font-size:.92rem; font-weight:600; color:var(--ink-900); }
.result-detail{ margin-top:.6rem; font-size:.84rem; color:var(--slate-600); line-height:1.5; }

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

/* ============ Full case study cards (Case Studies page) ============ */
.case-full-grid{ margin-top:3rem; display:flex; flex-direction:column; gap:1.75rem; }
.case-full{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); }
.case-full-head{ background:var(--navy-900); color:#fff; padding:1.75rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.case-full-head .result-kicker{ color:var(--teal-300); }
.case-full-head h3{ color:#fff; font-size:1.4rem; margin-top:.35rem; }
.case-full-stat{ text-align:right; }
.case-full-stat .result-stat{ font-size:2rem; color:var(--teal-300); }
.case-full-stat .result-stat-label{ color:var(--slate-300); font-weight:500; }
.case-full-body{ padding:2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; }
.case-col h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:#0d8aa8; font-weight:700; }
.case-col p{ margin-top:.6rem; font-size:.92rem; color:var(--slate-600); line-height:1.55; }

@media (max-width:800px){ .case-full-body{ grid-template-columns:1fr; } .case-full-head{ flex-direction:column; align-items:flex-start; } .case-full-stat{ text-align:left; } }

/* ============ Services page ============ */
.pillar-block{ padding-block:4rem; border-bottom:1px solid var(--line); }
.pillar-block:last-child{ border-bottom:0; }
.pillar-block-head{ display:flex; gap:1.4rem; align-items:flex-start; max-width:52rem; }
.pillar-block-icon{ width:56px; height:56px; border-radius:14px; background:var(--teal-100); display:flex; align-items:center; justify-content:center; flex:none; }
.pillar-block-icon svg{ width:26px; height:26px; color:#0d8aa8; }
.pillar-block-head h2{ font-size:1.7rem; }
.pillar-block-head p{ margin-top:.5rem; font-size:1.02rem; color:var(--slate-600); }
.pillar-num{ font-family:var(--font-mono); font-size:.78rem; color:var(--slate-400); letter-spacing:.06em; }

.chip-row{ margin-top:1.75rem; display:flex; flex-wrap:wrap; gap:.6rem; }
.chip{ font-size:.82rem; font-weight:600; color:var(--ink-900); background:var(--bg-light); border:1px solid var(--line); padding:.5rem .95rem; border-radius:999px; }

.service-detail-grid{ margin-top:2rem; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:1.25rem; }
.service-detail-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:1.5rem; background:#fff; transition:transform .15s ease, box-shadow .15s ease; }
.service-detail-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.service-detail-card h4{ font-size:1.02rem; }
.service-detail-card p{ margin-top:.55rem; font-size:.88rem; color:var(--slate-600); line-height:1.5; }

.feature-card{ margin-top:2rem; border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem; background:linear-gradient(165deg, var(--bg-light), #fff); display:flex; gap:2rem; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.feature-card-copy{ flex:1; min-width:240px; }
.feature-card-copy h4{ font-size:1.1rem; }
.feature-card-copy p{ margin-top:.5rem; font-size:.92rem; color:var(--slate-600); }
.feature-card .chip-row{ margin-top:0; max-width:320px; }

/* ============ About page ============ */
.about-hero-stats{ margin-top:3rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; }
.stat-box{ text-align:center; border:1px solid var(--line); border-radius:var(--radius-md); padding:1.75rem 1.25rem; background:#fff; box-shadow:var(--shadow-sm); }
.stat-box .stat-num{ font-family:var(--font-mono); font-weight:700; font-size:2rem; color:#0d8aa8; }
.stat-box .stat-label{ margin-top:.4rem; font-size:.85rem; color:var(--slate-600); font-weight:500; }

.approach .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.approach-copy p.body{ margin-top:1.1rem; font-size:1.05rem; color:var(--slate-600); line-height:1.6; }

@media (max-width:900px){ .approach .container{ grid-template-columns:1fr; } .about-hero-stats{ grid-template-columns:1fr; } }

/* ============ Contact page ============ */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:flex-start; }
.contact-info h2{ font-size:1.8rem; }
.contact-info p{ margin-top:1rem; font-size:1.02rem; color:var(--slate-600); }
.contact-trust{ margin-top:2rem; display:flex; flex-direction:column; gap:1rem; }
.contact-trust-item{ display:flex; gap:.8rem; align-items:flex-start; }
.contact-trust-item .ico{ width:34px; height:34px; border-radius:9px; background:var(--teal-100); display:flex; align-items:center; justify-content:center; flex:none; }
.contact-trust-item .ico svg{ width:17px; height:17px; color:#0d8aa8; }
.contact-trust-item strong{ display:block; font-size:.92rem; }
.contact-trust-item span{ display:block; margin-top:.15rem; font-size:.84rem; color:var(--slate-600); }
.contact-actions{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:.8rem; }

.contact-form{ background:var(--bg-light); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem; }
/* Vertical rhythm applies only between top-level blocks of the form.
   Previously .field:first-child zeroed the margin on the LEFT column of
   every .form-row while the right column kept 1.1rem, dropping the right
   field below the left. Grid gap handles spacing inside a row. */
.contact-form > .field,
.contact-form > .form-row{ margin-top:1.1rem; }
.contact-form > .field:first-child,
.contact-form > .form-row:first-child{ margin-top:0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1rem; align-items:start; }
.form-row > .field{ margin-top:0; }
.field label{ display:flex; align-items:flex-end; min-height:2.6em; font-size:.82rem; font-weight:600; color:var(--ink-900); margin-bottom:.4rem; line-height:1.3; }
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:.75rem .9rem;
  font:inherit; font-size:.92rem; color:var(--ink-900); background:#fff;
}
.field textarea{ resize:vertical; min-height:110px; }
.contact-form .btn{ margin-top:1.4rem; }
.form-note{ margin-top:.9rem; font-size:.78rem; color:var(--slate-400); text-align:center; }

@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* ============ CTA ============ */
.cta{ background:radial-gradient(800px 420px at 50% 0%, rgba(63,194,222,.16), transparent 60%), var(--navy-900); color:#fff; text-align:center; }
.cta h2{ color:#fff; font-size:clamp(1.7rem, 3vw, 2.4rem); }
.cta p{ margin-top:.9rem; color:var(--slate-300); font-size:1.05rem; }
.cta-actions{ margin-top:2rem; display:flex; justify-content:center; flex-wrap:wrap; gap:.9rem; }

/* ============ Footer ============ */
footer{ background:var(--navy-950); color:var(--slate-300); padding-block:3.5rem 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:2.5rem; }
.footer-brand .brand{ margin-bottom:.9rem; }
.footer-brand p{ font-size:.88rem; color:var(--slate-400); max-width:22rem; line-height:1.55; }
.footer-col h4{ font-family:var(--font-body); font-size:.8rem; font-weight:600; color:#fff; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ font-size:.88rem; color:var(--slate-400); transition:color .15s ease; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ margin-top:3rem; padding-top:1.75rem; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.8rem; color:var(--slate-400); }

@media (max-width:800px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-top{ grid-template-columns:1fr; } }

/* ============ Assessment page ============ */
.step-grid{ margin-top:3rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; }
.step-card{ position:relative; border:1px solid var(--line); border-radius:var(--radius-md); padding:1.75rem 1.5rem; background:#fff; box-shadow:var(--shadow-sm); }
.step-num{ font-family:var(--font-mono); font-weight:700; font-size:1.6rem; color:var(--teal-500); opacity:.55; }
.step-card h4{ margin-top:.85rem; font-size:1.05rem; }
.step-card p{ margin-top:.55rem; font-size:.88rem; color:var(--slate-600); line-height:1.5; }
.step-connector{ display:none; }
@media (min-width:901px){
  .step-card:not(:last-child)::after{
    content:""; position:absolute; top:2.2rem; right:-1.3rem; width:1rem; height:1px;
    background:var(--line);
  }
}
@media (max-width:900px){ .step-grid{ grid-template-columns:1fr; } }

.check-list{ margin-top:1.75rem; display:flex; flex-direction:column; gap:1rem; }
.check-item{ display:flex; gap:.8rem; align-items:flex-start; }
.check-item .ico{ width:28px; height:28px; border-radius:50%; background:var(--teal-100); display:flex; align-items:center; justify-content:center; flex:none; margin-top:.1rem; }
.check-item .ico svg{ width:15px; height:15px; color:#0d8aa8; }
.check-item span{ font-size:.95rem; color:var(--ink-900); font-weight:500; line-height:1.45; }

/* ============ Mega menu (Services) ============ */
.nav-item-mega{ position:relative; }
.nav-mega-toggle{
  background:none; border:0; color:var(--slate-300); font-size:.92rem; font-weight:500;
  font-family:inherit; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; padding:0;
  transition:color .15s ease;
}
.nav-mega-toggle:hover, .nav-mega-toggle[aria-expanded="true"]{ color:#fff; }
.nav-mega-toggle .chev{ width:13px; height:13px; transition:transform .15s ease; }
.nav-mega-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }

.mega-panel{
  position:absolute; top:calc(100% + 1rem); left:50%; transform:translateX(-50%) translateY(-8px);
  width:min(920px, 92vw);
  background:var(--navy-900); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:2rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:60;
}
.mega-panel.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega-panel-inner{ display:grid; grid-template-columns:repeat(3,1fr) .8fr; gap:2rem; }
.mega-col-icon{ width:34px; height:34px; border-radius:9px; background:rgba(63,194,222,.14); display:flex; align-items:center; justify-content:center; margin-bottom:.85rem; }
.mega-col-icon svg{ width:17px; height:17px; color:var(--teal-300); }
.mega-col h4{ font-size:.95rem; font-weight:600; }
.mega-col h4 a{ color:#fff; }
.mega-col h4 a:hover{ color:var(--teal-300); }
.mega-col ul{ margin-top:.85rem; display:flex; flex-direction:column; gap:.6rem; }
.mega-col ul a{ font-size:.82rem; color:var(--slate-300); }
.mega-col ul a:hover{ color:var(--teal-300); }
.mega-col-all{ border-left:1px solid rgba(255,255,255,.1); padding-left:2rem; }
.mega-col-all p{ margin-top:.7rem; font-size:.8rem; color:var(--slate-400); line-height:1.5; }
.mega-cta{ margin-top:1.1rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; font-weight:600; color:var(--teal-300); }
.mega-cta svg{ width:12px; height:12px; }

@media (max-width:1050px){
  .mega-panel{ width:94vw; }
  .mega-panel-inner{ grid-template-columns:1fr 1fr; row-gap:1.75rem; }
  .mega-col-all{ grid-column:1/-1; border-left:0; border-top:1px solid rgba(255,255,255,.1); padding-left:0; padding-top:1.5rem; }
}
@media (max-width:900px){
  .nav-item-mega{ width:100%; border-top:1px solid rgba(255,255,255,.06); }
  .nav-mega-toggle{ width:100%; padding:.9rem clamp(1.25rem,4vw,2.5rem); justify-content:space-between; }
  .mega-panel{
    position:static; transform:none; width:100%; box-shadow:none; border:0; border-radius:0;
    background:rgba(255,255,255,.04); padding:0 clamp(1.25rem,4vw,2.5rem);
    max-height:0; overflow:hidden; opacity:1; visibility:visible; pointer-events:auto;
    transition:max-height .25s ease;
  }
  /* .mega-panel.open (0,2,0) outside this query outranks .mega-panel (0,1,0)
     inside it, so transform:none above is ignored the moment .open is added
     and the panel slides half its width off-screen. Reset it at equal
     specificity, later in source order. */
  .mega-panel.open{ max-height:none; padding:0; transform:none; }
  .mega-panel-inner{ grid-template-columns:1fr; gap:0; }

  /* MOBILE MEGA MENU POLICY
     The desktop panel is ~24 links across four columns with icons and
     descriptions. That is a wall of text on a phone. On mobile we show only
     the four category links and route people to the category page, which
     already contains every sub-item as an anchored section. Two taps to
     anywhere, no scrolling inside a nested panel. */
  .mega-col-icon{ display:none; }
  .mega-col > ul{ display:none; }
  .mega-col > p{ display:none; }
  .mega-cta{ display:none; }
  .mega-col{ padding:0; }
  .mega-col h4{ margin:0; font-size:1rem; font-weight:600; }
  .mega-col h4 a{
    display:block; width:100%;
    padding:.9rem clamp(1.25rem,4vw,2.5rem) .9rem calc(clamp(1.25rem,4vw,2.5rem) + .75rem);
    border-top:1px solid rgba(255,255,255,.06);
    color:var(--slate-300);
  }
  .mega-col-all{ border-left:0; border-top:0; padding-left:0; padding-top:0; }
}

/* ============ Footer contact ============ */
.footer-contact{ margin-top:1rem; display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.footer-contact a{ font-size:.85rem; color:var(--slate-300); transition:color .15s ease; }
.footer-contact a:hover{ color:#fff; }

/* LinkedIn link.
   Sits under the phone number with extra space so it reads as its own
   element rather than a third contact line.
   44x44 touch target (WCAG 2.5.5) around a 20px glyph.
   Deliberately WHITE with opacity rather than LinkedIn blue (#0A66C2):
   Chrome for Android mis-renders SVG fills of mid-saturation blues (see
   the note on .brand-mark), and a single coloured icon would also pull
   the eye out of an otherwise monochrome footer. */
.footer-contact .footer-social{
  margin-top:.55rem; margin-left:-.6rem;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; opacity:.62;
  border-radius:8px;
  transition:opacity .15s ease, background-color .15s ease;
}
.footer-contact .footer-social svg{ width:20px; height:20px; display:block; }
.footer-contact .footer-social:hover,
.footer-contact .footer-social:focus-visible{
  opacity:1; background:rgba(255,255,255,.08); color:#fff;
}
.footer-contact .footer-social:focus-visible{
  outline:2px solid var(--teal-400); outline-offset:2px;
}

/* ============ Report / dashboard showcase ============ */
.showcase{ margin-top:3rem; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--navy-950); }
.showcase img{ width:100%; display:block; }
.showcase-caption{ padding:1.5rem 1.75rem; background:#fff; display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; border-top:1px solid var(--line); }
.showcase-caption p{ font-size:.88rem; color:var(--slate-600); max-width:38rem; }
.showcase-caption strong{ color:var(--ink-900); }

/* ============ Sub-service chip sizing inside cards ============ */
.service-detail-card .chip-row{ margin-top:1rem; gap:.4rem; }
.service-detail-card .chip{ font-size:.72rem; padding:.35rem .7rem; }
.service-detail-card .svc-icon{ width:38px; height:38px; border-radius:10px; background:var(--teal-100); display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; }
.service-detail-card .svc-icon svg{ width:18px; height:18px; color:#0d8aa8; }

/* ============ 6-up step grid variant (no connectors) ============ */
.step-grid.cols-6 .step-card::after{ display:none; }

/* ============ Enterprise trust strip ============ */
.trust-strip{ margin-top:2.5rem; display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.trust-strip span{ font-size:.8rem; font-weight:600; color:var(--slate-600); background:var(--bg-light); border:1px solid var(--line); padding:.55rem 1.1rem; border-radius:999px; }


/* ============ Accessibility ============ */
.skip-to-content{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--navy-950); color:#fff;
  padding:.75rem 1.25rem; border-radius:0 0 6px 0;
  font-weight:600; text-decoration:none;
}
.skip-to-content:focus{ left:0; outline:3px solid var(--teal-400); outline-offset:2px; }

/* Honeypot. Off-screen rather than display:none, which many bots detect
   and skip. aria-hidden + tabindex=-1 keep it away from assistive tech. */
.hp{
  position:absolute!important; left:-9999px!important;
  width:1px!important; height:1px!important;
  opacity:0!important; pointer-events:none;
}