/* VIRDEE FILMS — Base design system (tokens, type, components, gallery, forms) */
/* =============================================================
   VIRDEE FILMS — Photo · Cinema · Redesign 2026
   Global design system — light & dark themes
   ============================================================= */

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
img,picture,video,canvas,svg{ display:block; max-width:100%; }
input,button,textarea,select{ font:inherit; color:inherit; background:none; border:none; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
::selection{ background:var(--accent); color:#fff; }

/* ---------- Theme tokens ---------- */
:root{
  /* brand + type (shared) */
  --gold:#B0822E; --gold-2:#CBA25A; --gold-3:#E4C989;
  --maroon:#6E1F2A;
  --hero-fg:#F5EFE3; --hero-dim:#D8CFBE;
  --ff-display:"Cormorant Garamond","Times New Roman",serif;
  --ff-sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --container:1460px;
  --gutter:clamp(1.3rem,5vw,6rem);
  --section:clamp(4.5rem,11vh,10rem);
  --ease:cubic-bezier(0.65,0.05,0.1,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --radius:3px;
  color-scheme:light;

  /* LIGHT theme (default) — warm, airy, elegant */
  --bg:#F7F1E7; --bg-2:#FCF8F0; --bg-3:#EEE6D6; --bg-inv:#181209;
  --fg:#241D14; --fg-2:#6E6151; --fg-3:#7B6C54;
  --accent:#8C6012; --accent-soft:rgba(169,120,31,.12);
  --line:rgba(36,29,20,0.15); --line-2:rgba(36,29,20,0.08);
  --card:#FFFFFF; --shadow:0 24px 60px -30px rgba(60,45,20,.4);
  --header-bg:rgba(247,241,231,0.72);
  --footer-bg:#17110A; --footer-fg:#ECE4D3; --footer-2:#A9A08C; --footer-line:rgba(236,228,211,0.12);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#15100A; --bg-2:#1D1710; --bg-3:#261E15; --bg-inv:#F3ECDD;
  --fg:#F1E9D8; --fg-2:#B7AB95; --fg-3:#867A66;
  --accent:#CBA25A; --accent-soft:rgba(203,162,90,.14);
  --line:rgba(241,233,216,0.14); --line-2:rgba(241,233,216,0.07);
  --card:#1E1810; --shadow:0 28px 70px -30px rgba(0,0,0,.7);
  --header-bg:rgba(21,16,10,0.68);
  --footer-bg:#0F0B06; --footer-fg:#ECE4D3; --footer-2:#8E8371; --footer-line:rgba(236,228,211,0.10);
  --gold:#CBA25A;
}

/* ---------- Base ---------- */
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--ff-sans); font-weight:300;
  font-size:clamp(1rem,0.55rem+0.5vw,1.1rem); line-height:1.75; letter-spacing:.01em;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .6s var(--ease), color .6s var(--ease);
}
body.no-scroll{ overflow:hidden; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:400; line-height:1.03; letter-spacing:-.005em; }
p{ max-width:64ch; }
strong{ font-weight:500; } em{ font-style:italic; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); position:relative; }
.section--tight{ padding-block:clamp(3rem,7vh,5.5rem); }
.grid{ display:grid; gap:clamp(1.2rem,2.4vw,2.4rem); }
.center{ text-align:center; } .mx-auto{ margin-inline:auto; }

/* ---------- Type helpers ---------- */
.eyebrow{ font-family:var(--ff-sans); font-size:.72rem; font-weight:500; letter-spacing:.4em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.9em; }
.eyebrow::before{ content:""; width:clamp(22px,4vw,52px); height:1px; background:currentColor; opacity:.55; }
.eyebrow.no-line::before{ display:none; }
.eyebrow.center-both{ justify-content:center; }
.eyebrow.center-both::after{ content:""; width:clamp(22px,4vw,52px); height:1px; background:currentColor; opacity:.55; }
.display{ font-family:var(--ff-display); font-weight:300; font-size:clamp(2.6rem,7vw,7rem); line-height:.98; letter-spacing:-.015em; }
.display--xl{ font-size:clamp(3rem,10vw,9rem); }
.h2{ font-size:clamp(2.1rem,5vw,4.3rem); line-height:1.03; }
.h3{ font-size:clamp(1.45rem,3vw,2.3rem); }
.lead{ font-size:clamp(1.1rem,1.35vw,1.38rem); line-height:1.6; font-weight:300; color:var(--fg); }
.muted{ color:var(--fg-2); } .gold{ color:var(--accent); }
.serif{ font-family:var(--ff-display); }
.script{ font-family:var(--ff-display); font-style:italic; font-weight:300; }
.text-outline{ color:transparent; -webkit-text-stroke:1px var(--fg-3); opacity:.5; }

/* ---------- Buttons ---------- */
.btn{ --pad:1.02em 2.3em; position:relative; display:inline-flex; align-items:center; gap:.75em; padding:var(--pad);
  font-family:var(--ff-sans); font-size:.75rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  border:1px solid var(--accent); color:var(--fg); border-radius:100px; overflow:hidden; isolation:isolate;
  transition:color .5s var(--ease), border-color .5s var(--ease); }
.btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--accent); transform:translateY(101%); transition:transform .55s var(--ease-out); }
.btn:hover{ color:#fff; } .btn:hover::before{ transform:translateY(0); }
.btn__arrow{ transition:transform .5s var(--ease-out); } .btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--solid{ background:var(--accent); color:#fff; }
.btn--solid::before{ background:var(--fg); } .btn--solid:hover{ color:var(--bg); }
.btn--ghost{ border-color:var(--line); color:var(--fg); } .btn--ghost::before{ background:var(--fg); } .btn--ghost:hover{ color:var(--bg); border-color:var(--fg); }
.btn--light{ border-color:rgba(255,255,255,.5); color:#fff; } .btn--light::before{ background:#fff; } .btn--light:hover{ color:#181209; }
.btn--sm{ --pad:.82em 1.7em; font-size:.68rem; }
.btn--block{ display:flex; justify-content:center; width:100%; }
.link{ position:relative; display:inline-flex; align-items:center; gap:.55em; font-size:.75rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--fg); padding-bottom:3px; }
.link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out); }
.link:hover::after{ transform:scaleX(1); transform-origin:left; }
.link .arrow{ transition:transform .45s var(--ease-out); color:var(--accent); } .link:hover .arrow{ transform:translateX(5px); }

/* =============================================================
   Preloader / cursor / progress
   ============================================================= */
.preloader{ position:fixed; inset:0; z-index:9999; background:var(--bg); display:grid; place-items:center; transition:opacity .7s ease, visibility .7s ease; }
.preloader.done{ opacity:0; visibility:hidden; }
.preloader__inner{ text-align:center; width:min(80vw,420px); }
.preloader__brand{ font-family:var(--ff-display); font-weight:300; letter-spacing:.3em; font-size:clamp(1.4rem,4vw,2.2rem); color:var(--fg); text-transform:uppercase; }
.preloader__sub{ font-family:var(--ff-sans); font-size:.6rem; letter-spacing:.5em; text-transform:uppercase; color:var(--accent); margin-top:1rem; }
.preloader__bar{ position:relative; height:1px; background:var(--line); margin-top:1.8rem; overflow:hidden; }
.preloader__bar span{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:var(--accent); }
.preloader__pct{ font-family:var(--ff-sans); font-size:.6rem; letter-spacing:.3em; color:var(--fg-2); margin-top:.8rem; }
.scroll-progress{ position:fixed; top:0; left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,var(--accent),var(--gold-3)); z-index:900; }
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:9500; mix-blend-mode:difference; will-change:transform; }
.cursor-dot{ width:6px; height:6px; background:#fff; margin:-3px 0 0 -3px; transition:opacity .3s; }
.cursor-ring{ width:38px; height:38px; border:1px solid rgba(255,255,255,.6); margin:-19px 0 0 -19px; transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .35s,border-color .35s; }
.cursor-ring.hover{ width:74px; height:74px; margin:-37px 0 0 -37px; border-color:transparent; background:rgba(203,162,90,.25); }
.cursor-ring .cursor-label{ font-family:var(--ff-sans); font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:0; display:grid; place-items:center; height:100%; }
.cursor-ring.hover .cursor-label{ opacity:1; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* =============================================================
   Hero (image + Ken Burns)
   ============================================================= */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:#0b0906; }
.hero--short{ min-height:82svh; }
.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; animation:kenburns 22s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns{ from{ transform:scale(1.03); } to{ transform:scale(1.11); } }
.hero__bg::after{ content:""; position:absolute; inset:0; z-index:1; background:
  linear-gradient(to top, rgba(12,9,6,.82) 0%, rgba(12,9,6,.15) 42%, rgba(12,9,6,.5) 100%); }
.hero__inner{ position:relative; z-index:2; width:100%; color:var(--hero-fg); padding-bottom:clamp(3rem,8vh,6.5rem); padding-top:clamp(8rem,15vh,11rem); }
.hero__inner .eyebrow{ color:var(--gold-3); }
.hero__eyebrow{ margin-bottom:1.5rem; }
.hero__title{ font-family:var(--ff-display); font-weight:300; font-size:clamp(3rem,10.5vw,8.6rem); line-height:.97; letter-spacing:-.02em; color:var(--hero-fg); }
.hero__title em{ color:var(--gold-3); }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line>span{ display:block; transform:translateY(110%); }
.hero__inner .lead{ color:var(--hero-dim); }
.hero__meta{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:1.3rem 2.4rem; align-items:center; }
.hero__meta .link{ color:var(--hero-fg); }
.hero__scroll{ position:absolute; bottom:1.8rem; right:var(--gutter); z-index:3; display:flex; align-items:center; gap:.7rem; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--hero-dim); writing-mode:vertical-rl; }
.hero__scroll .dot{ writing-mode:initial; width:1px; height:48px; background:linear-gradient(var(--gold-3),transparent); }

/* =============================================================
   Marquee
   ============================================================= */
.marquee{ overflow:hidden; border-block:1px solid var(--line-2); padding-block:clamp(1.3rem,3vw,2.2rem); background:var(--bg-2); }
.marquee__track{ display:flex; gap:3.4rem; width:max-content; animation:marquee 40s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__item{ display:inline-flex; align-items:center; gap:3.4rem; font-family:var(--ff-display); font-style:italic; font-weight:300; font-size:clamp(1.6rem,4vw,3rem); color:var(--fg); white-space:nowrap; }
.marquee__item::after{ content:"✦"; font-size:.55em; color:var(--accent); font-style:normal; }
.marquee--reverse .marquee__track{ animation-direction:reverse; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* =============================================================
   Reveal
   ============================================================= */
[data-reveal]{ opacity:0; transform:translateY(36px); transition:opacity 1s var(--ease-out),transform 1s var(--ease-out); transition-delay:calc(var(--i,0)*90ms); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="fade"]{ transform:none; }
[data-reveal="clip"]{ opacity:1; clip-path:inset(0 0 100% 0); transform:none; transition:clip-path 1.1s var(--ease-out); }
[data-reveal="clip"].in{ clip-path:inset(0 0 0 0); }
.img-zoom{ overflow:hidden; } .img-zoom img{ transition:transform 1.4s var(--ease-out); }
.split .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split .word>span{ display:inline-block; transform:translateY(105%); transition:transform .9s var(--ease-out); transition-delay:calc(var(--wi,0)*40ms); }
.split.in .word>span{ transform:translateY(0); }

/* =============================================================
   Components
   ============================================================= */
.split-cols{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
@media(min-width:900px){ .split-cols{ grid-template-columns:1.05fr 1fr; } .split-cols.rev>:first-child{ order:2; } }
.stack>*+*{ margin-top:1.4rem; } .stack-sm>*+*{ margin-top:.7rem; }
.figure{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--bg-3); }
.figure img{ width:100%; height:100%; object-fit:cover; }
.figure--tall{ aspect-ratio:3/4; } .figure--port{ aspect-ratio:4/5; } .figure--wide{ aspect-ratio:16/10; }
.figure__cap{ position:absolute; left:1rem; bottom:1rem; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; background:rgba(12,9,6,.45); backdrop-filter:blur(6px); padding:.5em 1em; border:1px solid rgba(255,255,255,.18); }

.feat{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1rem,2vw,1.7rem); }
.feat .a{ grid-column:1/8; aspect-ratio:16/11; } .feat .b{ grid-column:8/13; aspect-ratio:3/4; margin-top:clamp(2rem,7vw,6rem); }
.feat .c{ grid-column:1/6; aspect-ratio:4/5; } .feat .d{ grid-column:6/13; aspect-ratio:16/10; }
.feat .figure{ display:block; }
@media(max-width:760px){ .feat .a,.feat .b,.feat .c,.feat .d{ grid-column:1/13; margin-top:0; aspect-ratio:4/5; } }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,4vw,3rem) 1rem; }
@media(min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat__num{ font-family:var(--ff-display); font-weight:300; font-size:clamp(3rem,6vw,5.2rem); line-height:1; color:var(--fg); }
.stat__num .suf{ color:var(--accent); }
.stat__label{ margin-top:.5rem; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-2); }

.cards{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
@media(min-width:680px){ .cards--2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .cards--3{ grid-template-columns:repeat(3,1fr); } }
.card{ position:relative; background:var(--bg); padding:clamp(1.7rem,3vw,2.6rem); min-height:290px; display:flex; flex-direction:column; justify-content:space-between; gap:1.8rem; overflow:hidden; transition:background .5s; }
.card__num{ font-family:var(--ff-sans); font-size:.64rem; letter-spacing:.28em; color:var(--accent); position:relative; z-index:1; }
.card__title{ font-family:var(--ff-display); font-size:clamp(1.5rem,2.4vw,2.1rem); line-height:1.05; position:relative; z-index:1; transition:color .4s; }
.card__desc{ font-size:.92rem; color:var(--fg-2); margin-top:.7rem; position:relative; z-index:1; transition:color .4s; }
.card__bg{ position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .6s; }
.card__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.42); }
.card__arrow{ align-self:flex-start; color:var(--accent); position:relative; z-index:1; transition:transform .5s var(--ease-out),color .4s; }
.card:hover .card__bg{ opacity:1; }
.card:hover .card__title,.card:hover .card__desc{ color:#fff; }
.card:hover .card__arrow{ transform:translate(5px,-5px); color:#fff; }

.tile{ position:relative; overflow:hidden; aspect-ratio:4/5; display:flex; align-items:flex-end; border-radius:var(--radius); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out),filter .6s; }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(12,9,6,.9),rgba(12,9,6,.05) 60%); }
.tile:hover img{ transform:scale(1.06); }
.tile__body{ position:relative; z-index:1; padding:clamp(1.3rem,2.4vw,2rem); width:100%; color:#fff; }
.tile__k{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-3); }
.tile__t{ font-family:var(--ff-display); font-size:clamp(1.5rem,2.6vw,2.2rem); line-height:1.04; margin-top:.3rem; }

/* Film cards */
.films{ display:grid; grid-template-columns:1fr; gap:clamp(1.3rem,3vw,2.2rem); }
@media(min-width:700px){ .films{ grid-template-columns:repeat(2,1fr); } }
.film{ position:relative; overflow:hidden; aspect-ratio:16/9; background:var(--bg-3); cursor:pointer; display:block; border-radius:var(--radius); }
.film img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out),filter .6s; filter:brightness(.74); }
.film:hover img{ transform:scale(1.05); filter:brightness(.55); }
.film__play{ position:absolute; inset:0; display:grid; place-items:center; z-index:2; }
.film__play span{ width:clamp(62px,7vw,84px); aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.7); display:grid; place-items:center; color:#fff; background:rgba(12,9,6,.25); backdrop-filter:blur(4px); transition:background .5s,border-color .5s,transform .5s var(--ease-out),color .5s; padding-left:4px; }
.film:hover .film__play span{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.08); }
.film__info{ position:absolute; left:0; bottom:0; z-index:2; padding:clamp(1.1rem,2.4vw,1.7rem); width:100%; background:linear-gradient(to top,rgba(12,9,6,.85),transparent); color:#fff; }
.film__k{ font-size:.58rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-3); }
.film__t{ font-family:var(--ff-display); font-size:clamp(1.3rem,2.2vw,1.9rem); line-height:1.05; margin-top:.3rem; }
.film__d{ font-size:.68rem; letter-spacing:.15em; color:rgba(255,255,255,.7); margin-top:.35rem; text-transform:uppercase; }

.quote__mark{ font-family:var(--ff-display); font-size:clamp(6rem,16vw,13rem); line-height:.6; color:var(--accent); opacity:.24; }
.quote__text{ font-family:var(--ff-display); font-weight:300; font-size:clamp(1.6rem,3.4vw,3rem); line-height:1.28; letter-spacing:-.01em; color:var(--fg); }
.quote__by{ margin-top:1.5rem; font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-2); }
.quote__by b{ color:var(--accent); font-weight:500; }

/* Bands */
.band-alt{ background:var(--bg-2); }
.band-deep{ background:var(--bg-inv); color:var(--hero-fg); }
.band-deep .h2,.band-deep .stat__num,.band-deep .quote__text{ color:var(--hero-fg); }
.band-deep .muted,.band-deep .stat__label{ color:var(--hero-dim); }
.band-deep .eyebrow,.band-deep .gold{ color:var(--gold-3); }
.band-maroon{ background:linear-gradient(160deg,#3c0f16,#5c1a24 60%,#2a0a10); color:var(--hero-fg); }
.band-maroon .h2,.band-maroon .stat__num{ color:var(--hero-fg); } .band-maroon .stat__label,.band-maroon .muted{ color:rgba(245,239,227,.75); } .band-maroon .eyebrow,.band-maroon .gold{ color:var(--gold-3); }

.badges{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(1.5rem,4vw,3.2rem); }
.badges img{ height:clamp(50px,7vw,78px); width:auto; transition:transform .5s var(--ease-out); }
.badges img:hover{ transform:translateY(-4px); }

.cta{ position:relative; text-align:center; overflow:hidden; color:var(--hero-fg); }
.cta .h2,.cta .display{ color:var(--hero-fg); } .cta .lead{ color:var(--hero-dim); } .cta .eyebrow{ color:var(--gold-3); }
.cta__bg{ position:absolute; inset:0; z-index:-1; }
.cta__bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(.34); }
.cta__bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 60%,transparent,rgba(12,9,6,.7)); }
.offer{ display:inline-flex; align-items:center; gap:1rem; border:1px solid var(--gold-3); border-radius:100px; padding:.68em 1.5em; font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-3); }
.offer b{ color:var(--hero-fg); font-weight:500; }

/* =============================================================
   Gallery + filters + lightbox
   ============================================================= */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:center; }
.filter{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-2); padding:.5em .2em; position:relative; transition:color .4s; }
.filter::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); }
.filter:hover{ color:var(--fg); } .filter.active{ color:var(--accent); } .filter.active::after{ transform:scaleX(1); }
.gallery{ columns:1; column-gap:clamp(1rem,1.8vw,1.5rem); }
@media(min-width:640px){ .gallery{ columns:2; } } @media(min-width:1080px){ .gallery{ columns:3; } }
.gallery__item{ break-inside:avoid; margin-bottom:clamp(1rem,1.8vw,1.5rem); position:relative; overflow:hidden; cursor:pointer; background:var(--bg-3); border-radius:var(--radius); }
.gallery__item img{ width:100%; height:auto; transition:transform 1.1s var(--ease-out),filter .6s; }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(12,9,6,.5),transparent 55%); opacity:0; transition:opacity .5s; }
.gallery__item:hover::after{ opacity:1; }
.gallery__cap{ position:absolute; left:1rem; bottom:1rem; z-index:2; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:#fff; opacity:0; transform:translateY(8px); transition:opacity .5s,transform .5s var(--ease-out); }
.gallery__item:hover .gallery__cap{ opacity:1; transform:none; }
.gallery__item.hide{ display:none; }
.lightbox{ position:fixed; inset:0; z-index:9600; background:rgba(8,6,4,.96); backdrop-filter:blur(8px); display:grid; place-items:center; opacity:0; visibility:hidden; transition:opacity .5s,visibility .5s; }
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox__img{ max-width:88vw; max-height:82vh; object-fit:contain; box-shadow:0 40px 120px rgba(0,0,0,.6); transform:scale(.96); transition:transform .5s var(--ease-out); }
.lightbox.open .lightbox__img{ transform:scale(1); }
.lightbox__close{ position:absolute; top:1.5rem; right:1.7rem; width:52px; height:52px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; color:#fff; transition:background .4s,color .4s; }
.lightbox__close:hover{ background:var(--accent); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; color:#fff; transition:background .4s; }
.lightbox__nav:hover{ background:var(--accent); }
.lightbox__nav.prev{ left:clamp(.6rem,3vw,2.4rem); } .lightbox__nav.next{ right:clamp(.6rem,3vw,2.4rem); }
.lightbox__count{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); font-size:.64rem; letter-spacing:.24em; color:rgba(255,255,255,.7); }

/* =============================================================
   Contact form
   ============================================================= */
.field{ position:relative; margin-bottom:2.1rem; }
.field input,.field textarea,.field select{ width:100%; padding:.9em 0; background:transparent; border-bottom:1px solid var(--line); color:var(--fg); font-size:1rem; font-weight:300; transition:border-color .4s; }
.field textarea{ resize:vertical; min-height:120px; }
.field label{ position:absolute; left:0; top:.9em; font-size:1rem; color:var(--fg-2); pointer-events:none; transition:transform .35s var(--ease-out),font-size .35s,color .35s; }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--accent); }
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
.field select:focus+label,.field select.filled+label{ transform:translateY(-1.5em); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.field select{ appearance:none; } .field select option{ background:var(--bg-2); color:var(--fg); }
.info-row{ display:grid; grid-template-columns:1fr; gap:2.2rem; }
@media(min-width:700px){ .info-row{ grid-template-columns:repeat(3,1fr); } }
.info__k{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-bottom:.6rem; }
.info__v{ font-family:var(--ff-display); font-size:clamp(1.2rem,1.8vw,1.5rem); line-height:1.3; color:var(--fg); }
.info__v a:hover{ color:var(--accent); }

/* accordion */
.acc__item{ border-top:1px solid var(--line); } .acc__item:last-child{ border-bottom:1px solid var(--line); }
.acc__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.5rem 0; text-align:left; font-family:var(--ff-display); font-size:clamp(1.2rem,2vw,1.7rem); color:var(--fg); }
.acc__icon{ position:relative; width:20px; height:20px; flex:none; }
.acc__icon::before,.acc__icon::after{ content:""; position:absolute; background:var(--accent); transition:transform .4s var(--ease); }
.acc__icon::before{ top:9px; left:0; width:20px; height:1.5px; } .acc__icon::after{ left:9px; top:0; width:1.5px; height:20px; }
.acc__item.open .acc__icon::after{ transform:scaleY(0); }
.acc__body{ overflow:hidden; height:0; transition:height .5s var(--ease); }
.acc__body p{ padding-bottom:1.5rem; color:var(--fg-2); }

/* =============================================================
   Utilities
   ============================================================= */
.mt-1{margin-top:.6rem}.mt-2{margin-top:1.3rem}.mt-3{margin-top:2.1rem}.mt-4{margin-top:3rem}.mt-5{margin-top:clamp(3rem,7vw,5.5rem)}
.mb-2{margin-bottom:1.3rem}.mb-3{margin-bottom:2.1rem}.mb-4{margin-bottom:3rem}.mb-5{margin-bottom:clamp(3rem,7vw,5rem)}
.maxw-sm{max-width:44ch}.maxw-md{max-width:60ch}.maxw-lg{max-width:78ch}
.flex{display:flex}.wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.gap-1{gap:.8rem}.gap-2{gap:1.4rem}.gap-3{gap:2.2rem}
.hide-mobile{display:none}
@media(min-width:900px){ .hide-mobile{display:initial} .hide-desk{display:none} }


/* No-JS / safety fallback */
.no-js .preloader{ display:none !important; } .no-js body{ overflow:auto !important; }
.no-js [data-reveal],.no-js .split,.no-js .img-zoom{ opacity:1 !important; transform:none !important; clip-path:none !important; }
.no-js .hero__title .line>span{ transform:none !important; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .marquee__track,.hero__poster{ animation:none; }
}

/* Google reviews */
.reviews__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.4rem 2.4rem; margin-bottom:clamp(2rem,4vw,3rem); }
.grating{ display:flex; align-items:center; gap:1.1rem; }
.grating__num{ font-family:var(--ff-display); font-weight:400; font-size:clamp(2.6rem,5vw,3.8rem); line-height:1; color:var(--fg); }
.gstars{ color:#E7B84B; font-size:1.1rem; letter-spacing:.12em; }
.grating__meta{ font-size:.8rem; color:var(--fg-2); letter-spacing:.03em; margin-top:.25rem; }
.glogo{ display:inline-flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--fg-2); }
.glogo b{ font-weight:600; color:var(--fg); } .glogo .g-b{ color:#4285F4; } .glogo .g-r{ color:#EA4335; } .glogo .g-y{ color:#FBBC05; } .glogo .g-g{ color:#34A853; }
.rev-scroller{ display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1.4rem; margin-inline:calc(var(--gutter)*-1); padding-inline:var(--gutter); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.rev-scroller::-webkit-scrollbar{ height:2px; } .rev-scroller::-webkit-scrollbar-thumb{ background:var(--line); }
.rev-card{ scroll-snap-align:start; flex:0 0 clamp(280px,82vw,360px); background:var(--card); border:1px solid var(--line-2); border-radius:6px; padding:1.6rem 1.7rem; display:flex; flex-direction:column; gap:.9rem; box-shadow:var(--shadow); }
.rev-card__top{ display:flex; align-items:center; gap:.9rem; }
.rev-av{ width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:var(--ff-display); font-size:1.2rem; flex:none; }
.rev-name{ font-weight:500; font-size:.95rem; color:var(--fg); } .rev-sub{ font-size:.72rem; color:var(--fg-3); }
.rev-card__stars{ color:#E7B84B; font-size:.85rem; letter-spacing:.08em; }
.rev-card__text{ font-family:var(--ff-display); font-size:1.1rem; line-height:1.5; color:var(--fg); }
.rev-card__g{ margin-top:auto; display:inline-flex; align-items:center; gap:.45rem; font-size:.66rem; letter-spacing:.05em; color:var(--fg-3); text-transform:uppercase; }

/* Mobile — reduce section gaps */
@media(max-width:760px){ .section{ padding-block:clamp(2.8rem,7vh,4.2rem); } .section--tight{ padding-block:clamp(2.2rem,5vh,3.2rem); } .feat .b{ margin-top:0; } }
/* Film plays inside its own frame */
.film iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:6; }
.film.playing{ cursor:default; }
.film.playing .film__play, .film.playing .film__info, .film.playing img{ opacity:0; pointer-events:none; }
/* Form paired rows collapse on phones (was an inline grid that never collapsed) */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.6rem; }
@media(max-width:560px){ .form-row{ grid-template-columns:1fr; } }

/* In-frame film close button */
.film__close{ position:absolute; top:.8rem; right:.8rem; z-index:8; width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(12,9,6,.55); backdrop-filter:blur(4px); color:#fff; display:grid; place-items:center; font-size:1.5rem; line-height:1; transition:background .3s; }
.film__close:hover{ background:var(--accent); border-color:var(--accent); }

/* Keep overlays clean: hide scroll-progress under the open menu; hide hero scroll cue on phones (FAB sits there) */
body.no-scroll .scroll-progress{ opacity:0; }
@media(max-width:760px){ .hero__scroll{ display:none; } }
/* Self-hosted film video inside the card */
.film video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; z-index:6; }