/* ==========================================================================
   NABIL — editorial wedding studio (ivory / ink)
   Fonts: Bodoni Moda (display — matches the high-contrast serif in the logo) + Jost (utility)
   NOTE: firebase.json CSP forbids inline styles, so all styling lives here.
   (Calm-motion pass: no parallax, no line masks, one 0.4s opacity reveal, 0.25s menu fade.)
   Sections: 1 tokens · 2 base · 3 header+menu · 4 hero · 5 sections
             6 components · 7 footer/lightbox · 8 reveal · 9 responsive · 10 motion
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --ivory:#f3f0e8; --paper:#e3e4d7; --ink:#242d23; --grey:#454c41; --sage:#a9b4a0; --line:rgba(36,45,35,.18);
  --f1:'Bodoni Moda',Georgia,serif;
  --f2:'Jost',system-ui,sans-serif;
  --pad:clamp(20px,5.2vw,96px);
  --gut:clamp(14px,1.8vw,28px);
  --hh:96px;
  --ease:ease;
  --t:.4s;
  --focus:var(--ink);
}

/* ---------- 2. base ---------- */
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--hh) + 12px);-webkit-text-size-adjust:100%}
body{background:var(--ivory);color:var(--ink);font:300 1.05rem/1.75 var(--f2);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--ivory)}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
main:focus{outline:0}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:var(--ivory);padding:12px 20px;font:400 .8rem var(--f2);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px;outline-color:var(--ivory)}

h1,h2,h3{font-family:var(--f1);font-weight:400;line-height:.98;letter-spacing:-.01em}
h2{font-size:clamp(2.8rem,7.4vw,8rem);font-weight:300}
h3{font-size:clamp(1.6rem,2.2vw,2.3rem)}
.label,.eyebrow{font:400 .8rem/1.4 var(--f2);letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:1.6rem}
.center{text-align:center;margin-top:clamp(2.5rem,5vw,5rem)}

/* buttons */
.pill,.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font:400 .82rem var(--f2);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.pill{min-height:60px;padding:0 44px;background:var(--ink);color:var(--ivory);border:1px solid var(--ink)}
.pill:hover{background:transparent;color:var(--ink)}
.btn{min-height:52px;padding:0 34px;background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn:hover{background:var(--ink);color:var(--ivory)}
.btn.inv{color:var(--ivory);border-color:var(--ivory)}
.btn.inv:hover{background:var(--ivory);color:var(--ink)}
.tlink{font:400 .82rem var(--f2);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:6px 0;border-bottom:1px solid currentColor}

/* ---------- 3. header + menu ---------- */
header{position:fixed;inset:0 0 auto;z-index:70;height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--pad);color:#fff;transition:background-color .3s ease,color .3s ease}
/* soft dark fade behind the transparent header so logo + links stay readable over a pale photo */
header::before{content:"";position:absolute;inset:0 0 -34px;z-index:0;background:linear-gradient(180deg,rgba(20,28,20,.5),rgba(20,28,20,0));pointer-events:none;transition:opacity .3s ease}
header.solid::before,body:not(.home) header::before,header.open::before{opacity:0}
header.solid,body:not(.home) header{background:var(--ivory);color:var(--ink);box-shadow:0 1px 0 var(--line)}
header.open{background:var(--ink);color:var(--ivory);box-shadow:none}
header.solid{height:76px}
.brand{position:relative;z-index:2;display:block;line-height:0}
.brand img{height:62px;width:auto}
header.solid .brand img{height:52px}
.lg-l{filter:drop-shadow(0 1px 10px rgba(0,0,0,.45))}
.lg-d{display:none}
header.solid .lg-l,body:not(.home) header .lg-l{display:none}
header.solid .lg-d,body:not(.home) header .lg-d{display:block}
header.open .lg-l{display:block;filter:none}
header.open .lg-d{display:none}
.burger{position:relative;z-index:2;display:flex;align-items:center;gap:16px;min-height:48px;padding:0 4px;background:none;border:0;color:inherit;cursor:pointer;font:inherit}
.burger .lbl{font:400 .82rem var(--f2);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,.45)}
header.solid .burger .lbl,header.open .burger .lbl,body:not(.home) header .burger .lbl{text-shadow:none}
.burger .ico{position:relative;display:block;width:34px;height:14px;filter:drop-shadow(0 1px 6px rgba(0,0,0,.4))}
.burger i{position:absolute;left:0;width:100%;height:1.5px;background:currentColor}
.burger i:first-child{top:2px}.burger i:last-child{top:11px}
header.open .burger i:first-child{top:6px;transform:rotate(24deg)}
header.open .burger i:last-child{top:6px;transform:rotate(-24deg)}

/* desktop inline navigation (mobile keeps the burger + overlay) */
.hnav{display:none}

#site-nav{position:fixed;inset:0;z-index:1;background:var(--ink);color:var(--ivory);--focus:var(--ivory);padding:calc(var(--hh) + 3vh) var(--pad) 6vh;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
header.open #site-nav{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
.menu-in{display:grid;grid-template-columns:1.6fr 1fr;gap:6vw;align-items:end;min-height:calc(100vh - var(--hh) - 9vh);min-height:calc(100svh - var(--hh) - 9vh);max-width:1700px;margin:auto}
.menu-links{display:flex;flex-direction:column}
.menu-links a{display:flex;align-items:baseline;gap:22px;font:400 clamp(2.8rem,7vw,7.4rem)/1.04 var(--f1);text-decoration:none;padding:.04em 0;opacity:.95}
.menu-links a small{font:400 .82rem var(--f2);letter-spacing:.1em;color:var(--sage);transform:translateY(-.9em);min-width:2.2em}
.menu-links a:hover{opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.menu-links a[aria-current]{font-style:italic}
.menu-side{display:flex;flex-direction:column;align-items:flex-start;gap:44px;padding-bottom:1.4rem}
.menu-side .pill{min-height:68px;padding:0 54px;background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.menu-side .pill:hover{background:transparent;color:var(--ivory)}
.nav-foot{display:flex;flex-wrap:wrap;gap:12px 32px;padding-top:28px;border-top:1px solid rgba(243,240,232,.22);width:100%}
.nav-foot a{font:400 .82rem var(--f2);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--sage);padding:6px 0;transition:color .25s ease}
.nav-foot a:hover{color:var(--ivory)}

@media(min-width:821px){
  .burger,#site-nav{display:none}
  .hnav{display:flex;align-items:center;gap:clamp(18px,2.6vw,42px);position:relative;z-index:2}
  .hnav a:not(.pill){font:400 .86rem var(--f2);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:10px 2px;border-bottom:1px solid transparent;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  header.solid .hnav a,body:not(.home) .hnav a{text-shadow:none}
  .hnav a:not(.pill):hover,.hnav a[aria-current]{border-bottom-color:currentColor}
  .hnav .pill{min-height:46px;padding:0 26px;background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
  .hnav .pill:hover{background:transparent;color:var(--ivory)}
  header.solid .hnav .pill,body:not(.home) .hnav .pill{background:var(--ink);color:var(--ivory);border-color:var(--ink)}
  header.solid .hnav .pill:hover,body:not(.home) .hnav .pill:hover{background:transparent;color:var(--ink)}
}

/* ---------- 4. hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;color:#fff;background:#1c2a1f}
.hero-bg,.hero-bg picture,.hero-bg img{position:absolute;inset:0;width:100%;height:100%}
.hero-bg{z-index:-3;background:#1c2a1f} /* dark-green placeholder until the photo arrives */
.hero-bg img{object-fit:cover;object-position:50% 40%}
/* scrim: keeps white type readable over the pale beach photo */
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,28,20,.45) 0%,rgba(20,28,20,.18) 45%,rgba(20,28,20,.55) 100%)}
.grain{position:absolute;inset:0;z-index:-1;opacity:.16;mix-blend-mode:overlay;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero-in{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px;padding:calc(var(--hh) + 2vh) var(--pad) 10vh}
.hero-h{font-size:clamp(4.6rem,14.6vw,17rem);font-weight:300;line-height:.86;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 30px rgba(10,16,10,.45),0 1px 3px rgba(10,16,10,.35)}
.hero-h .ln{display:block}
.hero-h .l2{padding-left:12vw}
.hero-h .l3{padding-left:3vw;font-style:italic}
.hero-a{padding-bottom:1.2rem}
.pill.inv{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.pill.inv:hover{background:transparent;color:var(--ivory)}
.sheet{background:var(--ivory)}
.ln{display:block}

/* ---------- 5. sections ---------- */
.lede{padding:clamp(90px,15vh,190px) var(--pad) clamp(70px,11vw,160px);max-width:1800px;margin:auto}
.lede-t{font:300 clamp(2.1rem,4.7vw,5rem)/1.1 var(--f1);letter-spacing:-.012em;max-width:19em;margin-bottom:clamp(2.2rem,4vw,4rem)}
.lede-a{display:flex;flex-wrap:wrap;align-items:center;gap:20px 40px}
.lede .label{margin-bottom:2.2rem}

.work{padding:clamp(40px,6vw,90px) var(--pad) clamp(80px,10vw,150px);max-width:1800px;margin:auto}
.work>h2,.films-sec>h2,.quotes-sec>h2,.steps-sec>h2{margin-bottom:clamp(3rem,7vw,8rem)}
.projs{display:grid;gap:clamp(96px,13vw,230px)}
.proj{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.pn{grid-column:1/-1;grid-row:1;display:flex;justify-content:space-between;align-items:baseline;font:italic 400 clamp(1.9rem,3.6vw,3.4rem)/1.1 var(--f1);letter-spacing:-.01em;margin-bottom:clamp(1rem,2vw,2rem)}
.gal-btn{display:block;width:100%;padding:0;border:0;background:var(--paper);cursor:zoom-in;overflow:hidden;position:relative;font:inherit;color:inherit}
.gal-btn picture{display:block}
.gal-btn img{width:100%;height:auto;transition:opacity .25s ease}
.gal-btn:hover img{opacity:.9}
.proj .m{grid-column:4/10;grid-row:2/5}
.proj .l{grid-column:1/4;grid-row:3/5;align-self:end}
.proj .r{grid-column:10/13;grid-row:2/4;margin-top:clamp(40px,9vw,170px)}
.proj.rev .l{grid-column:10/13}
.proj.rev .r{grid-column:1/4}
.proj.rev .pn{flex-direction:row-reverse}
.proj.wide .m{grid-column:2/10;grid-row:2/4}
.proj.wide .l{grid-column:8/13;grid-row:3/5;align-self:end;z-index:1}
.proj.wide .pn{margin-bottom:0}

.films-sec{background:var(--ink);color:var(--ivory);padding:clamp(90px,12vw,190px) var(--pad);--focus:var(--ivory)}
.films-sec .label{color:var(--sage)}
.films-sec h2,.films-sec h3{color:var(--ivory)}
.films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,6vw,110px);max-width:1700px;margin:auto}
.film:nth-child(2){margin-top:clamp(40px,10vw,180px)}
.clip{background:#000;overflow:hidden}
.clip video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.film h3{margin-top:1.4rem;font:italic 300 clamp(1.7rem,2.6vw,2.7rem) var(--f1)}
.films-sec.page{padding-top:clamp(70px,9vw,140px)}
.films-sec.page .films{grid-template-columns:1fr;gap:clamp(70px,9vw,150px)}
.films-sec.page .film,.films-sec.page .film:nth-child(2){margin-top:0;width:min(100%,1100px)}
.films-sec.page .film:nth-child(even){margin-left:auto}
.films-sec>.center{max-width:1700px;margin-inline:auto}

.quotes-sec{padding:clamp(90px,12vw,190px) var(--pad);max-width:1800px;margin:auto}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,72px)}
#quotes figure{border-top:1px solid var(--ink);padding-top:28px}
#quotes blockquote{font:italic 300 clamp(1.6rem,2.2vw,2.3rem)/1.28 var(--f1);margin-bottom:1.6rem}
#quotes cite{font:400 .8rem var(--f2);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--grey)}

.cta{padding:clamp(100px,17vw,260px) var(--pad);text-align:center;border-top:1px solid var(--line)}
.cta h2{font-size:clamp(3.2rem,9.4vw,11rem);line-height:.92;max-width:11em;margin:auto}
.cta .center{margin-top:clamp(2.5rem,5vw,4.5rem)}

/* inner pages */
.page-title{padding:calc(var(--hh) + clamp(50px,9vw,140px)) var(--pad) clamp(40px,7vw,110px);max-width:1800px;margin:auto}
.page-title h1{font-size:clamp(4rem,13vw,15rem);font-weight:300;line-height:.86;letter-spacing:-.025em}
.page-title .ln:nth-child(2){padding-left:9vw;font-style:italic}
.page-title .ln:nth-child(3){padding-left:2vw}
.gallery-sec{padding:0 var(--pad) clamp(80px,10vw,150px);max-width:1800px;margin:auto}
.masonry{columns:3;column-gap:var(--gut)}
.masonry .gal-btn{margin:0 0 var(--gut);break-inside:avoid}

.about-sec{padding:clamp(20px,4vw,60px) var(--pad) clamp(70px,9vw,140px);max-width:1800px;margin:auto}
.about-sec .lede-t{margin-bottom:clamp(3rem,7vw,8rem)}
.about-row{display:grid;grid-template-columns:5fr 6fr;gap:clamp(36px,8vw,150px);align-items:end}
.portrait{margin:0;aspect-ratio:4/5;background:var(--paper);overflow:hidden}
.portrait img{width:100%;height:100%;object-fit:cover}
.about-row.solo{grid-template-columns:1fr}
.copy p{font:300 clamp(1.4rem,1.9vw,1.9rem)/1.5 var(--f1);margin-bottom:1.6rem;max-width:30em}
.copy p:last-child{margin-bottom:0}
.steps-sec{padding:clamp(60px,8vw,120px) var(--pad) clamp(70px,9vw,140px);max-width:1800px;margin:auto;border-top:1px solid var(--line)}
.steps>div{border-top:1px solid var(--ink);padding-top:26px}
.steps h3{margin-bottom:.8rem}
.steps p{color:var(--grey);max-width:26em}

.pk-sec{padding:clamp(50px,7vw,110px) var(--pad);max-width:1800px;margin:auto}
.pk-sec.alt{border-top:1px solid var(--line)}
.pk-sec h2{margin-bottom:clamp(2.4rem,5vw,5rem);font-size:clamp(2.8rem,6.6vw,7rem)}
.pkgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(30px,3.4vw,60px)}
.pkg{display:flex;flex-direction:column;border-top:1px solid var(--ink);padding-top:26px}
.pkg h3{font-size:clamp(2rem,2.6vw,2.8rem);font-weight:300;margin-bottom:1.2rem}
.hrs{color:var(--grey);font-size:1rem}
.hrs b{display:block;font:300 2.4rem/1.2 var(--f1);color:var(--ink);margin-top:.2rem}
.crew{margin-top:.9rem}
.pkg ul{list-style:none;padding:0;margin:.4rem 0 0;color:var(--grey)}
.pkg li::before{content:"\2013\00a0"}
.pkg>.btn{margin-top:auto;align-self:flex-start}
.pkg>:has(+.btn){margin-bottom:2rem}
.pkg .price{font:400 1.4rem/1.2 var(--f1);color:var(--ink);margin-top:.7rem}
.pk-in{display:block}

/* CMS loading / error states (gallery, packages, testimonials pull from Firestore at runtime) */
.cms-loading{position:relative;min-height:160px}
.cms-loading::after{content:"";position:absolute;inset:0;background:rgba(36,45,35,.05)}
.cms-error{grid-column:1/-1;color:var(--grey);font:italic 300 1.1rem var(--f1)}

/* admin-added freeform sections */
.cms-sec{max-width:960px;margin:0 auto clamp(40px,6vw,90px);padding:0 var(--pad)}
.cms-sec-img{margin-bottom:1.4rem;border-radius:2px;overflow:hidden}
.cms-sec-img img{width:100%;height:auto;display:block}
.cms-sec-body h2{font:300 clamp(1.8rem,3.4vw,2.6rem)/1.15 var(--f1);margin-bottom:.6rem}
.cms-sec-body p{color:var(--grey);max-width:64ch}
.pk-sec>.center{font:italic 300 clamp(1.5rem,2vw,2rem) var(--f1);margin-top:clamp(2.5rem,5vw,4rem)}
.pk-sec>.center+.center{margin-top:1.6rem}

.contact-sec{padding:0 var(--pad) clamp(70px,9vw,140px);max-width:1800px;margin:auto}
.split{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,8vw,150px);align-items:start}
.split h2{font-size:clamp(2.6rem,5vw,5.6rem);margin-bottom:1.6rem}
.split .copy{font:300 clamp(1.4rem,1.8vw,1.8rem)/1.45 var(--f1);max-width:24em}
.acts{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:2.4rem}
form{display:grid;gap:26px}
label{display:block;font:400 .8rem var(--f2);letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
input,select,textarea{width:100%;min-height:54px;padding:12px 0;background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--ink);border-radius:0;font:300 1.2rem var(--f2);letter-spacing:0;text-transform:none;transition:border-color .3s}
textarea{resize:vertical;min-height:120px;line-height:1.6}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-bottom-width:2px;padding-bottom:11px}
select{appearance:none;-webkit-appearance:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none' stroke='%23242d23'><path d='M1 1l6 6 6-6'/></svg>") right 2px center no-repeat}
.hp{position:absolute;left:-9999px;height:0;min-height:0;opacity:0}
form .pill{justify-self:start;margin-top:8px;cursor:pointer}
#msg{min-height:1.6em;font-size:1rem}

/* ---------- 7. footer + lightbox ---------- */
footer{background:var(--ink);color:var(--ivory);--focus:var(--ivory)}
.ft{max-width:1800px;margin:auto;padding:clamp(56px,7vw,110px) var(--pad) 0}
.ft-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(36px,5vw,90px);align-items:start}
.ft-brand img{height:96px;width:auto}
.ft-brand p{margin-top:1.4rem;font:italic 300 1.5rem/1.3 var(--f1);max-width:14em}
.ft h4{font:400 .8rem var(--f2);letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:1.3rem}
.ft h4.sub{margin-top:2.2rem}
.ft-col a{display:block;width:fit-content;font:300 1.5rem/1.3 var(--f1);text-decoration:none;padding:6px 0;}
.ft-col a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.ft-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 30px;margin-top:clamp(50px,6vw,100px);padding:28px 0 36px;border-top:1px solid rgba(243,240,232,.22);font:400 .8rem var(--f2);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.bar{display:none}

.lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(244,241,235,.985);color:var(--ink);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:min(90vw,1400px);max-height:82vh;width:auto;height:auto;object-fit:contain}
.lb button{position:absolute;display:grid;place-items:center;width:56px;height:56px;padding:0;background:none;border:1px solid var(--ink);border-radius:50%;color:var(--ink);font:300 1.8rem/1 var(--f1);cursor:pointer;transition:background .35s,color .35s}
.lb button:hover{background:var(--ink);color:var(--ivory)}
.lb-x{top:max(20px,env(safe-area-inset-top));right:var(--pad)}
.lb-p{left:var(--pad);top:50%;margin-top:-28px}
.lb-n{right:var(--pad);top:50%;margin-top:-28px}
.lb-c{position:absolute;left:0;right:0;bottom:max(20px,env(safe-area-inset-bottom));text-align:center;font:400 .85rem var(--f2);letter-spacing:.14em}

/* intro: logo over the hero photo, ~1.2s, home only, once per session.
   Pure-CSS timeline: boot.js only adds html.intro. The animation ends hidden on its own, the overlay
   never captures clicks, and it needs no images, so it can never block or leave a blank screen. */
.pre{display:none}
.intro .pre{display:grid;place-items:center;position:fixed;inset:0;z-index:300;pointer-events:none;background:rgba(20,28,20,.5);animation:pre-out 1.2s ease forwards}
.pre img{height:clamp(56px,9vw,88px);width:auto;opacity:0;animation:pre-logo .3s ease .05s forwards}
@keyframes pre-out{0%,66%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes pre-logo{to{opacity:1}}

/* ---------- 8. reveal: one 0.4s opacity fade, images only (text is never hidden) ---------- */
.js .rv{transition:opacity .4s ease}
.js .rv:not(.in){opacity:0;animation:rv-safe .4s ease 2.6s forwards}
@keyframes rv-safe{to{opacity:1}}

/* ---------- 9. responsive ---------- */
@media(max-width:1100px){
  .pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:1fr 1fr}
  .masonry{columns:2}
}
@media(max-width:820px){
  :root{--hh:64px;--pad:20px;--gut:12px}
  body{font-size:1.0625rem;padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  header,header.solid{height:64px;background:#fbf9f5;color:var(--ink);box-shadow:0 1px 0 var(--line)}
  header::before{display:none}
  .lg-l{display:none!important}.lg-d{display:block!important}
  .brand img,header.solid .brand img{height:46px}
  header.open{background:var(--ink);color:var(--ivory);box-shadow:none}
  header.open .lg-l{display:block!important}header.open .lg-d{display:none!important}
  .burger .lbl{display:none}
  .burger{width:48px;justify-content:center}
  .menu-in{grid-template-columns:1fr;gap:44px;align-content:space-between;min-height:calc(100svh - var(--hh) - 9vh)}
  .menu-links a{font-size:clamp(2.6rem,12vw,4rem);gap:16px;padding:.06em 0}
  .menu-side{width:100%;gap:32px}
  .menu-side .pill{width:100%;min-height:62px;padding:0 20px}
  .hero{height:100svh;min-height:520px}
  .hero-in{gap:22px;padding:calc(var(--hh) + 20px) var(--pad) 12vh}
  .hero-h{font-size:clamp(3.6rem,19vw,7rem)}
  .hero-h .l2{padding-left:0}.hero-h .l3{padding-left:10vw}
  .lede{padding-top:72px;padding-bottom:72px}
  .lede-t{font-size:clamp(2rem,9vw,3rem)}
  .lede-a{gap:22px 28px}
  .pill{min-height:58px;padding:0 34px}
  /* projects: simple vertical sequence, names after the images */
  .projs{gap:80px}
  .proj{grid-template-columns:1fr 1fr;row-gap:var(--gut)}
  .proj .m{grid-column:1/-1;grid-row:1}
  .proj .l{grid-column:1;grid-row:2;align-self:start}
  .proj .r{grid-column:2;grid-row:2;margin-top:0}
  .proj.rev .l{grid-column:1}.proj.rev .r{grid-column:2}
  .pn,.proj.rev .pn{grid-column:1/-1;grid-row:3;justify-content:center;flex-direction:row;font-size:clamp(1.9rem,8vw,2.4rem);margin:14px 0 0}
  .proj.wide .m{grid-column:1/-1;grid-row:1}
  .proj.wide .l{grid-column:1/-1;grid-row:2}
  .films{grid-template-columns:1fr;gap:56px}
  .film:nth-child(2){margin-top:0}
  .films-sec.page .film{width:100%}
  .cards,.steps{grid-template-columns:1fr}
  .cta h2{font-size:clamp(3rem,15vw,5rem)}
  .page-title h1{font-size:clamp(3.6rem,19vw,7rem)}
  .page-title .ln:nth-child(2){padding-left:8vw}
  .about-row,.split{grid-template-columns:1fr}
  .about-row{gap:44px}
  .pkgs{grid-template-columns:1fr}
  .acts .btn,.acts .pill{width:100%}
  form .pill{width:100%}
  .ft-top{grid-template-columns:1fr;gap:44px}
  .ft-bar{flex-direction:column}
  .bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;inset:auto 0 0;z-index:60;background:#fbf9f5;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bar a{text-align:center;text-decoration:none;font:400 .85rem var(--f2);letter-spacing:.14em;text-transform:uppercase;line-height:58px}
  .bar a+a{border-left:1px solid var(--line)}
  .lb-p,.lb-n{top:auto;bottom:max(16px,env(safe-area-inset-bottom));margin-top:0}
  .lb-p{left:20px}.lb-n{right:20px}
  .lb img{max-height:74vh}
}
@media(max-width:560px){
  .masonry{columns:1}
}

/* ---------- 10. reduced motion: nothing moves, nothing fades ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pre,.intro .pre{display:none!important}
  .js .rv,.js .rv:not(.in){opacity:1;animation:none;transition:none}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- 11. components added in the usability pass ---------- */
/* films: clear play button + static loading state */
.clip{position:relative}
.play{display:none}
.js .play{position:absolute;inset:0;z-index:2;display:grid;place-items:center;width:100%;height:100%;padding:0;border:0;background:rgba(10,16,10,.22);cursor:pointer;color:var(--ink)}
.play span{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:rgba(243,240,232,.94);transition:background-color .25s ease}
.play span::before{content:"";margin-left:7px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent currentColor}
.play:hover span{background:#fff}
.play:focus-visible{outline:3px solid var(--ivory);outline-offset:-6px}
.clip.playing .play{display:none}
.vload{display:none;position:absolute;left:0;right:0;bottom:0;z-index:3;padding:10px 16px;background:rgba(10,16,10,.72);color:#fff;font:400 .9rem var(--f2);letter-spacing:.04em}
.clip.is-loading .vload{display:block}
.film h3{font-size:clamp(1.7rem,2.6vw,2.7rem)}

/* packages: one honest price line instead of "Price on request" on every card */
.pk-note{font:italic 400 clamp(1.3rem,1.8vw,1.75rem)/1.4 var(--f1);max-width:34em;margin-top:1.6rem}
.pkg .price{font:400 1.5rem/1.2 var(--f1)}

/* home: meet strip + packages teaser */
.meet{background:var(--paper);padding:clamp(60px,8vw,120px) var(--pad)}
.meet-in{max-width:1800px;margin:auto;display:grid;grid-template-columns:5fr 6fr;gap:clamp(30px,6vw,120px);align-items:start}
.meet h2,.teaser h2{font-size:clamp(2.6rem,5.4vw,5.6rem)}
.meet p.copy-t{font:300 clamp(1.3rem,1.8vw,1.8rem)/1.5 var(--f1);max-width:30em;margin-bottom:1.8rem}
.teaser{padding:clamp(70px,9vw,140px) var(--pad);max-width:1800px;margin:auto}
.teaser-in{display:grid;grid-template-columns:5fr 6fr;gap:clamp(30px,6vw,120px);align-items:start}
.teaser p.copy-t{font:300 clamp(1.3rem,1.8vw,1.8rem)/1.5 var(--f1);max-width:30em;margin-bottom:1rem}
.teaser .note{font:italic 400 1.2rem/1.4 var(--f1);margin-bottom:1.8rem}
.tlist{list-style:none;padding:0;margin:0 0 2rem;display:grid;gap:0}
.tlist li{border-top:1px solid var(--ink);padding:14px 0;font:400 clamp(1.3rem,1.7vw,1.7rem) var(--f1)}
.tlist li:last-child{border-bottom:1px solid var(--ink)}
.tlist a{text-decoration:none;display:flex;justify-content:space-between;gap:16px}
.tlist a:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}

/* contact: WhatsApp first, form as the backup */
.wa-card{display:grid;grid-template-columns:6fr 5fr;gap:clamp(28px,5vw,90px);align-items:center;padding:clamp(28px,4.4vw,72px);background:var(--ink);color:var(--ivory);--focus:var(--ivory);margin-bottom:clamp(56px,7vw,110px)}
.wa-card h2{font-size:clamp(2.4rem,4.6vw,4.8rem);margin-bottom:1.2rem;color:var(--ivory)}
.wa-card .copy{font:300 clamp(1.25rem,1.6vw,1.6rem)/1.45 var(--f1);max-width:26em;color:var(--ivory)}
.wa-side{display:grid;gap:18px;justify-items:stretch}
.pill.xl{min-height:76px;padding:0 clamp(24px,4vw,56px);font-size:.95rem;width:100%;text-align:center}
.wa-card .pill.xl{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.wa-card .pill.xl:hover{background:transparent;color:var(--ivory)}
.wa-card .btn{color:var(--ivory);border-color:rgba(243,240,232,.6);width:100%}
.wa-card .btn:hover{background:var(--ivory);color:var(--ink)}
.lang{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.lang span{flex-basis:100%;font:400 .9rem var(--f2);letter-spacing:.06em}
.lang button{min-height:40px;padding:0 18px;border:1px solid rgba(243,240,232,.6);border-radius:999px;background:transparent;color:var(--ivory);font:400 .95rem var(--f2);cursor:pointer;transition:background-color .25s ease,color .25s ease}
.lang button[aria-pressed="true"]{background:var(--ivory);color:var(--ink);border-color:var(--ivory)}
.backup{max-width:760px}
.backup h3{font:400 clamp(1.9rem,3vw,3rem)/1.1 var(--f1);margin-bottom:.6rem}
.backup .sub{color:var(--grey);margin-bottom:2rem}
.fld{display:grid;gap:2px}
.req{color:#8a2b2b}
.opt{color:var(--grey);text-transform:none;letter-spacing:0;font-size:.9rem}
.ferr{min-height:0;color:#8a2b2b;font:400 .95rem/1.4 var(--f2)}
.ferr:not(:empty){padding-top:6px}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-bottom-color:#8a2b2b;border-bottom-width:2px}
#msg{color:var(--ink)}
#msg.ok{font-weight:400}
#msg.bad{color:#8a2b2b}
@media(max-width:820px){
  .meet-in,.teaser-in,.wa-card{grid-template-columns:1fr}
  .wa-card{padding:28px 22px}
  .pill.xl{min-height:68px}
}

/* portfolio groups */
.gal-group+.gal-group{margin-top:clamp(50px,7vw,110px)}
.gal-h{font:italic 400 clamp(1.8rem,3vw,2.8rem)/1.1 var(--f1);margin-bottom:1.2rem}
.gal-links{margin-top:1.6rem}