/* ADIZZ — Artificial Cinema Studio. One-page site in the "Timeline OS" language:
   the bottom scrubber tracks scroll; each scene is a clip on the reel.
   Deep black ground, one signal accent, technical mono chrome, Bricolage display. */

:root{
  --bg:#080809; --bg2:#0c0d0f; --panel:#101216; --panel2:#15171c;
  --ink:#f3f4f1; --soft:#a9adb3; --dim:#6b7077; --faint:#33373d;
  --line:rgba(243,244,241,.10); --line2:rgba(243,244,241,.16);
  --accent:#ff4326; --accent2:#ff6a4d; --accent-dim:rgba(255,67,38,.16);
  --hot:#e9ff3d;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --top:54px; --tl:104px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--disp);color:var(--ink);background:var(--bg);overflow-x:hidden;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;background-position:center top}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%,transparent 40%,var(--bg) 92%)}
::selection{background:var(--accent);color:#0a0a0a}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono)}

.grain{position:fixed;inset:-30%;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ TOP STATUS BAR ============ */
.topbar{position:fixed;top:0;left:0;right:0;height:var(--top);z-index:60;
  display:flex;align-items:stretch;justify-content:space-between;
  background:color-mix(in oklab,var(--bg) 80%,transparent);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line)}
.topbar .seg{display:flex;align-items:center;gap:14px;padding:0 18px;height:100%}
.topbar .seg+.seg{border-left:1px solid var(--line)}
.topbar .seg.grow{flex:1;justify-content:flex-end}
.wordmark{display:flex;align-items:center;gap:10px;cursor:pointer}
.wordmark .mk{font-family:var(--disp);font-weight:800;font-size:18px;letter-spacing:-.01em}
.wordmark .mk b{color:var(--accent)}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.rec{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--soft);text-transform:uppercase}
.rec .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,67,38,.5)}100%{box-shadow:0 0 0 9px rgba(255,67,38,0)}}
.tc-top{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);font-variant-numeric:tabular-nums}
.tc-top .ff{color:var(--accent)}
.statusword{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.topnav{display:flex;align-items:center;gap:4px}
.topnav a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  padding:8px 12px;cursor:pointer;transition:color .2s}
.topnav a:hover{color:var(--ink)}
.topnav a.cta{color:var(--ink);border:1px solid var(--line2);margin-left:6px}
.topnav a.cta:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
@media(max-width:880px){.topbar .hideS{display:none}}

/* ============ MAIN / SCENES ============ */
main{position:relative;z-index:1;padding-top:var(--top);padding-bottom:var(--tl)}
.scene{min-height:calc(100vh - var(--top));position:relative;
  display:grid;align-content:center;padding:clamp(56px,8vh,110px) clamp(20px,5vw,70px);
  border-bottom:1px solid var(--line)}
.scene.tall{align-content:start;padding-top:clamp(70px,12vh,150px)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);
  display:inline-flex;align-items:center;gap:12px}
.kicker::before{content:"";width:34px;height:1px;background:var(--accent)}

/* shared scene header */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  border-bottom:1px solid var(--line2);padding-bottom:clamp(20px,3vh,30px);margin-bottom:clamp(34px,6vh,64px)}
.shead .l{display:flex;flex-direction:column;gap:16px}
.shead h2{font-weight:800;font-size:clamp(32px,4.6vw,68px);line-height:.92;letter-spacing:-.025em}
.shead .count{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);white-space:nowrap}

/* ---- SLATE (hero) ---- */
.slate{grid-template-rows:auto 1fr auto;gap:0;position:relative;overflow:hidden;border-bottom:0}
.hero-bg{position:absolute;inset:-2% -2% 0;width:104%;height:104%;object-fit:cover;z-index:0;
  opacity:0;transition:opacity 3.4s cubic-bezier(.4,0,.2,1);
  filter:saturate(.9) contrast(1.04) brightness(.95);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 60%,transparent 97%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 60%,transparent 97%)}
.hero-bg.in{opacity:.55}
/* soft veil so the video stays a backdrop and never fights the type;
   bottom of the veil dissolves fully to page bg for a seamless handoff */
.slate::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 85% at 50% 40%,rgba(8,8,9,.10),rgba(8,8,9,.60) 78%),
    linear-gradient(180deg,rgba(8,8,9,.55),rgba(8,8,9,.08) 34%,rgba(8,8,9,.22) 60%,var(--bg) 92%)}
.slate>.board,.slate>.center{position:relative;z-index:2}
.slate .board{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line2);
  font-family:var(--mono);background:color-mix(in oklab,var(--panel) 58%,transparent);backdrop-filter:blur(9px) saturate(1.1)}
.slate .board .cell{padding:14px 16px;border-right:1px solid var(--line)}
.slate .board .cell:last-child{border-right:0}
.slate .board .cell .k{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.slate .board .cell .v{font-size:15px;letter-spacing:.04em;color:var(--ink);margin-top:7px}
.slate .board .cell .v b{color:var(--accent)}
.slate .center{align-self:center;padding:clamp(36px,7vh,90px) 0}
.slate h1{font-weight:800;letter-spacing:-.03em;line-height:.9;font-size:clamp(44px,9.2vw,164px);text-wrap:balance;margin-top:26px}
.slate h1 .o{-webkit-text-stroke:1.4px var(--ink);color:transparent}
.slate h1 .ac{color:var(--accent)}
.slate .lede{margin-top:30px;max-width:56ch;color:var(--soft);font-size:clamp(15px,1.7vw,20px);line-height:1.55;text-wrap:pretty}
.scrub-cue{display:flex;align-items:center;gap:14px;margin-top:36px;font-family:var(--mono);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.scrub-cue .bar{position:relative;width:160px;height:2px;background:var(--line2);overflow:hidden}
.scrub-cue .bar::after{content:"";position:absolute;top:0;left:0;height:100%;width:34%;background:var(--accent);animation:scrub 2.4s cubic-bezier(.7,0,.3,1) infinite}
@keyframes scrub{0%{transform:translateX(-110%)}100%{transform:translateX(420%)}}

/* viewer (the monitor chrome — reused for work stills) */
.viewer{position:relative;background:var(--bg2);border:1px solid var(--line2);overflow:hidden}
.viewer .scr{position:absolute;inset:0;overflow:hidden;background:radial-gradient(130% 100% at 50% 0%,#12151b,#070708 72%)}
.viewer .ghost{position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  font-family:var(--disp);font-weight:800;font-size:clamp(40px,7vw,96px);letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px rgba(243,244,241,.10);text-align:center;padding:0 8%}
.viewer .bars{position:absolute;inset:0;pointer-events:none;z-index:3}
.viewer .bars::before,.viewer .bars::after{content:"";position:absolute;left:0;right:0;height:7px;background:#000}
.viewer .bars::before{top:0}.viewer .bars::after{bottom:0}
.viewer .vbar{position:absolute;left:10px;right:10px;bottom:12px;z-index:4;display:flex;justify-content:space-between;gap:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.viewer .vbar .ac{color:var(--accent)}
.viewer .tick{position:absolute;width:13px;height:13px;border:1px solid var(--soft);z-index:4;opacity:.5}
.viewer .tick.tl{top:9px;left:9px;border-right:0;border-bottom:0}
.viewer .tick.tr{top:9px;right:9px;border-left:0;border-bottom:0}
.viewer .tick.bl{bottom:9px;left:9px;border-right:0;border-top:0}
.viewer .tick.br{bottom:9px;right:9px;border-left:0;border-top:0}

/* YouTube facade — darkened thumbnail until play */
.viewer.playable{cursor:pointer}
.viewer .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  filter:brightness(.82) saturate(.95) contrast(1.03);transition:transform .6s cubic-bezier(.16,1,.3,1),filter .45s}
.viewer .shade{position:absolute;inset:0;z-index:2;pointer-events:none;transition:opacity .5s;
  background:linear-gradient(180deg,rgba(7,7,8,.5),rgba(7,7,8,.12) 45%,rgba(7,7,8,.82));
  box-shadow:inset 0 0 130px rgba(0,0,0,.72)}
.proj:hover .viewer .poster{transform:scale(1.045);filter:brightness(1) saturate(1.02) contrast(1.03)}
.proj:hover .viewer .shade{opacity:.5}
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:62px;height:62px;border-radius:50%;border:1px solid rgba(243,244,241,.5);
  background:rgba(8,8,9,.42);backdrop-filter:blur(6px);display:grid;place-items:center;cursor:pointer;
  color:var(--ink);transition:background .25s,color .25s,border-color .25s,transform .25s}
.playbtn svg{width:18px;height:18px;margin-left:3px;fill:currentColor}
.proj:hover .playbtn{background:var(--accent);color:#0a0a0a;border-color:var(--accent);transform:translate(-50%,-50%) scale(1.07)}
.viewer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:8;background:#000}
.viewer.playing .shade,.viewer.playing .playbtn{opacity:0;pointer-events:none}
.viewer .ytout{position:absolute;top:10px;right:10px;z-index:9;opacity:0;pointer-events:none;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:rgba(8,8,9,.7);border:1px solid var(--line2);padding:6px 9px;transition:opacity .3s,background .2s}
.viewer .ytout:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.viewer.playing .ytout{opacity:1;pointer-events:auto}

/* ============ TRUST / SCALE BAND ============ */
.trustband{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(240px,.85fr) minmax(0,1.45fr);gap:clamp(28px,5vw,72px);align-items:center;
  padding:clamp(30px,5vh,54px) clamp(20px,5vw,70px);background:var(--bg2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tb-client{display:flex;flex-direction:column;gap:14px}
.tb-kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tb-logo{font-family:var(--disp);font-weight:800;font-size:clamp(42px,5.4vw,72px);letter-spacing:.04em;line-height:.85;color:var(--ink)}
.tb-metrics{display:grid;grid-template-columns:repeat(4,1fr)}
.tb-m{display:flex;flex-direction:column;gap:9px;padding:2px clamp(14px,2vw,26px);border-left:1px solid var(--line)}
.tb-m:first-child{border-left:0;padding-left:0}
.tb-n{font-family:var(--disp);font-weight:700;font-size:clamp(30px,3.4vw,50px);letter-spacing:-.02em;line-height:.85;color:var(--ink)}
.tb-n .ac{color:var(--accent)}
.tb-n .tb-u{font-size:.4em;font-weight:600;color:var(--soft);margin-left:3px;letter-spacing:0}
.tb-l{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

/* ---- WORK ---- */
.work .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(46px,4.5vw,68px) clamp(18px,2.2vw,30px);align-items:start}
.proj{display:flex;flex-direction:column;gap:12px;cursor:pointer;grid-column:span 6}
.proj.reel{grid-column:span 3}
.proj .viewer{aspect-ratio:16/9;transition:border-color .3s}
.proj.reel .viewer{aspect-ratio:9/16}
.proj.reel .viewer .ghost{font-size:clamp(20px,2.2vw,36px)}
.proj .viewer .scr{transition:transform .6s cubic-bezier(.16,1,.3,1)}
.proj:hover .viewer{border-color:var(--accent)}
.proj:hover .viewer .scr{transform:scale(1.04)}
.proj.reel .viewer .scr{background:radial-gradient(120% 90% at 50% 8%,#1a1410,#070708 72%)}
.proj.reel:nth-of-type(4) .viewer .scr{background:radial-gradient(120% 90% at 50% 8%,#101a18,#070708 72%)}
.proj.reel:nth-of-type(5) .viewer .scr{background:radial-gradient(120% 90% at 50% 8%,#14101c,#070708 72%)}
.proj .meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--line);padding-top:14px}
.proj .meta .nm{font-weight:800;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;line-height:1}
.proj .meta .fmt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;text-align:right}
.proj.reel .meta{flex-direction:column;align-items:flex-start;gap:8px}
.proj.reel .meta .fmt{text-align:left}
.proj.reel .meta .nm{font-size:clamp(20px,2.2vw,28px)}

/* ---- CRAFT (capabilities list) ---- */
.caplist{border-top:1px solid var(--line2)}
.cap{display:grid;grid-template-columns:64px minmax(200px,1.1fr) minmax(0,1.3fr) 28px;gap:clamp(16px,3vw,40px);
  align-items:center;padding:clamp(20px,3vh,34px) 6px;border-bottom:1px solid var(--line);transition:padding .3s,background .3s}
.cap .ci{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--accent)}
.cap .cn{font-weight:700;font-size:clamp(24px,3.2vw,46px);letter-spacing:-.025em;line-height:.95;transition:color .25s}
.cap .cd{color:var(--soft);font-size:clamp(14px,1.4vw,17px);line-height:1.5;text-wrap:pretty}
.cap .ar{font-family:var(--mono);color:var(--dim);justify-self:end;transition:transform .3s,color .3s}
.cap:hover{background:linear-gradient(90deg,var(--accent-dim),transparent);padding-left:18px}
.cap:hover .cn{color:var(--accent)}
.cap:hover .ar{color:var(--accent);transform:translateX(6px)}

/* ---- PROCESS (steps) ---- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2)}
.step{padding:clamp(24px,3vh,40px) clamp(18px,2vw,30px) clamp(28px,4vh,48px) 0;border-right:1px solid var(--line);position:relative}
.step::before{content:"";position:absolute;top:-1px;left:0;width:18px;height:3px;background:var(--accent)}
.step:last-child{border-right:0}
.step .sn{font-family:var(--disp);font-weight:800;font-size:clamp(44px,5vw,84px);line-height:.8;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px var(--faint)}
.step .st{font-weight:700;font-size:clamp(19px,1.9vw,28px);letter-spacing:-.01em;margin-top:22px}
.step .sx{color:var(--soft);font-size:clamp(13.5px,1.1vw,15px);line-height:1.55;margin-top:12px;text-wrap:pretty}

/* ---- PROCESS reliability strip ---- */
.reliability{margin-top:clamp(28px,4vh,48px);display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
  border-top:1px solid var(--line2);padding-top:clamp(22px,3vh,32px)}
.rl-lead{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.rl-items{display:flex;flex-wrap:wrap;gap:12px 14px}
.rl{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--soft);
  border:1px solid var(--line2);padding:9px 15px;transition:border-color .2s,color .2s}
.rl:hover{border-color:var(--accent);color:var(--ink)}

/* ---- STUDIO ---- */
.studio{align-content:center}
.studio .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:clamp(34px,6vw,90px);align-items:start}
.studio .statement{font-weight:500;font-size:clamp(24px,3.3vw,46px);line-height:1.16;letter-spacing:-.015em;text-wrap:pretty}
.studio .statement .ac{color:var(--accent)}
.studio .statement .o{-webkit-text-stroke:1px var(--ink);color:transparent}

/* inspector spec table (reused) */
.inspector{border-top:1px solid var(--line2)}
.inspector .row{display:grid;grid-template-columns:128px 1fr;gap:16px;padding:14px 2px;border-bottom:1px solid var(--line);
  font-family:var(--mono);align-items:baseline}
.inspector .row .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.inspector .row .v{font-size:13px;letter-spacing:.03em;color:var(--ink);line-height:1.5}

/* ---- CONTACT (output) ---- */
.contact{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.contact h2{width:100%;font-weight:800;font-size:clamp(40px,6.6vw,124px);line-height:.94;letter-spacing:-.03em;padding-bottom:.06em;text-wrap:balance}
.contact h2 .ac{color:var(--accent)}
.contact .sub{width:100%;margin-top:26px;max-width:48ch;color:var(--soft);font-size:clamp(15px,1.7vw,20px);line-height:1.5}
.contact .mail{margin-top:40px;font-family:var(--disp);font-weight:700;font-size:clamp(24px,4vw,56px);letter-spacing:-.02em;
  display:inline-flex;align-items:center;gap:18px;transition:color .25s}
.contact .ctas{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.cbtn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;padding:16px 24px;border:1px solid var(--line2);background:var(--panel);color:var(--ink);transition:.25s}
.cbtn svg{width:19px;height:19px;flex:none}
.cbtn .ar{color:var(--accent);transition:transform .25s}
.cbtn:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.cbtn:hover .ar{color:#0a0a0a;transform:translateX(5px)}
.cbtn.primary{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.cbtn.primary .ar{color:#0a0a0a}
.cbtn.primary:hover{background:var(--accent2);border-color:var(--accent2)}
.contact .mail .un{border-bottom:2px solid var(--accent);padding-bottom:4px}
.contact .mail:hover{color:var(--accent)}
.contact .links{margin-top:36px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.contact .links a,.contact .links span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);border:1px solid var(--line2);padding:11px 16px}
.contact .links a{transition:.2s}
.contact .links a:hover{background:var(--accent);color:#0a0a0a;border-color:var(--accent)}
.contact .colophon{margin-top:clamp(40px,7vh,80px);font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}

/* ============ TIMELINE SCRUBBER (fixed bottom) ============ */
.timeline{position:fixed;left:0;right:0;bottom:0;height:var(--tl);z-index:60;
  background:var(--bg2);box-shadow:0 -24px 60px rgba(0,0,0,.6);
  border-top:1px solid var(--accent);display:grid;grid-template-columns:auto 1fr auto}
.timeline::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:34%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.tl-side{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 18px;min-width:138px}
.tl-side.r{align-items:flex-end;text-align:right;border-left:1px solid var(--line)}
.tl-side.l{border-right:1px solid var(--line)}
.tl-tc{font-family:var(--mono);font-size:clamp(16px,1.6vw,22px);letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.tl-tc .ff{color:var(--accent)}
.tl-meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}

.tl-track{position:relative;overflow:hidden}
.tl-ruler{position:absolute;top:0;left:0;right:0;height:18px;border-bottom:1px solid var(--line);
  background-image:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 100%);background-size:calc(100%/40) 100%}
.tl-ruler::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 100%);background-size:calc(100%/8) 100%}
.tl-lane{position:absolute;left:0;right:0;top:24px;bottom:14px}
.tl-clip{position:absolute;top:0;bottom:0;border:1px solid var(--line2);background:#1a1d23;
  display:flex;align-items:center;padding:0 12px;gap:8px;cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s}
.tl-clip:not(:first-child){border-left:0}
.tl-clip .ci{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--dim);white-space:nowrap}
.tl-clip .cn{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:-.01em;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-clip .thumbstripe{position:absolute;inset:0;z-index:-1;opacity:.5;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.03) 10px 11px)}
.tl-clip.active{background:var(--accent-dim);border-color:var(--accent)}
.tl-clip.active .ci{color:var(--accent2)}
.tl-clip.active .cn{color:var(--ink)}
.tl-clip:hover{border-color:var(--accent)}

.playhead{position:absolute;top:0;bottom:0;width:0;z-index:5;pointer-events:none;will-change:transform}
.playhead .ln{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--hot);box-shadow:0 0 10px rgba(233,255,61,.5)}
.playhead .hd{position:absolute;top:-1px;left:-6px;width:12px;height:9px;background:var(--hot);clip-path:polygon(0 0,100% 0,50% 100%)}
.playhead .ftc{position:absolute;top:-20px;left:-2px;transform:translateX(-50%);font-family:var(--mono);
  font-size:9px;letter-spacing:.08em;color:var(--hot);white-space:nowrap;background:var(--bg);padding:0 4px}
.tl-prog{position:absolute;left:0;top:24px;bottom:14px;width:0;background:linear-gradient(90deg,transparent,var(--accent-dim));
  z-index:1;pointer-events:none;border-right:1px solid rgba(255,67,38,.4)}

/* mobile readout — hidden on desktop */
.tl-mobilebar{display:none;position:absolute;top:0;left:0;right:0;height:20px;z-index:6;
  justify-content:space-between;align-items:center;padding:0 12px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.tl-mobilebar .mtc{color:var(--ink);font-variant-numeric:tabular-nums}
.tl-mobilebar .mtc b{color:var(--accent);font-weight:400}
.tl-mobilebar .mnow{color:var(--accent2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}

/* ---- reveal ---- */
[data-rev]{opacity:0;transform:translateY(30px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
[data-rev].in{opacity:1;transform:none}
[data-rev][data-d="1"]{transition-delay:.07s}
[data-rev][data-d="2"]{transition-delay:.14s}
[data-rev][data-d="3"]{transition-delay:.2s}
[data-rev][data-d="4"]{transition-delay:.27s}

/* ============ RESPONSIVE ============ */
@media(max-width:900px){
  .work .grid{grid-template-columns:repeat(2,1fr)}
  .proj{grid-column:span 2}
  .proj.reel{grid-column:span 1}
  .trustband{grid-template-columns:1fr;gap:30px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2){border-right:0}
  .studio .wrap{grid-template-columns:1fr;gap:40px}
  .cap{grid-template-columns:44px 1fr;gap:14px}
  .cap .cd{grid-column:2;color:var(--soft)}
  .cap .ar{display:none}
}
@media(max-width:820px){
  .slate .board{grid-template-columns:repeat(2,1fr)}
  .slate .board .cell:nth-child(2){border-right:0}
  .slate .board .cell{border-top:1px solid var(--line)}
  .slate .board .cell:nth-child(-n+2){border-top:0}
}
@media(max-width:600px){
  .steps{grid-template-columns:1fr}
  .step,.step:nth-child(2){border-right:0;border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:0}
}

/* ---- mobile bottom bar ---- */
@media(max-width:780px){
  :root{--tl:78px}
  .timeline{grid-template-columns:1fr}
  .tl-side{display:none}
  .tl-track{padding-top:0}
  .tl-ruler{top:22px;height:14px}
  .tl-lane{top:42px;bottom:12px}
  .tl-prog{top:42px;bottom:12px}
  .tl-clip .cn{display:none}
  .tl-clip .ci{font-size:9px}
  .tl-mobilebar{display:flex}
  .playhead .ftc{display:none}
}

/* ---- phone polish ---- */
@media(max-width:560px){
  /* trust band: metrics as a 2×2 grid, no orphan borders */
  .tb-metrics{grid-template-columns:repeat(2,1fr);gap:24px 0}
  .tb-m{padding:0 16px}
  .tb-m:nth-child(odd){border-left:0;padding-left:0}
  .reliability{flex-direction:column;align-items:flex-start;gap:14px}
  /* WORK: films full-width, reels as a clean 3-up strip (no orphan) */
  .work .grid{grid-template-columns:repeat(6,1fr);gap:42px 12px}
  .proj{grid-column:span 6}
  .proj.reel{grid-column:span 2}
  .proj.reel .meta{gap:5px}
  .proj.reel .meta .nm{font-size:17px}
  .proj.reel .meta .fmt{font-size:8.5px;letter-spacing:.06em}
  .proj.reel .vbar span:nth-child(2){display:none}
  .proj.reel .playbtn{width:44px;height:44px}
  .proj.reel .playbtn svg{width:15px;height:15px}
  /* CONTACT: full-width stacked buttons for comfortable taps */
  .contact .ctas{flex-direction:column;align-items:stretch;width:100%;max-width:300px}
  .cbtn{justify-content:center;padding:17px 22px}
  .contact .links{gap:8px}
  /* tighten section top space on phones */
  .scene{padding-top:60px}
  .scene.tall{padding-top:80px}
  .shead{margin-bottom:30px}
  /* hero headline breathing room */
  .slate h1{font-size:clamp(38px,10.4vw,48px)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important}
  [data-rev]{opacity:1;transform:none}
}