/* ---------- CREATIVE HOME STYLES ---------- */
:root{
  --stage:#0E0D0F;
  --panel:#17161A;
  --panel-line:#9a999d;
  --ivory:#F5F0E6;
  --ivory-dim:#B8B3A8;
  --amber:#E8A33D;
  --tally:#D6402C;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--stage);
  color:var(--ivory);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
}
::selection{background:var(--tally);color:var(--ivory);}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:overlay;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,.display{
  font-family:'Big Shoulders Display',sans-serif;
  text-transform:uppercase;
  letter-spacing:.01em;
  font-weight:900;
  line-height:.92;
}
.mono{
  font-family:'IBM Plex Mono',monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
}
a{color:inherit;text-decoration:none;}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px 40px;
  background:linear-gradient(to bottom, rgba(14,13,15,.9), transparent);
}
.logo{
  font-family:'Big Shoulders Display',sans-serif;
  font-weight:900;font-size:22px;letter-spacing:.02em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;
}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--tally);animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.25;}}
.navlinks{display:flex;gap:34px;align-items:center;}
.navlinks a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ivory-dim);transition:color .2s;}
.navlinks a:hover{color:var(--amber);}
.navlinks .cta{border:1px solid var(--ivory-dim);padding:9px 18px;border-radius:2px;color:var(--ivory);}
.navlinks .cta:hover{border-color:var(--amber);color:var(--amber);}
.clock{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ivory-dim);}

/* ---------- STUDIO SWITCHER ---------- */
.studio-bar{
  position:fixed;top:0;left:0;right:0;z-index:101;
  display:flex;justify-content:center;gap:0;
  padding:10px 0;background:var(--stage);border-bottom:1px solid var(--panel-line);
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.studio-bar a{color:var(--ivory-dim);padding:0 16px;transition:color .2s;}
.studio-bar a.current{color:var(--ivory);border-bottom:1px solid var(--amber);padding-bottom:2px;}
.studio-bar span.sep{color:var(--panel-line);}
nav{top:37px;}
.hero{padding-top:196px;}

/* ---------- HERO ---------- */
/* ---------- HERO ---------- */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  padding: 160px 40px 120px;
  background-color: var(--stage); /* Acts as a fallback color while the video loads */
  border-bottom: 1px solid var(--panel-line);
  overflow: hidden; /* CRITICAL: Prevents the video from spilling outside the hero section */
}

/* --- New Video Background Styles --- */
.hero-video {
  position: absolute;
  inset: 0; /* Shorthand for top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Forces the video to fill the screen without squishing the aspect ratio */
  z-index: 1; /* Pushes the video to the back */
}

/* --- New Gradient Overlay --- */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2; /* Sits directly on top of the video */
  /* Combines a dark tint to make text readable with your existing golden radial glow */
  background: 
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,163,61,0.15), transparent 60%),
    rgba(14, 13, 15, 0.65); /* Adjust this 0.65 value to make the video darker or lighter */
}

/* --- Pulling the text to the front --- */
.hero-eyebrow, .hero h1, .hero-sub {
  position: relative;
  z-index: 3; /* Guarantees the text sits above both the video and the overlay */
}

.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:28px;
  color:var(--ivory-dim);
}
.hero-eyebrow .rec {
  color:var(--tally);
}
.hero h1{
  font-size:clamp(52px,9vw,132px);
  max-width:1180px;
}
.hero h1 .accent{
  color:var(--amber);
}
.hero-sub{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--panel-line);
  flex-wrap:wrap;
}
.hero-sub p{
  max-width:420px;
  color:var(--ivory-dim);
  font-size:16px;
  line-height:1.55;
}
.btn-slate{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--ivory);
  color:var(--stage);
  padding:16px 26px;
  border-radius:2px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:500;
  transition:background .2s;
  white-space:nowrap;
}
.btn-slate:hover{
  background:var(--amber);
}
.btn-slate::before{
  content:"▶";
  font-size:10px;
}

/* ---------- SECTION LABEL ---------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;padding:92px 40px 36px;border-bottom:1px solid var(--panel-line);flex-wrap:wrap;gap:20px;}
.section-head .tc{color:var(--tally);}
.section-head h2{font-size:clamp(34px,5vw,64px);}
.section-head .desc{max-width:340px;color:var(--ivory-dim);font-size:14px;line-height:1.6;padding-bottom:4px;}

/* ---------- WORK GRID ---------- */
.work-grid{
  padding:0 0px 0px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--panel-line);
}
.work-card{
  background:var(--panel);
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  cursor:pointer;
}
.work-card .poster{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(14,13,15,0) 40%, rgba(14,13,15,.92) 100%),var(--swatch,#201d24);
  transition:transform .5s ease;
}
.work-card:hover .poster{
  transform:scale(1.06);
}
.work-card .tag{
  position:relative;
  z-index:2;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;color:var(--amber);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.work-card h3{
  position:relative;
  z-index:2;
  font-size:26px;
}
.work-card .client{
  position:relative;
  z-index:2;
  color:var(--ivory-dim);
  font-size:13px;
  margin-top:6px;
}
.work-card:nth-child(1){
  --swatch:#241c1a;
}
.work-card:nth-child(2){
  --swatch:#1a2024;
}
.work-card:nth-child(3){
  --swatch:#221f16;
}
.work-card:nth-child(4){
  --swatch:#1c1a24;
}
.work-card:nth-child(5){
  --swatch:#241a1e;
}
.work-card:nth-child(6){
  --swatch:#1a2420;
}
.work-more{
  padding:0 40px 100px;
}
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ivory);
  border-bottom:1px solid var(--ivory-dim);
  padding-bottom:4px;
}
.link-arrow:hover{
  color:var(--amber);
  border-color:var(--amber);
}

/* ---------- SERVICES ---------- */
.services{padding:0 40px 40px;}
.service-row{display:grid;grid-template-columns:110px 1fr 340px;gap:40px;align-items:center;padding:44px 0;border-top:1px solid var(--panel-line);transition:background .25s;}
.service-row:last-child{border-bottom:1px solid var(--panel-line);}
.service-row:hover{background:var(--panel);}
.service-row .scene{font-family:'IBM Plex Mono',monospace;color:var(--tally);font-size:14px;}
.service-row h3{font-size:clamp(28px,3.4vw,44px);}
.service-row p{color:var(--ivory-dim);font-size:14.5px;line-height:1.6;}
.service-row .learn{margin-top:14px;display:inline-block;}

/* ---------- MARQUEE CLIENTS ---------- */
.marquee-section{padding:90px 0;border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);overflow:hidden;}
.marquee-section > .mono{padding:0 40px;margin-bottom:36px;display:block;}
.marquee-track{display:flex;align-items:center;gap:64px;width:max-content;animation:scroll 26s linear infinite;}
.marquee-track:hover{animation-play-state:paused;}
.marquee-item{display:flex;flex-direction:column;align-items:center;gap:10px;flex:0 0 auto;}
.marquee-logo{margin:0;filter:grayscale(1) brightness(1.6) contrast(.8);opacity:.75;transition:opacity .2s,filter .2s;}
.marquee-item:hover .marquee-logo{filter:none;opacity:1;}
.marquee-logo img{height:34px;width:auto;max-width:180px;object-fit:contain;display:block;}
.marquee-name{color:var(--ivory-dim);white-space:nowrap;margin:0;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}


.partners { 
    padding: 0px 0px 130px 0; 
}
.contact { 
    padding: 110px 48px 90px; 
    text-align: center; 
    color: var(--paper);
    border-top: 1px solid var(--line); 
    background: var(--ink-blue); }
.contact h2 { font-size: clamp(40px, 6vw, 84px); margin-bottom: 20px; font-weight: 700; letter-spacing: -.02em; }
.contact p { 
    color: var(--paper); 
    margin-bottom: 30px; 
}

.contact a.submit { 
    display: inline-block; 
    background: var(--paper-warm); 
    color: var(--ink-dim); 
    padding: 16px 26px; 
    border-radius: 2px; 
    font-family: 'IBM Plex Mono', monospace; 
    font-size: 13px; 
    text-transform: uppercase; 
    letter-spacing: .06em; }

.logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: invert(100%);

}

/* ---------- MANIFESTO ---------- */
.manifesto{padding:130px 40px;text-align:center;}
.manifesto p{font-family:'Big Shoulders Display',sans-serif;font-weight:500;font-size:clamp(28px,4.2vw,56px);line-height:1.15;max-width:1000px;margin:0 auto;text-transform:none;}
.manifesto .accent{color:var(--amber);}

/* ---------- CONTACT ---------- */
.contact{background:var(--panel);border-top:1px solid var(--panel-line);padding:110px 40px 90px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.contact h2{font-size:clamp(40px,6vw,84px);}
.contact-left p{color:var(--ivory-dim);margin-top:20px;max-width:380px;line-height:1.6;}
.contact-info{margin-top:50px;display:flex;flex-direction:column;gap:6px;}
.contact-info .mono{color:var(--ivory-dim);}
.budget-pills{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 30px;}
.budget-pills span{border:1px solid var(--panel-line);padding:10px 16px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ivory-dim);}
.budget-pills span.active{border-color:var(--amber);color:var(--amber);}
.field{border-bottom:1px solid var(--panel-line);padding:16px 0;margin-bottom:4px;}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ivory-dim);margin-bottom:6px;text-transform:uppercase;letter-spacing:.06em;}
.field .fake-input{color:var(--ivory-dim);font-size:14px;opacity:.5;}

/* ---------- FOOTER ---------- */
footer{padding:60px 40px 130px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;}
footer .mono{color:var(--ivory-dim);}
footer .cols{display:flex;gap:70px;flex-wrap:wrap;}
footer .cols a{display:block;color:var(--ivory-dim);font-size:14px;margin-bottom:10px;}
footer .cols a:hover{color:var(--amber);}

.site-credit {
    flex-basis: 100%; /* Forces the credit to break onto its own full-width row */
    text-align: right; /* Aligns it neatly to the bottom right corner */
    margin-top: 40px; /* Adds breathing room between the credit and your footer links */
    opacity: 0.6; /* Dims it slightly so it acts as a subtle watermark */
    transition: opacity 0.3s ease;
}

.site-credit:hover {
    opacity: 1; /* Brightens up if someone hovers over it */
}

/* Mobile Adjustment */
@media (max-width: 800px) {
    .site-credit {
        text-align: left; /* Aligns with the rest of your mobile footer layout */
        margin-top: 20px;
    }
}

.site-credit {
    text-align: right; 
    padding: 0 48px 50px; /* Matches the 48px side padding used everywhere else */
    opacity: 0.6; 
    transition: opacity 0.3s ease;
}

.site-credit:hover {
    opacity: 1; 
}

/* Mobile Adjustment */
@media (max-width: 800px) {
    .site-credit {
        text-align: left; 
        padding: 0 20px 50px; /* Matches mobile margins */
    }
}

/* --- Site Credit Link Styling --- */
.site-credit a {
    color: inherit; /* Keeps the link the exact same color as the rest of the sentence */
    text-decoration: none !important; /* Forces the underline to disappear */
}

.site-credit strong {
    font-weight: 700; /* Makes 'Stage Ham' bold and punchy */
}

/* Optional: Add a subtle color shift when someone hovers over the name */
.site-credit a:hover {
    color: var(--peak); 
}

/* ---------- TIMELINE SCRUBBER ---------- */
.scrubber{position:fixed;bottom:0;left:0;right:0;height:34px;z-index:150;background:rgba(14,13,15,.85);backdrop-filter:blur(6px);border-top:1px solid var(--panel-line);display:flex;align-items:center;padding:0 40px;}
.scrubber-track{position:relative;flex:1;height:2px;background:var(--panel-line);}
.scrubber-fill{position:absolute;left:0;top:0;height:100%;width:0%;background:var(--tally);}
.scrubber-marks{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;}
.scrubber-marks span{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-dim);background:var(--stage);padding:0 6px;transform:translateY(-11px);transition:color .2s;}
.scrubber-marks span.active{color:var(--amber);} 
.scrubber-time{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ivory-dim);margin-left:16px;white-space:nowrap;}

/* ---------- PAGE STYLES ---------- */
.page-head{padding:190px 40px 60px;border-bottom:1px solid var(--panel-line);}
.page-head .mono{margin-bottom:20px;color:var(--tally);}
.page-head h1{font-size:clamp(52px,9vw,110px);max-width:900px;}
.page-head p{color:var(--ivory-dim);max-width:520px;margin-top:24px;font-size:16px;line-height:1.6;}
.lede{padding:60px 40px 120px;border-bottom:1px solid var(--panel-line);}
.lede p{font-family:'Big Shoulders Display',sans-serif;font-weight:500;font-size:clamp(26px,3.6vw,44px);line-height:1.2;max-width:1000px;text-transform:none;}
.lede .accent{color:var(--amber);}
.intro-split{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;padding:60px 40px 100px;border-bottom:1px solid var(--panel-line);align-items:end;}
.intro-split .statement{font-family:'Big Shoulders Display',sans-serif;font-weight:500;font-size:clamp(26px,3.6vw,44px);line-height:1.2;text-transform:none;}
.intro-split .statement .accent{color:var(--amber);}
.pull-quote-box{background:var(--panel);border:1px solid var(--panel-line);padding:32px;position:relative;}
.pull-quote-box::before{content:"\201C";position:absolute;top:8px;left:20px;font-family:'Big Shoulders Display',sans-serif;font-size:64px;color:var(--amber);line-height:1;opacity:.5;}
.pull-quote-box p{position:relative;font-size:17px;line-height:1.6;color:var(--ivory);margin-top:20px;}
.pull-quote-box .attr{margin-top:18px;color:var(--ivory-dim);} 
.milestones{display:flex;overflow-x:auto;border-bottom:1px solid var(--panel-line);}
.milestone{flex:1 0 200px;padding:40px;border-right:1px solid var(--panel-line);position:relative;}
.milestone:last-child{border-right:none;}
.milestone .yr{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:38px;color:var(--amber);}
.milestone p{color:var(--ivory-dim);font-size:13.5px;margin-top:8px;line-height:1.5;}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-bottom:1px solid var(--panel-line);gap:1px;background:var(--panel-line);}
.stat{padding:44px 40px;background:var(--panel);}
.stat .num{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:56px;color:var(--amber);}
.stat .label{margin-top:6px;}
.how-we-work{padding:0 40px;}
.team-grid,.bento-team{padding:0 40px 60px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--panel-line);} 
.team-card{background:var(--panel);padding:28px 22px;}
.team-card .photo{aspect-ratio:1;background:#201d24;margin-bottom:18px;}
.team-card h3{font-size:22px;}
.team-card .role{color:var(--amber);margin:6px 0 10px;}
.team-card p{color:var(--ivory-dim);font-size:13px;line-height:1.5;}
.bento-team .team-card.lead{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;}
.bento-team .team-card.lead .photo{aspect-ratio:auto;flex:1;margin-bottom:18px;}
.bento-team .team-card.lead h3{font-size:28px;}
.cta-strip{padding:100px 40px;text-align:center;border-top:1px solid var(--panel-line);}
.cta-strip h2{font-size:clamp(32px,5vw,58px);margin-bottom:26px;}
.service-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--panel-line);margin:0 40px 0;border:1px solid var(--panel-line);}
.overview-card{background:var(--panel);padding:30px;transition:background .2s;}
.overview-card:hover{background:var(--stage);}
.overview-card .n{font-family:'Big Shoulders Display',sans-serif;font-weight:900;font-size:34px;color:var(--amber);}
.overview-card h4{margin:10px 0 8px;font-size:19px;}
.overview-card p{color:var(--ivory-dim);font-size:13px;line-height:1.5;margin-bottom:14px;}
.service-meta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 22px;}
.service-meta span{border:1px solid var(--panel-line);padding:7px 14px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ivory-dim);text-transform:uppercase;letter-spacing:.05em;}
.service-detail{border-bottom:1px solid var(--panel-line);padding:90px 40px;}
.service-detail-grid{display:grid;grid-template-columns:90px 1fr 1fr;gap:50px;}
.service-detail .scene{font-family:'IBM Plex Mono',monospace;color:var(--tally);font-size:14px;}
.service-detail h2{font-size:clamp(38px,5.4vw,68px);margin-bottom:20px;}
.service-detail .col p{color:var(--ivory-dim);font-size:15px;line-height:1.65;margin-bottom:18px;}
.service-detail.reverse .service-detail-grid{grid-template-columns:90px 1fr 1fr;}
.service-detail.reverse .col:nth-child(2){order:3;}
.service-detail.reverse .col:nth-child(3){order:2;}
.deliverables{list-style:none;margin-top:8px;}
.deliverables li{padding:14px 0;border-top:1px solid var(--panel-line);font-size:14px;color:var(--ivory-dim);display:flex;justify-content:space-between;align-items:center;gap:14px;}
.deliverables li:last-child{border-bottom:1px solid var(--panel-line);}
.deliverables li span.n{font-family:'IBM Plex Mono',monospace;color:var(--amber);width:24px;height:24px;border-radius:50%;border:1px solid var(--amber);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;}
.deliverables li span:last-child:not(.n){margin-left:auto;}
.filters{display:flex;gap:0;flex-wrap:wrap;padding:34px 40px;border-bottom:1px solid var(--panel-line);}
.filters button{background:none;border:none;color:var(--ivory-dim);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:8px 18px;cursor:pointer;border-right:1px solid var(--panel-line);}
.filters button:first-child{padding-left:0;}
.filters button.active{color:var(--amber);}
.full-work-grid{padding:0 40px 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--panel-line);}
.full-work-grid .work-card{aspect-ratio:4/5;}
.full-work-grid .work-card:nth-child(6n+1){--swatch:#241c1a;}
.full-work-grid .work-card:nth-child(6n+2){--swatch:#1a2024;}
.full-work-grid .work-card:nth-child(6n+3){--swatch:#221f16;}
.full-work-grid .work-card:nth-child(6n+4){--swatch:#1c1a24;}
.full-work-grid .work-card:nth-child(6n+5){--swatch:#241a1e;}
.full-work-grid .work-card:nth-child(6n+6){--swatch:#1a2420;}
.article-list{padding:20px 40px 120px;}
.article-row{display:grid;grid-template-columns:140px 1fr auto;gap:30px;align-items:baseline;padding:34px 0;border-top:1px solid var(--panel-line);}
.article-row:last-child{border-bottom:1px solid var(--panel-line);}
.article-row .date{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ivory-dim);}
.article-row h3{font-size:24px;}
.article-row .tag{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);white-space:nowrap;}
.video-block{padding:44px 48px 0;}
.player-frame{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--panel-line);}
.player-frame video{width:100%;height:100%;object-fit:cover;display:block;}
.player-slot-label{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-dim);background:rgba(14,13,15,.7);padding:6px 10px;pointer-events:none;}
.player-slot-label .dot{width:6px;height:6px;border-radius:50%;background:var(--tally);}
.tc-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;border-bottom:1px solid var(--panel-line);flex-wrap:wrap;}
.tc-readout{display:flex;align-items:baseline;gap:10px;}
.tc-readout .rec{width:8px;height:8px;border-radius:50%;background:var(--tally);animation:pulse 1.5s infinite;}
.tc-readout .code{font-family:'IBM Plex Mono',monospace;font-size:28px;letter-spacing:.02em;color:var(--amber);}
.tc-readout .code .dim{color:var(--ivory-dim);}
.tc-readout .label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-dim);} 
.markers{display:flex;gap:0;flex-wrap:wrap;}
.marker{background:none;border:none;border-left:1px solid var(--panel-line);padding:6px 18px;cursor:pointer;text-align:left;}
.marker:first-child{border-left:none;padding-left:0;}
.marker .mtc{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--tally);display:block;}
.marker .mlabel{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-dim);transition:color .2s;}
.marker:hover .mlabel{color:var(--amber);} 
.scene{padding:80px 48px;max-width:900px;border-bottom:1px solid var(--panel-line);}
.scene .num{font-family:'IBM Plex Mono',monospace;color:var(--tally);font-size:14px;margin-bottom:20px;}
.scene h2{font-size:clamp(28px,4vw,44px);margin-bottom:24px;}
.scene p{font-size:17px;line-height:1.7;color:var(--ivory-dim);max-width:680px;}
.pull-quote{font-family:'Big Shoulders Display',sans-serif;font-weight:500;font-size:clamp(24px,3vw,34px);text-transform:none;line-height:1.3;color:var(--ivory);margin-top:32px;padding-left:24px;border-left:2px solid var(--amber);max-width:640px;}
.section-label{padding:70px 48px 30px;}
.section-label .mono{color:var(--tally);margin-bottom:10px;}
.section-label h3{font-size:26px;}
.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--panel-line);} 
.media-slot{aspect-ratio:4/3;background:var(--panel);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed var(--panel-line);} 
.media-slot svg{width:28px;height:28px;stroke:var(--ivory-dim);} 
.media-slot .slot-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ivory-dim);} 
.media-slot.wide{grid-column:span 2;} 
.secondary-video{padding:0 48px 90px;}
.secondary-video .player-frame{aspect-ratio:21/9;}
.secondary-video .caption{margin-top:14px;color:var(--ivory-dim);font-size:13px;}
.credits{padding:90px 48px;text-align:center;border-top:1px solid var(--panel-line);} 
.credits h3{font-size:16px;color:var(--ivory-dim);margin-bottom:36px;text-transform:none;font-family:'IBM Plex Mono',monospace;letter-spacing:.08em;}
.credit-row{display:flex;justify-content:center;gap:70px;flex-wrap:wrap;} 
.credit-row div{text-align:center;}
.credit-row .role{color:var(--tally);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.credit-row .name{font-size:16px;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .work-grid{grid-template-columns:1fr 1fr;}
  .service-row{grid-template-columns:1fr;gap:10px;}
  .service-row .meta-col{max-width:none;}
  .contact-grid{grid-template-columns:1fr;}
  .navlinks{display:none;}
  .scrubber-marks span{display:none;}
  .hero{padding-top:140px;}
  .stats{grid-template-columns:repeat(2,1fr);} 
  .team-grid,.bento-team{grid-template-columns:repeat(2,1fr);} 
  .intro-split{grid-template-columns:1fr;}
  .bento-team .team-card.lead{grid-column:span 2;grid-row:span 1;}
  .service-overview{grid-template-columns:1fr;}
  .service-detail-grid{grid-template-columns:1fr;gap:20px;}
  .service-detail.reverse .col:nth-child(2),.service-detail.reverse .col:nth-child(3){order:0;}
  .full-work-grid{grid-template-columns:1fr 1fr;}
  .media-grid{grid-template-columns:repeat(2,1fr);} 
  .media-slot.wide{grid-column:span 2;}
}
@media(max-width:560px){
  .work-grid{grid-template-columns:1fr;}
  .wrap,.hero,.section-head,.work-grid,.work-more,.services,.manifesto,.contact,footer{padding-left:22px;padding-right:22px;}
  nav{padding:20px 22px;}
  .scrubber{padding:0 22px;}
  .page-head,.lede,.how-we-work,.team-grid,.cta-strip,.intro-split,.milestones,.bento-team,.service-overview,.article-list,.video-block,.scene,.section-label,.secondary-video,.credits,.filters,.full-work-grid{padding-left:22px;padding-right:22px;}
  .stat{padding:32px 22px;}
  .team-grid,.bento-team,.full-work-grid,.media-grid{grid-template-columns:1fr;}
  .bento-team .team-card.lead{grid-column:span 1;}
  .media-slot.wide{grid-column:span 1;}
  .service-detail,.cta-strip{padding-left:22px;padding-right:22px;}
}
@media(max-width:700px){.article-row{grid-template-columns:1fr;gap:8px;}}
@media(max-width:800px){
  .media-grid{grid-template-columns:repeat(2,1fr);} 
  .media-slot.wide{grid-column:span 2;}
  .stats{grid-template-columns:1fr;}
  .stat{border-right:none;border-bottom:1px solid var(--panel-line);} 
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important;}}