:root{
  --bg:#0B0B0D;
  --surface:#141417;
  --surface-2:#1C1C20;
  --text:#F5F5F7;
  --text-muted:#A7A7AE;
  --brand-red:#E11D2A;
  --brand-red-deep:#B3151F;
  --accent-purple:#8B5FBF;
  --maxw:1240px;
}

/* Critical: ensure [hidden] always hides regardless of component display rules */
[hidden]{display:none!important}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.05;text-transform:uppercase;letter-spacing:-.02em;font-weight:800;overflow-wrap:break-word}
p{overflow-wrap:break-word}

:focus-visible{outline:2px solid var(--brand-red);outline-offset:3px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;
  padding:.85em 1.6em;border-radius:2px;border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,background .2s ease,color .2s ease,border-color .2s ease;
  font-family:inherit;
}
.btn-lg{font-size:.85rem;padding:1.05em 2.1em}
.btn-red{background:var(--brand-red);color:#fff}
.btn-red:hover{background:var(--brand-red-deep);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--text);border-color:rgba(255,255,255,.35)}
.btn-outline:hover{border-color:var(--brand-red);color:var(--brand-red)}
.text-link{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--text);display:inline-flex;align-items:center;gap:.4em}
.text-link span{color:var(--brand-red);transition:transform .2s ease}
.text-link:hover span{transform:translateX(5px)}

.kicker{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brand-red);margin-bottom:1rem;
  position:relative;padding-left:2.6rem;
}
.kicker::before{content:"";position:absolute;left:0;top:50%;width:2rem;height:2px;background:var(--brand-red)}
.accent{color:var(--brand-red)}

/* Promo bar */
.promo{
  background:var(--surface-2);color:var(--text-muted);text-align:center;
  font-size:.74rem;letter-spacing:.04em;padding:.55rem 1rem;
}
.promo a{color:var(--brand-red);font-weight:700}

/* Header */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(11,11,13,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:padding .25s ease,background .25s ease;
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:1rem 1.25rem;
  display:flex;align-items:center;gap:1rem;
}
.site-header.shrink .header-inner{padding:.55rem 1.25rem}
.logo img{height:46px;width:auto;transition:height .25s ease}
.site-header.shrink .logo img{height:38px}
.primary-nav{display:none;gap:1.6rem;margin-left:auto}
.primary-nav a{
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text);position:relative;padding:.4rem 0;
}
.primary-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brand-red);transition:width .25s ease}
.primary-nav a:hover::after,.primary-nav a.active::after{width:100%}
.primary-nav a.active{color:var(--brand-red)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.icon-btn{
  background:none;border:none;color:var(--text);cursor:pointer;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:2px;
}
.icon-btn:hover{color:var(--brand-red)}
.header-cta{display:none}
.menu-toggle{flex-direction:column;gap:5px}
.menu-toggle span{width:22px;height:2px;background:var(--text);transition:.25s}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.search-bar{
  max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;
  display:none;gap:.6rem;overflow:hidden;
}
.search-bar.open{display:flex;padding-bottom:1rem}
.search-bar input{
  flex:1;min-width:0;background:var(--surface);border:1px solid rgba(255,255,255,.12);
  color:var(--text);padding:.8rem 1rem;border-radius:2px;font-family:inherit;
}

/* Drawer */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:70}
.mobile-drawer{
  position:fixed;top:0;right:0;height:100%;width:min(82vw,320px);z-index:80;
  background:var(--surface);padding:2rem 1.6rem;display:flex;flex-direction:column;gap:.4rem;
  box-shadow:-20px 0 60px rgba(0,0,0,.5);
}
.drawer-close{position:absolute;top:1rem;right:1.2rem;background:none;border:none;color:var(--text);font-size:2rem;cursor:pointer;line-height:1}
.mobile-drawer nav{display:flex;flex-direction:column;margin-top:2.5rem}
.mobile-drawer nav a{
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;
  padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.07);
}
.mobile-drawer nav a:hover{color:var(--brand-red)}
.drawer-cta{margin-top:1.6rem}
.drawer-social{display:flex;gap:1.1rem;margin-top:1.4rem;flex-wrap:wrap}
.drawer-social a{font-size:.75rem;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase}
.drawer-social a:hover{color:var(--brand-red)}

/* HERO */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(11,11,13,.55) 0%,rgba(11,11,13,.25) 40%,rgba(11,11,13,.92) 100%),
  linear-gradient(90deg,rgba(11,11,13,.7) 0%,rgba(11,11,13,0) 55%);}
.hero-glow{position:absolute;z-index:1;width:60%;height:60%;left:-10%;bottom:-10%;
  background:radial-gradient(circle,rgba(139,95,191,.35) 0%,transparent 65%);filter:blur(20px)}
.hero-content{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 1.25rem 4.5rem}
.hero-overline{display:flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1.2rem}
.hero-overline .dot{width:8px;height:8px;flex-shrink:0;border-radius:50%;background:var(--brand-red);box-shadow:0 0 12px var(--brand-red)}

/* Fixed: reduced clamp minimum from 2.6rem → 1.9rem to prevent ugly word-break on mobile */
.hero h1{font-weight:900;font-size:clamp(1.9rem,8.5vw,6.2rem);letter-spacing:-.03em}
.hero-sub{max-width:48ch;color:#dcdce0;font-weight:300;font-size:clamp(1rem,2.3vw,1.18rem);margin:1.4rem 0 2rem}
.hero-cta{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.mute-toggle{position:absolute;bottom:1.2rem;right:1.2rem;z-index:3;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.05rem}
.mute-toggle .unmuted-icon{display:none}
.mute-toggle.unmuted .muted-icon{display:none}
.mute-toggle.unmuted .unmuted-icon{display:inline}
.hero-credit{position:absolute;left:1.25rem;bottom:1.4rem;z-index:3;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(225,29,42,.85)}

/* STATS */
.stats{
  max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.25rem;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:center;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.stat{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.stat .num,.stat .plus{font-size:clamp(2.2rem,7vw,3.6rem);font-weight:900;color:var(--text);line-height:1;display:inline}
.stat .plus{color:var(--brand-red)}
.stat .lbl{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-top:.5rem}

/* Section common */
section{position:relative}
.section-head{max-width:var(--maxw);margin:0 auto;padding:4rem 1.25rem 2rem;text-align:center}
.section-head h2{font-size:clamp(2rem,6vw,3.4rem);font-weight:900}
.section-lead{color:var(--text-muted);font-weight:300;max-width:52ch;margin:1rem auto 0}

/* ABOUT */
.about{
  max-width:var(--maxw);margin:0 auto;padding:4.5rem 1.25rem;
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center;
}
.about-media{position:relative;overflow:hidden;border-radius:3px}
.about-media::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.08)}
.about-media img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 45%;transition:transform .7s ease}
.about-media:hover img{transform:scale(1.04)}
.about-body h2{font-size:clamp(1.9rem,6vw,3rem);font-weight:900;margin-bottom:1.4rem}
.about-body p{color:#cfcfd4;font-weight:300;font-size:1.05rem;margin:0 0 1.8rem;max-width:60ch}

/* SERVICES */
.services{max-width:var(--maxw);margin:0 auto;padding-bottom:4rem}
.service-grid{
  display:grid;grid-template-columns:1fr;gap:1rem;padding:0 1.25rem;
}
.svc-card{
  position:relative;overflow:hidden;border-radius:3px;aspect-ratio:3/4;display:block;
}
.svc-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.svc-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.05) 30%,rgba(11,11,13,.92) 100%)}
.svc-card:hover img{transform:scale(1.07)}
.svc-meta{position:absolute;left:0;bottom:0;z-index:2;padding:1.4rem 1.3rem;width:100%}
.svc-tag{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-red);margin-bottom:.45rem}
.svc-meta h3{font-size:1.5rem;font-weight:800}
.svc-more{display:inline-block;margin-top:.7rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);opacity:0;transform:translateY(8px);transition:.3s}
.svc-card:hover .svc-more,.svc-card:focus-visible .svc-more{opacity:1;transform:translateY(0)}

/* =============================================
   PORTFOLIO MOSAIC
   Mobile/tablet: aspect-ratio:1/1 squares, no spans.
   Desktop 900px+: grid-auto-rows fixed heights, spans active, aspect-ratio overridden.
   ============================================= */
.portfolio{max-width:var(--maxw);margin:0 auto;padding-bottom:3rem}

.mosaic{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.5rem;
  padding:0 1.25rem;
  grid-auto-flow:dense;
}

.tile{
  position:relative;
  overflow:hidden;
  border-radius:3px;
  display:block;
  aspect-ratio:1/1; /* mobile/tablet: square tiles */
}
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  transition:transform .7s ease;
}
.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(11,11,13,.9) 100%);
  opacity:.85;
  transition:opacity .3s;
}
.tile:hover img{transform:scale(1.08)}
.tile:hover::after{opacity:1}
.tile .cap{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:1rem 1.1rem;width:100%;
  font-weight:800;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em;
  transform:translateY(8px);opacity:.92;transition:.3s;
}
.tile .cap em{
  display:block;font-style:normal;font-size:.62rem;font-weight:700;
  letter-spacing:.16em;color:var(--brand-red);margin-bottom:.25rem;
}
.tile:hover .cap{transform:translateY(0);opacity:1}

/* Portrait images: show upper subject area */
.tile.t-portrait img{object-position:50% 25%}

.portfolio-foot{text-align:center;padding:2.5rem 1.25rem 0}

/* WHY */
.why{position:relative;overflow:hidden;margin-top:2rem}
.why-bg{position:absolute;inset:0;background-size:cover;background-position:50% 40%;z-index:0}
.why-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,11,13,.96) 0%,rgba(11,11,13,.82) 55%,rgba(11,11,13,.6) 100%)}
.why-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:5.5rem 1.25rem}
.why-inner h2{font-size:clamp(2rem,7vw,4rem);font-weight:900}
.why-inner>p{color:#cfcfd4;font-weight:300;font-size:1.08rem;max-width:60ch;margin:1.6rem 0 2.4rem}
.pillars{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:2.4rem}
.pillar{border-left:2px solid var(--brand-red);padding:.4rem 0 .4rem 1.2rem;display:flex;align-items:center;gap:1rem}
.pillar .pnum{font-size:1.5rem;font-weight:900;color:var(--brand-red);opacity:.55}
.pillar h3{font-size:1.1rem;font-weight:700;letter-spacing:0;text-transform:none}

/* NEWS */
.news{max-width:var(--maxw);margin:0 auto;padding-bottom:3rem}
.news-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;padding:0 1.25rem}
.news-card{background:var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:3px;overflow:hidden;transition:transform .25s ease,border-color .25s;display:block}
.news-card:hover{transform:translateY(-5px);border-color:rgba(225,29,42,.5)}
.news-img{overflow:hidden;aspect-ratio:16/9}
.news-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.news-card:hover .news-img img{transform:scale(1.06)}
.news-body{padding:1.5rem}
.news-tag{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-red)}
.news-body h3{font-size:1.4rem;font-weight:800;margin:.6rem 0 .7rem}
.news-body p{color:var(--text-muted);font-weight:300;font-size:.95rem;margin:0 0 1rem}
.news-more{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
.news-card:hover .news-more{color:var(--brand-red)}

/* NEWSLETTER */
.newsletter{position:relative;overflow:hidden;margin-top:2rem}
.news-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 45%;z-index:0}
.newsletter-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(11,11,13,.95) 0%,rgba(26,15,26,.7) 60%,rgba(139,26,139,.25) 100%)}
.newsletter-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:5rem 1.25rem;text-align:center}
.newsletter-inner h2{font-size:clamp(2rem,6vw,3.2rem);font-weight:900}
.newsletter-inner>p{color:#d6d6da;font-weight:300;margin:1rem 0 2rem}
.newsletter-form{display:flex;gap:.7rem;max-width:480px;margin:0 auto;flex-wrap:wrap}
.newsletter-form input{flex:1;min-width:0;background:rgba(11,11,13,.6);border:1px solid rgba(255,255,255,.2);color:var(--text);padding:.95rem 1.1rem;border-radius:2px;font-family:inherit}
.newsletter-thanks{color:var(--brand-red);font-weight:700;margin-top:1rem}

/* CLIENTS */
.clients{max-width:var(--maxw);margin:0 auto;padding-bottom:4rem}
.logo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;padding:0 1.25rem}
.logo-tile{
  background:#f4f4f6;border-radius:3px;aspect-ratio:2/1;display:flex;align-items:center;justify-content:center;
  padding:1.1rem 1.3rem;transition:transform .25s ease;
}
.logo-tile:hover{transform:translateY(-3px)}
.logo-tile img{max-height:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}

/* CONTACT */
.contact{position:relative;overflow:hidden;background:var(--surface);border-top:1px solid rgba(255,255,255,.06)}
.contact-glow{position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:70%;height:80%;background:radial-gradient(circle,rgba(225,29,42,.22) 0%,transparent 65%);z-index:0;filter:blur(20px)}
.contact-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:5.5rem 1.25rem;text-align:center}
.contact-inner h2{font-size:clamp(2.2rem,7vw,4rem);font-weight:900}
.contact-rows{display:flex;flex-direction:column;gap:.6rem;margin:2.2rem 0;align-items:center}
.contact-row{font-size:1.05rem;font-weight:600;display:flex;flex-direction:column;gap:.2rem}
.contact-row span{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-red)}
a.contact-row:hover{color:var(--brand-red)}
.contact-social{display:flex;gap:1.4rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.contact-social a{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.contact-social a:hover{color:var(--brand-red)}

/* FOOTER */
.site-footer{background:var(--surface-2);border-top:1px solid rgba(255,255,255,.06)}
.footer-top{max-width:var(--maxw);margin:0 auto;padding:3.5rem 1.25rem;display:grid;grid-template-columns:1fr;gap:2.5rem}
.footer-logo{height:48px;width:auto;margin-bottom:1.2rem}
.footer-brand p{color:var(--text-muted);font-weight:300;font-size:.92rem;max-width:42ch}
.footer-col h4{font-size:1.1rem;font-weight:800;margin-bottom:1.2rem;position:relative;padding-bottom:.6rem}
.footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--brand-red)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:240px}
.ig-grid img{aspect-ratio:1/1;object-fit:cover;border-radius:2px;transition:opacity .2s}
.ig-grid a:hover img{opacity:.75}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;max-width:280px}
.footer-nav a{color:var(--text-muted);font-size:.92rem}
.footer-nav a:hover{color:var(--brand-red)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);max-width:var(--maxw);margin:0 auto;padding:1.4rem 1.25rem;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center}
.footer-bottom p{margin:0;font-size:.78rem;color:var(--text-muted)}
.footer-bottom .credit{color:rgba(225,29,42,.8);margin-left:.6rem}
.legal a{color:var(--text-muted)}
.legal a:hover{color:var(--brand-red)}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ===== RESPONSIVE ===== */

@media(min-width:600px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .mosaic{grid-template-columns:repeat(3,1fr)}
  .news-grid{grid-template-columns:repeat(3,1fr)}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
}

@media(min-width:768px){
  .about{grid-template-columns:1.05fr 1fr;gap:3.5rem}
  .pillars{grid-template-columns:repeat(3,1fr)}
  .contact-rows{flex-direction:row;justify-content:center;gap:2.5rem}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr}
}

@media(min-width:900px){
  /* Nav */
  .primary-nav{display:flex}
  .header-cta{display:inline-flex}
  .menu-toggle{display:none}
  .header-actions{margin-left:0}

  /* Services */
  .service-grid{grid-template-columns:repeat(4,1fr)}
  .svc-wide{grid-column:span 2;aspect-ratio:3/2}

  /* Portfolio mosaic: switch from aspect-ratio squares to grid-auto-rows with spans.
     32 cell-slots total at 4 cols = exactly 8 complete rows, no orphaned tiles. */
  .mosaic{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:200px;
  }
  /* Override mobile aspect-ratio — grid-auto-rows controls height at desktop */
  .mosaic .tile{aspect-ratio:unset}
  /* Enable tile spans */
  .tile.t-xl{grid-column:span 2;grid-row:span 2}
  .tile.t-wide{grid-column:span 2}
  .tile.t-tall{grid-row:span 2}

  /* Logo grid */
  .logo-grid{grid-template-columns:repeat(6,1fr)}
  .footer-nav{grid-template-columns:1fr 1fr}
}

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