/* Zstore AI — Tactile Play */
/* metric-matched stand-in shown while Space Grotesk loads: same widths and line boxes, so the swap shifts nothing */
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'); size-adjust: 109.05%; ascent-override: 89.9%; descent-override: 26.6%; line-gap-override: 0%; }
:root {
  --chalk: #ECEDEF;
  --chalk-2: #F6F6F7;
  --ink: #111114;
  --ink-2: #1B1B20;
  --ink-3: #26262D;
  --graphite: #595C64;
  --orange: #FF5A1F;
  --orange-deep: #E0400C;
  --orange-soft: #FF8A57;
  --line: rgba(17, 17, 20, .12);
  --r-lg: clamp(28px, 3.2vw, 44px);
  --r-md: clamp(18px, 2vw, 28px);
  --pad: max(16px, clamp(16px, 3.2vw, 48px), env(safe-area-inset-left), env(safe-area-inset-right));
  --nav-h: 60px;
  --nav-top: max(12px, env(safe-area-inset-top));
  --ease: cubic-bezier(.2, .9, .1, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sans: 'Space Grotesk', 'Space Grotesk Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; background: var(--chalk); }
html.motion-off { scroll-behavior: auto; }
/* popup lock: the body is pinned at -scrollY (set inline by app.js), so nothing behind a popup can scroll — iOS included */
html.is-locked { overflow: hidden; }
html.is-locked body { position: fixed; left: 0; right: 0; width: 100%; }
.nowrap { white-space: nowrap; }
body { margin: 0; min-height: 100%; background: radial-gradient(120% 90% at 70% 20%, #F7F7F8 0%, var(--chalk) 55%, #E3E4E8 100%) fixed var(--chalk); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.45; letter-spacing: -.01em; overflow-x: clip; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
p { text-wrap: pretty; } /* no one-word last lines ("hear | it.") */
.svc-title, .studio-title, .faq-title, .contact-title, .d-name, .study-copy h2, .panel h3, .qa summary, .card-spec dd, .spec dd { text-wrap: balance; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 12px; }
.services :focus-visible, .menu-card :focus-visible { outline-color: var(--ink); } /* an orange ring is invisible on the orange slabs */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; }
.skip:focus { top: 16px; }
section[id], form[id], section[id] h2 { scroll-margin-top: calc(var(--nav-top) + var(--nav-h) + 16px); }
#top { scroll-margin-top: 0; }

/* ---------- brand: Z monogram + wordmark */
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); }
.zmark { position: relative; display: block; width: 30px; height: 30px; flex: none; }
.zmark svg { display: block; width: 100%; height: 100%; fill: var(--orange); filter: drop-shadow(0 1.5px 0 var(--orange-deep)); }
.wordmark { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 21px; letter-spacing: -.055em; line-height: 1; }
.wordmark b { display: inline-grid; place-items: center; height: 20px; padding: 0 5px 1px; border-radius: 6px; background: var(--ink); color: var(--chalk); font-size: 12px; font-weight: 600; letter-spacing: -.01em; box-shadow: inset 0 -2px 0 rgba(255,255,255,.14), 0 2px 0 rgba(17,17,20,.25); transform: translateY(-1px); }
.logo-light { color: #F3F3F5; }
.logo-light .wordmark b { background: var(--orange); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(120,20,0,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.logo-light .zmark svg { filter: none; }

/* ---------- letter roll */
.roll { display: inline-flex; overflow: hidden; vertical-align: top; line-height: 1.25; height: 1.25em; }
.roll .ch { display: inline-block; position: relative; white-space: pre; transition: transform .5s var(--ease); transition-delay: calc(var(--i) * 16ms); }
.roll .ch::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
@media (hover: hover) and (pointer: fine) {
  a:hover .roll .ch, button:hover .roll .ch, a.roll-host:hover .ch { transform: translateY(-100%); }
}
a:focus-visible .roll .ch, button:focus-visible .roll .ch { transform: translateY(-100%); }
.motion-off .roll .ch { transition: none; transform: none !important; }

/* ---------- buttons */
.btn { --bg: var(--ink); --fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--bg); color: var(--fg); font-weight: 500; font-size: 16px; letter-spacing: -.01em; white-space: nowrap; transition: transform .45s var(--spring), background-color .3s, box-shadow .3s; }
.btn:active { transform: scale(.96); }
.btn-ink { --bg: var(--ink); --fg: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -12px rgba(17,17,20,.55); }
.btn-orange { --bg: var(--orange); --fg: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(120,20,0,.18), 0 14px 30px -14px rgba(255,90,31,.85); }
.btn-ghost { --bg: rgba(255,255,255,.62); --fg: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) { .btn-orange:hover { --bg: #FF6A33; } .btn-ghost:hover { --bg: #fff; } }
.btn-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: -12px; border-radius: 50%; background: rgba(255,255,255,.16); font-weight: 500; transition: transform .45s var(--spring); }
.btn-orange .btn-ico { background: var(--ink); color: var(--orange); }
@media (hover: hover) { .btn:hover .btn-ico { transform: rotate(-45deg) scale(1.08); } .btn-ink:hover .btn-ico { transform: translateY(3px) scale(1.08); } }
.btn-xl { min-height: 64px; padding: 0 26px; font-size: 18px; }
.btn-xl .btn-ico { width: 40px; height: 40px; margin-right: -14px; font-size: 18px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; border-bottom: 2px solid currentColor; line-height: 1; padding: 14px 0 8px; }
.text-link b { transition: transform .4s var(--spring); }
@media (hover: hover) { .text-link:hover b { transform: translateX(4px); } }

/* ---------- nav: one capsule */
.nav { position: fixed; z-index: 50; top: var(--nav-top); left: var(--pad); right: var(--pad); pointer-events: none; }
.nav-bar { pointer-events: auto; position: relative; max-width: 1400px; margin: 0 auto; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 6px 0 16px; border-radius: 999px; background: rgba(246,246,247,.8); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 10px 34px -20px rgba(17,17,20,.5); transition: background-color .35s var(--ease), box-shadow .35s, color .35s; }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
.nav-links a { position: relative; padding: 0 14px; height: 44px; display: inline-flex; align-items: center; border-radius: 999px; font-weight: 500; font-size: 15px; transition: background-color .25s; }
.nav-links a[aria-current]::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--orange); }
@media (hover: hover) { .nav-links a:hover { background: rgba(17,17,20,.06); } }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-cta { min-height: 48px; padding: 0 20px; }
.motion-btn { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 16px 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; }
@media (hover: hover) { .motion-btn:hover { background: rgba(17,17,20,.06); } }
.motion-dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,90,31,.18); animation: pulse 2.2s var(--ease) infinite; }
.motion-off .motion-dot { background: transparent; box-shadow: inset 0 0 0 2px currentColor; animation: none; opacity: .7; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(255,90,31,0); } }
.menu-btn { display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); }
.menu-btn i { position: absolute; left: 15px; right: 15px; height: 2px; background: #fff; border-radius: 2px; }
.menu-btn i:nth-of-type(1) { top: 19px; } .menu-btn i:nth-of-type(2) { top: 27px; }
/* dark variant over ink sections */
.nav.is-dark .nav-bar { background: rgba(27,27,32,.78); color: #F3F3F5; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 34px -20px rgba(0,0,0,.8); }
.nav.is-dark .logo { color: #F3F3F5; }
.nav.is-dark .wordmark b { background: var(--orange); color: var(--ink); box-shadow: inset 0 -2px 0 rgba(120,20,0,.25); }
.nav.is-dark .zmark svg { filter: none; }
.nav.is-dark .menu-btn { background: var(--orange); }
.nav.is-dark .menu-btn i { background: var(--ink); }
@media (hover: hover) { .nav.is-dark .nav-links a:hover, .nav.is-dark .motion-btn:hover { background: rgba(255,255,255,.08); } }

/* ---------- canvas */
#gl { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; transition: opacity .3s; }
#gl.is-off { opacity: 0; }

/* ---------- hero */
.stack { position: relative; }
.hero { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; min-height: 640px; padding: calc(var(--nav-top) + var(--nav-h) + 18px) var(--pad) max(20px, env(safe-area-inset-bottom), clamp(20px, 3vw, 40px)); display: flex; overflow: hidden; }
@media (pointer: fine) { .has-gl .hero { cursor: crosshair; } }
.hero-inner { position: relative; flex: 1; min-width: 0; max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "meta stage" "intro stage" ". stage" "title title" "foot foot"; column-gap: clamp(20px, 3vw, 48px); pointer-events: none; transform-origin: 50% 100%; transform: scale(calc(1 - var(--hp, 0) * .08)); opacity: calc(1 - var(--hp, 0) * .9); }
.hero-inner a, .hero-inner button { pointer-events: auto; }
.hero-meta { grid-area: meta; align-self: start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 14px; font-weight: 500; color: var(--graphite); }
.hero-meta time { color: var(--ink); font-variant-numeric: tabular-nums; }
.live-dot { width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; background: #1FA45A; box-shadow: 0 0 0 4px rgba(31,164,90,.16); flex: none; }
.hero-intro { grid-area: intro; align-self: start; max-width: 42ch; text-wrap: pretty; margin-top: clamp(16px, 3vh, 36px); font-size: clamp(16px, 1.25vw, 19px); color: var(--graphite); line-height: 1.42; }
.hero-intro strong { display: block; color: var(--ink); font-weight: 500; }
.hero-stage { grid-area: stage; position: relative; min-height: 0; }
.hero-title { grid-area: title; font-weight: 700; font-size: clamp(64px, 9.3vw, 190px); line-height: .86; letter-spacing: -.064em; margin: clamp(10px, 2vh, 24px) 0 clamp(16px, 2.4vw, 32px) -.05em; }
.hero-title .w { display: inline-block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; vertical-align: top; }
.hero-title .w > span { display: inline-block; animation: rise 1.1s var(--ease) both; }
.hero-title .w:nth-of-type(2) > span { animation-delay: .06s; } .hero-title .w:nth-of-type(3) > span { animation-delay: .12s; }
.hero-title .w:nth-of-type(4) > span { animation-delay: .16s; } .hero-title .w:nth-of-type(5) > span { animation-delay: .2s; }
.br-m { display: none; }
@keyframes rise { from { transform: translateY(108%); } }
.motion-off .hero-title .w > span { animation: none; }
.hero-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-hint { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; color: var(--graphite); }
.hint-hand { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--ink); position: relative; flex: none; }
.hint-hand::after { content: ''; position: absolute; width: 8px; height: 8px; left: 11px; top: 11px; border-radius: 50%; background: var(--orange); animation: orbit 2.4s linear infinite; }
.motion-off .hint-hand::after { animation: none; transform: translateX(8px); }
@keyframes orbit { from { transform: rotate(0) translateX(8px); } to { transform: rotate(360deg) translateX(8px); } }
.hint-touch { display: none; }
@media (pointer: coarse) { .hint-desk { display: none; } .hint-touch { display: inline; } }
.no-gl .hero-hint, .gl-pending .hero-hint, .motion-off .hero-hint { visibility: hidden; }

/* static Z: holds the pieces' place while they compile, and stays for good when WebGL is unavailable */
.fallback-z { display: none; position: absolute; left: 50%; top: 50%; width: min(70%, 62vh, 420px); width: min(70%, 62svh, 420px); aspect-ratio: 1; max-height: 94%; transform: translate(-50%, -50%) rotate(-6deg); pointer-events: none; } /* max-height: a squeezed stage (320px phones) shrinks the glyph instead of letting it sit on the headline; the SVG keeps its ratio */
.no-gl .fallback-z, .gl-pending .fallback-z, html:not(.js) .fallback-z { display: block; }
.has-gl .fallback-z { display: block; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s; }
.fallback-z svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fz-glyph { fill: var(--orange); filter: drop-shadow(0 6px 0 var(--orange-deep)) drop-shadow(20px 34px 30px rgba(120,40,10,.28)); }
.fz-inline { color: var(--ink); opacity: .9; }
/* contact: the static Z is cut into its three pieces, which click into place as the brief fills up */
.fallback-contact { width: min(60%, 300px); }
.fz-ghost { fill: none; stroke: rgba(17,17,20,.3); stroke-width: .45; stroke-dasharray: 1.3 1.1; }
.fz-pieces { filter: drop-shadow(0 5px 0 var(--orange-deep)) drop-shadow(16px 26px 22px rgba(120,40,10,.24)); transition: filter .6s; }
.fzp { fill: var(--orange); stroke: var(--chalk); stroke-width: .8; paint-order: stroke; transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; transition: transform .8s var(--spring), opacity .35s; }
.fzp-bot { transform: translate(-22%, 70%) rotate(-12deg); }
.fzp-diag { transform: translate(30%, 30%) rotate(16deg); }
.fzp-top { transform: translate(-12%, -70%) rotate(9deg); }
.stage:is([data-level="1"], [data-level="2"], [data-level="3"], [data-level="4"]) .fzp-bot,
.stage:is([data-level="2"], [data-level="3"], [data-level="4"]) .fzp-diag,
.stage:is([data-level="3"], [data-level="4"]) .fzp-top { transform: none; opacity: 1; }
.stage[data-level="4"] .fz-pieces { filter: drop-shadow(0 5px 0 var(--orange-deep)) drop-shadow(0 0 30px rgba(255,90,31,.55)); }
.motion-off .fzp { transition: opacity .2s; }
/* no JavaScript: both stages show the full static Z, and controls that need script stay hidden */
html:not(.js) .fzp { opacity: 1; transform: none; }
html:not(.js) .stage-btn, html:not(.js) .menu-btn, html:not(.js) .motion-btn, html:not(.js) [data-clock] { display: none; }
html:not(.js) .hero-hint { visibility: hidden; }

/* ---------- work */
.work { position: relative; z-index: 2; background: var(--ink); color: #F3F3F5; border-radius: var(--r-lg); padding: clamp(72px, 10vw, 150px) var(--pad) clamp(40px, 6vw, 90px); box-shadow: 0 -30px 80px -40px rgba(17,17,20,.5); }
.work-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px 48px; align-items: end; max-width: 1400px; margin: 0 auto clamp(40px, 6vw, 90px); }
.work-title { font-size: clamp(52px, 8.6vw, 136px); line-height: .86; letter-spacing: -.058em; font-weight: 600; }
.work-title span { display: block; }
/* the 136px cap is what fits "Three worlds." in the head column; nowrap holds the two-line break at ultra-wide */
@media (min-width: 1500px) { .work-title span { white-space: nowrap; } }
.work-title .outline { color: transparent; -webkit-text-stroke: max(1.5px, .018em) #F3F3F5; }
.work-lede { max-width: 36ch; font-size: clamp(17px, 1.35vw, 20px); color: rgba(243,243,245,.7); justify-self: end; }
.deck { display: grid; gap: clamp(18px, 3vw, 40px); max-width: 1400px; margin: 0 auto; }
/* --ch (card height, set by app.js): a card taller than the room below its sticky top sticks by its bottom edge
   instead, so its copy and button are always fully revealed before the next card slides over it */
.card { --stick: calc(var(--nav-top) + var(--nav-h) + 20px + var(--n, 0) * 14px); position: sticky; top: min(var(--stick), calc(100svh - var(--ch, 0px) - 12px)); height: min(72vh, 660px); min-height: 500px; }
.card:nth-child(2) { --n: 1; } .card:nth-child(3) { --n: 2; }
.card-slab { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); padding: clamp(12px, 1.2vw, 18px); border-radius: var(--r-lg); background: var(--tint); color: var(--tint-ink); transform-origin: 50% 0; transform: scale(calc(1 - var(--cover, 0) * .06)); filter: brightness(calc(1 - var(--cover, 0) * .35)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.06), 0 40px 80px -40px rgba(0,0,0,.6); }
.card-media { position: relative; border-radius: var(--r-md); perspective: 1200px; min-height: 0; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .card-media { cursor: none; } }
.shot { position: absolute; inset: 0; border-radius: var(--r-md); overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .8s var(--ease); background: #000; box-shadow: 0 30px 50px -30px rgba(0,0,0,.55); }
.shot img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08) translate(var(--mx, 0px), var(--my, 0px)); transition: transform .9s var(--ease); }
.glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 20%), rgba(255,255,255,.28), transparent 60%); opacity: var(--go, 0); transition: opacity .4s; mix-blend-mode: soft-light; }
.card-info { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: clamp(10px, 1.4vw, 22px) clamp(6px, 1.2vw, 18px) clamp(6px, 1vw, 12px) 0; min-width: 0; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.idx { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.idx em { font-style: normal; opacity: .78; }
.sticker { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: 13px; font-weight: 600; letter-spacing: -.005em; transform: rotate(-4deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 14px -6px rgba(180,50,0,.6); white-space: nowrap; }
.card-kind { font-size: 14px; font-weight: 500; opacity: .7; margin-bottom: 10px; }
.card-name { font-size: clamp(44px, 5.2vw, 84px); font-weight: 600; letter-spacing: -.06em; line-height: .88; }
.card-line { margin-top: 16px; max-width: 32ch; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.38; opacity: .82; }
.card-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--tint-ink) 18%, transparent); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { min-height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint-ink) 24%, transparent); font-size: 13px; font-weight: 500; }
.btn-card { --bg: var(--tint-ink); --fg: var(--tint); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px -14px rgba(0,0,0,.5); }
.btn-card .btn-ico { background: var(--orange); color: var(--ink); }
.work-note { margin: clamp(28px, 4vw, 48px) auto 0; max-width: 60ch; text-align: center; font-size: 14px; color: rgba(243,243,245,.62); }

/* concept spec strip: palette + two design facts, fills the info column with real study details */
.card-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 460px; margin-top: clamp(18px, 2.4vw, 34px); border-top: 1.5px solid color-mix(in srgb, var(--tint-ink) 70%, transparent); }
.card-spec div { padding: 10px 10px 0 0; min-width: 0; }
.card-spec div + div { padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--tint-ink) 16%, transparent); }
.card-spec dt { font-family: var(--mono); font-size: 13px; letter-spacing: -.02em; opacity: .8; }
.card-spec dd { margin-top: 6px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.swatches { display: flex; padding-left: 1px; }
.swatches i { width: 22px; height: 22px; margin-right: -6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--tint), inset 0 -2px 0 rgba(0,0,0,.14); }

/* Atelier shot */
.atelier-ui { position: absolute; inset: 0; color: #fff; pointer-events: none; background: linear-gradient(90deg, rgba(40,28,14,.42), transparent 55%); }
.a-logo { position: absolute; left: 6%; top: 7%; font-family: 'Fraunces', Georgia, serif; font-size: clamp(18px, 1.8vw, 28px); letter-spacing: -.02em; }
.a-nav { position: absolute; right: 6%; top: 8%; font-size: 12px; opacity: .9; }
.a-head { position: absolute; left: 6%; bottom: 9%; font-family: 'Fraunces', Georgia, serif; font-size: clamp(28px, 3.4vw, 60px); line-height: .98; letter-spacing: -.02em; }
/* Lume shot */
.shot-lume { display: grid; grid-template-columns: 1fr 1fr; background: #EEF0E6; }
.shot-lume img { transform: scale(1.02) translate(var(--mx, 0px), var(--my, 0px)); }
.lume-page { position: relative; padding: 9% 8%; color: #26301F; display: flex; flex-direction: column; }
.l-logo { font-family: 'Fraunces', Georgia, serif; font-size: clamp(20px, 2vw, 32px); }
.l-head { margin-top: auto; font-family: 'Fraunces', Georgia, serif; font-size: clamp(24px, 2.8vw, 52px); line-height: 1; letter-spacing: -.02em; }
.l-btn { margin-top: 8%; align-self: flex-start; font-size: 12px; padding: 9px 14px; border-radius: 999px; background: #26301F; color: #EEF0E6; }
/* Meridian shot */
.shot-meridian { background: linear-gradient(160deg, #A9ADF0, #7C80E4); display: grid; place-items: center; }
.m-app { position: relative; width: 84%; height: 74%; display: grid; grid-template-columns: 52px 1fr; background: #FBFBFE; border-radius: 18px; box-shadow: 0 40px 60px -30px rgba(25,26,70,.6); transform: rotate(-3deg) translate(var(--mx, 0px), var(--my, 0px)); transition: transform .9s var(--ease); color: #191A3A; }
.m-side { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0; border-right: 1px solid #ECECF6; }
.m-side i { width: 18px; height: 18px; border-radius: 6px; background: #E6E7F6; }
.m-side i.on { background: #5B5FE0; }
.m-logo { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#5B5FE0 0 50%, #191A3A 0); margin-bottom: 8px; }
.m-main { padding: 5% 6%; display: flex; flex-direction: column; min-width: 0; }
.m-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.m-hi { font-weight: 600; }
.m-chip { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 999px; background: #EEEFFC; color: #4B4FC8; white-space: nowrap; }
.m-bal { margin-top: 6%; display: flex; flex-direction: column; }
.m-bal small { font-size: 11px; color: #6E6F8C; }
.m-bal strong { font-size: clamp(24px, 3vw, 52px); letter-spacing: -.05em; line-height: 1.05; font-weight: 600; }
.m-bal strong span { font-size: .45em; color: #6E6F8C; }
.m-bal em { font-style: normal; font-size: 11px; color: #2F7A4B; }
.m-chart { flex: 1; min-height: 40px; margin-top: 6%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 7%; align-items: end; }
.m-chart i { height: var(--h); border-radius: 6px 6px 3px 3px; background: #DADCF8; }
.m-chart i.on { background: #5B5FE0; }
.m-months { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7%; margin-top: 6px; font-size: 9px; color: #6E6F8C; text-align: center; }
.m-card { position: absolute; right: -5%; top: 14%; width: 30%; aspect-ratio: 1.58; border-radius: 12px; background: linear-gradient(135deg, #191A3A, #3A3D9A); color: #fff; font-family: var(--mono); font-size: 10px; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 12px; transform: rotate(7deg); box-shadow: 0 20px 30px -14px rgba(25,26,70,.7); }
.m-card-logo { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#A9ADF0 0 50%, #fff 0); }

/* cursor sticker (fine pointers only) */
.cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; display: none; }
@media (hover: hover) and (pointer: fine) { .cursor { display: block; } }
.cursor-blob { position: absolute; left: -54px; top: -54px; width: 108px; height: 108px; border-radius: 50%; background: var(--orange); color: var(--ink); display: grid; place-items: center; transform: translate(var(--cx, -200px), var(--cy, -200px)) rotate(var(--ca, 0rad)) scale(var(--sx, 0), var(--sy, 0)); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -6px 12px rgba(150,30,0,.25); }
.cursor-label { font-size: 14px; font-weight: 600; line-height: 1.05; text-align: center; transform: rotate(calc(var(--ca, 0rad) * -1)); }

/* ---------- services: an orange slab of drawers */
.services { position: relative; z-index: 2; margin-top: -40px; padding: clamp(96px, 11vw, 170px) var(--pad) clamp(56px, 8vw, 120px); border-radius: var(--r-lg); background: radial-gradient(90% 70% at 20% 0%, #FF7440 0%, var(--orange) 55%, #F4501A 100%); color: var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 -30px 60px -40px rgba(120,30,0,.5); }
.svc-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 110px); align-items: start; max-width: 1400px; margin: 0 auto; }
.svc-head { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 40px); }
.svc-title { font-size: clamp(44px, 5.4vw, 98px); line-height: .92; letter-spacing: -.058em; font-weight: 600; }
.keycap { display: inline-block; padding: 0 .16em .06em; margin: .04em 0; border-radius: .16em; background: var(--ink); color: var(--chalk); box-shadow: inset 0 -.06em 0 rgba(255,255,255,.14), 0 .07em 0 #6d1f02; transform: rotate(-2deg); white-space: nowrap; }
.svc-lede { margin-top: clamp(20px, 2.4vw, 32px); max-width: 34ch; font-size: clamp(17px, 1.3vw, 20px); color: rgba(17,17,20,.8); }
.drawers { display: grid; gap: 10px; }
.drawer { border-radius: 26px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(17,17,20,.16); transition: background-color .4s, box-shadow .4s, transform .5s var(--spring); }
.drawer[open] { background: var(--chalk-2); box-shadow: inset 0 1px 0 #fff, 0 26px 50px -30px rgba(90,20,0,.7); transform: translateX(-8px); }
.drawer summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num name knob" "num sum knob"; align-items: center; column-gap: clamp(14px, 2vw, 28px); min-height: 88px; padding: 18px clamp(16px, 2vw, 28px); cursor: pointer; border-radius: 26px; }
.drawer summary::-webkit-details-marker { display: none; }
.d-num { grid-area: num; align-self: start; padding-top: 10px; font-family: var(--mono); font-size: 13px; font-weight: 500; }
.d-name { grid-area: name; font-size: clamp(28px, 3.1vw, 54px); font-weight: 600; letter-spacing: -.05em; line-height: .98; }
.d-sum { grid-area: sum; margin-top: 6px; font-size: 14px; font-weight: 500; color: rgba(17,17,20,.72); }
.drawer[open] .d-sum { color: var(--graphite); }
.d-knob { grid-area: knob; position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 -3px 0 rgba(255,255,255,.12), 0 6px 14px -8px rgba(0,0,0,.6); transition: transform .5s var(--spring), background-color .3s; }
.d-knob::before, .d-knob::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2.5px; margin: -1.25px 0 0 -8px; border-radius: 2px; background: var(--orange); transition: transform .5s var(--spring); }
.d-knob::after { transform: rotate(90deg); }
.drawer[open] .d-knob { transform: rotate(180deg); background: var(--orange); }
.drawer[open] .d-knob::before, .drawer[open] .d-knob::after { background: var(--ink); }
.drawer[open] .d-knob::after { transform: rotate(0deg); }
.d-body { padding: 0 clamp(16px, 2vw, 28px) clamp(20px, 2.2vw, 30px) calc(clamp(16px, 2vw, 28px) + clamp(14px, 2vw, 28px) + 2ch); display: grid; gap: 16px; overflow: hidden; }
.d-body p { max-width: 52ch; color: var(--graphite); font-size: clamp(16px, 1.15vw, 18px); }
.d-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.d-tags li { min-height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; font-weight: 500; }
.d-link { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; }
.d-link b { color: var(--orange); }

/* ---------- studio */
.studio { position: relative; z-index: 2; background: var(--chalk); padding: clamp(90px, 12vw, 180px) var(--pad) clamp(70px, 9vw, 140px); }
.studio-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 110px); align-items: center; max-width: 1400px; margin: 0 auto; }
.portrait { position: relative; max-width: 500px; width: 100%; justify-self: center; }
.portrait-frame { aspect-ratio: 1607 / 1975; border-radius: 999px 999px var(--r-lg) var(--r-lg); overflow: hidden; background: #d8d9dc; box-shadow: 0 50px 80px -50px rgba(17,17,20,.55), inset 0 0 0 1px rgba(255,255,255,.4); transform: rotate(var(--prot, -2deg)); transition: transform .8s var(--ease); }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) { .portrait:hover .portrait-frame { --prot: 0deg; } }
.portrait-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 18px; padding: 0 8px; font-size: 14px; color: var(--graphite); }
.portrait-cap strong { color: var(--ink); font-weight: 600; font-size: 16px; white-space: nowrap; }
.portrait-cap span { text-align: right; text-wrap: balance; }
.drag-sticker { position: absolute; left: -4%; bottom: 20%; z-index: 2; display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 22px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.02em; transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(-8deg + var(--dr, 0deg))); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(150,30,0,.2), 0 18px 30px -14px rgba(180,50,0,.6); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.drag-sticker:active { cursor: grabbing; }
.drag-sticker b { font-weight: 400; }
.studio-title { font-size: clamp(44px, 5.6vw, 90px); line-height: .92; letter-spacing: -.056em; font-weight: 600; max-width: 13ch; }
.tape { position: relative; display: inline-block; z-index: 0; white-space: nowrap; }
.tape::before { content: ''; position: absolute; z-index: -1; left: -.08em; right: -.1em; top: .3em; bottom: -.02em; border-radius: .08em; background: var(--orange); transform: rotate(-1.6deg); box-shadow: inset 0 -.04em 0 rgba(120,20,0,.2); }
.studio-body { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; margin-top: clamp(28px, 3.5vw, 48px); color: var(--graphite); font-size: clamp(16px, 1.2vw, 18px); max-width: 780px; }
.studio-lead { grid-column: 1 / -1; color: var(--ink); font-size: clamp(19px, 1.6vw, 24px); line-height: 1.32; letter-spacing: -.02em; max-width: 34ch; }
.spec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 3.5vw, 48px); border-top: 2px solid var(--ink); max-width: 780px; }
.spec div { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.spec div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.spec dt { font-family: var(--mono); font-size: 13px; letter-spacing: -.02em; color: var(--graphite); }
.spec dd { margin-top: 4px; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.studio-copy .text-link { margin-top: clamp(22px, 3vw, 36px); }

/* ---------- process */
.process { position: relative; z-index: 2; margin: 0 10px; padding: clamp(80px, 10vw, 150px) var(--pad) clamp(56px, 7vw, 110px); border-radius: var(--r-lg); background: var(--ink); color: #F3F3F5; overflow: hidden; }
.process-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px 48px; align-items: end; max-width: 1400px; margin: 0 auto clamp(36px, 5vw, 64px); }
.process-title { font-size: clamp(50px, 7.6vw, 140px); line-height: .88; letter-spacing: -.058em; font-weight: 600; }
.process-title .dim { display: block; color: #7A7C86; }
.process-lede { max-width: 34ch; justify-self: end; color: rgba(243,243,245,.7); font-size: clamp(17px, 1.3vw, 20px); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 1400px; margin: 0 auto; padding: 6px; border-radius: 999px; background: #1E1E24; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.steps button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 12px; border-radius: 999px; font-weight: 500; font-size: clamp(15px, 1.3vw, 19px); color: rgba(243,243,245,.72); transition: background-color .35s, color .35s, transform .45s var(--spring); }
.steps .s-num { font-family: var(--mono); font-size: 13px; opacity: .75; }
@media (hover: hover) { .steps button:hover { color: #fff; background: rgba(255,255,255,.06); } }
.steps button[aria-selected="true"] { background: var(--orange); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(120,20,0,.2); }
.steps button[aria-selected="true"] .s-num { opacity: 1; } /* 13px on orange needs full ink for contrast */
.steps button:active { transform: scale(.97); }
.step-body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 90px); align-items: center; max-width: 1400px; margin: clamp(28px, 4vw, 56px) auto 0; }
.panel { max-width: 560px; }
.panel:focus-visible { outline-offset: 8px; }
.panel-kicker { font-size: 15px; color: var(--orange-soft); font-weight: 500; }
.panel h3 { margin-top: 10px; font-size: clamp(34px, 3.8vw, 64px); line-height: .95; letter-spacing: -.05em; font-weight: 600; }
.panel > p:not(.panel-kicker) { margin-top: 18px; color: rgba(243,243,245,.72); font-size: clamp(16px, 1.2vw, 19px); max-width: 44ch; }
.panel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.panel-tags li { min-height: 32px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-size: 13px; font-weight: 500; }
.panel.is-in > * { animation: panelIn .6s var(--ease) both; }
.panel.is-in > *:nth-child(2) { animation-delay: .04s; } .panel.is-in > *:nth-child(3) { animation-delay: .08s; } .panel.is-in > *:nth-child(4) { animation-delay: .12s; }
@keyframes panelIn { from { opacity: 0; transform: translateY(14px); } }
.motion-off .panel.is-in > * { animation: none; }
/* the kit: a CSS Z that gains one piece per step */
.kit { position: relative; width: min(100%, 420px); aspect-ratio: 1; justify-self: center; --u: calc(min(100%, 420px) / 48); }
.kit::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -2%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent); filter: blur(6px); }
/* the empty slots: a dashed ghost of the whole monogram, so the missing pieces read as "still to come" */
.kit-ghost { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kit-ghost path { fill: rgba(255,255,255,.025); stroke: rgba(243,243,245,.26); stroke-width: .35; stroke-dasharray: 1.2 1; stroke-linejoin: round; }
.kit[data-kit="3"] .kit-ghost { opacity: 0; transition: opacity .6s; }
.kit-piece { position: absolute; border-radius: 9% / 26%; background: linear-gradient(170deg, #FF9D73 0%, var(--orange) 34%, #E8480F 78%, #C23A0C 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 0 rgba(120,20,0,.28), 0 24px 30px -18px rgba(0,0,0,.8); transition: transform .9s var(--spring), opacity .5s; }
.kit-piece::after { content: ''; position: absolute; left: 12%; right: 12%; top: 50%; height: 8%; min-height: 3px; margin-top: -1.5%; border-radius: 99px; background: var(--ink); box-shadow: inset 0 1px 1px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.3); }
.kp-top { left: 16.7%; top: 16.7%; width: 66.6%; height: 18.75%; }
.kp-bot { left: 16.7%; top: 64.6%; width: 66.6%; height: 18.75%; }
.kp-diag { left: 13%; top: 41%; width: 74%; height: 18%; border-radius: 8% / 30%; background: linear-gradient(170deg, #FF8A57 0%, #F24E14 40%, #D8420C 100%); transform: rotate(-36.4deg); clip-path: polygon(11% 0, 100% 0, 89% 100%, 0 100%); }
.kit[data-kit="0"] .kp-diag { transform: translate(40%, 150%) rotate(8deg); opacity: 0; }
.kit[data-kit="0"] .kp-bot { transform: translate(-30%, 60%) rotate(-12deg); opacity: 0; }
.kit[data-kit="1"] .kp-bot { transform: translate(-30%, 60%) rotate(-12deg); opacity: 0; }
.kit[data-kit="0"] .kp-top { transform: rotate(-3deg); } /* first piece already in its slot; the ghost shows the two to come */
.kit-live { position: absolute; right: 2%; top: 4%; padding: 8px 14px; border-radius: 999px; background: #1FA45A; color: #06140B; font-size: 14px; font-weight: 600; transform: rotate(8deg) scale(0); transition: transform .6s var(--spring); }
.kit[data-kit="3"] .kit-live { transform: rotate(8deg) scale(1); }
.kit[data-kit="3"] .kit-piece { box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 0 rgba(120,20,0,.28), 0 24px 30px -18px rgba(0,0,0,.8), 0 0 60px -10px rgba(255,90,31,.55); }
.motion-off .kit-piece, .motion-off .kit-live { transition: none; }

/* ---------- FAQ */
.faq { position: relative; z-index: 2; background: var(--chalk); padding: clamp(90px, 11vw, 170px) var(--pad) clamp(60px, 8vw, 120px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; max-width: 1400px; margin: 0 auto; }
.faq-intro { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 40px); }
.faq-title { position: relative; font-size: clamp(50px, 6.8vw, 124px); line-height: .88; letter-spacing: -.06em; font-weight: 700; max-width: 7ch; }
.faq-head { position: relative; display: inline-block; }
.bubble { position: absolute; right: -4%; bottom: 2px; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px 999px 999px 6px; background: var(--orange); color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1; white-space: nowrap; transform: rotate(6deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 20px -10px rgba(180,50,0,.6); }
.faq-intro p { margin-top: clamp(22px, 2.6vw, 34px); color: var(--graphite); font-size: 18px; }
/* below 1366px the heading fills its column, so the sticker sits under it instead of on "asked." */
@media (max-width: 1365px) { .bubble { position: relative; right: auto; bottom: auto; display: flex; width: fit-content; margin-top: 18px; transform: rotate(-3deg); } }
.faq-list { display: grid; gap: 10px; }
.qa { border-radius: 30px; background: var(--chalk-2); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(17,17,20,.06), 0 16px 34px -28px rgba(17,17,20,.5); transition: background-color .3s, box-shadow .4s; }
.qa[open] { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 26px 46px -30px rgba(17,17,20,.5); }
.qa summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; padding: 16px 16px 16px clamp(20px, 2vw, 28px); font-size: clamp(18px, 1.5vw, 23px); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; cursor: pointer; border-radius: 30px; }
.qa summary::-webkit-details-marker { display: none; }
.qa-bead { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #FFC2A6 0 8%, var(--orange) 42%, #C23A0C 100%); box-shadow: 0 6px 12px -6px rgba(180,50,0,.7); transition: transform .5s var(--spring); }
.qa-bead::before, .qa-bead::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--ink); transition: transform .5s var(--spring); }
.qa-bead::after { transform: rotate(90deg); }
.qa[open] .qa-bead { transform: rotate(180deg); }
.qa[open] .qa-bead::after { transform: rotate(0); }
.qa-body { overflow: hidden; }
.qa-body p { padding: 0 clamp(20px, 2vw, 28px) 24px; max-width: 60ch; color: var(--graphite); font-size: clamp(16px, 1.15vw, 18px); }

/* ---------- contact */
.contact { position: relative; z-index: 1; padding: clamp(80px, 10vw, 150px) var(--pad) clamp(60px, 8vw, 120px); }
.contact-head { max-width: 1400px; margin: 0 auto; }
.contact-title { font-size: clamp(50px, 8.4vw, 160px); line-height: .86; letter-spacing: -.062em; font-weight: 700; }
.contact-title span { display: block; }
.contact-title span + span { color: var(--orange-deep); } /* #FF5A1F is 2.66:1 on the chalk ground; deep orange reads the same and passes 3:1 */
.contact-lede { margin-top: clamp(18px, 2.2vw, 30px); max-width: 44ch; font-size: clamp(17px, 1.4vw, 21px); color: var(--graphite); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "direct stage" "form stage"; gap: 18px clamp(24px, 3.5vw, 56px); align-items: start; max-width: 1400px; margin: clamp(34px, 4.5vw, 64px) auto 0; }
.direct { grid-area: direct; display: grid; gap: 10px; }
.direct a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 64px; padding: 10px 12px 10px 22px; border-radius: 999px; background: rgba(255,255,255,.66); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .3s, transform .45s var(--spring); }
@media (hover: hover) { .direct a:hover { background: #fff; transform: translateX(4px); } }
.direct a:active { transform: scale(.98); }
.dl-k { font-family: var(--mono); font-size: 13px; letter-spacing: -.02em; color: var(--graphite); min-width: 8ch; }
.dl-v { font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.03em; overflow-wrap: anywhere; }
.direct b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 500; }
.direct-wa b { background: #1FA45A; color: #06140B; }
.expect { display: flex; align-items: center; gap: 6px; text-wrap: pretty; padding: 8px 4px 0; font-size: 15px; color: var(--graphite); }

.stage { grid-area: stage; position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 20px); height: min(78vh, 700px); min-height: 460px; border-radius: var(--r-lg); }
.tray-corner { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(17,17,20,.28); }
.tc-1 { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 14px; }
.tc-2 { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; border-top-right-radius: 14px; }
.tc-3 { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 14px; }
.tc-4 { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 14px; }
.stage-cap { position: absolute; left: 22px; top: 18px; right: 22px; font-size: 15px; color: var(--graphite); }
.stage-cap b { display: block; color: var(--ink); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.03em; }
.stage-btn { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 500; white-space: nowrap; transition: background-color .3s; }
.sb-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); }
.stage-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.stage-btn[aria-pressed="true"] .sb-dot { background: #1FA45A; }

.brief { grid-area: form; padding: clamp(20px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--chalk-2); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(17,17,20,.06), 0 40px 70px -50px rgba(17,17,20,.5); }
.brief:focus { outline: none; }
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.brief-head h3 { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.045em; font-weight: 600; line-height: 1; }
.brief-progress { display: flex; gap: 5px; }
.brief-progress li { width: 22px; height: 8px; border-radius: 99px; background: rgba(17,17,20,.12); transition: background-color .35s, transform .45s var(--spring); }
.brief-progress li.on { background: var(--orange); transform: scaleY(1.25); }
.chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 500; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 2px 0 rgba(17,17,20,.06); font-size: 15px; font-weight: 500; transition: background-color .25s, color .25s, transform .4s var(--spring), box-shadow .25s; }
@media (hover: hover) { .chip:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 -2px 0 rgba(255,255,255,.12); transform: translateY(1px); }
.chip[aria-pressed="true"]::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--orange); vertical-align: 1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; margin-top: 16px; min-width: 0; }
.field label { font-size: 15px; font-weight: 500; }
.field label span { color: var(--orange-deep); }
.field input, .field textarea { width: 100%; min-height: 54px; padding: 14px 18px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 4px rgba(17,17,20,.04); font: inherit; font-size: 17px; letter-spacing: -.01em; color: var(--ink); transition: box-shadow .25s; -webkit-appearance: none; appearance: none; }
.field textarea { resize: vertical; min-height: 132px; line-height: 1.4; }
.field input::placeholder, .field textarea::placeholder { color: #7B7E86; }
.field input:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 5px rgba(255,90,31,.22); }
.field.is-invalid input, .field.is-invalid textarea { box-shadow: inset 0 0 0 2px #C4320A; }
.field.is-valid input, .field.is-valid textarea { box-shadow: inset 0 0 0 1px rgba(31,164,90,.6); }
.field-hint { display: flex; justify-content: space-between; font-size: 13px; color: var(--graphite); }
.field-err { font-size: 14px; color: #B02D08; font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 20px; margin-top: 22px; }
.form-note { font-size: 14px; color: var(--graphite); }
.form-note a { display: inline-block; padding: 13px 0; margin: -13px 0; text-decoration: underline; text-underline-offset: 3px; }
.form-status { margin-top: 16px; padding: 14px 18px; border-radius: 18px; background: #E5F4EA; color: #134D2A; font-size: 15px; font-weight: 500; }
.form-status.is-error { background: #FBE4DB; color: #8A2305; }
.submit[disabled] { opacity: .7; }

/* ---------- sent toast: an ink capsule with a green check that springs up from the bottom edge */
.toast { position: fixed; left: 50%; bottom: max(20px, calc(env(safe-area-inset-bottom) + 14px)); z-index: 80; display: flex; align-items: center; gap: 14px; width: max-content; max-width: min(92vw, 460px); padding: 12px 24px 12px 12px; border-radius: 999px; background: var(--ink-2); color: #F3F3F5; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 26px 50px -22px rgba(17,17,20,.85); opacity: 0; transform: translateX(-50%) translateY(calc(100% + 28px)); pointer-events: none; transition: transform .6s var(--spring), opacity .3s; }
.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-bead { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #1FA45A; color: #06140B; display: grid; place-items: center; box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,60,25,.3); }
.toast-bead svg { width: 22px; height: 22px; }
.toast-copy { display: grid; gap: 2px; min-width: 0; }
.toast-copy b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.toast-copy > span { font-size: 13.5px; color: rgba(243,243,245,.72); line-height: 1.3; }
.motion-off .toast { transition: opacity .25s; }

/* ---------- footer */
.footer { position: relative; z-index: 2; margin: 0 10px max(10px, calc(env(safe-area-inset-bottom) + 6px)); padding: clamp(36px, 5vw, 64px) var(--pad) 22px; border-radius: var(--r-lg); background: var(--ink); color: #F3F3F5; }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; max-width: 1400px; margin: 0 auto; }
.footer .logo .zmark { width: 40px; height: 40px; }
.footer .logo .wordmark { font-size: 28px; }
.footer .logo .wordmark b { height: 26px; font-size: 15px; padding: 0 7px 1px; border-radius: 7px; }
.footer-line { color: rgba(243,243,245,.66); font-size: 15px; }
.back-top { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font-weight: 500; }
.back-top b { color: var(--orange); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; max-width: 1400px; margin: clamp(36px, 5vw, 70px) auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: rgba(243,243,245,.66); }
.footer-legal { display: flex; gap: 4px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: #F3F3F5; }
/* Zstore AI credit — preserved exactly: full pill, light chip, no shadow */
.zstore-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.2); box-shadow: none; }
.zstore-badge img { display: block; width: auto; height: 30px; }
.zstore-badge:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* ---------- legal pages (privacy-policy.html, terms.html) */
.legal { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 110px); align-items: start; max-width: 1400px; margin: 0 auto; padding: calc(var(--nav-top) + var(--nav-h) + clamp(44px, 7vw, 110px)) var(--pad) clamp(60px, 8vw, 120px); }
.legal-head { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 40px); }
.legal-kicker { font-family: var(--mono); font-size: 13px; color: var(--graphite); }
.legal-title { margin-top: 14px; font-size: clamp(50px, 6.6vw, 120px); line-height: .9; letter-spacing: -.06em; font-weight: 700; }
.legal-updated { display: inline-flex; align-items: center; min-height: 36px; margin-top: 24px; padding: 0 14px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: 14px; font-weight: 600; transform: rotate(-3deg); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 20px -10px rgba(180,50,0,.6); }
.legal-intro { margin-top: 22px; max-width: 34ch; color: var(--graphite); font-size: 18px; }
.legal-list { display: grid; gap: 10px; }
.legal-sec { padding: clamp(20px, 2.4vw, 32px); border-radius: 30px; background: var(--chalk-2); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(17,17,20,.06), 0 16px 34px -28px rgba(17,17,20,.5); }
.legal-sec h2 { display: flex; align-items: baseline; gap: 12px; font-size: clamp(24px, 2.2vw, 34px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.legal-sec h2 span { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--orange-deep); }
.legal-sec p, .legal-sec li { max-width: 62ch; color: var(--graphite); font-size: clamp(16px, 1.15vw, 18px); }
.legal-sec p, .legal-sec ul { margin-top: 12px; }
.legal-sec ul { display: grid; gap: 8px; }
.legal-sec li { position: relative; padding-left: 22px; }
.legal-sec li::before { content: ''; position: absolute; left: 2px; top: .56em; width: 8px; height: 8px; border-radius: 2px; background: var(--orange); transform: rotate(45deg); }
.legal-sec strong { color: var(--ink); font-weight: 600; }
.legal-sec a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.nav-home { min-height: 48px; padding: 0 20px 0 12px; }
.nav-home .btn-ico { margin: 0 -2px 0 0; }
.footer-legal a[aria-current] { color: var(--orange); }
@media (max-width: 1023px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal-head { position: static; } }
@media (max-width: 767px) { .legal-title { font-size: clamp(46px, 14.4vw, 76px); } .legal-sec { padding: 20px 18px 22px; border-radius: 24px; } .legal-intro { font-size: 16px; } }
@media (max-width: 400px) { .nh-long { display: none; } }

/* ---------- popups (native dialog) */
dialog { color: var(--ink); }
dialog::backdrop { background: rgba(17,17,20,.55); }
.icon-btn { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 30px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); transition: transform .45s var(--spring), background-color .3s; }
.icon-btn span { transform: translateY(-2px); }
.icon-btn:active { transform: scale(.92); }
.icon-btn-ink { background: var(--ink); box-shadow: none; }

.menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border: 0; background: transparent; overflow: hidden; }
.menu::backdrop { background: rgba(17,17,20,.3); }
.menu-sheet { position: relative; height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 10px 10px 18px 18px; border-radius: 32px; background: var(--ink); color: #F3F3F5; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* scroll cue for short screens: a fade pinned to the bottom edge while more of the sheet is below */
.menu::after { content: ''; position: absolute; z-index: 2; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); height: 64px; border-radius: 0 0 32px 32px; background: linear-gradient(rgba(17,17,20,0), var(--ink) 80%); pointer-events: none; opacity: 0; transition: opacity .3s; }
.menu.has-more::after { opacity: 1; }
.menu[open] .menu-sheet { animation: sheetIn .55s var(--ease) both; }
@keyframes sheetIn { from { transform: translateY(-14px) scale(.97); opacity: 0; } }
.menu-top { flex: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; }
.menu-body { position: relative; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
.menu-links { position: relative; z-index: 1; display: flex; flex-direction: column; }
.menu-links a { display: flex; align-items: baseline; gap: 14px; width: fit-content; min-height: 48px; padding: 2px 0; font-size: min(16.4vw, 7.5svh, 96px); font-weight: 600; letter-spacing: -.055em; line-height: 1.02; }
/* tall screens: the three glazed pieces of the Z stand beside the links */
.menu-z { display: none; }
@media (min-width: 600px) and (min-height: 700px) {
  .menu-z { display: block; position: absolute; right: 2%; top: 50%; width: min(42%, 340px); aspect-ratio: 1; transform: translateY(-50%) rotate(-9deg); pointer-events: none; }
  .menu[open] .menu-z .kit-piece { animation: pieceDrop 1s var(--spring) both; }
  .menu[open] .menu-z .kp-diag { animation-delay: .1s; }
  .menu[open] .menu-z .kp-bot { animation-delay: .2s; }
  .motion-off .menu[open] .menu-z .kit-piece { animation: none; }
}
@keyframes pieceDrop { from { translate: 0 -70%; opacity: 0; } }
.menu-links a span { font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--orange); transform: translateY(-.2em); }
.menu[open] .menu-links a { animation: linkIn .6s var(--ease) both; }
.menu[open] .menu-links a:nth-child(2) { animation-delay: .03s; } .menu[open] .menu-links a:nth-child(3) { animation-delay: .06s; }
.menu[open] .menu-links a:nth-child(4) { animation-delay: .09s; } .menu[open] .menu-links a:nth-child(5) { animation-delay: .12s; } .menu[open] .menu-links a:nth-child(6) { animation-delay: .15s; }
@keyframes linkIn { from { transform: translateY(30%); opacity: 0; } }
.motion-off .menu[open] .menu-sheet, .motion-off .menu[open] .menu-links a { animation: none; }
.menu-studies { flex: none; }
.menu-studies p { font-size: 14px; color: rgba(243,243,245,.66); margin-bottom: 8px; }
.menu-studies div { display: flex; flex-wrap: wrap; gap: 6px; }
.menu-studies button { min-height: 44px; padding: 0 16px; border-radius: 999px; background: #26262D; font-weight: 500; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.menu-studies button::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--orange); transform: rotate(45deg); vertical-align: 1px; }
/* the orange slab: direct lines, same material as the services section */
.menu-card { flex: none; margin-right: 8px; padding: 4px 14px 4px 16px; border-radius: 24px; background: radial-gradient(120% 160% at 12% 0%, #FF7440 0%, var(--orange) 55%, #F4501A 100%); color: var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 18px 34px -20px rgba(255,90,31,.55); }
.menu-card a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k b" "v b"; align-items: center; column-gap: 12px; min-height: 58px; padding: 8px 0; }
.menu-card a + a { border-top: 1px solid rgba(17,17,20,.16); }
.mc-k { grid-area: k; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: -.02em; }
.mc-v { grid-area: v; font-size: 17px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; overflow-wrap: anywhere; }
.menu-card b { grid-area: b; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--orange); font-weight: 500; transition: transform .45s var(--spring); }
.menu-card a:active b { transform: scale(.9) rotate(-45deg); }
@media (min-width: 600px) {
  .menu-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; padding: 6px 18px; }
  .menu-card a + a { border-top: 0; border-left: 1px solid rgba(17,17,20,.16); padding-left: 20px; }
  .mc-v { font-size: 19px; }
}
.menu-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-right: 8px; font-size: 15px; color: rgba(243,243,245,.72); }
.menu-clock { display: inline-flex; align-items: center; gap: 4px; }
.menu-foot time { color: #F3F3F5; font-variant-numeric: tabular-nums; }
.motion-btn-menu { min-width: 44px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.menu .motion-label { display: inline; }

.study { --gap-t: max(12px, env(safe-area-inset-top)); --gap-b: max(12px, env(safe-area-inset-bottom)); --gap-l: max(12px, env(safe-area-inset-left)); --gap-r: max(12px, env(safe-area-inset-right));
  inset: var(--gap-t) var(--gap-r) var(--gap-b) var(--gap-l); width: min(1180px, calc(100vw - var(--gap-l) - var(--gap-r))); max-width: none; max-height: calc(100dvh - var(--gap-t) - var(--gap-b)); margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--chalk-2); overflow: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.study::backdrop { background: rgba(17,17,20,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.study[open] { animation: pop .7s var(--spring); }
.motion-off .study[open] { animation: none; }
@keyframes pop { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.study-sheet { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "visual bar" "visual copy"; }
.study-bar { grid-area: bar; position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 0 clamp(24px, 3.5vw, 48px); }
.study-visual { grid-area: visual; position: relative; min-height: 560px; background: var(--tint, #ddd); }
.study-visual .shot { position: absolute; inset: 18px; }
.study-copy { grid-area: copy; padding: 22px clamp(24px, 3.5vw, 48px) clamp(24px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.study-kind { font-size: 14px; font-weight: 500; color: var(--graphite); }
.study-copy h2 { font-size: clamp(44px, 5vw, 70px); letter-spacing: -.06em; line-height: .9; font-weight: 600; }
.study-intro { font-size: 20px; letter-spacing: -.02em; }
.study-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; color: var(--graphite); font-size: 15px; }
.study-cols h3 { font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.study-note { font-size: 13px; color: var(--graphite); padding: 10px 14px; border-radius: 14px; background: rgba(17,17,20,.05); }
.study-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* ---------- responsive */
@media (max-width: 1180px) {
  .nav-links a { padding: 0 11px; }
  .nav .motion-label { display: none; }
  .nav-actions .motion-btn { width: 48px; padding: 0; justify-content: center; }
}
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-bar { padding-left: 14px; }
  .menu-btn { display: block; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "meta meta" "stage stage" "title title" "intro foot"; column-gap: 24px; }
  .hero-intro { margin-top: 0; align-self: end; }
  .hero-foot { flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: 14px; align-self: end; }
  .hero-hint { display: none; }
  .hero-title { font-size: clamp(56px, 11.4vw, 120px); }
  .card { height: auto; min-height: 0; }
  /* touch decks: a longer beat before the next card slides over, so a card's button holds still long enough to tap */
  .deck { gap: max(18px, 14svh); }
  .card-slab { grid-template-columns: 1fr; }
  .card-media { aspect-ratio: 16 / 10; }
  .card-info { padding: 8px 10px 10px; }
  .card-main { max-width: 640px; }
  .card-foot { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
  .svc-grid, .studio-grid, .faq-grid { grid-template-columns: 1fr; }
  .svc-head, .faq-intro { position: static; }
  .step-body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  .contact-grid { grid-template-columns: 1fr; grid-template-areas: "direct" "stage" "form"; }
  .stage { position: relative; top: auto; height: clamp(360px, 56vw, 520px); min-height: 0; }
  .study-sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "bar" "visual" "copy"; }
  .study-bar .sticker { min-width: 0; }
  .study-bar { padding: 12px 12px 12px 20px; background: var(--chalk-2); }
  .study-visual { min-height: 0; aspect-ratio: 4 / 3.2; }
  .study-visual .shot { inset: 12px; }
}
@media (max-width: 767px) {
  :root { --nav-h: 56px; }
  body { font-size: 16px; }
  .nav-bar { padding: 0 4px 0 12px; }
  .nav-cta { display: none; }
  .logo .zmark { width: 28px; height: 28px; }
  .wordmark { font-size: 20px; }
  .nav-actions .motion-btn { width: 44px; height: 44px; }
  .hero { padding-top: calc(var(--nav-top) + var(--nav-h) + 12px); padding-bottom: max(16px, env(safe-area-inset-bottom)); min-height: 600px; }
  .hero-inner { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "meta" "stage" "title" "intro" "foot"; }
  .meta-long { display: none; }
  .hero-meta { font-size: 13px; }
  .hero-stage { min-height: 190px; }
  .hero-title { font-size: min(15.6vw, 84px); line-height: .88; letter-spacing: -.066em; margin: 8px 0 14px -.04em; }
  .br-m { display: inline; } .br-d { display: none; }
  .hero-intro { font-size: 15px; max-width: 40ch; margin: 0 0 16px; }
  .hero-intro strong { display: inline; }
  .hero-foot { align-items: stretch; }
  .hero-ctas { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .hero-ctas .btn { flex: 1; min-width: 0; padding: 0 14px; }
  .work { border-radius: 30px; padding-top: 64px; }
  .work-head { grid-template-columns: 1fr; }
  .work-lede { justify-self: start; }
  .work-title { font-size: min(14.8vw, 84px); }
  .work-title span { white-space: nowrap; }
  .svc-title, .studio-title, .faq-title, .contact-title, .d-name, .study-copy h2, .panel h3 { text-wrap: balance; }
  .card { --stick: calc(var(--nav-top) + var(--nav-h) + 12px + var(--n, 0) * 10px); }
  .card-slab { padding: 10px; border-radius: 28px; gap: 6px; }
  .card-media { aspect-ratio: 4 / 3.4; }
  .card-info { padding: 12px 8px 8px; gap: 16px; }
  .card-kind { font-size: 13px; margin-bottom: 8px; }
  .card-name { font-size: clamp(42px, 13vw, 60px); }
  .card-line { font-size: 15px; margin-top: 10px; }
  .card-spec { margin-top: 18px; }
  .card-spec dd { font-size: 14px; }
  .card-foot { flex-direction: column; align-items: stretch; padding-top: 14px; }
  .card-foot .btn { justify-content: space-between; }
  .shot-lume { grid-template-columns: 1fr 1.1fr; }
  .a-nav { display: none; }
  .m-app { width: 88%; height: 78%; grid-template-columns: 34px 1fr; border-radius: 14px; }
  .m-side { gap: 9px; } .m-side i { width: 13px; height: 13px; border-radius: 4px; }
  .m-card { width: 34%; right: -6%; font-size: 8px; padding: 6px 8px; }
  .services { margin-top: -30px; border-radius: 30px; padding-top: 88px; }
  .svc-title { font-size: clamp(40px, 12.4vw, 64px); }
  .drawer, .drawer summary { border-radius: 22px; }
  .drawer[open] { transform: none; }
  .drawer summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num knob" "name knob" "sum knob"; min-height: 0; padding: 14px 12px 16px 18px; }
  .d-num { padding-top: 0; font-size: 13px; margin-bottom: 4px; }
  .d-name { font-size: clamp(26px, 8vw, 36px); }
  .d-body { padding: 0 18px 20px; }
  .studio { padding-top: 84px; overflow-x: clip; }
  .portrait { max-width: min(320px, calc(100% - 24px)); justify-self: start; margin-left: 4px; }
  .drag-sticker { min-height: 52px; font-size: 17px; left: auto; right: -18px; bottom: 22%; }
  .studio-title { font-size: clamp(40px, 12.2vw, 64px); }
  .studio-body { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr 1fr; }
  .spec div:nth-child(3) { padding-left: 0; border-left: 0; }
  .process { margin: 0 8px; border-radius: 30px; padding-top: 72px; }
  .process-head { grid-template-columns: 1fr; }
  .process-lede { justify-self: start; }
  .process-title { font-size: clamp(46px, 14.6vw, 80px); }
  .steps { border-radius: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps button { min-height: 52px; justify-content: flex-start; padding: 0 16px; border-radius: 22px; }
  .step-body { grid-template-columns: 1fr; gap: 12px; }
  .kit { width: min(56%, 210px); order: -1; }
  .faq { padding-top: 84px; }
  .faq-title { font-size: clamp(50px, 16vw, 84px); }
  .bubble { min-height: 38px; font-size: 14px; }
  .qa, .qa summary { border-radius: 24px; }
  .qa summary { min-height: 64px; padding: 12px 10px 12px 18px; font-size: 18px; }
  .qa-body p { padding: 0 18px 20px; }
  .contact { padding-top: 84px; }
  .contact-title { font-size: clamp(44px, 13.4vw, 80px); }
  .direct a { min-height: 60px; padding: 8px 8px 8px 18px; gap: 12px; }
  .dl-k { min-width: 0; font-size: 13px; }
  .dl-v { font-size: 17px; }
  .stage { height: clamp(360px, 112vw, 480px); border-radius: 26px; }
  .stage-cap { left: 16px; top: 14px; right: 16px; font-size: 14px; }
  .brief { border-radius: 28px; padding: 18px 14px 18px; margin: 0 -6px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .chip { padding: 0 14px; }
  .brief-foot .btn-xl { width: 100%; justify-content: space-between; padding-right: 22px; }
  .footer { margin: 0 8px max(8px, calc(env(safe-area-inset-bottom) + 6px)); border-radius: 30px; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-legal { margin-left: -10px; }
  .study { --gap-t: max(8px, env(safe-area-inset-top)); --gap-b: max(8px, env(safe-area-inset-bottom)); --gap-l: max(8px, env(safe-area-inset-left)); --gap-r: max(8px, env(safe-area-inset-right)); border-radius: 28px; }
  .study-copy { padding: 18px 20px 22px; }
  .study-cols { grid-template-columns: 1fr; }
  .study-intro { font-size: 18px; }
  .study-actions { width: 100%; flex-direction: column; }
  .study-actions .btn { width: 100%; }
}
@media (max-width: 389px) {
  .l-btn { white-space: nowrap; font-size: 10px; padding: 8px 11px; } /* the mockup's pill stays one line */
}
@media (max-width: 359px) {
  .hero-ctas .btn { font-size: 15px; padding: 0 10px; }
  .hero-ctas .btn-ico { display: none; }
  .wordmark { font-size: 18px; }
  .steps button { padding: 0 12px; font-size: 15px; }
  .dl-k { display: none; }
  .direct a { grid-template-columns: minmax(0, 1fr) auto; }
  .chip { font-size: 14px; padding: 0 12px; }
  .brief-foot .btn-xl { font-size: 16px; padding: 0 18px 0 20px; }
  .stk-more { display: none; }
  .menu-card .mc-v { font-size: 15px; white-space: nowrap; letter-spacing: -.01em; } /* the email stays one line at 320 */
  .study-bar { padding: 10px 10px 10px 14px; gap: 8px; }
  .study-copy { padding: 16px 16px 20px; }
  .study-actions .btn { font-size: 15px; padding: 0 16px 0 18px; gap: 10px; }
  .study-actions .btn-ico { margin-right: -8px; }
}
/* short portrait phones (SE, older Androids): the hero must fit one screen, so the intro keeps only its first sentence */
@media (max-width: 767px) and (orientation: portrait) and (max-height: 700px) {
  .hero { min-height: 520px; }
  .intro-more { display: none; }
  .hero-title { font-size: min(15.6vw, 8.8svh, 84px); }
  .menu-sheet { gap: 10px; }
  .menu-links a { font-size: min(12vw, 6.4svh); }
}
/* phones in landscape: stage beside the statement. The width floor keeps a portrait phone with the
   on-screen keyboard open (visual viewport ~370-460px tall) out of this layout. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 560px) {
  .hero { min-height: 390px; padding-top: calc(var(--nav-top) + var(--nav-h) + 8px); }
  .hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-areas: "meta stage" "title stage" "intro stage" "foot stage"; }
  .hero-title { font-size: min(9.6vh, 7.2vw, 54px); align-self: end; margin: 6px 0 8px; }
  .br-m { display: none; } .br-d { display: inline; }
  .hero-intro { display: none; }
  .hero-foot { align-items: flex-start; }
  .hero-ctas { flex-wrap: nowrap; }
  /* cards: photo beside the copy, one card per screen */
  .card { height: calc(100svh - var(--nav-top) - var(--nav-h) - 36px); min-height: 270px; }
  .card-slab { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; }
  .card-media { aspect-ratio: auto; }
  .card-info { padding: 4px 8px 2px 0; gap: 8px; }
  .card-top .sticker { min-height: 28px; }
  .card-kind { margin-bottom: 4px; font-size: 13px; }
  .card-name { font-size: min(10svh, 44px); }
  .card-line { margin-top: 6px; font-size: 14px; line-height: 1.32; }
  .card-spec, .card-foot .tags { display: none; }
  .card-foot { padding-top: 10px; }
  /* the contact stage fits under the nav, so its caption, the kit and "Build it now" are on screen together */
  .stage { height: 340px; height: min(340px, calc(100svh - var(--nav-top) - var(--nav-h) - 20px)); min-height: 260px; }
  /* menu: links on the left, lines + studies on the right */
  .menu-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: "top top" "body studies" "body card" "body foot"; gap: 8px 28px; align-content: start; }
  .menu::after { border-radius: 0 0 32px 0; left: 50%; }
  .menu-top { grid-area: top; } .menu-body { grid-area: body; justify-content: flex-start; } .menu-studies { grid-area: studies; } .menu-card { grid-area: card; } .menu-foot { grid-area: foot; align-self: start; }
  .menu-links a { font-size: min(8.4svh, 36px); min-height: 48px; }
  .menu-card { display: block; padding: 2px 14px; } .menu-card a { min-height: 54px; padding: 6px 0; }
  .menu-card a + a { border-left: 0; padding-left: 0; border-top: 1px solid rgba(17,17,20,.16); }
  .mc-v { font-size: 16px; }
  .study-sheet { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; grid-template-areas: "visual bar" "visual copy"; }
  .study-visual { position: sticky; top: 0; align-self: start; aspect-ratio: auto; height: calc(100dvh - var(--gap-t) - var(--gap-b)); }
  .study-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }