/* =========================================================================
   GLOBOLD GROUP — DESIGN SYSTEM
   A note on the system: this is built around one recurring idea — the
   "Network Weave" — nodes and lines that stand in for capital, ideas and
   relationships moving between markets. It shows up as the hero canvas,
   as section dividers, and as the connecting line through the process
   steps. Everything else is kept quiet on purpose so that motif reads.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root{
  /* Color — core */
  --navy-950:#0A1220;   /* primary dark ground */
  --navy-900:#0D1A2E;
  --navy-800:#13233C;   /* elevated dark surface */
  --navy-700:#1B2E4A;   /* dark hairline / border */
  --ivory:#F6F4EE;      /* primary light ground */
  --ivory-dim:#EFECE3;  /* secondary light surface */
  --ink:#10141C;        /* primary text on light */
  --ink-soft:#3C4451;   /* secondary text on light */
  --slate:#6B7280;      /* tertiary text / captions */
  --line-dark:rgba(16,20,28,0.10);
  --line-light:rgba(246,244,238,0.14);

  /* Color — accent */
  --cobalt:#2E4BFF;
  --cobalt-600:#2740D9;
  --cobalt-100:#E7EBFF;
  --emerald:#12A579;
  --emerald-600:#0D8A65;
  --emerald-100:#DFF5EC;
  --amber:#C89B3C;
  --amber-600:#A9812F;
  --amber-100:#F6ECD6;

  /* Type — single family across the whole site (Manrope), used at
     different weights/sizes/letter-spacing for hierarchy instead of
     switching typefaces. --font-body and --font-mono are kept as
     aliases so every existing rule that references them still works. */
  --font-display:'Manrope', 'Segoe UI', sans-serif;
  --font-body:'Manrope', 'Segoe UI', sans-serif;
  --font-mono:'Manrope', 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.6rem, 2rem + 3.2vw, 5.4rem);
  --fs-h1: clamp(2.2rem, 1.8rem + 1.8vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.5rem + 1vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.1vw, 1.09rem);
  --fs-small: 0.9rem;
  --fs-micro: 0.78rem;
  --fs-metric: clamp(2.8rem, 2rem + 4vw, 5rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: clamp(3rem, 2.4rem + 3vw, 6rem);
  --space-xl: clamp(4.5rem, 3.6rem + 4.5vw, 9rem);
  --space-2xl: clamp(6rem, 5rem + 5vw, 11rem);

  /* Layout */
  --container: 1280px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Motion */
  --ease: cubic-bezier(.16,.84,.32,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10,18,32,0.06), 0 1px 1px rgba(10,18,32,0.04);
  --shadow-md: 0 12px 28px -12px rgba(10,18,32,0.18);
  --shadow-lg: 0 24px 60px -20px rgba(10,18,32,0.28);
}

/* -------------------------------------------------------------------------
   2. RESET / BASE
   ------------------------------------------------------------------------- */
*, *::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;
    scroll-behavior:auto !important;
  }
}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img, svg, canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input, select, textarea{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.08;
}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container-wide{
  max-width:var(--container-wide);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Visible, confident focus state everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline: 2.5px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible{ outline-color:#8FA3FF; }

.skip-link{
  position:absolute; left:1rem; top:-4rem;
  background:var(--ink); color:var(--ivory);
  padding:0.75rem 1.25rem; border-radius:var(--radius-sm);
  z-index:200; transition:top var(--dur-fast) var(--ease);
  font-family:var(--font-mono); font-size:var(--fs-small); font-weight:600;
}
.skip-link:focus{ top:1rem; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* -------------------------------------------------------------------------
   3. TYPE UTILITIES
   ------------------------------------------------------------------------- */
.eyebrow{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:var(--fs-micro);
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--cobalt);
  display:flex;
  align-items:center;
  gap:0.6em;
  margin-bottom:var(--space-sm);
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:currentColor;
  display:inline-block;
}
.on-dark .eyebrow{ color:#8FA3FF; }

.section-head{
  max-width:46rem;
  margin-bottom:var(--space-lg);
}
.section-head h2{ font-size:var(--fs-h2); color:var(--ink); }
.on-dark .section-head h2{ color:var(--ivory); }
.section-head p{
  margin-top:var(--space-sm);
  font-size:var(--fs-lead);
  color:var(--ink-soft);
  max-width:38rem;
}
.on-dark .section-head p{ color:rgba(246,244,238,0.72); }

.lede{ font-size:var(--fs-lead); color:var(--ink-soft); max-width:42rem; }

/* -------------------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding:0.95rem 1.6rem;
  border-radius:var(--radius-sm);
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.98rem;
  letter-spacing:-0.01em;
  min-height:48px;
  white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-soft),
             background var(--dur-fast) var(--ease-soft),
             color var(--dur-fast) var(--ease-soft),
             box-shadow var(--dur-fast) var(--ease-soft),
             border-color var(--dur-fast) var(--ease-soft);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform var(--dur-fast) var(--ease-soft); }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px) scale(0.99); }

.btn-primary{
  background:var(--cobalt);
  color:#fff;
  box-shadow:0 8px 20px -8px rgba(46,75,255,0.55);
}
.btn-primary:hover{ background:var(--cobalt-600); }

.btn-secondary{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--line-dark);
}
.btn-secondary:hover{ border-color:var(--ink); background:rgba(16,20,28,0.04); }

.on-dark .btn-secondary{
  color:var(--ivory);
  border-color:var(--line-light);
}
.on-dark .btn-secondary:hover{ border-color:var(--ivory); background:rgba(246,244,238,0.08); }

.btn-ghost{
  padding:0.4rem 0;
  color:var(--cobalt);
  font-family:var(--font-display);
  font-weight:700;
  border-bottom:1.5px solid transparent;
}
.btn-ghost:hover{ border-color:currentColor; }
.on-dark .btn-ghost{ color:#8FA3FF; }

.btn-block{ width:100%; justify-content:center; }

/* -------------------------------------------------------------------------
   5. NAVIGATION
   ------------------------------------------------------------------------- */
.site-header{
  position:fixed; inset-inline:0; top:0; z-index:100;
  padding-block:1.35rem;
  transition:padding var(--dur-med) var(--ease-soft),
             background var(--dur-med) var(--ease-soft),
             box-shadow var(--dur-med) var(--ease-soft),
             border-color var(--dur-med) var(--ease-soft);
  border-bottom:1px solid transparent;
}
.site-header .nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.site-header.is-scrolled{
  padding-block:0.85rem;
  background:rgba(10,18,32,0.86);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(246,244,238,0.08);
  box-shadow:0 8px 30px -16px rgba(0,0,0,0.5);
}
/* Light headers (contact page) start solid-light rather than transparent */
.site-header.header-light{
  background:rgba(246,244,238,0.92);
  border-bottom-color:var(--line-dark);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.site-header.header-light.is-scrolled{ box-shadow:var(--shadow-sm); }

.brand{
  display:flex; align-items:center; gap:0.65rem;
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  color:var(--ivory);
}
.header-light .brand{ color:var(--ink); }
.brand .mark{ width:30px; height:30px; flex:none; }
.brand .word b{ font-weight:800; }
.brand .word span{ font-weight:500; opacity:0.65; margin-left:0.35em; }

.nav-links{
  display:flex; align-items:center; gap:2.1rem;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.02em;
}
.nav-links a{
  color:rgba(246,244,238,0.78);
  position:relative;
  padding-block:0.3rem;
  transition:color var(--dur-fast) var(--ease-soft);
}
.header-light .nav-links a{ color:var(--ink-soft); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:currentColor;
  transition:right var(--dur-med) var(--ease-soft);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:#fff; }
.header-light .nav-links a:hover, .header-light .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a:hover::after{ right:0; }

.nav-right{ display:flex; align-items:center; gap:1.4rem; }
.nav-cta.btn-primary{ padding:0.75rem 1.35rem; font-size:0.88rem; min-height:auto; }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  border-radius:var(--radius-sm);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:var(--ivory);
  transition:transform var(--dur-fast) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
  position:relative;
}
.header-light .nav-toggle span, .header-light .nav-toggle span::before, .header-light .nav-toggle span::after{
  background:var(--ink);
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); background:var(--ivory); }
.nav-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); background:var(--ivory); }

.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:var(--navy-950);
  display:flex; flex-direction:column;
  padding:6.5rem var(--gutter) var(--space-lg);
  transform:translateY(-100%);
  transition:transform var(--dur-med) var(--ease);
  overflow-y:auto;
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu nav{ display:flex; flex-direction:column; gap:0.2rem; }
.mobile-menu a{
  font-family:var(--font-display);
  font-weight:700;
  font-size:2rem;
  color:var(--ivory);
  padding-block:0.55rem;
  border-bottom:1px solid rgba(246,244,238,0.1);
}
.mobile-menu .mobile-cta{ margin-top:var(--space-md); }
.mobile-menu .mobile-meta{
  margin-top:auto; padding-top:var(--space-md);
  font-family:var(--font-mono); font-size:var(--fs-small); font-weight:500;
  color:rgba(246,244,238,0.55);
  display:flex; flex-direction:column; gap:0.4rem;
}

@media (max-width:920px){
  .nav-links, .nav-right .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
}

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero{
  position:relative;
  background:var(--navy-950);
  color:var(--ivory);
  padding-top:calc(7rem + var(--space-xl));
  padding-bottom:var(--space-xl);
  overflow:hidden;
  isolation:isolate;
}
.hero-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:0;
  opacity:0.85;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 55% at 78% 18%, rgba(46,75,255,0.22), transparent 70%),
             linear-gradient(180deg, rgba(10,18,32,0) 55%, var(--navy-950) 100%);
  pointer-events:none;
  z-index:1;
}
.hero-inner{ position:relative; z-index:2; }
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-lg);
}
.hero-headline{
  font-size:var(--fs-hero);
  max-width:16ch;
}
.hero-headline .line{ display:block; overflow:hidden; }
.hero-headline .line span{ display:block; }

.hero-sub{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.1rem,1rem + 0.6vw, 1.5rem);
  color:#B9C6FF;
  margin-top:var(--space-sm);
  max-width:32ch;
}
.hero-body{
  margin-top:var(--space-sm);
  font-size:var(--fs-lead);
  color:rgba(246,244,238,0.72);
  max-width:38rem;
}
.hero-actions{
  margin-top:var(--space-md);
  display:flex; flex-wrap:wrap; gap:1rem;
}

.capability-rail{
  margin-top:var(--space-xl);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:rgba(246,244,238,0.12);
  border:1px solid rgba(246,244,238,0.12);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.capability-card{
  background:rgba(13,26,46,0.72);
  padding:var(--space-sm);
  transition:background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.capability-card:hover{ background:rgba(46,75,255,0.16); }
.capability-card .cap-label{
  font-family:var(--font-mono); font-weight:600; font-size:var(--fs-micro);
  color:#8FA3FF; letter-spacing:0.08em; text-transform:uppercase;
}
.capability-card h3{
  margin-top:0.65rem;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ivory);
}
.capability-card p{
  margin-top:0.4rem;
  font-size:0.87rem;
  color:rgba(246,244,238,0.6);
  line-height:1.5;
}

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

/* -------------------------------------------------------------------------
   7. SECTIONS — general
   ------------------------------------------------------------------------- */
.section{ padding-block:var(--space-2xl); position:relative; }
.section-tight{ padding-block:var(--space-xl); }
.on-dark{ background:var(--navy-950); color:var(--ivory); }
.on-alt{ background:var(--ivory-dim); }

.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 900ms var(--ease), transform 900ms var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }

.reveal-stagger > *{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }

/* -------------------------------------------------------------------------
   8. SERVICES — editorial index
   ------------------------------------------------------------------------- */
.service-list{ border-top:1px solid var(--line-dark); }
.service-row{
  display:grid;
  grid-template-columns:5rem 1fr 1.4fr auto;
  align-items:center;
  gap:var(--space-md);
  padding-block:var(--space-md);
  border-bottom:1px solid var(--line-dark);
  transition:background var(--dur-fast) var(--ease-soft);
}
.service-row:hover, .service-row:focus-within{ background:rgba(46,75,255,0.045); }
.service-index{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.95rem;
  color:var(--slate);
}
.service-row:hover .service-index{ color:var(--cobalt); }
.service-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.15rem, 1.05rem + 0.6vw, 1.65rem);
  letter-spacing:-0.01em;
}
.service-desc{ color:var(--ink-soft); font-size:0.98rem; max-width:32rem; }
.service-arrow{
  width:38px; height:38px; border-radius:50%;
  border:1.5px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
  flex:none;
}
.service-row:hover .service-arrow{ background:var(--cobalt); border-color:var(--cobalt); transform:rotate(45deg); }
.service-row:hover .service-arrow svg{ color:#fff; }
.service-arrow svg{ width:15px; height:15px; color:var(--ink); transition:color var(--dur-fast); }

@media (max-width:760px){
  .service-row{ grid-template-columns:3rem 1fr auto; }
  .service-desc{ grid-column:1 / -1; margin-top:-0.5rem; }
}

/* -------------------------------------------------------------------------
   9. WHY GLOBOLD — cards
   ------------------------------------------------------------------------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
}
.why-card{
  background:var(--ivory);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  padding:var(--space-sm);
  transition:transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft), border-color var(--dur-med) var(--ease-soft);
}
.why-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.why-icon{
  width:46px; height:46px;
  border-radius:var(--radius-sm);
  background:var(--cobalt-100);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:var(--space-sm);
}
.why-icon svg{ width:24px; height:24px; color:var(--cobalt-600); }
.why-card:nth-child(2) .why-icon{ background:var(--emerald-100); }
.why-card:nth-child(2) .why-icon svg{ color:var(--emerald-600); }
.why-card:nth-child(3) .why-icon{ background:var(--amber-100); }
.why-card:nth-child(3) .why-icon svg{ color:var(--amber-600); }
.why-card:nth-child(4) .why-icon{ background:var(--cobalt-100); }
.why-card:nth-child(4) .why-icon svg{ color:var(--cobalt-600); }
.why-card h3{ font-size:1.1rem; margin-bottom:0.55rem; }
.why-card p{ color:var(--ink-soft); font-size:0.93rem; line-height:1.55; }

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

/* -------------------------------------------------------------------------
   10. INDUSTRIES
   ------------------------------------------------------------------------- */
.industry-grid{
  display:flex; flex-wrap:wrap; gap:0.75rem;
}
.industry-chip{
  display:flex; align-items:center; gap:0.6rem;
  padding:0.85rem 1.15rem;
  border:1px solid var(--line-light);
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.95rem;
  color:var(--ivory);
  transition:border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.industry-chip .dot{
  width:6px; height:6px; border-radius:50%; background:var(--emerald); flex:none;
}
.industry-chip:hover{ border-color:var(--emerald); background:rgba(18,165,121,0.12); transform:translateY(-2px); }

/* -------------------------------------------------------------------------
   11. PROCESS
   ------------------------------------------------------------------------- */
.process-track{ position:relative; }
.process-line-bg, .process-line-fill{
  position:absolute; left:0; right:0; top:34px; height:2px;
  background:var(--line-dark);
}
.process-line-fill{ background:var(--emerald); width:0%; transition:width 200ms linear; }
.on-dark .process-line-bg{ background:var(--line-light); }

.process-steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.5rem;
  position:relative;
}
.process-step{ position:relative; padding-top:var(--space-md); }
.process-node{
  position:absolute; top:26px; left:0;
  width:16px; height:16px; border-radius:50%;
  background:var(--ivory); border:2.5px solid var(--line-dark);
  transition:border-color var(--dur-med), background var(--dur-med);
}
.on-dark .process-node{ background:var(--navy-950); border-color:var(--line-light); }
.process-step.is-active .process-node{ border-color:var(--emerald); background:var(--emerald); }
.process-index{
  font-family:var(--font-mono); font-weight:600; font-size:var(--fs-micro);
  color:var(--slate); letter-spacing:0.08em;
}
.on-dark .process-index{ color:rgba(246,244,238,0.5); }
.process-step h3{ margin-top:0.6rem; font-size:1.15rem; }
.process-step p{ margin-top:0.5rem; font-size:0.9rem; color:var(--ink-soft); }
.on-dark .process-step p{ color:rgba(246,244,238,0.65); }

@media (max-width:900px){
  .process-line-bg, .process-line-fill{ display:none; }
  .process-steps{ grid-template-columns:1fr; gap:0; }
  .process-step{
    padding-left:2.2rem; padding-top:0; padding-bottom:var(--space-md);
    border-left:2px solid var(--line-dark);
    margin-left:7px;
  }
  .on-dark .process-step{ border-color:var(--line-light); }
  .process-step:last-child{ border-color:transparent; padding-bottom:0; }
  .process-node{ top:2px; left:-9px; }
}

/* -------------------------------------------------------------------------
   12. IMPACT / METRICS
   ------------------------------------------------------------------------- */
.metric-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-md);
}
.metric{ border-top:1px solid var(--line-dark); padding-top:var(--space-sm); }
.metric .num{
  font-family:var(--font-display);
  font-weight:800;
  font-size:var(--fs-metric);
  letter-spacing:-0.03em;
  color:var(--ink);
  display:flex; align-items:baseline; gap:0.15em;
}
.metric .num .suffix{ font-size:0.45em; color:var(--emerald-600); }
.metric .label{ margin-top:0.6rem; font-size:0.92rem; color:var(--ink-soft); }
.metric-footnote{
  margin-top:var(--space-md);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--fs-micro);
  color:var(--slate);
  display:flex; align-items:center; gap:0.5em;
}
.metric-footnote svg{ width:14px; height:14px; color:var(--slate); flex:none; }

@media (max-width:900px){ .metric-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .metric-grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   13. INSIGHTS
   ------------------------------------------------------------------------- */
.insight-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.insight-card{
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--ivory);
  transition:transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft);
}
.insight-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.insight-art{
  height:9.5rem;
  position:relative;
  background:var(--navy-950);
  overflow:hidden;
}
.insight-art svg{ position:absolute; inset:0; width:100%; height:100%; }
.insight-body{ padding:var(--space-sm); }
.insight-cat{
  font-family:var(--font-mono); font-weight:600; font-size:var(--fs-micro);
  text-transform:uppercase; letter-spacing:0.08em; color:var(--emerald-600);
}
.insight-body h3{ margin-top:0.6rem; font-size:1.12rem; line-height:1.3; }
.insight-body p{ margin-top:0.55rem; font-size:0.9rem; color:var(--ink-soft); }
.insight-meta{
  margin-top:var(--space-sm);
  display:flex; gap:1rem;
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-micro);
  color:var(--slate);
}

@media (max-width:980px){ .insight-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .insight-grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   14. FINAL CTA
   ------------------------------------------------------------------------- */
.final-cta{
  position:relative;
  background:var(--navy-950);
  color:var(--ivory);
  border-radius:var(--radius-lg);
  padding:var(--space-xl) var(--gutter);
  overflow:hidden;
  text-align:center;
  isolation:isolate;
}
.final-cta canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.55; z-index:0; }
.final-cta::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(60% 70% at 50% 0%, rgba(46,75,255,0.28), transparent 70%);
  z-index:1;
}
.final-cta-inner{ position:relative; z-index:2; max-width:42rem; margin-inline:auto; }
.final-cta .eyebrow{ justify-content:center; }
.final-cta h2{ font-size:var(--fs-h1); }
.final-cta p{ margin-top:var(--space-sm); color:rgba(246,244,238,0.72); font-size:var(--fs-lead); }
.final-cta-actions{ margin-top:var(--space-md); display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; }

/* -------------------------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------------------------- */
.site-footer{
  background:var(--navy-950);
  color:rgba(246,244,238,0.75);
  padding-top:var(--space-xl);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:var(--space-md);
  padding-bottom:var(--space-lg);
  border-bottom:1px solid var(--line-light);
}
.footer-brand .brand{ margin-bottom:1rem; }
.footer-tagline{ font-family:var(--font-mono); font-weight:600; font-size:var(--fs-small); color:#8FA3FF; }
.footer-desc{ margin-top:1rem; max-width:26rem; font-size:0.92rem; line-height:1.6; }
.footer-col h4{
  font-family:var(--font-mono); font-size:var(--fs-micro);
  letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(246,244,238,0.45); margin-bottom:1rem; font-weight:600;
}
.footer-col ul{ display:flex; flex-direction:column; gap:0.7rem; font-size:0.92rem; }
.footer-col a{ transition:color var(--dur-fast); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  padding-block:var(--space-sm);
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-micro);
  color:rgba(246,244,238,0.45);
}
.footer-legal{ display:flex; gap:1.5rem; }
.footer-legal a:hover{ color:#fff; }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------------
   16. FORM (contact page)
   ------------------------------------------------------------------------- */
.form-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:var(--space-xl);
  align-items:start;
}
.field{ margin-bottom:1.4rem; }
.field label{
  display:block;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:var(--fs-micro);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:0.55rem;
}
.field .req{ color:var(--cobalt); }
.field input, .field select, .field textarea{
  width:100%;
  padding:0.9rem 1rem;
  min-height:52px;
  background:#fff;
  border:1.5px solid var(--line-dark);
  border-radius:var(--radius-sm);
  font-size:1rem;
  color:var(--ink);
  transition:border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-soft);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:#9AA3B2; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--cobalt);
  box-shadow:0 0 0 4px var(--cobalt-100);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field-hint{ margin-top:0.4rem; font-size:0.82rem; color:var(--slate); }
.field-error{
  margin-top:0.4rem; font-size:0.82rem; color:#B4231F;
  display:none; align-items:center; gap:0.4em;
}
.field.has-error input, .field.has-error select, .field.has-error textarea{
  border-color:#B4231F;
}
.field.has-error .field-error{ display:flex; }

.consent{
  display:flex; gap:0.7rem; align-items:flex-start;
  font-size:0.85rem; color:var(--ink-soft);
  margin-bottom:1.6rem;
}
.consent input{ margin-top:0.25rem; width:18px; height:18px; accent-color:var(--cobalt); flex:none; }

.form-status{
  margin-top:1.25rem;
  padding:1rem 1.15rem;
  border-radius:var(--radius-sm);
  font-size:0.92rem;
  display:none;
  align-items:flex-start;
  gap:0.6rem;
}
.form-status.is-success{ display:flex; background:var(--emerald-100); color:#0D5D45; }
.form-status.is-error{ display:flex; background:#FBE7E6; color:#7A1815; }
.form-status svg{ width:18px; height:18px; flex:none; margin-top:0.1rem; }

.btn[data-loading="true"]{ pointer-events:none; opacity:0.75; }
.btn .spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.4); border-top-color:#fff;
  display:none; animation:spin 700ms linear infinite;
}
.btn[data-loading="true"] .spinner{ display:inline-block; }
.btn[data-loading="true"] .btn-label-idle{ display:none; }
@keyframes spin{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
  .form-grid{ grid-template-columns:1fr; gap:var(--space-lg); }
  .field-row{ grid-template-columns:1fr; }
}

/* Contact hero (lighter, no canvas) */
.page-hero{
  background:var(--navy-950);
  color:var(--ivory);
  padding-top:calc(7rem + var(--space-lg));
  padding-bottom:var(--space-lg);
  position:relative;
  overflow:hidden;
}
.page-hero canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:0.6; }
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,18,32,0) 40%, var(--navy-950) 100%);
}
.page-hero-inner{ position:relative; z-index:2; max-width:38rem; }
.page-hero h1{ font-size:var(--fs-h1); }
.page-hero p{ margin-top:var(--space-sm); color:rgba(246,244,238,0.72); font-size:var(--fs-lead); }
.page-hero .support{ margin-top:0.9rem; font-size:0.98rem; color:rgba(246,244,238,0.58); max-width:34rem; }

/* Contact details + locations */
.contact-panel{
  background:var(--ivory);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  padding:var(--space-md);
}
.contact-panel h3{ font-size:1.2rem; margin-bottom:1.1rem; }
.contact-line{
  display:flex; align-items:center; gap:0.8rem;
  padding-block:0.8rem;
  border-top:1px solid var(--line-dark);
  font-size:0.98rem;
}
.contact-line:first-of-type{ border-top:0; }
.contact-line svg{ width:18px; height:18px; color:var(--cobalt); flex:none; }
.contact-panel .btn{ margin-top:1.3rem; }

.location-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;
  margin-top:var(--space-md);
}
.location-card{
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  padding:var(--space-sm);
  position:relative;
  overflow:hidden;
}
.location-card .tag{
  font-family:var(--font-mono); font-weight:600; font-size:var(--fs-micro);
  color:var(--emerald-600); text-transform:uppercase; letter-spacing:0.08em;
}
.location-card h3{ margin-top:0.7rem; font-size:1.25rem; }
.location-card p{ margin-top:0.4rem; color:var(--ink-soft); font-size:0.92rem; }
.location-card .glyph{ position:absolute; right:-18px; bottom:-18px; opacity:0.06; width:110px; height:110px; }

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

/* -------------------------------------------------------------------------
   17. MISC helpers
   ------------------------------------------------------------------------- */
.divider-weave{ height:64px; position:relative; overflow:hidden; }
.divider-weave svg{ width:100%; height:100%; }
.text-center{ text-align:center; }
.mt-lg{ margin-top:var(--space-lg); }
.flex-end{ display:flex; justify-content:flex-end; }