/* ============================================================
   ARDEN — base styles
   Dark, editorial, cinematic. Confident but not loud.
   ============================================================ */

:root{
  --black: #0a0a0a;
  --off-black: #111111;
  --white: #f5f4f0;
  --grey: #8a8a86;
  --line: rgba(245,244,240,0.14);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-h: 84px;
  --font-display: 'Archivo', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ display:block; max-width:100%; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
a{ color:inherit; text-decoration:none; }
button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }
ul{ list-style:none; }

.eyebrow{
  font-family:var(--font-display);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--grey);
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 40px;
  background:linear-gradient(180deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0) 100%);
}
.nav__logo{ grid-column:2; display:flex; align-items:center; justify-self:center; }
.nav__logo-img{ height:20px; width:auto; }
.nav__links{ display:flex; gap:36px; }
.nav__links a{
  font-family:var(--font-display); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase;
  position:relative; padding-bottom:4px;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:currentColor; transition:width .4s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__contact{ font-family:var(--font-display); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; }

/* Hamburger, far right */
.nav__burger{
  grid-column:3; justify-self:end;
  width:40px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav__burger span{ display:block; width:22px; height:1px; background:var(--white); transition:transform .35s var(--ease), opacity .35s var(--ease); }
.nav__burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Fullscreen menu overlay */
.menu-overlay{
  position:fixed; inset:0; z-index:150; background:var(--black);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
}
.menu-overlay.is-open{ opacity:1; pointer-events:auto; }
.menu-overlay__links{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.menu-overlay__links a{
  font-family:var(--font-display); font-weight:600; font-size:clamp(28px,5vw,54px);
  letter-spacing:-0.01em; text-transform:uppercase; opacity:0.85; transition:opacity .3s var(--ease);
}
.menu-overlay__links a:hover{ opacity:1; }

/* ---------- Hero / Carousel ---------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100dvh; /* mobile browser chrome fix: dvh accounts for the
    collapsing address bar, vh does not — vh above is the fallback for
    browsers that don't support dvh yet */
  padding-top:var(--nav-h);
  padding-bottom:40px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.cube-mount{
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 20px;
  margin-bottom:20px;
}
.cube-mount__box{
  width:min(2280px, 96vw);
  aspect-ratio:2.15/1;
  position:relative;
  touch-action:none; /* belt-and-suspenders alongside the canvas-level
    touch-action set in JS — see project-cube-v3.js */
}
@media(max-width:720px){
  .cube-mount{ padding:0 12px; margin-bottom:14px; }
  .cube-mount__box{ width:min(2280px, 98vw); aspect-ratio:16/9; }
  /* On mobile the hero was bottom-anchored (justify-content:flex-end),
     which left a large empty gap above the cube on shorter content.
     Pin everything to the top instead so the cube sits right under the
     nav, and let the hero size to its content instead of forcing 100dvh. */
  .hero{ justify-content:flex-start; min-height:auto; padding-top:calc(var(--nav-h) + 4px); padding-bottom:32px; }
}
.statement{ padding:32px 40px 0; max-width:1300px; margin:0 auto; text-align:center; }
.statement__lg{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(30px, 6vw, 84px);
  line-height:1.02; letter-spacing:-0.02em;
  color:var(--white);
}
.statement__tag{
  margin:38px auto 0;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(13px, 1.5vw, 18px);
  letter-spacing:0.02em; color:var(--grey);
}
.statement__body{
  margin:22px auto 0; max-width:820px;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(14px, 1.6vw, 19px);
  line-height:1.55;
  letter-spacing:0.01em; color:var(--grey);
}

.carousel{
  position:relative;
  width:100%;
  padding:0 40px 40px;
}
.carousel__track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:6px;
  cursor:grab;
}
.carousel__track:active{ cursor:grabbing; }
.carousel__track::-webkit-scrollbar{ display:none; }

.carousel__item{
  position:relative;
  flex:0 0 auto;
  width:min(62vw, 780px);
  aspect-ratio:16/9;
  background:var(--off-black);
  border-radius:2px;
}
.carousel__item.is-portrait{ width:min(30vw, 360px); aspect-ratio:4/5; }
.carousel__media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  border-radius:2px;
  transition:transform 1.1s var(--ease);
}
.carousel__item:hover .carousel__media{ transform:scale(1.035); }
.carousel__overlay{
  position:absolute; inset:0;
  border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:22px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.65) 100%);
  opacity:0; transition:opacity .4s var(--ease);
}
.carousel__item:hover .carousel__overlay{ opacity:1; }
.carousel__client{ font-family:var(--font-display); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:0.02em; }
.carousel__project{ font-size:13px; color:var(--grey); margin-top:2px; }

.carousel__nav{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 40px 8px;
}
.carousel__hint{ font-size:11px; color:var(--grey); letter-spacing:0.06em; text-transform:uppercase; }
.carousel__arrows{ display:flex; gap:10px; }
.carousel__arrows button{
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.carousel__arrows button:hover{ background:var(--white); color:var(--black); border-color:var(--white); }

/* ---------- Section shell ---------- */
.section{ padding:140px 40px; border-top:1px solid var(--line); }
.section--flush{ border-top:none; padding-top:60px; padding-bottom:70px; }
.pillars-heading{
  margin-top:80px;
  font-family:var(--font-display); font-weight:600;
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey);
}
.section__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section__title{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3.4vw,44px); letter-spacing:-0.01em; }

/* ---------- About / Manifesto (justified paragraph with inline media) ---------- */
.manifesto-justified{
  text-align:justify;
  text-justify:inter-word;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(22px, 2.7vw, 40px);
  line-height:1.5;
  letter-spacing:-0.01em;
  color:var(--white);
  max-width:1400px;
  margin:0 auto;
}
.reveal-word{
  opacity:0.3;
  will-change:opacity;
  transition:opacity .15s linear;
}
.manifesto-justified__slot{
  display:inline-block;
  vertical-align:middle;
  width:clamp(90px, 9vw, 150px);
  height:clamp(45px, 4.5vw, 75px);
  margin:0 clamp(6px, 1vw, 14px);
  border-radius:4px;
  overflow:hidden;
  text-decoration:none;
  position:relative;
}
.manifesto-justified__slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s var(--ease);
}
.manifesto-justified__slot:hover img{ transform:scale(1.08); }
@media(max-width:640px){
  .manifesto-justified{ text-align:justify; text-justify:inter-word; font-size:clamp(18px,4.8vw,24px); }
  .manifesto-justified__slot{ width:56px; height:28px; margin:0 5px; }
}

.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:36px; }
.pillar{ border-top:1px solid var(--line); padding-top:20px; }
.pillar__num{ font-family:var(--font-display); font-size:12px; color:var(--grey); }
.pillar__title{ font-family:var(--font-display); font-size:19px; font-weight:600; margin:14px 0 10px; }
.pillar__body{ font-size:14px; line-height:1.6; color:var(--grey); font-weight:300; }

/* ---------- Clients ticker ---------- */
.section-eyebrow{
  font-family:var(--font-display); font-weight:600;
  font-size:13px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--grey);
  margin-bottom:48px;
}
.ticker{
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track{
  display:flex;
  align-items:center;
  width:max-content;
  column-gap:clamp(48px, 6vw, 100px);
  animation:ticker-scroll 26s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__item{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(20px, 2.6vw, 34px);
  letter-spacing:-0.01em;
  color:var(--grey);
  white-space:nowrap;
  opacity:0.7;
  transition:opacity .3s var(--ease), color .3s var(--ease);
}
.ticker__item:hover{ opacity:1; color:var(--white); }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media(max-width:640px){
  .ticker__item{ font-size:20px; }
  .ticker__track{ column-gap:40px; animation-duration:18s; }
}

/* ---------- Work grid (archive page) ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:48px; }
.filter{
  font-family:var(--font-display); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  padding:8px 16px; border:1px solid var(--line); border-radius:100px;
  transition:all .3s var(--ease);
}
.filter.is-active, .filter:hover{ background:var(--white); color:var(--black); border-color:var(--white); }

.work-list{ border-top:1px solid var(--line); }
.work-row{
  display:grid; grid-template-columns: 60px 1.6fr 1.4fr 1fr 90px;
  align-items:center; gap:24px;
  padding:22px 0; border-bottom:1px solid var(--line);
  position:relative; transition:padding-left .4s var(--ease);
}
.work-row:hover{ padding-left:12px; }
.work-row__index{ font-size:12px; color:var(--grey); font-family:var(--font-display); }
.work-row__client{ font-family:var(--font-display); font-weight:600; font-size:19px; }
.work-row__project{ font-size:14px; color:var(--grey); }
.work-row__meta{ font-size:12px; color:var(--grey); text-transform:uppercase; letter-spacing:0.05em; }
.work-row__view{ font-size:11px; text-align:right; letter-spacing:0.1em; text-transform:uppercase; opacity:0; transition:opacity .3s var(--ease); }
.work-row:hover .work-row__view{ opacity:1; }

.work-row__preview{
  position:fixed; top:0; left:0; width:280px; aspect-ratio:16/9;
  pointer-events:none; opacity:0; z-index:50; overflow:hidden;
  transition:opacity .25s var(--ease); border-radius:2px;
}
.work-row__preview.is-visible{ opacity:1; }
.work-row__preview video{ width:100%; height:100%; object-fit:cover; }
/* Desktop-only feature — the JS also skips attaching listeners on
   touch/coarse-pointer devices, this is just a hard backstop. */
@media(hover:none), (pointer:coarse){
  .work-row__preview{ display:none; }
}

/* ---------- Contact / Footer ---------- */
.footer{ padding:64px 40px 40px; border-top:1px solid var(--line); }
.footer__top{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:60px; margin-bottom:120px; }
.footer__cta{ font-family:var(--font-display); font-weight:600; font-size:clamp(18px,2.2vw,30px); letter-spacing:-0.01em; max-width:760px; }

/* ---------- Eye-follow "Start a project" button ---------- */
.eye-btn{
  text-decoration:none; display:inline-flex; align-items:center; gap:14px;
  background:transparent; border:1px solid var(--grey); border-radius:999px;
  padding:18px 26px;
  transition:border-color .3s var(--ease);
}
.eye-btn:hover{ border-color:var(--white); }
.eye-btn__label{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(18px,2.2vw,26px); letter-spacing:-0.01em; color:var(--white);
  white-space:nowrap;
}
.eye-btn__eyes{ display:inline-flex; gap:8px; flex:0 0 auto; }
.eye-btn__eye{
  width:30px; height:30px; border-radius:50%; background:var(--white);
  position:relative; display:inline-block; overflow:hidden; flex:0 0 auto;
}
.eye-btn__pupil{
  position:absolute; width:11px; height:11px; border-radius:50%; background:var(--off-black);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.eye-btn__lid{
  position:absolute; left:0; right:0; top:0; background:var(--off-black); height:0;
  transition:height .08s ease;
}
@media(max-width:480px){
  .eye-btn{ padding:14px 20px; gap:10px; }
  .eye-btn__eye{ width:24px; height:24px; }
  .eye-btn__pupil{ width:9px; height:9px; }
}
.footer__links{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.footer__links a{ font-family:var(--font-display); font-size:13px; letter-spacing:0.05em; text-transform:uppercase; border-bottom:1px solid transparent; }
.footer__links a:hover{ border-color:currentColor; }
.footer__bottom{ display:flex; justify-content:space-between; font-size:11px; color:var(--grey); text-transform:uppercase; letter-spacing:0.06em; flex-wrap:wrap; gap:12px; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(6,6,6,0.96);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox__frame{ width:min(92vw, 1400px); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
.lightbox__frame.is-portrait{ width:min(50vh, 500px); aspect-ratio:9/16; }
.lightbox__frame.is-image{ width:auto; aspect-ratio:auto; }
.lightbox__frame iframe{ width:100%; height:100%; border:0; }
.lightbox__close{
  position:absolute; top:28px; right:36px;
  font-family:var(--font-display); font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.lightbox__img{ display:block; max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain; }
.lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(245,244,240,0.3);
  display:none; align-items:center; justify-content:center;
  font-size:20px; color:var(--white);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__nav:hover{ background:rgba(245,244,240,0.08); border-color:rgba(245,244,240,0.6); }
.lightbox.has-nav .lightbox__nav{ display:flex; }
.lightbox__nav--prev{ left:24px; }
.lightbox__nav--next{ right:24px; }
@media(max-width:720px){
  .lightbox__nav{ width:44px; height:44px; font-size:16px; }
  .lightbox__nav--prev{ left:10px; }
  .lightbox__nav--next{ right:10px; }
}

/* ---------- Cursor trail ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background:var(--white); pointer-events:none; z-index:2000;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
  transition:opacity .3s var(--ease);
  opacity:0;
}

/* ---------- Case study blocks ---------- */
.cs-hero{ position:relative; height:100vh; height:100dvh; min-height:600px; background:var(--off-black); }
.cs-hero__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cs-hero__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.75) 100%); }
.cs-hero__content{ position:absolute; left:0; right:0; bottom:0; padding:48px 40px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.cs-hero__title{ font-family:var(--font-display); font-weight:700; font-size:clamp(30px,5vw,60px); letter-spacing:-0.02em; }
.cs-hero__tags{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.cs-hero__tag{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; border:1px solid var(--line); padding:6px 12px; border-radius:100px; }
@media(max-width:600px){
  .cs-hero__content{ padding:32px 20px; gap:14px; }
  .cs-hero__tags{ gap:5px; flex-wrap:nowrap; }
  .cs-hero__tag{ font-size:9px; letter-spacing:0.04em; padding:5px 8px; white-space:nowrap; }
}
.cs-hero__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%; border:1px solid rgba(245,244,240,0.6);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease), background .35s var(--ease);
  color:var(--white);
}
.cs-hero__play-icon{ margin-left:3px; } /* optical centering — a triangle's visual weight sits left of its bounding box */
.cs-hero:hover .cs-hero__play{ transform:translate(-50%,-50%) scale(1.08); background:rgba(245,244,240,0.08); }

.cs-intro-row{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:60px;
  align-items:start;
  padding:100px 40px 40px;
}
@media(max-width:820px){
  .cs-intro-row{ grid-template-columns:1fr; gap:32px; padding:64px 40px 20px; }
}
.cs-intro{ max-width:none; }
.cs-intro p:not(.cs-eyebrow){ font-family:var(--font-display); font-weight:400; font-size:clamp(16px,1.7vw,20px); line-height:1.65; color:var(--white); margin-bottom:22px; }
.cs-intro p:last-child{ margin-bottom:0; }

.cs-eyebrow{
  font-family:'SF Mono', 'Roboto Mono', monospace;
  font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--grey);
  margin-bottom:20px;
}
.cs-credits__list{ display:flex; flex-direction:column; gap:10px; }
.cs-credits__row{ display:grid; grid-template-columns:150px 1fr; column-gap:10px; font-family:var(--font-display); font-size:clamp(16px,1.7vw,20px); }
.cs-credits__label{ color:var(--grey); }
.cs-credits__value{ color:var(--white); }
@media(max-width:480px){
  .cs-credits__row{ grid-template-columns:120px 1fr; }
}
.cs-credits__year-label{ margin-top:40px; margin-bottom:20px; }
.cs-credits__year{ font-family:var(--font-display); font-size:clamp(16px,1.7vw,20px); color:var(--white); }

.cs-block{ padding:60px 40px; }
.cs-block__head{ margin-bottom:28px; max-width:760px; }
.cs-block__title{ font-family:var(--font-display); font-weight:600; font-size:22px; margin-bottom:10px; }
.cs-block__caption{ font-size:15px; line-height:1.65; color:var(--grey); font-weight:300; }

/* ---------- Frame: single 16:9 block, video or photo ----------
   Static by default (no hover, no click) — this is passive supporting
   visual content, not something to interact with. Photos: just an
   <img>, nothing else. Videos: add modifier class "cs-frame--video"
   alongside "cs-frame" for the hover-zoom + static dimmed play icon +
   click-to-watch-in-lightbox treatment (autoplay loop is the muted
   preview; the lightbox click is what plays it full quality with sound). */
.cs-frame{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--off-black); }
.cs-frame img, .cs-frame video{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-frame--video{ cursor:pointer; }
.cs-frame--video img, .cs-frame--video video{ transition:transform .6s var(--ease); }
.cs-frame--video:hover img, .cs-frame--video:hover video{ transform:scale(1.03); }
.cs-frame__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  border:1px solid rgba(245,244,240,0.7);
  background:rgba(17,17,17,0.25);
  display:flex; align-items:center; justify-content:center;
  opacity:0.85; transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
  color:var(--white);
}
.cs-frame__play-icon{ margin-left:2px; }
.cs-frame--video:hover .cs-frame__play{ opacity:1; transform:translate(-50%,-50%) scale(1.06); }

/* ---------- Duo: two static 4:5 frames side by side ----------
   Same "purely visual, not interactive" rule as .cs-frame — photo or
   looping video, no play button, no hover, no click, regardless of
   content type. Fixed at 4:5 — no 9:16/tall variant in the default
   template. Used for the side-by-side moments in between the single
   16:9 frames and the photo strip. */
.cs-duo{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.cs-duo__item{ position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--off-black); }
.cs-duo__item img, .cs-duo__item video{ width:100%; height:100%; object-fit:cover; display:block; }
@media(max-width:600px){ .cs-duo{ grid-template-columns:1fr; } }

/* ---------- Strip: grab-and-drag scrollable photo strip ----------
   The only clickable photo content in the page — everything else (Frame,
   Duo) is static. Fixed height, natural width so each image keeps its
   as-shot aspect ratio rather than being cropped to a uniform box.
   Drag-to-scroll is added in main.js; native touch/trackpad scroll works
   automatically. The nav arrows are a visual hint plus a click-to-scroll
   shortcut. Minimum 4 images (use .cs-duo for a deliberately smaller set). */
.cs-strip-wrap{ position:relative; }
.cs-strip{ display:flex; gap:12px; overflow-x:auto; scrollbar-width:none; cursor:grab; user-select:none; }
.cs-strip::-webkit-scrollbar{ display:none; }
.cs-strip:active{ cursor:grabbing; }
.cs-strip__item{ flex:0 0 auto; height:360px; width:auto; object-fit:cover; cursor:pointer; transition:transform .35s var(--ease); }
.cs-strip__item:hover{ transform:scale(1.015); }
@media(max-width:820px){ .cs-strip__item{ height:280px; } }
@media(max-width:600px){ .cs-strip__item{ height:220px; } }
.cs-strip__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(245,244,240,0.5); background:rgba(17,17,17,0.55);
  color:var(--white); display:flex; align-items:center; justify-content:center;
  font-size:16px; cursor:pointer; opacity:0.85; transition:opacity .3s var(--ease);
  z-index:2;
}
.cs-strip__nav:hover{ opacity:1; }
.cs-strip__nav--prev{ left:12px; }
.cs-strip__nav--next{ right:12px; }
@media(max-width:600px){ .cs-strip__nav{ display:none; } }

.accordion{ border-top:1px solid var(--line); max-width:none; }
.accordion__item{ border-bottom:1px solid var(--line); }
.accordion__trigger{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-family:var(--font-display); font-size:14px; letter-spacing:0.04em; text-transform:uppercase; }
.accordion__icon{ font-size:18px; transition:transform .3s var(--ease); }
.accordion__item.is-open .accordion__icon{ transform:rotate(45deg); }
.accordion__panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.accordion__panel p{ padding-bottom:22px; font-size:14px; line-height:1.7; color:var(--grey); font-weight:300; max-width:760px; }

.cs-back{ display:inline-block; padding:60px 40px 40px; font-family:var(--font-display); font-size:12px; letter-spacing:0.1em; text-transform:uppercase; }

/* ---------- 404 ---------- */
.error404{
  min-height:70vh; display:flex; flex-direction:column; justify-content:center;
  padding:120px 40px;
}
.error404__title{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(40px,6vw,88px); letter-spacing:-0.02em; color:var(--white);
  margin-bottom:18px;
}
.error404__copy{ font-size:16px; color:var(--grey); font-weight:300; margin-bottom:36px; max-width:480px; }
.error404__links{ display:flex; gap:28px; flex-wrap:wrap; }
.error404__links a{
  font-family:var(--font-display); font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--white); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:4px;
  transition:opacity .3s var(--ease);
}
.error404__links a:hover{ opacity:0.7; }

/* ---------- Other Projects: numbered label above 16:9 thumb, dark theme ---------- */
.cs-other{
  background:var(--off-black);
  color:var(--white);
  padding:72px 40px;
}
.cs-other__heading{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(34px,4.8vw,64px); letter-spacing:-0.02em; text-transform:uppercase;
  line-height:0.95; color:var(--white); margin-bottom:32px;
}
.cs-other__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.cs-other__card{
  display:flex;
  flex-direction:column;
  gap:12px;
  text-decoration:none;
  color:var(--white);
}
.cs-other__label{
  font-family:'SF Mono', 'Roboto Mono', monospace;
  font-size:12px; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--grey);
}
.cs-other__thumb{
  width:100%; aspect-ratio:16/9; overflow:hidden; background:#1c1c1c;
}
.cs-other__thumb img,
.cs-other__thumb video{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease);
}
.cs-other__card:hover .cs-other__thumb img,
.cs-other__card:hover .cs-other__thumb video{ transform:scale(1.05); }
@media(max-width:820px){
  .cs-other{ padding:56px 24px; }
  .cs-other__grid{ grid-template-columns:1fr; gap:20px; }
  .cs-other__heading{ font-size:clamp(30px,9vw,44px); margin-bottom:24px; }
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media(max-width:720px){
  .nav{ padding:0 20px; }
  .hero__statement, .carousel, .carousel__nav{ padding-left:20px; padding-right:20px; }
  .section{ padding:90px 20px; }
  .pillars{ grid-template-columns:1fr; gap:36px; }
  .work-row{ grid-template-columns:32px 1fr; row-gap:6px; }
  .work-row__project, .work-row__meta, .work-row__view{ grid-column:2; }
  .footer{ padding:80px 20px 30px; }
  /* Case-study blocks used a flat 60px top/bottom padding at every
     width, which stacked into a big gap between blocks on a phone —
     and inconsistently: a stacked mobile .cs-duo pair already sits
     16px apart (its own grid gap), so a block-boundary gap any wider
     than that read as uneven. 8px top/bottom here = 16px between any
     two consecutive blocks, matching the duo's internal gap exactly. */
  .cs-block{ padding:8px 20px; }
}

/* ================= V2 additions ================= */

/* Hero carousel: real 3D box geometry (front face + a visible right +
   bottom edge, like an actual card with thickness), layered on top of
   Swiper for the drag/loop/autoplay mechanics — not Swiper's coverflow
   effect, which only tilts a flat plane. Swiper marks whichever slide is
   centered with .swiper-slide-active; everything else keeps this rest
   tilt and hovering any card also flattens it. Ref: ena.supply 3d-07. */
.hero .carousel{ padding-top:0; }
.hero-swiper{ width:100%; padding:10px 0 40px; }
/* perspective must sit on the DIRECT parent of the rotated elements —
   .swiper-slide is a grandchild of .hero-swiper (.hero-swiper >
   .swiper-wrapper > .swiper-slide), so perspective on .hero-swiper never
   reached it; the wrapper also needs preserve-3d or it flattens the 3D
   context before it gets to the slides. Confirmed live via computed
   styles — this was the actual bug behind the "flat" carousel. */
.hero-swiper .swiper-wrapper{ perspective:2200px; transform-style:preserve-3d; overflow:visible; }
.hero-swiper.hero-swiper .swiper-slide{
  --depth: 26px;
  width:min(62vw, 780px);
  aspect-ratio:16/9;
  border-radius:2px;
  background:var(--off-black);
  transform-style:preserve-3d;
  transform:rotateY(18deg) rotateX(5deg) !important;
  transition:transform .6s var(--ease);
}
.hero-swiper.hero-swiper .swiper-slide-active,
.hero-swiper.hero-swiper .swiper-slide:hover{
  transform:rotateY(0deg) rotateX(0deg) !important;
}
.hero-swiper .swiper-slide::after{
  /* right edge face */
  content:'';
  position:absolute; top:0; right:0; bottom:0; width:var(--depth);
  background:linear-gradient(180deg, rgba(245,244,240,0.32), rgba(0,0,0,0.62));
  transform-origin:left center;
  transform:rotateY(90deg);
  border-radius:0 2px 2px 0;
}
.hero-swiper .swiper-slide::before{
  /* bottom edge face */
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:var(--depth);
  background:linear-gradient(90deg, rgba(0,0,0,0.62), rgba(245,244,240,0.26));
  transform-origin:top center;
  transform:rotateX(-90deg);
  border-radius:0 0 2px 2px;
}
.hero-swiper .carousel__item{ position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }

/* Hero statement, now BELOW the carousel */
.hero__statement--below{
  padding:36px 40px 0;
  max-width:900px;
}

/* Work-row preview: poster shows instantly, video crossfades in once playing */
.work-row__preview{ background:var(--off-black); }
.work-row__preview .preview-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:1; transition:opacity .3s var(--ease);
}
.work-row__preview video{
  position:relative; z-index:1; opacity:0; transition:opacity .3s var(--ease);
}
.work-row__preview video.is-ready{ opacity:1; }
.work-row__preview .preview-poster.is-hidden{ opacity:0; }