/* EDITORIAL VIDEO PORTFOLIO — V1 */
:root {
  --bg: #111111;
  --bg-soft: #181818;
  --panel: #1c1c1c;
  --panel-light: #222222;
  --ink: #f4f4f4;
  --muted: #a9a9a9;
  --line: rgba(242,242,242, .15);
  --acid: #ffb81c;
  --acid-rgb: 255, 184, 28;
  --acid-dark: #e8a200;
  --display: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --body: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
  --mono: 'Xanh Mono', ui-monospace, Consolas, monospace;
  --radius: 12px;
  --page-padding: clamp(22px, 5.1vw, 84px);
  --ease: cubic-bezier(.2, .75, .1, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--body); font-size: 16px; line-height: 1.6; overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
::selection { background: var(--acid); color: var(--bg); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }
.page-width { max-width: 1640px; width: 100%; margin-inline: auto; padding-inline: var(--page-padding); }
.section-spacing { padding-block: clamp(95px, 10vw, 180px); }
.section-shell { position: relative; }
.skip-link { position: fixed; z-index: 300; top: -100px; left: 20px; padding: 12px 20px; background: var(--acid); color: var(--bg); }
.skip-link:focus { top: 15px; }
.site-noise { position: fixed; z-index: 999; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

/* Top navigation */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(17,17,17,.87); border-bottom: 1px solid var(--line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.nav-inner { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.brand { display: inline-flex; align-items: center; gap: 13px; flex: none; }
.brand-icon { width: 43px; height: 43px; position: relative; background: var(--acid); border-radius: 5px; transform: rotate(-7deg); overflow: hidden; }
.brand-copy { display: flex; flex-direction: column; gap: 0; line-height: 1.2; }
.brand-copy strong { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.05em; }
.brand-copy small { font-size: 9px; font-weight: 700; letter-spacing: .2em; color: var(--muted); margin-top: 6px; }
.main-nav { display: flex; align-items: center; gap: clamp(20px, 2.7vw, 44px); }
.main-nav a { color: #d8d8d8; font-size: 13px; font-weight: 700; transition: color .2s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--acid); }
.nav-actions { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); }
.language-switch { display: flex; gap: 7px; align-items: center; font-size: 11px; color: #8c8c8c; }
.lang-btn { appearance: none; border: 0; background: none; color: #8b8b8b; font-size: 11px; font-weight: 800; padding: 5px 2px; letter-spacing: .06em; }
.lang-btn.is-active { color: var(--acid); }
.nav-cta { background: var(--acid); color: #171717; border: 1px solid var(--acid); display: flex; align-items: center; justify-content: center; gap: 22px; min-height: 43px; padding: 8px 19px; border-radius: 4px; font-size: 12px; font-weight: 800; white-space: nowrap; transition: background .25s, transform .25s; }
.nav-cta:hover { background: #ffd36b; transform: translateY(-2px); }
.nav-cta span:last-child { font-size: 19px; font-weight: 400; }
.menu-toggle { width: 40px; height: 40px; display: none; flex-direction: column; justify-content: center; gap: 7px; background: transparent; border: 1px solid var(--line); border-radius: 4px; padding: 10px; }
.menu-toggle span { height: 2px; width: 100%; background: var(--ink); transform-origin: center; transition: transform .25s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Hero */
.hero { min-height: min(850px, 96vh); min-height: min(850px, 96svh); background: radial-gradient(ellipse 36% 65% at 84% 47%, rgba(148,179,59,.09), transparent 77%), var(--bg); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(360px,.87fr); gap: clamp(20px, 4.3vw, 78px); min-height: 765px; align-items: center; padding-block: 78px 120px; }
.hero-copy { padding-top: 38px; position: relative; z-index: 2; }
.hero-overline { font-size: clamp(10px, .88vw, 13px); font-weight: 800; letter-spacing: .125em; color: var(--acid); display: flex; align-items: center; gap: 13px; margin-bottom: 37px; white-space: nowrap; }
.eyebrow-line { height: 2px; width: 24px; background: var(--acid); display: inline-block; flex: none; }
.hero-title { margin: 0; text-transform: uppercase; font-family: var(--display); font-size: clamp(62px, 6.5vw, 112px); font-weight: 700; letter-spacing: -.085em; line-height: .97; }
.hero-title span { display: block; white-space: nowrap; }
.hero-title .stroke-line { color: transparent; -webkit-text-stroke: 1.3px #ececec; text-stroke: 1.3px #ececec; }
.hero-title .accent-line { color: var(--acid); }
.hero-lower { margin-top: 38px; max-width: 595px; }
.hero-description { color: #bcbcbc; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.85; max-width: 510px; margin: 0 0 28px; }
.hero-cta-group { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn { min-height: 53px; display: inline-flex; justify-content: center; align-items: center; gap: 18px; border-radius: 4px; padding: 9px 18px; font-size: 13px; font-weight: 800; border: 1px solid transparent; transition: background .25s, border-color .25s, color .25s, transform .25s; }
.btn:hover { transform: translateY(-3px); }
.btn-accent { background: var(--acid); color: #141414; padding-left: 24px; }
.btn-accent:hover { background: #ffd36b; }
.arrow-circle { display: grid; place-items: center; width: 29px; height: 29px; background: #1a1a1a; color: var(--acid); border-radius: 50%; font-size: 18px; font-weight: 400; }
.btn-outline { background: transparent; color: var(--ink); border-color: rgba(244,244,244,.32); padding-inline: 22px; }
.btn-outline:hover { border-color: var(--acid); color: var(--acid); }
.mini-play { color: var(--acid); font-size: 11px; }
.hero-bottom-meta { margin-top: 65px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 615px; }
.live-indicator { display: inline-flex; gap: 10px; align-items: center; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .075em; }
.live-dot { width: 7px; height: 7px; background: var(--acid); border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,184,28,.10); }
.timecode { font-family: var(--mono); color: #8b8b8b; font-size: 12px; letter-spacing: .04em; white-space: nowrap; }
.timecode span { color: var(--acid); font-size: 10px; margin-left: 10px; }
.hero-art { height: 570px; min-width: 0; position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-halo { position: absolute; width: min(525px, 105%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 58% 45%, rgba(255,176,20,.48),rgba(190,120,10,.24) 31%,rgba(95,95,95,.08) 58%,transparent 76%); filter: blur(8px); transform: translate(20px,-5px); z-index: -1; }
.hero-grid-lines { position: absolute; width: 110%; height: 110%; background-image: linear-gradient(rgba(233,233,233,.055) 1px, transparent 1px),linear-gradient(90deg,rgba(233,233,233,.055) 1px,transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse at center,black 5%, transparent 72%); z-index: -2; }
.frame-number { position: absolute; right: -14px; top: 10px; writing-mode: vertical-rl; font-size: 10px; font-weight: 800; color: #9c9c9c; letter-spacing: .2em; }
.hero-film { position: relative; width: clamp(290px,27vw,390px); aspect-ratio: .84; transform: rotate(5deg); border: 9px solid #282828; background: #191919; outline: 1px solid #6d6d6d; box-shadow: 0 30px 90px rgba(0,0,0,.55), 8px 12px 0 #343434; border-radius: 9px; padding: 0; color: #f9f9f9; overflow: hidden; transition: transform .35s var(--ease); }
.hero-film:hover { transform: rotate(2deg) translateY(-8px); }
.film-topline, .film-bottomline { position: absolute; left: 0; right: 0; height: 51px; z-index: 2; display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 800; letter-spacing: .14em; padding: 0 18px; background: #191919; }
.film-topline { top: 0; }
.film-bottomline { bottom: 0; }
.rec-dot { color: #ff6c6c; font-size: 11px; }
.film-image { position: absolute; inset: 51px 0; overflow: hidden; }
.film-image img { height: 100%; width: 100%; object-fit: cover; object-position: 34% center; filter: saturate(1.18); transform: scale(1.3); }
.film-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(0,0,0,.2)); }
.film-play { z-index: 3; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 77px; height: 77px; border-radius: 50%; display: grid; place-items: center; padding-left: 6px; color: #151515; background: var(--acid); font-size: 24px; box-shadow: 0 0 0 13px rgba(255,184,28,.17); transition: scale .25s; }
.hero-film:hover .film-play { scale: 1.13; }
.orbit-label { position: absolute; font-size: 10px; line-height: 1.65; font-weight: 800; letter-spacing: .13em; z-index: 2; }
.orbit-label-top { top: 50px; left: -26px; }
.orbit-label-bottom { right: -31px; bottom: 64px; }
.floating-scrub { position: absolute; bottom: 13px; left: -60px; z-index: 2; transform: rotate(-7deg); display: flex; align-items: center; gap: 15px; background: var(--acid); color: #161616; padding: 15px 18px; border-radius: 3px; box-shadow: 0 15px 25px rgba(0,0,0,.3); }
.scrub-timestamp { font-family: var(--mono); font-weight: 800; font-size: 12px; }
.scrub-track { display: flex; align-items: center; gap: 3px; height: 22px; }
.scrub-track i { display: block; height: 8px; width: 3px; background: #1d1d1d; opacity: .9; border-radius: 2px; }
.scrub-track i:nth-child(3n) { height: 19px; }.scrub-track i:nth-child(4n) { height: 14px; }.scrub-track i:nth-child(5n) { height: 4px; }
.hero-scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .2em; color: #a6a6a6; }
.hero-scroll span:last-child { color: var(--acid); font-size: 23px; }

/* Marquee */
.marquee-wrap { overflow: hidden; background: var(--acid); color: #171717; border-block: 1px solid var(--acid); transform: skewY(-.75deg); transform-origin: center; padding: 19px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-track span { font-family: var(--display); font-size: clamp(17px,2vw,30px); font-weight: 700; letter-spacing: -.045em; white-space: nowrap; padding-right: 48px; }
.marquee-track b { font-weight: 400; padding: 0 25px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Section basics */
.section-overline { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 19px; border-bottom: 1px solid var(--line); font-size: 11px; color: #939393; font-weight: 800; letter-spacing: .105em; }
.index-tag { color: var(--acid); }
.section-header { display: flex; justify-content: space-between; gap: 50px; align-items: end; margin: 38px 0 42px; }
.section-title { margin: 0; font-family: var(--display); font-size: clamp(67px, 8.9vw, 155px); line-height: .88; letter-spacing: -.09em; font-weight: 700; text-transform: uppercase; }
.section-title em { font-weight: 700; font-style: normal; color: var(--acid); }
.section-lead { max-width: 345px; margin: 0 4px 8px 0; color: #b1b1b1; line-height: 1.85; font-size: 15px; }
.work-section { background: #111111; }
.project-frame-label { position: absolute; z-index: 3; right: 17px; top: 15px; border-radius: 3px; background: rgba(16,16,16,.74); color: #f8f8f8; border: 1px solid rgba(255,255,255,.25); font-family: var(--mono); letter-spacing: .05em; font-size: 10px; padding: 4px 9px; backdrop-filter: blur(6px); }
.project-view { z-index: 3; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.85); background: var(--acid); color: var(--bg); display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; font-size: 11px; font-weight: 800; letter-spacing: .02em; opacity: 0; transition: opacity .3s, transform .3s; }
.project-link-arrow { border: 1px solid #575757; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: var(--acid); transition: transform .2s, background .2s; flex: none; }
.demo-note { margin-top: 53px; display: flex; gap: 15px; align-items: start; color: #929292; border-top: 1px solid var(--line); padding-top: 19px; }
.demo-note p { font-size: 12px; margin: 0; max-width: 700px; }
.demo-note-star { color: var(--acid); font-size: 18px; }

/* Philosophy stripe */
.statement-section { overflow: hidden; background: #ffb81c; color: #161616; padding: clamp(72px,8vw,130px) 0; }
.statement-inner { display: flex; flex-direction: column; gap: 18px; }
.statement-small, .statement-signature { font-size: 10px; letter-spacing: .16em; font-weight: 800; }
.statement-inner p { font-family: var(--display); font-size: clamp(45px,6.4vw,105px); font-weight: 700; letter-spacing: -.085em; line-height: 1.05; max-width: 1270px; margin: 0; }
.muted-statement { color: #757575; }
.lime-statement { color: #161616; font-style: italic; }
.statement-signature { align-self: end; margin-top: 10px; }

/* About */
.about-section { background: #161616; }
.about-grid { display: grid; grid-template-columns: minmax(0,.98fr) minmax(0,1.02fr); gap: clamp(50px,7vw,115px); align-items: center; padding-top: 56px; }
.about-art { position: relative; min-height: 590px; background: radial-gradient(ellipse at 50% 40%,rgba(255,190,50,.45),transparent 50%), linear-gradient(139deg,#3e3e3e 0%,#1b1b1b 64%,#141414 100%); border: 1px solid #707070; overflow: hidden; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; }
.about-art::after { content:''; position:absolute; inset:0; background: linear-gradient(90deg,rgba(232,232,232,.08) 1px,transparent 1px),linear-gradient(rgba(232,232,232,.08) 1px,transparent 1px); background-size: 58px 58px; }
.about-art-top,.about-art-bottom { position: relative; z-index: 3; display:flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.about-disc { position:absolute; width:440px; height:440px; border-radius:50%; background: var(--acid); top: 50%;left: 50%;transform:translate(-50%,-50%) rotate(-20deg);box-shadow:0 0 0 23px rgba(255,194,60,.13),0 0 0 70px rgba(255,194,60,.055); }
/* The cut-out portrait stands centred in front of the disc. */
.about-portrait { position: absolute; z-index: 1; bottom: 0; left: 50%; height: 92%; width: auto; max-width: none; transform: translateX(-50%); filter: drop-shadow(0 24px 44px rgba(0,0,0,.4)); pointer-events: none; user-select: none; }
.about-copy { max-width:650px; }
.small-mark { color:var(--acid);font-size:12px;letter-spacing:.15em;font-weight:800;margin-bottom:28px; }
.about-copy h2 {font-size:clamp(55px,6vw,99px);line-height:1;letter-spacing:-.085em;font-family:var(--display);font-weight:700;margin:0 0 28px; }
.about-copy h2 em { color:var(--acid);font-style:normal; }
.about-copy p { font-size:16px;line-height:1.9;color:#b9b9b9;margin:0 0 15px; }
.about-copy p strong { font-weight:700;color:#f4f4f4; }
.capabilities { margin-top:31px;padding-block:25px 34px;border-top:1px solid var(--line); }
.capabilities-label {color:var(--acid);font-size:11px;letter-spacing:.12em;font-weight:800;display:block;margin-bottom:18px; }
.tools-list {display:flex;flex-wrap:wrap;gap:9px; }
.tools-list span {border:1px solid #4d4d4d;color:#dcdcdc;border-radius:3px;font-size:11px;padding:7px 12px;font-weight:700; }
.text-link {display:inline-flex;align-items:center;gap:35px;color:var(--ink);font-weight:800;border-bottom:1px solid var(--acid);padding-bottom:9px;font-size:14px;transition:gap .25s,color .25s; }
.text-link span:last-child {color:var(--acid);font-size:23px;font-weight:400;}
.text-link:hover {gap:47px;color:var(--acid); }

/* Services */
.services-section { background: #111111; }
.section-header-services {margin-bottom:55px;}
.service-card {min-width:0;background:#1c1c1c;border:1px solid #3e3e3e;padding:30px 27px 25px;display:flex;flex-direction:column;min-height:405px;transition:background .3s,transform .3s,border-color .3s; }
.service-card:hover {background:#272727;border-color:#7d7d7d;transform:translateY(-6px); }
.service-card-top {display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:800;letter-spacing:.1em;color:#989898; }
.service-symbol {font-size:27px;color:var(--acid);font-weight:400; }
.service-icon {height:138px;display:flex;align-items:center; justify-content:center; margin:10px auto 12px;width:100%;font-family:var(--display);font-weight:700; }
.social-icon span {width:61px;height:102px;display:grid;place-items:center;border:5px solid var(--acid);border-radius:12px;color:var(--acid);font-size:18px;transform:rotate(-10deg);box-shadow:16px -9px 0 -7px #a9a9a9; }
.commercial-icon span {border:5px solid var(--acid);height:78px;width:139px;display:grid;place-items:center;border-radius:7px;color:var(--acid);font-size:18px;transform:rotate(8deg);box-shadow:16px 13px 0 -6px #819461; }
.motion-icon span {color:var(--acid);font-size:140px;line-height:1;transform:rotate(-20deg); }
.service-card h3 {font-family:var(--display);font-size:clamp(23px,2.2vw,34px);letter-spacing:-.05em;line-height:1.2;margin:7px 0 11px;}
.service-card p {font-size:13px;color:#ababab;line-height:1.85;max-width:320px;margin:0 0 28px;}
.service-card-footer {font-size:10px;letter-spacing:.06em;font-weight:800;color:#878787;margin-top:auto;border-top:1px solid var(--line);padding-top:19px;white-space:nowrap;}
.service-card-footer span {color:var(--acid);padding:0 8px;}

/* Contact and footer */
.contact-section {background:#1a1a1a;position:relative;padding-top:clamp(90px,11vw,165px);}
.contact-top-rule {position:absolute;top:0;left:0;right:0;height:4px;background:var(--acid);}
.contact-kicker {display:flex;justify-content:space-between;align-items:center;gap:20px;color:#939393;font-family: var(--mono);font-size:11px;letter-spacing:.11em;font-weight:800; }
.contact-title {font-family:var(--display);font-size:clamp(65px,10.7vw,181px);line-height:.94;letter-spacing:-.095em;margin:44px 0 18px;font-weight:700; }
.contact-title span {display:block;white-space:nowrap;}
.contact-title .outline-contact {color:var(--acid);}
.contact-middle {display:flex;align-items:center;justify-content:space-between;gap:40px; margin-bottom:95px; }
.contact-middle p {max-width:480px;color:#bfbfbf;font-size:16px;line-height:1.85;margin:0; }
.contact-orb {width:108px;height:108px;background:var(--acid);color:var(--bg);display:grid;place-items:center;flex:none;border-radius:50%;font-size:49px;font-weight:300;transition:transform .3s, background .3s; }
.contact-orb:hover {transform:rotate(45deg) scale(1.07);background:#ffe3a3; }
.contact-details {display:flex;justify-content:space-between;gap:40px;align-items:end;border-top:1px solid var(--line);padding-top:25px;padding-bottom:66px; }
.contact-email-wrap>span,.social-wrap>span {display:block;font-size:10px;letter-spacing:.15em;font-weight:800;color:#909090;margin-bottom:16px; }
.email-line {display:flex;align-items:center;gap:15px;flex-wrap:wrap; }
.email-line a {font-family:var(--display);font-size:clamp(22px,2.9vw,43px);font-weight:700;letter-spacing:-.065em;white-space:nowrap;transition:color .2s; }
.email-line a:hover {color:var(--acid);}
.email-line button {border:1px solid #7a7a7a;background:none;color:var(--acid);border-radius:3px;padding:4px 10px;font-size:20px;line-height:1.2; }
.bio-link {display:inline-flex;align-items:center;gap:12px;margin-top:18px;border:1px solid var(--acid);color:var(--acid);border-radius:99px;padding:9px 9px 9px 20px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s; }
.bio-link[hidden] {display:none;}
.bio-link-arrow {display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--acid);color:var(--bg);font-size:14px;transition:transform .25s,background .2s,color .2s; }
.bio-link:hover {background:var(--acid);color:var(--bg); }
.bio-link:hover .bio-link-arrow {background:var(--bg);color:var(--acid);transform:rotate(45deg); }
.social-links {display:flex;gap:18px;flex-wrap:wrap;}
.social-links a,.social-links button {font-size:12px;font-weight:700;color:#f2f2f2;background:none;border:0;padding:0;cursor:pointer;transition:color .2s; }
.social-links a:hover,.social-links button:hover {color:var(--acid); }
.site-footer {border-top:1px solid var(--line);min-height:75px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#8e8e8e;font-size:10px;letter-spacing:.045em;font-weight:700; }
.site-footer a {color:var(--acid);white-space:nowrap; }

/* Accessible video detail overlay */
.video-dialog { color:var(--ink);background:#181818; max-width:min(1040px,92vw);width:100%;max-height:min(95vh,920px);margin:auto;border:1px solid #616161;border-radius:10px;padding:0;box-shadow:0 35px 120px #000d; }
.video-dialog::backdrop {background:rgba(3,3,3,.86);backdrop-filter:blur(8px); }
.video-dialog[open] {animation: dialog-in .23s var(--ease) both;}
@keyframes dialog-in {from {transform:translateY(19px) scale(.985);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}
.dialog-inner {padding:24px;}
.dialog-topbar {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px; }
.dialog-heading span {font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--acid); }
.dialog-heading h2 {font-family:var(--display);font-size:clamp(21px,3vw,35px);letter-spacing:-.05em;line-height:1.1;margin:3px 0 0;}
.dialog-close {border:1px solid var(--line);color:var(--ink);background:#2a2a2a;width:43px;height:43px;border-radius:50%;font-size:19px;flex:none; }
.dialog-close:hover {background:var(--acid);color:var(--bg); }
.dialog-video {width:100%;aspect-ratio:16/9;max-height:64vh;object-fit:contain;background:#000;outline:1px solid #3e3e3e;border-radius:3px; }
.dialog-details {display:flex;justify-content:space-between;gap:25px;align-items:start;margin-top:16px;}
.dialog-details p {margin:0;max-width:590px;color:#cecece;font-size:13px;line-height:1.6; }
.dialog-tags {display:flex;gap:6px;flex-wrap:wrap;justify-content:end; }
.dialog-credits {display:flex;flex-wrap:wrap;gap:10px 36px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line); }
.dialog-credits[hidden] {display:none; }
.dialog-credits div {display:grid;gap:4px;min-width:0; }
.dialog-credits dt {font-size:10px;font-weight:800;letter-spacing:.1em;color:#939393; }
.dialog-credits dd {margin:0;font-size:14px;color:var(--ink);overflow-wrap:anywhere; }
.project-credit {display:block;color:var(--ink);font-size:13px;font-weight:600;margin:4px 0 2px;overflow-wrap:anywhere; }
.dialog-tags span {white-space:nowrap;font-size:10px;color:var(--acid);border:1px solid #5e5e5e;border-radius:30px;padding:5px 11px; }
.dialog-disclaimer {margin:17px 0 0;border-top:1px solid var(--line);padding-top:11px;font-size:11px;color:#979797;}
.toast {position:fixed;z-index:300;bottom:25px;left:50%;transform:translate(-50%,20px);background:var(--acid);color:var(--bg);padding:12px 21px;border-radius:4px;font-size:12px;font-weight:800;box-shadow:0 10px 45px #0008;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(520px,92vw);text-align:center; }
.toast.is-visible {opacity:1;transform:translate(-50%,0);}

.js .reveal {opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s var(--ease);}
.js .reveal.is-visible {opacity:1;transform:translateY(0);}
.js .hero-copy .reveal:nth-child(2) {transition-delay:.1s;}.js .hero-copy .reveal:nth-child(3) {transition-delay:.2s;}.js .hero-copy .reveal:nth-child(4) {transition-delay:.3s;}
.lang-vi .hero-title {font-size:clamp(56px,5.9vw,100px);}.lang-vi .contact-title {font-size:clamp(54px,9vw,150px);}.lang-vi .about-copy h2 {font-size:clamp(51px,5vw,88px);}

@media (max-width: 1280px) {
  .hero-title {font-size:clamp(61px,6.3vw,86px);}
  .hero-grid {grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:24px;}
  .hero-film {width:min(320px,90%);}
  .hero-art {height:520px;}
  .orbit-label-top {left:0;}.orbit-label-bottom {right:0;}
  .floating-scrub {left:-10px;}
}
@media (max-width: 1050px) {
  .nav-inner {height:78px;}
  .main-nav {gap:18px;}
  .brand-copy small {font-size:8px;}
  .hero-grid {grid-template-columns:1fr 365px;gap:5px;min-height:700px;}
  .hero-title {font-size:clamp(52px,6.2vw,69px);}
  .hero-overline {letter-spacing:.04em;white-space:normal;}
  .hero-film {width:275px;}
  .hero-art {height:475px;}
  .hero-halo {width:370px;}
  .hero-description {font-size:15px;}
  .hero-bottom-meta {margin-top:45px;}
  .orbit-label {font-size:8px;}
  .about-art {min-height:520px;}
  .about-disc {height:350px;width:350px;}
  .service-card {padding:22px 19px;}
  .service-card-footer {font-size:8px;}
}
@media (max-width: 820px) {
  .site-header {backdrop-filter:blur(22px);}
  .main-nav {display:none;position:absolute;top:100%;left:0;right:0;padding:24px var(--page-padding);flex-direction:column;align-items:stretch;gap:5px;background:#1f1f1f;border-bottom:1px solid var(--line);box-shadow:0 20px 35px #0007;}
  .main-nav.is-open {display:flex;}
  .main-nav a {display:block;padding:12px 0;font-size:19px;font-family:var(--display);border-bottom:1px solid var(--line);}
  .menu-toggle {display:flex;}
  .nav-cta {display:none;}
  .hero {min-height:auto;}
  .hero-grid {display:flex;flex-direction:column;align-items:stretch;padding-top:70px;padding-bottom:100px;gap:70px;}
  .hero-copy {padding-top:0;}
  .hero-overline {margin-bottom:30px;}
  .hero-title {font-size:clamp(75px,10vw,105px);}
  .lang-vi .hero-title {font-size:clamp(58px,8.4vw,85px);}
  .hero-lower {margin-top:31px;}
  .hero-description {max-width:540px;}
  .hero-bottom-meta {margin-top:42px;}
  .hero-art {height:490px;width:100%;max-width:625px;align-self:center;}
  .hero-film {width:335px;}
  .hero-halo {width:480px;}
  .floating-scrub {left:45px;}
  .orbit-label-top {left:40px;}.orbit-label-bottom {right:30px;}
  .hero-scroll {bottom:15px;}
  .section-title {font-size:clamp(70px,12vw,110px);}
  .about-grid {grid-template-columns:1fr;gap:52px;}
  .about-art {min-height:480px;}
  .about-copy {max-width:680px;}
  .contact-title {font-size:clamp(72px,11vw,115px);}
  .contact-middle {margin-bottom:60px;}
  .contact-details {align-items:start;flex-wrap:wrap;}
}
@media (max-width: 600px) {
  :root {--page-padding:20px;}
  html {scroll-padding-top:75px;}
  .nav-inner {height:68px;gap:8px;}
  .brand-icon {height:37px;width:37px;}
  .brand-copy strong {font-size:14px;}
  .brand-copy small {font-size:7px;letter-spacing:.13em;}
  .nav-actions {gap:12px;}
  .hero-grid {padding-top:54px;padding-bottom:99px;gap:35px;}
  .hero-overline {font-size:10px;letter-spacing:.045em;line-height:1.6;margin-bottom:22px;}
  .hero-title {font-size:clamp(49px,10.2vw,70px);line-height:1;}
  .lang-vi .hero-title {font-size:clamp(41px,8.4vw,60px);}
  .hero-title .stroke-line {-webkit-text-stroke:1px #ececec;}
  .hero-lower {margin-top:26px;}
  .hero-description {font-size:14px;line-height:1.75;}
  .hero-cta-group {gap:10px;}
  .btn {font-size:11px;min-height:49px;padding-inline:14px;gap:9px;}
  .btn-accent {padding-left:15px;}
  .arrow-circle {width:25px;height:25px;font-size:16px;}
  .hero-bottom-meta {margin-top:32px;flex-wrap:wrap;}
  .hero-art {height:380px;max-width:410px;}
  .hero-film {width:220px;border-width:6px;}
  .film-topline,.film-bottomline {height:32px;padding-inline:10px;font-size:6px;}
  .film-image {inset:32px 0;}
  .film-play {width:54px;height:54px;font-size:16px;box-shadow:0 0 0 9px rgba(255,184,28,.17);}
  .hero-halo {width:345px;}
  .orbit-label-top {left:0;top:30px;}.orbit-label-bottom {right:0;bottom:36px;}
  .floating-scrub {left:-1px;bottom:0;padding:10px 11px;gap:8px;}
  .scrub-timestamp {font-size:9px;}.scrub-track i {width:2px;}
  .frame-number {right:0;top:4px;}
  .section-spacing {padding-block:88px;}
  .section-overline {align-items:start;flex-direction:column;gap:4px;font-size:10px;}
  .section-header {align-items:start;flex-direction:column;gap:18px;margin:30px 0 25px;}
  .section-title {font-size:clamp(66px,13.8vw,92px);}
  .section-lead {font-size:14px;max-width:480px;}
  .project-view {opacity:1;transform:translate(-50%,-50%) scale(.75);width:74px;height:74px;}
  .project-frame-label {font-size:8px;}
  .demo-note {margin-top:35px;}
  .statement-inner p {font-size:clamp(46px,9.2vw,68px);}
  .about-art {min-height:425px;}
  .about-disc {width:335px;height:335px;}
  .about-copy h2 {font-size:clamp(57px,11vw,75px);}
  .lang-vi .about-copy h2 {font-size:clamp(50px,10vw,72px);}
  .about-copy p {font-size:14px;}
  .service-card {min-height:345px;}
  .service-icon {height:105px;}
  .contact-section {padding-top:85px;}
  .contact-title,.lang-vi .contact-title {font-size:clamp(51px,11vw,76px);margin:30px 0;}
  .contact-middle {gap:20px;margin-bottom:60px;align-items:end;}
  .contact-middle p {font-size:13px;}
  .contact-orb {height:70px;width:70px;font-size:32px;}
  .contact-details {gap:35px;padding-bottom:40px;flex-direction:column;}
  .email-line a {font-size:clamp(23px,6vw,33px);}
  .site-footer {padding-block:21px;align-items:start;flex-wrap:wrap;font-size:9px;}
  .site-footer > span:nth-child(2) {display:none;}
  .dialog-inner {padding:14px;}
  .dialog-details {flex-direction:column;gap:10px;}
  .dialog-tags {justify-content:start;}
}
@media (max-width: 370px) {
  .hero-title {font-size:46px;}.lang-vi .hero-title {font-size:37px;}
  .btn {font-size:10px;}
  .timecode {font-size:10px;}
  .orbit-label {display:none;}
  .contact-title,.lang-vi .contact-title {font-size:48px;}
}
@media (prefers-reduced-motion: reduce) {
  /* transition:none rather than a tiny duration: a duration alone makes every property transition, so script measurements read stale sizes. */
  *, *::before, *::after {scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important;}
  .js .reveal {opacity:1;transform:none;}
  /* The film strip is a slow, steady ticker and part of the look, so it keeps running. */
  .marquee-track {animation-duration:38s !important;animation-iteration-count:infinite !important;}
}

/* V2: managed public media and empty portfolio states */
.dialog-video[hidden], .dialog-embed[hidden], .demo-note[hidden], .dialog-disclaimer[hidden] { display: none !important; }
.dialog-embed { display:block; width:100%; aspect-ratio:16/9; max-height:64vh; border:1px solid #3e3e3e; border-radius:3px; background:#000; }
.projects-empty { grid-column:1/-1; border:1px dashed #5d5d5d; padding:64px 24px; text-align:center; color:#bebebe; font-size:14px; }

/* Photography: one strip of album covers */
.work-photos { margin-top: clamp(80px, 9vw, 150px); }
.work-photos-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 30px; }
.work-photos-label { display: block; margin-bottom: 14px; color: var(--acid); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.work-photos-title { margin: 0; font-family: var(--display); font-size: clamp(36px, 4.4vw, 72px); line-height: .92; letter-spacing: -.07em; font-weight: 700; text-transform: uppercase; }
.work-photos-title em { color: var(--acid); font-style: normal; }
.work-photos[hidden], .xp-section[hidden], .main-nav a[hidden], .photo-nav[hidden], .photo-counter[hidden] { display: none !important; }
.work-photos .section-lead { max-width: 470px; }
.album-strip { min-width: 0; }
.album-strip-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 22px; border-top: 1px solid #313131; margin-bottom: 22px; }
.album-strip-hint { color: #939393; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.photo-strip-controls { display: flex; gap: 8px; flex: none; }
.album-strip:not(.is-scrollable) .photo-strip-controls { visibility: hidden; }
.strip-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #575757; background: transparent; color: var(--acid); font-size: 18px; transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.strip-btn:hover:not(:disabled) { background: var(--acid); border-color: var(--acid); color: var(--bg); }
.strip-btn:disabled { opacity: .3; cursor: default; }
.photo-track { display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--page-padding); margin-inline: calc(-1 * var(--page-padding)); padding: 2px var(--page-padding) 8px; scrollbar-width: none; }
.photo-track::-webkit-scrollbar { display: none; }
.album-strip.is-scrollable:not(.at-end) .photo-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 120px), transparent); }
.photo-track.is-dragging { scroll-snap-type: none; user-select: none; }
.photo-track.is-dragging, .photo-track.is-dragging .album-card { cursor: grabbing; }
.album-card { flex: none; width: clamp(250px, 25vw, 360px); display: block; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; scroll-snap-align: start; }
.album-cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid #4d4d4d; border-radius: 5px; background: var(--panel); isolation: isolate; transition: border-color .25s; }
.album-cover::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.1) 0, transparent 40%, rgba(0,0,0,.35) 100%); pointer-events: none; }
.album-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: transform .65s var(--ease); }
.album-card:hover .album-cover, .album-card:focus-visible .album-cover { border-color: var(--acid); }
.album-card:focus-visible { outline: none; }
.album-card:focus-visible .album-cover { outline: 2px solid var(--acid); outline-offset: -3px; }
.album-card:hover .album-cover > img { transform: scale(1.045); }
.album-card:hover .project-view, .album-card:focus-visible .project-view { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.album-card:hover .project-link-arrow { transform: rotate(45deg); background: #333333; }
.album-meta { display: flex; align-items: start; gap: 12px; margin-top: 14px; }
.album-num { font-family: var(--mono); font-size: 12px; color: var(--acid); padding-top: 7px; }
.album-text { flex: 1; min-width: 0; }
.album-title { display: block; font-family: var(--display); font-size: clamp(21px, 1.7vw, 27px); line-height: 1.2; letter-spacing: -.04em; font-weight: 700; }
.album-sub { display: block; margin-top: 3px; color: #9c9c9c; font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* Work: one album per service, sharing the photo album card */
.reel-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.reel-card { width: auto; min-width: 0; }
.reel-card .album-cover { aspect-ratio: 4 / 3; }
.reel-thumbs { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 6px; }
.reel-thumbs img { display: block; width: 56px; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; }
.reel-thumbs span { color: #f8f8f8; font-family: var(--mono); font-size: 12px; }
.reel-nav { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.reel-nav[hidden] { display: none; }
.reel-nav-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.reel-nav-label { color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.reel-nav-label span:last-child { color: #939393; font-family: var(--mono); font-size: 12px; }
.reel-list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.reel-list::-webkit-scrollbar { display: none; }
.reel-item { flex: 0 0 160px; padding: 0; border: 0; background: transparent; color: #a6a6a6; text-align: left; }
.reel-item-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #3e3e3e; border-radius: 3px; transition: border-color .2s; }
.reel-item-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .55; transition: opacity .2s; }
.reel-item:hover .reel-item-thumb img, .reel-item.is-current .reel-item-thumb img { opacity: 1; }
.reel-item.is-current { color: var(--ink); }
.reel-item.is-current .reel-item-thumb { border-color: var(--acid); }
.reel-item-time { position: absolute; right: 5px; bottom: 5px; border-radius: 2px; background: rgba(16,16,16,.78); color: #f8f8f8; font-family: var(--mono); font-size: 12px; padding: 2px 5px; }
.reel-item-title { display: block; margin-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.video-dialog.is-reel .dialog-video, .video-dialog.is-reel .dialog-embed { max-height: min(48vh, 500px); }
.video-dialog.is-reel .dialog-disclaimer { margin-top: 12px; }
/* Vertical edits (Shorts, Reels) play in a portrait frame instead of letterboxed in 16:9. */
.video-dialog.is-vertical .dialog-video, .video-dialog.is-vertical .dialog-embed { aspect-ratio: var(--video-ratio, 9 / 16); width: auto; max-width: 100%; height: min(56vh, 620px); max-height: none; margin-inline: auto; }
/* Anywhere wider than a phone a vertical edit sits beside the rest of its set: the dialog hugs the portrait
   player and the list moves to a column on its right. The player's height is fitted by fitPlayer().
   The player's column stays at least 260px wide so the text under a small player does not wrap word by word. */
@media (min-width: 560px) {
  .video-dialog.is-reel.is-vertical { width: fit-content; }
  .video-dialog.is-reel.is-vertical .dialog-inner { display: grid; grid-template-columns: minmax(260px, auto) clamp(140px, 22vw, 190px); grid-template-rows: auto auto auto auto auto 1fr; column-gap: 24px; }
  .video-dialog.is-reel.is-vertical .dialog-inner > .dialog-video, .video-dialog.is-reel.is-vertical .dialog-inner > .dialog-embed { justify-self: center; }
  .video-dialog.is-reel.is-vertical .dialog-inner > * { grid-column: 1; }
  .video-dialog.is-reel.is-vertical .dialog-topbar { grid-column: 1 / -1; }
  .video-dialog.is-reel.is-vertical .dialog-video, .video-dialog.is-reel.is-vertical .dialog-embed { margin: 0; border-radius: 8px; }
  /* The text under the player takes the player's width instead of widening the dialog. */
  .video-dialog.is-reel.is-vertical .dialog-details, .video-dialog.is-reel.is-vertical .dialog-credits, .video-dialog.is-reel.is-vertical .dialog-disclaimer { width: 0; min-width: 100%; }
  .video-dialog.is-reel.is-vertical .dialog-details { flex-direction: column; gap: 12px; }
  .video-dialog.is-reel.is-vertical .dialog-tags { justify-content: start; }
  /* contain:size keeps a long list from stretching the dialog; it scrolls inside the column instead. */
  .video-dialog.is-reel.is-vertical .reel-nav { grid-column: 2; grid-row: 2 / -1; contain: size; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; }
  .video-dialog.is-reel.is-vertical .reel-nav-bar { flex-wrap: wrap; gap: 10px; }
  .video-dialog.is-reel.is-vertical .reel-list { flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 14px; overflow: hidden auto; scrollbar-width: thin; }
  .video-dialog.is-reel.is-vertical .reel-item { flex: none; }
}
@media (max-width: 760px) {
  .reel-groups { grid-template-columns: 1fr; gap: 34px; }
  .reel-item { flex-basis: 132px; }
}

.photo-stage { position: relative; height: min(68vh, 680px); background: #000; outline: 1px solid #3e3e3e; border-radius: 3px; overflow: hidden; touch-action: pan-y; }
.photo-slides { display: flex; height: 100%; transition: transform .5s var(--ease); will-change: transform; }
.photo-slides.no-anim { transition: none; }
.photo-slide { flex: 0 0 100%; height: 100%; margin: 0; }
.photo-slide img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.photo-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(16,16,16,.72); color: var(--ink); font-size: 20px; backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s, opacity .2s; }
.photo-nav:hover { background: var(--acid); border-color: var(--acid); color: var(--bg); }
.photo-nav:disabled { opacity: .25; pointer-events: none; }
.photo-prev { left: 16px; }
.photo-next { right: 16px; }
.photo-counter { position: absolute; z-index: 2; right: 16px; top: 14px; border-radius: 3px; background: rgba(16,16,16,.74); color: #f8f8f8; border: 1px solid rgba(255,255,255,.25); font-family: var(--mono); letter-spacing: .05em; font-size: 11px; padding: 4px 9px; backdrop-filter: blur(6px); }

/* Sideways sections (Experience, Services): pinned while page scroll moves the track */
:root { --header-h: 89px; }
.hs-section { padding: clamp(40px, 5vw, 90px) 0 clamp(70px, 7vw, 120px); }
.hs-pin { display: flex; flex-direction: column; padding: 40px 0 10px; }
.hs-pin > * { flex-shrink: 0; }
.hs-section.is-pinned .hs-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); justify-content: center; padding: 24px 0; overflow: hidden; }
.hs-viewport { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.hs-viewport::-webkit-scrollbar { display: none; }
.hs-section.is-pinned .hs-viewport { overflow: hidden; }
.hs-track { position: relative; width: max-content; will-change: transform; }
.hs-foot { display: flex; align-items: center; gap: 22px; margin-top: 26px; color: #939393; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.hs-hint { white-space: nowrap; }
.hs-progress { position: relative; flex: 1; height: 2px; overflow: hidden; background: #313131; }
.hs-progress i { position: absolute; inset: 0; background: var(--acid); transform: scaleX(0); transform-origin: left; }
.hs-count { color: var(--ink); font-family: var(--mono); white-space: nowrap; }

/* Experience: an editing timeline; scrolling scrubs the playhead across career clips */
/* Experience continues the About section: same background, no gap of its own above. */
.xp-section { background: #161616; padding-top: 0; }
.xp-head { margin: 22px 0 20px; }
.xp-title { font-size: clamp(36px, 4.6vw, 76px); line-height: .95; }
.xp-head .section-lead { max-width: 480px; }
.xp-monitor { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 236px; }
.xp-monitor.is-cut > * { animation: xp-cut .5s var(--ease) both; }
.xp-monitor.is-cut > :nth-child(2) { animation-delay: .04s; }
.xp-monitor.is-cut > :nth-child(3) { animation-delay: .08s; }
.xp-monitor.is-cut > :nth-child(4) { animation-delay: .12s; }
.xp-monitor.is-cut > :nth-child(5) { animation-delay: .16s; }
@keyframes xp-cut { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.xp-monitor-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: #939393; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.xp-monitor-num, .xp-monitor-period { font-family: var(--mono); font-size: 12px; }
.xp-monitor-num { color: var(--acid); }
.xp-monitor-period { color: var(--ink); }
.xp-monitor-type { border: 1px solid #505050; border-radius: 30px; padding: 3px 10px; color: #d2d2d2; }
.xp-monitor-type.xp-education { border-style: dashed; }
/* The school or company name takes its logo colour; the role under it stays white. */
.xp-monitor-title { margin: 6px 0 0; color: rgb(var(--clip-soft-rgb, 244, 244, 244)); transition: color .3s; font-family: var(--display); font-size: clamp(34px, 4.6vw, 76px); line-height: .98; letter-spacing: -.06em; font-weight: 700; text-transform: uppercase; }
.xp-monitor-role { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(16px, 1.5vw, 22px); font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; }
.xp-monitor-desc { margin: 2px 0 0; max-width: 660px; color: #b9b9b9; font-size: 15px; line-height: 1.6; }
.xp-monitor-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.xp-monitor-tags span { white-space: nowrap; font-size: 10px; color: #d2d2d2; border: 1px solid #505050; border-radius: 30px; padding: 4px 10px; }
.xp-next-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; background: var(--acid); color: var(--bg); border-radius: 99px; padding: 9px 9px 9px 20px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.xp-next-link span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg); color: var(--acid); transition: transform .25s; }
.xp-next-link:hover span { transform: rotate(45deg); }
.xp-timeline { margin-top: 18px; }
.xp-timeline-bar { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 30px; color: #8c8c8c; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.xp-window { --lane-h: 44px; position: relative; }
.xp-canvas { position: relative; height: calc(34px + var(--lanes) * var(--lane-h) + 30px); }
.xp-ruler { position: absolute; left: 0; right: 0; top: 0; height: 26px; border-bottom: 1px solid #3e3e3e; background: repeating-linear-gradient(90deg, #505050 0 1px, transparent 1px var(--q)) left bottom / 100% 6px no-repeat; }
.xp-year { position: absolute; top: 0; height: 26px; padding-left: 6px; border-left: 1px solid #717171; color: #939393; font-family: var(--mono); font-size: 11px; line-height: 1; }
.xp-year-now { color: var(--acid); border-color: var(--acid); }
.xp-lanes { position: absolute; left: 0; right: 0; top: 34px; height: calc(var(--lanes) * var(--lane-h)); background: repeating-linear-gradient(180deg, transparent 0 calc(var(--lane-h) - 1px), #262626 calc(var(--lane-h) - 1px) var(--lane-h)); }
.xp-clip { position: absolute; top: calc((var(--lanes) - 1 - var(--lane)) * var(--lane-h) + 5px); height: calc(var(--lane-h) - 10px); display: flex; align-items: center; gap: 10px; padding: 0 12px; overflow: hidden; border: 1px solid transparent; border-radius: 4px; color: var(--ink); text-align: left; white-space: nowrap; transition: background .3s, color .3s, border-color .3s, opacity .3s, box-shadow .3s; }
/* Each stage can bring its own colour (--clip-rgb, set by stageColours() in script.js); the accent otherwise. */
.xp-clip-work { background: rgba(var(--clip-soft-rgb, var(--acid-rgb)), .2); border-color: rgba(var(--clip-soft-rgb, var(--acid-rgb)), .45); }
.xp-clip-education { background: repeating-linear-gradient(135deg, rgba(var(--clip-soft-rgb, var(--acid-rgb)), .16) 0 6px, transparent 6px 12px); border: 1px dashed rgba(var(--clip-soft-rgb, var(--acid-rgb)), .6); }
.xp-clip-next { background: transparent; border: 1px dashed #616161; color: #939393; }
.xp-clip.is-past { opacity: .55; }
.xp-clip.is-active { opacity: 1; background: rgb(var(--clip-rgb, var(--acid-rgb))); border-color: rgb(var(--clip-soft-rgb, var(--acid-rgb))); color: var(--clip-ink, var(--bg)); box-shadow: 0 0 0 4px rgba(var(--clip-soft-rgb, var(--acid-rgb)), .18); }
.xp-clip-education.is-active { background: repeating-linear-gradient(135deg, rgb(var(--clip-rgb, var(--acid-rgb))) 0 6px, rgba(var(--clip-rgb, var(--acid-rgb)), .78) 6px 12px); }
.xp-clip:focus-visible { outline-offset: 2px; }
.xp-clip-name { overflow: hidden; text-overflow: ellipsis; font-family: var(--display); font-size: 13px; font-weight: 700; text-transform: uppercase; }
.xp-clip-time { font-family: var(--mono); font-size: 10px; opacity: .75; }
.xp-wave { position: absolute; top: calc(34px + var(--lanes) * var(--lane-h) + 6px); height: 22px; fill: none; stroke: rgba(255,184,28,.32); stroke-width: 2; }
.xp-labels { position: absolute; z-index: 2; top: 34px; left: 0; display: flex; flex-direction: column; width: calc(var(--page-padding) + 36px); padding-left: var(--page-padding); background: linear-gradient(90deg, #161616 65%, transparent); color: #8c8c8c; font-family: var(--mono); font-size: 10px; pointer-events: none; }
.xp-labels span { display: flex; align-items: center; height: var(--lane-h); }
.xp-labels .xp-label-audio { height: 34px; }
.xp-playhead { position: absolute; z-index: 3; top: -6px; bottom: 0; left: var(--head); border-left: 2px solid rgb(var(--clip-soft-rgb, var(--acid-rgb))); pointer-events: none; transition: border-color .3s; }
.xp-playhead::before { content: ''; position: absolute; top: 0; left: -8px; width: 14px; height: 12px; background: rgb(var(--clip-soft-rgb, var(--acid-rgb))); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.xp-timecode { position: absolute; bottom: 100%; left: -1px; transform: translate(-50%, -4px); padding: 3px 8px; border-radius: 3px; background: rgb(var(--clip-rgb, var(--acid-rgb))); color: var(--clip-ink, var(--bg)); transition: background .3s, color .3s; font-family: var(--mono); font-size: 11px; font-weight: 700; white-space: nowrap; }
#xpDemoNote { margin-top: 36px; }
/* Stage photos: polaroids that drop onto the monitor when the playhead reaches a stage */
.xp-monitor { position: relative; }
.xp-monitor.has-shots > :not(.xp-shots) { max-width: 62%; }
.xp-monitor.is-cut > .xp-shots { animation: none; }
.xp-shots { position: absolute; top: 0; right: 0; bottom: 0; width: min(36%, 500px); }
.xp-shot { position: absolute; left: var(--x); top: var(--y); width: 40%; padding: 6px 6px 20px; border: 0; border-radius: 2px; background: #f1f1f1; box-shadow: 0 18px 40px rgba(0,0,0,.5); transform: rotate(var(--r)); translate: calc((var(--p, .5) - .5) * var(--dx) * var(--k, 1) * 1px) calc((var(--p, .5) - .5) * var(--dy) * var(--k, 1) * 1px); rotate: calc((var(--p, .5) - .5) * var(--dr) * 1deg); animation: xp-drop .75s cubic-bezier(.2, .9, .25, 1.15) both; animation-delay: calc(.12s + var(--i) * .1s); transition: translate .25s linear, rotate .25s linear, scale .25s var(--ease), box-shadow .25s; }
.xp-shot:nth-child(2) { z-index: 2; }
.xp-shot:hover, .xp-shot:focus-visible { z-index: 5; scale: 1.05; box-shadow: 0 24px 48px rgba(0,0,0,.55); }
.xp-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; pointer-events: none; }
@keyframes xp-drop { from { opacity: 0; transform: translateY(-70px) rotate(calc(var(--r) * -2.5)) scale(.92); } to { opacity: 1; transform: rotate(var(--r)); } }
@media (max-width: 760px) {
  .xp-monitor.has-shots > :not(.xp-shots) { max-width: none; }
  .xp-monitor.has-shots .xp-monitor-tags { display: none; }
  .xp-monitor.has-shots { min-height: 266px; }
  .xp-shots { position: static; display: flex; gap: 12px; width: auto; margin: 6px 0 0 4px; }
  .xp-shot { --k: .3; position: relative; left: auto; top: auto; width: 74px; padding: 4px 4px 12px; }
}

/* Services: three cards side by side, stacked on small screens */
.services-section .section-title { font-size: clamp(40px, 5.2vw, 88px); }
.services-section .section-header-services { margin: 22px 0 26px; }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.services-grid .service-card { min-height: 360px; }
@media (max-width: 900px) { .services-grid { grid-template-columns: minmax(0, 1fr); } .services-grid .service-card { min-height: 0; } .services-grid .service-card p { max-width: none; } }

@media (max-width: 1050px) {
  :root { --header-h: 79px; }
}
@media (max-width: 600px) {
  :root { --header-h: 69px; }
  .work-photos-head { flex-direction: column; align-items: start; gap: 14px; margin-bottom: 22px; }
  .album-strip-bar { padding-top: 18px; margin-bottom: 16px; }
  .album-strip-hint { font-size: 9px; }
  .strip-btn { width: 38px; height: 38px; font-size: 16px; }
  .photo-track { gap: 14px; }
  .photo-track .album-card { width: 72vw; }
  .album-title { font-size: 22px; }
  .photo-stage { height: 58vh; }
  .photo-nav { width: 40px; height: 40px; font-size: 17px; }
  .photo-prev { left: 8px; }
  .photo-next { right: 8px; }
  .hs-section.is-pinned .hs-pin { padding: 16px 0; }
  .hs-foot { gap: 14px; margin-top: 18px; font-size: 9px; }
  .xp-head { margin: 16px 0 14px; }
  .xp-title { font-size: clamp(30px, 8.6vw, 42px); }
  .xp-monitor { min-height: 232px; gap: 6px; }
  .xp-monitor-title { font-size: clamp(30px, 8.6vw, 40px); }
  .xp-monitor-desc { font-size: 13px; }
  .xp-timeline-bar { justify-content: flex-end; margin-bottom: 28px; font-size: 9px; }
  .xp-timeline-bar > span:first-child { display: none; }
  .xp-window { --lane-h: 38px; }
  .xp-clip { padding: 0 9px; }
  .xp-clip-time { display: none; }
  .services-section .section-title { font-size: clamp(34px, 9.4vw, 46px); }
}
/* Shorter screens: tighten the pinned sections so they still fit (e.g. 1366x768 laptops, phones with browser bars). */
@media (max-height: 800px) {
  .hs-section.is-pinned .hs-pin { padding: 14px 0; }
  .hs-section.is-pinned .section-overline { padding-bottom: 12px; }
  .hs-section.is-pinned .section-header { margin: 12px 0 12px; }
  .hs-section.is-pinned .hs-foot { margin-top: 16px; }
  .xp-section.is-pinned .xp-monitor { min-height: 216px; gap: 6px; }
  .xp-section.is-pinned .xp-timeline-bar { margin-bottom: 26px; }
  .xp-section.is-pinned .xp-monitor-title { font-size: clamp(30px, 3.8vw, 60px); }
  .xp-section.is-pinned .xp-monitor-desc { font-size: 14px; }
  .xp-section.is-pinned .xp-timeline { margin-top: 8px; }
  .xp-section.is-pinned .xp-window { --lane-h: 40px; }
  .services-section.is-pinned .service-card { padding: 22px 24px 18px; }
  .services-section.is-pinned .service-icon { min-height: 120px; }
}
@media (max-width: 600px) and (max-height: 760px) {
  .hs-section.is-pinned .section-header .section-lead { display: none; }
  .xp-section.is-pinned .xp-monitor-tags { display: none; }
  .xp-section.is-pinned .xp-monitor { min-height: 200px; }
  .xp-section.is-pinned .xp-monitor.has-shots { min-height: 258px; }
  .services-section.is-pinned .service-icon { height: 76px; }
}
/* Very short windows (small laptops, preview panes): drop the intro line so the timeline can still pin. */
@media (max-height: 640px) {
  .xp-section.is-pinned .xp-head .section-lead { display: none; }
  .xp-section.is-pinned .xp-monitor { min-height: 204px; }
  .xp-section.is-pinned .xp-window { --lane-h: 38px; }
  .xp-section.is-pinned .xp-timeline-bar { margin-bottom: 22px; }
}

/* Headings: letters rise into place when they scroll into view */
.js .is-split .split-word { display: inline-block; white-space: nowrap; }
.js .is-split .split-char, .js .is-split.split-words .split-word { display: inline-block; opacity: 0; transform: translateY(.3em) rotate(3deg); filter: blur(2px); transition: opacity .35s ease, transform .55s var(--ease), filter .35s ease; transition-delay: calc(var(--i) * 12ms); }
.js .is-split.split-words .split-word { transition-delay: calc(var(--i) * 25ms); }
.js .is-split.split-in .split-char, .js .is-split.split-in.split-words .split-word { opacity: 1; transform: none; filter: none; }

/* ---------------------------------------------------------------------------
   Black and white, with neon as a light source.
   Large fills (buttons, bands, discs, active chips) are white on black; the neon
   is kept for small signals only: the logo, the hero accent word, live dots,
   the play button, hover states, focus, and the experience playhead.
   --------------------------------------------------------------------------- */
:root { --paper: #f4f4f4; --paper-ink: #111111; --outline: 1.3px; }

.nav-cta { background: var(--paper); border-color: var(--paper); color: var(--paper-ink); }
.nav-cta:hover { background: var(--acid); border-color: var(--acid); }
.btn-accent { background: var(--paper); color: var(--paper-ink); }
.btn-accent:hover { background: var(--acid); }
.arrow-circle { background: var(--paper-ink); color: var(--acid); }
.mini-play { color: var(--ink); }
.timecode span { color: #8c8c8c; }
.hero-scroll span:last-child { color: var(--ink); }
.floating-scrub { background: var(--paper); color: var(--paper-ink); }
.scrub-track i { background: var(--paper-ink); }

/* Outlined words replace the neon headline words, echoing the hero's outlined line. */
.section-title em, .about-copy h2 em, .work-photos-title em, .contact-title .outline-contact {
  color: transparent; -webkit-text-stroke: var(--outline) var(--ink); text-stroke: var(--outline) var(--ink);
}

.marquee-wrap { background: var(--paper); border-color: var(--paper); color: var(--paper-ink); }

.index-tag, .small-mark, .capabilities-label, .work-photos-label, .dialog-heading span { color: var(--ink); }
.filter-chip:hover { border-color: var(--ink); }
.filter-chip.is-active { background: var(--paper); border-color: var(--paper); color: var(--paper-ink); }
.project-view { background: var(--paper); color: var(--paper-ink); }
.project-card:hover .project-view { background: var(--acid); }
.project-link-arrow { color: var(--ink); }
.project-card:hover .project-link-arrow { color: var(--acid); border-color: var(--acid); background: transparent; }
.demo-note-star { color: #8c8c8c; }

.statement-section { background: var(--paper); color: var(--paper-ink); }
.muted-statement { color: #6b6b6b; }
.lime-statement { color: var(--paper-ink); }

.about-art { background: radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.16), transparent 52%), linear-gradient(139deg, #2a2a2a 0%, #151515 64%, #101010 100%); border-color: #3a3a3a; }
.about-disc { background: var(--paper); color: var(--paper-ink); box-shadow: 0 0 0 23px rgba(255,255,255,.07), 0 0 0 70px rgba(255,255,255,.03); }
.about-disc span:last-child { color: var(--acid); -webkit-text-stroke: 1px var(--paper-ink); }
.about-bigtext i { color: var(--paper-ink); -webkit-text-stroke: 2px var(--paper); }
.text-link { border-bottom-color: var(--ink); }
.text-link span:last-child { color: var(--ink); }

.service-symbol, .service-card-footer span { color: #8c8c8c; }
.social-icon span, .commercial-icon span { border-color: var(--ink); color: var(--ink); }
.motion-icon span { color: var(--ink); }
.service-card:hover .service-symbol, .service-card:hover .service-icon span { color: var(--acid); border-color: var(--acid); }

.contact-top-rule { height: 1px; background: var(--line); }
.contact-orb { background: var(--paper); color: var(--paper-ink); }
.contact-orb:hover { background: var(--acid); }
.email-line button { color: var(--ink); }
.bio-link { border-color: var(--ink); color: var(--ink); }
.bio-link-arrow { background: var(--paper); color: var(--paper-ink); }
.site-footer a { color: var(--ink); }
.dialog-tags span { color: var(--ink); }
.toast { background: var(--paper); color: var(--paper-ink); }
.strip-btn, .album-num { color: var(--ink); }
.xp-next-link { background: var(--paper); color: var(--paper-ink); }
.xp-next-link span { background: var(--paper-ink); color: var(--acid); }
/* The big about text inverts where it crosses the white disc, so every letter stays readable. */
.about-bigtext { color: #ffffff; mix-blend-mode: difference; text-shadow: none; }
.about-bigtext i { color: transparent; -webkit-text-stroke: 2px #ffffff; }
/* Outlined words get a heavier stroke on phones, where the type is smaller and a hairline reads faint. */
.hero-title .stroke-line { -webkit-text-stroke-width: var(--outline); }
@media (max-width: 600px) { :root { --outline: 1.8px; } }

/* ---------------------------------------------------------------------------
   Classic film typography.
   Titles: Noto Serif Display, narrowed like a 1950s–60s title card, with an
   italic for the accent word. Body: Be Vietnam Pro (full Vietnamese marks).
   Labels and timecode: Xanh Mono, a typewriter mono like a screenplay page.
   The old grotesk was tracked very tight; a serif needs normal spacing, and
   stacked Vietnamese marks on capitals need taller lines.
   --------------------------------------------------------------------------- */
body { font-stretch: 70%; }
.brand-copy strong, .hero-title, .marquee-track span, .section-title, .project-title, .statement-inner p,
.about-bigtext, .about-copy h2, .service-card h3, .contact-title, .email-line a, .dialog-heading h2,
.work-photos-title, .album-title, .xp-monitor-title, .xp-monitor-role, .xp-clip-name { letter-spacing: -.01em; }
.hero-title { line-height: 1.02; }
.section-title { line-height: .98; }
.about-copy h2, .xp-monitor-title, .work-photos-title { line-height: 1.04; }
.contact-title { line-height: 1; }
.statement-inner p { line-height: 1.1; }

/* Accent words: italic instead of outline; neon only on the hero. */
.hero-title .stroke-line { color: var(--ink); -webkit-text-stroke: 0; }
.hero-title .accent-line { font-style: italic; font-weight: 400; }
.section-title em, .about-copy h2 em, .work-photos-title em, .contact-title .outline-contact,
.lime-statement { color: inherit; -webkit-text-stroke: 0; font-style: italic; font-weight: 400; }
.about-bigtext i { color: #ffffff; -webkit-text-stroke: 0; font-style: italic; font-weight: 400; }

/* Xanh Mono has a single weight; keep it at that weight instead of a faked bold. */
.timecode, .scrub-timestamp, .project-frame-label, .project-bottomtag, .about-art-top, .about-art-bottom,
.contact-kicker, .album-num, .photo-counter, .hs-count, .xp-monitor-num, .xp-monitor-period, .xp-year,
.xp-clip-time, .xp-timecode { font-weight: 400; }

/* ---------------------------------------------------------------------------
   Film details: scene labels set like a screenplay slate, and the marquee
   drawn as a strip of black film stock with light sprocket holes. Pure black
   plus a hairline edge keeps the strip apart from the near-black page; the
   dots between phrases are the one touch of neon.
   --------------------------------------------------------------------------- */
.section-overline, .contact-kicker { font-family: var(--mono); font-weight: 400; font-size: 13px; letter-spacing: .06em; }

.marquee-wrap { position: relative; padding: 34px 0; background: #000; color: var(--ink); border-block: 1px solid #2c2c2c; }
.marquee-sep { color: var(--acid); }
.marquee-wrap::before, .marquee-wrap::after {
  content: ''; position: absolute; left: 0; right: 0; height: 9px; z-index: 1;
  /* One rounded hole every 30px, like the perforations on 35mm film. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='9'%3E%3Crect x='9' width='12' height='9' rx='2' fill='%23e9e9e9'/%3E%3C/svg%3E") repeat-x 0 0 / 30px 9px;
}
.marquee-wrap::before { top: 10px; }
.marquee-wrap::after { bottom: 10px; }


/* ---------------------------------------------------------------------------
   Type sizes.
   The serif's hairlines and narrow width only hold up large, so it is kept
   to about 20px and up; smaller titles use Be Vietnam Pro. Aspect ratios are
   technical labels, so they use the mono. Xanh Mono is thin, so it never
   goes below 12px.
   --------------------------------------------------------------------------- */
.brand-copy strong { font-family: var(--body); font-weight: 700; letter-spacing: .01em; }
.xp-clip-name { font-family: var(--body); font-weight: 600; letter-spacing: .02em; }
.xp-monitor-role { font-family: var(--body); font-weight: 600; letter-spacing: .04em; font-size: clamp(14px, 1.2vw, 17px); }
.social-icon span, .commercial-icon span { font-family: var(--mono); font-weight: 400; font-size: 20px; }
.marquee-track span { font-size: clamp(20px, 2.2vw, 32px); }
@media (max-width: 820px) {
  .main-nav a { font-size: 28px; padding: 10px 0; letter-spacing: -.01em; }
}

.timecode, .scrub-timestamp, .project-frame-label, .project-bottomtag, .about-art-top, .about-art-bottom,
.photo-counter, .xp-year, .xp-clip-time, .xp-labels, .xp-timecode { font-size: 12px; }

/* ---------------------------------------------------------------------------
   Readable small text and tap targets.
   Uppercase labels stay at 11px or more and sentences at 12px or more, on
   every screen size (the older mobile rules shrank some to 6–9px). Controls
   are at least 32px, and 40px on touch screens.
   --------------------------------------------------------------------------- */
.film-topline, .film-bottomline { font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .06em; }
.hero-overline { font-size: clamp(11px, .88vw, 13px); }
.live-indicator, .hero-scroll, .filter-count, .album-strip-hint, .service-card-top, .service-card-footer,
.statement-small, .contact-email-wrap > span, .social-wrap > span, .xp-timeline-bar, .xp-monitor-tags span,
.dialog-tags span { font-size: 11px; }
.filter-chip, .lang-btn, .site-footer { font-size: 12px; }

.lang-btn { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; padding: 0 6px; }
.site-footer a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.social-links a, .social-links button { display: inline-flex; align-items: center; min-height: 40px; }
@media (pointer: coarse) {
  .lang-btn, .email-line button { min-width: 40px; min-height: 40px; }
  .filter-chip { min-height: 40px; }
}
.main-nav a { padding-block: 10px; }

/* Translated label pieces: the film-strip phrases (em) and words inside labels (b) take the label's own style. */
.marquee-track em { font-style: normal; }
.service-card-top b, .service-card-footer b, .statement-small b, .about-art-top b, .index-tag b, .contact-kicker b { font-weight: inherit; }
/* Stacked Vietnamese marks on capitals need taller lines in the about art. */
.lang-vi .about-bigtext { line-height: 1.2; }

/* ---------------------------------------------------------------------------
   Wordmark instead of a logo icon: the name "nlexines" in the title serif,
   always lowercase, ending on a neon full stop. A name of two or more words
   gets its last word in italic, like the hero's accent word. The favicon
   (assets/favicon.svg) is the same idea shrunk to "n." on a dark tile.
   Lowercase reads smaller than capitals, so the size is a step up.
   --------------------------------------------------------------------------- */
.brand-copy strong { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: -.005em; text-transform: lowercase; }
/* A slight lean (not the full italic) keeps the bold shapes; it pivots on the baseline so the name stays in line with the label below. */
.brand-copy strong { align-self: flex-start; transform: skewX(-8deg); transform-origin: 0 100%; }
.brand-copy strong i { font-weight: 400; }
.brand-copy strong::after { content: '.'; color: var(--acid); }
@media (max-width: 600px) { .brand-copy strong { font-size: 25px; } }

/* ---------------------------------------------------------------------------
   Phones and tablets: the desktop composition, scaled down. The showreel
   frame sits at the top right and the headline runs across it like a title
   over a poster image. A soft shadow keeps the letters readable over the
   footage, and the headline lets taps through so the frame stays clickable.
   The waveform sticker is dropped here; there is no room for it.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .hero-grid { position: relative; min-height: 0; padding-top: 40px; padding-bottom: 96px; }
  .hero-art { position: absolute; z-index: 1; top: 100px; right: calc(var(--page-padding) - 16px); width: 330px; height: 380px; }
  .hero-film { width: 280px; }
  .hero-halo { width: 360px; }
  .floating-scrub { display: none; }
  /* The text block sits over the frame, so only its links and buttons catch taps. */
  .hero-copy { pointer-events: none; }
  .hero-copy a, .hero-copy button { pointer-events: auto; }
  .hero-title { text-shadow: 0 2px 24px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.5); }
  /* Where the headline crosses the footage, the picture fades to near-black from the
     top left, so the letters sit on a dark area instead of a busy image. */
  .film-image::after { z-index: 1; background: linear-gradient(115deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.6) 32%, rgba(10,10,10,0) 62%); }
  /* The headline runs across the top-left of the frame, so only the "SHOWREEL / 001" label there is hidden; REC and the bottom labels stay. */
  .film-topline span:first-child { visibility: hidden; }
  .hero-lower { margin-top: 190px; }
}
@media (max-width: 600px) {
  .hero-grid { padding-top: 24px; padding-bottom: 88px; }
  .hero-art { top: 58px; right: 0; width: 230px; height: 270px; }
  .hero-film { width: 190px; border-width: 5px; }
  .film-topline, .film-bottomline { height: 22px; }
  /* On phones the headline also reaches the word REC; keep just its red dot. */
  .film-topline span:last-child { font-size: 0; }
  .film-image { inset: 22px 0; }
  .film-play { width: 50px; height: 50px; font-size: 16px; box-shadow: 0 0 0 8px rgba(255,184,28,.17); }
  .hero-halo { width: 270px; }
  .hero-lower { margin-top: 112px; }
}

/* Showreel cover (assets/posters/showreel-cover.jpg): a square cover with its title in
   the middle, so it is shown whole and centred rather than zoomed and shifted like the
   old abstract poster. */
.film-image img { object-position: center; transform: none; filter: none; }