/* =========================================================
   Mayuresh Khamkar — "Ink on paper"
   Mobile-first. Day = cream paper, navy ink. Night = swapped.
   ========================================================= */

/* ---------- tokens ---------- */
:root {
  --cream: #FCF1D0;
  --navy: #010736;
  --deep-fixed: #0D1C42;
  --tide-fixed: #22396F;

  --paper: #FCF1D0;
  --paper-2: #F4E5BA;
  --ink: #010736;
  --deep: #0D1C42;
  --tide: #22396F;
  --accent: #22396F;
  --bar2: #93A6D8;
  --line: rgba(1, 7, 54, .14);
  --line-strong: rgba(1, 7, 54, .34);
  --muted: rgba(1, 7, 54, .68);
  --card-edge: transparent;
  --shadow: 0 30px 60px -30px rgba(1, 7, 54, .45);
  --grain-op: .5;
  --grain-blend: normal;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.004 0 0 0 0 0.027 0 0 0 0 0.21 0 0 0 .16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  --display: "Bricolage Grotesque", "Arial Black", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 1320px;
  --nav-h: 72px;
  --radius: 18px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #010736; --paper-2: #0D1C42; --ink: #FCF1D0; --deep: #0D1C42; --tide: #22396F;
    --accent: #A3B4E0; --bar2: #22396F;
    --line: rgba(252, 241, 208, .14); --line-strong: rgba(252, 241, 208, .3); --muted: rgba(252, 241, 208, .68);
    --card-edge: rgba(252, 241, 208, .14); --shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
    --grain-op: .3; --grain-blend: normal;
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.99 0 0 0 0 0.95 0 0 0 0 0.82 0 0 0 .08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #010736; --paper-2: #0D1C42; --ink: #FCF1D0; --deep: #0D1C42; --tide: #22396F;
  --accent: #A3B4E0; --bar2: #22396F;
  --line: rgba(252, 241, 208, .14); --line-strong: rgba(252, 241, 208, .3); --muted: rgba(252, 241, 208, .68);
  --card-edge: rgba(252, 241, 208, .14); --shadow: 0 30px 60px -30px rgba(0, 0, 0, .7);
  --grain-op: .3; --grain-blend: normal;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.99 0 0 0 0 0.95 0 0 0 0 0.82 0 0 0 .08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color .45s ease, color .45s ease;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img, svg, canvas, picture { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }

.grain { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain-op); mix-blend-mode: var(--grain-blend); background-image: var(--grain); }

.container {
  width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}
.section { position: relative; padding-block: clamp(80px, 13vw, 168px); }

/* ---------- type ---------- */
.mono { font-family: var(--mono); font-size: 14px; letter-spacing: .01em; }
.muted { color: var(--muted); }
.label { font: 500 13px/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; }
.eyebrow { font: 500 clamp(13px, 1.2vw, 16px)/1.4 var(--mono); color: var(--muted); }
.h-sec { font: 700 clamp(40px, 7.4vw, 104px)/.95 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 46ch; }
em.acc, .acc { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: -.01em; }
strong { font-weight: 600; }

/* ---------- buttons, chips ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 24px; border-radius: 999px;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink);
  font: 600 16px/1 var(--display); text-decoration: none; letter-spacing: -.01em;
  transition: transform .25s var(--ease-out), background-color .25s, color .25s;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips > span, .chip { font: 500 13px var(--mono); padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); }
.chip { min-height: 40px; transition: background-color .2s, color .2s; }
.chip:hover { background: var(--ink); color: var(--paper); }
.chip-label { border-color: transparent !important; color: var(--muted) !important; padding-left: 0 !important; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent; display: grid; place-items: center; padding: 0; color: var(--ink);
  transition: background-color .2s;
}
.icon-btn:hover { background: var(--paper-2); }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  padding-top: env(safe-area-inset-top, 0px);
  pointer-events: none;
}
.nav-inner {
  pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--nav-h); margin: 0 auto; max-width: calc(var(--max) + 2 * var(--gutter));
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
  transition: max-width .6s var(--ease-io), height .4s var(--ease-io), margin .6s var(--ease-io), background-color .4s, color .4s, border-radius .6s var(--ease-io), padding .6s var(--ease-io);
}
.nav.is-scrolled .nav-inner {
  max-width: 820px; height: 60px; margin-top: 12px; border-radius: 999px;
  background: var(--ink); color: var(--paper); padding-left: 22px; padding-right: 8px;
  box-shadow: var(--shadow);
}
@media (max-width: 860px) { .nav.is-scrolled .nav-inner { margin-left: 12px; margin-right: 12px; } }
.nav.is-scrolled .icon-btn { border-color: color-mix(in srgb, var(--paper) 30%, transparent); color: var(--paper); }
.nav.is-scrolled .icon-btn:hover { background: color-mix(in srgb, var(--paper) 14%, transparent); }
.nav.is-scrolled .nav-cta { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.logo { font: 800 24px/1 var(--display); letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.logo span { color: var(--accent); }
.nav.is-scrolled .logo span { color: inherit; }
.nav-links { display: none; gap: 28px; font: 500 14px var(--mono); }
.nav-links a { text-decoration: none; opacity: .75; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-tools { display: flex; align-items: center; gap: 8px; }
.nav-cta { display: none; }
@media (min-width: 600px) { .nav-cta { display: inline-flex; } }
@media (min-width: 960px) { .nav-links { display: flex; } .menu-btn { display: none; } }

.eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i { width: 3px; height: 100%; background: currentColor; border-radius: 2px; transform-origin: bottom; transform: scaleY(.3); }
.is-music .eq i { animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .3s; } .eq i:nth-child(3) { animation-delay: .15s; } .eq i:nth-child(4) { animation-delay: .45s; }
.sound-btn[aria-pressed="false"] .eq i { transform: scaleY(.12); animation: none; }
.sound-btn[aria-pressed="false"] { opacity: .6; }
@keyframes eq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.theme-knob { width: 18px; height: 18px; border-radius: 50%; background: currentColor; transition: box-shadow .4s var(--ease-out), background-color .4s; }
[data-theme="dark"] .theme-knob { background: transparent; box-shadow: inset 6px -3px 0 0 currentColor; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-knob { background: transparent; box-shadow: inset 6px -3px 0 0 currentColor; } }

.burger { width: 20px; height: 12px; position: relative; display: block; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease-out), top .35s var(--ease-out); }
.burger i:first-child { top: 0; } .burger i:last-child { top: 10px; }
.menu-open .burger i:first-child { top: 5px; transform: rotate(45deg); }
.menu-open .burger i:last-child { top: 5px; transform: rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 75; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: center; gap: 32px;
  padding: calc(var(--nav-h) + 24px + env(safe-area-inset-top, 0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  clip-path: circle(0% at calc(100% - 40px) 36px);
  transition: clip-path .7s var(--ease-io);
}
.menu.is-open { clip-path: circle(150% at calc(100% - 40px) 36px); }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font: 700 clamp(44px, 13vw, 88px)/1.05 var(--display); letter-spacing: -.045em; text-decoration: none; }
.menu-foot { font: 500 14px var(--mono); opacity: .7; word-break: break-all; }
.menu-open .nav-inner { color: var(--paper); }
.menu-open .nav .icon-btn { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); }

/* ---------- cursor (mouse & trackpad only): a tiny spider ---------- */
.cursor { display: none; }
@media all {
  .has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; transition: opacity .3s; }
  .cursor-spider { position: absolute; left: 0; top: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; color: var(--ink); transition: opacity .2s; }
  .cursor-spider svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .cursor-spider path { fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; }
  .cursor-spider circle, .cursor-spider ellipse { fill: currentColor; }
  .cursor.is-moving .legs-l { animation: legWalk .16s ease-in-out infinite alternate; }
  .cursor.is-moving .legs-r { animation: legWalk .16s ease-in-out -.08s infinite alternate-reverse; }
  .cursor-thread { position: absolute; left: 0; top: 0; width: 1px; height: 1px; background: var(--ink); transform-origin: 0 0; opacity: 0; transition: opacity .2s; }
  .cursor.is-link .cursor-thread { opacity: .55; }
  .cursor-ring {
    position: absolute; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
    background: var(--ink); display: grid; place-items: center; opacity: 0; transform-origin: center;
    transition: opacity .25s;
  }
  .cursor-label { font: 600 13px var(--display); color: var(--paper); white-space: nowrap; }
  .cursor.is-label .cursor-ring { opacity: 1; }
  .cursor.is-label .cursor-spider { opacity: 0; }
  .cursor.is-hidden { opacity: 0; }
}
@keyframes legWalk { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* ---------- reveal on scroll (only hidden when JS + motion are on) ---------- */
.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 16px); overflow: hidden; }
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: end; }
.hero-copy { position: relative; z-index: 3; padding-top: 12px; }
.hero-name { font: 700 clamp(52px, 14.5vw, 176px)/.9 var(--display); letter-spacing: -.055em; margin: 10px 0 18px; }
.hero-name .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-name .ln > span { display: inline-block; }
.motion .hero-name .ln > span { transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.motion .hero-name .ln:nth-child(2) > span { transition-delay: .12s; }
.motion .is-ready .hero-name .ln > span, .motion.is-ready .hero-name .ln > span { transform: none; }
.hero-sub { font-size: clamp(17px, 1.6vw, 21px); max-width: 34ch; color: var(--muted); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-art { position: relative; z-index: 1; width: 100%; max-width: 680px; margin: 0 auto; aspect-ratio: 1100 / 884; align-self: end; }
@supports not (aspect-ratio: 1) { .hero-art { height: 0; padding-bottom: 80.27%; } }
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 76%, transparent 100%); }
.hero-duo { z-index: 2; }
/* glitch: on hover/tap the photo splits into red + cyan and a few slices jump sideways */
.hero-glitch { position: absolute; inset: 0; z-index: 3; pointer-events: none; visibility: hidden; }
.hero-glitch i { position: absolute; inset: 0; background: url("/assets/img/hero-mask.webp") 50% 100% / contain no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 76%, transparent 100%); }
.hero-art.is-glitch .hero-glitch { visibility: visible; }
.hero-art.is-glitch .hero-duo img { animation: rgbSplit .6s steps(1) both; }
.hero-art.is-glitch .hero-glitch i:nth-child(1) { animation: slice1 .6s steps(1) both; }
.hero-art.is-glitch .hero-glitch i:nth-child(2) { animation: slice2 .6s steps(1) both; }
.hero-art.is-glitch .hero-glitch i:nth-child(3) { animation: slice3 .6s steps(1) both; }
@keyframes rgbSplit {
  0%   { filter: drop-shadow(-7px 0 rgba(255, 40, 80, .8)) drop-shadow(7px 0 rgba(40, 220, 255, .8)); transform: translateX(3px); }
  20%  { filter: drop-shadow(5px 2px rgba(255, 40, 80, .8)) drop-shadow(-6px -2px rgba(40, 220, 255, .8)); transform: translateX(-4px) skewX(-2deg); }
  40%  { filter: drop-shadow(-3px 0 rgba(255, 40, 80, .7)) drop-shadow(3px 0 rgba(40, 220, 255, .7)); transform: translateX(2px); }
  60%  { filter: drop-shadow(8px -1px rgba(255, 40, 80, .8)) drop-shadow(-8px 1px rgba(40, 220, 255, .8)); transform: translateX(-2px) skewX(1.5deg); }
  80%  { filter: drop-shadow(-2px 0 rgba(255, 40, 80, .5)) drop-shadow(2px 0 rgba(40, 220, 255, .5)); transform: none; }
  100% { filter: none; transform: none; }
}
@keyframes slice1 {
  0%   { clip-path: inset(18% 0 70% 0); transform: translateX(-22px); }
  25%  { clip-path: inset(40% 0 48% 0); transform: translateX(18px); }
  50%  { clip-path: inset(10% 0 82% 0); transform: translateX(-12px); }
  75%  { clip-path: inset(62% 0 30% 0); transform: translateX(26px); }
  100% { clip-path: inset(50% 0 50% 0); transform: none; }
}
@keyframes slice2 {
  0%   { clip-path: inset(55% 0 36% 0); transform: translateX(16px); filter: hue-rotate(160deg) saturate(2); }
  30%  { clip-path: inset(28% 0 64% 0); transform: translateX(-24px); filter: none; }
  60%  { clip-path: inset(72% 0 20% 0); transform: translateX(12px); }
  100% { clip-path: inset(50% 0 50% 0); transform: none; filter: none; }
}
@keyframes slice3 {
  0%   { clip-path: inset(33% 0 60% 0); transform: translateX(10px); }
  35%  { clip-path: inset(80% 0 12% 0); transform: translateX(-18px); }
  70%  { clip-path: inset(24% 0 70% 0); transform: translateX(20px); filter: brightness(1.4); }
  100% { clip-path: inset(50% 0 50% 0); transform: none; filter: none; }
}
/* the glitch only fires when the visitor hovers/taps, so it keeps its timing even with reduced motion */
@media (prefers-reduced-motion: reduce) { .hero-art.is-glitch .hero-duo img, .hero-art.is-glitch .hero-glitch i { animation-duration: .6s !important; } }
.hero-ink { position: absolute; inset: -6% -10% 0 -6%; z-index: 1; pointer-events: none; }
.goo { position: absolute; inset: 0; filter: url(#goo); }
.blob { position: absolute; border-radius: 50%; background: var(--tide); }
.b1 { width: 46%; aspect-ratio: 1; left: 30%; top: 2%; animation: drift1 11s ease-in-out infinite; }
.b2 { width: 26%; aspect-ratio: 1; left: 66%; top: 28%; animation: drift2 13s ease-in-out infinite; }
.b3 { width: 16%; aspect-ratio: 1; left: 16%; top: 40%; animation: drift3 9s ease-in-out infinite; }
.b-follow { width: 13%; aspect-ratio: 1; left: 0; top: 0; transform: translate(-200%, -200%); }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-6%, 8%) scale(1.07); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40%, -24%) scale(.86); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30%, -50%) scale(1.2); } }
.sticker { position: absolute; right: 4%; bottom: 8%; z-index: 4; width: clamp(84px, 13vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: clamp(16px, 2vw, 24px); }
.sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.sticker text { font: 500 8.4px var(--mono); fill: currentColor; letter-spacing: 1.5px; }
@keyframes spin { to { transform: rotate(360deg); } }
.scroll-cue { position: absolute; left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 4; font: 500 13px var(--mono); color: var(--muted); text-decoration: none; display: none; }
.scroll-cue span { display: inline-block; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

@media (min-width: 900px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; }
  .hero-copy { padding-bottom: clamp(56px, 12vh, 120px); }
  .hero-name { font-size: clamp(60px, 8.4vw, 150px); }
  .hero-art { max-width: none; margin: 0 calc(-1 * var(--gutter)) 0 -6%; width: auto; }
  .scroll-cue { display: block; }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 520px) {
  .hero-inner { grid-template-columns: 1fr 1fr; }
  .hero-name { font-size: clamp(40px, 9vw, 80px); }
}

/* ---------- playground ---------- */
.pg-grid { display: grid; gap: 32px; }
.pg-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.pg-count { color: var(--ink); }
.pg-stage { position: relative; height: clamp(380px, 64vh, 640px); border-bottom: 2px solid var(--line-strong); touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.pg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-fallback { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 0 4px; }
.pg-ready .pg-fallback { display: none; }
.pg-l { width: clamp(52px, 9vw, 84px); aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 14px; font: 800 clamp(32px, 6vw, 56px)/1 var(--display); background: var(--paper); }
.pg-l.t1 { background: var(--ink); color: var(--paper); transform: rotate(-6deg); }
.pg-l.t2 { background: var(--tide); color: var(--cream); border-color: var(--tide); transform: rotate(5deg); }
.pg-toast { position: absolute; left: 50%; top: 22%; transform: translate(-50%, 10px); background: var(--cream); color: var(--navy); font: 600 15px var(--display); padding: 10px 16px; border-radius: 12px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s var(--ease-out); white-space: nowrap; }
.pg-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) {
  .pg-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 56px; }
}

/* ---------- about + badge ---------- */
.about { overflow: hidden; }
.about-grid { display: grid; gap: 40px; }
.badge-stage { position: relative; height: clamp(500px, 70vh, 620px); }
.lanyard { --a: 0deg; position: absolute; left: 50%; top: calc(-1 * clamp(80px, 12vw, 140px)); width: 0; height: 0; transform: rotate(var(--a)); transform-origin: 0 0; will-change: transform; }
.strap { position: absolute; left: -15px; top: 0; width: 30px; height: clamp(250px, 34vh, 330px); background-color: var(--tide); background-image: repeating-linear-gradient(180deg, transparent 0 18px, rgba(252, 241, 208, .3) 18px 21px); border-radius: 0 0 6px 6px; }
.clasp { position: absolute; left: -22px; top: calc(clamp(250px, 34vh, 330px) - 10px); width: 44px; height: 30px; border-radius: 8px; background: var(--paper-2); border: 2px solid var(--ink); }
.badge {
  --w: clamp(210px, 24vw, 280px);
  position: absolute; left: calc(var(--w) / -2); top: calc(clamp(250px, 34vh, 330px) + 14px);
  width: var(--w); aspect-ratio: 11 / 15; padding: 0; border: 0; background: none; perspective: 900px;
  touch-action: none; -webkit-tap-highlight-color: transparent; text-align: left;
}
@supports not (aspect-ratio: 1) { .badge { height: calc(var(--w) * 1.36); } }
.badge-3d { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease-io); }
.badge.is-flipped .badge-3d { transform: rotateY(180deg); }
.badge-face { position: absolute; inset: 0; border-radius: 20px; padding: 34px 20px 18px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: var(--shadow); }
.badge-face::before { content: ""; position: absolute; left: 50%; top: 12px; width: 54px; height: 12px; margin-left: -27px; border-radius: 12px; background: var(--paper); }
.badge-front { background: var(--ink); color: var(--paper); }
.badge-back { background: var(--tide-fixed); color: var(--cream); transform: rotateY(180deg); justify-content: space-between; }
.badge-row { display: flex; justify-content: space-between; font: 500 11px var(--mono); letter-spacing: .1em; opacity: .7; }
.badge-emblem { position: relative; isolation: isolate; width: 52%; aspect-ratio: 1; margin: 8px auto; display: grid; place-items: center; font: 800 clamp(40px, 5vw, 56px)/1 var(--display); letter-spacing: -.05em; }
.badge-emblem::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed currentColor; opacity: .55; animation: spin 12s linear infinite; }
.badge-emblem::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: conic-gradient(from 0deg, var(--bar2), transparent 72%); z-index: -1; animation: spin 4s linear infinite reverse; }
.badge-name { font: 700 clamp(22px, 2.4vw, 28px)/1.02 var(--display); letter-spacing: -.03em; }
.badge-role { font: 500 11px var(--mono); letter-spacing: .1em; opacity: .7; }
.badge-code { margin-top: auto; height: 28px; background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 7px, currentColor 7px 8px, transparent 8px 13px, currentColor 13px 18px, transparent 18px 22px); opacity: .85; }
.badge-big { font: 700 clamp(28px, 3vw, 36px)/1 var(--display); letter-spacing: -.03em; }
.badge-qr { width: 46%; aspect-ratio: 1; align-self: center; border: 6px solid var(--cream); background: repeating-conic-gradient(var(--cream) 0 25%, transparent 0 50%) 0 0 / 20% 20%; }
.badge-small { font: 500 11px var(--mono); opacity: .8; }
.about-copy { display: flex; flex-direction: column; gap: 22px; }
.about-para { font: 600 clamp(26px, 3.4vw, 48px)/1.14 var(--display); letter-spacing: -.03em; text-wrap: pretty; }
.about-para .w { transition: opacity .25s linear; }
.certs ul { display: grid; gap: 6px; margin-top: 10px; }
.certs li { font-size: 15px; color: var(--muted); padding-left: 18px; position: relative; }
.certs li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); font-size: 11px; top: 4px; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 64px; }
  .badge-stage { height: clamp(520px, 72vh, 680px); }
}

/* ---------- journey: a silk rope with milestones shot out left and right ---------- */
.j-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.j-stage { position: relative; }
/* phones: rope down the left edge, every card shoots out to the right */
.j-rope { position: absolute; left: 0; top: 0; width: 28px; height: 100%; overflow: visible; }
.j-rope path { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--jp, 1)); }
.j-core { stroke-width: 1.6; opacity: .9; }
.j-s1, .j-s2 { stroke-width: 1.2; opacity: .55; }
.j-tip { position: absolute; left: 14px; top: 0; z-index: 2; transform: translate(-50%, var(--jy, 0px)); pointer-events: none; display: none; }
.j-tip b { display: none; margin-top: 10px; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 4px var(--paper); }
.j-tip::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--line-strong); }
.j-list { display: flex; flex-direction: column; gap: 18px; padding-left: 52px; }
.j-item { position: relative; padding: 18px 20px; border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.j-web { position: absolute; top: 50%; right: 100%; width: 38px; height: 1.5px; margin-top: -.75px; background: var(--ink); transform-origin: 0 50%; }
.j-web::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.j-when { display: block; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.j-title { font: 700 clamp(20px, 2vw, 26px)/1.2 var(--display); letter-spacing: -.025em; margin-top: 4px; }
.j-line { font-size: 15.5px; color: var(--muted); margin-top: 4px; }

/* armed by JS: cards wait for their web. Without JS (or with reduced motion) everything just shows. */
.j-armed .j-tip { display: block; }
.j-armed .j-web { transform: scaleX(0); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.j-armed .j-item { opacity: 0; transform: translateX(-22px) scale(.86); transition: opacity .28s ease, transform .6s cubic-bezier(.2, 1.5, .4, 1), box-shadow .3s; }
.j-armed .j-item.is-on { opacity: 1; transform: none; transition-delay: .16s; }
.j-armed .j-item.is-on .j-web { transform: none; transition-delay: 0s; }
.j-armed .j-item.is-now { box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow); }

@media (min-width: 900px) {
  .js-pin .journey { padding-block: 0; }
  .js-pin .journey-pin { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: 88px 40px; }
  .journey-pin > .container { width: 100%; }
  .j-head { margin-bottom: 28px; }
  /* the rope runs down the centre; cards alternate either side of it */
  .j-stage { height: max(460px, calc(100svh - 300px)); }
  .j-rope { left: 50%; margin-left: -14px; }
  .j-tip { left: 50%; }
  .j-tip b { display: block; }
  .j-list { position: absolute; inset: 0; padding: 0; display: block; }
  .j-item { position: absolute; width: calc(50% - 64px); top: calc(var(--i) / max(1, var(--n) - 1) * (100% - 132px)); }
  .j-item.j-l { left: 0; }
  .j-item.j-r { right: 0; }
  .j-item .j-web { width: 64px; }
  .j-item.j-l .j-web { right: auto; left: 100%; transform-origin: 100% 50%; }
  .j-item.j-l .j-web::after { right: auto; left: -3px; }
  .j-item.j-r .j-web { right: 100%; transform-origin: 0 50%; }
  .j-armed .j-item.j-l { transform: translateX(26px) scale(.86); }
  .j-armed .j-item.j-r { transform: translateX(-26px) scale(.86); }
  .j-armed .j-item.is-on { transform: none; }
  .j-armed .j-item.j-l.is-on .j-web, .j-armed .j-item.j-r.is-on .j-web { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .j-armed .j-item, .j-armed .j-web { transition: none; } }

/* ---------- stack ---------- */
.stack { overflow: hidden; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; perspective: 1200px; }
.tile { min-height: 150px; border-radius: 20px; border: 2px solid var(--ink); background: var(--paper); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; transform-style: preserve-3d; will-change: transform; }
.tile-label { font: 500 12px var(--mono); color: var(--muted); }
.tile-title { font: 600 clamp(19px, 2vw, 26px)/1.1 var(--display); letter-spacing: -.02em; }
.tile-big { grid-column: span 2; background: var(--ink); color: var(--paper); border-color: var(--ink); min-height: 260px; }
.tile-big .tile-label { color: var(--paper); opacity: .65; }
.tile-big .tile-title { font-size: clamp(26px, 3.4vw, 46px); }
.tile-tide { background: var(--tide-fixed); color: var(--cream); border-color: var(--tide-fixed); }
.tile-tide .tile-label { color: rgba(252, 241, 208, .7); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: clamp(80px, 12vw, 150px); }
.bars i { flex: 1; height: var(--h); background: var(--paper); border-radius: 6px; transform-origin: bottom; }
.bars i:nth-child(odd) { background: var(--bar2); }
.motion .bars i { transform: scaleY(.06); transition: transform 1.1s var(--ease-out); }
.motion .tile-big.is-in .bars i { transform: none; }
.bars i:nth-child(2) { transition-delay: .08s; } .bars i:nth-child(3) { transition-delay: .16s; } .bars i:nth-child(4) { transition-delay: .24s; } .bars i:nth-child(5) { transition-delay: .32s; } .bars i:nth-child(6) { transition-delay: .4s; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(190px, auto)); gap: 16px; }
  .tile-big { grid-row: span 2; }
}
.marquee { margin-top: clamp(48px, 7vw, 88px); background: var(--tide-fixed); color: var(--cream); overflow: hidden; transform: rotate(-2deg); width: 106%; margin-left: -3%; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-set { display: flex; flex: none; }
.marquee span { flex: none; padding: 18px 0 18px 28px; font: 700 clamp(26px, 4vw, 52px)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.marquee b { font-weight: 400; opacity: .7; margin-left: 24px; }

/* ---------- work ---------- */
.work-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 16px; margin-bottom: 28px; }
.work-count { color: var(--muted); }
.work-progress { grid-column: 1 / -1; height: 2px; background: var(--line); }
.work-progress i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(.25); transition: transform .3s; }
.work-viewport { overflow: hidden; }
.work-track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding: 4px max(var(--gutter), env(safe-area-inset-left, 0px)) 18px; scroll-padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  scrollbar-width: none;
}
.work-track::-webkit-scrollbar { display: none; }
.work-card { flex: 0 0 min(86vw, 520px); scroll-snap-align: start; }
.work-card a { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 420px; border-radius: 22px; background: var(--deep-fixed); color: var(--cream); text-decoration: none; overflow: hidden; padding: 12px; box-shadow: inset 0 0 0 1px var(--card-edge); transition: transform .5s var(--ease-out); }
.work-card a:hover { transform: translateY(-4px); }
.mock { position: relative; flex: 1; min-height: 240px; border-radius: 14px; background: var(--tide-fixed); overflow: hidden; }
.mock-par { position: absolute; inset: 0 -12%; transition: transform .2s linear; }
.mock i { position: absolute; display: block; background: rgba(252, 241, 208, .22); border-radius: 8px; }
.mock-shop i:nth-child(1) { left: 10%; right: 10%; top: 7%; height: 7%; }
.mock-shop i:nth-child(n+2):nth-child(-n+5) { top: 22%; width: 17%; height: 52%; }
.mock-shop i:nth-child(2) { left: 10%; } .mock-shop i:nth-child(3) { left: 30%; } .mock-shop i:nth-child(4) { left: 50%; } .mock-shop i:nth-child(5) { left: 70%; }
.mock-shop i:nth-child(n+6) { top: 28%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: rgba(252, 241, 208, .45); }
.mock-shop i:nth-child(6) { left: 14%; } .mock-shop i:nth-child(7) { left: 34%; } .mock-shop i:nth-child(8) { left: 54%; }
.mock-grid i { width: 25%; height: 36%; }
.mock-grid i:nth-child(1) { left: 10%; top: 8%; } .mock-grid i:nth-child(2) { left: 38%; top: 8%; background: rgba(252, 241, 208, .32); } .mock-grid i:nth-child(3) { left: 66%; top: 8%; }
.mock-grid i:nth-child(4) { left: 10%; top: 50%; background: rgba(252, 241, 208, .32); } .mock-grid i:nth-child(5) { left: 38%; top: 50%; } .mock-grid i:nth-child(6) { left: 66%; top: 50%; background: rgba(252, 241, 208, .32); }
.mock-grid i:nth-child(n+7) { display: none; }
.mock-shoes i:nth-child(-n+3) { top: 8%; height: 8%; width: 12%; border-radius: 99px; }
.mock-shoes i:nth-child(1) { left: 10%; } .mock-shoes i:nth-child(2) { left: 24%; } .mock-shoes i:nth-child(3) { left: 38%; }
.mock-shoes i:nth-child(n+4):nth-child(-n+6) { top: 26%; width: 25%; height: 60%; }
.mock-shoes i:nth-child(4) { left: 10%; } .mock-shoes i:nth-child(5) { left: 38%; } .mock-shoes i:nth-child(6) { left: 66%; }
.mock-shoes i:nth-child(n+7) { top: 50%; width: 19%; height: 14%; border-radius: 60% 60% 14% 40%; background: rgba(252, 241, 208, .5); }
.mock-shoes i:nth-child(7) { left: 13%; } .mock-shoes i:nth-child(8) { left: 41%; }
.mock-learn i:nth-child(1) { left: 10%; top: 8%; width: 46%; height: 9%; }
.mock-learn i:nth-child(2), .mock-learn i:nth-child(4), .mock-learn i:nth-child(6) { left: 10%; width: 50%; height: 5%; }
.mock-learn i:nth-child(2) { top: 30%; } .mock-learn i:nth-child(4) { top: 46%; } .mock-learn i:nth-child(6) { top: 62%; }
.mock-learn i:nth-child(3), .mock-learn i:nth-child(5), .mock-learn i:nth-child(7) { left: 10%; height: 5%; background: rgba(242, 217, 154, .75); }
.mock-learn i:nth-child(3) { top: 30%; width: 40%; } .mock-learn i:nth-child(5) { top: 46%; width: 27%; } .mock-learn i:nth-child(7) { top: 62%; width: 17%; }
.mock-learn i:nth-child(8) { left: 66%; top: 28%; width: 24%; height: 50%; }
.live-badge { position: absolute; right: 24px; top: 24px; z-index: 2; background: var(--cream); color: var(--navy); font: 600 12px var(--mono); padding: 5px 11px; border-radius: 99px; letter-spacing: .06em; text-transform: uppercase; }
.live-badge::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2E8B57; margin-right: 6px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.work-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 18px 8px 8px; }
.work-name { font: 700 clamp(24px, 2.6vw, 34px)/1.05 var(--display); letter-spacing: -.03em; }
.work-name span { display: block; font: 400 13px var(--mono); opacity: .65; letter-spacing: 0; margin-top: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font: 500 12px var(--mono); border: 1px solid rgba(252, 241, 208, .4); border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
@media (min-width: 900px) {
  .js-pin .work { padding-block: 0; }
  .js-pin .work-pin { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 96px 40px; }
  .js-pin .work-track { overflow: visible; scroll-snap-type: none; width: max-content; padding-bottom: 0; }
  .work-card { flex-basis: min(60vw, 860px); }
  .work-card a { min-height: min(64vh, 600px); }
}


/* project mocks: Triune Trades (export & import) and TriuneDigi (digital services) */
.mock-trade i:nth-child(1) { left: 10%; right: 10%; top: 8%; height: 7%; }
.mock-trade i:nth-child(2) { left: 10%; top: 24%; width: 38%; height: 9%; background: rgba(252, 241, 208, .45); }
.mock-trade i:nth-child(3) { left: 10%; top: 37%; width: 30%; height: 4%; }
.mock-trade i:nth-child(n+4):nth-child(-n+7) { bottom: 14%; width: 15%; height: 22%; border-radius: 4px; background: rgba(252, 241, 208, .3); }
.mock-trade i:nth-child(4) { left: 52%; } .mock-trade i:nth-child(5) { left: 68%; background: rgba(242, 217, 154, .6); } .mock-trade i:nth-child(6) { left: 52%; bottom: 38%; } .mock-trade i:nth-child(7) { left: 68%; bottom: 38%; }
.mock-trade i:nth-child(8) { left: 10%; bottom: 14%; width: 36%; height: 30%; border-radius: 50%; background: transparent; border: 2px dashed rgba(252, 241, 208, .45); }
.mock-digi i:nth-child(1) { left: 10%; top: 8%; width: 46%; height: 12%; background: rgba(252, 241, 208, .45); }
.mock-digi i:nth-child(2) { left: 10%; top: 25%; width: 34%; height: 4%; }
.mock-digi i:nth-child(n+3):nth-child(-n+8) { width: 24%; height: 24%; border-radius: 12px; }
.mock-digi i:nth-child(3) { left: 10%; top: 40%; } .mock-digi i:nth-child(4) { left: 38%; top: 40%; background: rgba(242, 217, 154, .6); } .mock-digi i:nth-child(5) { left: 66%; top: 40%; }
.mock-digi i:nth-child(6) { left: 10%; top: 68%; background: rgba(252, 241, 208, .4); } .mock-digi i:nth-child(7) { left: 38%; top: 68%; } .mock-digi i:nth-child(8) { left: 66%; top: 68%; border-radius: 50%; }

/* ---------- contact ---------- */
.contact { padding-bottom: clamp(96px, 14vw, 180px); }
.big-type { margin: 18px 0 clamp(36px, 6vw, 72px); font: 300 clamp(48px, 12vw, 190px)/.95 var(--display); letter-spacing: -.05em; }
.bt-line { display: block; white-space: nowrap; }
.bt-accent { color: var(--accent); }
.bt-line .ch { display: inline-block; font-variation-settings: "wght" var(--w, 300); font-weight: var(--w, 300); transition: font-weight .25s, font-variation-settings .25s; }
.contact-grid { display: grid; gap: 40px; }
.contact-form { display: grid; gap: 16px; max-width: 640px; }
.field { display: grid; gap: 6px; }
.field label { font: 500 13px var(--mono); color: var(--muted); }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--line-strong); background: var(--paper-2); color: var(--ink);
  font: 16px/1.5 var(--body); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--line); }
.field.is-error input, .field.is-error textarea { border-color: #C0392B; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.btn-magnet { min-height: 58px; padding: 16px 32px; font-size: 18px; }
.btn-magnet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper); border-radius: 40% 40% 0 0; transform: translateY(105%); transition: transform .45s var(--ease-io), border-radius .45s; }
.btn-magnet:hover::before { transform: none; border-radius: 0; }
.btn-magnet:hover { color: var(--ink); }
.btn-magnet span { pointer-events: none; }
.form-status { font: 500 14px var(--mono); }
.form-status.is-ok { color: var(--accent); }
.form-status.is-err { color: #C0392B; }
[data-theme="dark"] .form-status.is-err { color: #F4A7A0; }
.contact-side { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.email-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; border: 0; background: none; text-align: left; font: 700 clamp(19px, 2.2vw, 30px)/1.15 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; color: var(--ink); max-width: 100%; }
.email-copy small { font: 500 13px var(--mono); color: var(--muted); letter-spacing: 0; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; } }

/* ---------- footer ---------- */
.footer { position: relative; background: var(--ink); color: var(--paper); padding: clamp(56px, 8vw, 96px) 0 calc(28px + env(safe-area-inset-bottom, 0px)); border-radius: 50% 50% 0 0 / 40px 40px 0 0; margin-top: -1px; }
.motion .footer { clip-path: inset(var(--fclip, 0%) 0 0 0 round 0); }
.footer-inner { display: flex; flex-direction: column; gap: 28px; }
.footer-mail { font: 700 clamp(26px, 6vw, 84px)/1 var(--display); letter-spacing: -.04em; text-decoration: none; word-break: break-all; }
.footer-mail:hover { color: var(--accent); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font: 500 14px var(--mono); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-links a { text-decoration: none; opacity: .8; padding: 6px 0; } .footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-time { opacity: .75; padding: 6px 0; }
.footer-copy { font: 13px var(--mono); opacity: .55; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 140; transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); font: 600 15px var(--display); padding: 12px 20px; border-radius: 14px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .3s, transform .35s var(--ease-out); max-width: calc(100vw - 32px); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- page transition ---------- */
.ink-wipe { position: fixed; inset: 0; z-index: 130; background: var(--ink); pointer-events: none; clip-path: circle(0% at var(--ix, 50%) var(--iy, 50%)); }
.ink-wipe.is-in { transition: clip-path .7s var(--ease-io); clip-path: circle(150% at var(--ix, 50%) var(--iy, 50%)); }
.arrive .ink-wipe { clip-path: inset(0 0 0 0); }
.arrive.is-arrived .ink-wipe { transition: clip-path .8s var(--ease-io); clip-path: inset(0 0 100% 0); }

/* ---------- case study page ---------- */
.case { padding-top: calc(var(--nav-h) + 72px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(80px, 12vw, 160px); }
.case-back { font: 500 14px var(--mono); color: var(--muted); text-decoration: none; }
.case-back:hover { color: var(--ink); }
.case-title { font: 700 clamp(48px, 11vw, 160px)/.92 var(--display); letter-spacing: -.05em; margin: 22px 0 14px; word-break: break-word; }
.case-kind { font: 500 15px var(--mono); color: var(--muted); }
.case-hero { margin: clamp(36px, 6vw, 64px) 0; }
.case-hero .mock { min-height: clamp(260px, 46vw, 560px); border-radius: 24px; }
.case-body { display: grid; gap: 40px; }
.case-summary { font: 600 clamp(24px, 3vw, 40px)/1.18 var(--display); letter-spacing: -.03em; }
.case-points { display: grid; gap: 14px; }
.case-points li { position: relative; padding-left: 26px; color: var(--muted); font-size: 17px; }
.case-points li::before { content: "✦"; position: absolute; left: 0; color: var(--accent); }
.case-side { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.case-side .tags span { border-color: var(--line-strong); color: var(--ink); }
.case-next { display: block; margin-top: clamp(56px, 8vw, 96px); padding-top: 28px; border-top: 1px solid var(--line); text-decoration: none; }
.case-next small { font: 500 13px var(--mono); color: var(--muted); }
.case-next span { display: block; font: 700 clamp(36px, 7vw, 96px)/1 var(--display); letter-spacing: -.045em; margin-top: 8px; }
.case-next:hover span { color: var(--accent); }
@media (min-width: 900px) { .case-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 64px; } }

/* ---------- 404 ---------- */
.nf { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 96px var(--gutter); }
.nf h1 { font: 700 clamp(72px, 20vw, 220px)/.9 var(--display); letter-spacing: -.06em; }
.nf p { font: 15px var(--mono); color: var(--muted); margin: 14px 0 24px; }

/* ---------- very small screens (≤ 360px, e.g. older phones, smartwatches in browser mode) ---------- */
@media (max-width: 360px) {
  :root { --nav-h: 64px; }
  body { font-size: 16px; }
  .nav-tools { gap: 6px; }
  .icon-btn { width: 40px; height: 40px; }
  .hero-cta .btn { width: 100%; }
  .bento { grid-template-columns: 1fr; }
  .tile-big { grid-column: auto; }
}

/* ---------- large screens ---------- */
@media (min-width: 1800px) { body { font-size: 18px; } }

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- print ---------- */
@media print {
  .nav, .grain, .cursor, .loader, .playground, .deploy, .terminal, .marquee, .ink-wipe, .toast, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; }
  .footer { background: none; color: #000; }
}

/* ---------- theme switch: circle reveal via the View Transitions API ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* =========================================================
   v2 additions: intro, music player, reviews, hobbies, legal
   ========================================================= */

/* ---------- shared bits ---------- */
.link-btn { background: none; border: 0; padding: 6px 0; font: inherit; color: inherit; opacity: .8; cursor: pointer; }
.link-btn:hover { opacity: 1; text-decoration: underline; }
.form-note { font-size: 13.5px; margin-top: 2px; }
.form-note a { color: inherit; }
.field-row { display: grid; gap: 14px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field select { width: 100%; min-height: 52px; padding: 12px 40px 12px 16px; border-radius: 14px; border: 1.5px solid var(--line-strong); background-color: var(--paper-2); color: var(--ink); font: 16px/1.4 var(--body); -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--line); }
.opt { color: var(--muted); font-weight: 400; }
.hint { font-size: 12px; color: var(--muted); text-align: right; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--ink); }
.scroll-cue { display: none !important; }
.toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ---------- loader (first visit) ---------- */
.loader { display: none; }
.has-intro .loader { display: flex; position: fixed; inset: 0; z-index: 170; align-items: center; justify-content: center; background: var(--paper); color: var(--ink); overflow: hidden; overflow: clip;
  transition: transform .7s var(--ease-io), border-radius .7s var(--ease-io); }
.loader[hidden] { display: none !important; }
.loader.is-leaving { transform: translateY(-104%); border-radius: 0 0 50% 50% / 0 0 18% 18%; }
.ld-dots { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(circle, var(--line-strong) 1.2px, transparent 1.6px); background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 70% 30%, #000, transparent 70%); }
.loader .intro-web { position: absolute; top: 0; right: 0; width: min(72vw, 620px); height: min(72vw, 620px); pointer-events: none; }
.loader .intro-web path { fill: none; stroke: var(--ink); stroke-opacity: .35; stroke-width: 1.1; stroke-linecap: round; }
.ld-center { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: min(100%, 720px);
  padding: calc(24px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px)); }
.ld-kicker { font: 500 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ld-count { font: 800 clamp(96px, 24vw, 240px)/.86 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums;
  text-shadow: -3px 0 rgba(255, 59, 92, .55), 3px 0 rgba(46, 230, 255, .5); }
.ld-count small { font-size: .32em; margin-left: .08em; letter-spacing: 0; vertical-align: top; }
.ld-bar { width: 100%; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ld-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; }

/* ---------- hero story (webs + captions on the hero) ---------- */
.hero-inner { position: relative; z-index: 1; }
.hero-webs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .55; transition: opacity 1.4s ease; }
.hero-webs path { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linecap: round; }
.hero-webs path.ring { stroke-width: .9; }
.hero-webs.is-rest { opacity: .14; }
.hero.is-pulse .hero-webs { animation: webPulse .7s ease-out; }
@keyframes webPulse { 0% { opacity: 1; } 100% { opacity: .55; } }

/* performance: no live SVG blur on the blobs, no blended full-screen grain */
.goo { filter: none !important; }
.b-follow { display: none; }

/* ---------- music player ---------- */
.player { position: fixed; z-index: 85; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: var(--ink); color: var(--paper); box-shadow: var(--shadow); max-width: calc(100vw - 24px); }
.has-intro .player { display: none; }
.pl-btn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; padding: 0; font-size: 14px; flex: none; }
.pl-btn:hover { background: color-mix(in srgb, var(--paper) 16%, transparent); }
.pl-toggle { background: var(--paper); color: var(--ink); transition: transform .2s var(--ease-out); }
.pl-toggle:hover { background: var(--paper); transform: scale(1.06); }
.pl-icon { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.is-playing .pl-icon { width: 11px; height: 13px; border: 0; margin: 0; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.pl-now { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 500 13px var(--mono); min-width: 0; }
.pl-now:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }
.pl-title { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.pl-eq i { width: 2.5px; height: 100%; background: currentColor; border-radius: 2px; transform: scaleY(.3); transform-origin: bottom; }
.is-playing .pl-eq i { animation: eq 1s ease-in-out infinite; }
.pl-eq i:nth-child(2) { animation-delay: .25s; } .pl-eq i:nth-child(3) { animation-delay: .5s; }
.pl-list { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(330px, calc(100vw - 24px)); padding: 12px; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.pl-list[hidden] { display: none; }
.pl-head { font: 500 12px var(--mono); color: var(--muted); padding: 4px 8px 8px; letter-spacing: .06em; text-transform: uppercase; }
.pl-list ul { display: grid; gap: 2px; max-height: 50vh; overflow: auto; }
.pl-list li button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; min-height: 48px; }
.pl-list li button:hover { background: var(--paper-2); }
.pl-list li.is-current button { background: var(--ink); color: var(--paper); }
.pl-n { font: 500 12px var(--mono); opacity: .6; }
.pl-t { display: flex; flex-direction: column; font: 600 15px var(--display); }
.pl-t small { font: 400 12px var(--mono); opacity: .65; }
.pl-vol { display: flex; align-items: center; gap: 12px; padding: 12px 10px 4px; font: 500 12px var(--mono); color: var(--muted); }
.pl-vol input { flex: 1; accent-color: var(--ink); min-height: 32px; }
@media (max-width: 420px) { .pl-title { max-width: 96px; } }
@media print { .player { display: none !important; } }

/* ---------- reviews ---------- */
.rv-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 36px; }
.rv-stats { text-align: right; }
.rv-avg { display: inline-flex; align-items: flex-start; gap: 6px; font: 800 clamp(56px, 8vw, 104px)/1 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.rv-star { font-size: .42em; color: var(--accent); margin-top: .18em; }
@media (max-width: 599px) { .rv-stats { text-align: left; } }
.rv-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.rv-wall[hidden] { display: none; }
.rv-wall.is-drift { display: flex; flex-direction: column; gap: 14px; overflow: hidden; margin-inline: calc(-1 * var(--gutter));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv-row { overflow: hidden; }
.rv-wall.is-drift .rv-track { display: flex; gap: 14px; width: max-content; animation: rvDrift 70s linear infinite; }
.rv-wall.is-drift .rv-row-rev .rv-track { animation-direction: reverse; }
.rv-wall.is-drift:hover .rv-track, .rv-wall.is-drift:focus-within .rv-track { animation-play-state: paused; }
.rv-wall:not(.is-drift) .rv-row, .rv-wall:not(.is-drift) .rv-track { display: contents; }
@keyframes rvDrift { to { transform: translateX(calc(-50% - 7px)); } }
.rv-card { margin: 0; background: var(--paper-2); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.rv-wall.is-drift .rv-card { width: min(80vw, 380px); flex: none; }
.rv-card.is-new { animation: rvNew 1s var(--ease-out); }
@keyframes rvNew { from { opacity: 0; transform: translateY(20px) scale(.96); } }
.rv-stars { color: var(--accent); letter-spacing: 3px; font-size: 18px; }
.rv-text { margin: 0; }
.rv-text p { font-size: 17px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.rv-who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.rv-avatar { width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font: 700 17px var(--display); }
.rv-name { display: block; font: 600 16px/1.2 var(--display); }
.rv-meta { display: block; font: 13px var(--mono); color: var(--muted); }
.rv-empty { border: 1.5px dashed var(--line-strong); border-radius: 20px; padding: clamp(24px, 4vw, 40px); text-align: center; }
.rv-empty[hidden] { display: none; }
.rv-empty-title { font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 6px; }
.rv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.rv-dialog { width: min(640px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border: 0; border-radius: 24px; padding: 0; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); overflow: auto; }
.rv-dialog::backdrop { background: rgba(1, 7, 54, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rv-dialog[open] { animation: dlgIn .45s var(--ease-out); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.rv-form { padding: clamp(18px, 4vw, 28px); display: grid; gap: 14px; }
.rv-form-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rv-form-head h3 { font: 700 clamp(24px, 3vw, 30px)/1.1 var(--display); letter-spacing: -.03em; }
.rv-rating { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.rv-rating legend { font: 500 13px var(--mono); color: var(--muted); margin-bottom: 4px; padding: 0; }
.rv-rating label { font-size: 40px; line-height: 1; color: var(--line-strong); cursor: pointer; padding: 2px; transition: transform .2s var(--ease-out), color .15s; min-width: 44px; text-align: center; }
.rv-rating label:hover { transform: scale(1.15) rotate(-6deg); }
.rv-rating label.is-lit { color: var(--accent); }
.rv-rating input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.rv-form.is-sent { animation: sentPulse .6s var(--ease-out); }
@keyframes sentPulse { 50% { transform: scale(.985); } }

/* ---------- hobbies ---------- */
.hb-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hb-card { background: var(--paper-2); border-radius: 24px; padding: 12px; display: flex; flex-direction: column; gap: 12px; box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.hb-stage { position: relative; height: 300px; border-radius: 16px; overflow: hidden; }
.hb-copy { padding: 4px 8px 8px; }
.hb-title { font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -.03em; }
.hb-line { color: var(--muted); margin-top: 4px; }
.hb-hint { font-size: 13px; margin-top: 10px; color: var(--ink); }

/* football */
.hb-football .hb-stage { background: #22396F; -webkit-user-select: none; user-select: none; }
.fb-pitch { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(252, 241, 208, .04) 0 40px, transparent 40px 80px); }
.fb-line { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: #0D1C42; border-top: 2px solid rgba(252, 241, 208, .5); }
.fb-circle { position: absolute; left: 50%; bottom: 18px; width: 120px; height: 40px; margin-left: -60px; border: 2px solid rgba(252, 241, 208, .2); border-bottom: 0; border-radius: 60px 60px 0 0; }
.fb-goal { position: absolute; right: 14px; bottom: 18px; width: 54px; height: 72px; border: 3px solid rgba(252, 241, 208, .55); border-right: 0; border-bottom: 0;
  background-image: linear-gradient(rgba(252, 241, 208, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(252, 241, 208, .12) 1px, transparent 1px); background-size: 9px 9px; }
.fb-ball { position: absolute; left: 0; top: 0; width: 64px; height: 64px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; touch-action: none; will-change: transform; -webkit-tap-highlight-color: transparent; z-index: 2; }
.fb-ball svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.fb-skin { fill: #FCF1D0; }
.fb-patch polygon { fill: #010736; }
.fb-seam { stroke: #010736; stroke-width: 2.4; fill: none; }
.fb-rim { fill: none; stroke: #010736; stroke-width: 2.5; }
.fb-score { position: absolute; left: 14px; top: 12px; color: #FCF1D0; font-size: 13px; z-index: 1; }
.fb-score b { font: 700 20px var(--display); margin: 0 2px; }
.hb-football.is-record .fb-score { animation: rec .8s var(--ease-out); }
@keyframes rec { 30% { transform: scale(1.25); color: #F2D99A; } }

/* guitar */
.hb-guitar .hb-stage { background: #0D1C42; }
.gt-neck { position: absolute; inset: 0 0 64px 0; display: flex; justify-content: space-evenly; padding: 0 20px; touch-action: pan-y; cursor: crosshair;
  background-image: repeating-linear-gradient(180deg, transparent 0 52px, rgba(252, 241, 208, .28) 52px 55px); }
.gt-hole { position: absolute; left: 50%; bottom: -70px; width: 150px; height: 150px; margin-left: -75px; border-radius: 50%; background: #010736; box-shadow: 0 0 0 6px rgba(252, 241, 208, .14), 0 0 0 14px rgba(34, 57, 111, .6); }
.gt-string { position: relative; z-index: 1; width: 26px; display: flex; justify-content: center; }
.gt-string i { display: block; width: 2px; height: 100%; border-radius: 2px; background: linear-gradient(180deg, #F2D99A, #C9B27A); box-shadow: 0 0 6px rgba(242, 217, 154, .35); }
.gt-string[data-string="0"] i { width: 4.2px; } .gt-string[data-string="1"] i { width: 3.6px; } .gt-string[data-string="2"] i { width: 3px; }
.gt-string[data-string="3"] i { width: 2.4px; } .gt-string[data-string="4"] i { width: 1.8px; } .gt-string[data-string="5"] i { width: 1.4px; }
.gt-string.is-muted i { opacity: .28; }
.gt-string.is-vib i { animation: vib .55s linear; }
@keyframes vib { 0% { transform: translateX(0); } 8% { transform: translateX(3px); } 16% { transform: translateX(-3px); } 26% { transform: translateX(2.2px); } 36% { transform: translateX(-2px); } 50% { transform: translateX(1.4px); } 64% { transform: translateX(-1px); } 80% { transform: translateX(.5px); } 100% { transform: translateX(0); } }
.gt-controls { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; background: rgba(1, 7, 54, .78); }
.gt-chords { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.gt-chords::-webkit-scrollbar { display: none; }
.hb-guitar .chip { color: #FCF1D0; border-color: rgba(252, 241, 208, .35); min-height: 38px; padding: 6px 11px; font-size: 13px; flex: none; }
.hb-guitar .chip.is-on, .hb-guitar .chip:hover { background: #FCF1D0; color: #010736; }
.hb-guitar .btn { background: #FCF1D0; color: #010736; border-color: #FCF1D0; flex: none; }

/* chess */
.hb-chess .hb-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.ch-board { position: relative; container-type: inline-size; width: min(100%, 232px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 12px 30px -14px rgba(1, 7, 54, .6); -webkit-user-select: none; user-select: none; }
@supports not (aspect-ratio: 1) { .ch-board { height: 232px; } }
.sq { background: #F4E5BA; }
.sq.d { background: #22396F; }
.sq.hl { box-shadow: inset 0 0 0 999px rgba(242, 217, 154, .55); }
.sq.mate { box-shadow: inset 0 0 0 999px rgba(214, 64, 69, .75); }
.pc { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; display: grid; place-items: center; font-size: 22px; font-size: 10.4cqw; line-height: 1; transition: transform .55s cubic-bezier(.6, 0, .2, 1), opacity .35s; pointer-events: none;
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; }
.pw { color: #FCF1D0; text-shadow: 1px 0 0 #010736, -1px 0 0 #010736, 0 1px 0 #010736, 0 -1px 0 #010736, 0 2px 3px rgba(0, 0, 0, .35); }
.pb { color: #010736; text-shadow: 1px 0 0 #FCF1D0, -1px 0 0 #FCF1D0, 0 1px 0 #FCF1D0, 0 -1px 0 #FCF1D0; }
.pc.is-captured { opacity: 0; }
.hb-chess.is-mate .ch-board { animation: shake .4s steps(4); }
.ch-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: min(100%, 260px); }
.ch-move { font-size: 12.5px; color: var(--muted); min-width: 0; }

/* ---------- legal page ---------- */
.legal { padding-top: calc(var(--nav-h) + 72px + env(safe-area-inset-top, 0px)); padding-bottom: clamp(80px, 12vw, 140px); }
.legal-wrap { max-width: 820px; }
.legal h2 { font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--display); letter-spacing: -.02em; margin: 36px 0 8px; }
.legal p { color: var(--muted); max-width: 66ch; }

/* ---------- spider webs in every section ---------- */
.section, .footer { isolation: isolate; }
.sec-web { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .16; overflow: visible; }
.sec-web path { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: var(--len, 20000); stroke-dashoffset: var(--len, 20000); transition: stroke-dashoffset 3s cubic-bezier(.5, 0, .2, 1); }
.sec-web.is-drawn path { stroke-dashoffset: 0; }
.sec-web.no-anim path { transition: none; }
.footer .sec-web { opacity: .14; }
.footer .sec-web path { stroke: var(--paper); }

/* the letter playground is a desktop/tablet toy: hidden on phones to keep them fast */
@media (max-width: 767px) { .playground { display: none; } }

/* ---------- performance ---------- */
.hero.is-off .blob, .hero.is-off .sticker svg { animation-play-state: paused; }
@media (pointer: coarse) { .grain { display: none; } }
.lite .grain { display: none; }
.lite .blob, .lite .sticker svg, .lite .badge-emblem::before, .lite .badge-emblem::after { animation: none !important; }

/* ---------- project screen recordings ---------- */
.mock-shot { background: #0D1C42; }
.mock-shot img, .mock-shot video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mock-shot video { opacity: 0; transition: opacity .4s ease; }
.mock-shot video.is-playing { opacity: 1; }
.case-media { border-radius: 24px; overflow: hidden; background: #0D1C42; aspect-ratio: 16 / 10; box-shadow: var(--shadow); }
.case-media video, .case-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ---------- language switch ---------- */
.lang-switch { display: none; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; font: 600 13px var(--body); }
.lang-switch a { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 999px; text-decoration: none; padding: 0 6px; }
.lang-switch a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav.is-scrolled .lang-switch { border-color: color-mix(in srgb, var(--paper) 30%, transparent); }
.nav.is-scrolled .lang-switch a[aria-current="page"] { background: var(--paper); color: var(--ink); }
@media (min-width: 760px) { .lang-switch { display: inline-flex; } }
.menu-langs { display: flex; gap: 10px; flex-wrap: wrap; }
.menu-langs a { padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--paper) 35%, transparent); border-radius: 999px; text-decoration: none; font-size: 15px; }
.menu-langs a[aria-current="page"] { background: var(--paper); color: var(--ink); }
:lang(hi), :lang(mr) { --display: "Bricolage Grotesque", "Mukta", "Nirmala UI", "Noto Sans Devanagari", sans-serif; --body: "Geist", "Mukta", "Nirmala UI", "Noto Sans Devanagari", sans-serif; }
:lang(hi) .h-sec, :lang(mr) .h-sec, :lang(hi) .big-type, :lang(mr) .big-type { line-height: 1.12; letter-spacing: -.02em; }
:lang(hi) .about-para, :lang(mr) .about-para { line-height: 1.35; letter-spacing: -.01em; }

/* ---------- book a call ---------- */
.book-card { margin-top: 18px; padding: 20px; border-radius: 20px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; justify-items: start; width: 100%; }
.book-title { font: 700 clamp(24px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -.03em; }
.bk-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.bk-form legend { margin-bottom: 8px; }
.bk-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.bk-day { flex: none; scroll-snap-align: start; display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 10px 8px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); }
.bk-day .bk-wd { font: 500 12px var(--mono); opacity: .7; text-transform: uppercase; }
.bk-day .bk-dn { font: 700 22px/1 var(--display); }
.bk-day .bk-mo { font: 500 12px var(--mono); opacity: .7; }
.bk-day.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 220px; overflow: auto; }
.bk-slot { min-height: 44px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--ink); font: 600 15px var(--body); }
.bk-slot:hover { border-color: var(--ink); }
.bk-slot.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bk-tz { font-size: 13px; }

/* ---------- notes ---------- */
.note-title { font: 700 clamp(36px, 6vw, 72px)/1.02 var(--display); letter-spacing: -.04em; margin: 22px 0 12px; text-wrap: balance; }
.note-body { margin-top: 36px; font-size: 18px; line-height: 1.75; max-width: 68ch; }
.note-body p { margin: 0 0 18px; color: var(--ink); }
.note-body h2 { font: 700 clamp(22px, 2.6vw, 30px)/1.2 var(--display); letter-spacing: -.02em; margin: 40px 0 10px; }
.note-body ul { list-style: disc; padding-left: 22px; margin: 0 0 18px; display: grid; gap: 6px; }
.note-body code { font: 15px var(--mono); background: var(--paper-2); padding: 2px 6px; border-radius: 6px; }
.note-body a { color: var(--accent); }
.note-end { margin-top: 40px; }
.note-list { margin-top: 36px; display: grid; gap: 4px; }
.note-list a { display: grid; gap: 4px; padding: 22px 0; border-top: 1px solid var(--line); text-decoration: none; }
.note-list time { font: 500 13px var(--mono); color: var(--muted); }
.note-list strong { font: 700 clamp(22px, 2.6vw, 30px)/1.15 var(--display); letter-spacing: -.02em; }
.note-list span { color: var(--muted); }
.note-list a:hover strong { color: var(--accent); }

/* ---------- spider-sense (easter egg) ---------- */
.spidey-hint { font-size: 12px; opacity: .45; }
.spidey body::after { content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, rgba(255, 59, 92, .35) 1.3px, transparent 1.8px), radial-gradient(circle, rgba(46, 230, 255, .3) 1.3px, transparent 1.8px);
  background-size: 12px 12px, 12px 12px; background-position: 0 0, 6px 6px; mix-blend-mode: multiply; }
.spidey .h-sec, .spidey .hero-name, .spidey .big-type, .spidey .work-name { text-shadow: -3px 0 rgba(255, 59, 92, .75), 3px 0 rgba(46, 230, 255, .7); }
.spidey .tile, .spidey .hb-card, .spidey .j-item, .spidey .rv-card, .spidey .work-card a, .spidey .book-card { box-shadow: 6px 6px 0 #FF3B5C, inset 0 0 0 2px var(--ink) !important; }
.spidey .sec-web { opacity: .4; animation: webWobble 2.4s ease-in-out infinite; transform-origin: 50% 0; }
.spidey .hero-webs { opacity: .6; animation: webWobble 2.8s ease-in-out infinite; transform-origin: 60% 30%; }
@keyframes webWobble { 0%, 100% { transform: skewX(0) scale(1); } 25% { transform: skewX(1.6deg) scale(1.01); } 75% { transform: skewX(-1.6deg) scale(.995); } }
.spidey-pop { position: fixed; z-index: 160; pointer-events: none; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.3); padding: 8px 14px; border: 3px solid #010736; border-radius: 14px;
  background: #F2D99A; color: #010736; font: 800 22px/1 var(--display); letter-spacing: -.02em; box-shadow: 4px 4px 0 #FF3B5C; white-space: nowrap; animation: pop .9s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes pop { 30% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -80%) rotate(var(--r, 0deg)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .spidey .sec-web, .spidey .hero-webs { animation: none; } }

/* ================= incoming call (opening) ================= */
.call { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 16px;
  background: rgba(1, 7, 54, .9); opacity: 0; transition: opacity .45s ease; overscroll-behavior: contain; }
.call[hidden] { display: none; }
.call.is-in { opacity: 1; }
.call.is-leaving { opacity: 0; }
.call.is-accepted { opacity: 0; transition: opacity .5s ease .1s; }
.call.is-accepted .call-phone { transform: scale(.82) translateY(4%); transition: transform .5s var(--ease-io); }
.call-avatar picture, .call-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.call-avatar img { box-shadow: 0 0 0 3px #FCF1D0; }
.call-phone { position: relative; width: min(360px, 100%); height: min(640px, calc(100dvh - 32px)); border-radius: 40px; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, #22396F 0%, #0D1C42 55%, #010736 100%); color: #FCF1D0;
  border: 1px solid rgba(252, 241, 208, .16); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
  transform: translateY(28px) scale(.97); transition: transform .6s var(--ease-out); }
.call.is-in .call-phone { transform: none; }
.call-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: calc(48px + env(safe-area-inset-top, 0px)) 28px calc(36px + env(safe-area-inset-bottom, 0px)); }
.call-screen[hidden] { display: none; }
.call-kicker { font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; opacity: .72; margin: 0; }
.call-avatar { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 36px 0 14px; border-radius: 50%;
  background: #FCF1D0; color: #010736; font: 800 40px var(--display); letter-spacing: -.04em; }
.call-avatar::before, .call-avatar::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(252, 241, 208, .5); animation: callRing 2.4s ease-out infinite; }
.call-avatar::after { animation-delay: 1.2s; }
@keyframes callRing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.75); opacity: 0; } }
.call-name { margin: 0; font: 700 clamp(28px, 7vw, 34px)/1.1 var(--display); letter-spacing: -.03em; }
.call-sub { margin: 0; font: 500 13px var(--mono); opacity: .72; }
.call-actions { margin-top: auto; width: 100%; display: flex; justify-content: space-between; padding: 0 14px; }
.call-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: #FCF1D0; cursor: pointer; font: inherit; }
.call-btn span { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; font: 700 26px var(--body); color: #fff; transition: transform .2s var(--ease-out); }
.call-btn small { font: 500 12px var(--mono); letter-spacing: .06em; }
.call-btn:hover span { transform: scale(1.06); }
.call-btn:focus-visible { outline: none; }
.call-btn:focus-visible span { box-shadow: 0 0 0 3px #010736, 0 0 0 5px #FCF1D0; }
.call-no span { background: #D93F45; }
.call-yes span { background: #2F9E66; animation: callShake 1.8s ease-in-out infinite; }
@keyframes callShake { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-12deg); } 72% { transform: rotate(10deg); } 78% { transform: rotate(-8deg); } 84% { transform: rotate(5deg); } }
.call-hint { margin: 18px 0 0; max-width: 260px; font: 400 13px/1.45 var(--body); opacity: .66; }
@media (max-width: 480px) {
  .call { padding: 0; }
  .call-phone { width: 100%; height: 100%; border-radius: 0; border: 0; }
}
@media (max-height: 560px) {
  .call-avatar { width: 84px; height: 84px; margin: 14px 0 6px; font-size: 30px; }
  .call-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .call-avatar::before, .call-avatar::after, .call-yes span { animation: none; }
}

/* ================= guestbook ================= */
.gb-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) { .gb-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.gb-copy .lead { margin-top: 14px; max-width: 460px; }
.gb-form { display: grid; gap: 16px; max-width: 520px; margin-top: 28px; }
.gb-meta { margin: 0; font-size: 13px; }
.gb-web { position: relative; width: min(100%, 520px); aspect-ratio: 1; justify-self: center; }
.gb-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gb-spoke, .gb-ring { fill: none; stroke: var(--ink); stroke-opacity: .2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.gb-strand { stroke: var(--ink); stroke-opacity: 0; stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke-opacity .6s ease var(--d, 0s); }
.is-spun .gb-strand { stroke-opacity: .55; }
.gb-strand.is-pending { stroke-dasharray: 4 5; }
.gb-web::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); }
.gb-knot { position: absolute; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; z-index: 1; }
.gb-knot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 4px var(--paper); transform: scale(0); transition: transform .45s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0s); }
.is-spun .gb-knot::before { transform: scale(1); }
.gb-knot:hover::before, .gb-knot.is-on::before { transform: scale(1.45); transition-delay: 0s; }
.gb-knot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gb-knot.is-pending::before { background: var(--paper); border: 2px dashed var(--ink); width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.gb-bubble { position: absolute; z-index: 2; width: max-content; max-width: min(260px, 80%); margin: 0; padding: 10px 14px; border-radius: 14px;
  background: var(--ink); color: var(--paper); font: 500 14px/1.4 var(--body); text-align: center; pointer-events: none;
  transform: translate(-50%, calc(-100% - 20px)); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.gb-bubble.is-below { transform: translate(-50%, 20px); }
.gb-empty { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 24px); margin: 0; padding: 6px 12px; border-radius: 10px; background: var(--paper);
  font: 500 13px var(--mono); color: var(--muted); text-align: center; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gb-knot::before, .gb-strand { transition: none; } }
.gb-spider { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; z-index: 1; pointer-events: none; will-change: transform; }
.gb-spider svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gs-legs path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.gs-body { fill: var(--ink); }
.gs-eyes circle { fill: var(--paper); }
.gs-pupil { fill: var(--ink); }
.gs-cheek { fill: #FF8A9A; opacity: .75; }
.gs-smile { fill: none; stroke: var(--paper); stroke-width: 1; stroke-linecap: round; }
.gs-eyes, .gs-pupil { transform-box: fill-box; transform-origin: center; animation: gsBlink 4.6s infinite; }
@keyframes gsBlink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.gb-spider.is-walking .gs-l { animation: legWalk .2s ease-in-out infinite alternate; }
.gb-spider.is-walking .gs-r { animation: legWalk .2s ease-in-out -.1s infinite alternate-reverse; }
@media (prefers-reduced-motion: reduce) { .gb-spider { display: none; } }

/* ================= swing navigation ================= */
.swing-line { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 149; pointer-events: none; opacity: 0; transition: opacity .15s; }
.swing-line line { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }
.swing-line.is-on { opacity: .75; }
.swing-line.is-pull { opacity: 0; transition: opacity .4s ease; }
.is-swinging, .is-swinging * { -webkit-user-select: none; user-select: none; }
.swing-hint { display: none; }
.has-mouse .swing-hint { display: inline; }
@media all {
  .swing-btn { display: grid; cursor: pointer; place-items: center; position: fixed; z-index: 84; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
    opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .4s var(--ease-out); }
  .is-ready .swing-btn { opacity: 1; transform: none; pointer-events: auto; }
  .is-ready .swing-btn.is-end, .menu-open .swing-btn { opacity: 0; transform: translateY(12px); pointer-events: none; }
  .swing-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
  .swing-btn.is-pull svg { animation: swingPull .45s var(--ease-out); }
}
.swing-btn:hover { transform: translateY(-2px) !important; }
.swing-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@keyframes swingPull { 40% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .swing-btn.is-pull svg { animation: none; } }
@media print { .call, .swing-btn, .swing-line, .gb-web { display: none !important; } }

/* ================= the story (voice-over + captions) ================= */
.story { position: fixed; inset: 0; z-index: 165; display: flex; flex-direction: column; overflow: hidden; overflow: clip;
  background: radial-gradient(130% 90% at 50% 110%, #22396F 0%, #0D1C42 45%, #010736 100%); color: #FCF1D0;
  padding: calc(22px + env(safe-area-inset-top, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  opacity: 0; transition: opacity .6s ease; --cx: 50vw; --cy: 40vh; }
.story[hidden] { display: none; }
.story.is-in { opacity: 1; }
.story.is-leaving { opacity: 1; clip-path: circle(0px at var(--cx) var(--cy)); animation: storyClose .9s var(--ease-io) both; }
@keyframes storyClose { from { clip-path: circle(150vmax at var(--cx) var(--cy)); } to { clip-path: circle(0px at var(--cx) var(--cy)); } }
.story-dots { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle, rgba(252, 241, 208, .16) 1.1px, transparent 1.6px); background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%); }
.story .intro-web { position: absolute; top: 0; right: 0; width: min(80vw, 640px); height: min(80vw, 640px); pointer-events: none; }
.story .intro-web path { fill: none; stroke: #FCF1D0; stroke-opacity: .16; stroke-width: 1.1; }
.story-kicker { position: relative; margin: 0; font: 500 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.story-kicker span { display: inline-block; padding: 6px 10px; border: 1px solid rgba(252, 241, 208, .3); border-radius: 999px; background: rgba(1, 7, 54, .5); }
.story-stage { position: relative; flex: 1; display: grid; align-items: center; width: min(100%, 1100px); margin: 0 auto; }
.story-line { position: relative; margin: 0; min-height: 3.3em; font: 800 clamp(30px, 6.4vw, 84px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.story-phrase { display: block; transition: opacity .35s ease, transform .45s var(--ease-out); }
.story-phrase.is-out { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-80%); opacity: 0; }
.story-line .w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(var(--r, 0deg)) scale(.92); transition: opacity .18s ease, transform .42s cubic-bezier(.2, 1.5, .4, 1); }
.story-line .w.is-on { opacity: 1; transform: none; }
.story-line .w-hi { color: #FF4757; text-shadow: -3px 0 rgba(46, 230, 255, .55), 3px 0 rgba(1, 7, 54, .6); }
.story-line .w-hi.is-on { animation: wordHit .5s ease-out; }
@keyframes wordHit { 0% { transform: scale(1.1) rotate(-2deg); } 100% { transform: none; } }
.story-final { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 14px; padding: 0 var(--gutter); pointer-events: none; opacity: 0; }
.story-name { margin: 0; font: 800 clamp(48px, 12vw, 168px)/.88 var(--display); letter-spacing: -.06em; text-shadow: -4px 0 rgba(255, 71, 87, .75), 4px 0 rgba(46, 230, 255, .6);
  transform: scale(1.18); opacity: 0; transition: transform 1s var(--ease-out) .15s, opacity .5s ease .15s; }
.story-name span { display: block; color: transparent; -webkit-text-stroke: 2px #FCF1D0; }
.story-role { margin: 0; font: 500 clamp(13px, 1.6vw, 16px) var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .5s ease .45s, transform .6s var(--ease-out) .45s; }
.story.is-final .story-stage { opacity: 0; transform: scale(.96); transition: opacity .22s ease, transform .4s ease; }
.story.is-final .story-final { opacity: 1; }
.story.is-final .story-name { transform: none; opacity: 1; }
.story.is-final .story-role { opacity: .8; transform: none; }
.story-foot { position: relative; display: flex; align-items: center; gap: 18px; }
.story-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(252, 241, 208, .16); overflow: hidden; }
.story-bar i { display: block; height: 100%; background: #FCF1D0; transform: scaleX(0); transform-origin: left; }
.story-skip { min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(252, 241, 208, .35); background: rgba(1, 7, 54, .4); color: #FCF1D0;
  font: 500 14px var(--mono); cursor: pointer; transition: background-color .2s, color .2s; }
.story-skip:hover { background: #FCF1D0; color: #010736; }
.story-skip:focus-visible { outline: 2px solid #FCF1D0; outline-offset: 3px; }
@media (max-width: 560px) { .story-line { font-size: clamp(28px, 9vw, 44px); } }
@media (prefers-reduced-motion: reduce) {
  .story.is-leaving { animation: none; clip-path: none; opacity: 0; }
  .story-line .w { transform: none; }
}
@media print { .story { display: none !important; } }

/* ================= the call: Spidey grabs the phone ================= */
.call-rig { position: relative; width: min(360px, 100%); height: min(640px, calc(100dvh - 32px)); transform-origin: 50% calc(-1 * var(--pivot, 400px)); }
.call-rig .call-phone { width: 100%; height: 100%; }
.call-web { position: absolute; left: calc(50% - 1.5px); bottom: calc(100% - 14px); width: 3px; height: calc(var(--web, 120px) + 14px); background: #F7F5EE; box-shadow: 0 0 6px rgba(255, 255, 255, .7); transform-origin: 50% 0; transform: scaleY(0); opacity: 0; z-index: 3; pointer-events: none; }
.call-glove { position: absolute; left: calc(50% - 38px); top: -30px; width: 76px; height: 57px; z-index: 4; opacity: 0; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.call-thwip { position: absolute; left: calc(50% + 40px); top: 18%; z-index: 5; font: 800 28px/1 var(--display); letter-spacing: -.03em; color: #0B0B12; background: #FFD23F; padding: 8px 14px; pointer-events: none; opacity: 0;
  clip-path: polygon(0 18%, 14% 0, 30% 12%, 50% 0, 64% 14%, 86% 2%, 100% 22%, 90% 48%, 100% 76%, 80% 88%, 62% 100%, 44% 86%, 22% 100%, 10% 80%, 0 62%, 8% 40%); }
.call-speed { position: absolute; inset: -20%; z-index: 2; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(-32deg, transparent 0 46px, rgba(252, 241, 208, .45) 46px 49px); }
.call.is-grab .call-web { animation: grabWeb .16s cubic-bezier(.2, .8, .2, 1) both; }
.call.is-grab .call-thwip { animation: grabThwip .6s .1s cubic-bezier(.2, 1.6, .4, 1) both; }
.call.is-grab .call-glove { animation: grabGlove .34s .12s cubic-bezier(.2, 1.2, .4, 1) both; }
.call.is-grab .call-rig { animation: grabSwing .8s .5s cubic-bezier(.55, 0, .35, 1) both; }
.call.is-grab .call-speed { animation: grabSpeed .75s .55s linear both; }
.call.is-grab .call-yes span { animation: none; }
@keyframes grabWeb { from { transform: scaleY(0); opacity: 1; } to { transform: scaleY(1); opacity: 1; } }
@keyframes grabThwip { 0% { transform: scale(0) rotate(-14deg); opacity: 0; } 40% { transform: scale(1.15) rotate(-6deg); opacity: 1; } 75% { transform: scale(1) rotate(-6deg); opacity: 1; } 100% { transform: scale(.7) rotate(-6deg); opacity: 0; } }
@keyframes grabGlove { from { transform: translateY(calc(-1 * var(--drop, 200px))); opacity: 1; } 85% { transform: translateY(6px); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes grabSwing { 0% { transform: none; } 22% { transform: translateY(-16px) rotate(-6deg); } 100% { transform: translate(-34vw, -78vh) rotate(52deg); opacity: .2; } }
@keyframes grabSpeed { 0% { opacity: 0; transform: translateX(0); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateX(-160px); } }
@media (max-width: 480px) {
  .call-rig { width: 100%; height: 100%; }
  .call-glove { top: 4px; }
  .call-thwip { top: 12%; left: auto; right: 16px; font-size: 22px; }
}

/* ================= tiny Spidey vs Venom, living on the section edges ================= */
.ff-layer { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 40; pointer-events: none; }
.ff-line { position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--ink) 6%, var(--ink) 94%, transparent); opacity: .18; }
.ff-rope { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; display: none; }
.ff-rope line { stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; opacity: .75; }
.ff-duo { position: absolute; left: 0; top: 0; width: 96px; height: 60px; transform: var(--pos, none); will-change: transform; }
.ff-arena { position: absolute; inset: 0; --F: 4.2s; }
.ff { position: absolute; bottom: 0; width: 26px; height: 40px; }
.ff.f-sp { left: 8px; animation: ffSp var(--F) cubic-bezier(.4, 0, .2, 1) infinite both; }
.ff.f-ve { left: 62px; animation: ffVe var(--F) cubic-bezier(.4, 0, .2, 1) infinite both; }
.ff-body { position: absolute; inset: 0; transform-origin: 50% 100%; animation: ffBob .7s ease-in-out infinite alternate both; }
.f-ve .ff-body { animation-delay: -.35s; }
.ff-head { position: absolute; left: 0; top: 0; width: 26px; height: 22px; border-radius: 48% 48% 44% 44% / 52% 52% 48% 48%; z-index: 2; }
.ff-head::before, .ff-head::after { content: ""; position: absolute; top: 28%; width: 30%; height: 36%; background: #FFF; border: 1.5px solid #0B0B12; border-radius: 70% 30% 60% 40% / 60% 40% 60% 40%; }
.ff-head::before { left: 13%; transform: rotate(18deg); }
.ff-head::after { right: 13%; transform: scaleX(-1) rotate(18deg); }
.f-sp .ff-head { background: repeating-conic-gradient(from 0deg at 50% 58%, rgba(0, 0, 0, .5) 0 3deg, transparent 3deg 40deg), radial-gradient(circle at 38% 30%, #F0485C 0, #D7263D 45%, #8E1325 100%); }
.f-ve .ff-head { background: radial-gradient(circle at 36% 28%, #3A3A55 0, #07070C 55%); }
.f-ve .ff-head::before, .f-ve .ff-head::after { top: 20%; width: 34%; height: 48%; border: 0; background: #F7F5EE; border-radius: 90% 10% 70% 30% / 80% 20% 80% 20%; }
.ff-tor { position: absolute; left: 6px; top: 20px; width: 14px; height: 12px; border-radius: 4px 4px 2px 2px; }
.ff-leg { position: absolute; top: 30px; width: 5px; height: 10px; border-radius: 2px; transform-origin: 50% 0; }
.ff-leg.l { left: 7px; } .ff-leg.r { left: 14px; }
.ff-arm { position: absolute; top: 21px; width: 4px; height: 11px; border-radius: 2px; transform-origin: 50% 1px; }
.ff-arm.b { left: 3px; transform: rotate(18deg); } .ff-arm.f { left: 19px; transform: rotate(-18deg); }
.f-sp .ff-tor { background: linear-gradient(90deg, #1E3F9A 0 20%, #D7263D 20% 80%, #1E3F9A 80%); }
.f-sp .ff-leg { background: #1E3F9A; } .f-sp .ff-arm { background: #D7263D; }
.f-ve .ff-tor, .f-ve .ff-leg, .f-ve .ff-arm { background: #07070C; }
.f-ve .ff-tor::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 6px; border-radius: 50% 50% 40% 40%; background: #F7F5EE; box-shadow: -3px -1px 0 -1px #F7F5EE, 3px -1px 0 -1px #F7F5EE; }
.f-sp .ff-arm.f { animation: ffPunch var(--F) cubic-bezier(.2, 1.4, .4, 1) infinite both; }
.f-ve .ff-arm.b { animation: ffReach var(--F) cubic-bezier(.2, 1.2, .4, 1) infinite both; }
.ff-tendril { position: absolute; left: 30px; bottom: 24px; width: 34px; height: 3px; border-radius: 3px; background: #07070C; transform-origin: 100% 50%; animation: ffTendril var(--F) cubic-bezier(.3, 0, .2, 1) infinite both; }
.ff-web { position: absolute; left: 30px; bottom: 26px; width: 40px; height: 1.5px; background: #FFF; box-shadow: 0 0 2px rgba(0, 0, 0, .35); transform-origin: 0 50%; animation: ffWeb var(--F) cubic-bezier(.2, .8, .2, 1) infinite both; }
.ff-splat { position: absolute; left: 64px; bottom: 21px; width: 18px; height: 15px; background: #FFF; border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; z-index: 3; animation: ffSplat var(--F) cubic-bezier(.2, 1.6, .4, 1) infinite both; }
.ff-burst { position: absolute; left: 34px; top: -6px; width: 30px; height: 30px; background: #FFD23F; clip-path: polygon(50% 0, 58% 34%, 92% 14%, 68% 44%, 100% 52%, 66% 60%, 84% 92%, 54% 70%, 46% 100%, 40% 68%, 10% 86%, 30% 58%, 0 44%, 32% 40%, 14% 10%, 44% 32%); animation: ffBurst var(--F) ease-out infinite both; }
.ff-bub { position: absolute; font: 800 9px/1 var(--display); letter-spacing: -.02em; color: #0B0B12; background: #FFD23F; padding: 2px 4px; border-radius: 3px; white-space: nowrap; z-index: 4; }
.ff-pow { left: 62px; top: -10px; animation: ffPop1 var(--F) cubic-bezier(.2, 1.6, .4, 1) infinite both; }
.ff-thwip { left: 16px; top: -10px; animation: ffPop2 var(--F) cubic-bezier(.2, 1.6, .4, 1) infinite both; }
.ff-krak { left: 34px; top: -18px; animation: ffPop3 var(--F) cubic-bezier(.2, 1.6, .4, 1) infinite both; }
.ff-zip { position: absolute; left: 21px; bottom: 30px; width: 1.5px; height: 70vh; background: var(--ink); opacity: .75; transform-origin: 50% 100%; transform: scaleY(0); }

/* dizzy stars (chakkar) circling the head */
.ff-stars { position: absolute; left: 50%; top: -12px; width: 36px; height: 36px; margin-left: -18px; transform: scaleY(.4); display: none; z-index: 5; }
.ff-stars i { position: absolute; inset: 0; animation: ffOrbit .9s linear infinite; font-style: normal; }
.ff-stars i::before { content: "★"; position: absolute; left: 50%; top: -7px; margin-left: -6px; font: 13px/1 var(--body); color: #FFC800; transform: scaleY(2.5); text-shadow: 0 0 1px #0B0B12, 0 0 3px #0B0B12; }
.ff-stars i:nth-child(2) { animation-delay: -.3s; } .ff-stars i:nth-child(3) { animation-delay: -.6s; }

/* falling: tumble; landed: dizzy, one sits and one lies down; zipping up: Spidey's web pulls them */
.ff-duo.is-air .ff, .ff-duo.is-air .ff-body, .ff-duo.is-air .ff-arm, .ff-duo.is-dizzy .ff, .ff-duo.is-dizzy .ff-body, .ff-duo.is-dizzy .ff-arm, .ff-duo.is-zip .ff, .ff-duo.is-zip .ff-body { animation: none; }
.ff-duo.is-air .ff-arena > :not(.ff), .ff-duo.is-dizzy .ff-arena > :not(.ff), .ff-duo.is-zip .ff-arena > :not(.ff) { animation: none; opacity: 0; }
.ff-duo.is-fall .ff-body { animation: ffTumble .55s linear infinite; }
.ff-duo.is-fall .f-ve .ff-body { animation-direction: reverse; animation-duration: .65s; }
.ff-duo.is-land { animation: ffLand .28s ease-out; }
.ff-duo.is-zip .ff-zip { transform: scaleY(1); transition: transform .12s ease-out; }
.ff-duo.is-zip .f-sp .ff-arm.f, .ff-duo.is-swing .f-sp .ff-arm.f { transform: rotate(180deg); }
.ff-duo.is-swing .f-ve .ff-arm.b { transform: rotate(120deg); }
.ff-duo.is-swing .ff-body { transform: rotate(-8deg); }
.ff-duo.is-dizzy .ff-stars { display: block; }
.ff.pose-sit .ff-body { transform: translateY(5px); }
.ff.pose-sit .ff-leg { transform: rotate(-80deg); top: 33px; }
.ff.pose-sit .ff-head { animation: ffWobble 1.1s ease-in-out infinite; }
.f-sp.pose-sleep .ff-body { transform: translate(17px, -12px) rotate(-90deg); }
.f-ve.pose-sleep .ff-body { transform: translate(-17px, -12px) rotate(90deg); }
.ff.pose-sleep .ff-stars { transform: rotate(90deg) scaleY(.38); top: 0; }
.f-ve.pose-sleep .ff-stars { transform: rotate(-90deg) scaleY(.38); }
.ff.pose-sleep .ff-head::before, .ff.pose-sleep .ff-head::after { height: 8%; top: 46%; }

@keyframes ffBob { to { transform: translateY(-1.5px); } }
@keyframes ffSp { 0%, 15% { transform: none; } 17% { transform: translateX(-3px); } 21%, 25% { transform: translateX(30px); } 31%, 36% { transform: none; } 41% { transform: translateX(3px); } 46% { transform: translateX(22px) rotate(-10deg); } 50%, 60% { transform: translateX(8px); } 64% { transform: translate(8px, 2px); } 70% { transform: translate(22px, -24px) rotate(-12deg); } 76% { transform: translate(12px, -10px) rotate(-24deg); } 84%, 100% { transform: none; } }
@keyframes ffVe { 0%, 22% { transform: none; } 25% { transform: translateX(10px) rotate(12deg); } 31% { transform: translateX(5px); } 36%, 51% { transform: none; } 55% { transform: translateX(9px) rotate(14deg); } 60%, 64% { transform: translateX(4px); } 70% { transform: translate(-14px, -24px) rotate(12deg); } 76% { transform: translate(-6px, -10px) rotate(24deg); } 84%, 100% { transform: none; } }
@keyframes ffPunch { 0%, 18% { transform: rotate(-18deg); } 22%, 25% { transform: rotate(-96deg) scaleY(1.45); } 30%, 46% { transform: rotate(-18deg); } 49%, 55% { transform: rotate(-80deg) scaleY(1.3); } 60%, 100% { transform: rotate(-18deg); } }
@keyframes ffReach { 0%, 34% { transform: rotate(18deg); } 38%, 45% { transform: rotate(86deg) scaleY(1.3); } 50%, 100% { transform: rotate(18deg); } }
@keyframes ffTendril { 0%, 36% { transform: scaleX(0); } 40% { transform: scaleX(1); } 43% { transform: scaleX(.95); } 47% { transform: scaleX(.25); } 49%, 100% { transform: scaleX(0); } }
@keyframes ffWeb { 0%, 48% { transform: rotate(-12deg) scaleX(0); opacity: 1; } 51%, 55% { transform: rotate(-12deg) scaleX(1); opacity: 1; } 59%, 100% { transform: rotate(-12deg) scaleX(1); opacity: 0; } }
@keyframes ffSplat { 0%, 50% { transform: scale(0); opacity: 0; } 53% { transform: scale(1.2); opacity: .95; } 58%, 62% { transform: scale(1); opacity: .95; } 66%, 100% { transform: scale(1); opacity: 0; } }
@keyframes ffBurst { 0%, 68% { transform: scale(0) rotate(0); opacity: 1; } 72% { transform: scale(1.1) rotate(20deg); opacity: 1; } 80%, 100% { transform: scale(1.6) rotate(30deg); opacity: 0; } }
@keyframes ffPop1 { 0%, 21% { transform: scale(0) rotate(-12deg); opacity: 0; } 24% { transform: scale(1.2) rotate(-6deg); opacity: 1; } 28% { transform: scale(1) rotate(-6deg); opacity: 1; } 32%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes ffPop2 { 0%, 48% { transform: scale(0) rotate(8deg); opacity: 0; } 51% { transform: scale(1.15) rotate(4deg); opacity: 1; } 55% { transform: scale(1) rotate(4deg); opacity: 1; } 59%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes ffPop3 { 0%, 68% { transform: scale(0) rotate(-10deg); opacity: 0; } 71% { transform: scale(1.25) rotate(-4deg); opacity: 1; } 76% { transform: scale(1) rotate(-4deg); opacity: 1; } 81%, 100% { transform: scale(.6); opacity: 0; } }
@keyframes ffTumble { to { transform: rotate(360deg); } }
@keyframes ffLand { 40% { transform: var(--pos) scale(1.12, .82); } }
@keyframes ffOrbit { to { transform: rotate(360deg); } }
@keyframes ffWobble { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
.ff-duo.is-off .ff-arena *, .ff-duo.is-off .ff-arena { animation-play-state: paused !important; }
@media (max-width: 600px) { .ff-arena { transform: scale(.85); transform-origin: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .ff-arena *, .ff-arena { animation: none !important; } .ff-arena > :not(.ff) { opacity: 0; } }
@media print { .ff-layer { display: none !important; } }

/* ================= services: pick a thread ================= */
.sv-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); }
.sv-head .lead { max-width: 46ch; }
.sv-grid { display: grid; gap: 28px; }
.sv-list { position: relative; list-style: none; margin: 0; padding: 0 0 0 34px; }
/* the thread the spider walks along */
.sv-list::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 1.5px; background: var(--line-strong); }
.sv-spider { position: absolute; left: 10px; top: 0; width: 0; height: 0; transform: translateY(var(--sy, 40px)); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.sv-spider::before { content: ""; position: absolute; left: -.75px; bottom: 6px; width: 1.5px; height: 400px; background: var(--ink); transform-origin: 50% 100%; }
.sv-spider i { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px var(--paper); }
.sv-spider i::before, .sv-spider i::after { content: ""; position: absolute; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--paper); }
.sv-spider i::before { left: 3px; } .sv-spider i::after { right: 3px; }
.sv-list { overflow: hidden; }
.sv-item { border-bottom: 1px solid var(--line); }
.sv-item:first-child { border-top: 1px solid var(--line); }
.sv-row { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 16px; padding: 20px 4px 20px 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.sv-row .sv-for { grid-column: 1; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sv-title { grid-column: 1; font: 700 clamp(24px, 3.1vw, 42px)/1.05 var(--display); letter-spacing: -.035em; opacity: .42; transition: opacity .3s, transform .45s var(--ease-out); }
.sv-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 500 22px var(--body); opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .45s var(--ease-out); }
.sv-row:hover .sv-title, .sv-row[aria-expanded="true"] .sv-title { opacity: 1; transform: translateX(6px); }
.sv-row[aria-expanded="true"] .sv-arrow { opacity: 1; transform: none; }
.sv-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 6px; }

.sv-panel { display: grid; gap: 18px; }
.sv-card { border-radius: 26px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow); overflow: hidden; }
.sv-stage { position: relative; aspect-ratio: 240 / 128; max-width: 100%; display: grid; place-items: center; padding: 18px;
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.4px); background-size: 16px 16px; border-bottom: 1px solid var(--line); }
.sv-art { width: min(100%, 360px); height: auto; overflow: visible; }
.sv-art * { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-art .acc { stroke: var(--accent); stroke-width: 2.6; }
.sv-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.sv-body .sv-for { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sv-name { font: 700 clamp(24px, 2.4vw, 32px)/1.08 var(--display); letter-spacing: -.03em; margin: 0; }
.sv-line { margin: 0; color: var(--muted); font-size: 16px; max-width: 46ch; }
.sv-gets { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sv-gets li { font: 500 13px var(--body); padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); }
.sv-gets li::before { content: "✓"; margin-right: 6px; color: var(--accent); font-weight: 700; }
.sv-proof { margin: 2px 0 0; font: 500 13px var(--mono); color: var(--ink); }
.sv-proof::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2E8B57; margin-right: 8px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(46, 139, 87, .18); }
.sv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 8px; }

/* armed by JS: one card at a time, drawn in */
.sv-armed .sv-panel { display: grid; }
.sv-armed .sv-card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.985); transition: opacity .35s ease, transform .5s var(--ease-out), visibility 0s .35s; }
.sv-armed .sv-card.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sv-armed .sv-art * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sv-armed .sv-card.is-active .sv-art > * { animation: svDraw .9s cubic-bezier(.6, 0, .2, 1) both; }
.sv-armed .sv-card.is-active .sv-art .drop { animation: svDraw .5s ease both, svDrop .7s cubic-bezier(.3, 1.6, .5, 1) .9s both; }
.sv-card.is-active .sv-art > :nth-child(1) { animation-delay: 0.00s; }
.sv-card.is-active .sv-art > :nth-child(2) { animation-delay: 0.05s; }
.sv-card.is-active .sv-art > :nth-child(3) { animation-delay: 0.10s; }
.sv-card.is-active .sv-art > :nth-child(4) { animation-delay: 0.15s; }
.sv-card.is-active .sv-art > :nth-child(5) { animation-delay: 0.20s; }
.sv-card.is-active .sv-art > :nth-child(6) { animation-delay: 0.25s; }
.sv-card.is-active .sv-art > :nth-child(7) { animation-delay: 0.30s; }
.sv-card.is-active .sv-art > :nth-child(8) { animation-delay: 0.35s; }
.sv-card.is-active .sv-art > :nth-child(9) { animation-delay: 0.40s; }
.sv-card.is-active .sv-art > :nth-child(10) { animation-delay: 0.45s; }
.sv-card.is-active .sv-art > :nth-child(11) { animation-delay: 0.50s; }
.sv-card.is-active .sv-art > :nth-child(12) { animation-delay: 0.55s; }
.sv-card.is-active .sv-art > :nth-child(13) { animation-delay: 0.60s; }
.sv-card.is-active .sv-art > :nth-child(14) { animation-delay: 0.65s; }
.sv-card.is-active .sv-art > :nth-child(15) { animation-delay: 0.70s; }
.sv-card.is-active .sv-art > :nth-child(16) { animation-delay: 0.75s; }
.sv-card.is-active .sv-art > :nth-child(17) { animation-delay: 0.80s; }
.sv-card.is-active .sv-art > :nth-child(18) { animation-delay: 0.85s; }
.sv-card.is-active .sv-art > :nth-child(19) { animation-delay: 0.90s; }
.sv-card.is-active .sv-art > :nth-child(20) { animation-delay: 0.95s; }
@keyframes svDraw { to { stroke-dashoffset: 0; } }
@keyframes svDrop { from { transform: translateY(-26px); } to { transform: translate(-2px, 34px); } }

@media (min-width: 900px) {
  .sv-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
  .sv-panel { position: sticky; top: calc(var(--nav-h) + 28px); }
  .sv-row { padding: 24px 4px 24px 0; }
}
@media (max-width: 899px) {
  /* on phones the panel opens right under the service you tapped */
  .sv-item .sv-panel { margin: 4px 0 20px; }
  .sv-armed .sv-grid > .sv-panel { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-armed .sv-art * { stroke-dashoffset: 0; animation: none !important; }
  .sv-spider, .sv-armed .sv-card { transition: none; }
}