:root{
  --bg:#050505;
  --panel:#0b0b0b;
  --text:#fff;
  --muted:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.12);
  --ease:cubic-bezier(.16,1,.3,1);
  --font-body:"Inter",Arial,sans-serif;
  --font-heading:"Montserrat",Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  width:100%;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  scrollbar-gutter:stable;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
body{
  width:100%;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  overflow-x:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
button,a{font:inherit}
button{border:0}

/* =========================================================
   LOCKED 21CENTS TYPOGRAPHY
   Body/interface text: Inter
   Headings/display text: Montserrat
========================================================= */
body,
button,
input,
textarea,
select,
p,
a,
span,
small,
label{
  font-family:var(--font-body);
}

h1,h2,h3,h4,h5,h6,
.hero h1,
.section-head h2,
.feature-copy h2,
.story-card h3,
.capability h3,
.work-card h3,
.final-cta h2,
.footer h3{
  font-family:var(--font-heading);
}
/* =========================================================
   LIGHTWEIGHT AMBIENT GATEWAY ATMOSPHERE
   No video. No image. Pure CSS motion.
========================================================= */
.cinematic-video{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:#050505;
  isolation:isolate;
}
.cinematic-video::before,
.cinematic-video::after{
  content:"";
  position:absolute;
  width:58vmax;
  height:58vmax;
  border-radius:50%;
  pointer-events:none;
  will-change:transform;
}
.cinematic-video::before{
  left:-20vmax;
  top:-18vmax;
  background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(255,255,255,.028) 34%,transparent 68%);
  animation:ambientDriftOne 18s var(--ease) infinite alternate;
}
.cinematic-video::after{
  right:-24vmax;
  bottom:-22vmax;
  background:radial-gradient(circle,rgba(255,255,255,.075) 0%,rgba(255,255,255,.018) 38%,transparent 70%);
  animation:ambientDriftTwo 23s var(--ease) infinite alternate;
}
.gateway-video{display:none!important;}
.ambient-core{
  position:absolute;
  inset:18%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.055),rgba(255,255,255,.012) 42%,transparent 72%);
  filter:blur(18px);
  opacity:.9;
  transform:translateZ(0);
  will-change:transform;
  animation:ambientBreathe 14s ease-in-out infinite alternate;
}
.cinematic-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 46%,transparent 0%,rgba(0,0,0,.12) 52%,rgba(0,0,0,.62) 100%),
    linear-gradient(120deg,rgba(0,0,0,.58),rgba(255,255,255,.018) 50%,rgba(0,0,0,.58));
}
.glass-atmosphere{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.025),rgba(255,255,255,.006) 45%,rgba(255,255,255,.018));
}
.glass-atmosphere::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  background-image:radial-gradient(rgba(255,255,255,.18) .45px,transparent .65px);
  background-size:6px 6px;
}
@keyframes ambientDriftOne{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(12vw,8vh,0) scale(1.18)}
}
@keyframes ambientDriftTwo{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-10vw,-9vh,0) scale(1.16)}
}
@keyframes ambientBreathe{
  from{transform:scale(.92) translate3d(-1%,1%,0);opacity:.55}
  to{transform:scale(1.12) translate3d(2%,-2%,0);opacity:1}
}
/* Each option briefly changes the atmosphere without changing the UI itself. */
.intent-screen[data-mood="m1"] .cinematic-video::before{transform:translate3d(9vw,5vh,0) scale(1.28)!important;}
.intent-screen[data-mood="m2"] .cinematic-video::after{transform:translate3d(-12vw,-8vh,0) scale(1.3)!important;}
.intent-screen[data-mood="m3"] .ambient-core{transform:scale(1.35)!important;opacity:1;}
.intent-screen[data-mood="m4"] .cinematic-video::before{opacity:.55;transform:translate3d(16vw,-4vh,0) scale(1.05)!important;}
.intent-screen[data-mood="m5"] .cinematic-video::after{opacity:.95;transform:translate3d(-18vw,4vh,0) scale(1.38)!important;}

.intent-screen{
  position:relative;width:100%;height:100vh;height:100svh;
  min-height:560px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:30px;
}
.background-glow{
  position:absolute;width:min(70vw,1000px);height:min(70vw,1000px);border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.085),rgba(255,255,255,.025) 35%,transparent 70%);
  filter:blur(40px);pointer-events:none;z-index:1;
}
.logo{position:absolute;top:35px;left:45px;color:#fff;font-size:20px;font-weight:700;letter-spacing:-.06em;z-index:4;text-decoration:none}
.logo span{opacity:.35}
.intent-container{width:100%;max-width:980px;text-align:center;position:relative;z-index:3;padding:95px 0}
.intent-label{font-size:10px;font-weight:600;letter-spacing:.30em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:38px}
.intent-options{display:flex;flex-direction:column;align-items:center;gap:7px}
.intent{
  position:relative;border:none;background:transparent;color:rgba(255,255,255,.44);
  font-family:inherit;font-size:clamp(26px,3.4vw,50px);font-weight:600;
  letter-spacing:-.055em;line-height:1.08;cursor:pointer;padding:12px 30px;border-radius:100px;
  transition:transform .7s var(--ease),color .6s ease,opacity .6s ease,background .7s var(--ease),box-shadow .7s ease,filter .6s ease;
}
.intent::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.11);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transform:scale(.86);transition:opacity .6s ease,transform .7s var(--ease);
}
.intent span{position:relative;z-index:2}
.intent:hover,.intent:focus-visible{color:#fff;transform:scale(1.17);outline:none;box-shadow:0 25px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.18)}
.intent:hover::before,.intent:focus-visible::before{opacity:1;transform:scale(1)}
.intent-options:hover .intent:not(:hover){opacity:.22;transform:scale(.90)}
.intent-options:hover .intent:hover + .intent{transform:translateY(7px) scale(.90)}
.intent-options:hover .intent:has(+ .intent:hover){transform:translateY(-7px) scale(.90)}
.bottom-note{position:absolute;z-index:3;bottom:35px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.25);white-space:nowrap}
.back-gateway{position:absolute;z-index:4;top:34px;right:42px;background:transparent;color:rgba(255,255,255,.55);cursor:pointer;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:10px}
.back-gateway:hover{color:#fff}

/* Destination pages */
.destination{background:#fff;color:#111;min-height:100vh}
.site-nav{position:sticky;top:0;z-index:20;height:78px;background:rgba(255,255,255,.86);backdrop-filter:blur(18px);border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,78px)}
.site-brand{font-weight:800;font-size:21px;letter-spacing:-.07em;color:#111;text-decoration:none}.site-brand span{opacity:.35}
.site-links{display:flex;gap:28px;align-items:center}.site-links a{font-size:13px;color:#444;text-decoration:none}.site-links a:hover{color:#000}
.hero{min-height:86vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;padding:80px clamp(22px,8vw,130px);background:#f5f5f3}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#777;margin-bottom:22px}
.hero h1{font-size:clamp(54px,7vw,112px);line-height:.9;letter-spacing:-.075em;max-width:800px}
.hero p{font-size:clamp(18px,2vw,25px);line-height:1.45;color:#555;max-width:650px;margin:32px 0}
.hero-cta{display:inline-flex;align-items:center;gap:12px;background:#111;color:#fff;padding:16px 24px;border-radius:100px;text-decoration:none;font-size:14px}
.hero-image{height:min(62vw,680px);min-height:440px;border-radius:28px;background-size:cover;background-position:center;box-shadow:0 30px 80px rgba(0,0,0,.16)}
.section{padding:clamp(80px,12vw,160px) clamp(22px,8vw,130px)}
.section.dark{background:#111;color:#fff}.section.soft{background:#f4f4f1}
.section-head{max-width:900px;margin-bottom:65px}.section-head h2{font-size:clamp(40px,5vw,78px);line-height:.98;letter-spacing:-.065em}.section-head p{font-size:19px;line-height:1.6;color:#666;margin-top:24px;max-width:720px}.dark .section-head p{color:rgba(255,255,255,.62)}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.story-card{padding:34px;border-radius:24px;background:#fff;border:1px solid #e8e8e8;min-height:270px}.dark .story-card{background:#191919;border-color:#292929}.story-card .num{font-size:12px;color:#888;margin-bottom:50px}.story-card h3{font-size:28px;letter-spacing:-.045em;margin-bottom:14px}.story-card p{font-size:16px;line-height:1.6;color:#666}.dark .story-card p{color:#aaa}
.feature{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.feature.reverse .feature-image{order:2}.feature-image{height:580px;border-radius:28px;background-size:cover;background-position:center}.feature-copy h2{font-size:clamp(40px,5vw,74px);line-height:.98;letter-spacing:-.065em}.feature-copy p{font-size:18px;line-height:1.7;color:#666;margin-top:28px}
.capability-list{border-top:1px solid #ddd}.capability{display:grid;grid-template-columns:110px 1fr auto;gap:25px;padding:30px 0;border-bottom:1px solid #ddd;align-items:center}.capability small{color:#888}.capability h3{font-size:clamp(24px,3vw,42px);letter-spacing:-.05em}.capability p{color:#666;max-width:520px;line-height:1.55}
.work-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.work-card{min-height:430px;border-radius:22px;overflow:hidden;position:relative;background:#222;background-size:cover;background-position:center}.work-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.78))}.work-card div{position:absolute;z-index:2;bottom:28px;left:28px;right:28px;color:#fff}.work-card h3{font-size:28px;letter-spacing:-.04em}.work-card p{margin-top:8px;color:rgba(255,255,255,.72);line-height:1.5}
.hybrid-note{padding:22px 0;color:#777;font-size:13px}
.final-cta{padding:clamp(100px,14vw,190px) clamp(22px,8vw,130px);background:#d9ff4d;color:#111;text-align:center}.final-cta h2{font-size:clamp(50px,8vw,120px);line-height:.88;letter-spacing:-.075em;max-width:1000px;margin:auto}.final-cta p{font-size:20px;line-height:1.55;max-width:620px;margin:30px auto}.final-cta a{display:inline-block;margin-top:15px;background:#111;color:#fff;text-decoration:none;border-radius:100px;padding:18px 28px}
.footer{background:#111;color:#fff;padding:70px clamp(22px,8vw,130px);display:flex;justify-content:space-between;gap:40px}.footer h3{font-size:30px;letter-spacing:-.05em}.footer p{color:#888;margin-top:12px;line-height:1.5}.footer a{color:#fff;text-decoration:none;display:block;margin-bottom:10px;font-size:14px}
.page-transition{animation:pageIn .65s var(--ease)}@keyframes pageIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(max-width:800px){
 .intent-screen{min-height:100svh;padding:20px}.logo{top:25px;left:25px}.intent-container{padding:85px 0}.intent{font-size:clamp(28px,8vw,44px);padding:13px 20px}.intent-label{margin-bottom:30px}.bottom-note{bottom:22px;font-size:8px;white-space:normal;width:90%;text-align:center}.back-gateway{top:20px;right:15px}
 .site-links{display:none}.hero,.feature{grid-template-columns:1fr;gap:36px}.hero{padding-top:70px;min-height:auto}.hero-image{height:62vh;min-height:360px}.story-grid,.work-strip{grid-template-columns:1fr}.feature.reverse .feature-image{order:0}.feature-image{height:420px}.capability{grid-template-columns:55px 1fr}.capability p{grid-column:2}.footer{display:block}.footer>div+div{margin-top:40px}
}

/* =========================================================
   21CENTS CINEMATIC INTRO
   ========================================================= */
.intro-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
  overflow:hidden;
  pointer-events:none;
}

.intro-word{
  color:#fff;
  font-family:var(--font-body);
  font-size:clamp(54px,12vw,220px);
  font-weight:800;
  letter-spacing:-.09em;
  line-height:.8;
  opacity:0;
  transform:scale(.72);
  will-change:transform,opacity,filter;
  animation:introWord 2.9s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes introWord{
  0%{
    opacity:0;
    transform:scale(.72);
    filter:blur(8px);
  }
  14%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
  38%{
    opacity:1;
    transform:scale(1.08);
  }
  78%{
    opacity:1;
    transform:scale(8);
    filter:blur(0);
  }
  100%{
    opacity:0;
    transform:scale(15);
    filter:blur(2px);
  }
}

#app{
  opacity:0;
  transition:opacity 1s cubic-bezier(.16,1,.3,1);
}

body.intro-complete #app{
  opacity:1;
}

body.intro-complete .intro-loader{
  opacity:0;
  visibility:hidden;
  transition:opacity .65s ease,visibility .65s step-end;
}

/* =========================================================
   CLEAN 21CENTS OPTION INTERACTION
   No border. No glass. No background. Only movement.
   ========================================================= */
.intent{
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:rgba(255,255,255,.48);
  padding:13px 34px;
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    color .55s ease,
    opacity .55s ease,
    filter .55s ease !important;
}

.intent::before{
  display:none !important;
  content:none !important;
}

.intent:hover,
.intent:focus-visible{
  color:#fff !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:scale(1.20) !important;
}

.intent-options:hover .intent:not(:hover){
  opacity:.20;
  transform:scale(.88);
  filter:blur(.2px);
}

/* Smooth breathing space around the active option */
.intent-options:hover .intent:hover + .intent{
  transform:translateY(14px) scale(.88);
}

.intent-options:hover .intent:has(+ .intent:hover){
  transform:translateY(-14px) scale(.88);
}

/* When an option is clicked */
.intent.selected{
  color:#fff !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:scale(1.20) !important;
}

.intent.selected::before{
  display:none !important;
}

/* Strict monochrome CTA correction */
.final-cta{
  background:#fff !important;
  color:#050505 !important;
  border-top:1px solid #ddd;
}

.final-cta a{
  background:#050505 !important;
  color:#fff !important;
}

@media(max-width:800px){
  .intent{
    padding:14px 18px;
  }

  .intent:hover,
  .intent:focus-visible{
    transform:scale(1.12) !important;
  }

  .intro-word{
    font-size:clamp(52px,18vw,110px);
  }
}

@media(prefers-reduced-motion:reduce){
  .intro-word{animation:none;opacity:1;transform:none}
  .intro-loader{display:none}
  #app{opacity:1}
}



/* =========================================================
   MOBILE FULL-SCREEN MENU
========================================================= */
.menu-toggle{display:none;width:44px;height:44px;background:transparent;border:0;cursor:pointer;position:relative;z-index:30;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:6px}
.menu-toggle span{display:block;width:22px;height:1.5px;background:#111;transition:transform .45s var(--ease),opacity .35s ease}
.mobile-menu{position:fixed;inset:0;z-index:999;background:rgba(250,250,248,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s step-end}
.mobile-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .45s ease}
.mobile-menu-top{height:88px;padding:0 clamp(24px,6vw,48px);display:flex;align-items:center;justify-content:space-between}
.mobile-menu-brand{font-family:var(--font-body);font-weight:800;font-size:22px;letter-spacing:-.07em;color:#111;text-decoration:none}.mobile-menu-brand span{opacity:.35}
.menu-close{width:44px;height:44px;border:0;background:transparent;cursor:pointer;position:relative}.menu-close span{position:absolute;top:50%;left:50%;width:24px;height:1.5px;background:#111}.menu-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}.menu-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
.mobile-menu-nav{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 24px}.mobile-menu-nav a{font-family:var(--font-heading);font-size:clamp(38px,11vw,68px);font-weight:600;letter-spacing:-.065em;color:#111;text-decoration:none;line-height:1;transition:transform .45s var(--ease),opacity .35s ease}.mobile-menu-nav:hover a:not(:hover){opacity:.28}.mobile-menu-nav a:hover{transform:scale(1.06)}
.mobile-menu-socials{min-height:94px;display:flex;align-items:center;justify-content:center;gap:24px;padding:20px 24px 34px}.mobile-menu-socials a{width:38px;height:38px;border:1px solid rgba(0,0,0,.2);border-radius:50%;display:grid;place-items:center;color:#111;text-decoration:none;font-family:var(--font-body);font-size:14px;font-weight:600;transition:transform .35s var(--ease),background .35s ease,color .35s ease}.mobile-menu-socials a:hover{transform:scale(1.08);background:#111;color:#fff}
body.menu-open{overflow:hidden!important}

@media(max-width:1024px){
  .site-links{display:none!important}
  .menu-toggle{display:flex}
  .site-nav{height:74px}
}


/* =========================================================
   FINAL NAVIGATION RULES — DO NOT CHANGE PAGE LAYOUT
   Mobile + tablet: hamburger opens full-screen menu
   Desktop: normal inline navigation only
========================================================= */
@media (max-width:1024px){
  .site-links{display:none!important}
  .menu-toggle{display:flex!important}
  .mobile-menu{
    display:flex!important;
    position:fixed!important;
    inset:0!important;
  }
}

@media (min-width:1025px){
  .menu-toggle{display:none!important}
  .site-links{display:flex!important}
  .mobile-menu{display:none!important}
}


/* =========================================================
   21CENTS — FINAL LOCKED NAVIGATION
   Desktop: normal inline navigation.
   Mobile + tablet: logo + hamburger only.
   Full-screen menu appears ONLY after hamburger click.
========================================================= */

/* Typography lock */
html, body, button, input, textarea, select, p, a, span, small, label{
  font-family:"Inter", Arial, sans-serif !important;
}
h1,h2,h3,h4,h5,h6{
  font-family:"Montserrat", Arial, sans-serif !important;
}

/* Desktop first */
.site-links{
  display:flex !important;
}
.menu-toggle{
  display:none !important;
}
.mobile-menu{
  display:none !important;
}

/* Mobile + tablet */
@media (max-width:1024px){
  .site-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:74px !important;
  }

  .site-links{
    display:none !important;
  }

  .menu-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Hidden until the hamburger is clicked */
  .mobile-menu{
    display:flex !important;
    position:fixed !important;
    inset:0 !important;
    z-index:10000 !important;
    flex-direction:column !important;
    background:rgba(250,250,248,.98) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  .mobile-menu.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }

  .mobile-menu-top{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex:0 0 74px !important;
    padding:0 24px !important;
  }

  .mobile-menu-nav{
    display:flex !important;
    flex:1 1 auto !important;
    align-items:center !important;
    justify-content:center !important;
    flex-direction:column !important;
    gap:20px !important;
  }

  .mobile-menu-socials{
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    padding:22px 24px 34px !important;
  }
}

/* Keep desktop completely separate from the mobile overlay */
@media (min-width:1025px){
  .site-links{
    display:flex !important;
  }
  .menu-toggle,
  .mobile-menu{
    display:none !important;
  }
}