/* ===========================================================
   GTM VELOCITY — Homepage + Work theme
   Applies the GTM Velocity design system (obsidian / kinetic
   blue / motion blue / soft pink / arctic grey, Space Grotesk +
   Plus Jakarta Sans) on top of the shared styles.css.

   Color roles (per brand guide): Deep Obsidian = ground/base.
   Soft Pink is the site's SECONDARY (dominant accent) color —
   primary buttons, active states, key numbers. Motion Blue is
   TERTIARY (supporting) — icons, decorative lines, secondary
   accents. This is a deliberate site-wide UI choice; the logo
   mark itself keeps its own fixed blue/blue/pink palette
   regardless (never recolor the mark).
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root{
  /* ---- design-system source tokens ---- */
  --obsidian:#0F0F0F;
  --obsidian-soft:#1B1D21;
  --kinetic-blue:#ADD8E6;
  --kinetic-blue-deep:#79B8E6;    /* "Motion Blue" per logo guide */
  --kinetic-blue-tint:#E8F3F8;
  --growth-pink:#FFB6C1;
  --growth-pink-deep:#F893A3;
  --growth-pink-tint:#FFEEF1;
  --arctic-grey:#EAEFF2;
  --grey-300:#C7CDD3;
  --grey-500:#8A9099;
  --grey-700:#4A4F57;
  --grey-900:#16181B;
  --text-on-dark:#FAFBFC;
  --text-on-dark-muted:rgba(250,251,252,.64);

  /* ---- remap existing site tokens onto the new system ---- */
  --navy:var(--grey-900);            /* primary ink / headings */
  --navy-deep:var(--obsidian);       /* dark section / nav / footer bg */
  --navy-deep2:var(--obsidian-soft); /* dark card / panel bg */
  --blue:var(--kinetic-blue-deep);   /* TERTIARY — light-section accent (icons, lines — not body text) */
  --cyan:var(--growth-pink);         /* SECONDARY — dark-section dominant accent (buttons, actives, key numbers) */
  --bg:var(--arctic-grey);
  --panel:#FFFFFF;
  --panel-tint:var(--kinetic-blue-tint);
  --line:var(--grey-300);
  --line-dark:rgba(255,255,255,.12);
  --ink:var(--grey-900);
  --mid:var(--grey-700);
  --light:var(--grey-500);
  --radius:16px;
}

body{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;}
h1,h2,h3,h4{font-family:'Space Grotesk','Plus Jakarta Sans',sans-serif;}

/* ---------- Eyebrows: muted grey on light, kinetic blue on dark (per Card.jsx) ---------- */
.eyebrow{color:var(--light);}
.dark .eyebrow{color:var(--cyan);}

/* ---------- Buttons: pill radius, accent-blue primary, opacity-based hover ---------- */
.btn{border-radius:999px;border-color:var(--navy);transition:opacity .18s ease,transform .15s ease;}
.btn:hover{opacity:.85;transform:none;}
.btn.primary{background:var(--navy);color:var(--text-on-dark);}
.dark .btn.primary,.navbar .btn.primary{background:var(--cyan);border-color:var(--cyan);color:var(--navy-deep);}
.dark .btn.ghost{border-color:var(--line-dark);color:var(--text-on-dark);}

/* ---------- Navbar: always-dark obsidian, per NavBar.jsx ---------- */
.navbar{background:var(--navy-deep);backdrop-filter:none;border-bottom:1px solid var(--line-dark);}
.logo-word{color:var(--text-on-dark);}
.navlinks{color:var(--text-on-dark-muted);}
.navlinks a:hover,.navlinks a.on{color:var(--text-on-dark);border-bottom-color:var(--cyan);}
.navburger span{background:var(--text-on-dark);}
.navmobile{background:var(--navy-deep2);border-bottom:1px solid var(--line-dark);}
.navmobile a{color:var(--text-on-dark-muted);border-bottom:1px solid var(--line-dark);}

/* ---------- Cards: soft radius, and light-section links stay dark text (not pastel-on-white) ---------- */
.card{border-radius:24px;}
.card-link{color:var(--navy);}
.card-link:hover{opacity:.7;}
.dark .card-link{color:var(--text-on-dark);}

/* ---------- Tags / badges — follow Tag.jsx (outline chip) + Badge.jsx (tinted, hand-tuned text) ---------- */
.tag{border-radius:999px;}
.tag.solid{background:var(--bg);color:var(--navy);border:1.5px solid var(--navy);}
.tag.on-dark{background:var(--navy-deep2);color:var(--cyan);}
.tag.badge-blue{background:var(--kinetic-blue-tint);color:#1E5A73;border:none;}
.tag.badge-pink{background:var(--growth-pink-tint);color:#9A3E4C;border:none;}

/* ---------- Hero KPI strip -> individual StatCard-style boxes ---------- */
.kpis{border-top:none;margin-top:40px;flex-wrap:wrap;gap:16px;}
.kpi{
  flex:1 1 160px;border:1px solid var(--line-dark);border-radius:24px;
  background:var(--navy-deep2);padding:22px 24px;
}
.dark .kpi{border-color:var(--line-dark);}
.kpi:first-child{padding-left:24px;}

/* Case-study stat list (work.html) stays a simple divided list, not a StatCard box */
.case-media .kpi{
  background:none;border:none;border-radius:0;
  border-top:1px solid var(--line);padding:22px 0 0;
}
.case-media .kpi:first-child{padding-left:0;}
.case-media .kpi .n{color:var(--navy);}

/* ---------- Card icon: decorative accent (non-text, contrast-exempt) ---------- */
.card-icon{border-color:var(--blue);}
.card-icon:after{background:var(--blue);}

.hero-grid-texture{background-image:radial-gradient(circle,rgba(173,216,230,.35) 1px,transparent 1px);}
.hero-blob.b1{background:radial-gradient(circle,var(--kinetic-blue-deep) 0%,transparent 72%);opacity:.22;}
.hero-blob.b2{background:radial-gradient(circle,var(--growth-pink-deep) 0%,transparent 72%);opacity:.16;}

/* ---------- Depth-section corner blobs ---------- */
.depth-blob.db1{background:radial-gradient(circle,var(--kinetic-blue) 0%,transparent 70%);opacity:.35;}
.depth-blob.db2{background:radial-gradient(circle,var(--kinetic-blue-deep) 0%,transparent 70%);opacity:.2;}

/* ---------- Growth thread + rail + block field: blue/pink trendline pairing ---------- */
.growth-thread path,.rail-path{stroke:var(--blue);}
.thread-dot{background:rgba(138,144,153,.35);border:1.5px solid rgba(138,144,153,.5);}
.thread-dot.on{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 7px rgba(127,190,218,.22);}
.rail-node{stroke:var(--blue);}
.rail-node.solid{fill:var(--blue);filter:drop-shadow(0 4px 10px rgba(127,190,218,.4));}
.rail-node.solid.pink{fill:var(--growth-pink-deep);filter:drop-shadow(0 4px 10px rgba(248,147,163,.4));}
.bf-sq{stroke:var(--blue);}
.bf-sq.solid{fill:var(--blue);filter:drop-shadow(0 6px 16px rgba(127,190,218,.4));}
.bf-sq.solid.pink{fill:var(--growth-pink-deep);filter:drop-shadow(0 6px 16px rgba(248,147,163,.4));}

/* ---------- Eyebrow accent mark ---------- */
.eyebrow-mark{background:var(--blue);}
.dark .eyebrow-mark{background:var(--cyan);}

/* ---------- Footer ---------- */
footer{background:var(--navy-deep);color:var(--text-on-dark-muted);}
footer b{color:var(--text-on-dark);}
footer a{color:var(--text-on-dark-muted);}
footer a:hover{color:var(--cyan);}
.foot-bottom{border-top-color:var(--line-dark);color:rgba(250,251,252,.4);}