/* ============================================================
   SUPAKIT — CINEMATOGRAPHER  ·  v4
   Direction: "A24 night-cinema — a DP's slate" (quiet-luxury, restrained)
   Refs: Aristide Benoist (dark elegance) · Basement (clean grid type)
   · Phantom (smooth-scroll storytelling) · A24 (mono labels, letterbox,
   graded stills, restraint + striking single images).
   Palette (STRICT): #000 / #FFF / navy #0A1A2F #0E2038 / accent #1E4E8C
   Type: Space Grotesk (display/body) + Space Mono (ALL labels/metadata)
   ============================================================ */

:root{
  --black:#000000;
  --white:#FFFFFF;
  --navy-900:#0A1A2F;
  --navy-800:#0E2038;
  --navy-accent:#1E4E8C;

  --bg:var(--black);
  --bg-elev:var(--navy-900);
  --ink:var(--white);
  --ink-dim:rgba(255,255,255,.55);
  --ink-faint:rgba(255,255,255,.32);
  --line:rgba(255,255,255,.12);
  --accent:var(--navy-accent);

  --maxw:1480px;
  --pad: clamp(20px, 5vw, 88px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.76,0,.24,1);

  --f-display:"Space Grotesk", system-ui, sans-serif;
  --f-body:"Space Grotesk", system-ui, sans-serif;
  --f-mono:"Space Mono", ui-monospace, monospace;

  --scope: 2.39;           /* cinemascope aspect */
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; max-width:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(15px,1.05vw,17px); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--accent);color:var(--white)}

/* mono micro-label utility (the A24 voice) */
.mono{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:400; }

/* ---- atmosphere: grain + vignette + scanline whisper ----- */
.grain{
  position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite; mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,4%)}
  80%{transform:translate(5%,-2%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:29;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 32%, transparent 52%, rgba(0,0,0,.6) 100%);
}

/* ---- timecode / slate HUD -------------------------------- */
.hud{ position:fixed; z-index:31; pointer-events:none;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em;
  color:var(--ink-faint); text-transform:uppercase; }
.hud-tc{ left:var(--pad); bottom:18px; display:flex; align-items:center; gap:10px; }
.hud-rec{ right:var(--pad); bottom:18px; display:flex; align-items:center; gap:8px; }
.rec-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px var(--accent); animation:rec 1.6s var(--ease) infinite; }
@keyframes rec{ 0%,100%{opacity:1} 50%{opacity:.18} }
@media(max-width:560px){ .hud-rec{ display:none } }

/* ---- layout shells --------------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
section{ position:relative; z-index:2; }
.sec-pad{ padding-block: clamp(90px,14vh,190px); }

.sec-head{ display:flex; align-items:center; gap:1rem; margin-bottom:clamp(40px,6vh,80px);
  padding-bottom:1rem; border-bottom:1px solid var(--line); }
.sec-head::before{ content:""; width:7px; height:7px; background:var(--accent);
  box-shadow:0 0 8px var(--accent); flex:none; }
.sec-index{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-dim); font-weight:400; }
.sec-title{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2rem,5.4vw,3.6rem); line-height:1.02; letter-spacing:-.02em; margin:0;
}
.sec-title em{ font-style:italic; color:var(--ink); font-weight:400; }

/* ---- loader (aperture / letterbox wipe) ------------------ */
#loader{
  position:fixed; inset:0; z-index:1000; background:var(--black);
  display:flex; align-items:center; justify-content:center; text-align:center; color:var(--white);
}
.loader-bars{ position:absolute; inset:0; pointer-events:none; }
.loader-bars::before,.loader-bars::after{ content:""; position:absolute; left:0; right:0;
  height:50%; background:var(--black); transition:transform 1s var(--ease-io); }
.loader-bars::before{ top:0; }
.loader-bars::after{ bottom:0; }
#loader.done .loader-bars::before{ transform:translateY(-100%); }
#loader.done .loader-bars::after{ transform:translateY(100%); }
#loader.done .loader-inner{ opacity:0; transition:opacity .4s ease; }
.loader-inner{ position:relative; z-index:2; text-align:center; width:min(70vw,440px); }
.loader-slate{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.3em;
  color:var(--ink-dim); text-transform:uppercase; margin:0 0 1.4rem; }
.loader-name{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.8rem,4.4vw,2.8rem); letter-spacing:-.02em; margin:0 0 1.4rem;
}
.loader-bar{ height:1px; width:100%; background:var(--line); position:relative; overflow:hidden; }
.loader-bar span{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:var(--white); }
.loader-pct{ margin-top:.9rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.3em;
  color:var(--ink-dim); font-variant-numeric:tabular-nums; }

/* ---- nav ------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(16px,2.2vw,26px) var(--pad);
  mix-blend-mode:difference; color:#fff;
}
.nav-logo{ font-family:var(--f-display); font-weight:500; font-size:1.05rem; letter-spacing:-.01em; }
.nav-links{ display:flex; gap:clamp(18px,2.4vw,36px); }
.nav-links a{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  position:relative; padding-block:4px;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---- anamorphic letterbox motif -------------------------- */
.scope{ position:relative; overflow:hidden; aspect-ratio:var(--scope); background:var(--navy-900); }
.scope-bars{ position:absolute; left:0; right:0; z-index:4; pointer-events:none; }

/* ---- hero ------------------------------------------------ */
.hero{ position:relative; height:100svh; min-height:580px; overflow:hidden;
  display:flex; align-items:flex-end; }
/* cinemascope bars top & bottom of hero */
.hero::before,.hero::after{ content:""; position:absolute; left:0; right:0; z-index:3;
  height:clamp(28px,7vh,72px); background:var(--black); pointer-events:none; }
.hero::before{ top:0; box-shadow:0 1px 0 var(--line); }
.hero::after{ bottom:0; box-shadow:0 -1px 0 var(--line); }
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media img,
.hero-vid{
  width:100%; height:100%; object-fit:cover; transform:scale(1.04);
  will-change:transform;
  /* graded blue-hour film-stock look */
  filter:contrast(1.12) brightness(.7) saturate(.78) sepia(.12) hue-rotate(176deg);
}
/* showreel bg (v4.11): the poster (object-fit:cover) IS the first paint = LCP.
   Once the 720 source attaches + plays, it fades in over the poster. opacity-only
   so there is no layout shift and the swap stays 60fps. */
.hero-vid{ display:block; background:var(--navy-900); opacity:1; transition:opacity .9s var(--ease); }
.hero-vid.playing{ opacity:1; }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(10,26,47,.12) 32%, rgba(10,26,47,.62) 80%, rgba(0,0,0,.94) 100%); }
.hero-grad{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(78% 60% at 18% 86%, rgba(30,78,140,.32), transparent 60%); }
/* anamorphic lens flare — horizontal streak */
.lens-flare{ position:absolute; z-index:2; left:-10%; right:-10%; top:38%;
  height:2px; pointer-events:none; opacity:.5;
  background:linear-gradient(90deg, transparent, rgba(30,78,140,.2) 30%, rgba(255,255,255,.55) 50%, rgba(30,78,140,.2) 70%, transparent);
  filter:blur(1px); animation:flare 9s var(--ease) infinite; }
.lens-flare::after{ content:""; position:absolute; left:46%; top:-7px; width:8%; height:16px;
  background:radial-gradient(closest-side, rgba(255,255,255,.5), transparent);
  filter:blur(3px); }
@keyframes flare{ 0%,100%{opacity:.28;transform:translateY(0)} 50%{opacity:.6;transform:translateY(-12px)} }

.hero-inner{ position:relative; z-index:2; width:100%;
  padding:0 var(--pad) clamp(60px,10vh,120px); }
.hero-slate{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-dim); margin:0 0 clamp(16px,2.4vh,26px);
  display:flex; gap:1.4rem; flex-wrap:wrap; }
.hero-slate b{ color:var(--accent); font-weight:400; }
.hero h1{
  font-family:var(--f-display); font-weight:300; font-size:clamp(2.8rem,11vw,9.5rem);
  line-height:.94; letter-spacing:-.04em; margin:0; max-width:15ch;
}
/* overflow mask for the GSAP rise-reveal. padding-bottom gives descenders
   (g/y/p/j) room below the tight line-height:.94 baseline so they aren't
   cropped; the equal negative margin-bottom nets the box change to ZERO,
   so visual line spacing is unchanged and the three hard-split lines don't
   reflow. The `i` rests at translateY(110%) — far below this .14em window —
   so it stays fully hidden before animating in. */
.hero h1 .ln{ display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hero h1 .ln i{ display:block; font-style:normal; transform:translateY(110%); }
.hero h1 em{ font-style:italic; font-weight:400; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:.8rem 2.4rem; margin-top:clamp(22px,3.4vh,38px);
  align-items:center; }
.hero-role{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-dim); }
.hero-tag{ font-family:var(--f-display); font-style:italic; font-weight:400; font-size:1.1rem; }

/* ---- showreel controls (v4.11) --------------------------- */
.hero-reel{ display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1.4rem;
  margin-top:clamp(24px,3.6vh,40px); }
/* primary: Watch reel ▶ — outlined A24 pill, mono label */
.reel-play{ display:inline-flex; align-items:center; gap:.7rem;
  padding:.7rem 1.2rem; border:1px solid var(--line); border-radius:2px;
  background:rgba(10,26,47,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease); }
.reel-play:hover, .reel-play:focus-visible{ border-color:var(--accent);
  background:rgba(30,78,140,.22); transform:translateY(-1px); }
.reel-play:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.reel-play-ico{ color:var(--accent); font-size:.74rem; line-height:1; transform:translateY(.5px); }
.reel-yr{ color:var(--ink-dim); }
/* secondary: SOUND toggle — quiet, no border until hover */
.reel-sound{ display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .2rem;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-dim); border-bottom:1px solid transparent; transition:color .4s var(--ease), border-color .4s var(--ease); }
.reel-sound:hover, .reel-sound:focus-visible{ color:var(--ink); border-bottom-color:var(--line); }
.reel-sound:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.reel-sound-ico{ color:var(--accent); }
/* live state: when unmuted, the toggle reads MUTE and pulses the note glyph */
.reel-sound[aria-pressed="true"]{ color:var(--ink); }
.reel-sound[aria-pressed="true"] .reel-sound-ico{ animation:rec 1.6s var(--ease) infinite; }
@media(max-width:520px){ .reel-play{ padding:.6rem 1rem; } }
.scroll-cue{ position:absolute; right:var(--pad); bottom:clamp(80px,12vh,120px); z-index:3;
  writing-mode:vertical-rl; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-dim); display:flex; align-items:center; gap:14px; }
.scroll-cue::after{ content:""; width:1px; height:48px; background:var(--ink-faint);
  animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{transform:scaleY(.3);opacity:.3} 50%{transform:scaleY(1);opacity:1} }

/* ---- selected work --------------------------------------- */
.work-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,3vw,52px);
  row-gap:clamp(56px,8vh,128px); }
.work-item{ position:relative; cursor:none; }
.work-item .thumb{
  position:relative; overflow:hidden; background:var(--navy-900);
  aspect-ratio:16/9;   /* show the frame, minimal crop */
}
.work-item.feature{ grid-column:span 12; }
.work-item.half{ grid-column:span 6; }
@media(max-width:760px){ .work-item.half{ grid-column:span 12 } }
/* duotone "ungraded" still -> color "graded" on hover (DP before/after) */
.work-item .thumb img{
  width:100%; height:100%; object-fit:cover; will-change:transform,filter;
  transform:scale(1.001);
  filter:grayscale(.12) contrast(1.04) brightness(.99) saturate(1.03);  /* visible + sharp by default */
  transition:transform 1.2s var(--ease), filter .75s var(--ease);
}
/* navy duotone wash over the B&W still */
.work-item .thumb::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(30,78,140,.42), rgba(10,26,47,.78));
  mix-blend-mode:color; opacity:.16; transition:opacity .75s var(--ease); pointer-events:none; }
.work-item .thumb::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.3); }
/* RACK FOCUS: blur->sharp, ungraded->graded, on hover/focus */
.work-item:hover .thumb img,
.work-item:focus-visible .thumb img{
  transform:scale(1.045);
  filter:grayscale(0) contrast(1.06) brightness(.96) blur(0);
}
.work-item:hover .thumb::before,
.work-item:focus-visible .thumb::before{ opacity:0; }
.work-item:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }

/* ---- 9:16 VERTICAL REELS ----------------------------------
   Vertical media shown CONTAINED (uncropped, centred) inside the 16:9 frame,
   with a blurred darkened copy filling the sides. Both layers are `.thumb img`,
   so the duotone "ungraded -> hover reveals real colour" + rack-focus apply to
   BOTH in lockstep — the fill feels native, not bolted on. */
.work-item.vert .thumb-main{ position:relative; z-index:1; object-fit:contain; } /* hero copy: no crop, above fill */
.work-item.vert .thumb-fill{
  position:absolute; inset:0; z-index:0;                         /* behind slate + duotone wash */
  width:100%; height:100%; object-fit:cover;                     /* fills the landscape sides */
  transform:scale(1.12);                                          /* hide blur edge bleed */
  filter:grayscale(.12) contrast(1.04) brightness(.7) saturate(1.03) blur(26px);
  transition:transform 1.2s var(--ease), filter .75s var(--ease);
}
/* hover: fill follows the rack-focus -> ungraded->graded, but stays blurred + dim as backdrop */
.work-item.vert:hover .thumb-fill,
.work-item.vert:focus-visible .thumb-fill{
  transform:scale(1.16);
  filter:grayscale(0) contrast(1.06) brightness(.72) saturate(1.03) blur(22px);
}
/* slate bar across top of each thumb */
.work-slate{ position:absolute; top:0; left:0; right:0; z-index:3; pointer-events:none;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:10px 14px; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--white);
  background:linear-gradient(180deg, rgba(0,0,0,.55), transparent); }
.work-slate .wl-num::before{ content:"● "; color:var(--accent); }
.work-foot{ display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-top:18px; }
.work-title{ font-family:var(--f-display); font-weight:400; font-size:clamp(1.15rem,2.4vw,1.95rem);
  line-height:1.05; letter-spacing:-.02em; }
.work-client{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; color:var(--ink-dim);
  margin-top:6px; text-transform:uppercase; }
.work-cat{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap; }
.work-meta{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.12em; color:var(--ink-faint);
  text-transform:uppercase; margin-top:10px; }

/* ---- the DP's eye ---------------------------------------- */
.bg-navy{ background:linear-gradient(180deg, var(--black), var(--navy-900) 45%, var(--black)); }
.eye-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(32px,6vw,90px);
  align-items:start; }
@media(max-width:860px){ .eye-grid{ grid-template-columns:1fr } }
.eye-heading{ font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.8rem,4.4vw,3rem); line-height:1.08; letter-spacing:-.02em; margin:0 0 2rem; }
.eye-lines p{ color:var(--ink-dim); max-width:52ch; margin:0 0 1.3rem;
  padding-left:1.3rem; border-left:1px solid var(--line); }
.eye-specs{ display:flex; flex-direction:column; gap:1px; background:var(--line);
  border:1px solid var(--line); }
.eye-spec{ background:var(--black); padding:1rem 1.2rem; display:flex; justify-content:space-between;
  gap:1rem; align-items:baseline; }
.eye-spec .k{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; color:var(--ink-faint);
  text-transform:uppercase; }
.eye-spec .v{ font-family:var(--f-display); font-size:.95rem; color:var(--ink); }

/* ---- what i do ------------------------------------------- */
.do-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); }
@media(max-width:720px){ .do-grid{ grid-template-columns:1fr } }
.do-cell{ background:var(--black); padding:clamp(28px,4vw,52px); position:relative;
  min-height:clamp(220px,30vh,320px); display:flex; flex-direction:column; }
.do-cell.lead{ background:linear-gradient(160deg, var(--navy-800), var(--black) 80%); }
.do-n{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.26em; color:var(--ink-faint); }
.do-title{ font-family:var(--f-display); font-weight:300; font-size:clamp(1.6rem,3.4vw,2.6rem);
  line-height:1.02; margin:.5rem 0 auto; letter-spacing:-.02em; }
.do-cell.lead .do-title::after{ content:" ·"; color:var(--accent); }
.do-text{ color:var(--ink-dim); margin-top:1.4rem; max-width:42ch; font-size:.95rem; }
.do-lead-tag{ position:absolute; top:clamp(28px,4vw,52px); right:clamp(28px,4vw,52px);
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); }

/* ---- about ----------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:1.05fr 1.4fr; gap:clamp(32px,6vw,90px);
  align-items:center; }
@media(max-width:860px){ .about-grid{ grid-template-columns:1fr } }
.about-portrait{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--navy-900); }
.about-portrait img{ width:100%; height:100%; object-fit:cover;
  filter:grayscale(.35) contrast(1.12) brightness(.86); transform:scale(1.04); will-change:transform; }
.about-portrait::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, transparent 48%, rgba(10,26,47,.6)); }
.about-portrait .corner{ position:absolute; z-index:3; font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.16em; color:var(--white); text-transform:uppercase; }
.about-portrait .c-tl{ top:12px; left:12px; }
.about-portrait .c-br{ bottom:12px; right:12px; color:var(--ink-dim); }
/* name heading — display scale, sits between .eye-heading and .sec-title (Pixie) */
.about-name{ font-family:var(--f-display); font-weight:300;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.04; letter-spacing:-.025em; margin:0 0 .6rem; }
.about-bio{ font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.42; letter-spacing:-.01em; margin:0; }
.about-bio b{ font-weight:400; font-style:italic; }
/* spacing between the two paragraphs (Vera) */
.about-body .about-bio + .about-bio{ margin-top:1.3rem; }
.about-sub{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent); margin:0 0 1.6rem; }

/* ---- clients marquee ------------------------------------- */
.marquee{ position:relative; z-index:2; overflow:hidden; border-block:1px solid var(--line);
  padding-block:clamp(44px,6.5vh,72px); }
/* min-height guarantees a clear band taller than the TALLEST logo (now the square
   emblems at up to 66px) so nothing ever touches the top/bottom border, even at
   narrow mobile widths (~390px). */
.marquee-track{ display:flex; align-items:center; min-height:72px;
  gap:clamp(40px,6vw,96px); width:max-content; will-change:transform; }
/* each client cell holds either a real coloured logo or a text wordmark fallback,
   on one shared optical baseline so the strip reads as a single cinematic line */
.marquee-cell{ display:inline-flex; align-items:center; white-space:nowrap; }
.marquee-cell::after{ content:"·"; margin-left:clamp(40px,6vw,96px); color:var(--accent);
  font-family:var(--f-display); font-size:clamp(1.6rem,4vw,3rem); line-height:1; }
/* uniform monochrome "client wall" — every logo renders the SAME off-white
   regardless of its source colour (Kit's v4.4 call: the cleaner pro look on
   the dark A24 strip). brightness(0) flattens any fill to black, invert(.92)
   lifts it to one near-white tone — so Honda's red emblem reads white too,
   and Kia + the 5 wordmarks stay white. SVGs are untouched (honda.svg stays
   red internally) so this is future-proof for any new logo. */
/* OPTICAL BALANCE (v4.5): logos have very different aspect ratios — Honda & Kia are
   SQUARE emblems (viewBox 0 0 24 24, ~1:1) while the other five are WIDE wordmarks
   (viewBox ~440x100, ~3-4:1). Sizing every logo to the same HEIGHT made the square
   emblems read tiny (esp. Kia) and the strip looked uneven. Fix = balance by visual
   WEIGHT: give emblems ~1.5x the wordmarks' height so all logos carry the same optical
   mass. data-shape is emitted per-logo in renderClients() (derived from filename). */
.marquee-logo{ width:auto; display:block; object-fit:contain;
  opacity:.85; filter:brightness(0) invert(.92); transition:opacity .5s var(--ease); }
/* wide wordmarks — modest height, capped width so the longest names
   ("Jasmine P. Green", "Dreamwork x M.A.D Records") don't dominate the row */
.marquee-logo[data-shape="word"]{ height:clamp(28px,3.1vw,42px); max-width:clamp(150px,22vw,230px); }
/* square emblems (Honda, Kia) — taller in pixel-height so that at ~1:1 ratio they
   read at the SAME visual scale as the wordmarks instead of looking small */
.marquee-logo[data-shape="emblem"]{ height:clamp(42px,4.8vw,66px); }
.marquee:hover .marquee-logo{ opacity:1; }
/* text wordmark fallback — matched baseline + height to the colour logos */
.marquee-word{ font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(1.4rem,3.2vw,2.5rem); color:var(--ink-dim); white-space:nowrap; line-height:1; }

/* visible build version badge (Kit's standing rule) */
.site-ver{ display:inline-block; margin-left:.6em; padding:.12em .55em;
  border:1px solid var(--line); border-radius:2px; font-size:.72em; letter-spacing:.08em;
  color:var(--ink-dim); opacity:.7; vertical-align:middle; }

/* ---- contact / footer ------------------------------------ */
.contact{ background:linear-gradient(180deg,var(--black),var(--navy-900)); }
.contact-cta{ font-family:var(--f-display); font-weight:300; font-size:clamp(2.4rem,9vw,7rem);
  line-height:.96; letter-spacing:-.04em; margin:0; overflow-wrap:break-word; }
.contact-cta em{ font-style:italic; font-weight:400; }
/* the real email — its own properly-sized, fully-wrapping mailto line (v4.6).
   never renders at the giant headline scale, never clips at 390px. */
.contact-mail{ display:inline-block; margin-top:clamp(18px,3vh,30px);
  font-family:var(--f-mono); font-size:clamp(.9rem,2.4vw,1.15rem); letter-spacing:.04em;
  color:var(--ink-dim); max-width:100%; overflow-wrap:anywhere; word-break:break-word;
  transition:color .4s; }
.contact-mail:hover{ color:var(--accent); }
.contact-cta a{ position:relative; }
.contact-cta a::after{ content:""; position:absolute; left:0; bottom:.06em; height:2px; width:100%;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.contact-cta a:hover::after{ transform:scaleX(1); }
.contact-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.4rem;
  margin-top:clamp(48px,8vh,90px); padding-top:2rem; border-top:1px solid var(--line); align-items:flex-end; }
.contact-socials{ display:flex; gap:1.6rem; }
.contact-socials a{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim); transition:color .4s; }
.contact-socials a:hover{ color:var(--white); }
.foot-meta{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); }

/* ---- custom cursor --------------------------------------- */
.cursor{ position:fixed; top:0; left:0; z-index:500; pointer-events:none;
  width:9px; height:9px; border-radius:50%; background:var(--white);
  mix-blend-mode:difference; transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease); }
.cursor.big{ width:88px; height:88px; }
.cursor-ring{ position:fixed; top:0; left:0; z-index:499; pointer-events:none;
  width:34px; height:34px; border:1px solid var(--ink-faint); border-radius:50%;
  transform:translate(-50%,-50%); mix-blend-mode:difference; }
.cursor-label{ position:fixed; z-index:501; pointer-events:none; color:var(--black);
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  transform:translate(-50%,-50%) scale(.4); opacity:0; transition:opacity .3s,transform .3s; }
.cursor-label.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.no-cursor, .no-cursor *{ cursor:none; }

/* ---- reveal primitives ----------------------------------- */
.reveal{ opacity:0; transform:translateY(28px); }
.reveal.in{ opacity:1; transform:none; transition:opacity 1s var(--ease), transform 1s var(--ease); }
.clip-reveal{ clip-path:inset(0 0 100% 0); }
.clip-reveal.in{ clip-path:inset(0 0 0 0); transition:clip-path 1.1s var(--ease-io); }

/* ---- v4.13 motion layer (Phase 2A GSAP) ------------------- */
/* SplitText / fallback line wrapper: overflow-clip so the masked line-rise
   (yPercent 110→0) reads as type rising out from behind a mask, no overhang. */
.kt-line{ display:block; overflow:hidden; }
/* the real text inside a line is what GSAP translates; keep it block so the
   clip works whether SplitText made an inner div or our fallback made spans. */
.kt-line > *{ display:inline-block; will-change:transform; }
/* contact CTA lines must keep their <a> underline target working inside .kt-line */
.contact-cta .kt-line{ overflow:hidden; }

/* underline-draw micro-interaction (nav already has its own ::after; this adds
   the same left→right draw to the contact email links that lacked it). Pure
   transform (scaleX) — cheap. Nav links keep their existing rule too. */
.kt-underline{ position:relative; }
#contact-email-link.kt-underline::after,
.contact-cta a.kt-underline::after{
  content:""; position:absolute; left:0; bottom:-.04em; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
#contact-email-link.kt-underline:hover::after,
.contact-cta a.kt-underline:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ============================================================
   v4.14 — Phase 2B STRUCTURAL MOTION
   (1) Horizontal film-strip for #work  (2) split-screen mask for #eye
   All desktop-only; the base rules below are the STATIC fallback that
   touch / reduced-motion keep. The .film-on / pinned states are added by
   JS only on desktop (≥921px, fine pointer, motion-ok).
   ============================================================ */

/* ---- (1) FILM-STRIP — Selected Work ----------------------- */
/* .work-strip = the viewport-width window the JS wraps around #work-grid.
   Hidden visually until .film-on; when off it's a transparent pass-through. */
.work-strip{ position:relative; }
/* film-on: #work-grid stops being a 12-col grid and becomes a single wide
   horizontal flex row that GSAP translates on x. transform/opacity only. */
#work.film-on .work-strip{
  overflow:visible;
  /* sprocket-hole strips top & bottom = the "film gate" framing (Pixie).
     pure CSS gradient, no images, sits behind the tiles. */
}
#work.film-on .work-strip::before,
#work.film-on .work-strip::after{
  content:""; position:absolute; left:0; right:0; height:14px; z-index:0; pointer-events:none;
  opacity:.5;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 22px,
      rgba(255,255,255,.16) 22px 34px,
      transparent 34px 56px);
}
#work.film-on .work-strip::before{ top:-26px; }
#work.film-on .work-strip::after{ bottom:-26px; }
#work.film-on .work-grid{
  display:flex; grid-template-columns:none; width:max-content; will-change:transform;
  align-items:stretch; gap:clamp(28px,3.4vw,64px); row-gap:0;
}
/* in the reel every tile gets a fixed cinematic width so they read as frames.
   feature tile stays a touch wider; vertical reel narrower. heights equalise. */
#work.film-on .work-item{ flex:0 0 auto; width:min(46vw,640px); margin:0; }
#work.film-on .work-item.feature{ width:min(58vw,820px); }
#work.film-on .work-item.vert{ width:min(30vw,420px); }
/* keep the thumb a fixed filmic frame height while moving */
#work.film-on .work-item .thumb{ aspect-ratio:16/9; }
/* per-tile frame number cue (mono) sits in the bottom-left of each frame */
.film-fr{ position:absolute; left:12px; bottom:10px; z-index:4; pointer-events:none;
  color:var(--white); opacity:.8; text-shadow:0 1px 6px rgba(0,0,0,.6);
  font-size:.56rem; letter-spacing:.18em; }
.film-fr::before{ content:"▣ "; color:var(--accent); }
/* a faint scroll hint shown only while the strip is live */
#work.film-on .sec-head::after{
  content:"DRAG-FREE · SCROLL TO TRACK ⟶"; margin-left:auto;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap;
}
@media(max-width:920px){ /* belt-and-braces: never film-strip below desktop */
  #work.film-on .work-grid{ display:grid; grid-template-columns:repeat(12,1fr); width:auto; }
}

/* ---- (2) THE DP'S EYE — split-screen mask reveal ---------- */
/* default (mobile / reduced-motion): clean stacked — visual ON TOP, then text.
   No pin, the first still simply shows graded + static. */
.eye-stage{ display:block; }
.eye-visual{ position:relative; margin-bottom:clamp(28px,5vh,56px); }
.eye-frame{ position:relative; overflow:hidden; aspect-ratio:16/9;
  background:var(--navy-900); border:1px solid var(--line); }
.eye-corner{ position:absolute; z-index:4; color:var(--white); pointer-events:none;
  font-size:.56rem; letter-spacing:.16em; text-shadow:0 1px 6px rgba(0,0,0,.6); }
.eye-corner-tl{ top:12px; left:12px; }
.eye-corner-br{ bottom:12px; right:12px; color:var(--ink-dim); }
.eye-frame::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.45);
  background:linear-gradient(200deg, transparent 55%, rgba(10,26,47,.5)); }
.eye-stills{ position:absolute; inset:0; }
.eye-still{ position:absolute; inset:0; }
.eye-still picture, .eye-still-img{ width:100%; height:100%; }
.eye-still-img{ object-fit:cover;
  /* graded "after" look — the DP's signature high-contrast tone */
  filter:contrast(1.08) brightness(.92) saturate(1.04); }
/* static fallback: only the base still is visible, no clip mask */
.eye-still:not(.is-base){ opacity:0; }
.eye-still.is-base{ opacity:1; }

/* DESKTOP (≥921px): two columns — pinned visual left, flowing text right.
   The JS pin + clip-swipe take over; these rules give the layout + a default
   so even before JS runs the section is laid out correctly (no CLS). */
@media(min-width:921px){
  .eye-stage{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,5vw,90px);
    align-items:start; }
  .eye-visual{ margin-bottom:0; }            /* pinned, height comes from the frame */
  .eye-frame{ aspect-ratio:4/3; }            /* taller frame reads as a "still on the wall" */
  /* when JS is active each non-base still starts masked from the right;
     the .eye-still inline clip-path set by GSAP overrides this. This is just a
     safe pre-JS default so nothing flashes. */
  .eye-still:not(.is-base){ opacity:0; }
  /* text lines dim until active → the active line "drives" the still on the left */
  .eye-line{ transition:color .5s var(--ease), border-color .5s var(--ease), opacity .5s var(--ease); }
  .eye-line{ opacity:.4; }
  .eye-line.active{ opacity:1; color:var(--ink); border-left-color:var(--accent); }
}

/* ---- lightbox (letterbox-bar iris wipe) ------------------ */
.lb{ position:fixed; inset:0; z-index:600; display:none; place-items:center;
  padding:var(--pad); }
.lb.open{ display:grid; }
.lb-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.92); backdrop-filter:blur(8px);
  opacity:0; transition:opacity .5s var(--ease); }
.lb.open .lb-scrim{ opacity:1; }
/* aperture bars that part to reveal the frame */
.lb-bars{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.lb-bars::before,.lb-bars::after{ content:""; position:absolute; left:0; right:0; height:50%;
  background:var(--black); transition:transform .7s var(--ease-io); }
.lb-bars::before{ top:0; transform:translateY(0); }
.lb-bars::after{ bottom:0; transform:translateY(0); }
.lb.open .lb-bars::before{ transform:translateY(-100%); }
.lb.open .lb-bars::after{ transform:translateY(100%); }
.lb-frame{ position:relative; z-index:4; width:min(1120px,100%);
  transform:translateY(20px); opacity:0;
  transition:opacity .5s var(--ease) .2s, transform .5s var(--ease) .2s; }
.lb.open .lb-frame{ transform:none; opacity:1; }
.lb-video{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden;
  border:1px solid var(--line); }
.lb-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* native showreel in the lightbox (v4.11) — fills the 16:9 .lb-video frame */
.lb-video video{ position:absolute; inset:0; width:100%; height:100%; border:0;
  object-fit:cover; background:#000; }
.lb-still{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.lb-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; margin-bottom:1rem; }
.lb-title{ font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.1rem,2.4vw,1.7rem); }
.lb-client{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.lb-note{ margin-top:1rem; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; color:var(--ink-dim); }
.lb-close{ position:absolute; top:calc(-1 * clamp(34px,5vh,52px)); right:0; z-index:5;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim);
  display:flex; align-items:center; gap:8px; }
.lb-close:hover{ color:var(--white); }
.lb-close::before{ content:"✕"; font-size:.9rem; }

/* ---- case study (v4.9): scrollable project panel --------- */
/* the frame becomes a height-capped scroll container; close stays reachable */
.lb-frame{ max-height:calc(100vh - var(--pad) * 2); display:flex; flex-direction:column; }
.lb-scroll{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
  padding-right:2px; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.lb-scroll::-webkit-scrollbar{ width:8px; }
.lb-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:4px; }
.lb-scroll::-webkit-scrollbar-track{ background:transparent; }

/* shared section rhythm — mono micro-label like the work slate */
.cs{ margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.cs-label{ display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:1rem; }

/* 2. logline */
.cs-desc{ font-family:var(--f-display); font-size:clamp(.98rem,1.5vw,1.18rem); line-height:1.6;
  color:var(--ink); max-width:62ch; }

/* 3. color panel — DP LUT strip */
.cs-strip{ display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line); }
.cs-swatch{ flex:1 1 0; min-width:84px; display:flex; flex-direction:column; }
.cs-chip{ height:clamp(64px,11vh,108px); width:100%; display:block;
  filter:saturate(.9) brightness(.98); transition:filter .4s var(--ease), transform .4s var(--ease); }
.cs-swatch:hover .cs-chip{ filter:saturate(1.08) brightness(1.04); }
.cs-hex{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-dim); padding:.5rem .4rem; text-align:center;
  border-top:1px solid var(--line); background:var(--bg-elev); }
.cs-swatch + .cs-swatch{ border-left:1px solid var(--line); }

/* 4. stills — duotone treatment, lift to colour on hover */
.cs-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cs-still{ position:relative; padding:0; border:1px solid var(--line); background:#000;
  cursor:pointer; overflow:hidden; aspect-ratio:16/9; }
.cs-still img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(.55) contrast(1.06) brightness(.9) saturate(.7);
  transition:filter .5s var(--ease), transform .7s var(--ease); }
.cs-still:hover img, .cs-still:focus-visible img{ filter:none; transform:scale(1.05); }
.cs-still:focus-visible{ outline:1px solid var(--accent); outline-offset:2px; }
body.touch .cs-still img{ filter:grayscale(.2) contrast(1.03) saturate(.92); }

/* enlarged still — true colour, over the frame */
.cs-zoom{ position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:rgba(0,0,0,.96); opacity:0; transition:opacity .35s var(--ease); cursor:zoom-out; padding:6%; }
.cs-zoom.show{ opacity:1; }
.cs-zoom img{ max-width:100%; max-height:100%; object-fit:contain; border:1px solid var(--line); }
.cs-zoom-hint{ position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim); }

/* 5. credits — camera-report rows */
.cs-creditlist{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem 2.4rem; }
.cs-credit{ display:flex; align-items:baseline; gap:.6rem; font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.08em; padding:.55rem 0; border-bottom:1px solid var(--line); }
.cs-role{ text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; }
.cs-dash{ color:var(--ink-dim); }
.cs-name{ color:var(--ink); margin-left:auto; text-align:right; }

@media(max-width:720px){
  .cs-grid{ grid-template-columns:1fr 1fr; }
  .cs-creditlist{ grid-template-columns:1fr; gap:0; }
  .cs-swatch{ min-width:64px; }
  .cs-hex{ font-size:.54rem; }
}

/* ---- responsive ------------------------------------------ */
@media(max-width:720px){
  .nav-links{ display:none; }
  .hero h1{ font-size:clamp(2.6rem,15vw,5rem); }
  .scroll-cue{ display:none; }
}

/* ---- reduced motion / touch fallbacks -------------------- */
body.touch .cursor, body.touch .cursor-ring, body.touch .cursor-label{ display:none!important; }
body.touch *{ cursor:auto!important; }
body.touch .work-item{ cursor:pointer!important; }
/* touch: no hover -> show stills full + sharp, and never keep them clipped */
body.touch .work-item .thumb img{ filter:grayscale(.1) contrast(1.04) brightness(1) saturate(1.04); }
body.touch .work-item .thumb::before{ opacity:.12; }
body.touch .clip-reveal{ clip-path:none!important; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .grain{ animation:none; }
  .hero-media img{ transform:none; }
  .lens-flare{ animation:none; opacity:.3; }
  .reveal{ opacity:1; transform:none; }
  .clip-reveal{ clip-path:none; }
  .hero h1 .ln i{ transform:none; }
  .hero-vid{ transition:none; }                 /* poster only; JS never autoplays */
  .reel-sound[aria-pressed="true"] .reel-sound-ico{ animation:none; }
  .scroll-cue::after, .rec-dot{ animation:none; }
  .work-item .thumb img{ filter:grayscale(.15) contrast(1.05) brightness(.92); }
  .work-item .thumb::before{ opacity:.3; }
  /* v4.13: the GSAP motion layer never runs under reduced-motion (matchMedia
     matches no-preference only), so headings/tiles are never wrapped or hidden.
     These belts-and-braces rules guarantee full visibility regardless. */
  .kt-line{ overflow:visible; }
  .kt-line > *{ transform:none!important; }
  #work .sec-title, #eye-heading, #do .sec-title, .contact-cta{ opacity:1!important; visibility:visible!important; }
  .work-item .thumb{ clip-path:none!important; transform:none!important; }
  /* v4.14 structural motion never runs under reduced-motion (matchMedia is
     no-preference only). Belt-and-braces: the work grid stays a vertical grid,
     and the eye visual stays a static stacked still with its base frame shown. */
  #work .work-grid{ display:grid!important; grid-template-columns:repeat(12,1fr)!important;
    width:auto!important; transform:none!important; }
  .film-fr{ display:none!important; }
  .eye-stage{ display:block!important; }
  .eye-visual{ position:static!important; transform:none!important; margin-bottom:clamp(28px,5vh,56px)!important; }
  .eye-still:not(.is-base){ display:none!important; }
  .eye-still.is-base{ opacity:1!important; clip-path:none!important; }
  .eye-line{ opacity:1!important; }
}

/* touch belt-and-braces: structural pins never apply on touch either */
body.touch #work .work-grid{ display:grid!important; grid-template-columns:repeat(12,1fr); width:auto; transform:none; }
body.touch .film-fr{ display:none!important; }
body.touch .eye-visual{ position:static!important; transform:none!important; }
body.touch .eye-still:not(.is-base){ display:none!important; }
body.touch .eye-line{ opacity:1!important; }

/* ============================================================
   v4.15 — Phase 2C
   (1) Deep-link Share button in the case study  (2) Services + Book
   A24 voice throughout: mono labels, hairline dividers, accent fill on
   hover. Transform/opacity only; no new pins, no layout thrash.
   ============================================================ */

/* ---- (1) SHARE button (lightbox case study) --------------- */
.lb-head{ align-items:flex-start; }      /* title block top-aligned with share */
.lb-head-main{ min-width:0; }            /* allow long titles to wrap, not push share */
.lb-share{ flex:0 0 auto; display:inline-flex; align-items:center; gap:9px;
  padding:.5em .9em; border:1px solid var(--line); border-radius:2px;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); white-space:nowrap; min-width:142px; justify-content:center;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.lb-share:hover, .lb-share:focus-visible{ color:var(--white); border-color:var(--accent); }
.lb-share:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.lb-share-ico{ color:var(--accent); font-size:.8rem; line-height:1; transform:translateY(.5px); }
/* success state — accent flash, no layout shift (width reserved above) */
.lb-share.copied{ color:var(--white); border-color:var(--accent); background:rgba(30,78,140,.18); }
/* hide the ⧉ glyph (font-size:0) and show a ✓ via ::before at real size */
.lb-share.copied .lb-share-ico{ color:var(--white); font-size:0; }
.lb-share.copied .lb-share-ico::before{ content:"✓"; font-size:.8rem; }

/* ---- (2) SERVICES + BOOK ---------------------------------- */
.svc-layout{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,6vw,96px); align-items:start; }
@media(max-width:880px){ .svc-layout{ grid-template-columns:1fr; gap:clamp(34px,7vh,60px); } }
.svc-intro{ position:relative; }
.svc-title{ margin:0 0 clamp(18px,2.6vh,28px); }
.svc-lede{ color:var(--ink-dim); max-width:46ch; font-size:1rem; margin:0 0 clamp(26px,4vh,40px); }
/* Book CTA — bordered button that fills with accent on hover (matches .reel-play) */
.svc-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 22px; }
.svc-book{ display:inline-flex; align-items:center; gap:14px;
  padding:.95em 1.5em; border:1px solid var(--ink-faint); border-radius:2px;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  transition:border-color .45s var(--ease), background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease); }
.svc-book:hover, .svc-book:focus-visible{ border-color:var(--accent); background:var(--accent);
  color:var(--white); transform:translateY(-2px); }
.svc-book:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }
.svc-book-ico{ transition:transform .45s var(--ease); }
.svc-book:hover .svc-book-ico{ transform:translateX(5px); }
.svc-rates{ color:var(--ink-faint); }      /* "Rates on request · Let's talk" — NO numbers */

/* service line-items — hairline dividers, mono index, A24 restraint */
.svc-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.svc-row{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2vw,30px);
  padding:clamp(22px,3vh,34px) 0; border-bottom:1px solid var(--line); align-items:start; }
.svc-n{ color:var(--ink-faint); padding-top:.35em; }
.svc-name{ font-family:var(--f-display); font-weight:300; font-size:clamp(1.3rem,2.6vw,1.9rem);
  margin:0; letter-spacing:-.01em; }
.svc-desc{ color:var(--ink-dim); margin:.7rem 0 0; max-width:48ch; font-size:.95rem; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:1rem; }
.svc-tags span{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--line); border-radius:2px; padding:.35em .7em; }
.svc-row:hover .svc-name{ color:var(--white); }
.svc-row .svc-name{ transition:color .4s var(--ease); }

/* nav "Book" — subtle accent emphasis vs the other links */
.nav-links a.nav-book{ color:var(--ink); }
.nav-links a.nav-book::after{ background:var(--accent); }