/* ============ Fonts ============ */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* Plus Jakarta Sans italic loaded via Google Fonts link */

/* ============ Tokens: dark blue, white, black ============ */
:root {
  --pad: clamp(20px, 4vw, 72px);
  --bar: 68px;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --italic: "Plus Jakarta Sans", "Inter Tight", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --blue: #1a3b9f;
  --blue-deep: #122c7c;
  --navy: var(--blue);
  --night: #07090f;
  --ink: #06070c;
  --white: #ffffff;
  --soft: #eef1f9;
  --sky: #a9c0ff;
  --ink-2: #2a3042;
  --mute: #59627a;
  --line: rgba(6, 7, 12, 0.14);
  --line-w: rgba(255, 255, 255, 0.22);
  --good: #0b1f66;
  --bg: #ffffff;
  --accent: var(--navy);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: clamp(16px, 1.1vw, 18px); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .blue :focus-visible, .menu :focus-visible, .bar :focus-visible { outline-color: #fff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; transition: top 0.2s; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - var(--pad) * 2, 1440px); margin-inline: auto; }
.sec { padding-block: clamp(72px, 10vw, 150px); overflow-x: clip; }

/* dark surfaces */
.dark { background: var(--night); color: #fff; }
.blue { background: var(--blue); color: #fff; }
.dark em, .blue em { color: var(--sky); }
.dark .lead, .dark .sec-note, .blue .lead { color: rgba(255, 255, 255, 0.72); }

/* hairline column grid (kept for non-home pages) */
.gridlines { position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: calc((100% - var(--pad) * 2) / 6) 100%; background-position: var(--pad) 0; }

/* micro labels */
.micro { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* split text */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 0.03em 0.16em; margin-bottom: -0.16em; }
.c { display: inline-block; will-change: transform; }

/* ============ Curtain, loader, progress ============ */
.curtain { position: fixed; inset: 0; z-index: 900; display: flex; pointer-events: none; }
.curtain i { flex: 1; background: var(--blue); will-change: transform; margin-right: -1px; }
.curtain i:nth-child(even) { background: var(--blue-deep); }
.curtain__label { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 9vw, 150px); letter-spacing: -0.05em; line-height: 1; opacity: 0; text-transform: uppercase; }
.loader { position: fixed; inset: 0; z-index: 950; background: var(--blue); color: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: var(--pad); }
.loader__name { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.loader__count { font-family: var(--display); font-weight: 800; font-size: clamp(88px, 22vw, 360px); line-height: 0.8; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.loader__count i { font-style: normal; font-size: 0.3em; margin-left: 0.05em; opacity: 0.5; }
.loader__words { position: absolute; left: var(--pad); right: var(--pad); top: 40%; transform: translateY(-50%); height: 1.1em; font-family: var(--display); font-weight: 800; font-size: clamp(48px, 11vw, 190px); letter-spacing: -0.055em; line-height: 1; overflow: hidden; }
.loader__words span { position: absolute; left: 0; top: 0.05em; white-space: nowrap; }
.loader__bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255, 255, 255, 0.15); }
.loader__bar span { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }

.progress { position: fixed; left: 0; top: 0; right: 0; height: 2px; z-index: 300; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--sky); transform: scaleX(0); transform-origin: left; }

/* ============ Bar and menu ============ */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--bar); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 0 var(--pad); background: transparent; color: #fff; border-bottom: 1px solid transparent; transition: transform 0.5s var(--ease), background-color 0.4s, border-color 0.4s; }
.bar.is-solid { background: rgba(7, 9, 15, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--line-w); }
.bar.is-hidden { transform: translateY(-101%); }
.bar__logo { position: relative; justify-self: start; display: block; overflow: hidden; height: 1.3em; line-height: 1.3; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -0.03em; white-space: nowrap; }
.bar__logo span { display: block; transition: transform 0.6s var(--ease); }
.bar__logo:hover span, .bar__logo:focus-visible span { transform: translateY(-100%); }
.bar__logo span + span { font-family: var(--italic); font-style: italic; font-weight: 500; letter-spacing: 0; color: var(--sky); }
.bar__cta, .bar__menu { grid-column: 3; justify-self: end; }
.bar__links { display: flex; gap: clamp(16px, 2.2vw, 36px); font-weight: 500; font-size: 15px; }
.bar__links a { position: relative; padding: 6px 0; opacity: 0.78; transition: opacity 0.3s; }
.bar__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #fff; transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease); }
.bar__links a:hover, .bar__links a[aria-current="page"] { opacity: 1; }
.bar__links a:hover::after, .bar__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.bar__cta { display: inline-flex; background: #fff; color: var(--blue); border-radius: 999px; padding: 10px 22px; font-weight: 600; font-size: 14px; transition: background-color 0.3s, color 0.3s; }
.bar__cta:hover { background: var(--sky); }
.bar__menu { display: none; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.bar__burger { display: grid; gap: 6px; width: 26px; }
.bar__burger i { display: block; height: 2px; background: currentColor; transition: transform 0.5s var(--ease); }
.bar__menu[aria-expanded="true"] .bar__burger i:first-child { transform: translateY(4px) rotate(45deg); }
.bar__menu[aria-expanded="true"] .bar__burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (max-width: 999.98px) { .bar__links, .bar__cta { display: none; } .bar__menu { display: inline-flex; } }

.menu { position: fixed; inset: 0; z-index: 150; background: var(--navy); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--bar) + 36px) var(--pad) var(--pad); clip-path: inset(0 0 100% 0); visibility: hidden; }
.menu__links { display: grid; gap: 2px; }
.menu__links a { overflow: hidden; display: block; }
.menu__links span { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 12vw, 96px); letter-spacing: -0.045em; line-height: 1.05; text-transform: uppercase; }
.menu__foot { opacity: 0.75; }

/* ============ Buttons ============ */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; border-radius: 999px; padding: 15px 28px; font-weight: 600; font-size: 15px; isolation: isolate; transition: color 0.4s var(--ease); will-change: transform; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transition: transform 0.6s var(--ease), border-radius 0.6s var(--ease); }
.btn:hover::before { transform: translateY(0); border-radius: 0; }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy::before { background: var(--ink); }
.btn--light { background: #fff; color: var(--blue); }
.btn--light::before { background: var(--navy); }
.btn--light:hover { color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink::before { background: var(--navy); }
.btn--line { border: 1.5px solid currentColor; }
.btn--line::before { background: #fff; }
.btn--line:hover { color: var(--blue); }
.btn--line-navy { border: 1.5px solid var(--navy); color: var(--navy); }
.btn--line-navy::before { background: var(--navy); }
.btn--line-navy:hover { color: #fff; }
.light-line { color: var(--ink); }
.light-line::before { background: var(--ink); }
.light-line:hover { color: #fff; }

/* ============ Hero ============ */
.hero { position: relative; min-height: 100svh; padding: var(--bar) var(--pad) clamp(18px, 2.2vw, 34px); display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(170deg, var(--blue) 0%, var(--blue) 50%, #2d4fb5 70%, #5a7ad4 88%, #95b0ec 100%); }
.hero > *:not(.hero__orbs):not(.hero__grid):not(.hero__floats):not(.sticker) { position: relative; z-index: 2; }
/* interactive grid background */
.hero__grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__grid canvas { width: 100%; height: 100%; }
/* cursor-reactive orbs */
.hero__orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.25; will-change: transform; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.hero__orb--a { width: 45vw; height: 45vw; background: radial-gradient(circle, rgba(120,160,255,0.7) 0%, transparent 65%); top: 5%; left: 10%; }
.hero__orb--b { width: 35vw; height: 35vw; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 65%); top: 45%; right: 5%; }
.hero__orb--c { width: 30vw; height: 30vw; background: radial-gradient(circle, rgba(80,120,255,0.6) 0%, transparent 65%); bottom: 0%; left: 35%; }
/* floating data badges */
.hero__floats { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__float { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 6px 12px; backdrop-filter: blur(2px); white-space: nowrap; }
.hero__float--a { top: 18%; right: 12%; animation: float-a 6s ease-in-out infinite; }
.hero__float--b { top: 38%; left: 6%; animation: float-b 7s ease-in-out infinite; }
.hero__float--c { bottom: 22%; right: 28%; animation: float-c 8s ease-in-out infinite; }
.hero__float--d { top: 55%; right: 6%; animation: float-d 5.5s ease-in-out infinite; }
.hero__float--e { bottom: 35%; left: 18%; animation: float-e 6.5s ease-in-out infinite; }
@keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes float-b { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(8px) rotate(1deg); } }
@keyframes float-c { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes float-d { 0%,100% { transform: translateY(0) rotate(0.5deg); } 50% { transform: translateY(10px) rotate(-0.5deg); } }
@keyframes float-e { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero__micro { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-block: 1px solid var(--line-w); color: rgba(255, 255, 255, 0.9); }
.hero__status { display: inline-flex; align-items: center; gap: 10px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 2s infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
.hero__title { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.5vh; padding-block: clamp(8px, 2vh, 24px); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.045em; line-height: 0.84; color: #fff; user-select: none; }
.hero__ln { display: block; white-space: nowrap; overflow: hidden; padding: 0.07em 0.02em 0.03em; font-size: 14vw; }
.hero__ln--b { align-self: flex-end; }
.ch { display: inline-block; will-change: transform; color: rgb(255 255 255 / calc(1 - var(--k, 0))); -webkit-text-stroke: 0.014em #fff; paint-order: stroke fill; }
.ch--amp { font-family: var(--italic); font-style: italic; font-weight: 300; text-transform: none; color: rgb(169 192 255 / calc(1 - var(--k, 0))); -webkit-text-stroke-color: var(--sky); margin-right: 0.12em; }
.hero__bottom { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--line-w); }
.hero__lede { font-family: var(--italic); font-style: italic; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.4; max-width: 34ch; color: #fff; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero__scroll { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; opacity: 0.85; }
.hero__scroll i { display: block; width: 56px; height: 1px; background: #fff; transform-origin: left; animation: scrollline 2.4s var(--ease) infinite; }
@keyframes scrollline { 0% { transform: scaleX(0); } 55% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@media (max-width: 899.98px) {
  .hero__bottom { flex-direction: column; align-items: flex-start; }
  .hero__scroll { display: none; }
  .hero__micro span:last-child { display: none; }
}
.rot { display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.4em; min-width: 6ch; color: var(--sky); }
.rot span { display: inline-block; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.rot span.out { transform: translateY(-110%); opacity: 0; }
.rot span.pre { transform: translateY(110%); opacity: 0; transition: none; }

/* ============ Marquee ============ */
.marquee { background: var(--night); color: #fff; overflow: hidden; padding: clamp(14px, 1.8vw, 24px) 0; white-space: nowrap; }
.marquee__track { display: inline-flex; align-items: center; will-change: transform; }
.marquee__track span { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.6vw, 76px); letter-spacing: -0.04em; line-height: 1; text-transform: uppercase; }
.marquee__track .sep { font-weight: 300; color: var(--sky); margin: 0 clamp(18px, 2.6vw, 44px); }

/* ============ Shared headings ============ */
.h2 { font-family: var(--display); font-weight: 800; font-size: clamp(38px, 6.4vw, 108px); letter-spacing: -0.055em; line-height: 0.92; text-transform: uppercase; }
em { font-family: var(--italic); font-style: italic; font-weight: 500; letter-spacing: -0.035em; text-transform: none; }
.h2 em, .red { color: var(--navy); }
.lead { font-family: var(--italic); font-style: italic; color: var(--mute); max-width: 52ch; font-size: clamp(17px, 1.4vw, 22px); }

/* statement */
.statement { padding-block: clamp(80px, 12vw, 190px); }
.statement__text { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 5.2vw, 90px); letter-spacing: -0.045em; line-height: 1.02; max-width: 21ch; }
.statement__text .sw { color: #c5cadb; transition: color 0.35s var(--ease); }
.statement__text .sw.is-on { color: var(--ink); }
.statement__text b .sw.is-on { color: var(--navy); }
.statement__text b { font-weight: inherit; }

/* practices as a ruled grid */
.practices { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); margin-top: clamp(40px, 5vw, 72px); }
.practice { padding: clamp(24px, 3vw, 48px) clamp(0px, 2vw, 32px) clamp(24px, 3vw, 48px) 0; }
.practice + .practice { border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 48px); }
.practice h3 { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 6vw, 100px); letter-spacing: -0.058em; line-height: 0.92; text-transform: uppercase; margin-bottom: 20px; }
.practice h3 span { color: var(--navy); }
.practice p { color: var(--mute); max-width: 44ch; margin-bottom: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: 14px; font-weight: 500; background: #fff; }
.chips--red li { border-color: transparent; background: var(--navy); color: #fff; }
.dark .chips li { background: transparent; border-color: var(--line-w); color: #fff; }
.dark .chips--red li { background: #fff; border-color: #fff; color: var(--night); }
@media (max-width: 799.98px) { .practices { grid-template-columns: 1fr; } .practice + .practice { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; } }

/* stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-w); }
.stats li { padding: 28px clamp(12px, 2vw, 32px) 8px 0; }
.stats li + li { border-left: 1px solid var(--line-w); padding-left: clamp(12px, 2vw, 32px); }
.stats b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(44px, 6vw, 112px); letter-spacing: -0.055em; line-height: 0.9; color: #fff; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 14px; color: rgba(255, 255, 255, 0.75); max-width: 20ch; font-size: 15px; line-height: 1.35; }
@media (max-width: 899.98px) { .stats { grid-template-columns: 1fr 1fr; } .stats li:nth-child(3) { border-left: 0; padding-left: 0; } .stats li:nth-child(n+3) { border-top: 1px solid var(--line-w); margin-top: 24px; } }

/* ============ Selected work: cards that stack as you scroll ============ */
.stack { background: #fff; padding-block: clamp(64px, 8vw, 120px) clamp(48px, 6vw, 90px); }
.stack__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3vw, 56px); }
.stack__list { width: min(100% - var(--pad) * 2, 1440px); margin-inline: auto; display: grid; gap: clamp(14px, 2vw, 28px); }
.scard { position: sticky; top: calc(var(--bar) + 16px + var(--i, 0) * 14px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 3vw, 56px); align-items: center; min-height: min(76svh, 720px); padding: clamp(22px, 3vw, 48px); border-radius: clamp(18px, 2vw, 32px); transform-origin: center top; overflow: hidden; }
.scard--0 { background: var(--navy); color: #fff; }
.scard--1 { background: var(--night); color: #fff; }
.scard--2 { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.scard--0 em, .scard--1 em { color: var(--sky); }
.scard__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; align-self: stretch; min-width: 0; }
.scard__no { font-family: var(--display); font-weight: 800; font-size: clamp(56px, 8vw, 150px); letter-spacing: -0.07em; line-height: 0.8; font-variant-numeric: tabular-nums; }
.scard__no small { font-size: 0.28em; letter-spacing: -0.02em; opacity: 0.55; margin-left: 0.2em; }
.scard__title { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.3vw, 58px); letter-spacing: -0.05em; line-height: 0.98; text-transform: uppercase; }
.scard__short { margin-top: 14px; font-family: var(--italic); font-style: italic; font-size: clamp(17px, 1.4vw, 23px); line-height: 1.35; opacity: 0.85; max-width: 30ch; }
.scard__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.scard__tools { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.72; }
.scard__go { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid currentColor; border-radius: 999px; padding: 11px 20px; font-weight: 600; font-size: 14px; transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.scard:hover .scard__go { background: #fff; color: var(--night); }
.scard--2:hover .scard__go { background: var(--ink); color: #fff; }
.scard__img { aspect-ratio: 16 / 9; border-radius: clamp(10px, 1.2vw, 18px); overflow: hidden; background: #fff; }
.scard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.scard:hover .scard__img img { transform: scale(1.035); }
@media (max-width: 899.98px) {
  .scard { position: relative; top: auto; grid-template-columns: 1fr; min-height: 0; }
  .scard__img { order: -1; }
  .scard__no { font-size: 56px; }
}

/* cta band */
.cta { position: relative; overflow: hidden; background: var(--blue); color: #fff; }
.cta > .wrap { position: relative; z-index: 1; }
.cta .h2 { font-size: clamp(48px, 10vw, 190px); margin-bottom: clamp(28px, 3vw, 48px); max-width: 11ch; }
.cta .h2 em { color: var(--sky); }

/* ============ Page head (inner pages) ============ */
.pagehead { position: relative; background: var(--blue); color: #fff; padding: calc(var(--bar) + clamp(56px, 9vw, 140px)) var(--pad) clamp(44px, 6vw, 96px); overflow: hidden; }
.pagehead > *:not(.gridlines) { position: relative; z-index: 1; }
.pagehead__crumb { display: inline-block; margin-bottom: 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; transition: opacity 0.3s; }
.pagehead__crumb:hover { opacity: 1; }
.pagehead__title { font-family: var(--display); font-weight: 800; font-size: clamp(46px, 11vw, 200px); letter-spacing: -0.06em; line-height: 0.88; text-transform: uppercase; max-width: 14ch; }
.pagehead__title em { color: var(--sky); }
.pagehead__sub { margin-top: clamp(20px, 2.4vw, 36px); max-width: 52ch; font-family: var(--italic); font-style: italic; font-size: clamp(18px, 1.7vw, 27px); line-height: 1.35; color: rgba(255, 255, 255, 0.85); }
.pagehead__meta { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.tag { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; background: var(--navy); color: #fff; }
.pagehead .tag { background: transparent; border: 1px solid var(--line-w); }
.tag--wip::before, .tag--done::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.tag--wip::before { animation: pulse 2s infinite; background: var(--sky); }
.tag--solid { background: var(--navy); color: #fff; }
.tag--soft { background: var(--soft); color: var(--navy); }

/* ============ Projects list ============ */
.plist { border-top: 1px solid var(--ink); }
.prow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; padding: clamp(24px, 3vw, 44px) clamp(8px, 1vw, 20px); border-bottom: 1px solid var(--line); overflow: hidden; isolation: isolate; transition: color 0.45s var(--ease); }
.prow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleY(0); transform-origin: bottom; transition: transform 0.7s var(--ease); }
.prow:hover, .prow:focus-visible { color: #fff; }
.prow:hover::before, .prow:focus-visible::before { transform: scaleY(1); }
.prow__no { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; opacity: 0.6; font-variant-numeric: tabular-nums; }
.prow__title { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.8vw, 64px); letter-spacing: -0.05em; line-height: 0.98; text-transform: uppercase; }
.prow__meta { display: grid; gap: 8px; justify-items: start; color: var(--mute); transition: color 0.45s; }
.prow:hover .prow__meta { color: rgba(255, 255, 255, 0.85); }
.prow:hover .tag--soft { background: #fff; }
.prow__arrow { font-family: var(--display); font-size: 40px; font-weight: 700; line-height: 1; transition: transform 0.5s var(--ease); }
.prow:hover .prow__arrow { transform: translate(6px, -6px); }
.prow__thumb { display: none; }
@media (max-width: 899.98px) {
  .prow { grid-template-columns: auto 1fr auto; }
  .prow__meta { grid-column: 1 / -1; grid-row: 2; }
  .prow__thumb { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--soft); }
  .prow__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

/* ============ Project page ============ */
.shot { background: #fff; border: 1px solid var(--line); border-radius: clamp(12px, 1.6vw, 24px); overflow: hidden; box-shadow: 0 40px 90px -50px rgba(5, 12, 42, 0.5); }
.shot img { width: 100%; height: auto; }
.shot--tall { max-width: 860px; margin-inline: auto; }
.shot figcaption { padding: 12px 20px; font-size: 13px; color: var(--mute); background: var(--soft); border-top: 1px solid var(--line); }
.shot--second { max-width: 1100px; margin: clamp(32px, 4vw, 64px) auto 0; }
.pmetrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 80px); border-top: 1px solid var(--ink); }
.pmetrics li { padding: 24px clamp(12px, 2vw, 32px) 8px 0; }
.pmetrics li + li { border-left: 1px solid var(--line); padding-left: clamp(12px, 2vw, 32px); }
.pmetrics b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 92px); letter-spacing: -0.055em; line-height: 0.92; color: var(--navy); }
.pmetrics span { display: block; margin-top: 10px; max-width: 24ch; }
.pcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 72px); margin-top: clamp(48px, 6vw, 96px); }
.pcols h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.4vw, 40px); letter-spacing: -0.045em; text-transform: uppercase; margin-bottom: 16px; padding-top: 18px; border-top: 1px solid var(--ink); }
.pcols p { color: var(--ink-2); }
.pnote { margin-top: clamp(40px, 5vw, 72px); background: var(--soft); border-radius: 20px; padding: clamp(24px, 3vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 40px; }
.pnote h3 { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2vw, 30px); letter-spacing: -0.035em; color: var(--navy); }
.ptools { margin-top: clamp(32px, 4vw, 56px); }
.next { display: block; background: var(--navy); color: #fff; padding: clamp(56px, 8vw, 120px) var(--pad); position: relative; overflow: hidden; isolation: isolate; transition: color 0.6s var(--ease); }
.next::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform 0.8s var(--ease); }
.next:hover::before { transform: translateY(0); }
.next small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-bottom: 18px; }
.next strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 7.4vw, 130px); letter-spacing: -0.058em; line-height: 0.92; max-width: 16ch; text-transform: uppercase; }
@media (max-width: 899.98px) { .pcols, .pmetrics { grid-template-columns: 1fr; } .pmetrics li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); } .pnote { grid-template-columns: 1fr; } }

.pcols p + p { margin-top: 12px; }
.pcols li { position: relative; padding-left: 20px; color: var(--ink-2); }
.pcols li + li { margin-top: 12px; }
.pcols li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 2px; background: var(--navy); }
.pchips { margin-top: clamp(28px, 3vw, 44px); }
.sec-note { margin-top: clamp(28px, 3vw, 48px); color: var(--mute); max-width: 70ch; font-size: 15px; }
.lede-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3vw, 48px); }
.btnrow { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 40px); }

/* ============ About ============ */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 7vw, 130px); align-items: start; }
.about__photo { position: sticky; top: calc(var(--bar) + 32px); background: var(--blue); border-radius: clamp(14px, 1.6vw, 24px); overflow: hidden; aspect-ratio: 4 / 5; display: grid; place-items: end center; }
.about__photo img { width: 94%; height: auto; filter: grayscale(1) contrast(1.06); transition: filter 0.7s var(--ease), transform 0.9s var(--ease); }
.about__photo:hover img, .about__photo:focus-within img { filter: none; transform: translateY(-6px); }
@media (hover: none) { .about__photo img { filter: none; } }
.about__copy .about__pull { color: var(--ink); max-width: 26ch; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 2.9vw, 50px); letter-spacing: -0.045em; line-height: 1.02; margin-bottom: clamp(28px, 3vw, 48px); }
.about__pull .w { overflow: hidden; }
.about__copy p { color: var(--ink-2); margin-bottom: 20px; max-width: 58ch; font-size: clamp(17px, 1.3vw, 20px); }
.about__copy p b { color: var(--ink); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; margin-top: clamp(32px, 4vw, 56px); padding-top: 28px; border-top: 1px solid var(--ink); }
.facts dt { color: var(--navy); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }
.facts dd { font-weight: 500; font-size: clamp(16px, 1.25vw, 20px); }
@media (max-width: 899.98px) { .about { grid-template-columns: 1fr; } .about__photo { position: relative; top: auto; max-width: 420px; } .facts { grid-template-columns: 1fr; } }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(32px, 4vw, 56px); }
.skills h3 { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2vw, 32px); letter-spacing: -0.04em; text-transform: uppercase; margin-bottom: 16px; }
@media (max-width: 899.98px) { .skills { grid-template-columns: 1fr; } }

/* ============ Experience ============ */
.jobs { border-top: 1px solid var(--ink); }
.job { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 16px clamp(24px, 5vw, 96px); padding: clamp(32px, 4vw, 64px) 0; border-bottom: 1px solid var(--line); }
.job__when { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.job__place { color: var(--mute); margin-top: 6px; }
.job h3 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 3.6vw, 58px); letter-spacing: -0.052em; line-height: 0.98; text-transform: uppercase; }
.job__org { font-weight: 600; margin-top: 10px; }
.job__ctx { margin: 18px 0; max-width: 56ch; font-size: clamp(19px, 1.6vw, 26px); line-height: 1.3; font-family: var(--italic); font-style: italic; font-weight: 500; letter-spacing: -0.01em; }
.job__pts { display: grid; gap: 12px; max-width: 64ch; margin-bottom: 22px; }
.job__pts li { position: relative; padding-left: 26px; color: var(--ink-2); }
.job__pts li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 12px; height: 2px; background: var(--navy); }
.job__pts b { color: var(--ink); }
@media (max-width: 899.98px) { .job { grid-template-columns: 1fr; } }
.exp-group__h { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; font-size: clamp(16px, 1.5vw, 22px); color: var(--navy); margin: clamp(44px, 5vw, 76px) 0 14px; }
.exp-group__h:first-child { margin-top: 0; }

/* ============ Education and certifications ============ */
.edu { border-top: 1px solid var(--line-w); }
.edu__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 12px clamp(24px, 5vw, 96px); padding: clamp(28px, 3.4vw, 52px) 0; border-bottom: 1px solid var(--line-w); }
.edu__row h3 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3.2vw, 52px); letter-spacing: -0.05em; line-height: 1; text-transform: uppercase; }
.edu__row p { color: rgba(255, 255, 255, 0.78); max-width: 60ch; margin-top: 10px; }
.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); margin-top: clamp(32px, 4vw, 56px); }
.cert { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(24px, 2.6vw, 40px); display: flex; flex-direction: column; gap: 14px; transition: transform 0.6s var(--ease), background-color 0.5s var(--ease), color 0.5s; }
.cert:hover { transform: translateY(-6px); background: var(--navy); color: #fff; }
.cert__type { color: var(--navy); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.4s; }
.cert h3 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -0.045em; line-height: 1; text-transform: uppercase; }
.cert__by { color: var(--mute); font-size: 15px; margin-top: -6px; transition: color 0.4s; }
.cert p { color: var(--ink-2); transition: color 0.4s; }
.cert:hover .cert__type, .cert:hover .cert__by, .cert:hover p { color: rgba(255, 255, 255, 0.85); }
.cert:hover .chips li { background: transparent; border-color: var(--line-w); color: #fff; }
@media (max-width: 799.98px) { .certs { grid-template-columns: 1fr; } .edu__row { grid-template-columns: 1fr; } }

/* ============ Tools ============ */
.tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--soft); border-radius: 999px; margin-bottom: clamp(24px, 3vw, 44px); }
.tab { padding: 11px 24px; border-radius: 999px; font-weight: 600; transition: background-color 0.4s var(--ease), color 0.4s; }
.tab.is-active { background: var(--navy); color: #fff; }
.tool { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 64px); background: #fff; border: 1px solid var(--line); border-radius: clamp(16px, 2vw, 28px); padding: clamp(22px, 3.4vw, 56px); }
.tool.is-active { display: grid; }
.tool__inputs { display: grid; gap: 26px; align-content: start; }
.field { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.field span { font-weight: 500; color: var(--mute); }
.field output { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -0.04em; }
.field input { grid-column: 1 / -1; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--navy) var(--p, 50%), #dde2f0 var(--p, 50%)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: #dde2f0; }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--navy); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #fff; border: 5px solid var(--navy); box-shadow: 0 4px 14px rgba(11, 31, 102, 0.35); transition: transform 0.3s var(--ease); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 5px solid var(--navy); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); }
.tool__out { display: grid; gap: 22px; align-content: start; min-width: 0; }
.verdict { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.8vw, 46px); letter-spacing: -0.045em; line-height: 1.05; }
.verdict.is-good { color: var(--navy); }
.verdict.is-bad { color: var(--ink); }
.verdict.is-meh { color: var(--ink); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpis div { background: var(--soft); border-radius: 14px; padding: 14px 16px; }
.kpis span { display: block; color: var(--mute); font-size: 13px; }
.kpis b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 1.9vw, 30px); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.chart { width: 100%; height: 240px; display: block; }
.note { color: var(--mute); font-size: 14px; max-width: 70ch; }
.ab { border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid; gap: 14px; }
.ab legend { font-family: var(--display); font-weight: 800; font-size: 20px; padding: 0 8px; }
.num { display: grid; gap: 4px; }
.num span { color: var(--mute); font-size: 14px; }
.num input { width: 100%; font: inherit; font-weight: 600; font-size: 20px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.num input:focus-visible { outline-offset: 1px; }
.abbars { display: grid; gap: 14px; }
.abbar { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; font-weight: 700; }
.abbar__track { position: relative; height: 18px; background: var(--soft); border-radius: 10px; }
.abbar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--navy); border-radius: 10px; transition: width 0.7s var(--ease); }
.abbar--b .abbar__fill { background: var(--ink); }
.abbar__err { position: absolute; top: 3px; bottom: 3px; background: rgba(255, 255, 255, 0.55); border-radius: 4px; transition: left 0.7s var(--ease), width 0.7s var(--ease); }
@media (max-width: 899.98px) { .tool.is-active { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } }

/* ============ Contact ============ */
.clist { border-top: 1px solid var(--ink); }
.crow { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 2fr) 110px; gap: 12px 32px; align-items: center; padding: clamp(24px, 3vw, 44px) clamp(6px, 1vw, 16px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; transition: color 0.45s var(--ease); }
.crow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); transform: scaleY(0); transform-origin: bottom; transition: transform 0.7s var(--ease); }
a.crow:hover { color: #fff; }
a.crow:hover::before { transform: scaleY(1); }
.crow__k { color: var(--navy); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: color 0.4s; }
a.crow:hover .crow__k { color: var(--sky); }
.crow__v { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.5vw, 56px); letter-spacing: -0.05em; line-height: 1; word-break: break-word; }
.crow__go, .crow .btn { justify-self: end; }
.crow__go { font-family: var(--display); font-size: 36px; font-weight: 700; transition: transform 0.5s var(--ease); }
a.crow:hover .crow__go { transform: translate(6px, -6px); }
.crow--copy { cursor: default; }
@media (max-width: 799.98px) { .crow { grid-template-columns: 1fr 90px; } .crow__k { grid-column: 1 / -1; } }

/* ============ Footer ============ */
.footer { position: relative; background: var(--night); color: #fff; padding: clamp(48px, 6vw, 96px) var(--pad) 22px; overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: end; padding-bottom: clamp(28px, 3.4vw, 56px); border-bottom: 1px solid var(--line-w); }
.footer__big { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 6vw, 108px); letter-spacing: -0.058em; line-height: 0.92; max-width: 12ch; text-transform: uppercase; }
.footer__links { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 40px; font-weight: 500; }
.footer__links a { opacity: 0.8; transition: opacity 0.3s; }
.footer__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footer__name { font-family: var(--display); font-weight: 800; text-transform: uppercase; white-space: nowrap; font-size: 10.6vw; letter-spacing: -0.065em; line-height: 0.82; margin: clamp(20px, 3vw, 44px) 0 10px -0.04em; color: var(--blue); user-select: none; }
.footer__base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--line-w); font-size: 13px; color: rgba(255, 255, 255, 0.65); }

.toast { position: fixed; left: 50%; bottom: 28px; z-index: 600; opacity: 0; transform: translate(-50%, 220%); background: var(--navy); color: #fff; padding: 12px 22px; border-radius: 999px; font-weight: 600; box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.4); transition: transform 0.6s var(--ease), opacity 0.4s; pointer-events: none; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .statement__text .sw { color: var(--ink); }
}

.dark .h2 em, .blue .h2 em, .blue .pagehead__title em { color: var(--sky); }
.cta .gridlines { z-index: 0; }

.dark .job__when { color: var(--sky); }
.dark .job__place { color: rgba(255,255,255,.65); }

.cert__img { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #fff; margin-bottom: 4px; }
.cert__img img { width: 100%; height: auto; transition: transform 1s var(--ease); }
.cert:hover .cert__img img { transform: scale(1.03); }
.certs { align-items: start; }

/* how I work: editorial white cards */
.how { background: #fff; padding-block: clamp(72px, 10vw, 150px) clamp(40px, 6vw, 90px); }
.how__head { margin-bottom: clamp(32px, 5vw, 72px); }
.how__head .micro { color: var(--mute); margin-bottom: 16px; }
.how__list { display: block; }
.hcard { display: grid; grid-template-columns: 1fr; padding: clamp(32px, 4vw, 64px) clamp(28px, 4vw, 64px); border-top: 1px solid var(--line); background: #fff; color: var(--ink); }
.hcard h3 { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 64px); letter-spacing: -0.045em; line-height: 0.98; margin-bottom: 18px; max-width: 18ch; }
.hcard p { max-width: 52ch; margin-bottom: 24px; opacity: 0.7; line-height: 1.5; }
.hcard .chips li { background: var(--soft); border-color: transparent; color: var(--ink); }
@media (max-width: 799.98px) { .hcard { min-height: 0; top: calc(76px + var(--i) * 14px); } }

/* credentials strip */
.creds { padding-block: clamp(40px, 6vw, 90px); }
.creds .wrap { display: grid; gap: 20px; }
.creds .micro { color: var(--mute); }
.creds ul { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3.2vw, 52px); letter-spacing: -0.04em; line-height: 1.05; }
.creds li { position: relative; transition: color .3s var(--ease); color: var(--ink); }
.creds ul:hover li { color: #c5cadb; }
.creds ul li:hover { color: var(--blue); }
/* dock-style magnification */
@media (hover: hover) and (min-width: 800px) {
  .creds li { transition: transform .3s var(--ease), color .3s var(--ease); transform-origin: bottom; cursor: default; }
  .creds li:hover { transform: scale(1.18); }
  .creds li:has(+ li:hover),
  .creds li:hover + li { transform: scale(1.08); }
  .creds li:has(+ li + li:hover),
  .creds li:hover + li + li { transform: scale(1.03); }
}
.creds .btn { justify-self: start; }
.stack__note { color: var(--mute); margin-bottom: 24px; }
.dark .stack__note { color: rgb(255 255 255 / .6); }
/* mixed-case display needs more air than uppercase on Archivo */
.verdict, .statement__text, .about__pull, .pmetrics b, .kpis b { letter-spacing: -0.028em; word-spacing: 0.04em; }

/* ============ Wairk-inspired editorial redesign ============ */
:root { --warm: #f6f4ef; }

/* dark hero */
.hero--dark { background: var(--night); color: #fff; position: relative; }
.hero--dark::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(26,59,159,.06) 1.2px, transparent 1.2px); background-size: 24px 24px; z-index: 1; pointer-events: none; }
.hero--dark::after { content: ""; position: absolute; left: 55%; top: 35%; width: 90vmax; height: 90vmax; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(26,59,159,.1) 0%, transparent 55%); z-index: 1; pointer-events: none; }
.hero--dark em { color: var(--sky); }
.hero--dark :focus-visible { outline-color: #fff; }
.hero--dark .btn--light { box-shadow: 0 0 40px rgba(26,59,159,.25), 0 0 80px rgba(26,59,159,.08); }
.hero--dark .hero__micro, .hero--dark .hero__title, .hero--dark .hero__bottom { position: relative; z-index: 2; }

/* rotating sticker */
.sticker { position: absolute; right: var(--pad); bottom: clamp(60px,8vh,120px); width: clamp(90px,10vw,140px); height: clamp(90px,10vw,140px); color: var(--sky); animation: spin 22s linear infinite; z-index: 4; opacity: .65; }
.sticker svg { width: 100%; height: 100%; }
.sticker text { font-family: "Geist Mono", ui-monospace, monospace; text-transform: uppercase; }
@keyframes spin { to { rotate: 360deg; } }
@media (max-width:899.98px) { .sticker { width: 80px; height: 80px; right: var(--pad); bottom: clamp(60px,8vh,100px); opacity: .45; } }

/* blue marquee accent */
.marquee--accent { background: var(--blue); }
.marquee--accent .sep { color: rgba(255,255,255,.45); }

/* warm section backgrounds */
.statement { background: var(--warm); }
.stack { background: var(--warm); }

/* hcard with editorial numbers */
.hcard { grid-template-columns: clamp(60px,8vw,100px) 1fr; gap: 0 clamp(20px,2.5vw,40px); align-items: start; }
.hcard__no { font-family: var(--display); font-weight: 800; font-size: clamp(48px,6vw,88px); letter-spacing: -.06em; line-height: .8; color: var(--blue); font-variant-numeric: tabular-nums; user-select: none; padding-top: .15em; opacity: 0.2; }
@media (max-width:799.98px) { .hcard { grid-template-columns: 1fr; } .hcard__no { font-size: 40px; margin-bottom: 4px; } }

/* dark CTA */
.cta--dark { background: var(--night); color: #fff; }
.cta--dark em { color: var(--sky); }
.cta--dark :focus-visible { outline-color: #fff; }
.cta--dark .btn--light { box-shadow: 0 0 40px rgba(26,59,159,.2); }

@media (prefers-reduced-motion:reduce) { .sticker { animation: none; } }

/* ============ Custom cursor ============ */
.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); transition: transform 0.15s var(--ease), opacity 0.2s; }
.cursor__ring { position: absolute; top: -20px; left: -20px; width: 48px; height: 48px; border: 1.5px solid rgba(255,255,255,0.5); border-radius: 50%; transform: translate(-50%, -50%) translate(20px, 20px); transition: width 0.25s var(--ease), height 0.25s var(--ease), top 0.25s var(--ease), left 0.25s var(--ease), border-color 0.2s, background-color 0.2s; }
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; top: -28px; left: -28px; transform: translate(-50%, -50%) translate(28px, 28px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.8); }
.cursor.is-hover .cursor__dot { transform: translate(-50%, -50%) scale(0.5); }
.cursor.is-click .cursor__dot { transform: translate(-50%, -50%) scale(2.5); }
.cursor.is-click .cursor__ring { width: 36px; height: 36px; top: -14px; left: -14px; transform: translate(-50%, -50%) translate(14px, 14px); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============ Film grain overlay ============ */
.grain { position: fixed; inset: 0; z-index: 800; pointer-events: none; opacity: 0.035; }
.grain::after { content: ""; position: absolute; inset: -200%; width: 400%; height: 400%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 256px 256px; animation: grain 0.4s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 25% { transform: translate(-5%,-5%); } 50% { transform: translate(5%,-10%); } 75% { transform: translate(-10%,5%); } }
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* ============ Project row cursor-following preview ============ */
.prow__preview { position: fixed; z-index: 100; width: 380px; height: 240px; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; transform: scale(0.8); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5); }
.prow__preview.is-on { opacity: 1; transform: scale(1); }
.prow__preview img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899.98px) { .prow__preview { display: none; } }

/* ============ Text scramble on hover ============ */
.scramble-char { display: inline-block; transition: none; }
.scramble-char.is-scrambling { color: var(--sky); }