/* ============================================
   ORIT — Brand v5 · Interactive film experience
   Palette: Charcoal #1B1B1B · Slate #343334 · Khaki #4A463D
            Warm Beige #C8BFA6 · Off White #F5F5F2
   Type: Space Grotesk (display) + Inter (body)
   ============================================ */

:root{
  --beige:#C8BFA6;
  --beige-soft: rgba(200,191,166,0.5);
  --khaki:#4A463D;
  --charcoal:#1B1B1B;
  --slate:#343334;
  --off:#F5F5F2;
  --off-dim: rgba(245,245,242,0.6);
  --off-faint: rgba(245,245,242,0.32);
  --line: rgba(245,245,242,0.12);
  --ease: cubic-bezier(.16,.84,.44,1);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--charcoal); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
body{
  background:var(--charcoal);
  color:var(--off);
  font-family:var(--font-body);
  overflow-x:hidden;
  cursor:none;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; background:none; border:none; cursor:none; }
em{ font-style:italic; color:var(--beige); }
::selection{ background:var(--beige); color:var(--charcoal); }
@media (hover:none){ body, button{ cursor:auto; } }

.section-tag{
  display:block; font-family:var(--font-display); font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--beige);
}

/* JS-driven reveals — visible by default, JS sets initial states */
[data-reveal], [data-split-lines]{ will-change: transform, opacity; }

/* ============ PRELOADER ============ */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
}
.preloader.is-done{ visibility:hidden; pointer-events:none; }
.pl-center{ display:flex; flex-direction:column; align-items:center; gap:1.8rem; position:relative; z-index:2; }
.pl-logo-clip{ overflow:hidden; }
.pl-logo{ display:block; width:clamp(160px, 22vw, 300px); height:auto; transform:translateY(105%); }
.pl-line{ width:clamp(160px, 22vw, 300px); height:1px; background:var(--line); overflow:hidden; }
.pl-line span{ display:block; height:100%; width:0%; background:var(--beige); }
.pl-count{
  position:absolute; right:3rem; bottom:2.4rem; z-index:2;
  font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,6vw,4.6rem);
  color:var(--off-faint); font-variant-numeric: tabular-nums; letter-spacing:-.02em;
}
.pl-meta{
  position:absolute; left:3rem; bottom:2.7rem; z-index:2;
  display:flex; flex-direction:column; gap:.35rem;
  font-family:var(--font-display); font-size:.65rem; letter-spacing:.22em; color:var(--off-faint);
}
.pl-curtain{ position:absolute; top:0; bottom:0; width:50.5%; background:var(--charcoal); z-index:1; will-change:transform; }
.pl-curtain-l{ left:0; }
.pl-curtain-r{ right:0; }

/* ============ GRAIN / CURSOR / CHROME ============ */
/* static tiled noise — cheap: no live filter, no blend-mode recompositing per frame.
   The tile is oversized and jitters via a stepped transform = real film-grain flicker,
   still compositor-only (transform), still cheap. */
.grain-svg{
  position:fixed; top:-10%; left:-10%; width:120%; height:120%;
  pointer-events:none; z-index:9990; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation: grainJitter .6s steps(4) infinite;
  will-change: transform;
}
@keyframes grainJitter{
  0%{ transform:translate(0,0); }
  25%{ transform:translate(-2%, 1.4%); }
  50%{ transform:translate(1.6%, -1.8%); }
  75%{ transform:translate(-1.2%, -0.8%); }
  100%{ transform:translate(0,0); }
}

/* viewfinder corners — fixed frame brackets */
.vf-corner{
  position:fixed; width:22px; height:22px; z-index:9992; pointer-events:none;
  border:0 solid rgba(245,245,242,0.28);
}
.vf-tl{ top:14px; left:14px; border-top-width:1px; border-left-width:1px; }
.vf-tr{ top:14px; right:14px; border-top-width:1px; border-right-width:1px; }
.vf-bl{ bottom:14px; left:14px; border-bottom-width:1px; border-left-width:1px; }
.vf-br{ bottom:14px; right:14px; border-bottom-width:1px; border-right-width:1px; }

/* live scroll timecode */
.tc-readout{
  position:fixed; right:2.6rem; bottom:1.4rem; z-index:9992; pointer-events:none;
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--font-display); font-size:.62rem; letter-spacing:.18em; color:var(--off-faint);
}
.tc-readout b{ font-weight:500; color:var(--off-dim); font-variant-numeric:tabular-nums; letter-spacing:.12em; }
.tc-rec{ width:6px; height:6px; border-radius:50%; background:#b5533c; animation:recBlink 1.6s steps(1) infinite; }
.rec-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:#b5533c; margin-right:.55em; animation:recBlink 1.6s steps(1) infinite; }
@keyframes recBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.15; } }

.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--beige); }
.cursor-ring{
  width:36px; height:36px; border:1px solid var(--beige-soft);
  display:flex; align-items:center; justify-content:center;
  transition: width .35s var(--ease), height .35s var(--ease), border-color .3s, background .3s;
}
.cursor-ring.is-active{ width:64px; height:64px; background:rgba(200,191,166,0.08); border-color:var(--beige); }
.cursor-ring.is-view{ width:86px; height:86px; background:rgba(27,27,27,0.55); border-color:var(--beige); backdrop-filter:blur(4px); }
.cursor-label{
  font-family:var(--font-display); font-size:.6rem; letter-spacing:.24em; color:var(--beige);
  opacity:0; transition:opacity .25s; transform:translateX(.12em);
}
.cursor-ring.is-view .cursor-label{ opacity:1; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

.frame-edge{
  position:fixed; top:0; bottom:0; width:2.2rem; z-index:600; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.frame-edge-l{ left:0; }
.frame-edge-r{ right:0; }
.scene-marker, .frame-year{
  font-family:var(--font-display); font-size:.62rem; letter-spacing:.3em;
  color:var(--off-faint); writing-mode:vertical-rl; white-space:nowrap;
}
.scene-marker{ transform:rotate(180deg); }

.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--khaki), var(--beige)); z-index:9998;
}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.6rem 3rem;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s, transform .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-hidden{ transform:translateY(-110%); }
.nav.scrolled{
  background:rgba(27,27,27,0.82); backdrop-filter: blur(14px);
  padding: 1rem 3rem; border-bottom-color: var(--line);
}
.nav-mark{ display:flex; align-items:center; }
.nav-badge{
  position:relative; display:flex; align-items:center; justify-content:center;
  width:clamp(2.6rem, 4vw, 3.5rem); height:clamp(2.6rem, 4vw, 3.5rem);
  border-radius:50%; transition: width .4s var(--ease), height .4s var(--ease);
}
.nav.scrolled .nav-badge{ width:clamp(2.2rem, 3.2vw, 2.9rem); height:clamp(2.2rem, 3.2vw, 2.9rem); }
.nav-badge-ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(245,245,242,0.32);
}
.nav-badge-mark{
  position:relative; width:76%; height:auto; display:block;
}
.nav-links{ display:flex; gap:2.6rem; }
.nav-links a{ font-size:.85rem; letter-spacing:.02em; color:var(--off-dim); position:relative; transition:color .3s; }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-5px; width:0; height:1px;
  background:var(--beige); transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--off); }
.nav-links a:hover::after{ width:100%; }
.nav-meta{ display:flex; align-items:center; gap:.9rem; font-family:var(--font-display); }
.nav-loc{ font-size:.68rem; letter-spacing:.18em; color:var(--off-faint); }
.nav-burger{ display:none; width:28px; height:18px; position:relative; }
.nav-burger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--off); transition:transform .3s var(--ease); }
.nav-burger span:first-child{ top:0; }
.nav-burger span:last-child{ bottom:0; }
.mobile-menu{
  position:fixed; inset:0; background:var(--charcoal); z-index:490;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  transform:translateY(-100%); transition:transform .5s var(--ease); opacity:0;
}
.mobile-menu.is-open{ transform:translateY(0); opacity:1; }
.mobile-menu a{ font-family:var(--font-display); font-size:2rem; color:var(--off); }

/* ============ SHARED BG ============ */
.spotlight{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; animation:drift 22s ease-in-out infinite alternate; }
.spotlight-a{ width:46vw; height:46vw; top:-14vw; left:-8vw; background:radial-gradient(circle, rgba(200,191,166,0.35), transparent 70%); }
.spotlight-b{ width:34vw; height:34vw; bottom:-10vw; right:-6vw; background:radial-gradient(circle, rgba(74,70,61,0.55), transparent 70%); animation-delay:-8s; }
.spotlight-c{ width:26vw; height:26vw; top:38%; left:60%; background:radial-gradient(circle, rgba(200,191,166,0.18), transparent 70%); animation-delay:-14s; }
@keyframes drift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(3vw,-3vw) scale(1.08); } }
.hero-vignette{ position:absolute; inset:0; background:radial-gradient(ellipse at center, transparent 35%, rgba(27,27,27,0.85) 100%); }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.6s var(--ease); z-index:0;
}
.hero-video.is-live{ opacity:.28; }
.hero-torch{
  position:absolute; width:42vw; height:42vw; border-radius:50%;
  top:0; left:0; margin:-21vw 0 0 -21vw;
  background:radial-gradient(circle, rgba(200,191,166,0.13), transparent 62%);
  will-change:transform; pointer-events:none;
}
.dust{ position:absolute; inset:0; pointer-events:none; }
.dust span{ position:absolute; width:2px; height:2px; background:var(--beige); border-radius:50%; opacity:.5; animation:floaty linear infinite; }
@keyframes floaty{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.6; } 90%{ opacity:.4; }
  100%{ transform:translateY(-110vh) translateX(20px); opacity:0; }
}
.dot-pulse{
  width:6px; height:6px; border-radius:50%; background:var(--beige); display:inline-block;
  box-shadow:0 0 0 0 rgba(200,191,166,0.6); animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(200,191,166,0.55); }
  70%{ box-shadow:0 0 0 10px rgba(200,191,166,0); }
  100%{ box-shadow:0 0 0 0 rgba(200,191,166,0); }
}

/* ============ SCENE 00 — HERO ============ */
.scene-hero{ height:200vh; position:relative; }
.hero-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.hero-bg{ position:absolute; inset:0; }
.hero-core{ position:relative; z-index:2; text-align:center; will-change:transform, opacity, filter; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-display);
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--off-dim);
  margin-bottom:1.8rem;
}
/* The wordmark SVG viewBox (1881×836) has trailing/below whitespace:
   the T's right edge sits at x=1631 (86.7%) and the letter baseline at
   y=518 (61.96%). So the dot is absolutely pinned to the glyph itself
   rather than the image box — otherwise it floats off to the right.

   MUST stay block-level (not inline-flex): .hero-eyebrow is inline-flex,
   so an inline-level mark would share a text line with it and shove the
   logo off-centre. width:fit-content + auto margins keeps the box shrunk
   to the image (so the dot's 88% resolves against the artwork) while
   still forcing its own centred line. */
.hero-mark{
  position:relative; display:flex; align-items:flex-end;
  width:fit-content; margin-inline:auto;
}
.hero-mark-clip{ display:block; overflow:hidden; }
.hero-mark-img{ display:block; width:clamp(280px, 55vw, 640px); height:auto; will-change:clip-path, transform; }
.hero-mark-dot{
  position:absolute; left:88%; bottom:38.04%;
  width:clamp(10px,1.6vw,18px); height:clamp(10px,1.6vw,18px); border-radius:50%;
  background:var(--beige); will-change:transform, opacity;
}
.hero-tagline{
  display:flex; gap:.9em; justify-content:center; flex-wrap:wrap;
  font-family:var(--font-display); font-size:clamp(.85rem, 1.6vw, 1.15rem);
  letter-spacing:.28em; color:var(--beige); margin-top:1.8rem;
}
.tg-word{ display:inline-block; white-space:nowrap; }
.tg-word .ch-wrap{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.tg-word .ch{ display:inline-block; will-change:transform; }
.hero-foot{
  position:absolute; left:0; right:0; bottom:2.4rem; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; padding:0 3.4rem;
}
.hero-coord{ font-family:var(--font-display); font-size:.62rem; letter-spacing:.24em; color:var(--off-faint); }
.scroll-cue{ display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.scroll-cue span{ font-family:var(--font-display); font-size:.65rem; letter-spacing:.3em; color:var(--off-faint); }
.scroll-cue-line{ width:1px; height:38px; background:linear-gradient(var(--beige), transparent); animation:cueMove 1.8s ease-in-out infinite; }
@keyframes cueMove{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* ============ SCENE 01 — STATEMENT ============ */
.scene-statement{ height:220vh; position:relative; background:var(--charcoal); }
.stmt-sticky{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center; justify-content:center; padding:0 8vw;
}
.stmt{
  position:relative; z-index:2;
  font-family:var(--font-display); font-weight:600; text-align:center;
  font-size:clamp(1.35rem, 2.7vw, 2.3rem); line-height:1.35; max-width:26ch;
  letter-spacing:-.01em; will-change:transform, opacity;
}
.stmt .wd{ color:var(--off-faint); transition:none; }
/* Inline wordmark: a mask filled with currentColor, so it inherits whatever
   colour the word-stagger tween has reached. Sized to the cap height of the
   surrounding type rather than the full line box. */
.inline-mark{
  display:inline-block; vertical-align:baseline;
  /* The shipped wordmark sits in a 1881×836 box but its letterforms only
     occupy 1374×200 of it, so scaling by the file's own ratio renders the
     logo at a quarter of the surrounding cap height. The -tight variant
     re-crops the viewBox to the ink (ratio 6.87), letting the mark be set to
     the real cap height of the type around it. */
  height:.72em; width:4.946em; margin-bottom:-.01em;
  background-color:currentColor;
  -webkit-mask:url('images/orit-wordmark-tight.svg') left center / contain no-repeat;
  mask:url('images/orit-wordmark-tight.svg') left center / contain no-repeat;
}
.stmt-ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1;
  width:62vw; pointer-events:none; user-select:none; will-change:transform;
  display:block; line-height:0;
}
/* The wordmark SVG stands in for the giant typed "ORIT" watermark. It is solid
   white artwork, so the faintness comes from opacity rather than a text stroke. */
.ghost-mark{ display:block; width:100%; height:auto; opacity:.055; }

/* ============ SCENE 02 — WORK (horizontal) ============ */
.scene-work{ position:relative; }
.work-pin{
  height:100vh; overflow:hidden; background:var(--charcoal);
  display:flex; flex-direction:column; padding: 6.2rem 0 2.6rem;
}
.work-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3.4rem; position:relative; z-index:5;
}
.work-hint{ font-family:var(--font-display); font-size:.62rem; letter-spacing:.26em; color:var(--off-faint); }
.work-track{
  display:flex; align-items:center; gap:7vw; height:100%;
  padding-left:16vw; padding-right:12vw; width:max-content;
  will-change:transform; margin-top:1rem;
}
.panel{ position:relative; width:58vw; flex-shrink:0; }
.panel-num{
  position:absolute; top:-11vh; left:-4vw; z-index:1;
  font-family:var(--font-display); font-weight:700; font-size:16vw; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(200,191,166,0.22); letter-spacing:-.04em;
  pointer-events:none; user-select:none;
}
.panel-media{
  position:relative; z-index:2; height:58vh; border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(245,245,242,0.04);
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  will-change: transform;
}
.pm-inner{ position:absolute; inset:-8%; will-change:transform; }
.pm-inner::before{
  content:''; position:absolute; inset:0; opacity:.35; 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)' opacity='0.35'/%3E%3C/svg%3E");
}
.pm-inner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,27,27,0.12) 0%, transparent 32%, rgba(27,27,27,0.6) 100%);
}
.pm-1 .pm-inner{ background: radial-gradient(circle at 28% 22%, #a89a6e 0%, #4a4536 34%, #1B1B1B 72%); }
.pm-2 .pm-inner{ background: radial-gradient(circle at 72% 28%, #8d8a90 0%, #45444a 34%, #1B1B1B 72%); }
.pm-3 .pm-inner{ background: radial-gradient(circle at 32% 72%, #c8bfa6 0%, #4a463d 34%, #1B1B1B 72%); }
.pm-4 .pm-inner{ background: radial-gradient(circle at 68% 58%, #7d90a0 0%, #383c42 34%, #1B1B1B 72%); }
.pm-5 .pm-inner{ background: radial-gradient(circle at 50% 38%, #b7a97e 0%, #4a463d 34%, #1B1B1B 72%); }
/* ══════════ ON SET — BTS film strip ══════════
   CSS-driven drift rather than the gsap ticker the other marquees use: the
   cells are built asynchronously once the images resolve, which is after the
   ticker's marquee list has already been assembled. */
.scene-bts{ padding:6rem 0 5rem; position:relative; }
.scene-bts[hidden]{ display:none; }
.bts-head{
  display:flex; align-items:baseline; gap:1.2rem;
  padding:0 var(--pad, 3.2rem); margin-bottom:2.2rem;
}
.bts-sub{
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(245,245,242,.34);
}
.bts-strip{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.bts-track{
  display:flex; align-items:center; gap:1rem; width:max-content;
  animation:btsDrift 75s linear infinite;
}
@keyframes btsDrift{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (hover:hover){ .bts-strip:hover .bts-track{ animation-play-state:paused; } }
/* Uniform height, native aspect — landscapes run wide, portraits tall and
   narrow, like frames on a strip of film. Nothing is cropped. */
/* second row drifts the other way, so the two never read as one long band */
.bts-strip-b{ margin-top:1rem; }
.bts-track-b{ animation-name:btsDriftB; animation-duration:82s; }
@keyframes btsDriftB{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }

.bts-cell{
  flex:0 0 auto; height:230px; width:auto;
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  background:var(--slate); position:relative; margin:0;
}
.bts-cell img{
  height:100%; width:auto; display:block;
  filter:saturate(.92) contrast(1.04);
  transition:transform .8s var(--ease), filter .6s var(--ease);
}
@media (hover:hover){ .bts-cell:hover img{ transform:scale(1.05); filter:saturate(1) contrast(1); } }
.bts-cell::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(27,27,27,.5));
}
@media (max-width:980px){
  .scene-bts{ padding:4.5rem 0 3.5rem; }
  .bts-head{ padding:0 1.4rem; margin-bottom:1.5rem; }
  /* no drift on touch — let the thumb scroll it instead */
  .bts-strip{ overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory; padding:0 1.4rem; -webkit-mask-image:none; mask-image:none; }
  .bts-strip::-webkit-scrollbar{ display:none; }
  .bts-track{ animation:none; gap:.8rem; }
  .bts-cell{ height:190px; width:auto; scroll-snap-align:center; }
}
@media (prefers-reduced-motion:reduce){ .bts-track{ animation:none; } }

/* ══════════ Capability card backgrounds ══════════
   Full-bleed frame behind the copy. The scrim is heavy on purpose — the
   text has to stay readable over whatever frame is dropped in. */
.cap-card-inner.has-bg{ position:relative; overflow:hidden; isolation:isolate; }
.cap-bg{ position:absolute; inset:0; z-index:-2; }
.cap-bg .pm-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s var(--ease);
}
.cap-bg .pm-img.is-loaded{ opacity:.72; }
.cap-card-inner.has-bg::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(27,27,27,.86) 0%, rgba(27,27,27,.58) 50%, rgba(27,27,27,.2) 100%);
}

/* ══════════ The team — static grid, same card as the founder portrait ══════════
   Each member reuses .portrait-frame / .portrait-media / .portrait-caption so the
   treatment is identical to Kel's, just smaller. A member with no photo on disk
   falls back to the monogram, exactly as the founder card does. */
.team-block{ margin-top:4rem; padding-top:2.6rem; border-top:1px solid var(--line); }
.team-tag{ display:block; margin-bottom:1.6rem; }
.team-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
/* Driven by rAF in script.js, not a keyframe, so the row can be grabbed and
   dragged while still drifting on its own. */
.team-track{ display:flex; gap:1.3rem; width:max-content; will-change:transform; }
.team-marquee{ cursor:grab; touch-action:pan-y; }
.team-marquee.is-dragging{ cursor:grabbing; }
.team-marquee.is-dragging .team-panel{ user-select:none; }
.team-panel img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
.team-frame{ border-radius:14px; }

/* Equipment — one line, no inventory */
.kit-line{ margin-top:.9rem; color:var(--off-dim); font-size:1rem; line-height:1.65; max-width:60ch; }

/* ══════════ Short-form — vertical reels ══════════ */
.scene-short{ padding:6rem 0 5rem; }
.short-head{ padding:0 var(--pad, 3.2rem); margin-bottom:2rem; }
.short-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:.9rem;
  padding:0 var(--pad, 3.2rem);
}
.short-cell{
  position:relative; margin:0; aspect-ratio:9/16; border-radius:16px;
  overflow:hidden; border:1px solid var(--line); background:var(--slate);
}
.short-cell img, .short-cell video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.short-cell video{ opacity:0; transition:opacity .7s var(--ease); z-index:1; }
.short-cell video.is-live{ opacity:1; }
.short-cell::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, transparent 62%, rgba(27,27,27,.45));
}
.short-cell .sf-tap{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; z-index:3;
  border:1px solid rgba(245,245,242,.5); background:rgba(27,27,27,.4);
  display:none; align-items:center; justify-content:center;
}
.short-cell .sf-tap i{
  width:0; height:0; margin-left:3px;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  border-left:13px solid var(--off);
}
@media (max-width:980px){
  .scene-short{ padding:4rem 0 3rem; }
  .short-head{ padding:0 1.4rem; margin-bottom:1.2rem; }
  .short-row{
    display:flex; gap:.8rem; padding:0 1.4rem; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  }
  .short-row::-webkit-scrollbar{ display:none; }
  .short-cell{ flex:0 0 auto; width:62vw; scroll-snap-align:center; }
  .short-cell .sf-tap{ display:flex; }
}

/* ══════════ Frames — screengrab mosaic ══════════
   Static on purpose. The page already has four things in motion; this one
   is meant to be looked at. */
.scene-frames{ padding:6rem 0 6.5rem; }
.frames-head{
  display:flex; align-items:baseline; gap:1.2rem;
  padding:0 var(--pad, 3.2rem); margin-bottom:2.2rem;
}
.frames-sub{
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(245,245,242,.34);
}
.frames-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;
  padding:0 var(--pad, 3.2rem);
}
.frame-cell{
  position:relative; margin:0; aspect-ratio:16/9; overflow:hidden;
  border-radius:10px; border:1px solid var(--line); background:var(--slate);
}
.frame-cell .pm-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.frame-cell .pm-img.is-loaded{ opacity:1; }
@media (hover:hover){ .frame-cell:hover .pm-img{ transform:scale(1.04); } }
@media (max-width:980px){
  .scene-frames{ padding:4rem 0 4.5rem; }
  .frames-head{ padding:0 1.4rem; margin-bottom:1.4rem; }
  .frames-grid{ grid-template-columns:repeat(2,1fr); gap:.6rem; padding:0 1.4rem; }
}

/* real photography layer — sits under the grain + vignette pseudo-elements.
   If the file is missing the <img> is removed and the gradient shows through,
   so panels never break while media is still being supplied. */
.pm-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:0; transition:opacity .9s var(--ease);
}
.pm-img.is-loaded{ opacity:1; }

/* hover loop layer — sits directly on top of .pm-img, still underneath the
   grain + vignette pseudo-elements so a playing clip is graded like the
   stills. Same contract as .pm-img: a missing file removes the element and
   whatever is beneath it (photo, then gradient) is left untouched. */
.pm-loop{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:0; opacity:0; transition:opacity .6s var(--ease);
  pointer-events:none;
}
.pm-loop.is-live{ opacity:1; }

.pm-inner::before{ z-index:1; }
.pm-inner::after{ z-index:2; }

/* play affordance on video panels */
.pm-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; z-index:4;
  border:1px solid rgba(245,245,242,0.5); background:rgba(27,27,27,0.35);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .45s var(--ease), background .45s var(--ease), border-color .45s;
  pointer-events:none;
}
.pm-play i{
  width:0; height:0; margin-left:4px;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-left:15px solid var(--off);
}
.panel:hover .pm-play{ transform:translate(-50%,-50%) scale(1.12); background:rgba(200,191,166,0.18); border-color:var(--beige); }

.panel-link{ display:block; color:inherit; }
.panel-cta{
  display:inline-flex; align-items:center; gap:.5em; margin-top:1rem;
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--beige); opacity:0;
  transform:translateY(6px); transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.panel-cta i{ font-style:normal; transition:transform .45s var(--ease); }
.panel:hover .panel-cta{ opacity:1; transform:translateY(0); }
.panel:hover .panel-cta i{ transform:translate(3px,-3px); }
.panel-caption{ position:relative; z-index:3; margin-top:1.3rem; padding-left:.2rem; }
.panel-tag{
  display:block; font-family:var(--font-display); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--beige); margin-bottom:.55rem;
}
.panel-caption h3{
  font-family:var(--font-display); font-weight:600; line-height:1.05;
  font-size:clamp(1.4rem, 2.6vw, 2.2rem); margin-bottom:.5rem;
}
.panel-caption p{ color:var(--off-dim); font-size:.9rem; max-width:44ch; line-height:1.55; font-weight:300; }
.work-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3.4rem; position:relative; z-index:5;
}
.work-index{ font-family:var(--font-display); display:flex; align-items:baseline; gap:.5rem; }
.work-index i{ font-style:normal; color:var(--off-faint); font-size:.7rem; }
#workIndex{ color:var(--beige); font-size:1.2rem; }
#workTotal{ color:var(--off-dim); font-size:.85rem; }
.work-progress{ width:32vw; height:1px; background:var(--line); overflow:hidden; }
.work-progress span{ display:block; height:100%; width:0%; background:var(--beige); }

/* ============ BAND ============ */
.band{ position:relative; padding:5rem 0 4.5rem; overflow:hidden; background:var(--charcoal); }
.band-inner{ transform:none; }
.band-track{
  display:flex; gap:1.6rem; align-items:center; white-space:nowrap; width:max-content;
  font-family:var(--font-display); letter-spacing:.1em; will-change:transform;
  padding:1.15rem 0;
}
.band-track i{ font-style:normal; color:var(--beige); font-size:.55rem; }
.bt-a{ background:var(--khaki); color:var(--off); font-size:1.15rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bt-b{ color:var(--off-faint); font-size:.85rem; margin-top:.6rem; }

/* ============ SCENE 03 — CAPABILITIES ============ */
.scene-caps{ position:relative; background:var(--charcoal); padding: 8rem 0 10rem; }
.caps-head{ max-width:1280px; margin:0 auto 4rem; padding:0 3.4rem; }
.caps-title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(2rem, 5vw, 4.2rem); line-height:1.08; margin-top:1.2rem;
}
.cap-stack{ max-width:920px; margin:0 auto; padding:0 3.4rem; }
.cap-card{ position:sticky; top:14vh; padding-top:1rem; }
.cap-card:nth-child(2){ top:calc(14vh + 14px); }
.cap-card:nth-child(3){ top:calc(14vh + 28px); }
.cap-card:nth-child(4){ top:calc(14vh + 42px); }
.cap-card:nth-child(5){ top:calc(14vh + 56px); }
.cap-card-inner{
  position:relative; background:var(--slate); border:1px solid var(--line); border-radius:18px;
  padding:2.6rem 2.8rem 2.2rem; min-height:44vh;
  display:flex; flex-direction:column; gap:.9rem;
  box-shadow:0 -20px 60px -30px rgba(0,0,0,.8);
  will-change:transform;
}
.cap-dim{
  position:absolute; inset:0; border-radius:inherit; background:var(--charcoal);
  opacity:0; pointer-events:none; will-change:opacity;
}
.cap-num{ font-family:var(--font-display); font-size:.78rem; color:var(--beige); letter-spacing:.16em; }
.cap-card-inner h3{ font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.4rem); font-weight:600; letter-spacing:-.01em; }
.cap-card-inner p{ color:var(--off-dim); font-size:1rem; line-height:1.6; max-width:52ch; }
.cap-ref{ margin-top:auto; font-family:var(--font-display); font-size:.62rem; letter-spacing:.22em; color:var(--off-faint); }

/* ============ SCENE 04 — ABOUT ============ */
.scene-about{ padding: 9rem 3.4rem; max-width:1280px; margin:0 auto; }
.about-grid{ display:grid; grid-template-columns:340px 1fr; gap:5rem; align-items:start; }
.about-copy-wide{ max-width:72ch; }
.portrait-frame{
  position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden;
  border:1px solid var(--line);
}
.portrait-media{
  position:absolute; inset:-12% 0; will-change:transform;
  background: radial-gradient(circle at 32% 26%, #a89a6e 0%, #423f34 42%, #1B1B1B 78%);
  display:flex; align-items:center; justify-content:center;
}
.portrait-media::before{
  content:''; position:absolute; inset:0; opacity:.35; 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)' opacity='0.35'/%3E%3C/svg%3E");
}
/* shine sweep on hover */
.portrait-frame::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:2;
  background:linear-gradient(105deg, transparent, rgba(245,245,242,0.10), transparent);
  transform:skewX(-18deg); transition:left .9s var(--ease); pointer-events:none;
}
.portrait-frame:hover::after{ left:120%; }
.portrait-initial{
  position:relative; z-index:1; font-family:var(--font-display); font-weight:700;
  font-size:3.4rem; letter-spacing:-.02em; color:rgba(245,245,242,0.5);
}
.portrait-caption{
  display:block; margin-top:1rem; font-family:var(--font-display);
  font-size:.62rem; letter-spacing:.24em; color:var(--off-faint);
}
.about-copy h2{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.8rem, 3.6vw, 3.2rem); line-height:1.12; margin:1.2rem 0 1.6rem;
}
.about-copy p{ font-size:1rem; color:var(--off-dim); line-height:1.7; max-width:58ch; }
.about-copy p + p{ margin-top:1.1rem; }

/* ============ SCENE 05 — STUDIO ============ */
.scene-studio{
  background:var(--slate); position:relative; z-index:3;
  border-radius:28px 28px 0 0; margin-top:-28px;
  box-shadow:0 -30px 60px -40px rgba(0,0,0,.9);
}
.studio-core{
  min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  padding: 8rem 3.4rem; max-width:1280px; margin:0 auto; gap:3.5rem;
}
.studio-lines{ display:flex; flex-direction:column; gap:.2rem; }
.studio-line{
  font-family:var(--font-display); font-weight:600; line-height:1.14;
  font-size:clamp(1.8rem, 5vw, 4rem); overflow:hidden; letter-spacing:-.01em;
}
.studio-line .sl-inner{ display:inline-block; will-change:transform; }
.kit-block{ display:flex; flex-direction:column; gap:1.4rem; }
.studio-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; border-top:1px solid var(--line); padding-top:2rem; }
.stat-item{ display:flex; flex-direction:column; }
.stat-num{ font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--beige); line-height:1; }
.stat-plus{ font-family:var(--font-display); font-size:1.2rem; color:var(--beige); }
.stat-label{ margin-top:.55rem; font-size:.78rem; color:var(--off-dim); letter-spacing:.02em; }
.studio-affiliate{ font-size:.8rem; color:var(--off-faint); letter-spacing:.02em; }

/* ============ CLIENTS ============ */
.scene-clients{ padding: 7rem 0 6rem; overflow:hidden; background:var(--charcoal); }
.clients-tag{ padding:0 3.4rem; margin-bottom:2.4rem; }
.client-rows{ display:flex; flex-direction:column; gap:1.6rem; }
.client-track{
  display:flex; gap:2.2rem; align-items:center; white-space:nowrap; width:max-content;
  font-family:var(--font-display); font-weight:600; letter-spacing:.04em;
  font-size:clamp(1.6rem, 3.4vw, 3rem); color:var(--off-faint); will-change:transform;
}
.client-track i{ font-style:normal; color:var(--beige); font-size:.7rem; }
.client-track span{ transition:color .35s; }
.client-track span:hover{ color:var(--beige); }

/* ============ FAQ ============ */
.scene-faq{ padding: 6rem 3.4rem 8rem; max-width:860px; margin:0 auto; }
.faq-list{ margin-top:2rem; display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--line); }
.faq-item:last-child{ border-bottom:1px solid var(--line); }
.faq-list{ counter-reset: faq; }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem 0; text-align:left; gap:1.5rem;
  transition:transform .4s var(--ease);
}
.faq-item:hover .faq-q{ transform:translateX(10px); }
.faq-q span{ font-family:var(--font-display); font-size:1.05rem; font-weight:500; color:var(--off); transition:color .3s; }
.faq-q span::before{
  counter-increment: faq; content: counter(faq, decimal-leading-zero) " — ";
  color:var(--beige); font-size:.72rem; letter-spacing:.14em; vertical-align:.14em;
}
.faq-item:hover .faq-q span{ color:var(--beige); }
.faq-x{ position:relative; width:14px; height:14px; flex-shrink:0; }
.faq-x::before, .faq-x::after{
  content:''; position:absolute; background:var(--beige); transition:transform .4s var(--ease);
}
.faq-x::before{ left:0; right:0; top:6.25px; height:1.5px; }
.faq-x::after{ top:0; bottom:0; left:6.25px; width:1.5px; }
.faq-item.is-open .faq-x::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; height:0; }
.faq-a p{ padding:0 0 1.6rem; font-size:.9rem; color:var(--off-dim); line-height:1.65; max-width:58ch; }

/* ============ SCENE 06 — CLOSE ============ */
.scene-close{
  position:relative; padding: 10rem 3.4rem; text-align:center; overflow:hidden;
  min-height:90vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--charcoal);
}
.close-bg{ position:absolute; inset:0; }
.close-bg .spotlight-a{ top:20%; left:30%; width:50vw; height:50vw; }
.close-ghost{
  position:absolute; left:50%; bottom:-2vw; transform:translateX(-50%); z-index:0;
  width:54vw; pointer-events:none; user-select:none; will-change:transform;
  display:block; line-height:0;
}
.close-title{
  position:relative; z-index:1; font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.4rem, 6.4vw, 5.4rem); line-height:1.06; margin:1.6rem 0 2.4rem;
  letter-spacing:-.02em;
}
.close-email{
  position:relative; z-index:1; display:inline-block; font-family:var(--font-display);
  font-size:clamp(1.1rem, 2.4vw, 1.6rem); color:var(--beige); border-bottom:1px solid var(--beige-soft);
  padding-bottom:.3rem; transition: color .3s, border-color .3s;
}
.close-email:hover{ color:var(--off); border-color:var(--off); }
.close-row{ position:relative; z-index:1; margin-top:1.8rem; color:var(--off-dim); font-size:.9rem; display:flex; gap:.8rem; justify-content:center; }
.close-row .sep{ color:var(--off-faint); }
.close-row a{ transition:color .3s; }
.close-row a:hover{ color:var(--beige); }

/* ============ FOOTER ============ */
.footer{ position:relative; z-index:2; background:var(--charcoal); overflow:hidden; border-top:1px solid var(--line); }
.footer-inner{ padding: 3.4rem 3.4rem 2.2rem; max-width:1280px; margin:0 auto; will-change:transform; }
.footer-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:2rem; border-bottom:1px solid var(--line); }
.footer-mark{ position:relative; display:inline-flex; align-items:flex-end; }
.footer-mark-img{ height:.95rem; width:auto; display:block; }
/* pinned to the glyph, same as the hero dot — see note above */
.footer-mark i{
  position:absolute; left:88%; bottom:38.04%;
  width:5px; height:5px; border-radius:50%; background:var(--beige);
}
.footer-links{ display:flex; gap:2rem; }
.footer-links a{ font-size:.82rem; color:var(--off-dim); transition:color .3s; }
.footer-links a:hover{ color:var(--beige); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:1.6rem; font-size:.72rem; letter-spacing:.08em; color:var(--off-faint); text-transform:uppercase; }

/* ============ VIDEO LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0; z-index:9995; display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0;
}
.lightbox.is-open{ visibility:visible; opacity:1; }
.lb-backdrop{ position:absolute; inset:0; background:rgba(12,12,12,0.94); backdrop-filter:blur(6px); }
.lb-stage{
  position:relative; z-index:2; width:min(1180px, 88vw);
  display:flex; flex-direction:column; gap:1rem;
}
.lb-frame{
  position:relative; width:100%; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  background:#000; border:1px solid var(--line);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9);
  transform:scale(.94); opacity:0;
  transition:transform .7s var(--ease), opacity .5s var(--ease);
}
.lightbox.is-open .lb-frame{ transform:scale(1); opacity:1; }
.lb-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.lb-meta{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-display); font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--off-dim);
}
.lb-esc{ color:var(--off-faint); }
.lb-close{
  position:absolute; top:2rem; right:2.4rem; z-index:3;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, transform .3s var(--ease);
}
.lb-close:hover{ border-color:var(--beige); transform:rotate(90deg); }
.lb-close span{ position:absolute; width:16px; height:1px; background:var(--off); }
.lb-close span:first-child{ transform:rotate(45deg); }
.lb-close span:last-child{ transform:rotate(-45deg); }
body.lb-locked{ overflow:hidden; }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .nav-links, .nav-meta{ display:none; }
  .nav-burger{ display:block; }
  body, button{ cursor:auto; }
  .cursor-dot,.cursor-ring{ display:none; }
  .frame-edge, .tc-readout, .vf-corner, .hero-torch{ display:none; }
  .stmt-ghost{ width:112vw; }
  .close-ghost{ width:88vw; }
  .scene-studio{ border-radius:18px 18px 0 0; margin-top:-18px; }

  .scene-hero{ height:100svh; }
  .hero-sticky{ height:100svh; }
  .hero-foot{ padding:0 1.4rem; }
  .hero-coord{ display:none; }

  /* The 70vw ghost word is wider than the phone (≈525px at 375px wide) and
     was pushing the document to 450px. That widened the fixed nav with it and
     threw .nav-burger off-screen, so the mobile menu could not be tapped.
     overflow-x:clip trims the decoration without creating a scroll container,
     so .stmt-sticky can still go sticky if the breakpoint ever changes. */
  .scene-statement{ height:auto; padding:7rem 0; overflow-x:clip; }
  .stmt-sticky{ position:static; height:auto; padding:0 1.6rem; }
  .stmt .wd{ color:var(--off); }

  .work-pin{ height:auto; padding:5rem 0 2rem; }
  .work-head{ padding:0 1.4rem; }
  .work-hint{ display:none; }
  .work-track{
    flex-direction:column; align-items:stretch; width:auto; gap:4rem;
    padding:2rem 1.4rem 0; margin-top:0;
  }
  .panel{ width:100%; }
  .panel-num{ font-size:5.2rem; top:-3.4rem; left:-.4rem; }
  .panel-media{ height:56vw; }
  /* no hover on touch — CTA always visible */
  .panel-cta{ opacity:1; transform:none; }
  .pm-play{ width:56px; height:56px; }
  .lb-stage{ width:94vw; }
  .lb-close{ top:1.2rem; right:1.2rem; }
  .work-foot{ display:none; }

  .band{ padding:4rem 0 3rem; }

  .scene-caps{ padding:5rem 0 6rem; }
  .caps-head{ padding:0 1.4rem; margin-bottom:2.4rem; }
  .cap-stack{ padding:0 1.4rem; }
  .cap-card{ position:static; padding-top:1.2rem; }
  .cap-card-inner{ min-height:0; padding:1.8rem 1.6rem 1.5rem; }

  .scene-about{ padding:5rem 1.4rem; }
  .about-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .portrait-frame{ max-width:260px; }
  .team-frame{ max-width:none; }
  .team-track{ gap:.8rem; }

  /* The 44px tap target below stretches the phone link inside this flex row
     while the plain "/" and location spans stay text-height, so they land on
     different baselines. Centre them and allow a wrap at narrow widths. */
  .close-row{ align-items:center; flex-wrap:wrap; }

  .studio-core{ padding:5rem 1.4rem; gap:2.6rem; min-height:0; }
  .studio-stats{ grid-template-columns:1fr 1fr; }

  .scene-clients{ padding:4.5rem 0; }
  .clients-tag{ padding:0 1.4rem; }

  .scene-faq{ padding:4rem 1.4rem 5rem; }

  .scene-close{ padding:7rem 1.4rem; min-height:70svh; }

  .footer-inner{ padding:2.6rem 1.4rem 2rem; }
  .footer-top{ flex-direction:column; gap:1.4rem; align-items:flex-start; }
  .footer-bottom{ flex-direction:column; gap:.4rem; }

  /* ── Tap targets ──
     Measured on a 375px viewport: the burger was 28×18, the footer links
     32×16 and the phone number 114×18 — all well under the 44px minimum.
     Padding is used rather than width/height so nothing reflows. */
  /* Expand the hit area with a transparent overlay instead of resizing the
     button — the two bars keep their original 28×18 proportions. */
  .nav-burger{ position:relative; }
  .nav-burger::after{ content:''; position:absolute; inset:-13px -8px; }
  .nav-mark{ min-width:44px; min-height:44px; }
  .footer-links{ gap:.2rem 1.1rem; flex-wrap:wrap; }
  .footer-links a,
  .close-email,
  .close-row a,
  .mobile-menu a{
    display:inline-flex; align-items:center; min-height:44px;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .stmt .wd{ color:var(--off); }
}

/* ══════════ SERVICES — sticky visual + accordion ══════════ */
.scene-services{ position:relative; background:var(--charcoal); padding:8rem 0 9rem; }
.svc-head{ max-width:1280px; margin:0 auto 4.5rem; padding:0 3.4rem; }
.svc-title{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(2.4rem, 7vw, 6rem); line-height:.95; margin:1.1rem 0 1.4rem;
}
.svc-sub{ color:var(--off-dim); font-size:1rem; line-height:1.6; max-width:46ch; }
.svc-grid{
  max-width:1280px; margin:0 auto; padding:0 3.4rem;
  display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start;
}
.svc-visual{ position:sticky; top:14vh; }
.svc-visual-inner{
  position:relative; height:64vh; min-height:420px; overflow:hidden;
  border-radius:16px; border:1px solid var(--line); background:var(--slate);
}
.svc-img{
  position:absolute; inset:0; background-position:center; background-size:cover;
  transform:scale(1.06); opacity:0;
  transition:opacity .9s var(--ease), transform 1.4s var(--ease);
}
.svc-img.is-front{ opacity:.9; }
.svc-visual-inner::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(27,27,27,.1) 55%, rgba(27,27,27,.72));
}
.svc-visual-meta{
  position:absolute; left:1.1rem; right:1.1rem; bottom:1rem; z-index:2;
  display:flex; justify-content:space-between; color:var(--off-faint);
}
.svc-visual-meta .mono{
  font-family:var(--font-display); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
}

.svc-item{ border-top:1px solid var(--line); }
.svc-item:last-child{ border-bottom:1px solid var(--line); }
.svc-trigger{
  width:100%; background:none; border:0; cursor:pointer; color:inherit;
  display:grid; grid-template-columns:3rem 1fr 1.4rem; align-items:center; gap:1rem;
  padding:1.5rem 0; text-align:left;
}
.svc-num{
  font-family:var(--font-display); font-size:.62rem; letter-spacing:.2em; color:var(--beige);
}
.svc-name{
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.15rem, 2.2vw, 1.75rem); color:var(--off-dim);
  transition:color .4s var(--ease), transform .5s var(--ease);
}
.svc-item.is-open .svc-name,
.svc-trigger:hover .svc-name{ color:var(--off); }
@media (hover:hover){ .svc-trigger:hover .svc-name{ transform:translateX(.35rem); } }
/* plus → minus, drawn rather than typed so the two strokes stay aligned */
.svc-plus{ position:relative; width:14px; height:14px; justify-self:end; }
.svc-plus::before,
.svc-plus::after{
  content:''; position:absolute; left:0; top:50%; width:14px; height:1px;
  background:var(--beige); transition:transform .45s var(--ease), opacity .45s;
}
.svc-plus::after{ transform:rotate(90deg); }
.svc-item.is-open .svc-plus::after{ transform:rotate(0deg); opacity:0; }
.svc-panel{ max-height:0; overflow:hidden; transition:max-height .6s var(--ease); }
.svc-panel-in{ padding:0 0 1.7rem 4rem; }
.svc-panel-in p{ color:var(--off-dim); font-size:.95rem; line-height:1.6; max-width:46ch; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.1rem; }
.svc-tags span{
  font-family:var(--font-display); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--off-faint); border:1px solid var(--line); border-radius:999px;
  padding:.4rem .75rem; transition:color .35s, border-color .35s;
}
.svc-item.is-open .svc-tags span{ color:var(--beige); border-color:rgba(200,191,166,.3); }

/* ══════════ TEAM — full panels, whole row slides ══════════ */
.team-panel{
  flex:0 0 auto; display:grid; grid-template-columns:168px 1fr; gap:1.5rem;
  width:520px; align-items:center;
  border:1px solid var(--line); border-radius:16px;
  background:rgba(52,51,52,.32); padding:1.3rem;
}
.team-panel .portrait-frame{ border-radius:12px; max-width:none; }
.team-panel .portrait-initial{ font-size:1.9rem; }
.team-panel-copy h3{
  font-family:var(--font-display); font-weight:600; font-size:1.12rem;
  letter-spacing:-.01em; margin:0 0 .3rem;
}
.team-role{
  display:block; font-family:var(--font-display); font-size:.56rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--beige); margin-bottom:.7rem;
}
.team-panel-copy p{ color:var(--off-dim); font-size:.86rem; line-height:1.58; margin:0; }

@media (max-width:980px){
  .scene-services{ padding:5rem 0 6rem; }
  .svc-head{ margin-bottom:2.6rem; padding:0 1.4rem; }
  .svc-grid{ grid-template-columns:1fr; gap:2.2rem; padding:0 1.4rem; }
  .svc-visual{ position:static; }
  .svc-visual-inner{ height:44vh; min-height:260px; }
  .svc-trigger{ grid-template-columns:2.2rem 1fr 1.2rem; padding:1.15rem 0; }
  .svc-panel-in{ padding:0 0 1.3rem 2.2rem; }

  .team-panel{ width:300px; grid-template-columns:96px 1fr; gap:1rem; padding:1rem; }
  .team-panel-copy p{ font-size:.8rem; }
}

/* BTS project credit — hover only, and only on frames that have one.
   Touch devices get no hover, so the caption is shown there permanently
   at low weight rather than being unreachable. */
.bts-cell.has-credit{ position:relative; }
.bts-credit{
  position:absolute; inset:auto 0 0 0; z-index:2; pointer-events:none;
  padding:2rem .6rem .5rem;
  background:linear-gradient(transparent, rgba(27,27,27,.88));
  opacity:0; transform:translateY(6px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.bts-credit span{
  display:block; font-family:var(--font-display); font-size:.52rem;
  letter-spacing:.17em; text-transform:uppercase; color:var(--off);
  /* Credits run to ~36 characters and the cells are ~173px wide, so the
     caption wraps rather than truncating to an unreadable stub. */
  line-height:1.5; text-wrap:balance;
}
@media (hover:hover) and (pointer:fine){
  .bts-cell.has-credit:hover .bts-credit{ opacity:1; transform:translateY(0); }
  /* pause the row so the frame under the cursor stays readable */
  .bts-track:has(.bts-cell:hover){ animation-play-state:paused; }
}
@media (hover:none){
  .bts-credit{ opacity:.75; transform:none; }
}

/* ══════════ CURTAIN — wipe between page and film ══════════ */
.curtain{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  background:var(--charcoal);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(100%);
  will-change:transform;
}
.curtain-mark{
  width:26vw; max-width:460px; opacity:0;
  filter:brightness(0) invert(1);
  transition:opacity .35s var(--ease);
}
.curtain.is-on .curtain-mark{ opacity:.9; }

/* ══════════ CURSOR — blended, with a drag state ══════════ */
.cursor-ring{ mix-blend-mode:difference; }
.cursor-ring.is-drag{
  width:96px; height:96px; background:rgba(245,245,242,.1);
  border-color:var(--off); backdrop-filter:blur(3px);
}
.cursor-ring.is-drag .cursor-label,
.cursor-ring.is-view .cursor-label{ opacity:1; }
/* the ring stretches along the direction of travel while scrolling fast */
.cursor-ring{ transition:width .45s var(--ease), height .45s var(--ease),
              background .45s var(--ease), border-color .45s var(--ease); }

/* ══════════ VELOCITY SKEW ══════════
   Applied per media block rather than to a page wrapper: a wrapper transform
   would break the pinned work section and every position:fixed element. */
[data-skew]{ will-change:transform; }

/* ============ HERO (hero3d.js) ============
   The 3D wordmark plays the zoom-in, then comes apart as you scroll. The DOM wordmark
   stays in layout (it is what the canvas aligns to, and the no-WebGL fallback) but is
   hidden while the 3D one is live. */
.hero-gl{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.hero-gl canvas{ display:block; width:100%; height:100%; transition:opacity .35s ease; }
.gl-hero .hero-mark-img, .gl-hero .hero-mark-dot{ opacity:0 !important; }

/* ============ 3D REEL (reel3d.js) ============
   The canvas sits behind the track; each card's DOM box stays in place for
   layout, links, captions, grain and vignette — only its pixels move to WebGL. */
.reel-gl{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.gl-reel .work-track{ position:relative; z-index:1; }
.gl-reel .panel.gl-live .panel-media{ transform:none !important; }
.gl-reel .panel.gl-live .pm-inner{ background:none !important; }
.gl-reel .panel.gl-live .pm-img,
.gl-reel .panel.gl-live .pm-loop{ opacity:0 !important; }

/* ============ FRAME RING (ring3d.js) ============ */
.scene-ring{ position:relative; height:340vh; background:var(--charcoal); }
.ring-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.ring-gl{ position:absolute; inset:0; }
.ring-gl canvas{ display:block; width:100%; height:100%; }
.ring-copy{
  position:absolute; left:3.4rem; bottom:8vh; z-index:2; pointer-events:none;
  display:flex; flex-direction:column; gap:1.1rem;
}
.ring-title{
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.2rem, 6.4vw, 6.4rem); line-height:.92; letter-spacing:-.035em;
  color:var(--off); mix-blend-mode:difference;
}
.ring-count{ position:absolute; right:3.4rem; bottom:8vh; z-index:2; font-size:.72rem; letter-spacing:.24em; color:var(--off-dim); }
.ring-count span{ color:var(--beige); }
@media (max-width:980px){
  .scene-ring{ height:260vh; }
  .ring-sticky{ height:100svh; }
  .ring-copy{ left:1.4rem; right:1.4rem; bottom:9svh; }
  .ring-count{ right:1.4rem; bottom:3.2svh; }
}

/* ============ requested tweaks ============ */

/* BTS strip: drift + grab (JS adds .is-js on wide screens) */
.bts-strip.is-js{ cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.bts-strip.is-js.is-dragging{ cursor:grabbing; }
.bts-strip.is-js .bts-track{ animation:none; will-change:transform; }
.bts-strip.is-js img{ -webkit-user-drag:none; pointer-events:none; }
.bts-nav{ margin-left:auto; display:flex; gap:.6rem; }
.bts-btn{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:1rem; color:var(--off);
  background:rgba(245,245,242,.03); transition:border-color .3s, background .3s;
}
.bts-btn:hover{ border-color:var(--beige); background:rgba(200,191,166,.12); }
@media (max-width:980px){ .bts-nav{ display:none; } }

/* reel cards: smaller */
.panel{ width:44vw; }
.panel-media{ height:46vh; }
@media (max-width:980px){
  .panel{ width:86%; margin-inline:auto; }
  .panel-media{ height:46vw; }
}

/* back to top — fixed, bottom centre, appears once you have scrolled */
.to-top{
  position:fixed; left:50%; bottom:1.6rem; z-index:90;
  width:58px; height:58px; margin-left:-29px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  color:var(--off); background:rgba(27,27,27,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line);
  opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .3s, background .3s;
}
.to-top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ border-color:var(--beige); background:rgba(200,191,166,.16); }
.to-top-arrow{ font-size:1.05rem; line-height:1; }
.to-top-label{ font-family:var(--font-display); font-size:.46rem; letter-spacing:.24em; color:var(--off-dim); }
.to-top-ring{ position:absolute; inset:-1px; border-radius:50%; pointer-events:none;
  background:conic-gradient(var(--beige) calc(var(--p,0) * 1turn), transparent 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0); mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0); }
@media (max-width:980px){ .to-top{ bottom:calc(1rem + env(safe-area-inset-bottom, 0px)); width:52px; height:52px; margin-left:-26px; } }

/* tighter hand-off between OPEN and INTENT */
.scene-hero{ height:320vh; }
.scene-statement{ height:170vh; }
@media (max-width:980px){ .scene-hero{ height:100svh; } .scene-statement{ height:auto; } }

/* statement text rises into view while the hero is still leaving, so there is no empty screen between OPEN and INTENT */


/* ============ team row: edge to edge, no fade, slower drift (speed set in script.js) ============ */
.team-marquee{
  width:100vw; margin-left:calc(50% - 50vw);
  -webkit-mask-image:none; mask-image:none;
}


/* ============ spacing + services scale-down ============ */
/* air between BTS and the short-form reels */
.scene-short{ padding-top:11rem; }
@media (max-width:980px){ .scene-short{ padding-top:6.5rem; } }

/* WHAT WE DO — everything smaller */
.scene-services{ padding:5.5rem 0 6rem; }
.svc-head{ max-width:1080px; margin-bottom:3rem; }
.svc-title{ font-size:clamp(1.8rem, 4.4vw, 3.6rem); margin:.9rem 0 1rem; }
.svc-sub{ font-size:.9rem; max-width:44ch; }
.svc-grid{ max-width:1080px; gap:3rem; }
.svc-visual{ top:16vh; }
.svc-visual-inner{ height:46vh; min-height:300px; border-radius:14px; }
.svc-trigger{ padding:1.05rem 0; gap:.8rem; grid-template-columns:2.4rem 1fr 1.2rem; }
.svc-num{ font-size:.55rem; }
.svc-name{ font-size:clamp(.98rem, 1.5vw, 1.25rem); }
.svc-panel-in{ padding:0 0 1.2rem 3.2rem; }
.svc-panel-in p{ font-size:.84rem; max-width:44ch; }
.svc-tags{ margin-top:.85rem; gap:.35rem; }
.svc-tags span{ font-size:.5rem; padding:.32rem .6rem; }
@media (max-width:980px){
  .scene-services{ padding:3.8rem 0 4.4rem; }
  .svc-head{ margin-bottom:2rem; }
  .svc-title{ font-size:clamp(1.6rem, 8vw, 2.3rem); }
  .svc-grid{ gap:1.6rem; }
  .svc-visual-inner{ height:30vh; min-height:190px; }
  .svc-trigger{ padding:.9rem 0; grid-template-columns:1.9rem 1fr 1rem; }
  .svc-name{ font-size:.98rem; }
  .svc-panel-in{ padding:0 0 1rem 1.9rem; }
  .svc-panel-in p{ font-size:.82rem; }
}


/* ============ seamless hero → statement ============
   The hero's glows/vignette fade out to plain charcoal as the logo breaks up (--hf is set
   from scroll in script.js), and the statement has no slab of its own, so there is no edge
   for the eye to catch. The statement text pushes in on the same scroll. */
.scene-statement{ background:transparent; }
.hero-bg .spotlight{ opacity:calc(.55 * (1 - var(--hf, 0))); }
.hero-bg .hero-vignette, .hero-bg .dust, .hero-bg .hero-torch{ opacity:calc(1 - var(--hf, 0)); }
@media (max-width:980px){
  /* same pinned breakup as desktop, scaled to a phone screen */
  .scene-hero{ height:290svh; }
}


/* ============ round 6 ============ */
/* BTS: drift + swipe on phones too (JS owns the transform) */
@media (max-width:980px){
  .bts-strip.is-js{ overflow:hidden; scroll-snap-type:none; padding:0; }
  .bts-strip.is-js .bts-track{ padding-left:1.4rem; }
}

/* short-form on phones: 2×2 = four reels on screen, swipe for the rest */
@media (max-width:980px){
  .short-row{
    display:grid; grid-auto-flow:column; grid-template-columns:none; grid-template-rows:repeat(2, auto);
    grid-auto-columns:calc((100% - 2.8rem - .7rem) / 2); gap:.7rem;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:1.4rem;
    padding:0 1.4rem;
  }
  .short-cell{ width:auto; scroll-snap-align:start; border-radius:12px; }
  .short-cell .sf-tap{ width:40px; height:40px; }
}

/* five disciplines — smaller on phones */
@media (max-width:980px){
  .scene-caps{ padding:3.8rem 0 4.4rem; }
  .caps-head{ margin-bottom:1.6rem; }
  .caps-title{ font-size:clamp(1.5rem, 7vw, 2rem); }
  .cap-card{ padding-top:.8rem; }
  .cap-card-inner{ padding:1.25rem 1.2rem 1.1rem; gap:.55rem; border-radius:14px; }
  .cap-num{ font-size:.62rem; }
  .cap-card-inner h3{ font-size:1.12rem; }
  .cap-card-inner p{ font-size:.84rem; line-height:1.5; }
  .cap-ref{ font-size:.5rem; }
}

/* back to top on phones: smaller and tucked lower so it covers nothing */
@media (max-width:980px){
  .to-top{ width:40px; height:40px; margin-left:-20px; bottom:calc(.45rem + env(safe-area-inset-bottom, 0px)); }
  .to-top-label{ display:none; }
  .to-top-arrow{ font-size:.9rem; }
}




/* ============ hero → statement (one pinned sentence, no copies) ============
   The statement overlaps the hero completely; its sentence is pinned at screen centre
   from the very top, hidden, and script.js forms it out of a blur as the camera clears
   the O. Its word-by-word read-out then plays as before. */
.scene-statement{ position:relative; z-index:2; background:transparent; pointer-events:none; }
.scene-statement .stmt-sticky{ opacity:0; visibility:hidden; }
@media (min-width:981px){
  .scene-statement{ margin-top:-320vh; height:560vh; }
  /* O-portal: the statement holds 110vh longer while the reel opens over it (motion.js) */
  html.portal .scene-statement{ height:670vh; }
  html.portal .scene-work{ margin-top:-210vh; z-index:3; }
  .work-pin{ clip-path:inset(0 calc(var(--wipe, 0) * 100%) 0 0); }
  .band-inner{ will-change:clip-path; }
}
@media (max-width:980px){
  .scene-statement{ margin-top:-290svh; height:510svh; padding:0; min-height:0; display:block; overflow:visible; }
  .scene-statement .stmt-sticky{
    position:sticky; top:0; height:100svh; display:flex; align-items:center; justify-content:center; padding:0 1.6rem;
  }
}

.hero-foot > *{ opacity:calc(1 - var(--heroOut, 0)); }

/* the inline ORIT has to be a box so it can travel and grow in the outro */
.stmt .wd-mark{ display:inline-block; transform-origin:50% 50%; }   /* no will-change: keeps the vector crisp when scaled up */
.stmt .wd{ display:inline-block; }

/* ============ contact: button + enquiry pop-up ============ */
.close-actions{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; margin-top:2.6rem; }
.close-actions .close-email{ margin-top:0; font-size:clamp(.95rem, 1.6vw, 1.15rem); color:var(--off-dim); }
.enquire-btn{
  display:inline-flex; align-items:center; gap:.9rem; cursor:pointer;
  padding:1.05rem 1.9rem 1.05rem 2.1rem; border-radius:999px;
  background:var(--off); color:var(--charcoal);
  font-family:var(--font-display); font-weight:600; font-size:.95rem; letter-spacing:.02em;
  transition:transform .5s var(--ease), background .3s, box-shadow .5s var(--ease);
  box-shadow:0 0 0 0 rgba(200,191,166,.0);
}
.enquire-btn i{ font-style:normal; transition:transform .5s var(--ease); }
.enquire-btn:hover{ background:var(--beige); box-shadow:0 18px 50px -18px rgba(200,191,166,.55); }
.enquire-btn:hover i{ transform:translateX(5px); }

.enquiry{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; pointer-events:none; visibility:hidden; }
.enquiry.is-open{ pointer-events:auto; visibility:visible; }
.enq-backdrop{ position:absolute; inset:0; background:rgba(12,12,11,.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); opacity:0; }
.enq-panel{
  position:relative; width:min(680px, 92vw); max-height:88vh; overflow:auto;
  background:#232221; border:1px solid var(--line); border-radius:22px;
  padding:2.6rem 2.6rem 2.2rem; box-shadow:0 60px 120px -40px rgba(0,0,0,.8);
  opacity:0; transform:translateY(40px) scale(.97);
}
.enq-close{ position:absolute; top:1.3rem; right:1.3rem; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); cursor:pointer; }
.enq-close span{ position:absolute; left:50%; top:50%; width:14px; height:1px; background:var(--off); }
.enq-close span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.enq-close span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }
.enq-close:hover{ border-color:var(--beige); }
.enq-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem, 3vw, 2.1rem); letter-spacing:-.02em; margin:.9rem 0 1.8rem; }
.enq-form{ display:flex; flex-direction:column; gap:1.15rem; }
.enq-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.enq-field{ display:flex; flex-direction:column; gap:.5rem; }
.enq-field > span, .enq-chips legend{ font-family:var(--font-display); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--off-dim); }
.enq-field em{ font-style:normal; color:var(--off-faint); letter-spacing:.1em; }
.enq-field input, .enq-field select, .enq-field textarea{
  font:inherit; font-size:.95rem; color:var(--off); background:rgba(245,245,242,.03);
  border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; outline:none; width:100%;
  transition:border-color .3s, background .3s;
}
.enq-field textarea{ resize:vertical; min-height:110px; }
.enq-field select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--off-dim) 50%), linear-gradient(135deg, var(--off-dim) 50%, transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.enq-field select option{ background:#232221; color:var(--off); }
.enq-field input:focus, .enq-field select:focus, .enq-field textarea:focus{ border-color:var(--beige); background:rgba(200,191,166,.05); }
.enq-field.is-bad input, .enq-field.is-bad textarea{ border-color:#c0705a; }
.enq-chips{ border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.enq-chips legend{ margin-bottom:.6rem; padding:0; }
.enq-chips label{ cursor:pointer; }
.enq-chips input{ position:absolute; opacity:0; pointer-events:none; }
.enq-chips span{ display:inline-block; padding:.6rem 1rem; border-radius:999px; border:1px solid var(--line); font-size:.82rem; color:var(--off-dim); transition:all .3s var(--ease); }
.enq-chips label:hover span{ border-color:var(--off-faint); color:var(--off); }
.enq-chips input:checked + span{ background:var(--beige); border-color:var(--beige); color:var(--charcoal); }
.enq-chips input:focus-visible + span{ outline:2px solid var(--beige); outline-offset:2px; }
.enq-foot{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.4rem; }
.enq-note{ font-size:.85rem; color:var(--off-dim); }
.enq-note.is-ok{ color:var(--beige); }
@media (max-width:980px){
  .enquiry{ align-items:flex-end; }
  .enq-panel{ width:100vw; max-height:92svh; border-radius:22px 22px 0 0; padding:2rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom,0px)); }
  .enq-row{ grid-template-columns:1fr; }
  .enq-close{ top:1rem; right:1rem; }
}

/* What we do: the picture sits still in its column — no sticky pinning while scrolling */
.svc-visual{ position:relative; top:auto; }

/* footer's own back-to-top (the floating one hides while the footer is on screen) */
.foot-top{
  display:flex; align-items:center; gap:.55rem; margin:0 auto 1.8rem; cursor:pointer;
  font-family:var(--font-display); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--off-dim); padding:.8rem 1.2rem; border:1px solid var(--line); border-radius:999px;
  transition:color .3s, border-color .3s;
}
.foot-top i{ font-style:normal; }
.foot-top:hover{ color:var(--off); border-color:var(--beige); }

/* ============ Services: directional wipe between stills (motion pass) ============
   The incoming still is drawn across from the right over the outgoing one, settling
   from a slight push; the outgoing one only drops away once it is fully covered. */
.svc-img{ z-index:0; transition:opacity .01s linear 1s, transform 1.4s var(--ease); }
.svc-img.is-front{ z-index:1; transition:none; animation:svcWipe 1.15s cubic-bezier(.77,0,.18,1) both; }
@keyframes svcWipe{
  from{ clip-path:inset(0 0 0 100%); transform:scale(1.18) translateX(5%); }
  to{ clip-path:inset(0 0 0 0); transform:scale(1.06) translateX(0); }
}
@media (prefers-reduced-motion: reduce){ .svc-img.is-front{ animation:none; } }

/* contact headline lines: each one is its own mask so it can stand up from its baseline */
.close-title .cl-line{ display:block; overflow:hidden; perspective:900px; padding-bottom:.06em; }
.close-title .cl-in{ display:inline-block; will-change:transform; }

/* link roll: two stacked copies, the second rolls up into place on hover */
.roll{ display:inline-grid; overflow:hidden; vertical-align:top; line-height:1.25; }
.roll > span{ grid-area:1/1; transition:transform .55s cubic-bezier(.7,0,.2,1); }
.roll > span + span{ transform:translateY(105%); color:var(--beige); }
a:hover > .roll > span:first-child{ transform:translateY(-105%); }
a:hover > .roll > span + span{ transform:translateY(0); }
/* nav: drops back in with a touch of overshoot, leaves briskly */
.nav{ transition:transform .7s cubic-bezier(.34,1.45,.5,1), background .4s, padding .4s, border-color .4s; }
.nav.is-hidden{ transition:transform .45s cubic-bezier(.7,0,.84,0), background .4s, padding .4s, border-color .4s; }
@media (prefers-reduced-motion: reduce){ .roll > span{ transition:none; } }