:root{
  --ink:#0b0b0c; --ink2:#141416; --line:rgba(255,255,255,.12);
  --paper:#f2efe9; --mute:#9a958d; --red:#ff2a3d; --vio:#a24bff;
  --gold:#c9a96a; --gold2:#e6d2a3; --wed:#120e0a;
  --disp:"Clash Display",system-ui,sans-serif;
  --body:"Archivo",system-ui,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{background:var(--ink);color:var(--paper);font:400 16px/1.6 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}

.kicker{font:500 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.sec-head{padding:0 var(--pad);margin-bottom:clamp(32px,5vw,64px)}
.sec-head h2,.about h2{font:600 clamp(40px,7vw,104px)/.92 var(--disp);letter-spacing:-.02em}

.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font:500 15px/1 var(--body);cursor:pointer;border:1px solid transparent;transition:transform .25s,background .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:#fff}
.btn--ghost{border-color:rgba(255,255,255,.35);color:var(--paper)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold2)}
.btn--gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#1a130b}

/* bar */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);transition:background .35s,padding .35s,backdrop-filter .35s}
.bar.is-solid{background:rgba(11,11,12,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.bar__logo{font:700 22px/1 var(--disp);letter-spacing:-.01em}
.bar__nav{display:flex;gap:30px;align-items:center;font-size:14px}
.bar__nav a{opacity:.8;transition:opacity .2s}
.bar__nav a:hover{opacity:1}
.bar__nav a[href="#weddings"]:hover{color:var(--gold2)}
.bar__cta{opacity:1!important;padding:10px 18px;border:1px solid rgba(255,255,255,.3);border-radius:999px}
.bar__cta:hover{background:var(--paper);color:var(--ink)}
.bar__menu{display:none;background:none;border:0;width:36px;height:36px;cursor:pointer;position:relative}
.bar__menu span{position:absolute;left:7px;right:7px;height:2px;background:var(--paper);transition:transform .3s}
.bar__menu span:first-child{top:13px}.bar__menu span:last-child{top:21px}
.bar.is-open .bar__menu span:first-child{transform:translateY(4px) rotate(45deg)}
.bar.is-open .bar__menu span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* names marquee */
.names{border-block:1px solid var(--line);overflow:hidden;padding:22px 0}
.names__track{display:flex;width:max-content;animation:marq 32s linear infinite}
.names span{font:500 clamp(22px,3vw,40px)/1 var(--disp);padding:0 34px;white-space:nowrap;color:#d9d4cb}
.names span::after{content:"✦";font-size:.5em;color:var(--red);margin-left:68px;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

/* work */
.work{padding:clamp(80px,12vw,160px) 0 clamp(60px,8vw,120px)}
.work__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);padding:0 var(--pad)}
.proj{position:relative;cursor:pointer;grid-column:span 6;opacity:0;transform:translateY(40px);transition:opacity 1s,transform 1s cubic-bezier(.2,.7,.2,1)}
.proj.in{opacity:1;transform:none}
.proj:nth-child(1){grid-column:1/8}
.proj:nth-child(2){grid-column:8/13;margin-top:clamp(60px,12vw,200px)}
.proj:nth-child(3){grid-column:2/7}
.proj:nth-child(4){grid-column:7/13;margin-top:clamp(40px,8vw,140px)}
.proj__media{position:relative;overflow:hidden;border-radius:6px;aspect-ratio:4/5;background:var(--ink2)}
.proj:nth-child(1) .proj__media,.proj:nth-child(4) .proj__media{aspect-ratio:5/6}
.proj__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.proj__media img+img{opacity:0}
.proj:hover .proj__media img{transform:scale(1.04)}
.proj:hover .proj__media img+img{opacity:1}
.proj__count{position:absolute;top:14px;right:14px;font:500 11px/1 var(--mono);letter-spacing:.1em;background:rgba(11,11,12,.6);backdrop-filter:blur(6px);padding:8px 10px;border-radius:999px}
.proj__meta{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px;gap:12px}
.proj__meta h3{font:600 clamp(24px,2.6vw,38px)/1 var(--disp);letter-spacing:-.01em}
.proj__meta span{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.proj__arrow{display:inline-block;transition:transform .3s}
.proj:hover .proj__arrow{transform:translateX(6px)}

/* services */
.services{padding:clamp(60px,9vw,130px) 0;border-top:1px solid var(--line)}
.svc{list-style:none;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.svc li{padding-block:34px 40px;padding-inline:0 26px;border-inline-end:1px solid var(--line);margin-inline-end:26px;transition:color .3s}
.svc li:last-child{border-inline-end:0;margin-inline-end:0}
.svc__n{font:500 12px/1 var(--mono);color:var(--red);letter-spacing:.1em}
.svc h3{font:600 26px/1.05 var(--disp);margin:44px 0 14px}
.svc p{color:#b9b3aa;font-size:15px}

/* weddings */
.wed{position:relative;background:var(--wed);padding:clamp(100px,14vw,190px) var(--pad);overflow:hidden;text-align:center;color:#efe6d6}
.wed::before{content:"";position:absolute;inset:0 0 auto;height:200px;background:linear-gradient(var(--ink),transparent)}
.wed__glow{position:absolute;left:50%;top:38%;width:min(1100px,140vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(201,169,106,.22),rgba(201,169,106,.05) 45%,transparent 68%);pointer-events:none;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.75}}
.wed>*:not(.wed__glow){position:relative}
.wed__kicker{font:400 clamp(14px,1.4vw,18px)/1 var(--serif);letter-spacing:.6em;text-transform:uppercase;color:var(--gold2);padding-left:.6em}
.wed__title{font:400 clamp(64px,13vw,200px)/.95 var(--serif);letter-spacing:.14em;text-transform:uppercase;margin:18px 0 14px;padding-left:.14em;background:linear-gradient(180deg,#f6ead0,var(--gold) 70%,#8a6a3a);-webkit-background-clip:text;background-clip:text;color:transparent}
.wed__sub{font:500 12px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:#a8977c}
.wed__lede{max-width:640px;margin:46px auto 0;font:italic 400 clamp(20px,2.1vw,27px)/1.45 var(--serif);color:#e6dac4}
.wed__films{display:grid;grid-template-columns:1fr .8fr 1fr;gap:clamp(14px,2vw,28px);align-items:center;max-width:1240px;margin:clamp(56px,7vw,90px) auto 0}
.film{opacity:0;transform:translateY(40px);transition:opacity 1.2s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.film.in{opacity:1;transform:none}
.film:nth-child(2){transition-delay:.15s}.film:nth-child(3){transition-delay:.3s}
.film__frame{position:relative;aspect-ratio:16/9;border:1px solid rgba(201,169,106,.45);border-radius:2px;background:
  radial-gradient(80% 90% at 50% 40%,rgba(201,169,106,.16),transparent 70%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,transparent 2px 5px),#16110c;display:grid;place-items:center;overflow:hidden}
.film--tall .film__frame{aspect-ratio:9/14}
.film__frame::after{content:"";position:absolute;inset:8px;border:1px solid rgba(201,169,106,.18)}
.film__play{width:62px;height:62px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;transition:transform .4s,background .4s}
.film__play::before{content:"";border-left:14px solid var(--gold2);border-block:9px solid transparent;margin-left:4px}
.film:hover .film__play{transform:scale(1.1);background:rgba(201,169,106,.15)}
.film figcaption{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.film figcaption b{font:500 24px/1 var(--serif);letter-spacing:.06em;color:var(--gold2)}
.film figcaption span{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8f806a}
.wed__cta{margin-top:clamp(50px,6vw,80px);display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap}
.wed__ig{font:italic 400 22px/1 var(--serif);color:var(--gold2);border-bottom:1px solid rgba(201,169,106,.4);padding-bottom:4px}
.wed::after{content:"";position:absolute;inset:auto 0 0;height:200px;background:linear-gradient(transparent,var(--ink))}

/* about */
.about{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,100px);align-items:center;padding:clamp(80px,11vw,150px) var(--pad)}
.about__img{border-radius:6px;overflow:hidden;aspect-ratio:3/4;max-height:86vh}
.about__img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08)}
.about__copy p:not(.kicker){color:#c9c3b9;font-size:clamp(16px,1.3vw,19px);max-width:540px;margin-top:22px}
.facts{display:flex;gap:clamp(24px,4vw,56px);margin-top:44px;border-top:1px solid var(--line);padding-top:28px}
.facts dt{font:600 clamp(30px,3.4vw,48px)/1 var(--disp)}
.facts dd{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-top:10px}

/* contact */
.contact{padding:clamp(80px,11vw,150px) 0 clamp(60px,8vw,100px);border-top:1px solid var(--line)}
.form{padding:0 var(--pad);max-width:1000px}
.form__topics{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.form__topics input{position:absolute;opacity:0;pointer-events:none}
.form__topics span{display:block;padding:12px 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;cursor:pointer;transition:all .25s}
.form__topics span:hover{border-color:rgba(255,255,255,.4)}
.form__topics input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.form__topics .gold input:checked+span{background:linear-gradient(135deg,var(--gold2),var(--gold));border-color:var(--gold);color:#1a130b}
.form__topics input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field{display:block;margin-bottom:26px}
.field span{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.25);color:var(--paper);font:400 20px/1.4 var(--body);padding:8px 0 12px;resize:vertical;transition:border-color .25s}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--paper)}
.field ::placeholder{color:#5f5b55}
.form__send{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:8px}
.form__or{color:var(--mute);font-size:14px}
.form__or a{color:var(--paper);border-bottom:1px solid var(--line)}
.form__note{font:500 12px/1.4 var(--mono);color:var(--gold2);margin-top:14px;min-height:1em}
.mgmt{padding:60px var(--pad) 0;color:var(--mute);font-size:14px}
.mgmt a{color:var(--paper)}

.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:28px var(--pad);border-top:1px solid var(--line);color:var(--mute);font-size:13px}
.foot__logo{font:700 18px/1 var(--disp);color:var(--paper)}
.foot__links{display:flex;gap:22px}
.foot__links a:hover{color:var(--paper)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(6,6,7,.94);display:grid;grid-template-columns:80px 1fr 80px;align-items:center;opacity:0;transition:opacity .35s}
.lb.open{opacity:1}
.lb[hidden]{display:none}
.lb__fig{height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 0 30px}
.lb__fig img{max-height:calc(100svh - 130px);max-width:100%;object-fit:contain;border-radius:4px;transition:opacity .25s}
.lb__fig figcaption{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:18px}
.lb__nav,.lb__x{background:none;border:0;color:var(--paper);cursor:pointer;font:300 54px/1 var(--body);opacity:.7;transition:opacity .2s}
.lb__nav:hover,.lb__x:hover{opacity:1}
.lb__x{position:absolute;top:14px;right:24px;font-size:44px}

/* phones */
@media (max-width:900px){
  .svc{grid-template-columns:1fr 1fr}
  .svc li:nth-child(2){border-inline-end:0;margin-inline-end:0}
  .svc li:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:720px){
  .bar__menu{display:block}
  .bar__nav{position:fixed;inset:0;background:rgba(11,11,12,.97);flex-direction:column;justify-content:center;gap:28px;font:600 34px/1 var(--disp);opacity:0;pointer-events:none;transition:opacity .3s}
  .bar.is-open .bar__nav{opacity:1;pointer-events:auto}
  .bar__menu{z-index:2}
  .bar__cta{font:500 18px/1 var(--body);padding:14px 24px}




  .work__grid{grid-template-columns:1fr;gap:44px}
  .proj,.proj:nth-child(n){grid-column:1;margin-top:0}
  .svc{grid-template-columns:1fr}
  .svc li,.svc li:nth-child(n){border-inline-end:0;margin-inline-end:0;border-bottom:1px solid var(--line);padding-inline-end:0}
  .svc h3{margin-top:20px}
  .wed__films{grid-template-columns:1fr;max-width:420px}
  .film--tall .film__frame{aspect-ratio:16/9}
  .about{grid-template-columns:1fr}
  .about__img{max-height:70vh}
  .form__row{grid-template-columns:1fr;gap:0}
  .lb{grid-template-columns:44px 1fr 44px}
  .lb__nav{font-size:40px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .names__track{animation:none}
}
/* ?still = previews: no entrance animations */
.still *,.still *::before,.still *::after{animation-delay:0s!important;animation-duration:0s!important;transition:none!important}
.still .proj,.still .film{opacity:1;transform:none}
.still .fx{height:var(--shot-h,900px);min-height:0}

/*FXCSS*/
/* showreel */
.reel{padding:clamp(80px,11vw,150px) 0;border-top:1px solid var(--line)}
.reel__frame{position:relative;margin:0 var(--pad);aspect-ratio:16/9;max-height:80svh;border-radius:8px;overflow:hidden;display:grid;place-items:center;cursor:pointer;background:
  radial-gradient(60% 80% at 15% 50%,rgba(150,55,255,.35),transparent 70%),
  radial-gradient(60% 80% at 85% 50%,rgba(255,30,60,.3),transparent 70%),#09070c;border:1px solid var(--line)}
.reel__play{width:clamp(70px,8vw,110px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center;transition:transform .4s,background .4s}
.reel__play::before{content:"";border-left:22px solid #fff;border-block:14px solid transparent;margin-left:6px}
.reel__frame:hover .reel__play{transform:scale(1.08);background:rgba(255,255,255,.08)}
.reel__soon{position:absolute;bottom:22px;left:26px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}