:root{
  --yellow:#FFCD00;
  --yellow-dark:#D4A800;
  --yellow-dim:rgba(245,200,0,0.12);
  --black:#0E0E0E;
  --black-mid:#1A1A1A;
  --black-panel:#222222;
  --grey:#6B6B6B;
  --grey-light:#AAAAAA;
  --white:#F8F8F8;
  --line:rgba(245,200,0,0.18);

  --display:'Barlow Condensed',sans-serif;
  --body:'Barlow',sans-serif;
  --mono:'Space Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--white);font-family:var(--body);overflow-x:hidden;line-height:1.5;}
::selection{background:var(--yellow);color:var(--black);}
a{color:inherit;text-decoration:none;}

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

/* ===== NAV ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 5vw;background:rgba(14,14,14,0.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.04);}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer;}
.logo-svg{height:22px;width:auto;color:var(--yellow);flex-shrink:0;display:block;}
.logo-mark{font-family:var(--display);font-weight:900;font-size:1.8rem;letter-spacing:0.02em;color:var(--yellow);font-style:italic;}
.logo-sub{font-family:var(--mono);font-size:0.55rem;letter-spacing:0.15em;color:var(--grey-light);text-transform:uppercase;line-height:1.2;padding-top:2px;}
nav{display:flex;align-items:center;gap:32px;}
nav a{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-light);transition:color 0.3s;position:relative;}
nav a::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--yellow);transition:width 0.3s;}
nav a:hover{color:var(--yellow);}
nav a:hover::after{width:100%;}
.nav-cta{background:var(--yellow);color:var(--black)!important;padding:10px 20px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;transition:background 0.3s!important;}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;z-index:110;position:relative;}
.nav-scrim{display:none;}
.nav-toggle span{display:block;height:2px;background:var(--yellow);border-radius:1px;transition:width 0.3s ease,transform 0.35s cubic-bezier(.4,0,.2,1),opacity 0.25s ease;}
.nav-toggle span:nth-child(1){width:100%;}
.nav-toggle span:nth-child(2){width:60%;}
.nav-toggle span:nth-child(3){width:100%;}
.nav-toggle:hover span:nth-child(2){width:100%;}
.nav-toggle::after{content:'';position:absolute;bottom:-3px;right:-3px;width:5px;height:5px;border-radius:50%;background:var(--yellow);opacity:0;transition:opacity 0.3s ease;}
.nav-toggle.open span{width:100%;}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg) skewX(-8deg);}
.nav-toggle.open span:nth-child(2){opacity:0;transform:translateX(10px);}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg) skewX(-8deg);}
.nav-toggle.open::after{opacity:1;animation:blink 1.4s ease-in-out infinite;}
.nav-cta:hover{background:var(--white)!important;}
.nav-cta::after{display:none!important;}

/* ===== HERO ===== */
.hero{min-height:100vh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:140px 6vw 80px;overflow:hidden;background:var(--black);}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:hidden;background:var(--black);}
.hero-bg-video video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;}
@media (max-width:700px){
  .hero-bg-video video{position:absolute;top:50%;left:0;width:100%;height:100%;transform:translateY(-50%);object-fit:cover;}
}
.hero-bg-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,14,14,0.55) 0%,rgba(14,14,14,0.6) 45%,rgba(14,14,14,0.88) 100%);}
.hero-content{position:relative;z-index:3;}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:var(--yellow-dim);border:1px solid var(--line);padding:8px 18px;margin-bottom:28px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.14em;color:var(--yellow);text-transform:uppercase;}
.hero-badge span{width:6px;height:6px;background:var(--yellow);border-radius:50%;animation:blink 1.4s ease-in-out infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.2;}}
h1{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(3.2rem,8.5vw,7.5rem);line-height:0.95;letter-spacing:-0.01em;color:var(--white);text-transform:uppercase;}
h1 .y{color:var(--yellow);}
.hc{display:inline-block;transform:translate(0,0) scale(1);transition:transform 0.45s cubic-bezier(.16,1,.3,1),text-shadow 0.45s ease;will-change:transform;}
.hero-desc{margin-top:28px;max-width:580px;font-size:1.05rem;color:var(--grey-light);font-weight:300;margin-left:auto;margin-right:auto;line-height:1.7;}
.hero-cta{margin-top:44px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;padding:16px 32px;display:inline-flex;align-items:center;gap:10px;transition:all 0.3s;cursor:pointer;border:none;}
.btn-yellow{background:var(--yellow);color:var(--black);}
.btn-yellow:hover{background:var(--white);transform:translateY(-2px);}
.btn-outline{border:1px solid rgba(255,255,255,0.2);color:var(--grey-light);}
.btn-outline:hover{border-color:var(--yellow);color:var(--yellow);}
.hero-scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--mono);font-size:0.64rem;letter-spacing:0.14em;color:var(--grey);text-transform:uppercase;}
.scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,var(--yellow),transparent);animation:scrollDrop 1.8s ease-in-out infinite;}
@keyframes scrollDrop{0%{transform:scaleY(0);transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ===== TICKER ===== */
.ticker{background:var(--yellow);padding:14px 0;overflow:hidden;border:none;}
.ticker-track{display:flex;gap:0;width:max-content;animation:tickerScroll 30s linear infinite;}
.ticker-item{display:flex;align-items:center;gap:32px;padding:0 32px;font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--black);white-space:nowrap;}
.ticker-dot{width:6px;height:6px;background:var(--black);border-radius:50%;opacity:0.4;flex-shrink:0;}
@keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== SECTIONS ===== */
section{position:relative;padding:120px 6vw;}
.section-label{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.2em;color:var(--yellow);text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:12px;}
.section-label::before{content:'';width:24px;height:1px;background:var(--yellow);}
h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.5vw,3.6rem);text-transform:uppercase;letter-spacing:-0.01em;line-height:1.1;}
.section-desc{margin-top:18px;color:var(--grey-light);font-weight:300;max-width:580px;font-size:1.05rem;line-height:1.7;}

/* ===== WHO WE ARE ===== */
.about{background:var(--black-mid);overflow:hidden;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-top:60px;}
.about-visual{position:relative;}
.about-box{background:var(--yellow);padding:50px 44px;position:relative;overflow:hidden;}
.about-box h3{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(2.2rem,4vw,3.4rem);text-transform:uppercase;color:var(--black);line-height:0.95;}
.about-box p{margin-top:18px;color:var(--black-mid);font-weight:400;font-size:1rem;line-height:1.7;}
.about-corner{position:absolute;bottom:0;right:0;width:120px;height:120px;background:var(--black);opacity:0.08;}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px;}
.astat{background:var(--black-panel);padding:30px 28px;}
.astat-num{font-family:var(--display);font-weight:900;font-size:2.4rem;color:var(--yellow);letter-spacing:-0.02em;}
.astat-label{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.1em;color:var(--grey-light);text-transform:uppercase;margin-top:6px;}
.about-text p{color:var(--grey-light);font-size:1.05rem;line-height:1.8;font-weight:300;}
.about-text p+p{margin-top:20px;}
.about-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;}
.pill{border:1px solid var(--line);padding:8px 16px;font-family:var(--mono);font-size:0.65rem;letter-spacing:0.08em;color:var(--yellow);text-transform:uppercase;}

/* ===== SERVICES ===== */
.services{background:var(--black);}
.services-tabs{display:flex;gap:0;margin-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.08);}
.stab{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:0.04em;text-transform:uppercase;padding:16px 32px;color:var(--grey);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.3s;margin-bottom:-1px;}
.stab.active,.stab:hover{color:var(--yellow);border-color:var(--yellow);}
.service-panel{display:none;}
.service-panel.active{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.service-card{background:var(--black-panel);padding:40px 34px;position:relative;overflow:hidden;transition:background 0.3s;cursor:default;group:true;}
.service-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform 0.4s;}
.service-card:hover{background:#2A2A2A;}
.service-card:hover::before{transform:scaleX(1);}
.sc-icon{width:42px;height:42px;margin-bottom:22px;}
.sc-icon svg{width:100%;height:100%;}
.sc-title{font-family:var(--display);font-weight:700;font-size:1.3rem;text-transform:uppercase;letter-spacing:0.02em;color:var(--white);}
.sc-desc{margin-top:10px;color:var(--grey-light);font-size:0.9rem;line-height:1.6;font-weight:300;}
.sc-num{position:absolute;top:34px;right:34px;font-family:var(--mono);font-size:0.68rem;color:var(--grey);opacity:0.5;}

/* ===== WORK ===== */
.work{background:var(--black-mid);overflow:hidden;}
.work-filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:48px;}
.wf-btn{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;padding:9px 18px;border:1px solid rgba(255,255,255,0.12);color:var(--grey-light);cursor:pointer;background:transparent;transition:all 0.3s;}
.wf-btn.active,.wf-btn:hover{border-color:var(--yellow);color:var(--yellow);background:var(--yellow-dim);}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.work-more-wrap{display:flex;justify-content:center;margin-top:48px;}
.work-card.wc-hidden{display:none!important;}
.work-card{display:block;position:relative;background:var(--black-panel);overflow:hidden;aspect-ratio:4/5;cursor:pointer;}
.work-card.show-all{display:block!important;}
.wc-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1);transition:transform 0.6s cubic-bezier(.2,.8,.2,1),filter 0.6s ease;}
.wc-bg::after{content:'';position:absolute;inset:0;background:rgba(14,14,14,0.45);}
.work-card:hover .wc-bg{filter:grayscale(0);}
.wc-num{position:absolute;top:20px;right:20px;font-family:var(--mono);font-size:0.68rem;color:var(--yellow);opacity:0.6;}
.wc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,14,0.96) 0%,rgba(14,14,14,0.2) 60%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:28px;opacity:0;transition:opacity 0.4s;}
.work-card:hover .wc-overlay{opacity:1;}
.work-card:hover .wc-bg{transform:scale(1.08);}
.wc-cat{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.12em;color:var(--yellow);text-transform:uppercase;}
.wc-title{font-family:var(--display);font-weight:700;font-size:1.25rem;text-transform:uppercase;margin-top:5px;color:var(--white);}
.wc-client{font-size:0.82rem;color:var(--grey-light);margin-top:3px;}
.wc-watch{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:0.65rem;letter-spacing:0.08em;color:var(--yellow);text-transform:uppercase;border:1px solid rgba(245,200,0,0.3);padding:7px 14px;transition:all 0.3s;}
.wc-watch:hover{background:var(--yellow);color:var(--black);}
.wc-watch svg{width:10px;height:10px;}

/* ===== CLIENTS ===== */
.clients{background:var(--black);padding:80px 6vw;}
.clients-label{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey);text-align:center;margin-bottom:44px;}
.clients-track-wrap{overflow:hidden;position:relative;}
.clients-track-wrap::before,.clients-track-wrap::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;}
.clients-track-wrap::before{left:0;background:linear-gradient(to right,var(--black),transparent);}
.clients-track-wrap::after{right:0;background:linear-gradient(to left,var(--black),transparent);}
.clients-track{display:flex;gap:60px;width:max-content;animation:clientsScroll 36s linear infinite;align-items:center;}
.clients-track:hover{animation-play-state:paused;}
.client-name{font-family:var(--display);font-weight:700;font-size:1.05rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--grey);white-space:nowrap;transition:color 0.3s;padding:10px 0;}
.client-name:hover{color:var(--yellow);}
@keyframes clientsScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ===== PROCESS ===== */
.process{background:var(--black-mid);overflow:hidden;}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:60px;}
.process-step{background:var(--black-panel);padding:44px 34px;position:relative;}
.ps-num{font-family:var(--display);font-weight:900;font-size:4rem;color:var(--yellow);opacity:0.15;line-height:1;margin-bottom:20px;}
.ps-title{font-family:var(--display);font-weight:700;font-size:1.3rem;text-transform:uppercase;color:var(--white);}
.ps-desc{margin-top:10px;color:var(--grey-light);font-size:0.9rem;line-height:1.6;font-weight:300;}
.ps-line{position:absolute;top:50px;right:0;width:1px;height:40px;background:var(--yellow);opacity:0.3;}
.process-step:last-child .ps-line{display:none;}

/* ===== CALL OUT ===== */
.callout{position:relative;background:var(--yellow);padding:100px 6vw;text-align:center;overflow:hidden;}
.callout h2{color:var(--black);font-style:italic;}
.callout p{color:var(--black-mid);max-width:600px;margin:18px auto 0;font-size:1.05rem;line-height:1.7;}
.callout .hero-cta{margin-top:40px;}
.btn-black{background:var(--black);color:var(--yellow);}
.btn-black:hover{background:var(--black-mid);transform:translateY(-2px);}
.btn-black-outline{border:2px solid var(--black);color:var(--black);}
.btn-black-outline:hover{background:var(--black);color:var(--yellow);}

/* ===== CONTACT ===== */
.contact{background:var(--black);}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;margin-top:60px;}
.contact-info h3{font-family:var(--display);font-weight:700;font-size:1.5rem;text-transform:uppercase;color:var(--yellow);margin-bottom:12px;}
.contact-info p{color:var(--grey-light);font-weight:300;line-height:1.7;margin-bottom:28px;}
.contact-detail{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;}
.cd-icon{width:32px;height:32px;background:var(--yellow-dim);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cd-icon svg{width:14px;height:14px;fill:var(--yellow);}
.cd-text{font-family:var(--mono);font-size:0.75rem;color:var(--grey-light);line-height:1.6;}
.form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.form-field label{font-family:var(--mono);font-size:0.65rem;letter-spacing:0.12em;color:var(--yellow);text-transform:uppercase;}
.form-field input,.form-field textarea,.form-field select{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.12);color:var(--white);font-family:var(--body);font-size:0.95rem;padding:12px 2px;transition:border-color 0.3s;}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--yellow);}
.form-field select option{background:var(--black-panel);}
.form-field textarea{resize:vertical;min-height:90px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* ===== FOOTER ===== */
footer{background:var(--black-mid);padding:60px 6vw 40px;border-top:1px solid rgba(255,255,255,0.05);}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;margin-bottom:50px;}
.footer-brand .logo-mark{font-size:1.8rem;}
.footer-brand .logo-svg{height:28px;}
.footer-brand p{margin-top:16px;color:var(--grey);font-size:0.88rem;line-height:1.7;max-width:280px;}
.footer-col h4{font-family:var(--display);font-weight:700;font-size:0.95rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--white);margin-bottom:18px;}
.footer-col ul{list-style:none;}
.footer-col li{margin-bottom:10px;}
.footer-col a{font-size:0.85rem;color:var(--grey);transition:color 0.3s;}
.footer-col a:hover{color:var(--yellow);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px;border-top:1px solid rgba(255,255,255,0.05);}
.footer-copy{font-family:var(--mono);font-size:0.65rem;color:var(--grey);}

/* ===== REVEAL ===== */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 0.65s ease,transform 0.65s ease;}
[data-reveal].in{opacity:1;transform:translateY(0);}

/* ===== TEXT LINE-MASK REVEAL ===== */
.line-mask{display:block;overflow:hidden;padding-bottom:0.08em;margin-bottom:-0.08em;}
.line-inner{display:block;transform:translateY(112%);opacity:0;transition:transform 0.95s cubic-bezier(.16,1,.3,1),opacity 0.7s ease;}
h2[data-split].in .line-mask:nth-child(1) .line-inner{transition-delay:0s;}
h2[data-split].in .line-mask:nth-child(2) .line-inner{transition-delay:0.12s;}
h2[data-split].in .line-mask:nth-child(3) .line-inner{transition-delay:0.24s;}
h2[data-split].in .line-inner{transform:translateY(0);opacity:1;}
h1 .line-mask:nth-child(1) .line-inner{transition-delay:0.15s;}
h1 .line-mask:nth-child(2) .line-inner{transition-delay:0.30s;}
h1 .line-mask:nth-child(3) .line-inner{transition-delay:0.45s;}
body.loaded h1 .line-inner{transform:translateY(0);opacity:1;}

/* ===== HERO LOAD SEQUENCE ===== */
.hero-badge{opacity:0;transform:translateY(-12px);transition:opacity 0.6s ease,transform 0.6s ease;}
.hero-desc{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease,transform 0.7s ease;}
.hero-cta{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease,transform 0.7s ease;}
.hero-scroll{opacity:0;transition:opacity 0.8s ease;}
body.loaded .hero-badge{opacity:1;transform:translateY(0);}
body.loaded .hero-desc{opacity:1;transform:translateY(0);transition-delay:0.6s;}
body.loaded .hero-cta{opacity:1;transform:translateY(0);transition-delay:0.75s;}
body.loaded .hero-scroll{opacity:1;transition-delay:1.2s;}

/* ===== PARALLAX ACCENTS ===== */
.parallax-x{position:absolute;width:300px;height:300px;opacity:0.05;color:var(--yellow);pointer-events:none;z-index:-1;will-change:transform;}
.parallax-x svg{width:100%;height:100%;}
.about .parallax-x{top:-40px;right:-40px;}
.work .parallax-x{bottom:-60px;left:-60px;width:380px;height:380px;}
.callout .parallax-x{top:-80px;right:6%;color:var(--black);opacity:0.06;}
.process .parallax-x{bottom:-100px;right:-20px;}

@media (prefers-reduced-motion: reduce){
  .line-inner{transition:none!important;transform:none!important;opacity:1!important;}
  .hero-badge,.hero-desc,.hero-cta,.hero-scroll{transition:none!important;opacity:1!important;transform:none!important;}
  [data-parallax]{transform:none!important;}
}

/* ===== RESPONSIVE ===== */
@media(max-width:1100px){
  .about-grid{grid-template-columns:1fr;}
  .service-panel.active{grid-template-columns:repeat(2,1fr);}
  .work-grid{grid-template-columns:repeat(2,1fr);}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .footer-top{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  section{padding:64px 6vw;}
  .callout{padding:64px 6vw;}
  header{padding:16px 5vw;}
  .nav-toggle{display:flex;}
  nav{position:fixed;top:0;right:0;height:100vh;width:min(78vw,320px);background:rgba(14,14,14,0.98);backdrop-filter:blur(12px);flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;padding:32px 8vw;transform:translateX(100%);transition:transform 0.35s ease;box-shadow:-8px 0 30px rgba(0,0,0,0.4);}
  nav.open{transform:translateX(0);}
  nav a{font-size:0.95rem;letter-spacing:0.04em;}
  nav a.nav-cta{margin-top:8px;padding:12px 22px;}
  .nav-scrim{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;}
  .nav-scrim.open{display:block;}

  .service-panel.active{grid-template-columns:repeat(2,1fr);gap:1px;}
  .service-card{padding:22px 16px;}
  .sc-icon{width:30px;height:30px;margin-bottom:12px;}
  .sc-title{font-size:1rem;}
  .sc-desc{margin-top:6px;font-size:0.78rem;line-height:1.45;}
  .sc-num{top:16px;right:16px;font-size:0.6rem;}
  .services-tabs{margin-bottom:32px;}

  .work-grid{grid-template-columns:repeat(2,1fr);gap:1px;}
  .wc-overlay{opacity:1;background:linear-gradient(to top,rgba(14,14,14,0.96) 0%,rgba(14,14,14,0.35) 70%,rgba(14,14,14,0.05) 100%);padding:14px;}
  .wc-cat{font-size:0.52rem;}
  .wc-title{font-size:0.92rem;margin-top:3px;}
  .work-card:hover .wc-bg{transform:none;filter:grayscale(1);}
  .process-grid{grid-template-columns:repeat(2,1fr);margin-top:32px;}
  .process-step{padding:22px 18px;}
  .ps-num{font-size:2.2rem;margin-bottom:8px;}
  .ps-title{font-size:1rem;}
  .ps-desc{margin-top:5px;font-size:0.78rem;line-height:1.45;}
  .ps-line{display:none;}
  .form-row{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .services-tabs{overflow-x:auto;}
  .stab{white-space:nowrap;padding:14px 20px;font-size:1rem;}
}
@media(max-width:420px){
  .service-panel.active{grid-template-columns:1fr;}
}

/* ===== PROJECT DETAIL PAGE ===== */
.project-detail{padding:150px 6vw 100px;background:var(--black);min-height:100vh;}
.project-container{max-width:840px;margin:0 auto;}
.project-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey-light);margin-bottom:36px;transition:color 0.3s;}
.project-back:hover{color:var(--yellow);}
.project-cat{font-family:var(--mono);font-size:0.7rem;letter-spacing:0.2em;color:var(--yellow);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:12px;}
.project-cat::before{content:'';width:24px;height:1px;background:var(--yellow);}
.project-title{font-family:var(--display);font-weight:900;font-style:italic;font-size:clamp(2.1rem,5vw,3.8rem);text-transform:uppercase;line-height:1.03;color:var(--white);margin-bottom:10px;}
.project-client{font-family:var(--mono);font-size:0.75rem;color:var(--grey-light);margin-bottom:36px;}
.project-video{width:100%;background:#000;position:relative;margin-bottom:40px;}
.project-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;}
.project-video.portrait{max-width:380px;margin-left:auto;margin-right:auto;}
.project-desc{color:var(--grey-light);font-size:1.05rem;line-height:1.85;font-weight:300;max-width:720px;}
.project-nav-pair{display:flex;justify-content:space-between;gap:20px;margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.08);flex-wrap:wrap;}
.project-nav-link{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--grey-light);transition:color 0.3s;max-width:45%;}
.project-nav-link:hover{color:var(--yellow);}
.project-nav-link.next{text-align:right;margin-left:auto;}
.project-nav-link .dir{display:block;color:var(--yellow);font-size:0.62rem;margin-bottom:4px;opacity:0.8;}
@media(max-width:700px){
  .project-detail{padding:130px 6vw 70px;}
  .project-nav-link{max-width:100%;}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}