/* ============================================================
   TIPOHUNTER — Video Editor Portfolio
   Black & Gold · cinematic · lightweight vanilla
   ============================================================ */

:root{
  --black:#050505;
  --panel:#0b0b0c;
  --panel-2:#111113;
  --ink:#f4efe6;
  --muted:#9a938a;
  --line:rgba(212,175,89,.18);
  --gold:#d4af59;
  --gold-2:#f0d68c;
  --gold-deep:#a67c2e;
  --gold-glow:rgba(212,175,89,.35);
  --ease:cubic-bezier(.22,1,.36,1);
  --font-serif:'Cormorant Garamond',serif;
  --font-sans:'Inter',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--gold);color:#000}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* thin custom scrollbar */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#000}
::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}

.gold{color:var(--gold)}

/* ---------- Preloader ---------- */
#preloader{
  position:fixed;inset:0;z-index:1000;
  background:var(--black);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s var(--ease),visibility .8s;
}
#preloader.done{opacity:0;visibility:hidden}
.preloader-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
.preloader-mark{
  font-family:var(--font-serif);font-size:64px;font-weight:600;
  letter-spacing:2px;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold-2),var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pulse 1.6s var(--ease) infinite;
}
.preloader-bar{width:160px;height:2px;background:rgba(255,255,255,.08);overflow:hidden;border-radius:2px}
.preloader-bar i{
  display:block;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:load 1.1s var(--ease) infinite;
}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- FX overlays ---------- */
.fx-grain{
  position:fixed;inset:-50%;z-index:900;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}
}
.fx-vignette{
  position:fixed;inset:0;z-index:899;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(0,0,0,.75) 100%);
}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(20px,5vw,64px);
  transition:padding .4s var(--ease),background .4s var(--ease),backdrop-filter .4s;
}
.nav.scrolled{
  padding:16px clamp(20px,5vw,64px);
  background:rgba(5,5,5,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-logo{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:1.5px}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links a{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  position:relative;transition:color .3s;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);
  transition:width .35s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(20px,7vw,120px);
  background:
    radial-gradient(90% 60% at 78% 18%,rgba(212,175,89,.10),transparent 60%),
    radial-gradient(70% 55% at 10% 100%,rgba(212,175,89,.06),transparent 55%),
    var(--black);
  overflow:hidden;
}
.hero::before{ /* soft light sweep */
  content:"";position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;
  background:radial-gradient(circle,var(--gold-glow),transparent 62%);
  filter:blur(40px);opacity:.5;animation:float 12s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,24px)}}
.hero-inner{position:relative;z-index:5;max-width:920px}

/* Hero character image (oc.png) */
.hero-oc{
  position:absolute;z-index:4;right:clamp(-20px,2vw,60px);bottom:0;
  width:min(46vw,560px);pointer-events:none;user-select:none;
  /* fade the lower & left edges into the black so it feels embedded */
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 99%),
                     linear-gradient(270deg,#000 78%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(180deg,#000 68%,transparent 99%),
             linear-gradient(270deg,#000 78%,transparent 100%);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) saturate(.9) contrast(1.03) sepia(.1);
  opacity:0;transform:translateX(60px) scale(1.02);
  transition:opacity 1.4s var(--ease),transform 1.6s var(--ease);
}
.hero-oc.in{opacity:1;transform:translateX(0) scale(1);animation:ocFloat 7s ease-in-out 1.6s infinite}
/* golden aura behind the character */
.hero-oc-glow{
  position:absolute;z-index:3;right:clamp(0px,6vw,120px);bottom:6vh;
  width:min(34vw,420px);height:min(34vw,420px);border-radius:50%;
  background:radial-gradient(circle,var(--gold-glow),transparent 66%);
  filter:blur(30px);opacity:0;transition:opacity 1.6s var(--ease) .3s;
}
.hero-oc-glow.in{opacity:.7}
@keyframes ocFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (max-width:900px){.hero-oc,.hero-oc-glow{display:none}}
.hero-eyebrow{
  font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  margin-bottom:26px;
}
.hero-title{
  font-family:var(--font-serif);font-weight:600;line-height:.92;
  font-size:clamp(64px,15vw,220px);letter-spacing:-.01em;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line>span{display:block}
.hero-sub{
  max-width:560px;margin:34px 0 40px;color:var(--muted);
  font-size:clamp(15px,1.5vw,19px);
}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:2px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s,color .35s;
}
.btn-gold{
  background:linear-gradient(120deg,var(--gold-deep),var(--gold),var(--gold-2));
  color:#100c02;box-shadow:0 8px 30px -8px var(--gold-glow);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 40px -10px var(--gold-glow)}
.btn-ghost{border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}

.scroll-cue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
}
.scroll-cue i{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--gold);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(260%)}}

/* ---------- Section shared ---------- */
section{padding:clamp(80px,12vh,150px) clamp(20px,7vw,120px);position:relative}
.section-head{max-width:720px;margin:0 auto clamp(40px,6vh,70px);text-align:center}
.section-kicker{font-size:12px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.section-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(38px,6vw,84px);line-height:1;letter-spacing:-.01em}
.section-lead{color:var(--muted);margin-top:20px;font-size:16px}

/* ---------- Filters ---------- */
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.filter{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:11px 24px;border-radius:40px;cursor:pointer;
  font-family:var(--font-sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  transition:all .3s var(--ease);
}
.filter:hover{color:var(--ink);border-color:var(--gold)}
.filter.active{
  color:#100c02;border-color:transparent;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold-2));
}

/* ---------- Grid ---------- */
/* DEFAULT (All): one big horizontal video on top (full width), then a
   centered 3×2 grid of widescreen cards below it. */
.grid{
  display:grid;gap:16px;max-width:1240px;margin:0 auto;
  grid-template-columns:repeat(3,1fr);
}
.card{
  position:relative;overflow:hidden;border-radius:6px;cursor:pointer;
  background:var(--panel-2);
  border:1px solid var(--line);
  opacity:0;transform:translateY(40px) scale(.98);
  transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .4s,box-shadow .4s;
}
/* The showreel now lives in its own #feature-slot above .grid-wrap (not as
   a grid item), so it needs its own centering + the breathing room that
   separates it from the card block below. */
.feature-slot{max-width:1240px;margin:0 auto 56px;display:flex;justify-content:center}
.card.feature{
  width:min(100%,620px);aspect-ratio:16/9;
  border-color:var(--gold-deep);
  box-shadow:0 26px 70px -30px var(--gold-glow);
}
.card.feature:hover{box-shadow:0 30px 80px -26px var(--gold-glow)}
.card.h{aspect-ratio:16/9}                            /* 3×2 grid below */
.card.in{opacity:1;transform:none}
.card.hide{display:none}

/* FILTERED view: masonry so the grid cards pack cleanly. The feature card
   isn't in here at all (it renders into #feature-slot above), so it simply
   ignores the filter and keeps its own centered "highlight" row on top. */
.grid.mono{display:block;column-count:3;column-gap:16px}
.grid.mono .card{width:100%;margin:0 0 16px;break-inside:avoid;grid-column:auto}
.grid.mono .card.h{aspect-ratio:16/9}

/* ---------- Grid pagination (>6 grid videos → pages of 3×2 + arrows) ---------- */
/* Anchored to the SAME max-width + centering as .grid itself, so the nav
   arrows (positioned relative to this wrapper) always sit right next to
   the grid's real edge — previously grid-wrap had no max-width of its own
   and stretched to the full section width, so on wide viewports (or when
   the browser was zoomed out) the arrows drifted away from the grid and
   ended up pinned near the screen edge instead. */
/* Same max-width + centering as .grid, so the arrows (absolutely positioned
   against this wrapper) always sit right at the grid's real edge instead of
   drifting toward the screen edge on wide/zoomed-out viewports. The showreel
   is deliberately NOT inside this wrapper — see views/index.html — which is
   what lets top:50% land on the middle of the card block. */
.grid-wrap{position:relative;max-width:1240px;margin:0 auto}
/* Only #grid slides. The showreel is in a separate container entirely, so
   it can never be dragged along by page navigation — it just plays the
   site's normal entrance reveal once and then stays put. */
.grid{transition:transform .3s var(--ease),opacity .3s var(--ease)}
.grid.slide-out-left{transform:translateX(-26px);opacity:0}
.grid.slide-out-right{transform:translateX(26px);opacity:0}
.grid.slide-in-left{transform:translateX(26px);opacity:0}
.grid.slide-in-right{transform:translateX(-26px);opacity:0}
.grid-nav{
  position:absolute;top:50%;transform:translateY(-50%) scale(.85);
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,10,11,.72);border:1px solid var(--line);color:var(--muted);
  cursor:pointer;z-index:5;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .3s,color .3s;
  backdrop-filter:blur(6px);
}
.grid-nav svg{width:20px;height:20px}
.grid-nav.show{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1)}
.grid-nav:hover{border-color:var(--gold);color:var(--gold)}
/* Offset = arrow width (48px) + half an arrow width (24px) of breathing
   room, so the gap between the grid edge and the arrow is exactly half the
   arrow's size. Keep these two in sync with .grid-nav's width above. */
.grid-nav-prev{left:-72px}
.grid-nav-next{right:-72px}

.card-thumb{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .8s var(--ease),filter .6s}
video.card-thumb{width:100%;height:100%;object-fit:cover;pointer-events:none}
.card-thumb.placeholder{
  background:
    radial-gradient(120% 120% at 20% 10%,rgba(212,175,89,.22),transparent 55%),
    linear-gradient(135deg,#141416,#0a0a0b);
}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82));transition:opacity .5s;z-index:1}
.card:hover{border-color:var(--gold);box-shadow:0 24px 60px -24px var(--gold-glow)}
.card:hover .card-thumb{transform:scale(1.08)}
.card-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 24px;transition:transform .5s var(--ease)}
.card-cat{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;display:block}
.card-title{font-family:var(--font-serif);font-size:26px;font-weight:600;line-height:1.05}
.card.feature .card-body{padding:28px 30px}
.card.feature .card-title{font-size:34px}
.card-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.7);z-index:2;
  width:66px;height:66px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  display:grid;place-items:center;opacity:0;transition:all .45s var(--ease);
  background:rgba(5,5,5,.35);backdrop-filter:blur(4px);
}
.card-play svg{width:20px;height:20px;margin-left:3px}
.card:hover .card-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.card-num{position:absolute;top:18px;right:22px;z-index:2;font-family:var(--font-serif);font-size:18px;color:var(--muted)}
.card-badge{
  position:absolute;top:20px;left:22px;z-index:2;display:flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.card-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold-glow)}

/* ---------- About ---------- */
.about{background:linear-gradient(180deg,var(--black),#080808)}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,90px);max-width:1200px;margin:0 auto;align-items:start}
.about-text .section-title{text-align:left;margin-bottom:26px}
.about-text .section-kicker{text-align:left}
.about-text p{color:var(--muted);margin-bottom:18px;font-size:17px;max-width:520px}
.about-text strong{color:var(--ink);font-weight:500}
.services{list-style:none;display:grid;gap:2px;border-top:1px solid var(--line)}
.services li{padding:26px 4px;border-bottom:1px solid var(--line);position:relative;transition:padding-left .4s var(--ease)}
.services li:hover{padding-left:16px}
.svc-num{font-family:var(--font-serif);font-size:14px;color:var(--gold);position:absolute;top:26px;right:4px}
.services h3{font-family:var(--font-serif);font-size:26px;font-weight:600;margin-bottom:6px}
.services p{color:var(--muted);font-size:15px}

/* ---------- Clients ---------- */
.clients{background:linear-gradient(180deg,#080808,var(--black))}
/* Up to 6 clients: static centered row (default, unchanged look).
   More than 6: .client-viewport clips to a fixed width and the inner
   .client-grid becomes an infinite auto-scrolling marquee (see .marquee
   below) — edges fade out via mask-image instead of hard-cutting. */
.client-viewport{max-width:1200px;margin:0 auto}
.client-viewport.is-marquee{
  overflow:hidden;
  /* The hover state lifts the orb by translateY(-8px) (see .client:hover
     .client-avatar below) — without headroom here, overflow:hidden clips
     the top of the orb mid-hover. Extra padding-top gives it room; the
     matching negative margin-top cancels the padding back out so the row
     still sits in the same place it did before. */
  padding-top:16px;margin-top:-16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.client-grid{
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;
  gap:clamp(14px,2.4vw,40px);list-style:none;
}
.client-grid.marquee{
  justify-content:flex-start;width:max-content;
  animation:clientScroll var(--marquee-duration,32s) linear infinite;
}
.client-grid.marquee:hover{animation-play-state:paused}
.client-grid.marquee .client{flex:0 0 auto;width:clamp(84px,9vw,120px);max-width:none}
@keyframes clientScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.client{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  flex:1 1 0;min-width:0;max-width:170px;text-align:center;
}
/* Clients with a configured channel link render an inner <a> wrapping the
   avatar/name/subs — mirror the same flex layout so it looks identical to
   an unlinked client, just clickable. */
.client-link{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  width:100%;color:inherit;text-decoration:none;cursor:pointer;
}
.client-avatar{
  width:clamp(84px,9vw,120px);aspect-ratio:1;border-radius:50%;padding:4px;
  background:linear-gradient(150deg,var(--line),transparent);
  border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease),background .4s;
}
.client-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.client:hover .client-avatar{
  transform:translateY(-8px);
  border-color:var(--gold);
  background:linear-gradient(150deg,var(--gold),transparent);
  box-shadow:0 18px 40px -14px var(--gold-glow);
}
.client-name{font-family:var(--font-serif);font-size:21px;font-weight:600;line-height:1}
.client-subs{
  color:var(--gold);font-size:13px;letter-spacing:.14em;font-weight:500;
}
.client-subs::before{content:"";display:block;width:16px;height:1px;background:var(--line);margin:0 auto 10px}

/* ---------- Contact ---------- */
.contact{text-align:center;background:
  radial-gradient(80% 60% at 50% 0%,rgba(212,175,89,.10),transparent 60%),#060606}
.contact-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(40px,8vw,110px);line-height:1;margin:14px 0 40px}
.contact-mail{
  position:relative;display:inline-block;cursor:pointer;
  background:none;border:0;border-bottom:1px solid var(--line);
  font-family:var(--font-serif);font-size:clamp(22px,3vw,38px);
  color:var(--ink);padding-bottom:6px;
  transition:color .3s,border-color .3s;
}
.contact-mail:hover{color:var(--gold);border-color:var(--gold)}
.contact-mail::after{
  content:"Click to Copy";position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  font-family:var(--font-sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;
}
.contact-mail:hover::after{opacity:1}
.contact-mail.copied::after{content:"Copied ✓";opacity:1}
.socials{list-style:none;display:flex;gap:22px;justify-content:center;margin-top:52px;flex-wrap:wrap}
.social-ico{
  --sz:56px;
  position:relative;display:grid;place-items:center;
  width:var(--sz);height:var(--sz);border-radius:50%;
  border:1px solid var(--line);background:transparent;cursor:pointer;
  color:var(--muted);
  transition:color .35s var(--ease),border-color .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease),background .35s;
}
.social-ico svg{width:24px;height:24px;display:block;fill:currentColor;transition:transform .35s var(--ease)}
.social-ico svg [stroke]{stroke:currentColor;fill:none}
.social-ico:hover{
  color:var(--gold);border-color:var(--gold);transform:translateY(-4px);
  background:radial-gradient(circle at 50% 40%,rgba(212,175,89,.12),transparent 70%);
  box-shadow:0 12px 30px -12px var(--gold-glow);
}
.social-ico:hover svg{transform:scale(1.08)}
/* copy tooltip on the Discord icon */
.social-ico[data-copy]::after{
  content:"Discord: tipohunter";position:absolute;left:50%;top:-34px;transform:translateX(-50%);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  opacity:0;transition:opacity .3s;white-space:nowrap;pointer-events:none;
}
.social-ico[data-copy]:hover::after{opacity:1}
.social-ico[data-copy].copied::after{content:"Copied ✓";opacity:1}

/* ---------- Footer ---------- */
.footer{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:34px clamp(20px,7vw,120px);border-top:1px solid var(--line);
}
.foot-logo{font-family:var(--font-serif);font-size:18px;letter-spacing:1px}
.foot-logo span{color:var(--gold)}
.foot-copy{font-size:12px;color:var(--muted);letter-spacing:.05em}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:950;display:none;align-items:center;justify-content:center;padding:24px}
.modal.open{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(8px);animation:fade .4s var(--ease)}
.modal-panel{
  position:relative;z-index:2;width:min(960px,100%);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow:hidden;
  animation:rise .5s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
.modal-media{position:relative;width:100%;aspect-ratio:16/9;background:#000}
/* vertical (shorts/reels) player — sized by height so it never overflows */
.modal.vertical .modal-panel{width:auto;max-width:94vw}
.modal.vertical .modal-media{aspect-ratio:9/16;height:min(74vh,760px);width:auto}
.modal-media>iframe,.modal-media>video{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Plyr player fills the media box, gold themed */
.modal-media .plyr{
  position:absolute;inset:0;width:100%;height:100%;
  --plyr-color-main:var(--gold);
  --plyr-video-background:#000;
  --plyr-menu-background:rgba(11,11,12,.96);
  --plyr-menu-color:var(--ink);
}
.modal-media .plyr,.modal-media .plyr__video-wrapper{height:100%;background:#000}
.modal-media .plyr video{width:100%;height:100%;object-fit:contain;background:#000}
.modal-media .placeholder-note{
  position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:10px;color:var(--muted);padding:24px;
  background:radial-gradient(120% 120% at 30% 10%,rgba(212,175,89,.15),transparent 55%),#0a0a0b;
}
.modal-media .placeholder-note b{color:var(--gold);font-family:var(--font-serif);font-size:24px;font-weight:600}
.modal-meta{padding:22px 26px}
.modal-meta h3{font-family:var(--font-serif);font-size:28px;font-weight:600}
.modal-meta p{color:var(--gold);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-top:6px}
.modal-close{
  position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;border-radius:50%;
  background:rgba(0,0,0,.5);border:1px solid var(--line);color:var(--ink);cursor:pointer;
  font-size:15px;transition:all .3s;
}
.modal-close:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.hero-title .line.reveal>span{transform:translateY(105%);transition:transform 1s var(--ease)}
.hero-title .line.reveal.in>span{transform:none}

/* ---------- Responsive ---------- */
/* The 72px offset above needs 7vw of section padding to fit beside the grid
   (7vw >= 72px only above ~1030px wide). Narrower than that, pull the arrows
   back toward the grid so they never overflow the viewport. */
@media (max-width:1080px){
  .grid-nav-prev{left:-24px}
  .grid-nav-next{right:-24px}
}
@media (max-width:960px){
  .grid,.grid.mono{display:block;column-count:2;column-gap:14px}
  .grid .card,.grid.mono .card{width:100%;margin:0 0 14px;break-inside:avoid}
  .card.feature{aspect-ratio:16/9}
  .feature-slot{margin-bottom:40px}
  .about-grid{grid-template-columns:1fr}
  .grid-nav-prev{left:2px}
  .grid-nav-next{right:2px}
  .grid-nav{width:40px;height:40px}
}
@media (max-width:600px){
  .nav-links{display:none}
  .grid,.grid.mono{column-count:1}
  .hero-cta{flex-direction:column;align-items:flex-start}
  .btn{width:auto}
  .scroll-cue{display:none}
  /* clients: vertically centered on phones with balanced top/bottom space */
  .clients{
    min-height:100vh;display:flex;flex-direction:column;justify-content:center;
    padding-top:24px;padding-bottom:96px;
  }
  .clients .section-head{margin-bottom:clamp(28px,5vh,48px)}
  /* clients: 3 columns × 2 rows on phones (marquee keeps scrolling instead) */
  .client-viewport{max-width:360px}
  .client-grid:not(.marquee){
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:32px 10px;overflow:visible;max-width:360px;
  }
  .client-grid:not(.marquee) .client{flex:none;width:auto;max-width:none}
  .client-avatar{width:clamp(72px,24vw,100px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal,.card{opacity:1;transform:none}
}

/* ---------- Low-GFX mode ----------
   Applied via JS (see index.html <head>) when the browser is rendering with
   software/CPU compositing instead of a real GPU (no hardware acceleration).
   Filters, backdrop-filter and continuous blurred animations are by far the
   most expensive things to redraw without a GPU, so this turns them off /
   simplifies them instead of trying to run the full effect on the CPU. */
.low-gfx .fx-grain{display:none}                         /* animated noise layer off */
.low-gfx .hero::before{animation:none;filter:blur(18px);opacity:.28}  /* no more float loop */
.low-gfx .hero-oc{filter:none;animation:none}             /* drop shadow/sepia/contrast stack + float loop */
.low-gfx .hero-oc.in{transform:translateX(0) scale(1)}
.low-gfx .hero-oc-glow{filter:none;opacity:.3}
.low-gfx .nav.scrolled{backdrop-filter:none;background:rgba(5,5,5,.92)}
.low-gfx .modal-backdrop{backdrop-filter:none;background:rgba(0,0,0,.94)}
.low-gfx .modal-media .plyr{--plyr-menu-background:rgba(11,11,12,1)}