/* =========================================================
   FIRST GLANCE — Home page mockup v3
   Design tokens locked per FirstGlance_Project_Handoff.md
   ========================================================= */

:root{
  /* palette */
  --ink:#0a0a0b;
  --panel:#141417;
  --panel-2:#1b1b1f;
  --bone:#ECE7DD;
  --bone-bright:#F6F4EF;
  --champagne:#C9A86A;
  --champagne-light:#E0BE85;
  --champagne-deep:#A88643;
  --hairline-noir:rgba(236,231,221,.14);
  --hairline-bone:rgba(11,11,12,.12);

  /* type */
  --f-display:'Archivo', sans-serif;
  --f-accent:'Bodoni Moda', serif;
  --f-body:'Geist Sans','Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:'Geist Mono', 'SFMono-Regular', Consolas, monospace;
  --f-brand:'Michroma', 'Archivo', sans-serif; /* matched to FirstGlance_monogram.png / full-logo.png */
  --f-hero:'Cormorant Garamond', 'Bodoni Moda', serif; /* bayside-style editorial serif for hero H2 */

  /* brand silver — matched to logo metallic finish */
  --silver-hi:#f0f1f3;
  --silver-1:#dfe0e3;
  --silver-2:#b1b3b7;
  --silver-3:#7d8085;
  --silver-lo:#3d3f42;

  /* motion tokens (impeccable / motion-system guidance) */
  --ease-out-quint: cubic-bezier(.22,1,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.2,0,0,1);
  --dur-fast: 150ms;
  --dur-normal: 250ms;
  --dur-moderate: 350ms;
  --dur-deliberate: 900ms;

  --container: 1320px;
  --gutter: 24px;
  --radius-card: 16px;
  --radius-pill: 999px;
}

@media (max-width: 720px){
  :root{ --gutter: 16px; }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); overflow-x:hidden; }
html.no-js .reveal{ opacity:1 !important; transform:none !important; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

section{ position:relative; }

.section-pad{ padding:120px 0; }
@media (max-width:720px){ .section-pad{ padding:72px 0; } }

.bg-noir{ background:var(--ink); color:var(--bone); }
.bg-bone{ background:var(--bone); color:var(--ink); }

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--champagne);
  display:flex; align-items:center; gap:10px;
  margin:0 0 20px;
}
.eyebrow::before{
  content:'';
  width:24px; height:1px;
  background:var(--champagne);
  display:inline-block;
}

h1,h2,h3{ margin:0; font-family:var(--f-display); font-weight:800; }

.h2{
  font-size:clamp(2.75rem,5vw,4.5rem);
  line-height:1.02;
  letter-spacing:-.01em;
}
.bg-bone .h2{ color:var(--ink); }

.accent{
  font-family:var(--f-accent);
  font-style:italic;
  font-weight:500;
  letter-spacing:0;
}

.grad-champagne{
  background:linear-gradient(100deg,var(--champagne-deep) 0%,var(--champagne-light) 45%,var(--champagne) 70%,var(--champagne-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.grad-silver{
  background:linear-gradient(135deg, var(--silver-lo) 0%, var(--silver-2) 22%, var(--silver-hi) 46%, var(--silver-1) 62%, var(--silver-3) 82%, var(--silver-lo) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* subtle metallic depth */
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.04)) drop-shadow(0 -1px 0 rgba(0,0,0,.4));
}

.f-brand{
  font-family:var(--f-brand);
  font-weight:400;
  letter-spacing:.14em;
}

.support{
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:rgba(236,231,221,.72);
  max-width:62ch;
}
.bg-bone .support{ color:rgba(11,11,12,.68); }

.hairline{
  height:1px;
  background:var(--hairline-noir);
  border:0;
}
.bg-bone .hairline{ background:var(--hairline-bone); }

.champagne-hairline{
  height:1px;
  background:linear-gradient(90deg,transparent,var(--champagne),transparent);
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--f-mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:17px 34px;
  border-radius:var(--radius-pill);
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out-quint),
             box-shadow var(--dur-normal) var(--ease-out-quint),
             background var(--dur-normal) var(--ease-standard);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.archive-cta{ font-size:13.5px; padding:19px 38px; }

.btn-solid{
  background:linear-gradient(135deg,var(--champagne-light),var(--champagne) 55%,var(--champagne-deep));
  color:#1b1400;
  font-weight:600;
  box-shadow:0 8px 24px -8px rgba(201,168,106,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-solid:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 16px 38px -8px rgba(224,190,133,.7), inset 0 1px 0 rgba(255,255,255,.5);
}

.btn-ghost{
  background:rgba(236,231,221,.04);
  border-color:var(--hairline-noir);
  color:var(--bone);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{
  border-color:var(--champagne);
  color:var(--champagne-light);
  transform:translateY(-2px);
}
.bg-bone .btn-ghost{
  border-color:var(--hairline-bone);
  color:var(--ink);
  background:rgba(11,11,12,.03);
}

/* ============ NAV RIBBON ============ */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:200;
  padding:16px 32px;
  transform:translateY(-100%);
  opacity:0;
  background:linear-gradient(180deg, rgba(10,10,11,.6) 0%, rgba(10,10,11,0) 100%);
  transition:transform .8s var(--ease-out-expo),
             opacity .5s var(--ease-standard),
             background .4s var(--ease-standard),
             border-color .4s var(--ease-standard);
  border-bottom:1px solid transparent;
}
.nav.is-visible{ transform:translateY(0); opacity:.62; }
.nav.is-visible:hover{ opacity:1; }
.nav.is-scrolled{
  opacity:1;
  background:rgba(10,10,11,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--hairline-noir);
  padding:12px 32px;
}
.nav.is-hidden-scroll{ transform:translateY(-100%); opacity:0; }

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--container);
  margin:0 auto;
  gap:32px;
}
.nav-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  cursor:pointer;
}
.nav-brand img{ height:34px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.nav-brand .name{
  font-family:var(--f-brand);
  font-weight:400;
  font-size:17px;
  letter-spacing:.22em;
  color:transparent;
  background:linear-gradient(135deg, var(--silver-2) 0%, var(--silver-hi) 30%, #ffffff 50%, var(--silver-hi) 70%, var(--silver-2) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-stroke:0.6px rgba(240,241,243,.55);
  white-space:nowrap;
  text-shadow:0 0 26px rgba(240,241,243,.28);
}
.nav-brand:hover .name{ -webkit-text-stroke-color:rgba(255,255,255,.85); }
@media (max-width:640px){ .nav-brand .name{ display:none; } }

.nav-links{
  display:flex; gap:34px; list-style:none; margin:0; padding:0;
  flex:1; justify-content:center;
}
.nav-links a{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(236,231,221,.78);
  position:relative;
  padding:6px 0;
  transition:color var(--dur-fast) var(--ease-standard);
}
.nav-links a:hover{ color:var(--bone-bright); }
.nav-links a::after{
  content:'';
  position:absolute; left:50%; bottom:-2px;
  width:0; height:1px; background:var(--silver-hi);
  transform:translateX(-50%);
  transition:width var(--dur-normal) var(--ease-out-quint);
}
.nav-links a:hover::after{ width:100%; }
@media (max-width:860px){ .nav-links{ display:none; } }

.nav-cta{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:11px 22px;
  border-radius:var(--radius-pill);
  border:1px solid var(--champagne);
  color:var(--champagne-light);
  transition:all var(--dur-normal) var(--ease-out-quint);
  white-space:nowrap;
}
.nav-cta:hover{ background:var(--champagne); color:#1b1400; transform:translateY(-1px); }
@media (max-width:540px){ .nav-cta{ display:none; } }

/* ---------- mobile nav (hamburger + slide-down panel) ---------- */
.nav-burger{
  display:none; flex-direction:column; justify-content:center; align-items:flex-end; gap:5px;
  width:32px; height:32px; background:transparent; border:0; padding:0; cursor:pointer;
  position:relative; z-index:210; flex-shrink:0;
}
.nav-burger span{
  display:block; width:100%; height:1.5px; background:var(--bone);
  transition:transform var(--dur-normal) var(--ease-standard), opacity var(--dur-normal) var(--ease-standard), width var(--dur-normal) var(--ease-standard);
}
.nav-burger span:nth-child(2){ width:70%; }
.nav-burger.is-open span{ width:100%; }
.nav-burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ opacity:0; }
.nav-burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
@media (max-width:860px){ .nav-burger{ display:flex; } }

.nav-mobile-menu{
  position:fixed; top:0; left:0; right:0;
  background:rgba(10,10,11,.97);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  padding:104px 32px 40px;
  display:flex; flex-direction:column; gap:32px;
  transform:translateY(-12px); opacity:0; visibility:hidden;
  transition:transform .4s var(--ease-out-expo), opacity .3s var(--ease-standard), visibility 0s linear .4s;
  z-index:199;
  border-bottom:1px solid var(--hairline-noir);
}
.nav-mobile-menu.is-open{
  transform:translateY(0); opacity:1; visibility:visible;
  transition:transform .4s var(--ease-out-expo), opacity .3s var(--ease-standard), visibility 0s;
}
.nav-mobile-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; }
.nav-mobile-links a{
  font-family:var(--f-display); font-weight:700; font-size:1.7rem; letter-spacing:-.01em; color:var(--bone);
  transition:color var(--dur-fast) var(--ease-standard);
}
.nav-mobile-links a:hover{ color:var(--champagne); }
.nav-cta-mobile{ display:inline-flex !important; align-self:flex-start; }
@media (min-width:861px){ .nav-mobile-menu{ display:none; } }
body.nav-menu-open{ overflow:hidden; }

/* ============ HERO ============ */
.hero{
  height:100svh;
  min-height:680px;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0;
  z-index:0;
}
.hero-media video{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  /* brighter, punchier — no dulling filter */
  filter:brightness(1.08) saturate(1.08) contrast(1.02);
  opacity:0;
  transition:opacity .9s var(--ease-out-expo);
}
.hero-media video.is-active{ opacity:1; }

/* Cute pill toggle for next hero video — bottom-right corner cluster */
.hero-video-toggle{
  position:absolute; right:36px; bottom:92px;
  z-index:6;
  display:flex; align-items:center; gap:10px;
  padding:10px 10px 10px 14px;
  background:rgba(10,10,11,.42);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid var(--hairline-noir);
  border-radius:var(--radius-pill);
  color:var(--bone-bright);
  cursor:pointer;
  opacity:0;
  transition:all var(--dur-normal) var(--ease-out-quint);
}
.hero-video-toggle:hover{
  border-color:var(--champagne);
  background:rgba(10,10,11,.7);
  transform:translateY(-3px);
  color:var(--champagne-light);
}
.hero-video-toggle .btn-arrow{
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--champagne-light),var(--champagne) 55%,var(--champagne-deep));
  color:#1b1400;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -4px rgba(201,168,106,.55);
  transition:transform var(--dur-normal) var(--ease-out-quint);
}
.hero-video-toggle:hover .btn-arrow{ transform:rotate(-4deg) scale(1.08); }
.hero-video-toggle .dots{ display:flex; gap:5px; }
.hero-video-toggle .dot{
  width:5px; height:5px; border-radius:50%;
  background:rgba(236,231,221,.35);
  transition:background var(--dur-fast);
}
.hero-video-toggle .dot.is-on{ background:var(--champagne-light); }
@media (max-width:720px){
  .hero-video-toggle{ right:16px; bottom:80px; padding:8px 10px 8px 12px; }
  .hero-video-toggle .btn-arrow{ width:28px; height:28px; }
}
.hero-scrim{
  position:absolute; inset:0;
  z-index:1;
  /* Asymmetric scrim: heavy on the LEFT (text side), transparent on the RIGHT (video stays clear) */
  background:
    linear-gradient(90deg, rgba(6,6,7,.82) 0%, rgba(6,6,7,.55) 22%, rgba(6,6,7,.22) 46%, rgba(6,6,7,0) 66%),
    linear-gradient(180deg, rgba(6,6,7,.28) 0%, rgba(6,6,7,0) 22%, rgba(6,6,7,0) 78%, rgba(6,6,7,.55) 100%);
}
.hero-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start;
  width:min(560px, 46vw);
  margin-left:clamp(24px, 6vw, 96px);
  text-align:left;
}
@media (max-width:820px){
  .hero-content{
    width:min(90vw, 560px);
    margin-left:24px;
    margin-right:24px;
  }
  .hero-scrim{
    background:
      linear-gradient(180deg, rgba(6,6,7,.72) 0%, rgba(6,6,7,.35) 40%, rgba(6,6,7,.2) 70%, rgba(6,6,7,.92) 100%);
  }
}
.hero-standard{
  font-family:var(--f-hero);
  font-weight:800;
  font-size:clamp(2.9rem, 5.6vw, 4.9rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--bone-bright);
  margin:0;
  opacity:0;
  transform:translateY(28px);
  text-shadow:0 4px 40px rgba(0,0,0,.45);
}
.hero-subhead{
  font-family:var(--f-accent);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.15rem, 2vw, 1.6rem);
  line-height:1.4;
  color:var(--bone-bright);
  margin:26px 0 0;
  max-width:44ch;
  opacity:0;
  transform:translateY(20px);
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}
.hero-subhead .hi{
  color:#FFD060;
  font-style:italic;
  font-weight:700;
  letter-spacing:.02em;
  text-shadow:0 0 22px rgba(255,208,96,.55), 0 0 60px rgba(255,208,96,.2);
}
.hero-actions{
  display:flex; gap:14px; margin-top:38px;
  opacity:0; transform:translateY(16px);
  flex-wrap:wrap;
}
.hero-scrollcue{
  position:absolute; bottom:36px; left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0;
  color:var(--champagne-light);
}
.hero-scrollcue .line{
  width:1px; height:44px;
  background:linear-gradient(180deg,var(--champagne),transparent);
  animation:scrollpulse 2.2s var(--ease-standard) infinite;
}
.hero-scrollcue span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
@keyframes scrollpulse{
  0%{ transform:scaleY(.4); opacity:.3; transform-origin:top; }
  50%{ transform:scaleY(1); opacity:1; transform-origin:top; }
  100%{ transform:scaleY(.4); opacity:.3; transform-origin:top; }
}

/* mute toggle — reused across all video blocks */
.mute-btn{
  position:absolute;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(10,10,11,.55);
  border:1px solid var(--hairline-noir);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--bone);
  z-index:5;
  transition:background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-out-quint), border-color var(--dur-fast);
}
.mute-btn:hover{ background:rgba(10,10,11,.8); border-color:var(--champagne); transform:scale(1.06); }
.mute-btn svg{ width:18px; height:18px; }
.mute-btn .icon-off{ display:none; }
.mute-btn.is-muted .icon-on{ display:none; }
.mute-btn.is-muted .icon-off{ display:block; }

.hero-mute{ bottom:36px; right:36px; }
@media (max-width:720px){ .hero-mute{ bottom:24px; right:16px; width:38px; height:38px; } }

/* ============ SECTION HEADER ============ */
.section-head{ margin-bottom:64px; }
.section-head .h2{ max-width:16ch; }
.section-head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap;
}

/* ============ BEST WORK COVERFLOW ============ */
.coverflow{
  position:relative;
  height:min(80vh,720px);
  display:flex; align-items:center; justify-content:center;
  perspective:1600px;
  overflow:hidden;
}
.cf-track{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.cf-card{
  position:absolute;
  /* Height-driven: the card fills the coverflow box's height (which itself
     scales with viewport height, see .coverflow) and width is derived from
     the 9:16 ratio — matching the actual video files exactly, so nothing
     is ever cropped. The 64px floor reserves room for the nav arrows so
     they never sit on top of the card even on narrow phones. */
  height:100%;
  aspect-ratio:9/16;
  max-width:calc(100% - 64px);
  border-radius:var(--radius-card);
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--hairline-noir);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transition:transform .7s var(--ease-out-expo), filter .7s var(--ease-standard), opacity .7s var(--ease-standard);
  cursor:pointer;
}
.cf-card video{ width:100%; height:100%; object-fit:cover; }
.cf-card .cf-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,0) 45%,rgba(10,10,11,.9) 100%);
}
.cf-card .cf-label{
  position:absolute; left:20px; bottom:20px; right:20px;
  z-index:2;
}
.cf-card .cf-label .num{ font-family:var(--f-mono); font-size:11px; color:var(--champagne-light); letter-spacing:.1em; }
.cf-card .cf-label .name{ font-family:var(--f-display); font-weight:800; font-size:1.4rem; margin-top:4px; }
.cf-card .cf-expand{
  position:absolute; top:16px; right:16px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:rgba(10,10,11,.55); border:1px solid var(--hairline-noir);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:translateY(-6px);
  transition:opacity var(--dur-normal), transform var(--dur-normal);
}
.cf-card.is-center .cf-expand{ opacity:1; transform:translateY(0); }
.cf-card .cf-mute{ width:36px; height:36px; bottom:16px; right:16px; left:auto; top:auto; opacity:0; }
.cf-card.is-center .cf-mute{ opacity:1; }

.cf-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--hairline-noir);
  background:rgba(20,20,23,.6);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:200; color:var(--bone);
  transition:all var(--dur-fast) var(--ease-out-quint);
}
.cf-nav:hover{ border-color:var(--champagne); color:var(--champagne-light); }
.cf-prev{ left:4px; }
.cf-next{ right:4px; }
@media (max-width:520px){
  .cf-nav{ width:28px; height:28px; }
  .cf-nav svg{ width:12px; height:12px; }
  .cf-prev{ left:2px; }
  .cf-next{ right:2px; }
}

/* Best Work section overrides */
.bw-heading{
  font-size:clamp(3rem,6.5vw,6rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
}
.bw-accent{
  font-family:var(--f-accent);
  font-style:italic;
  font-weight:500;
  letter-spacing:0;
  background:linear-gradient(100deg,var(--champagne-deep) 0%,var(--champagne-light) 45%,var(--champagne) 70%,var(--champagne-deep) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.cf-hint{
  text-align:center;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(236,231,221,.38);
  margin:0 0 40px;
}

.cf-labels{
  display:flex; justify-content:center; gap:32px; margin-top:48px;
  flex-wrap:wrap;
}
.cf-labels button{
  background:none; border:0; cursor:pointer;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(236,231,221,.4);
  padding:6px 0; position:relative;
  transition:color var(--dur-normal);
}
.cf-labels button.is-active{ color:var(--champagne-light); }
.cf-labels button.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--champagne);
}

/* cf-card native fullscreen — same video element, no duplicate audio */
.cf-card:fullscreen{ width:100vw; height:100vh; border-radius:0; background:#000; }
.cf-card:-webkit-full-screen{ width:100vw; height:100vh; border-radius:0; background:#000; }
.cf-card:fullscreen video{ object-fit:contain; }
.cf-card:-webkit-full-screen video{ object-fit:contain; }

/* In fullscreen the seek bar owns the bottom edge as a full-width strip,
   so the label + mute icon move up to the top to stay clear of it. */
.cf-card:fullscreen .cf-label,
.cf-card:-webkit-full-screen .cf-label{ top:20px; bottom:auto; left:20px; right:110px; }
.cf-card:fullscreen .cf-mute,
.cf-card:-webkit-full-screen .cf-mute{ top:16px; bottom:auto; right:60px; left:auto; opacity:1; }
.cf-card:fullscreen .cf-expand,
.cf-card:-webkit-full-screen .cf-expand{ opacity:1; transform:none; }

.cf-card .fs-seek{
  position:absolute; left:0; right:0; bottom:0;
  z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:36px 20px 18px;
  background:linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,.82) 65%, rgba(10,10,11,.92) 100%);
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard);
}
.cf-card:fullscreen .fs-seek,
.cf-card:-webkit-full-screen .fs-seek{
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.cf-card:fullscreen .cf-mute{ opacity:1; }
.cf-card:-webkit-full-screen .cf-mute{ opacity:1; }

/* ============ GET YOUR AD ============ */
.kinetic-wrap{ text-align:left; padding-top:20px; padding-bottom:20px; }
.kinetic-heading{
  font-family:var(--f-accent);
  font-style:italic;
  font-weight:600;
  font-size:clamp(3.2rem,8vw,7rem);
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 28px;
}
.kinetic-line{
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:800;
  font-family:var(--f-display);
  line-height:1.05;
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:.28em;
  align-items:baseline;
}
.kinetic-word{
  font-family:var(--f-accent);
  font-style:italic;
  font-weight:500;
  color:var(--ink);
  position:relative;
  display:inline-block;
  min-width:6ch;
  text-align:left;
}
.kinetic-cursor{
  display:inline-block; width:3px; height:.85em;
  background:var(--champagne-deep);
  margin-left:6px; transform:translateY(3px);
  animation:blink 1s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============ THE CAST ============ */
.cast-row{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
@media (max-width:1100px){ .cast-row{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .cast-row{ grid-template-columns:repeat(2,1fr); } }

.cast-card{
  position:relative;
  aspect-ratio:3/4.4;
  border-radius:var(--radius-card);
  overflow:hidden;
  cursor:pointer;
  background:var(--panel);
  border:1px solid var(--hairline-noir);
  box-shadow:0 20px 40px -18px rgba(0,0,0,.7);
  transition:box-shadow .5s var(--ease-out-quint);
  will-change:transform;
}
.cast-card:hover{ box-shadow:0 30px 50px -20px rgba(0,0,0,.6); }
.cast-card img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out-quint); }
.cast-card:hover img{ transform:scale(1.06); }
.cast-card .cf-veil{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(10,10,11,.94) 100%); }
.cast-info{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; }
.cast-info .pillar{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--champagne-light); }
.cast-info .name{ font-family:var(--f-display); font-weight:800; font-size:1.5rem; margin-top:4px; }
.cast-info .tag{ font-size:.8rem; color:rgba(236,231,221,.7); margin-top:4px; font-style:italic; font-family:var(--f-accent); }

/* perks panel */
.perks{ margin-top:110px; text-align:center; }
.perks-head{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.8rem,4vw,3rem); margin-bottom:56px; }
.perks-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px 32px;
  text-align:left; max-width:1000px; margin:0 auto;
}
@media (max-width:800px){ .perks-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .perks-grid{ grid-template-columns:1fr; } }
.perk{ border-top:1px solid var(--hairline-noir); padding-top:16px; }
.perk .t{ font-family:var(--f-display); font-weight:700; color:var(--champagne-light); font-size:1.05rem; margin-bottom:6px; }
.perk .d{ font-size:.92rem; color:rgba(236,231,221,.65); }
.perks-spine{
  margin-top:64px; font-family:var(--f-accent); font-style:italic; font-size:clamp(1.2rem,2.4vw,1.6rem); color:var(--bone-bright);
}
.perks-link{ margin-top:20px; display:inline-block; color:var(--champagne); font-family:var(--f-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.perks-link-big{
  font-family:var(--f-accent); font-style:italic; font-weight:600;
  font-size:clamp(1.15rem,2vw,1.5rem); letter-spacing:0; text-transform:none;
  color:var(--champagne-light);
}
.bg-bone .perk{ border-top-color:var(--hairline-bone); }
.bg-bone .perk .d{ color:rgba(11,11,12,.62); }
.bg-bone .perks-spine{ color:var(--ink); }

.cast-eyebrow-big{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.3rem,2.6vw,2rem); letter-spacing:.03em; color:var(--champagne);
  margin:0 0 18px;
}
.cast-details{ max-width:780px; margin:72px 0 0; }
.cast-intro{ max-width:780px; margin:0 0 64px; }
.cast-intro-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; }
.cast-intro-list li{ font-size:.92rem; color:rgba(236,231,221,.75); padding-left:20px; position:relative; }
.cast-intro-list li::before{ content:'—'; position:absolute; left:0; color:var(--champagne); }
.cast-beyond{ text-align:center; max-width:720px; margin-left:auto; margin-right:auto; }
.cast-beyond .perks-head{
  font-family:var(--f-hero); font-weight:600; font-style:italic;
  font-size:clamp(1.9rem,4vw,2.8rem); letter-spacing:-.01em;
}
.cast-beyond .support{
  margin-top:20px; font-family:var(--f-accent); font-style:italic;
  font-size:clamp(1.05rem,1.6vw,1.2rem); color:rgba(11,11,12,.7);
}
.bg-bone .perks-link-big{ color:var(--champagne-deep); }
.cast-beyond-highlight{
  margin:36px auto 0; max-width:600px;
  padding:30px 36px;
  background:linear-gradient(135deg,var(--champagne-light),var(--champagne) 55%,var(--champagne-deep));
  border-radius:var(--radius-card);
  box-shadow:0 22px 44px -22px rgba(139,111,58,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.cast-beyond-highlight .perks-link-big{ margin-top:0; color:#1b1400; }

.about-body{ max-width:760px; display:grid; gap:18px; }

/* ============ MODAL / CASTING SHEET ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:600;
  background:rgba(6,6,7,.86);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; padding:24px;
  transition:opacity var(--dur-moderate) var(--ease-standard);
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{
  width:min(1080px,100%);
  max-height:88vh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--hairline-noir);
  border-radius:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  transform:scale(.94) translateY(16px);
  opacity:0;
  transition:transform var(--dur-moderate) var(--ease-out-expo), opacity var(--dur-moderate);
}
.modal-overlay.is-open .modal{ transform:scale(1) translateY(0); opacity:1; }
@media (max-width:820px){ .modal{ grid-template-columns:1fr; } }

.modal-close{
  position:absolute; top:20px; right:20px; z-index:20;
  width:40px; height:40px; border-radius:50%;
  background:rgba(10,10,11,.6); border:1px solid var(--hairline-noir);
  color:var(--bone); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.modal-profile{ padding:52px 44px; position:relative; }
.modal-profile .pillar{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--champagne-light); }
.modal-profile .name{ font-family:var(--f-display); font-weight:900; font-size:clamp(2.2rem,5vw,3.2rem); margin-top:10px; }
.modal-profile .tag{ font-family:var(--f-accent); font-style:italic; font-size:1.2rem; margin-top:8px; color:var(--bone-bright); }
.modal-profile .bio{ margin-top:22px; color:rgba(236,231,221,.75); font-size:.98rem; max-width:46ch; }
.modal-profile .brands-label{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--champagne); margin-top:26px; }
.modal-profile .brands-big{ font-family:var(--f-display); font-weight:800; margin-top:10px; font-size:1.5rem; letter-spacing:-.01em; color:var(--champagne-light); }
.modal-stats{ display:grid; gap:16px; margin-top:28px; border-top:1px solid var(--hairline-noir); padding-top:22px; }
.modal-stats .stat .k{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(236,231,221,.4); }
.modal-stats .stat .v-gold{ margin-top:4px; font-family:var(--f-accent); font-style:italic; font-size:1.1rem; color:var(--champagne-light); }
.modal-book{ margin-top:30px; }

.orbit-wrap{
  position:relative;
  background:radial-gradient(circle at 50% 45%,rgba(201,168,106,.16),transparent 62%), var(--ink);
  height:560px;
  padding:24px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.orbit-wrap.is-dragging{ cursor:grabbing; }
.orbit-stage{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
}
.orbit-tile{
  position:absolute; top:50%; left:50%;
  border-radius:14px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(236,231,221,.18);
  box-shadow:0 20px 30px -14px rgba(0,0,0,.7);
  transition:box-shadow .4s var(--ease-standard), border-color .4s;
}
.orbit-tile.is-front{
  border:2px solid var(--champagne);
  box-shadow:0 30px 60px -14px rgba(0,0,0,.8), 0 0 0 6px rgba(201,168,106,.12);
}

/* ============ METHOD ============ */
.method-wrap{ display:grid; grid-template-columns:.9fr 1.4fr; gap:56px; align-items:start; }
@media (max-width:820px){ .method-wrap{ grid-template-columns:1fr; } }
.method-list{ display:flex; flex-direction:column; }
.method-step{
  display:grid; grid-template-columns:52px 1fr; gap:18px;
  padding:18px 0; border-top:1px solid var(--hairline-bone);
  cursor:default;
}
.method-step:last-child{ border-bottom:1px solid var(--hairline-bone); }
.method-step .n{ font-family:var(--f-mono); font-size:12px; color:var(--champagne-deep); padding-top:3px; }
.method-step .t{ font-family:var(--f-display); font-weight:800; font-size:1.15rem; }
.method-step .d{ font-size:.9rem; color:rgba(11,11,12,.6); margin-top:6px; max-width:52ch; }

/* ============ SERVICES — bone intro, noir category rows, one bone breather ============ */
.services-headline{ font-size:clamp(3.3rem,6vw,5.4rem); }
.services-champagne-clause{ color:#8B6F3A; font-style:normal; }
.services-champagne-clause .stay-word{
  font-family:var(--f-accent); font-style:italic; font-size:.7em;
}
.services-intro-support{
  font-family:var(--f-accent); font-style:italic; font-size:clamp(1.2rem,1.7vw,1.4rem);
}
.bg-bone .services-intro-support{ color:rgba(11,11,12,.85); }
.services-beyond .h2{ font-size:clamp(2.1rem,4vw,3.2rem); }
.services-beyond strong{ font-weight:800; }
.services-cta-wrap{ text-align:center; margin-top:40px; }
.services-cta-wrap .btn{ font-weight:800; }

/* One category "locks" while scrolling until the next one takes over */
.services-page{ scroll-snap-type:y proximity; }

/* Category editorial rows (noir) */
.cat-rows{ overflow:hidden; }
.cat-row{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  border-top:1px solid var(--hairline-noir);
  padding:64px 0;
  scroll-snap-align:start;
}
.cat-row:first-child{ border-top:none; }
.cat-row-ghost{
  position:absolute; top:50%; left:0; transform:translate(-32%,-50%);
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(14rem,26vw,26rem); line-height:1;
  color:rgba(236,231,221,.08);
  z-index:0; pointer-events:none; user-select:none; white-space:nowrap;
}
.cat-row-inner{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:64px;
  width:100%; min-width:0;
}
.cat-row.is-reverse .cat-row-inner{ flex-direction:row-reverse; }
.cat-row-text{ flex:1; min-width:0; align-self:flex-start; padding-top:12px; }
.cat-row-media{ flex:1; min-width:0; }
.cat-row-name{
  font-family:var(--f-hero); font-weight:700; font-style:normal;
  text-transform:uppercase; letter-spacing:.03em;
  background:linear-gradient(100deg,var(--champagne-deep) 0%,var(--champagne-light) 45%,var(--champagne) 70%,var(--champagne-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:clamp(2.1rem,3.8vw,3.2rem); margin-top:0; text-align:left;
}
.cat-row-desc{
  margin-top:18px; font-family:var(--f-accent); font-style:italic; font-size:1.1rem;
  color:rgba(236,231,221,.75); max-width:40ch; text-align:left;
}
.cat-row-list{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:9px; max-width:40ch; }
.cat-row-list li{
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(236,231,221,.4); transition:color .35s ease, text-shadow .35s ease, transform .35s ease, font-weight .35s ease;
}
.cat-row-list li.is-active{
  color:var(--champagne-light); text-shadow:0 0 14px rgba(201,168,106,.55); font-weight:700; transform:translateX(5px);
}
@media (max-width:820px){
  .cat-row{ min-height:auto; padding:48px 0; }
  .cat-row-inner, .cat-row.is-reverse .cat-row-inner{ flex-direction:column; gap:28px; }
  .cat-row-ghost{ font-size:clamp(8rem,32vw,14rem); left:50%; transform:translate(-50%,-50%); }
  .cat-row-text{ align-self:auto; padding-top:0; }
  .cat-row-name, .cat-row-desc, .cat-row-list{ text-align:left; }
}

/* ---------------- Endless marquee carousel (reusable, no breaks) ---------------- */
.endless-carousel{
  position:relative; width:100%; max-width:460px; margin:0 auto;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.endless-track{
  display:flex; align-items:flex-start; gap:18px; width:max-content;
  animation:endlessScroll 32s linear infinite;
}
.endless-carousel.is-reverse .endless-track{ animation-direction:reverse; }
@keyframes endlessScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.endless-tile{ flex-shrink:0; width:220px; }
.endless-tile img{
  width:100%; aspect-ratio:3/4; object-fit:cover; display:block;
  border-radius:14px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6);
  user-select:none; -webkit-user-drag:none;
}
/* poster/collage stills (the "Ad Campaign" bonus cards, plus any other
   full ad-layout image like Fashion's Campaign Stills board) are not
   crop-safe photos — show them whole instead of cover-cropping the edges */
.endless-tile.is-poster img{ object-fit:contain; background:var(--ink); }
.endless-tile figcaption{
  margin-top:14px; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--champagne-light); text-align:left;
}
.endless-tile.is-ad figcaption{
  display:inline-block; padding:5px 12px; border:1px solid var(--champagne); border-radius:999px;
  background:rgba(201,168,106,.1);
}
@media (max-width:600px){ .endless-tile{ width:160px; } }

/* FAQ noir override (Services page only — About page keeps the bone list) */
.faq-heading{ font-size:clamp(3rem,6vw,4.8rem) !important; }
#faq .method-step{ border-top-color:var(--hairline-noir); grid-template-columns:26px 1fr; gap:12px; }
#faq .method-step:last-child{ border-bottom-color:var(--hairline-noir); }
#faq .method-step .n{ font-size:8.4px; padding-top:4px; }
#faq .method-step .d{ color:rgba(236,231,221,.65); }

/* ============ REALISM ============ */
.realism-frame{
  position:relative;
  max-width:560px; margin:0 auto;
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid var(--hairline-noir);
  cursor:none;
  touch-action:none;
}
.realism-frame img{ width:100%; display:block; }
.lens{
  position:absolute; width:220px; height:220px; border-radius:50%;
  border:2px solid var(--champagne);
  box-shadow:0 0 0 4px rgba(201,168,106,.15), 0 20px 40px rgba(0,0,0,.5);
  pointer-events:none;
  background-repeat:no-repeat;
  display:none;
}
.realism-frame.is-hover .lens{ display:block; }
.lens-ring{
  position:absolute; border:1px dashed rgba(201,168,106,.5); border-radius:50%;
  width:260px; height:260px; margin:-20px 0 0 -20px;
  animation:spin 20s linear infinite; pointer-events:none; display:none;
}
.realism-frame.is-hover .lens-ring{ display:block; }

/* ============ CTA + FOOTER ============ */
.cta-section{ position:relative; overflow:hidden; }
.cta-aura{
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:900px; height:600px;
  background:radial-gradient(circle,rgba(201,168,106,.18),transparent 65%);
  pointer-events:none;
}
.cta-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start; position:relative; z-index:2; }
@media (max-width:900px){ .cta-grid{ grid-template-columns:1fr; } }
.cta-head{ font-size:clamp(2.4rem,5.2vw,4.2rem); line-height:1.05; }
.cta-actions{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }

.cta-form{ display:grid; gap:16px; }
.cta-form .row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .cta-form .row2{ grid-template-columns:1fr; } }
.field{ position:relative; }
.field label{
  position:absolute; top:-9px; left:14px; padding:0 6px;
  background:var(--ink); font-family:var(--f-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(236,231,221,.5);
}
.field input,.field select,.field textarea{
  width:100%; background:rgba(236,231,221,.03); border:1px solid var(--hairline-noir);
  border-radius:10px; padding:18px 16px 12px; color:var(--bone); font-family:var(--f-body); font-size:.95rem;
  transition:border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast);
}
.field textarea{ min-height:96px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--champagne); background:rgba(201,168,106,.05);
}
/* The select's closed box already matches the theme above — but the
   dropdown popup list is native OS/browser chrome, outside normal CSS
   control. color-scheme tells the browser to draw that popup in a dark
   palette instead of its default bright white; the option colors below
   are a Chromium/Firefox-supported extra that tints it toward the
   brand's noir/gold instead of plain dark grey. */
.field select{ color-scheme:dark; cursor:pointer; }
.field select option{ background:var(--ink); color:var(--champagne-light); }

.footer{ margin-top:110px; padding-top:36px; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:36px; }
.footer-logo{ height:30px; }
.footer-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(236,231,221,.6); }
.footer-links a:hover{ color:var(--champagne-light); }
.footer-social{ display:flex; gap:14px; }
.footer-social a{ width:38px; height:38px; border:1px solid var(--hairline-noir); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ border-color:var(--champagne); color:var(--champagne-light); }
.footer-bottom{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(236,231,221,.4); padding:26px 0; text-align:center; }
.placeholder-note{ font-size:10px; letter-spacing:.06em; text-transform:none; color:rgba(201,168,106,.65); margin-top:6px; }

/* ---------- reveal helper ---------- */
.reveal{ opacity:0; transform:translateY(36px); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-hook,.hero-name,.hero-method,.hero-actions{ opacity:1 !important; transform:none !important; }
}

/* ============ WORK PAGE — masonry ============ */
.work-hero{ padding:180px 0 60px; text-align:center; }
.work-hero .h2{ margin:0 auto; font-weight:900; font-size:clamp(3.1rem,5.7vw,5.1rem); }

.tab-switch{ display:flex; gap:12px; justify-content:center; margin:0 0 48px; }
.tab-btn{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(236,231,221,.55); background:transparent; border:1px solid var(--hairline-noir);
  border-radius:999px; padding:12px 28px; cursor:pointer; transition:all var(--dur-fast) var(--ease-standard);
}
.tab-btn:hover{ color:var(--bone); border-color:rgba(236,231,221,.35); }
.tab-btn.is-active{ color:var(--ink); background:var(--champagne); border-color:var(--champagne); }

.work-panel{ display:none; }
.work-panel.is-active{ display:block; }

/* Pinterest-style masonry marquee — pure CSS keyframe scroll, no JS.
   Each column is an independent flex-column, doubled tile list, looping
   via translateY(-50%) so it never desyncs or needs measurement. */
.img-marquee{
  display:flex; gap:14px;
  height:220vh;
  padding:0 24px;
  overflow:hidden;
}
.img-col{ position:relative; flex:1; min-width:0; overflow:hidden; }
.img-col:nth-child(4){ }
@media (max-width:1000px){ .img-col:nth-child(4){ display:none; } }
@media (max-width:640px){ .img-col:nth-child(3){ display:none; } }

.img-col-track{
  display:flex; flex-direction:column; gap:14px;
  animation:marqueeUp linear infinite;
}
.img-col.dir-down .img-col-track{ animation-name:marqueeDown; }
@keyframes marqueeUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes marqueeDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
.img-col:hover .img-col-track{ animation-play-state:paused; }

.img-tile{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid rgba(236,231,221,.08);
  cursor:pointer;
  transition:transform .4s var(--ease-standard);
}
.img-tile:hover{ transform:scale(1.03); }
.img-tile img{ width:100%; height:100%; display:block; object-fit:cover; }
.img-cap{
  position:absolute; inset:auto 0 0 0; padding:14px;
  background:linear-gradient(180deg,transparent,rgba(10,10,11,.88));
  opacity:0; transition:opacity .3s var(--ease-standard);
}
.img-tile:hover .img-cap{ opacity:1; }
.img-cap .t{ font-family:var(--f-display); font-weight:700; font-size:.92rem; color:var(--bone-bright); }
.img-cap .tag{ font-family:var(--f-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--champagne-light); margin-top:4px; }

.masonry-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:0 0 140px;
}
@media (max-width:1000px){ .masonry-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .masonry-grid{ grid-template-columns:1fr; } }

.masonry-item{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--radius-card);
  overflow:hidden;
  border:1px solid var(--hairline-noir);
  background:var(--panel);
}
.masonry-item video{ width:100%; height:100%; display:block; object-fit:cover; }
.masonry-item .card-controls{
  position:absolute; right:12px; bottom:12px; z-index:4;
  display:flex; gap:8px;
}
.masonry-item .fs-btn{
  position:static;
  width:38px; height:38px;
}
.masonry-item .mute-btn{ position:static; width:38px; height:38px; }
.masonry-item .mi-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,10,11,0) 60%,rgba(10,10,11,.55) 100%);
  pointer-events:none;
}
.masonry-item:fullscreen{ display:flex; align-items:center; justify-content:center; background:#000; }
.masonry-item:-webkit-full-screen{ display:flex; align-items:center; justify-content:center; background:#000; }
.masonry-item:fullscreen video{ width:auto; height:100%; max-width:100%; object-fit:contain; }
.masonry-item:-webkit-full-screen video{ width:auto; height:100%; max-width:100%; object-fit:contain; }
/* In fullscreen the seek bar owns the bottom edge as a full-width strip
   (like a native player's control bar), so the mute/fullscreen icons move
   up to the top-right to stay clear of it. */
.masonry-item:fullscreen .card-controls{ top:28px; right:28px; bottom:auto; }
.masonry-item:-webkit-full-screen .card-controls{ top:28px; right:28px; bottom:auto; }

.masonry-item .fs-seek{
  position:absolute; left:0; right:0; bottom:0;
  z-index:5;
  display:flex; align-items:center; gap:12px;
  padding:36px 20px 18px;
  background:linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,.82) 65%, rgba(10,10,11,.92) 100%);
  opacity:0; pointer-events:none; transform:translateY(6px);
  transition:opacity var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard);
}
.masonry-item:fullscreen .fs-seek,
.masonry-item:-webkit-full-screen .fs-seek{
  opacity:1; pointer-events:auto; transform:translateY(0);
}
.fs-seek-range{ flex:1; accent-color:var(--champagne); cursor:pointer; }
.fs-seek-time{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:rgba(236,231,221,.85);
  min-width:34px; text-align:center;
}

/* ============ WORK PAGE — image lightbox (fullscreen + zoom slider) ============ */
.img-lightbox{
  position:fixed; inset:0; z-index:700;
  background:rgba(6,6,7,.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-moderate) var(--ease-standard);
}
.img-lightbox.is-open{ opacity:1; pointer-events:auto; }
.img-lightbox-stage{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  overflow:auto;
  cursor:grab;
}
.img-lightbox-stage.is-dragging{ cursor:grabbing; }
.img-lightbox-stage img{
  max-width:92vw; max-height:88vh;
  object-fit:contain;
  transition:transform .3s var(--ease-standard), opacity .3s var(--ease-standard);
  transform-origin:center center;
  transform:scale(.94);
  opacity:0;
  user-select:none;
  -webkit-user-drag:none;
  flex-shrink:0;
  margin:auto;
}
.img-lightbox.is-open .img-lightbox-stage img{ transform:scale(1); opacity:1; }
/* Zoom resizes the image's real box (width/height) rather than a CSS
   transform, so the stage's overflow:auto actually has something to
   scroll/drag through — a transform:scale() alone doesn't grow scrollWidth. */
.img-lightbox-stage img.is-zoomed{ max-width:none; max-height:none; height:auto; transition:none; }
.img-lightbox-close{
  position:absolute; top:28px; right:32px; z-index:10;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--hairline-noir); background:rgba(20,20,23,.7);
  color:var(--bone); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.img-lightbox-zoom{
  position:absolute; left:50%; bottom:32px; transform:translateX(-50%); z-index:10;
  display:flex; align-items:center; gap:12px;
  background:rgba(20,20,23,.75); border:1px solid var(--hairline-noir);
  padding:12px 20px; border-radius:999px;
  color:var(--bone);
  backdrop-filter:blur(8px);
}
.img-lightbox-zoom input[type="range"]{ width:180px; accent-color:var(--champagne); }
.img-lightbox-zoomlabel{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:rgba(236,231,221,.7); min-width:40px; text-align:right;
}

/* ============ PRELOADER ============ */
html.is-preloading{ overflow:hidden; }

.preloader{
  position:fixed; inset:0;
  z-index:900;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  isolation:isolate;
}
.preloader::before{
  /* subtle vignette so silver text pops */
  content:'';
  position:absolute; inset:-10%;
  background:radial-gradient(60% 55% at 50% 50%, transparent 0%, transparent 55%, rgba(0,0,0,.8) 100%);
  pointer-events:none;
}
.preloader.is-done{
  opacity:0;
  pointer-events:none;
  transition:opacity .8s var(--ease-out-expo);
}

.pre-stage{
  position:relative;
  width:100%; max-width:1100px;
  padding:0 32px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}

.pre-tagline{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%, -50%);
  font-family:var(--f-accent);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.9rem, 3.8vw, 2.9rem);
  color:var(--bone-bright);
  letter-spacing:.005em;
  white-space:nowrap;
  opacity:0;
  text-shadow:0 2px 30px rgba(255,255,255,.08);
}
@media (max-width:640px){
  .pre-tagline{ white-space:normal; max-width:82vw; line-height:1.3; font-size:clamp(1.5rem, 6vw, 2.2rem); }
}

/* ---- Preloader logo video ---- */
.pre-logo-video{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  background:#000;
  z-index:1;
}
/* Mobile loads a native 9:16 source (see the <source media> in the
   markup) with generous margin already built in around the logo, so a
   plain cover fill here only ever trims that margin — never the mark
   or wordmark itself. */
@media (max-width:640px){
  .pre-logo-video{ object-fit:cover; }
}

@media (prefers-reduced-motion: reduce){
  .preloader{ display:none; }
  html.is-preloading{ overflow:auto; }
}

@media (prefers-reduced-motion: reduce){
  .preloader{ display:none; }
  html.is-preloading{ overflow:auto; }
}

/* ============ ABOUT PAGE — aperture intro + five-act motion ============ */
.aperture-overlay{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  clip-path:circle(150% at 50% 50%);
  transition:clip-path .6s cubic-bezier(.6,0,.35,1);
}
.aperture-overlay.is-opening{ clip-path:circle(0% at 50% 50%); }
.aperture-svg{ width:min(46vw,320px); height:min(46vw,320px); }

/* 1. Opener */
.about-opener{ padding-bottom:60px; }
.eyebrow-big{
  font-family:var(--f-hero); font-weight:700; font-style:normal;
  text-transform:none; letter-spacing:.01em;
  font-size:clamp(2.1rem,3.8vw,3.2rem); margin-bottom:28px;
}
.eyebrow-big::before{ display:none; }
.about-opener .container{ max-width:820px; }
.opener-phrase{
  position:relative; display:block; margin-top:10px; min-height:1.25em;
  font-family:var(--f-hero); font-weight:700; font-size:clamp(2rem,4.4vw,3.2rem);
  color:var(--bone-bright);
}
.opener-typed{ white-space:pre; }
.strike{
  position:absolute; left:0; top:50%; width:100%; height:2px;
  background:var(--champagne); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease-out-quint);
}
.strike.is-drawn{ transform:scaleX(1); }
.opener-italic{
  margin-top:28px; font-family:var(--f-accent); font-style:italic;
  font-size:clamp(1.3rem,2.6vw,1.8rem); color:var(--bone-bright);
  opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s var(--ease-out-quint);
}
.opener-italic.is-visible{ opacity:1; transform:translateY(0); }
.opener-support{
  margin-top:18px; opacity:0; transform:translateY(14px);
  transition:opacity .7s ease, transform .7s var(--ease-out-quint);
}
.opener-support.is-visible{ opacity:1; transform:translateY(0); }

/* 2. Origin */
.about-origin{ position:relative; overflow:hidden; }
.origin-grain{
  position:absolute; inset:-20%; z-index:0; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation:grainDrift 9s steps(8) infinite;
}
@keyframes grainDrift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-2%,1%); }
  50%{ transform:translate(1%,-2%); } 75%{ transform:translate(-1%,2%); }
  100%{ transform:translate(0,0); }
}
.about-origin .container{ position:relative; z-index:1; max-width:760px; }
.origin-line{ margin-top:28px; color:rgba(236,231,221,.85); line-height:1.5; }
.origin-line:first-of-type{ margin-top:20px; }

/* 3. Method twist */
.method-twist{ margin-top:96px; text-align:center; }
.method-twist-stage{ position:relative; min-height:60px; display:flex; align-items:center; justify-content:center; }
.method-twist-row{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; position:relative; z-index:2; }
.method-twist-step{ min-width:90px; }
.method-twist-step .n{ font-family:var(--f-mono); font-size:12px; color:var(--champagne-deep); }
.method-twist-step .t{ font-family:var(--f-display); font-weight:800; font-size:1.05rem; margin-top:4px; }
.method-twist-oneword{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.6); z-index:1;
  font-family:var(--f-display); font-weight:900; text-transform:uppercase; letter-spacing:.02em;
  font-size:clamp(2.2rem,5vw,3.8rem); white-space:nowrap;
  background:linear-gradient(100deg,var(--champagne-deep) 0%,var(--champagne-light) 45%,var(--champagne) 70%,var(--champagne-deep) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0;
}
.method-twist-bar{
  height:6px; width:100%; max-width:520px; margin:24px auto 0;
  background:linear-gradient(90deg,var(--champagne-deep),var(--champagne-light) 50%,var(--champagne-deep));
  border-radius:999px; transform:scaleX(0); opacity:0; transform-origin:center;
  box-shadow:0 0 0 rgba(201,168,106,0);
}
.method-twist-bar.is-pulsing{ animation:barPulse 1.8s ease-in-out infinite; }
@keyframes barPulse{
  0%,100%{ box-shadow:0 0 18px 2px rgba(201,168,106,.35); }
  50%{ box-shadow:0 0 30px 6px rgba(201,168,106,.6); }
}
.method-twist-copy{ margin-top:52px; max-width:620px; margin-left:auto; margin-right:auto; display:grid; gap:16px; }
.method-twist-copy p{ font-size:1.05rem; color:rgba(11,11,12,.7); }
.method-twist-final{
  font-family:var(--f-accent); font-style:italic; font-weight:700; color:var(--ink) !important;
  font-size:clamp(1.4rem,2.6vw,1.8rem) !important;
}
@media (max-width:700px){ .method-twist-row{ gap:16px; } .method-twist-bar{ margin-top:24px; } }

/* 4. Founder line */
.founder-line{
  text-align:center; max-width:760px; margin:0 auto;
  font-family:var(--f-accent); font-style:italic; font-size:clamp(1.3rem,2.6vw,1.7rem);
  color:rgba(236,231,221,.85); line-height:1.6;
}
.founder-name{ position:relative; display:inline-block; color:var(--bone-bright); font-weight:600; font-style:normal; font-family:var(--f-display); }
.founder-underline{ position:absolute; left:0; bottom:-6px; width:100%; height:14px; overflow:visible; }
.founder-underline path{ fill:none; stroke:var(--champagne); stroke-width:2; }

/* 5. Close */
.about-close-aura{ animation:auraPulse 4s ease-in-out infinite; }
@keyframes auraPulse{
  0%,100%{ opacity:1; transform:translateX(-50%) scale(1); }
  50%{ opacity:.7; transform:translateX(-50%) scale(1.08); }
}