/* =========================================================
   Siteify.Tech · editorial studio v2
   Paper · ink · vermilion. Scroll-driven motion.
   ========================================================= */

:root {
  --paper:   #efe7d8;
  --paper-2: #e6dcc7;
  --ink:     #16140f;
  --ink-2:   #4b463a;
  --ink-3:   #8a8270;
  --accent:  #ff3b15;
  --line:    rgba(23, 21, 15, 0.16);
  --line-2:  rgba(23, 21, 15, 0.30);

  --ff-display: "Fraunces", Georgia, serif;
  --ff-body:    "Hanken Grotesk", system-ui, sans-serif;
  --ff-mono:    "Space Mono", ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 80px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }
@media (hover: hover) and (pointer: fine) {
  html { scroll-behavior: smooth; }
  * { cursor: none !important; }
}

body {
  font-family: var(--ff-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(100% 80% at 50% 120%, rgba(23,21,15,.07), transparent 55%);
}

a { color: inherit; text-decoration: none; }
em { font-style: italic; }
.ital { font-style: italic; font-family: var(--ff-display); }
.accent { color: var(--accent); }
svg { display: block; }

/* ===== Grain ===== */
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply; animation: grain 1.3s steps(3) infinite;
}
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

/* ===== Custom cursor ===== */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; }
.cursor {
  width: 44px; height: 44px; border: 1.5px solid var(--ink); transform: translate(-50%,-50%);
  transition: width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s, opacity .3s;
  mix-blend-mode: difference; background: transparent;
}
.cursor::after { content: attr(data-text); position: absolute; inset: 0; display: grid; place-items: center; font: 700 9px/1 var(--ff-mono); letter-spacing: .1em; color: var(--paper); opacity: 0; transition: opacity .25s; }
.cursor-dot { width: 6px; height: 6px; background: var(--accent); transform: translate(-50%,-50%); transition: opacity .3s; }
.cursor.is-hover { width: 72px; height: 72px; background: var(--ink); border-color: var(--ink); }
.cursor.is-text { width: 88px; height: 88px; background: var(--accent); border-color: var(--accent); mix-blend-mode: normal; }
.cursor.is-text::after { opacity: 1; }
.cursor.is-text + .cursor-dot, .cursor.is-hover ~ .cursor-dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* ===== Progress ===== */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--accent); z-index: 200; }

/* ===== Grand complication intro ===== */
.intro-lock, .intro-lock body { overflow: hidden; height: 100%; }
.intro {
  position: fixed; inset: 0; z-index: 9500; background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(22px, 4vw, 46px); overflow: hidden;
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 1.05s cubic-bezier(.76,0,.24,1), opacity .5s ease .55s;
}
.intro.done { clip-path: circle(0% at 50% 50%); opacity: 0; pointer-events: none; }
.intro.hidden { display: none; }

.intro__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.intro__brand { font: 700 1rem/1 var(--ff-mono); letter-spacing: .04em; }
.intro__meta { font: 400 .72rem/1.4 var(--ff-mono); letter-spacing: .12em; color: rgba(239,231,216,.5); text-transform: uppercase; display: none; }
.intro__skip { background: none; border: 0; color: rgba(239,231,216,.7); font: 400 .8rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; transition: color .3s; }
.intro__skip:hover { color: var(--accent); }

.intro__stage { flex: 1; display: grid; place-items: center; position: relative; }
.movement { width: clamp(240px, 58vmin, 440px); aspect-ratio: 1; overflow: visible; animation: introFloat 6s ease-in-out infinite; }
@keyframes introFloat { 50% { transform: translateY(-8px); } }

.mv-ring { fill: none; stroke: rgba(239,231,216,.16); stroke-width: 1; }
.mv-ring--outer { stroke: rgba(239,231,216,.28); }
.mv-dash { stroke: rgba(239,231,216,.34); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.mv-dash--a { stroke-dasharray: 2 10; animation: spin 9s linear infinite; }
.mv-dash--b { stroke-dasharray: 3 7; animation: spin 6s linear infinite reverse; }
.mv-tick { stroke: rgba(239,231,216,.4); stroke-width: 1; }
.mv-tick--major { stroke: var(--paper); stroke-width: 1.5; }
.mv-tooth { stroke: rgba(239,231,216,.55); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
#introTeeth { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
.mv-prog { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-box: view-box; transform-origin: 200px 200px; filter: drop-shadow(0 0 6px rgba(255,59,21,.5)); }
.mv-label { fill: rgba(239,231,216,.55); font: 700 9px/1 var(--ff-mono); letter-spacing: .28em; transform-box: view-box; transform-origin: 200px 200px; animation: spin 26s linear infinite; }
.mv-hand { stroke: var(--paper); stroke-width: 2; stroke-linecap: round; transform-box: view-box; transform-origin: 200px 200px; }
.mv-hub { fill: var(--ink); stroke: var(--paper); stroke-width: 2; }
.mv-hub-dot { fill: var(--accent); }

.intro__count { position: absolute; inset: auto; display: flex; align-items: flex-start; pointer-events: none; }
.intro__count span { font-family: var(--ff-display); font-weight: 300; font-size: clamp(3rem, 9vmin, 5.5rem); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.intro__count::after { content: "%"; font: 400 1rem/1 var(--ff-mono); color: var(--accent); margin-top: .4em; margin-left: 4px; }

.intro__status { display: flex; align-items: center; gap: 18px; }
.intro__bar { flex: 1; height: 1.5px; background: rgba(239,231,216,.18); position: relative; max-width: 340px; }
.intro__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); }
.intro__word { font: 400 .8rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(239,231,216,.8); white-space: nowrap; }

@media (min-width: 720px) { .intro__meta { display: block; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ===== Header ===== */
.head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--pad); transition: transform .45s var(--ease), color .4s var(--ease);
}
.head.hide { transform: translateY(-130%); }
.head.on-dark { color: var(--paper); }
.head__brand { font: 700 1.05rem/1 var(--ff-mono); letter-spacing: .04em; display: inline-flex; align-items: flex-start; }
.head__sup { font-size: .6em; color: var(--accent); margin-left: 2px; }
.head__clock { font: 400 .8rem/1 var(--ff-mono); color: inherit; opacity: .55; position: absolute; left: 50%; transform: translateX(-50%); display: none; }
.head__nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.head__nav > a { font: 500 .95rem/1 var(--ff-body); position: relative; }
.head__nav > a:not(.head__pill)::after { content: ""; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.head__nav > a:not(.head__pill):hover::after { transform: scaleX(1); transform-origin: left; }
.head__pill { border: 1.5px solid currentColor; border-radius: 100px; padding: 9px 20px; overflow: hidden; }
.head__pill > span { display: inline-block; }
.head__burger { display: none; flex-direction: column; gap: 6px; background: none; border: 0; padding: 6px; }
.head__burger span { width: 26px; height: 2px; background: currentColor; transition: transform .35s var(--ease), opacity .25s; }

/* ===== Buttons ===== */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; font: 600 .98rem/1 var(--ff-body); padding: 17px 30px; border-radius: 100px; background: var(--ink); color: var(--paper); overflow: hidden; isolation: isolate; }
.btn > span { position: relative; z-index: 1; transition: color .4s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; background: var(--accent); transform: translateY(101%); transition: transform .5s var(--ease); z-index: 0; }
.btn:hover::before { transform: translateY(0); }
.btn--line { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--line:hover > span { color: var(--paper); }

/* ===== Hero ===== */
.hero { position: relative; z-index: 2; min-height: 100svh; padding: clamp(120px,16vh,200px) var(--pad) clamp(40px,6vh,70px); display: flex; flex-direction: column; justify-content: center; overflow: hidden; --mx: 50%; --my: 42%; }
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(460px circle at var(--mx) var(--my), rgba(255,59,21,.12), transparent 68%); opacity: 0; transition: opacity .5s var(--ease); }
.hero.lit::after { opacity: 1; }
.hero__inner { position: relative; z-index: 1; will-change: transform, opacity; }
.hero__title .ch { display: inline-block; will-change: font-variation-settings, transform; font-variation-settings: "opsz" 22, "wght" 340, "ital" 0; }
.hero__title .ital .ch, .hero__title .amp { font-variation-settings: "opsz" 22, "wght" 340, "ital" 1; }
.hero__eyebrow { font: 400 .9rem/1.4 var(--ff-mono); letter-spacing: .02em; color: var(--ink-2); text-transform: uppercase; }
.hero__eyebrow em { color: var(--accent); }
.hero__title { font-family: var(--ff-display); font-optical-sizing: auto; font-weight: 360; letter-spacing: -.03em; line-height: .9; font-size: clamp(3.4rem, 13.5vw, 12rem); margin: clamp(20px,4vh,46px) 0; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__title .amp { font-style: italic; font-weight: 300; color: var(--ink-2); }
.hero__title .ital { font-weight: 400; }
.hero__foot { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; }
.hero__lede { max-width: 42ch; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--ink-2); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); font: 400 .72rem/1 var(--ff-mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(239,231,216,.6); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__scroll i { width: 1px; height: 36px; background: rgba(239,231,216,.4); overflow: hidden; position: relative; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: scrolldn 1.8s var(--ease) infinite; }
@keyframes scrolldn { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* globe */
.globe { position: absolute; top: 50%; right: -3vw; width: clamp(440px,52vw,860px); aspect-ratio: 1; z-index: 0; transform: translateY(-50%); will-change: transform, opacity; }
.globe canvas { width: 100%; height: 100%; display: block; }
.globe__cap { position: absolute; left: -2%; top: 4%; display: inline-flex; align-items: center; gap: 7px; font: 400 .66rem/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.globe__cap i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(255,59,21,.15); }
.globe--fallback canvas { display: none; }
.globe--fallback::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 1.5px solid var(--line-2); border-top-color: var(--accent); animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }


/* ===== Section heads ===== */
.sec-head { padding: clamp(80px,12vh,150px) var(--pad) clamp(30px,5vh,60px); }
.sec-head__label { font: 700 .85rem/1 var(--ff-mono); letter-spacing: .08em; color: var(--accent); text-transform: uppercase; display: block; margin-bottom: 22px; }
.sec-head__title { font-family: var(--ff-display); font-weight: 380; letter-spacing: -.02em; line-height: .94; font-size: clamp(2.6rem,7vw,6rem); }

/* ===== Services ===== */
.services { position: relative; z-index: 2; color: var(--paper); }
.svc { list-style: none; border-top: 1.5px solid rgba(239,231,216,.22); }
.svc__row { position: relative; display: grid; grid-template-columns: 80px 1.1fr 1.4fr auto; gap: 30px; align-items: baseline; padding: clamp(28px,4vw,48px) var(--pad); border-bottom: 1.5px solid rgba(239,231,216,.14); transition: color .5s var(--ease); }
.svc__row::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.05); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); z-index: -1; }
.svc__row:hover .svc__name { color: var(--accent); }
.svc__row:hover::before { transform: scaleY(1); }
.svc__num { font: 400 1rem/1 var(--ff-mono); color: var(--accent); }
.svc__name { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.7rem,3.4vw,3rem); letter-spacing: -.02em; line-height: 1; }
.svc__desc { font-size: 1.02rem; opacity: .82; max-width: 46ch; }
.svc__tags { font: 400 .82rem/1.4 var(--ff-mono); text-transform: uppercase; letter-spacing: .04em; opacity: .7; text-align: right; }

/* ===== Descent: one continuous backdrop from the marquee down into deep space.
   It darkens top-to-bottom (Earth surface → atmosphere → space) with stars fading in,
   so the marquee, services and work all blend into one seamless journey. ===== */
.descent {
  position: relative; z-index: 2;
  background:
    radial-gradient(80vw 65vh at 70% 238vh, rgba(124,92,255,.22), transparent 60%),
    radial-gradient(70vw 55vh at 16% 282vh, rgba(17,181,164,.15), transparent 60%),
    radial-gradient(72vw 52vh at 80% 365vh, rgba(236,63,134,.12), transparent 62%),
    radial-gradient(76vw 56vh at 18% 470vh, rgba(124,92,255,.13), transparent 62%),
    linear-gradient(to bottom,
      var(--paper) 0vh, var(--paper) 80vh, #c9bfcc 90vh, #5e5878 98vh, #241f3c 104vh, #0a0912 112vh, #0a0912 100%);
}
.descent::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 130px 180px, rgba(255,255,255,.55), transparent),
    radial-gradient(1.4px 1.4px at 220px 90px, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 300px 250px, rgba(200,210,255,.5), transparent),
    radial-gradient(1px 1px at 90px 320px, rgba(255,255,255,.45), transparent),
    radial-gradient(2px 2px at 350px 150px, rgba(255,225,190,.7), transparent),
    radial-gradient(1px 1px at 180px 360px, rgba(255,255,255,.4), transparent);
  background-size: 400px 400px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 92vh, #000 118vh);
  mask-image: linear-gradient(to bottom, transparent 92vh, #000 118vh);
}

/* ===== Work · draggable art canvas ===== */
.board { position: relative; z-index: 2; background: transparent; color: var(--paper); }
.board__head { position: absolute; top: 0; left: 0; right: 0; z-index: 6; padding: clamp(84px,12vh,130px) var(--pad) 0; pointer-events: none; }
.board__head .sec-head__label { display: block; margin-bottom: 16px; }
.board__head .sec-head__title { font-family: var(--ff-display); font-weight: 380; letter-spacing: -.02em; line-height: .94; font-size: clamp(2.2rem,5vw,4.2rem); }
.board__hint { margin-top: 16px; font: 400 .9rem/1 var(--ff-mono); letter-spacing: .04em; text-transform: uppercase; color: rgba(239,231,216,.55); }
.board__hint .hint-b { display: none; }

.board__stage {
  position: relative; height: 100svh; overflow: hidden; background: transparent;
  border-bottom: 1.5px solid rgba(239,231,216,.16);
  user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.board__stage.grabbing { cursor: grabbing; }
.board__plane {
  position: absolute; top: 0; left: 0; z-index: 1; width: 112vw; height: 100vh;
  transform: translate3d(var(--px,0), var(--py,0), 0); will-change: transform;
}

.blot {
  position: absolute; left: var(--x); top: var(--y); width: clamp(110px, 10vw, 150px);
  /* --p (0..1) is scrubbed from scroll position by JS; planets float in as you scroll */
  opacity: var(--p, 0);
  transform: translate(-50%, calc(-50% + (1 - var(--p, 0)) * 56px)) rotate(var(--a,0deg)) scale(calc(.55 + var(--p, 0) * .45));
  transition: opacity .18s linear, transform .2s var(--ease);
  -webkit-user-drag: none;
}
.blot:hover { transform: translate(-50%,-50%) rotate(0deg) scale(1.06); z-index: 6; transition: transform .4s var(--ease); }
.blot__art {
  display: block; width: 100%; aspect-ratio: 1; position: relative; overflow: hidden;
  background: var(--g, #555);
  box-shadow: 0 0 60px -6px var(--glow, rgba(0,0,0,.6)), 0 26px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) inset;
  border-radius: var(--rad, 60% 40% 55% 45% / 52% 48% 52% 48%);
  transition: border-radius .8s var(--ease);
  animation: floatPlanet var(--fdur, 7s) ease-in-out var(--fdelay, 0s) infinite;
}
@keyframes floatPlanet { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(2.5deg); } }
.blot:nth-child(1) .blot__art { --fdur: 6.5s; --fdelay: -.3s; }
.blot:nth-child(2) .blot__art { --fdur: 8.2s; --fdelay: -2.4s; }
.blot:nth-child(3) .blot__art { --fdur: 7.1s; --fdelay: -1.1s; }
.blot:nth-child(4) .blot__art { --fdur: 9s;   --fdelay: -3.6s; }
.blot:nth-child(5) .blot__art { --fdur: 7.7s; --fdelay: -.8s; }
/* real screenshot, masked into the blob (set via --shot on the blot); falls back to the gradient */
.blot__shot { position: absolute; inset: 0; z-index: 1; background-image: var(--shot, none); background-size: cover; background-position: var(--shot-pos, top center); background-repeat: no-repeat; transition: transform .6s var(--ease); }
.blot:hover .blot__shot { transform: scale(1.07); }
.blot__art::before { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(80% 60% at 30% 22%, rgba(255,255,255,.35), transparent 60%); mix-blend-mode: soft-light; }
.blot__art::after {
  content: "View ↗"; position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  font: 700 .76rem/1 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper);
  background: rgba(16,15,11,.42); opacity: 0; transition: opacity .35s var(--ease);
}
.blot:hover .blot__art { border-radius: 48% 52% 50% 50% / 50% 50% 50% 50%; }
.blot:hover .blot__art::after { opacity: 1; }
.blot__meta { display: block; text-align: center; margin-top: 14px; }
.blot__meta b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.2rem,1.6vw,1.5rem); }
.blot__meta i { font: 400 .7rem/1.4 var(--ff-mono); letter-spacing: .04em; text-transform: uppercase; font-style: normal; color: rgba(239,231,216,.55); }

/* blot palettes */
.blot--a { --g: linear-gradient(150deg,#7c5cff,#c9a4ff); --glow: rgba(124,92,255,.45); --rad: 62% 38% 54% 46% / 58% 44% 56% 42%; }
.blot--b { --g: linear-gradient(150deg,#ff5d2b,#ffb072); --glow: rgba(255,93,43,.45); --rad: 40% 60% 42% 58% / 55% 42% 58% 45%; }
.blot--c { --g: linear-gradient(150deg,#11b5a4,#74e8c7); --glow: rgba(17,181,164,.42); --rad: 58% 42% 60% 40% / 42% 56% 44% 58%; }
.blot--d { --g: linear-gradient(150deg,#ec3f86,#ff9ec0); --glow: rgba(236,63,134,.45); --rad: 50% 50% 38% 62% / 60% 40% 60% 40%; }
.blot--next .blot__art { background: transparent; border: 1.5px dashed rgba(239,231,216,.4); box-shadow: none; }
.blot--next .blot__art::before { display: none; }
.blot--next .blot__art::after { content: "Start ↗"; background: transparent; opacity: .8; }
.blot--next:hover .blot__art { border-color: var(--accent); }
.blot--next:hover .blot__art::after { opacity: 1; color: var(--accent); }

/* HUD */
.board__recenter {
  position: absolute; right: var(--pad); bottom: 22px; z-index: 7;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 100px;
  background: rgba(16,15,11,.6); border: 1.5px solid rgba(239,231,216,.25); color: var(--paper);
  font: 400 .8rem/1 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(6px);
  transition: border-color .3s, color .3s;
}
.board__recenter i { color: var(--accent); font-style: normal; }
.board__recenter:hover { border-color: var(--accent); color: var(--accent); }
.board__recenter:hover i { color: var(--paper); }
.board__badge { position: absolute; left: var(--pad); bottom: 26px; z-index: 7; font: 400 .76rem/1 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(239,231,216,.4); pointer-events: none; }

/* ===== Reviews ===== */
.reviews { position: relative; z-index: 2; color: var(--paper); padding: clamp(80px,12vh,160px) var(--pad) clamp(40px,6vh,70px); }
.reviews .sec-head { padding: 0; max-width: none; margin: 0 0 clamp(40px,5vh,64px); text-align: left; }
/* auto-scrolling marquee of testimonial cards */
.reviews__marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews__track { display: flex; width: max-content; will-change: transform; }
.review { flex: 0 0 clamp(320px,32vw,460px); margin-right: clamp(18px,2vw,28px); display: flex; flex-direction: column; gap: 18px; padding: clamp(26px,3vw,42px); border: 1.5px solid rgba(239,231,216,.13); border-radius: 18px; background: rgba(255,255,255,.025); backdrop-filter: blur(2px); transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); }
.review:hover { border-color: rgba(239,231,216,.34); background: rgba(255,255,255,.05); transform: translateY(-6px); }
.review__stars { color: var(--accent); letter-spacing: 4px; font-size: .95rem; }
.review blockquote { font-family: var(--ff-display); font-weight: 360; font-size: clamp(1.2rem,1.9vw,1.6rem); line-height: 1.34; letter-spacing: -.01em; }
.review figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 3px; }
.review figcaption b { font-weight: 600; font-size: 1rem; }
.review figcaption span { font: 400 .78rem/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .05em; color: rgba(239,231,216,.5); }

/* ===== FAQ ===== */
.faq { position: relative; z-index: 2; color: var(--paper); padding: clamp(70px,10vh,130px) var(--pad) clamp(90px,13vh,150px); }
.faq .sec-head { padding: 0; max-width: none; margin: 0; text-align: left; }
.faq__ask { font: 400 .92rem/1 var(--ff-mono); color: var(--accent); align-self: flex-end; border-bottom: 1.5px solid transparent; padding-bottom: 4px; transition: border-color .3s; }
.faq__ask:hover { border-color: var(--accent); }
.faq__list { border-top: 1.5px solid rgba(239,231,216,.22); margin-top: clamp(34px,4.5vh,56px); }
.faq__item { border-bottom: 1.5px solid rgba(239,231,216,.12); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(22px,2.6vw,34px) 0; background: none; border: 0; text-align: left; color: var(--paper); transition: color .3s var(--ease); }
.faq__q span { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.25rem,2.4vw,2rem); letter-spacing: -.015em; line-height: 1.1; }
.faq__q:hover, .faq__item.open .faq__q { color: var(--accent); }
.faq__icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transition: transform .35s var(--ease); }
.faq__icon::before { width: 18px; height: 1.6px; transform: translate(-50%,-50%); }
.faq__icon::after { width: 1.6px; height: 18px; transform: translate(-50%,-50%); }
.faq__item.open .faq__icon::after { transform: translate(-50%,-50%) scaleY(0); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-inner p { max-width: 66ch; padding-bottom: clamp(22px,2.6vw,32px); color: rgba(239,231,216,.7); font-size: clamp(1rem,1.3vw,1.12rem); line-height: 1.6; }

/* ===== CTA ===== */
.cta { position: relative; z-index: 2; background: transparent; color: var(--paper); padding: clamp(70px,11vh,130px) var(--pad); text-align: center; overflow: hidden; }
.cta__label { font: 700 .85rem/1 var(--ff-mono); letter-spacing: .08em; color: var(--accent); text-transform: uppercase; margin-bottom: 30px; }
.cta__big { display: block; overflow: hidden; white-space: nowrap; margin: 0 calc(var(--pad) * -1); }
.cta__marq { display: inline-block; font-family: var(--ff-display); font-weight: 300; font-size: clamp(4rem,17vw,16rem); line-height: .92; will-change: transform; }
.cta__marq .ital { color: var(--paper); transition: color .3s; }
.cta__big:hover .cta__marq .ital { color: var(--accent); }
.cta__row { display: flex; justify-content: center; align-items: center; gap: clamp(20px,4vw,50px); margin-top: clamp(40px,6vh,70px); flex-wrap: wrap; }
.cta__email { font: 400 1.1rem/1 var(--ff-mono); border-bottom: 1.5px solid var(--accent); padding-bottom: 4px; }
.cta .btn--line { border-color: var(--paper); color: var(--paper); }
.cta .btn--line::before { background: var(--accent); }
.cta .btn--line:hover { border-color: var(--accent); }

/* ===== Footer ===== */
.foot { position: relative; z-index: 2; color: var(--paper); padding: clamp(50px,7vh,80px) var(--pad) 30px; }
.foot__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding-bottom: 40px; border-bottom: 1.5px solid rgba(239,231,216,.14); }
.foot__brand { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2.2rem,6vw,4rem); letter-spacing: -.02em; }
.foot__nav { display: flex; gap: clamp(16px,3vw,36px); }
.foot__nav a { font: 500 1rem/1 var(--ff-body); color: rgba(239,231,216,.75); }
.foot__nav a:hover { color: var(--accent); }
.foot__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font: 400 .82rem/1.4 var(--ff-mono); color: rgba(239,231,216,.5); text-transform: uppercase; letter-spacing: .03em; }

/* ===== About page (about.html) — space-themed ===== */
body.is-about { background: #0a0912; }
body.is-about::before { display: none; } /* drop the paper vignette on the dark page */
.is-about .head { color: var(--paper); }
.head__nav a.is-current { color: var(--accent); }

/* buttons readable on the dark space page */
.is-about .btn { background: var(--paper); color: var(--ink); }
.is-about .btn:hover > span { color: var(--paper); }
.is-about .btn--line { background: transparent; border-color: rgba(239,231,216,.5); color: var(--paper); }
.is-about .btn--line:hover { border-color: var(--accent); }

.space-page {
  position: relative; z-index: 2; color: var(--paper); overflow: hidden;
  background:
    radial-gradient(72vw 60vh at 78% 24vh, rgba(124,92,255,.20), transparent 62%),
    radial-gradient(66vw 55vh at 12% 96vh, rgba(17,181,164,.13), transparent 62%),
    radial-gradient(70vw 55vh at 82% 168vh, rgba(236,63,134,.12), transparent 62%),
    #0a0912;
}
.space-page::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 130px 180px, rgba(255,255,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 220px 90px, rgba(255,255,255,.75), transparent),
    radial-gradient(1px 1px at 300px 250px, rgba(200,210,255,.5), transparent),
    radial-gradient(1px 1px at 90px 320px, rgba(255,255,255,.4), transparent),
    radial-gradient(2px 2px at 350px 150px, rgba(255,225,190,.65), transparent),
    radial-gradient(1px 1px at 180px 360px, rgba(255,255,255,.38), transparent);
  background-size: 400px 400px;
}
.space-page > section { position: relative; z-index: 1; }

.about-hero { max-width: 1120px; padding: clamp(140px,20vh,250px) var(--pad) clamp(56px,8vh,100px); }
.about-hero__title { font-family: var(--ff-display); font-weight: 360; letter-spacing: -.03em; line-height: .98; font-size: clamp(2.7rem,8vw,6.4rem); margin: clamp(18px,3vh,30px) 0 clamp(24px,3.5vh,40px); }
.about-hero__lede { max-width: 56ch; font-size: clamp(1.08rem,1.5vw,1.35rem); line-height: 1.5; color: rgba(239,231,216,.72); }
.about-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px,4vh,46px); }

.about-story { display: grid; grid-template-columns: .8fr 1.5fr; gap: clamp(28px,5vw,80px); padding: clamp(60px,9vh,120px) var(--pad); border-top: 1.5px solid rgba(239,231,216,.12); }
.about-story .sec-head__label { display: block; }
.about-story__text { display: flex; flex-direction: column; gap: clamp(20px,3vh,30px); }
.about-story__text p { font-family: var(--ff-display); font-weight: 350; font-size: clamp(1.3rem,2.5vw,2.05rem); line-height: 1.32; letter-spacing: -.012em; color: rgba(239,231,216,.92); }

.about-values { padding: clamp(60px,9vh,120px) var(--pad); border-top: 1.5px solid rgba(239,231,216,.12); }
.about-values .sec-head { padding: 0; max-width: none; margin: 0 0 clamp(38px,5vh,58px); text-align: left; }
.about-values .sec-head__label { display: block; margin-bottom: 18px; }
.about-values .sec-head__title { font-family: var(--ff-display); font-weight: 380; font-size: clamp(2.2rem,5vw,4rem); letter-spacing: -.02em; line-height: .96; }
.about-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,1.8vw,26px); }
.value { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px,2.6vw,36px); border: 1.5px solid rgba(239,231,216,.13); border-radius: 16px; background: rgba(255,255,255,.022); }
.value__num { font: 400 .85rem/1 var(--ff-mono); color: var(--accent); }
.value h3 { font-family: var(--ff-display); font-weight: 400; font-size: 1.35rem; letter-spacing: -.01em; }
.value p { color: rgba(239,231,216,.6); font-size: .98rem; line-height: 1.5; }

.about-stats { padding: clamp(48px,7vh,90px) var(--pad); border-top: 1.5px solid rgba(239,231,216,.12); }
.about-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.about-stats .stat strong { display: block; font-family: var(--ff-display); font-weight: 400; font-size: clamp(2.6rem,5.5vw,4.4rem); line-height: 1; letter-spacing: -.03em; }
.about-stats .stat span { font: 400 .8rem/1.4 var(--ff-mono); color: rgba(239,231,216,.5); text-transform: uppercase; letter-spacing: .03em; display: block; margin-top: 12px; }

.about-cta { text-align: center; padding: clamp(80px,12vh,170px) var(--pad) clamp(90px,13vh,150px); border-top: 1.5px solid rgba(239,231,216,.12); }
.about-cta__title { font-family: var(--ff-display); font-weight: 360; font-size: clamp(2.1rem,6vw,4.4rem); letter-spacing: -.02em; line-height: 1.04; margin: 16px auto clamp(30px,4vh,46px); max-width: 16ch; }
.about-cta__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.about-cta__email { display: inline-block; margin-top: 28px; font: 400 1.05rem/1 var(--ff-mono); color: rgba(239,231,216,.55); border-bottom: 1.5px solid var(--accent); padding-bottom: 4px; transition: color .25s; }
.about-cta__email:hover { color: var(--paper); }

@media (max-width: 860px) {
  .about-story { grid-template-columns: 1fr; gap: 20px; }
  .about-values__grid { grid-template-columns: 1fr 1fr; }
  .about-stats__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
}
@media (max-width: 480px) {
  .about-values__grid { grid-template-columns: 1fr; }
}

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* page-load */
.hero .line > span, .hero__lede, .hero__actions { transform: translateY(110%); opacity: 0; }
.is-loaded .hero .line > span, .is-loaded .hero__lede, .is-loaded .hero__actions { transform: translateY(0); opacity: 1; transition: transform 1s var(--ease), opacity 1s var(--ease); }
.is-loaded .hero__eyebrow { transition-delay: .05s; }
.is-loaded .hero__title .line:nth-child(1) > span { transition-delay: .15s; }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: .27s; }
.is-loaded .hero__title .line:nth-child(3) > span { transition-delay: .39s; }
.is-loaded .hero__lede { transition-delay: .55s; }
.is-loaded .hero__actions { transition-delay: .65s; }

/* ===== Responsive ===== */
@media (max-width: 860px) {
  .head__nav { position: fixed; inset: 0 0 0 auto; width: min(78vw,360px); flex-direction: column; align-items: flex-start; justify-content: center; gap: 28px; background: var(--paper-2); padding: var(--pad); transform: translateX(100%); transition: transform .5s var(--ease); color: var(--ink); }
  .head__nav.open { transform: translateX(0); box-shadow: -30px 0 60px rgba(0,0,0,.15); }
  .head__nav > a { font-size: 1.6rem; font-family: var(--ff-display); }
  .head__burger { display: flex; z-index: 101; }
  .head.menu-open .head__burger span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .head.menu-open .head__burger span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .hero__foot { grid-template-columns: 1fr; gap: 28px; }
  .svc__row { grid-template-columns: 40px 1fr; row-gap: 14px; }
  .svc__num { grid-row: 1; }
  .svc__desc, .svc__tags { grid-column: 2; text-align: left; }
  .review { flex-basis: 80vw; }
}

/* Art canvas → flowing gallery on touch devices (any size) & narrow screens.
   Drag canvas is mouse-only, so iPads/tablets get this clean grid instead. */
@media (max-width: 860px), (hover: none), (pointer: coarse) {
  .board { display: block; min-height: 0; }
  .board__head { position: static; padding: clamp(78px,10vh,98px) var(--pad) clamp(18px,3vh,30px); pointer-events: auto; }
  .board__stage { height: auto; overflow: visible; touch-action: auto; }
  .board__plane {
    position: static; width: 100%; height: auto; transform: none !important;
    display: flex; flex-direction: column; align-items: center; gap: clamp(74px,15vh,150px);
    max-width: 560px; margin: 0 auto; padding: clamp(56px,11vh,110px) var(--pad) clamp(80px,13vh,130px);
  }
  .blot {
    position: static; width: min(64vw, 300px);
    /* same scroll-scrubbed float-in as desktop */
    opacity: var(--p, 0);
    transform: translateY(calc((1 - var(--p, 0)) * 56px)) scale(calc(.55 + var(--p, 0) * .45));
    transition: opacity .18s linear, transform .2s var(--ease);
  }
  .blot:nth-child(odd) { align-self: flex-start; }
  .blot:nth-child(even) { align-self: flex-end; }
  .blot:hover { transform: none; }
  .blot:hover .blot__art { border-radius: var(--rad, 60% 40% 55% 45% / 52% 48% 52% 48%); }
  .board__recenter, .board__badge { display: none; }
  .board__hint .hint-a { display: none; }
  .board__hint .hint-b { display: inline; }
}
@media (max-width: 480px) {
  /* phone: keep the globe as a centered, fitted backdrop behind the hero text */
  .globe { display: block; width: 122vw; left: -11vw; right: auto; top: 50%; }
  .globe__cap { display: none; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .reveal, .hero .line > span, .hero__lede, .hero__actions { opacity: 1 !important; transform: none !important; }
  .studio__statement .word { opacity: 1 !important; color: var(--ink) !important; }
  .cursor, .cursor-dot { display: none; }
  * { cursor: auto !important; }
  .board { display: block; min-height: 0; }
  .board__stage { height: auto; overflow: visible; }
  .board__plane { position: static; width: 100%; height: auto; transform: none !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(28px,4vw,46px); max-width: 1080px; margin: 0 auto; padding: 40px var(--pad) 70px; }
  .blot { position: static; width: 100%; transform: none !important; opacity: 1 !important; }
  .board__recenter, .board__badge { display: none; }
  .board__hint .hint-a { display: none; }
  .board__hint .hint-b { display: inline; }
}

/* ===== Contact page (contact.html) ===== */
.is-contact .head__pill.is-current { background: var(--accent); color: #fff; }

/* hero */
.contact-hero { position: relative; max-width: 1180px; margin: 0 auto; padding: clamp(140px,20vh,240px) var(--pad) clamp(34px,5vh,60px); }
.contact-hero__title { font-family: var(--ff-display); font-weight: 360; letter-spacing: -.03em; line-height: .96; font-size: clamp(2.9rem,9vw,7rem); margin: clamp(16px,2.6vh,28px) 0 clamp(22px,3vh,34px); }
.contact-hero__lede { max-width: 54ch; font-size: clamp(1.08rem,1.5vw,1.35rem); line-height: 1.55; color: rgba(239,231,216,.72); }
.contact-hero__facts { display: flex; flex-wrap: wrap; gap: clamp(26px,5vw,64px); margin-top: clamp(34px,5vh,52px); }
.contact-hero__facts li { display: flex; flex-direction: column; gap: 8px; }
.contact-hero__facts b { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2rem,4vw,3rem); line-height: 1; letter-spacing: -.03em; }
.contact-hero__facts span { font: 400 .76rem/1.3 var(--ff-mono); text-transform: uppercase; letter-spacing: .04em; color: rgba(239,231,216,.5); }

/* pulsing transmitter, top-right of the hero */
.contact-hero__signal { position: absolute; top: clamp(120px,17vh,200px); right: clamp(8px,4vw,60px); width: 160px; height: 160px; pointer-events: none; }
.contact-hero__signal i, .contact-hero__signal .contact-hero__core { position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: translate(-50%,-50%); }
.contact-hero__core { width: 12px; height: 12px; background: var(--accent); box-shadow: 0 0 18px 3px rgba(255,59,21,.6); }
.contact-hero__signal i { width: 100%; height: 100%; border: 1.5px solid rgba(255,59,21,.5); opacity: 0; animation: ping 3.4s var(--ease) infinite; }
.contact-hero__signal i:nth-child(2) { animation-delay: 1.13s; }
.contact-hero__signal i:nth-child(3) { animation-delay: 2.26s; }
@keyframes ping { 0% { width: 14px; height: 14px; opacity: .9; } 100% { width: 160px; height: 160px; opacity: 0; } }

/* layout */
.contact-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(24px,4vh,46px) var(--pad) clamp(80px,13vh,150px); display: grid; grid-template-columns: 1.55fr .9fr; gap: clamp(30px,5vw,76px); align-items: start; border-top: 1.5px solid rgba(239,231,216,.12); }

/* form */
.contact-form { display: grid; gap: clamp(20px,2.8vh,28px); }
.contact-form__head h2 { font-family: var(--ff-display); font-weight: 380; font-size: clamp(1.5rem,3vw,2.1rem); letter-spacing: -.015em; }
.contact-form__head p { margin-top: 8px; font: 400 .92rem/1.4 var(--ff-mono); color: rgba(239,231,216,.5); }
.contact-form__head i { font-style: normal; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,22px); }
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: rgba(255,255,255,.03); border: 1.5px solid rgba(239,231,216,.16);
  border-radius: 14px; padding: 26px 18px 11px; color: var(--paper);
  font: 400 1.04rem/1.4 var(--ff-body); transition: border-color .3s var(--ease), background .3s var(--ease); -webkit-appearance: none;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.055); }
.field label {
  position: absolute; left: 18px; top: 19px; transform-origin: left top; pointer-events: none;
  font: 400 1.02rem/1 var(--ff-body); color: rgba(239,231,216,.5);
  transition: transform .22s var(--ease), color .22s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  transform: translateY(-11px) scale(.74); color: var(--accent);
}
.field__opt { font: 400 .72rem/1 var(--ff-mono); color: rgba(239,231,216,.4); text-transform: uppercase; letter-spacing: .05em; margin-left: 6px; }

/* chip groups */
.field-group { border: 0; padding: 0; margin: 0; }
.field-group__legend { display: block; font: 700 .76rem/1 var(--ff-mono); letter-spacing: .07em; text-transform: uppercase; color: rgba(239,231,216,.55); margin-bottom: 14px; padding: 0; }
.chip-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font: 400 .9rem/1 var(--ff-mono); padding: 11px 17px; border-radius: 999px; border: 1.5px solid rgba(239,231,216,.2); color: rgba(239,231,216,.72); background: transparent; cursor: pointer; transition: border-color .22s, color .22s, background .22s, transform .12s; }
.chip:hover { border-color: rgba(239,231,216,.5); color: var(--paper); }
.chip:active { transform: scale(.96); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* submit */
.btn--send { font-size: 1.02rem; padding: 17px 30px; }
.btn--send:disabled { opacity: .6; pointer-events: none; }
.form-submit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.form-note { font: 400 .82rem/1.3 var(--ff-mono); color: rgba(239,231,216,.45); transition: color .3s; }
.form-note.is-ok { color: #6ee7b7; }
.form-note.is-err { color: #ff8a73; }

/* aside */
.contact-aside { display: grid; gap: 18px; position: sticky; top: 104px; }
.contact-card { border: 1.5px solid rgba(239,231,216,.13); border-radius: 18px; padding: clamp(22px,2.4vw,30px); background: rgba(255,255,255,.022); }
.contact-card__tag { font: 700 .74rem/1 var(--ff-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 16px; }
.contact-card h3 { font-family: var(--ff-display); font-weight: 400; font-size: 1.4rem; letter-spacing: -.01em; margin-bottom: 12px; }
.contact-card__big { display: block; font: 400 1.05rem/1.3 var(--ff-mono); color: var(--paper); word-break: break-word; border-bottom: 1.5px solid var(--accent); padding-bottom: 8px; margin-bottom: 20px; transition: color .25s; }
.contact-card__big:hover { color: var(--accent); }
.contact-meta { display: grid; gap: 16px; }
.contact-meta li { display: flex; flex-direction: column; gap: 4px; }
.contact-meta b { font: 700 .74rem/1 var(--ff-mono); letter-spacing: .05em; text-transform: uppercase; color: rgba(239,231,216,.5); }
.contact-meta span { font-size: 1rem; color: rgba(239,231,216,.9); }
.contact-meta .is-live { display: inline-flex; align-items: center; gap: 9px; color: var(--paper); }
.contact-meta .is-live i { width: 8px; height: 8px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 0 0 rgba(110,231,183,.6); animation: live 2.4s ease-out infinite; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(110,231,183,.55); } 70%,100% { box-shadow: 0 0 0 9px rgba(110,231,183,0); } }

@media (max-width: 860px) {
  .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
  .contact-aside { position: static; }
  .contact-hero__signal { display: none; }
  .field-row { grid-template-columns: 1fr; }
}

/* ===== Service page (web-design.html) ===== */
.svc-hero { max-width: 1120px; margin: 0 auto; padding: clamp(140px,20vh,250px) var(--pad) clamp(40px,6vh,72px); }
.svc-hero__title { font-family: var(--ff-display); font-weight: 360; letter-spacing: -.03em; line-height: .98; font-size: clamp(2.7rem,8vw,6.2rem); margin: clamp(18px,3vh,30px) 0 clamp(22px,3.2vh,36px); }
.svc-hero__lede { max-width: 60ch; font-size: clamp(1.08rem,1.5vw,1.35rem); line-height: 1.55; color: rgba(239,231,216,.72); }
.svc-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px,4vh,46px); }
/* the stats section gets a header on this page — keep it left-aligned like the others */
.about-stats .sec-head { padding: 0; max-width: none; margin: 0 0 clamp(34px,4.5vh,52px); text-align: left; }
.about-stats .sec-head__label { display: block; margin-bottom: 18px; }
.about-stats .sec-head__title { font-family: var(--ff-display); font-weight: 380; font-size: clamp(2.2rem,5vw,4rem); letter-spacing: -.02em; line-height: .96; }
/* "what we build" cards use a short word tag rather than a number */
.is-service .value__num { text-transform: uppercase; letter-spacing: .08em; }

/* ===== Clickable service row (home → service page) ===== */
.svc__arrow { font-style: normal; display: inline-block; color: var(--accent); font-size: .58em; vertical-align: middle; margin-left: .15em; opacity: 0; transform: translate(-8px, 4px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.svc__row--link:hover .svc__arrow { opacity: 1; transform: none; }
.svc__go { position: absolute; inset: 0; z-index: 2; } /* stretched, invisible click target for the whole row */

/* ===== Live "site being built" showpiece (web-design.html) ===== */
.builder { padding: clamp(60px,9vh,120px) var(--pad); border-top: 1.5px solid rgba(239,231,216,.12); }
.builder .sec-head { padding: 0; max-width: none; margin: 0 0 clamp(22px,3vh,34px); text-align: left; }
.builder .sec-head__label { display: block; margin-bottom: 18px; }
.builder .sec-head__title { font-family: var(--ff-display); font-weight: 380; font-size: clamp(2.2rem,5vw,4rem); letter-spacing: -.02em; line-height: .96; }
.builder__lede { max-width: 60ch; font-size: clamp(1.02rem,1.4vw,1.25rem); line-height: 1.55; color: rgba(239,231,216,.72); margin: 0 0 clamp(28px,3.6vh,44px); }

/* browser frame */
.browser { position: relative; border-radius: 16px; overflow: hidden; border: 1.5px solid rgba(239,231,216,.16); background: #0d0c14; box-shadow: 0 40px 90px -34px rgba(0,0,0,.7); }
.browser__bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; background: rgba(255,255,255,.05); border-bottom: 1.5px solid rgba(239,231,216,.1); }
.browser__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.browser__dot:nth-child(1) { background: #ff5f56; } .browser__dot:nth-child(2) { background: #ffbd2e; } .browser__dot:nth-child(3) { background: #27c93f; }
.browser__url { margin-left: 10px; flex: 1; min-width: 0; font: 400 .78rem/1.4 var(--ff-mono); color: rgba(239,231,216,.6); background: rgba(0,0,0,.3); padding: 7px 12px; border-radius: 7px; white-space: nowrap; overflow: hidden; }
.browser__live { flex: 0 0 auto; font: 700 .64rem/1 var(--ff-mono); letter-spacing: .06em; color: #34d058; text-transform: uppercase; opacity: 0; transition: opacity .5s var(--ease); }
.browser.is-done .browser__live { opacity: 1; }
.browser__reload { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; border: 0; background: rgba(239,231,216,.08); color: rgba(239,231,216,.6); font-size: .92rem; cursor: pointer; transition: background .25s, color .25s, transform .6s var(--ease); }
.browser__reload:hover { background: var(--accent); color: #fff; }
.browser.is-done .browser__reload { transform: rotate(360deg); }
.browser__view { position: relative; background: var(--paper); color: var(--ink); overflow: hidden; }

/* the REAL page content, paper-themed and readable */
.bpage { display: flex; flex-direction: column; gap: clamp(26px,4vh,46px); padding: clamp(26px,4%,52px) clamp(22px,5%,60px) clamp(30px,4.5%,56px); }
.bpage__hero { display: flex; flex-direction: column; gap: clamp(9px,1.4vh,16px); }
.bpage__eyebrow { font: 700 clamp(9px,1vw,12px)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }
.bpage__title { font-family: var(--ff-display); font-weight: 380; font-size: clamp(1.5rem,3.4vw,2.7rem); letter-spacing: -.025em; line-height: 1.03; min-height: 1.1em; max-width: 19ch; }
.bpage__title em { font-style: italic; color: var(--accent); }
.bpage__title::after { content: ""; }
.browser.is-typing .bpage__title::after { content: "▍"; margin-left: 1px; color: var(--accent); animation: bcaret 1.05s steps(1) infinite; }
@keyframes bcaret { 50% { opacity: 0; } }
.bpage__lede { font-size: clamp(.95rem,1.3vw,1.15rem); line-height: 1.5; color: rgba(23,21,15,.62); max-width: 56ch; }

.bpage__sect { display: flex; flex-direction: column; gap: clamp(14px,2vh,22px); }
.bpage__label { font: 700 clamp(9px,1vw,12px)/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .1em; color: rgba(23,21,15,.45); }
.bpage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px,1.6vw,20px); }
.bcard { padding: clamp(16px,2vw,24px); border-radius: 14px; background: rgba(23,21,15,.035); box-shadow: inset 0 0 0 1px rgba(23,21,15,.08); }
.bcard h3 { font-family: var(--ff-display); font-weight: 500; font-size: clamp(1.05rem,1.5vw,1.32rem); letter-spacing: -.01em; margin-bottom: 7px; }
.bcard p { font-size: clamp(.85rem,1.15vw,1rem); line-height: 1.45; color: rgba(23,21,15,.6); }

.bpage__steps { list-style: none; display: flex; flex-direction: column; }
.bstep { display: grid; grid-template-columns: auto 1fr; gap: clamp(14px,2vw,24px); align-items: baseline; padding: clamp(13px,1.8vh,18px) 0; border-top: 1px solid rgba(23,21,15,.08); }
.bstep:first-child { border-top: 0; padding-top: 0; }
.bstep__n { font: 700 clamp(.8rem,1.1vw,1rem)/1 var(--ff-mono); color: var(--accent); }
.bstep h3 { font-family: var(--ff-display); font-weight: 500; font-size: clamp(1.05rem,1.5vw,1.32rem); letter-spacing: -.01em; margin-bottom: 5px; }
.bstep p { font-size: clamp(.85rem,1.15vw,1rem); line-height: 1.45; color: rgba(23,21,15,.6); }

.bpage__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px,1.6vw,22px); }
.bstat strong { display: block; font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.5rem,3vw,2.6rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.bstat span { display: block; margin-top: 8px; font: 400 clamp(.66rem,.85vw,.74rem)/1.4 var(--ff-mono); text-transform: uppercase; letter-spacing: .03em; color: rgba(23,21,15,.5); }

/* progressive reveal of the real content */
.bpage [data-build] { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.bpage [data-build].in { opacity: 1; transform: none; }

/* build console (status bar at the bottom of the browser) */
.browser__console { display: flex; align-items: center; gap: 11px; padding: 12px 15px; background: #0b0a12; border-top: 1.5px solid rgba(239,231,216,.1); font: 400 .8rem/1 var(--ff-mono); color: rgba(239,231,216,.7); }
.browser__prompt { color: var(--accent); flex: 0 0 auto; }
.browser__status { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser.is-done .browser__status { color: #6ee7b7; }
.browser__pct { flex: 0 0 auto; color: rgba(239,231,216,.5); }
.browser__track { flex: 0 0 clamp(70px,12vw,130px); height: 5px; border-radius: 99px; background: rgba(239,231,216,.12); overflow: hidden; }
.browser__track b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #7c5cff); transition: width .5s var(--ease); }

@media (max-width: 680px) {
  .bpage__grid { grid-template-columns: 1fr; }
  .bpage__stats { grid-template-columns: 1fr 1fr; }
  .browser__pct { display: none; }
}

/* ===== Marketing hero: pitch + live dashboard, one band (marketing.html) ===== */
.mhero { display: grid; grid-template-columns: 1fr 1.06fr; gap: clamp(28px,4vw,62px); align-items: center; max-width: 1280px; margin: 0 auto; padding: clamp(120px,16vh,195px) var(--pad) clamp(50px,8vh,92px); }
.mhero__copy { display: flex; flex-direction: column; min-width: 0; }
.mhero__copy .svc-hero__title { font-size: clamp(2.1rem,4.4vw,3.7rem); margin: clamp(14px,2.4vh,24px) 0 clamp(18px,2.6vh,28px); }
.mhero__copy .svc-hero__lede { max-width: 44ch; }
.mhero__viz { min-width: 0; }
.mhero__viz .dash__body { grid-template-columns: 1fr; }   /* clean vertical dashboard in the hero column */
@media (max-width: 940px) {
  .mhero { grid-template-columns: 1fr; gap: clamp(32px,5vh,52px); }
  .mhero__copy .svc-hero__title { font-size: clamp(2.6rem,8vw,4.4rem); }
}

/* ===== Growth dashboard panel ===== */
.dash .sec-head { padding: 0; max-width: none; margin: 0 0 clamp(22px,3vh,34px); text-align: left; }
.dash .sec-head__label { display: block; margin-bottom: 18px; }
.dash .sec-head__title { font-family: var(--ff-display); font-weight: 380; font-size: clamp(2.2rem,5vw,4rem); letter-spacing: -.02em; line-height: .96; }
.dash__lede { max-width: 60ch; font-size: clamp(1.02rem,1.4vw,1.25rem); line-height: 1.55; color: rgba(239,231,216,.72); margin: 0 0 clamp(28px,3.6vh,44px); }

.dash__panel { border: 1.5px solid rgba(239,231,216,.14); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow: 0 40px 90px -40px rgba(0,0,0,.7); }
.dash__bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1.5px solid rgba(239,231,216,.1); }
.dash__title { font-family: var(--ff-display); font-weight: 500; font-size: 1.05rem; color: var(--paper); }
.dash__range { font: 400 .76rem/1 var(--ff-mono); color: rgba(239,231,216,.45); }
.dash__live { margin-left: auto; font: 700 .66rem/1 var(--ff-mono); letter-spacing: .06em; text-transform: uppercase; color: #34d058; display: inline-flex; align-items: center; gap: 7px; }
.dash__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d058; box-shadow: 0 0 0 0 rgba(52,208,88,.5); animation: live 2.4s ease-out infinite; }

.dash__body { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(20px,2.6vw,38px); padding: clamp(20px,2.6vw,34px); }
.dash__chart { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash__metric { display: flex; flex-direction: column; gap: 4px; }
.dash__metric strong { font-family: var(--ff-display); font-weight: 400; font-size: clamp(2.1rem,4.4vw,3.4rem); line-height: 1; letter-spacing: -.03em; color: var(--paper); }
.dash__metric span { font: 400 .76rem/1.3 var(--ff-mono); color: rgba(239,231,216,.5); text-transform: uppercase; letter-spacing: .03em; }
.dash__graph { position: relative; }
.dash__graph svg { display: block; width: 100%; height: clamp(120px,18vw,190px); }
.dash__grid line { stroke: rgba(239,231,216,.09); stroke-width: .6; }
.dash__area { fill: url(#dashGrad); opacity: 0; }
.dash__panel.is-live .dash__area { opacity: 1; transition: opacity 1s var(--ease) .45s; }
.dash__line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.dash__panel.is-live .dash__line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.9s var(--ease); }
.dash__dot { fill: var(--accent); opacity: 0; }
.dash__panel.is-live .dash__dot { opacity: 1; transition: opacity .45s var(--ease) 1.7s; }
.dash__months { display: flex; justify-content: space-between; font: 400 .64rem/1 var(--ff-mono); color: rgba(239,231,216,.38); }

.dash__side { display: flex; flex-direction: column; gap: clamp(16px,2vw,24px); min-width: 0; }
.dash__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dkpi { padding: clamp(13px,1.5vw,18px); border-radius: 12px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px rgba(239,231,216,.08); }
.dkpi strong { display: block; font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.45rem,2.4vw,2rem); line-height: 1; letter-spacing: -.02em; color: var(--paper); }
.dkpi span { display: block; margin-top: 7px; font: 400 .66rem/1.3 var(--ff-mono); text-transform: uppercase; letter-spacing: .03em; color: rgba(239,231,216,.5); }
.dash__channels { display: flex; flex-direction: column; gap: 11px; }
.dch { display: grid; grid-template-columns: 58px 1fr; gap: 12px; align-items: center; }
.dch__name { font: 700 .68rem/1 var(--ff-mono); text-transform: uppercase; letter-spacing: .04em; color: rgba(239,231,216,.6); }
.dch__track { height: 8px; border-radius: 99px; background: rgba(239,231,216,.1); overflow: hidden; }
.dch__fill { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #7c5cff); transition: width 1.3s var(--ease) .3s; }
.dash__panel.is-live .dch__fill { width: var(--w); }

@media (max-width: 820px) { .dash__body { grid-template-columns: 1fr; } }

/* ===== Wormhole page transition ===== */
.warp { position: fixed; inset: 0; z-index: 100000; pointer-events: none; background: #06060c; opacity: 0; visibility: hidden; }
.warp canvas { display: block; width: 100%; height: 100%; }
/* covers the incoming page before first paint (set by the inline head script) so there's no flash */
html.warp-enter .warp { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .warp, html.warp-enter .warp { display: none !important; }
}

/* ===== Terms & Privacy (legal.html) ===== */
.legal-hero { max-width: 1180px; margin: 0 auto; padding: clamp(140px,19vh,230px) var(--pad) clamp(30px,5vh,54px); }
.legal-hero__title { font-family: var(--ff-display); font-weight: 360; letter-spacing: -.03em; line-height: .96; font-size: clamp(2.7rem,8vw,6.2rem); margin: clamp(16px,2.6vh,28px) 0 clamp(20px,3vh,32px); }
.legal-hero__lede { max-width: 60ch; font-size: clamp(1.05rem,1.4vw,1.28rem); line-height: 1.55; color: rgba(239,231,216,.72); }
.legal-hero__meta { margin-top: clamp(26px,4vh,40px); font: 400 .82rem/1.6 var(--ff-mono); letter-spacing: .03em; color: rgba(239,231,216,.5); display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.legal-hero__meta b { color: var(--paper); font-weight: 700; }
.legal-hero__meta i { color: var(--accent); font-style: normal; }

.legal-wrap { max-width: 1180px; margin: 0 auto; padding: clamp(20px,3vh,40px) var(--pad) clamp(80px,13vh,150px); display: grid; grid-template-columns: 250px 1fr; gap: clamp(34px,5vw,80px); align-items: start; border-top: 1.5px solid rgba(239,231,216,.12); }

/* sticky index */
.legal-toc { position: sticky; top: 100px; }
.legal-toc__tag { display: block; font: 700 .72rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.legal-toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 1.5px solid rgba(239,231,216,.14); }
.legal-toc__part { font: 700 .66rem/1 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(239,231,216,.4); margin: 18px 0 8px; padding-left: 16px; }
.legal-toc__part:first-of-type { margin-top: 0; }
.legal-toc a { position: relative; padding: 6px 0 6px 16px; margin-left: -1.5px; border-left: 1.5px solid transparent; font: 400 .86rem/1.35 var(--ff-mono); color: rgba(239,231,216,.55); transition: color .25s, border-color .25s; }
.legal-toc a:hover { color: var(--paper); }
.legal-toc a.is-active { color: var(--accent); border-left-color: var(--accent); }

/* tl;dr callout */
.legal-tldr { border: 1.5px solid rgba(255,59,21,.4); border-radius: 18px; padding: clamp(22px,2.6vw,32px); background: rgba(255,59,21,.05); margin-bottom: clamp(40px,6vh,64px); }
.legal-tldr__tag { display: block; font: 700 .74rem/1 var(--ff-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.legal-tldr p { font-family: var(--ff-display); font-weight: 350; font-size: clamp(1.12rem,1.7vw,1.45rem); line-height: 1.45; letter-spacing: -.01em; color: rgba(239,231,216,.94); }

/* part divider */
.legal-divider { display: flex; align-items: center; gap: 16px; font: 700 .8rem/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--paper); margin: clamp(48px,7vh,80px) 0 clamp(26px,3.5vh,38px); }
.legal-divider:first-of-type { margin-top: 0; }
.legal-divider i { flex: 0 0 auto; width: 30px; height: 1.5px; background: var(--accent); }

/* sections */
.legal-section { position: relative; padding: clamp(26px,3.5vh,40px) 0; border-top: 1.5px solid rgba(239,231,216,.1); }
.legal-section:first-of-type { border-top: 0; padding-top: 0; }
.legal-section__num { display: block; font: 400 .8rem/1 var(--ff-mono); color: var(--accent); margin-bottom: 12px; }
.legal-section h2 { font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.5rem,2.8vw,2.15rem); letter-spacing: -.018em; line-height: 1.06; margin-bottom: 16px; }
.legal-section p { font-size: 1.02rem; line-height: 1.65; color: rgba(239,231,216,.74); max-width: 68ch; }
.legal-section p + p { margin-top: 14px; }
.legal-short { font-family: var(--ff-display) !important; font-style: italic; font-weight: 350; font-size: 1.12rem !important; line-height: 1.45 !important; color: var(--paper) !important; padding-left: 16px; border-left: 2px solid var(--accent); margin-bottom: 18px; }

.legal-list { list-style: none; margin: 16px 0; display: grid; gap: 10px; max-width: 68ch; }
.legal-list li { position: relative; padding-left: 22px; font-size: 1.02rem; line-height: 1.5; color: rgba(239,231,216,.74); }
.legal-list li::before { content: "✶"; position: absolute; left: 0; top: 1px; color: var(--accent); font-size: .8rem; }
.legal-list b { color: var(--paper); font-weight: 600; }

.legal-mail { display: inline-block; margin: 8px 0 22px; font: 400 1.1rem/1.3 var(--ff-mono); color: var(--paper); border-bottom: 1.5px solid var(--accent); padding-bottom: 5px; transition: color .25s; }
.legal-mail:hover { color: var(--accent); }
.legal-note { font: 400 .86rem/1.6 var(--ff-mono) !important; color: rgba(239,231,216,.45) !important; border: 1.5px solid rgba(239,231,216,.13); border-radius: 12px; padding: 16px 18px; max-width: none !important; }

.legal-top { display: inline-flex; margin-top: clamp(40px,6vh,64px); }

@media (max-width: 860px) {
  .legal-wrap { grid-template-columns: 1fr; gap: 30px; }
  .legal-toc { position: static; border-bottom: 1.5px solid rgba(239,231,216,.12); padding-bottom: 24px; }
  .legal-toc nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
  .legal-toc__part { grid-column: 1 / -1; }
}