/* =========================================================
   DESIGN TOKENS
   Primary: #212D77 (deep indigo) — the only accent this system uses.
   Everything else is white, paper, or grayscale, per brand system.
   Display: Space Grotesk — geometric, confident, a little architectural.
   Body: Inter — quiet, highly legible, gets out of the way.
   ========================================================= */

:root{
  --primary: #212D77;
  --primary-ink: #3A48A6;   /* hover / lighter interactive state */
  --primary-soft: #EAEBF7;  /* tints, chips, subtle fills */

  --ink: #14172A;           /* body text on light */
  --ink-soft: #565A72;      /* secondary text on light */
  --paper: #FAFAF9;         /* page background */
  --paper-raised: #FFFFFF;  /* cards */
  --paper-2: #F1F1F5;       /* alternate section background */
  --line: #E4E4EC;          /* hairlines, borders */

  --white: #FFFFFF;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --ease: cubic-bezier(.16,.8,.24,1);
  --dur: 0.5s;

  --shadow-sm: 0 1px 2px rgba(20,23,42,0.06);
  --shadow-md: 0 8px 30px rgba(20,23,42,0.08);
  --shadow-lg: 0 24px 60px rgba(20,23,42,0.14);

  color-scheme: light;
}

html[data-theme="dark"]{
  --primary: #7C86D8;
  --primary-ink: #98A1E8;
  --primary-soft: #1D2044;

  --ink: #EDEEF7;
  --ink-soft: #A6A9C6;
  --paper: #0E0F1F;
  --paper-raised: #161831;
  --paper-2: #14152B;
  --line: #2A2C4C;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.5);

  color-scheme: dark;
}

*,*::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(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
h1{ font-size: clamp(2.6rem, 5.2vw, 4.6rem); }
h2{ font-size: clamp(2rem, 3.4vw, 3rem); }
h3{ font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
h4{ font-size: 1.05rem; letter-spacing: -0.005em; }

p{ margin:0; color: var(--ink-soft); }
.lede{ font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--ink-soft); line-height: 1.6; }

::selection{ background: var(--primary); color: var(--white); }

:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- layout ---------- */
.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (max-width: 640px){ .wrap{ padding: 0 var(--space-4); } }

.section{ padding: var(--space-9) 0; }
@media (max-width: 780px){ .section{ padding: var(--space-8) 0; } }
.section-alt{ background: var(--paper-2); }

.eyebrow{
  display:inline-flex; align-items:center; gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: var(--space-4);
}
.eyebrow::before{
  content:"";
  width: 18px; height: 1.5px;
  background: var(--primary);
  display:inline-block;
}

.section-head{ max-width: 640px; margin-bottom: var(--space-7); }
.section-head.wide{ max-width: 780px; }

/* ---------- grid ---------- */
.grid{ display:grid; gap: var(--space-5); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .grid-3{ grid-template-columns: repeat(2,1fr);} .grid-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--primary); color: var(--white); }
.btn-primary:hover{ background: var(--primary-ink); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--primary); color: var(--primary); }
.btn-sm{ padding: 10px 18px; font-size: 0.85rem; }

/* ---------- cards ---------- */
.card{
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }

.tag{
  display:inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
}

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 18px var(--space-5); max-width: 1180px; margin:0 auto; }
.logo{ font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; display:flex; align-items:center; gap:8px; }
.logo-dot{ width:8px; height:8px; border-radius:50%; background: var(--primary); }
.nav-links{ display:flex; gap: var(--space-6); align-items:center; }
.nav-links a{ font-size: 0.92rem; color: var(--ink-soft); transition: color .2s; }
.nav-links a:hover{ color: var(--primary); }
.nav-actions{ display:flex; align-items:center; gap: var(--space-3); }
.theme-toggle{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background: var(--paper-raised);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color: var(--ink);
}
.nav-burger{
  display:none; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background: var(--paper-raised);
  align-items:center; justify-content:center; cursor:pointer; color: var(--ink);
}
@media (max-width: 860px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    flex-direction:column; align-items:flex-start; gap: var(--space-4);
    padding: var(--space-5);
  }
  .nav-links.nav-open{ display:flex; }
  .nav-burger{ display:flex; }
}

/* ---------- hero ---------- */
.hero{ padding: var(--space-9) 0 var(--space-8); position:relative; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-8); align-items:end; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }
.hero h1{ margin-bottom: var(--space-5); }
.hero-actions{ display:flex; gap: var(--space-3); flex-wrap:wrap; margin-top: var(--space-6); }
.hero-proof{ margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.92rem; }

.thread{ position:absolute; inset:0; pointer-events:none; z-index:-1; opacity:0.5; }
html[data-theme="dark"] .thread{ opacity:0.35; }

/* ---------- process ---------- */
.process-row{ display:flex; flex-direction:column; }
.process-item{
  display:grid; grid-template-columns: 90px 1fr; gap: var(--space-5);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
}
.process-item:last-child{ border-bottom: 1px solid var(--line); }
.process-num{ font-family: var(--font-display); font-size: 1.6rem; color: var(--line); font-weight: 600; }
html[data-theme="dark"] .process-num{ color: var(--primary-soft); }

/* ---------- skills ---------- */
.skill-row{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); padding: var(--space-4) 0; border-top:1px solid var(--line); }
.skill-row:last-child{ border-bottom: 1px solid var(--line); }
.skill-name{ font-weight: 600; font-family: var(--font-display); }
.skill-level{ font-size: 0.82rem; color: var(--ink-soft); min-width: 96px; text-align:right; }
.meter{ flex:1; height:6px; background: var(--paper-2); border-radius: var(--radius-pill); overflow:hidden; margin: 0 var(--space-4); }
.meter-fill{ height:100%; background: var(--primary); border-radius: var(--radius-pill); }

/* ---------- footer ---------- */
footer{ border-top: 1px solid var(--line); padding: var(--space-7) 0 var(--space-6); }
.footer-inner{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap: var(--space-6); }
.footer-links{ display:flex; gap: var(--space-5); flex-wrap:wrap; }
.footer-links a{ color: var(--ink-soft); font-size: 0.9rem; }
.footer-links a:hover{ color: var(--primary); }
.footer-bottom{ margin-top: var(--space-7); padding-top: var(--space-5); border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap: var(--space-3); font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ---------- utility ---------- */
.mt-1{ margin-top: var(--space-6); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }
.small{ font-size: 0.86rem; }
.muted{ color: var(--ink-soft); }
.stat{ }
.stat-num{ font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight:700; color: var(--primary); }
.stat-label{ font-size: 0.85rem; color: var(--ink-soft); margin-top: 4px; }

/* ---------- case study specific ---------- */
.cs-hero{ padding: var(--space-8) 0 var(--space-7); border-bottom: 1px solid var(--line); }
.cs-meta{ display:flex; gap: var(--space-7); flex-wrap:wrap; margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.cs-meta-item .k{ font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-soft); margin-bottom:4px; }
.cs-meta-item .v{ font-family: var(--font-display); font-weight:600; }
.cs-section{ padding: var(--space-8) 0; border-top: 1px solid var(--line); }
.cs-section .num{ font-family: var(--font-display); color: var(--primary); font-size: 0.85rem; font-weight:700; letter-spacing:0.05em; margin-bottom: var(--space-3); display:block; }
.cs-two{ display:grid; grid-template-columns: 300px 1fr; gap: var(--space-7); }
@media (max-width: 780px){ .cs-two{ grid-template-columns: 1fr; } }
.persona-card{ background:var(--paper-2); border-radius: var(--radius-lg); padding: var(--space-6); }
.color-swatch{ height:64px; border-radius: var(--radius-md); border:1px solid var(--line); margin-bottom:8px; }
.next-project{ display:block; padding: var(--space-8) 0; }
.next-project .label{ color: var(--ink-soft); font-size:0.85rem; margin-bottom: var(--space-3); }
.next-project h3{ font-size: clamp(1.8rem,3vw,2.6rem); }

@media (max-width: 640px){
  .cs-meta{ gap: var(--space-5); }
  .footer-inner{ flex-direction: column; }
}