/* ============================================================
   OFFMENU FRAMES — SINGLE PAGE SITE STYLESHEET
   ============================================================ */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; width:100%; overflow-x:hidden; }

:root{
  --bg:        #070E24;
  --bg-soft:   #0C1638;
  --velvet:    #16204B;
  --velvet-2:  #1B2A57;
  --gold:      #D8B98A;
  --gold-dim:  #A98A5C;
  --text:      #F3EFE6;
  --muted:     #9AA6CC;
  --royal:     #0B1E42;
  --line:      rgba(216,185,138,.16);
  --glow:      rgba(124,143,232,.3);
  --cream-bg:  #FFF0D1;
}

body{
  font-family:'Manrope',sans-serif;
  background:var(--bg);
  color:var(--text);
  width:100%;
  overflow-x:hidden;
  transition:background .5s ease, color .5s ease;
}
h1,h2,h3,.brand-name{ font-family:'Fraunces',serif; }
a{ color:inherit; }
section{ scroll-margin-top:90px; }
.sub-text{ color:var(--muted); }

/* ============================================================
   FILM GRAIN — fixed, whole-site, soft-light blend for texture
   ============================================================ */
.grain-overlay{ position:fixed; inset:0; width:100%; height:100%; z-index:999; pointer-events:none; opacity:.045; mix-blend-mode:overlay; }
body.light-mode .grain-overlay{ opacity:.03; }

/* Soft floating gold bokeh — sits above the grain but below actual content */
.bokeh-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.85; }
body.light-mode .bokeh-canvas{ opacity:.4; }

/* Cosmic starfield / nebula / rising embers — hidden over the hero, fades in from section 2 on */
.cosmic-canvas{
  position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none;
  opacity:0; transition:opacity 1.1s ease;
}
.cosmic-canvas.is-visible{ opacity:1; }
body.light-mode .cosmic-canvas{ opacity:0 !important; } /* the starfield look is a dark-mode effect only */

/* ============================================================
   AMBIENT BACKGROUND — fixed, slow-drifting glow, runs the
   entire scroll length of the site for a "living" luxury feel.
   ============================================================ */
.ambient-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.ambient-bg .orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; will-change:transform; }
.orb-1{ width:44vw; height:44vw; top:-10%; left:-10%; background:radial-gradient(circle, var(--glow), transparent 70%); animation:driftA 34s ease-in-out infinite alternate; }
.orb-2{ width:38vw; height:38vw; bottom:-12%; right:-8%; background:radial-gradient(circle, var(--gold-dim), transparent 70%); animation:driftB 40s ease-in-out infinite alternate; opacity:.22; }
.orb-3{ width:30vw; height:30vw; top:40%; left:60%; background:radial-gradient(circle, #2A2158, transparent 70%); animation:driftC 46s ease-in-out infinite alternate; opacity:.3; }
@keyframes driftA{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(6vw,8vh) scale(1.15); } }
@keyframes driftB{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-7vw,-6vh) scale(1.1); } }
@keyframes driftC{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(-5vw,7vh) scale(1.2); } }
body.light-mode .ambient-bg{ opacity:.5; }

/* ============================================================
   LIGHT MODE — bright cream bg, everything bold dark royal blue
   ============================================================ */
body.light-mode{ background:var(--cream-bg); color:var(--royal); }
body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode h6,
body.light-mode p, body.light-mode span, body.light-mode a,
body.light-mode li, body.light-mode label, body.light-mode div{
  color:var(--royal);
}
body.light-mode .hero-title{ color:var(--royal); -webkit-text-stroke:0; text-shadow:none; }
body.light-mode .hero-description{ background:rgba(11,30,66,.9); color:var(--gold); }
body.light-mode h1, body.light-mode h2, body.light-mode h3{ font-weight:800; }
body.light-mode p{ font-weight:600; }
body.light-mode .navbar{ background:rgba(255,240,209,.6); border-color:rgba(11,30,66,.2); }
body.light-mode .navbar::before{ background:linear-gradient(90deg, transparent, var(--royal) 50%, transparent); }
body.light-mode .side-menu{ background:var(--cream-bg); }
body.light-mode .brand-logo{ filter:drop-shadow(0 2px 6px rgba(11,30,66,.35)); }
body.light-mode .velvet-card, body.light-mode .reel-card, body.light-mode .service-card,
body.light-mode .contact-form, body.light-mode .wwc-card,
body.light-mode .process-step .step-tc{
  background:rgba(255,255,255,.4); border-color:rgba(11,30,66,.18);
}
body.light-mode .contact-form input, body.light-mode .contact-form select, body.light-mode .contact-form textarea{
  background:rgba(255,255,255,.5); color:var(--royal); border-color:rgba(11,30,66,.2);
}
body.light-mode .contact-form input::placeholder, body.light-mode .contact-form textarea::placeholder{ color:rgba(11,30,66,.55); }
body.light-mode .start-project{ color:var(--royal); border-color:var(--royal); }
body.light-mode .start-project:hover{ background:var(--royal); color:var(--gold); }
body.light-mode ::-webkit-scrollbar-track{ background:var(--cream-bg); }
body.light-mode .btn-gold{ background:var(--royal); color:var(--gold); }

/* ============================================================
   LOADER
   ============================================================ */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:radial-gradient(120% 120% at 50% 30%, #1c1444 0%, var(--bg) 60%);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  transition:opacity .7s ease, visibility .7s ease;
  clip-path:circle(150% at 50% 50%);
}
#loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
#loader.shutter-open{
  clip-path:circle(0% at 50% 50%);
  transition:clip-path .85s cubic-bezier(.7,0,.25,1);
}
.loader-logo img{ width:120px; filter:drop-shadow(0 0 18px rgba(216,185,138,.35)); }
#loader h2{ font-size:22px; letter-spacing:8px; margin-top:14px; color:var(--text); }
.camera-icon{ margin-top:16px; opacity:.85; }
.camera-icon .lens-inner{ transform-origin:32px 37px; animation:lensPulse 1.1s ease-in-out infinite; }
@keyframes lensPulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(.5); opacity:.55; } }
.loading-line{ margin-top:20px; width:180px; height:2px; background:rgba(255,255,255,.08); border-radius:50px; overflow:hidden; }
.loading-line span{ display:block; width:0%; height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold)); animation:loading 1.4s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes loading{ 100%{ width:100%; } }

/* Shutter flash — a quick camera-flash pulse fired the instant the iris opens */
.shutter-flash{
  position:fixed; inset:0; z-index:10000; background:#fff; opacity:0; pointer-events:none;
}
.shutter-flash.flash-fire{ animation:shutterFlashFire .5s ease-out forwards; }
@keyframes shutterFlashFire{
  0%{ opacity:0; }
  12%{ opacity:.9; }
  100%{ opacity:0; }
}

/* Custom cursor — subtle gold ring that trails the pointer, grows on interactive elements */
.cursor-ring{
  position:fixed; top:0; left:0; width:26px; height:26px; border-radius:50%;
  border:1.4px solid var(--gold); pointer-events:none; z-index:9998; opacity:0;
  transition:width .25s ease, height .25s ease, background .25s ease, opacity .2s ease;
  mix-blend-mode:difference;
}
.cursor-ring-active{ width:44px; height:44px; background:rgba(216,185,138,.12); }
@media(hover:none){ .cursor-ring{ display:none; } }

/* ============================================================
   NAVBAR — small, glass, gold hairline, single nav for whole site
   ============================================================ */
.navbar{
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  width:92%; max-width:1300px; height:56px; padding:0 18px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(9,16,40,.5);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);
  border-radius:14px;
  z-index:900;
  box-shadow:0 12px 34px rgba(0,0,0,.3);
}
.navbar::before{
  content:""; position:absolute; left:16px; right:16px; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 50%, transparent); opacity:.5;
}
.nav-left{ display:flex; align-items:center; gap:10px; }
#menu-btn{
  width:32px; height:32px; border:1px solid var(--line); border-radius:8px; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; flex-shrink:0;
}
#menu-btn span{ width:15px; height:1.2px; background:var(--gold); border-radius:10px; transition:.3s; }
#menu-btn:hover span{ background:var(--text); }

.brand-logo{ height:26px; width:auto; object-fit:contain; margin-left:4px; filter:drop-shadow(0 0 6px rgba(124,143,232,.35)); mix-blend-mode:screen; }
body.light-mode .brand-logo{ mix-blend-mode:normal; }
.brand-name{ font-size:13px; letter-spacing:1.8px; font-weight:700; text-transform:uppercase; margin-left:6px; white-space:nowrap; }

.nav-right{ display:flex; align-items:center; gap:10px; }
#theme-toggle{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); cursor:pointer;
  background:var(--velvet); display:flex; align-items:center; justify-content:center; transition:.35s; padding:0;
}
#theme-toggle:hover{ border-color:var(--gold); }
#theme-toggle svg{ width:13px; height:13px; stroke:var(--gold); fill:none; }

.start-project{
  padding:8px 16px; border:1px solid var(--gold); border-radius:50px; background:transparent;
  color:var(--gold); font-weight:600; font-size:11.5px; letter-spacing:.3px; cursor:pointer; transition:.3s; text-decoration:none; white-space:nowrap;
}
.start-project:hover{ background:var(--gold); color:var(--bg); transform:translateY(-2px); }

.side-menu{
  position:fixed; top:0; left:-300px; width:280px; height:100vh; background:var(--bg-soft);
  border-right:1px solid var(--line); transition:.45s cubic-bezier(.2,.8,.2,1); z-index:9998;
  padding:100px 32px; display:flex; flex-direction:column; gap:22px;
}
.side-menu.active{ left:0; }
.side-menu a{ text-decoration:none; font-size:17px; font-weight:500; transition:.3s; }
.side-menu a:hover{ color:var(--gold); padding-left:8px; }
.menu-overlay{ position:fixed; inset:0; background:rgba(3,7,20,.6); opacity:0; visibility:hidden; transition:.35s; z-index:9997; }
.menu-overlay.active{ opacity:1; visibility:visible; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; overflow:hidden; width:100%; height:100vh; min-height:560px; display:flex; align-items:flex-end; }
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }

/* Ghosted logo mark — blended softly into the hero, breathing + drifting behind the text.
   Parent handles JS parallax translate; child img handles the CSS breathing animation,
   so the two transforms never fight each other. */
.hero-mark{
  position:absolute; z-index:1; top:50%; left:50%;
  width:min(70vw,780px); aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  opacity:.07;
  pointer-events:none;
  animation:heroMarkFade 12s ease-in-out infinite;
}
.hero-mark img{
  width:100%; height:100%; object-fit:contain;
  filter:grayscale(1) brightness(1.7) drop-shadow(0 0 40px rgba(216,185,138,.2));
  animation:heroMarkBreathe 12s ease-in-out infinite;
}
@keyframes heroMarkFade{ 0%,100%{ opacity:.05; } 50%{ opacity:.09; } }
@keyframes heroMarkBreathe{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.06) rotate(1.5deg); }
}
body.light-mode .hero-mark{ opacity:.08; }
body.light-mode .hero-mark img{ filter:grayscale(1) brightness(.4) drop-shadow(0 0 40px rgba(11,30,66,.15)); }

/* Slow diagonal gold light-leak sweep, passes across the hero every ~9s */
.hero-sheen{
  position:absolute; inset:-20% -60%; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(216,185,138,.16) 48%, rgba(216,185,138,.28) 50%, rgba(216,185,138,.16) 52%, transparent 60%);
  transform:translateX(-40%);
  animation:heroSheenSweep 9s ease-in-out infinite;
}
@keyframes heroSheenSweep{
  0%,20%{ transform:translateX(-40%); }
  55%,100%{ transform:translateX(40%); }
}
#heroVideo{ width:100%; height:100%; object-fit:cover; display:block; opacity:0; will-change:opacity; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,14,36,.25) 0%, rgba(7,14,36,.1) 40%, rgba(7,14,36,.55) 75%, rgba(7,14,36,.9) 100%); }
.hero-content{ position:relative; z-index:2; width:100%; padding:0 7% 70px; }
.hero-tag{
  font-size:12px; text-transform:uppercase; letter-spacing:4px; color:var(--gold); margin-bottom:12px;
  opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s ease;
}
.hero.golden-hour .hero-tag{ opacity:1; transform:translateY(0); }

.hero-title{
  font-size:clamp(34px,5.6vw,68px); line-height:.98; font-weight:700; color:#080D1F;
  -webkit-text-stroke:.6px rgba(216,185,138,.5);
  text-shadow:0 2px 0 rgba(216,185,138,.3), 0 20px 45px rgba(0,0,0,.35);
  max-width:760px;
  opacity:0; transform:translateY(30px); transition:opacity 1.1s ease .1s, transform 1.1s ease .1s;
}
.hero.golden-hour .hero-title{ opacity:1; transform:translateY(0); }
.hero-title .accent{
  color:var(--gold); -webkit-text-stroke:0; font-style:italic;
  background:linear-gradient(100deg, var(--gold) 30%, #F3E3C3 45%, var(--gold) 60%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:accentShimmer 6s ease-in-out infinite;
}
@keyframes accentShimmer{
  0%{ background-position:200% 0; }
  50%{ background-position:0% 0; }
  100%{ background-position:-200% 0; }
}

.hero-description{
  max-width:480px; font-size:14.5px; font-weight:700; line-height:1.6; color:var(--gold); margin-top:16px;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
  opacity:0; transform:translateY(20px); transition:opacity 1.1s ease .25s, transform 1.1s ease .25s;
}
.hero.golden-hour .hero-description{ opacity:1; transform:translateY(0); }

.hero-actions{
  margin-top:24px; display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; transform:translateY(20px); transition:opacity 1.1s ease .4s, transform 1.1s ease .4s;
}
.hero.golden-hour .hero-actions{ opacity:1; transform:translateY(0); }

.btn-ghost{
  padding:12px 24px; border-radius:50px; border:1px solid rgba(8,13,31,.5);
  background:rgba(8,13,31,.82); color:var(--gold); font-weight:600; font-size:13px;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:.3s; text-decoration:none;
}
.btn-ghost:hover{ background:var(--gold); color:var(--bg); transform:translateY(-3px); }
.btn-gold{
  padding:12px 24px; border-radius:50px; border:none; background:var(--gold); color:var(--bg);
  font-weight:700; font-size:13px; cursor:pointer; transition:.3s; display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 15px 35px rgba(216,185,138,.3); }

/* ============================================================
   SECTION HEADERS (generic)
   ============================================================ */
.section-tag{ font-size:12.5px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-dim); }
.section-title{ font-size:clamp(24px,3vw,36px); font-weight:600; margin-top:8px; }

/* ============================================================
   WHAT WE CREATE — smaller cards, bracket-icon instead of emoji
   ============================================================ */
.wwc{ padding:60px 7% 80px; }
.wwc-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-top:30px; }
.wwc-card{
  position:relative; background:var(--velvet); border:1px solid var(--line); border-radius:14px;
  padding:20px 14px; text-align:left; transition:.3s; overflow:hidden;
}
.wwc-card:hover{ border-color:var(--gold); transform:translateY(-5px); }
.wwc-num{ font-family:'Courier New',monospace; font-size:10px; color:var(--gold-dim); letter-spacing:1px; }
.wwc-bracket{ width:20px; height:20px; margin:10px 0 12px; }
.wwc-bracket svg{ width:100%; height:100%; stroke:var(--gold); fill:none; stroke-width:1.6; }
.wwc-card h4{ font-size:12.5px; font-weight:700; margin-bottom:5px; line-height:1.3; }
.wwc-card p{ font-size:10.5px; color:var(--muted); line-height:1.45; }
@media(max-width:1000px){ .wwc-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .wwc-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   STATS MARQUEE — continuous right-to-left scrolling ticker
   ============================================================ */
.stats-marquee{
  margin:0 0 0; padding:24px 0; background:var(--velvet); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stats-track{ display:flex; align-items:center; gap:34px; width:max-content; animation:statsScroll 24s linear infinite; }
.stats-marquee:hover .stats-track{ animation-play-state:paused; }
.stat-item{ display:flex; flex-direction:column; align-items:center; text-align:center; white-space:nowrap; padding:0 6px; }
.stat-item h3{ font-size:clamp(20px,2.4vw,28px); color:var(--gold); font-weight:700; font-family:'Fraunces',serif; }
.stat-item p{ font-size:11px; color:var(--muted); margin-top:4px; letter-spacing:.03em; }
.stat-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold-dim); opacity:.6; flex:none; }
@keyframes statsScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }
@media(max-width:700px){ .stats-track{ gap:22px; animation-duration:18s; } }
body.light-mode .stats-marquee{ background:var(--velvet); border-color:rgba(216,185,138,.3); }
body.light-mode .stats-marquee h3{ color:var(--gold); }
body.light-mode .stats-marquee p{ color:var(--muted); font-weight:500; }

/* ============================================================
   PROCESS
   ============================================================ */
.process{ padding:70px 7% 90px; }
.process-track{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; margin-top:40px; }
.process-track::before{ content:""; position:absolute; top:17px; left:5%; right:5%; height:1px; background:var(--line); }
.process-step{ text-align:center; padding:0 8px; position:relative; }
.step-tc{
  width:34px; height:34px; margin:0 auto 14px; border-radius:50%; background:var(--bg); border:1px solid var(--gold-dim);
  color:var(--gold); display:flex; align-items:center; justify-content:center; font-family:'Courier New',monospace;
  font-size:11px; position:relative; z-index:1;
}
.process-step h4{ font-size:13.5px; margin-bottom:6px; }
.process-step p{ font-size:11.5px; color:var(--muted); line-height:1.5; }
@media(max-width:1000px){ .process-track{ grid-template-columns:repeat(2,1fr); gap:28px; } .process-track::before{ display:none; } }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-hero{ padding:80px 7% 50px; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }
.about-copy .section-tag{ margin-bottom:14px; }
.about-heading{ font-family:'Fraunces',serif; font-size:clamp(26px,3.6vw,40px); line-height:1.15; font-weight:600; margin-bottom:16px; }
.about-heading .glow{ color:var(--gold); font-style:italic; font-family:'Fraunces',serif; font-style:italic; }
.about-copy p{ color:var(--muted); font-size:14.5px; line-height:1.8; max-width:500px; margin-bottom:14px; }
.about-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.about-tags span{ font-size:11px; padding:7px 14px; border-radius:50px; border:1px solid var(--line); color:var(--gold); background:rgba(216,185,138,.06); }

.about-thumbs{ position:relative; height:460px; }
.about-thumbs .piece{ position:absolute; border-radius:18px; object-fit:cover; box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 35px var(--glow); border:1px solid var(--line); overflow:hidden;
  opacity:0; transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1);
}

.piece-up{    width:56%; height:56%; top:0;    left:6%;  transform:translateY(-90px); z-index:3; }
.piece-down{  width:52%; height:50%; bottom:0; right:0;  transform:translateY(90px);  z-index:2; }
.piece-left{  width:34%; height:34%; bottom:8%; left:0;  transform:translateX(-90px); z-index:1; }
.piece-right{ width:32%; height:32%; top:6%;   right:0;  transform:translateX(90px);  z-index:1; }

/* once the section scrolls into view, script.js adds .in — pieces fly into place */
.reveal.in .piece-up{    opacity:1; transform:translateY(0); }
.reveal.in .piece-down{  opacity:1; transform:translateY(0); transition-delay:.12s; }
.reveal.in .piece-left{  opacity:1; transform:translateX(0); transition-delay:.24s; }
.reveal.in .piece-right{ opacity:1; transform:translateX(0); transition-delay:.36s; }

/* gentle idle float + Ken Burns once settled */
.reveal.in .piece-up{    animation:floatA 6s ease-in-out 1s infinite, kenBurns 18s ease-in-out 1s infinite alternate; }
.reveal.in .piece-down{  animation:floatB 7s ease-in-out 1s infinite, kenBurns 14s ease-in-out 1s infinite alternate; }
.reveal.in .piece-left{  animation:floatB 8s ease-in-out 1s infinite; }
.reveal.in .piece-right{ animation:floatA 6.5s ease-in-out 1s infinite; }
@keyframes floatA{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes floatB{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(12px); } }
@keyframes kenBurns{ 0%{ filter:brightness(1) saturate(1); } 100%{ filter:brightness(1.08) saturate(1.12); } }

.philosophy{ padding:70px 7% 90px; display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.philosophy{ overflow:hidden; }
.philosophy .img-frame{ overflow:hidden; border-radius:18px; border:1px solid var(--line); }
.philosophy img{ width:100%; height:380px; object-fit:cover; display:block; animation:kbZoom 20s ease-in-out infinite alternate; }
@keyframes kbZoom{ 0%{ transform:scale(1); } 100%{ transform:scale(1.12); } }
.philosophy blockquote{ font-family:'Fraunces',serif; font-size:clamp(22px,3vw,36px); font-weight:600; line-height:1.2; margin-bottom:16px; }
.philosophy p{ color:var(--muted); font-size:14px; line-height:1.8; }
.philosophy .signature{ margin-top:18px; font-family:'Fraunces',serif; font-style:italic; font-size:22px; color:var(--gold); }

@media(max-width:1000px){ .about-hero, .philosophy{ grid-template-columns:1fr; } }

/* ============================================================
   FILMS — Netflix-style, small cards, 2 rows of 6
   ============================================================ */
.films{ padding:70px 7% 90px; }

.films-row{ margin-top:40px; }
.films-row:first-of-type{ margin-top:30px; }
.films-row-title{ font-size:15px; font-weight:600; margin-bottom:14px; display:flex; align-items:baseline; gap:10px; }
.films-row-title span{ font-family:'Manrope',sans-serif; font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--gold-dim); }

.films-shelf{
  display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px;
}
.films-shelf::-webkit-scrollbar{ display:none; }
.films-shelf .reel-card{ flex:0 0 150px; scroll-snap-align:start; }

.reel-card{
  position:relative; aspect-ratio:2/3; border-radius:12px; overflow:hidden; cursor:pointer;
  background:var(--velvet); border:1px solid var(--line);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.reel-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:saturate(.95) brightness(.88); }
.reel-card:hover{ transform:translateY(-6px) scale(1.04); border-color:var(--gold); box-shadow:0 16px 32px rgba(0,0,0,.4), 0 0 26px var(--glow); z-index:5; }
.reel-card:hover img{ transform:scale(1.06); filter:saturate(1.05) brightness(1); }
.reel-overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:9px; background:linear-gradient(180deg, transparent 45%, rgba(3,7,20,.95) 100%); }
.reel-tc{ font-family:'Courier New',monospace; font-size:8.5px; letter-spacing:1.2px; color:var(--gold); margin-bottom:3px; }
.reel-overlay h4{ font-size:11px; font-weight:700; line-height:1.2; }
.reel-play{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background:rgba(7,14,36,.6); border:1px solid rgba(216,185,138,.45); color:var(--gold);
  display:flex; align-items:center; justify-content:center; opacity:0; transform:scale(.8); transition:.3s; font-size:9px;
}
.reel-card:hover .reel-play{ opacity:1; transform:scale(1); }

/* "Coming soon" placeholder cards — used where a real thumbnail hasn't been supplied yet */
.reel-plain-bg{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(216,185,138,.05) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--velvet-2), var(--bg-soft));
  display:flex; align-items:center; justify-content:center;
}
.reel-plain-ep{ font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:rgba(216,185,138,.35); }
.reel-plain .reel-overlay h4{ color:var(--muted); font-weight:600; }

@media(max-width:600px){ .films-shelf .reel-card{ flex:0 0 120px; } }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ padding:70px 7% 30px; }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px; }
.service-card{
  position:relative; border-radius:16px; overflow:hidden; min-height:220px; padding:22px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--velvet); border:1px solid var(--line);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s;
}
.service-card:hover{ transform:perspective(800px) rotateX(2deg) rotateY(-3deg) translateY(-5px); border-color:var(--gold); }
.service-card .svc-bg{ position:absolute; inset:0; object-fit:cover; opacity:.4; transition:.5s; width:100%; height:100%; }
.service-card:hover .svc-bg{ opacity:.6; transform:scale(1.06); }
.service-card::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(3,7,20,.92)); }
.service-card h3{ position:relative; z-index:2; font-size:17px; margin-bottom:6px; }
.service-card p{ position:relative; z-index:2; font-size:12.5px; color:var(--muted); line-height:1.55; }
.svc-bracket{ position:relative; z-index:2; width:20px; height:20px; margin-bottom:12px; }
.svc-bracket svg{ width:100%; height:100%; stroke:var(--gold); fill:none; stroke-width:1.6; }
@media(max-width:1000px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .services-grid{ grid-template-columns:1fr; } }

.duality{ margin:50px 7% 90px; border-radius:20px; overflow:hidden; position:relative; height:360px; border:1px solid var(--line); display:flex; }
.duality-side{ position:relative; flex:1; overflow:hidden; cursor:pointer; }
.duality-side img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .6s ease; filter:grayscale(.25) brightness(.65); }
.duality-side:hover img{ transform:scale(1.06); filter:grayscale(0) brightness(.9); }
.duality-side::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(3,7,20,.85)); }
.duality-label{ position:absolute; bottom:24px; left:24px; z-index:2; font-family:'Fraunces',serif; font-size:19px; }
.duality-mid{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3;
  width:54px; height:54px; border-radius:50%; background:var(--gold); color:var(--bg);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;
  box-shadow:0 0 35px rgba(216,185,138,.5);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ padding:70px 7% 90px; display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; }
.contact-info-block{ display:flex; flex-direction:column; gap:22px; }
.contact-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-item .ci-icon{ width:40px; height:40px; border-radius:50%; border:1px solid var(--gold-dim); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.contact-item h4{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
.contact-item p, .contact-item a{ font-size:15px; text-decoration:none; }
.socials{ display:flex; gap:10px; margin-top:8px; }
.socials a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; text-decoration:none; transition:.3s; font-size:13px; }
.socials a:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }

.contact-form{ background:var(--velvet); border:1px solid var(--line); border-radius:20px; padding:30px; display:flex; flex-direction:column; gap:14px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; color:var(--text); font-family:inherit; font-size:13.5px; outline:none; transition:.25s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color:var(--gold); background:rgba(216,185,138,.06); }
.contact-form textarea{ min-height:110px; resize:vertical; }
.contact-form button{ margin-top:4px; padding:14px; border:none; border-radius:10px; background:var(--gold); color:var(--bg); font-weight:700; font-size:13.5px; cursor:pointer; transition:.3s; }
.contact-form button:hover{ transform:translateY(-3px); box-shadow:0 15px 35px rgba(216,185,138,.3); }
.form-note{ font-size:11.5px; color:var(--muted); margin-top:-4px; }
@media(max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.video-modal{ position:fixed; inset:0; display:none; justify-content:center; align-items:center; background:rgba(3,7,20,.92); backdrop-filter:blur(6px); z-index:9999; }
.video-modal.active{ display:flex; }
#videoPlayer{ width:min(92vw,420px); aspect-ratio:9/16; border:none; border-radius:18px; background:#000; }
.close-video{ position:absolute; top:26px; right:26px; width:42px; height:42px; border:1px solid var(--gold); border-radius:50%; background:transparent; color:var(--gold); font-size:18px; cursor:pointer; transition:.3s; }
.close-video:hover{ background:var(--gold); color:var(--bg); }

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta-strip{ margin:0 7% 60px; padding:50px 6%; border-radius:20px; text-align:center; background:linear-gradient(135deg, var(--velvet), var(--bg-soft)); border:1px solid var(--line); }
.cta-strip h2{ font-size:clamp(22px,3vw,36px); margin-bottom:16px; }
.cta-strip p{ color:var(--muted); margin-bottom:22px; max-width:440px; margin-left:auto; margin-right:auto; }

.site-footer{ padding:44px 7% 26px; border-top:1px solid var(--line); display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
.footer-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.footer-brand img{ height:30px; margin-bottom:10px; }
.footer-brand p{ color:var(--muted); font-size:13px; max-width:300px; line-height:1.65; }
.footer-col h5{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-dim); margin-bottom:14px; }
.footer-col a{ display:block; text-decoration:none; color:var(--muted); font-size:13.5px; margin-bottom:9px; transition:.25s; }
.footer-col a:hover{ color:var(--gold); }
.footer-bottom{ text-align:center; padding:18px 7%; font-size:11.5px; color:var(--muted); border-top:1px solid var(--line); }
@media(max-width:800px){ .site-footer{ grid-template-columns:1fr; } }

/* ============================================================
   SCROLLBAR + REVEAL
   ============================================================ */
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--velvet-2); border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-dim); }
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media(max-width:900px){ .services-grid{ padding:0; } }
@media(max-width:640px){
  .navbar{ padding:0 12px; height:52px; }
  .brand-name{ display:none; }
}