/* ==========================================================================
   MXYL — brutalist portfolio
   ========================================================================== */

:root {
  --paper: #E9E7E0;
  --ink: #0C0C0C;
  --acid: #CCFF00;
  --blue: #2B2BFF;
  --muted: #5E5C57;
  --pad: clamp(16px, 2.2vw, 32px);
  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --line: 1.5px solid var(--ink);
  --ease: cubic-bezier(.7, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
::selection { background: var(--acid); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 200; color: var(--paper); }
.loader__bars { position: absolute; inset: 0; display: flex; }
.loader__bars i { flex: 1; background: var(--ink); margin-right: -1px; }
.loader__inner {
  position: absolute; inset: 0; padding: var(--pad);
  display: flex; flex-direction: column; justify-content: space-between;
}
.loader__top, .loader__bottom { display: flex; justify-content: space-between; }
.loader__word {
  display: flex; justify-content: center; overflow: hidden;
  font-weight: 900; font-variation-settings: "wdth" 125;
  font-size: clamp(80px, 18vw, 300px); line-height: .82; letter-spacing: -.04em;
}
.loader__word span { display: inline-block; }
.loader__count { font-size: 14px; color: var(--acid); }
.loader__bars i { transition: background-color .6s var(--ease); }
.loader { transition: color .6s var(--ease); }

/* theme question (first visit) — previewing light turns the loader itself light */
.loader.is-light { color: #0C0C0C; }
.loader.is-light .loader__bars i { background: #E9E7E0; }
.loader__ask {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 32px); padding: var(--pad); text-align: center;
}
.loader__ask[hidden] { display: none; }
.loader__q { opacity: .7; }
.loader__title {
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(36px, 6.4vw, 120px); line-height: .86; letter-spacing: -.045em; max-width: 12ch;
}
.loader__choices { display: flex; gap: clamp(10px, 1.4vw, 20px); margin-top: clamp(6px, 1vw, 14px); }
.choice {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center;
  min-width: clamp(240px, 24vw, 360px); padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 26px);
  border: 1.5px solid currentColor; text-align: left;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease-out);
}
.choice__icon { grid-row: 1 / 3; font-size: clamp(30px, 3vw, 48px); line-height: 1; }
.choice__name { font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 44px); line-height: .9; letter-spacing: -.035em; }
.choice__mode { opacity: .7; margin-top: 4px; }
.choice.is-active { background: var(--acid); color: #0C0C0C; border-color: var(--acid); transform: translateY(-4px); }
.choice:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
.loader__timer { display: flex; align-items: center; gap: 12px; width: min(100%, 520px); opacity: .7; }
.loader__track { flex: 1; height: 2px; background: color-mix(in srgb, currentColor 25%, transparent); }
.loader__track i { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }
@media (max-width: 599px) {
  .loader__choices { flex-direction: column; width: 100%; }
  .choice { min-width: 0; width: 100%; }
  .loader__keys { display: none; }
}

/* ---------- Page transition ---------- */
.pt { position: fixed; inset: 0; z-index: 210; display: flex; pointer-events: none; }
.pt i { flex: 1; background: var(--ink); margin-right: -1px; }
.pt--hidden i { transform: translateY(100%); }

/* ---------- Muted text per surface (keeps small grey labels at 4.5:1) ---------- */
:is(.work, .contact, .footer, .challenge, .cvisual, .cintro, .nightday, .fcard--navy, .pcard--ink, .pcard--blue) { --muted: #A3A19B; }
:is(.ph, .vb-phone) { --muted: #5E5C57; }

/* ---------- Cursor ---------- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 250; pointer-events: none;
  mix-blend-mode: difference; opacity: 0;
}
.cursor__ball {
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  transition: width .45s var(--ease-out), height .45s var(--ease-out), background-color .3s;
}
.cursor__label {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--ink);
  opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s var(--ease-out);
}
.cursor.is-link .cursor__ball { width: 56px; height: 56px; }
.cursor.is-view { mix-blend-mode: normal; }
.cursor.is-view .cursor__ball { width: 110px; height: 110px; background: var(--acid); }
.cursor.is-view .cursor__label { opacity: 1; transform: none; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 120; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .8s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); }
  40% { transform: translate(3%, -5%); } 60% { transform: translate(-6%, -2%); }
  80% { transform: translate(5%, 4%); } 100% { transform: translate(0, 0); }
}

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: var(--pad); color: #fff; mix-blend-mode: difference;
}
.nav__logo {
  font-weight: 900; font-variation-settings: "wdth" 125; font-size: 22px; letter-spacing: -.03em;
  justify-self: start;
}
.nav__logo sup { font-size: .45em; font-weight: 500; margin-left: 1px; }
.nav__links { display: flex; gap: clamp(16px, 2.4vw, 40px); }
.nav__links a, [data-scramble] { position: relative; display: inline-block; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1.5px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__right { justify-self: end; display: flex; gap: 24px; align-items: center; }
.nav__menu { display: none; text-transform: uppercase; font-family: var(--mono); font-size: 12px; }

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--acid); color: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--pad) * 5) var(--pad) var(--pad);
  clip-path: inset(0 0 100% 0); visibility: hidden;
}
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  overflow: hidden; border-top: var(--line);
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(30px, 9.6vw, 96px); line-height: 1; letter-spacing: -.03em; padding: 6px 0 2px; /* sized so "Playground", the longest, still fits */
}
.menu__links a span { display: inline-block; }
.menu__foot { display: flex; justify-content: space-between; }

/* ---------- Section head ---------- */
.sec-head {
  position: relative; display: grid; grid-template-columns: 1fr 1fr 2fr;
  padding-top: 12px; gap: var(--pad);
}
.sec-head span:last-child { text-align: right; }
.sec-head__rule {
  position: absolute; top: 0; left: 0; width: 100%; height: 1.5px;
  background: currentColor; transform-origin: left;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--pad) * 3.6) var(--pad) var(--pad);
  background: var(--paper);
}
.hero__gl {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.hero__meta, .hero__foot { position: relative; z-index: 1; color: #fff; mix-blend-mode: difference; }
.hero__meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad);
  border-top: 1.5px solid #fff; padding-top: 12px;
}
.hero__metaitem { display: block; overflow: hidden; }
.hero__status { justify-self: end; text-wrap: balance; }
@keyframes blink { 50% { opacity: .15; } }

.hero__titlewrap { display: flex; justify-content: center; }
.hero__title {
  display: inline-flex; white-space: nowrap;
  font-weight: 900; font-size: 22vw; line-height: .76; letter-spacing: -.045em;
  user-select: none;
}
.hero__title .char { display: inline-block; overflow: hidden; padding: .06em .005em 0; }
.hero__title .char__in {
  display: inline-block; will-change: transform;
  font-variation-settings: "wght" var(--w, 900), "wdth" var(--d, 125);
}
.hero__bottom {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--pad); align-items: end;
  margin-top: clamp(14px, 2vw, 28px);
}
.hero__intro { font-size: clamp(17px, 1.5vw, 24px); line-height: 1.2; font-weight: 500; max-width: 30ch; letter-spacing: -.01em; }
.hero__scroll { justify-self: end; display: flex; gap: 8px; }
.hero__scroll span { display: inline-block; animation: bob 1.6s var(--ease) infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* ---------- Bands (crossing marquees) ---------- */
.bands { position: relative; height: clamp(220px, 30vw, 440px); overflow: hidden; display: grid; place-items: center; background: var(--paper); }
.band {
  position: absolute; left: -5%; width: 110%; overflow: hidden;
  border-block: var(--line); padding: clamp(10px, 1.2vw, 18px) 0;
}
.band--acid { background: var(--acid); transform: rotate(-4deg); z-index: 2; }
.band--ink { background: var(--ink); color: var(--paper); transform: rotate(3deg); }
.band__track { display: flex; width: max-content; will-change: transform; }
.band__group {
  display: flex; align-items: center; flex-shrink: 0;
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(36px, 6vw, 104px); line-height: 1; letter-spacing: -.03em;
}
.band__group span, .band__group b { padding-right: .35em; }
.band__group b { font-size: .6em; display: inline-block; }
.band--ink b { color: var(--acid); }
.band__group .o { color: transparent; -webkit-text-stroke: 1.5px var(--paper); }

/* ---------- About ---------- */
.about { padding: clamp(80px, 12vw, 180px) var(--pad); }
.manifesto {
  margin-top: clamp(40px, 6vw, 90px);
  font-size: clamp(30px, 5.1vw, 88px); line-height: .98; letter-spacing: -.035em;
  font-weight: 800; font-variation-settings: "wdth" 100; text-indent: 25%;
}
.manifesto em {
  font-style: normal; font-variation-settings: "wdth" 125; font-weight: 300;
}
/* marker: one continuous strip (slice) so it sweeps line by line, left → right */
.manifesto em {
  background: linear-gradient(var(--acid), var(--acid)) left 55% / 0% 92% no-repeat;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  padding: 0 .06em;
}
.about__grid {
  margin-top: clamp(60px, 9vw, 140px);
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--pad); align-items: start;
}
.about__col { border-top: var(--line); padding-top: 14px; }
.about__col h3 { margin-bottom: 18px; color: var(--muted); }
.about__col p, .about__col li { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.3; font-weight: 500; }
.about__col li { border-bottom: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent); padding: 6px 0; }
.badge { position: relative; width: clamp(130px, 13vw, 200px); aspect-ratio: 1; }
.badge svg { width: 100%; height: 100%; overflow: visible; }
.badge text { font-family: var(--mono); font-size: 14.5px; letter-spacing: .14em; fill: var(--ink); }
.badge__core {
  position: absolute; inset: 28%; border-radius: 50%; background: var(--ink); color: var(--acid);
  display: grid; place-items: center; font-size: clamp(28px, 3vw, 46px);
}

/* ---------- Work ---------- */
.work { background: var(--ink); color: var(--paper); }
.work__pin {
  height: 100vh; height: 100svh; display: flex; flex-direction: column; overflow: hidden;
  padding: calc(var(--pad) * 3.6) 0 var(--pad);
}
.work__head {
  display: grid; grid-template-columns: 1fr 3fr 1fr; align-items: end; gap: var(--pad);
  padding: 0 var(--pad) clamp(16px, 2vw, 28px);
}
.work__title {
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(44px, 7.5vw, 140px); line-height: .82; letter-spacing: -.04em;
}
.work__count { display: flex; flex-direction: column; align-items: flex-end; text-align: right; color: var(--acid); }
.work__all { display: inline-block; margin-top: 10px; color: inherit; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.work__all b { display: inline-block; font-weight: 500; transition: transform .5s var(--ease-out); }
@media (hover: hover) { .work__all:hover b { transform: translateX(5px); } }
.work__track {
  flex: 1; min-height: 0; display: flex; gap: clamp(14px, 1.6vw, 24px);
  padding: 0 var(--pad); width: max-content; will-change: transform;
}
.card {
  position: relative; width: clamp(320px, 40vw, 720px); height: 100%;
  display: flex; flex-direction: column; border: 1.5px solid var(--paper);
  background: var(--ink); transform-origin: center;
}
.card__visual { position: relative; flex: 1; min-height: 0; overflow: hidden; border-bottom: 1.5px solid var(--paper); }
.card__info {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 18px;
  align-items: baseline; padding: 14px 16px 16px;
}
.card__info h3 {
  grid-column: 2; font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(28px, 3vw, 54px); line-height: .9; letter-spacing: -.03em;
  transition: font-variation-settings .6s var(--ease-out);
}
:is(.card:hover, .card.is-active) .card__info h3 { font-variation-settings: "wdth" 62; }
.card__tags { grid-column: 2; color: var(--muted); margin-top: 6px; }
.card__year { grid-column: 3; grid-row: 1; }

.card--end {
  background: var(--acid); color: var(--ink); border-color: var(--acid);
  justify-content: space-between; padding: 18px; width: clamp(280px, 30vw, 520px);
}
.card--end strong {
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(44px, 5.4vw, 100px); line-height: .84; letter-spacing: -.04em;
}
.card--end .arrow { display: inline-block; margin-left: .1em; transition: transform .6s var(--ease-out); }
.card--end:hover .arrow { transform: translateX(.2em) rotate(-45deg); }

.work__progress { margin: clamp(14px, 2vw, 24px) var(--pad) 0; height: 2px; background: color-mix(in srgb, var(--paper) 18%, transparent); }
.work__progress i { display: block; height: 100%; background: var(--acid); transform: scaleX(0); transform-origin: left; }

/* ---------- Project card visuals ----------
   Built in HTML/SVG in each project's own colours (same tokens as its case page).
   Fixed colours on purpose: they read as the project, not the page theme. */
.vis-tag { position: absolute; top: 14px; left: 16px; z-index: 2; opacity: .75; }
/* UI mockups scale with the card itself, not the window */
.v-mgb, .v-crown { container-type: inline-size; }

/* Ecofix — data poster: navy + lavender */
.v-eco { background: #2B2D4D; color: #E9E7E0; container-type: inline-size; display: grid; place-items: center; }
/* Ecofix — one big battery that charges on hover (same object language as MGB / Crown) */
@property --pct { syntax: "<integer>"; inherits: true; initial-value: 38; }
.eco-batt {
  --pct: 38; position: relative; width: 70%; display: flex; align-items: center;
  transform: rotate(-4deg); transition: transform 1s var(--ease-out), --pct 1.8s var(--ease-out);
}
:is(.card:hover, .card.is-active) .eco-batt { --pct: 100; transform: rotate(0deg) translateY(-3%); }
.eco-batt__body {
  position: relative; flex: 1; aspect-ratio: 2.05 / 1; background: #fff; border-radius: 5cqi; overflow: hidden;
  box-shadow: 3.4cqi 3.4cqi 0 #D1B7FA; display: grid; place-items: center;
}
.eco-batt__fill {
  position: absolute; left: 3cqi; top: 3cqi; bottom: 3cqi; border-radius: 2.6cqi; overflow: hidden;
  width: calc((100% - 6cqi) * var(--pct) / 100); background: #D1B7FA; transition: background-color .6s;
}
.eco-batt__fill::after {   /* a slow shine running through the charge */
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%); animation: eco-shine 3.2s ease-in-out infinite;
}
@keyframes eco-shine { 60%, 100% { transform: translateX(100%); } }
:is(.card:hover, .card.is-active) .eco-batt__fill { background: #B9F2D0; transition-delay: 1.2s; }
.eco-batt__pct { position: relative; font-weight: 900; font-variation-settings: "wdth" 125; font-size: 15cqi; letter-spacing: -.05em; color: #2B2D4D; line-height: 1; }
.eco-batt__pct::before { counter-reset: pct var(--pct); content: counter(pct) "%"; }
.eco-batt__nub { width: 3.4cqi; height: 34%; margin-left: 1.4cqi; background: #fff; border-radius: 0 1.6cqi 1.6cqi 0; box-shadow: 3.4cqi 3.4cqi 0 #D1B7FA; }
.eco-bolt { position: absolute; left: -7%; top: -34%; width: 13cqi; fill: #B9F2D0; transform: rotate(-8deg); animation: eco-bolt 2.4s var(--ease-out) infinite; }
@keyframes eco-bolt { 0%, 70%, 100% { transform: rotate(-8deg) scale(1); } 80% { transform: rotate(4deg) scale(1.18); } }
:is(.card:hover, .card.is-active) .eco-bolt { animation-duration: .9s; }
.eco-tag { position: absolute; left: 16px; bottom: 14px; opacity: .75; }

/* N-ACA — one big rocket that lifts off on hover */
.v-naca { background: #181337; color: #E9E7E0; container-type: inline-size; overflow: hidden; }
/* each star is a full-height column with its dot at the bottom; the column slides down (transform only) */
.naca-stars { position: absolute; inset: 0; pointer-events: none; }
.naca-stars i {
  position: absolute; top: -100%; height: 100%; width: 1.2cqi; opacity: .7; --c: #E9E7E0;
  animation: naca-fall var(--t, 6s) linear infinite; animation-delay: var(--d, 0s);
}
.naca-stars i::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 1; border-radius: 50%; background: var(--c); }
.naca-stars i:nth-child(1) { left: 12%; --t: 5s; } .naca-stars i:nth-child(2) { left: 28%; --t: 7s; --d: -3s; }
.naca-stars i:nth-child(3) { left: 44%; --t: 6s; --d: -1s; width: .8cqi; } .naca-stars i:nth-child(4) { left: 58%; --t: 8s; --d: -5s; }
.naca-stars i:nth-child(5) { left: 72%; --t: 5.5s; --d: -2s; width: .8cqi; } .naca-stars i:nth-child(6) { left: 86%; --t: 6.5s; --d: -4s; }
.naca-stars i:nth-child(7) { left: 20%; --t: 9s; --d: -6s; width: .7cqi; } .naca-stars i:nth-child(8) { left: 66%; --t: 7.5s; --d: -1.5s; width: 1.6cqi; --c: #FF7A5C; }
.naca-stars i:nth-child(9) { left: 92%; --t: 8.5s; --d: -7s; width: .7cqi; }
@keyframes naca-fall { to { transform: translateY(205%); } }
:is(.card:hover, .card.is-active) .naca-stars i { animation-duration: calc(var(--t, 6s) / 4); }
/* centred with inset + auto margins: the card parallax tweens x and would undo a translate */
.naca-rocket {
  position: absolute; inset: 0; margin: auto; height: 74%; aspect-ratio: 100 / 170;
  transform: rotate(32deg); transition: transform 1.2s var(--ease-out);
}
.naca-rocket svg { width: 100%; height: 100%; overflow: visible; animation: naca-hover 3s ease-in-out infinite; }
@keyframes naca-hover { 50% { transform: translateY(-3%); } }
:is(.card:hover, .card.is-active) .naca-rocket { transform: rotate(32deg) translateY(-14%); }
.naca-body { fill: #fff; }
.naca-shadow { fill: #FF7A5C; }
.naca-seam { fill: none; stroke: #181337; stroke-width: 2.5; stroke-linecap: round; opacity: .18; }
.naca-window { fill: #181337; stroke: #FF7A5C; stroke-width: 4; }
.naca-nozzle { fill: #fff; }
.naca-flame { fill: #FFD166; transform-box: fill-box; transform-origin: 50% 0; animation: naca-flicker .18s steps(2) infinite alternate; }
.naca-flame--in { fill: #fff; animation-duration: .13s; }
@keyframes naca-flicker { to { transform: scaleY(.78) scaleX(.92); } }
.naca-flame { transition: scale .6s var(--ease-out); }
:is(.card:hover, .card.is-active) .naca-flame { scale: 1 1.7; }
.naca-status {
  position: absolute; left: 16px; bottom: 14px; display: inline-grid; padding: .5em .9em; border-radius: 99px;
  background: rgba(233,231,224,.12); transition: background-color .5s, color .5s;
}
.naca-status span { grid-area: 1 / 1; transition: opacity .4s, transform .5s var(--ease-out); }
.naca-status span:last-child { opacity: 0; transform: translateY(60%); }
:is(.card:hover, .card.is-active) .naca-status { background: #FF7A5C; color: #181337; }
:is(.card:hover, .card.is-active) .naca-status span:first-child { opacity: 0; transform: translateY(-60%); }
:is(.card:hover, .card.is-active) .naca-status span:last-child { opacity: 1; transform: none; transition-delay: .25s; }
@media (prefers-reduced-motion: reduce) {
  .eco-batt__fill::after, .eco-bolt, .naca-stars i, .naca-rocket svg, .naca-flame { animation: none; }
}

/* TND — surveillance frame: black + gold */
.v-tnd { background: #141414; color: #E9E7E0; }
.tnd-scan {
  position: absolute; inset: -10%;
  background: repeating-linear-gradient(0deg, rgba(233,231,224,.04) 0 1px, transparent 1px 4px);
}
.tnd-scan::after {
  content: ""; position: absolute; left: 0; right: 0; height: 30%;
  background: linear-gradient(transparent, rgba(201,164,92,.10), transparent);
  animation: tnd-sweep 4s linear infinite;
}
@keyframes tnd-sweep { from { top: -30%; } to { top: 100%; } }
.tnd-rec i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #C9A45C; margin-right: 8px; animation: blink 1.2s steps(2) infinite; }
/* centred with inset + auto margins (not translate): the card parallax tweens x and would undo it */
.tnd-frame {
  position: absolute; inset: 0; margin: auto; height: 62%; aspect-ratio: 1;
  border: 2px solid #C9A45C; transform: scale(1.14);
  display: grid; place-items: center; transition: transform 1s var(--ease-out), box-shadow 1s;
}
:is(.card:hover, .card.is-active) .tnd-frame { transform: scale(1); box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
.tnd-globe { width: 72%; height: 72%; overflow: visible; }
.tnd-globe circle, .tnd-globe path, .tnd-globe ellipse { fill: none; stroke: rgba(233,231,224,.7); stroke-width: 1.2; transition: stroke .8s; }
:is(.card:hover, .card.is-active) .tnd-globe * { stroke: #C9A45C; }
.tnd-mer { transform-box: fill-box; transform-origin: center; animation: tnd-spin 4.5s linear infinite; }
.tnd-mer:nth-of-type(2) { animation-delay: -1.5s; }
.tnd-mer:nth-of-type(3) { animation-delay: -3s; }
@keyframes tnd-spin { from { transform: scaleX(1); } to { transform: scaleX(-1); } }
.tnd-label { position: absolute; left: -2px; bottom: -26px; color: #C9A45C; }

/* MGB — declarations card: magenta + lime */
.v-mgb { background: #B0105F; display: grid; place-items: center; }
.mgb-card {
  width: 84%; background: #fff; color: #1D1D1B; border-radius: 1.2em; padding: 1.4em 1.5em;
  font-size: clamp(8px, 2.5cqi, 17px); box-shadow: 1.2em 1.2em 0 #B5D334;
  transform: rotate(-4deg); transition: transform 1s var(--ease-out);
}
:is(.card:hover, .card.is-active) .mgb-card { transform: rotate(0deg) translateY(-3%); }
.mgb-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; }
.mgb-head b { font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; }
.mgb-pill { background: #B0105F; color: #fff; border-radius: 99px; padding: .4em .9em; font-weight: 700; }
.mgb-row { display: grid; grid-template-columns: 2em 1fr auto auto; gap: .8em; align-items: center; padding: .8em 0; border-top: 1px solid #ECECEC; font-weight: 600; }
.mgb-row i { width: 2em; aspect-ratio: 1; border-radius: 50%; background: #F6D2E3; }
.mgb-status { font-style: normal; font-family: var(--mono); font-size: .85em; display: inline-grid; border-radius: 99px; padding: .35em .8em; background: #EDEDED; transition: background-color .5s; }
.mgb-status span { grid-area: 1 / 1; transition: opacity .4s, transform .5s var(--ease-out); }
.mgb-status.is-ok { background: #B5D334; }
.mgb-status--flip span:last-child { opacity: 0; transform: translateY(60%); }
:is(.card:hover, .card.is-active) .mgb-status--flip { background: #B5D334; }
:is(.card:hover, .card.is-active) .mgb-status--flip span:first-child { opacity: 0; transform: translateY(-60%); }
:is(.card:hover, .card.is-active) .mgb-status--flip span:last-child { opacity: 1; transform: none; transition-delay: .25s; }
.mgb-toast {
  position: absolute; right: 8%; bottom: 9%; background: #0C0C0C; color: #B5D334; padding: 10px 14px;
  opacity: 0; transform: translateY(40%); transition: opacity .4s, transform .7s var(--ease-out);
}
:is(.card:hover, .card.is-active) .mgb-toast { opacity: 1; transform: none; transition-delay: .5s; }

/* Crown Desk — dashboard: deep red + pink */
.v-crown { background: #8C1C26; display: grid; place-items: center; }
.crown-panel {
  width: 84%; background: #fff; color: #1D1D1B; border-radius: 1em; padding: 1.3em;
  font-size: clamp(8px, 2.3cqi, 16px); box-shadow: 1.2em 1.2em 0 #F7A4A4;
  display: flex; flex-direction: column; gap: 1.1em; transition: transform 1s var(--ease-out);
}
:is(.card:hover, .card.is-active) .crown-panel { transform: translateY(-3%); }
.crown-head { display: flex; align-items: center; gap: .7em; }
.crown-head b { font-size: 1.4em; font-weight: 800; letter-spacing: -.02em; }
.crown-icon { width: 2.2em; fill: #C8323F; transform-origin: 50% 100%; }
:is(.card:hover, .card.is-active) .crown-icon { animation: crown-hop .7s var(--ease-out); }
@keyframes crown-hop { 40% { transform: translateY(-35%) rotate(-8deg); } }
.crown-search { margin-left: auto; border: 1px solid #E2E2E2; border-radius: 99px; padding: .4em 1em; color: #7A7A78; font-size: .85em; text-transform: none; }
.crown-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.crown-kpis div { background: #FBEDED; border-radius: .7em; padding: .7em .8em; display: flex; flex-direction: column; gap: .2em; }
.crown-kpis .mono { font-size: .8em; color: #8C1C26; }
.crown-kpis b { font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; }
.crown-chart { height: 9em; display: flex; align-items: flex-end; gap: .5em; border-bottom: 1px solid #ECECEC; }
.crown-chart i { flex: 1; height: var(--h); background: #C8323F; border-radius: .25em .25em 0 0; transition: height .9s var(--ease-out); transition-delay: calc(var(--n) * 35ms); }
.crown-chart i:nth-child(even) { background: #F7A4A4; }
:is(.card:hover, .card.is-active) .crown-chart i { height: var(--h2); }

/* Visual 01 — bank */
.v-bank { background: var(--acid); display: grid; place-items: center; }
.vb-circle {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--ink);
  right: -18%; bottom: -30%; transition: transform 1s var(--ease-out);
}
.vb-phone {
  position: relative; height: 84%; aspect-ratio: 9 / 18; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 2.4em; padding: 1.4em 1.3em;
  display: flex; flex-direction: column; gap: .8em;
  font-size: clamp(7px, 1.05vh, 12px); box-shadow: 1em 1em 0 var(--ink);
  transition: transform 1s var(--ease-out), box-shadow 1s var(--ease-out);
}
.vb-phone .mono { font-size: 1em; }
.vb-top { display: flex; justify-content: space-between; }
.vb-lbl { margin-top: 1em; color: var(--muted); }
.vb-bal { font-size: 3.2em; font-weight: 900; font-variation-settings: "wdth" 112; letter-spacing: -.04em; line-height: .9; }
.vb-bal small { font-size: .5em; }
.vb-chart { width: 100%; height: 5em; }
.vb-chart path { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease-out); }
.vb-rows { display: flex; flex-direction: column; gap: .2em; font-size: 1.15em; font-weight: 600; }
.vb-rows div { display: grid; grid-template-columns: 1.8em 1fr auto; align-items: center; gap: .6em; padding: .55em 0; border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.vb-rows i { width: 1.8em; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.vb-rows div:nth-child(2) i { background: var(--acid); border: 1.5px solid var(--ink); }
.vb-btn { margin-top: auto; background: var(--ink); color: var(--acid); text-align: center; padding: 1em; border-radius: 99px; font-weight: 700; font-size: 1.1em; }
:is(.card:hover, .card.is-active) .vb-phone { transform: translate(-4%, -3%) rotate(-5deg); box-shadow: 2.2em 2.2em 0 var(--ink); }
:is(.card:hover, .card.is-active) .vb-circle { transform: scale(1.25) translate(-6%, -6%); }
:is(.card:hover, .card.is-active) .vb-chart path { animation: draw 1.4s var(--ease-out); }
@keyframes draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }

/* Visual 02 — shop */
.v-shop { background: #161616; display: grid; place-items: center; }
.vs-grid {
  width: 82%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  transform: rotate(-6deg); transition: transform 1s var(--ease-out);
}
.vs-tile {
  aspect-ratio: 3 / 4; background: var(--paper); color: var(--ink); padding: 8px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  transition: transform .9s var(--ease-out);
}
.vs-tile i { flex: 1; margin: 6% 14% 10%; background: var(--ink); border-radius: 40% 40% 4px 4px; }
.vs-tile:nth-child(2n) i { border-radius: 4px; margin: 14% 20% 10%; }
.vs-tile:nth-child(3n) i { border-radius: 50%; margin: 12% 10%; flex: 0 0 auto; aspect-ratio: 1; }
.vs-tile span { font-size: 9px; }
.vs-tile b { font-size: 13px; font-weight: 800; }
.vs-tile.is-acid { background: var(--acid); }
.vs-tag {
  position: absolute; top: 14px; left: 14px; background: var(--acid); color: var(--ink); padding: 6px 10px;
}
:is(.card:hover, .card.is-active) .vs-grid { transform: rotate(0deg) scale(1.04); }
:is(.card:hover, .card.is-active) .vs-tile:nth-child(odd) { transform: translateY(-12%); }
:is(.card:hover, .card.is-active) .vs-tile:nth-child(even) { transform: translateY(10%); }

/* Visual 03 — pulse */
.v-pulse {
  background-color: var(--paper); color: var(--ink);
  background-image: linear-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ink) 12%, transparent) 1px, transparent 1px);
  background-size: 28px 28px; padding: 18px; display: flex; flex-direction: column;
}
.vp-head { display: flex; justify-content: space-between; align-items: flex-start; }
.vp-head strong { font-size: clamp(48px, 6vw, 110px); font-weight: 900; font-variation-settings: "wdth" 125; line-height: .8; letter-spacing: -.05em; }
.vp-head small { font-size: .25em; letter-spacing: 0; margin-left: 4px; font-weight: 600; }
.vp-bars { flex: 1; display: flex; align-items: flex-end; gap: 5px; margin-top: 18px; }
.vp-bars i {
  flex: 1; height: var(--h); background: var(--ink);
  transition: height .9s var(--ease-out); transition-delay: calc(var(--n) * 25ms);
}
.vp-bars i.hot { background: var(--blue); }
:is(.card:hover, .card.is-active) .vp-bars i { height: var(--h2); }
.vp-ecg { position: absolute; left: 0; top: 46%; width: 100%; height: 80px; }
.vp-ecg path { fill: none; stroke: var(--blue); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 160 600; animation: ecg 2.4s linear infinite; }
@keyframes ecg { from { stroke-dashoffset: 760; } to { stroke-dashoffset: 0; } }

/* Visual 04 — design system */
.v-ds { background: var(--blue); color: var(--paper); display: flex; align-items: center; justify-content: center; gap: 6%; padding: 6%; }
.vd-type {
  font-size: clamp(90px, 13vw, 240px); font-weight: 900; font-variation-settings: "wdth" 125; line-height: .8; letter-spacing: -.05em;
  transition: font-variation-settings 1s var(--ease-out), font-weight 1s;
}
:is(.card:hover, .card.is-active) .vd-type { font-variation-settings: "wdth" 62; font-weight: 200; }
.vd-stack { display: flex; flex-direction: column; gap: 14px; }
.vd-row { display: flex; gap: 10px; align-items: center; }
.vd-btn { background: var(--acid); color: var(--ink); padding: 10px 16px; font-weight: 700; font-size: 14px; border: 1.5px solid var(--acid); }
.vd-btn--ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.vd-toggle { width: 46px; height: 24px; border: 1.5px solid var(--paper); border-radius: 99px; position: relative; }
.vd-toggle i { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); transition: transform .6s var(--ease-out), background-color .3s; }
:is(.card:hover, .card.is-active) .vd-toggle i { transform: translateX(22px); background: var(--acid); }
.vd-chip { border: 1.5px solid var(--paper); padding: 5px 10px; border-radius: 99px; }
.vd-check { width: 24px; height: 24px; background: var(--paper); color: var(--blue); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.vd-swatches { display: flex; height: 40px; border: 1.5px solid var(--paper); }
.vd-swatches i { flex: 1; transition: flex .8s var(--ease-out); }
.vd-swatches i:nth-child(1) { background: var(--ink); }
.vd-swatches i:nth-child(2) { background: var(--paper); }
.vd-swatches i:nth-child(3) { background: var(--acid); }
.vd-swatches i:nth-child(4) { background: #FF5A1F; }
.vd-swatches i:nth-child(5) { background: #9B9BFF; }
:is(.card:hover, .card.is-active) .vd-swatches i:nth-child(3) { flex: 4; }
.vd-tok { font-size: 10px; opacity: .7; text-transform: none; }

/* ---------- Services ---------- */
.services { padding: clamp(80px, 12vw, 180px) var(--pad); }
.svc { margin-top: clamp(40px, 5vw, 80px); border-bottom: var(--line); }
.svc__row {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(220px, 30ch) 64px; align-items: center; gap: var(--pad);
  border-top: var(--line); padding: clamp(16px, 1.8vw, 28px) 10px; overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease);
}
.svc__row::before {
  content: ""; position: absolute; inset: 0; background: var(--ink); z-index: -1;
  transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease);
}
/* Single line, fixed size: hover only uses transforms, so nothing reflows */
.svc__title {
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(26px, 5vw, 104px); line-height: 1; letter-spacing: -.04em; white-space: nowrap;
}
.svc__char { display: inline-block; vertical-align: top; clip-path: inset(0 -30% 0 -30%); }
.svc__char-in {
  display: block; position: relative;
  transition: transform .7s var(--ease); transition-delay: calc(var(--i) * 22ms);
}
.svc__char-in::after { content: attr(data-c); position: absolute; left: 0; top: 100%; color: var(--acid); }
.svc__desc { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.35; font-weight: 500; opacity: .72; transition: opacity .5s; }
.svc__arrow { justify-self: end; font-size: clamp(30px, 4vw, 64px); line-height: 1; transition: transform .7s var(--ease), color .5s; }
@media (hover: hover) {
  .svc__row:hover { color: var(--paper); }
  .svc__row:hover::before { transform: scaleY(1); }
  .svc__row:hover .svc__char-in { transform: translateY(-100%); }
  .svc__row:hover .svc__desc { opacity: 1; }
  .svc__row:hover .svc__arrow { transform: rotate(45deg); color: var(--acid); }
}

/* ---------- Process ---------- */
.process { padding: 0 var(--pad) clamp(80px, 12vw, 180px); }
.pcards { margin-top: clamp(40px, 5vw, 80px); }
.pcard {
  position: sticky; top: calc(14vh + var(--i) * 34px);
  height: calc(82vh - var(--i) * 34px - 14vh); min-height: 360px; margin-bottom: 8vh;
  border: var(--line); display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--pad);
  padding: clamp(18px, 2.4vw, 36px); transform-origin: center top; will-change: transform;
}
.pcard:last-child { margin-bottom: 0; }
.pcard--paper { background: var(--paper); }
.pcard--ink { background: var(--ink); color: var(--paper); }
.pcard--acid { background: var(--acid); }
.pcard--blue { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.pcard__num {
  font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.06em; line-height: .78;
  font-size: min(22vw, 32vh, 380px); align-self: end;
}
.pcard--ink .pcard__num { color: var(--acid); }
.pcard__body { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.pcard h3 {
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(44px, 6.5vw, 120px); line-height: .85; letter-spacing: -.04em;
}
.pcard p { font-size: clamp(18px, 1.8vw, 30px); line-height: 1.15; font-weight: 500; max-width: 24ch; letter-spacing: -.01em; }
.pcard ul { display: flex; flex-wrap: wrap; gap: 8px; }
.pcard li { border: 1.5px solid currentColor; padding: 7px 12px; border-radius: 99px; }

/* ---------- Contact ---------- */
.contact { background: var(--ink); color: var(--paper); padding: clamp(80px, 12vw, 180px) var(--pad) clamp(60px, 8vw, 120px); }
.contact__big {
  margin-top: clamp(30px, 4vw, 60px);
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: 15vw; line-height: .8; letter-spacing: -.05em; white-space: nowrap; width: max-content;
}
.contact__big .dot { color: var(--acid); }
.contact__row { margin-top: clamp(40px, 6vw, 90px); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--pad); flex-wrap: wrap; }
.contact__mailwrap { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact__mailwrap > .mono { color: var(--muted); }
.contact__mail {
  display: inline-block; font-weight: 700; font-variation-settings: "wdth" 100;
  font-size: clamp(30px, 5vw, 84px); letter-spacing: -.035em; line-height: 1;
  background: linear-gradient(var(--acid), var(--acid)) left bottom / 0% 6px no-repeat;
  transition: background-size .6s var(--ease), color .4s; padding-bottom: 6px;
}
.contact__mail:hover { background-size: 100% 6px; color: var(--acid); }
.copy { border: 1.5px solid var(--paper); padding: 8px 14px; border-radius: 99px; transition: background-color .3s, color .3s; }
.copy:hover { background: var(--paper); color: var(--ink); }
.roundbtn {
  position: relative; width: clamp(150px, 15vw, 230px); aspect-ratio: 1; border-radius: 50%;
  background: var(--acid); color: var(--ink); display: grid; place-items: center; flex-shrink: 0;
}
.roundbtn svg { position: absolute; inset: 6%; width: 88%; height: 88%; animation: spin 14s linear infinite; }
.roundbtn text { font-family: var(--mono); font-size: 13.4px; letter-spacing: .12em; fill: var(--ink); }
.roundbtn__arrow { font-size: clamp(40px, 4vw, 64px); line-height: 1; transition: transform .6s var(--ease-out); }
.roundbtn:hover .roundbtn__arrow { transform: rotate(45deg) scale(1.15); }
@keyframes spin { to { transform: rotate(360deg); } }
.socials { margin-top: clamp(50px, 7vw, 100px); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--paper); }
.socials li { padding-top: 14px; }
.socials a { color: var(--paper); transition: color .3s; }
.socials a:hover { color: var(--acid); }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 0 var(--pad); overflow: hidden; }
.footer__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad); border-top: 1.5px solid color-mix(in srgb, var(--paper) 25%, transparent); padding: 14px 0; }
.footer__row > :last-child { justify-self: end; }
.footer__giantwrap { display: flex; justify-content: center; }
.footer__giant {
  display: inline-flex; overflow: hidden; color: var(--acid);
  font-weight: 900; font-variation-settings: "wdth" 125; font-size: 22vw; line-height: .74; letter-spacing: -.045em;
  padding-top: .04em; transform: translateY(.06em);
}
.footer__giant span { display: inline-block; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 160; background: var(--acid); color: var(--ink);
  padding: 12px 18px; border: var(--line); transform: translate(-50%, 160%);
  transition: transform .6s var(--ease);
}
.toast.is-on { transform: translate(-50%, 0); }

/* split helpers */
.split-word { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: top; padding-top: .06em; margin-top: -.06em; }
.split-char { display: inline-block; will-change: transform; }
.w { display: inline; }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__time { display: none; }
  .nav__menu { display: block; }

  .hero__meta { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .hero__status { justify-self: start; }
  .hero__bottom { grid-template-columns: 1fr auto; }
  .hero__hint { display: none; }

  .sec-head { grid-template-columns: auto 1fr; }
  .sec-head span:last-child { display: none; }

  .manifesto { text-indent: 12%; }
  .about__grid { grid-template-columns: 1fr 1fr; }
  .badge { grid-column: 1 / -1; }
  .about__grid .about__col:nth-child(2) { grid-column: 1 / -1; } /* approach full width, focus + toolkit side by side */

  .work__pin { height: auto; padding-top: calc(var(--pad) * 4); }
  .work__head { grid-template-columns: 1fr; row-gap: 18px; }
  .work__head > .mono:first-child { display: none; }
  /* count left, archive link right, under the title */
  .work__count { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; }
  .work__count .work__all { margin-top: 0; }
  .work__track { flex-direction: column; width: 100%; }
  .card, .card--end { width: 100%; height: auto; }
  .card__visual { flex: none; aspect-ratio: 4 / 4.4; }
  .card--end { min-height: 360px; }
  .vb-phone { font-size: 8px; height: 86%; }
  .work__progress { display: none; }

  .svc__row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .svc__title { font-size: 6.4vw; }
  .svc__desc { grid-column: 2 / -1; opacity: .8; }

  .pcard { grid-template-columns: 1fr; height: auto; min-height: 70vh; top: calc(10vh + var(--i) * 18px); }
  .pcard__num { order: 2; }

  .socials { grid-template-columns: 1fr 1fr; row-gap: 10px; }
  .footer__row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .footer__row > :nth-child(2) { display: none; }
  .footer__row > :last-child { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .loader { display: none; }
}

/* ==========================================================================
   Dark theme
   Tokens flip at the root. Blocks that are "dark surface + light text" in
   light mode keep that meaning on a lifted surface; blocks on acid/lavender
   keep dark text. Each scope re-declares --line so borders follow.
   ========================================================================== */
html[data-theme="dark"] { --paper: #0F0F0E; --ink: #E9E7E0; --muted: #8E8C86; --line: 1.5px solid var(--ink); color-scheme: dark; }

html[data-theme="dark"] :is(
  .loader, .pt, .work, .contact, .footer, .challenge, .cvisual, .band--ink,
  .pcard--ink, .pcard--blue, .shot--blue, .dsys__comps,
  .case-themed .chero, .cintro, .nightday, .fcard--navy
) { --ink: #1A1A19; --paper: #E9E7E0; --line: 1.5px solid var(--ink); }

html[data-theme="dark"] :is(
  .band--acid, .pcard--acid, .menu, .card--end, .roundbtn, .toast, .bigquote,
  .fcard--accent, .shot--acid, body:not(.case-themed) .chero, .ph, .cursor, .dsys__colors
) { --ink: #0C0C0C; --paper: #E9E7E0; --line: 1.5px solid var(--ink); color: var(--ink); }
html[data-theme="dark"] .dsys__colors div.dark { color: var(--paper); }

html[data-theme="dark"] .grain { filter: invert(1); opacity: .05; }
html[data-theme="dark"] .badge__core { background: var(--acid); color: #0C0C0C; }
html[data-theme="dark"] .contact, html[data-theme="dark"] .footer { background: #141413; }
/* highlighted words: text flips dark once the acid marker has swept in */
html[data-theme="dark"] em.is-marked { color: #0C0C0C; transition: color .4s .35s; }
/* services hover: acid bar instead of a light one */
html[data-theme="dark"] .svc__row::before { background: var(--acid); }
html[data-theme="dark"] .svc__char-in::after { color: #0C0C0C; }
@media (hover: hover) {
  html[data-theme="dark"] .svc__row:hover, html[data-theme="dark"] .svc__row:hover .svc__arrow { color: #0C0C0C; }
  html[data-theme="dark"] .next:hover :is(.next__label, .next__meta) { color: #E9E7E0; }
}

/* ---------- Theme toggle ---------- */
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; }
.theme-toggle i {
  width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  transition: transform .8s var(--ease);
}
html[data-theme="dark"] .theme-toggle i { transform: rotate(180deg); }
.theme-toggle__label { font-size: 12px; }

/* circular reveal from the toggle (View Transitions where supported) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .9s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); }
}

/* ==========================================================================
   Content blocks: about stats, clients, statement, journey
   ========================================================================== */
.v-photo--light { background: var(--paper); }

.about__stats { margin-top: clamp(50px, 7vw, 110px); display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); }
.about__stat { display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 0 0; }
.about__stat + .about__stat { border-left: var(--line); padding-left: 16px; }
.about__stat strong {
  font-weight: 900; font-variation-settings: "wdth" 125; letter-spacing: -.05em; line-height: .8;
  font-size: clamp(64px, 9vw, 170px);
}
.about__stat .mono { color: var(--muted); }

/* clients: a quiet credits block, label left, names as small running text */
.clients {
  margin-top: clamp(60px, 8vw, 120px); display: grid; grid-template-columns: 1fr 3fr; gap: var(--pad);
  border-top: var(--line); padding-top: 12px;
}
.clients__head { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.clients__list { list-style: none; display: block; line-height: 1.9; }
.clients__list li { display: inline; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); transition: color .3s; }
.clients__list li::after { content: "  /  "; white-space: pre; opacity: .45; }
.clients__list li:last-child::after { content: ""; }
.clients__list li:hover { color: var(--ink); }

.statement { padding: clamp(80px, 12vw, 180px) var(--pad) clamp(40px, 6vw, 90px); text-align: center; }
.statement__text {
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(40px, 7.4vw, 140px); line-height: .86; letter-spacing: -.045em; max-width: 14ch; margin: 0 auto;
}
.statement__by { display: block; margin-top: 28px; color: var(--muted); }

.journey { padding: clamp(60px, 9vw, 140px) var(--pad) clamp(80px, 12vw, 180px); }
.jobs { list-style: none; margin-top: clamp(40px, 5vw, 80px); border-bottom: var(--line); }
.job {
  position: relative; display: grid; grid-template-columns: 1fr 2fr 2fr; gap: var(--pad); align-items: start;
  border-top: var(--line); padding: clamp(18px, 2vw, 30px) 0;
}
.job__years { padding-top: .6em; }
.job__company {
  font-weight: 900; font-variation-settings: "wdth" 125; text-transform: uppercase;
  font-size: clamp(32px, 4.2vw, 80px); line-height: .88; letter-spacing: -.045em;
  transition: transform .7s var(--ease);
}
/* transform only: no reflow on hover */
.job:hover .job__company { transform: translateX(12px); }
.job__body { display: flex; flex-direction: column; gap: 10px; }
.job__role { color: var(--muted); }
.job__body p { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.4; font-weight: 500; max-width: 46ch; }
.job__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.job__tags li { border: 1px solid currentColor; padding: 4px 9px; border-radius: 99px; font-size: 11px; }
.job--current .job__years::before { content: "● "; color: var(--acid); }
html[data-theme="light"] .job--current .job__years::before { color: #6E8A00; }
.journey__cv { display: inline-block; margin-top: 24px; }

.contact__actions { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 899px) {
  .about__stats { grid-template-columns: 1fr; }
  .about__stat + .about__stat { border-left: 0; border-top: var(--line); padding-left: 0; }
  .about__stat { padding-bottom: 18px; }
  .job { grid-template-columns: 1fr; gap: 10px; }
  .clients { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Brand kit (js/brand.js): wordmark, North Star marks, mono pattern strips
   ========================================================================== */
.brand-wm { display: inline-block; aspect-ratio: 436 / 100; }
.brand-wm svg, .footer__giant--brand svg { width: 100%; height: 100%; display: block; overflow: visible; fill: currentColor; }
.nav__logo .brand-wm { height: 19px; }
.b-star { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.loader__star { display: inline-block; width: .85em; height: 1.22em; margin-left: .35em; vertical-align: -.3em; color: var(--acid); }
.band__star { display: inline-block; width: .72em; height: 1.04em; margin-right: .35em; padding: 0 !important; vertical-align: -.16em; }
.band--acid .band__star { color: var(--ink); }
.badge__core { color: var(--acid); }
.badge__core .b-star { width: 46%; height: 64%; }

/* tiles always butt up against each other: no gutters. Three sizes (1×, 2×, 4×) on one grid of small cells */
.brand-strip { --cols: 40; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: var(--cols) / 4; background: #0C0C0C; }
.brand-strip .bt { position: relative; min-width: 0; }
.brand-strip svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform .45s var(--ease); }
.brand-strip svg.is-swap { transform: scale(0); }
.brand-strip--footer { margin: 0 calc(var(--pad) * -1) 0; }

.footer__giant--brand { display: block; width: 100%; aspect-ratio: 436 / 148; line-height: 0; transform: none; padding-top: 0; margin: clamp(10px, 2vw, 30px) 0 0; overflow: hidden; }
.footer__giant--brand svg { overflow: visible; }


/* scattered tile clusters in project headers */
.chero__tiles { position: absolute; left: var(--pad); right: var(--pad); z-index: 0; pointer-events: none; }
.chero__meta, .chero__foot { position: relative; z-index: 1; }
.scatter-tile { position: absolute; transform: scale(0); transition: transform .7s var(--ease-out); }
.chero__tiles.is-in .scatter-tile { transform: scale(1); }
.scatter-tile svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform .45s var(--ease); }
.scatter-tile svg.is-swap { transform: scale(0); }

/* ---------- Work cards: a staircase of brand tiles flush in the corner ---------- */
.brand-corner {
  position: absolute; right: 0; bottom: 0; z-index: 3; width: clamp(84px, 22%, 168px); aspect-ratio: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none;
}
.brand-corner .bt { position: relative; min-width: 0; }
.brand-corner svg { width: 100%; height: 100%; display: block; overflow: visible; transition: transform .45s var(--ease); }
.brand-corner svg.is-swap { transform: scale(0); }
.brand-corner .bt.is-more { transform: scale(0); transform-origin: var(--ox, 100%) var(--oy, 100%); transition: transform .55s var(--ease-out); }
.brand-corner[data-corner^="t"] { top: 0; bottom: auto; --oy: 0%; }
.brand-corner[data-corner$="l"] { left: 0; right: auto; --ox: 0%; }
/* under: the card's UI sits on top of the tiles */
.brand-corner[data-under] { z-index: 0; }
.v-eco > :not(.brand-corner), .v-mgb > :not(.brand-corner), .v-crown > :not(.brand-corner) { z-index: 1; } /* abs-positioned or grid items: z-index applies without changing position */
.brand-corner .bt.is-more:last-child { transition-delay: .07s; }
@media (hover: hover) { :is(.card:hover, .card.is-active) .brand-corner .bt.is-more { transform: scale(1); } }