/* AI Avatars and Spokespeople service page */
:root { --pk: #FF0A7A; --vi: #8a4dff; }

/* ---------- hero: the voice mirror ---------- */
.av-hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: #050405; isolation: isolate; }
.av-hero > .wrap { width: 100%; }
.av-stage { position: absolute; inset: 0; z-index: -2; }
.av-scan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease); }
.av-scan.on { opacity: 1; }
.av-still { position: absolute; right: 0; top: 0; height: 100%; width: auto; max-width: 62%; aspect-ratio: 1; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 70%, transparent); mask-image: radial-gradient(closest-side, #000 70%, transparent); transition: opacity 1s var(--ease); filter: grayscale(.35) contrast(1.1); }
.gl .av-still.off { opacity: 0; }
/* still fallback keeps the scan-line idea: a fine raster over the portrait */
.av-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(5 4 5 / .78) 0 3px, transparent 3px 6px); transition: opacity 1s var(--ease); }
.gl .av-stage.live::before { opacity: 0; }
.av-hud { position: absolute; z-index: 2; bottom: clamp(24px, 4vh, 40px); left: var(--pad); display: flex; gap: 14px; font: 400 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.av-hud span + span::before { content: ""; display: inline-block; width: 14px; height: 1px; margin-right: 14px; vertical-align: middle; background: rgb(255 255 255 / .25); }
.av-hud [data-hud-l] { color: var(--pk); }
:is(.still, .no-gl) .av-hud [data-hud-n] { display: none; }
.av-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #050405 0%, rgb(5 4 5 / .86) 24%, rgb(5 4 5 / .4) 40%, transparent 54%), linear-gradient(0deg, var(--ink-0) 0%, transparent 20%), linear-gradient(180deg, rgb(5 4 5 / .7) 0%, transparent 16%); }
.av-hero-in { position: relative; padding-top: calc(var(--hd, 72px) + 40px); padding-bottom: 140px; pointer-events: none; }
.av-hero-in > * { max-width: 600px; pointer-events: auto; }
.av-h1 { font: 900 var(--t-3xl)/.95 var(--f-display); letter-spacing: -0.035em; text-wrap: balance; }
.av-h1 em { font-style: normal; color: var(--pk); }
.av-lede { margin-top: 26px; font-size: var(--t-m); line-height: 1.45; color: var(--fg-2); max-width: 440px; }
.av-hero .actions { margin-top: 34px; }

.av-say { position: absolute; right: var(--pad); bottom: clamp(24px, 5vh, 56px); width: min(400px, 36vw); padding: 16px 18px 14px; border: 1px solid rgb(255 255 255 / .14); border-radius: 16px; background: rgb(10 8 10 / .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.av-say-h { display: flex; align-items: center; gap: 10px; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); }
.av-say-h i { width: 7px; height: 7px; border-radius: 50%; background: var(--pk); box-shadow: 0 0 0 0 rgb(255 10 122 / .6); animation: av-ping 1.6s infinite; }
.av-say-h b { margin-left: auto; font-weight: 400; color: var(--fg-3); border: 1px solid var(--rule); padding: 4px 6px; border-radius: 4px; }
@keyframes av-ping { 70% { box-shadow: 0 0 0 8px rgb(255 10 122 / 0); } 100% { box-shadow: 0 0 0 0 rgb(255 10 122 / 0); } }
.av-cap { margin-top: 14px; min-height: 2.7em; font: 700 var(--t-m)/1.3 var(--f-display); letter-spacing: -0.01em; color: #fff; }
.av-cap[dir="rtl"] { font-family: var(--f-body); text-align: right; }
.av-wave { display: flex; align-items: center; gap: 3px; height: 26px; margin: 10px 0 12px; }
.av-wave i { flex: 1; height: 100%; border-radius: 2px; background: linear-gradient(var(--pk), var(--vi)); transform: scaleY(var(--h, .06)); transition: transform .08s linear; }
.av-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.av-langs button, .av-swap, .av-snd { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule); background: rgb(255 255 255 / .03); color: var(--fg-2); font: 600 13px/1 var(--f-body); cursor: pointer; transition: border-color .3s, color .3s, background-color .3s; }
.av-langs button:hover, .av-swap:hover, .av-snd:hover { color: #fff; border-color: rgb(255 255 255 / .4); }
.av-langs button[aria-pressed="true"], .av-snd[aria-pressed="true"] { background: var(--pk); border-color: var(--pk); color: #fff; }
.av-say-row { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgb(255 255 255 / .08); }
.av-swap { flex: 1; }
:is(.av-langs button, .av-swap, .av-snd, .av-seg button, .av-play, .av-btn):focus-visible { outline: 2px solid var(--pk); outline-offset: 2px; }

/* ---------- shared heads + carousels ---------- */
.av-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 5vh, 56px); }
.av-where, .av-how { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); overflow: hidden; }
.av-nav { display: flex; gap: 10px; flex: none; }
.av-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--rule); background: none; color: var(--fg); font-size: 20px; cursor: pointer; transition: background-color .3s, border-color .3s; }
.av-btn:hover { background: var(--pk); border-color: var(--pk); }
.av-track { display: flex; gap: clamp(14px, 1.6vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--pad) 8px; scroll-padding-inline: var(--pad); cursor: grab; }
.av-track::-webkit-scrollbar { display: none; }
.av-track.drag { cursor: grabbing; scroll-snap-type: none; }
.av-track.drag .av-card { pointer-events: none; }
.av-card { position: relative; flex: 0 0 clamp(270px, 34vw, 540px); aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; scroll-snap-align: start; border: 1px solid var(--rule-soft); margin: 0; }
.av-track-steps .av-card { flex-basis: clamp(260px, 28vw, 440px); }
.av-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); -webkit-user-drag: none; user-select: none; }
.av-card:hover img { transform: scale(1.06); }
.av-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .1) 48%, transparent 70%); }
.av-card > div { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(20px, 2vw, 30px); }
.av-card span { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; color: var(--pk); }
.av-card h3 { font: 700 var(--t-l)/1.08 var(--f-display); margin: 12px 0 10px; }
.av-card p { color: var(--fg-2); line-height: 1.45; max-width: 30ch; }

/* ---------- studio ---------- */
.av-studio { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); background: radial-gradient(50% 60% at 70% 55%, oklch(0.22 0.08 340 / .45), transparent 70%), var(--ink-0); }
.av-studio-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
.av-note { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.av-desk { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.av-ctrl { display: grid; gap: 22px; }
.av-ctrl fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.av-ctrl legend { padding: 0; margin-bottom: 10px; font: 400 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.av-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.av-seg button { min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--rule); background: var(--ink-1); color: var(--fg-2); font: 600 var(--t-s)/1 var(--f-body); cursor: pointer; transition: border-color .3s, color .3s, background-color .3s; }
.av-seg button:hover { color: #fff; }
.av-seg button[aria-pressed="true"] { border-color: var(--pk); color: #fff; background: oklch(0.22 0.07 358); }

.av-out { display: grid; gap: 16px; justify-items: center; }
.av-frame { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; border: 1px solid rgb(255 255 255 / .16); background: #000; box-shadow: 0 50px 100px -40px rgb(0 0 0 / .9), 0 0 0 6px rgb(255 255 255 / .03); transition: aspect-ratio .7s var(--ease), width .7s var(--ease), border-radius .7s var(--ease); }
.av-frame[data-fmt="tall"] { width: min(100%, 340px); aspect-ratio: 9 / 16; border-radius: 28px; }
.av-frame[data-fmt="sq"] { width: min(100%, 480px); aspect-ratio: 1; }
.av-frame[data-fmt="kiosk"] { width: min(100%, 300px); aspect-ratio: 9 / 18; border-radius: 10px; border-width: 10px; border-color: #1a1619; }
.av-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: av-breathe 9s ease-in-out infinite alternate; transition: opacity .5s; }
@keyframes av-breathe { to { transform: scale(1.05) translateY(-1%); } }
.av-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .78), transparent 40%); pointer-events: none; }
.av-rec, .av-fmt { position: absolute; top: 14px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 6px; background: rgb(0 0 0 / .5); font: 400 10px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.av-rec { left: 14px; } .av-fmt { right: 14px; color: var(--fg-2); }
.av-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff2d55; }
.av-rec.live i { animation: av-blink 1s steps(2) infinite; }
@keyframes av-blink { 50% { opacity: .2; } }
.av-sub { position: absolute; left: 6%; right: 6%; bottom: 46px; z-index: 1; text-align: center; font: 700 clamp(15px, 1.5vw, 20px)/1.35 var(--f-body); color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / .8); min-height: 1.35em; }
.av-mini { position: absolute; left: 50%; bottom: 16px; z-index: 1; transform: translateX(-50%); display: flex; gap: 3px; align-items: center; height: 18px; width: 120px; }
.av-mini i { flex: 1; height: 100%; border-radius: 2px; background: var(--pk); transform: scaleY(var(--h, .1)); transition: transform .08s linear; }
.av-read { margin: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); border-radius: 12px; overflow: hidden; }
.av-read div { padding: 14px 16px; background: var(--ink-0); }
.av-read dt { font: 400 10px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.av-read dd { margin: 6px 0 0; font: 700 var(--t-m)/1.1 var(--f-display); color: #fff; }
.av-play { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--pk); background: none; color: #fff; font: 600 var(--t-s)/1 var(--f-body); cursor: pointer; transition: background-color .3s; }
.av-play:hover { background: var(--pk); }

/* ---------- consent ---------- */
.av-consent { position: relative; min-height: 90svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; border-top: 1px solid var(--rule-soft); }
.av-consent > .wrap { width: 100%; }
.av-consent-bg { position: absolute; inset: 0; z-index: -2; }
.av-consent-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.av-consent::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--ink-0) 0%, rgb(13 11 12 / .7) 34%, transparent 70%); }
.av-consent-in { padding-block: 120px clamp(60px, 10vh, 110px); }
.av-consent-p { margin-top: 22px; max-width: 46ch; font-size: var(--t-m); line-height: 1.5; color: var(--fg-2); }

/* faq */
.sv-faq { padding-block: clamp(80px, 12vh, 140px); border-top: 1px solid var(--rule-soft); }
.sv-faq .faq { margin-top: 32px; }
.sv-faq details { border-top: 1px solid var(--rule-soft); padding: 18px 0; }
.sv-faq summary { cursor: pointer; font: 700 var(--t-m)/1.3 var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; color: var(--pk); font-size: 1.4em; line-height: 1; transition: transform .3s; }
.sv-faq details[open] summary::after { transform: rotate(45deg); }
.sv-faq details p { margin-top: 12px; max-width: 70ch; color: var(--fg-2); line-height: 1.65; }
.close-alt { display: flex; flex-wrap: wrap; gap: 0 32px; }

@media (max-width: 900px) {
  .av-hero { align-items: start; min-height: auto; }
  .av-stage { top: 56px; bottom: auto; height: min(112vw, 56svh); }
  .av-still { left: 50%; right: auto; transform: translateX(-50%); max-width: none; height: 100%; }
  .av-hero::after { background: linear-gradient(0deg, var(--ink-0) 0%, var(--ink-0) calc(100% - min(112vw, 56svh) - 40px), transparent calc(100% - min(112vw, 56svh) + 60px)); }
  .av-hud { top: calc(min(112vw, 56svh) - 6px); bottom: auto; gap: 10px; font-size: 9px; }
  .av-hud span + span::before { width: 10px; margin-right: 10px; }
  .av-hero-in { padding-top: calc(min(112vw, 56svh) + 30px); padding-bottom: 28px; }
  .av-hero .crumb { margin-bottom: 18px; }
  .av-say { position: relative; right: auto; bottom: auto; width: auto; margin: 0 var(--pad) 48px; }
  .av-head { flex-wrap: wrap; }
  .av-card, .av-track-steps .av-card { flex-basis: 80vw; }
  .av-desk { grid-template-columns: 100%; }
  .av-out { order: -1; }
  .av-frame[data-fmt="tall"] { width: min(100%, 260px); }
  .av-frame[data-fmt="kiosk"] { width: min(100%, 230px); }
  .av-read dd { font-size: var(--t-s); }
}
@media (min-width: 901px) {
  .av-consent-in { display: grid; justify-items: start; padding-left: max(var(--pad), 58vw); }
  .av-consent::after { background: linear-gradient(0deg, var(--ink-0) 0%, transparent 40%), linear-gradient(270deg, rgb(13 11 12 / .85) 0%, rgb(13 11 12 / .5) 38%, transparent 55%); }
  .av-consent-bg img { object-position: 30% 40%; }
}

/* ---------- polish pass (24 Oct) ---------- */
/* card kicker: a single square pixel instead of a step number */
.av-card .av-px { display: block; width: 8px; height: 8px; background: var(--pk); }
.av-card h3 { margin-top: 14px; }
/* the page's own "gl" flag (WebGL2) collides with the home page's pinned 180vh closing in a.css; this page has no
   closing animation, so the closing stays a normal section like the other service pages */
.motion.gl .closing { height: auto; }
.motion.gl .closing-stage { position: relative; top: auto; height: auto; min-height: 100svh; }
/* rhythm: lede and FAQ measure */
.av-consent-p { max-width: 52ch; }
.sv-faq .faq { max-width: 880px; }
.sv-faq summary { padding-block: 6px; }
.sv-faq details p { max-width: 68ch; }
/* hover and focus: carousel cards lift their copy, keyboard users get the same */
.av-card > div { transition: transform .8s var(--ease); }
.av-card:hover > div { transform: translateY(-6px); }
.av-track:focus-visible { outline: 2px solid var(--pk); outline-offset: 6px; border-radius: 22px; }
@media (max-width: 900px) {
  .av-langs button, .av-swap, .av-snd { min-height: 44px; }
  .av-langs button { min-width: 44px; }
  .crumb a { display: inline-block; padding-block: 15px; margin-block: -15px; }
  .ft a { display: inline-block; padding-block: 12px; }
  .av-cap { font-size: var(--t-m); min-height: 2.6em; }
}
@media (prefers-reduced-motion: reduce) {
  .av-frame img, .av-say-h i, .av-rec.live i { animation: none; }
  .av-card img, .av-card > div { transition: none; }
}