/* ==========================================================================
   KHAYAL — khayal.agency
   Built to Khayal Brand Guidelines V5 (2026, Erbil).

   ARCHITECTURE — this is not a scrolling page.
   The site is a set of full-screen cinematic scenes (HOME, WORK, SERVICES,
   STUDIO, CONTACT, plus case studies) held in one document. Every scene is a
   fixed layer at the size of the viewport; navigation swaps one for another
   through a short authored transition, never a page load and never a scroll.
   The logo film runs behind all of them in .world — one continuous piece of
   motion that the scenes are cut over. Motion is the artwork.

   The ten rules, as they land in CSS:
     · Ivory leads (42%), Deep Ink grounds (22%). Teal is a spark, never a flood.
     · Flat fields only in the interface. No gradient, no glow, no drop shadow,
       no outlined type. (The one exception is photographic grading — a scrim
       laid over a full-bleed film frame is part of the image, not the UI.)
     · Three durations — 200 / 400 / 700ms. One curve — cubic-bezier(.2,0,0,1).
     · Playfair Display 500 display & headings, 600 the smallest heading only.
       Inter 400 body, 500 captions, 600 overlines in caps tracked +32%.
     · Naskh is never letterspaced, italicised or faked bold. Line-height 1.9 floor.
     · Symbol floor 32px. Contrast pairs taken from Ch.03, not estimated.
   ========================================================================== */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face{font-family:Playfair;src:url(../fonts/PlayfairDisplay_400Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Playfair;src:url(../fonts/PlayfairDisplay_500Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Playfair;src:url(../fonts/PlayfairDisplay_600SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

@font-face{font-family:Inter;src:url(../fonts/Inter_400Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter_400Regular_Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter_500Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/Inter_600SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

@font-face{font-family:Naskh;src:url(../fonts/NotoNaskhArabic_400Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Naskh;src:url(../fonts/NotoNaskhArabic_600SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* The eight. Cool to warm, ink to earth. */
  --ink:#0C2230;
  --teal-dark:#2D4F56;
  --teal:#547A6E;
  --sage:#A6B7A1;
  --ivory:#F4EFE6;
  --sand:#D4C8B5;
  --terracotta:#C4936A;
  --brown:#6E4E3D;

  /* Per-scene roles, reassigned by [data-ground] on each scene. */
  --bg:var(--ivory);
  --fg:var(--ink);
  --fg-soft:rgba(12,34,48,.66);
  --hair:rgba(12,34,48,.14);
  --accent:var(--terracotta);
  --veil:.88;

  --display:Playfair,"Playfair Display",Georgia,"Times New Roman",serif;
  --text:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --arabic:Naskh,"Noto Naskh Arabic","Traditional Arabic",serif;

  /* Three durations. Nothing else. */
  --d1:200ms; --d2:400ms; --d3:700ms;
  --ease:cubic-bezier(.2,0,0,1);

  --gut:clamp(20px,4vw,64px);
  --radius:4px;
  --head-h:clamp(68px,7.4vh,96px);
  --rail-h:clamp(42px,5.4vh,64px);   /* the bottom rail of micro-labels */
}

/* ── One colour per scene ───────────────────────────────────────────────── */
[data-ground="ivory"]{--bg:var(--ivory);     --fg:var(--ink);  --fg-soft:rgba(12,34,48,.62);   --hair:rgba(12,34,48,.16);   --accent:var(--brown);      --veil:.86}
[data-ground="ink"]{  --bg:var(--ink);       --fg:var(--ivory);--fg-soft:rgba(244,239,230,.66);--hair:rgba(244,239,230,.16);--accent:var(--terracotta); --veil:.72}
[data-ground="teal"]{ --bg:var(--teal-dark); --fg:var(--ivory);--fg-soft:rgba(244,239,230,.74);--hair:rgba(244,239,230,.2); --accent:var(--sand);       --veil:.78}
[data-ground="sand"]{ --bg:var(--sand);      --fg:var(--ink);  --fg-soft:var(--ink);           --hair:rgba(12,34,48,.2);    --accent:var(--brown);      --veil:.84}
[data-ground="night"]{--bg:#070E13;          --fg:var(--ivory);--fg-soft:rgba(244,239,230,.6); --hair:rgba(244,239,230,.14);--accent:var(--terracotta); --veil:.9}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  margin:0;height:100%;
  background:var(--ink);
  color:var(--ivory);
  font:400 clamp(15px,.95vw,17px)/1.7 var(--text);
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* The document itself never scrolls. Scenes are fixed layers; only a panel
     inside a scene may scroll, and only when a short viewport forces it. */
  overflow:hidden;
  overscroll-behavior:none;
}
/* height:auto matters — every image here carries width/height attributes, and
   without it those attributes win over the aspect-ratio the layout asks for. */
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
p{margin:0 0 1.1em}
h1,h2,h3,h4{margin:0;font-weight:500}
hr{border:0;margin:0}
::selection{background:var(--terracotta);color:var(--ink)}

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--fg);
  outline-offset:3px;
  border-radius:2px;
}
/* The scene's heading is given focus on arrival so that assistive technology
   lands inside the new scene rather than back at the top of the document. It
   is not an interactive control, so it must not draw a focus ring. */
[data-focus]:focus,[data-focus]:focus-visible{outline:none}

.skip{position:fixed;top:-100px;left:16px;z-index:300;background:var(--ivory);color:var(--ink);
  padding:12px 20px;border:1px solid var(--ink);border-radius:var(--radius);transition:top var(--d1) var(--ease)}
.skip:focus{top:16px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── The world: the logo film, behind every scene ─────────────────────────
   One continuous piece of motion for the whole site. Each scene lays its own
   colour over it once, as a single flat field at --veil, so the motion still
   reads through without ever fighting the copy.                             */
.world{position:fixed;inset:0;z-index:0;background:var(--ink);overflow:hidden}
/* max-width:none matters — these are positioned and sized explicitly, and the
   reset's 100% cap would otherwise stop the opening's frame growing sideways. */
.world video,.world .world-still{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;max-width:none}
.world .world-still{opacity:0;transition:opacity var(--d3) var(--ease)}
.world.is-still video{opacity:0}
.world.is-still .world-still{opacity:1}
.world .veil{position:absolute;inset:0;background:var(--world-bg,var(--ink));opacity:var(--world-veil,.72);
  transition:background var(--d3) var(--ease),opacity var(--d3) var(--ease)}
/* A slow drift keeps the film alive behind the scenes that hold it furthest
   back, without ever becoming the thing you look at. */
.world video{transform:scale(1.06);transition:transform 1200ms var(--ease)}
/* On the opening the film is not a background — it is the artwork, held back
   by almost nothing. It is pushed off centre so the mechanism stands in the
   right of the frame and the display line has clear ivory to sit on, which is
   how the opening is art-directed.

   Sized rather than transform-scaled: giving the element the larger box lets
   the video paint into it at that size once, instead of painting at the layer
   size and then having the compositor scale the result up again.

   The box is given the film's OWN aspect ratio rather than the viewport's.
   object-fit:cover then has almost nothing to crop, so the film is painted at
   very close to 1:1 instead of being scaled up ~18% to cover a box of the
   wrong shape — which is where most of the softness was coming from. */
body[data-scene="home"] .world video{
  transform:none;
  top:0;left:0;right:auto;bottom:auto;
  width:auto;height:100%;min-width:112%;
  aspect-ratio:16/9;
  margin-left:10%;
}
@media (max-width:1000px){
  body[data-scene="home"] .world video{
    height:auto;width:100%;min-width:100%;min-height:104%;margin-left:0;margin-top:-4%;
  }
}

/* ── Header ────────────────────────────────────────────────────────────────
   The header, the drawer and the transition layer live outside the scenes, so
   the router mirrors the current scene's ground onto <body> and they take
   their colours from there. */
.head{
  position:fixed;inset:0 0 auto;z-index:70;
  display:flex;align-items:center;gap:clamp(14px,2vw,34px);
  height:var(--head-h);padding-inline:var(--gut);
  color:var(--fg);
  transition:color var(--d2) var(--ease);
  pointer-events:none;
}
.head > *{pointer-events:auto}

.brand{display:flex;align-items:center;gap:clamp(10px,1.1vw,18px);flex:0 0 auto}
.brand-word{font-family:var(--display);font-weight:500;font-size:clamp(15px,1.28vw,20px);
  letter-spacing:.34em;line-height:1;text-transform:uppercase;padding-right:.1em}
/* خيال placed from the vector master, never re-set or re-traced. Its 32px
   floor is respected: the glyph never renders below 34px wide. */
.brand-glyph{position:relative;display:block;width:clamp(34px,3vw,46px);aspect-ratio:1400/1074;flex:0 0 auto}
.brand-glyph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  transition:opacity var(--d2) var(--ease)}
/* Reversed on the dark grounds, primary on the light ones — both placed from
   the master files, so the mark always reads at full contrast. */
.brand-glyph .g-light{opacity:0}
body[data-ground="ivory"] .g-dark,body[data-ground="sand"] .g-dark{opacity:0}
body[data-ground="ivory"] .g-light,body[data-ground="sand"] .g-light{opacity:1}
.brand-tag{display:none;align-items:center;gap:14px;margin-left:6px;
  font-size:9.5px;font-weight:600;letter-spacing:.3em;line-height:1.55;text-transform:uppercase;
  color:var(--fg-soft)}
.brand-tag::before{content:"";width:clamp(18px,2vw,34px);height:1px;background:var(--hair);flex:0 0 auto}
@media (min-width:1100px){.brand-tag{display:flex}}

.nav{display:none;margin-left:auto;gap:clamp(16px,2vw,34px);align-items:center}
.nav a{position:relative;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 0;color:var(--fg-soft);transition:color var(--d1) var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;
  background:var(--accent);transition:right var(--d2) var(--ease)}
.nav a:hover{color:var(--fg)}
.nav a[aria-current]{color:var(--fg)}
.nav a[aria-current]::after,.nav a:hover::after{right:0}
.head-rule{display:none;width:1px;height:20px;background:var(--hair);margin-inline:clamp(6px,1vw,16px)}

.menu-btn{display:inline-flex;align-items:center;gap:11px;margin-left:auto;padding:10px 0;
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--fg)}
.menu-bars{display:grid;gap:5px;width:24px}
.menu-bars i{display:block;height:1px;background:currentColor;
  transition:transform var(--d2) var(--ease),opacity var(--d1) var(--ease)}
.menu-btn[aria-expanded="true"] .menu-bars i:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars i:last-child{transform:translateY(-3px) rotate(-45deg)}
.menu-btn .menu-label{display:none}
@media (min-width:520px){.menu-btn .menu-label{display:inline}}
@media (min-width:1000px){
  .nav{display:flex}
  .head-rule{display:block}
  .menu-btn{margin-left:0}
}

/* ── The menu ──────────────────────────────────────────────────────────────
   An application panel, not a second window: it drops from under the MENU
   control it belongs to, holds one side of the frame, and reaches about the
   middle of the screen. The scene keeps running around it.

   The field is Ivory at 90% over a blur of whatever is behind it, with Deep
   Ink type — so the panel reads as the same piece of paper on every ground,
   dark or light. The blur treats what is behind the panel; the panel itself
   stays a flat field with a hairline edge, no shadow. */
.drawer{
  position:fixed;z-index:60;
  top:calc(var(--head-h) - clamp(6px,1.2vh,14px));
  right:var(--gut);left:auto;bottom:auto;
  width:min(420px,calc(100vw - var(--gut) * 2));
  background:rgba(244,239,230,.9);color:var(--ink);
  -webkit-backdrop-filter:blur(22px) saturate(118%);
  backdrop-filter:blur(22px) saturate(118%);
  border:1px solid rgba(12,34,48,.16);border-radius:var(--radius);
  padding:clamp(12px,1.8vh,20px) clamp(18px,2vw,26px) clamp(14px,2vh,20px);
  display:grid;
  max-height:calc(100dvh - var(--head-h) - var(--gut));
  overflow-y:auto;overscroll-behavior:contain;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--d3) var(--ease);
}
/* Where the backdrop cannot be blurred, the field thickens instead of leaving
   the type sitting on the picture. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .drawer{background:rgba(244,239,230,.97)}
}
.drawer[hidden]{display:none}
.drawer.is-open{clip-path:inset(0)}

.drawer-nav{display:grid}
.drawer-nav a{
  display:flex;align-items:baseline;gap:clamp(12px,1.6vw,20px);
  font-family:var(--display);font-weight:500;
  font-size:clamp(21px,min(2.1vw,3vh),29px);line-height:1.16;
  letter-spacing:-.015em;color:var(--ink);
  border-bottom:1px solid rgba(12,34,48,.12);padding:clamp(7px,1.2vh,13px) 0;
  transition:color var(--d1) var(--ease),padding-left var(--d2) var(--ease);
}
.drawer-nav a:last-of-type{border-bottom:0}
.drawer-nav a:hover{color:var(--brown);padding-left:8px}
.drawer-nav a[aria-current]{color:var(--brown)}
.drawer-nav .n{font-family:var(--text);font-size:10px;font-weight:600;letter-spacing:.24em;
  color:rgba(12,34,48,.42);flex:0 0 auto}
.drawer-nav a[aria-current] .n{color:var(--brown)}

.drawer-foot{display:grid;gap:5px;
  margin-top:clamp(10px,1.6vh,18px);padding-top:clamp(11px,1.6vh,16px);
  border-top:1px solid rgba(12,34,48,.14);
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(12,34,48,.56)}
.drawer-foot a{width:max-content;transition:color var(--d1) var(--ease)}
.drawer-foot a:hover{color:var(--ink)}

/* ── Type scale ──────────────────────────────────────────────────────────── */
/* The display line is sized against the viewport's SHORT axis as well as its
   width, because a scene can never spill: it has one screen and no more. */
.display{font-family:var(--display);font-weight:500;
  font-size:clamp(38px,min(7.4vw,9.4vh),112px);line-height:1;letter-spacing:-.022em}
.h1{font-family:var(--display);font-weight:500;
  font-size:clamp(28px,min(4.4vw,6vh),64px);line-height:1.04;letter-spacing:-.018em}
.h2{font-family:var(--display);font-weight:500;font-size:clamp(22px,2.6vw,38px);line-height:1.14;letter-spacing:-.008em}
.h3{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.4vw,22px);line-height:1.25}
.display em,.h1 em,.h2 em{font-style:italic;font-weight:400}
/* The second line of a statement carries the warm accent — the one place in
   the interface where a headline changes colour. */
.display .warm,.h1 .warm,.h2 .warm{color:var(--accent);display:block}

.overline{font-family:var(--text);font-weight:600;font-size:10.5px;line-height:1.6;
  text-transform:uppercase;letter-spacing:.32em;color:var(--fg-soft);margin:0}
.overline .num{color:var(--fg);margin-right:.7em}
.caption{font-family:var(--text);font-weight:500;font-size:10.5px;line-height:1.6;
  text-transform:uppercase;letter-spacing:.22em;color:var(--fg-soft);margin:0}
.lede{font-size:clamp(15px,1.1vw,18px);line-height:1.62;color:var(--fg);max-width:33ch}
.prose{max-width:56ch}
.prose p{color:var(--fg-soft)}
.prose strong{color:var(--fg);font-weight:600}
.sep{opacity:.45;padding:0 .15em}

/* Arabic — never letterspaced, never italic, never faked bold. 1.9 floor. */
.arabic,.arabic-sm,.cap-ar{font-family:var(--arabic);font-weight:400;letter-spacing:0;font-style:normal}
.arabic,.arabic-sm{direction:rtl;text-align:left}
.arabic{font-size:clamp(20px,2vw,30px);line-height:1.9;color:var(--fg);opacity:.82;margin:0}
.arabic-sm{font-size:15px;line-height:1.9;color:var(--fg-soft);margin:0}

/* The stacked micro-label — IDEAS / PEOPLE / PLACES / POSSIBILITIES. */
.stack{display:grid;gap:.34em;font-size:9.5px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--fg-soft);padding-left:14px;border-left:1px solid var(--hair)}

/* The teal rule — 11 × 0.9 proportion. One per scene. */
.rule{width:56px;height:5px;background:var(--teal)}
.hairline{width:clamp(30px,4vw,60px);height:1px;background:var(--hair)}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--text);font-weight:500;font-size:13px;letter-spacing:.02em;line-height:1;
  padding:15px 24px;border-radius:var(--radius);border:1px solid transparent;
  transition:background var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.btn .arr{transition:transform var(--d1) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-solid{background:var(--fg);color:var(--bg)}
.btn-solid:hover{background:rgba(0,0,0,0);color:var(--fg);border-color:var(--fg)}
.btn-line{border-color:var(--hair);color:var(--fg)}
.btn-line:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.btn-warm{background:var(--terracotta);color:var(--ink);border-color:var(--terracotta)}
.btn-warm:hover{background:rgba(0,0,0,0);color:var(--terracotta)}

/* The quiet in-scene link — a tracked label over a hairline. */
.lnk{display:inline-flex;align-items:center;gap:.9em;padding-bottom:6px;
  font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg);border-bottom:1px solid var(--hair);
  transition:border-color var(--d1) var(--ease),gap var(--d1) var(--ease)}
.lnk:hover{border-color:var(--fg);gap:1.3em}

/* The circular control — the site's one piece of round geometry in the UI. */
.disc{display:grid;place-items:center;flex:0 0 auto;
  width:clamp(44px,4.4vw,60px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--hair);color:var(--fg);
  transition:border-color var(--d1) var(--ease),background var(--d2) var(--ease),
             color var(--d2) var(--ease),transform var(--d2) var(--ease)}
.disc:hover{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.disc:disabled{opacity:.3;pointer-events:none}
.disc svg{width:38%;height:38%;fill:currentColor}
.disc-lg{width:clamp(64px,7vw,92px)}

/* ══════════════════════════════════════════════════════════════════════════
   SCENES
   Each is a fixed layer the size of the viewport. Only one is present at a
   time; the router mounts the next and animates the pair.
   ══════════════════════════════════════════════════════════════════════════ */
#main{position:fixed;inset:0;z-index:10}

.scene{
  position:absolute;inset:0;
  display:grid;grid-template-rows:minmax(0,1fr) auto;
  color:var(--fg);
  overflow:hidden;
  will-change:transform,opacity,clip-path;
}
.scene[hidden]{display:none}
.scene-art{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.scene-art > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transition:transform 1400ms var(--ease),opacity var(--d3) var(--ease)}
.scene.is-on .scene-art > img{transform:scale(1)}
/* Photographic grading, not interface: a scrim over a full-bleed film frame
   so the copy has something to sit on. The interface itself stays flat. */
.scene-art::after{content:"";position:absolute;inset:0;background:var(--grade,none)}
/* The header is one fixed element shared by every scene, so each scene's body
   simply keeps its height clear. */
.scene-body{position:relative;z-index:1;min-height:0;padding:var(--head-h) var(--gut) 0;display:grid}
.scene-rail{position:relative;z-index:1;min-height:var(--rail-h);padding:0 var(--gut) max(10px,env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-soft)}
.scene-rail .r-mid{display:none}
/* The scene's own number and name, top left — the same marker on every inner
   scene, so you always know which one you are standing in. */
.scene-mark{position:absolute;z-index:2;left:var(--gut);top:calc(var(--head-h) + clamp(4px,1.6vh,22px));
  margin:0;font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-soft)}
.scene-mark .num{color:var(--fg)}
.scene-mark .num::after{content:" /";opacity:.4;padding-left:.3em}
@media (max-width:760px),(max-height:620px){.scene-mark{display:none}}
.scene-rail em{font-style:normal;display:block}
.scene-rail .r-line{display:inline-flex;align-items:center;gap:14px}
.scene-rail .r-line::after{content:"";width:clamp(24px,4vw,70px);height:1px;background:var(--hair)}
.scene-rail .r-line.rev::after{display:none}
.scene-rail .r-line.rev::before{content:"";width:clamp(24px,4vw,70px);height:1px;background:var(--hair)}
@media (min-width:860px){.scene-rail .r-mid{display:block}}

/* Copy lights itself the moment a scene arrives — never drawn on, lit. */
.lift{opacity:0;transform:translateY(16px)}
.scene.is-on .lift{opacity:1;transform:none;
  transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease);
  transition-delay:var(--step,0ms)}
/* A headline moves as a block of lines out from behind a mask. */
/* The clip box is a touch taller than the line box, so a mask never cuts an
   ascender or a descender off a display line set at line-height 1. */
.mask-line{display:block;overflow:hidden;padding-block:.09em;margin-block:-.09em}
.mask-line > span{display:block;transform:translateY(105%);
  transition:transform var(--d3) var(--ease);transition-delay:var(--step,0ms)}
.scene.is-on .mask-line > span{transform:none}

/* Copy that is replaced WITHIN a scene — the next project, the next chapter —
   is re-lit rather than simply swapped, so it arrives the same way. */
@keyframes lit{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.is-lit > .lift,.is-lit > * > .lift{animation:lit var(--d3) var(--ease) both;animation-delay:var(--step,0ms)}
.is-lit .mask-line > span{animation:rise var(--d3) var(--ease) both;animation-delay:var(--step,0ms)}
.work-copy[hidden],.studio-chapter[hidden],.svc-panel[hidden]{display:none}

/* ── SCENE: HOME ───────────────────────────────────────────────────────────
   The opening has its own film here — the identity's ring geometry and the
   glass mark rendered together, one continuous shot — rather than borrowing
   the world's film, so the world is switched off underneath it entirely. It
   runs the way the old film did: scrubbed by the wheel, never tied to a
   scroll, with a mouse parallax added because this set has real depth to
   answer to. */
body[data-scene="home"] .world{display:none}

#scene-home .scene-art{background:var(--ivory)}
/* Two fields, not one: a thin band across the top so the navigation always has
   something to sit on, and the long field down the left for the display line. */
/* Same story as the mobile set below: tuned for the old dark cinematic film,
   left untouched through the redesign, and too heavy for a mark that is
   light on its own — cut down on 2026-09-23 once the mobile fix was asked
   for on desktop too. */
#scene-home{--grade:
  linear-gradient(to bottom,rgba(244,239,230,.5) 0,rgba(244,239,230,.15) 110px,rgba(244,239,230,0) 200px),
  linear-gradient(96deg,rgba(244,239,230,.78) 0%,rgba(244,239,230,.62) 24%,rgba(244,239,230,.2) 46%,rgba(244,239,230,.01) 66%,rgba(244,239,230,0) 100%)}
@media (max-width:1000px){
  /* The old wash covered the bottom ~70% of the screen (up to .95 opaque) —
     tuned for the dark cinematic film, which needed real help under the
     copy. This set is light on its own; the sphere/mark need to stay
     visible, not be buried under ivory for most of the viewport. Two short
     bands instead, one at the very top (nav/headline) and one at the very
     bottom (the caption/rail), leaving the mark itself uncovered. */
  #scene-home{--grade:
    linear-gradient(to bottom,rgba(244,239,230,.6) 0,rgba(244,239,230,.2) 90px,rgba(244,239,230,0) 170px),
    linear-gradient(to top,rgba(244,239,230,.42) 0,rgba(244,239,230,.1) 110px,rgba(244,239,230,0) 200px)}
}
#scene-home .scene-body{align-content:center;grid-template-columns:minmax(0,1fr)}

/* The set: one full-bleed render, ring plate and glass mark together — the
   same treatment the world film gets elsewhere, sized to its own aspect
   ratio rather than cropped hard by the viewport's. A very small mouse
   parallax answers the depth in the render itself; kept subtle because this
   is the backdrop now, not a floating object. */
.hero-stage video,.hero-stage .hero-still{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;max-width:none;
  transform:scale(1.04) translate(var(--px,0),var(--py,0));
  transition:transform 900ms var(--ease);will-change:transform}
.scene.is-on .hero-stage video,.scene.is-on .hero-stage .hero-still{transform:scale(1) translate(var(--px,0),var(--py,0))}
.hero-stage .hero-still{opacity:0;transition:opacity var(--d3) var(--ease),transform 900ms var(--ease)}
.hero-stage.is-still video{opacity:0}
.hero-stage.is-still .hero-still{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-stage video,.hero-stage .hero-still{transform:none!important}}

/* The opening's copy holds the left of the frame and leaves the set the rest,
   so the display line sits on one line rather than breaking in three. */
.home-inner{display:grid;gap:clamp(12px,1.8vh,22px);max-width:min(780px,54vw);align-content:center}
@media (max-width:1000px){.home-inner{max-width:none}}
.home-lede{max-width:34ch;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-soft)}
.home-reel{display:inline-flex;align-items:center;gap:clamp(14px,1.6vw,24px);margin-top:clamp(4px,1.4vh,18px)}
.home-reel .disc{border-color:var(--fg)}
.home-reel .lbl{font-size:11.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  display:flex;align-items:center;gap:1.1em;color:var(--fg)}
.home-reel .lbl::after{content:"";width:22px;height:1px;background:var(--hair)}
.home-reel .dur{font-variant-numeric:tabular-nums;color:var(--fg-soft)}
.home-play{margin-top:clamp(2px,.6vh,8px)}
.home-play .lnk{font-size:9.5px}

/* The right-hand line — the identity's own claim, set quietly beside the
   mark rather than over it. */
.home-side{position:absolute;right:var(--gut);top:calc(var(--head-h) + clamp(18px,5vh,64px));z-index:2;
  max-width:19ch;margin:0;
  font-size:10px;font-weight:600;line-height:1.7;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg-soft)}

/* Bottom left — the closing line of the opening's own small print. */
.home-caption{position:absolute;left:var(--gut);bottom:calc(var(--rail-h) + 4px);z-index:2;
  display:flex;align-items:center;gap:16px;margin:0;
  font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--fg-soft)}
.home-caption span:not(.hairline){text-transform:lowercase;letter-spacing:0}

/* Bottom right — a dot, a line, the word. The one graphic cue for the wheel. */
.home-scroll{position:absolute;right:var(--gut);bottom:calc(var(--rail-h) + 4px);z-index:2;
  display:grid;justify-items:center;gap:8px}
.home-scroll .dot{width:4px;height:4px;border-radius:50%;background:var(--fg)}
.home-scroll .ln{width:1px;height:30px;background:var(--hair)}
.home-scroll .lbl{font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--fg-soft)}
@media (max-height:700px),(max-width:700px){.home-side,.home-caption,.home-scroll{display:none}}

/* The film's own controls. Sound starts muted, always, and the whole group
   sits in the rail so it never lands on the copy. */
.film-controls{display:flex;align-items:center;gap:8px}
.film-controls button{display:inline-flex;align-items:center;gap:8px;
  font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg-soft);padding:7px 0;transition:color var(--d1) var(--ease)}
.film-controls button:hover{color:var(--fg)}
.film-controls button + button{padding-left:14px;border-left:1px solid var(--hair)}
.film-controls .wave{display:inline-grid;place-items:center;width:20px;height:20px;
  border:1px solid var(--hair);border-radius:50%;flex:0 0 auto}
.film-controls .wave svg{width:9px;height:9px;stroke:currentColor;stroke-width:1.2;fill:none}
@media (max-width:620px){.film-controls button:first-child span:last-child{display:none}}

/* ── SCENE: WORK ─────────────────────────────────────────────────────────── */
#scene-work{--grade:linear-gradient(100deg,rgba(7,14,19,.9) 0%,rgba(7,14,19,.72) 34%,rgba(7,14,19,.26) 62%,rgba(7,14,19,.5) 100%)}
#scene-work .scene-body{align-content:center;padding-bottom:clamp(8px,1.6vh,20px)}
.work-frame{position:absolute;inset:0;z-index:0}
.work-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);
  transition:opacity var(--d3) var(--ease),transform 1600ms var(--ease)}
.work-frame img.is-on{opacity:1;transform:scale(1)}
.work-stack{display:grid;align-content:center;min-height:0}
.work-copy{display:grid;gap:clamp(10px,1.8vh,22px);max-width:min(52ch,44vw);align-content:center}
.work-copy p{margin:0}
@media (max-width:900px){.work-copy{max-width:none}}
.work-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.9em;font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fg-soft)}
.work-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--accent)}
.work-count{display:flex;align-items:baseline;gap:.7em;font-family:var(--text);font-size:11px;
  font-weight:600;letter-spacing:.24em;color:var(--fg-soft)}
.work-count b{color:var(--fg);font-weight:600}
/* The switch: arrows, and a rail that fills as you move through the set. */
.work-switch{position:absolute;right:var(--gut);top:50%;transform:translateY(-50%);z-index:2;
  display:grid;gap:14px;justify-items:center}
.work-switch .pair{display:flex;gap:12px}
.work-rail{display:flex;align-items:center;gap:10px;font-size:10.5px;font-weight:600;
  letter-spacing:.2em;color:var(--fg-soft);font-variant-numeric:tabular-nums}
.work-rail .track{width:clamp(40px,5vw,74px);height:1px;background:var(--hair);position:relative}
.work-rail .track i{position:absolute;inset:0 auto 0 0;background:var(--accent);
  width:var(--p,33%);transition:width var(--d3) var(--ease)}
@media (max-width:900px){
  .work-switch{top:auto;bottom:calc(var(--rail-h) + clamp(96px,16vh,150px));transform:none;
    left:var(--gut);right:var(--gut);grid-auto-flow:column;justify-content:space-between;align-items:center}
  .work-switch .pair{order:2}
}

/* The filmstrip — horizontal, the only horizontal move on the site. */
.strip{position:relative;z-index:2;display:flex;gap:10px;padding:0 var(--gut) clamp(6px,1.2vh,14px);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.strip::-webkit-scrollbar{display:none}
.strip-card{position:relative;flex:0 0 auto;width:clamp(156px,17vw,254px);scroll-snap-align:start;
  border:1px solid rgba(244,239,230,.14);overflow:hidden;background:#070E13;
  transition:border-color var(--d2) var(--ease)}
.strip-card img{width:100%;aspect-ratio:16/9;object-fit:cover;opacity:.52;
  transition:opacity var(--d2) var(--ease),transform 900ms var(--ease)}
.strip-card .meta{position:absolute;inset:auto 0 0;padding:10px 12px 11px;
  background:linear-gradient(to top,rgba(7,14,19,.92),rgba(7,14,19,0))}
.strip-card .t{font-family:var(--display);font-weight:500;font-size:clamp(13px,1.05vw,17px);
  line-height:1.2;color:var(--ivory);display:block}
.strip-card .n{position:absolute;top:9px;left:12px;font-family:var(--display);font-size:13px;
  color:rgba(244,239,230,.8)}
.strip-card:hover img,.strip-card[aria-current] img{opacity:.92}
.strip-card:hover{border-color:rgba(244,239,230,.4)}
.strip-card[aria-current]{border-color:var(--terracotta)}
.strip-card.is-next{display:grid;place-items:center;text-align:center;padding:0}
.strip-card.is-next img{opacity:.24}
.strip-card.is-next .meta{position:absolute;inset:0;display:grid;place-content:center;gap:8px;
  background:rgba(7,14,19,.6)}

/* ── SCENE: a case study ─────────────────────────────────────────────────── */
.case{--grade:linear-gradient(94deg,rgba(7,14,19,.94) 0%,rgba(7,14,19,.84) 40%,rgba(7,14,19,.5) 100%)}
.case .scene-body{grid-template-columns:minmax(0,1fr);align-content:center;min-height:0}
.case-wrap{display:grid;gap:clamp(16px,2.6vh,34px);grid-template-columns:minmax(0,1fr);
  min-height:0;align-content:center}
@media (min-width:960px){
  /* Both columns are bounded by the row, and the notes take the overflow — so
     a long study can never push the title off the top of the screen. */
  .case-wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(34px,4vw,80px);
    align-items:center;grid-template-rows:minmax(0,1fr)}
}
.case-head{display:grid;gap:clamp(10px,1.6vh,20px);align-content:center;min-height:0}
.case-cols{display:grid;gap:clamp(14px,2vh,26px);min-height:0;align-content:center;
  overflow:auto;padding-right:6px;scrollbar-width:thin;scrollbar-color:var(--hair) transparent}
.case-cols::-webkit-scrollbar{width:3px}
.case-cols::-webkit-scrollbar-thumb{background:var(--hair)}
.case-cols h3{margin-bottom:.5em}
.case-cols p{color:var(--fg-soft);margin:0;font-size:clamp(14px,.95vw,15.5px)}
.case-notes{display:grid;gap:11px;border-top:1px solid var(--hair);padding-top:16px}
.case-notes li{display:grid;grid-template-columns:auto 1fr;gap:14px;color:var(--fg-soft);
  font-size:clamp(13.5px,.9vw,15px)}
.case-notes li::before{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%;margin-top:.62em}
/* The plates are held to a share of the viewport's height, not the column's
   width — a scene has one screen and the copy has first claim on it. */
.case-plates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.case-plates img{width:100%;height:clamp(104px,17vh,196px);object-fit:cover;
  border:1px solid var(--hair)}
.case-back{display:inline-flex;align-items:center;gap:.9em;font-size:10.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--fg-soft);transition:color var(--d1) var(--ease)}
.case-back:hover{color:var(--fg)}
.case-back .arr{transition:transform var(--d1) var(--ease)}
.case-back:hover .arr{transform:translateX(-3px)}

/* ── SCENE: SERVICES ────────────────────────────────────────────────────── */
#scene-services .scene-body{align-content:center}
.svc-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,3vh,40px);align-content:center;min-height:0}
@media (min-width:1000px){
  .svc-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,5vw,96px);align-items:center}
}
/* The central visual IS the background of the scene: selecting a service
   transforms it. No cards anywhere. */
.svc-visual{position:absolute;inset:0;z-index:0}
/* The visual arrives as a circle opening at the centre of the frame — the same
   circular geometry as the mark, used as the aperture the work is seen
   through. The copy columns stay clear of it on both sides. */
.svc-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.07);
  transition:opacity var(--d3) var(--ease),transform 1800ms var(--ease),clip-path var(--d3) var(--ease);
  clip-path:circle(0% at 47% 52%)}
.svc-visual img.is-on{opacity:1;transform:scale(1);clip-path:circle(46% at 47% 52%)}
@media (max-width:999px){
  .svc-visual img{clip-path:circle(0% at 50% 34%)}
  .svc-visual img.is-on{clip-path:circle(62% at 50% 34%)}
}
/* The ivory field opens a window in the middle of the frame for the visual and
   closes again over both columns of copy, so the type never has to fight the
   picture it is describing. */
#scene-services{--grade:linear-gradient(90deg,rgba(244,239,230,.97) 0%,rgba(244,239,230,.93) 21%,rgba(244,239,230,.4) 41%,rgba(244,239,230,.74) 55%,rgba(244,239,230,.94) 70%,rgba(244,239,230,.97) 100%)}
@media (max-width:999px){
  #scene-services{--grade:linear-gradient(to top,rgba(244,239,230,.97) 0%,rgba(244,239,230,.93) 46%,rgba(244,239,230,.5) 74%,rgba(244,239,230,.25) 100%)}
}

.svc-list{display:grid;gap:0;border-top:1px solid var(--hair)}
.svc-item{border-bottom:1px solid var(--hair)}
.svc-btn{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;
  gap:clamp(14px,2vw,30px);width:100%;text-align:left;
  padding:clamp(9px,1.5vh,17px) 0;color:var(--fg-soft);
  transition:color var(--d1) var(--ease),padding-left var(--d2) var(--ease)}
.svc-btn .n{font-family:var(--text);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  color:var(--fg-soft);transition:color var(--d1) var(--ease)}
.svc-btn .t{font-family:var(--display);font-weight:500;letter-spacing:-.01em;
  font-size:clamp(19px,min(2.1vw,3vh),32px);line-height:1.16;color:var(--fg-soft);
  transition:color var(--d1) var(--ease)}
.svc-btn .go{font-size:15px;opacity:0;transform:translateX(-6px);
  transition:opacity var(--d1) var(--ease),transform var(--d2) var(--ease);color:var(--accent)}
.svc-btn:hover{padding-left:10px}
.svc-btn:hover .t,.svc-btn:hover .n{color:var(--fg)}
.svc-item[aria-current] .svc-btn .t{color:var(--fg)}
.svc-item[aria-current] .svc-btn .n{color:var(--accent)}
.svc-item[aria-current] .svc-btn .go{opacity:1;transform:none}
/* The selected service is the one that grows. */
.svc-item[aria-current] .svc-btn .t{font-size:clamp(23px,min(2.8vw,3.9vh),42px)}
.svc-item[aria-current]{border-left:1px solid var(--accent);padding-left:clamp(12px,1.4vw,20px)}

.svc-panel{display:grid;gap:clamp(12px,2vh,22px);align-content:center;min-height:0}
.svc-panel .h1{max-width:18ch}
.svc-panel .body{color:var(--fg);max-width:40ch;font-size:clamp(14.5px,1vw,16.5px)}
.svc-panel .detail{color:var(--fg);opacity:.78;max-width:44ch;font-size:clamp(13.5px,.92vw,15px);margin:0}
.svc-swap{opacity:1;transition:opacity var(--d1) var(--ease),transform var(--d2) var(--ease)}
.svc-swap.is-out{opacity:0;transform:translateY(-8px)}

/* ── SCENE: STUDIO ──────────────────────────────────────────────────────── */
#scene-studio{--grade:linear-gradient(88deg,rgba(7,14,19,.94) 0%,rgba(7,14,19,.74) 30%,rgba(7,14,19,.36) 52%,rgba(7,14,19,.72) 70%,rgba(7,14,19,.91) 100%)}
#scene-studio .scene-body{align-content:center}
/* The identity's line geometry, at architectural scale — concentric rings, a
   hairline axis, the dots. Drawn rather than lit, so it reads as structure
   standing in the room instead of a graphic laid over it. */
.studio-geo{position:absolute;z-index:0;right:-8vw;top:50%;width:min(74vw,124vh);
  aspect-ratio:1;transform:translateY(-50%) scale(1.06) rotate(-6deg);
  color:var(--sage);opacity:0;pointer-events:none;
  transition:transform 1800ms var(--ease),opacity var(--d3) var(--ease)}
.studio-geo svg{width:100%;height:100%;overflow:visible}
.studio-geo .geo-dot{fill:var(--terracotta);opacity:.9}
.scene.is-on .studio-geo{opacity:.5;transform:translateY(-50%) scale(1) rotate(0deg)}
.studio-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,3vh,34px);align-content:center}
@media (min-width:1080px){
  .studio-wrap{grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(40px,6vw,120px);align-items:center}
}
.studio-copy{display:grid;gap:clamp(12px,2vh,24px);max-width:44ch}
.studio-chapter{display:grid;gap:clamp(10px,1.8vh,22px)}
.studio-chapter .prose p{margin:0 0 .7em}
.studio-chapter .prose p:last-child{margin:0}
.studio-stages{display:grid;gap:clamp(6px,1.1vh,12px);border-top:1px solid var(--hair);padding-top:clamp(10px,1.6vh,18px)}
.studio-stages li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(12px,1.6vw,22px);
  align-items:baseline;font-size:clamp(13.5px,.92vw,15px);color:var(--fg-soft)}
.studio-stages .n{font-family:var(--display);font-size:clamp(15px,1.3vw,20px);color:var(--accent);
  line-height:1.2;min-width:2.2em}
.studio-stages b{color:var(--fg);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;display:block;margin-bottom:.15em}
.studio-aside{display:grid;gap:clamp(12px,2vh,22px);max-width:36ch;justify-self:end}
@media (max-width:1079px){.studio-aside{display:none}}
.studio-aside .t{font-size:11px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg);line-height:1.8;margin:0}
.studio-aside .detail{font-size:clamp(13.5px,.92vw,15px);line-height:1.62;color:var(--fg-soft);margin:0}
.studio-aside .caption{line-height:1.9}
/* Chapters — the scene changes without the visitor leaving it. */
.chapters{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  font-size:10.5px;font-weight:600;letter-spacing:.2em;color:var(--fg-soft)}
.chapters button{display:inline-flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  color:var(--fg-soft);transition:color var(--d1) var(--ease)}
.chapters button::after{content:"";width:clamp(18px,2.6vw,44px);height:1px;background:var(--hair);
  transition:background var(--d2) var(--ease)}
.chapters button:last-child::after{display:none}
.chapters button:hover{color:var(--fg)}
.chapters button[aria-current]{color:var(--fg)}
.chapters button[aria-current]::after{background:var(--accent)}
@media (max-width:620px){.chapters button::after{width:14px}}

/* ── SCENE: CONTACT ─────────────────────────────────────────────────────── */
#scene-contact{--grade:linear-gradient(92deg,rgba(7,14,19,.5) 0%,rgba(7,14,19,.4) 30%,rgba(7,14,19,.78) 56%,rgba(7,14,19,.95) 100%)}
#scene-contact .scene-body{align-content:center;min-height:0}
.contact-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,3vh,40px);
  align-content:center;min-height:0}
@media (min-width:1000px){
  .contact-wrap{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    gap:clamp(36px,5vw,110px);align-items:center}
}
.contact-copy{display:grid;gap:clamp(12px,2vh,24px);align-content:center}
.contact-copy .mail{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--fg);border-bottom:1px solid var(--hair);padding-bottom:6px;width:max-content;
  transition:border-color var(--d1) var(--ease)}
.contact-copy .mail:hover{border-color:var(--fg)}
@media (max-width:999px){.contact-copy .lede,.contact-copy .stack{display:none}}

/* The form — flat fields, hairline edges, one warm action. */
.form{display:grid;gap:clamp(9px,1.5vh,16px);min-height:0;overflow:auto;
  padding-right:2px;scrollbar-width:thin}
.form-lab{font-size:9.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--fg-soft);margin:0 0 -2px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:block;padding:8px 15px;border:1px solid var(--hair);border-radius:100px;
  font-size:12px;color:var(--fg-soft);
  transition:border-color var(--d1) var(--ease),color var(--d1) var(--ease),background var(--d1) var(--ease)}
.chip input:hover + span{border-color:var(--fg);color:var(--fg)}
.chip input:checked + span{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.chip input:focus-visible + span{outline:2px solid var(--fg);outline-offset:3px}
.f-row{display:grid;gap:clamp(8px,1.4vw,14px);grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){
  .f-row.two{grid-template-columns:1fr 1fr}
  .f-row.three{grid-template-columns:1fr 1fr 1fr}
}
.field{display:grid;gap:5px}
.field > span{font-size:11px;color:var(--fg-soft)}
.field input,.field select,.field textarea{
  width:100%;padding:11px 13px;background:rgba(244,239,230,.04);
  border:1px solid var(--hair);border-radius:var(--radius);color:var(--fg);font-size:13.5px;
  transition:border-color var(--d1) var(--ease),background var(--d1) var(--ease)}
.field textarea{resize:vertical;min-height:clamp(58px,9vh,96px);line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-soft);opacity:.8}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(244,239,230,.34)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--fg);outline:0;background:rgba(244,239,230,.07)}
.field select{appearance:none;background-image:none;cursor:pointer}
.field select option{background:var(--ink);color:var(--ivory)}
.sel{position:relative}
.sel::after{content:"";position:absolute;right:14px;top:calc(50% + 4px);width:7px;height:7px;
  border-right:1px solid var(--fg-soft);border-bottom:1px solid var(--fg-soft);
  transform:translateY(-50%) rotate(45deg);pointer-events:none}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:2px}
.form-foot .btn-warm{flex:1 1 220px;justify-content:center}
.form-note{font-size:11px;color:var(--fg-soft);margin:0;flex:1 1 200px;line-height:1.5}
.form-said{font-size:12px;color:var(--accent);margin:0}

/* ══════════════════════════════════════════════════════════════════════════
   THE TRANSITION LAYER
   Dot movement, line extension, masking, mechanical reconfiguration. One
   visual language, used to change the scene — and never longer than 700ms.
   ══════════════════════════════════════════════════════════════════════════ */
.shift{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0}
.shift.is-live{opacity:1}
/* The dot — the mark's own dot, travelling. */
.shift-dot{position:absolute;left:var(--ox,50%);top:var(--oy,50%);width:10px;height:10px;
  margin:-5px 0 0 -5px;border-radius:50%;background:var(--teal);opacity:0}
/* The gate — concentric arcs and dots, reconfiguring. Logo geometry. */
.shift-gate{position:absolute;left:50%;top:50%;width:min(62vmin,540px);aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.8) rotate(-24deg);opacity:0}
.shift-gate svg{width:100%;height:100%;overflow:visible}
.shift-gate circle,.shift-gate path,.shift-gate line{vector-effect:non-scaling-stroke}
/* The line that extends, then becomes the edge the scene opens from. */
.shift-line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--sage);
  transform:scaleX(0);transform-origin:var(--lo,50%) 50%;opacity:0}

@keyframes dot-fly{0%{opacity:0;transform:scale(.4)}
                  22%{opacity:1;transform:scale(1)}
                  62%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1)}
                 100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(26)}}
@keyframes gate-turn{0%{opacity:0;transform:translate(-50%,-50%) scale(.78) rotate(-24deg)}
                    30%{opacity:.85}
                    70%{opacity:.5}
                   100%{opacity:0;transform:translate(-50%,-50%) scale(1.16) rotate(26deg)}}
@keyframes line-out{0%{opacity:0;transform:scaleX(0)}
                   24%{opacity:1}
                   70%{opacity:1;transform:scaleX(1)}
                  100%{opacity:0;transform:scaleX(1)}}

/* Scene entrances and exits. Three of the five open the new scene OVER the
   old one through a mask — a circle from the thing you clicked, or a hairline
   extending into a plane. The other two are camera moves: the scene you are
   leaving travels, and the new one is already behind it.                     */
@keyframes s-iris-in{from{clip-path:circle(0% at var(--ox) var(--oy))}to{clip-path:circle(150% at var(--ox) var(--oy))}}
@keyframes s-line-in{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0)}}
@keyframes s-vline-in{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0)}}
@keyframes s-push-in{from{opacity:.4;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes s-push-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(1.12)}}
@keyframes s-pull-in{from{opacity:.4;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes s-pull-out{from{opacity:1;transform:none}to{opacity:0;transform:scale(.92)}}

.scene.go-iris-in{animation:s-iris-in 620ms var(--ease) both}
.scene.go-line-in{animation:s-line-in 620ms var(--ease) both}
.scene.go-vline-in{animation:s-vline-in 620ms var(--ease) both}
.scene.go-push-in{animation:s-push-in 620ms var(--ease) both}
.scene.go-pull-in{animation:s-pull-in 620ms var(--ease) both}
.scene.go-push-out{animation:s-push-out 460ms var(--ease) both}
.scene.go-pull-out{animation:s-pull-out 460ms var(--ease) both}

.shift.is-live .shift-dot{animation:dot-fly 640ms var(--ease) both}
.shift.is-live .shift-gate{animation:gate-turn 660ms var(--ease) both}
.shift.is-live .shift-line{animation:line-out 560ms var(--ease) both}
.shift[data-kind="line"] .shift-dot,.shift[data-kind="vline"] .shift-dot{animation:none;opacity:0}
.shift[data-kind="iris"] .shift-line,.shift[data-kind="push"] .shift-line,
.shift[data-kind="pull"] .shift-line{animation:none;opacity:0}

/* ══════════════════════════════════════════════════════════════════════════
   THE REEL — a full-screen player laid over the scene, never a page of its own.
   Closing it returns the visitor to the exact scene state they left.
   ══════════════════════════════════════════════════════════════════════════ */
.reel{position:fixed;inset:0;z-index:200;background:#05090C;color:var(--ivory);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  clip-path:circle(0% at var(--rx,50%) var(--ry,50%));
  transition:clip-path var(--d3) var(--ease)}
.reel[hidden]{display:none}
.reel.is-open{clip-path:circle(150% at var(--rx,50%) var(--ry,50%))}
.reel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(16px,2.4vh,26px) var(--gut);position:relative;z-index:3}
.reel-title{display:flex;align-items:center;gap:16px;font-size:10.5px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(244,239,230,.7)}
.reel-title .rule{width:26px;height:1px;background:var(--terracotta)}
.reel-close{display:inline-flex;align-items:center;gap:12px;font-size:10.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:rgba(244,239,230,.76);
  transition:color var(--d1) var(--ease)}
.reel-close:hover{color:var(--ivory)}
.reel-close svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.4;fill:none}

.reel-stage{position:relative;min-height:0;margin-inline:var(--gut);overflow:hidden;background:#05090C}
.reel-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#05090C}
.reel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity var(--d3) var(--ease)}
.reel.is-playing .reel-poster{opacity:0}
.reel-centre{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;
  text-align:center;transition:opacity var(--d2) var(--ease)}
.reel.is-playing .reel-centre{opacity:0;pointer-events:none}
.reel-centre .disc{border-color:rgba(244,239,230,.7);color:var(--ivory)}
.reel-centre .disc:hover{background:var(--ivory);color:var(--ink)}
.reel-centre .lbl{font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  display:flex;align-items:center;gap:1.2em;color:rgba(244,239,230,.9)}
.reel-centre .lbl .em{width:22px;height:1px;background:rgba(244,239,230,.5)}
.reel-centre .sub{font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(244,239,230,.5)}
/* The keys are offered once, as the reel starts, and then get out of the way. */
.reel-hint{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:9.5px;
  font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:rgba(244,239,230,.62);
  opacity:0}
.reel.is-playing .reel-hint{animation:hint 3800ms var(--ease) both}
@keyframes hint{0%{opacity:0}10%{opacity:1}68%{opacity:1}100%{opacity:0}}

.reel-bar{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  padding:clamp(12px,2vh,22px) var(--gut) max(clamp(12px,2vh,22px),env(safe-area-inset-bottom,0px));
  position:relative;z-index:3}
.reel-bar button{display:grid;place-items:center;width:34px;height:34px;color:rgba(244,239,230,.8);
  transition:color var(--d1) var(--ease)}
.reel-bar button:hover{color:var(--ivory)}
.reel-bar svg{width:15px;height:15px;fill:currentColor}
.reel-time{font-size:11px;letter-spacing:.14em;color:rgba(244,239,230,.62);
  font-variant-numeric:tabular-nums;flex:0 0 auto}
.reel-scrub{flex:1 1 auto;position:relative;height:22px;display:grid;align-items:center;cursor:pointer}
.reel-scrub .track{height:1px;background:rgba(244,239,230,.22);position:relative}
.reel-scrub .fill{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--terracotta)}
.reel-scrub .knob{position:absolute;top:50%;left:var(--p,0%);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--ivory);transform:scale(.8);
  transition:transform var(--d1) var(--ease)}
.reel-scrub:hover .knob{transform:scale(1.15)}
.reel-scrub input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
@media (max-width:600px){.reel-stage{margin-inline:0}}

/* ══════════════════════════════════════════════════════════════════════════
   Short viewports and phones. A scene never spills — but a panel inside one
   may scroll rather than clip the copy. The visitor stays in control.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1000px){
  .scene-body{padding-inline:var(--gut)}
  .scene.is-on .studio-geo{right:-28vw;width:min(124vw,86vh);opacity:.3}
}
@media (max-width:760px){
  :root{--gut:20px}
  .scene-rail{font-size:9px;letter-spacing:.2em}
  .scene-rail .r-line::after,.scene-rail .r-line.rev::before{width:18px}
  .work-copy,.case-head{max-width:none}
  .case-plates{display:none}
  .svc-item[aria-current] .svc-btn .t{font-size:clamp(21px,6.4vw,30px)}
}
/* A short screen: the body of the scene becomes the scrolling part, never
   the document, so the header, the rail and the film all stay where they are. */
@media (max-height:620px),(max-width:600px){
  /* The header's height still has to be kept clear — this padding replaces the
     shorthand above, so it must restate it. */
  .scene-body{overflow-y:auto;overscroll-behavior:contain;
    padding-block:calc(var(--head-h) + clamp(4px,1.4vh,16px)) clamp(10px,2vh,20px)}
  .scene-body::-webkit-scrollbar{width:0}
  /* Centring a block that is taller than its row pushes it out of both ends at
     once, which is what makes columns run into each other. On a small screen
     everything starts at the top and the body takes the scroll instead. */
  #scene-home .scene-body,#scene-work .scene-body,#scene-services .scene-body,
  #scene-studio .scene-body,#scene-contact .scene-body,.case .scene-body{align-content:start}
  .home-inner,.svc-wrap,.contact-wrap,.studio-wrap,.case-wrap,.work-stack,
  .svc-panel,.case-head,.case-cols,.contact-copy,.studio-copy{align-content:start}
  .case-cols,.form{overflow:visible}
}
@media (max-height:560px) and (min-width:760px){
  .display{font-size:clamp(30px,5.4vh,52px)}
  .home-caption,.home-scroll{display:none}
}

/* ── Reduced motion: the same architecture, held still ───────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;
    transition-duration:1ms!important;transition-delay:0ms!important}
  .world video{display:none}
  .world .world-still{opacity:1}
  .lift{opacity:1;transform:none}
  .mask-line > span{transform:none}
  .shift{display:none}
  .scene-art > img,.work-frame img,.svc-visual img{transform:none}
  .svc-visual img.is-on{clip-path:none}
  .scene.is-on .studio-geo{transform:translateY(-50%)}
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print{
  body{overflow:visible;background:#fff;color:#0C2230}
  .world,.shift,.reel,.drawer,.head{display:none!important}
  #main{position:static}
  .scene{position:static;display:block;page-break-after:always}
  .scene[hidden]{display:none}
  .scene-art,.work-switch,.strip{display:none!important}
  .lift,.mask-line > span{opacity:1;transform:none}
}