/* ============================================================
   THE BLANK STUDIO — MAIN STYLESHEET
   ============================================================ */

:root{
  --black:#000000;
  --card:#0d0d0d;
  --border:#2a2a2a;
  --muted:#8f8f8f;
  --white:#ffffff;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; background:var(--black); }

body{
  background:var(--black);
  color:var(--white);
  font-family:'Inter', sans-serif;
  font-weight:400;
  line-height:1.5;
  overflow-x:hidden;
  cursor:default;
}

a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
input, textarea{ font-family:inherit; }

h1,h2,h3,h4,p{ font-family:'Inter', sans-serif; }
.hx{ font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; letter-spacing:-0.01em; }

.uc{ text-transform:uppercase; }
.muted{ color:var(--muted); }

.wrap{ max-width:1440px; margin:0 auto; }
.px{ padding-left:64px; padding-right:64px; }

@media (max-width:900px){
  .px{ padding-left:24px; padding-right:24px; }
}

/* ---------- Page load / reveal utilities ---------- */
.js-ready .reveal{ opacity:0; transform:translateY(28px); }
.js-ready .reveal{ transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* stagger children */
[data-stagger] > * { transition-delay:calc(var(--i,0) * 70ms); }


/* ---------- Custom cursor dot ---------- */
#cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%;
  background:#fff; pointer-events:none; z-index:9998; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
  display:none;
}
@media (min-width:901px){ #cursor-dot{ display:block; } }
#cursor-dot.big{ width:44px; height:44px; }

/* ---------- Status pulse dot ---------- */
.pulse{
  width:8px; height:8px; border-radius:50%; background:#3ecf5e; position:relative; flex-shrink:0;
}
.pulse::after{
  content:''; position:absolute; inset:-4px; border-radius:50%; background:#3ecf5e;
  opacity:.55; animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.5); opacity:.6; } 100%{ transform:scale(2.1); opacity:0; } }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 64px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:rgba(0,0,0,.86); backdrop-filter:blur(10px);
  z-index:500;
}
.nav .logo{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.nav .logo svg{ width:100%; height:100%; }
.nav-right{ display:flex; align-items:center; gap:48px; }
.nav-links{ display:flex; gap:32px; font-size:13px; text-transform:uppercase; }
.nav-links a{ position:relative; padding-bottom:2px; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:#fff;
  transition:width .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ font-weight:700; }
.social-links{ display:flex; gap:16px; font-size:13px; color:var(--muted); }
.social-links a:hover{ color:#fff; }
.status{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
.status:hover{ color:#fff; }

.nav-toggle{
  display:none; width:40px; height:40px; flex-direction:column; justify-content:center;
  align-items:flex-end; gap:5px; margin-left:4px;
}
.nav-toggle span{
  display:block; height:1.5px; background:#fff; width:22px;
  transition:transform .35s var(--ease), opacity .2s var(--ease), width .35s var(--ease);
}
.nav-toggle span:nth-child(2){ width:16px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ width:22px; transform:translateY(-6.5px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:480; background:var(--black);
  padding:104px 24px 40px; display:flex; flex-direction:column; gap:40px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mobile-menu nav a{
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase;
  font-size:32px; letter-spacing:-0.01em; padding:18px 0;
  border-bottom:1px solid var(--border);
}
.mobile-menu nav a:first-child{ border-top:1px solid var(--border); }
.mobile-menu .mm-social{
  display:flex; flex-wrap:wrap; gap:24px; font-size:13px;
  text-transform:uppercase; color:var(--muted);
}
.mobile-menu .mm-social a:hover{ color:#fff; }

@media (max-width:900px){
  .nav{ padding:20px 24px; }
  .nav-right{ gap:16px; }
  .nav-links{ display:none; }
  .social-links{ display:none; }
  .nav-toggle{ display:flex; }
  .status{ font-size:11px; }
}
@media (min-width:901px){
  .mobile-menu{ display:none; }
}

/* ============================================================
   HERO (home / about / contact)
   ============================================================ */
.hero{ padding:120px 64px 80px; display:flex; flex-direction:column; gap:80px; }

/* ---------- Home hero interactive background (home page only) ---------- */
#page-home .hero{ position:relative; overflow:hidden; isolation:isolate; }
#page-home .hero-canvas{
  position:absolute; inset:0; z-index:-1; width:100%; height:100%;
  display:block; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  #page-home .hero-canvas{ display:none; }
}
.hero-eyebrow{ font-size:13px; color:var(--muted); text-transform:uppercase; margin-bottom:8px; }
.hero-title{
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase;
  line-height:.92; font-size:clamp(40px, 8vw, 128px);
}
.hero-footer{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.hero-sub{ color:var(--muted); font-size:18px; line-height:1.6; max-width:640px; }
.scroll-indicator{ font-size:13px; text-transform:uppercase; white-space:nowrap; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

.divider{ height:1px; background:var(--border); width:100%; border:0; }

@media (max-width:900px){
  .hero{ padding:64px 24px 40px; gap:40px; }
  .hero-footer{ align-items:flex-start; flex-direction:column; gap:16px; }
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{ display:flex; gap:64px; padding:120px 64px; }
.manifesto .col-left{ width:240px; flex-shrink:0; }
.manifesto .col-right{ flex:1; display:flex; flex-direction:column; gap:32px; }
.manifesto h2{
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase;
  font-size:clamp(28px, 4.5vw, 64px); line-height:1.1;
}
.manifesto p{ color:var(--muted); font-size:18px; line-height:1.6; max-width:640px; }

@media (max-width:900px){
  .manifesto{ flex-direction:column; gap:24px; padding:64px 24px; }
}

/* ============================================================
   WORK GRID
   ============================================================ */
.work-section{ padding:120px 64px; display:flex; flex-direction:column; gap:64px; }
.work-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; text-transform:uppercase; }
.work-header h2{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:clamp(24px,4vw,40px); }
.work-eyebrow{ color:var(--muted); font-size:13px; margin-bottom:12px; }
.work-index{ color:var(--muted); font-size:13px; }
.work-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:27px; }
.project-card{ display:flex; flex-direction:column; gap:16px; }
.project-thumb{
  aspect-ratio:240/350; background:#000; border:1px solid var(--border); overflow:hidden; position:relative;
}
.project-thumb img{ width:100%; height:100%; object-fit:cover; opacity:.8; transition:transform .6s var(--ease), opacity .4s; }
.project-card:hover .project-thumb img{ transform:scale(1.06); opacity:1; }
.project-info{ display:flex; flex-direction:column; gap:8px; }
.project-title-row{ display:flex; justify-content:space-between; align-items:baseline; }
.project-title{ font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; font-size:20px; }
.project-index{ color:var(--muted); font-size:12px; }
.project-tags{ color:var(--muted); font-size:13px; }

@media (max-width:1100px){
  .work-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:900px){
  .work-section{ padding:64px 24px; }
}

/* ============================================================
   ABOUT TEASER / STORY
   ============================================================ */
.about-block{ display:flex; align-items:center; gap:80px; padding:120px 64px; }
.about-photo{
  width:480px; flex-shrink:0; aspect-ratio:480/356; background:var(--card);
  border:1px solid var(--border); overflow:hidden;
}
.about-photo img{ width:100%; height:100%; object-fit:cover; }
.about-content{ flex:1; display:flex; flex-direction:column; gap:32px; }
.about-content h2{
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase;
  font-size:clamp(28px,4vw,48px); line-height:1.1;
}
.about-content p{ color:var(--muted); font-size:16px; line-height:1.6; }
.about-content .more-link{ font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px; width:fit-content; }
.about-content .more-link:hover{ opacity:.7; }

@media (max-width:900px){
  .about-block{ flex-direction:column; padding:64px 24px; gap:32px; }
  .about-photo{ width:100%; }
}

/* ============================================================
   STATS ROW
   ============================================================ */
.stats-row{ display:flex; }
.stat-cell{ flex:1; padding:40px; border-left:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.stat-cell:first-child{ border-left:0; }
.stat-num{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:clamp(32px,5vw,56px); }
.stat-label{ color:var(--muted); font-size:12px; text-transform:uppercase; }

@media (max-width:700px){
  .stats-row{ flex-wrap:wrap; }
  .stat-cell{ flex:1 1 50%; border-left:0; border-top:1px solid var(--border); padding:24px; }
}

/* ============================================================
   SERVICES ACCORDION
   ============================================================ */
.services-section{ padding:120px 64px; display:flex; flex-direction:column; gap:56px; }
.section-header{ display:flex; flex-direction:column; gap:12px; text-transform:uppercase; }
.section-header .eyebrow{ color:var(--muted); font-size:13px; }
.section-header h2{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:clamp(24px,4vw,40px); }

.accordion{ display:flex; flex-direction:column; }
.acc-row{ border-bottom:1px solid var(--border); }
.acc-row:first-child{ border-top:1px solid var(--border); }
.acc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:32px 0; background:none; }
.acc-left{ display:flex; align-items:center; gap:40px; }
.acc-num{ color:var(--muted); font-size:14px; }
.acc-title{ font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; font-size:clamp(20px,3vw,32px); text-align:left; }
.acc-plus{ position:relative; width:24px; height:24px; flex-shrink:0; }
.acc-plus::before, .acc-plus::after{
  content:''; position:absolute; background:#fff; top:50%; left:50%; transform:translate(-50%,-50%);
}
.acc-plus::before{ width:16px; height:1.5px; }
.acc-plus::after{ width:1.5px; height:16px; transition:transform .35s var(--ease); }
.acc-row.open .acc-plus::after{ transform:translate(-50%,-50%) rotate(90deg) scale(0); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.acc-body p{ color:var(--muted); font-size:15px; line-height:1.7; padding:0 0 32px 64px; max-width:640px; }
.acc-row:hover .acc-title{ opacity:.7; }

@media (max-width:900px){
  .services-section{ padding:64px 24px; }
  .acc-left{ gap:20px; }
  .acc-body p{ padding-left:0; }
}

/* ============================================================
   PROCESS GRID
   ============================================================ */
.process-section{ padding:120px 64px; display:flex; flex-direction:column; gap:56px; }
.process-grid{ display:flex; }
.process-step{ flex:1; border:1px solid var(--border); padding:32px; display:flex; flex-direction:column; gap:24px; margin-left:-1px; }
.step-num{ font-family:'Space Grotesk', sans-serif; color:var(--muted); font-size:14px; }
.step-title{ font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; font-size:20px; }
.step-desc{ color:var(--muted); font-size:14px; line-height:1.5; }

@media (max-width:900px){
  .process-section{ padding:64px 24px; }
  .process-grid{ flex-direction:column; }
  .process-step{ margin-left:0; margin-top:-1px; }
}

/* ============================================================
   CTA
   ============================================================ */
.cta-section{ padding:96px 64px; display:flex; flex-direction:column; gap:56px; }
.cta-header{ display:flex; flex-direction:column; gap:16px; text-transform:uppercase; }
.cta-header .eyebrow{ color:var(--muted); font-size:13px; }
.cta-header h2{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:clamp(32px,7vw,72px); line-height:1.1; }
.cta-footer{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px; border:1px solid #fff; padding:16px 32px;
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; font-size:14px;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.btn:hover{ background:#fff; color:#000; }
.btn.solid{ background:#fff; color:#000; }
.btn.solid:hover{ background:transparent; color:#fff; }
.cta-email{ color:var(--muted); font-size:18px; text-decoration:underline; text-underline-offset:3px; }
.cta-email:hover{ color:#fff; }
.cta-link{ color:#fff; font-size:18px; text-decoration:underline; text-underline-offset:3px; }

@media (max-width:900px){
  .cta-section{ padding:64px 24px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:80px 64px 40px; display:flex; flex-direction:column; gap:80px; }
.footer-main{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px; }
.footer-brand{ display:flex; flex-direction:column; gap:12px; }
.footer-brand .logo{ width:40px; height:40px; }
.footer-brand p{ color:var(--muted); font-size:14px; }
.footer-menus{ display:flex; gap:96px; flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:16px; }
.footer-col .col-head{ color:var(--muted); font-size:12px; text-transform:uppercase; }
.footer-col a{ font-size:14px; }
.footer-col a:hover{ color:var(--muted); }
.footer-col a.underline{ text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:32px; border-top:1px solid var(--border); color:var(--muted); font-size:13px; flex-wrap:wrap; gap:12px; }
.back-to-top{ text-transform:uppercase; cursor:pointer; }
.back-to-top:hover{ color:#fff; }

@media (max-width:900px){
  .footer{ padding:64px 24px 32px; gap:40px; }
}

/* ============================================================
   PROJECT PAGE
   ============================================================ */
.back-link-section{ padding:48px 64px 0; }
.back-link{ font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; font-size:13px; }
.back-link:hover{ text-decoration:underline; }

.project-hero{ padding:40px 64px 80px; display:flex; flex-direction:column; gap:80px; }
.project-hero .eyebrow{ font-family:'Space Grotesk', sans-serif; color:var(--muted); font-size:13px; text-transform:uppercase; }
.project-hero h1{
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; line-height:.92;
  font-size:clamp(40px,9vw,96px);
}
.project-meta{ display:flex; gap:32px; flex-wrap:wrap; }
.meta-block{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:8px; }
.meta-block .label{ font-family:'Space Grotesk', sans-serif; color:var(--muted); font-size:11px; text-transform:uppercase; }
.meta-block .value{ font-size:15px; }

.cover-section{ padding:80px 64px; }
.cover-image{ aspect-ratio:16/9; width:100%; background:var(--card); border:1px solid var(--border); overflow:hidden; }
.cover-image img{ width:100%; height:100%; object-fit:cover; opacity:.92; }

.overview-challenge{ display:flex; gap:80px; padding:120px 64px; flex-wrap:wrap; }
.oc-col{ flex:1; min-width:280px; display:flex; flex-direction:column; gap:24px; }
.oc-col h3{ font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; font-size:28px; }
.oc-col p{ color:var(--muted); font-size:18px; line-height:1.6; }

.creative-solution{ padding:120px 64px; display:flex; flex-direction:column; gap:32px; }
.creative-solution .eyebrow{ color:var(--muted); font-size:13px; text-transform:uppercase; }
.creative-solution h3{
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; line-height:1.15;
  font-size:clamp(28px,5vw,48px); max-width:880px;
}
.creative-solution p{ color:var(--muted); font-size:20px; line-height:1.6; max-width:880px; }
.creative-solution p + p{ margin-top:0; }

.services-provided{ padding:80px 64px; display:flex; flex-direction:column; gap:24px; }
.services-provided .eyebrow{ color:var(--muted); font-size:13px; text-transform:uppercase; }
.tags-row{ display:flex; flex-wrap:wrap; gap:12px; }
.tag{ border:1px solid var(--border); border-radius:4px; padding:12px 24px; font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; font-size:14px; }

.gallery-row{ display:flex; gap:24px; padding:0 64px 24px; }
.gallery-row.single{ padding-bottom:20px; }
.gallery-card{ flex:1; background:var(--card); border:1px solid var(--border); overflow:hidden; aspect-ratio:644/527; }
.gallery-row.single .gallery-card{ aspect-ratio:1312/650; }
/* Row that holds a single half-width card (keeps the grid rhythm
   instead of leaving an empty black slot). */
.gallery-row.solo{ justify-content:center; }
.gallery-row.solo .gallery-card{ flex:0 0 calc(50% - 12px); }
.gallery-card img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.gallery-first{ padding-top:120px; }
.gallery-last{ padding-bottom:120px; }

.next-project{ display:flex; align-items:center; justify-content:space-between; padding:120px 64px; text-transform:uppercase; flex-wrap:wrap; gap:24px; }
.next-project .all-work{ color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; }
.next-project .all-work:hover{ color:#fff; }
.next-block{ display:flex; flex-direction:column; align-items:flex-end; gap:12px; text-align:right; }
.next-block .label{ color:var(--muted); font-size:13px; }
.next-block .title{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:clamp(24px,5vw,48px); }
.next-block .title:hover{ opacity:.7; }

@media (max-width:900px){
  .back-link-section, .project-hero, .cover-section, .overview-challenge, .creative-solution,
  .services-provided, .next-project{ padding-left:24px; padding-right:24px; }
  .gallery-row{ flex-direction:column; padding-left:24px; padding-right:24px; }
  .gallery-row.solo .gallery-card{ flex:1 1 auto; width:100%; }
  .overview-challenge{ padding-top:64px; padding-bottom:64px; gap:32px; }
  .creative-solution{ padding-top:64px; padding-bottom:64px; }
  .next-project{ flex-direction:column; align-items:flex-start; padding:64px 24px; }
  .next-block{ align-items:flex-start; text-align:left; }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-grid{ display:flex; gap:80px; padding:120px 64px; flex-wrap:wrap; }
.contact-info{ flex:1; min-width:280px; display:flex; flex-direction:column; gap:64px; }
.info-block{ display:flex; flex-direction:column; gap:20px; }
.info-block .label{ font-family:'Space Grotesk', sans-serif; font-weight:500; color:var(--muted); font-size:13px; text-transform:uppercase; }
.info-block .big-link{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:clamp(22px,3vw,32px); text-decoration:underline; text-underline-offset:4px; width:fit-content; }
.info-block .big-link:hover{ color:var(--muted); }
.info-block .phone{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:clamp(22px,3vw,32px); }
.info-block address{ font-style:normal; color:var(--muted); font-size:16px; line-height:1.6; }
.hour-row{ display:flex; justify-content:space-between; font-size:15px; gap:16px; }
.hour-row .day{ color:#fff; }
.hour-row .time{ color:var(--muted); }

.contact-form-col{ flex:1; min-width:300px; background:var(--card); border:1px solid var(--border); padding:48px; display:flex; flex-direction:column; gap:40px; }
.form-head h2{ font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase; font-size:24px; margin-bottom:8px; }
.form-head p{ color:var(--muted); font-size:14px; line-height:1.5; }
.fields{ display:flex; flex-direction:column; gap:24px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:'Space Grotesk', sans-serif; font-weight:500; color:var(--muted); font-size:12px; text-transform:uppercase; }
.field input, .field textarea{
  background:var(--card); border:1px solid var(--border); color:#fff; padding:16px; font-size:14px;
  transition:border-color .25s var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus, .field textarea:focus{ outline:none; border-color:#fff; }
.field input::placeholder, .field textarea::placeholder{ color:var(--muted); }
.submit-btn{
  background:#fff; color:#000; border:1px solid #fff; padding:16px 32px; text-align:center;
  font-family:'Space Grotesk', sans-serif; font-weight:700; text-transform:uppercase; font-size:14px;
  transition:background .3s var(--ease), color .3s var(--ease); display:flex; align-items:center; justify-content:center; gap:10px;
}
.submit-btn:hover{ background:transparent; color:#fff; }
.submit-btn:disabled{ opacity:.6; cursor:not-allowed; }
.form-status{ font-size:14px; padding-top:4px; min-height:20px; }
.form-status.ok{ color:#3ecf5e; }
.form-status.err{ color:#ff6b6b; }

@media (max-width:900px){
  .contact-grid{ padding:64px 24px; gap:40px; }
  .contact-form-col{ padding:28px; }
}

/* honeypot */
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

/* ============================================================
   MOTION SYSTEM
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ---------- Reveal variants ---------- */
/* Mask reveal: the heading itself is never clipped (clipping it to zero area
   would stop IntersectionObserver from ever firing) — an inner span slides up
   behind the heading's own overflow:hidden instead. */
.js-ready .reveal-clip{ overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.js-ready .reveal.reveal-clip{ transform:none; }
.js-ready .reveal-clip > .rc-inner{
  display:block; transform:translateY(108%);
  transition:transform 1.05s var(--ease);
}
.reveal-clip.in > .rc-inner{ transform:translateY(0); }

/* Media that scales back into place as it enters */
.js-ready .reveal-media{ overflow:hidden; }
.js-ready .reveal-media img{ transform:scale(1.14); transition:transform 1.4s var(--ease); }
.reveal-media.in img{ transform:scale(1); }

/* Thin rule that draws itself in */
.js-ready .divider{ transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease); }
.divider.in{ transform:scaleX(1); }

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:10000; background:var(--black);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px 64px; transition:opacity .6s var(--ease), visibility .6s;
}
#preloader.done{ opacity:0; visibility:hidden; }
.pl-top{ display:flex; align-items:center; gap:14px; }
.pl-top img{ width:34px; height:34px; }
.pl-top span{
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase;
  font-size:12px; letter-spacing:.18em; color:var(--muted);
}
.pl-mid{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.pl-word{
  font-family:'Space Grotesk', sans-serif; font-weight:500; text-transform:uppercase;
  font-size:clamp(32px,7vw,84px); line-height:.95; letter-spacing:-0.02em;
  overflow:hidden;
}
.pl-word span{ display:block; transform:translateY(105%); animation:plRise .9s var(--ease) forwards; }
.pl-word span:nth-child(2){ animation-delay:.09s; }
@keyframes plRise{ to{ transform:translateY(0); } }
.pl-count{
  font-family:'Space Grotesk', sans-serif; font-weight:500;
  font-size:clamp(40px,8vw,96px); line-height:1; font-variant-numeric:tabular-nums;
}
.pl-bar{ height:1px; width:100%; background:var(--border); position:relative; overflow:hidden; }
.pl-bar i{ position:absolute; inset:0 100% 0 0; background:#fff; transition:right .25s linear; }
@media (max-width:900px){ #preloader{ padding:28px 24px; } }

/* ---------- Page transition curtain ---------- */
#page-transition{
  position:fixed; inset:0; z-index:9000; display:flex; pointer-events:none;
  background:none;
}
#page-transition.busy{ pointer-events:auto; }
#page-transition .pt-panel{
  flex:1; background:#000; transform:scaleY(0); transform-origin:bottom;
  transition:transform .42s var(--ease); transition-delay:calc(var(--p,0) * 45ms);
}
#page-transition.cover .pt-panel{ transform:scaleY(1); transform-origin:bottom; }
#page-transition.uncover .pt-panel{
  transform:scaleY(0); transform-origin:top;
  transition-delay:calc((4 - var(--p,0)) * 45ms);
}
#page-transition .pt-mark{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s var(--ease);
}
#page-transition .pt-mark img{ width:44px; height:44px; }
#page-transition.cover .pt-mark{ opacity:1; transition-delay:.28s; }

/* ============================================================
   OUR CLIENTS — marquee
   ============================================================ */
.clients-section{ padding:110px 0 96px; display:flex; flex-direction:column; gap:48px; overflow:hidden; }
.clients-head{ padding:0 64px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; text-transform:uppercase; }
.clients-head h2{ font-family:'Space Grotesk', sans-serif; font-weight:500; font-size:clamp(24px,4vw,40px); }
.clients-eyebrow{ color:var(--muted); font-size:13px; margin-bottom:12px; }
.clients-note{ color:var(--muted); font-size:13px; }

.marquee{ position:relative; display:flex; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.marquee-track{ display:flex; flex-shrink:0; align-items:center; gap:88px; padding-right:88px; animation:marquee 38s linear infinite; }
.marquee.rev .marquee-track{ animation-direction:reverse; animation-duration:46s; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

.clients-rows{ display:flex; flex-direction:column; gap:34px; }
.client-logo{
  flex-shrink:0; display:flex; align-items:center; gap:13px; color:var(--muted);
  opacity:.7; transition:opacity .4s var(--ease), color .4s var(--ease);
  white-space:nowrap;
}
.client-logo .cl-mark{ width:26px; height:26px; flex-shrink:0; display:block; }
.client-logo .cl-name{
  font-family:'Space Grotesk', sans-serif; font-size:19px; line-height:1;
  text-transform:uppercase;
}
.marquee:hover .client-logo{ opacity:.4; }
.client-logo:hover{ opacity:1 !important; color:#fff; }
@media (max-width:900px){
  .clients-section{ padding:64px 0 56px; gap:32px; }
  .clients-head{ padding:0 24px; }
  .clients-rows{ gap:24px; }
  .marquee-track{ gap:54px; padding-right:54px; }
  .client-logo .cl-name{ font-size:16px; }
  .client-logo .cl-mark{ width:22px; height:22px; }
}

/* ============================================================
   CONTACT — file upload
   ============================================================ */
.field .opt{ color:var(--muted); text-transform:none; letter-spacing:0; font-weight:400; }
.file-drop{ position:relative; border:1px dashed var(--border); background:rgba(255,255,255,.02); transition:border-color .3s var(--ease), background .3s var(--ease); }
.file-drop:hover, .file-drop.drag{ border-color:#fff; background:rgba(255,255,255,.05); }
.file-drop input[type=file]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.fd-inner{ padding:26px 20px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; pointer-events:none; }
.fd-icon{ font-size:18px; line-height:1; margin-bottom:2px; }
.fd-text{ font-size:14px; }
.fd-text u{ text-underline-offset:3px; }
.fd-hint{ font-size:12px; color:var(--muted); }
.file-list{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.file-list li{ display:flex; align-items:center; gap:12px; font-size:13px; border:1px solid var(--border); padding:10px 12px; }
.file-list .fn{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-list .fs{ color:var(--muted); font-size:12px; white-space:nowrap; }
.file-list button{ color:var(--muted); font-size:16px; line-height:1; padding:0 2px; }
.file-list button:hover{ color:#fff; }
.file-total{ font-size:12px; color:var(--muted); margin-top:10px; }
.file-total.over{ color:#ff6b6b; }

.form-sent{
  border:1px solid var(--border); background:rgba(255,255,255,.04);
  padding:20px; font-size:14px; line-height:1.6; margin-bottom:8px;
}

.info-block .phone-list{ display:flex; flex-direction:column; gap:6px; }
.info-block .phone a{ text-decoration:none; }
.info-block .phone a:hover{ color:var(--muted); }



/* SEO/accessibility safeguards — no visual redesign */
.skip-link{position:fixed;left:16px;top:16px;z-index:10000;padding:10px 14px;background:#fff;color:#000;transform:translateY(-180%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal,.js-ready .reveal{opacity:1!important;transform:none!important}}

/* Blog — extends the existing studio system */
.breadcrumbs{padding:32px 64px 0;display:flex;gap:10px;color:var(--muted);font-size:12px;text-transform:uppercase}.breadcrumbs a:hover{color:#fff}.blog-hero{padding-top:80px}.blog-list{padding-top:40px;padding-bottom:120px}.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 24px;margin-top:48px}.blog-card a{display:block}.blog-card-media{aspect-ratio:3/2;overflow:hidden;border:1px solid var(--border);margin-bottom:20px}.blog-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),opacity .4s}.blog-card:hover img{transform:scale(1.035);opacity:.88}.blog-meta{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.blog-card h2{font-family:'Space Grotesk',sans-serif;text-transform:uppercase;font-size:clamp(22px,2.2vw,32px);line-height:1.08;margin:12px 0}.blog-card p:not(.blog-meta){color:var(--muted);line-height:1.65}.blog-card .more-link{display:inline-block;margin-top:18px;font-size:13px;text-transform:uppercase}.article-header{max-width:1120px;margin:0 auto;padding-top:80px;padding-bottom:64px}.article-header h1{font-size:clamp(42px,7vw,96px);line-height:.95;margin:18px 0 32px}.article-deck{font-size:clamp(18px,2vw,26px);line-height:1.5;color:var(--muted);max-width:850px}.article-hero{max-width:1312px;margin:0 auto 96px;padding:0 64px}.article-hero img{width:100%;height:auto;border:1px solid var(--border)}.article-body{max-width:820px;margin:0 auto;padding:0 32px 120px}.article-body section{margin-bottom:64px}.article-body h2{font-family:'Space Grotesk',sans-serif;text-transform:uppercase;font-size:clamp(28px,4vw,44px);line-height:1.08;margin-bottom:24px}.article-body p{font-size:18px;line-height:1.8;color:#c7c7c7;margin-bottom:18px}.article-cta{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:56px 0;margin-top:80px}.article-cta h2{margin:12px 0 32px}.article-next{display:flex;justify-content:space-between;padding:32px 64px;border-top:1px solid var(--border);text-transform:uppercase;font-size:13px}.article-next a:hover{color:var(--muted)}@media(max-width:900px){.breadcrumbs{padding:24px 24px 0;flex-wrap:wrap}.blog-grid{grid-template-columns:1fr}.blog-list{padding-bottom:64px}.article-header{padding:56px 24px 40px}.article-hero{padding:0 24px;margin-bottom:64px}.article-body{padding:0 24px 80px}.article-next{padding:24px;gap:20px;flex-wrap:wrap}}