:root{
  --ink:#240D1E;
  --ink-2:#31142A;
  --line:#4A2340;
  --plum:#7C2E64;
  --amber:#E8A33D;
  --paper:#F7EFF3;
  --muted:#C3A5B9;
  --serif:"Alegreya",Georgia,"Times New Roman",serif;
  --sans:"Alegreya Sans","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(48px,7vw,104px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--paper)}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--ink);padding:10px 16px;z-index:99}
.skip:focus{left:8px;top:8px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
.measure{max-width:64ch}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:14px var(--pad);
  background:rgba(36,13,30,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .brand img{height:26px;width:auto}
.topnav{display:flex;gap:clamp(12px,2.4vw,28px);overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
@media (max-width:760px){
  .topnav{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .topbar .brand img{height:22px}
}
.topnav a{
  font-size:.95rem;letter-spacing:.01em;color:var(--muted);text-decoration:none;
  white-space:nowrap;padding:4px 0;border-bottom:1px solid transparent;
}
.topnav a:hover{color:var(--paper);border-bottom-color:var(--amber)}
.topnav a.lang{
  color:var(--paper);font-weight:700;letter-spacing:.04em;
  box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:3px 12px;
}
.topnav a.lang:hover{box-shadow:inset 0 0 0 1px var(--amber);color:var(--amber);border-bottom-color:transparent}

/* ---------- hero ---------- */
.hero{position:relative;margin-bottom:clamp(28px,5vw,56px)}
.hero-frame{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:#160812}
.hero-frame img{width:100%;height:100%;object-fit:cover;object-position:58% 40%}
.hero-frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--ink) 2%,rgba(36,13,30,.72) 34%,rgba(36,13,30,.05) 70%);
}
.hero-title{
  position:absolute;left:0;right:0;bottom:clamp(18px,3.4vw,44px);z-index:2;
  text-shadow:0 2px 22px rgba(18,5,14,.6);
}
.hero-title h1{
  font-family:var(--serif);font-weight:800;margin:0;
  font-size:clamp(2.15rem,6.4vw,4.6rem);line-height:1.02;letter-spacing:-.015em;
  max-width:15ch;text-wrap:balance;
}
.hero-title .kicker{
  display:block;font-family:var(--sans);font-weight:500;color:var(--amber);
  font-size:clamp(.9rem,1.6vw,1.05rem);letter-spacing:.02em;margin-bottom:.7em;
}
.hero-lede{font-size:clamp(1.05rem,1.9vw,1.3rem);color:var(--paper);margin:0}
.hero-lede + p{color:var(--muted);margin:.9em 0 0}
@media (min-width:820px){ .hero-frame{aspect-ratio:2.39/1} }

/* ---------- logo chips ---------- */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0;padding:0;list-style:none}
.chip{
  background:var(--paper);border-radius:999px;
  display:grid;place-items:center;padding:9px 18px;min-height:52px;
}
.chip img{height:30px;width:auto;object-fit:contain}
.chip.sq{border-radius:14px;padding:10px 14px}
.chip.sq img{height:42px}
.chip.delta img{height:52px}
.chip.auth img{height:46px}
.chip.txt{
  background:transparent;box-shadow:inset 0 0 0 1px var(--line);
  color:var(--paper);font-size:.95rem;padding:9px 20px;
}

/* ---------- sections ---------- */
section{scroll-margin-top:74px}
.band{padding-block:var(--gap)}
.band + .band,.hero + .band{border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(28px,4vw,52px)}
.sec-head h2{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.5rem);
  margin:0;letter-spacing:-.01em;
}
.sec-head span{color:var(--muted);font-size:.95rem;flex:1 1 auto;border-bottom:1px solid var(--line);
  transform:translateY(-.35em)}

/* ---------- work item ---------- */
.work{display:grid;gap:clamp(22px,3.4vw,44px);align-items:start}
.work + .work{margin-top:var(--gap)}
@media (min-width:900px){
  .work{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
  .work.flip .media{order:2}
}
.work h3,.text h3{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,2.6vw,1.95rem);
  line-height:1.15;margin:0 0 .45em;letter-spacing:-.01em;
}
.work .role,.text .role{color:var(--amber);font-size:.92rem;margin:0 0 1em;letter-spacing:.01em}
.work p,.text p{margin:0 0 1em;color:#EADCE4}
.work p.small,.text p.small{font-size:.95rem;color:var(--muted)}

/* ---------- player ---------- */
.player{
  position:relative;aspect-ratio:16/9;background:var(--ink-2);
  border:1px solid var(--line);overflow:hidden;
}
.player img.poster{width:100%;height:100%;object-fit:cover}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play{
  position:absolute;inset:0;width:100%;height:100%;
  display:grid;place-items:center;cursor:pointer;
  background:linear-gradient(to top,rgba(36,13,30,.55),rgba(36,13,30,.05) 55%);
  border:0;padding:0;
}
.play svg{width:clamp(52px,7vw,72px);height:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.play circle{fill:rgba(36,13,30,.55);stroke:var(--amber);stroke-width:2;transition:fill .18s ease}
.play polygon{fill:var(--paper);transition:fill .18s ease}
.play:hover circle,.play:focus-visible circle{fill:var(--amber)}
.play:hover polygon,.play:focus-visible polygon{fill:var(--ink)}
.player.typo .play{place-items:end;padding:clamp(16px,2.6vw,30px);background:none}
.player.typo .play svg{width:clamp(46px,5vw,60px)}
/* typographic poster for playlists */
.poster-type{
  width:100%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(18px,3vw,34px);
  background:
    radial-gradient(120% 90% at 15% 0%,rgba(124,46,100,.85),rgba(36,13,30,.2)),
    repeating-linear-gradient(90deg,rgba(247,239,243,.05) 0 2px,transparent 2px 26px),
    var(--ink-2);
}
.poster-type{gap:0}
.poster-type b{
  font-family:var(--serif);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.6rem);
  line-height:1;letter-spacing:-.02em;display:block;max-width:12ch;
}
.poster-type span{color:var(--amber);font-size:.9rem;margin-top:.6em}

/* ---------- reels ---------- */
.reels{display:grid;gap:clamp(14px,2vw,22px);grid-template-columns:minmax(0,250px);justify-content:start;margin-top:clamp(28px,4vw,44px)}
@media (min-width:560px){ .reels{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:940px){ .reels{grid-template-columns:repeat(4,minmax(0,1fr))} }
.reels .player .play{place-items:start end;padding:14px}
.reels .player .play svg{width:clamp(40px,4vw,50px)}
.reel{
  position:relative;display:flex;flex-direction:column;aspect-ratio:9/16;
  padding:clamp(16px,2vw,24px);text-decoration:none;color:var(--paper);
  border:1px solid var(--line);
  background:
    linear-gradient(200deg,rgba(124,46,100,.75),rgba(36,13,30,.15) 62%),
    repeating-linear-gradient(90deg,rgba(247,239,243,.05) 0 2px,transparent 2px 26px),
    var(--ink-2);
  transition:border-color .18s ease;
}
.reel:hover,.reel:focus-visible{border-color:var(--amber)}
.reel > *{position:relative;z-index:1}
.reel .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.reel:has(.shot)::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(to top,rgba(18,5,14,.92) 20%,rgba(18,5,14,.5) 58%,rgba(18,5,14,.15));
}
.reel .tag{color:var(--amber);font-size:.85rem;margin-bottom:auto}
.reel b{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.55rem);
  line-height:1.08;letter-spacing:-.01em;display:block;
}
.reel .desc{color:#E3D2DD;font-size:.92rem;line-height:1.5;margin-top:.5em}
.reel .ig{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.85rem;margin-top:1em}
.reel .ig svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.reel:hover .ig{color:var(--amber)}

.reel-item{display:grid;gap:clamp(18px,3vw,34px);align-items:center;margin-top:var(--gap)}
.player.vert{aspect-ratio:9/16}
.reel-item .player.vert{max-width:250px}
.reel-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:clamp(16px,2vw,24px);
  background:linear-gradient(to top,rgba(18,5,14,.94) 32%,rgba(18,5,14,0));
}
.reel-copy .tag{display:block;color:var(--amber);font-size:.85rem;margin-bottom:.45em}
.reel-copy b{
  font-family:var(--serif);font-weight:700;font-size:clamp(1.25rem,2.1vw,1.55rem);
  line-height:1.08;letter-spacing:-.01em;display:block;
}
.reel-copy .desc{display:block;color:#E3D2DD;font-size:.92rem;line-height:1.5;margin-top:.5em}
.reel-item .text{max-width:62ch}
@media (min-width:760px){
  .reel-item{grid-template-columns:250px minmax(0,1fr)}
}

/* ---------- links ---------- */
.links{display:flex;flex-wrap:wrap;gap:10px 22px;margin:1.2em 0 0;padding:0;list-style:none}
.links a{
  font-size:.95rem;font-weight:500;color:var(--paper);text-decoration:none;
  border-bottom:1px solid var(--amber);padding-bottom:2px;
}
.links a:hover{color:var(--amber)}

/* ---------- partner row inside a work item ---------- */
.partners{margin-top:1.4em}
.partners .lbl{display:block;color:var(--muted);font-size:.85rem;margin-bottom:.7em}

/* ---------- credits ---------- */
.credits{
  margin:1.6em 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:grid;gap:.55em 22px;font-size:.95rem;
}
.credits .row{display:grid;gap:2px 22px}
.credits dt{color:var(--muted)}
.credits dd{margin:0;font-weight:500}
@media (min-width:520px){
  .credits .row{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:baseline}
  .credits dt{text-align:right}
}

/* ---------- studio + gallery ---------- */
.studio{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
.studio figure{margin:0;overflow:hidden;background:var(--ink-2)}
.studio img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.studio figure:first-child{grid-column:span 2}
.studio figure:first-child img{aspect-ratio:16/10}
.gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.gallery img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (min-width:820px){ .gallery{grid-template-columns:repeat(4,1fr)} }

/* ---------- capability list ---------- */
.caps{list-style:none;margin:2em 0 0;padding:0;display:grid;gap:0;max-width:760px}
.caps li{
  display:grid;gap:2px 26px;padding:14px 0;border-top:1px solid var(--line);
}
.caps li:last-child{border-bottom:1px solid var(--line)}
.caps b{font-weight:700;font-size:1.02rem}
.caps span{color:var(--muted);font-size:.95rem}
@media (min-width:640px){ .caps li{grid-template-columns:minmax(0,15ch) minmax(0,1fr);align-items:baseline} }

/* ---------- certification ---------- */
.cert{display:flex;flex-wrap:wrap;gap:26px;align-items:center;margin-top:2em}
.cert .badge{background:var(--paper);border-radius:14px;padding:14px 18px}
.cert .badge img{height:74px;width:auto}
.cert p{margin:0;color:var(--muted);font-size:.95rem;max-width:46ch;line-height:1.55}

/* ---------- contact ---------- */
.contact{padding-block:var(--gap);border-top:1px solid var(--line);background:var(--ink-2)}
.contact h2{font-family:var(--serif);font-weight:800;font-size:clamp(1.7rem,4.2vw,3rem);margin:0 0 .35em;letter-spacing:-.015em;max-width:18ch;line-height:1.05}
.contact p{margin:0 0 1.6em;color:var(--muted);max-width:52ch}
.btn{
  display:inline-block;background:var(--amber);color:var(--ink);
  font-weight:700;text-decoration:none;padding:14px 26px;border-radius:2px;
}
.btn:hover{background:var(--paper)}
.btn.ghost{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--amber);color:var(--amber)}
.btn + .btn{margin-inline-start:12px}

footer{padding:34px var(--pad);display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;color:var(--muted);font-size:.9rem}
footer img{height:22px;width:auto;opacity:.85}
footer a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}