/* Global Presence character pages. Mobile first; desktop tweaks at the end.
   Each character page can override --pink, --pink-soft and --gold. */

:root {
  --ink: #0C0A0B;
  --ink-2: #171215;
  --cream: #FFF9F6;
  --pink: #F5BCD1;
  --pink-soft: #FBE3EC;
  --gold: #D2A24C;
  --gold-hi: #F0D48C;
  --text: #1B1417;
  --muted: #5E4E55;
  --line: #E2D3DA;
  --r: 22px;
  --display: 'Abril Fatface', 'Didot', Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.55 var(--sans); color: var(--text); background: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
section[id] { scroll-margin-top: 12px; }
.ic { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; background: #fff; color: var(--ink); padding: 12px 16px; border-radius: 12px; font-weight: 800; }
.skip:focus { left: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 56px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 800 17px/1.1 var(--sans); letter-spacing: .01em; text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-pink { background: var(--pink); color: var(--ink); box-shadow: inset 0 0 0 2px var(--gold); }
.btn-pink:hover { background: #F8CCDC; }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn-line:hover { background: rgba(12, 10, 11, .05); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-xl { width: 100%; max-width: 420px; min-height: 64px; font-size: 19px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font: 800 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.eyebrow::before, .eyebrow::after { content: '\2726'; font-size: 1.1em; letter-spacing: 0; }

/* ---------- top bar ---------- */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 16px 0; color: #fff;
}
.mark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font: 400 19px/1 var(--display); }
.mark .ic { width: 38px; height: 15px; color: var(--pink); }
.lang {
  display: flex; padding: 4px; border-radius: 999px;
  background: rgba(12, 10, 11, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.lang button {
  min-width: 48px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px;
  background: none; color: #fff; font: 800 14px/1 var(--sans); letter-spacing: .08em; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--pink); color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,10,11,.6) 0%, rgba(12,10,11,0) 20%, rgba(12,10,11,0) 38%, rgba(12,10,11,.82) 66%, var(--ink) 100%);
}
.ph-hero, .ph-tile {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px;
  background: repeating-conic-gradient(from 0deg at 50% 36%, var(--pink) 0 7.5deg, #F9D3E1 7.5deg 15deg);
  color: var(--ink);
}
.ph-hero { place-content: start center; padding-top: 22svh; }
.ph-glasses { width: min(46vw, 220px); height: auto; aspect-ratio: 60 / 24; color: var(--ink); filter: drop-shadow(3px 3px 0 var(--gold)); }
.ph-label { text-align: center; font: 800 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; background: rgba(255,255,255,.7); padding: 6px 12px; border-radius: 999px; }

.hero-copy { position: relative; z-index: 2; width: 100%; padding: 0 20px calc(30px + env(safe-area-inset-bottom)); text-align: center; }
.hero .eyebrow { color: var(--gold-hi); }
.name {
  margin: .2em 0 .26em; font: 400 clamp(60px, 18vw, 132px)/.86 var(--display); letter-spacing: -.005em;
  color: var(--pink); text-shadow: 3px 3px 0 var(--gold), 7px 7px 0 rgba(0, 0, 0, .35);
}
.name span { display: block; }
.name span + span { color: #fff; text-shadow: 3px 3px 0 var(--pink), 7px 7px 0 rgba(0, 0, 0, .35); }
.tagline { max-width: 28ch; margin: 0 auto 22px; font: 600 19px/1.35 var(--sans); color: #F6EEF1; }
.hero-note > span:not(.dot) { white-space: nowrap; }
.hero-note { display: flex; flex-wrap: wrap; row-gap: 4px; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; font: 600 14px/1.3 var(--sans); color: #DCCDD3; }
.hero-note .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3) { animation-delay: .16s; }
  .hero-copy > :nth-child(4) { animation-delay: .24s; }
  .hero-copy > :nth-child(5) { animation-delay: .32s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- sections ---------- */
.sec { padding: 56px 16px; }
.wrap { max-width: 1080px; margin: 0 auto; }
.narrow { max-width: 720px; }
.sec-head { margin-bottom: 34px; text-align: center; }
.sec-head h2 { margin-top: 10px; font: 400 clamp(42px, 11vw, 66px)/1 var(--display); }
.sec-head h2::after {
  content: ''; display: block; width: 86px; height: 10px; margin: 16px auto 0;
  background: radial-gradient(circle, var(--gold) 2.6px, transparent 3.2px) 0 50% / 14px 10px repeat-x;
}

/* how it works: one short row */
.how { padding: 26px 16px 28px; background: var(--pink); color: var(--ink); }
.how-title { margin-bottom: 14px; text-align: center; font: 800 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #6B4512; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.step {
  display: grid; justify-items: center; gap: 6px; padding: 12px 6px 14px; text-align: center;
  border-radius: 16px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px rgba(12, 10, 11, .1);
}
.step-n { font: 400 40px/.9 var(--display); color: var(--ink); text-shadow: 2px 2px 0 var(--gold); }
.step-t { font: 800 14px/1.2 var(--sans); text-wrap: balance; }

/* ejemplos: the 3D video ring (styles under "Our work" below) */
.gal { position: relative; overflow: hidden; background: radial-gradient(70% 55% at 50% 60%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 70%), var(--ink); color: #fff; }
.gal .eyebrow { color: var(--gold-hi); }
.gal .sec-head { margin-bottom: 18px; }
.rt-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 10px; text-align: center; color: #fff;
  font: 700 13px/1.2 var(--sans); background: linear-gradient(180deg, transparent, rgba(12, 10, 11, .85)); pointer-events: none;
}
.chip-ai { position: absolute; left: 8px; top: 8px; padding: 5px 8px; border-radius: 999px; background: rgba(12, 10, 11, .62); font: 700 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; pointer-events: none; }
.rt-soon-row { display: flex; justify-content: center; gap: 10px; }
.rt-soon {
  display: grid; place-content: center; justify-items: center; gap: 14px; width: min(30vw, 200px); aspect-ratio: 9 / 16; border-radius: 18px;
  background: repeating-conic-gradient(from 0deg at 50% 42%, #201820 0 7.5deg, #161115 7.5deg 15deg);
}
.rt-soon .ph-glasses { width: 60%; color: var(--pink); }
.rt-soon .ph-label { max-width: 86%; font-size: 10px; background: rgba(255, 255, 255, .12); color: #fff; }
.ph-tile .ph-glasses { width: 52%; color: var(--pink); }
.ph-tile .ph-label { max-width: 86%; font-size: 11px; background: rgba(255, 255, 255, .12); color: #fff; }
.orbit-hint { margin-top: 6px; text-align: center; font: 600 13px/1.4 var(--sans); color: #BFB1B7; }

.lightbox {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  padding: calc(56px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(12, 10, 11, .94);
}
.lightbox video { max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 0 0 1.5px var(--gold); }

/* ---------- skeleton loading: shimmering placeholders, never a bare "loading" ---------- */
@keyframes sk { from { background-position: 150% 0; } to { background-position: -50% 0; } }
/* every video box shimmers until its picture arrives (s/site.js adds .skel / .is-loaded) */
.skel { isolation: isolate; }
.skel::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .1) 50%, transparent 65%) var(--ink-2);
  background-size: 250% 100%; animation: sk 1.3s linear infinite;
}
.skel.is-loaded::before { animation: none; background: var(--ink-2); }
/* the full-size player: a shimmering phone frame with a play bubble until the video starts */
.lb-sk {
  display: none; position: absolute; top: 50%; left: 50%; width: min(70vw, 340px); max-height: 78vh; aspect-ratio: 9 / 16; transform: translate(-50%, -50%);
  border-radius: 16px; box-shadow: 0 0 0 1.5px var(--gold);
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .1) 50%, transparent 65%) var(--ink-2);
  background-size: 250% 100%; animation: sk 1.3s linear infinite;
}
.lb-sk span { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: rgba(255, 255, 255, .14); animation: sk-pulse 1.3s ease-in-out infinite; }
@keyframes sk-pulse { 50% { transform: scale(.86); opacity: .6; } }
.lightbox.is-loading .lb-sk { display: block; }
.lightbox.is-loading video { opacity: 0; }
/* buttons while sending: a light sweeping across, and the upload filling it */
.btn.is-busy {
  cursor: progress; background-repeat: no-repeat;
  background-image: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%), linear-gradient(90deg, rgba(12, 10, 11, .14) var(--p, 0%), transparent 0);
  background-size: 250% 100%, 100% 100%; animation: sk 1.1s linear infinite;
}
/* while Stripe opens: a skeleton of a pay card */
.pay-sk { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; background: rgba(12, 10, 11, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pay-sk-card { display: grid; gap: 12px; width: min(86vw, 360px); padding: 24px; border-radius: 20px; background: #fff; }
.sk-line {
  display: block; height: 14px; border-radius: 8px;
  background: linear-gradient(110deg, #EDE6E9 35%, #FAF6F8 50%, #EDE6E9 65%); background-size: 250% 100%; animation: sk 1.2s linear infinite;
}
.sk-logo { width: 46px; height: 46px; border-radius: 50%; }
.sk-line.w60 { width: 60%; } .sk-line.w40 { width: 40%; } .sk-line.big { height: 32px; }
.sk-btn { height: 50px; margin-top: 6px; border-radius: 14px; }
.pay-sk-text { color: #fff; font: 700 15px/1.35 var(--sans); text-align: center; }
.lb-close {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: var(--pink); color: var(--ink); font: 400 30px/1 var(--sans); cursor: pointer;
}

/* booking form */
.book { background: var(--pink-soft); }
.book .eyebrow { color: #8A5E1C; }
.form-card {
  max-width: 640px; margin: 0 auto; padding: 26px 20px; border-radius: 28px; background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(210, 162, 76, .55), 0 30px 60px -32px rgba(12, 10, 11, .4);
}
.field { display: grid; gap: 8px; margin: 0 0 18px; min-width: 0; }
fieldset.field { padding: 0; border: 0; }
.field label, .field legend { font: 800 15px/1.3 var(--sans); color: var(--ink); }
.field legend { padding: 0; margin-bottom: 10px; }
.req { margin-left: 3px; color: #B5487A; }
.opt { font-weight: 600; color: #8A7A81; }
input, select, textarea {
  width: 100%; min-height: 56px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 14px;
  background: #FFFCFD; color: var(--ink); font: 400 17px/1.3 var(--sans);
  -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s;
}
input[type="date"] { display: block; min-width: 0; }
textarea { min-height: 124px; resize: vertical; }
select {
  padding-right: 44px; cursor: pointer;
  background: #FFFCFD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230C0A0B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center / 20px no-repeat;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(210, 162, 76, .22); }
.was-checked :invalid { border-color: #C2416F; }
::placeholder { color: #A3949A; }

.vbox { padding: 16px !important; border: 1.5px dashed var(--line) !important; border-radius: 18px; }
.vbox legend { padding: 0 6px; margin-left: -6px; }
.vbox .sub { font-weight: 600; }
.or { margin: 4px 0; text-align: center; font: 800 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8A7A81; }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-btn { width: 100%; font-size: 16px; }
.file-input:focus-visible + .file-btn { outline: 3px solid var(--gold); outline-offset: 3px; }
.file-name { font: 600 14px/1.3 var(--sans); color: var(--ink); word-break: break-all; }
.file-name:empty { display: none; }
.hint { font-size: 14px; color: var(--muted); }
.wa-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--ink); }
.wa-link .ic { width: 1.05em; height: 1.05em; }

/* step badges in the form */
.badge {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%;
  background: var(--ink); color: var(--pink); font: 400 15px/1 var(--display); vertical-align: 1px;
}
fieldset.field > legend { font-size: 17px; margin-bottom: 12px; }

/* package picks */
.picks { display: grid; gap: 10px; }
.picks .pick { position: relative; display: block; cursor: pointer; font: 400 15px/1.4 var(--sans); color: var(--ink); }
.pick input { position: absolute; inset: 0; opacity: 0; min-height: 0; cursor: pointer; }
.pick-body {
  display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: #FFFCFD;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s, background .15s;
}
.pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pick-name { font: 400 21px/1.1 var(--display); }
.pick-price { font: 400 26px/1 var(--display); }
.pick-text { font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.pick-pay { font: 700 13px/1.3 var(--sans); color: #8A5E1C; }
.pick input:checked + .pick-body { background: var(--pink-soft); box-shadow: inset 0 0 0 2.5px var(--ink); }
.pick input:focus-visible + .pick-body { outline: 3px solid var(--gold); outline-offset: 2px; }
.was-checked .picks:has(input:invalid) .pick-body { box-shadow: inset 0 0 0 1.5px #C2416F; }
.pick-len-note { font: 700 12.5px/1.3 var(--sans); color: var(--muted); }
/* video length buttons, tucked under their card (Swap Video) */
.pick-lens { margin: -6px 10px 0; padding: 14px 12px 12px; border-radius: 0 0 16px 16px; background: #FFFCFD; box-shadow: inset 0 0 0 1.5px var(--line); }
.pick-lens.is-on { background: var(--pink-soft); box-shadow: inset 0 0 0 2px var(--ink); }
.pick-lens-t { margin-bottom: 8px; font: 800 13px/1.2 var(--sans); color: var(--ink); }
.pick-lens-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.len, .rush-opt { position: relative; display: block; cursor: pointer; }
.len input, .rush-opt input { position: absolute; inset: 0; opacity: 0; min-height: 0; margin: 0; cursor: pointer; }
.len span {
  display: grid; justify-items: center; gap: 2px; padding: 9px 4px; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: background .15s, box-shadow .15s;
}
.len b { font: 800 14px/1.1 var(--sans); }
.len i { font: 400 20px/1 var(--display); font-style: normal; }
.len input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.len input:checked + span i { color: var(--pink); }
.len input:focus-visible + span, .rush-opt input:focus-visible + .rush-body { outline: 3px solid var(--gold); outline-offset: 2px; }
/* "When do you need it?" priority choices */
.rush { margin-top: 16px; }
.rush-t { margin-bottom: 8px; font: 800 15px/1.3 var(--sans); color: var(--ink); }
.rush-row { display: grid; gap: 8px; }
.rush-body {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 14px; border-radius: 14px;
  background: #FFFCFD; box-shadow: inset 0 0 0 1.5px var(--line); transition: background .15s, box-shadow .15s;
}
.rush-body b { font: 700 15px/1.25 var(--sans); }
.rush-body i { flex: none; font: 400 20px/1 var(--display); font-style: normal; color: #8A5E1C; }
.rush-opt input:checked + .rush-body { background: var(--pink-soft); box-shadow: inset 0 0 0 2.5px var(--ink); }
.rush-closed { display: none; margin: 4px 0 0 14px; font: 600 12px/1.2 var(--sans); color: #8A7A81; }
.rush-opt:has(input:disabled) { cursor: not-allowed; }
.rush-opt:has(input:disabled) .rush-body { opacity: .45; }
.rush-opt:has(input:disabled) .rush-closed { display: block; }

/* "Your own AI mascot" box: dark card with a glowing accent edge, on both pages */
#mascota { scroll-margin-top: 16px; }
.mb-sec { padding-block: 8px 44px; background: var(--ink); }
.mb-reply { font: 600 12.5px/1.3 var(--sans); color: #AEB6C4; }
/* character pages: the offer as one slim line at the bottom (and after paying) */
.mb-strip-sec { padding: 22px 16px 26px; background: var(--cream); border-top: 1.5px solid var(--line); }
.mb-strip {
  display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; max-width: 760px; margin: 0 auto; padding: 14px 16px;
  border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.mb-strip:hover { box-shadow: inset 0 0 0 2px var(--gold); transform: translateY(-1px); }
.mb-strip .ic { flex: none; width: 22px; height: 22px; color: var(--gold); }
.mb-strip-t { flex: 1 1 200px; font: 600 15px/1.35 var(--sans); }
.mb-strip-cta { flex: none; font: 800 14px/1 var(--sans); color: #8A5E1C; white-space: nowrap; }
.mb-strip-light { margin-top: 8px; width: 100%; text-align: left; background: var(--pink-soft); box-shadow: none; }
.mascot-box {
  position: relative; display: grid; gap: 18px; max-width: 760px; margin: 0 auto; padding: 22px 20px; border-radius: var(--r);
  background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--pink) 28%, transparent), transparent 60%), var(--ink-2); color: #fff;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pink) 70%, transparent), 0 24px 60px -24px color-mix(in srgb, var(--pink) 55%, transparent);
}
.st-chars .mascot-box { margin-top: 18px; }
.mb-copy { display: grid; gap: 8px; }
.mb-tag { justify-self: start; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pink) 22%, transparent); color: var(--gold-hi); font: 800 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.mb-title { font: 400 30px/1.05 var(--display); }
.studio-body .mb-title { font-weight: 800; letter-spacing: -.02em; }
.mb-text { color: #D9DEE8; font-size: 16px; }
.mb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 6px; }
.mb-price { font: 400 26px/1 var(--display); color: var(--gold-hi); }
.studio-body .mb-price { font-weight: 800; }
.mb-cta { flex: 1 1 200px; min-height: 52px; }
.mb-cta .ic { width: 20px; height: 20px; }
/* Rosalío's design sheet as proof; tap opens it full size */
.mb-sheet { display: grid; gap: 8px; margin: 0; }
.mb-sheet a { display: block; overflow: hidden; border-radius: 14px; background: #F4EFEA; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.mb-sheet img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.mb-sheet a:hover img { transform: scale(1.03); }
.mb-sheet figcaption { font: 600 13.5px/1.45 var(--sans); color: #C9CFDA; }
@media (min-width: 900px) { .mascot-box:has(.mb-sheet) { max-width: 1000px; grid-template-columns: 1fr 1.25fr; align-items: center; padding: 30px; } }

/* the picked card gets a check badge in its corner */
.pick-body { position: relative; }
.pick input:checked + .pick-body::before {
  content: '\2713'; position: absolute; top: -10px; right: -8px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--ink); color: var(--pink); font: 800 15px/1 var(--sans); box-shadow: 0 0 0 3px #fff;
}
/* the price cards spin in one after another the first time they come on
   screen (s/site.js adds .reveal/.in), then sit still so all 3 can be compared */
@media (prefers-reduced-motion: no-preference) {
  .pick.reveal { transform: perspective(900px) translate(26px, 34px) rotate(4deg) rotateY(-22deg); transition-duration: .7s, .8s; }
  .pick.reveal.in { transform: none; }
}
/* "How do I get the link?" phone demo. Four 2.5 s scenes in a 10 s loop;
   everything inside a scene runs on the same 10 s clock, delayed to that
   scene's start, so its keyframes 0-25% are "during this scene". */
.howlink { padding: 16px 14px 18px; border-radius: 18px; background: var(--ink); color: #fff; }
.hl-title { margin-bottom: 14px; text-align: center; font: 800 15px/1.2 var(--sans); color: var(--gold-hi); }
.hl-stage { display: grid; justify-items: center; gap: 14px; }
.hl-phone {
  position: relative; width: 172px; height: 344px; padding: 8px; border-radius: 30px; background: #1D171A;
  box-shadow: inset 0 0 0 2px #3A2F35, 0 0 0 1.5px rgba(210, 162, 76, .7), 0 20px 40px -14px rgba(245, 188, 209, .35);
}
.hl-phone::before { content: ''; position: absolute; z-index: 9; top: 13px; left: 50%; width: 54px; height: 14px; margin-left: -27px; border-radius: 10px; background: #1D171A; }
.hl-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 23px; background: #120E10; }
.hl-scene { position: absolute; inset: 0; opacity: 0; animation: hl-show 10s infinite; }
.hl-s2 { animation-delay: 2.5s; } .hl-s3 { animation-delay: 5s; } .hl-s4 { animation-delay: 7.5s; }
@keyframes hl-show { 0% { opacity: 0; } 2%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
.hl-photo { position: absolute; inset: -10px; background: var(--hl-bg, linear-gradient(160deg, #5B3B4A, #1C1418)) center / cover; filter: blur(3px) saturate(1.2) brightness(.78); }
.hl-finger {
  position: absolute; z-index: 8; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 2px rgba(12, 10, 11, .55), 0 4px 10px rgba(0, 0, 0, .35);
}

/* 1. record */
.hl-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 33%, rgba(255,255,255,.22) 33% calc(33% + 1px), transparent 0 66%, rgba(255,255,255,.22) 66% calc(66% + 1px), transparent 0),
    linear-gradient(transparent 33%, rgba(255,255,255,.22) 33% calc(33% + 1px), transparent 0 66%, rgba(255,255,255,.22) 66% calc(66% + 1px), transparent 0);
}
.hl-rec { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; background: rgba(0, 0, 0, .5); font: 800 10px/1 var(--sans); letter-spacing: .06em; white-space: nowrap; }
.hl-rec i { width: 7px; height: 7px; border-radius: 50%; background: #FF3B3B; animation: hl-blink 1s steps(2) infinite; }
.hl-shutter { position: absolute; left: 50%; bottom: 18px; display: grid; place-items: center; width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; box-shadow: inset 0 0 0 4px #fff; }
.hl-shutter i { width: 20px; height: 20px; border-radius: 5px; background: #FF3B3B; animation: hl-pulse 1.2s infinite; }

/* 2. post */
.hl-s2 { display: grid; align-content: start; gap: 10px; padding: 36px 12px 12px; background: #fff; color: #111; }
.hl-bar { padding-bottom: 8px; border-bottom: 1px solid #EEE; text-align: center; font: 800 12px/1 var(--sans); }
.hl-post-row { display: flex; gap: 8px; }
.hl-thumb { flex: none; width: 48px; height: 84px; border-radius: 6px; background: var(--hl-bg, #5B3B4A) center / cover; }
.hl-lines { flex: 1; display: grid; align-content: start; gap: 6px; padding-top: 4px; }
.hl-lines i { display: block; height: 6px; border-radius: 3px; background: #E6E0E3; }
.hl-lines i:nth-child(2) { width: 80%; } .hl-lines i:nth-child(3) { width: 55%; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hl-chips b { padding: 4px 7px; border-radius: 999px; background: #F2EDF0; font: 700 8.5px/1 var(--sans); }
.hl-chips b:first-child { background: var(--ink); color: #fff; }
.hl-btn { padding: 9px; border-radius: 999px; text-align: center; background: var(--pink); box-shadow: inset 0 0 0 1.5px var(--gold); font: 800 11px/1 var(--sans); animation: hl-press 10s infinite 2.5s; }
.hl-progress { height: 6px; overflow: hidden; border-radius: 3px; background: #EEE; }
.hl-progress i { display: block; width: 0; height: 100%; background: var(--gold); animation: hl-fill 10s infinite 2.5s; }
.hl-f2 { animation: hl-f2 10s infinite 2.5s; }
@keyframes hl-press { 0%, 7% { transform: none; } 8% { transform: scale(.93); } 10%, 100% { transform: none; } }
@keyframes hl-fill { 0%, 9% { width: 0; } 20%, 100% { width: 100%; } }
@keyframes hl-f2 {
  0% { opacity: 0; transform: translate(120px, 300px); } 3% { opacity: 1; }
  7% { transform: translate(64px, 203px); } 8% { transform: translate(64px, 203px) scale(.8); } 10% { transform: translate(64px, 203px); }
  18% { opacity: 1; } 22%, 100% { opacity: 0; transform: translate(64px, 203px); }
}

/* 3. share > copy link */
.hl-side { position: absolute; right: 8px; bottom: 70px; display: grid; gap: 12px; }
.hl-side span { display: grid; place-items: center; width: 30px; height: 30px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
.hl-side .ic { width: 22px; height: 22px; }
.hl-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 10px; padding: 12px 10px 14px; border-radius: 16px 16px 0 0; background: #fff; color: #111; transform: translateY(100%); animation: hl-sheet 10s infinite 5s; }
.hl-sheet > b { text-align: center; font: 800 11px/1 var(--sans); }
.hl-apps { display: flex; justify-content: space-between; }
.hl-apps i { width: 28px; height: 28px; border-radius: 50%; background: #FF4D6D; }
.hl-apps i:nth-child(2) { background: #FFB347; } .hl-apps i:nth-child(3) { background: #4DABF7; } .hl-apps i:nth-child(4) { background: #51CF66; }
.hl-copy { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 10px; background: var(--pink-soft); font: 800 10.5px/1 var(--sans); animation: hl-press2 10s infinite 5s; }
.hl-copy .ic { width: 14px; height: 14px; }
.hl-toast { position: absolute; top: 34px; left: 50%; padding: 6px 10px; border-radius: 999px; background: rgba(12, 10, 11, .85); color: #fff; font: 700 10px/1 var(--sans); white-space: nowrap; opacity: 0; transform: translate(-50%, -6px); animation: hl-toast 10s infinite 5s; }
.hl-f3 { animation: hl-f3 10s infinite 5s; }
@keyframes hl-sheet { 0%, 7% { transform: translateY(100%); } 10%, 100% { transform: none; } }
@keyframes hl-press2 { 0%, 15% { transform: none; } 16% { transform: scale(.94); background: var(--pink); } 18%, 100% { transform: none; background: var(--pink); } }
@keyframes hl-toast { 0%, 16% { opacity: 0; } 18%, 23% { opacity: 1; transform: translate(-50%, 0); } 25%, 100% { opacity: 0; } }
@keyframes hl-f3 {
  0% { opacity: 0; transform: translate(90px, 330px); } 2% { opacity: 1; }
  5% { transform: translate(119px, 229px); } 6% { transform: translate(119px, 229px) scale(.8); } 7% { transform: translate(119px, 229px); }
  13% { transform: translate(64px, 286px); } 16% { transform: translate(64px, 286px) scale(.8); } 17% { transform: translate(64px, 286px); }
  20% { opacity: 1; } 23%, 100% { opacity: 0; transform: translate(64px, 286px); }
}

/* 4. paste here */
.hl-s4 { padding: 40px 12px 12px; background: var(--pink-soft); }
.hl-mini { position: relative; display: grid; gap: 8px; padding: 14px 10px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(210, 162, 76, .55); }
.hl-mini > b { font: 400 16px/1.05 var(--display); }
.hl-mini > small { font: 800 9.5px/1.2 var(--sans); }
.hl-input { display: block; min-height: 30px; padding: 8px; border-radius: 8px; border: 1.5px solid #DCCFD5; background: #FFFCFD; animation: hl-focus 10s infinite 7.5s; }
.hl-typed { display: block; width: 0; overflow: hidden; white-space: nowrap; font: 600 9px/1.2 var(--sans); animation: hl-type 10s infinite 7.5s; }
.hl-paste { position: absolute; left: 18px; top: 93px; padding: 5px 9px; border-radius: 6px; background: var(--ink); color: #fff; font: 700 9.5px/1 var(--sans); opacity: 0; animation: hl-pastebub 10s infinite 7.5s; }
.hl-ok { display: inline-flex; align-items: center; gap: 4px; color: #1F9D55; font: 800 10px/1 var(--sans); opacity: 0; animation: hl-okshow 10s infinite 7.5s; }
.hl-ok .ic { width: 14px; height: 14px; }
.hl-f4 { animation: hl-f4 10s infinite 7.5s; }
@keyframes hl-focus { 0%, 4% { border-color: #DCCFD5; } 5%, 100% { border-color: var(--gold); } }
@keyframes hl-type { 0%, 11% { width: 0; } 12%, 100% { width: 100%; } }
@keyframes hl-pastebub { 0%, 5% { opacity: 0; transform: translateY(4px); } 6%, 10% { opacity: 1; transform: none; } 11% { opacity: 1; transform: scale(.92); } 12%, 100% { opacity: 0; } }
@keyframes hl-okshow { 0%, 13% { opacity: 0; } 15%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes hl-f4 {
  0% { opacity: 0; transform: translate(100px, 300px); } 2% { opacity: 1; }
  4% { transform: translate(64px, 100px); } 5%, 8% { transform: translate(64px, 100px) scale(.82); } 9% { transform: translate(64px, 100px); }
  10% { transform: translate(41px, 129px); } 11% { transform: translate(41px, 129px) scale(.8); } 12% { transform: translate(41px, 129px); }
  16% { opacity: 1; } 20%, 100% { opacity: 0; transform: translate(41px, 129px); }
}
@keyframes hl-blink { 50% { opacity: 0; } }
@keyframes hl-pulse { 50% { transform: scale(.85); } }

/* caption under the phone, changes with the scene */
.hl-caps { position: relative; width: 100%; height: 46px; margin: 0; padding: 0; list-style: none; }
.hl-cap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 0; font: 700 15px/1.25 var(--sans); animation: hl-show 10s infinite; }
.hl-cap b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pink); color: var(--ink); font: 400 16px/1 var(--display); }
.hl-c2 { animation-delay: 2.5s; } .hl-c3 { animation-delay: 5s; } .hl-c4 { animation-delay: 7.5s; }

@media (prefers-reduced-motion: reduce) {
  .hl-scene, .hl-cap { animation: none; }
  .hl-s3 { opacity: 1; }
  .hl-s3 .hl-sheet { transform: none; animation: none; }
  .hl-finger, .hl-toast { display: none; }
  .hl-caps { height: auto; display: grid; gap: 8px; }
  .hl-cap { position: static; opacity: 1; justify-content: flex-start; }
}

/* pay box (after booking) */
.paybox {
  display: grid; justify-items: center; gap: 8px; width: 100%; padding: 20px 16px; border-radius: 18px;
  background: var(--pink-soft); box-shadow: inset 0 0 0 1.5px rgba(210, 162, 76, .55);
}
.pay-label { font: 800 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #8A5E1C; }
.pay-amt { font: 400 56px/1 var(--display); }
.pay-methods { font-size: 13px; color: var(--muted); }
.zelle-alt { width: 100%; margin-top: 6px; border-top: 1.5px solid rgba(12, 10, 11, .1); }
.zelle-alt summary { min-height: 48px; padding-top: 12px; font-weight: 800; cursor: pointer; list-style: none; }
.zelle-alt summary::-webkit-details-marker { display: none; }
.zelle-alt summary::after { content: ' +'; color: var(--gold); }
.zelle-alt[open] summary::after { content: ' −'; }
.zelle-body { display: grid; gap: 10px; padding-bottom: 4px; }
.thanks-zelle { display: grid; gap: 2px; font-size: 17px; }
.thanks-zelle span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.after { margin-top: 10px; text-align: center; font: 700 14px/1.4 var(--sans); color: var(--ink); }



.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-opt { position: relative; }
.chip-opt input { position: absolute; inset: 0; opacity: 0; min-height: 0; cursor: pointer; }
.chip-opt span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1.5px solid var(--line); border-radius: 999px; font: 700 16px/1 var(--sans); transition: background .15s, color .15s; }
.chip-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-opt input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

.hp { position: absolute; left: -9999px; }
.form-msg { margin-bottom: 12px; font-weight: 700; color: #B3261E; }
.form-msg:empty { display: none; }
.submit { max-width: none; }
.submit[disabled] { opacity: .7; cursor: progress; }
.consent { margin-top: 12px; font-size: 13px; line-height: 1.45; color: #8A7A81; text-align: center; }

.thanks { display: grid; justify-items: center; gap: 12px; text-align: center; outline: none; }
.thanks[hidden] { display: none; }
.thanks-mark .ic { width: 96px; height: 38px; color: var(--pink); filter: drop-shadow(2px 2px 0 var(--gold)); }
.thanks h3 { font: 400 46px/1 var(--display); }
.thanks-lead { font: 700 19px/1.35 var(--sans); }
.thanks-small { color: var(--muted); }
.thanks-dep[hidden] { display: none; }
.thanks .btn { width: 100%; }

/* faq */
.faq { background: var(--cream); }
.faq .eyebrow { color: #8A5E1C; }
.faq details { border-bottom: 1.5px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 66px; padding: 10px 0; list-style: none; cursor: pointer;
  font: 800 18px/1.3 var(--sans); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 400 32px/1 var(--display); color: var(--gold); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.ans { padding: 0 0 20px; color: #4A3840; }

/* footer */
.foot { padding: 56px 20px calc(116px + env(safe-area-inset-bottom)); background: var(--ink); color: #CDBFC6; text-align: center; }
.foot .mark { color: #fff; font-size: 22px; }
.foot-studio { margin-top: 10px; }
.socials { display: flex; justify-content: center; gap: 12px; margin: 22px 0; }
.socials a { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(210, 162, 76, .55); transition: background .15s; }
.socials a:hover { background: rgba(245, 188, 209, .12); }
.foot-mail a, .foot-mail span { color: var(--pink); font-weight: 700; text-decoration: none; }
.foot-ai { margin-top: 16px; font-size: 13px; }
.foot-legal { margin-top: 6px; font-size: 13px; color: #988A90; }

/* sticky book button, phones only */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(12, 10, 11, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgba(210, 162, 76, .35);
  transform: translateY(110%); transition: transform .3s ease;
}
.sticky.show { transform: none; }
.sticky .btn { width: 100%; min-height: 56px; font-size: 18px; }

/* studio homepage (/): hero, character cards, brand services + contact */
.btn-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.st-hero {
  position: relative; display: grid; justify-items: center; gap: 30px; overflow: hidden;
  padding: 96px 16px 56px; text-align: center; color: #fff;
  background: repeating-conic-gradient(from 0deg at 50% 72%, #150F13 0 6deg, var(--ink) 6deg 12deg);
}
.st-hero-copy { display: grid; justify-items: center; gap: 14px; max-width: 640px; }
.st-hero .eyebrow { color: var(--gold-hi); }
.st-title { font: 400 clamp(44px, 12.5vw, 86px)/.95 var(--display); text-wrap: balance; text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 rgba(0, 0, 0, .35); }
.st-lead { max-width: 34ch; font: 600 18px/1.45 var(--sans); color: #EADDE2; }
.st-ctas { display: grid; gap: 10px; width: 100%; max-width: 420px; margin-top: 6px; }
.st-ctas .btn { width: 100%; }
.st-phone {
  position: relative; width: min(62vw, 280px); max-width: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 28px; background: var(--ink-2);
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 10px var(--ink), 0 0 0 11.5px rgba(210, 162, 76, .5), 0 40px 90px -30px rgba(245, 188, 209, .45);
}
.st-phone video { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .st-hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .st-hero-copy > :nth-child(2) { animation-delay: .08s; }
  .st-hero-copy > :nth-child(3) { animation-delay: .16s; }
  .st-hero-copy > :nth-child(4) { animation-delay: .24s; }
}

.st-chars { background: var(--pink); }
.st-chars .eyebrow { color: #6B4512; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto; }
.st-card {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r); background: #fff; color: var(--ink); text-decoration: none;
  box-shadow: inset 0 0 0 1.5px rgba(210, 162, 76, .55), 0 24px 48px -28px rgba(12, 10, 11, .45); transition: transform .2s ease;
}
a.st-card:hover { transform: translateY(-3px); }
.st-card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink-2); }
.st-card-media video { width: 100%; height: 100%; object-fit: cover; }
.st-card-media.ph-tile { display: grid; place-content: center; justify-items: center; background: repeating-conic-gradient(from 0deg at 50% 42%, #201820 0 7.5deg, #161115 7.5deg 15deg); }
.st-card-body { display: grid; align-content: start; gap: 8px; padding: 18px; }
.st-card-name { font: 400 30px/1 var(--display); }
.st-card-text { color: var(--muted); }
.st-card-from { font: 800 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #8A5E1C; }
.st-card .btn { margin-top: 6px; }
.st-coming .st-card-media { aspect-ratio: 16 / 9; }

.st-brands { background: var(--cream); }
.st-brands .eyebrow { color: #8A5E1C; }
.st-services { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.st-service { padding: 20px; border-radius: var(--r); background: #fff; box-shadow: inset 0 0 0 1.5px rgba(210, 162, 76, .45); }
.st-glyph { width: 48px; height: 48px; padding: 11px; border-radius: 14px; background: var(--pink-soft); color: var(--pink); }
.st-service h3 { margin-top: 10px; font: 800 19px/1.25 var(--sans); }
.st-service p { margin-top: 6px; color: var(--muted); }
.st-contact-title { font: 400 34px/1.05 var(--display); }
.st-contact-lead { margin: 6px 0 18px; color: var(--muted); }
@media (min-width: 720px) { .st-services { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) {
  .st-hero { grid-template-columns: 1fr minmax(260px, 330px); align-items: center; justify-items: start; gap: 6vw; padding: 120px 6vw 84px; text-align: left; }
  .st-hero-copy { justify-items: start; }
  .st-ctas { grid-auto-flow: column; width: auto; max-width: none; }
  .st-phone { width: 100%; }
}

/* "Our work" (studio page): a 3D ring of 9:16 glass cards that glides on
   its own and can be dragged (s/site.js places each card). A wider video
   sits whole in its card over a blurred copy of itself: nothing cropped.
   Without JS the cards are a plain sideways swipe row. */
.st-work { position: relative; overflow: hidden; background: radial-gradient(70% 55% at 50% 58%, rgba(79, 140, 255, .22), transparent 70%), var(--ink); color: #fff; }
.st-work .eyebrow { color: var(--gold-hi); }
.ring { --tw: min(56vw, 230px); position: relative; margin-inline: -16px; outline: none; }
.ring-stage { display: flex; gap: 12px; overflow-x: auto; padding: 8px 16px 20px; scroll-snap-type: x mandatory; }
.rt { flex: none; width: var(--tw); aspect-ratio: 9 / 16; max-width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; scroll-snap-align: center; -webkit-tap-highlight-color: transparent; }
/* The frame line and glow sit on the outer button; the inner card is cut
   with clip-path, because iPhone Safari ignores a rounded overflow clip on
   a 3D-moved box with a video in it (the video's square corners poked out). */
.rt { border-radius: 18px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent), 0 30px 60px -24px rgba(0, 0, 0, .7); transition: box-shadow .4s ease; }
.rt-card {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 18px; background: var(--ink-2);
  clip-path: inset(0 round 18px);
}
.rt-bg { position: absolute; inset: -12%; background-size: cover; background-position: center; filter: blur(18px) brightness(.55) saturate(1.2); }
.rt video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.rt-wide video { object-fit: contain; }
.rt-land { width: min(calc(var(--tw) * 1.75), 88vw); aspect-ratio: var(--ar); }
.rt-land .rt-bg { display: none; }
.rt-shine { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(125deg, rgba(255, 255, 255, .18), transparent 32%, transparent 70%, color-mix(in srgb, var(--pink) 14%, transparent)); }
.rt.is-front { box-shadow:0 0 0 2px var(--pink), 0 0 40px -6px color-mix(in srgb, var(--pink) 70%, transparent), 0 30px 60px -24px rgba(0, 0, 0, .7); }
.ring-nav { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 4px; }
.ring-nav .orbit-hint { margin: 0; color: rgba(255, 255, 255, .72); }
.ring-btn {
  display: none; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .08); color: #fff; font: 400 28px/1 var(--sans); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 50%, transparent);
  transition: background .2s ease, transform .2s ease;
}
.ring-btn:hover { background: var(--pink); }
.ring-btn:active { transform: scale(.92); }
/* 3D mode (JS on): cards stacked in one spot, placed by transform */
.ring.is-3d { height: calc(var(--tw) * 16 / 9 + 70px); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.ring.is-3d.is-drag { cursor: grabbing; }
/* no preserve-3d: each card is drawn flat in z-index order (front card on
   top), so a wide card never slices through its neighbour */
.ring.is-3d .ring-stage { position: absolute; inset: 0; display: block; overflow: visible; padding: 0; perspective: 900px; }
.ring.is-3d .rt { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; backface-visibility: hidden; }
.ring.is-3d ~ .ring-nav .ring-btn { display: block; }
@media (min-width: 720px) { .ring { --tw: 220px; } }
@media (min-width: 1100px) { .ring { --tw: 250px; } }
@media (min-width: 900px) { .ring { margin-inline: -5vw; } }

/* ---------- motion: the openings (once per visit, never with reduced motion) ---------- */
/* Homepage: a wall of our work flashes in tile by tile, collapses into the
   centre with a flash, the logo lands where it vanished, the curtain lifts.
   About 1.6 s; a tap skips it (s/site.js). */
.intro-cover { display: none; }
html.intro .intro-cover {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 16px;
  overflow: hidden; text-align: center; color: #fff;
  background: radial-gradient(50% 40% at 50% 46%, color-mix(in srgb, var(--pink) 30%, transparent), transparent 70%), var(--ink);
  animation: intro-out .5s cubic-bezier(.7, 0, .2, 1) 1.2s forwards;
}
.iw {
  position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-content: center;
  animation: iw-out .55s cubic-bezier(.7, 0, .3, 1) .55s forwards;
}
.iw-t {
  aspect-ratio: 9 / 16; border-radius: 6px; background: var(--wall) var(--sx) var(--sy) / 600% 300% no-repeat var(--ink-2);
  animation: iw-in .32s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 22ms) both;
}
.iw-t:nth-child(n + 13) { display: none; }
@media (min-width: 720px) { .iw { grid-template-columns: repeat(6, 1fr); } .iw-t:nth-child(n + 13) { display: block; } }
@keyframes iw-in { from { opacity: 0; transform: scale(.55); } }
@keyframes iw-out {
  60% { filter: brightness(1.6); }
  to { transform: scale(.05) rotate(-14deg); opacity: 0; filter: brightness(2.4); }
}
.intro-mark, .intro-word, .intro-sub { position: relative; z-index: 1; }
.intro-mark .ic { width: 78px; height: 78px; color: var(--pink); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--pink) 80%, transparent)); animation: intro-mark .6s cubic-bezier(.2, 1.3, .3, 1) .78s both; }
.intro-word { font: 800 clamp(34px, 9vw, 64px)/1 var(--display); letter-spacing: -.02em; animation: intro-rise .5s cubic-bezier(.2, .8, .2, 1) .86s both; }
.intro-sub { font: 700 12px/1.3 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-hi); animation: intro-rise .5s cubic-bezier(.2, .8, .2, 1) .94s both; }
@keyframes intro-mark { from { opacity: 0; transform: scale(.2); filter: drop-shadow(0 0 60px #fff); } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(14px); letter-spacing: .3em; } }
@keyframes intro-out { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
html.intro .studio-body .st-hero-copy > * { animation-delay: 1.35s; }
html.intro .studio-body .st-hero-copy > :nth-child(2) { animation-delay: 1.43s; }
html.intro .studio-body .st-hero-copy > :nth-child(3) { animation-delay: 1.51s; }
html.intro .studio-body .st-hero-copy > :nth-child(4) { animation-delay: 1.59s; }

/* Character page: no curtain. His top video starts inside a small heart in
   the middle of the screen, the heart beats once, then opens until the
   video fills the screen. About 1.2 s. The mask stays at its huge final
   size afterwards (the heart is then far bigger than the screen). */
html.intro .hero-media {
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 4.6 18 16.4'%3E%3Cpath d='M12 20.5S3.5 15.4 3.5 9.3A4.3 4.3 0 0 1 12 7.4a4.3 4.3 0 0 1 8.5 1.9c0 6.1-8.5 11.2-8.5 11.2z'/%3E%3C/svg%3E");
  -webkit-mask: var(--heart) 50% 44% / 600vmax 600vmax no-repeat; mask: var(--heart) 50% 44% / 600vmax 600vmax no-repeat;
  animation: heart-open 1.2s cubic-bezier(.6, 0, .25, 1) both;
}
/* a soft pink glow behind the heart while it is small (phones: the video fills the hero) */
@media (max-width: 899px) {
  html.intro .hero::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--pink) 55%, transparent), transparent) 50% 44% / 0 0 no-repeat;
    animation: heart-glow 1.2s cubic-bezier(.6, 0, .25, 1) both;
  }
}
@keyframes heart-open {
  0% { -webkit-mask-size: 0 0; mask-size: 0 0; }
  26% { -webkit-mask-size: 46vmin 46vmin; mask-size: 46vmin 46vmin; }
  36% { -webkit-mask-size: 38vmin 38vmin; mask-size: 38vmin 38vmin; }
  48% { -webkit-mask-size: 48vmin 48vmin; mask-size: 48vmin 48vmin; }
  58% { -webkit-mask-size: 44vmin 44vmin; mask-size: 44vmin 44vmin; }
  100% { -webkit-mask-size: 600vmax 600vmax; mask-size: 600vmax 600vmax; }
}
@keyframes heart-glow {
  0% { background-size: 0 0; opacity: 0; }
  30% { background-size: 90vmin 90vmin; opacity: 1; }
  58% { background-size: 80vmin 80vmin; opacity: 1; }
  100% { background-size: 300vmax 300vmax; opacity: 0; }
}
html.intro .top { animation: rise .5s ease .9s both; }
html.intro .hero-copy > * { animation-delay: .95s; }
html.intro .hero-copy > :nth-child(2) { animation-delay: 1.03s; }
html.intro .hero-copy > :nth-child(3) { animation-delay: 1.11s; }
html.intro .hero-copy > :nth-child(4) { animation-delay: 1.19s; }
html.intro .hero-copy > :nth-child(5) { animation-delay: 1.27s; }
@media (prefers-reduced-motion: no-preference) {
  /* hero phones deal in, then float */
  /* (deal uses scale, float uses translate: both stack on the fan-out transform) */
  .st-collage .st-phone { --d: 0s; animation: deal .9s cubic-bezier(.2, .8, .2, 1) var(--d) both, float 6s ease-in-out calc(var(--d) + .9s) infinite; }
  .st-collage .st-p1 { --d: .12s; animation-duration: .9s, 7s; }
  .st-collage .st-p2 { --d: .22s; animation-duration: .9s, 6.5s; }
  html.intro .st-collage .st-p0 { --d: 1.4s; }
  html.intro .st-collage .st-p1 { --d: 1.52s; }
  html.intro .st-collage .st-p2 { --d: 1.62s; }
  /* the hero glow drifts */
  .studio-body .st-hero::before {
    content: ''; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
    background: radial-gradient(30% 30% at 30% 40%, rgba(79, 140, 255, .22), transparent 70%), radial-gradient(25% 25% at 75% 70%, rgba(110, 160, 255, .16), transparent 70%);
    animation: drift 16s ease-in-out infinite alternate;
  }
  .studio-body .st-hero > * { position: relative; z-index: 1; }
  /* character page: the top video settles in from a slow zoom */
  .hero-media video { animation: hero-zoom 2.4s cubic-bezier(.2, .8, .2, 1) both; }
  html.intro .hero-media video { animation: none; }
  /* sections slide in as they come on screen (s/site.js adds .reveal/.in) */
  .reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rd, 0s); }
  .reveal.in { opacity: 1; transform: none; }
}
@keyframes deal { from { opacity: 0; scale: .6; } }
@keyframes hero-zoom { from { opacity: .3; scale: 1.18; } }
@keyframes float { 50% { translate: 0 -12px; } }
@keyframes drift { to { transform: translate(6%, -4%) scale(1.1); } }

/* Global Presence = blue. Same components as the character pages, retuned
   through the tokens: navy grounds, an electric-blue accent, white space,
   and a modern grotesque display face instead of the crooner serif. */
.studio-body {
  --ink: #06101F;
  --ink-2: #0C1A31;
  --pink: #4F8CFF;
  --pink-soft: #E4EDFF;
  --gold: #8DB5FF;
  --gold-hi: #A9C8FF;
  --cream: #F3F6FB;
  --text: #0B1526;
  --muted: #4A5A72;
  --line: #D3DCEA;
  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  background: var(--ink);
}
.studio-body .btn-pink { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.studio-body .btn-pink:hover { background: #3E7BF0; }
.studio-body .lang button[aria-pressed="true"] { color: #fff; }
.studio-body .st-hero { background: radial-gradient(60% 50% at 75% 35%, rgba(79, 140, 255, .35), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgba(79, 140, 255, .18), transparent 70%), var(--ink); }
.studio-body .st-title { font-weight: 800; letter-spacing: -.02em; line-height: .98; text-shadow: none; }
.studio-body .st-title::after { content: ''; display: block; width: 72px; height: 6px; margin: 18px auto 0; border-radius: 3px; background: var(--pink); }
.studio-body .sec-head h2 { font-weight: 800; letter-spacing: -.02em; }
.studio-body .sec-head h2::after { background: var(--pink); height: 5px; width: 56px; border-radius: 3px; }
.studio-body .st-chars { background: var(--cream); }
.studio-body .st-chars .eyebrow, .studio-body .st-brands .eyebrow, .studio-body .st-card-from { color: #2F66D6; }
.studio-body .st-brands { background: #fff; }
.studio-body .st-card-name, .studio-body .st-contact-title { font-weight: 800; letter-spacing: -.02em; }
.studio-body .st-glyph { color: #2F66D6; }
.studio-body .top .mark .ic, .foot .mark .ic { width: 28px; height: 28px; }
.studio-body .ph-glasses { aspect-ratio: 1; filter: none; }
/* "new character" teaser: backlit silhouette */
.st-coming .st-card-media.st-teaser {
  aspect-ratio: 4 / 5; display: grid; place-items: end center; overflow: hidden;
  background: radial-gradient(55% 42% at 50% 36%, rgba(79, 140, 255, .6), transparent 72%), linear-gradient(180deg, #0F2142, #06101F);
}
.st-teaser::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30% 24% at 50% 34%, rgba(143, 184, 255, .45), transparent 70%);
}
.st-shadow { position: relative; display: block; height: 94%; width: auto; max-width: 92%; object-fit: contain; filter: drop-shadow(0 0 1.5px rgba(169, 200, 255, .95)) drop-shadow(0 0 18px rgba(79, 140, 255, .65)); }
/* the shadow headshot: a round profile picture with a story-style ring */
.st-coming .st-card-media.st-teaser:has(.st-avatar) { place-items: center; }
.st-avatar { position: relative; display: block; width: 72%; aspect-ratio: 1; }
.st-avatar-ring {
  position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 0deg, #4F8CFF, #A9C8FF, #2F66D6, #8DB5FF, #4F8CFF);
  filter: drop-shadow(0 0 16px rgba(79, 140, 255, .6));
}
/* clip-path, not just overflow: iPhone Safari ignores a rounded overflow
   clip on an image that has a glow filter, which left the shoulders square */
.st-avatar-pic {
  position: absolute; inset: 3px; overflow: hidden; border-radius: 50%; clip-path: circle(50% at 50% 50%);
  background: radial-gradient(62% 58% at 50% 40%, #6FA0FF, #2B5BB8 45%, #10244A 78%, #0A1830);
  box-shadow: 0 0 0 4px #0B1A35;
}
/* the shoulders fade out into the circle instead of ending on a hard edge */
.st-avatar-pic img {
  position: absolute; left: 0; top: 6%; width: 100%; height: 100%; object-fit: cover; object-position: top;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 92%); mask-image: linear-gradient(to bottom, #000 62%, transparent 92%);
  filter: drop-shadow(0 0 1.5px rgba(169, 200, 255, .9)) drop-shadow(0 0 14px rgba(79, 140, 255, .55));
}
@media (prefers-reduced-motion: no-preference) {
  .st-teaser::before { animation: st-glow 3.2s ease-in-out infinite; }
  .st-avatar-ring { animation: st-spin 6s linear infinite; }
}
@keyframes st-spin { to { transform: rotate(1turn); } }
@keyframes st-glow { 50% { opacity: .45; } }
.studio-body .st-service { box-shadow: inset 0 0 0 1.5px var(--line); }
.studio-body .form-card, .studio-body .st-card { box-shadow: inset 0 0 0 1.5px var(--line), 0 24px 48px -28px rgba(6, 16, 31, .35); }
.studio-body .st-phone { box-shadow: 0 0 0 2px var(--pink), 0 0 0 10px var(--ink), 0 0 0 11.5px rgba(79, 140, 255, .4), 0 40px 90px -30px rgba(79, 140, 255, .55); }
.studio-body input:focus, .studio-body textarea:focus { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(79, 140, 255, .2); }
.studio-body .st-card-media.ph-tile { background: radial-gradient(70% 90% at 50% 40%, #1D3F86, var(--ink)); }
.studio-body .foot .mark .ic { color: var(--pink); }
@media (min-width: 900px) { .studio-body .st-title::after { margin-left: 0; } }

/* studio top: three videos fanned out */
.st-collage { --cw: min(88vw, 400px); position: relative; width: var(--cw); height: calc(var(--cw) * .98); }
.st-collage .st-phone { position: absolute; top: 50%; left: 50%; width: calc(var(--cw) * .5); transform: translate(-50%, -50%); }
.st-collage .st-p0 { z-index: 3; }
.st-collage .st-p1 { left: 24%; z-index: 2; transform: translate(-50%, -47%) rotate(-8deg) scale(.84); }
.st-collage .st-p2 { left: 76%; z-index: 2; transform: translate(-50%, -47%) rotate(8deg) scale(.84); }
@media (min-width: 900px) {
  .studio-body .st-hero { grid-template-columns: 1fr minmax(360px, 460px); }
  .st-collage { --cw: 440px; }
  .st-collage .st-phone { width: calc(var(--cw) * .5); }
}

/* trust row under the studio top */
.st-trust {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin: 0; list-style: none;
  padding: 18px max(16px, calc((100% - 1080px) / 2));
  background: var(--ink-2); border-block: 1px solid rgba(255, 255, 255, .08);
}
.st-trust li { display: flex; align-items: center; gap: 9px; font: 700 13.5px/1.25 var(--sans); color: #DCE6F7; }
.st-trust .ic { width: 20px; height: 20px; flex: none; color: var(--pink); }
@media (min-width: 900px) { .st-trust { grid-template-columns: repeat(4, auto); justify-content: space-between; } }

/* terms page */
.terms-body .top { position: relative; padding-bottom: 14px; background: var(--ink); }
.terms { padding: 40px 16px 64px; background: var(--cream); color: var(--text); }
.terms h1 { font: 400 clamp(40px, 10vw, 60px)/1 var(--display); text-wrap: balance; }
.terms-date { margin-top: 10px; font-size: 14px; color: var(--muted); }
.terms-intro { margin-top: 16px; font-weight: 600; }
.terms-sec { margin-top: 28px; }
.terms-sec h2 { font: 800 19px/1.3 var(--sans); }
.terms-sec p { margin-top: 8px; color: #3C2E35; }
.terms-back { margin-top: 36px; }
.consent a, .foot-legal a { color: inherit; font-weight: 700; }

/* characters list */
.chars { min-height: 100svh; padding-top: 96px; }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.char-card { display: grid; gap: 8px; text-decoration: none; color: #fff; }
.char-card .tile-media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 18px; background: var(--ink-2); }
.char-card img { width: 100%; height: 100%; object-fit: cover; }
.char-card h2 { margin-top: 6px; font: 400 28px/1 var(--display); color: var(--pink); }
.char-card p { color: #CDBFC6; }

/* ---------- bigger screens ---------- */
@media (min-width: 720px) {
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .form-card { padding: 36px; }
  .step { padding: 18px 10px; }
  .step-t { font-size: 16px; }
}

@media (min-width: 900px) {
  .top { padding: 22px 5vw 0; }
  .hero {
    display: grid; grid-template-columns: 1fr minmax(300px, 400px); align-items: center; gap: 6vw;
    min-height: min(100vh, 920px); padding: 100px 6vw 72px;
    background: repeating-conic-gradient(from 0deg at 72% 50%, #130F11 0 6deg, var(--ink) 6deg 12deg);
  }
  .hero-media {
    position: relative; inset: auto; order: 2; aspect-ratio: 9 / 16; max-height: 76vh; overflow: hidden; border-radius: 28px;
    box-shadow: 0 0 0 2px var(--gold), 0 0 0 10px var(--ink), 0 0 0 11.5px rgba(210, 162, 76, .5), 0 40px 90px -30px rgba(245, 188, 209, .45);
  }
  .hero-media::after { display: none; }
  .ph-hero { padding-top: 0; place-content: center; }
  .ph-glasses { width: 60%; }
  .hero-copy { padding: 0; text-align: left; }
  .tagline { margin-left: 0; font-size: 22px; }
  .hero-note { justify-content: flex-start; }
  .name { font-size: clamp(84px, 9vw, 140px); }
  .sec { padding: 104px 5vw; }
  .foot { padding-bottom: 56px; }
  .sticky { display: none; }
}

/* iPhone Safari: a rounded box with overflow:hidden does NOT clip a video,
   a filtered image or anything moved in 3D inside it, so square corners
   poke out. clip-path always clips. Each rule clips the media itself (or
   the inner box) so the outer frame lines and glows are not cut off. */
.st-phone video, .st-phone img { clip-path: inset(0 round 28px); }
.st-card-media { clip-path: inset(0 round var(--r) var(--r) 0 0); }
.hl-screen { clip-path: inset(0 round 23px); }
.mb-sheet img { clip-path: inset(0 round 14px); }
@media (min-width: 900px) { .hero-media video, .hero-media img { clip-path: inset(0 round 28px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}