/* ============================================================
   EIGENSPACE CONSULTING — design system
   Brand: purple #972F97 ("eigen") + ink/black ("space") on paper.
   Motifs: { } set-braces (tagline "{Solutions Found Here}")
           → vector-arrow (eigenvector accent over the "e")
   Layout DNA: bold editorial structure (full-bleed hero, service grid,
               alternating sections, big contact block, footer).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- TOKENS ---------- */
:root{
  /* brand */
  --purple:        #972F97;
  --purple-deep:   #6E216E;
  --purple-bright: #B843B8;
  --purple-tint:   #F4EAF4;
  --purple-tint-2: #EADCEA;

  --ink:    #141414;
  --ink-2:  #1C1C1C;
  --black:  #000000;
  --white:  #FFFFFF;
  --paper:  #FBFAFB;
  --paper-2:#F4F1F4;

  --grey-1: #5F5F5F;
  --grey-2: #8C868C;
  --grey-3: #CFC9CF;
  --line:   #E7E2E7;
  --line-strong: #141414;

  /* fonts */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Hanken Grotesk', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* semantic surface roles (overridden per-theme/section) */
  --bg:        var(--paper);
  --bg-elev:   var(--white);
  --fg:        var(--ink);
  --fg-soft:   var(--grey-1);
  --hairline:  var(--line);
  --accent:    var(--purple);
  --accent-fg: var(--white);
  --brace:     var(--purple);

  /* rhythm */
  --maxw: 1280px;
  --pad-x: clamp(20px, 5vw, 64px);
  --sec-y: clamp(72px, 9vw, 128px);
  --radius: 6px;
  --radius-lg: 14px;
  --stroke: 1.5px;

  --vec-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 16'%3E%3Cpath d='M2 8 H31 M24 2.5 L31.5 8 L24 13.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===== THEME: editorial light (default) ===== */
[data-theme="light"]{
  --bg: var(--paper); --bg-2: var(--paper-2);
}
/* ===== THEME: ink bold — dark hero & dark alternating bands ===== */
[data-theme="ink"]{
  --bg: var(--paper); --bg-2: var(--paper-2);
}
/* ===== THEME: purple forward — purple dominant blocks ===== */
[data-theme="purple"]{
  --bg: var(--paper); --bg-2: var(--paper-2);
}

/* surface helpers — applied per <section> via class, react to theme */
.surface-paper { --fg: var(--ink); --fg-soft: var(--grey-1); --hairline: var(--line); --brace: var(--purple); background: var(--bg); color: var(--fg); }
.surface-paper-2 { --fg: var(--ink); --fg-soft: var(--grey-1); --hairline: var(--line); --brace: var(--purple); background: var(--bg-2); color: var(--fg); }
.surface-ink { --fg: #F2EEF2; --fg-soft: #B7AEB7; --hairline: rgba(255,255,255,.14); --brace: var(--purple-bright); background: var(--ink); color: var(--fg); }
.surface-purple { --fg: #FFFFFF; --fg-soft: rgba(255,255,255,.78); --hairline: rgba(255,255,255,.22); --brace: #FFFFFF; background: var(--purple); color: var(--fg); }

/* theme remaps: 'ink' pushes more dark bands; 'purple' pushes more purple bands.
   We use [data-theme] + section role classes to swap surfaces. */
[data-theme="ink"] .role-hero { --fg:#F2EEF2; --fg-soft:#B7AEB7; --hairline:rgba(255,255,255,.14); --brace:var(--purple-bright); background:var(--ink); color:var(--fg); }
[data-theme="purple"] .role-hero { --fg:#fff; --fg-soft:rgba(255,255,255,.8); --hairline:rgba(255,255,255,.22); --brace:#fff; background:var(--purple); color:var(--fg); }
[data-theme="light"] .role-hero { --fg:var(--ink); --fg-soft:var(--grey-1); --hairline:var(--line); --brace:var(--purple); background:var(--paper); color:var(--fg); }

[data-theme="ink"] .role-cta { --fg:#F2EEF2; --fg-soft:#B7AEB7; --hairline:rgba(255,255,255,.14); --brace:var(--purple-bright); background:var(--ink); color:var(--fg); }
[data-theme="purple"] .role-cta { --fg:#fff; --fg-soft:rgba(255,255,255,.8); --hairline:rgba(255,255,255,.22); --brace:#fff; background:var(--purple); color:var(--fg); }
[data-theme="light"] .role-cta { --fg:var(--ink); --fg-soft:var(--grey-1); --hairline:var(--line); --brace:var(--purple); background:var(--ink); color:#F2EEF2; --fg:#F2EEF2; --fg-soft:#B7AEB7; --hairline:rgba(255,255,255,.14); --brace:var(--purple-bright); }

/* ---------- RESET / BASE ---------- */
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.55;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;}
::selection{background:var(--purple);color:#fff;}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad-x); width:100%; }

/* ---------- TYPE ---------- */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; margin:0; letter-spacing:-0.02em; line-height:1.04; text-wrap:balance; }
.h1{ font-size:clamp(40px, 6.6vw, 88px); font-weight:600; letter-spacing:-0.035em; }
.h2{ font-size:clamp(32px, 4.6vw, 60px); letter-spacing:-0.03em; }
.h3{ font-size:clamp(24px, 2.8vw, 38px); letter-spacing:-0.025em; }
.lead{ font-size:clamp(18px, 1.5vw, 22px); line-height:1.55; color:var(--fg-soft); max-width:60ch; text-wrap:pretty; }
p{margin:0 0 1em;}
.body-lg{ font-size:20px; line-height:1.6; }

/* kicker / eyebrow — mono, the "code/math" voice */
.kicker{
  font-family:var(--mono); font-size:13px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--brace);
  display:inline-flex; align-items:center; gap:.55em;
}
.kicker::before{ content:"{"; color:var(--brace); font-weight:600; }
.kicker::after{ content:"}"; color:var(--brace); font-weight:600; }
.kicker.plain::before,.kicker.plain::after{content:none;}

/* brace wrapper for headline phrases */
.braced{ position:relative; color:inherit; white-space:nowrap; }
.braced::before{ content:"{ "; color:var(--brace); font-family:var(--display); font-weight:500; }
.braced::after{ content:" }"; color:var(--brace); font-family:var(--display); font-weight:500; }
[data-motif="subtle"] .braced::before,
[data-motif="subtle"] .braced::after{ content:none; }

/* ---------- WORDMARK (CSS recreation, theme-adaptive) ---------- */
.wordmark{
  font-family:var(--body); font-weight:700; letter-spacing:-0.03em;
  font-size:30px; line-height:1; display:inline-flex; align-items:baseline;
  color:var(--fg); user-select:none; white-space:nowrap;
}
.wordmark .eg{ color:var(--purple); position:relative; }
.wordmark .vec-acc{ position:absolute; left:0.05em; top:-0.30em; width:0.60em; height:auto;
  color:var(--purple); pointer-events:none; overflow:visible; }
.wordmark .sp{ color:var(--fg); }
.surface-ink .wordmark .sp, .surface-purple .wordmark .sp{ color:#fff; }
.surface-purple .wordmark .eg, .surface-purple .wordmark .vec-acc{ color:#fff; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--body); font-weight:600; font-size:15px;
  letter-spacing:0.04em; text-transform:uppercase;
  padding:15px 26px; border-radius:var(--radius);
  border:var(--stroke) solid currentColor; background:transparent; color:var(--fg);
  transition:transform .08s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
  cursor:pointer; white-space:nowrap;
}
.btn .arr{ width:1.05em; height:1.05em; transition:transform .2s ease; }
.btn:hover .arr{ transform:translateX(4px); }
.btn:active{ transform:scale(.975); }

.btn-primary{
  background:var(--purple); color:#fff; border-color:var(--purple);
}
.btn-primary:hover{ background:var(--purple-deep); border-color:var(--purple-deep); }
.btn-ghost:hover{ background:var(--fg); color:var(--bg); }
.surface-ink .btn-ghost:hover{ background:#fff; color:var(--ink); }
.surface-purple .btn-ghost{ border-color:#fff; }
.surface-purple .btn-ghost:hover{ background:#fff; color:var(--purple); }
.surface-purple .btn-primary{ background:#fff; color:var(--purple); border-color:#fff; }
.surface-purple .btn-primary:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- LINK W/ ARROW ---------- */
.txtlink{ display:inline-flex; align-items:center; gap:.45em; font-weight:600;
  border-bottom:2px solid transparent; transition:border-color .18s ease, gap .18s ease; }
.txtlink .arr{ width:1em; height:1em; transition:transform .2s ease; }
.txtlink:hover{ border-color:currentColor; }
.txtlink:hover .arr{ transform:translateX(3px); }

/* ---------- SECTION SCAFFOLD ---------- */
section{ position:relative; }
.sec{ padding-block:var(--sec-y); }
.sec-head{ display:flex; flex-direction:column; gap:18px; max-width:760px; }

/* index-numbered eyebrow like a coordinate */
.coord{ font-family:var(--mono); font-size:13px; color:var(--fg-soft); letter-spacing:.04em; }

/* ---------- blueprint grid texture ---------- */
.blueprint{
  position:absolute; inset:0; pointer-events:none; opacity:.5; z-index:0;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* ---------- duotone image treatment ---------- */
.media{ position:relative; overflow:hidden; background:var(--ink); border-radius:var(--radius-lg); }
.media img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.05) brightness(.92); }
.media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(155deg, color-mix(in srgb, var(--purple) 50%, transparent), color-mix(in srgb, var(--ink) 38%, transparent));
  mix-blend-mode:multiply; }
[data-duotone="off"] .media img{ filter:none; }
[data-duotone="off"] .media::after{ opacity:0; }
.media .frame-coord{ position:absolute; z-index:2; bottom:14px; left:16px; font-family:var(--mono);
  font-size:12px; letter-spacing:.08em; color:#fff; opacity:.85; }
.media .frame-coord::before{ content:"{ "; }
.media .frame-coord::after{ content:" }"; }

/* ---------- utility ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.divider{ height:var(--stroke); background:var(--line-strong); width:100%; }
.blueprint ~ .wrap{ position:relative; z-index:1; }
.surface-ink .divider,.surface-purple .divider{ background:var(--hairline); }