/* DZ — Dimitar Zahariev. Palette, type and components measured from the original Framer site.
   Layout: full-bleed cinematic bands on the original oxblood (#1d0000), lit by a fixed ambient layer and the original film-grain overlay. */
/* Clash Display Medium (Fontshare, free licence), self-hosted for the About values cards */
@font-face{font-family:"Clash Display";src:url(fonts/ClashDisplay-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
:root{
  --black:#000;
  --red:#1d0000;            /* original body background */
  --red-2:#1c0000;          /* original section gradients */
  --red-lift:#3a0708;       /* ambient light in the red */
  --gold:#c7a86d;           /* original accent: display type, numbers, album titles */
  --gold-dk:#8f7442;
  --cream:#faf5ea;          /* original body text */
  --white:#fff;
  --muted:rgba(250,245,234,.62);
  --line:rgba(250,245,234,.14);
  --glass:rgba(255,255,255,.1);   /* original stat cards */
  --f-display:"Italiana","Forum","Cormorant Garamond",Didot,Georgia,serif; /* Forum supplies Cyrillic glyphs */
  --f-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --f-clash:"Clash Display","Manrope",system-ui,sans-serif; /* values cards, as on the original; Manrope covers Cyrillic */
  --f-num:"Cardo",Georgia,serif;
  --f-deco:"Cinzel Decorative","Cinzel",Georgia,serif;
  --f-ui:"Inter","Manrope",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
  --ease-io:cubic-bezier(.7,0,.25,1);
  --wrap:1360px;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--red);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--red);color:var(--cream);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--black)}
a{color:inherit}
img,video,canvas{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance}
p{margin:0}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
@media (min-width:900px){.wrap{padding-left:max(48px,var(--gl));padding-right:max(48px,var(--gr))}}

/* ---------- depth: ambient light + vignette + original grain ---------- */
/* Perf: soft radial gradients instead of blur filters; one composited layer that drifts on transform only. */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.ambient i{position:absolute;inset:-20%;will-change:transform;background:
  radial-gradient(38% 42% at 18% 12%,rgba(110,14,14,.42),transparent 70%),
  radial-gradient(34% 38% at 88% 78%,rgba(199,168,109,.07),transparent 70%),
  radial-gradient(30% 34% at 55% 55%,rgba(70,6,8,.45),transparent 70%);
  animation:drift 40s ease-in-out infinite alternate}
.ambient i+i,.ambient i+i+i{display:none}
.ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%)}
@keyframes drift{to{transform:translate3d(6%,4%,0) scale(1.06)}}
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;mix-blend-mode:soft-light;opacity:.9;contain:strict;transform:translateZ(0)}
.grain canvas{width:100%;height:100%;display:block}
.grain video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:.01;pointer-events:none}
.wrap-wide{max-width:1760px;margin:0 auto;padding-left:max(16px,5.5vw,env(safe-area-inset-left,0px));padding-right:max(16px,5.5vw,env(safe-area-inset-right,0px))}
main,footer{position:relative;z-index:1}

/* ---------- nav ---------- */
/* Header: fully transparent, like the original */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:70;background:transparent}
.nav .wrap{display:flex;align-items:center;gap:34px;padding-block:22px;max-width:none;padding-left:max(20px,2.6vw,env(safe-area-inset-left,0px));padding-right:max(20px,2.6vw,env(safe-area-inset-right,0px))}
.nav .logo img{height:clamp(44px,3.3vw,64px);width:auto}
.nav ul{display:flex;gap:34px;list-style:none;margin:0 0 0 auto;padding:0;font-size:13.5px;font-weight:400;letter-spacing:.01em}
.nav ul a{text-decoration:none;color:var(--cream);opacity:.66;position:relative;transition:opacity .3s;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav ul a:hover,.nav ul a[aria-current="page"]{opacity:1}
.nav ul a:hover::after,.nav ul a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.lang{display:inline-flex;align-items:center;gap:2px;font:400 11.5px/1 var(--f-body);letter-spacing:.14em}
.lang button{background:none;border:0;color:var(--cream);opacity:.4;padding:6px 4px;cursor:pointer;font:inherit;letter-spacing:inherit;position:relative;transition:opacity .3s,color .3s}
.lang button+button::before{content:"/";position:absolute;left:-5px;opacity:.5;color:var(--cream)}
.lang button:hover{opacity:.8}
.lang button[aria-pressed="true"]{opacity:1;color:var(--gold)}
.nav .cta{font-size:10.5px;letter-spacing:.18em;background:transparent;border-color:rgba(199,168,109,.55);color:var(--gold)}
.nav .cta{--glow:rgba(199,168,109,.38)}
.nav .cta .l{padding:14.5px 20px}
.burger{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;position:relative;margin-left:auto}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:var(--gold);transition:transform .5s var(--ease),top .5s var(--ease)}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:22px;transform:rotate(-45deg)}
@media (max-width:960px){.nav ul,.nav .cta{display:none}.burger{display:block}.nav .lang{margin-left:0}}
.menu{position:fixed;inset:0;z-index:65;background:rgba(18,0,0,.97);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:90px max(28px,var(--gr)) 40px max(28px,var(--gl));clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);visibility:hidden}
.menu-open .menu{clip-path:inset(0 0 0 0);visibility:visible}
.menu a{font-family:var(--f-display);font-size:clamp(2.6rem,11vw,4.5rem);line-height:1.1;text-decoration:none;color:var(--gold);transform:translateY(40px);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.menu-open .menu a{transform:none;opacity:1}
.menu a:nth-child(2){transition-delay:.05s}.menu a:nth-child(3){transition-delay:.1s}.menu a:nth-child(4){transition-delay:.15s}.menu a:nth-child(5){transition-delay:.2s}.menu a:nth-child(6){transition-delay:.25s}
.menu .menu-cta{margin-top:28px;font:600 12px var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--black);background:var(--gold);padding:16px 20px;align-self:flex-start}

/* ---------- buttons (original: outlined with a separate arrow cell) ---------- */
/* Buttons: a liquid fill grows from wherever the cursor enters, the button leans gently toward the cursor (magnetic),
   and the label/arrow drift a little further for a sense of depth. */
/* Hover: a soft round glow sits under the cursor and follows it (--mx/--my set from site.js); text keeps its colour. */
.btn{--glow:rgba(250,245,234,.32);display:inline-flex;align-items:stretch;text-decoration:none;color:var(--white);border:1px solid var(--white);font:500 15px/1 var(--f-body);text-transform:uppercase;letter-spacing:-.01em;cursor:pointer;background:transparent;padding:0;position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 70%);opacity:0;transition:opacity .45s var(--ease);z-index:-1;pointer-events:none}
.btn:hover::before{opacity:1}
.btn .l{padding:16px 18px}
.btn .a{display:grid;place-items:center;width:48px;border-left:1px solid currentColor}
.btn .a svg{width:16px;height:16px;transition:transform .5s var(--ease)}
.btn:hover .a svg{transform:translateX(3px)}
.btn:active{transform:scale(.97)}
/* gold CTAs: a slow, liquid gold gradient drifts inside the button to draw the eye */
.btn.gold,.pill i{background:linear-gradient(115deg,#a9874f 0%,#c7a86d 18%,#ecd7a4 34%,#c7a86d 50%,#9f7d46 66%,#d9bf86 82%,#a9874f 100%);background-size:320% 100%;animation:goldDrift 9s ease-in-out infinite alternate}
.btn.gold{border-color:#c7a86d;color:var(--black)}
@keyframes goldDrift{0%{background-position:0% 50%}100%{background-position:100% 50%}}
.btn.gold{--glow:rgba(255,250,236,.6)}
.btn.sm{font-size:12px;letter-spacing:.12em}
.btn.sm .l{padding:12px 16px}
/* every button is a rounded pill with just its label (no arrow box) */
.btn{border-radius:999px;justify-content:center}
.btn .a{display:none}
.btn .l{padding:16px 30px;text-align:center}
.btn.sm .l{padding:12px 22px}
.nav .cta .l{padding:14.5px 24px}
.menu .menu-cta{border-radius:999px;padding:16px 26px}
.pill{border-radius:999px;padding:6px 6px 6px 20px}
.pill i{border-radius:999px;padding:12px 18px}
.chip span{border-radius:999px;padding:.6em 1.15em}

/* ---------- reveal on scroll ---------- */
/* Reveal-on-scroll. Content is VISIBLE by default (so the first paint of every page is complete, no flash);
   site.js marks only what starts below the first screen with .rv, and those wait hidden until scrolled to (.in). */
html.js [data-r]{transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
html.js [data-r].rv:not(.in){opacity:0;transform:translate3d(0,42px,0)}
html.js [data-r="img"]{transition:clip-path 1.4s var(--ease-io);transition-delay:calc(var(--i,0) * 110ms)}
html.js [data-r="img"].rv:not(.in){opacity:1;transform:none;clip-path:inset(14% 8% 14% 8%)}
html.js [data-r="img"] img{transition:transform 1.8s var(--ease)}
html.js [data-r="img"].rv:not(.in) img{transform:scale(1.25)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split .w>span{display:inline-block}
html.js .split .w>span{transform-origin:left bottom;transition:transform 1.1s var(--ease);transition-delay:calc(var(--w,0) * 60ms + var(--d,0ms))}
html.js .split.rv:not(.in) .w>span{transform:translateY(110%) rotate(4deg)}

/* no page-to-page transitions: links navigate instantly so the site feels fast *//* Lenis smooth scroll (same library the original Framer site uses) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- HERO (home) ---------- */
/* clipped sideways only: the photo continues below the header and fades out softly behind the stats */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;overflow:clip visible;background:var(--black);z-index:1}
/* the original's header portrait (its hero poster), mirrored; centred and 90% desaturated like the original */
/* hero-portrait.jpg: Dimitar's own 2560×1440 black-and-white header photo (face right, looking left), used as delivered */
/* The photo box is exactly the 16:9 photo, sized so it always covers the header (106svh tall at least).
   Its legibility shading is part of the box, and one mask fades the whole box out towards its own bottom,
   so as the parallax pushes it down while scrolling, a soft tail of the photo stays behind the stats — no hard lines. */
.hero-img{--hw:max(100vw,188.4svh);--hx:.5;position:absolute;top:-6%;left:calc((100% - var(--hw)) * var(--hx));width:var(--hw);aspect-ratio:16/9;background:linear-gradient(90deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.15) 30%,rgba(0,0,0,0) 45%),url(hero-portrait.jpg) center/100% 100% no-repeat;transform-origin:65% 35%;will-change:transform;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.12) 80%,transparent 90%);mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.5) 66%,rgba(0,0,0,.12) 80%,transparent 90%)}
html.js .hero-img{animation:hero-zoom 2.8s var(--ease) both}
/* a gentle settle of the header photo on load — no dark start, so nothing flashes */
@keyframes hero-zoom{from{transform:scale(1.06)}}
/* headline centred in the free space (a touch below centre); bar pinned to the bottom */
.hero-in{position:absolute;inset:0;z-index:2;padding-top:clamp(90px,10vh,130px);padding-bottom:28px}
.hero-in>.wrap-wide{height:100%;display:flex;flex-direction:column}
.hero-in h1{margin-top:auto;margin-bottom:clamp(22px,3.2vh,40px);transform-origin:left center}
.hero h1{font-size:clamp(2.6rem,5.6vw,6.6rem);line-height:1;letter-spacing:-.015em;color:var(--gold);will-change:transform;white-space:nowrap}
@media (max-width:640px){.hero h1{white-space:normal}}
.hero-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.35);font:400 12px/1.3 var(--f-ui);letter-spacing:-.02em;text-transform:uppercase;color:var(--white)}
.hero-bar .scroll{display:inline-flex;gap:8px;align-items:center}
.hero-bar .scroll svg{width:12px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}
.hero-bar a.work{justify-self:end;text-decoration:none;color:var(--cream);position:relative}
.hero-bar a.work::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--gold);transform-origin:left;transition:transform .5s var(--ease)}
.hero-bar a.work:hover::after{transform:scaleX(.3)}
@media (max-width:640px){
  .hero-bar{grid-template-columns:1fr auto}.hero-bar .scroll{display:none}
  .hero-img{--hx:.66}
  .hero h1{font-size:clamp(2.5rem,12vw,4rem)}
}

/* ---------- STATS (original 1:1) ---------- */
/* home section spacing trimmed ~1/3 (was: stats 90/12vw/170, reel top 120/12vw/180, reel bottom 70/8vw/130,
   works 70/8vw/110, reviews 60/8vw/110, faq 80/10vw/140) */
.stats{background:linear-gradient(180deg,#000 0%,rgba(29,0,0,0) 100%);padding-block:clamp(64px,8vw,115px)}
/* the boxes sit above the photo's fading tail (the header is z-index 1) */
.stats .stat-frame{position:relative;z-index:2}
.stat-frame{border:1px solid rgba(250,245,234,.07);padding:8px;display:grid;grid-template-columns:repeat(20,1fr);gap:8px;background:rgba(0,0,0,.18)}
.stat{background:var(--glass);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:10px;min-width:0;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 120% at 0% 0%,rgba(199,168,109,.07),transparent 60%);pointer-events:none}
/* soft glow that follows the cursor */
.stat::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(199,168,109,.16),rgba(199,168,109,.05) 35%,transparent 70%)}
.stat:hover::after{opacity:1}
/* keep the light layers underneath the text, and always on their own layer,
   so hovering never flashes a box around the label or number */
.stat{isolation:isolate}
.stat::before,.stat::after{z-index:-1}
.stat::after{will-change:opacity}
.stat:nth-child(1){grid-column:span 12}.stat:nth-child(2){grid-column:span 8}.stat:nth-child(3){grid-column:span 8}.stat:nth-child(4){grid-column:span 12}
.stat>span{font-size:17px;color:var(--cream);padding-bottom:12px;border-bottom:1px solid rgba(250,245,234,.12)}
.stat b{font-weight:400;color:var(--gold);line-height:1;display:flex;align-items:baseline;white-space:nowrap}
.stat b .n{font-family:var(--f-num);font-size:clamp(5rem,9vw,8.3rem);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat b .s{font-family:var(--f-deco);font-size:clamp(3rem,5vw,4.6rem);letter-spacing:-.04em}
@media (max-width:760px){.stat{grid-column:span 20!important}}

/* ---------- HOME ABOUT (original: portrait full-bleed, "I am …") ---------- */
.iam{position:relative;overflow:hidden;min-height:clamp(640px,62vw,900px);display:flex;flex-direction:column;justify-content:space-between}
/* the fade lives on a static frame so the parallax photo can never show a hard edge */
.iam-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.55) 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 74%,rgba(0,0,0,.55) 88%,transparent 100%)}
/* iam-portrait.jpg = hero.jpg fully desaturated (the source photo carried a mauve/red cast) */
/* The photo's own top edge already crops the hair, so it is shown at full height (section-tall, right-aligned, no parallax):
   forehead intact, chin above the brand logos. Any space left of it is filled with the photo's flat grey backdrop (#3c3c3c). */
.iam-bg{position:absolute;inset:0;background:#3c3c3c url(iam-portrait.jpg) right top/auto 100% no-repeat}
/* left-side shading for legibility lives inside the faded frame, so it fades with the photo */
.iam-mask::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,0) 60%);pointer-events:none}
.iam .wrap,.iam .wrap-wide{position:relative;z-index:2;width:100%}
.iam .brands{z-index:2}
.iam-text{padding-top:clamp(90px,10vw,140px);max-width:640px}
.iam h2{font-size:clamp(4.2rem,9vw,7.5rem);color:var(--gold);letter-spacing:-.04em;line-height:1}
.iam p{font-size:clamp(1.5rem,2.6vw,2.35rem);font-weight:300;line-height:1.2;letter-spacing:-.03em;color:var(--cream);margin-top:8px}
.iam .btn{margin-top:36px}
/* mobile: photo on top (full head), text BELOW the face, never on it */
@media (max-width:640px){
  .iam{min-height:0}
  .iam-bg{background:url(iam-portrait.jpg) 90% top/auto 520px no-repeat}
  .iam-mask{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 360px,transparent 540px);mask-image:linear-gradient(180deg,#000 0,#000 360px,transparent 540px)}
  .iam-mask::after{background:linear-gradient(180deg,rgba(0,0,0,0) 280px,rgba(0,0,0,.55) 460px)}
  .iam-text{padding-top:440px;max-width:100%}
  .iam h2{font-size:clamp(3rem,13vw,4.2rem)}
  .iam p{font-size:clamp(1.05rem,4.6vw,1.3rem);line-height:1.3}
  .iam .btn{margin-top:24px}
  .iam .brands{margin-top:48px}
}
}
.brands{position:relative;z-index:2;padding-block:60px 70px}
.brands h3{font:400 clamp(1.2rem,1.8vw,1.6rem) var(--f-body);color:var(--gold);text-align:center;margin-bottom:24px}
.marquee{overflow:hidden}
.track{display:flex;gap:10px;width:max-content;animation:marq var(--dur,40s) linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.logo-tile{width:170px;height:96px;display:grid;place-items:center;background:rgba(40,30,28,.55);border-radius:10px;cursor:default}
.logo-tile img{max-width:104px;max-height:62px;object-fit:contain}

/* ---------- SHOWREEL ---------- */
/* Cinema screen: the reel sits full-width on a black stage that fades into the page above and below,
   so the 4:3 shots' built-in black bars disappear into the black instead of looking like a broken frame. */
.reel{position:relative;padding-top:clamp(80px,8vw,120px);overflow:hidden}
/* blurred, dimmed copy of the reel glowing softly behind the player */
.reel-ambient{position:absolute;left:50%;top:42%;width:min(1800px,140%);aspect-ratio:16/9;transform:translate(-50%,-50%);opacity:.38;pointer-events:none;z-index:0;contain:strict;-webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
.reel-ambient canvas{width:100%;height:100%;filter:brightness(.8)}
.reel .wrap{position:relative;z-index:2}
.gold-grad,.gold-grad .w>span{background:linear-gradient(180deg,#e7d3a3 0%,var(--gold) 45%,var(--gold-dk) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-grad.split{background:none}
.reel-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.reel h2{font-size:clamp(2.8rem,5.4vw,5.6rem);line-height:1;letter-spacing:-.02em}
.reel-meta{font:400 12px/1.4 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.reel-stage{position:relative;margin-top:clamp(24px,2.4vw,36px);padding-bottom:clamp(48px,5vw,90px)}
.reel-frame{position:relative;z-index:1;box-shadow:0 30px 90px -30px rgba(0,0,0,.9);margin:0 auto;width:min(calc(100% - 2 * max(16px,5.5vw)),1180px,calc(70svh * 16 / 9));aspect-ratio:16/9;background:#000;overflow:hidden}
.reel-frame video{width:100%;height:100%;object-fit:contain}
/* Volume pill: mute button; slider + value slide open on hover/focus/wheel */
/* Volume: no box — just the speaker and a hairline slider that slides out to its left on hover.
   A soft shadow keeps both readable over bright shots. */
.vol{--v:25%;position:absolute;right:18px;bottom:16px;z-index:3;display:flex;flex-direction:row-reverse;align-items:center;gap:4px;padding:6px 2px 6px 14px;color:var(--cream);filter:drop-shadow(0 1px 6px rgba(0,0,0,.65));opacity:.75;transition:opacity .4s}
.vol:hover,.vol:has(:focus-visible),.vol.open{opacity:1}
.vol-btn{width:30px;height:30px;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;flex:none;padding:0;transition:color .3s,transform .3s}
.vol-btn:hover{color:var(--gold)}
.vol-btn:active{transform:scale(.9)}
.vol-btn svg{width:19px;height:19px}
.vol-slide{width:0;opacity:0;overflow:hidden;display:flex;align-items:center;transition:width .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.vol:hover .vol-slide,.vol:has(:focus-visible) .vol-slide,.vol.open .vol-slide{width:96px;opacity:1}
.vol input[type=range]{-webkit-appearance:none;appearance:none;width:96px;height:20px;background:transparent;cursor:pointer;margin:0}
.vol input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cream) var(--v),rgba(255,255,255,.28) var(--v));transition:height .25s}
.vol input[type=range]::-moz-range-track{height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cream) var(--v),rgba(255,255,255,.28) var(--v))}
.vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--cream);margin-top:-4px;transform:scale(.7);transition:transform .3s cubic-bezier(.22,1.4,.36,1)}
.vol input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:var(--cream)}
.vol:hover input[type=range]::-webkit-slider-thumb,.vol.open input[type=range]::-webkit-slider-thumb{transform:scale(1)}
.vol input[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}
.vol input[type=range]:focus-visible{outline:none}
.vol input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(199,168,109,.6)}

/* ---------- MUSIC VIDEOS grid ---------- */
.works{padding-block:clamp(50px,5.5vw,80px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.sec-head h2,.page-title{font-size:clamp(3rem,7vw,6.5rem);color:var(--gold);line-height:1;letter-spacing:-.03em}
.work-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px}
.card{grid-column:span 3;text-decoration:none;display:flex;flex-direction:column;gap:14px;min-width:0}
.card:nth-child(n+3){grid-column:span 2}
.card .ph{aspect-ratio:16/9;max-width:100%;overflow:hidden;background:#100}
.card img{width:100%;height:100%;object-fit:cover}
.card .ph img{transition:transform 1s var(--ease),filter .6s}
.card:hover .ph img{transform:scale(1.06)}
.card .t{display:flex;justify-content:space-between;gap:12px;align-items:baseline;color:var(--gold);font-size:clamp(1rem,1.5vw,1.3rem);letter-spacing:-.01em}
@media (max-width:860px){.card,.card:nth-child(n+3){grid-column:span 6}}

/* ---------- REVIEWS (original 1:1) ---------- */
.reviews{padding-block:clamp(44px,5.5vw,80px)}
/* Reviews: measured 1:1 from the original (1680px box, 58/68 padding, 115px title, 350px cards, 10px gap) */
.glow-box{max-width:1680px;margin:0 auto;background:radial-gradient(50% 50% at 50% 50%,rgba(199,168,109,.25) 0%,#1d0000 100%);box-shadow:0 0 30px -2px rgba(0,0,0,.7);padding:58px 0 68px;overflow:hidden}
.glow-box h2{font-size:clamp(3.4rem,6vw,115px);color:var(--gold);text-align:center;line-height:.8;letter-spacing:-.02em}
.rev-marquee{overflow:visible;clip-path:inset(-40px 0 -40px 0);margin-top:10px;padding:clamp(40px,6.7vw,129px) 0 0;min-height:clamp(380px,26.5vw,509px)}
.rev-track{display:flex;align-items:flex-start;gap:10px;width:max-content;animation:marq 70s linear infinite}
/* the reviews row can be dragged sideways (site.js); vertical swipes keep scrolling the page */
.rev-marquee{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rev-marquee.dragging{cursor:grabbing}
.rev{width:min(350px,82vw);flex:none;background:rgba(0,0,0,.05);box-shadow:5px 5px 10px -5px #000;padding:14px 20px 20px}
.rev .av{position:relative;width:63px;height:63px;margin:0 0 20px}
.rev .av img{width:63px;height:63px;border-radius:50%;object-fit:cover}
.rev .av::after{content:"";position:absolute;inset:-5px;--c:rgba(199,168,109,.75);background:
  linear-gradient(var(--c),var(--c)) 0 0/8px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1px 8px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 0/8px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1px 8px no-repeat,
  linear-gradient(var(--c),var(--c)) 0 100%/8px 1px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1px 8px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 100%/8px 1px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1px 8px no-repeat}
.rev q{display:block;quotes:"\"" "\"";font:400 17px/1.5 var(--f-body);color:var(--cream);padding-bottom:20px;border-bottom:1px solid rgba(250,245,234,.12);white-space:pre-line}
.rev b{display:block;font:400 22px/1.5 var(--f-body);letter-spacing:.01em;color:var(--cream);margin-top:13px}
@media (max-width:640px){.rev{width:min(280px,74vw);padding:12px 16px 16px}.rev q{font-size:14px;padding-bottom:14px}.rev b{font-size:18px}.rev .av,.rev .av img{width:50px;height:50px}.rev .av{margin-bottom:14px}}
.stars{display:flex;gap:10px;margin-top:0}
.stars svg{width:18px;height:18px;fill:var(--gold)}
.center{display:flex;justify-content:center;margin-top:10px}
.center .btn{min-width:220px;min-height:50px;justify-content:center}
/* room between the tallest review card and the Google review button */
.glow-box .center{margin-top:clamp(36px,4vw,56px)}
/* reviews page: masonry */
.rev-masonry{columns:3 320px;column-gap:24px;margin-top:60px}
.rev-masonry .rev{width:auto;break-inside:avoid;margin-bottom:24px;background:rgba(0,0,0,.12)}

/* ---------- FAQ ---------- */
.faq{padding-block:clamp(56px,6.5vw,95px);background:linear-gradient(180deg,rgba(28,0,0,0),rgba(10,0,0,.55) 50%,rgba(28,0,0,0))}
.faq-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr;gap:28px}}
.faq h2{font-size:clamp(4rem,9vw,8rem);color:var(--gold);line-height:.9}
.faq-side p{margin-top:16px;font-size:clamp(1.2rem,1.6vw,1.6rem);max-width:11em;line-height:1.2}
@media (min-width:861px){.faq-side{position:sticky;top:120px}}
.faq details{border-bottom:1px solid rgba(250,245,234,.16)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:22px 0;font-size:clamp(1.05rem,1.4vw,1.3rem);transition:color .3s}
.faq summary:hover{color:var(--gold)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1;transition:transform .5s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details.is-closing summary::after{transform:none}
.faq summary:focus{outline:none}
.faq summary:focus-visible{outline:none;color:var(--gold)}
.faq .a{overflow:hidden}
.faq .a>div{color:var(--muted);display:flex;flex-direction:column;gap:10px;max-width:62ch}
.faq .a>div>*:last-child{margin-bottom:24px}
.faq .a a{color:var(--gold)}

/* ---------- closing + footer ---------- */
.closing{position:relative;overflow:hidden;padding-block:clamp(64px,7vw,110px);text-align:center}
/* faint photo glow behind the closing text: exactly the section's box (no parallax) with a mask that reaches
   zero before every edge, so it never shows a straight edge or spills into the footer */
.closing-bg{position:absolute;inset:0;background:url(reel.jpg) center/cover;opacity:.16;filter:grayscale(.5);-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 45%,rgba(0,0,0,.55) 78%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 45%,rgba(0,0,0,.55) 78%,transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.closing .wrap{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center}
/* same heading as the Contact planner: "Plan your shoot." + "See the price before you message." */
.closing .plan-title{font-size:clamp(2.6rem,5.4vw,5rem);line-height:1;color:var(--gold)}
.closing .plan-sub{margin:clamp(2px,.4vw,6px) auto 30px}
footer{border-top:1px solid var(--line);padding-block:38px calc(70px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.85) 100%)}
/* centered like the original: logo, then one row of links (current page in gold, IG/FB with their icons), then the copyright */
footer .wrap{display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;font:500 15px var(--f-body);letter-spacing:-.02em}
footer .foot-logo{opacity:1}
footer .foot-logo img{height:30px;width:auto;display:block}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 36px}
footer a{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--cream);transition:color .3s}
footer a:hover{color:var(--gold)}
footer a[aria-current="page"]{color:var(--gold)}
footer nav svg{width:22px;height:22px;fill:currentColor;flex:none}
footer small{color:var(--muted);font-size:12px}
@media (max-width:560px){footer{padding-block:26px calc(22px + env(safe-area-inset-bottom,0px))}footer .wrap{gap:14px}footer nav{gap:8px 22px}footer .foot-logo img{height:24px}}

/* ---------- sticky planner pill ---------- */
.pill{position:fixed;z-index:60;right:max(18px,calc(env(safe-area-inset-right,0px) + 18px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:14px;padding:8px 8px 8px 18px;background:rgba(20,0,0,.94);border:1px solid rgba(199,168,109,.6);text-decoration:none;box-shadow:0 20px 50px rgba(0,0,0,.5);transition:transform .6s var(--ease),opacity .6s}
.pill.off{transform:translateY(160%);opacity:0;pointer-events:none}
.pill span{font-size:13px}
.pill span b{color:var(--gold);font-weight:500}
.pill i{font-style:normal;color:var(--black);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;font-weight:600}
@media (max-width:520px){.pill{left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));justify-content:space-between}}

/* ---------- inner page heads ---------- */
.page-head{padding-top:clamp(130px,16vw,190px);padding-bottom:clamp(30px,4vw,50px);text-align:center}
.page-head p{color:var(--muted);margin:18px auto 0;max-width:52ch}

/* ---------- ABOUT page ---------- */
.behind{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;background:#7a6234}
/* as on the original: the photo runs to its edge (no fade into the red) and the section has softly rounded corners */
.behind{background:transparent;border-radius:22px;isolation:isolate}
.behind-bg{position:absolute;inset:-8% 0;background:#7a6234 url(behind.jpg) 18% 30%/cover no-repeat;will-change:transform}
.behind::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(40,25,5,0) 35%,rgba(30,18,4,.35) 100%)}
.behind .wrap{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1fr 1fr;padding-block:140px 90px}
.behind-text{grid-column:2;display:flex;flex-direction:column;gap:22px;max-width:560px}
.behind h1{font:400 clamp(2.4rem,4vw,3.6rem)/1.05 var(--f-body);letter-spacing:-.04em;color:var(--white)}
.behind p{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.55;color:var(--white)}
.behind .avail{margin-top:30px;font-size:.95rem;opacity:.9}
/* the second paragraph simply starts on a new line: no gap (cancels the column's 22px spacing) */
.behind .about-p2{margin-top:-22px}
@media (max-width:860px){.behind{align-items:flex-end}.behind .wrap{grid-template-columns:1fr;padding-top:55vh}.behind-text{grid-column:1}}
/* mobile About: photo only in the top part, text on solid red below it */
@media (max-width:860px){
  .behind{background:var(--red);align-items:flex-start}
  .behind-bg{inset:0 0 auto 0;height:72svh;background-size:auto 100%;background-position:min(0px,calc(50vw - 28.42svh)) top;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .behind::after{display:none}
  .behind .wrap{padding-top:62svh}
}
/* Values (original 1:1 at 1920 px): sticky heading at 150px, four 700×136 cards sticky at 300px with a fixed tilt,
   100px apart in the flow, so while scrolling each card catches up with the one before and they pile up. */
.values{position:relative;display:flex;flex-direction:column;align-items:center;gap:100px;padding:95px 40px 136px}
.values-h{position:sticky;top:150px;z-index:1;margin:0;font:400 26px/1.2 var(--f-body);color:var(--gold);text-align:center}
/* level at rest; .tilt (set from site.js) eases to the card's angle like the original's spring (~65% at 0.3s, settled by ~1s) */
/* cards at 80% of the original's 700×136 / 80px (as the original appears at the 80% zoom it is viewed at) */
.vcard{position:sticky;top:300px;z-index:1;width:560px;max-width:100%;transform:rotate(0deg);transition:transform 1s cubic-bezier(.3,.65,.25,1)}
.vcard.tilt{transform:rotate(var(--rot,0deg))}
@media (prefers-reduced-motion:reduce){.vcard{transition:none}}
.vcard-face{position:relative;display:flex;justify-content:center;align-items:center;padding:22px;overflow:hidden;background:conic-gradient(#967f54 0deg,#1d0000 360deg)}
.vcard-face::after{content:"";position:absolute;inset:0;border:1px solid rgba(199,168,109,.5);pointer-events:none}
.vcard-face p{width:100%;margin:0;font:500 64px/1 var(--f-clash);letter-spacing:-.04em;color:var(--gold);text-align:center;white-space:pre-wrap}
@media (max-width:760px){
  .values{gap:70px;padding:80px 16px 110px}
  .values-h{top:96px;font-size:21px}
  .vcard{top:190px}
  .vcard-face{padding:22px 16px}
  .vcard-face p{font-size:clamp(2.1rem,10.5vw,64px)}
}
/* Production kit (original "Gears" section, measured, drawn at 80%) */
.kit{position:relative;display:flex;flex-direction:column;align-items:center;padding:44px 32px;background:linear-gradient(180deg,#1d0000 1.3%,rgba(38,0,0,0) 100%);box-shadow:0 -2px 40px -2px rgba(0,0,0,.7)}
.kit-box{width:1360px;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;background:linear-gradient(180deg,#1d0000 0%,#260000 100%)}
.kit h2{width:100%;margin:0;font:400 84px/67px var(--f-display);letter-spacing:-3.36px;color:var(--gold);text-align:center}
.kit-list{width:100%;display:grid;grid-template-columns:repeat(4,292px);column-gap:32px;row-gap:40px;justify-content:center;padding:72px 48px;background:radial-gradient(50% 50% at 50% 50%,rgba(199,168,109,.15) 0%,#1f0000 100%);border-radius:22px;box-shadow:0 1px 40px rgba(0,0,0,.5)}
/* columns: the earlier look (small spaced gold headings, cream items, 10px between lines) */
.kit-col{display:flex;flex-direction:column;min-width:0}
.kit h3{margin:0 0 14px;font:500 12px var(--f-body);letter-spacing:.2em;color:var(--gold)}
.kit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.kit li{display:flex;align-items:flex-start;gap:10px;font:400 1rem/1.6 var(--f-body);color:var(--cream)}
.kit li svg{width:17px;height:17px;flex:none;margin-top:.2em;fill:var(--gold)}
.kit li small{display:block;color:var(--muted);font-size:.82rem}
@media (max-width:1400px){.kit-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:960px){.kit h2{font-size:clamp(2.6rem,9vw,84px);line-height:1}.kit-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kit{padding:40px 16px}.kit-list{grid-template-columns:1fr;padding:32px 24px}}

/* ---------- ALBUM pages ---------- */
.album-hero{padding-top:clamp(100px,12vw,130px)}
/* title sits above the video, never on the picture */
.album-head{max-width:1100px;margin:0 auto clamp(22px,2.6vw,34px);text-align:center}
.album-head small{display:block;font:500 11px var(--f-body);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.album-head h1{font-size:clamp(2.2rem,5.2vw,4.6rem);line-height:1;letter-spacing:-.01em;color:var(--gold);overflow-wrap:anywhere}
/* cover = YouTube poster: click plays the video in place (site.js swaps in the player) */
.album-cover{position:relative;max-width:1100px;margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.9);background:#000}
.album-cover img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.album-cover iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Play button: quiet and minimal — a thin cream circle with a slim triangle, no text.
   Hover: a gold line draws itself around the circle, the triangle turns gold and the picture dims slightly. */
.yt-play{--s:clamp(78px,7vw,104px);position:absolute;inset:0;margin:auto;width:var(--s);height:var(--s);padding:0;border:1px solid rgba(250,245,234,.6);border-radius:50%;background:rgba(0,0,0,.22);color:var(--cream);cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;transition:transform .8s var(--ease),border-color .6s,background .6s}
.yt-arc{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);transform:rotate(-90deg);overflow:visible;pointer-events:none}
.yt-arc circle{fill:none;stroke:var(--gold);stroke-width:1.4;stroke-dasharray:308;stroke-dashoffset:308;transition:stroke-dashoffset 1s var(--ease)}
.yt-tri{width:26%;height:26%;margin-left:6%;fill:currentColor;transition:fill .5s,transform .7s var(--ease)}
.album-cover:hover img{transform:scale(1.03);filter:brightness(.82)}
.album-cover:hover .yt-play{transform:scale(1.06);border-color:rgba(250,245,234,.15);background:rgba(0,0,0,.32)}
.album-cover:hover .yt-arc circle{stroke-dashoffset:0}
.album-cover:hover .yt-tri{fill:var(--gold);transform:scale(1.1)}
.yt-play:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(199,168,109,.6)}
.yt-play:active{transform:scale(.97)}
.album-cover.playing .yt-play{display:none}
.yt-note{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:max-content;max-width:88%;margin:0;padding:10px 16px;background:rgba(10,0,0,.82);border:1px solid rgba(199,168,109,.5);color:var(--cream);font-size:.9rem;text-align:center;pointer-events:none}
.specs{max-width:1100px;margin:44px auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.specs div{padding:18px 18px 18px 0;border-bottom:1px solid var(--line);min-width:0}
.specs dt{font:500 11px var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.specs dd{margin:0;font-size:.95rem;overflow-wrap:anywhere}
.specs .wide{grid-column:span 2}
@media (max-width:760px){.specs{grid-template-columns:repeat(2,minmax(0,1fr))}.specs .wide{grid-column:span 2}}
.gallery{max-width:1100px;margin:60px auto 0;columns:2 340px;column-gap:16px}
/* label above the stills, so it's clear they are frames from the video */
.stills-head{max-width:1100px;margin:64px auto 0;display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.stills-head h2{font:500 11px var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.stills-head p{margin:0;font-size:.88rem;color:var(--muted)}
.stills-head+.gallery{margin-top:20px}
/* stills are just pictures (no click-to-enlarge) */
.gallery figure{display:block;width:100%;margin:0 0 16px;background:#100;break-inside:avoid;overflow:hidden;border-radius:6px}
.gallery img{width:100%;height:auto;display:block}
/* More projects: a strip of the other projects (starting with the next one) that you swipe or drag sideways,
   with arrow buttons on desktop. Native horizontal scroll + snap, so touch swiping is smooth; mouse drag in site.js. */
.album-nav{max-width:1100px;margin:70px auto 0;padding-block:34px 90px;border-top:1px solid var(--line)}
.more-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.more-head small{font:500 11px var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
/* the row: slim chevrons either side of an endless strip that drifts slowly (site.js) and can be dragged/swiped */
.more-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(10px,1.6vw,22px)}
.more-arrow{align-self:start;margin-top:var(--arrow-top,80px);width:28px;height:36px;padding:0;border:0;background:none;color:rgba(250,245,234,.55);cursor:pointer;display:grid;place-items:center;transition:color .35s,transform .45s var(--ease)}
.more-arrow svg{width:12px;height:28px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.more-arrow:hover{color:var(--gold)}
.more-arrow.prev:hover{transform:translateX(-3px)}
.more-arrow.next:hover{transform:translateX(3px)}
.more-arrow:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
/* extra room above/below (offset by negative margins) so a lifted card isn't clipped by the scroll box */
.more-track{display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;cursor:grab;padding-block:44px 40px;margin-block:-44px -40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.more-track::-webkit-scrollbar{display:none}
.more-track.dragging{cursor:grabbing}
.more-track.dragging .more-card{pointer-events:none}
.more-card{flex:0 0 clamp(230px,31%,340px);display:flex;flex-direction:column;gap:10px;text-decoration:none;user-select:none;-webkit-user-select:none;outline:none}
.more-card:focus-visible .more-ph{box-shadow:0 0 0 2px var(--gold)}
.more-ph{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#100;box-shadow:0 18px 50px -24px rgba(0,0,0,.9);transition:transform .7s cubic-bezier(.2,1.25,.35,1),box-shadow .7s var(--ease)}
.more-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s var(--ease)}
.more-card,.more-title,.more-card small{transition:opacity .6s var(--ease),color .4s}
/* Thin gold line that draws itself clockwise around the hovered card's picture: a 1px ring (border-box minus
   content-box mask) painted with a conic gradient whose sweep angle (--sweep) animates 0 -> 360deg.
   It sits on top of the picture, so the zooming image never moves or clips it. */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.more-ph::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;--sweep:0deg;background:conic-gradient(from 0deg,var(--gold) var(--sweep),transparent 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);transition:--sweep 1s var(--ease)}
/* The "chosen" card (mouse only): site.js marks it .is-active (and the strip .has-active) once the pointer rests on it,
   then glides it to the centre. Driven by JS, not :hover, so it stays chosen while it slides under a still cursor.
   The others dim; the chosen one stays bright, rises, gets the gold line and a soft gold glow. */
.more-title{display:block;transition:opacity .6s var(--ease),color .4s,transform .7s cubic-bezier(.2,1.25,.35,1)}
.more-track.has-active .more-card .more-ph img{filter:brightness(.42) saturate(.8)}
.more-track.has-active .more-card .more-title,.more-track.has-active .more-card small{opacity:.45}
.more-track .more-card.is-active .more-ph img{filter:none;transform:scale(1.05)}
.more-track .more-card.is-active .more-title,.more-track .more-card.is-active small{opacity:1}
.more-card.is-active .more-title{color:var(--gold);transform:translateY(-4px)}
.more-card.is-active .more-ph::after{--sweep:360deg}
.more-card.is-active .more-ph{transform:translateY(-10px) scale(1.035);box-shadow:0 30px 60px -22px rgba(0,0,0,.95),0 0 28px 2px rgba(199,168,109,.26),0 0 60px 6px rgba(199,168,109,.12)}
/* site body font (Manrope covers Latin and Cyrillic alike, so mixed titles don't switch typefaces mid-line) */
.more-title{font:500 1.02rem/1.3 var(--f-body);letter-spacing:-.01em;color:var(--cream);transition:color .4s}
.more-card small{font-size:.8rem;color:var(--muted)}
@media (max-width:640px){.more-card{flex-basis:78%}.more-row{gap:6px}.more-arrow{width:18px}}

/* ---------- CONTACT page ---------- */
.contact-tiles{max-width:560px;margin:50px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* Contact: "Let's talk" + a short line on the left, a clean editorial list of ways to reach on the right.
   Each row is one big link; on hover the value turns gold, the arrow nudges and a gold line draws under the row. */
.contact-hero{padding:clamp(130px,15vw,190px) 0 clamp(50px,6vw,90px)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,110px);align-items:center;max-width:1080px}
.contact-intro .page-title{text-align:left}
.contact-intro p{margin-top:20px;max-width:34ch;font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.6;color:rgba(250,245,234,.76)}
.contact-down{display:inline-flex;gap:8px;margin-top:28px;font-size:14px;color:var(--gold);text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(199,168,109,.4);transition:border-color .3s,color .3s}
.contact-down:hover{color:var(--cream);border-color:var(--cream)}
/* rows: small gold label on top, the address/number large underneath, arrow at the right edge */
.contact-list{list-style:none;margin:0;padding:0}
.contact-list>li{border-bottom:1px solid var(--line)}
.contact-list>li>a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 18px;padding:18px 2px 16px;text-decoration:none;color:var(--cream)}
.contact-list>li>a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.contact-list>li>a:hover::after,.contact-list>li>a:focus-visible::after{transform:scaleX(1)}
.contact-list small{grid-column:1/-1;font:500 10.5px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.8}
.contact-list .v{font:400 clamp(1.05rem,1.45vw,1.3rem)/1.3 var(--f-body);letter-spacing:-.015em;overflow-wrap:anywhere;transition:color .35s}
.contact-list i{font-style:normal;font-size:1rem;color:var(--gold);opacity:.55;padding-bottom:4px;transition:transform .5s var(--ease),opacity .3s}
.contact-list>li>a:hover .v{color:var(--gold)}
.contact-list>li>a:hover i{opacity:1;transform:translate(3px,-3px)}
.contact-list>li>a:focus-visible{outline:none}
/* social: label, then Instagram and Facebook side by side with their icons */
.contact-social{padding:18px 2px 18px;display:flex;flex-direction:column;gap:12px}
.contact-social div{display:flex;flex-wrap:wrap;gap:10px}
.contact-social a{display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 12px;border:1px solid rgba(250,245,234,.22);border-radius:999px;color:var(--cream);text-decoration:none;font-size:13.5px;transition:border-color .35s,color .35s,background .35s}
.contact-social a svg{width:16px;height:16px;fill:currentColor}
.contact-social a:hover{border-color:var(--gold);color:var(--gold);background:rgba(199,168,109,.08)}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .contact-list>li>a{padding:20px 2px 18px}
}
.tile{background:var(--glass);padding:22px;text-align:center;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px;transition:background .4s;min-width:0}
.tile:hover{background:rgba(255,255,255,.15)}
.tile.wide{grid-column:span 2}
.tile small{font:500 10px var(--f-body);letter-spacing:.2em;color:var(--muted)}
.tile span,.tile .tile-link{font-size:clamp(1rem,2vw,1.2rem);overflow-wrap:anywhere}
/* email (mailto:) and phone (tel:) read as links: cream text, gold underline that grows on hover */
.tile .tile-link{color:var(--cream);text-decoration:underline;text-decoration-color:rgba(199,168,109,.45);text-decoration-thickness:1px;text-underline-offset:5px;transition:color .3s,text-decoration-color .3s}
.tile .tile-link:hover,a.tile:hover .tile-link{color:var(--gold);text-decoration-color:var(--gold)}
.tile svg{width:22px;height:22px;fill:var(--gold)}
.tile .copy{background:none;border:0;color:var(--gold);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* "Send with" menu shown when an email link is clicked (site.js) */
.mail-menu{position:fixed;z-index:120;min-width:210px;padding:8px;background:#1a0505;border:1px solid rgba(199,168,109,.45);box-shadow:0 24px 60px -18px rgba(0,0,0,.9);display:flex;flex-direction:column;opacity:0;transform:translateY(-6px);transition:opacity .25s var(--ease),transform .35s var(--ease)}
.mail-menu[hidden]{display:none}
.mail-menu.open{opacity:1;transform:none}
.mail-menu small{font:500 10.5px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:6px 10px 8px}
.mail-menu button{all:unset;cursor:pointer;padding:10px 12px;font:400 14.5px var(--f-body);color:var(--cream);transition:background .25s,color .25s}
.mail-menu button:hover,.mail-menu button:focus-visible{background:rgba(199,168,109,.14);color:var(--gold)}

/* ---------- PLANNER ---------- */
.plan{padding-block:clamp(90px,10vw,140px) clamp(80px,10vw,120px);scroll-margin-top:70px}
/* "Plan your shoot." is the headline; the promise sits under it, smaller, in the body typeface */
.plan-head{text-align:center;margin:0 auto clamp(44px,5vw,70px)}
.plan-title{font-size:clamp(2.8rem,6vw,5.6rem);line-height:1;color:var(--gold);max-width:none}
.plan-sub{margin-top:clamp(2px,.4vw,6px);font:400 clamp(1rem,1.5vw,1.3rem)/1.4 var(--f-body);letter-spacing:.01em;color:rgba(250,245,234,.78)}
.eyebrow{display:block;font:500 12px var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.plan-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:960px){.plan-grid{grid-template-columns:1fr}}
/* Three steps that read straight down: "01  What are we making?" heading on top, its controls right below.
   No side label column, so the eye never zig-zags. */
#planner{counter-reset:step}
.step{counter-increment:step;border-top:1px solid var(--line);padding-block:34px}
.step:first-child{border-top:0;padding-top:0}
.step-h{display:flex;align-items:baseline;gap:14px;margin-bottom:20px}
.step-h::before{content:counter(step,decimal-leading-zero);font:400 1.35rem/1 var(--f-num);color:var(--gold);opacity:.75;min-width:1.6em}
.step-h h3{font:500 clamp(1.1rem,1.4vw,1.28rem)/1.25 var(--f-body);letter-spacing:-.01em;color:var(--cream)}
.types{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:10px}
.type{position:relative;cursor:pointer}
.type input{position:absolute;opacity:0;pointer-events:none}
.type .box{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:20px 18px 18px;background:var(--glass);border:1px solid rgba(250,245,234,.08);transition:border-color .3s,background .3s,transform .4s var(--ease)}
/* a radio dot in the corner: empty ring, gold-filled with a tick once chosen */
.type .box::after{content:"";position:absolute;top:14px;right:14px;width:16px;height:16px;border-radius:50%;border:1px solid rgba(250,245,234,.35);transition:background .3s,border-color .3s}
.type input:checked+.box::after{border-color:var(--gold);background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%231d0000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.type:hover .box{background:rgba(255,255,255,.12)}
.type input:checked+.box{border-color:var(--gold);background:linear-gradient(160deg,rgba(199,168,109,.2),rgba(255,255,255,.06) 70%)}
.type input:focus-visible+.box{outline:2px solid var(--gold);outline-offset:2px}
.type .nm{font-family:var(--f-display);font-size:1.4rem;line-height:1.1;overflow-wrap:anywhere;padding-right:20px}
.type .fr{font-size:13px;color:rgba(250,245,234,.7)}
.type .fr b{color:var(--gold);font-weight:500}
@media (max-width:600px){
  .types{grid-template-columns:1fr}
  .type .box{padding:16px 46px 16px 16px;gap:6px}
  .type .nm{font-size:1.3rem;overflow-wrap:normal}
}
.opts{display:flex;flex-direction:column;gap:26px}
.opt-row{display:flex;flex-wrap:wrap;gap:16px 22px;align-items:center}
.opt-label-top{margin-bottom:12px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);background:rgba(0,0,0,.2);border-radius:999px;overflow:hidden}
.stepper button{width:46px;height:46px;background:none;border:0;color:var(--cream);font-size:1.2rem;cursor:pointer;transition:background .3s}
.stepper button:hover:not(:disabled){background:rgba(199,168,109,.15)}
.stepper button:disabled{opacity:.3;cursor:default}
.stepper output{min-width:50px;text-align:center;font:500 1.2rem var(--f-body);color:var(--gold);font-variant-numeric:tabular-nums}
.opt-label{font-size:15px}
.opt-label small{display:block;color:rgba(250,245,234,.62);font-size:13px;margin-top:2px}
.toggle{display:inline-flex;align-items:center;gap:14px;cursor:pointer;font-size:15px;padding-top:22px;border-top:1px dashed rgba(250,245,234,.12)}
.toggle small{display:block;color:rgba(250,245,234,.62);font-size:13px;margin-top:2px}
.toggle input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:26px;background:rgba(250,245,234,.15);position:relative;cursor:pointer;transition:background .3s;margin:0;flex:none}
.toggle input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--cream);transition:transform .4s var(--ease)}
.toggle input:checked{background:var(--gold)}
.toggle input:checked::after{transform:translateX(20px);background:var(--black)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0}
.chip span{display:inline-block;padding:.6em 1em;border:1px solid var(--line);font-size:14px;cursor:pointer;transition:all .3s}
.chip input:checked+span{border-color:var(--gold);color:var(--gold);background:rgba(199,168,109,.1)}
.chip input:focus-visible+span{outline:2px solid var(--gold)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.fields .full{grid-column:1/-1}
@media (max-width:600px){.fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field span,.field>label{font-size:13.5px;color:rgba(250,245,234,.78)}
/* date: typed as dd.mm.yyyy (auto dots, limits) with a calendar button that opens the browser's own picker */
.datebox{position:relative}
.datebox #f-date{padding-right:48px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.date-pick{position:absolute;top:0;right:0;bottom:0;width:46px;display:grid;place-items:center;background:none;border:0;color:rgba(250,245,234,.7);cursor:pointer;transition:color .3s}
.date-pick:hover{color:var(--gold)}
.date-pick svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
#f-date-native{position:absolute;right:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.date-err{min-height:0;font-size:12.5px;color:#e8a27a}
.date-err:empty{display:none}
.datebox.bad #f-date{border-color:#c9785a}
.field input,.field textarea{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line);color:var(--cream);font:inherit;font-size:15px;padding:13px 14px;border-radius:0;transition:border-color .3s}
.field textarea{min-height:100px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:rgba(250,245,234,.35)}
.sheet{position:sticky;top:calc(env(safe-area-inset-top,0px) + 96px);background:rgba(255,255,255,.06);border:1px solid rgba(199,168,109,.35);padding:28px;display:flex;flex-direction:column;gap:20px;min-width:0;box-shadow:0 30px 80px -30px #000}
.sheet-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.lines li{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed rgba(250,245,234,.14);padding-bottom:10px}
.lines li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.lines li.note span:last-child{color:var(--muted);white-space:normal}
/* call sheet reads: what it is -> price -> what's in it -> send. The message itself folds away until asked for. */
.total{display:flex;justify-content:space-between;align-items:end;gap:12px;padding-bottom:18px;border-bottom:1px solid rgba(199,168,109,.25)}
.total small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.brief-wrap summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--gold);padding:4px 0}
.brief-wrap summary::-webkit-details-marker{display:none}
.brief-wrap summary::after{content:"";width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease)}
.brief-wrap[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.brief-wrap summary:hover{color:var(--cream)}
.brief-wrap .brief{margin-top:12px}
.total b{font-family:var(--f-num);font-weight:400;font-size:clamp(2.8rem,5vw,3.8rem);color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;transition:transform .3s var(--ease)}
.total b.bump{transform:scale(1.08)}
.fine{font-size:12.5px;color:var(--muted);line-height:1.5}
/* the message preview: the site's own typeface, like a written note rather than code */
.brief{background:rgba(0,0,0,.28);border:1px solid var(--line);padding:18px 20px;font:400 14.5px/1.75 var(--f-body);letter-spacing:.005em;white-space:pre-wrap;color:var(--cream);max-height:260px;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(199,168,109,.45) transparent}
.send{display:grid;gap:10px}
.send .btn{justify-content:center;width:100%}
.mail-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.mail-row code{user-select:all;color:var(--cream);font-family:inherit}
.linkbtn{background:none;border:0;color:var(--gold);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:0}
.toast{font-size:13px;color:var(--gold);min-height:1.2em}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js [data-r],html.js [data-r="img"],html.js [data-r="img"] img,html.js .split .w>span{opacity:1;transform:none;filter:none;clip-path:none}}
 

/* phones/tablets: no volume control, the reel plays at a fixed 25% once the visitor taps anywhere */
@media (hover:none),(max-width:860px){.vol{display:none}}