/* ==========================================================================
   Option 1 - Stripe
   Measured from stripe.com: titles #061b31 / slate #64748d at weight 300,
   blurple #533afd, 4px radii, guide lines #e5edf5, 66px header.
   Söhne is licensed, so Hanken Grotesk stands in at the same weights.
   ========================================================================== */
:root {
  --c-member: #533afd; --c-casual: #eb6834; --c-drain: #e34948; --c-surplus: #2a78d6;
  --c-grid: #e5edf5; --c-axis: #64748d; --c-ink: #061b31; --c-surface: #fff;
  --tip-bg: #fff; --tip-shadow: 0 0 0 1px #e5edf5, 0 12px 28px -8px rgba(50, 50, 93, .28);
  --max: 1080px;
  --nav-h: 66px;
  --bg: #fff;
  --fg: #061b31;
  --muted: #64748d;
  --body: #50617a;
  --accent: #533afd;
  --accent-hover: #4434d4;
  --line: #e5edf5;
  --surface: #f6f9fc;
  --radius: 8px;
  --font-sans: "Hanken Grotesk", "SF Pro Display", -apple-system, sans-serif;
  --shadow-card: 0 30px 60px -12px rgba(50, 50, 93, .12), 0 18px 36px -18px rgba(0, 0, 0, .14);
}
body { font-size: 17px; line-height: 1.55; color: var(--body); font-weight: 400; }

/* guide lines: solid at the container edges, dashed through the middle */
.guides { position: fixed; inset: 0; pointer-events: none; z-index: 0; display: flex; justify-content: space-between; max-width: var(--max); margin: 0 auto; }
.guides i { width: 1px; height: 100%; background: var(--line); }
.guides i:nth-child(2) { background: repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 10px); }
main, .footer { position: relative; z-index: 1; }

/* --- nav --- */
.nav { background: rgba(255, 255, 255, 0); transition: background-color .2s ease, box-shadow .2s ease; }
.nav.scrolled, .nav.open { background: rgba(255, 255, 255, .9); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 var(--line); }
.brand { font-size: 22px; font-weight: 600; letter-spacing: -.03em; color: var(--fg); }
.nav-menu a { font-size: 15px; font-weight: 500; color: var(--fg); transition: opacity .15s; }
.nav-menu a:hover { opacity: .6; }

.btn { font-size: 16px; font-weight: 500; border-radius: 4px; padding: 0 20px; height: 40px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 15px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1px #d6d9fc; }
.btn-secondary:hover { box-shadow: inset 0 0 0 1px var(--accent); }

.eyebrow { font-size: 15px; font-weight: 500; color: var(--accent); margin-bottom: 16px; }

/* --- hero --- */
.hero { padding: calc(var(--nav-h) + 112px) 0 112px; overflow: hidden; }
.hero-art { position: absolute; top: 0; right: 0; width: 64%; height: 100%; pointer-events: none; }
.ribbon { position: absolute; top: -6%; right: -4%; width: 100%; height: 112%; animation: ribbon-drift 16s ease-in-out infinite alternate; transform-origin: 80% 20%; }
@keyframes ribbon-drift { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-18px, 12px, 0) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .ribbon { animation: none; } }
.hero-inner { position: relative; }
.hero-counter { font-size: 15px; font-weight: 500; color: var(--fg); margin-bottom: 32px; }
.hero-counter span { color: var(--muted); font-weight: 400; }
.hero-title { max-width: 820px; font-size: clamp(34px, 4.4vw, 54px); line-height: 1.12; font-weight: 300; letter-spacing: -.022em; color: var(--fg); }
.hero-title .t2 { color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hero-links { margin-top: 28px; }
.hero-links a { font-size: 15px; font-weight: 500; color: var(--accent); }

/* --- stats band: hairlines top and bottom, like the customer-logo strip --- */
.stats-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .85); }
.stats-band .stats { padding: 32px 0; }
.stats-band .stat { padding: 0 24px; border-left: 1px solid var(--line); }
.stats-band .stat:first-child { border-left: 0; padding-left: 0; }
.stat-value { font-size: 34px; font-weight: 300; letter-spacing: -.02em; color: var(--fg); line-height: 1.1; }
.stat-label { font-size: 15px; color: var(--muted); margin-top: 6px; line-height: 1.4; }

/* --- section heads: two-tone, weight 300 --- */
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-title { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.16; font-weight: 300; letter-spacing: -.012em; color: var(--fg); }
.section-title .t2 { color: var(--muted); }
.statement { max-width: 860px; font-size: clamp(24px, 2.9vw, 32px); line-height: 1.3; font-weight: 300; letter-spacing: -.012em; color: var(--fg); }
.statement .t2 { color: var(--muted); }
.experience, .skills, .contact { background: var(--surface); }

/* --- cards: the bordered bento tiles --- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }

/* --- experience --- */
.xp { padding: 40px; box-shadow: var(--shadow-card); }
.xp-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.xp-role { font-size: 24px; font-weight: 400; letter-spacing: -.012em; color: var(--fg); }
.xp-org { color: var(--muted); margin-top: 4px; }
.xp-dates { color: var(--muted); font-size: 15px; white-space: nowrap; }
.xp-summary { margin-top: 20px; max-width: 720px; font-size: 18px; color: var(--fg); font-weight: 300; }
.xp .stats { margin: 32px 0; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); gap: 24px; }
.xp-list { display: grid; gap: 12px; }
.xp-list li { position: relative; padding-left: 22px; }
.xp-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, #8b7bff, #ff5fae); }

/* --- case study --- */
.case { padding: 48px; box-shadow: var(--shadow-card); }
.case-title { font-size: clamp(28px, 3.2vw, 36px); font-weight: 300; letter-spacing: -.015em; line-height: 1.15; color: var(--fg); }
.case-lede { margin-top: 14px; max-width: 760px; font-size: 20px; line-height: 1.45; font-weight: 300; color: var(--muted); }
.case-meta { margin-top: 18px; font-size: 15px; color: var(--muted); }
.case-stack { color: var(--fg); font-weight: 500; }
.fig-hero { margin: 36px -48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.fig-hero img { transition: opacity .2s; }
.fig-hero a:hover img { opacity: .92; }
.fig figcaption { font-size: 14px; color: var(--muted); line-height: 1.45; margin-top: 12px; }
.fig-hero figcaption { padding: 0 48px 16px; }
.fig figcaption a { color: var(--accent); text-decoration: none; font-weight: 500; }
.case .stats { margin: 36px 0 44px; gap: 24px; }
.case-block h4, .finding h4 { font-size: 22px; font-weight: 400; letter-spacing: -.01em; color: var(--fg); margin-bottom: 10px; }
.case-block p, .finding p { font-size: 17px; }
.finding { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.finding-n { font-size: 14px; font-weight: 500; color: var(--accent); margin-bottom: 10px; }
.finding .fig img { border: 1px solid var(--line); border-radius: 6px; }
.duo-label, .duo-val { font-size: 14px; color: var(--fg); }
.duo-note { font-size: 13px; color: var(--muted); }
.reco { margin-top: 56px; padding: 32px; border-radius: 6px; background: linear-gradient(135deg, rgba(139,123,255,.08), rgba(255,95,174,.06) 60%, rgba(255,194,51,.08)); }
.callout { margin-top: 20px; padding: 20px 24px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 6px 6px 0; }
.callout-label { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.callout p:last-child { font-size: 16px; }
.case-links { margin-top: 36px; }

.mini-grid { margin-top: 24px; }
.mini-fig { background: var(--surface); border-bottom: 1px solid var(--line); padding: 24px; }
.mini-fig img { border-radius: 4px; mix-blend-mode: multiply; }
.mini-fig figcaption { font-size: 13px; }
.mini-body { padding: 28px 32px 32px; }
.mini-meta { font-size: 14px; color: var(--muted); }
.mini-title { font-size: 22px; font-weight: 400; letter-spacing: -.01em; color: var(--fg); margin-top: 6px; }
.mini-stack { font-size: 14px; color: var(--fg); font-weight: 500; margin-top: 8px; }
.mini-desc { font-size: 16px; margin-top: 14px; }
.chips { margin: 20px 0 24px; }
.chips li { font-size: 13px; font-weight: 500; color: var(--accent); background: #f2f0ff; border-radius: 4px; padding: 5px 10px; }
.text-link { font-size: 15px; font-weight: 500; color: var(--accent); }

/* --- skills --- */
.skill { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.skill-title { font-size: 20px; font-weight: 400; color: var(--fg); letter-spacing: -.01em; }
.pills { margin: 18px 0; }
.pills li { font-size: 14px; font-weight: 500; color: var(--fg); border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; background: var(--surface); }
.skill-subs { font-size: 15px; color: var(--muted); }

/* --- education --- */
.edu { border-top: 1px solid var(--line); }
.edu-item { padding: 28px 0; border-bottom: 1px solid var(--line); }
.edu-degree { font-size: 22px; font-weight: 300; letter-spacing: -.01em; color: var(--fg); }
.edu-school { color: var(--muted); margin-top: 4px; }
.edu-dates { color: var(--muted); font-size: 15px; }

/* --- contact --- */
.contact-head { max-width: 680px; }
.contact-sub { margin-top: 14px; font-size: 22px; line-height: 1.4; font-weight: 300; color: var(--muted); }
.contact-form { max-width: 680px; padding: 36px; box-shadow: var(--shadow-card); }
.field-label { font-size: 14px; font-weight: 500; color: var(--fg); }
.field input, .field textarea { padding: 12px 14px; font-size: 16px; border: 1px solid #d5dbe1; border-radius: 4px; background: #fff; color: var(--fg); transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(83, 58, 253, .15); }
.form-status { font-size: 15px; }
.form-status.success { color: #0a7d4b; }
.form-status.error { color: #c0123c; }
.form-status a { color: var(--accent); }

/* --- footer --- */
.footer { border-top: 1px solid var(--line); padding: 32px 0; font-size: 14px; color: var(--muted); background: #fff; }
.footer-links a:hover { color: var(--fg); }

@media (max-width: 899px) {
  .nav-menu { background: #fff; }
  .nav-menu a { font-size: 22px; font-weight: 400; border-bottom: 1px solid var(--line); }
  .hero-art { width: 100%; opacity: .55; }
  .ribbon { right: -38%; top: -18%; }
  .stats-band .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stats-band .stats { row-gap: 24px; }
  .case { padding: 32px 24px; }
  .fig-hero { margin: 28px -24px 0; }
  .fig-hero figcaption { padding: 0 24px 14px; }
  .xp { padding: 28px 24px; }
}
@media (max-width: 599px) {
  .hero { padding: calc(var(--nav-h) + 72px) 0 72px; }
  .hero-art { opacity: .4; }
  .guides { display: none; }
  .stat-value { font-size: 28px; }
  .contact-form { padding: 24px 20px; }
  .mini-body { padding: 24px 20px 28px; }
  .skill { padding: 24px 20px; }
}