:root{
 --black:#050505;--black2:#0a0a09;--white:#fff;--off:#f0eee9;--gray:#d9d9d6;--gray2:#b9b9b5;
 --ink:#0a0a09;--line:rgba(255,255,255,.14);--pad:clamp(20px,3vw,48px)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:"Manrope",sans-serif;overflow-x:hidden}
a{color:inherit}button{font:inherit}img{display:block;width:100%}

.preloader{position:fixed;z-index:9999;inset:0;background:#050505;padding:var(--pad);display:flex;flex-direction:column;justify-content:flex-end;transition:opacity .7s,visibility .7s}
.preloader.hide{opacity:0;visibility:hidden}.preloader img{width:min(560px,78vw)}
.preloader-bottom{display:flex;justify-content:space-between;margin:20px 0 12px;font-size:8px;letter-spacing:.18em;color:#808080}
.preloader>i{height:1px;background:#fff;width:0;display:block}
.progress{position:fixed;z-index:800;top:0;left:0;right:0;height:2px}.progress i{display:block;height:100%;width:0;background:#fff}

.site-header{position:fixed;z-index:700;left:0;right:0;top:0;padding:21px var(--pad);display:grid;grid-template-columns:1fr auto 1fr;align-items:start;mix-blend-mode:difference;color:#fff}
.logo img{width:92px}.site-meta{display:flex;gap:28px;font:600 9px/1 "Space Grotesk";letter-spacing:.11em}.menu-trigger{justify-self:end;border:0;background:none;color:inherit;font:600 9px/1 "Space Grotesk";letter-spacing:.11em;cursor:pointer}
.menu-panel{position:fixed;z-index:9000;inset:0;background:var(--off);color:#080808;padding:22px var(--pad) 28px;display:flex;flex-direction:column;transform:translateY(-102%);transition:transform .78s cubic-bezier(.77,0,.18,1)}
.menu-panel.open{transform:none}.menu-panel-top{display:flex;justify-content:space-between;align-items:flex-start}.menu-panel-top img{width:150px}.menu-panel-top button{border:0;background:none;font-weight:700;cursor:pointer}
.menu-panel nav{margin:auto 0}.menu-panel nav a{display:flex;align-items:center;gap:28px;text-decoration:none;border-bottom:1px solid #c9c7c1;padding:4px 0;font-size:clamp(45px,6.5vw,104px);line-height:.92;letter-spacing:-.065em;font-weight:600}
.menu-panel nav a span{width:38px;font-size:8px;color:#777;letter-spacing:0}

.hero{height:100svh;min-height:700px;position:relative;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0;overflow:hidden}.hero-bg video{position:absolute;inset:-7%;width:114%;height:114%;object-fit:cover;filter:saturate(.72) contrast(1.06) brightness(.68);transform:scale(1.03)}
.hero-dark{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 45%,rgba(0,0,0,.68)),linear-gradient(90deg,rgba(0,0,0,.45),transparent 62%)}
.hero-slides{position:absolute;z-index:3;left:var(--pad);right:var(--pad);top:23%;height:54vh;overflow:hidden}
.hero-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;opacity:0;pointer-events:none;transform:translateY(35%);clip-path:inset(100% 0 0 0)}
.hero-slide.active{opacity:1;pointer-events:auto;transform:none;clip-path:inset(0 0 0 0)}
.hero-slide.enter-next{animation:slideInNext .9s cubic-bezier(.16,1,.3,1) forwards}.hero-slide.leave-next{animation:slideOutNext .9s cubic-bezier(.16,1,.3,1) forwards}
.hero-slide.enter-prev{animation:slideInPrev .9s cubic-bezier(.16,1,.3,1) forwards}.hero-slide.leave-prev{animation:slideOutPrev .9s cubic-bezier(.16,1,.3,1) forwards}
@keyframes slideInNext{from{opacity:1;transform:translateY(42%);clip-path:inset(100% 0 0 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes slideOutNext{from{opacity:1;transform:none;clip-path:inset(0)}to{opacity:0;transform:translateY(-22%);clip-path:inset(0 0 100% 0)}}
@keyframes slideInPrev{from{opacity:1;transform:translateY(-35%);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes slideOutPrev{from{opacity:1;transform:none;clip-path:inset(0)}to{opacity:0;transform:translateY(25%);clip-path:inset(100% 0 0 0)}}
.hero-label{font-size:9px;letter-spacing:.18em;margin-bottom:20px}
.hero h1{margin:0;font-size:clamp(74px,9.7vw,165px);line-height:.79;letter-spacing:-.078em;font-weight:700;text-transform:uppercase}.hero h1 span{display:block}
.hero-slide p{max-width:520px;margin:25px 0 0;font-size:14px;line-height:1.55;color:#d6d6d4}
.hero-controls{position:absolute;z-index:5;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-controls button{width:42px;height:42px;border:1px solid rgba(255,255,255,.42);background:rgba(0,0,0,.12);color:#fff;border-radius:50%;cursor:pointer}
.hero-counter{writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;font-size:8px}.hero-counter i{height:64px;width:1px;background:rgba(255,255,255,.45)}.hero-counter strong{font-size:12px}
.hero-footer{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:26px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.08em}.hero-footer a{text-decoration:none}.hero-footer button{border:0;background:none;color:#fff;padding:0;cursor:pointer}

.section-dark{background:#080808}.section-light{background:var(--off);color:var(--ink)}.section-gray{background:var(--gray);color:var(--ink)}
.section-tag{padding:30px var(--pad) 0;font-size:8px;letter-spacing:.17em;color:#757575}.section-tag.dark{color:#696762}

.about{min-height:115vh;position:relative;overflow:hidden;padding-bottom:120px}.about-layout{padding:13vh var(--pad) 8vh;display:grid;grid-template-columns:1.3fr .7fr;gap:9vw;align-items:center}.about-title h2,.section-heading h2,.services-head h2,.direction h2,.process-heading h2,.trust h2,.contact h2{margin:0;font-size:clamp(50px,6.5vw,108px);line-height:.9;letter-spacing:-.07em;font-weight:600}.about-text{font-size:16px;line-height:1.65;color:#a8a8a5}.about-text p{margin:0 0 24px}.about-text strong{color:#fff}.big-word{position:absolute;left:-3vw;bottom:-3vw;font-size:19vw;line-height:.75;letter-spacing:-.11em;font-weight:700;color:#10100f;white-space:nowrap;pointer-events:none}

.manifesto{min-height:110vh;display:flex;align-items:center;overflow:hidden}.manifesto-lines{width:100%;padding:9vh var(--pad)}.manifesto-lines>div{font-size:clamp(50px,8vw,135px);line-height:.88;letter-spacing:-.075em;font-weight:700;white-space:nowrap;margin:2vh 0}.manifesto-lines span{font-weight:400;color:#6e6d69}.line-right{text-align:right}

.portfolio{padding-bottom:140px}.section-heading{padding:80px var(--pad);display:grid;grid-template-columns:1.2fr .8fr;gap:8vw;align-items:end}.section-heading p{margin:0;color:#9a9a96;line-height:1.55;max-width:480px}
.portfolio-stack{padding:0 var(--pad);display:flex;flex-direction:column;gap:14vh}.work-card{position:relative;width:100%}.work-card.card-offset{width:64%;margin-left:5%}.work-card.card-offset.right{margin-left:auto;margin-right:4%}.work-media{height:67vh;min-height:500px;overflow:hidden;clip-path:inset(8% 0 8% 0)}.card-offset .work-media{height:62vh}.work-media img{width:100%;height:116%;object-fit:cover;filter:saturate(.7);transform:translateY(-8%)}.work-copy{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:end;padding-top:15px}.work-copy span{grid-column:1/-1;font-size:8px;letter-spacing:.14em;color:#81817e}.work-copy h3{margin:0;font-size:clamp(30px,4vw,62px);letter-spacing:-.055em;font-weight:500}.work-copy button{width:62px;height:62px;border:1px solid #555;background:none;color:#fff;border-radius:50%}

.services{padding-bottom:110px}.services-head{padding:80px var(--pad);display:grid;grid-template-columns:1.15fr .85fr;gap:8vw;align-items:end}.services-head p{margin:0;max-width:500px;color:#565550;line-height:1.6}
.service-rows{border-top:1px solid #c9c7c2}.service-rows article{display:grid;grid-template-columns:55px 1.05fr .9fr 40px;gap:24px;align-items:start;padding:25px var(--pad);border-bottom:1px solid #c9c7c2;position:relative;transition:background .35s,color .35s}.service-rows article:hover{background:#111;color:#fff}.service-rows span{font-size:8px;color:#777;padding-top:8px}.service-rows h3{margin:0;font-size:clamp(24px,3vw,45px);line-height:1.02;letter-spacing:-.052em;font-weight:500}.service-rows p{margin:5px 0 0;color:#595853;line-height:1.5}.service-rows article:hover p{color:#bbb}.service-rows b{font-size:25px;font-weight:400}

.direction{display:grid;grid-template-columns:1fr 1fr;background:#deddd9;color:#090909;min-height:100vh}.direction-media{overflow:hidden;min-height:760px}.direction-media img{height:100%;object-fit:cover;object-position:center 15%;filter:grayscale(1)}.direction-body{padding:8vh var(--pad);align-self:center}.direction-body>.eyebrow{display:block;margin:25px 0;font-size:8px;letter-spacing:.15em}.direction-body p{max-width:620px;line-height:1.62;color:#51504c}

.process{padding-bottom:130px}.process-heading{padding:80px var(--pad)}.process-grid{padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.process-item{min-height:390px;border:1px solid #292929;padding:24px;display:flex;flex-direction:column;justify-content:space-between;opacity:0;transform:translateY(45px);transition:opacity .8s,transform .8s cubic-bezier(.16,1,.3,1)}.process-item.visible{opacity:1;transform:none}.process-item span{font-size:8px;color:#777}.process-item h3{margin:auto 0 15px;font-size:clamp(28px,3vw,48px);letter-spacing:-.055em;font-weight:500}.process-item p{margin:0;color:#989895;line-height:1.5}

.trust{padding-bottom:110px}.trust-main{padding:80px var(--pad);display:grid;grid-template-columns:.6fr 1.4fr;gap:8vw;align-items:end}.score small{font-size:8px;letter-spacing:.14em}.score strong{display:block;font-size:clamp(120px,18vw,295px);line-height:.7;letter-spacing:-.11em;font-weight:600}.score span{display:block;margin-top:22px;letter-spacing:4px}.quotes{margin:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid #b8b8b4;border-top:1px solid #b8b8b4}.quotes article{min-height:290px;padding:22px;border-right:1px solid #b8b8b4;border-bottom:1px solid #b8b8b4;display:flex;flex-direction:column;justify-content:space-between}.quotes blockquote{margin:0;font-size:clamp(19px,2vw,28px);line-height:1.26;font-weight:500;letter-spacing:-.03em}.quotes span{font-size:8px;letter-spacing:.12em;color:#676762}.brand-row{margin:36px var(--pad) 0;padding-top:24px;border-top:1px solid #b8b8b4;display:flex;gap:25px;flex-wrap:wrap;font-size:10px;font-weight:700;color:#656560}

.contact{min-height:100vh;background:#020202;padding:11vh var(--pad) 25px;display:flex;flex-direction:column}.contact-top>span{font-size:8px;letter-spacing:.16em;color:#777}.contact-top h2{max-width:1180px;margin:28px 0 20px}.contact-top p{max-width:530px;color:#aaa;line-height:1.55}.contact-top a{display:inline-block;margin-top:25px;text-decoration:none;border-bottom:1px solid #fff;padding-bottom:4px;font-size:10px;letter-spacing:.1em}.contact-info{margin-top:60px;display:grid;grid-template-columns:repeat(4,1fr);border-left:1px solid #242424;border-top:1px solid #242424}.contact-info div{padding:18px;border-right:1px solid #242424;border-bottom:1px solid #242424}.contact-info span{display:block;font-size:7px;letter-spacing:.13em;color:#777;margin-bottom:9px}.contact-info strong{font-size:10px}.contact-logo{width:min(78vw,1100px);margin:auto auto 0}footer{margin-top:25px;padding-top:16px;border-top:1px solid #222;display:flex;justify-content:space-between;font-size:7px;letter-spacing:.12em;color:#666}

.reel-modal{position:fixed;z-index:9500;inset:0;background:rgba(0,0,0,.96);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.35s}.reel-modal.open{opacity:1;visibility:visible}.reel-modal>button{position:absolute;right:25px;top:23px;border:0;background:none;color:#fff}.reel-placeholder{width:min(900px,90vw);aspect-ratio:16/9;border:1px solid #333;display:grid;place-content:center;text-align:center}.reel-placeholder span{font-size:clamp(45px,8vw,120px);letter-spacing:-.07em}.reel-placeholder p{color:#777}

.split-reveal,.fade-reveal{opacity:0;transform:translateY(35px);transition:opacity .85s,transform .85s cubic-bezier(.16,1,.3,1)}.split-reveal.visible,.fade-reveal.visible{opacity:1;transform:none}
.reveal-mask{clip-path:inset(15% 15% 15% 15%);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1)}.reveal-mask.visible{clip-path:inset(0)}

@media(max-width:980px){
 .site-meta{display:none}.site-header{grid-template-columns:1fr auto}
 .about-layout,.section-heading,.services-head,.trust-main{grid-template-columns:1fr;gap:45px}
 .work-card.card-offset{width:82%;margin-left:0}.work-card.card-offset.right{margin-right:0;margin-left:auto}
 .service-rows article{grid-template-columns:45px 1fr}.service-rows p{grid-column:2}.service-rows b{grid-column:2}
 .direction{grid-template-columns:1fr}.direction-media{min-height:620px}
 .process-grid{grid-template-columns:1fr 1fr}.quotes{grid-template-columns:1fr}.contact-info{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
 .hero-slides{top:28%;height:50vh}.hero h1{font-size:15vw}.hero-slide p{font-size:12px;max-width:75%}.hero-controls{right:15px}.hero-footer{font-size:8px}
 .manifesto-lines>div{font-size:15vw;white-space:normal}.line-right{text-align:left}
 .work-card.card-offset{width:100%}.work-media,.card-offset .work-media{height:76vw;min-height:350px}
 .direction-media{min-height:520px}
 .process-grid{grid-template-columns:1fr}.contact-info{grid-template-columns:1fr}
 footer{flex-direction:column;gap:8px}
}


/* =========================================================
   HERO PREMIUM V02 — single-message, video + parallax
   ========================================================= */
.hero-v2{
  height:100svh;
  min-height:720px;
  position:relative;
  overflow:hidden;
  background:#000;
  isolation:isolate;
}
.hero-v2-media{
  position:absolute;
  inset:-5%;
  z-index:0;
  will-change:transform;
}
.hero-v2-media video{
  width:110%;
  height:110%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.03);
  filter:saturate(.68) contrast(1.1) brightness(.74);
  will-change:transform;
}
.hero-v2-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.23) 43%,rgba(0,0,0,.10) 67%,rgba(0,0,0,.28) 100%),
    linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.67) 100%);
}
.hero-v2-vignette{
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 180px 55px rgba(0,0,0,.48);
  pointer-events:none;
}
.hero-v2-grain{
  position:absolute;
  inset:0;
  opacity:.045;
  mix-blend-mode:screen;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.hero-v2-frame{
  position:absolute;
  z-index:5;
  inset:20px;
  pointer-events:none;
}
.hero-v2-frame i{position:absolute;background:rgba(255,255,255,.34)}
.hero-v2-frame .top,.hero-v2-frame .bottom{height:1px;left:0;right:0}
.hero-v2-frame .top{top:0}.hero-v2-frame .bottom{bottom:0}
.hero-v2-frame .left,.hero-v2-frame .right{width:1px;top:0;bottom:0}
.hero-v2-frame .left{left:0}.hero-v2-frame .right{right:0}

.hero-v2-meta{
  position:absolute;
  z-index:6;
  top:84px;
  left:var(--pad);
  right:var(--pad);
  display:flex;
  justify-content:space-between;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.18em;
  color:rgba(255,255,255,.76);
}
.hero-v2-title{
  position:absolute;
  z-index:6;
  left:var(--pad);
  top:50%;
  transform:translateY(-48%);
  width:min(1180px,86vw);
  will-change:transform,opacity;
}
.hero-v2-kicker{
  margin-bottom:18px;
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.18em;
  color:rgba(255,255,255,.78);
  opacity:0;
  animation:heroMetaIn .7s .35s ease forwards;
}
.hero-v2 h1{
  margin:0;
  font:700 clamp(78px,10.2vw,174px)/.78 "Manrope",sans-serif;
  letter-spacing:-.082em;
  text-transform:uppercase;
  color:#fff;
}
.hero-line{
  display:block;
  overflow:hidden;
  padding-bottom:.04em;
}
.hero-line b{
  display:block;
  font:inherit;
  transform:translateY(112%);
  animation:heroLineIn 1.05s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-line:nth-child(2) b{animation-delay:.11s}
.hero-v2-title p{
  max-width:570px;
  margin:28px 0 0;
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.76);
  opacity:0;
  transform:translateY(16px);
  animation:heroMetaIn .8s .68s ease forwards;
}
@keyframes heroLineIn{
  to{transform:translateY(0)}
}
@keyframes heroMetaIn{
  to{opacity:1;transform:translateY(0)}
}

.hero-v2-side{
  position:absolute;
  z-index:6;
  right:var(--pad);
  top:50%;
  transform:translateY(-50%);
}
.hero-v2-index{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font:600 8px/1 "Space Grotesk",sans-serif;
  color:rgba(255,255,255,.72);
}
.hero-v2-index strong{font-size:13px;color:#fff}
.hero-v2-index i{display:block;width:1px;height:84px;background:rgba(255,255,255,.38)}
.hero-v2-index span{writing-mode:vertical-rl;letter-spacing:.17em}

.hero-v2-bottom{
  position:absolute;
  z-index:6;
  left:var(--pad);
  right:var(--pad);
  bottom:34px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.09em;
}
.hero-v2-bottom a{
  text-decoration:none;
}
.hero-v2-bottom button{
  border:0;
  background:none;
  color:#fff;
  padding:0;
  cursor:pointer;
  font:inherit;
  letter-spacing:inherit;
}
.hero-v2-bottom span{
  display:inline-block;
  margin-left:7px;
  transition:transform .25s ease;
}
.hero-v2-bottom a:hover span{transform:translateY(4px)}
.hero-v2-bottom button:hover span{transform:translate(3px,-3px)}

.hero-v2-wordmark{
  position:absolute;
  z-index:4;
  right:-2vw;
  bottom:-4vw;
  width:44vw;
  opacity:.045;
  pointer-events:none;
}
.hero-v2-wordmark img{width:100%}

@media(max-width:760px){
  .hero-v2{min-height:660px}
  .hero-v2-frame{inset:12px}
  .hero-v2-meta{top:76px}
  .hero-v2-meta span:nth-child(2){display:none}
  .hero-v2-title{width:82vw}
  .hero-v2 h1{font-size:14.8vw}
  .hero-v2-title p{font-size:12px;max-width:78%}
  .hero-v2-side{right:16px}
  .hero-v2-index i{height:55px}
  .hero-v2-bottom{bottom:25px;font-size:8px}
  .hero-v2-wordmark{width:70vw;bottom:3vw}
}


/* Manifesto overlap fix */
.manifesto{overflow:hidden}
.manifesto-lines{overflow:hidden}
.manifesto-lines>div{
  max-width:100%;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
}
@media(min-width:981px){
  .manifesto-lines>div{
    font-size:clamp(48px,7.2vw,118px);
    line-height:.9;
  }
}


/* =========================================================
   HARD FIX — CLOSED FULLSCREEN MENU MUST NEVER LEAK
   ========================================================= */
.menu-panel{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  transform:translateY(-100%) !important;
}
.menu-panel.open{
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}

/* =========================================================
   CINEOS / AVO HERO V03
   Based on AVO home1-dark composition:
   centered caption, circular arrows, fraction, parallax background.
   ========================================================= */
.avo-hero{
  position:relative;
  height:100svh;
  min-height:700px;
  overflow:hidden;
  background:#050505;
  color:#fff;
  isolation:isolate;
}
.avo-bg{
  position:absolute;
  inset:-6%;
  z-index:0;
  overflow:hidden;
  will-change:transform;
}
.avo-bg video{
  width:112%;
  height:112%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.7) contrast(1.08) brightness(.67);
  transform:scale(1.025);
}
.avo-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at center,rgba(0,0,0,.03) 0%,rgba(0,0,0,.2) 58%,rgba(0,0,0,.52) 100%),
    linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.12) 55%,rgba(0,0,0,.38));
}
.avo-caption{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(900px,74vw);
  text-align:center;
}
.avo-thin{
  color:#fff;
  font:500 11px/1 "Space Grotesk",sans-serif;
  letter-spacing:.28em;
  text-transform:uppercase;
  margin-bottom:20px;
  opacity:0;
  transform:translateY(-18px);
  animation:avoFade .65s .45s forwards;
}
.avo-caption h1{
  margin:0;
  font:700 clamp(70px,8.1vw,134px)/.84 "Manrope",sans-serif;
  letter-spacing:-.06em;
  text-transform:uppercase;
  color:#fff;
}
.avo-caption h1 span{
  display:block;
  overflow:hidden;
  padding:.02em 0 .06em;
}
.avo-caption h1 span::after{display:none}
.avo-caption h1 span{
  opacity:0;
  transform:translateY(42px);
  animation:avoTitleIn .85s cubic-bezier(.16,1,.3,1) forwards;
}
.avo-caption h1 span:nth-child(1){animation-delay:.08s}
.avo-caption h1 span:nth-child(2){animation-delay:.18s}
.avo-caption p{
  max-width:620px;
  margin:22px auto 0;
  color:#e7e7e4;
  font-size:14px;
  line-height:1.6;
  opacity:0;
  transform:translateY(18px);
  animation:avoFade .7s .62s forwards;
}
.avo-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  padding:12px 0;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.65);
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  opacity:0;
  transform:translateY(18px);
  animation:avoFade .7s .78s forwards;
}
.avo-link i{font-style:normal;transition:transform .25s}
.avo-link:hover i{transform:translate(4px,-4px)}
@keyframes avoTitleIn{to{opacity:1;transform:translateY(0)}}
@keyframes avoFade{to{opacity:1;transform:translateY(0)}}

.avo-arrow{
  position:absolute;
  z-index:6;
  top:50%;
  transform:translateY(-50%);
  width:58px;
  height:58px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(0,0,0,.08);
  color:#fff;
  font-size:19px;
  cursor:pointer;
  backdrop-filter:blur(2px);
  transition:background .3s,border-color .3s,transform .3s;
}
.avo-arrow:hover{
  background:#fff;
  color:#080808;
  border-color:#fff;
  transform:translateY(-50%) scale(1.06);
}
.avo-prev{left:30px}.avo-next{right:30px}

.avo-fraction{
  position:absolute;
  z-index:6;
  right:7.5vw;
  top:85px;
  display:flex;
  align-items:center;
  gap:12px;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.1em;
}
.avo-fraction strong{font-size:12px}
.avo-fraction i{display:block;width:60px;height:1px;background:rgba(255,255,255,.45)}
.avo-fraction span{color:rgba(255,255,255,.58)}

.avo-social{
  position:absolute;
  z-index:6;
  left:var(--pad);
  bottom:28px;
  display:flex;
  gap:18px;
}
.avo-social a{
  text-decoration:none;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  color:rgba(255,255,255,.72);
}
.avo-scroll{
  position:absolute;
  z-index:6;
  right:var(--pad);
  bottom:28px;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  color:rgba(255,255,255,.72);
}

@media(max-width:760px){
  .avo-caption{width:78vw}
  .avo-caption h1{font-size:14vw}
  .avo-caption p{font-size:12px}
  .avo-thin{font-size:8px;letter-spacing:.18em}
  .avo-arrow{width:44px;height:44px;font-size:15px}
  .avo-prev{left:13px}.avo-next{right:13px}
  .avo-fraction{right:18px;top:82px}
  .avo-fraction i{width:30px}
}


/* =========================================================
   PREMIUM REAL PORTFOLIO V04
   ========================================================= */
.premium-portfolio{
  position:relative;
  overflow:hidden;
  padding-bottom:120px;
}
.portfolio-heading{
  padding-bottom:10vh;
}
.portfolio-showcase{
  padding:0 var(--pad);
  display:flex;
  flex-direction:column;
  gap:18vh;
}
.case{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:5vw;
  align-items:end;
}
.case-split{
  grid-template-columns:.65fr 1.35fr;
}
.case-media{
  position:relative;
  padding:0;
  border:0;
  background:#111;
  height:68vh;
  min-height:500px;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
}
.case-media img{
  width:100%;
  height:112%;
  object-fit:cover;
  transform:scale(1.035);
  filter:saturate(.68) contrast(1.04);
  transition:transform .8s cubic-bezier(.16,1,.3,1),filter .5s;
}
.case-media:hover img{
  transform:scale(1.075);
  filter:saturate(.82) contrast(1.06);
}
.case-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.1) 42%,rgba(0,0,0,.62));
}
.case-index{
  position:absolute;
  top:18px;
  left:18px;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.13em;
  color:#fff;
}
.case-play{
  position:absolute;
  right:20px;
  bottom:18px;
  width:74px;
  height:74px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.1em;
  backdrop-filter:blur(4px);
  transition:background .3s,color .3s,transform .3s;
}
.case-media:hover .case-play{
  background:#fff;
  color:#080808;
  transform:scale(1.06);
}
.case-copy{
  padding-bottom:6px;
}
.case-type{
  margin-bottom:15px;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.16em;
  color:#858582;
}
.case-copy h3{
  margin:0;
  font-size:clamp(45px,5.6vw,92px);
  line-height:.87;
  letter-spacing:-.07em;
  font-weight:600;
}
.case-copy p{
  max-width:500px;
  margin:24px 0 0;
  color:#9c9c98;
  font-size:14px;
  line-height:1.6;
}
.case-link{
  margin-top:25px;
  padding:0 0 5px;
  border:0;
  border-bottom:1px solid #676765;
  background:none;
  color:#fff;
  cursor:pointer;
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.1em;
}
.case-last{
  margin-bottom:5vh;
}
.portfolio-channel{
  margin:11vh var(--pad) 0;
  padding-top:24px;
  border-top:1px solid #2b2b2a;
  display:flex;
  justify-content:space-between;
  gap:30px;
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  color:#777774;
}
.portfolio-channel a{
  color:#fff;
  text-decoration:none;
}

/* Video modal */
.video-modal{
  display:grid !important;
  place-items:center;
}
.video-shell{
  width:min(1180px,90vw);
  aspect-ratio:16/9;
  background:#000;
  box-shadow:0 25px 90px rgba(0,0,0,.55);
}
.video-shell iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.video-modal>button{
  position:absolute;
  right:26px;
  top:22px;
  border:0;
  background:none;
  color:#fff;
  z-index:2;
  cursor:pointer;
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
}

@media(max-width:900px){
  .case,.case-split{
    grid-template-columns:1fr;
    gap:30px;
  }
  .case-split .case-copy{order:2}
  .case-split .case-media{order:1}
  .case-media{
    height:60vw;
    min-height:420px;
  }
}
@media(max-width:600px){
  .portfolio-showcase{gap:12vh}
  .case-media{
    height:74vw;
    min-height:330px;
  }
  .case-play{
    width:58px;
    height:58px;
  }
  .portfolio-channel{
    flex-direction:column;
    line-height:1.45;
  }
}

.hero-final{height:100svh;min-height:720px;position:relative;overflow:hidden;background:#050505;color:#fff;isolation:isolate}
.hero-final-media{position:absolute;inset:-5%;z-index:0;will-change:transform}.hero-final-media video{width:110%;height:110%;object-fit:cover;filter:saturate(.72) contrast(1.08) brightness(.66)}
.hero-final-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.30) 40%,rgba(0,0,0,.08) 70%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.06) 55%,rgba(0,0,0,.62))}
.hero-final-top{position:absolute;z-index:5;top:22px;left:50%;transform:translateX(-50%);display:flex;gap:24px;font:600 9px/1 "Space Grotesk";letter-spacing:.1em}
.hero-final-copy{position:absolute;z-index:5;left:var(--pad);top:24%;width:min(850px,72vw)}
.hero-final-kicker{margin-bottom:20px;font:600 9px/1 "Space Grotesk";letter-spacing:.18em;color:#d5d5d2}
.hero-final h1{margin:0;font:700 clamp(72px,9vw,150px)/.82 "Manrope";letter-spacing:-.075em;text-transform:uppercase}.hero-final h1 span{display:block;overflow:hidden}
.hero-final-copy p{margin:24px 0 0;max-width:520px;font-size:14px;line-height:1.55;color:#d4d4d0}
.hero-final-contact{display:inline-block;margin-top:27px;text-decoration:none;font:700 clamp(17px,1.7vw,25px)/1 "Manrope";letter-spacing:-.03em;transition:transform .25s}.hero-final-contact:hover{transform:translateX(6px)}
.hero-final-reel{position:absolute;z-index:5;right:var(--pad);top:50%;transform:translateY(-50%)}
.hero-final-reel button{width:126px;height:126px;border:1px solid rgba(255,255,255,.45);border-radius:50%;background:rgba(0,0,0,.18);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;transition:.3s}
.hero-final-reel button:hover{background:#fff;color:#080808;transform:scale(1.06)}.hero-final-reel small{font:600 8px/1 "Space Grotesk";letter-spacing:.12em}.hero-final-reel strong{font:700 13px/1 "Space Grotesk"}.hero-final-reel b{font-size:11px}
.hero-final-socials{position:absolute;z-index:5;left:var(--pad);bottom:28px;display:flex;gap:18px}.hero-final-socials a{text-decoration:none;font:700 8px/1 "Space Grotesk";letter-spacing:.12em;color:#d0d0ce}
.hero-final-logo{position:absolute;z-index:3;left:50%;bottom:-3.8vw;transform:translateX(-50%);width:94vw;opacity:.97}.hero-final-logo img{width:100%;max-height:27vh;object-fit:contain;object-position:center bottom}
.hero-final-pulse{position:absolute;z-index:6;left:50%;bottom:24px;transform:translateX(-50%);width:1px;height:45px;background:rgba(255,255,255,.15);overflow:hidden}.hero-final-pulse i{display:block;width:100%;height:18px;background:#fff;animation:pulseLine 1.6s ease-in-out infinite}
@keyframes pulseLine{0%{transform:translateY(-20px);opacity:0}25%{opacity:1}70%{opacity:1}100%{transform:translateY(50px);opacity:0}}
@media(max-width:760px){.hero-final-copy{top:29%;width:78vw}.hero-final h1{font-size:14.4vw}.hero-final-copy p{font-size:12px;max-width:74%}.hero-final-reel{right:16px;top:68%}.hero-final-reel button{width:88px;height:88px}.hero-final-logo{width:120vw;bottom:2vw}}


/* ===== HERO FIXES V06 ===== */
.site-header{padding:18px var(--pad);align-items:center}
.site-header .site-meta{display:none !important;}
.logo img{width:124px}
.menu-trigger{font-size:10px;letter-spacing:.14em}
.hero-final{height:100svh;min-height:100svh;max-height:100svh}
.hero-final-top{top:10px;gap:26px;font-size:10px;letter-spacing:.14em}
.hero-final-copy{top:21%;width:min(700px,62vw)}
.hero-final-kicker{font-size:10px}
.hero-final h1{font-size:clamp(66px,7.6vw,132px);line-height:.84}
.hero-final-copy p{max-width:500px;font-size:13px;margin-top:18px}
.hero-final-contact{margin-top:22px;font-size:clamp(16px,1.6vw,24px)}
.hero-final-reel{right:max(38px,var(--pad));top:52%}
.hero-final-socials{position:absolute;z-index:8;left:var(--pad);bottom:30px;display:flex;gap:18px}
.hero-final-socials a{text-decoration:none;font:600 8px/1 "Space Grotesk",sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.72);transition:color .25s ease, transform .25s ease}
.hero-final-socials a:hover{color:#fff;transform:translateY(-2px)}
.hero-final-logo{width:102vw;bottom:-1.2vw;opacity:.96}
.hero-final-logo img{max-height:20vh}
.hero-final-pulse{bottom:30px}
@media (max-width:1440px){.hero-final-copy{top:22%;width:min(650px,64vw)}.hero-final h1{font-size:clamp(62px,7.2vw,118px)}.hero-final-logo img{max-height:18vh}}
@media (max-width:1100px){.logo img{width:112px}.hero-final-copy{top:22%;width:min(620px,68vw)}.hero-final-reel{top:58%;right:24px}.hero-final-logo{width:106vw;bottom:0}.hero-final-logo img{max-height:16vh}}
@media (max-width:760px){.site-header{padding:16px var(--pad)}.logo img{width:108px}.hero-final-top{top:12px;font-size:8px}.hero-final-copy{top:24%;width:86vw}.hero-final h1{font-size:13.5vw;line-height:.86}.hero-final-copy p{font-size:12px;max-width:85%}.hero-final-contact{font-size:18px}.hero-final-reel{right:16px;top:70%}.hero-final-reel button{width:88px;height:88px}.hero-final-socials{bottom:22px;gap:16px}.hero-final-logo{width:126vw;bottom:10px}.hero-final-logo img{max-height:11.5vh}.hero-final-pulse{bottom:22px;height:34px}}


/* ===== V07 menu + hero + about institutional ===== */
.site-header{padding:18px var(--pad);align-items:center}
.site-header .site-meta{display:none !important}
.logo img{width:122px}
.menu-trigger{font:600 10px/1 "Space Grotesk",sans-serif;letter-spacing:.15em}

.menu-panel{background:#050505 !important;color:var(--off) !important;padding:18px var(--pad) 28px;overflow:auto}
.menu-panel-top{align-items:center;padding-bottom:16px;border-bottom:1px solid rgba(240,238,233,.12)}
.menu-panel-top img{width:144px}
.menu-panel-top button{color:var(--off);font:600 11px/1 "Space Grotesk",sans-serif;letter-spacing:.12em}
.menu-panel nav{margin:38px 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-content:start}
.menu-panel nav a{border-bottom:1px solid rgba(240,238,233,.12);padding:10px 0 12px;font-size:clamp(34px,5.3vw,72px);line-height:.9;color:var(--off)}
.menu-panel nav a span{color:rgba(240,238,233,.48)}

.hero-final{height:100svh;min-height:100svh;max-height:100svh}
.hero-final-top{position:absolute;z-index:7;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:26px;font:600 10px/1 "Space Grotesk",sans-serif;letter-spacing:.15em}
.hero-final-copy{top:22%;width:min(700px,62vw)}
.hero-final-kicker{font-size:10px}
.hero-final h1{font-size:clamp(66px,7.5vw,132px);line-height:.84}
.hero-final-copy p{max-width:500px;font-size:13px;margin-top:18px}
.hero-final-contact{margin-top:22px;font-size:clamp(16px,1.6vw,24px)}
.hero-final-reel{right:max(38px,var(--pad));top:53%}
.hero-final-socials{position:absolute;z-index:8;left:var(--pad);bottom:28px;display:flex;gap:18px}
.hero-final-socials a{text-decoration:none;font:600 8px/1 "Space Grotesk",sans-serif;letter-spacing:.12em;color:rgba(255,255,255,.72);transition:color .25s ease, transform .25s ease}
.hero-final-socials a:hover{color:#fff;transform:translateY(-2px)}
.hero-final-pulse{bottom:30px}

.about{min-height:auto;padding-bottom:110px}
.about-layout{padding:13vh var(--pad) 6vh;display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:start}
.about-feature{padding:0 var(--pad);display:grid;grid-template-columns:1.3fr .7fr;gap:4vw;align-items:center}
.about-feature-media{position:relative;border:0;background:none;padding:0;cursor:pointer;height:34vw;min-height:410px;max-height:640px;overflow:hidden}
.about-feature-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) brightness(.8)}
.about-feature-play{position:absolute;right:20px;bottom:20px;width:90px;height:90px;border:1px solid rgba(255,255,255,.42);border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 10px/1 "Space Grotesk",sans-serif;letter-spacing:.12em;color:#fff;background:rgba(0,0,0,.18)}
.about-feature-copy span{display:block;margin-bottom:12px;font:600 8px/1 "Space Grotesk",sans-serif;letter-spacing:.18em;color:#8a8a86}
.about-feature-copy h3{margin:0 0 18px;font-size:clamp(48px,5.8vw,96px);line-height:.88;letter-spacing:-.075em;font-weight:700}
.about-feature-copy p{margin:0 0 26px;font-size:16px;line-height:1.62;color:#a8a8a5;max-width:420px}
.about-feature-link{border:0;padding:0;background:none;color:#fff;font:700 12px/1 "Space Grotesk",sans-serif;letter-spacing:.12em;cursor:pointer}
.about-feature-link:hover,.about-feature-media:hover .about-feature-play{transform:translateY(-2px)}
.big-word{bottom:-1.8vw}

@media (max-width:1100px){
  .menu-panel nav{grid-template-columns:1fr;gap:0}
  .menu-panel nav a{font-size:clamp(30px,8vw,58px)}
  .hero-final-copy{width:min(640px,68vw)}
  .about-layout,.about-feature{grid-template-columns:1fr;gap:34px}
  .about-feature-media{height:58vw;min-height:340px}
}
@media (max-width:760px){
  .site-header{padding:16px var(--pad)}
  .logo img{width:106px}
  .menu-panel-top img{width:120px}
  .menu-panel nav{margin-top:26px}
  .menu-panel nav a{font-size:clamp(28px,10vw,44px)}
  .hero-final-top{top:12px;font-size:8px;gap:18px}
  .hero-final-copy{top:24%;width:86vw}
  .hero-final h1{font-size:13.6vw;line-height:.86}
  .hero-final-copy p{font-size:12px;max-width:85%}
  .hero-final-reel{right:16px;top:69%}
  .hero-final-reel button{width:88px;height:88px}
  .hero-final-socials{bottom:22px;gap:16px}
  .hero-final-pulse{bottom:22px;height:34px}
  .about-feature-media{height:74vw;min-height:300px}
  .about-feature-copy h3{font-size:clamp(40px,12vw,64px)}
}


/* =========================================================
   V08 — header glass + avo icons + about compact
========================================================= */
.site-header{
  position:fixed;
  top:16px;
  left:18px;
  right:18px;
  z-index:850;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:18px 22px;
  border-radius:18px;
  color:#f0eee9;
  background:transparent;
  border:1px solid transparent;
  mix-blend-mode:normal !important;
  transition:
    top .28s ease,
    padding .28s ease,
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    backdrop-filter .28s ease;
}
.site-header.is-compact{
  top:10px;
  padding:12px 16px;
  background:rgba(7,7,7,.54);
  border-color:rgba(240,238,233,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}
.site-header .site-meta{
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:26px;
  font:600 10px/1 "Space Grotesk",sans-serif;
  letter-spacing:.14em;
  color:#f0eee9;
}
.site-header .logo img{width:118px;display:block}
.site-header .menu-trigger{
  justify-self:end;
  border:0;
  background:none;
  color:#f0eee9;
  font:600 10px/1 "Space Grotesk",sans-serif;
  letter-spacing:.14em;
  cursor:pointer;
}
.hero-final{
  height:100svh;
  min-height:760px;
  max-height:100svh;
}
.hero-final-copy{
  top:26%;
  width:min(700px,62vw);
}
.hero-final h1{
  font-size:clamp(66px,7.2vw,128px);
  line-height:.84;
}
.hero-final-socials{
  position:absolute;
  z-index:8;
  left:var(--pad);
  bottom:28px;
  display:flex;
  gap:12px;
}
.hero-final-socials a{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(240,238,233,.22);
  background:rgba(7,7,7,.24);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f0eee9;
  text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, background .25s ease;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.hero-final-socials a:hover{
  transform:translateY(-2px);
  border-color:rgba(240,238,233,.5);
  background:rgba(240,238,233,.12);
}
.hero-final-socials svg{
  width:15px;
  height:15px;
  fill:currentColor;
}
.hero-final-pulse{bottom:26px}

.menu-panel{
  background:#050505 !important;
  color:#f0eee9 !important;
  padding:20px max(24px,4vw) 28px;
  overflow:auto;
}
.menu-panel-top{
  align-items:center;
  padding-bottom:16px;
  border-bottom:1px solid rgba(240,238,233,.12);
}
.menu-panel-top img{width:138px}
.menu-panel-top button{
  color:#f0eee9;
  border:0;
  background:none;
  font:600 11px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  cursor:pointer;
}
.menu-panel nav{
  margin:34px 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 42px;
  align-content:start;
}
.menu-panel nav a{
  color:#f0eee9;
  border-bottom:1px solid rgba(240,238,233,.12);
  padding:12px 0 14px;
  font-size:clamp(34px,5vw,68px);
  line-height:.9;
}
.menu-panel nav a span{
  color:rgba(240,238,233,.5);
}

.about{
  min-height:auto;
  padding:0 0 110px;
  overflow:hidden;
}
.about .section-tag{
  padding-top:118px;
}
.about-compact{
  padding:2vh var(--pad) 0;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  align-items:center;
  gap:4vw;
}
.about-compact-copy h2{
  margin:0 0 26px;
  font-size:clamp(44px,5.8vw,92px);
  line-height:.92;
  letter-spacing:-.07em;
  font-weight:600;
}
.about-compact-copy p{
  margin:0 0 18px;
  max-width:640px;
  font-size:16px;
  line-height:1.65;
  color:#a8a8a5;
}
.about-compact-copy strong{color:#fff}
.about-compact-media{
  position:relative;
  border:0;
  background:none;
  padding:0;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  cursor:pointer;
}
.about-compact-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.7) brightness(.84);
}
.about-feature-play{
  position:absolute;
  right:20px;
  bottom:20px;
  width:88px;
  height:88px;
  border-radius:50%;
  border:1px solid rgba(240,238,233,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font:600 10px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  background:rgba(8,8,8,.16);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.about-feature-link{
  margin-top:10px;
  border:0;
  background:none;
  padding:0;
  color:#fff;
  font:700 12px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  cursor:pointer;
}
.about-feature-link:hover,
.about-compact-media:hover .about-feature-play{
  transform:translateY(-2px);
}

@media (max-width: 1100px){
  .site-header{
    left:14px;
    right:14px;
    grid-template-columns:1fr auto auto;
    gap:18px;
  }
  .site-header .site-meta{gap:18px}
  .hero-final-copy{
    width:min(650px,72vw);
    top:25%;
  }
  .about-compact{
    grid-template-columns:1fr;
    gap:34px;
  }
}

@media (max-width: 760px){
  .site-header{
    top:10px;
    left:10px;
    right:10px;
    padding:12px 14px;
    border-radius:14px;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "logo menu"
      "meta meta";
    row-gap:10px;
  }
  .site-header .logo{grid-area:logo}
  .site-header .menu-trigger{grid-area:menu}
  .site-header .site-meta{
    grid-area:meta;
    justify-content:flex-start;
    gap:14px;
    font-size:8px;
  }
  .site-header .logo img{width:104px}
  .menu-panel{
    padding:16px 18px 28px;
  }
  .menu-panel nav{
    grid-template-columns:1fr;
    gap:0;
    margin-top:24px;
  }
  .menu-panel nav a{
    font-size:clamp(28px,10vw,44px);
  }
  .hero-final{
    min-height:100svh;
  }
  .hero-final-copy{
    top:27%;
    width:86vw;
  }
  .hero-final h1{
    font-size:13.6vw;
    line-height:.86;
  }
  .hero-final-copy p{
    max-width:92%;
    font-size:12px;
  }
  .hero-final-socials{
    left:var(--pad);
    bottom:22px;
  }
  .hero-final-socials a{
    width:32px;
    height:32px;
  }
  .hero-final-reel{
    right:16px;
    top:71%;
  }
  .hero-final-reel button{
    width:88px;
    height:88px;
  }
  .about .section-tag{
    padding-top:104px;
  }
  .about-compact{
    padding-top:8px;
  }
  .about-compact-copy h2{
    font-size:clamp(34px,10vw,56px);
  }
  .about-compact-copy p{
    font-size:14px;
    line-height:1.58;
  }
}


/* ===== V09 refinements ===== */
.site-header{
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  padding:20px clamp(18px,3vw,38px) !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.site-header::after{
  content:'';
  position:absolute;
  left:clamp(18px,3vw,38px);
  right:clamp(18px,3vw,38px);
  bottom:0;
  height:1px;
  background:rgba(240,238,233,.12);
}
.site-header.is-compact{
  padding:14px clamp(18px,3vw,38px) !important;
  background:rgba(5,5,5,.58) !important;
  box-shadow:none !important;
  border:0 !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
}
.site-header.is-compact::after{background:rgba(240,238,233,.08)}
.site-header .logo img{width:128px; transition:filter .25s ease, opacity .25s ease;}
.hero-final{
  height:100svh !important;
  min-height:680px !important;
  max-height:100svh !important;
}
.hero-final-copy{
  top:24% !important;
  width:min(640px,54vw) !important;
}
.hero-final h1{font-size:clamp(72px,7vw,122px) !important; line-height:.86 !important;}
.hero-final-socials{
  left:clamp(18px,3vw,38px) !important;
  bottom:34px !important;
  z-index:12 !important;
}
.hero-final-socials a{
  width:36px !important;
  height:36px !important;
  background:rgba(8,8,8,.34) !important;
  border-color:rgba(240,238,233,.28) !important;
}
.hero-final-pulse{bottom:34px !important;}
.hero-final-reel{top:60% !important; right:clamp(18px,3vw,38px) !important;}
.hero-final-reel button{background:rgba(7,7,7,.16)}

.about{padding:0 0 88px !important;}
.about .section-tag{padding-top:82px !important;}
.about-compact{
  padding:10px var(--pad) 0 !important;
  display:grid !important;
  grid-template-columns:1.05fr .95fr !important;
  gap:3.2vw !important;
  align-items:center !important;
}
.about-compact-media{order:1; aspect-ratio:16/10; min-height:380px !important;}
.about-compact-copy{order:2;}
.about-compact-copy h2{
  font-size:clamp(34px,4.3vw,64px) !important;
  line-height:.94 !important;
  margin:0 0 20px !important;
  max-width:520px;
}
.about-compact-copy p{
  font-size:15px !important;
  line-height:1.62 !important;
  margin:0 0 16px !important;
  max-width:520px;
}
.about-feature-link{margin-top:12px !important;}

@media (max-width: 1024px){
  .hero-final-copy{width:min(620px,58vw) !important; top:24% !important;}
  .hero-final h1{font-size:clamp(62px,7.5vw,104px) !important;}
  .hero-final-reel{top:62% !important;}
}
@media (max-width: 760px){
  .site-header{padding:14px 16px 12px !important;}
  .site-header::after{left:16px; right:16px;}
  .site-header .logo img{width:112px !important;}
  .site-header .site-meta{font-size:8px !important; gap:12px !important;}
  .hero-final{min-height:100svh !important;}
  .hero-final-copy{top:22% !important; width:86vw !important;}
  .hero-final h1{font-size:14vw !important;}
  .hero-final-copy p{max-width:92% !important; font-size:12px !important;}
  .hero-final-socials{bottom:22px !important; gap:10px !important;}
  .hero-final-socials a{width:34px !important; height:34px !important;}
  .hero-final-pulse{bottom:22px !important;}
  .hero-final-reel{top:auto !important; bottom:78px !important; right:16px !important;}
  .hero-final-reel button{width:84px !important; height:84px !important;}
  .about .section-tag{padding-top:68px !important;}
  .about-compact{grid-template-columns:1fr !important; gap:26px !important;}
  .about-compact-media{order:1; min-height:260px !important;}
  .about-compact-copy{order:2;}
  .about-compact-copy h2{font-size:clamp(32px,9vw,48px) !important; max-width:none;}
  .about-compact-copy p{font-size:14px !important; max-width:none;}
}


/* =========================================================
   V10 — HERO → ABOUT COVER TRANSITION
   ========================================================= */
.preloader{display:none !important}

.hero-final{
  position:sticky !important;
  top:0 !important;
  z-index:1 !important;
  height:100svh !important;
  min-height:680px !important;
  max-height:100svh !important;
  overflow:hidden !important;
}
.site-header{z-index:950 !important}

.hero-final h1{
  font-size:clamp(66px,6.8vw,116px) !important;
  line-height:.91 !important;
  letter-spacing:-.07em !important;
}
.hero-final h1 span{
  display:block !important;
  overflow:visible !important;
  padding-top:.08em !important;
  padding-bottom:.03em !important;
}
.hero-final-copy{
  top:25% !important;
  width:min(610px,52vw) !important;
}
.hero-final-kicker{margin-bottom:14px !important}
.hero-final-copy p{margin-top:16px !important}
.hero-final-contact{margin-top:18px !important}

.about{
  position:relative !important;
  z-index:5 !important;
  margin-top:0 !important;
  background:#080808 !important;
  min-height:100svh !important;
  box-shadow:0 -30px 80px rgba(0,0,0,.28);
  overflow:hidden !important;
}
.about .section-tag{
  padding-top:82px !important;
  padding-bottom:14px !important;
}
.about-compact{
  min-height:calc(100svh - 112px) !important;
  padding:0 var(--pad) 56px !important;
  grid-template-columns:1.08fr .92fr !important;
  gap:3.4vw !important;
  align-items:center !important;
}
.about-compact-media{
  width:100% !important;
  aspect-ratio:16/10 !important;
  min-height:0 !important;
  max-height:none !important;
  transform:translateY(56px) scale(.96);
  opacity:.25;
  transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s ease;
}
.about-compact-copy{
  transform:translateY(44px);
  opacity:.25;
  transition:transform 1s .08s cubic-bezier(.16,1,.3,1),opacity .8s .08s ease;
}
.about.is-entered .about-compact-media,
.about.is-entered .about-compact-copy{
  transform:translateY(0) scale(1);
  opacity:1;
}
.about-compact-copy h2{
  font-size:clamp(34px,3.8vw,56px) !important;
  line-height:.96 !important;
  letter-spacing:-.06em !important;
  max-width:540px !important;
  margin:0 0 20px !important;
}
.about-compact-copy p{
  font-size:15px !important;
  line-height:1.58 !important;
  margin:0 0 14px !important;
  max-width:520px !important;
}

.hero-final-socials{
  bottom:max(26px, env(safe-area-inset-bottom)) !important;
  z-index:20 !important;
}
.hero-final-pulse{
  bottom:max(28px, env(safe-area-inset-bottom)) !important;
}

.hero-final-media,
.hero-final-copy,
.hero-final-reel,
.hero-final-socials{
  will-change:transform,opacity;
}

@media (max-width:1100px){
  .hero-final h1{
    font-size:clamp(58px,7vw,96px) !important;
    line-height:.92 !important;
  }
  .hero-final-copy{
    width:min(570px,60vw) !important;
    top:25% !important;
  }
  .about-compact{
    grid-template-columns:1.04fr .96fr !important;
    gap:28px !important;
  }
  .about-compact-copy h2{
    font-size:clamp(32px,4.2vw,48px) !important;
  }
}

@media (max-width:760px){
  .hero-final{
    position:relative !important;
    min-height:100svh !important;
  }
  .hero-final-copy{
    top:24% !important;
    width:86vw !important;
  }
  .hero-final h1{
    font-size:13.6vw !important;
    line-height:.94 !important;
  }
  .hero-final h1 span{
    padding-top:.1em !important;
  }
  .about{
    min-height:auto !important;
  }
  .about .section-tag{
    padding-top:72px !important;
  }
  .about-compact{
    min-height:auto !important;
    grid-template-columns:1fr !important;
    gap:26px !important;
    padding-bottom:72px !important;
  }
  .about-compact-copy h2{
    font-size:clamp(32px,9vw,48px) !important;
  }
}


/* ===== V11 fixes ===== */
/* Official gold logo rendered from the vector white master */
.site-header .logo{display:flex;align-items:center;min-width:132px}
.site-header .logo img{display:block;width:126px;height:auto;opacity:1!important;visibility:visible!important}

/* Lift AVO-style social buttons so they never kiss the viewport edge */
.hero-final-socials{bottom:54px!important}
.hero-final-pulse{bottom:42px!important}

/* Modern masked word reveal on fold 2 */
.about-title-reveal{
  opacity:1!important;
  transform:none!important;
  overflow:visible;
}
.about-title-reveal .word-mask{
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
  margin-right:.20em;
  padding-top:.08em;
  margin-top:-.08em;
}
.about-title-reveal .word-inner{
  display:inline-block;
  transform:translateY(115%) rotate(1.5deg);
  filter:blur(6px);
  opacity:0;
  will-change:transform,filter,opacity;
}
.about.is-entered .about-title-reveal .word-inner{
  animation:wordRevealV11 .82s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(var(--i) * 54ms + 90ms);
}
@keyframes wordRevealV11{
  0%{transform:translateY(115%) rotate(1.5deg);filter:blur(6px);opacity:0}
  100%{transform:translateY(0) rotate(0);filter:blur(0);opacity:1}
}
.about-compact-copy{will-change:transform}

@media(max-width:760px){
 .site-header .logo{min-width:110px}.site-header .logo img{width:108px}
 .hero-final-socials{bottom:42px!important}
 .hero-final-pulse{bottom:30px!important}
}


/* =========================================================
   V12 — LOCKED HERO + SOLUTIONS + PROJECTS
   ========================================================= */

/* Hero remains visually fixed; only the next section covers it */
.hero-final{
  position:sticky !important;
  top:0 !important;
}
.hero-final-media,
.hero-final-copy,
.hero-final-reel,
.hero-final-socials{
  transform:none !important;
}
.hero-final-media{
  inset:-5% !important;
}
.hero-final-copy{
  margin-left:0 !important;
}
.hero-final-reel{
  transform:translateY(-50%) !important;
}

/* Third fold — Solutions */
.services-v12{
  position:relative;
  z-index:6;
  min-height:100svh;
  padding-bottom:54px;
}
.solutions-v12-head{
  padding:7vh var(--pad) 7vh;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:7vw;
  align-items:end;
}
.solutions-v12-head h2{
  margin:0;
  font-size:clamp(48px,5.8vw,92px);
  line-height:.91;
  letter-spacing:-.07em;
  font-weight:600;
}
.solutions-v12-head p{
  margin:0;
  max-width:520px;
  color:#575650;
  font-size:15px;
  line-height:1.62;
}
.solutions-v12-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin:0 var(--pad);
  border-top:1px solid #c8c5bf;
  border-left:1px solid #c8c5bf;
}
.solution-territory{
  min-height:440px;
  position:relative;
  padding:24px;
  border-right:1px solid #c8c5bf;
  border-bottom:1px solid #c8c5bf;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  transition:color .45s cubic-bezier(.16,1,.3,1);
}
.solution-territory::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:#090909;
  transform:translateY(101%);
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.solution-territory:hover::before{transform:translateY(0)}
.solution-territory>*{position:relative;z-index:1}
.solution-territory:hover{color:#f0eee9}
.solution-number{
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
  color:#77736c;
}
.solution-copy span{
  display:block;
  margin-bottom:14px;
  font:600 8px/1 "Space Grotesk",sans-serif;
  letter-spacing:.16em;
  color:#77736c;
}
.solution-copy h3{
  margin:0 0 20px;
  font-size:clamp(29px,3vw,46px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:500;
}
.solution-copy p{
  margin:0;
  max-width:380px;
  color:#5b5954;
  font-size:13px;
  line-height:1.55;
}
.solution-territory:hover .solution-copy p,
.solution-territory:hover .solution-copy span,
.solution-territory:hover .solution-number{color:#aaa7a1}
.solution-territory>i{
  align-self:flex-end;
  font-style:normal;
  font-size:27px;
  font-weight:400;
}
.solutions-v12-cta{
  margin:44px var(--pad) 0;
  display:flex;
  justify-content:center;
}
.solutions-v12-cta a{
  color:#090909;
  text-decoration:none;
  font-size:clamp(24px,3vw,46px);
  line-height:1;
  letter-spacing:-.05em;
  font-weight:600;
  border-bottom:2px solid #090909;
  padding-bottom:5px;
}

/* Fourth fold — Projects */
.portfolio-v12{
  position:relative;
  z-index:7;
  min-height:100svh;
  padding-bottom:80px;
}
.projects-v12-head{
  padding:7vh var(--pad) 6vh;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
}
.projects-v12-head h2{
  margin:0;
  font-size:clamp(48px,5.8vw,92px);
  line-height:.91;
  letter-spacing:-.07em;
  font-weight:600;
}
.projects-v12-head>a{
  color:#fff;
  text-decoration:none;
  padding-bottom:5px;
  border-bottom:1px solid #777;
  font:600 9px/1 "Space Grotesk",sans-serif;
  letter-spacing:.12em;
}
.projects-v12-grid{
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.project-v12-media{
  position:relative;
  width:100%;
  height:48vh;
  min-height:400px;
  border:0;
  padding:0;
  background:#111;
  overflow:hidden;
  cursor:pointer;
}
.project-v12-media img{
  width:100%;
  height:108%;
  object-fit:cover;
  filter:saturate(.72) contrast(1.05);
  transition:transform .7s cubic-bezier(.16,1,.3,1),filter .45s;
}
.project-v12-media:hover img{
  transform:scale(1.045);
  filter:saturate(.88) contrast(1.06);
}
.project-v12-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.10) 48%,rgba(0,0,0,.64));
}
.project-v12-media>b{
  position:absolute;
  top:17px;
  left:17px;
  font:600 9px/1 "Space Grotesk";
  color:#fff;
}
.project-v12-play{
  position:absolute;
  right:18px;
  bottom:18px;
  width:72px;
  height:72px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.48);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font:600 8px/1 "Space Grotesk";
  letter-spacing:.1em;
  background:rgba(0,0,0,.14);
  backdrop-filter:blur(6px);
}
.project-v12-copy{
  padding:17px 0 0;
  display:grid;
  grid-template-columns:1fr;
}
.project-v12-copy>span{
  font:600 8px/1 "Space Grotesk";
  letter-spacing:.15em;
  color:#777;
}
.project-v12-copy h3{
  margin:10px 0 12px;
  font-size:clamp(35px,4vw,64px);
  line-height:.89;
  letter-spacing:-.065em;
  font-weight:600;
}
.project-v12-copy p{
  margin:0;
  max-width:550px;
  font-size:13px;
  line-height:1.55;
  color:#999;
}
.projects-v12-footer{
  margin:55px var(--pad) 0;
  padding-top:22px;
  border-top:1px solid #292929;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font:600 9px/1 "Space Grotesk";
  letter-spacing:.1em;
  color:#727272;
}
.projects-v12-footer a{
  color:#fff;
  text-decoration:none;
}

/* Entry animation for the solution cards */
.reveal-card{
  opacity:0;
  transform:translateY(42px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);
}
.reveal-card.visible{
  opacity:1;
  transform:translateY(0);
}

@media(max-width:980px){
  .solutions-v12-head{
    grid-template-columns:1fr;
    gap:34px;
  }
  .solutions-v12-grid{
    grid-template-columns:1fr;
  }
  .solution-territory{
    min-height:300px;
  }
  .projects-v12-grid{
    grid-template-columns:1fr;
    gap:58px;
  }
  .project-v12-media{
    height:60vw;
    min-height:360px;
  }
}
@media(max-width:650px){
  .projects-v12-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .solutions-v12-head h2,
  .projects-v12-head h2{
    font-size:12vw;
  }
  .project-v12-media{
    height:76vw;
    min-height:300px;
  }
  .projects-v12-footer{
    flex-direction:column;
    line-height:1.5;
  }
}


/* =========================================================
   V13 — HERO CTA + MENU HOVER/ACTIVE FEEDBACK
   ========================================================= */

.hero-final-contact{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px 10px 0;
  color:#f2efe8;
  text-decoration:none;
  font-weight:600;
  letter-spacing:-.03em;
  transition:transform .35s cubic-bezier(.16,1,.3,1), color .35s ease;
}

.hero-final-contact::before{
  content:"";
  position:absolute;
  left:-14px;
  top:50%;
  width:0;
  height:42px;
  transform:translateY(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, rgba(207,183,126,.25), rgba(255,255,255,.08));
  transition:width .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
  opacity:.8;
  z-index:0;
}

.hero-final-contact::after{
  content:"";
  position:absolute;
  left:0;
  bottom:1px;
  width:0;
  height:2px;
  background:linear-gradient(90deg, #d2bc8e, #f2efe8);
  transition:width .4s cubic-bezier(.16,1,.3,1);
}

.hero-final-contact span,
.hero-final-contact strong,
.hero-final-contact{
  position:relative;
  z-index:1;
}

.hero-final-contact:hover{
  color:#ffffff;
  transform:translateX(6px);
}

.hero-final-contact:hover::before{
  width:calc(100% + 18px);
}

.hero-final-contact:hover::after{
  width:100%;
}

.hero-final-contact .cta-arrow,
.hero-final-contact::marker{display:none}

.hero-final-contact .contact-arrow{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  font-size:14px;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, background .35s ease;
}

.hero-final-contact:hover .contact-arrow{
  transform:translateX(4px) rotate(-8deg);
  border-color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.06);
}

/* pulse only on hero CTA */
@keyframes cineosPulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(210,188,142,0); }
  50% { box-shadow:0 0 0 10px rgba(210,188,142,.06); }
}
.hero-final-contact:hover .contact-arrow{
  animation:cineosPulse 1.25s ease infinite;
}

/* Menu hover / active */
.menu-panel nav a,
.menu-nav-link{
  position:relative;
  transition:transform .35s cubic-bezier(.16,1,.3,1), color .25s ease, opacity .25s ease;
}

.menu-panel nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:8px;
  width:0;
  height:2px;
  background:#f2efe8;
  transition:width .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  opacity:.85;
}

.menu-panel nav a:hover,
.menu-panel nav a.is-active{
  color:#ffffff;
  transform:translateX(10px);
}

.menu-panel nav a:hover::after,
.menu-panel nav a.is-active::after{
  width:clamp(60px, 22%, 180px);
}

.menu-panel nav a span{
  transition:opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1), color .25s ease;
}

.menu-panel nav a:hover span,
.menu-panel nav a.is-active span{
  opacity:1;
  color:#d6c091;
  transform:translateX(4px);
}

.menu-panel nav:hover a{
  opacity:.68;
}
.menu-panel nav:hover a:hover,
.menu-panel nav:hover a.is-active{
  opacity:1;
}

/* smaller screens */
@media (max-width: 768px){
  .menu-panel nav a:hover,
  .menu-panel nav a.is-active{
    transform:translateX(6px);
  }
}