/* Mandy Hayes — cinematic showcase
   Her work is the star: full-bleed media, stacking case cards, smooth scroll and playful interactions.
   Design system: Brand Appart tokens (warm cream paper, warm ink, one hot orange; soft settle ease).
   Type: Youth + PP Neue Montreal + IBM Plex Mono when licensed; Funnel Display + Host Grotesk stand in until then.
   The --plum names are kept so the rest of the stylesheet is untouched; they now hold the orange accent. */

:root {
  --bg: #FBF9EF;
  --fg: #171412;
  --muted: #776B65;
  --line: #EBE9DF;
  --card: #FFFFFF;
  --plum: #FF7722;
  --plum-hi: #FE8923;
  --accent-text: #D9560A;
  --lilac: #EEE1D7;
  --on-plum: #171412;
  --shade: rgba(23, 20, 18, .55);
  --sunset: linear-gradient(90deg, #FF3C34 0%, #FF7722 55%, #FE8923 100%);
  --display: "Youth", "Lexend", "Helvetica Neue", Arial, system-ui, sans-serif;
  --body: "PP Neue Montreal", "Host Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.36, .33, 0, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --radius: clamp(12px, 1.4vw, 18px);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #171412;
  --fg: #FBF9EF;
  --muted: #CABCB5;
  --line: #2E2925;
  --card: #241F1D;
  --plum: #FF7722;
  --plum-hi: #FE8923;
  --accent-text: #FF7722;
  --lilac: #241F1D;
  --on-plum: #171412;
  --shade: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; transition: background-color .5s, color .5s; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--plum); color: var(--on-plum); }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--plum); }
.big { font-family: var(--display); font-weight: 800; letter-spacing: -.045em; line-height: .9; margin: 0; text-wrap: balance; }
.big em { font-style: normal; color: var(--accent-text); }
.h2 { font-size: clamp(44px, 8vw, 128px); }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--fg); color: var(--bg); padding: 10px 14px; border-radius: 8px; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the mask is padded past the glyphs so tight tracking and descenders are never cropped */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .12em .26em; margin: 0 -.12em -.26em; }
.split .wi { display: inline-block; will-change: transform; }

/* ---------- pills / buttons ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; font-size: 15px; border: 0; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: color .4s var(--ease); }
.pill::before { content: ""; position: absolute; inset: 0; background: var(--plum); border-radius: inherit; transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.pill:hover::before { transform: none; }
.pill:hover { color: var(--on-plum); }
.pill.line { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.pill.line:hover { box-shadow: inset 0 0 0 1.5px var(--plum); }
.pill .arr { transition: transform .4s var(--ease); }
.pill:hover .arr { transform: translateX(4px); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; font-size: 13px; font-weight: 500; white-space: nowrap; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }

/* ---------- loader + curtain ---------- */
.loader { position: fixed; inset: 0; z-index: 250; background: var(--plum); color: var(--on-plum); display: none; align-items: flex-end; justify-content: space-between; padding: calc(24px + env(safe-area-inset-top, 0px)) var(--gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gutter); }
.loader.on { display: flex; }
.loader .count { font-family: var(--display); font-weight: 800; font-size: clamp(110px, 26vw, 360px); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.loader .who { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; padding-bottom: 12px; text-align: right; }
.curtain { position: fixed; inset: 0; z-index: 240; background: var(--plum); transform: scaleY(0); transform-origin: 50% 100%; pointer-events: none; }
.curtain.is-down { transform: scaleY(1); }

/* ---------- cursor ---------- */
.cursor, .cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 230; display: none; }
.cursor { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #FFFFFF; mix-blend-mode: difference; }
.cursor-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1px solid var(--fg); display: none; place-items: center; transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background-color .3s, border-color .3s; }
.cursor-ring span { font-size: 13px; font-weight: 600; color: var(--on-plum); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.cursor-ring.big { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--plum); border-color: var(--accent-text); }
.cursor-ring.big span { opacity: 1; }
.cursor-ring.hide { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .has-cursor .cursor { display: block; }
  .has-cursor .cursor-ring { display: grid; }
  .has-cursor, .has-cursor a, .has-cursor button { cursor: none; }
  .has-cursor input[type="range"] { cursor: ew-resize; }
}

/* ---------- header ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: env(safe-area-inset-top, 0px); transition: transform .6s var(--ease); pointer-events: none; }
.site-head.hidden { transform: translateY(-110%); }
.head-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.head-in > * { pointer-events: auto; }
.logo { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.04em; min-height: 44px; align-items: center; color: var(--fg); padding: 0 16px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line); }
.menu-top .logo { background: none; box-shadow: none; padding: 0; }
.logo sup { font-size: 11px; margin-left: 2px; }
.head-right { display: flex; align-items: center; gap: 8px; }
.nav { display: none; align-items: center; gap: 4px; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line); }
.nav a { padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 500; transition: background .3s, color .3s; }
.nav a:hover, .nav a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.icon-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .moon { display: none; } :root[data-theme="dark"] .icon-btn .moon { display: block; } :root[data-theme="dark"] .icon-btn .sun { display: none; }
.talk { display: none; }
.menu-btn { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--fg); color: var(--bg); font-weight: 600; cursor: pointer; }
@media (min-width: 960px) { .nav, .talk { display: inline-flex; } .menu-btn { display: none; } }

/* ---------- mobile menu ---------- */
.menu { position: fixed; inset: 0; z-index: 200; background: var(--plum); color: var(--on-plum); display: flex; flex-direction: column; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gutter-r) calc(28px + env(safe-area-inset-bottom, 0px)) var(--gutter); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease), visibility 0s .7s; }
.menu.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
.menu-top { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
.menu-top .logo { mix-blend-mode: normal; color: inherit; }
.menu-top button { min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; font-weight: 600; cursor: pointer; }
.menu nav { margin: auto 0; display: grid; }
.menu nav a { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(60px, 19vw, 120px); line-height: .95; display: block; overflow: hidden; }
.menu nav a span { display: block; transform: translateY(105%); transition: transform .8s var(--ease); }
.menu.open nav a span { transform: none; }
.menu.open nav a:nth-child(2) span { transition-delay: .05s; } .menu.open nav a:nth-child(3) span { transition-delay: .1s; } .menu.open nav a:nth-child(4) span { transition-delay: .15s; }
.menu-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
body.locked { overflow: hidden; }

/* ---------- hero ---------- */
.logo { white-space: nowrap; }
@media (max-width: 520px) { .logo { font-size: 19px; padding: 0 14px; } .head-right { gap: 6px; } .case .top { font-size: 12px; } .case .top span:first-child { white-space: nowrap; } }
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding-block: calc(110px + env(safe-area-inset-top, 0px)) 60px; overflow: hidden; }
.hero-title { position: relative; z-index: 2; font-family: var(--display); font-weight: 800; letter-spacing: -.055em; line-height: .86; font-size: clamp(64px, 12.6vw, 210px); margin: 0; text-align: center; text-wrap: balance; }
.hero-title em { font-style: normal; color: var(--accent-text); }
.hero-sub { position: relative; z-index: 2; display: grid; gap: 26px; justify-items: center; text-align: center; margin-top: clamp(28px, 4vw, 48px); }
.hero-sub p { margin: 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); }
.hero-sub p b { color: var(--fg); font-weight: 600; }
.floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.float { position: absolute; border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden; box-shadow: 0 40px 80px -30px rgba(23, 20, 18, .45); will-change: transform; }
.float img { width: 100%; height: 100%; object-fit: cover; }
.float.f1 { width: clamp(150px, 16vw, 280px); aspect-ratio: 4 / 5; left: 3%; top: 16%; }
.float.f2 { width: clamp(140px, 14vw, 240px); aspect-ratio: 1; right: 4%; top: 13%; }
.float.f3 { width: clamp(150px, 15vw, 260px); aspect-ratio: 4 / 3; left: 10%; bottom: 8%; }
.float.f4 { width: clamp(130px, 13vw, 220px); aspect-ratio: 3 / 4; right: 9%; bottom: 7%; }
.float.f5 { width: clamp(110px, 9vw, 160px); aspect-ratio: 1; left: 30%; top: 8%; opacity: .9; }
.float.f6 { width: clamp(110px, 10vw, 170px); aspect-ratio: 4 / 3; right: 28%; bottom: 3%; opacity: .9; }
.hero-strip { display: none; }
@media (max-width: 899px) {
  .floaters { display: none; }
  .hero { min-height: auto; padding-bottom: 30px; }
  .hero-strip { display: block; overflow: hidden; margin-top: 40px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
  .hero-strip .t { display: flex; gap: 12px; width: max-content; animation: strip 30s linear infinite; }
  .hero-strip img { width: 180px; height: 130px; object-fit: cover; border-radius: 14px; }
}
@keyframes strip { to { transform: translateX(-50%); } }

/* ---------- showreel ---------- */
.reel { position: relative; height: 100svh; overflow: hidden; }
.reel-media { position: absolute; inset: 0; clip-path: inset(22% 26% 22% 26% round 32px); will-change: clip-path; background: #171412; }
.reel-media > video, .reel-media > img { width: 100%; height: 100%; object-fit: cover; }
.reel-words { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding-inline: var(--gutter); pointer-events: none; z-index: 2; }
.reel-words span { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(36px, 8vw, 140px); line-height: .9; color: #FFFFFF; mix-blend-mode: difference; will-change: transform; }
.reel-cap { position: absolute; left: var(--gutter); right: var(--gutter-r); bottom: 24px; display: flex; justify-content: space-between; gap: 12px; color: #FFFFFF; z-index: 2; font-size: 14px; opacity: 0; }
.reel-play { position: absolute; z-index: 3; right: var(--gutter-r); bottom: 64px; }
@media (max-width: 899px) {
  .reel { height: auto; padding-inline: var(--gutter) var(--gutter-r); }
  .reel-media { position: relative; clip-path: none; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
  .reel-words { position: static; padding: 0 0 18px; justify-content: flex-start; gap: .25em; }
  .reel-words span { font-size: clamp(40px, 11vw, 70px); }
  .reel-cap { position: static; opacity: 1; color: var(--muted); padding-top: 12px; }
}

/* ---------- statement ---------- */
.statement { padding-block: clamp(100px, 14vw, 220px); }
.statement p { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; font-size: clamp(32px, 4.8vw, 76px); max-width: 22ch; text-wrap: pretty; }
.statement .lw { color: color-mix(in srgb, var(--fg) 18%, transparent); transition: color .2s; }
.statement .lw.on { color: var(--fg); }
.chip-img { display: inline-block; width: 1.9em; height: .9em; border-radius: 999px; overflow: hidden; vertical-align: -.05em; margin-inline: .08em; }
.chip-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- results ---------- */
.results { background: var(--plum); color: var(--on-plum); border-radius: var(--radius); margin-inline: clamp(8px, 1vw, 16px); padding-block: clamp(70px, 10vw, 140px); }
.results .eyebrow { color: inherit; opacity: .8; } .results .eyebrow::before { background: currentColor; }
.results .big em { color: inherit; opacity: .55; }
.res-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 20px; margin-top: clamp(48px, 7vw, 90px); }
.res b { display: block; font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(54px, 9vw, 140px); line-height: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res span { display: block; margin-top: 14px; font-weight: 600; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.3; }
.res small { display: block; margin-top: 4px; font-size: 13px; opacity: .75; }
@media (min-width: 900px) { .res-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- section head ---------- */
.sec { padding-block: clamp(90px, 12vw, 180px) 0; }
.sec-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 80px); }
.sec-head p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 18px; }
@media (min-width: 900px) { .sec-head { grid-template-columns: 1.4fr 1fr; align-items: end; } }

/* ---------- stacking work cards ---------- */
.stack { display: grid; gap: 0; }
.case { position: sticky; top: max(88px, 10vh); height: min(82vh, 820px); margin-bottom: 6vh; border-radius: var(--radius); overflow: hidden; display: block; color: #FFFFFF; transform-origin: 50% 0; background: #171412; isolation: isolate; }
.case:last-child { margin-bottom: 0; }
.case .media { position: absolute; inset: 0; z-index: -2; }
.case .media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s var(--ease); }
.case:hover .media img { transform: scale(1.12); }
.case::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,20,18,.35) 0%, rgba(23,20,18,0) 30%, rgba(23,20,18,0) 45%, rgba(23,20,18,.85) 100%); }
.case .dim { position: absolute; inset: 0; background: #171412; opacity: 0; z-index: 1; pointer-events: none; }
.case .top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; gap: 16px; padding: clamp(18px, 2.6vw, 34px); font-size: 14px; font-weight: 500; }
.case .bottom { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 18px; padding: clamp(20px, 3vw, 44px); }
.case h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.05em; line-height: .88; font-size: clamp(44px, 7.4vw, 124px); max-width: 12ch; text-wrap: balance; }
.case .row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.case .go { width: clamp(84px, 9vw, 120px); aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; color: #171412; display: grid; place-items: center; font-weight: 600; font-size: 14px; text-align: center; line-height: 1.1; flex: none; }
@media (max-width: 899px) { .case { position: relative; top: 0; height: auto; aspect-ratio: 4 / 5; margin-bottom: 16px; } .case .go { display: none; } }

/* ---------- services with hover preview ---------- */
.svc-list { border-top: 1px solid var(--line); }
.svc { display: grid; gap: 10px 30px; padding-block: clamp(22px, 3vw, 36px); border-bottom: 1px solid var(--line); position: relative; }
.svc h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.045em; line-height: .95; font-size: clamp(32px, 5.4vw, 84px); transition: transform .6s var(--ease), color .4s; }
.svc p { margin: 0; color: var(--muted); max-width: 52ch; }
.svc .n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
@media (min-width: 900px) {
  .svc { grid-template-columns: 70px minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
  .svc:hover h3 { transform: translateX(22px); color: var(--accent-text); }
}
.preview { position: fixed; left: 0; top: 0; width: 340px; aspect-ratio: 4 / 3; margin: -130px 0 0 -170px; border-radius: 18px; overflow: hidden; pointer-events: none; z-index: 90; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .5s var(--ease); box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.preview.on { opacity: 1; transform: scale(1); }
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.preview img.on { opacity: 1; }
@media (hover: none), (max-width: 899px) { .preview { display: none; } }

/* ---------- client marquee ---------- */
.clients { padding-block: clamp(90px, 12vw, 170px) 0; overflow: hidden; }
.mq { display: flex; width: max-content; gap: 0; will-change: transform; }
.mq span { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(54px, 10vw, 170px); line-height: 1.02; white-space: nowrap; display: inline-flex; align-items: center; }
.mq span::after { content: ""; width: .28em; height: .28em; border-radius: 50%; background: var(--plum); margin-inline: .35em; }
.mq.b span { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
.mq.b span::after { background: transparent; box-shadow: inset 0 0 0 2px var(--plum); }

/* ---------- experience (horizontal on desktop) ---------- */
.xp { padding-block: clamp(90px, 12vw, 180px) 0; }
.xp-track { display: grid; gap: 16px; }
.xp-card { background: var(--card); border-radius: var(--radius); padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 16px; align-content: space-between; min-height: 300px; box-shadow: inset 0 0 0 1px var(--line); }
.xp-card .yr { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(56px, 6vw, 96px); line-height: .85; color: var(--accent-text); }
.xp-card h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(22px, 2vw, 28px); line-height: 1.05; }
.xp-card .co { font-weight: 600; }
.xp-card .desc { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.xp-card .when { font-size: 14px; color: var(--muted); }
@media (min-width: 900px) {
  .xp-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .xp-track { display: flex; gap: 20px; width: max-content; padding-inline: var(--gutter) var(--gutter-r); }
  .xp-card { width: min(420px, 34vw); min-height: 420px; }
}

/* ---------- about teaser ---------- */
.teaser { display: grid; gap: 34px; align-items: end; }
.teaser .quote { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1.02; font-size: clamp(32px, 4.4vw, 68px); margin: 0; text-wrap: balance; }
.teaser .side { display: grid; gap: 24px; align-content: end; }
.teaser .side p { margin: 0; color: var(--muted); font-size: 18px; max-width: 40ch; }
.teaser-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.teaser-imgs div { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.teaser-imgs div:nth-child(2) { margin-top: 40px; }
.teaser-imgs img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .teaser { grid-template-columns: 1.3fr 1fr; gap: 60px; } }

/* ---------- big CTA + footer ---------- */
.cta { padding-block: clamp(110px, 15vw, 240px) clamp(50px, 7vw, 90px); text-align: center; position: relative; }
.cta h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.06em; line-height: .84; font-size: clamp(60px, 14vw, 240px); margin: 0 auto; max-width: 11ch; text-wrap: balance; }
.cta-btn { width: clamp(150px, 16vw, 220px); aspect-ratio: 1; border-radius: 50%; display: inline-grid; place-items: center; background: var(--plum); color: var(--on-plum); font-weight: 600; font-size: clamp(16px, 1.4vw, 19px); margin-top: clamp(30px, 4vw, 50px); line-height: 1.15; transition: background .3s; }
.cta-btn:hover { background: var(--plum-hi); }
.cta-mail { display: grid; gap: 14px; justify-items: center; margin-top: 30px; }
.cta-mail a.addr { font-family: var(--display); font-weight: 700; letter-spacing: -.03em; font-size: clamp(22px, 2.6vw, 34px); border-bottom: 2px solid var(--plum); }
.site-foot { border-top: 1px solid var(--line); }
.site-foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--muted); }
.site-foot nav { display: flex; gap: 6px; flex-wrap: wrap; }
.site-foot nav a { padding: 10px 12px; border-radius: 999px; color: var(--fg); }
.site-foot nav a:hover { background: var(--fg); color: var(--bg); }

/* ---------- project page ---------- */
.p-hero { padding-block: calc(130px + env(safe-area-inset-top, 0px)) clamp(36px, 5vw, 60px); display: grid; gap: 26px; }
.back { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; min-height: 44px; }
.back:hover { color: var(--accent-text); }
.p-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.055em; line-height: .86; font-size: clamp(54px, 10vw, 170px); max-width: 13ch; text-wrap: balance; }
.p-hero .sub { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.035em; line-height: 1; font-size: clamp(26px, 3.4vw, 50px); color: var(--accent-text); max-width: 22ch; text-wrap: balance; }
.p-hero .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.p-hero .lede { margin: 0; font-size: clamp(18px, 1.7vw, 22px); max-width: 60ch; color: var(--muted); }
.cover { margin-inline: clamp(8px, 1vw, 16px); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.cover img { width: 100%; height: auto; }
.gdo { display: grid; gap: 40px; padding-block: clamp(80px, 11vw, 160px); }
.gdo h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: clamp(30px, 3vw, 44px); line-height: 1; }
.gdo h2 span { color: var(--accent-text); }
.gdo p { margin: 0; font-size: 18px; }
@media (min-width: 900px) { .gdo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; } }
.p-sec { display: grid; gap: 26px; padding-bottom: clamp(70px, 9vw, 130px); }
.p-sec > h2 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.05em; line-height: .92; font-size: clamp(38px, 6vw, 96px); max-width: 15ch; text-wrap: balance; }
.p-sec > h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -.035em; font-size: clamp(26px, 3vw, 42px); line-height: 1; }
.p-sec > p { margin: 0; font-size: clamp(17px, 1.5vw, 20px); max-width: 62ch; color: var(--muted); }
.p-sec > ul { margin: 0; padding-left: 1.2em; max-width: 62ch; }
.gallery { display: grid; gap: clamp(12px, 1.6vw, 22px); }
@media (min-width: 760px) { .gallery.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery.two .fig:nth-child(2n) { margin-top: clamp(40px, 6vw, 100px); } }
.fig { margin: 0; display: grid; gap: 12px; align-content: start; }
.fig .media { position: relative; border-radius: calc(var(--radius) * .7); overflow: hidden; background: var(--card); }
.fig .media img, .fig .media video { width: 100%; height: auto; }
.fig.tall .media { max-height: min(80vh, 820px); }
.fig.tall .media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(transparent, var(--card)); pointer-events: none; }
.fig figcaption { font-size: 14px; color: var(--muted); }
.media-btn { all: unset; display: block; width: 100%; cursor: zoom-in; }
.media-btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; }
.full-btn { position: absolute; z-index: 2; right: 16px; bottom: 16px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--fg); color: var(--bg); font-size: 14px; font-weight: 600; cursor: pointer; }
.compare { --pos: 50%; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--card); height: clamp(440px, 76vh, 820px); touch-action: pan-y; user-select: none; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }
.compare .after-img { clip-path: inset(0 0 0 var(--pos)); }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #FFFFFF; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.compare .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171412' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/24px no-repeat; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.compare .lab { position: absolute; top: 16px; z-index: 2; min-height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; }
.compare .lab.b { left: 16px; background: #171412; color: #FFFFFF; } .compare .lab.a { right: 16px; background: #FFFFFF; color: #171412; }
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; z-index: 3; cursor: ew-resize; }
.compare-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 14px; }
.next { position: relative; display: block; margin-inline: clamp(8px, 1vw, 16px); border-radius: var(--radius); overflow: hidden; color: #FFFFFF; min-height: min(86vh, 820px); isolation: isolate; }
.next .media { position: absolute; inset: 0; z-index: -2; }
.next .media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.next::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23,20,18,.25), rgba(23,20,18,.8)); }
.next .in { position: absolute; inset: auto 0 0 0; padding: clamp(22px, 3vw, 46px); display: grid; gap: 14px; }
.next .in b { font-family: var(--display); font-weight: 800; letter-spacing: -.055em; line-height: .86; font-size: clamp(50px, 9vw, 160px); max-width: 12ch; }

/* lightbox */
.lightbox { padding: 0; border: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; background: rgba(23, 20, 18, .95); color: #FFFFFF; }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); animation: lb .4s var(--ease) both; }
@keyframes lb { from { opacity: 0; } }
.lb-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter-r) 12px var(--gutter); font-size: 14px; }
.lb-close { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid #FFFFFF; background: transparent; color: #FFFFFF; font-weight: 600; cursor: pointer; }
.lb-scroll { overflow: auto; padding: 0 var(--gutter-r) calc(30px + env(safe-area-inset-bottom, 0px)) var(--gutter); overscroll-behavior: contain; }
.lb-scroll img { margin: 0 auto; width: min(100%, 1280px); border-radius: 12px; }

/* ---------- about ---------- */
.a-hero { padding-block: calc(130px + env(safe-area-inset-top, 0px)) clamp(50px, 7vw, 90px); }
.a-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.06em; line-height: .82; font-size: clamp(90px, 21vw, 340px); }
.a-hero .role { margin: 16px 0 0; font-family: var(--display); font-weight: 700; letter-spacing: -.04em; font-size: clamp(30px, 4.4vw, 70px); color: var(--accent-text); line-height: 1; }
.bio { display: grid; gap: 26px; }
.bio p { margin: 0; font-size: clamp(18px, 1.6vw, 21px); max-width: 60ch; color: var(--muted); }
.bio p strong { color: var(--fg); font-weight: 600; }
@media (min-width: 900px) { .bio { grid-template-columns: 1fr 1fr; gap: 30px 60px; } }
.band { background: var(--fg); color: var(--bg); border-radius: var(--radius); margin-inline: clamp(8px, 1vw, 16px); padding-block: clamp(70px, 10vw, 140px); }
.band .eyebrow { color: inherit; opacity: .75; }
.band a { color: inherit; border-bottom: 2px solid var(--plum); }
.xp-list { border-top: 1px solid var(--line); }
.xp-row { border-bottom: 1px solid var(--line); }
.xp-row summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding-block: 24px; cursor: pointer; }
.xp-row summary::-webkit-details-marker { display: none; }
.xp-row summary h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-size: clamp(24px, 3.4vw, 50px); transition: color .3s; }
.xp-row summary:hover h3 { color: var(--accent-text); }
.xp-row summary .co { grid-column: 1; color: var(--muted); }
.xp-row summary .plus { grid-column: 2; grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.xp-row[open] summary .plus { transform: rotate(45deg); background: var(--plum); color: var(--on-plum); box-shadow: none; }
.xp-row p { margin: 0 0 26px; max-width: 70ch; color: var(--muted); font-size: 17px; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.skills li { padding: 10px 16px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; transition: background .3s, color .3s; }
.skills li:hover { background: var(--plum); color: var(--on-plum); }
.cols { display: grid; gap: 34px; }
.cols > div { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.cols h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.035em; font-size: 28px; line-height: 1; }
.cols p { margin: 0; color: var(--muted); }
@media (min-width: 900px) { .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reel-media { clip-path: none; }
}

/* =========================================================================
   Opening: film-cut intro → full-bleed hero with a creative director's lens
   ========================================================================= */
.intro { position: fixed; inset: 0; z-index: 260; background: #171412; color: #FBF9EF; display: none; }
.intro.on { display: block; }
.intro .frame { position: absolute; inset: 0; clip-path: inset(29% 39% 29% 39% round 14px); overflow: hidden; }
.intro .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.intro .frame img.on { visibility: visible; }
.intro .lbl { position: absolute; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.intro .tl { top: calc(22px + env(safe-area-inset-top, 0px)); left: var(--gutter); font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.04em; text-transform: none; }
.intro .tr { top: calc(28px + env(safe-area-inset-top, 0px)); right: var(--gutter-r); }
.intro .bl { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: var(--gutter); font-family: var(--display); font-weight: 800; font-size: clamp(90px, 18vw, 260px); line-height: .8; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.intro .br { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); right: var(--gutter-r); text-align: right; }
@media (max-width: 899px) { .intro .frame { clip-path: inset(30% 22% 30% 22% round 14px); } }

.stage-hero { position: relative; height: 100svh; min-height: 560px; color: #FFFFFF; overflow: hidden; background: #171412; }
.sh-media { position: absolute; inset: 0; transform-origin: 50% 50%; overflow: hidden; will-change: transform; }
.sh-layer { position: absolute; inset: 0; }
.sh-layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.sh-layer img.on { opacity: 1; animation: kb 7s linear both; }
@keyframes kb { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.sh-layer.base img { filter: grayscale(1) brightness(.5) contrast(1.1); }
.sh-layer.lens { --x: 50%; --y: 50%; --r: 0px; -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 97%, transparent 100%); mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 97%, transparent 100%); }
.sh-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); pointer-events: none; z-index: 2; transform: translate(-50%, -50%); }
.sh-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,20,18,.55) 0%, rgba(23,20,18,0) 35%, rgba(23,20,18,0) 55%, rgba(23,20,18,.75) 100%); pointer-events: none; z-index: 1; }
.sh-content { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 3vw, 36px); padding-bottom: clamp(96px, 12vh, 140px); pointer-events: none; }
.sh-content a, .sh-content button { pointer-events: auto; }
.sh-title { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.06em; line-height: .84; font-size: clamp(64px, 11.5vw, 210px); text-shadow: 0 4px 60px rgba(0,0,0,.35); }
.sh-title .ln { display: block; will-change: transform; }
.sh-title .ln:nth-child(2) { padding-left: clamp(0px, 9vw, 160px); }
.sh-title em { font-style: normal; color: #FF7722; }
.sh-under { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sh-under p { margin: 0; max-width: 40ch; font-size: clamp(16px, 1.4vw, 19px); color: rgba(255,255,255,.82); }
.sh-under .pill { background: #FFFFFF; color: #171412; }
.sh-under .pill.line { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #FFFFFF; }
.sh-bar { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: center; }
.sh-now { display: inline-flex; align-items: baseline; gap: 10px; font-size: 14px; color: rgba(255,255,255,.75); min-height: 44px; align-items: center; }
.sh-now b { color: #FFFFFF; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.5); }
.sh-now:hover b { border-color: #FFFFFF; }
.sh-ticks { grid-column: 1 / -1; display: flex; gap: 6px; }
.sh-ticks i { flex: 1; height: 2px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; border-radius: 2px; }
.sh-ticks i::after { content: ""; position: absolute; inset: 0; background: #FFFFFF; transform-origin: 0 50%; transform: scaleX(0); }
.sh-ticks i.done::after { transform: scaleX(1); }
.sh-ticks i.on::after { animation: tickfill var(--dur, 5s) linear forwards; }
@keyframes tickfill { to { transform: scaleX(1); } }
.sh-cue { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); display: inline-flex; gap: 10px; align-items: center; }
.sh-cue::after { content: ""; width: 1px; height: 28px; background: currentColor; animation: cue 1.8s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: 50% 100%; } }
@media (max-width: 899px) {
  .sh-title .ln:nth-child(2) { padding-left: 0; }
  .sh-content { padding-bottom: 120px; }
  .sh-under .ctas { width: 100%; }
}
:root:not(.has-cursor) .sh-ring { display: none; }

/* ---------- B · The Wall ---------- */
.wall-hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--bg); }
.wall { position: absolute; inset: -10%; perspective: 1600px; display: grid; place-items: center; }
.wall-plane { display: flex; gap: clamp(10px, 1.2vw, 18px); transform: rotateX(48deg) rotateZ(-24deg) scale(1.35); transform-style: preserve-3d; will-change: transform; }
.wall-col { display: flex; flex-direction: column; gap: clamp(10px, 1.2vw, 18px); animation: colup 46s linear infinite; }
.wall-col:nth-child(even) { animation-name: coldown; animation-duration: 52s; }
@keyframes colup { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes coldown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.wall-col .tile { width: clamp(150px, 15vw, 250px); aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 50px -30px rgba(23,20,18,.5); }
.wall-col .tile:nth-child(3n) { aspect-ratio: 1; }
.wall-col .tile img { width: 100%; height: 100%; object-fit: cover; }
.wall-fade { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 46% 42% at 50% 52%, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 45%, transparent 100%), linear-gradient(180deg, var(--bg) 0%, transparent 18%, transparent 82%, var(--bg) 100%); }
.wall-content { position: relative; z-index: 2; height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; gap: clamp(18px, 2.4vw, 30px); padding-top: 60px; }
.wall-title { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.06em; line-height: .86; font-size: clamp(60px, 10.4vw, 180px); }
.rotator { display: inline-grid; vertical-align: top; overflow: hidden; background: var(--plum); color: var(--on-plum); border-radius: .16em; padding: 0 .14em .04em; margin-top: .06em; }
.rotator span { grid-area: 1 / 1; white-space: nowrap; will-change: transform; }
.rotator span:not(:first-child) { transform: translateY(110%); }
.wall-content p { margin: 0; max-width: 44ch; font-size: clamp(16px, 1.4vw, 19px); color: var(--muted); }
@media (max-width: 899px) { .wall-plane { transform: rotateX(40deg) rotateZ(-20deg) scale(1.1); } .wall-col:nth-child(n+5) { display: none; } }

/* ---------- C · The Type ---------- */
.type-hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--bg); }
.type-media { position: absolute; inset: 0; background: #171412; }
.type-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.type-media img.on { opacity: 1; }
.type-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.type-svg .cover { fill: var(--bg); }
.type-svg text { font-family: var(--display); font-weight: 800; letter-spacing: -14px; }
.type-top, .type-bottom { position: absolute; left: 0; right: 0; z-index: 2; }
.type-top { top: calc(96px + env(safe-area-inset-top, 0px)); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.type-bottom { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.type-bottom .type-line { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.045em; line-height: .95; font-size: clamp(28px, 3.6vw, 56px); }
.type-bottom .type-line em { font-style: normal; color: var(--accent-text); }
.type-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); color: #FFFFFF; display: flex; justify-content: space-between; gap: 16px; opacity: 0; pointer-events: none; }
.type-cap b { font-weight: 600; }

/* ---------- variation switcher (review only) ---------- */
.wall-tilt { transform-style: preserve-3d; }
.stage-hero { background: var(--bg); }
.sh-media { background: #171412; }

.wall-col .tile { background: var(--lilac); }
.type-media.slow img { transition: opacity 1s ease; }

.type-hero.vertical .type-bottom { flex-direction: column; align-items: flex-start; max-width: 56%; }
.type-hero.vertical .type-bottom .pill { min-height: 46px; padding: 0 18px; font-size: 14px; }
.type-hero.vertical .type-line { font-size: clamp(26px, 7.4vw, 34px); }
.type-hero.vertical .type-top { flex-direction: column; gap: 6px; }

/* =========================================================================
   Reliability pass: motion that matters is driven by script, never left to CSS transitions that can stall
   ========================================================================= */
.menu, .menu.open { transition: none; }
.menu nav a span, .menu.open nav a span { transition: none; transform: none; }
.sh-layer img, .sh-layer img.on { transition: none; animation: none; }
.sh-ticks i::after { display: none; }
.sh-ticks i b { position: absolute; inset: 0; background: #FFFFFF; transform-origin: 0 50%; transform: scaleX(0); }
.wall-col, .wall-col:nth-child(even) { animation: none; }
.rotator span:not(:first-child) { transform: none; opacity: 0; }

/* ---------- C · The Type (blend-mode knockout) ---------- */
.type-stage { position: absolute; inset: 0; isolation: isolate; overflow: hidden; }
.type-media img { transition: none; }
.type-knock { position: absolute; inset: 0; background: var(--bg); mix-blend-mode: screen; display: grid; place-items: center; overflow: hidden; }
:root[data-theme="dark"] .type-knock { mix-blend-mode: multiply; }
.type-word { position: relative; font-family: var(--display); font-weight: 800; letter-spacing: -.065em; line-height: .78; font-size: 22vw; white-space: nowrap; color: #000000; padding-right: .05em; will-change: transform; user-select: none; }
:root[data-theme="dark"] .type-word { color: #FFFFFF; }
.type-word span { display: inline-block; }
.type-hero.vertical .type-word { font-size: 27svh; }
.type-hero.vertical .type-knock { place-items: center; }

/* ---------- experience chapters ---------- */
.chapters { padding-top: clamp(90px, 12vw, 180px); }
.ch-scroll { --n: 6; position: relative; height: calc(var(--n) * 70vh + 100vh); }
.ch-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 4vh, 48px); overflow: hidden; }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, 1.1fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.ch-year { display: grid; gap: 14px; }
.digits { display: flex; font-family: var(--display); font-weight: 800; letter-spacing: -.06em; font-size: clamp(110px, 13vw, 230px); line-height: 1; height: .86em; overflow: hidden; color: var(--accent-text); }
.dcol { display: flex; flex-direction: column; }
.dcol span { height: .86em; display: flex; align-items: center; }
.ch-count { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ch-count b { color: var(--fg); font-weight: 500; }
.ch-text { position: relative; min-height: 340px; }
.ch-item { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; }
.ch-item:not(:first-child) { visibility: hidden; opacity: 0; }
.ch-item .when { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
.ch-item h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.045em; line-height: .95; font-size: clamp(30px, 3vw, 50px); text-wrap: balance; }
.ch-item .co { font-weight: 600; font-size: 18px; }
.ch-item p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ch-media { position: relative; aspect-ratio: 4 / 5; max-height: 64vh; width: 100%; justify-self: end; }
.ch-img { position: absolute; inset: 0; margin: 0; border-radius: 24px; overflow: hidden; background: var(--card); box-shadow: 0 50px 90px -40px rgba(23,20,18,.55); }
.ch-img img { width: 100%; height: 100%; object-fit: cover; }
.ch-img.logo img { object-fit: contain; padding: 18%; background: #FFFFFF; }
.ch-img figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(23,20,18,.72); color: #FFFFFF; font-size: 13px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ch-type { position: absolute; inset: 0; background: var(--plum); color: var(--on-plum); display: grid; align-content: end; padding: 28px; font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(40px, 4vw, 64px); line-height: .9; }
.ch-type small { display: block; font-family: var(--body); font-weight: 500; letter-spacing: 0; font-size: 15px; margin-top: 14px; opacity: .85; }
.ch-rail { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rail-line { position: absolute; left: var(--gutter); right: var(--gutter-r); top: 7px; height: 2px; background: var(--line); }
.rail-line i { position: absolute; inset: 0; background: var(--plum); transform-origin: 0 50%; transform: scaleX(0); }
.rail-dot { position: relative; display: grid; justify-items: start; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--muted); font-size: 13px; min-height: 44px; }
.rail-dot::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); transition: background .3s, box-shadow .3s, transform .3s; }
.rail-dot.past::before { background: var(--plum); box-shadow: none; }
.rail-dot.on::before { background: var(--plum); box-shadow: 0 0 0 6px color-mix(in srgb, var(--plum) 25%, transparent); transform: scale(1.1); }
.rail-dot.on { color: var(--fg); font-weight: 600; }
.rail-dot b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.03em; color: inherit; }
.ch-mobile { display: none; }
@media (max-width: 899px) {
  .ch-scroll { height: auto; }
  .ch-stage { display: none; }
  .ch-mobile { display: grid; gap: 18px; }
  .ch-m { display: grid; gap: 14px; background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: inset 0 0 0 1px var(--line); }
  .ch-m .ch-img { position: relative; aspect-ratio: 4 / 3; box-shadow: none; }
  .ch-m .yr { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: 64px; line-height: .85; color: var(--accent-text); }
  .ch-m h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: 28px; line-height: 1; }
  .ch-m p { margin: 0; color: var(--muted); font-size: 15px; }
  .ch-m .when { font-family: var(--mono); font-size: 12px; text-transform: uppercase; color: var(--muted); }
}

.dcol { align-self: flex-start; }

.digits { font-variant-numeric: tabular-nums; }
.dcol span { justify-content: center; }

/* layer order: slideshow z-indexes stay inside their own layer */
.type-media { z-index: 0; }
.type-knock { z-index: 1; }
.sh-layer.base { z-index: 0; }
.sh-layer.lens { z-index: 1; }

/* ---------- process (preview) ---------- */
.process { padding-block: clamp(90px, 12vw, 180px) clamp(40px, 6vw, 80px); }
.pr-track { position: relative; display: grid; gap: clamp(70px, 10vw, 150px); }
.pr-line { position: absolute; left: clamp(40px, 5.6vw, 80px); top: 0; bottom: 0; width: 2px; background: var(--line); }
.pr-line i { position: absolute; inset: 0; background: var(--plum); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.pr-step { position: relative; display: grid; grid-template-columns: clamp(80px, 11vw, 160px) minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 56px); align-items: center; }
.pr-step.flip .pr-copy { order: 3; } .pr-step.flip .pr-fig { order: 2; }
.pr-num { position: relative; z-index: 1; align-self: start; justify-self: center; width: clamp(80px, 9vw, 130px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 2px var(--line); font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: clamp(28px, 3.2vw, 48px); color: var(--muted); transition: background .5s, color .5s, box-shadow .5s, transform .6s var(--ease); }
.pr-step.on .pr-num { background: var(--plum); color: var(--on-plum); box-shadow: none; transform: scale(1.06); }
.pr-copy { display: grid; gap: 16px; align-content: center; }
.pr-copy h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.045em; line-height: .95; font-size: clamp(34px, 4.2vw, 68px); text-wrap: balance; }
.pr-copy p { margin: 0; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 46ch; }
.pr-stat { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.pr-stat b { font-family: var(--display); font-weight: 800; letter-spacing: -.05em; font-size: clamp(56px, 6vw, 100px); line-height: .85; color: var(--accent-text); }
.pr-stat span { font-weight: 600; }
.pr-fig { margin: 0; display: grid; gap: 10px; }
.pr-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--card); box-shadow: 0 40px 80px -40px rgba(23,20,18,.5); }
.pr-img img { width: 100%; height: 100%; object-fit: cover; }
.pr-fig figcaption { font-size: 14px; color: var(--muted); }
@media (max-width: 899px) {
  .pr-line { left: 28px; }
  .pr-step, .pr-step.flip { grid-template-columns: 56px minmax(0, 1fr); }
  .pr-num { width: 56px; font-size: 20px; }
  .pr-step .pr-copy, .pr-step.flip .pr-copy { order: 2; }
  .pr-step .pr-fig, .pr-step.flip .pr-fig { order: 3; grid-column: 2; }
}

/* =========================================================================
   Showreel — 1920×1080 motion composition (assets/reel.js)
   ========================================================================= */
.rs-host { position: absolute; inset: 0; overflow: hidden; background: #0E0C0E; }
.rs-stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; overflow: hidden; background: #0E0C0E; color: #F4F2EF; font-family: var(--display); }
.rs { position: absolute; inset: 0; overflow: hidden; }
.rs img { display: block; max-width: none; }
.rs-ch { display: inline-block; }
.rs-tag { position: absolute; left: 96px; bottom: 72px; font-family: var(--mono); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,242,239,.8); }
.rs-tag.dark { color: rgba(14,12,14,.7); }

/* S1 title */
.s-title { background: #0E0C0E; display: grid; place-content: center; text-align: center; }
.rs-bar { position: absolute; left: 0; right: 0; top: 50%; height: 260px; margin-top: -150px; background: #6B2D5C; transform-origin: 0 50%; }
.rs-name { position: relative; margin: 0; font-weight: 800; font-size: 300px; letter-spacing: -.06em; line-height: .9; overflow: hidden; padding: 0 20px .06em; }
.rs-role { position: relative; margin: 36px 0 0; font-family: var(--mono); font-size: 26px; letter-spacing: .14em; color: #E9B8DD; }
.rs-flash { position: absolute; inset: 0; background: #6B2D5C; transform-origin: 50% 100%; }

/* S2 kinetic words */
.s-words { background: #0E0C0E; }
.rs-frame { position: absolute; right: 120px; top: 140px; width: 1100px; height: 800px; border-radius: 28px; overflow: hidden; }
.rs-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-words { position: absolute; left: 96px; top: 50%; width: 1760px; height: 300px; margin-top: -150px; overflow: hidden; }
.rs-words span { position: absolute; left: 0; top: 0; font-weight: 800; font-size: 280px; letter-spacing: -.06em; line-height: 1; color: #F4F2EF; mix-blend-mode: difference; white-space: nowrap; }
.rs-count { position: absolute; left: 100px; bottom: 80px; font-family: var(--mono); font-size: 24px; letter-spacing: .1em; color: #E9B8DD; }

/* S3 be-stack */
.s-be { background: #F4F2EF; color: #0E0C0E; }
.rs-be-lines { position: absolute; left: 110px; top: 210px; display: grid; gap: 4px; }
.rs-be-lines span { font-weight: 800; font-size: 150px; letter-spacing: -.055em; line-height: .98; }
.rs-be-img { position: absolute; right: 110px; top: 120px; width: 820px; height: 840px; border-radius: 24px; overflow: hidden; }
.rs-be-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-beautiful { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 330px; letter-spacing: -.065em; }
.rs-beautiful .au { color: #E1251B; }
.rs-beautiful .heart { font-style: normal; color: #E1251B; font-size: 120px; margin-left: 24px; align-self: flex-end; margin-bottom: 140px; display: inline-block; }

/* S4 better together */
.s-bt { background: #0E0C0E; }
.rs-bt-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-bt-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,12,14,.75), rgba(14,12,14,.25) 50%, rgba(14,12,14,.75)); }
.rs-bt-words { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 40px; font-weight: 800; font-size: 250px; letter-spacing: -.06em; color: #FFFFFF; text-shadow: 0 10px 80px rgba(0,0,0,.5); }

/* S5 walmart */
.s-wmg { background: #0071CE; }
.rs-wmg-panels { position: absolute; inset: 0 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: center; }
.rs-wmg-panels img { width: 100%; height: 860px; object-fit: cover; border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.rs-wmg-band { position: absolute; left: 0; right: 0; bottom: 150px; height: 230px; background: #FFC220; transform-origin: 50% 100%; display: flex; align-items: center; padding-left: 96px; overflow: hidden; }
.rs-wmg-band span { font-weight: 800; font-size: 150px; letter-spacing: -.055em; color: #0E0C0E; display: inline-block; }

/* S6 grid */
.s-grid { background: #0E0C0E; }
.rs-grid { position: absolute; left: 50%; top: 50%; width: 1800px; margin: -495px 0 0 -900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; transform-origin: 50% 50%; }
.rs-grid .t { height: 310px; border-radius: 18px; overflow: hidden; background: #1A161A; }
.rs-grid .t img { width: 100%; height: 100%; object-fit: cover; }

/* S7 logos */
.s-logos { background: #FFFFFF; color: #0E0C0E; }
.rs-logos { position: absolute; left: 110px; right: 110px; top: 60px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; transform-origin: 50% 40%; }
.rs-logos .t { height: 190px; border-radius: 22px; background: #F4F2EF; display: grid; place-items: center; padding: 30px; }
.rs-logos .t { overflow: hidden; }
.rs-logos img { width: 100%; height: 100%; object-fit: contain; }
.rs-identity { position: absolute; left: 110px; bottom: 30px; margin: 0; font-weight: 800; font-size: 200px; letter-spacing: -.06em; color: #6B2D5C; overflow: hidden; }

/* S8 before / after */
.s-ba { background: #0E0C0E; }
.rs-device { position: absolute; left: 50%; top: 110px; width: 1440px; margin-left: -720px; height: 860px; border-radius: 26px; overflow: hidden; background: #1A161A; box-shadow: 0 60px 120px -40px rgba(0,0,0,.8); }
.rs-device .bar { height: 46px; display: flex; gap: 10px; align-items: center; padding-left: 22px; background: #2A2529; }
.rs-device .bar i { width: 14px; height: 14px; border-radius: 50%; background: #5A5257; }
.rs-device .scr { position: absolute; inset: 46px 0 0 0; overflow: hidden; }
.rs-device .scr img { position: absolute; inset: 0; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
.rs-device .wipe { position: absolute; top: 0; bottom: 0; width: 6px; margin-left: -3px; background: #E9B8DD; box-shadow: 0 0 30px #E9B8DD; }
.rs-stat { position: absolute; right: 110px; top: 50%; transform: translateY(-50%); display: grid; gap: 18px; text-align: right; }
.rs-stat b { font-weight: 800; font-size: 210px; letter-spacing: -.06em; line-height: .85; color: #E9B8DD; }
.rs-stat span { font-family: var(--body); font-size: 32px; line-height: 1.3; color: rgba(244,242,239,.85); }
.rs-lab { position: absolute; top: 140px; font-family: var(--mono); font-size: 22px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 18px; border-radius: 999px; }
.rs-lab.b { left: 290px; background: #0E0C0E; color: #F4F2EF; }
.rs-lab.a { right: 290px; background: #F4F2EF; color: #0E0C0E; }

/* S9 clients */
.s-clients { background: #0E0C0E; }
.rs-client span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; font-size: 300px; letter-spacing: -.06em; color: #F4F2EF; }

/* S10 end */
.s-end { background: #0E0C0E; display: grid; place-content: center; text-align: center; }
.rs-orb { position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; border-radius: 50%; background: radial-gradient(circle, rgba(107,45,92,.85), rgba(107,45,92,0) 65%); }
.rs-end { position: relative; margin: 0; font-weight: 800; font-size: 190px; letter-spacing: -.06em; line-height: .92; }
.rs-end .ln { display: block; overflow: hidden; padding-bottom: .04em; }
.rs-end em { font-style: normal; color: #E9B8DD; }
.rs-sign { position: relative; margin: 50px 0 0; font-family: var(--mono); font-size: 28px; letter-spacing: .08em; color: rgba(244,242,239,.85); }
.rs-sign b { color: #FFFFFF; font-weight: 500; }

/* site controls */
.reel-ui { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter-r); bottom: 22px; display: flex; align-items: center; gap: 14px; color: #FFFFFF; }
.reel-ui button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); background: rgba(14,12,14,.45); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; flex: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.reel-ui .track { flex: 1; height: 3px; background: rgba(255,255,255,.3); border-radius: 3px; overflow: hidden; }
.reel-ui .track i { display: block; height: 100%; background: #FFFFFF; transform-origin: 0 50%; transform: scaleX(0); }
.reel-ui .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 899px) { .reel-ui { left: 12px; right: 12px; bottom: 12px; } .reel-ui .lbl { display: none; } }

/* Brand Appart system details (data-ds="ba" is always set on <html>) */
[data-ds="ba"] .big, [data-ds="ba"] .hero-title, [data-ds="ba"] .wall-title, [data-ds="ba"] .case h3, [data-ds="ba"] .cta h2 { letter-spacing: -.035em; font-weight: 800; }
[data-ds="ba"] .eyebrow { font-weight: 700; letter-spacing: .04em; font-size: 11.5px; }
[data-ds="ba"] .pill, [data-ds="ba"] .menu-btn { border-radius: 8px; text-transform: uppercase; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; min-height: 46px; padding: 0 20px; }
[data-ds="ba"] .nav, [data-ds="ba"] .nav a, [data-ds="ba"] .logo, [data-ds="ba"] .icon-btn { border-radius: 10px; }
[data-ds="ba"] .nav a { text-transform: uppercase; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; }
[data-ds="ba"] .logo sup { color: var(--plum); }
[data-ds="ba"] .tag { border-radius: 6px; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
[data-ds="ba"] .rotator { border-radius: .1em; }
[data-ds="ba"] .pr-num { border-radius: 14px; }
[data-ds="ba"] .case .go, [data-ds="ba"] .cta-btn { border-radius: 14px; text-transform: uppercase; font-weight: 700; font-size: 13px; letter-spacing: .02em; }
[data-ds="ba"] .xp-row summary .plus, [data-ds="ba"] .rail-dot::before { border-radius: 4px; }
[data-ds="ba"] .skills li { border-radius: 8px; }
[data-ds="ba"] .chip-img { border-radius: 6px; }
[data-ds="ba"] .sh-title em { color: #FFC765; }

[data-ds="ba"] .rotator { margin-top: .16em; }

.rs-logos .t { position: relative; padding: 0; }
.rs-logos .t img { position: absolute; left: 30px; top: 26px; width: calc(100% - 60px); height: calc(100% - 52px); object-fit: contain; }

/* the showreel always uses the Brand Appart type (Youth / PP Neue Montreal when licensed; Funnel Display / Host Grotesk until then) */
.rs-stage { --display: "Youth", "Lexend", "Helvetica Neue", Arial, sans-serif; --body: "PP Neue Montreal", "Host Grotesk", "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; }

.rs-stage .rs-name { font-size: 268px; }
.rs-bt-shade { background: linear-gradient(90deg, rgba(14,12,14,.75), rgba(14,12,14,.25) 50%, rgba(14,12,14,.75)), linear-gradient(180deg, transparent 70%, rgba(14,12,14,.92) 100%); }

.s-bt .rs-tag { top: 72px; bottom: auto; background: rgba(14,12,14,.55); padding: 10px 16px; border-radius: 8px; }

/* ---------- showreel discoverability ---------- */
.reel-words { display: none; }
.reel-intro { display: grid; gap: 18px; padding-top: clamp(90px, 12vw, 170px); padding-bottom: clamp(24px, 3vw, 40px); }
.reel-intro p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 18px; }
@media (min-width: 900px) { .reel-intro { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.reel-media { cursor: pointer; }
.reel-watch { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 16px; padding: 10px 26px 10px 10px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); color: #141113; cursor: pointer; box-shadow: 0 30px 60px -20px rgba(0,0,0,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .4s var(--ease), background .3s; text-align: left; }
.reel-watch:hover { transform: translate(-50%, -50%) scale(1.05); }
.reel-watch .pb { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--plum); color: var(--on-plum); flex: none; }
.reel-watch .pb svg { position: relative; margin-left: 3px; }
.reel-watch .ring { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--plum); }
.reel-watch .tx { display: grid; line-height: 1.15; }
.reel-watch b { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.reel-watch small { font-size: 13px; color: #6A636B; margin-top: 2px; }
[data-ds="ba"] .reel-watch { border-radius: 14px; }
[data-ds="ba"] .reel-watch .pb { border-radius: 10px; }
.reel-live { position: absolute; z-index: 5; top: 20px; left: var(--gutter); display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(14,12,14,.6); color: #FFFFFF; font-size: 13px; font-weight: 600; visibility: hidden; opacity: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.reel-live i { width: 8px; height: 8px; border-radius: 50%; background: #FF4D4D; }
.watch-btn { gap: 10px; }
.watch-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--plum); display: inline-block; }
.sh-under .watch-btn .dot { background: #FFFFFF; }
@media (max-width: 899px) { .reel-watch { padding: 8px 18px 8px 8px; gap: 12px; } .reel-watch .pb { width: 52px; height: 52px; } .reel-watch b { font-size: 18px; } .reel-live { top: 12px; left: 12px; } }

/* full-screen player */
.reel-modal { padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: #0E0C0E; }
.reel-modal::backdrop { background: #0E0C0E; }
.reel-modal[open] { display: block; }
.reel-modal .rs-host { position: absolute; inset: 0; }
.reel-close { position: absolute; z-index: 6; top: calc(16px + env(safe-area-inset-top, 0px)); right: var(--gutter-r); min-height: 46px; padding: 0 20px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.8); background: rgba(14,12,14,.5); color: #FFFFFF; font-weight: 600; cursor: pointer; }
.modal-ui { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

/* "you scrolled past the reel" */
.reel-nudge { position: fixed; z-index: 120; left: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px; border-radius: 18px; background: var(--card); color: var(--fg); box-shadow: 0 24px 60px -20px rgba(0,0,0,.45), inset 0 0 0 1px var(--line); max-width: calc(100vw - 32px); }
.reel-nudge[hidden] { display: none; }
.reel-nudge img { width: 72px; height: 48px; object-fit: cover; border-radius: 10px; flex: none; }
.reel-nudge div { display: grid; line-height: 1.2; min-width: 0; }
.reel-nudge b { font-size: 15px; }
.reel-nudge span { font-size: 13px; color: var(--muted); }
.reel-nudge .pill { min-height: 40px; padding: 0 16px; font-size: 13px; }
.reel-nudge .x { width: 36px; height: 36px; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; }
[data-ds="ba"] .reel-nudge { border-radius: 12px; }

.rs-stage .rs-bt-words { font-size: 222px; }
.rs-stage .rs-end { font-size: 168px; }