/* ================= Mezvic v6 — "Signal & Noise" (WordPress port) =================
   Ported from src/app/globals.css (v6 block) + the framer-motion behaviours
   in src/components/mezvic-v6, rebuilt as plain CSS hooks for v6.js. */

:root {
  --v6-void: #0a0908;
  --v6-bone: #f1ede4;
  --v6-signal: #ff4a00;
  --v6-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --v6-cinema: cubic-bezier(0.76, 0, 0.24, 1);
}

html { background: var(--v6-void); }
body.v6-body { margin: 0; background: var(--v6-void); color: var(--v6-bone); }

/* Hold the page until Tailwind has generated its CSS (preview build only) */
html.js.tw-wait .v6-page { opacity: 0; }
.v6-page { transition: opacity 0.25s ease; }

.v6-root ::selection { background: #ff4a00; color: #0a0908; }

/* Film grain — animated by 4-step jumps so it flickers, never glides */
.v6-grain {
  position: fixed; inset: -60%; z-index: 60; pointer-events: none;
  opacity: 0.08; filter: grayscale(1) contrast(150%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: v6-grain-jump 1.1s steps(1) infinite;
}
@keyframes v6-grain-jump {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1.5%, 1%); }
  50% { transform: translate(1%, -1.5%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(1.5%, 0.5%); }
}

/* Infinite marquee — the signal ticker */
.v6-marquee { display: flex; overflow: hidden; }
.v6-marquee-track { display: flex; width: max-content; animation: v6-marquee 28s linear infinite; }
@keyframes v6-marquee { to { transform: translateX(-50%); } }

.v6-spin { animation: v6-spin 18s linear infinite; }
@keyframes v6-spin { to { transform: rotate(360deg); } }

/* Breathing width — the kinetic watermark (variable font wdth axis) */
.v6-breathe { font-variation-settings: "wdth" 70; animation: v6-breathe 9s ease-in-out infinite; }
@keyframes v6-breathe {
  0%, 100% { font-variation-settings: "wdth" 64; }
  50% { font-variation-settings: "wdth" 86; }
}

.v6-stroke { -webkit-text-stroke: 1.5px rgba(241, 237, 228, 0.32); color: transparent; }
.v6-stroke-ink { -webkit-text-stroke: 1.5px rgba(10, 9, 8, 0.34); color: transparent; }

.v6-num {
  -webkit-text-stroke: 1.5px rgba(241, 237, 228, 0.32); color: transparent;
  transition: -webkit-text-stroke-color 0.4s var(--v6-ease);
}
.group:hover .v6-num { -webkit-text-stroke-color: #ff4a00; }

.v6-word .v6-letter {
  display: inline-block; font-variation-settings: "wdth" 100;
  transition: font-variation-settings 0.55s var(--v6-ease), color 0.35s ease;
}
.v6-word:hover .v6-letter { font-variation-settings: "wdth" 122; color: #ff4a00; }

.v6-ulink {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 3px; transition: background-size 0.45s var(--v6-ease);
}
.v6-ulink:hover, .group:hover .v6-ulink { background-size: 100% 2px; }

.v6-ping { animation: v6-ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes v6-ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 74, 0, 0.5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(255, 74, 0, 0); }
}

.v6-cue { position: relative; overflow: hidden; }
.v6-cue::after {
  content: ""; position: absolute; left: 0; top: -100%; height: 100%; width: 100%;
  background: #ff4a00; animation: v6-cue-drop 1.8s var(--v6-cinema) infinite;
}
@keyframes v6-cue-drop { 0% { top: -100%; } 55%, 100% { top: 100%; } }

/* ————— The stack lanes ————— */
.v6-stack-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent);
}
.v6-stack-track { display: flex; width: max-content; animation: v6-marquee var(--mq-dur, 42s) linear infinite; }
.v6-stack-track.v6-rev { animation-name: v6-marquee-rev; }
@keyframes v6-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.v6-stack-marquee:hover .v6-stack-track { animation-play-state: paused; }

.v6-pill {
  position: relative; border: 1px solid rgba(241, 237, 228, 0.15); color: rgba(241, 237, 228, 0.55);
  transition: border-color 0.3s var(--v6-ease), color 0.3s var(--v6-ease);
}
.v6-pill::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(255, 74, 0, 0.24), rgba(255, 74, 0, 0.05) 55%, transparent);
  opacity: 0; transition: opacity 0.35s var(--v6-ease); pointer-events: none;
}
.v6-pill:hover, .v6-pill:focus-visible { border-color: rgba(255, 74, 0, 0.75); color: #f1ede4; }
.v6-pill:hover::before, .v6-pill:focus-visible::before { opacity: 1; }
/* Pills on a bone (light) section */
.v6-on-bone .v6-pill { border-color: rgba(10, 9, 8, 0.16); color: rgba(10, 9, 8, 0.68); }
.v6-on-bone .v6-pill:hover, .v6-on-bone .v6-pill:focus-visible { border-color: rgba(255, 74, 0, 0.85); color: #0a0908; }

.v6-gradient-text {
  background-image: linear-gradient(100deg, #ff4a00 0%, #ff7a00 55%, #ffb257 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ————— Motion hooks driven by v6.js ————— */

/* Word-by-word mask rise */
.rise-mask {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.12em; margin-bottom: -0.12em; margin-right: 0;
}
.rise-mask:last-child { margin-right: 0; }
.rise-word { display: inline-block; }
html.js .rise:not(.split) { visibility: hidden; }
html.js .rise .rise-word { transform: translateY(112%); transition: transform 0.8s var(--v6-ease); transition-delay: var(--d, 0s); }
html.js .rise.in .rise-word { transform: none; }

/* Quiet fade-up reveal */
html.js .reveal {
  opacity: 0; transform: translateY(var(--y, 24px));
  transition: opacity 0.7s var(--v6-ease), transform 0.7s var(--v6-ease);
  transition-delay: var(--d, 0s);
}
html.js .reveal.in { opacity: 1; transform: none; }

/* Hero entrance fades (timed against the preloader) */
html.js .hfade {
  opacity: 0; transform: translateY(var(--y, 0px));
  transition: opacity var(--dur, 0.7s) var(--v6-ease), transform var(--dur, 0.7s) var(--v6-ease);
  transition-delay: var(--d, 0s);
}
html.js .hfade.in { opacity: 1; transform: none; }

/* Footer wordmark rise */
html.js .wordmark-rise { opacity: 0; transform: translateY(48%); transition: opacity 0.9s var(--v6-ease), transform 0.9s var(--v6-ease); }
html.js .wordmark-rise.in { opacity: 1; transform: none; }

/* Manifesto scrub words */
.scrub { display: inline-block; margin-right: 0.3em; }

/* Services spotlight */
.spot-layer {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 74, 0, 0.13), transparent 70%);
}

/* Work reel — pinned horizontal scroll */
.work-inner { display: flex; flex-direction: column; justify-content: center; padding: 96px 0; }
@media (min-width: 640px) { .work-inner { padding: 128px 0; } }
.work-inner.pinned { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: 0; }
.work-track { will-change: transform; }
.work-prog { transform-origin: left; }

/* Process signal line */
.process-fill { transform-origin: top; transform: scaleY(0); }
html:not(.js) .process-fill { transform: scaleY(1); }

/* Process: falcon flight (zigzag path through the four steps, scrubbed by scroll) */
.falcon-flight { position: absolute; inset: 0; pointer-events: none; }
.falcon-path { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.falcon-path-base { fill: none; stroke: rgba(241, 237, 228, 0.16); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 8; }
.falcon-path-lit { fill: none; stroke: rgba(255, 74, 0, 0.45); stroke-width: 1.5; stroke-linecap: round; }
@media (min-width: 1024px) { .falcon-path-lit { stroke: rgba(255, 74, 0, 0.7); } }
.falcon { position: absolute; left: 0; top: 0; z-index: 4; width: 64px; height: 64px; margin: -32px 0 0 -32px; will-change: transform; pointer-events: none; }
@media (min-width: 1024px) { .falcon { width: 136px; height: 136px; margin: -68px 0 0 -68px; } }
.falcon-sil, .falcon-video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.falcon-sil { overflow: visible; filter: drop-shadow(0 0 12px rgba(255, 74, 0, 0.45)); }
/* parked: slow glide with a slight wing sway; travelling: full wingbeats */
.falcon-sil .fw { transform-box: view-box; transform-origin: 96px 60px; animation: falcon-glide 1.6s ease-in-out infinite alternate; }
.falcon.is-flying .falcon-sil .fw { animation: falcon-flap 0.18s ease-in-out infinite alternate; }
@keyframes falcon-glide { from { transform: scaleY(1); } to { transform: scaleY(0.8); } }
@keyframes falcon-flap { from { transform: scaleY(1); } to { transform: scaleY(0.2); } }
/* real clip: black background drops out against the dark section */
.falcon-video { object-fit: contain; mix-blend-mode: screen; opacity: 0; transition: opacity 0.5s ease; }
.falcon.has-video .falcon-video { opacity: 1; }
.falcon.has-video .falcon-sil { display: none; }
[data-process] > li.is-current .v6-num { -webkit-text-stroke-color: #ff4a00; }
html:not(.js) .falcon-flight { display: none; }
@media (prefers-reduced-motion: reduce) { .falcon-sil .fw { animation: none; } }
/* Real falcon (photo cut into body + two wings), seen from below; head points along the flight path */
.falcon-real { position: absolute; left: 50%; top: 50%; width: 96px; aspect-ratio: 560 / 330; transform-origin: 50.0% 46.67%; transform: translate(-50.0%, -46.67%) rotate(90deg); opacity: 0; transition: opacity 0.5s ease; }
@media (min-width: 1024px) { .falcon-real { width: 190px; } }
.falcon-real img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; user-select: none; }
/* dimmed while parked so the step text leads; full strength while it flies */
.falcon.has-real .falcon-real { opacity: 0.55; transition: opacity 0.6s ease; }
.falcon.has-real.is-flying .falcon-real { opacity: 1; transition-duration: 0.25s; }
.falcon.has-real .falcon-sil { display: none; }
.fr-wing-l { transform-origin: 44.5% 39.24%; animation: fr-glide-l 1.9s ease-in-out infinite alternate; }
.fr-wing-r { transform-origin: 55.5% 39.24%; animation: fr-glide-r 1.9s ease-in-out infinite alternate; }
.fr-body { transform-origin: 50.0% 46.67%; }
.falcon.is-flying .fr-wing-l { animation: fr-flap-l 0.42s ease-in-out infinite; }
.falcon.is-flying .fr-wing-r { animation: fr-flap-r 0.42s ease-in-out infinite; }
.falcon.is-flying .fr-body { animation: fr-bob 0.42s ease-in-out infinite; }
/* from below, a wingbeat reads as the span folding toward the shoulder with a little twist */
@keyframes fr-flap-l { 0%, 100% { transform: none; } 50% { transform: scaleX(0.42) skewY(-7deg) rotate(5deg); } }
@keyframes fr-flap-r { 0%, 100% { transform: none; } 50% { transform: scaleX(0.42) skewY(7deg) rotate(-5deg); } }
@keyframes fr-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5%) scale(1.015); } }
@keyframes fr-glide-l { from { transform: none; } to { transform: scaleX(0.9) skewY(-2deg); } }
@keyframes fr-glide-r { from { transform: none; } to { transform: scaleX(0.9) skewY(2deg); } }
@media (prefers-reduced-motion: reduce) { .fr-wing-l, .fr-wing-r, .fr-body, .falcon.is-flying .fr-wing-l, .falcon.is-flying .fr-wing-r, .falcon.is-flying .fr-body { animation: none; } }
/* desktop only: no falcon or flight path below 1024px */
@media (max-width: 1023px) { .falcon-flight { display: none; } }

/* Magnetic */
.magnetic { display: inline-block; transition: transform 0.35s var(--v6-ease); }
.magnetic.live { transition: transform 0.12s linear; }

/* Header tone: flips to ink when it sits over a bone (light) section */
.v6-header .text-white, .v6-header .bg-white, .v6-header .bg-v6-bone { transition: color 0.3s ease, background-color 0.3s ease; }
html.hdr-light:not(.menu-open) .v6-header .text-white { color: var(--v6-void); }
html.hdr-light:not(.menu-open) .v6-header .bg-white { background-color: var(--v6-void); }
html.hdr-light:not(.menu-open) .v6-header .bg-v6-bone { background-color: var(--v6-void); color: var(--v6-bone); }

/* Navbar menu */
.menu-bar { transition: transform 0.3s ease; }
html.menu-open .menu-bar-1 { transform: translateY(5px) rotate(45deg); }
html.menu-open .menu-bar-2 { transform: translateY(-5px) rotate(-45deg); }
#v6-menu {
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.7s var(--v6-cinema), visibility 0s linear 0.7s;
}
html.menu-open #v6-menu { clip-path: inset(0 0 0% 0); visibility: visible; transition: clip-path 0.7s var(--v6-cinema); }
#v6-menu .menu-link { transform: translateY(110%); transition: transform 0.6s var(--v6-ease); }
html.menu-open #v6-menu .menu-link { transform: none; transition-delay: calc(0.12s + var(--i) * 0.06s); }
#v6-menu .menu-meta { opacity: 0; transition: opacity 0.5s ease; }
html.menu-open #v6-menu .menu-meta { opacity: 1; transition-delay: 0.5s; }
/* Menu fits any viewport: type scales with the smaller of width/height, panel scrolls if it still overflows */
#v6-menu { overflow-y: auto; overscroll-behavior: contain; }
#v6-menu .menu-word { font-size: clamp(2rem, min(10.5vw, 7.4vh), 6.5rem); }
@media (max-height: 640px) { #v6-menu .menu-link { padding-top: 0.35rem; padding-bottom: 0.35rem; } #v6-menu .menu-meta { margin-top: 1.25rem; } }
#v6-menu-btn:focus { outline: none; }
#v6-menu-btn:focus-visible { outline: 2px solid var(--v6-signal); outline-offset: 6px; }

/* Testimonials + FAQ swaps */
.swap { transition: opacity 0.45s var(--v6-ease), transform 0.45s var(--v6-ease); }
.swap.out { opacity: 0; transform: translateY(-26px); }
.swap.pre { opacity: 0; transform: translateY(26px); }

/* Contact budget chips */
.budget[aria-pressed="true"] { border-color: #ff4a00; background: #ff4a00; color: #0a0908; }

/* Cursor companion */
#v6-cursor .c-ring, #v6-cursor .c-dot { position: absolute; left: 0; top: 0; will-change: transform; }
#v6-cursor .c-ring > div { width: 36px; height: 36px; border: 1px solid #fff; border-radius: 9999px; transform: translate(-50%, -50%); opacity: 0; transition: width 0.3s, height 0.3s, opacity 0.3s; }
#v6-cursor .c-dot > div { width: 8px; height: 8px; background: #fff; border-radius: 9999px; transform: translate(-50%, -50%); opacity: 0; transition: width 0.2s, height 0.2s, opacity 0.2s; }
#v6-cursor.visible .c-ring > div { opacity: 0.7; }
#v6-cursor.visible .c-dot > div { opacity: 1; }
#v6-cursor.hot .c-ring > div { width: 64px; height: 64px; }
#v6-cursor.hot .c-dot > div { width: 6px; height: 6px; }

/* Toast */
#v6-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 110; max-width: 360px;
  padding: 14px 18px; background: var(--v6-bone); color: var(--v6-void);
  font-family: "Martian Mono", monospace; font-size: 11px; line-height: 1.6;
  letter-spacing: 0.04em; border-left: 3px solid var(--v6-signal);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#v6-toast.show { opacity: 1; transform: none; }

/* ————— Hero lab (A–E) ————— */
.v6-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Clip reveal for image frames */
html.js .clipin { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--v6-cinema); transition-delay: var(--d, 0s); }
html.js .clipin.in { clip-path: inset(0 0 0 0); }
[data-parallax-img] { transform: scale(1.08); will-change: transform; }

/* B — expanding triptych */
.hunt img { transition: transform 1.1s var(--v6-ease), filter 0.6s var(--v6-ease); }
.hunt:hover img { transform: scale(1.05); }
@media (min-width: 1024px) {
  .hunt { flex: 1 1 0; min-width: 0; transition: flex-grow 0.7s var(--v6-ease), border-color 0.3s; }
  .hunt-row:hover .hunt { flex-grow: 0.75; }
  .hunt-row .hunt:hover { flex-grow: 2.1; border-color: rgba(255, 74, 0, 0.7); }
  .hunt-row:hover .hunt:not(:hover) img { filter: grayscale(1) brightness(0.45); }
  .hunt .hunt-more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s var(--v6-ease), opacity 0.4s; }
  .hunt:hover .hunt-more { max-height: 6em; opacity: 1; }
}

/* C — cursor spotlight */
.spot-top {
  -webkit-mask-image: radial-gradient(circle var(--hr, 280px) at var(--hx, 42%) var(--hy, 36%), #000 25%, transparent 70%);
  mask-image: radial-gradient(circle var(--hr, 280px) at var(--hx, 42%) var(--hy, 36%), #000 25%, transparent 70%);
}

/* D — HUD */
.scanline { top: 0; animation: v6-scan 3.6s linear infinite; box-shadow: 0 0 12px rgba(255, 74, 0, 0.6); }
@keyframes v6-scan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.reticle-ring { animation: v6-spin 14s linear infinite; }
.reticle { animation: v6-lock 3.6s var(--v6-ease) infinite; }
@keyframes v6-lock { 0%, 100% { scale: 1; } 50% { scale: 0.88; } }

/* E — specimen deck */
.deck-card { position: absolute; inset: 0; margin: 0; transition: transform 0.9s var(--v6-ease), opacity 0.9s var(--v6-ease); }
.deck-card[data-pos="0"] { transform: rotate(-2deg); z-index: 3; }
.deck-card[data-pos="1"] { transform: translate(22px, 18px) rotate(3deg); z-index: 2; opacity: 0.85; }
.deck-card[data-pos="2"] { transform: translate(44px, 36px) rotate(8deg); z-index: 1; opacity: 0.6; }
[data-deck-pick][aria-current="true"] .font-v6-display:first-child { color: var(--v6-signal); }

/* Preview-only hero switcher */
#hero-switch {
  position: fixed; left: 50%; bottom: 18px; z-index: 120; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px; max-width: calc(100vw - 24px); overflow-x: auto;
  background: rgba(10, 9, 8, 0.92); border: 1px solid rgba(241, 237, 228, 0.18);
  font-family: "Martian Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  backdrop-filter: blur(6px);
}
#hero-switch { scrollbar-width: none; }
#hero-switch::-webkit-scrollbar { display: none; }
#hero-switch span { padding: 0 10px; color: rgba(241, 237, 228, 0.45); white-space: nowrap; }
#hero-switch a { padding: 8px 12px; color: rgba(241, 237, 228, 0.75); text-decoration: none; white-space: nowrap; }
#hero-switch a:hover { color: #f1ede4; }
#hero-switch a.on { background: #ff4a00; color: #0a0908; }

/* ================= Hero lab (animal-free set) ================= */
/* A · live dashboard */
[data-dash-feed] li { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(241,237,228,0.07); font-family: "Martian Mono", monospace; font-size: 10.5px; letter-spacing: 0.04em; color: rgba(241,237,228,0.7); animation: dashIn 0.6s var(--v6-ease) both; }
[data-dash-feed] li b { flex: none; width: 30px; padding: 2px 0; text-align: center; font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; background: rgba(255,74,0,0.14); color: var(--v6-signal); }
[data-dash-feed] li i { margin-left: auto; font-style: normal; color: rgba(241,237,228,0.35); }
@keyframes dashIn { from { opacity: 0; transform: translateY(-12px); background: rgba(255,74,0,0.08); } to { opacity: 1; transform: none; background: transparent; } }
[data-dash-num] { font-variant-numeric: tabular-nums; transition: color 0.4s ease; }
[data-dash-num].bump { color: var(--v6-signal); transition: none; }

/* B · kinetic type */
[data-kinetic] h1 > span { white-space: nowrap; }
.kin .ch, .kin-cycle .ch { display: inline-block; font-variation-settings: "wdth" var(--w, 100); }
.kin-cycle { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.04em; }
.kin-cycle .ch { transition: transform 0.55s var(--v6-ease), opacity 0.4s ease; transition-delay: var(--cd, 0s); }
.kin-cycle .ch.out { transform: translateY(-105%); opacity: 0; }
.kin-cycle .ch.pre { transform: translateY(105%); opacity: 0; transition: none; }
.kin-svc { color: rgba(241,237,228,0.35); transition: color 0.4s ease, transform 0.5s var(--v6-ease); }
.kin-svc.is-on { color: var(--v6-bone); transform: translateX(10px); }

/* D · agent terminal */
.term .p { color: var(--v6-signal); }
.term .ok { color: #9be38a; }
.term .dim { color: rgba(241,237,228,0.4); }
.term .big { color: var(--v6-bone); font-weight: 700; }
.term .caret { display: inline-block; width: 0.6em; height: 1.1em; margin-left: 2px; vertical-align: -0.2em; background: var(--v6-signal); animation: s4blink 1s steps(2, start) infinite; }

/* E · before / after */
[data-ba] .ba-after { clip-path: inset(0 0 0 var(--ba, 50%)); }
[data-ba] .ba-handle { left: var(--ba, 50%); }
.ba-range { touch-action: pan-y; }
[data-ba]:has(.ba-range:focus-visible) { outline: 2px solid var(--v6-signal); outline-offset: 4px; }

/* C+ · gradient glow, wordmark and gradient type for hero C */
.c-aurora { overflow: hidden; }
/* Glows: soft radial falloff instead of filter: blur(90px) + mix-blend-mode: screen. Those two forced a full re-blend every frame (~14fps vs 60fps). */
.c-blob { position: absolute; border-radius: 50%; will-change: transform; }
.c-blob-1 { width: 58vw; height: 58vw; right: -14vw; top: -22vw; background: radial-gradient(closest-side, rgba(255,74,0,0.5), rgba(255,74,0,0.24) 45%, rgba(255,74,0,0.07) 75%, rgba(255,74,0,0)); animation: c-drift-1 18s ease-in-out infinite alternate; }
.c-blob-2 { width: 44vw; height: 44vw; right: 18vw; top: 18vh; background: radial-gradient(closest-side, rgba(255,150,60,0.26), rgba(255,150,60,0.12) 45%, rgba(255,150,60,0.035) 75%, rgba(255,150,60,0)); animation: c-drift-2 22s ease-in-out infinite alternate; }
.c-blob-3 { width: 50vw; height: 50vw; left: -16vw; bottom: -26vw; background: radial-gradient(closest-side, rgba(170,30,0,0.36), rgba(170,30,0,0.17) 45%, rgba(170,30,0,0.05) 75%, rgba(170,30,0,0)); animation: c-drift-3 26s ease-in-out infinite alternate; }
@keyframes c-drift-1 { to { transform: translate(-10vw, 8vh) scale(1.15); } }
@keyframes c-drift-2 { to { transform: translate(12vw, -6vh) scale(0.85); } }
@keyframes c-drift-3 { to { transform: translate(14vw, -10vh) scale(1.2); } }
.c-mark { background: linear-gradient(115deg, rgba(255,74,0,0.28) 0%, rgba(255,150,60,0.1) 35%, rgba(241,237,228,0.03) 60%, rgba(255,74,0,0.18) 100%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1.5px rgba(241,237,228,0.34); animation: v6-breathe 9s ease-in-out infinite, c-sheen 14s ease-in-out infinite alternate; }
@keyframes c-sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.c-fade { background: linear-gradient(to top, #0a0908 15%, rgba(10,9,8,0)); }
.c-grad { background: linear-gradient(90deg, #ff4a00, #ff9a3c 50%, #ff4a00); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: c-sheen 5s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .c-blob, .c-mark, .c-grad { animation: none; } }
/* Wordmark on its own compositor layer: the scroll parallax no longer repaints the hero */
[data-parallax] { will-change: transform; }

/* ================= Hero lab, round 3 ================= */
/* F · split-flap results board */
.flap-board { padding: 22px; border: 1px solid rgba(241,237,228,0.12); background: #0d0c0a; box-shadow: 0 40px 90px -40px rgba(255,74,0,0.3); }
.flap-row { display: flex; gap: 3px; margin-bottom: 6px; }
.flap { position: relative; flex: 1 1 0; min-width: 0; height: clamp(26px, 2.6vw, 40px); display: flex; align-items: center; justify-content: center; background: linear-gradient(#1c1a16 0 50%, #15130f 50% 100%); color: #f1ede4; font-family: "Martian Mono", monospace; font-weight: 700; font-size: clamp(11px, 1.15vw, 17px); border-radius: 2px; }
.flap::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: rgba(0,0,0,0.65); }
.flap.hot { color: var(--v6-signal); }
.flap.flip { animation: flapFlip 0.07s linear; }
@keyframes flapFlip { 50% { transform: scaleY(0.2); } }

/* G · chat */
.chat-log { scrollbar-width: thin; scrollbar-color: rgba(241,237,228,0.2) transparent; }
.chat-msg { max-width: 86%; margin-bottom: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.55; animation: chatIn 0.4s var(--v6-ease) both; }
.chat-msg.me { margin-left: auto; background: var(--v6-bone); color: var(--v6-void); }
.chat-msg.bot { border: 1px solid rgba(241,237,228,0.14); color: rgba(241,237,228,0.85); }
.chat-msg.bot a { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-family: "Martian Mono", monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--v6-signal); text-decoration: none; }
.chat-typing { display: inline-flex; gap: 4px; margin-bottom: 12px; padding: 14px; border: 1px solid rgba(241,237,228,0.14); }
.chat-typing i { width: 6px; height: 6px; background: rgba(241,237,228,0.5); animation: chatDot 1s infinite; }
.chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatDot { 50% { opacity: 0.2; transform: translateY(-3px); } }
@keyframes chatIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chat-chip { padding: 9px 13px; border: 1px solid rgba(241,237,228,0.22); font-size: 13px; color: rgba(241,237,228,0.8); transition: border-color 0.3s, color 0.3s, background-color 0.3s; cursor: pointer; }
.chat-chip:hover, .chat-chip[aria-pressed="true"] { border-color: var(--v6-signal); color: var(--v6-bone); background: rgba(255,74,0,0.08); }
.chat-chip:focus-visible { outline: 2px solid var(--v6-signal); outline-offset: 2px; }

/* H · odometer */
.odo { display: flex; align-items: flex-start; font-size: clamp(3.5rem, 12vw, 13rem); font-variant-numeric: tabular-nums; }
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transition: transform 1.4s var(--v6-ease); transform: translateY(calc(var(--n, 0) * -1em)); }
.odo-strip > span, .odo-sep { display: block; height: 1em; line-height: 1em; }
.odo-sep { color: rgba(241,237,228,0.35); }
.odo-cur { color: var(--v6-signal); }

/* I · rotating prism */
.prism { display: inline-block; perspective: 1400px; color: var(--v6-signal); vertical-align: top; }
.prism-rot { display: inline-grid; transform-style: preserve-3d; transition: transform 0.9s var(--v6-ease); transform: rotateX(calc(var(--i, 0) * 90deg)); }
.prism-face { grid-area: 1 / 1; display: block; height: 0.92em; line-height: 0.92em; backface-visibility: hidden; transform: rotateX(calc(var(--f) * -90deg)) translateZ(0.46em); }
.prism-face:nth-child(even) { color: var(--v6-bone); -webkit-text-stroke: 0; }

/* ================= Hero lab, round 4 ================= */
/* K · ROI calculator */
.roi { box-shadow: 0 40px 90px -40px rgba(255,74,0,0.35); }
.roi-range { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; cursor: pointer; }
.roi-range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--v6-signal) var(--fill, 10%), rgba(241,237,228,0.15) var(--fill, 10%)); }
.roi-range::-moz-range-track { height: 4px; background: rgba(241,237,228,0.15); }
.roi-range::-moz-range-progress { height: 4px; background: var(--v6-signal); }
.roi-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--v6-bone); border: 6px solid var(--v6-signal); box-shadow: 0 0 0 6px rgba(255,74,0,0.18); transition: transform 0.2s; }
.roi-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--v6-bone); border: 6px solid var(--v6-signal); }
.roi-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.roi-range:focus-visible { outline: 2px solid var(--v6-signal); outline-offset: 4px; }
.roi-bar { width: var(--w, 0%); transition: width 0.45s var(--v6-ease); }

/* L · Flashlight */
[data-flash] { --mx: 70%; --my: 35%; cursor: crosshair; }
.fl-dim, .fl-lit { position: absolute; inset: 0; }
.fl-note { position: absolute; transform: translate(-50%, -50%); display: grid; gap: 4px; white-space: nowrap; }
.fl-note b { font-family: "Anybody", sans-serif; font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.6rem); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; }
.fl-note i { font-style: normal; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.fl-dim .fl-note { color: rgba(241,237,228,0.05); }
.fl-lit { -webkit-mask-image: radial-gradient(circle 230px at var(--mx) var(--my), #000 30%, transparent 100%); mask-image: radial-gradient(circle 230px at var(--mx) var(--my), #000 30%, transparent 100%); background: radial-gradient(circle 260px at var(--mx) var(--my), rgba(255,74,0,0.14), transparent 70%); }
.fl-lit .fl-note b { color: var(--v6-signal); }
.fl-lit .fl-note i { color: rgba(241,237,228,0.75); }

/* M · Sticky notes */
.note-wall { position: relative; height: 560px; border: 1px dashed rgba(241,237,228,0.14); background: radial-gradient(rgba(241,237,228,0.06) 1px, transparent 1px) 0 0 / 22px 22px; touch-action: none; }
.note { position: absolute; width: min(42%, 230px); min-height: 128px; padding: 16px 16px 18px; background: #f3e9c6; color: #0a0908; box-shadow: 0 18px 30px -16px rgba(0,0,0,0.85); transform: rotate(var(--r)); cursor: grab; user-select: none; transition: transform 0.4s var(--v6-ease), opacity 0.6s ease, box-shadow 0.3s; }
.note:nth-child(3n+2) { background: #f1ede4; }
.note:nth-child(3n) { background: #ffb38f; }
.note.is-drag { cursor: grabbing; z-index: 20; transform: rotate(0deg) scale(1.05); box-shadow: 0 30px 50px -18px rgba(0,0,0,0.9); transition: none; }
.note-tag { display: inline-block; font-family: "Martian Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; padding: 3px 6px; background: rgba(10,9,8,0.1); }
.note p { margin-top: 12px; font-family: "Anybody", sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; background: linear-gradient(currentColor, currentColor) 0 55% / 0% 2px no-repeat; transition: background-size 0.5s var(--v6-ease); }
.note-done { position: absolute; right: 10px; bottom: 10px; padding: 4px 8px; border: 2px solid var(--v6-signal); color: var(--v6-signal); font-family: "Martian Mono", monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; transform: rotate(-8deg) scale(1.6); opacity: 0; transition: transform 0.35s var(--v6-ease), opacity 0.25s; }
.note.is-done p { background-size: 100% 2px; }
.note.is-done .note-done { opacity: 1; transform: rotate(-8deg) scale(1); }
.note.is-gone { opacity: 0; transform: rotate(var(--r)) translateY(-24px) scale(0.92); pointer-events: none; }
@media (max-width: 767px) { .note-wall { height: 520px; } .note { width: 46%; min-height: 110px; } .note p { font-size: 0.95rem; } }

/* N · 90-day timeline */
.tl-fill { width: var(--p, 0%); transition: width 1.1s var(--v6-ease); }
.tl-step { position: relative; padding-top: 4px; opacity: 0.35; transition: opacity 0.5s ease; }
.tl-step.is-on { opacity: 1; }
.tl-dot { position: absolute; top: -40px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #0a0908; border: 2px solid rgba(241,237,228,0.3); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.tl-step.is-on .tl-dot { background: var(--v6-signal); border-color: var(--v6-signal); box-shadow: 0 0 0 6px rgba(255,74,0,0.18); }
@media (max-width: 1023px) { .tl-dot { display: none; } }
[data-tl-roas] { display: inline-block; transition: transform 0.4s var(--v6-ease); }
[data-tl-roas].bump { transform: scale(1.08); }

/* O · Bento */
.bento { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(170px, auto); }
.bento-tile { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 22px; border: 1px solid rgba(241,237,228,0.12); background: #100e0b; transition: border-color 0.3s; }
.bento-tile:hover { border-color: rgba(241,237,228,0.3); }
.bento-head { grid-column: span 2; grid-row: span 2; padding: 30px; }
.bento-quote { grid-column: span 2; }
.bento-cta { grid-column: span 2; background: var(--v6-signal); border-color: var(--v6-signal); color: var(--v6-void); text-decoration: none; transition: background-color 0.3s, border-color 0.3s; }
.bento-cta:hover { background: var(--v6-bone); border-color: var(--v6-bone); }
.bento-cta svg { transition: transform 0.4s var(--v6-ease); }
.bento-cta:hover svg { transform: translate(4px, -4px); }
.bento-q { position: absolute; inset: 22px; display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s var(--v6-ease); }
.bento-q.is-on { opacity: 1; transform: none; }
@media (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
  .bento-head { grid-row: span 1; }
  .bento-quote { min-height: 180px; }
}

/* ================= Services lab ================= */
/* Shared media: the still is the clip's first frame, so the swap to video is seamless */
.svc-media { position: absolute; inset: 0; overflow: hidden; background: #0a0908; }
.svc-media > img, .svc-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 35%); }
.svc-media > img { transition: transform 1.4s var(--v6-ease), filter 0.6s ease; }
.svc-media > video { opacity: 0; transition: opacity 0.45s ease; }
.svc-media.playing > video { opacity: 1; }

/* 1 · Stacked bars */
.s1-row { display: flex; flex-direction: column; gap: 12px; }
.s1-bar { position: relative; overflow: hidden; height: 112px; cursor: pointer; border: 1px solid rgba(241,237,228,0.12); transition: height 0.8s var(--v6-ease), border-color 0.4s ease; outline: none; }
.s1-bar.is-active { height: 600px; border-color: rgba(255,74,0,0.55); cursor: default; }
.s1-bar:focus-visible { border-color: var(--v6-signal); }
.s1-bar:not(.is-active) .svc-media > img { filter: grayscale(0.55) brightness(0.5); }
.s1-bar:not(.is-active):hover .svc-media > img { filter: grayscale(0.2) brightness(0.7); }
.s1-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,0.94) 0%, rgba(10,9,8,0.55) 38%, rgba(10,9,8,0.05) 75%), linear-gradient(to right, rgba(10,9,8,0.75) 0%, rgba(10,9,8,0.35) 40%, rgba(10,9,8,0) 65%); pointer-events: none; }
.s1-bar:not(.is-active) .s1-shade { background: linear-gradient(to right, rgba(10,9,8,0.85), rgba(10,9,8,0.35)); }
.s1-closed { position: absolute; inset: 0; display: flex; align-items: center; gap: 18px; padding: 0 24px; transition: opacity 0.35s ease; }
.s1-bar.is-active .s1-closed { opacity: 0; pointer-events: none; }
.s1-open { position: absolute; left: 0; bottom: 0; padding: 28px; width: 100%; opacity: 0; transform: translateY(18px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.s1-bar.is-active .s1-open { opacity: 1; transform: none; transition: opacity 0.6s ease 0.3s, transform 0.8s var(--v6-ease) 0.3s; pointer-events: auto; }
@media (min-width: 1024px) {
  .s1-row { flex-direction: row; height: 660px; }
  .s1-bar, .s1-bar.is-active { height: auto; flex: 1 1 0; min-width: 0; transition: flex-grow 0.85s var(--v6-ease), border-color 0.4s ease; }
  .s1-bar.is-active { flex-grow: 5.2; }
  .s1-closed { flex-direction: column-reverse; align-items: center; justify-content: flex-start; padding: 32px 0; }
  .s1-vt { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .s1-bar:not(.is-active) .s1-shade { background: linear-gradient(to top, rgba(10,9,8,0.9), rgba(10,9,8,0.35)); }
  .s1-open { padding: 44px; width: min(640px, 60vw); }
}

/* 2 · Cursor preview list */
.s2-row { display: grid; grid-template-columns: 1fr; gap: 14px 32px; padding: 34px 0; border-top: 1px solid rgba(241,237,228,0.12); color: var(--v6-bone); text-decoration: none; }
@media (min-width: 1024px) { .s2-row { grid-template-columns: 56px minmax(0,1fr) auto auto; align-items: center; padding: 40px 0; } }
@media (min-width: 1280px) { .s2-row { grid-template-columns: 56px minmax(0,1fr) 260px auto auto; } }
.s2-title { transition: transform 0.6s var(--v6-ease), color 0.4s ease, opacity 0.4s ease; }
.s2-arrow { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
@media (hover: hover) and (pointer: fine) {
  .s2-row.is-active .s2-title { transform: translateX(28px); color: var(--v6-signal); }
  .s2-row.is-active .s2-arrow { background: var(--v6-signal); border-color: var(--v6-signal); color: var(--v6-void); }
  .s2.has-active .s2-row:not(.is-active) .s2-title { opacity: 0.28; }
}
.s2-preview { position: absolute; left: 0; top: 0; z-index: 20; width: 300px; aspect-ratio: 9 / 14; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s; will-change: transform; box-shadow: 0 40px 80px -30px rgba(0,0,0,0.9); border: 1px solid rgba(255,74,0,0.5); }
.s2-preview > .svc-media { opacity: 0; transition: opacity 0.35s ease; }
.s2-preview > .svc-media.is-active { opacity: 1; }
.s2.has-active .s2-preview { opacity: 1; visibility: visible; }
.s2-cap { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: space-between; padding: 10px 12px; background: rgba(10,9,8,0.85); font-family: "Martian Mono", monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(241,237,228,0.8); }
.s2-cap [data-svc-show] { display: none; }
.s2-cap [data-svc-show].is-active { display: inline; }
@media (max-width: 1023px) { .s2-preview { display: none; } }

/* 3 · Tall triptych */
.s3-card { position: relative; overflow: hidden; aspect-ratio: 9 / 14; border: 1px solid rgba(241,237,228,0.12); outline: none; }
html.js .s3-card.reveal.in, .s3-card { transition: transform 0.7s var(--v6-ease), border-color 0.4s ease, opacity 0.5s ease, filter 0.5s ease; }
.s3-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,0.95) 0%, rgba(10,9,8,0.5) 35%, rgba(10,9,8,0) 60%, rgba(10,9,8,0.45) 100%); }
.s3-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--v6-ease); }
.s3-more > div { overflow: hidden; opacity: 0; transition: opacity 0.4s ease; }
html.js .s3-card.reveal.in { transition-delay: 0s; }
.s3-card.is-active, .s3-card:focus-within, html.js .s3-card.reveal.in.is-active, html.js .s3-card.reveal.in:focus-within { transform: translateY(-10px); border-color: rgba(255,74,0,0.6); }
.s3-card.is-active .s3-more, .s3-card:focus-within .s3-more { grid-template-rows: 1fr; }
.s3-card.is-active .s3-more > div, .s3-card:focus-within .s3-more > div { opacity: 1; transition-delay: 0.15s; }
.s3-card.is-active .s3-shade { background: linear-gradient(to top, rgba(10,9,8,0.97) 0%, rgba(10,9,8,0.75) 45%, rgba(10,9,8,0.1) 75%, rgba(10,9,8,0.45) 100%); }
.s3-card.is-active .svc-media > img { transform: scale(1.05); }
.s3.has-active .s3-card:not(.is-active) { opacity: 0.45; filter: saturate(0.4); }
.s3-links a { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(241,237,228,0.1); font-size: 13px; color: rgba(241,237,228,0.82); text-decoration: none; transition: color 0.25s; }
.s3-links a::before { content: ""; width: 6px; height: 1px; background: var(--v6-signal); flex: none; transition: width 0.3s var(--v6-ease); }
.s3-links a:hover, .s3-links a:focus-visible { color: var(--v6-signal); }
.s3-links a:hover::before { width: 12px; }
@media (hover: none) { .s3-more { grid-template-rows: 1fr; } .s3-more > div { opacity: 1; } }
@media (max-width: 767px) {
  /* phones: the details are always open, so the card grows to fit them under the photo */
  .s3-card { aspect-ratio: auto; }
  .s3-body { position: relative; padding-top: min(78vw, 340px); }
  .s3-shade { background: linear-gradient(to top, rgba(10,9,8,0.97) 0%, rgba(10,9,8,0.9) 45%, rgba(10,9,8,0.2) 70%, rgba(10,9,8,0.4) 100%) !important; }
  .s3-card .svc-media { bottom: auto; height: calc(min(78vw, 340px) + 120px); }
}

/* 4 · Control room */
.s4-tab { position: relative; padding: 28px 0 30px; border-bottom: 1px solid rgba(241,237,228,0.12); cursor: pointer; outline: none; }
.s4-name { color: rgba(241,237,228,0.4); transition: color 0.4s ease; }
.s4-tab.is-active .s4-name, .s4-tab:hover .s4-name { color: var(--v6-bone); }
.s4-tab:focus-visible .s4-name { color: var(--v6-signal); }
.s4-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.7s var(--v6-ease); }
.s4-more > div { overflow: hidden; opacity: 0; transition: opacity 0.35s ease; }
.s4-tab.is-active .s4-more { grid-template-rows: 1fr; }
.s4-tab.is-active .s4-more > div { opacity: 1; transition-delay: 0.2s; }
.s4-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.s4-bar i { display: block; height: 100%; width: 0; background: var(--v6-signal); }
.s4-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid rgba(241,237,228,0.14); }
@media (min-width: 1024px) { .s4-frame { aspect-ratio: auto; min-height: 700px; } }
.s4-frame > .svc-media { opacity: 0; transition: opacity 0.6s ease; }
.s4-frame > .svc-media.is-active { opacity: 1; }
.s4-hud { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(10,9,8,0.85), rgba(10,9,8,0) 35%), linear-gradient(to bottom, rgba(10,9,8,0.6), rgba(10,9,8,0) 18%); }
.s4-hud .c { position: absolute; width: 22px; height: 22px; border: 0 solid var(--v6-signal); }
.s4-hud .tl { left: 14px; top: 14px; border-left-width: 2px; border-top-width: 2px; }
.s4-hud .tr { right: 14px; top: 14px; border-right-width: 2px; border-top-width: 2px; }
.s4-hud .bl { left: 14px; bottom: 14px; border-left-width: 2px; border-bottom-width: 2px; }
.s4-hud .br { right: 14px; bottom: 14px; border-right-width: 2px; border-bottom-width: 2px; }
.s4-swap [data-svc-show] { display: none; }
.s4-swap [data-svc-show].is-active { display: inline; }
.s4-rec { color: rgba(241,237,228,0.45); }
.s4.is-playing .s4-rec { color: var(--v6-signal); animation: s4blink 1.2s steps(2, start) infinite; }
@keyframes s4blink { to { visibility: hidden; } }

/* 5 · Field notes */
.s5-media { border: 1px solid rgba(241,237,228,0.12); transition: border-color 0.4s ease; }
.s5-row.is-active .s5-media { border-color: rgba(255,74,0,0.55); }
.s5-row.is-active .svc-media > img { transform: scale(1.04); }
.s5-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid rgba(241,237,228,0.12); font-size: 15px; color: rgba(241,237,228,0.75); text-decoration: none; transition: color 0.3s ease, padding 0.4s var(--v6-ease); }
.s5-link svg { opacity: 0.35; transition: opacity 0.3s, transform 0.4s var(--v6-ease); }
.s5-link:hover { color: var(--v6-signal); padding-left: 8px; }
.s5-link:hover svg { opacity: 1; transform: translate(2px, -2px); }

/* 6 · Scroll stack */
.s6 { display: grid; gap: 24px; }
.s6-card { position: sticky; top: calc(96px + var(--i) * 22px); }
.s6-inner { min-height: min(78vh, 680px); overflow: hidden; border: 1px solid rgba(241,237,228,0.12); background: #100e0b; box-shadow: 0 -30px 60px -30px rgba(0,0,0,0.9); transition: border-color 0.4s ease; }
.s6-card.is-active .s6-inner { border-color: rgba(255,74,0,0.55); }
.s6-card.is-active .svc-media > img { transform: scale(1.04); }
.s6-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(241,237,228,0.12); font-size: 15px; color: rgba(241,237,228,0.75); text-decoration: none; transition: color 0.3s ease, padding 0.4s var(--v6-ease); }
.s6-link svg { opacity: 0.35; transition: opacity 0.3s; }
.s6-link:hover { color: var(--v6-signal); padding-left: 8px; }
.s6-link:hover svg { opacity: 1; }
@media (max-width: 1023px) { .s6-card { position: relative; top: 0; } }

/* 7 · Portholes */
.s7-card { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid rgba(241,237,228,0.1); outline: none; transition: border-color 0.5s ease; }
html.js .s7-card.reveal.in { transition: opacity 0.7s var(--v6-ease), transform 0.7s var(--v6-ease), border-color 0.5s ease; transition-delay: 0s; }
.s7-lens { position: absolute; inset: 0; clip-path: circle(31% at 50% 38%); transition: clip-path 0.9s var(--v6-ease); }
.s7-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.s7-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,0.95), rgba(10,9,8,0.4) 45%, rgba(10,9,8,0) 70%); opacity: 0; transition: opacity 0.6s ease; }
.s7-foot { position: absolute; inset-inline: 0; bottom: 0; padding: 28px; text-align: center; }
.s7-more { display: grid; grid-template-rows: 0fr; text-align: left; transition: grid-template-rows 0.7s var(--v6-ease); }
.s7-more > div { overflow: hidden; opacity: 0; transition: opacity 0.4s ease; }
.s7-card.is-active, .s7-card:focus-within { border-color: rgba(255,74,0,0.55); }
.s7-card.is-active .s7-lens, .s7-card:focus-within .s7-lens { clip-path: circle(75% at 50% 45%); }
.s7-card.is-active .s7-shade, .s7-card:focus-within .s7-shade { opacity: 1; }
.s7-card.is-active .s7-foot, .s7-card:focus-within .s7-foot { text-align: left; }
.s7-card.is-active .s7-more, .s7-card:focus-within .s7-more { grid-template-rows: 1fr; }
.s7-card.is-active .s7-more > div, .s7-card:focus-within .s7-more > div { opacity: 1; transition-delay: 0.2s; }
.s7 .s7-card:not(.is-active) .svc-media > img { filter: saturate(0.85); }
@media (hover: none) {
  .s7-lens { clip-path: circle(75% at 50% 45%); }
  .s7-shade { opacity: 1; }
  .s7-foot { text-align: left; }
  .s7-more { grid-template-rows: 1fr; }
  .s7-more > div { opacity: 1; }
}

/* 8 · Knockout type: white letters on black, multiplied over the video */
.s8-band { position: relative; display: block; height: clamp(220px, 30vw, 420px); overflow: hidden; border: 1px solid rgba(241,237,228,0.1); text-decoration: none; }
.s8-knock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0a0908; mix-blend-mode: multiply; transition: background-color 0.7s ease; }
.s8-knock > span { font-family: "Anybody", sans-serif; font-weight: 900; font-variation-settings: "wdth" 100; text-transform: uppercase; color: #fff; font-size: clamp(3rem, 11.2vw, 10.5rem); line-height: 0.8; letter-spacing: -0.03em; white-space: nowrap; transition: transform 1s var(--v6-ease); }
.s8-meta { position: absolute; left: 20px; top: 18px; display: flex; gap: 14px; color: rgba(241,237,228,0.75); }
.s8-stat { position: absolute; right: 22px; bottom: 18px; text-align: right; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease, transform 0.6s var(--v6-ease); }
.s8-row.is-active .s8-knock { background-color: rgba(10,9,8,0.18); }
.s8-row.is-active .s8-knock > span { transform: scale(1.04); }
.s8-row.is-active .s8-stat { opacity: 1; transform: none; transition-delay: 0.2s; }
.s8-row .svc-media > img, .s8-row .svc-media > video { object-position: var(--op); }

/* 9 · Marquee rows */
.s9-row { position: relative; overflow: hidden; border-bottom: 1px solid rgba(241,237,228,0.12); }
.s9-link { display: block; padding: 30px 0; color: var(--v6-bone); text-decoration: none; }
.s9-track { display: flex; width: max-content; animation: s9move 38s linear infinite; }
.s9-rev .s9-track { animation-direction: reverse; }
.s9-group { display: flex; align-items: center; }
.s9-word { padding: 0 28px; font-family: "Anybody", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2.5rem, 6.4vw, 6.25rem); line-height: 1; letter-spacing: -0.015em; white-space: nowrap; transition: color 0.4s ease; }
.s9-hollow { -webkit-text-stroke: 1.5px rgba(255,74,0,0.8); color: transparent; }
.s9-pill { width: clamp(90px, 9vw, 150px); height: clamp(50px, 5vw, 84px); flex: none; overflow: hidden; border-radius: 999px; }
.s9-pill img { width: 100%; height: 100%; object-fit: cover; }
.s9-dot { width: 12px; height: 12px; flex: none; margin: 0 8px; background: var(--v6-signal); }
@keyframes s9move { to { transform: translateX(-50%); } }
.s9-row.is-active .s9-track { animation-play-state: paused; }
.s9.has-active .s9-row:not(.is-active) .s9-word { color: rgba(241,237,228,0.25); }
.s9-window { position: absolute; top: 10px; bottom: 10px; right: 10px; width: min(34%, 460px); overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 0.7s var(--v6-ease); border: 1px solid rgba(255,74,0,0.55); }
.s9-row.is-active .s9-window { clip-path: inset(0 0 0 0); }
.s9-row.is-active .s9-link { padding: 110px 0; }
.s9-link { transition: padding 0.7s var(--v6-ease); }
@media (max-width: 1023px) {
  .s9-window { position: relative; inset: auto; width: auto; height: 0; margin: 0 0 0; clip-path: none; transition: height 0.6s var(--v6-ease); }
  .s9-row.is-active .s9-window { height: 420px; margin-bottom: 16px; }
  .s9-row.is-active .s9-link { padding: 30px 0; }
}
@media (prefers-reduced-motion: reduce) { .s9-track { animation: none; } }

/* 10 · Pick a problem */
.s10-pick { display: block; width: 100%; padding: 26px; text-align: left; border: 1px solid rgba(241,237,228,0.12); background: transparent; color: rgba(241,237,228,0.5); cursor: pointer; transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease; }
.s10-pick:hover { color: var(--v6-bone); }
.s10-pick.is-active { border-color: var(--v6-signal); background: rgba(255,74,0,0.06); color: var(--v6-bone); }
.s10-pick:focus-visible { outline: 2px solid var(--v6-signal); outline-offset: 3px; }
.s10-goes { color: rgba(241,237,228,0.35); transition: color 0.4s ease; }
.s10-pick.is-active .s10-goes { color: var(--v6-signal); }
.s10-stage { border: 1px solid rgba(241,237,228,0.12); background: #100e0b; }
.s10-panel { display: none; }
.s10-panel.is-active { display: grid; animation: s10in 0.6s var(--v6-ease) both; }
@media (min-width: 1024px) { .s10-panel.is-active { grid-template-columns: minmax(0,5fr) minmax(0,7fr); min-height: 600px; } }
.s10-panel.is-active .s10-step { animation: s10in 0.6s var(--v6-ease) both; animation-delay: calc(0.2s + var(--k) * 0.12s); }
@keyframes s10in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 11 · Accordion */
.s11-row { position: relative; overflow: hidden; padding: 0 28px; border-bottom: 1px solid rgba(241,237,228,0.12); cursor: pointer; outline: none; }
.s11-row.is-active { cursor: default; }
.s11-row:focus-visible { box-shadow: inset 0 0 0 2px var(--v6-signal); }
.s11-media { opacity: 0; transition: opacity 0.7s ease; }
.s11-row.is-active .s11-media { opacity: 1; }
.s11-row:not(.is-active):hover .s11-media { opacity: 0.25; }
.s11-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,0.95) 0%, rgba(10,9,8,0.75) 45%, rgba(10,9,8,0.25) 100%); pointer-events: none; }
.s11-row .svc-media > img, .s11-row .svc-media > video { object-position: var(--op); }
.s11-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.8s var(--v6-ease); }
.s11-body > div { overflow: hidden; opacity: 0; transition: opacity 0.35s ease; }
.s11-row.is-active .s11-body { grid-template-rows: 1fr; }
.s11-row.is-active .s11-body > div { opacity: 1; transition-delay: 0.25s; }
.s11-row h3 { color: rgba(241,237,228,0.45); transition: color 0.4s ease; }
.s11-row.is-active h3, .s11-row:hover h3 { color: var(--v6-bone); }
.s11-plus { position: relative; width: 44px; height: 44px; border: 1px solid rgba(241,237,228,0.25); transition: transform 0.6s var(--v6-ease), background-color 0.3s, border-color 0.3s; }
.s11-plus::before, .s11-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; }
.s11-plus::after { transform: rotate(90deg); }
.s11-row.is-active .s11-plus { transform: rotate(45deg); background: var(--v6-signal); border-color: var(--v6-signal); color: var(--v6-void); }

/* 12 · Fanned deck */
.s12-fan { position: relative; height: 640px; }
.s12-card { position: absolute; left: 50%; top: 50%; width: 300px; aspect-ratio: 9 / 14; overflow: hidden; border: 1px solid rgba(241,237,228,0.2); cursor: pointer; outline: none; box-shadow: 0 30px 70px -25px rgba(0,0,0,0.9); z-index: calc(3 - var(--p) * var(--p)); transform: translate(-50%, -50%) translateX(calc(var(--p) * 175px)) translateY(calc(var(--p) * var(--p) * 22px)) rotate(calc(var(--p) * 9deg)); transition: transform 0.8s var(--v6-ease), filter 0.5s ease, border-color 0.4s ease; filter: brightness(0.55) saturate(0.6); }
.s12-card.is-active { z-index: 5; cursor: default; filter: none; border-color: var(--v6-signal); transform: translate(-50%, -54%) translateX(calc(var(--p) * 175px)) rotate(0deg) scale(1.08); }
.s12-card:focus-visible { border-color: var(--v6-signal); }
.s12.has-active .s12-card:not(.is-active) { transform: translate(-50%, -50%) translateX(calc(var(--p) * 215px)) translateY(calc(var(--p) * var(--p) * 30px)) rotate(calc(var(--p) * 13deg)) scale(0.94); }
.s12-info { display: none; }
.s12-info.is-active { display: block; animation: s10in 0.6s var(--v6-ease) both; }
@media (max-width: 767px) {
  .s12-fan { height: 440px; }
  .s12-card { width: 190px; transform: translate(-50%, -50%) translateX(calc(var(--p) * 92px)) rotate(calc(var(--p) * 8deg)); }
  .s12-card.is-active { transform: translate(-50%, -52%) translateX(calc(var(--p) * 92px)) rotate(0) scale(1.06); }
  .s12.has-active .s12-card:not(.is-active) { transform: translate(-50%, -50%) translateX(calc(var(--p) * 110px)) rotate(calc(var(--p) * 11deg)) scale(0.92); }
}

/* 13 · Scroll chapters */
.s13-frame { position: sticky; top: 72px; z-index: 5; height: 42vh; overflow: hidden; border: 1px solid rgba(241,237,228,0.12); }
@media (min-width: 1024px) { .s13-frame { top: 100px; height: calc(100vh - 140px); max-height: 760px; } }
.s13-frame > .svc-media { opacity: 0; transition: opacity 0.7s ease; }
.s13-frame > .svc-media.is-active { opacity: 1; }
.s13-label [data-svc-show] { display: none; }
.s13-label [data-svc-show].is-active { display: inline; }
.s13-chap { display: flex; flex-direction: column; justify-content: center; min-height: 82vh; padding: 48px 0; border-top: 1px solid rgba(241,237,228,0.12); opacity: 0.3; transition: opacity 0.6s ease; }
.s13-chap:first-child { border-top: 0; }
.s13-chap.is-active { opacity: 1; }

/* 14 · Spec sheet */
.s14-col { border: 1px solid rgba(241,237,228,0.12); transition: background-color 0.4s ease, border-color 0.4s ease, opacity 0.4s ease; }
@media (min-width: 1024px) { .s14-col { border-width: 0 0 0 1px; } .s14 { border: 1px solid rgba(241,237,228,0.12); } }
.s14-cell { padding: 18px 22px; border-top: 1px solid rgba(241,237,228,0.1); font-size: 14px; line-height: 1.55; color: rgba(241,237,228,0.75); }
.s14-label { display: flex; align-items: center; font-family: "Martian Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(241,237,228,0.45); }
.s14-col.is-active { background: rgba(255,74,0,0.06); border-color: rgba(255,74,0,0.55); }
.s14.has-active .s14-col:not(.is-active) { opacity: 0.45; }
.s14-col.is-active .svc-media > img { transform: scale(1.05); }

/* 15 · Takeover */
.s15 { position: relative; overflow: hidden; min-height: 680px; display: flex; align-items: flex-end; border: 1px solid rgba(241,237,228,0.12); background: #100e0b; }
.s15 > div:last-child { width: 100%; }
.s15-bg > .svc-media { opacity: 0; transition: opacity 0.7s ease; }
.s15-bg > .svc-media.is-active { opacity: 1; }
.s15-bg { position: absolute; inset: 0; }
.s15-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,9,8,0.85), rgba(10,9,8,0.35) 60%, rgba(10,9,8,0.55)), linear-gradient(to top, rgba(10,9,8,0.8), transparent 50%); }
.s15-item a { color: var(--v6-bone); text-decoration: none; }
.s15-name { transition: color 0.4s ease, transform 0.6s var(--v6-ease), opacity 0.4s ease; }
.s15-item.is-active .s15-name { color: var(--v6-signal); transform: translateX(18px); }
.s15.has-active .s15-item:not(.is-active) .s15-name { opacity: 0.35; }
.s15-info { display: none; }
.s15-info.is-active { display: block; animation: s10in 0.5s var(--v6-ease) both; }
.s15.has-active .s15-hint { display: none; }

/* 16 · Drag carousel */
.s16-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; outline: none; margin: 0 -20px; padding: 0 20px; scroll-padding: 0 20px; }
@media (min-width: 640px) { .s16-track { margin: 0 -40px; padding: 0 40px; scroll-padding: 0 40px; } }
.s16-track::-webkit-scrollbar { display: none; }
.s16-track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.s16-track.is-drag a { pointer-events: none; }
.s16-track:focus-visible { box-shadow: inset 0 0 0 2px var(--v6-signal); }
.s16-card { position: relative; flex: 0 0 min(86vw, 980px); height: min(72vh, 640px); min-height: 520px; overflow: hidden; scroll-snap-align: start; border: 1px solid rgba(241,237,228,0.12); transition: border-color 0.4s; }
.s16-card.is-active { border-color: rgba(255,74,0,0.6); }
.s16-card .svc-media > img { filter: brightness(0.75); }
.s16-card.is-active .svc-media > img { transform: scale(1.04); filter: none; }
.s16-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,0.92) 0%, rgba(10,9,8,0.35) 50%, rgba(10,9,8,0.55) 100%); pointer-events: none; }
.s16-end { flex-basis: min(70vw, 520px); background: var(--v6-signal); border-color: var(--v6-signal); }
.s16-progress { width: var(--p, 25%); transition: width 0.3s ease; }
.s16-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(241,237,228,0.25); color: var(--v6-bone); transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.s16-btn:hover { background: var(--v6-signal); border-color: var(--v6-signal); color: var(--v6-void); }
.s16-btn:disabled { opacity: 0.3; pointer-events: none; }

/* 17 · Venn diagram */
.s17 { position: relative; width: min(100%, 640px); aspect-ratio: 1 / 0.95; margin: 0 auto; }
.s17-circle { position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 2px solid rgba(241,237,228,0.25); outline: none; transition: transform 0.7s var(--v6-ease), border-color 0.4s, opacity 0.5s, filter 0.5s; }
.s17-a { left: 0; top: 0; }
.s17-b { right: 0; top: 0; }
.s17-c { left: 20%; bottom: 0; }
.s17-circle .svc-media { border-radius: 50%; }
.s17-label { position: absolute; left: 50%; bottom: 14%; z-index: 2; transform: translateX(-50%); white-space: nowrap; padding: 5px 10px; background: rgba(10,9,8,0.8); font-family: "Martian Mono", monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v6-bone); }
.s17-a .s17-label { left: 34%; bottom: auto; top: 18%; }
.s17-b .s17-label { left: 66%; bottom: auto; top: 18%; }
.s17-circle.is-active { z-index: 3; border-color: var(--v6-signal); transform: scale(1.04); }
.s17-circle:focus-visible { border-color: var(--v6-signal); }
.s17.has-active .s17-circle:not(.is-active), [data-svc-scope].has-active .s17-circle:not(.is-active) { filter: grayscale(0.6) brightness(0.45); }
.s17-core { position: absolute; left: 50%; top: 47%; z-index: 4; display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: var(--v6-signal); color: var(--v6-void); font-family: "Martian Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 0 0 8px rgba(255,74,0,0.2), 0 0 60px rgba(255,74,0,0.5); pointer-events: none; }
.s17-info { display: none; }
.s17-info.is-active { display: block; animation: s10in 0.6s var(--v6-ease) both; }
@media (max-width: 767px) { .s17-core { width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 9px; } .s17-label { font-size: 8px; } }

/* 18 · Packages */
.s18-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid rgba(241,237,228,0.12); background: #100e0b; transition: transform 0.6s var(--v6-ease), border-color 0.4s; }
.s18-card.is-active { transform: translateY(-8px); border-color: rgba(255,74,0,0.6); }
.s18-card.is-active .svc-media > img { transform: scale(1.05); }
.s18-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; color: rgba(241,237,228,0.8); transition: color 0.25s; }
.s18-item svg { color: var(--v6-signal); }
.s18-item:hover { color: var(--v6-signal); }
.s18-pack { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 30px; background: var(--v6-signal); color: var(--v6-void); text-decoration: none; transition: background-color 0.3s; }
.s18-pack:hover { background: var(--v6-bone); }

/* 19 · Scrapbook */
.s19-paper { background-image: radial-gradient(rgba(10,9,8,0.07) 1px, transparent 1px); background-size: 18px 18px; }
.s19-item { position: relative; }
.s19-photo { position: relative; display: block; padding: 12px 12px 0; background: #fff; color: #0a0908; text-decoration: none; box-shadow: 0 2px 3px rgba(10,9,8,0.15), 0 24px 40px -22px rgba(10,9,8,0.55); transform: rotate(var(--r)); transition: transform 0.6s var(--v6-ease), box-shadow 0.6s; outline: none; }
.s19-item.is-active .s19-photo, .s19-photo:focus-visible { transform: rotate(0deg) translateY(-10px) scale(1.03); box-shadow: 0 2px 3px rgba(10,9,8,0.15), 0 40px 60px -26px rgba(10,9,8,0.6); }
.s19-tape { position: absolute; left: 50%; top: -14px; z-index: 3; width: 110px; height: 30px; margin-left: -55px; background: rgba(255,74,0,0.55); transform: rotate(calc(var(--r) * -1.5)); mix-blend-mode: multiply; }
.s19-cap { display: block; padding: 14px 4px 18px; font-family: "Instrument Sans", sans-serif; font-style: italic; font-size: 17px; letter-spacing: -0.01em; text-align: center; color: rgba(10,9,8,0.75); }
.s19-note { position: absolute; right: -6px; top: 42%; z-index: 4; padding: 4px 10px; background: var(--v6-void); color: var(--v6-bone); font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(6deg) translateX(10px); opacity: 0; transition: opacity 0.35s, transform 0.5s var(--v6-ease); pointer-events: none; }
.s19-item.is-active .s19-note { opacity: 1; transform: rotate(6deg) translateX(0); }

/* 20 · Sub-service matrix */
.s20-col { height: 100%; border: 1px solid rgba(241,237,228,0.12); transition: border-color 0.4s; }
.s20-col.is-active { border-color: rgba(255,74,0,0.55); }
[data-svc-scope].has-active .s20-col:not(.is-active) { opacity: 0.55; }
.s20-col { transition: border-color 0.4s, opacity 0.4s; }
.s20-head { position: relative; display: block; height: 260px; overflow: hidden; color: var(--v6-bone); text-decoration: none; }
.s20-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,8,0.9), rgba(10,9,8,0.1) 60%, rgba(10,9,8,0.5)); pointer-events: none; }
.s20-col.is-active .svc-media > img { transform: scale(1.05); }
.s20-go { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid rgba(241,237,228,0.3); transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.s20-head:hover .s20-go { background: var(--v6-signal); border-color: var(--v6-signal); color: var(--v6-void); }
.s20-tile { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 128px; padding: 18px; background: #0a0908; color: var(--v6-bone); text-decoration: none; transition: background-color 0.3s, color 0.3s; }
.s20-tile:hover { background: var(--v6-signal); color: var(--v6-void); }
.s20-tile:hover span { color: inherit; }
.s20-arrow { position: absolute; right: 14px; top: 14px; opacity: 0; transform: translate(-4px, 4px); transition: opacity 0.3s, transform 0.3s var(--v6-ease); }
.s20-tile:hover .s20-arrow { opacity: 1; transform: none; }

/* Preview switcher: hero row + services row */
#hero-switch { flex-direction: column; align-items: stretch; gap: 2px; }
#hero-switch .sw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
#hero-switch { width: auto; max-width: calc(100vw - 24px); }
#hero-switch a { min-width: 30px; padding: 6px 8px; text-align: center; }
#hero-switch .sw-row > b { width: 170px; flex: none; padding: 0 8px; font-weight: 700; color: #f1ede4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hero-switch .sw-row > span { width: 86px; flex: none; }
#hero-switch details { display: flex; flex-direction: column; gap: 2px; }
#hero-switch summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; color: rgba(241, 237, 228, 0.6); cursor: pointer; list-style: none; }
#hero-switch summary::-webkit-details-marker { display: none; }
#hero-switch summary::after { content: "+"; font-size: 14px; line-height: 1; color: #ff4a00; }
#hero-switch details[open] summary::after { content: "\2212"; }
#hero-switch summary b { color: #f1ede4; }
@media (max-width: 767px) {
  #hero-switch { left: auto; right: 12px; bottom: 12px; transform: none; max-height: 70vh; overflow-y: auto; }
  #hero-switch .sw-row > b { width: 100%; }
}

/* WordPress admin bar: keep the fixed header below it */
body.admin-bar .v6-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .v6-header { top: 46px; } }

@media (prefers-reduced-motion: reduce) {
  .v6-grain, .v6-marquee-track, .v6-spin, .v6-breathe, .v6-ping, .v6-cue::after,
  .v6-stack-track, .v6-stack-track.v6-rev { animation: none; }
  .v6-ulink, .v6-num, .v6-word .v6-letter, .v6-pill, .v6-pill::before { transition: none; }
  .v6-stack-track { width: auto; flex-wrap: wrap; }
  .v6-stack-track > ul:not(:first-child) { display: none; }
  .v6-stack-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  html.js .rise .rise-word, html.js .reveal, html.js .hfade, html.js .wordmark-rise { transform: none; opacity: 1; transition: none; }
  .spot-layer { display: none; }
  #v6-cursor { display: none; }
  html.js .clipin { clip-path: none; transition: none; }
  .scanline, .reticle, .reticle-ring { animation: none; }
  .deck-card, .hunt, .hunt img { transition: none; }
}

/* FAQ: ember glow so the section reads apart from Contact + footer (plain gradients, no blur filters) */
.v6-faq-glow { position: relative; isolation: isolate; overflow: hidden; }
.v6-faq-glow > .faq-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* soft top/bottom edges: no seam against Testimonials above or Contact below */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
}
/* warm tonal lift under everything */
.faq-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #120c09 0%, #1a100b 55%, #140c08 100%); }
/* ember glows on top of the tone: behind the answer card, low-left, a faint top-right highlight */
.faq-bg::after {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(48% 52% at 70% 52%, rgba(255, 74, 0, 0.26), rgba(255, 74, 0, 0.09) 45%, rgba(255, 74, 0, 0) 72%),
    radial-gradient(38% 42% at 12% 72%, rgba(170, 30, 0, 0.30), rgba(170, 30, 0, 0.08) 50%, rgba(170, 30, 0, 0) 75%),
    radial-gradient(32% 28% at 92% 12%, rgba(255, 150, 60, 0.12), rgba(255, 150, 60, 0) 70%);
  will-change: transform; animation: faq-drift 28s ease-in-out infinite alternate;
}
/* glowing hairline on the top edge */
.v6-faq-glow::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 74, 0, 0), rgba(255, 74, 0, 0.55) 50%, rgba(255, 74, 0, 0));
}
@keyframes faq-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4%, 3%, 0) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .faq-bg::after { animation: none; } }

/* ================= Selected work lab (04): concepts 1-5 ================= */
.w-lab .w-foot { margin-top: 28px; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.4); }
.w-lab .w-arrow { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; transition: transform 0.35s var(--v6-ease); }
.w-lab a:hover .w-arrow, .w-lab a:focus-visible .w-arrow { transform: translate(2px, -2px); }
.w-lab .w-svc { color: var(--v6-signal); text-decoration: none; }
.w-lab .w-svc:hover, .w-lab .w-svc:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.w-lab a:focus-visible, .w-lab summary:focus-visible { outline: 2px solid var(--v6-signal); outline-offset: 4px; }

/* ---- 1 · Ledger ---- */
.w1-ledger { margin-top: 48px; border-top: 1px solid rgba(241, 237, 228, 0.14); }
.w1-head, .w1-sum, .w1-cta { display: grid; grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.9fr) 70px 28px; gap: 20px; align-items: center; }
.w1-head { padding: 12px 0; font-family: "Martian Mono", monospace; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(241, 237, 228, 0.35); border-bottom: 1px solid rgba(241, 237, 228, 0.14); }
.w1-row { border-bottom: 1px solid rgba(241, 237, 228, 0.14); }
.w1-sum { list-style: none; cursor: pointer; padding: 26px 0; position: relative; transition: background-color 0.35s ease; }
.w1-sum::-webkit-details-marker { display: none; }
.w1-sum::before { content: ""; position: absolute; inset: 0 -20px; background: linear-gradient(90deg, rgba(255, 74, 0, 0.1), rgba(255, 74, 0, 0)); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; }
.w1-sum:hover::before, .w1-row[open] .w1-sum::before { opacity: 1; }
.w1-n { font-family: "Martian Mono", monospace; font-size: 11px; letter-spacing: 0.2em; color: var(--v6-signal); }
.w1-client { font-family: "Anybody", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 4.4vw, 4rem); line-height: 0.95; letter-spacing: -0.01em; color: #f1ede4; transition: transform 0.45s var(--v6-ease), color 0.3s ease; }
.w1-sum:hover .w1-client { transform: translateX(10px); }
.w1-row[open] .w1-client { color: var(--v6-signal); }
.w1-meta { display: flex; flex-direction: column; gap: 4px; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(241, 237, 228, 0.5); }
.w1-svc { color: rgba(241, 237, 228, 0.85); }
.w1-metric { font-family: "Anybody", sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.75rem); letter-spacing: -0.01em; color: var(--v6-signal); }
.w1-year { font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; color: rgba(241, 237, 228, 0.4); }
.w1-plus { position: relative; width: 16px; height: 16px; }
.w1-plus::before, .w1-plus::after { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: #f1ede4; transition: transform 0.35s var(--v6-ease); }
.w1-plus::after { transform: rotate(90deg); }
.w1-row[open] .w1-plus::after { transform: rotate(0deg); }
.w1-body { display: grid; grid-template-columns: 56px minmax(0, 1.6fr) minmax(0, 2.1fr); gap: 20px; padding: 0 0 30px; }
.w1-body > * { grid-column: 2 / -1; }
.w1-label { font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.45); }
.w1-desc { max-width: 38rem; font-size: 16px; line-height: 1.65; color: rgba(241, 237, 228, 0.72); }
.w1-link { justify-self: start; font-family: "Martian Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #f1ede4; text-decoration: none; border-bottom: 1px solid rgba(255, 74, 0, 0.7); padding-bottom: 4px; }
.w1-cta { padding: 26px 0; text-decoration: none; border-bottom: 1px solid rgba(241, 237, 228, 0.14); }
.w1-cta .w1-client { color: rgba(241, 237, 228, 0.3); -webkit-text-stroke: 1.5px rgba(241, 237, 228, 0.45); color: transparent; grid-column: 2 / 4; }
.w1-cta:hover .w1-client { -webkit-text-stroke-color: var(--v6-signal); }
.w1-cta-go { grid-column: 4 / -1; justify-self: end; font-family: "Martian Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--v6-signal); }
@media (max-width: 767px) {
  .w1-head { display: none; }
  .w1-sum { grid-template-columns: 32px minmax(0, 1fr) auto 18px; gap: 6px 12px; padding: 20px 0; }
  .w1-client { font-size: clamp(1.45rem, 7.4vw, 2.2rem); }
  .w1-metric { font-size: clamp(1.2rem, 5.6vw, 1.7rem); }
  .w1-meta { grid-column: 2 / 3; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
  .w1-metric { grid-column: 3; grid-row: 1 / 3; text-align: right; }
  .w1-year { display: none; }
  .w1-plus { grid-column: 4; grid-row: 1; width: 14px; height: 14px; }
  .w1-plus::before, .w1-plus::after { width: 14px; top: 6px; }
  .w1-body { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .w1-cta { grid-template-columns: 32px minmax(0, 1fr); gap: 8px 12px; }
  .w1-cta .w1-client { grid-column: 2; }
  .w1-cta-go { grid-column: 2; justify-self: start; }
}

/* ---- 2 · Scoreboard ---- */
.w2-board { margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(241, 237, 228, 0.14); border-left: 1px solid rgba(241, 237, 228, 0.14); }
.w2-tile { position: relative; padding: clamp(24px, 3.4vw, 48px); border-right: 1px solid rgba(241, 237, 228, 0.14); border-bottom: 1px solid rgba(241, 237, 228, 0.14); overflow: hidden; isolation: isolate; }
.w2-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 20% 60%, rgba(255, 74, 0, 0.16), rgba(255, 74, 0, 0) 70%); opacity: 0; transition: opacity 0.5s ease; }
.w2-tile:hover::before { opacity: 1; }
.w2-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.55); }
.w2-n { color: rgba(241, 237, 228, 0.35); }
.w2-client { color: #f1ede4; font-weight: 700; }
.w2-svc { margin-left: auto; color: var(--v6-signal); text-decoration: none; }
.w2-svc:hover { text-decoration: underline; text-underline-offset: 3px; }
.w2-num { margin-top: 18px; font-family: "Anybody", sans-serif; font-weight: 800; font-size: clamp(4rem, 10.5vw, 10rem); line-height: 0.88; letter-spacing: -0.03em; color: var(--v6-signal); font-variant-numeric: tabular-nums; font-variation-settings: "wdth" 88; }
.w2-label { margin-top: 12px; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.55); }
.w2-desc { margin-top: 14px; max-width: 30rem; font-size: 15px; line-height: 1.6; color: rgba(241, 237, 228, 0.62); }
.w2-cta { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 22px 26px; border: 1px solid rgba(255, 74, 0, 0.5); text-decoration: none; font-family: "Martian Mono", monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #f1ede4; transition: background-color 0.3s ease, color 0.3s ease; }
.w2-cta:hover { background: var(--v6-signal); color: #0a0908; }
.w2-cta-go { font-weight: 700; }
@media (max-width: 767px) { .w2-board { grid-template-columns: minmax(0, 1fr); } .w2-svc { margin-left: 0; } }

/* ---- 3 · Stacked files ---- */
.w3-stack { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; }
.w3-card { position: sticky; top: calc(96px + var(--i) * 44px); display: flex; flex-direction: column; min-height: 62vh; background: #12100e; border: 1px solid rgba(241, 237, 228, 0.14); box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, 0.85); text-decoration: none; color: inherit; }
.w3-card:nth-child(2) { background: #15120f; } .w3-card:nth-child(3) { background: #181411; } .w3-card:nth-child(4) { background: #1b1612; }
.w3-tab { display: flex; gap: 18px; align-items: center; height: 44px; padding: 0 22px; border-bottom: 1px solid rgba(241, 237, 228, 0.1); font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.6); }
.w3-n { color: var(--v6-signal); }
.w3-year { margin-left: auto; color: rgba(241, 237, 228, 0.35); }
.w3-in { flex: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: end; padding: clamp(24px, 4vw, 56px); }
.w3-tags { display: flex; gap: 10px; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.5); }
.w3-client { margin-top: 18px; font-family: "Anybody", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: 0.9; letter-spacing: -0.01em; color: #f1ede4; }
.w3-desc { margin-top: 18px; max-width: 30rem; font-size: 15px; line-height: 1.6; color: rgba(241, 237, 228, 0.65); }
.w3-res { text-align: right; }
.w3-num { font-family: "Anybody", sans-serif; font-weight: 800; font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: 0.85; letter-spacing: -0.03em; color: var(--v6-signal); }
.w3-label { margin-top: 10px; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.5); }
.w3-cta { background: var(--v6-signal) !important; color: #0a0908; border-color: var(--v6-signal); min-height: 40vh; }
.w3-cta .w3-tab { color: rgba(10, 9, 8, 0.7); border-color: rgba(10, 9, 8, 0.2); } .w3-cta .w3-n { color: #0a0908; }
.w3-cta .w3-client { color: #0a0908; margin: 0; }
.w3-cta-go { justify-self: end; font-family: "Martian Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
@media (max-width: 767px) {
  .w3-card { top: calc(76px + var(--i) * 36px); min-height: 70vh; }
  .w3-tab { height: 36px; padding: 0 16px; }
  .w3-in { grid-template-columns: minmax(0, 1fr); align-content: end; }
  .w3-res { text-align: left; }
  .w3-cta-go { justify-self: start; }
}

/* ---- 4 · Receipts ---- */
.w4-row { margin-top: 56px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; align-items: start; }
.w4-rec { display: block; text-decoration: none; color: inherit; transform: rotate(var(--r)); transition: transform 0.5s var(--v6-ease), filter 0.5s ease; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.55)); }
.w4-rec:nth-child(even) { margin-top: 36px; }
.w4-rec:hover, .w4-rec:focus-within { transform: rotate(0deg) translateY(-8px); filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 22px rgba(255, 74, 0, 0.25)); }
.w4-paper {
  --z: 9px; position: relative; padding: 26px 20px calc(26px + var(--z)); background: #f1ede4; color: #0a0908;
  font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  /* torn zigzag bottom edge */
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--z)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--z)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x;
}
.w4-brand { text-align: center; font-family: "Anybody", sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0.14em; }
.w4-brand span { color: var(--v6-signal); }
.w4-sub { margin-top: 6px; text-align: center; color: rgba(10, 9, 8, 0.55); padding-bottom: 14px; border-bottom: 1px dashed rgba(10, 9, 8, 0.35); }
.w4-items { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.w4-items div { display: flex; justify-content: space-between; gap: 10px; }
.w4-items dt { color: rgba(10, 9, 8, 0.5); }
.w4-items dd { margin: 0; text-align: right; font-weight: 700; }
.w4-svc { color: #c23a00; text-decoration: none; }
.w4-svc:hover { text-decoration: underline; }
.w4-desc { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(10, 9, 8, 0.35); font-family: "Instrument Sans", sans-serif; font-size: 13px; letter-spacing: 0; line-height: 1.5; text-transform: none; color: rgba(10, 9, 8, 0.75); }
.w4-total { margin-top: 14px; padding-top: 12px; border-top: 2px solid #0a0908; display: flex; flex-direction: column; gap: 4px; }
.w4-total span { color: rgba(10, 9, 8, 0.55); }
.w4-total strong { font-family: "Anybody", sans-serif; font-weight: 800; font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; color: #e04300; }
.w4-thanks { margin-top: 14px; text-align: center; color: rgba(10, 9, 8, 0.5); }
.w4-blank .w4-paper { background: transparent; color: #f1ede4; outline: 1.5px dashed rgba(241, 237, 228, 0.35); outline-offset: -1.5px; }
.w4-blank .w4-sub, .w4-blank .w4-total span, .w4-blank .w4-thanks { color: rgba(241, 237, 228, 0.55); border-color: rgba(241, 237, 228, 0.3); }
.w4-blank .w4-total { border-color: rgba(241, 237, 228, 0.5); }
.w4-blank .w4-total strong { color: rgba(241, 237, 228, 0.35); }
.w4-blank-title { margin-top: 26px; font-family: "Anybody", sans-serif; font-weight: 800; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; }
.w4-blank:hover .w4-thanks { color: var(--v6-signal); }
@media (max-width: 1100px) { .w4-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .w4-rec:nth-child(even) { margin-top: 0; } }
@media (max-width: 767px) { .w4-row { grid-template-columns: minmax(0, 1fr); gap: 28px; } .w4-rec { --r: 0deg !important; max-width: 360px; justify-self: center; width: 100%; } }
@media (prefers-reduced-motion: reduce) { .w4-rec { transition: none; } }

/* ---- 5 · Bento ---- */
.w5-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 14px; }
.w5-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(20px, 2.4vw, 34px); border: 1px solid rgba(241, 237, 228, 0.14); background: #0f0d0b; transition: border-color 0.4s ease; text-decoration: none; color: inherit; }
.w5-tile:hover { border-color: rgba(255, 74, 0, 0.7); }
.w5-t1 { grid-column: span 4; grid-row: span 2; } .w5-t2 { grid-column: span 2; } .w5-t3 { grid-column: span 2; } .w5-t4 { grid-column: span 3; } .w5-cta { grid-column: span 3; }
.w5-pat { position: absolute; right: -40px; bottom: -40px; width: 300px; height: 300px; opacity: 0.4; transition: opacity 0.5s ease; pointer-events: none; }
.w5-tile:hover .w5-pat { opacity: 0.85; }
.w5-t1 .w5-pat { width: 460px; height: 460px; }
.w5-dots { background-image: radial-gradient(rgba(255, 74, 0, 0.85) 2.2px, transparent 2.6px); background-size: 22px 22px; }
.w5-lines { background-image: repeating-linear-gradient(45deg, rgba(241, 237, 228, 0.5) 0 1.5px, transparent 1.5px 14px); }
.w5-rings { background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255, 74, 0, 0.55) 0 1.5px, transparent 1.5px 18px); }
.w5-mesh { background-image: linear-gradient(rgba(241, 237, 228, 0.35) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(241, 237, 228, 0.35) 1.5px, transparent 1.5px); background-size: 20px 20px; }
.w5-tags { position: relative; display: flex; flex-wrap: wrap; gap: 6px 10px; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.5); }
.w5-n { color: rgba(241, 237, 228, 0.4); }
.w5-client { position: relative; font-family: "Anybody", sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 0.92; letter-spacing: -0.01em; color: #f1ede4; }
.w5-t1 .w5-client { font-size: clamp(3rem, 7vw, 7rem); }
.w5-res { position: relative; }
.w5-num { font-family: "Anybody", sans-serif; font-weight: 800; font-size: clamp(2.4rem, 3.6vw, 3.6rem); line-height: 0.9; letter-spacing: -0.02em; color: var(--v6-signal); }
.w5-t1 .w5-num { font-size: clamp(4rem, 9vw, 9rem); }
.w5-label { margin-top: 8px; font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.5); }
.w5-desc { margin-top: 10px; max-width: 28rem; font-size: 14px; line-height: 1.55; color: rgba(241, 237, 228, 0.62); }
.w5-t2 .w5-desc, .w5-t3 .w5-desc { display: none; }
.w5-cta { background: var(--v6-signal); border-color: var(--v6-signal); color: #0a0908; }
.w5-cta .w5-n { color: rgba(10, 9, 8, 0.65); font-family: "Martian Mono", monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.w5-cta .w5-client { color: #0a0908; }
.w5-cta-go { font-family: "Martian Mono", monospace; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.w5-cta:hover { background: #f1ede4; border-color: #f1ede4; }
@media (max-width: 1023px) { .w5-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w5-t1 { grid-column: span 2; grid-row: auto; } .w5-t2, .w5-t3 { grid-column: span 1; } .w5-t4, .w5-cta { grid-column: span 2; } }
@media (max-width: 639px) { .w5-grid { grid-template-columns: minmax(0, 1fr); } .w5-tile { grid-column: auto !important; } .w5-t2 .w5-desc, .w5-t3 .w5-desc { display: block; } .w5-pat, .w5-t1 .w5-pat { width: 200px; height: 200px; opacity: 0.22; } }

/* ================= Work · 6 Original+ (the reel + motion) ================= */
/* 3 · focus: JS scales/dims each card by its distance from the centre and drifts the big outlined number */
.wplus .work-track > * { transform-origin: 50% 60%; will-change: transform, opacity; }
.wplus .work-track .v6-stroke { will-change: transform; }

/* 4 · "promises" gets struck through once the reel starts moving */
.wp-strike { position: relative; display: inline-block; transition: color 0.6s ease; }
.wp-strike::after { content: ""; position: absolute; left: -3%; right: -3%; top: 50%; height: 0.1em; background: var(--v6-signal); transform: scaleX(0); transform-origin: left center; transition: transform 0.75s var(--v6-ease); }
.wplus.is-struck .wp-strike { color: rgba(241, 237, 228, 0.45); }
.wplus.is-struck .wp-strike::after { transform: scaleX(1); }

/* 1 · result art (replaces the static corner patterns) */
.wp-art { opacity: 0.5; transition: opacity 0.5s ease; }
.wplus .is-active .wp-art, .wplus .group:hover .wp-art { opacity: 1; }
.wp-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Oriental Mart: their result climbs the search results from #5 to #1, then gets clicked */
.wp-art-serp .bar { fill: none; stroke: rgba(241, 237, 228, 0.35); stroke-width: 1.2; }
.wp-art-serp .mg { fill: none; stroke: rgba(241, 237, 228, 0.5); stroke-width: 1.5; stroke-linecap: round; }
.wp-art-serp .q { fill: rgba(241, 237, 228, 0.4); }
.wp-art-serp .rw { transform: translateY(calc(var(--s) * 26px)); transition: transform 1.1s var(--v6-ease); transition-delay: 0.25s; }
.wp-art-serp .rw .t { fill: rgba(241, 237, 228, 0.42); }
.wp-art-serp .rw .u { fill: rgba(241, 237, 228, 0.22); }
.wp-art-serp .rw .d { fill: rgba(241, 237, 228, 0.14); }
.wp-art-serp .me .t { fill: #ff4a00; }
.wp-art-serp .me .u { fill: rgba(255, 74, 0, 0.55); }
.wp-art-serp .me .d { fill: rgba(241, 237, 228, 0.3); }
.is-active .wp-art-serp .rw { transform: translateY(calc(var(--e) * 26px)); }
.wp-art-serp .ck { fill: none; stroke: #ff4a00; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-active .wp-art-serp .ck { animation: wp-click 2.4s 1.5s ease-out infinite; }
@keyframes wp-click { 0% { transform: scale(0.2); opacity: 1; } 45% { transform: scale(1.6); opacity: 0; } 100% { transform: scale(1.6); opacity: 0; } }
.wp-art-serp .rk { font: 700 10px "Martian Mono", monospace; fill: #ff4a00; opacity: 0; transition: opacity 0.4s ease 1.2s; }
.is-active .wp-art-serp .rk { opacity: 1; }
/* eBay UK: 66 days of impressions - daily bars grow left to right, Promoted (orange) stacked on organic */
.wp-art-bars .base { stroke: rgba(241, 237, 228, 0.3); stroke-width: 1; }
.wp-art-bars .pm { fill: #ff4a00; }
.wp-art-bars .og { fill: rgba(241, 237, 228, 0.55); }
.wp-art-bars .lt { font: 7px "Martian Mono", monospace; letter-spacing: 0.08em; fill: rgba(241, 237, 228, 0.5); text-transform: uppercase; }
.wp-art-bars .br { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.04); transition: transform 0.6s var(--v6-ease); transition-delay: calc(var(--i) * 55ms); }
.is-active .wp-art-bars .br { transform: scaleY(1); }
.is-active .wp-art-bars .br.last { animation: wp-today 1.6s 1.8s ease-in-out infinite; }
@keyframes wp-today { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* HeySilkySkin: Search Console-style line chart - the line draws from 1 click (M1) to 2,200 (M6), area fills under it */
.wp-art-line .gl { stroke: rgba(241, 237, 228, 0.1); stroke-width: 1; stroke-dasharray: 2 4; }
.wp-art-line .base { stroke: rgba(241, 237, 228, 0.3); stroke-width: 1; }
.wp-art-line .lt { font: 7px "Martian Mono", monospace; letter-spacing: 0.08em; fill: rgba(241, 237, 228, 0.5); }
.wp-art-line .ln { fill: none; stroke: #ff4a00; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(0.55, 0, 0.35, 1) 0.2s; }
.wp-art-line .ar { opacity: 0; transition: opacity 0.8s ease 1.2s; }
.wp-art-line .pt { fill: #ff4a00; stroke: #0a0908; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.2); transition: opacity 0.25s ease, transform 0.4s var(--v6-ease); transition-delay: calc(0.2s + var(--m) * 0.3s); }
.wp-art-line .one { fill: #f1ede4; }
.wp-art-line .vl { font: 700 9px "Martian Mono", monospace; letter-spacing: 0.04em; }
.wp-art-line .v1 { fill: rgba(241, 237, 228, 0.75); }
.wp-art-line .v2 { fill: #ff4a00; opacity: 0; transition: opacity 0.4s ease 1.8s; }
.wp-art-line .ring { fill: none; stroke: #ff4a00; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-active .wp-art-line .ln { stroke-dashoffset: 0; }
.is-active .wp-art-line .ar, .is-active .wp-art-line .pt, .is-active .wp-art-line .v2 { opacity: 1; }
.is-active .wp-art-line .pt { transform: scale(1); }
.is-active .wp-art-line .ring { animation: wp-ping 2s 2s ease-out infinite; }
@keyframes wp-ping { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }
/* Tech Store: the store builds itself from nothing, then products get "added to cart" one after another */
.wp-art-store .fr { fill: none; stroke: rgba(241, 237, 228, 0.55); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--v6-ease); }
.wp-art-store .dt, .wp-art-store .hd { fill: rgba(241, 237, 228, 0.5); opacity: 0; transition: opacity 0.4s ease 0.7s; }
.wp-art-store .hd { fill: #ff4a00; }
.wp-art-store .hd2 { fill: rgba(241, 237, 228, 0.35); }
.wp-art-store .pd { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.6); transition: opacity 0.35s ease, transform 0.45s var(--v6-ease); transition-delay: calc(0.9s + var(--k) * 70ms); }
.wp-art-store .pd rect { fill: rgba(241, 237, 228, 0.22); }
.wp-art-store .pd .pl { fill: rgba(241, 237, 228, 0.4); }
.is-active .wp-art-store .fr { stroke-dashoffset: 0; }
.is-active .wp-art-store .dt, .is-active .wp-art-store .hd { opacity: 1; }
.is-active .wp-art-store .pd { opacity: 1; transform: scale(1); }
.is-active .wp-art-store .pd rect:first-child { animation: wp-cart 6s calc(2s + var(--k) * 0.5s) infinite; }
@keyframes wp-cart { 0%, 9%, 100% { fill: rgba(241, 237, 228, 0.22); } 2%, 6% { fill: #ff4a00; } }
/* the whole card is a link to the real case study */
.wplus .wp-read { position: relative; }
.wplus .wp-read::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: var(--v6-signal); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--v6-ease); }
.wplus .group:hover .wp-read::after, .wplus .group:focus-visible .wp-read::after { transform: scaleX(1); }
.wplus .work-track > a:focus-visible { outline: 2px solid var(--v6-signal); outline-offset: 3px; }
/* phones: the art sits behind the copy, so keep it smaller and quieter */
@media (max-width: 639px) {
  .wplus .wp-art { width: 168px; height: 168px; bottom: -30px; right: -30px; }
  .wplus .is-active .wp-art, .wplus .group:hover .wp-art { opacity: 0.5; }
  .wplus .wp-art:not(.x) { opacity: 0.3; }
  .wplus .is-active .wp-art:not(.x) { opacity: 0.55; }
}

/* 5 · case markers on the progress line */
.wp-marks { position: relative; height: 0; margin-bottom: 54px; }
.wp-mark { position: absolute; top: -4px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: "Martian Mono", monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: rgba(241, 237, 228, 0.35); transition: color 0.3s ease; }
.wp-mark i { width: 8px; height: 8px; border-radius: 50%; background: #0a0908; border: 1px solid rgba(241, 237, 228, 0.4); transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--v6-ease), box-shadow 0.3s ease; }
.wp-mark b { font-weight: 400; color: inherit; }
.wp-mark em { font-style: normal; margin-top: -4px; }
.wp-mark.is-past i { background: var(--v6-signal); border-color: var(--v6-signal); }
.wp-mark.is-on { color: #f1ede4; }
.wp-mark.is-on i { background: var(--v6-signal); border-color: var(--v6-signal); transform: scale(1.45); box-shadow: 0 0 0 4px rgba(255, 74, 0, 0.2); }
@media (max-width: 767px) { .wp-mark em { display: none; } .wp-marks { margin-bottom: 26px; } }

@media (prefers-reduced-motion: reduce) {
  .wp-art *, .wp-art, .wp-strike, .wp-strike::after, .wp-mark, .wp-mark i { transition: none !important; animation: none !important; }
}

/* Header background: transparent over the top of the hero, then a frosted bar once scrolled.
   Dark over dark sections, bone over light ones (follows the existing hdr-light tone switch). */
.v6-header > div { position: relative; }
.v6-header::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background-color: rgba(10, 9, 8, 0.82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid rgba(241, 237, 228, 0.08); transition: opacity 0.35s ease, background-color 0.3s ease, border-color 0.3s ease; }
html.hdr-solid .v6-header::before { opacity: 1; }
html.hdr-light .v6-header::before { background-color: rgba(241, 237, 228, 0.88); border-bottom-color: rgba(10, 9, 8, 0.1); }
html.menu-open .v6-header::before { opacity: 0; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v6-header::before { background-color: rgba(10, 9, 8, 0.96); }
  html.hdr-light .v6-header::before { background-color: rgba(241, 237, 228, 0.97); }
}

/* ================= SEO copy merge: service-card legibility + case-study reel fit (all screen sizes) ================= */
.s3-card.is-active .s3-shade,.s3-card:focus-within .s3-shade{background:linear-gradient(to top,rgba(10,9,8,.97) 0%,rgba(10,9,8,.92) 50%,rgba(10,9,8,.74) 68%,rgba(10,9,8,.22) 86%,rgba(10,9,8,.45) 100%)}@media (hover:none){.s3-shade{background:linear-gradient(to top,rgba(10,9,8,.97) 0%,rgba(10,9,8,.92) 50%,rgba(10,9,8,.74) 68%,rgba(10,9,8,.22) 86%,rgba(10,9,8,.45) 100%)}}.s3-body h3,.s3-body p,.s3-links a{text-shadow:0 1px 14px rgba(10,9,8,.85),0 0 2px rgba(10,9,8,.6)}.s3-body p.pt-4{color:rgba(241,237,228,.92)}.wplus .work-inner.pinned{justify-content:flex-start;padding:84px 0 18px}@media (min-width:640px){.wplus .work-inner.pinned{padding:104px 0 24px}}.wplus .work-inner.pinned .work-track{flex:1 1 0;min-height:auto;margin-top:28px}.wplus .work-inner.pinned .work-track>*{height:auto!important}.wplus .work-inner.pinned .work-track+div{margin-top:22px}.wplus .work-inner.pinned .wp-marks{margin-bottom:62px}@media (max-width:767px){.wplus .work-inner.pinned .wp-marks{margin-bottom:30px}}@media (max-height:860px){.wplus .wp-intro{display:none}.wplus .work-inner.pinned{padding-top:90px}.wplus .work-inner>div:first-child p.font-v6-display{font-size:clamp(2rem,min(7vh,10vw),4.75rem)}.wplus .work-track>a{padding:22px 26px!important}.wplus .work-track h3.font-v6-display{font-size:clamp(1.9rem,5.4vh,3.75rem)!important}.wplus .work-track p[data-wp-count]{font-size:clamp(1.9rem,5vh,3rem)!important}.wplus .work-track p.mt-4{margin-top:.5rem!important}.wplus .work-track .wp-read{margin-top:.75rem!important}.wplus .work-track .v6-stroke{font-size:clamp(3.5rem,10vh,6rem)!important}.wplus .work-inner.pinned .wp-mark em{display:none}.wplus .work-inner.pinned .wp-marks{margin-bottom:34px}}@media (max-width:767px){.wplus .work-inner.pinned{padding-top:78px}.wplus .work-inner.pinned .wp-marks+div{display:none}.wplus .work-inner.pinned .wp-marks{margin-bottom:24px}.wplus .work-track .v6-stroke{font-size:3.25rem!important}.wplus .work-track>a>div.flex.items-center{max-width:66%;flex-wrap:wrap;row-gap:4px}}@media (max-height:560px){#work.wplus{height:auto!important}.wplus .work-inner.pinned{position:relative;height:auto;overflow:visible;padding:96px 0 48px}.wplus .work-inner.pinned .work-track{transform:none!important;width:auto!important;flex:none;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px}.wplus .work-inner.pinned .work-track>a{scroll-snap-align:start}.wplus .work-inner.pinned .work-track+div{display:none}}@media (max-width:767px){.wplus .work-track>a>span.absolute{display:none}.wplus .work-track>a .wp-art.wp-art{top:16px;right:14px;bottom:auto;left:auto;width:104px;height:104px;overflow:hidden;opacity:.6}.wplus .work-track>a.is-active .wp-art.wp-art{opacity:1}.wplus .work-track>a .wp-art svg{width:131px;height:131px}.wplus .work-track>a>div.flex.items-center{max-width:calc(100% - 112px)}.wplus .work-track>a>div.flex.items-center{min-height:100px;align-content:flex-start}.wplus .work-track>a>h3{margin-top:8px}.wplus .work-track>a.justify-between{justify-content:flex-start}.wplus .work-track>a>div.relative:last-child{margin-top:auto;padding-top:20px}}@media (max-width:767px) and (max-height:700px){.wplus .work-inner>div:first-child p.font-v6-display{display:none}.wplus .work-track>a .wp-art.wp-art{width:84px;height:84px}.wplus .work-track>a .wp-art svg{width:106px;height:106px}.wplus .work-track>a>div.flex.items-center{min-height:80px;max-width:calc(100% - 92px)}.wplus .work-track>a>div.relative:last-child{padding-top:6px}}

/* Footer logo: hovering or tapping launches the rocket (see v6.js); the letters and swoosh stay still */
.v6-wm { overflow: visible; cursor: pointer; }

/* ————— Mega menu (desktop) and menu index (mobile). Built from the theme's mzv_nav_architecture(), so every
   service page is listed. One panel per pillar: the pillar's cover on the left, every group at once on the right,
   and a search box that finds any service across all three pillars ————— */
.mz-nav { display: none; }
@media (min-width: 1024px) { .mz-nav { display: block; } }
.mz-nav-list { display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2.25rem); margin: 0; padding: 0; list-style: none; }
.mz-nav-list > li { position: relative; }
.mz-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 0; margin: 0;
  background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 500 10px/1 "Martian Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.78; transition: opacity 0.3s ease, color 0.3s ease;
}
.mz-trigger::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 1px; background: var(--v6-signal);
  transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--v6-ease);
}
.mz-trigger:hover, .mz-trigger[aria-expanded="true"] { opacity: 1; }
.mz-trigger:hover::after, .mz-trigger[aria-expanded="true"]::after { transform: scaleX(1); }
.mz-trigger[aria-expanded="true"] { color: var(--v6-signal); }
.mz-trigger:focus { outline: none; }
.mz-trigger:focus-visible { outline: 2px solid var(--v6-signal); outline-offset: 4px; }
.mz-caret {
  width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.35s var(--v6-ease);
}
.mz-trigger[aria-expanded="true"] .mz-caret { transform: translateY(1px) rotate(-135deg); }

/* the call-to-action in the bar */
.mz-cta {
  align-items: center; gap: 0.6rem; padding: 0.8rem 1.1rem; background: var(--v6-signal); color: var(--v6-void) !important;
  font: 600 10px/1 "Martian Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; transition: background-color 0.3s ease, color 0.3s ease;
}
.mz-cta:hover { background: var(--v6-bone); }
.mz-cta:focus-visible { outline: 2px solid var(--v6-bone); outline-offset: 3px; }

/* the header goes solid and dark while a panel is open, whatever section is underneath */
html.mega-open .v6-header::before { opacity: 1 !important; background-color: rgba(13, 12, 11, 0.97) !important; border-bottom-color: rgba(241, 237, 228, 0.08) !important; }
html.mega-open .v6-header .text-white { color: #fff !important; }
html.mega-open .v6-header .bg-white { background-color: #fff !important; }

/* ——— the pillar panels ——— */
.v6-header > .mz-mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 2; display: none;
  background: #0d0c0b; color: var(--v6-bone); border-top: 1px solid rgba(241, 237, 228, 0.08);
  max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s var(--v6-cinema), visibility 0s linear 0.45s;
  scrollbar-width: thin; scrollbar-color: rgba(241, 237, 228, 0.2) transparent;
}
@media (min-width: 1024px) { .v6-header > .mz-mega { display: block; } }
.mz-mega.on { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 0.6s var(--v6-cinema); }
.mz-mega.mz-instant { transition: none !important; }
.mz-mega-in {
  max-width: 1440px; margin: 0 auto; padding: 2.25rem 2.5rem 1.75rem;
  display: grid; grid-template-columns: minmax(230px, 21%) 1fr; gap: clamp(2rem, 3.5vw, 3.5rem);
}
.mz-mega-in > * { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.6s var(--v6-ease); }
.mz-mega.on .mz-mega-in > * { opacity: 1; transform: none; transition-delay: 0.12s; }
.mz-mega.on .mz-mega-in > .mz-body { transition-delay: 0.2s; }
.mz-mega.mz-instant .mz-mega-in > * { transition: none !important; }

.mz-cover { display: flex; flex-direction: column; gap: 1rem; padding-right: clamp(1.5rem, 2.5vw, 2.5rem); border-right: 1px solid rgba(241, 237, 228, 0.1); }
.mz-kicker { font: 500 10px/1.4 "Martian Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.5); }
.mz-kicker b { font-weight: 500; color: var(--v6-signal); }
.mz-art { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #171513; }
.mz-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13, 12, 11, 0.55)); }
.mz-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transform: scale(1.06); transition: transform 1.4s var(--v6-ease); }
.mz-mega.on .mz-art img { transform: scale(1); }
.mz-art-falcon img { object-position: 50% 4%; transform-origin: 50% 0; }   /* the falcon's head sits high in its photo */
.mz-cover-h {
  font-family: "Anybody", sans-serif; font-weight: 800; font-stretch: 112%; font-size: clamp(1.35rem, 1.9vw, 2rem);
  line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--v6-bone); text-decoration: none;
  transition: color 0.3s ease;
}
a.mz-cover-h:hover { color: var(--v6-signal); }
.mz-blurb { margin: 0; font: 400 0.9rem/1.5 "Instrument Sans", sans-serif; color: rgba(241, 237, 228, 0.62); }
.mz-cover-cta {
  margin-top: auto; padding-top: 0.5rem; display: block; align-self: flex-start;
  font: 500 10px/1.7 "Martian Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v6-signal); text-decoration: none;
}
.mz-cover-cta:hover { color: var(--v6-bone); }

.mz-body { min-width: 0; }
.mz-tools { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.6rem; }
.mz-tools-t { font: 500 10px/1.4 "Martian Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.5); }
.mz-search {
  display: flex; align-items: center; gap: 0.6rem; width: min(340px, 100%); padding: 0.45rem 0;
  border-bottom: 1px solid rgba(241, 237, 228, 0.22); color: rgba(241, 237, 228, 0.55); transition: border-color 0.3s ease, color 0.3s ease;
}
.mz-search:focus-within { border-color: var(--v6-signal); color: var(--v6-signal); }
.mz-search svg { width: 15px; height: 15px; flex: none; }
.mz-search input {
  flex: 1; min-width: 0; padding: 0; margin: 0; background: transparent; border: 0; outline: none; color: var(--v6-bone);
  font: 400 0.9rem/1.3 "Instrument Sans", sans-serif;
}
.mz-search input::placeholder { color: rgba(241, 237, 228, 0.42); }
.mz-search input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }

/* every group at once, flowing into columns; a service stays with its sub-services */
.mz-groups { columns: 4 200px; column-gap: clamp(1.5rem, 2.5vw, 2.75rem); }
.mz-g { margin: 0 0 1.5rem; }
.mz-gh {
  display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.45rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(241, 237, 228, 0.12); break-inside: avoid; break-after: avoid;
  font: 600 10.5px/1.35 "Martian Mono", monospace; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v6-bone);
  text-decoration: none; transition: color 0.25s ease;
}
.mz-gh i { font-style: normal; font-weight: 500; color: var(--v6-signal); }
a.mz-gh:hover { color: var(--v6-signal); }
.mz-list, .mz-sub, .mz-mini ul { list-style: none; margin: 0; padding: 0; }
.mz-list > li { break-inside: avoid; }
.mz-l {
  display: block; padding: 0.3rem 0; font: 400 0.86rem/1.3 "Instrument Sans", sans-serif; color: rgba(241, 237, 228, 0.78);
  text-decoration: none; transition: color 0.2s ease, transform 0.25s var(--v6-ease);
}
.mz-l:hover, .mz-l:focus-visible { color: var(--v6-signal); transform: translateX(3px); outline: none; }
.mz-l.active { color: var(--v6-signal); }
.mz-sub { margin: 0.05rem 0 0.35rem 0.1rem; padding-left: 0.8rem; border-left: 1px solid rgba(255, 74, 0, 0.35); }
.mz-l-sub { padding: 0.22rem 0; font-size: 0.79rem; color: rgba(241, 237, 228, 0.52); }

/* search results replace the groups while a query is typed */
.mz-results { columns: 3 240px; column-gap: 2.5rem; }
.mz-results[hidden] { display: none; }
.mz-r { display: block; break-inside: avoid; padding: 0.55rem 0; border-bottom: 1px solid rgba(241, 237, 228, 0.07); text-decoration: none; }
.mz-r b { display: block; font: 500 0.9rem/1.3 "Instrument Sans", sans-serif; color: var(--v6-bone); transition: color 0.2s ease; }
.mz-r mark { background: none; color: var(--v6-signal); }
.mz-r small { display: block; margin-top: 0.2rem; font: 500 9px/1.4 "Martian Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(241, 237, 228, 0.42); }
.mz-r:hover b, .mz-r:focus-visible b { color: var(--v6-signal); }
.mz-r:focus-visible { outline: none; }
.mz-rnone { font: 400 0.95rem/1.5 "Instrument Sans", sans-serif; color: rgba(241, 237, 228, 0.65); }
.mz-rnone a { color: var(--v6-signal); }
.mz-rcount { column-span: all; margin-bottom: 0.6rem; font: 500 10px/1.4 "Martian Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.5); }

.mz-foot { border-top: 1px solid rgba(241, 237, 228, 0.08); }
.mz-foot-in {
  max-width: 1440px; margin: 0 auto; padding: 1rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  font: 400 0.85rem/1.4 "Instrument Sans", sans-serif; color: rgba(241, 237, 228, 0.55);
}
.mz-foot-cta { flex: none; font: 500 10px/1 "Martian Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--v6-signal); text-decoration: none; }
.mz-foot-cta:hover { color: var(--v6-bone); }

/* dims the page under an open panel */
.v6-header > .mz-scrim {
  position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 1; display: none; pointer-events: none;
  background: rgba(10, 9, 8, 0.6); opacity: 0; transition: opacity 0.4s ease;
}
@media (min-width: 1024px) { .v6-header > .mz-scrim { display: block; } }
html.mega-dim .mz-scrim { opacity: 1; pointer-events: auto; }

/* Resources: a small dropdown under its own trigger */
.mz-mini {
  position: absolute; top: 100%; right: -1.25rem; min-width: 210px; padding: 0.75rem 1.25rem; margin-top: 0.85rem;
  background: #0d0c0b; border: 1px solid rgba(241, 237, 228, 0.1); visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.35s var(--v6-ease), visibility 0s linear 0.35s;
}
.mz-mini.on { visibility: visible; opacity: 1; transform: none; transition: opacity 0.25s ease, transform 0.35s var(--v6-ease); }
.mz-mini::before { content: ""; position: absolute; left: 0; right: 0; top: -0.9rem; height: 0.9rem; }

@media (max-height: 760px) and (min-width: 1024px) {
  .mz-mega-in { padding-top: 1.5rem; padding-bottom: 1.25rem; }
  .mz-art { aspect-ratio: 4 / 3; }
  .mz-g { margin-bottom: 1.1rem; }
  .mz-l { padding: 0.22rem 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .mz-mega-in { grid-template-columns: 200px 1fr; padding-left: 1.75rem; padding-right: 1.75rem; }
  .mz-groups { columns: 3 180px; }
  .mz-art { display: none; }
}

/* ——— mobile menu index (inside #v6-menu) ——— */
#v6-menu > div { justify-content: flex-start; }
#v6-menu nav.mz-m { margin-top: auto; }
#v6-menu .menu-meta { margin-bottom: auto; }
.mz-m .menu-word { font-size: clamp(1.45rem, min(6.7vw, 6.4vh), 5rem); }
.mz-m summary > .menu-word { flex: 0 1 auto; min-width: 0; }
/* the menu scrolls once a pillar is open: give the bar a solid backing so the list never runs under the logo */
html.menu-open .v6-header::before { opacity: 1 !important; background-color: var(--v6-void) !important; border-bottom-color: rgba(241, 237, 228, 0.06) !important; -webkit-backdrop-filter: none; backdrop-filter: none; transition: none; }
.mz-m summary { list-style: none; cursor: pointer; }
.mz-m summary::-webkit-details-marker { display: none; }
.mz-m summary:focus { outline: none; }
.mz-m summary:focus-visible { outline: 2px solid var(--v6-signal); outline-offset: 4px; }
.mz-m-p > summary:hover .menu-word, .mz-m-p[open] > summary .menu-word { color: var(--v6-signal); }
.mz-m-plus { position: relative; flex: none; margin-left: auto; align-self: center; width: 16px; height: 16px; transition: transform 0.4s var(--v6-ease); }
.mz-m-plus::before, .mz-m-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--v6-signal); }
.mz-m-plus::after { transform: rotate(90deg); }
.mz-m-p[open] > summary .mz-m-plus { transform: rotate(45deg); }
.mz-m-body { padding: 0 0 1.5rem; }
@media (min-width: 640px) { .mz-m-body { padding-left: calc(11px * 2.4 + 2rem); } }
.mz-m-all {
  display: inline-flex; gap: 0.5rem; margin: 0.15rem 0 0.9rem; font: 500 10px/1.4 "Martian Mono", monospace;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--v6-signal); text-decoration: none;
}
.mz-m-g { border-top: 1px solid rgba(241, 237, 228, 0.08); }
.mz-m-g > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; font: 600 0.98rem/1.3 "Instrument Sans", sans-serif; color: var(--v6-bone); }
.mz-m-g > summary small { flex: none; display: inline-flex; align-items: center; gap: 0.6rem; font: 500 10px/1 "Martian Mono", monospace; letter-spacing: 0.12em; color: rgba(241, 237, 228, 0.42); }
.mz-m-g > summary small::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--v6-signal); border-bottom: 1.5px solid var(--v6-signal); transform: translateY(-2px) rotate(45deg); transition: transform 0.3s ease; }
.mz-m-g[open] > summary small::after { transform: translateY(1px) rotate(-135deg); }
.mz-m-links { display: grid; padding: 0 0 0.9rem; }
@media (min-width: 640px) { .mz-m-links { display: block; columns: 2; column-gap: 2rem; } .mz-m-links a { break-inside: avoid; } }
.mz-m-links a { display: block; padding: 0.5rem 0; font: 400 0.92rem/1.3 "Instrument Sans", sans-serif; color: rgba(241, 237, 228, 0.74); text-decoration: none; }
.mz-m-links a:hover, .mz-m-links a.active { color: var(--v6-signal); }
.mz-m-links a.mz-m-sub { padding-left: 0.9rem; font-size: 0.84rem; color: rgba(241, 237, 228, 0.5); border-left: 1px solid rgba(255, 74, 0, 0.35); }
.mz-m-links a.mz-m-hub { grid-column: 1 / -1; column-span: all; font: 500 10px/1.4 "Martian Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v6-signal); }
.mz-m-open { padding-top: 0.25rem; }

@media (prefers-reduced-motion: reduce) {
  .mz-mega, .mz-mega.on, .mz-mega-in > *, .mz-art img, .mz-mini, .mz-scrim, .mz-l, .mz-trigger::after, .mz-caret, .mz-m-plus { transition: none !important; }
  .mz-l:hover, .mz-l:focus-visible { transform: none; }
}
html.reduce .mz-mega, html.reduce .mz-mega-in > *, html.reduce .mz-mini { transition: none !important; }

/* ————— 08 Comparison: Mezvic vs. a typical agency vs. a freelancer, as a scorecard. A real <table>: three columns on
   desktop with the Mezvic column lit; on phones each point becomes a small card with Mezvic's answer first ————— */
.cmp-t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; color: var(--v6-bone); }
.cmp-t th, .cmp-t td { text-align: left; vertical-align: top; font-weight: 400; }
.cmp-t thead th, .cmp-t thead td { padding: 0 1.5rem 1.6rem; }
.cmp-corner { width: 26%; }
.cmp-corner span { font: 500 10px/1.4 "Martian Mono", monospace; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(241, 237, 228, 0.4); }
.cmp-who { display: block; font-family: "Anybody", sans-serif; font-weight: 800; font-stretch: 112%; font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1; text-transform: uppercase; color: rgba(241, 237, 228, 0.8); }
.cmp-sub { display: block; margin-top: 0.7rem; font: 400 0.9rem/1.4 "Instrument Sans", sans-serif; color: rgba(241, 237, 228, 0.55); }
.cmp-model { display: inline-block; margin-top: 0.9rem; padding: 0.35rem 0.6rem; border: 1px solid rgba(241, 237, 228, 0.16); font: 500 9.5px/1.2 "Martian Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(241, 237, 228, 0.55); }

/* the Mezvic column: tinted, with an orange bar on top that draws in when the table appears */
.cmp-t .cmp-me { position: relative; background: rgba(255, 74, 0, 0.06); }
.cmp-t thead .cmp-me { padding-top: 1.6rem; }
.cmp-t thead .cmp-me::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--v6-signal); transform-origin: left; }
html.js .reveal .cmp-t thead .cmp-me::before { transform: scaleX(0); transition: transform 1s var(--v6-cinema) 0.35s; }
html.js .reveal.in .cmp-t thead .cmp-me::before { transform: scaleX(1); }
.cmp-t thead .cmp-me .cmp-who { color: var(--v6-signal); }
.cmp-t thead .cmp-me .cmp-sub { color: rgba(241, 237, 228, 0.85); }
.cmp-t thead .cmp-me .cmp-model { border-color: rgba(255, 74, 0, 0.55); color: var(--v6-signal); }

.cmp-t tbody th, .cmp-t tbody td { padding: 1.15rem 1.5rem; border-top: 1px solid rgba(241, 237, 228, 0.1); }
.cmp-t tbody th { font: 500 0.98rem/1.35 "Instrument Sans", sans-serif; color: var(--v6-bone); }
.cmp-t tbody th i { display: block; margin-bottom: 0.4rem; font: 500 10px/1 "Martian Mono", monospace; font-style: normal; letter-spacing: 0.2em; color: var(--v6-signal); }
.cmp-t tbody td { position: relative; padding-left: 3.1rem; font: 400 0.95rem/1.45 "Instrument Sans", sans-serif; color: rgba(241, 237, 228, 0.5); }
.cmp-t tbody td.cmp-me { color: var(--v6-bone); font-weight: 500; }
.cmp-t tbody tr { transition: background-color 0.3s ease; }
.cmp-t tbody tr:hover th, .cmp-t tbody tr:hover td:not(.cmp-me) { background: rgba(241, 237, 228, 0.025); }
.cmp-t tbody tr:hover td.cmp-me { background: rgba(255, 74, 0, 0.1); }

/* marks: filled orange tick, half ring for "partly", thin cross for "no" */
.cmp-m { position: absolute; left: 1.5rem; top: 1.2rem; width: 18px; height: 18px; border-radius: 50%; }
.cmp-yes { background: var(--v6-signal); }
.cmp-yes::after { content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 4px; height: 8px; border: solid var(--v6-void); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.cmp-part { border: 1.5px solid rgba(241, 237, 228, 0.45); background: linear-gradient(90deg, rgba(241, 237, 228, 0.45) 50%, transparent 50%); }
.cmp-no { border: 1.5px solid rgba(241, 237, 228, 0.2); }
.cmp-no::before, .cmp-no::after { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 50%; height: 1.5px; margin-top: -0.75px; background: rgba(241, 237, 228, 0.4); transform: rotate(45deg); }
.cmp-no::after { transform: rotate(-45deg); }

.cmp-t tfoot td { padding: 1.4rem 1.5rem 1.6rem; border-top: 1px solid rgba(241, 237, 228, 0.18); font: 500 10px/1.4 "Martian Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.4); }
.cmp-t tfoot td.cmp-me { color: var(--v6-signal); }
.cmp-t tfoot td.cmp-me > span { display: block; font-family: "Anybody", sans-serif; font-weight: 800; font-stretch: 112%; font-size: 1.6rem; letter-spacing: 0; line-height: 1; }
.cmp-cta {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1rem; padding: 0.85rem 1.1rem; background: var(--v6-signal); color: var(--v6-void);
  font: 600 10px/1 "Martian Mono", monospace; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background-color 0.3s ease;
}
.cmp-cta:hover { background: var(--v6-bone); }
.cmp-cta:focus-visible { outline: 2px solid var(--v6-bone); outline-offset: 3px; }

/* rows come in one after another */
html.js .reveal .cmp-t tbody tr { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--v6-ease), transform 0.6s var(--v6-ease); }
html.js .reveal.in .cmp-t tbody tr { opacity: 1; transform: none; }
html.js .reveal.in .cmp-t tbody tr:nth-child(2) { transition-delay: 0.06s; }
html.js .reveal.in .cmp-t tbody tr:nth-child(3) { transition-delay: 0.12s; }
html.js .reveal.in .cmp-t tbody tr:nth-child(4) { transition-delay: 0.18s; }
html.js .reveal.in .cmp-t tbody tr:nth-child(5) { transition-delay: 0.24s; }
html.js .reveal.in .cmp-t tbody tr:nth-child(6) { transition-delay: 0.3s; }
html.js .reveal.in .cmp-t tbody tr:nth-child(7) { transition-delay: 0.36s; }
html.js .reveal.in .cmp-t tbody tr:nth-child(8) { transition-delay: 0.42s; }

/* phones and small tablets: one card per point, Mezvic first, the other two underneath */
@media (max-width: 899px) {
  .cmp-t, .cmp-t tbody, .cmp-t tfoot, .cmp-t tr, .cmp-t th, .cmp-t td { display: block; width: auto; }
  .cmp-t thead { display: none; }
  .cmp-t tbody tr { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 0.75rem; border: 1px solid rgba(241, 237, 228, 0.12); }
  .cmp-t tbody th { order: 0; grid-column: 1 / -1; padding: 1rem 1.1rem 0.75rem; border-top: 0; }
  .cmp-t tbody td { padding: 0.75rem 1.1rem 0.8rem 2.9rem; border-top: 1px solid rgba(241, 237, 228, 0.08); }
  .cmp-t tbody td.cmp-me { order: 1; grid-column: 1 / -1; }
  .cmp-t tbody td:not(.cmp-me) { order: 2; padding: 0.7rem 0.9rem 0.8rem 2.35rem; font-size: 0.84rem; line-height: 1.35; }
  .cmp-t tbody td[data-who="Freelancer"] { border-left: 1px solid rgba(241, 237, 228, 0.08); }
  .cmp-t tbody td:not(.cmp-me) .cmp-m { left: 0.8rem; top: 0.75rem; width: 14px; height: 14px; }
  .cmp-t tbody td:not(.cmp-me) .cmp-no::before, .cmp-t tbody td:not(.cmp-me) .cmp-no::after { left: 2.5px; right: 2.5px; }
  .cmp-t tbody td::before { content: attr(data-who); display: block; margin-bottom: 0.25rem; font: 500 9px/1.3 "Martian Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(241, 237, 228, 0.4); }
  .cmp-t tbody td.cmp-me::before { color: var(--v6-signal); }
  .cmp-m { left: 1.1rem; top: 0.95rem; width: 16px; height: 16px; }
  .cmp-yes::after { left: 5.5px; top: 2.5px; }
  .cmp-t tfoot tr { display: block; }
  .cmp-t tfoot td { display: none; }
  .cmp-t tfoot td.cmp-me { display: block; padding: 1.25rem 1.1rem; border: 1px solid rgba(255, 74, 0, 0.35); }
  .cmp-t tfoot td.cmp-me > span::after { content: " points covered"; font: 500 10px/1 "Martian Mono", monospace; letter-spacing: 0.2em; color: rgba(241, 237, 228, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal .cmp-t tbody tr, html.js .reveal .cmp-t thead .cmp-me::before { transition: none; transform: none; opacity: 1; }
}