/* =========================================================
   Effects layer: rolling header shield, magma embers on hover, lead-journey bullet,
   3D sword, gliding service shields, services heroine orbit, testimonial scrolls, heroine-flight finale, case-study folder extras.
   All designs are original. Motion runs only with prefers-reduced-motion: no-preference.
   ========================================================= */

/* ---------- Header: a shield that rolls along the header as the page scrolls ---------- */
.nav { position: relative; }
.hdr-shield-track { position: absolute; left: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px); bottom: -15px; height: 30px; pointer-events: none; z-index: 2; }
.hdr-shield-trail {
  position: absolute; left: 0; top: 50%; height: 2px; width: var(--roll-x, 0px); translate: 0 -50%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(227, 165, 76, 0), rgba(255, 214, 150, .85));
  box-shadow: 0 0 8px rgba(255, 180, 90, .6);
}
.hdr-shield {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  transform: translateX(var(--roll-x, 0px)); filter: drop-shadow(0 4px 6px rgba(20, 2, 1, .7));
}
.hdr-shield-face { width: 100%; height: 100%; display: block; transform: rotate(var(--roll-deg, 0deg)); }
.hdr-shield-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 70% 78%, rgba(0, 0, 0, .35), transparent 55%); }
@media (max-width: 720px) { .hdr-shield-track { bottom: -12px; height: 24px; } .hdr-shield { width: 24px; height: 24px; } }

/* ---------- Magma embers on hover ---------- */
.ember-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 60; }
.fx-hot { transition: box-shadow .35s var(--ease-out, ease); }
.fx-hot.is-hot { box-shadow: 0 0 0 1px rgba(255, 150, 70, .45), 0 18px 46px -18px rgba(255, 90, 20, .55), inset 0 -40px 60px -50px rgba(255, 110, 30, .35); }

/* ---------- Lead journey: a bullet flies along the line ---------- */
.journey-lead {
  width: 64px; height: 22px; margin-left: -58px; margin-top: -3px; border-radius: 0;
  background: none; box-shadow: none; filter: drop-shadow(0 0 6px rgba(255, 190, 110, .7));
}
.journey-lead svg { display: block; width: 100%; height: 100%; }
.journey-lead::before { /* tracer trail */
  content: ""; position: absolute; right: calc(100% - 16px); top: 50%; width: 120px; height: 4px; translate: 0 -50%; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 170, 80, 0), rgba(255, 214, 150, .9)); filter: blur(1px);
}
@media (max-width: 860px) { .journey-lead { rotate: 90deg; margin-left: -30px; margin-top: -40px; } }

/* ---------- Case-study folders: galleries open only when clicked ---------- */
.cb-reveals { margin-top: clamp(20px, 2.5vw, 28px); padding-top: clamp(18px, 2.2vw, 24px); border-top: 1px solid var(--rule); }
.cb-reveal-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cb-reveal-chip { cursor: pointer; font: inherit; }
.cb-reveal-chip::after { content: "+"; margin-left: .55rem; font-weight: 800; color: var(--beige); }
.cb-reveal-chip[aria-expanded="true"] { background: var(--cream); color: var(--oxblood); border-color: var(--cream); }
.cb-reveal-chip[aria-expanded="true"]::after { content: "–"; color: var(--red); }
.cb-reveal { margin-top: 1.25rem; }
.cb-reveal.is-entering { animation: fx-drop .4s var(--ease-out, ease); }
@keyframes fx-drop { from { opacity: 0; transform: translateY(-10px); } }
.cb-count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-left: .4rem; padding: 0 .35em; border-radius: 999px; background: var(--red); color: var(--cream); font-size: .75em; letter-spacing: 0; }
/* the project-file page */
.case-page .cp-folders { margin-top: .5rem; }
.case-page .cp-folders .ftab { display: inline-flex; align-items: center; text-decoration: none; }
.case-page .cp-folders .ftab[aria-current="true"] { background: var(--wine); color: var(--cream); }
.case-page .cp-folders .ftab[aria-current="true"]::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 10px; height: 3px; border-radius: 3px; background: var(--red); }
.cp-panel { --panel-pad: clamp(22px, 3.5vw, 44px); }
.cp-panel .carousel { --start: var(--panel-pad); }
.cp-back { display: inline-flex; margin-bottom: 1.5rem; }
.cp-panel .case-file { margin-bottom: 2rem; }
.cp-panel .case-file-title { font-size: clamp(1.9rem, 3.8vw, 3rem); }

/* ---------- Conversion Triangle: a bigger 3D sword ---------- */
.sword3d { position: absolute; z-index: 3; right: -9%; top: -14%; height: 128%; aspect-ratio: 120 / 600; perspective: 900px; pointer-events: none; }
.sword3d-spin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateZ(18deg) rotateY(var(--sw-ry, -20deg)) translateY(var(--sw-y, 0px)); }
.sword3d-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: visible; }
.sword3d-layer.is-depth { filter: brightness(.45) saturate(.8); }
.sword3d-spin::after { /* soft light it casts */
  content: ""; position: absolute; left: 50%; top: 30%; width: 220%; height: 60%; translate: -50% 0; border-radius: 50%; transform: translateZ(-30px);
  background: radial-gradient(closest-side, rgba(255, 200, 120, .28), transparent); pointer-events: none;
}
@media (max-width: 900px) { .sword3d { right: -2%; top: -6%; height: 112%; opacity: .9; } }

/* ---------- What I work on (second page): shields glide along a row and settle into focus ---------- */
.sh { --gold-1: #fff1c9; --gold-2: #e8b35c; --gold-3: #9a5a1c; --ink: #0b0605;
  position: relative; isolation: isolate; background: var(--ink); color: var(--soft-cream); }
.sh-stage { position: relative; overflow: clip; padding: clamp(72px, 9vw, 120px) 0; }
.sh-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 40% at 40% 60%, rgba(255, 176, 84, calc(.06 + .1 * var(--sh-w, 1))), transparent 70%),
    radial-gradient(70% 70% at 42% 60%, rgba(102, 11, 5, .4), transparent 72%),
    radial-gradient(38% 42% at 90% 92%, rgba(11, 6, 5, .9), transparent 72%),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55)); }
/* top: the section title, unchanged */
.sh-head { position: relative; z-index: 3; }
.sh-head .kicker { color: var(--gold-2); }
.sh-head .h2 em { font-style: italic; background: linear-gradient(100deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-head .lede { color: var(--beige); margin-top: 1rem; }
/* bottom: the focused service and the buttons, centred under its shield */
.sh-foot { position: relative; z-index: 3; text-align: center; }
.sh-detail { max-width: 40rem; margin: 0 auto; min-height: 7.4rem; }
.sh-count { margin: 0; font: 700 .72rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .16em; color: var(--gold-2); }
.sh-of { color: rgba(220, 195, 170, .55); }
.sh-title { font-family: var(--font-accent); font-weight: 800; font-size: clamp(1.35rem, 2vw, 1.75rem); margin: .5rem 0 .35rem; color: var(--gold-1); }
.sh-text { color: var(--beige); font-size: 1rem; margin: 0 auto; max-width: 34rem; }
@media (prefers-reduced-motion: no-preference) { .sh-detail.is-swap > * { animation: sh-in .55s var(--ease-out, ease) both; } .sh-detail.is-swap .sh-text { animation-delay: .06s; } }
@keyframes sh-in { from { opacity: 0; transform: translateY(8px); } }
.sh-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-top: 1.1rem; }
.sh-steps { display: flex; gap: .5rem; }
.sh-step { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(232, 179, 92, .45); background: rgba(20, 8, 6, .6); color: var(--gold-1); transition: background-color .2s, color .2s; }
.sh-step:hover { background: var(--gold-1); color: #2a0d07; }
.sh-step svg { width: 18px; height: 18px; }
.sh-sound .sh-sound-on, .sh-sound[aria-pressed="true"] .sh-sound-off { display: none; }
.sh-sound[aria-pressed="true"] .sh-sound-on { display: block; }
.sh-sound[aria-pressed="true"] { border-color: rgba(255, 213, 142, .8); }
.sh-actions .btn-row { justify-content: center; }
.sh-hint { flex-basis: 100%; font: 700 .66rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 179, 92, .7); }
.sh-scene { position: relative; z-index: 1; }
.sh-track { margin: 0; padding: 0; list-style: none; }
.sh-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: center; }
.sh-btn:focus { outline: none; }
.sh-btn:focus-visible .sh-disc { outline: 2px solid var(--gold-2); outline-offset: 6px; border-radius: 50%; }
.sh-disc { position: relative; display: block; aspect-ratio: 1; border-radius: 50%; }
.sh-img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; transform: rotate(var(--spin, 0deg)); }
.sh-glow { position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; opacity: calc(.15 + .85 * var(--w, 0));
  background: radial-gradient(closest-side, rgba(255, 186, 96, .34), rgba(255, 150, 60, .12) 55%, transparent 72%); }
/* a warm rim light that travels slowly round the edge of the shield in focus */
.sh-rim { position: absolute; inset: -1.5%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: var(--w, 0);
  background: conic-gradient(from var(--ang, 0deg), transparent 0 52%, rgba(255, 214, 150, .95) 70%, rgba(255, 170, 80, .5) 78%, transparent 92%);
  -webkit-mask: radial-gradient(closest-side, transparent 93%, #000 95.5%, #000 98.5%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 93%, #000 95.5%, #000 98.5%, transparent 100%); }
/* a soft glint that slides across the metal as the shield turns */
.sh-shine { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: .7;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 238, 205, .2) 50%, transparent 62%) var(--glint, 50%) 0 / 260% 100% no-repeat; }
.sh-name { display: block; margin-top: .9rem; font: 800 .82rem/1.2 var(--font-accent); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-1); }
.sh-desc { display: block; margin-top: .35rem; font-size: .85rem; line-height: 1.45; color: var(--beige); }
.sh-motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* still version (reduced motion, or before the script runs): a grid of shields with their text */
.sh:not(.is-live):not(.is-swipe) .sh-detail, .sh:not(.is-live):not(.is-swipe) .sh-steps,
.sh:not(.is-live):not(.is-swipe) .sh-hint, .sh:not(.is-live):not(.is-swipe) .sh-motes { display: none; }
.sh:not(.is-live):not(.is-swipe) .sh-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px;
  width: min(var(--container, 1200px), 100%); margin: 2.5rem auto 2rem; padding: 0 var(--gutter); }
.sh:not(.is-live):not(.is-swipe) .sh-disc { width: min(118px, 70%); margin: 0 auto; }
.sh:not(.is-live):not(.is-swipe) .sh-rim { display: none; }
.sh:not(.is-live):not(.is-swipe) .sh-btn { cursor: default; }

/* live (desktop, motion): title on top, the shield row across the middle, the focused service below it;
   the page scroll glides the row while the stage stays pinned */
.sh.is-live { height: calc(100vh + var(--sh-n, 8) * 46vh); }
.sh.is-live .sh-stage { position: sticky; top: 0; height: 100vh; padding: calc(var(--header-h, 76px) + 2.5vh) 0 3.5vh; display: flex; flex-direction: column; }
.sh.is-live .sh-scene { flex: 1 1 auto; min-height: 0; perspective: 1400px; perspective-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent); }
.sh.is-live .sh-track, .sh.is-swipe .sh-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.sh.is-live .sh-item { position: absolute; left: 0; top: 0; width: var(--sh-s, 360px); transform-style: preserve-3d; will-change: transform, opacity; }
.sh.is-live .sh-disc { transform-style: preserve-3d; }
/* a little thickness behind the face, visible when it turns */
.sh.is-live .sh-disc::before { content: ""; position: absolute; inset: 1%; border-radius: 50%; transform: translateZ(-7px);
  background: radial-gradient(closest-side, #4a2a12, #24140a 70%, #120a05); }
/* names under the side shields only; the focused one is named in the text below */
.sh.is-live .sh-name { position: absolute; left: 0; right: 0; top: 100%; opacity: calc(.7 * (1 - var(--w, 0))); transform: translateZ(1px); }
.sh.is-live .sh-desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the focused service and its buttons sit in the bottom-right corner, so the shield can be big */
.sh.is-live .sh-foot { position: absolute; z-index: 4; left: auto; right: max(var(--gutter), calc((100vw - var(--container, 1200px)) / 2 + var(--gutter)));
  bottom: 5vh; width: min(30rem, 36vw); padding: 0; margin: 0; text-align: left; }
.sh.is-live .sh-detail { margin: 0; min-height: 0; }
.sh.is-live .sh-text { margin: 0; }
.sh.is-live .sh-actions { justify-content: flex-start; }
.sh.is-live .sh-actions .btn-row { justify-content: flex-start; }

/* phones and tablets: title, a swipeable row, then the focused service and buttons */
.sh.is-swipe .sh-scene { margin: 1.5rem 0 .5rem; perspective: 900px; }
.sh.is-swipe .sh-track { position: relative; inset: auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 1.5rem 19vw 1rem; -webkit-overflow-scrolling: touch; }
.sh.is-swipe .sh-track::-webkit-scrollbar { display: none; }
.sh.is-swipe .sh-item { flex: 0 0 62vw; scroll-snap-align: center; transform-style: preserve-3d; }
.sh.is-swipe .sh-desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sh.is-swipe .sh-name { opacity: calc(.3 + .7 * var(--w, 0)); }
.sh.is-swipe .sh-hint { display: none; }
/* the wrapper the script adds around the shields and their caption: no box of its own except on phones (.is-pin) */
.sh-pin { display: contents; }
.sh-pin-start, .sh-pin-run { display: none; }
/* phones: the shields and their caption hold under the header while scrolling glides from one shield to the next */
.sh.is-pin .sh-pin-start { display: block; height: 0; }
.sh.is-pin .sh-pin { display: flex; flex-direction: column; justify-content: center; position: sticky; top: var(--header-h, 76px);
  height: calc(100svh - var(--header-h, 76px)); padding: 0 0 2vh; }
.sh.is-pin .sh-pin-run { display: block; height: calc((var(--sh-n, 8) - 1) * 32svh); }
.sh.is-pin .sh-stage { padding-bottom: 0; }
.sh.is-pin .sh-scene { margin: .5rem 0 .25rem; }
.sh.is-pin .sh-track { overflow: hidden; scroll-snap-type: none; }
.sh.is-pin .sh-detail { min-height: 0; }
@media (max-height: 760px) { .sh.is-pin .sh-item { flex-basis: 50vw; } .sh.is-pin .sh-text { font-size: .92rem; } }
@media (max-height: 640px) { .sh.is-pin .sh-item { flex-basis: 42vw; } }

/* ---------- Services (fourth page): the scroll turns the heroine while cards orbit her ---------- */
.ho { --gold-1: #fff1c9; --gold-2: #e8b35c; --gold-3: #9a5a1c; --ink: #0b0605;
  position: relative; isolation: isolate; background: var(--ink); color: var(--soft-cream); }
/* the section title and intro: the page's existing copy */
.ho-head { position: relative; z-index: 5; padding-top: clamp(72px, 9vw, 120px); }
.ho-head .kicker { color: var(--gold-2); }
.ho-head .h2 em { font-style: italic; background: linear-gradient(100deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ho-head .lede { color: var(--beige); margin-top: 1rem; }

/* the cards: dark, nearly opaque, a fine gold edge; real text with strong contrast */
.ho-cards { list-style: none; margin: 0; padding: 0; }
.ho-card { position: relative; margin: 0; padding: .95rem 1.05rem 1.05rem; border-radius: var(--radius, 14px); color: var(--soft-cream);
  background: linear-gradient(160deg, rgba(60, 17, 10, .93), rgba(18, 7, 5, .95) 62%);
  border: 1px solid rgba(232, 179, 92, calc(.3 + .3 * var(--fr, 1)));
  box-shadow: inset 0 1px 0 rgba(255, 241, 201, .13), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.ho-card::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 201, .85), transparent); opacity: calc(.35 + .65 * var(--fr, 1)); }
.ho-card-num { display: block; margin-bottom: .5rem; font: 700 .64rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .16em; color: var(--gold-2); }
.ho-card-title { margin: 0; font: 800 .82rem/1.3 var(--font-accent); letter-spacing: .07em; text-transform: uppercase; color: var(--gold-1); }
.ho-card--short .ho-card-title { font: 400 1.15rem/1.25 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--cream); }
.ho-card.is-front { border-color: rgba(255, 221, 160, .85);
  box-shadow: inset 0 1px 0 rgba(255, 241, 201, .2), 0 0 0 1px rgba(232, 179, 92, .25), 0 0 34px -6px rgba(255, 176, 84, .45), 0 22px 44px -22px rgba(0, 0, 0, .9); }
.ho-card--service .ho-card-title { font-size: .9rem; }
.ho-card-text { margin: .45rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--beige); }
.ho-tags { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.ho-tags li { padding: .26rem .55rem; border-radius: 999px; border: 1px solid rgba(232, 179, 92, .3); background: rgba(255, 241, 201, .04);
  font-size: .78rem; line-height: 1.2; color: var(--soft-cream); }
.ho-group-title { margin: 0; font: 400 clamp(1.4rem, 2.2vw, 1.75rem)/1.2 var(--font-display); color: var(--cream); }
.ho-group-num { margin-right: .4rem; font: 700 .72rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .16em; color: var(--gold-2); vertical-align: .35em; }

/* the stage numbers and names; the bar under each fills as you scroll through its stage */
.ho-rail { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.ho-rail-btn { position: relative; display: inline-flex; align-items: baseline; gap: .55rem; min-height: 44px; padding: .7rem 0 .8rem;
  border: 0; background: none; cursor: pointer; color: rgba(220, 195, 170, .62);
  font: 800 .76rem/1.2 var(--font-accent); letter-spacing: .09em; text-transform: uppercase; transition: color .3s; }
.ho-rail-btn::before, .ho-rail-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: rgba(232, 179, 92, .3); }
.ho-rail-btn::after { height: 2px; bottom: -.5px; background: linear-gradient(90deg, var(--gold-2), var(--gold-1)); transform-origin: left; transform: scaleX(var(--k, 0)); }
.ho-rail-btn:hover, .ho-rail-btn[aria-current="step"] { color: var(--gold-1); }
.ho-rail-btn:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: 4px; }
.ho-rail-num { font: 700 .66rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .14em; color: var(--gold-2); }
.ho-sound { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem 0 .85rem; flex: none; border-radius: 999px; cursor: pointer;
  font: 800 .72rem/1 var(--font-accent); letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(232, 179, 92, .45); background: rgba(20, 8, 6, .6); color: var(--gold-1); transition: background-color .2s, color .2s; }
.ho-sound:hover { background: var(--gold-1); color: #2a0d07; }
.ho-sound svg { width: 18px; height: 18px; flex: none; }
.ho-sound:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.ho-sound .ho-sound-on, .ho-sound[aria-pressed="true"] .ho-sound-off { display: none; }
.ho-sound[aria-pressed="true"] .ho-sound-on { display: block; }
.ho-sound[aria-pressed="true"] { border-color: rgba(255, 213, 142, .8); }

/* still version (reduced motion, or before the script runs): the frame, then the three groups as lists */
.ho-stage { position: relative; padding: 2.5rem 0 clamp(72px, 9vw, 120px); }
.ho-view { position: relative; width: min(var(--container, 1200px) - 2 * var(--gutter), 100% - 2 * var(--gutter)); margin: 0 auto; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: var(--radius-lg, 24px); border: 1px solid rgba(232, 179, 92, .3); background: #000; }
.ho-film { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.ho-orbit { display: grid; gap: 2.75rem; width: min(var(--container, 1200px), 100%); margin: 3rem auto 0; padding: 0 var(--gutter); }
.ho-group .ho-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 1.1rem; }
.ho:not(.is-orbit):not(.is-stack) .ho-foot { display: none; }

/* both scroll versions: the stage stays pinned; the picture fills it below the header, pinned to its top edge
   so her head is never cut; the shade only darkens the edges and the bottom, never her face */
.ho.is-orbit, .ho.is-stack { height: calc(100vh + var(--ho-n, 3) * 105vh); }
.ho.is-orbit .ho-stage, .ho.is-stack .ho-stage { position: sticky; top: 0; height: 100vh; padding: 0; overflow: clip; }
.ho.is-orbit .ho-view, .ho.is-stack .ho-view { position: absolute; top: var(--header-h, 76px); left: 0; right: 0; bottom: 0; width: auto; margin: 0;
  aspect-ratio: auto; border: 0; border-radius: 0; background: var(--ink);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12px); mask-image: linear-gradient(180deg, transparent, #000 12px); }
.ho-shade { position: absolute; inset: 0; pointer-events: none; }
.ho.is-orbit .ho-shade {
  background:
    linear-gradient(90deg, rgba(11, 6, 5, .74), rgba(11, 6, 5, .3) 22%, transparent 36%, transparent 66%, rgba(11, 6, 5, .32) 82%, rgba(11, 6, 5, .62)),
    linear-gradient(0deg, rgba(11, 6, 5, .9), rgba(11, 6, 5, .35) 17%, transparent 32%); }

/* desktop: the title over the top-left (it scrolls away as the sequence begins), the ring around her,
   the stage names bottom-left, the sound switch bottom-right */
.ho.is-orbit .ho-head { position: absolute; top: 0; left: 0; right: 0; padding-top: calc(var(--header-h, 76px) + 5vh); pointer-events: none; }
.ho.is-orbit .ho-head > * { max-width: min(34rem, 31vw); pointer-events: auto; }
.ho.is-orbit .ho-orbit { position: absolute; inset: 0; z-index: 2; display: block; width: auto; margin: 0; padding: 0; pointer-events: none; }
.ho.is-orbit .ho-group { position: absolute; inset: 0; }
.ho.is-orbit .ho-group-title, .ho.is-stack .ho-card--service .ho-tags {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ho.is-orbit .ho-group .ho-cards { display: block; margin: 0; }
.ho.is-orbit .ho-card { position: absolute; left: 0; top: 0; width: clamp(200px, 16vw, 240px); opacity: 0; will-change: transform, opacity; }
.ho.is-orbit .ho-card--wide { width: clamp(224px, 18vw, 272px); }
.ho.is-orbit .ho-card--service { width: clamp(250px, 21vw, 300px); }
.ho.is-orbit .ho-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; padding-bottom: 3.2vh;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 2rem; }

/* phones, tablets and short screens: the title above, then the pinned stage: her at the top,
   the active group as a compact grid along the bottom, then the stage numbers and the sound switch */
.ho.is-stack .ho-head { padding-bottom: 2rem; }
.ho.is-stack .ho-stage { display: flex; flex-direction: column; justify-content: flex-end; height: 100svh; }
.ho.is-stack .ho-shade { background: linear-gradient(0deg, rgba(11, 6, 5, .96), rgba(11, 6, 5, .88) 34%, rgba(11, 6, 5, .4) 52%, transparent 64%); }
.ho.is-stack .ho-orbit { position: relative; z-index: 2; display: grid; margin: 0; }
.ho.is-stack .ho-group { grid-area: 1 / 1; align-self: end; }
.ho.is-stack .ho-group-title { font-size: 1.2rem; opacity: 0; }
.ho.is-stack .ho-group .ho-cards { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; margin-top: .65rem; }
.ho.is-stack .ho-card { padding: .55rem .7rem .6rem; opacity: 0; }
.ho.is-stack .ho-card-num { margin-bottom: .35rem; }
.ho.is-stack .ho-card-title { font-size: .74rem; }
.ho.is-stack .ho-card--short .ho-card-title { font-size: 1rem; }
.ho.is-stack .ho-card--wide:first-child { grid-column: 1 / -1; }
.ho.is-stack .ho-tags { margin-top: .3rem; gap: .1rem .4rem; }
.ho.is-stack .ho-tags li { padding: 0; border: 0; background: none; font-size: .74rem; line-height: 1.35; color: var(--beige); }
.ho.is-stack .ho-tags li:not(:last-child)::after { content: "·"; margin-left: .4rem; color: var(--gold-2); }
.ho.is-stack .ho-group { transform-origin: 50% 100%; }
.ho.is-stack .ho-foot { position: relative; z-index: 3; margin: 0; padding-top: .5rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
.ho.is-stack .ho-rail { gap: 1rem; }
.ho.is-stack .ho-rail-btn { padding: .55rem 0 .65rem; }
.ho.is-stack .ho-rail-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ho.is-stack .ho-sound { min-height: 40px; }
.ho.is-stack .ho-card-text { font-size: .8rem; line-height: 1.4; margin-top: .3rem; }

/* ---------- Testimonials: the marble wall, three gold emblems; a click opens that testimonial's scroll ---------- */
.tm { --gold-1: #fff1c9; --gold-2: #e8b35c; --gold-3: #9a5a1c; --paper: #f3e5c4; --paper-2: #e6cf9f; --ink: #3a0f07;
  position: relative; z-index: 1;   /* sits above the Case Studies film, which runs one screen past its section */
  min-height: 100vh; padding: clamp(84px, 10vw, 130px) 0 clamp(64px, 8vw, 104px); overflow: hidden; color: var(--soft-cream);
  /* oxblood marble with fine red veins (drawn, original), lit warm from above like the reference */
  background:
    radial-gradient(60% 45% at 50% 30%, rgba(255, 170, 80, .1), transparent 70%),
    radial-gradient(130% 100% at 50% 45%, transparent 45%, rgba(8, 2, 1, .78)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='520'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0038 .0075' numOctaves='6' seed='11'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3CfeFuncG type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3CfeFuncB type='table' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur stdDeviation='.4'/%3E%3CfeColorMatrix type='matrix' values='.5 0 0 0 0 .04 0 0 0 0 .03 0 0 0 0 .38 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E") center / cover,
    radial-gradient(120% 90% at 50% 100%, #2a0a06, #140605 70%); }
.tm .section-head { justify-content: center; text-align: center; }
.tm .section-head > div { margin: 0 auto; }
.tm .section-head .kicker { justify-content: center; color: var(--gold-2); }
.tm .section-head .h2 { max-width: 22em; margin: 0 auto; color: var(--cream); }
.tm-wrap { display: grid; gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(28px, 4vw, 48px); }

/* the three emblems on the wall: unlit until hovered or chosen, as in the reference */
.tm-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 4vw, 56px); width: min(100%, 1000px); margin: 0 auto; }
.tm-pick { display: flex; flex-direction: column; align-items: center; gap: .8rem; min-height: 44px; padding: 14px 8px; border: 0; border-radius: 18px;
  background: none; color: inherit; text-align: center; cursor: pointer; transition: transform .25s var(--ease); }
.tm-pick:hover { transform: translateY(-2px); }
.tm-pick:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 4px; }
.tm-emblem { position: relative; width: min(100%, 230px); aspect-ratio: 905 / 363; }
.tm-emblem img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain;
  filter: brightness(.72) saturate(.9) drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); transition: filter .4s; }
.tm-glow { position: absolute; inset: -55% -22%; opacity: 0; transition: opacity .4s; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 186, 96, .4), rgba(255, 150, 60, .12) 60%, transparent 76%); }
/* the light sweep: a band of light crossing the emblem, clipped to its own shape */
.tm-sheen { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, .95) 50%, transparent 62%) 130% 0 / 300% 100% no-repeat;
  -webkit-mask: url("../img/emblem/w-emblem-480.webp") center / contain no-repeat; mask: url("../img/emblem/w-emblem-480.webp") center / contain no-repeat; }
.tm-pick:hover .tm-emblem img, .tm-pick:focus-visible .tm-emblem img { filter: brightness(.95) drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.tm-pick[aria-selected="true"] .tm-emblem img { filter: brightness(1.15) saturate(1.1) drop-shadow(0 0 18px rgba(255, 186, 96, .6)); }
.tm-pick:hover .tm-glow { opacity: .4; }
.tm-pick[aria-selected="true"] .tm-glow { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tm-pick:hover .tm-sheen { animation: tm-sheen 1.4s var(--ease-out) 1; }
  .tm-pick[aria-selected="true"] .tm-sheen { animation: tm-sheen 6s var(--ease-out) infinite; }
  .tm.is-opening .tm-pick[aria-selected="true"] .tm-emblem img { animation: tm-flare 1.3s var(--ease-out) both; }
}
@keyframes tm-sheen { 0% { opacity: 1; background-position: 130% 0; } 24% { opacity: 1; background-position: -30% 0; } 25%, 100% { opacity: 0; background-position: -30% 0; } }
@keyframes tm-flare { 35% { filter: saturate(1.2) brightness(1.55) drop-shadow(0 0 26px rgba(255, 196, 110, .95)); } }
.tm-pick-text { display: flex; flex-direction: column; align-items: center; gap: .2rem; min-width: 0; }
.tm-pick-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.15; color: var(--cream); transition: color .3s; }
.tm-pick-role { font-size: .84rem; line-height: 1.35; color: var(--beige); }
.tm-pick[aria-selected="true"] .tm-pick-name { color: var(--gold-1); }

/* the scroll area: the parchment waits rolled up and unrolls only when an emblem is clicked */
.tm-stage { position: relative; }
.tm-screen { position: relative; padding: 18px 0 8px; }
.tm-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.tm-intro { margin: 1.4rem 0 0; text-align: center; font: 800 .76rem/1.3 var(--font-accent); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-1); }
.tm.is-chosen .tm-intro { display: none; }

/* the scroll: warm cream aged paper, fine gold edging, two rollers; unrolls from the centre */
@property --tm-u { syntax: "<number>"; inherits: true; initial-value: 0; }
.tm-scroll { --tm-u: .03; position: relative; z-index: 2; width: min(100% - 24px, 860px); margin: 0 auto; }
.tm.is-chosen .tm-scroll { --tm-u: 1; }
.tm:not(.is-chosen) .tm-paper { min-height: 150px; }   /* closed: just the two rollers side by side */
.tm-paper { position: relative; padding: clamp(18px, 2.6vw, 34px) clamp(30px, 4.4vw, 58px) clamp(20px, 2.6vw, 32px); color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg transform='translate(0 0)'%3E%3Cg fill='none' stroke='%239a5a1c' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M3 31C3 15 15 3 31 3'/%3E%3Cpath d='M3 23c5 0 9-4 9-9 0-4-3-6-5.5-4.5'/%3E%3Cpath d='M23 3c0 5-4 9-9 9'/%3E%3Cpath d='M8 36c0-6 2-10 6-13M36 8c-6 0-10 2-13 6'/%3E%3Ccircle cx='14' cy='14' r='1.7' fill='%239a5a1c' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left 10px top 10px / 34px 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg transform='translate(44 0) scale(-1 1)'%3E%3Cg fill='none' stroke='%239a5a1c' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M3 31C3 15 15 3 31 3'/%3E%3Cpath d='M3 23c5 0 9-4 9-9 0-4-3-6-5.5-4.5'/%3E%3Cpath d='M23 3c0 5-4 9-9 9'/%3E%3Cpath d='M8 36c0-6 2-10 6-13M36 8c-6 0-10 2-13 6'/%3E%3Ccircle cx='14' cy='14' r='1.7' fill='%239a5a1c' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right 10px top 10px / 34px 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg transform='translate(0 44) scale(1 -1)'%3E%3Cg fill='none' stroke='%239a5a1c' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M3 31C3 15 15 3 31 3'/%3E%3Cpath d='M3 23c5 0 9-4 9-9 0-4-3-6-5.5-4.5'/%3E%3Cpath d='M23 3c0 5-4 9-9 9'/%3E%3Cpath d='M8 36c0-6 2-10 6-13M36 8c-6 0-10 2-13 6'/%3E%3Ccircle cx='14' cy='14' r='1.7' fill='%239a5a1c' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") left 10px bottom 10px / 34px 34px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg transform='translate(44 44) scale(-1 -1)'%3E%3Cg fill='none' stroke='%239a5a1c' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M3 31C3 15 15 3 31 3'/%3E%3Cpath d='M3 23c5 0 9-4 9-9 0-4-3-6-5.5-4.5'/%3E%3Cpath d='M23 3c0 5-4 9-9 9'/%3E%3Cpath d='M8 36c0-6 2-10 6-13M36 8c-6 0-10 2-13 6'/%3E%3Ccircle cx='14' cy='14' r='1.7' fill='%239a5a1c' stroke='none'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right 10px bottom 10px / 34px 34px no-repeat,
    radial-gradient(120% 140% at 50% 50%, transparent 55%, rgba(150, 100, 40, .28)),
    radial-gradient(40% 50% at 20% 30%, rgba(255, 250, 235, .55), transparent 70%),
    radial-gradient(50% 60% at 80% 75%, rgba(200, 160, 100, .18), transparent 70%),
    linear-gradient(180deg, #f6ead0, var(--paper) 45%, var(--paper-2));
  box-shadow: inset 0 0 0 1px rgba(154, 90, 28, .55), inset 0 0 0 6px rgba(246, 234, 208, .0), inset 0 0 0 7px rgba(154, 90, 28, .35), 0 24px 50px -20px rgba(0, 0, 0, .85);
  clip-path: inset(0 calc(50% * (1 - var(--tm-u))) 0 calc(50% * (1 - var(--tm-u)))); }
.tm-paper::before, .tm-paper::after { content: ""; position: absolute; left: 50%; width: 120px; height: 10px; transform: translateX(-50%); opacity: .75;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cg fill='none' stroke='%239a5a1c' stroke-width='1'%3E%3Cpath d='M2 5h44M74 5h44'/%3E%3Cpath d='M60 1l4 4-4 4-4-4z' fill='%239a5a1c'/%3E%3Ccircle cx='50' cy='5' r='1.6'/%3E%3Ccircle cx='70' cy='5' r='1.6'/%3E%3C/g%3E%3C/svg%3E"); }
.tm-paper::before { top: 9px; }
.tm-paper::after { bottom: 9px; }
.tm-rod { position: absolute; top: -10px; bottom: -10px; width: 16px; border-radius: 8px; z-index: 1;
  left: calc(50% * (1 - var(--tm-u)) - 8px);
  background: linear-gradient(90deg, #b99a6a, #f5e6c5 35%, #d9bf8e 60%, #8d6a3c); box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .7); }
.tm-rod--r { left: auto; right: calc(50% * (1 - var(--tm-u)) - 8px); }
.tm-rod::before, .tm-rod::after { content: ""; position: absolute; left: -2px; right: -2px; height: 9px; border-radius: 4px;
  background: linear-gradient(90deg, #6b4513, #e8b35c 40%, #fff1c9 55%, #9a5a1c); }
.tm-rod::before { top: -5px; }
.tm-rod::after { bottom: -5px; }
@media (prefers-reduced-motion: no-preference) {
  .tm-scroll.is-open { animation: tm-unroll 1.1s var(--ease-out) both; }
}
@keyframes tm-unroll { from { --tm-u: .04; opacity: .2; } 15% { opacity: 1; } to { --tm-u: 1; opacity: 1; } }

/* the words: name and role, then the quote, sentence by sentence; each arrives with a soft gold light pass */
.tm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .15rem .7rem; margin: 0 0 .7rem; text-align: center; }
.tm-name { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; color: var(--ink); }
.tm-role { font: 800 .72rem/1.3 var(--font-accent); letter-spacing: .12em; text-transform: uppercase; color: #6a2f12; }
.tm-quote { margin: 0; text-align: center; font-family: var(--font-display); font-size: clamp(1rem, 1.55vw, 1.3rem); line-height: 1.5; color: var(--ink); }
.tm-quote.is-long { font-size: clamp(.92rem, 1.2vw, 1.08rem); line-height: 1.5; }
.tm-head, .tm-quote .tm-s { opacity: 0; transition: opacity .7s var(--ease-out); }
.tm-head.is-on, .tm-quote .tm-s.is-on { opacity: 1; }
.tm-head.is-pass .tm-name, .tm-head.is-pass .tm-role, .tm-quote .tm-s.is-pass {
  background: linear-gradient(100deg, var(--ink) 0 40%, #b8741f 46%, #f2c46e 50%, #b8741f 54%, var(--ink) 60% 100%) 100% 0 / 280% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: tm-pass 1.6s var(--ease-out) forwards; }
.tm-head.is-pass .tm-role { background-image: linear-gradient(100deg, #6a2f12 0 40%, #b8741f 46%, #f2c46e 50%, #b8741f 54%, #6a2f12 60% 100%); }
@keyframes tm-pass { from { background-position: 100% 0; } to { background-position: 0 0; } }
.tm-quote ::selection, .tm-head ::selection { background: rgba(232, 179, 92, .45); color: var(--ink); }

/* the sound switch and the original-testimonial link */
.tm-bar { display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.4rem; width: min(100%, 860px); margin: 18px auto 0; }
.tm.is-chosen .tm-bar { display: flex; }
.tm-sound { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem 0 .85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(232, 179, 92, .45); background: rgba(40, 12, 8, .8); color: var(--gold-1);
  font: 800 .72rem/1 var(--font-accent); letter-spacing: .1em; text-transform: uppercase; transition: background-color .2s, color .2s; }
.tm-sound:hover { background: var(--gold-1); color: #2a0d07; }
.tm-sound:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }
.tm-sound svg { width: 18px; height: 18px; flex: none; }
.tm-sound .i-off, .tm-sound[aria-pressed="false"] .i-on { display: none; }
.tm-sound[aria-pressed="false"] .i-off { display: block; }
.tm .tm-bar .proof-btn { color: var(--gold-1); }

/* the transcript: all three quotes as plain text, always available */
.tm-transcripts { width: min(100%, 860px); margin: clamp(22px, 3vw, 34px) auto 0; border: 1px solid rgba(232, 179, 92, .25); border-radius: var(--radius); background: rgba(20, 6, 4, .7); }
.tm-transcripts summary { cursor: pointer; padding: 14px 18px; min-height: 44px; font-weight: 700; color: var(--cream); }
.tm-transcripts summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; border-radius: var(--radius); }
.tm-t-list { display: grid; gap: 1.4rem; padding: 4px 18px 20px; }
.tm-t { margin: 0; display: grid; gap: .5rem; }
.tm-t blockquote { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--soft-cream); }
.tm-t figcaption { font-size: .9rem; color: var(--beige); }
.tm-t figcaption strong { color: var(--cream); }
.tm .tm-t .proof-btn { color: var(--gold-1); }

/* phones: the three emblems stay in one row; the parchment uses the full width */
@media (max-width: 760px) {
  .tm { min-height: 0; }
  .tm-picks { gap: 6px; }
  .tm-pick { gap: .5rem; padding: 10px 2px; }
  .tm-pick-name { font-size: 1rem; }
  .tm-pick-role { font-size: .72rem; }
  .tm-scroll { width: calc(100% - 20px); }
  .tm-quote, .tm-quote.is-long { font-size: 1rem; }
}
/* reduced motion: a static parchment, no unrolling, light trace, flare or embers; the whole quote shows at once */
@media (prefers-reduced-motion: reduce) {
  .tm-head, .tm-quote .tm-s { opacity: 1; transition: none; }
  .tm-embers { display: none; }
}

/* ---------- Finale: "Let's meet up" → Contact, one closing scene with the heroine's flight ---------- */
.finale { position: relative; background: #160402; isolation: isolate; overflow: clip; }
.fin-stage { position: relative; min-height: 100vh; display: grid; align-content: end; justify-items: center; gap: clamp(56px, 9vh, 96px);
  padding: clamp(96px, 12vh, 140px) clamp(20px, 5vw, 64px) clamp(56px, 9vh, 104px); }
.fin-film { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; background: #160402;
  -webkit-mask-image: linear-gradient(180deg, #000 66%, transparent 98%); mask-image: linear-gradient(180deg, #000 66%, transparent 98%); }   /* its lower edge melts into the section */
/* the dark gradient: deep at the bottom where the copy sits, light over her, a soft vignette at the edges */
.fin-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(22, 4, 2, .94) 0%, rgba(22, 4, 2, .82) 22%, rgba(22, 4, 2, .42) 44%, rgba(22, 4, 2, .08) 62%, rgba(22, 4, 2, .3) 100%),
    radial-gradient(120% 95% at 50% 38%, transparent 52%, rgba(12, 2, 1, .62)); }
.fin-copy { position: relative; z-index: 2; max-width: 40rem; text-align: center; text-shadow: 0 2px 18px rgba(20, 3, 2, .85); }
.fin-copy .kicker { justify-content: center; color: #f3c77e; }
.fin-copy .display { margin: .5rem 0 1rem; color: var(--cream); }
.fin-copy .lede { margin: 0 auto; color: var(--soft-cream); }
.fin-copy .btn-row { justify-content: center; margin-top: 1.75rem; }
.fin-copy .btn { text-shadow: none; }
/* Work with me: the contact panel, in the same dark, gold-lit style */
.fin-contact { width: min(100%, 38rem); }
.fin-contact .h2 { margin: .4rem 0 0; color: var(--cream); }
.fin-contact .h2 em { background: linear-gradient(100deg, #fff1c9, #e8b35c 45%, #c98a2e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fin-contact .contact-list { margin: 1.6rem 0 1.75rem; text-align: left; border-top-color: rgba(232, 179, 92, .3); }
.fin-contact .contact-list li { border-bottom-color: rgba(232, 179, 92, .3); padding: .85rem 0; }
.fin-contact .contact-list span { color: #f3c77e; }
.fin-contact .contact-list a { color: var(--cream); }
.fin-contact .social-links .social-link { border-color: rgba(232, 179, 92, .5); color: var(--cream); background: rgba(22, 4, 2, .45); }
.fin-contact .social-links .social-link[aria-disabled="true"]:hover { background: rgba(22, 4, 2, .45); border-color: rgba(232, 179, 92, .5); color: var(--cream); }
/* a deeper shade under the contact panel, which reaches higher up the picture */
.fin-shade::after { content: ""; position: absolute; inset: 0; opacity: var(--fin-contact, 1);
  background: linear-gradient(0deg, rgba(22, 4, 2, .7) 0%, rgba(22, 4, 2, .55) 45%, rgba(22, 4, 2, .12) 72%, transparent 88%); }
/* live (larger screens, motion): the stage stays pinned while the scroll advances her flight */
.finale.is-live { height: 340vh; }
.finale.is-live .fin-stage { position: sticky; top: 0; height: 100vh; min-height: 0; gap: 0; }
/* the two blocks share the bottom of the stage: "Let's meet up" during the flight, then Work with me */
.finale.is-live .fin-copy { grid-area: 1 / 1; align-self: end; }
.finale.is-live .fin-meet { opacity: var(--fin-meet, 1); transform: translateY(calc((1 - var(--fin-meet, 1)) * -26px)); }
.finale.is-live .fin-contact { opacity: var(--fin-contact, 0); transform: translateY(calc((1 - var(--fin-contact, 0)) * 30px)); }
.finale.is-live .fin-copy.is-off { pointer-events: none; }
.finale.is-live .fin-shade::after { opacity: var(--fin-contact, 0); }
/* the gold trail, motes and light wipe are drawn on one fixed, click-through layer above both sections */
.fin-fx { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100%; pointer-events: none; }

/* Work with me: as the panel arrives, its dividers and social icons are traced with light once, then it fades */
#contact .contact-list { position: relative; }
#contact .contact-list li { position: relative; }
#contact .contact-list::before, #contact .contact-list li::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #c98a2e, #fff1c9, #c98a2e, transparent) -40% 0 / 40% 100% no-repeat; }
#contact .contact-list::before { top: -1px; }
#contact .contact-list li::after { bottom: -1px; }
@media (prefers-reduced-motion: no-preference) {
  #contact.is-traced .contact-list::before { animation: fin-trace 1.5s var(--ease-out) both; }
  #contact.is-traced .contact-list li::after { animation: fin-trace 1.5s var(--ease-out) both; }
  #contact.is-traced .contact-list li:nth-child(1)::after { animation-delay: .18s; }
  #contact.is-traced .contact-list li:nth-child(2)::after { animation-delay: .36s; }
  #contact.is-traced .contact-list li:nth-child(3)::after { animation-delay: .54s; }
  #contact.is-traced .contact-list .social-link { animation: fin-icon 1.3s var(--ease-out) both; }
  #contact.is-traced .contact-list .social-link:nth-child(1) { animation-delay: .8s; }
  #contact.is-traced .contact-list .social-link:nth-child(2) { animation-delay: .92s; }
  #contact.is-traced .contact-list .social-link:nth-child(3) { animation-delay: 1.04s; }
  #contact.is-traced .contact-list .social-link:nth-child(4) { animation-delay: 1.16s; }
  #contact.is-traced .contact-list .social-link:nth-child(5) { animation-delay: 1.28s; }
}
@keyframes fin-trace { 0% { opacity: 0; background-position: -40% 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; background-position: 140% 0; } }
@keyframes fin-icon { 0% { box-shadow: 0 0 0 0 rgba(232, 179, 92, 0); }
  40% { box-shadow: 0 0 0 2px rgba(232, 179, 92, .6), 0 0 18px rgba(232, 179, 92, .55); }
  100% { box-shadow: 0 0 0 0 rgba(232, 179, 92, 0); } }

/* ---------- Relevant experience: the golden lasso timeline ---------- */
.xp { position: relative; isolation: isolate; background: radial-gradient(70% 60% at 70% 40%, rgba(140, 16, 7, .22), transparent 70%), #0b0605; color: var(--soft-cream); overflow: clip; }
.xp-grid { display: grid; grid-template-columns: minmax(260px, .7fr) 1.3fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.xp-head { position: sticky; top: calc(var(--header-h, 76px) + 32px); }
.xp-head .kicker { color: #e8b35c; }
.xp-head .h2 em { font-style: italic; background: linear-gradient(100deg, #fff1c9, #e8b35c 45%, #9a5a1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-head .lede { color: var(--beige); margin-top: 1rem; }
.xp-track { position: relative; padding-left: clamp(70px, 8vw, 110px); }
.xp-lasso, .xp-sparks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.xp-lasso { z-index: 2; }
.xp-sparks { z-index: 4; }
.xp-rope { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.xp-tail { fill: none; stroke-linecap: round; }
.xp-rope-glow { stroke: #ff9a3a; stroke-width: 16; opacity: .55; fill: none; }
.xp-rope-core { stroke: url(#xp-gold); stroke-width: 6; fill: none; }
.xp-rope-braid { stroke: #7a3a0c; stroke-width: 6; stroke-dasharray: 3 7; opacity: .75; }
.xp-rope-pulse { stroke: #fffaf0; stroke-width: 2; stroke-dasharray: 60 520; opacity: .9; }
.xp-tip { fill: #fff6e0; filter: drop-shadow(0 0 8px #ffb14a) drop-shadow(0 0 18px #ff7a18); }
.xp-loop { fill: none; stroke: url(#xp-gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(255, 170, 70, .8)); transition: stroke-dashoffset .9s cubic-bezier(.3, .7, .2, 1); }
.xp-loop.is-on { stroke-dashoffset: 0; }
.xp-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px, 8vw, 110px); position: relative; z-index: 3; }
.xp-role {
  position: relative; padding: clamp(22px, 2.6vw, 32px); border-radius: 22px;
  background: linear-gradient(160deg, rgba(38, 16, 10, .9), rgba(12, 5, 4, .92)); border: 1px solid rgba(232, 179, 92, .22);
  transition: opacity .6s, transform .6s var(--ease-out, ease), filter .6s, border-color .5s, box-shadow .5s;
}
.xp-role .role-when { font-family: var(--font-editorial, inherit); font-style: italic; font-size: 1.2rem; color: #e8b35c; }
.xp-role .h3 { margin: .35rem 0 .8rem; color: #fff1c9; }
.xp-role ul { padding-left: 1.1rem; color: var(--beige); display: grid; gap: .45rem; }
.xp-role li::marker { color: #e8b35c; }
.xp-year { position: absolute; right: clamp(10px, 2vw, 24px); top: -.55em; z-index: -1; pointer-events: none;
  font: 800 clamp(5rem, 11vw, 9rem)/1 var(--font-accent, sans-serif); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(232, 179, 92, .35); transition: color .6s, text-shadow .6s, -webkit-text-stroke-color .6s; }
.xp-proof { list-style: none; padding: 0 !important; margin-top: 1.4rem; display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px !important; }
.xp-proof li { padding: .8rem .9rem; border-radius: 14px; background: rgba(232, 179, 92, .08); border: 1px solid rgba(232, 179, 92, .3); display: grid; gap: .2rem; }
.xp-proof strong { font: 800 1.7rem/1 var(--font-accent, sans-serif); color: #fff1c9; }
.xp-proof span { font-size: .78rem; color: var(--beige); }
.xp-flash, .xp-ring { position: absolute; left: -14px; top: 56px; pointer-events: none; opacity: 0; z-index: 5; }
.xp-flash { width: 220px; height: 220px; margin: -110px 0 0 -110px; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 220, 160, .8) 25%, rgba(255, 130, 40, .3) 55%, transparent 72%); }
.xp-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid #ffd79a; box-shadow: 0 0 18px #ff9a3a; }

/* live (desktop, motion): cards wait in the dark until the lasso reaches them */
.xp.is-live .xp-role { opacity: .32; filter: blur(1.2px) saturate(.6); transform: translateX(26px); }
.xp.is-live .xp-role.is-lassoed { opacity: 1; filter: none; transform: none; border-color: rgba(255, 214, 150, .7);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .9), 0 0 40px rgba(255, 150, 60, .18); }
.xp-role.is-lassoed .xp-year, .xp:not(.is-live) .xp-year { color: rgba(232, 179, 92, .16); -webkit-text-stroke-color: rgba(255, 225, 160, .75); text-shadow: 0 0 40px rgba(255, 150, 60, .35); }
.xp-role.is-cracked { animation: xp-jolt .38s cubic-bezier(.3, .7, .2, 1); }
.xp-role.is-cracked .xp-flash { animation: xp-flash .6s ease-out; }
.xp-role.is-cracked .xp-ring { animation: xp-ring .8s ease-out; }
@keyframes xp-jolt { 0% { transform: translateX(-10px) rotate(-.6deg); } 30% { transform: translateX(7px) rotate(.4deg); } 60% { transform: translateX(-3px); } 100% { transform: none; } }
@keyframes xp-flash { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes xp-ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(9); } }
@media (prefers-reduced-motion: no-preference) {
  .xp.is-live .xp-rope-pulse { animation: xp-pulse 2.2s linear infinite; }
  .xp.is-live .xp-rope-braid { animation: xp-braid 1.4s linear infinite; }
}
@keyframes xp-pulse { to { stroke-dashoffset: -580; } }
@keyframes xp-braid { to { stroke-dashoffset: -20; } }
@media (max-width: 900px) {
  .xp-grid { grid-template-columns: 1fr; }
  .xp-head { position: static; }
  .xp-proof { grid-template-columns: 1fr; }
  .xp-track { padding-left: 46px; }
}

/* ---------- Case Studies → Experience: one film behind both sections ---------- */
.cine-run { position: relative; isolation: isolate; background: #1a0503; --film-x: 0%; }
.cine-run > section { position: relative; z-index: 1; }
.cine-run .cs-cine, .cine-run .xp { background: transparent; }
#case-browser { scroll-margin-top: calc(var(--header-h, 76px) + 24px); }

/* the stage stays pinned for the whole run, in every mode */
.cine-stage { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; pointer-events: none; }
.cs-film, .cs-sea { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* --film-x moves her to the right on wide screens; the film is widened (not shifted) so it still covers the whole width */
.cs-film { background: #1a0503; right: auto; width: calc(100% + 2 * var(--film-x)); max-width: none; }
.cs-sea { opacity: 0; transition: opacity .9s ease; }
.cine-run.at-sea .cs-sea { opacity: 1; }
.cs-shade, .cs-mist, .cs-trail, .cs-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* contrast lives on the text side (left); the film keeps its own colour on the right */
.cs-shade { background:
    linear-gradient(90deg, rgba(26, 5, 3, .92) 0, rgba(26, 5, 3, .74) 36%, rgba(26, 5, 3, .46) 70%, rgba(26, 5, 3, .36)),
    linear-gradient(0deg, rgba(26, 5, 3, .6), transparent 40%); }
.cs-mist { opacity: var(--mist, 0); }
.cs-mist i { position: absolute; bottom: -8%; width: 70%; height: 38%; border-radius: 50%; filter: blur(28px);
  background: radial-gradient(closest-side, rgba(255, 244, 228, .38), rgba(241, 226, 209, .12) 60%, transparent); }
.cs-mist i:nth-child(1) { left: 30%; } .cs-mist i:nth-child(2) { left: 55%; bottom: -12%; width: 60%; } .cs-mist i:nth-child(3) { left: 10%; bottom: -16%; }
@media (prefers-reduced-motion: no-preference) {
  .cs-mist i:nth-child(1) { animation: cs-drift 14s ease-in-out infinite alternate; }
  .cs-mist i:nth-child(2) { animation: cs-drift 18s ease-in-out -6s infinite alternate-reverse; }
  .cs-mist i:nth-child(3) { animation: cs-drift 22s ease-in-out -3s infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .cs-sea { transition: none; } }
@keyframes cs-drift { from { transform: translateX(-6%); } to { transform: translateX(8%); } }
.cs-trail { overflow: visible; mix-blend-mode: screen; }
.cs-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.cs-trail-glow { stroke: #ffb45a; stroke-width: 13; }
.cs-trail-core { stroke: #fff2d4; stroke-width: 2.6; }
.cs-wipe-glow { stroke: #eda450; stroke-width: 130; }
.cs-wipe-core { stroke: url(#cs-gold); stroke-width: 2.2; }
.cine-run:not(.is-live) .cs-trail, .cine-run:not(.is-live) .cs-sparks, .cine-run:not(.is-live) .cs-mist { display: none; }

/* copy sits straight on the film */
.cine-run .cs-intro { position: relative; padding-top: clamp(96px, 16vh, 170px); }
.cine-run .cs-intro > * { max-width: 36rem; }
.cs-skip { display: inline-flex; gap: .35rem; margin-top: 1.25rem; }
.cs-skip svg { width: 18px; height: 18px; }
.cine-run .cs-intro .kicker, .cine-run .cs-intro .h2, .cine-run .cs-intro .lede,
.cine-run .cb-head, .cine-run .cb-files > .kicker, .cine-run .cb-reveals > .kicker, .cine-run .work-caption, .cine-run .slider-note,
.cine-run .xp-head { text-shadow: 0 1px 16px rgba(20, 3, 2, .9); }
.cine-run .cs-panel-wrap { position: relative; padding-bottom: clamp(56px, 10vh, 120px); }

/* folders without the box: tabs on a hairline, the open folder's content straight on the film */
.cine-run .cb-panel { --panel-pad: 0px; background: transparent; border-radius: 0; padding: clamp(22px, 3vw, 34px) 0 0; }
.cine-run .ftabs { gap: 0; border-bottom: 1px solid rgba(241, 226, 209, .22); }
.cine-run .ftab { background: transparent; border-radius: 12px 12px 0 0; color: rgba(241, 226, 209, .74); text-shadow: 0 1px 10px rgba(20, 3, 2, .85); }
.cine-run .ftab:hover { background: rgba(26, 5, 3, .38); color: var(--cream); }
.cine-run .ftab[aria-selected="true"] { background: linear-gradient(180deg, rgba(26, 5, 3, .1), rgba(26, 5, 3, .55)); color: #fff1c9; }
.cine-run .ftab[aria-selected="true"]::after { left: 1.1rem; right: 1.1rem; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, #e8b35c 18%, #ffd58e 50%, #e8b35c 82%, transparent); box-shadow: 0 0 12px rgba(255, 180, 90, .55); }
.cine-run .cb-files { border-top-color: rgba(241, 226, 209, .16); }
.cine-run .cb-chip:not([aria-current="true"]):not([aria-expanded="true"]) { background: rgba(26, 5, 3, .5); }
.cine-run .cb-panel .carousel-slide[aria-hidden="true"] { opacity: .34; }
.cine-run .carousel-btn { background: rgba(26, 5, 3, .4); }
.cine-run .carousel-btn:hover { background: var(--cream); }

/* Experience over the empty sea: the role cards keep their own dark backing */
.cine-run .xp-role { background: linear-gradient(160deg, rgba(38, 16, 10, .84), rgba(12, 5, 4, .88)); }

@media (max-width: 760px) {
  .cine-run .cs-shade { background: linear-gradient(rgba(26, 5, 3, .64), rgba(26, 5, 3, .64)), linear-gradient(0deg, rgba(26, 5, 3, .6), transparent 40%); }
}

/* live (desktop, motion): scroll scrubs the film; the light trail reveals the folders, the wipe reveals Experience */
.cine-run.is-live .cine-stage { opacity: calc(.2 + .8 * var(--reveal, 1)); }
.cine-run.is-live .cs-sea { display: none; }
.cine-run.is-live .cs-shade { background:
    linear-gradient(90deg, rgba(26, 5, 3, .94) 0, rgba(26, 5, 3, .82) calc(18% + 10% * var(--panel, 0)), rgba(26, 5, 3, .5) calc(40% + 14% * var(--panel, 0)),
      rgba(26, 5, 3, .12) calc(62% + 14% * var(--panel, 0)), transparent calc(74% + 14% * var(--panel, 0))),
    linear-gradient(0deg, rgba(26, 5, 3, .72) 0, transparent 30%),
    linear-gradient(180deg, rgba(26, 5, 3, .5), transparent 20%),
    linear-gradient(rgba(26, 5, 3, var(--dim, .06)), rgba(26, 5, 3, var(--dim, .06))); }
.cine-run.is-live .cs-intro { min-height: 96vh; padding-top: 26vh; }
.cine-run.is-live #case-browser:not(.is-in):not(:focus-within) {
  opacity: var(--panel, 0); transform: translateY(calc((1 - var(--panel, 0)) * 26px));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe, 0) * 125% - 25%), transparent calc(var(--wipe, 0) * 125%));
          mask-image: linear-gradient(90deg, #000 calc(var(--wipe, 0) * 125% - 25%), transparent calc(var(--wipe, 0) * 125%)); }
.cine-run.is-live .xp:not(.is-in) .xp-grid:not(:focus-within) {
  opacity: calc(.15 + .85 * var(--xw, 0));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--xw, 0) * 125% - 25%), transparent calc(var(--xw, 0) * 125%));
          mask-image: linear-gradient(90deg, #000 calc(var(--xw, 0) * 125% - 25%), transparent calc(var(--xw, 0) * 125%)); }
@media (min-width: 1280px) { .cine-run.is-live { --film-x: 12%; } .cine-run.is-live #case-browser { width: min(100%, 64vw); } }

/* ---------- Opening: heroine clip (autoplays to the lift-off) → golden dust → the introduction video ---------- */
.op { position: relative; background: #140403; --op-h: min(88svh, 900px); }
.op-stage { position: relative; overflow: hidden; isolation: isolate; background: #140403; }
.op-film { z-index: 0; } .op-fill { z-index: 0; }
.op-film, .op-living, .op-shade, .op-dust, .op-fill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
/* the whole frame is always shown (never cropped); a blurred, darkened copy of the scene fills the screen around it */
.op-fill { background: #2a0d07 url("../video/posters/opening-heroine-fill.jpg?v=2") 50% 50% / cover no-repeat; filter: blur(12px) brightness(.8) saturate(1.15); transform: scale(1.1); }
/* on tall screens the frame sits in a band: soften its top and bottom edges into the fill (nothing is cut off) */
@media (max-aspect-ratio: 4/3) {
  .op-film, .op-living { -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(transparent, #000 5%, #000 95%, transparent);
    -webkit-mask-size: 100% calc(100vw * 9 / 16); mask-size: 100% calc(100vw * 9 / 16); -webkit-mask-position: 50% 50%; mask-position: 50% 50%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
}
.op-film { object-fit: contain; object-position: 50% 50%; background: transparent; }
/* the living still (WebGL) sits on the film, under the shade; the script fades it in while she waits */
.op-living { z-index: 1; opacity: 0; }
.op:not(.is-live) .op-living { display: none; }
.op-shade { z-index: 2; background:
    linear-gradient(0deg, rgba(20, 4, 3, .9) 0, rgba(20, 4, 3, .45) 32%, transparent 58%),
    linear-gradient(180deg, rgba(20, 4, 3, .6), transparent 22%),
    linear-gradient(rgba(20, 4, 3, var(--op-dim, .06)), rgba(20, 4, 3, var(--op-dim, .06))); }
.op-dust { z-index: 3; }
.op-copy { position: absolute; z-index: 4; left: 0; right: 0; bottom: clamp(32px, 8vh, 84px); opacity: var(--op-copy, 1); }
.op-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: .95; letter-spacing: -.01em;
  color: var(--cream); text-shadow: 0 2px 30px rgba(20, 4, 3, .85); }
.op-role { margin: .8rem 0 0; max-width: 36rem; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--soft-cream); text-shadow: 0 1px 14px rgba(20, 4, 3, .95); }
.op-actions { margin-top: 1.5rem; gap: .75rem 1rem; }
.op-actions .btn--ghost { background: rgba(20, 4, 3, .35); }
.op-cue { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 0 .5rem; opacity: var(--op-cue, 0); pointer-events: none;
  font: 600 .74rem/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: #fff1c9; text-shadow: 0 1px 10px rgba(20, 4, 3, .9); }
.op-cue i { position: relative; width: 20px; height: 32px; border: 1.5px solid rgba(255, 213, 142, .8); border-radius: 12px; }
.op-cue i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #ffd58e; }
@media (prefers-reduced-motion: no-preference) { .op-cue i::after { animation: op-cue 1.8s ease-in-out infinite; } }
@keyframes op-cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
/* small tools: sound on/off and skip */
.op-tools { position: absolute; z-index: 6; right: var(--gutter); bottom: clamp(32px, 8vh, 84px); display: flex; align-items: center; gap: .5rem; }
.op-sound, .op-skip { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(241, 226, 209, .38); background: rgba(20, 4, 3, .5); color: var(--soft-cream); font: 600 .9rem/1 var(--font-body);
  transition: border-color .2s, color .2s, background-color .2s; }
.op-sound { width: 44px; padding: 0; }
.op-skip { padding: 0 1rem; }
.op-sound:hover, .op-skip:hover { border-color: var(--cream); color: var(--cream); }
.op-sound svg { width: 20px; height: 20px; }
.op-skip svg { width: 16px; height: 16px; }
.op-sound .op-sound-on, .op-sound[aria-pressed="true"] .op-sound-off { display: none; }
.op-sound[aria-pressed="true"] .op-sound-on { display: block; }
.op-sound[aria-pressed="true"] { border-color: rgba(255, 213, 142, .75); color: #fff1c9; }
.op-sound[hidden], .op-skip[hidden] { display: none; }
.op-end { position: relative; z-index: 5; }
.op .intro-video .op-reveal { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.op .op-ctas { justify-content: center; }

/* still version (reduced motion): the lift-off frame as a still, then the introduction video below */
.op:not(.is-live) .op-stage { padding-top: var(--op-h); }
.op:not(.is-live) .op-film, .op:not(.is-live) .op-shade, .op:not(.is-live) .op-fill { height: var(--op-h); }
.op:not(.is-live) .op-copy, .op:not(.is-live) .op-tools { bottom: calc(100% - var(--op-h) + clamp(28px, 6vh, 64px)); }
.op:not(.is-live) .op-dust, .op:not(.is-live) .op-cue, .op:not(.is-live) .op-sound { display: none; }
.op:not(.is-live) .op-end { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 110px); }
.op:not(.is-live) .op-ctas { margin-top: 2rem; }

/* live: pinned stage; the opening plays to the lift-off, then scroll drives her flight and the transition */
.op.is-live { height: 420vh; }
.op.is-live .op-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.op.is-live .op-end { position: absolute; inset: var(--header-h) 0 0; max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3vh, 30px); padding: 0 var(--gutter) 3vh; }
.op.is-live .intro-video { flex: none; width: min(900px, 84vw, calc((100svh - var(--header-h) - 150px) * 16 / 9));
  background: rgba(0, 0, 0, var(--op-video, 0)); border-color: rgba(220, 195, 170, calc(.22 * var(--op-frame, 0)));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, calc(.9 * var(--op-frame, 0))), 0 0 60px rgba(255, 170, 80, calc(.16 * var(--op-frame, 0))); }
.op.is-live .intro-video video { opacity: var(--op-video, 0); }
.op.is-live .intro-video .op-reveal { opacity: var(--op-reveal, 0); }
.op.is-live .op-ctas { opacity: var(--op-end, 0); }
.op.is-live:not(.is-resolved) .op-end { pointer-events: none; }
@media (max-width: 760px) {
  .op-tools { bottom: auto; top: calc(var(--header-h) + 14px); }
  .op-actions .btn { flex: 1 1 100%; justify-content: center; }
  .op-cue { display: none; }
  .op.is-live .op-ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- The Conversion Triangle: the tiara's centre triangle as a three-level funnel ---------- */
.tri-wrap { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); --tw: min(640px, 100%); }
.tri-head .h2 { margin: 0 auto; max-width: 18em; }
.tiara { position: relative; z-index: 1; width: var(--tw); margin: 0 auto; }
.tiara-art { position: relative; }
/* the still keeps its own deep-oxblood backdrop, feathered into the section */
.tiara-img { display: block; width: 100%; height: auto;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.tiara-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; mix-blend-mode: screen; }
/* the three levels: always faintly outlined so the narrowing reads; the active one is traced and warms up */
.tier-fill { fill: url(#tt-amber); opacity: .1; transition: opacity .35s ease; }
.tier-base { fill: none; stroke: rgba(255, 222, 170, .3); stroke-width: 1.6; }
.tier-line, .tier-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tier-line { stroke: #fff6e2; stroke-width: 4.2; }
.tier-glow { stroke: #ffb14a; stroke-width: 16; opacity: .8; }
.tt-dot { fill: #fff3d0; filter: drop-shadow(0 0 6px #ffb14a); }
.tt-ring { fill: none; stroke: #ffd58e; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tiara-steps { position: relative; display: flex; justify-content: center; gap: clamp(14px, 3vw, 34px); margin: -8% 0 0; padding: 0; list-style: none; }
.tiara .tri-label { position: static; display: flex; align-items: baseline; gap: .45rem; text-align: left; }
.tiara .tri-label b, .tiara .tri-label--3 b { font-size: clamp(.85rem, 1.3vw, 1.05rem); color: var(--cream); }
.tiara .tri-label span, .tiara .tri-label--3 span { color: #e8b35c; }
/* stage cards: rich burgundy, a fine gold edge, warm-cream type; centred under the tiara */
.tri-wrap .tri-stages { width: min(940px, 100%); margin: 1.5rem auto 0; text-align: left; }
.tri-wrap .tri-stage { background: linear-gradient(160deg, #4d1411, #2b0705 70%); border: 1px solid rgba(232, 179, 92, .32);
  box-shadow: 0 0 44px rgba(255, 160, 70, .08), 0 30px 60px -32px rgba(0, 0, 0, .85); }
/* the stage title glows as if formed from the light of the traced lines (--tr: 0 → 1) */
.tri-wrap .tri-num { font: 800 clamp(1.1rem, 1.8vw, 1.45rem)/1.1 var(--font-accent); text-transform: uppercase; color: #ffe7b8;
  letter-spacing: calc(.1em + (1 - var(--tr, 1)) * .32em); opacity: var(--tr, 1); filter: blur(calc((1 - var(--tr, 1)) * 5px));
  text-shadow: 0 0 calc(6px + 12px * var(--tr, 1)) rgba(255, 176, 84, calc(.6 * var(--tr, 1))), 0 0 2px rgba(255, 236, 200, .6); }
@media (min-width: 900px) {
  .tri-wrap .tri-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "num work" "h work" "txt work" "cats work"; column-gap: clamp(20px, 2.6vw, 34px); align-content: start; }
  .tri-wrap .tri-stage > .tri-num { grid-area: num; } .tri-wrap .tri-stage > h3 { grid-area: h; }
  .tri-wrap .tri-stage > p:not(.tri-num):not(.tri-cats) { grid-area: txt; } .tri-wrap .tri-stage > .tri-cats { grid-area: cats; }
  .tri-wrap .tri-stage > .tri-work { grid-area: work; align-self: center; margin-top: 0; }
}
.tri-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.tri-section:not(.is-live) .tri-sparks { display: none; }

/* live (desktop, motion): one pinned, centred composition; scroll traces one level at a time and holds */
.tri-section.is-live { height: 380vh; }
.tri-section.is-live .tri-wrap { padding: 0; width: 100%; height: calc(100vh - var(--header-h, 76px)); justify-content: center;
  --tw: min(600px, 92vw, calc((100vh - var(--header-h, 76px) - 420px) * 1.82)); }
.tri-section.is-live .tiara { margin-top: calc(var(--tw) * -.06); }
.tri-section.is-live .tri-wrap .tri-stages { position: relative; display: block; min-height: 250px; margin-top: .5rem; }
.tri-section.is-live .tier-line, .tri-section.is-live .tier-glow { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.tri-section.is-live .tier-fill { opacity: .04; }
.tri-section.is-live .tier.is-past .tier-fill { opacity: .12; }
.tri-section.is-live .tier.is-past .tier-line { opacity: .5; } .tri-section.is-live .tier.is-past .tier-glow { opacity: .25; }
.tri-section.is-live .tt-dot { opacity: 0; transition: opacity .4s ease; }
.tri-section.is-live .tiara.is-done .tt-dot { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .tri-section.is-live .tiara.is-done .tt-ring { animation: tt-pulse 1.4s ease-out 1; } }
@keyframes tt-pulse { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.2); } }
.tri-section.is-live .tiara .tri-label { opacity: .45; }
.tri-section.is-live .tiara .tri-label.is-lit { opacity: .75; }
.tri-section.is-live .tiara .tri-label.is-active { opacity: 1; }
.tri-section.is-live .tiara .tri-label.is-active b { color: #fff1c9; }
/* phones: the same pinned scene, compact. The triangle and the three stage names stay in view; only the card of the
   stage being traced shows, with its work as a short row of thumbnails, so it all fits one screen */
@media (max-width: 899px) {
  .tri-section.is-live { height: 340vh; height: 340svh; }
  .tri-section.is-live .seq-stage { height: 100vh; height: 100svh; align-items: stretch; }
  .tri-section.is-live .tri-wrap { height: auto; flex: 1 1 auto; justify-content: center; padding: 0 0 2svh;
    --tw: min(560px, 96vw, calc((100svh - var(--header-h, 76px) - 430px) * 1.82)); }
  .tri-section.is-live .tri-head .kicker { margin-bottom: .35rem; }
  .tri-section.is-live .tri-head .h2 { font-size: clamp(1.45rem, 6.6vw, 1.9rem); }
  .tri-section.is-live .tiara { margin-top: calc(var(--tw) * -.04); }
  .tri-section.is-live .tiara-steps { gap: 12px; margin-top: -9%; }
  .tri-section.is-live .tiara .tri-label b { font-size: .78rem; }
  .tri-section.is-live .tiara .tri-label span { font-size: .7rem; }
  /* the three cards share one grid cell, so the column is as tall as the tallest card and centres correctly */
  .tri-section.is-live .tri-wrap .tri-stages { margin-top: .8rem; min-height: 0; display: grid; }
  .tri-section.is-live .tri-stage { position: relative; inset: auto; grid-area: 1 / 1; align-self: start; padding: 16px 16px 14px; gap: .4rem; border-radius: 18px; }
  .tri-section.is-live .tri-stage h3 { font-size: 1.18rem; }
  .tri-section.is-live .tri-stage > p:not(.tri-num):not(.tri-cats) { font-size: .9rem; line-height: 1.45; }
  .tri-section.is-live .tri-cats a { min-height: 32px; padding: 0 .75rem; font-size: .8rem; }
  .tri-section.is-live .tri-work { margin-top: .2rem; height: clamp(72px, calc(100svh - 740px), 112px); }
  .tri-section.is-live .tri-work img { height: 100%; }
  .tri-section.is-live .tri-work--results { grid-template-columns: 1fr 1.15fr; gap: .6rem; }
  .tri-section.is-live .tri-work--results img { height: 100%; object-fit: cover; object-position: left top; }
  .tri-section.is-live .tri-results { gap: .15rem; font-size: .72rem; line-height: 1.25; }
  .tri-section.is-live .tri-results strong { font-size: .95rem; }
  .tri-section.is-live .tri-missing { font-size: .7rem; padding: .3rem; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .tri-section.is-live .tri-head .kicker { display: none; }
  .tri-section.is-live .tri-wrap { --tw: min(560px, 84vw, calc((100svh - var(--header-h, 76px) - 380px) * 1.82)); }
  .tri-section.is-live .tri-stage > p:not(.tri-num):not(.tri-cats) { display: none; }
}