/* ============================================================
   XR DOJO — Immersive Creative Agency
   Cinematic forest-dojo aesthetic
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* color */
  --ink:        #060a07;
  --forest-900: #08110b;
  --forest-800: #0d1c13;
  --forest-700: #133021;
  --forest-600: #1b4730;
  --moss:       #3f7d57;
  --jade:       #5fd49a;
  --jade-soft:  #8fe3b8;
  --amber:      #e9a23b;
  --amber-soft: #f4c777;
  --seal:       #cf5a40;
  --washi:      #ece4d3;
  --washi-dim:  #ada792;
  --stone:      #6f7468;

  /* type */
  --font-display: "Cinzel", Georgia, serif;
  --font-zen:     "Shippori Mincho", Georgia, serif;
  --font-ui:      "Sora", system-ui, -apple-system, sans-serif;

  /* layout */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 80px);

  /* z-scale */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 40;
  --z-overlay: 60;
  --z-pre: 90;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  font-family:var(--font-ui);
  background:var(--ink);
  color:var(--washi);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
::selection{ background:var(--jade); color:var(--ink); }
:focus-visible{ outline:2px solid var(--jade); outline-offset:3px; border-radius:3px; }

/* ---------- Global FX overlays ---------- */
.fx-grain,.fx-vignette,.fx-particles{ position:fixed; inset:0; pointer-events:none; }
.fx-grain{
  z-index:var(--z-overlay); opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-vignette{
  z-index:var(--z-overlay);
  background:radial-gradient(135% 130% at 50% 50%, transparent 70%, rgba(0,0,0,.45) 100%);
}
.fx-particles{ z-index:5; }

/* ============================================================
   INTRO / PRELOADER  (Japanese 道場 → XR Dojo logo)
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:var(--z-pre);
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, #0b1611, var(--ink) 72%);
  transition:opacity 1s var(--ease), visibility 1s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }

.intro{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.intro__stage{
  position:relative; width:min(60vw,300px); height:min(70vh,440px);
  display:grid; place-items:center;
}

/* ink-wash stain that blooms behind the kanji */
.intro__inkwash{
  position:absolute; width:120%; height:120%; border-radius:50%;
  background:radial-gradient(circle, rgba(143,227,184,.12), rgba(6,10,7,0) 62%);
  opacity:0; transform:scale(.6); filter:blur(8px); pointer-events:none;
}

/* 道場 — vertical, brushed-in */
.intro__kanji{
  position:absolute; display:flex; flex-direction:column; align-items:center;
  gap:min(2.2vh,16px); line-height:1;
  font-family:var(--font-zen); font-weight:600;
  font-size:clamp(76px,16vh,150px); color:var(--washi);
  text-shadow:0 0 40px rgba(143,227,184,.25), 0 6px 30px rgba(0,0,0,.6);
}
.intro__kanji span{ display:block; opacity:0; }

/* the XR Dojo logo it transforms into */
.intro__logo{
  position:absolute; height:clamp(220px,46vh,420px); width:clamp(138px,28.9vh,264px);
  max-width:none; object-fit:contain; opacity:0;
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.55));
}

/* red hanko-seal flash at the transform moment */
.intro__seal{
  position:absolute; width:84px; height:84px; border-radius:14px;
  background:radial-gradient(circle, rgba(200,48,43,.5), rgba(200,48,43,0) 70%);
  opacity:0; transform:scale(.4); pointer-events:none;
}

/* iaido light-sweep blade cut */
.intro__sweep{
  position:absolute; top:-8%; left:0; height:116%; width:14%;
  background:linear-gradient(90deg, transparent, rgba(236,228,211,.85) 45%, rgba(143,227,184,.9) 55%, transparent);
  filter:blur(6px); mix-blend-mode:screen; opacity:0;
  transform:translateX(-260%) skewX(-12deg);
}

.intro__romaji{
  font-family:var(--font-ui); font-size:13px; letter-spacing:.5em;
  color:var(--washi-dim); padding-left:.5em; opacity:0;
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:18px var(--gut);
  transition:background .4s var(--ease), padding .4s var(--ease), backdrop-filter .4s,
             transform .6s var(--ease), opacity .6s var(--ease);
}
/* Hidden on the initial (top-of-page) view; slides down once the user scrolls. */
.nav.nav--hidden{ transform:translateY(-115%); opacity:0; pointer-events:none; }
.nav.is-stuck{
  background:rgba(8,17,11,.72); backdrop-filter:blur(14px);
  padding-top:12px; padding-bottom:12px;
  box-shadow:0 1px 0 rgba(95,212,154,.10);
}
.nav__brand{ display:flex; align-items:center; gap:10px; }
.nav__logo{ height:34px; width:auto; display:block; transition:transform .3s var(--ease), filter .3s var(--ease); }
.nav__brand:hover .nav__logo{ filter:drop-shadow(0 0 12px rgba(95,212,154,.35)); }
.nav.is-stuck .nav__logo{ height:30px; }
.nav__seal{
  font-family:var(--font-zen); color:var(--amber); font-size:22px; line-height:1;
  text-shadow:0 0 14px rgba(233,162,59,.45);
}
.nav__name{ font-family:var(--font-display); font-weight:700; letter-spacing:.18em; font-size:15px; }
.nav__links{ display:flex; gap:34px; margin-inline:auto; }
.nav__links a{
  font-size:13px; letter-spacing:.08em; color:var(--washi-dim);
  position:relative; padding:4px 0; transition:color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--jade); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--washi); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ flex:none; }

.nav__burger{ display:none; position:relative; width:42px; height:42px; align-items:center; justify-content:center; }
/* hamburger lines */
.nav__burger-lines{ display:flex; flex-direction:column; gap:5px; align-items:center; justify-content:center;
  transition:opacity .25s var(--ease), transform .35s var(--ease); }
.nav__burger-lines span{ display:block; width:22px; height:2px; background:var(--washi); border-radius:2px; }
/* ninja star (hidden until open) */
.nav__burger-star{ position:absolute; inset:0; margin:auto; width:30px; height:30px; color:var(--washi);
  opacity:0; transform:scale(.3) rotate(0deg); transform-origin:50% 50%; pointer-events:none;
  filter:drop-shadow(0 0 6px rgba(95,212,154,.45)); }
  /* opens with a spin via @keyframes; closing snaps instantly (no transition) */
/* OPEN: lines vanish, star spins in three full turns and lands upright */
.nav__burger.is-open .nav__burger-lines{ opacity:0; transform:scale(.4) rotate(45deg); }
.nav__burger.is-open .nav__burger-star{ opacity:1; animation:shuriken-spin .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes shuriken-spin{
  0%{ opacity:0; transform:scale(.3) rotate(0deg); }
  12%{ opacity:1; }
  100%{ opacity:1; transform:scale(1) rotate(1080deg); }
}
@media (prefers-reduced-motion: reduce){
  .nav__burger.is-open .nav__burger-star{ animation:none; opacity:1; transform:scale(1) rotate(0deg); }
}

.mobilemenu{
  position:fixed; inset:0; z-index:var(--z-nav);
  background:rgba(6,10,7,.96); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.mobilemenu.is-open{ opacity:1; visibility:visible; }
.mobilemenu a{ font-family:var(--font-display); font-size:24px; letter-spacing:.1em; }
/* nav links get the same rollover as the desktop nav: dim→cream text + jade underline */
.mobilemenu a:not(.btn){ position:relative; color:var(--washi-dim); padding:4px 2px; transition:color .25s var(--ease); }
.mobilemenu a:not(.btn)::after{ content:""; position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--jade); transition:width .3s var(--ease); }
.mobilemenu a:not(.btn):hover{ color:var(--washi); }
.mobilemenu a:not(.btn):hover::after{ width:100%; }
/* close (×) button — sits where the nav burger is */
.mobilemenu__close{ position:absolute; top:14px; right:var(--gut); width:48px; height:48px; z-index:2;
  display:flex; align-items:center; justify-content:center; color:var(--washi); cursor:pointer;
  border:0; background:none;
  transition:color .25s var(--ease), transform .25s var(--ease); }
.mobilemenu__close::before, .mobilemenu__close::after{ content:""; position:absolute; width:22px; height:2px; background:currentColor; border-radius:2px; }
.mobilemenu__close::before{ transform:rotate(45deg); }
.mobilemenu__close::after{ transform:rotate(-45deg); }
.mobilemenu__close:hover{ color:var(--jade); transform:rotate(90deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:2px; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:500; cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s, box-shadow .3s, transform .2s;
  will-change:transform;
}
.btn--solid{ background:var(--jade); color:var(--ink); box-shadow:0 0 0 rgba(95,212,154,0); }

.btn--ghost{ border:1px solid rgba(236,228,211,.28); color:var(--washi); }

.btn--full{ width:100%; }
.btn:active{ transform:translateY(1px); }

/* ---------- Shared bits ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--jade); font-weight:500;
}
/* center the kicker reliably in ANY context (kicker is inline-flex, so it
   needs to become a full-width flex row to actually center its contents) */
.kicker--center{ display:flex; justify-content:center; width:100%; }
.kicker__dot{ width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 10px var(--amber); }
.kicker__loc{ white-space:nowrap; }

.section{ padding:clamp(90px,12vh,160px) var(--gut); position:relative; z-index:var(--z-content); }
.section__head{ max-width:760px; margin:0 auto clamp(48px,7vw,84px); text-align:center; }
.section__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px,5vw,58px); line-height:1.08; margin:18px 0 0;
  letter-spacing:.01em;
}
.section__intro{ margin-top:22px; color:var(--washi); font-size:clamp(15px,1.5vw,18px); line-height:1.7; }

/* ============================================================
   ACT I — HERO
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; isolation:isolate; }
.hero__layers{ position:absolute; inset:0; z-index:var(--z-bg); }
.hero__bg,.hero__mid{
  position:absolute; inset:-16% -4%; background-size:cover; background-position:center 40%;
  will-change:transform;
}
.hero__bg{
  background-image:
    radial-gradient(120% 85% at 50% 118%, rgba(6,10,7,.95), transparent 58%),
    linear-gradient(180deg, rgba(8,17,11,.5) 0%, rgba(8,17,11,.22) 38%, rgba(6,12,8,.7) 100%),
    url("../assets/img/hero-path.jpg");
  background-position:center 42%;
}
.hero__mid{ display:none; }
.hero__floor{
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(180deg, transparent, var(--ink) 92%);
  z-index:3;
}
.hero__rays{
  position:absolute; inset:-20% 0 0 0; z-index:2; pointer-events:none; opacity:.5;
  background:
    conic-gradient(from 180deg at 60% -10%,
      transparent 0deg, rgba(244,199,119,.16) 12deg, transparent 24deg,
      rgba(244,199,119,.10) 36deg, transparent 50deg,
      rgba(244,199,119,.14) 64deg, transparent 80deg);
  mix-blend-mode:screen;
  animation:rayShift 14s ease-in-out infinite alternate;
}
@keyframes rayShift{ from{ transform:translateX(-2%);} to{ transform:translateX(3%);} }
.hero__fog{
  position:absolute; left:-20%; right:-20%; height:60%; z-index:2; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%, rgba(143,227,184,.06), transparent 70%);
  filter:blur(8px);
}
.hero__fog--back{ bottom:18%; opacity:.7; animation:fogA 22s ease-in-out infinite alternate; }
.hero__fog--front{ bottom:0; height:48%; background:radial-gradient(70% 100% at 50% 100%, rgba(8,17,11,.9), transparent 75%); }
@keyframes fogA{ from{ transform:translateX(-4%);} to{ transform:translateX(5%);} }

.hero__content{
  position:relative; z-index:var(--z-content); height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 var(--gut) clamp(40px,7vh,90px);
}
/* hero kicker reads white over the bright forest (jade is fine on dark sections) */
.hero .kicker{ color:var(--washi); row-gap:2px; line-height:1.25; }
.hero__title{
  margin:6px 0 4px; text-align:center; line-height:0;
}
.hero__logo{
  height:clamp(220px,40vh,420px); width:clamp(138px,25.2vh,264px); max-width:none;
  object-fit:contain; display:inline-block; vertical-align:top;
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.55));
}
.hero__title-line{ display:inline-block; }
.hero__title-line--accent{
  color:transparent;
  background:linear-gradient(180deg, var(--jade-soft), var(--jade) 60%, var(--moss));
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 30px rgba(95,212,154,.25));
}
.hero__sub{ max-width:620px; color:var(--washi); font-size:clamp(15px,1.7vw,19px); margin:10px 0 30px; }
.hero__actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.hero__scrollcue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:var(--z-content); display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--washi-dim);
}
.hero__scrollline{ width:1px; height:46px; background:linear-gradient(var(--jade), transparent); position:relative; overflow:hidden; }
.hero__scrollline::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--jade); animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ top:-50%; } 100%{ top:100%; } }

.hero__vert{
  position:absolute; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-family:var(--font-zen);
  font-size:13px; letter-spacing:.3em; color:var(--washi-dim); opacity:.6; z-index:var(--z-content);
}
.hero__vert--l{ left:max(18px,2vw); }
.hero__vert--r{ right:max(18px,2vw); transform:translateY(-50%) rotate(180deg); }

/* ============================================================
   ACT II — THE GATE
   ============================================================ */
.gate{ position:relative; height:200vh; }
.gate__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center;
}
.gate__image{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:
    radial-gradient(80% 60% at 50% 45%, rgba(233,162,59,.12), transparent 62%),
    url("../assets/img/gate.jpg");
  transform:scale(1.15); will-change:transform, filter; filter:brightness(.55);
}
.gate__veil{ position:absolute; inset:0; background:radial-gradient(70% 70% at 50% 50%, transparent 40%, rgba(6,10,7,.86)); }
.gate__copy{ position:relative; z-index:var(--z-content); text-align:center; max-width:680px; padding:0 var(--gut); }
.gate__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(38px,7vw,84px); line-height:1.05; margin:18px 0 22px;
}
.gate__lead{ color:var(--washi); font-size:clamp(16px,1.8vw,20px); line-height:1.75; }

/* ============================================================
   THE ASCENT — approach & enter the dojo
   ============================================================ */
.ascent{ position:relative; height:230vh; }
.ascent__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center; }
.ascent__layer{
  position:absolute; inset:-2%; background-size:cover; background-position:center;
  will-change:transform, opacity;
}
.ascent__hill{ background-image:url("../assets/img/dojo-hill.jpg"); transform:scale(1.05); }
.ascent__door{ background-image:url("../assets/img/dojo-door.jpg"); opacity:0; transform:scale(1.12); }
.ascent__veil{ position:absolute; inset:0; background:radial-gradient(75% 75% at 50% 48%, transparent 40%, rgba(6,10,7,.82)); }
.ascent__copy{ position:relative; z-index:2; text-align:center; max-width:680px; padding:0 var(--gut); }
.ascent__copy--enter{ position:absolute; opacity:0; }
.ascent__title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,6vw,76px); line-height:1.06; color:var(--washi);
  text-shadow:0 10px 50px rgba(0,0,0,.6);
}

/* ============================================================
   ACT III — DISCIPLINES
   ============================================================ */
.disciplines{ position:relative; overflow:hidden; background:
  radial-gradient(100% 60% at 50% 0%, var(--forest-800), transparent 60%),
  var(--ink); }
/* interior dojo-wall texture behind the first row, fading into the dark */
.disciplines::before{
  content:""; position:absolute; top:0; left:0; right:0;
  height:min(1100px,120vh); z-index:0; pointer-events:none;
  background:url("../assets/img/dojo-interior.jpg") center top / cover no-repeat;
  opacity:.28;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,.7) 50%, rgba(0,0,0,0) 78%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,.7) 50%, rgba(0,0,0,0) 78%);
}
.disciplines > *{ position:relative; z-index:1; }
.cards{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.card{
  position:relative; padding:34px 30px 38px; border-radius:4px;
  background:linear-gradient(180deg, rgba(19,48,33,.42), rgba(8,17,11,.5));
  border:1px solid rgba(95,212,154,.12);
  overflow:hidden; transition:border-color .4s var(--ease), background .4s, transform .4s var(--ease);
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(60% 80% at 50% 0%, rgba(95,212,154,.14), transparent 70%);
}
.card:hover{ border-color:rgba(95,212,154,.4); transform:translateY(-4px); }
.card:hover::before{ opacity:1; }
.card__num{ font-family:var(--font-zen); font-size:13px; color:var(--amber); letter-spacing:.1em; }
.card__icon{ display:grid; place-items:center; width:52px; height:52px; margin:18px 0 16px; border-radius:50%; border:1px solid rgba(95,212,154,.25); color:var(--jade); }
.card__icon svg{ width:26px; height:26px; }
.card__title{ font-family:var(--font-display); font-weight:600; font-size:22px; margin-bottom:10px; }
.card__text{ color:var(--washi); font-size:14.5px; line-height:1.7; }
.card__edge{ position:absolute; left:0; bottom:0; height:2px; width:0; background:linear-gradient(90deg,var(--jade),var(--amber)); transition:width .5s var(--ease); }
.card:hover .card__edge{ width:100%; }

/* ============================================================
   ACT IV — WORK (horizontal)
   ============================================================ */
.work{ position:relative; z-index:var(--z-content); padding:clamp(80px,10vh,140px) 0; overflow:hidden; }
.work__head{ padding-inline:var(--gut); }
.work__track{
  display:flex; gap:26px; padding:10px var(--gut) 30px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
}
.work__track::-webkit-scrollbar{ display:none; }
.work__track.is-dragging{ cursor:grabbing; }
.proj{
  flex:0 0 min(78vw,460px); scroll-snap-align:center;
  border-radius:6px; overflow:hidden; position:relative;
  background:var(--forest-800); border:1px solid rgba(95,212,154,.12);
}
.proj__media{ position:relative; height:300px; overflow:hidden; background:#0a1d13 center/cover no-repeat; transition:transform .6s var(--ease); }
.proj:hover .proj__media{ transform:scale(1.05); }
.proj__media--kleenex{ background-image:url("../assets/img/work-kleenex.jpg"); }
.proj__media--voyager{ background-image:url("../assets/img/work-voyager.jpg"); }
.proj__media--att{ background-image:url("../assets/img/work-att.jpg"); }
.proj__media--noir{ background-image:url("../assets/img/work-noir.jpg"); }
.proj__media--dropt{ background-image:url("../assets/img/work-dropt.jpg"); }
.proj__media--anvel{ background-image:url("../assets/img/work-anvel.jpg"); }
.proj__glow{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,10,7,.05) 40%, rgba(8,17,11,.85) 100%); }
.proj__meta{ padding:26px 28px 30px; }
.proj__tag{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); }
.proj__title{ font-family:var(--font-display); font-weight:700; font-size:30px; margin:10px 0 10px; line-height:1.05; }
.proj__desc{ color:var(--washi); font-size:14.5px; line-height:1.65; }
.proj__stat{ display:block; margin-top:18px; font-size:13px; color:var(--washi-dim); }
.proj__stat b{ font-family:var(--font-display); color:var(--jade); font-size:22px; margin-right:6px; }
.proj--cta{ display:grid; place-items:center; background:linear-gradient(160deg,var(--forest-700),var(--forest-900)); flex-basis:min(70vw,360px); }
.proj__meta--cta{ text-align:center; display:grid; gap:22px; }
.proj--cta .proj__title{ font-size:clamp(28px,4vw,40px); }
.work__hint{ text-align:center; margin-top:10px; color:var(--stone); font-size:12px; letter-spacing:.2em; text-transform:uppercase; }

/* ============================================================
   ACT V — PHILOSOPHY
   ============================================================ */
.philosophy{ position:relative; padding:clamp(110px,16vh,200px) var(--gut); overflow:hidden; z-index:var(--z-content); }
.philosophy__bg{
  position:absolute; inset:-10%; background-size:cover; background-position:center;
  background-image:url("../assets/img/canopy.jpg"); filter:brightness(.5); will-change:transform;
}
.philosophy__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,10,7,.7), rgba(6,10,7,.92)); }
.philosophy__inner{ position:relative; z-index:var(--z-content); max-width:920px; margin:0 auto; text-align:center; }
.philosophy__quote{
  font-family:var(--font-zen); font-weight:500;
  font-size:clamp(24px,3.6vw,44px); line-height:1.45; letter-spacing:.01em;
}
.philosophy__quote em{ color:var(--jade); font-style:italic; }
.philosophy__attr{ margin-top:20px; color:var(--washi-dim); letter-spacing:.18em; text-transform:uppercase; font-size:12px; }

.tenets{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:64px 0; text-align:center; }
.tenets li{ padding:28px 18px; border:1px solid rgba(95,212,154,.14); border-radius:4px; background:rgba(8,17,11,.4); }
.tenet__k{ display:block; font-family:var(--font-zen); font-size:34px; color:var(--amber); margin-bottom:12px; }
.tenets b{ font-family:var(--font-display); font-size:19px; display:block; margin-bottom:8px; }
.tenets span:last-child{ color:var(--washi); font-size:14px; line-height:1.6; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:30px; }
.stat{ text-align:center; }
.stat__num{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5vw,58px); color:var(--jade); line-height:1; display:block; }
.stat__label{ display:block; margin-top:10px; color:var(--washi-dim); font-size:13px; letter-spacing:.06em; }

/* ============================================================
   ACT VI — PROCESS
   ============================================================ */
.process{ background:var(--ink); }
.steps{ list-style:none; max-width:var(--maxw); margin:64px auto 0; display:grid; grid-template-columns:repeat(4,1fr); column-gap:24px; row-gap:56px; counter-reset:step; }
.step{ position:relative; padding:0 0 10px; border-top:1px solid rgba(95,212,154,.2); }
/* on-brand dojo image for each step (replaces the weapon icon) */
.step__img{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; margin:20px 0 22px;
  border:1px solid rgba(95,212,154,.14);
  filter:brightness(.9) saturate(.96);
  box-shadow:0 16px 34px -20px rgba(0,0,0,.8);
  transition:transform .6s var(--ease), filter .6s var(--ease);
}
.step:hover .step__img{ transform:scale(1.02); filter:brightness(1.06) saturate(1.06); }
.step__num{ font-family:var(--font-display); font-size:14px; color:var(--amber); letter-spacing:.2em; }
.step h3{ font-family:var(--font-display); font-weight:600; font-size:24px; margin:14px 0 12px; }
.step p{ color:var(--washi); font-size:14.5px; line-height:1.7; }
.step::before{ content:""; position:absolute; top:-1px; left:0; height:1px; width:0; background:var(--jade); transition:width .8s var(--ease); }
.step.is-in::before{ width:100%; }

/* ============================================================
   ACT VII — CONTACT
   ============================================================ */
.contact{ position:relative; padding:clamp(90px,12vh,160px) var(--gut); overflow:hidden; z-index:var(--z-content);
  background:
    linear-gradient(180deg, rgba(6,10,7,.92), rgba(6,10,7,.82)),
    radial-gradient(90% 80% at 50% 120%, rgba(27,71,48,.55), transparent 70%),
    url("../assets/img/courtyard.jpg");
  background-size:cover; background-position:center; }
.contact__glow{ position:absolute; left:50%; bottom:-30%; width:80vw; height:80vw; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(233,162,59,.12), transparent 60%); pointer-events:none; }
.contact__inner{ position:relative; z-index:var(--z-content); max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,90px); align-items:center; }
.contact__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5.4vw,64px); line-height:1.05; margin:18px 0 22px; }
.contact__lead{ color:var(--washi); font-size:clamp(15px,1.6vw,18px); line-height:1.7; max-width:420px; }
.contact__meta{ list-style:none; margin-top:36px; display:grid; gap:18px; }
.contact__meta li{ font-size:16px; }
.contact__meta span{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--jade); margin-bottom:4px; }

.contact__form{ display:grid; gap:18px; padding:clamp(26px,3vw,40px); border:1px solid rgba(95,212,154,.16); border-radius:6px; background:rgba(8,17,11,.55); backdrop-filter:blur(8px); }
.field{ display:grid; gap:8px; }
.field label{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--washi-dim); }
.field input,.field select,.field textarea{
  font:inherit; color:var(--washi); background:rgba(6,10,7,.6);
  border:1px solid rgba(236,228,211,.16); border-radius:3px; padding:13px 14px;
  transition:border-color .25s, box-shadow .25s; resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--stone); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--jade); box-shadow:0 0 0 3px rgba(95,212,154,.16); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235fd49a' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.contact__note{ font-size:13px; min-height:18px; color:var(--jade); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; z-index:var(--z-content); padding:70px var(--gut) 40px; background:var(--forest-900); border-top:1px solid rgba(95,212,154,.1); }
.footer__top{ max-width:var(--maxw); margin:0 auto 40px; }
.footer__brand{ display:inline-flex; align-items:center; }
.footer__logo{ height:38px; width:auto; display:block; }
.footer__tag{ margin-top:12px; color:var(--washi-dim); font-size:14px; }
.footer__cols{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; padding-bottom:40px; border-bottom:1px solid rgba(236,228,211,.08); }
.footer__cols nav{ display:grid; gap:12px; align-content:start; }
.footer__h{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--jade); margin-bottom:6px; }
.footer__cols a{ color:var(--washi-dim); font-size:14px; transition:color .2s; }
.footer__cols a:hover{ color:var(--washi); }
.footer__base{ max-width:var(--maxw); margin:24px auto 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--stone); font-size:12px; }
.footer__small{ font-family:var(--font-zen); }

/* ============================================================
   WORK CARD — link affordance
   ============================================================ */
.proj--link{
  display:block; cursor:pointer; text-decoration:none; color:inherit;
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.proj__view{ display:inline-block; margin-top:16px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--jade); transition:transform .3s var(--ease); }
.proj--link:hover{
  transform:translateY(-6px);
  border-color:rgba(95,212,154,.45);
  box-shadow:0 22px 48px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(95,212,154,.12);
}
.proj--link:hover .proj__view{ transform:translateX(4px); color:var(--jade); }
.proj--link:hover .proj__title{ color:var(--jade); }
.proj--link:focus-visible{ outline:2px solid var(--jade); outline-offset:3px; }

/* ============================================================
   PRODUCT / CASE-STUDY PAGE
   ============================================================ */
.product{ background:var(--ink); }

/* product hero */
.phero{ position:relative; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; padding:120px var(--gut) clamp(48px,7vh,96px); }
.phero__media{ position:absolute; inset:0; z-index:0;
  background:url("../assets/img/work-kleenex.jpg") center/cover no-repeat; transform:scale(1.04); }
.phero__media--voyager{ background-image:url("../assets/img/work-voyager.jpg"); }
.phero__media--att{ background-image:url("../assets/img/att-hero.jpg"); }
.phero__media--noir{ background-image:url("../assets/img/noir-hero.jpg"); }
.phero__media--dropt{ background-image:url("../assets/img/dropt-hero.jpg"); }
.phero__media--arcomic{ background-image:url("../assets/img/arcomic-hero.jpg"); }
/* AR comic hero is a bright, busy product shot — strengthen the veil for text legibility */
.phero__media--arcomic + .phero__veil{
  background:
    linear-gradient(90deg, rgba(6,10,7,.8) 0%, rgba(6,10,7,.5) 45%, rgba(6,10,7,.3) 100%),
    linear-gradient(180deg, rgba(6,10,7,.5) 0%, rgba(6,10,7,.45) 35%, rgba(6,10,7,.8) 70%, rgba(6,10,7,.96) 100%);
}
/* AT&T hero is a bright product shot — strengthen the veil so cream text stays legible */
.phero__media--att + .phero__veil{
  background:
    linear-gradient(90deg, rgba(6,10,7,.78) 0%, rgba(6,10,7,.5) 45%, rgba(6,10,7,.32) 100%),
    linear-gradient(180deg, rgba(6,10,7,.5) 0%, rgba(6,10,7,.45) 35%, rgba(6,10,7,.78) 70%, rgba(6,10,7,.96) 100%);
}
.phero__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,10,7,.55) 0%, rgba(6,10,7,.35) 38%, rgba(6,10,7,.92) 100%); }
.phero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; width:100%; }
.phero__back{ display:inline-block; margin-bottom:26px; font-size:13px; letter-spacing:.1em; color:var(--washi-dim); transition:color .25s; }

.phero__title{ font-family:var(--font-display); font-weight:800; font-size:clamp(46px,9vw,118px); line-height:.94; margin:14px 0 0; text-shadow:0 12px 50px rgba(0,0,0,.6); }
.phero__lead{ max-width:560px; margin:22px 0 0; color:var(--washi); font-size:clamp(16px,1.8vw,20px); line-height:1.7; }
.phero__meta{ list-style:none; display:flex; flex-wrap:wrap; gap:14px 44px; margin:36px 0 0; }
.phero__meta li{ font-size:15px; color:var(--washi); }
.phero__meta span{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--jade); margin-bottom:5px; }

/* generic product sections */
.psection{ padding:clamp(64px,9vh,120px) var(--gut); position:relative; z-index:1; }
.pwrap{ max-width:var(--maxw); margin:0 auto; }
.pwrap--narrow{ max-width:760px; }
.psection__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(28px,4.4vw,52px); line-height:1.08; margin:16px 0 8px; }
.psection__title--center{ text-align:center; }
.ptext{ color:var(--washi); font-size:clamp(15px,1.6vw,18px); line-height:1.8; margin-top:20px; }

/* video */
.pvideo .pwrap{ display:flex; flex-direction:column; align-items:center; }
.video{ width:100%; max-width:920px; margin:40px auto 0; aspect-ratio:16/9; border-radius:8px; overflow:hidden;
  border:1px solid rgba(95,212,154,.18); background:#0a140e; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.video iframe{ width:100%; height:100%; border:0; display:block; }
.video video{ width:100%; height:100%; display:block; object-fit:cover; background:#0a140e; }
.video--85{ aspect-ratio:8/5; }
.video__placeholder{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  background:linear-gradient(180deg, rgba(20,48,33,.5), rgba(8,17,11,.7)), url("../assets/img/work-kleenex.jpg") center/cover; }
.video__play{ width:74px; height:74px; border-radius:50%; display:grid; place-items:center; color:var(--ink);
  background:var(--jade); box-shadow:0 0 40px rgba(95,212,154,.4); }
.video__play svg{ width:30px; height:30px; margin-left:3px; }
.video__note{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--washi); }

/* stills gallery (below the video) */
.stills{ width:100%; max-width:920px; margin:18px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.still{ position:relative; aspect-ratio:16/9; border-radius:6px; overflow:hidden; border:1px solid rgba(95,212,154,.14);
  background:#0c1c13; transition:transform .4s var(--ease), border-color .4s; }
.still img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--ease); }
.still:hover{ transform:translateY(-3px); border-color:rgba(95,212,154,.4); }
.still:hover img{ transform:scale(1.06); }
.still__tag{ position:absolute; left:8px; bottom:7px; font-size:11px; letter-spacing:.12em; color:var(--washi);
  background:rgba(6,10,7,.55); padding:2px 7px; border-radius:3px; z-index:2; }
.stills__cap{ margin:16px auto 0; font-size:13px; color:var(--washi-dim); text-align:center; }

/* full gallery (masonry — preserves slide text, no cropping) */
.pgallery .pwrap{ max-width:1080px; }
.pgallery__intro{ text-align:center; color:var(--washi-dim); font-size:14px; max-width:560px; margin:14px auto 0; }
.pgallery__grid{ columns:2; column-gap:18px; margin-top:42px; }
.pgallery__item{ break-inside:avoid; margin:0 0 18px; position:relative; display:block; border-radius:8px; overflow:hidden;
  border:1px solid rgba(95,212,154,.14); background:var(--forest-800); }
.pgallery__item img{ width:100%; height:auto; display:block; transition:transform .6s var(--ease); }
.pgallery__item:hover img{ transform:scale(1.04); }
.pgallery__cap{ position:absolute; left:0; right:0; bottom:0; padding:30px 14px 12px; font-size:12.5px; line-height:1.4;
  letter-spacing:.02em; color:var(--washi); background:linear-gradient(180deg, transparent, rgba(6,10,7,.9));
  opacity:0; transform:translateY(8px); transition:opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none; }
.pgallery__item:hover .pgallery__cap{ opacity:1; transform:none; }

/* results stat band */
.pstats{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:42px; }
.pstat{ text-align:center; padding:30px 16px; border:1px solid rgba(95,212,154,.16); border-radius:8px; background:rgba(19,48,33,.28); }
.pstat b{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(30px,4.6vw,52px); color:var(--jade); line-height:1; }
.pstat span{ display:block; margin-top:11px; font-size:13px; color:var(--washi); letter-spacing:.03em; line-height:1.4; }

/* numbered "how it works" steps */
.psteps{ list-style:none; counter-reset:pstep; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:40px; }
.psteps li{ counter-increment:pstep; padding:26px 22px; border:1px solid rgba(95,212,154,.14); border-radius:6px; background:rgba(19,48,33,.22); }
.psteps li::before{ content:counter(pstep,decimal-leading-zero); display:block; margin-bottom:14px; font-family:var(--font-display); font-size:15px; letter-spacing:.12em; color:var(--amber); }
.psteps b{ display:block; font-family:var(--font-display); font-size:18px; margin-bottom:8px; }
.psteps span{ color:var(--washi); font-size:14px; line-height:1.6; }

/* feature list */
.pfeatures{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
.pfeatures li{ padding:26px 24px; border:1px solid rgba(95,212,154,.14); border-radius:6px; background:rgba(19,48,33,.28); }
.pfeatures b{ font-family:var(--font-display); font-size:19px; display:block; margin-bottom:8px; }
.pfeatures span{ color:var(--washi); font-size:14.5px; line-height:1.65; }

/* product CTA */
.pcta{ position:relative; overflow:hidden; padding:clamp(80px,11vh,150px) var(--gut); text-align:center;
  background:radial-gradient(90% 80% at 50% 120%, var(--forest-700), var(--ink) 70%); }
.pcta__glow{ position:absolute; left:50%; bottom:-30%; width:80vw; height:80vw; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(233,162,59,.12), transparent 60%); pointer-events:none; }
.pcta__inner{ position:relative; z-index:1; }
.pcta__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,5vw,60px); line-height:1.05; margin:16px 0 28px; }
.pcta__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   REVEAL (JS-driven)
   ============================================================ */
[data-reveal],[data-rise]{ opacity:0; transform:translateY(28px); }
.no-anim [data-reveal],.no-anim [data-rise]{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); gap:30px 20px; }
}
@media (max-width:860px){
  .nav__links,.nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .contact__inner{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .tenets{ grid-template-columns:1fr; }
  .hero__vert{ display:none; }
  .gate{ height:160vh; }
  .pfeatures{ grid-template-columns:1fr; }
  .phero__meta{ gap:16px 32px; }
  .pgallery__grid{ column-gap:14px; }
  .pstats{ grid-template-columns:repeat(2,1fr); }
  .psteps{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:1fr 1fr; }
  .hero__title{ gap:18px; }
  .proj{ flex-basis:84vw; }
  .stills{ grid-template-columns:repeat(2,1fr); }
  .pgallery__grid{ columns:1; }
  /* slides carry their own baked-in text — skip the overlay caption on mobile to avoid overlap */
  .pgallery__cap{ display:none; }

  /* Hero: more headroom up top, and keep the CTAs clear of the scroll cue */
  .hero__content{ padding-top:64px; padding-bottom:124px; }
  .hero__logo{ height:clamp(150px,27vh,220px); }
  .hero__sub{ font-size:14.5px; margin:8px 0 22px; }
  .hero__actions{ flex-direction:column; width:min(320px,100%); gap:12px; }
  .hero__actions .btn{ width:100%; }
  .hero__scrollcue{ bottom:18px; }
  /* keep "in Atlanta" together on its own line */
  .hero .kicker__loc{ flex-basis:100%; text-align:center; }
  /* center the doorway (it sits on the left of the shot) so it's visible on portrait */
  .ascent__door{ background-position:26% center; }
  .ascent__hill{ background-position:62% center; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal],[data-rise]{ opacity:1 !important; transform:none !important; }
  .hero__rays,.hero__fog,.enso__path{ animation:none !important; }
  .preloader{ display:none !important; }
  /* collapse the pinned approach into a single static establishing shot */
  .ascent{ height:100svh !important; }
  .ascent__door,.ascent__copy--enter{ display:none !important; }
}
/* JS-disabled / reduced fallback: don't trap the user in a tall empty pin */
.no-anim .ascent{ height:100svh; }
.no-anim .ascent__door,.no-anim .ascent__copy--enter{ display:none; }