/* ============================================================
   FUSION BELLS FILMS
   Editorial light canvas + cinematic dark bands
   ============================================================ */
:root{
  --paper:#F7F3EC;
  --paper-2:#EFE9DE;
  --paper-3:#E7DFD1;
  --ink:#16120F;
  --ink-2:#1C1712;
  --ink-soft:#5A5048;
  --ink-mute:#8A7E73;
  --ivory:#F4EDE1;
  --ivory-dim:#C9BFAE;
  --gold:#B0854A;
  --gold-bright:#D8B071;
  --line:rgba(22,18,15,0.13);
  --line-2:rgba(22,18,15,0.07);
  --line-light:rgba(244,237,225,0.18);
  --ff-display:'Cormorant Garamond', Georgia, serif;
  --ff-script:'Cormorant Garamond', Georgia, serif;
  --ff-body:'Karla', 'Helvetica Neue', Arial, sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1);
  --nav-h:96px;
}
@media (max-width:1024px){ :root{--nav-h:74px;} }

*{box-sizing:border-box; margin:0; padding:0;}
/* class-based display rules must not defeat the hidden attribute */
[hidden]{display:none !important;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 14px);}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:400;
  font-size:16px;
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
iframe{border:0;}
::selection{background:var(--gold); color:var(--paper);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

.wrap{max-width:1320px; margin:0 auto; padding:0 40px;}
@media (max-width:768px){ .wrap{padding:0 22px;} }

/* ---------- type primitives ---------- */
h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:400;
  letter-spacing:0;
  color:var(--ink);
  line-height:1.14;
}
.italic{font-style:italic; font-weight:300;}
.script{font-family:var(--ff-script); font-style:italic; font-weight:400; color:var(--gold);}

.eyebrow{
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-weight:500;
}
.eyebrow::before{content:''; width:26px; height:1px; background:currentColor; display:inline-block;}
.eyebrow.light{color:var(--ivory);}
.section-head.center .eyebrow{justify-content:center;}

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  color:var(--ink); padding-bottom:6px; border-bottom:1px solid var(--line);
  transition:color .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
}
.link-arrow::after{content:'→'; font-size:14px; transition:transform .35s var(--ease);}
.link-arrow:hover{color:var(--gold); border-color:var(--gold); gap:16px;}
.link-arrow:hover::after{transform:translateX(3px);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 32px; font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  border:1px solid var(--ink); border-radius:2px;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.btn-solid{background:var(--ink); color:var(--paper);}
.btn-solid:hover{background:var(--gold); border-color:var(--gold); color:#fff; transform:translateY(-2px);}
.btn-ghost{border-color:var(--line); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-ghost-light{border-color:rgba(244,237,225,.5); color:var(--ivory);}
.btn-ghost-light:hover{background:var(--ivory); color:var(--ink); border-color:var(--ivory);}
.btn-slab{background:#4A3B2C; color:#F6F1E7; border-color:#4A3B2C; text-transform:lowercase; letter-spacing:.06em; font-size:15px; padding:18px 34px; border-radius:3px;}
.btn-slab:hover{background:var(--ink); border-color:var(--ink); transform:translateY(-2px);}
.btn-sm{padding:11px 20px; font-size:10.5px;}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease);}
.reveal.in{opacity:1; transform:none;}
.reveal-d1{transition-delay:.1s;}
.reveal-d2{transition-delay:.2s;}
.reveal-d3{transition-delay:.3s;}
.reveal-d4{transition-delay:.4s;}

/* split-word headline reveal */
.split .w{display:inline-block; overflow:hidden; vertical-align:top;}
.split .w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%); opacity:0;
  transition:transform .95s var(--ease), opacity .95s var(--ease);
}
.split.in .w > i{transform:none; opacity:1;}

/* image mask reveal */
.mask{clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--ease);}
.mask.in{clip-path:inset(0 0 0 0);}

/* ============================================================
   LOADER
   ============================================================ */
.loader{
  position:fixed; inset:0; z-index:900;
  background:var(--ink); color:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{opacity:0; visibility:hidden;}
.loader-inner{display:flex; flex-direction:column; align-items:center; gap:18px;}
.loader-mark{height:56px; width:auto; opacity:.95;}
.loader-word{font-family:var(--ff-display); font-style:italic; font-size:20px; letter-spacing:.18em; color:var(--ivory-dim);}
.loader-bar{display:block; width:150px; height:1px; background:rgba(244,237,225,.2); overflow:hidden;}
.loader-bar i{display:block; height:100%; width:0; background:var(--gold-bright); transition:width 1.1s var(--ease);}
.loader.go .loader-bar i{width:100%;}

/* ============================================================
   NAV
   ============================================================ */
/* Solid editorial bar: links left, centred lockup, links right. */
body{padding-top:var(--nav-h);}
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:400;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--paper);
  color:var(--ink);
  border-bottom:1px solid var(--line-2);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), height .4s var(--ease);
}
header.site-nav.scrolled{box-shadow:0 6px 30px rgba(22,18,15,.07);}
header.site-nav.hidden{transform:translateY(-102%);}
.nav-inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; width:100%;
}

.brand{justify-self:center; display:block;}
.brand-mark{height:52px; width:auto; filter:brightness(0) opacity(.9); transition:height .4s var(--ease);}
header.site-nav.scrolled .brand-mark{height:44px;}
@media (max-width:1024px){ .brand-mark{height:38px;} header.site-nav.scrolled .brand-mark{height:34px;} }

.nav-links{display:flex; gap:34px; align-items:center;}
.nav-left{justify-self:start;}
.nav-right{justify-self:end;}
.nav-links a{
  font-family:var(--ff-display);
  font-size:18px; font-weight:500; letter-spacing:.005em;
  position:relative; padding-bottom:4px; color:var(--ink-soft);
  transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--ink); transition:width .4s var(--ease);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{width:100%;}

/* keep the header legible while the dark menu overlay is open */
body.menu-open header.site-nav{
  background:var(--ink); color:var(--ivory); border-bottom-color:transparent; transform:none; box-shadow:none;
}
body.menu-open .brand-mark{filter:none;}
body.menu-open .nav-toggle{color:var(--ivory);}

.nav-toggle{display:none; align-items:center; gap:10px; justify-self:end;}
.nt-label{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;}
.nt-bars{display:inline-flex; flex-direction:column; gap:5px; width:22px;}
.nt-bars i{height:1px; width:100%; background:currentColor; transition:transform .4s var(--ease), opacity .3s;}
body.menu-open .nt-bars i:first-child{transform:translateY(3px) rotate(45deg);}
body.menu-open .nt-bars i:last-child{transform:translateY(-3px) rotate(-45deg);}

@media (max-width:1024px){
  .nav-links{display:none;}
  /* the two link groups are gone, so the 3-column grid would strand the
     toggle mid-bar — switch to a simple two-end row */
  .nav-inner{display:flex; align-items:center; justify-content:space-between;}
  .brand{justify-self:auto;}
  .nav-toggle{display:inline-flex; justify-self:auto; margin-left:auto;}
}

/* ---------- fullscreen menu ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:380;
  background:var(--ink); color:var(--ivory);
  clip-path:circle(0% at calc(100% - 60px) 44px);
  transition:clip-path .8s var(--ease);
  display:flex; align-items:center;
  overflow-y:auto;
}
body.menu-open .menu-overlay{clip-path:circle(150% at calc(100% - 60px) 44px);}
.menu-inner{width:100%; display:grid; grid-template-columns:1.2fr .8fr; gap:60px; padding-top:120px; padding-bottom:60px;}
@media (max-width:820px){ .menu-inner{grid-template-columns:1fr; gap:44px;} }
.menu-links{display:flex; flex-direction:column;}
.menu-links a{
  font-family:var(--ff-display); font-size:clamp(30px,5.4vw,58px); line-height:1.28;
  display:flex; align-items:baseline; gap:20px;
  opacity:0; transform:translateY(24px);
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s;
  border-bottom:1px solid rgba(244,237,225,.09); padding:8px 0;
}
body.menu-open .menu-links a{opacity:1; transform:none;}
body.menu-open .menu-links a:nth-child(1){transition-delay:.18s;}
body.menu-open .menu-links a:nth-child(2){transition-delay:.24s;}
body.menu-open .menu-links a:nth-child(3){transition-delay:.30s;}
body.menu-open .menu-links a:nth-child(4){transition-delay:.36s;}
body.menu-open .menu-links a:nth-child(5){transition-delay:.42s;}
body.menu-open .menu-links a:nth-child(6){transition-delay:.48s;}
body.menu-open .menu-links a:nth-child(7){transition-delay:.54s;}
.menu-links a em{font-family:var(--ff-body); font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--gold-bright);}
.menu-links a:hover{color:var(--gold-bright);}
.menu-aside{display:flex; flex-direction:column; gap:30px; align-self:center;}
.ma-block .lbl{font-size:10.5px; letter-spacing:.28em; text-transform:uppercase; color:var(--gold-bright); display:block; margin-bottom:10px;}
.ma-block p{color:var(--ivory-dim); font-size:15px;}
.ma-block a:hover{color:var(--ivory);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; height:calc(100svh - var(--nav-h)); min-height:560px; padding:0;
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink);
}
.hero-slides{position:absolute; inset:0;}
.hero-slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transform:scale(1.1);
  transition:opacity 1.8s ease, transform 9s linear;
}
.hero-slide.active{opacity:1; transform:scale(1);}
/* Showcase film sits over the photo carousel and fades in once it can play,
   so the photographs are both the poster and the permanent fallback. */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--ease); z-index:0;
}
.hero-video.is-playing{opacity:1;}
.hero::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,16,13,.62) 0%, rgba(20,16,13,.18) 34%, rgba(20,16,13,.52) 70%, rgba(20,16,13,.92) 100%);
}
.hero-sound{
  position:absolute; z-index:4; right:40px; bottom:34px;
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:40px;
  border:1px solid rgba(244,237,225,.4); color:var(--ivory);
  background:rgba(20,16,13,.35); backdrop-filter:blur(8px);
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  transition:background .3s, border-color .3s, color .3s;
}
.hero-sound:hover{background:var(--ivory); color:var(--ink); border-color:var(--ivory);}
@media (max-width:900px){ .hero-sound{display:none;} }
.hero-content{position:relative; z-index:2; width:100%; padding-bottom:110px; color:var(--ivory);}
.hero-text{max-width:860px;}
.hero-title{
  font-size:clamp(50px, 8.4vw, 116px);
  line-height:1.02; color:var(--ivory);
  margin:24px 0 26px; font-weight:400;
}
.hero-title .italic{color:#fff;}
.hero-sub{
  font-size:16.5px; color:rgba(244,237,225,.82);
  max-width:520px; margin-bottom:40px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}

.hero-frame-count{
  position:absolute; z-index:2; top:48px; right:40px;
  writing-mode:vertical-rl;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(244,237,225,.7);
}
.hero-frame-count span{color:var(--gold-bright);}
@media (max-width:900px){ .hero-frame-count{display:none;} }

.hero-dots{
  position:absolute; z-index:3; right:40px; bottom:110px;
  display:flex; flex-direction:column; gap:10px;
}
.hero-dot{width:26px; height:2px; background:rgba(244,237,225,.3); border-radius:2px; transition:background .4s, width .4s;}
.hero-dot.active{background:var(--gold-bright); width:38px;}
@media (max-width:900px){ .hero-dots{flex-direction:row; right:auto; left:22px; bottom:34px;} }

.scroll-cue{
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size:9.5px; letter-spacing:.3em; color:rgba(244,237,225,.7); text-transform:uppercase;
}
.scroll-cue .line{width:1px; height:46px; background:rgba(244,237,225,.22); position:relative; overflow:hidden;}
.scroll-cue .line::after{
  content:''; position:absolute; top:0; left:0; width:100%; height:16px; background:var(--gold-bright);
  animation:cue 2.4s infinite ease-in-out;
}
@keyframes cue{0%{transform:translateY(-16px);} 100%{transform:translateY(46px);}}
@media (max-width:900px){ .scroll-cue{display:none;} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-band{
  background:var(--ink); color:var(--ivory-dim);
  overflow:hidden; padding:20px 0;
}
.marquee-track{display:flex; white-space:nowrap; animation:scroll-left 40s linear infinite; width:max-content;}
.marquee-track span{
  font-family:var(--ff-display); font-style:italic; font-size:24px;
  padding:0 26px; display:inline-flex; align-items:center; gap:26px;
}
.marquee-track span::after{content:'✦'; color:var(--gold-bright); font-style:normal; font-size:11px;}
@keyframes scroll-left{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ============================================================
   SECTION generic
   ============================================================ */
section{padding:130px 0; position:relative;}
@media (max-width:768px){ section{padding:82px 0;} }
.section-head{max-width:660px; margin-bottom:64px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head h2{font-size:clamp(34px,5vw,64px); margin-top:20px;}
.section-head p{color:var(--ink-soft); margin-top:20px; font-size:15.5px; max-width:560px;}
.section-head.center p{margin-left:auto; margin-right:auto;}

/* ============================================================
   INTRO
   ============================================================ */
.intro{padding:110px 0 100px; background:var(--paper);}
.intro-inner{text-align:center;}
.intro-inner .eyebrow{justify-content:center;}
.intro-lead{
  font-family:var(--ff-display); font-weight:300;
  font-size:clamp(23px,2.8vw,35px); line-height:1.5; letter-spacing:-.01em;
  max-width:940px; margin:26px auto 0; color:var(--ink);
}
.intro-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin-top:70px; padding-top:44px; border-top:1px solid var(--line-2);
}
@media (max-width:760px){ .intro-stats{grid-template-columns:repeat(2,1fr); gap:34px;} }
.stat b{
  display:block; font-family:var(--ff-body); font-style:normal; font-weight:500;
  font-size:clamp(32px,3.8vw,46px); color:var(--gold); letter-spacing:.01em; line-height:1.1;
}
.stat span{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:6px; display:block;}

/* ============================================================
   FEATURE FILM BAND — full-bleed, plays muted, opens with sound
   ============================================================ */
.film-feature{
  position:relative; overflow:hidden; background:var(--ink);
  min-height:92svh; padding:120px 0;
  margin-bottom:0;
  display:flex; align-items:center;
}
.ff-media{position:absolute; inset:0; will-change:transform;}
.ff-poster, .ff-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ff-video{opacity:0; transition:opacity 1.4s var(--ease);}
.ff-video.is-playing{opacity:1;}
.ff-veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(18,14,11,.82) 0%, rgba(18,14,11,.55) 45%, rgba(18,14,11,.30) 100%);
}
.ff-copy{position:relative; z-index:2; color:var(--ivory); width:100%;}
/* wide enough that the written line breaks control the wrap, not the box */
.ff-copy h2{
  color:var(--ivory); font-weight:400; margin:22px 0 20px;
  font-size:clamp(30px,4.8vw,62px); line-height:1.14; max-width:24ch;
}
.ff-copy p{
  color:rgba(244,237,225,.82); font-size:16.5px; max-width:520px; margin-bottom:34px;
}
@media (max-width:768px){
  .film-feature{min-height:78svh; padding:90px 0;}
  .ff-veil{background:linear-gradient(180deg, rgba(18,14,11,.55) 0%, rgba(18,14,11,.78) 100%);}
}

/* ============================================================
   VALUE / STATEMENT QUOTE SECTION
   ============================================================ */
.value{
  padding:140px 0 135px;
  background:var(--paper);
  text-align:center;
  position:relative;
  z-index:2;
}
.value .wrap{
  max-width:1040px;
  margin:0 auto;
}
.value-line{
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(32px,4.4vw,58px);
  line-height:1.24;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin:0 auto;
  max-width:22ch;
}
.value-line .italic{
  font-style:italic;
  font-weight:300;
  color:var(--gold);
}
.value-sub{
  font-family:var(--ff-body);
  font-size:clamp(15px,1.2vw,17.5px);
  line-height:1.78;
  color:var(--ink-soft);
  max-width:720px;
  margin:32px auto 0;
  font-weight:400;
  letter-spacing:0.01em;
}
@media (max-width:768px){
  .value{padding:90px 0 85px;}
  .value-sub{margin-top:22px;}
  .hide-mob{display:none;}
}

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
/* Lives on the header's bottom edge, so it slides away with the header
   instead of hanging across the middle of the page. */
.scroll-progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px; z-index:5;
  pointer-events:none;
}
.scroll-progress i{
  display:block; height:100%; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
}

/* ============================================================
   SHOWREEL BAND — still, no pinning
   ============================================================ */
.showreel{
  position:relative; overflow:hidden; background:var(--ink);
  min-height:78svh; padding:120px 0; margin:0;
  display:flex; align-items:center; text-align:center;
}
.showreel-media{position:absolute; inset:0;}
.showreel-poster, .showreel-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.showreel-video{opacity:0; transition:opacity 1.2s var(--ease);}
.showreel-video.is-playing{opacity:1;}
.showreel-veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,14,11,.58), rgba(18,14,11,.74));
}
.showreel-copy{position:relative; z-index:2; color:var(--ivory);}
.showreel-copy .eyebrow{justify-content:center;}
.showreel-copy h2{
  color:var(--ivory); font-weight:400; margin:22px auto 22px;
  font-size:clamp(30px,4.6vw,60px); line-height:1.16; max-width:20ch;
}
.showreel-copy p{
  font-size:clamp(16px,1.7vw,20px); line-height:1.6;
  color:rgba(244,237,225,.84); max-width:660px; margin:0 auto;
}
.showreel-copy .sr-play{margin-top:32px;}
@media (max-width:768px){ .showreel{min-height:64svh; padding:84px 0;} }

/* ============================================================
   FILMS GRID
   ============================================================ */
.films-block{margin-top:110px;}
/* Columns cap at 420px and centre, so one film looks deliberate rather than
   stranded in a third of the row, and a full set still reads as a grid. */
.films-grid{
  display:grid; gap:26px; justify-content:center;
  grid-template-columns:repeat(auto-fit, minmax(280px, 380px));
}
@media (max-width:960px){ .films-grid{grid-template-columns:minmax(0,460px);} }
.film-card{
  display:block; width:100%; padding:0; text-align:left; cursor:pointer;
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.film-card.in{opacity:1; transform:none;}
.film-poster{
  position:relative; display:block; overflow:hidden;
  background:var(--paper-3); aspect-ratio:16/9;
}
.film-poster img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);}
.film-card:hover .film-poster img{transform:scale(1.05);}
.film-poster::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:linear-gradient(180deg,transparent 40%,rgba(22,18,15,.5) 100%);
}
.film-card:hover .film-poster::after{opacity:1;}
.film-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%; z-index:2;
  background:rgba(247,243,236,.92); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.film-card:hover .film-play{background:var(--gold); color:#fff; transform:translate(-50%,-50%) scale(1.08);}
.film-play svg{margin-left:3px;}
.film-meta{display:block; padding-top:16px;}
.film-meta b{
  display:block; font-family:var(--ff-display); font-weight:400; font-size:22px;
  color:var(--ink); margin-bottom:4px;
}
.film-meta i{
  font-style:normal; font-size:10.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */
.video-modal{
  position:fixed; inset:0; z-index:700; background:#0B0908;
  display:flex; align-items:center; justify-content:center;
  padding:56px 40px; overflow:hidden;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.video-modal.open{opacity:1; pointer-events:auto;}
.vm-blur{
  position:absolute; inset:-8%; background-size:cover; background-position:center;
  filter:blur(46px) saturate(1.05) brightness(.45); transform:scale(1.12); z-index:0;
}
.vm-body{position:relative; z-index:2; width:min(1180px, 100%); text-align:center;}
.vm-stage{
  position:relative; width:100%; aspect-ratio:16/9; background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.6); overflow:hidden;
}
.vm-stage iframe, .vm-stage video{position:absolute; inset:0; width:100%; height:100%; border:0;}
.vm-note{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center; color:var(--ivory-dim); font-size:15px; line-height:1.6;
}
.vm-title{
  margin-top:20px; color:var(--ivory);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
}
.vm-close{
  position:absolute; top:26px; right:28px; z-index:3;
  width:46px; height:46px; border-radius:50%; font-size:17px;
  border:1px solid rgba(244,237,225,.25); color:var(--ivory);
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.vm-close:hover{border-color:var(--gold-bright); color:var(--gold-bright);}
@media (max-width:768px){ .video-modal{padding:20px;} .vm-close{top:14px; right:14px;} }
.fv-item::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .5s;
  background:linear-gradient(180deg,transparent 45%,rgba(22,18,15,.72) 100%);
}
.fv-item:hover img{transform:scale(1.05);}
.fv-item:hover::after{opacity:1;}
.fv-item figcaption{
  position:absolute; left:22px; bottom:20px; z-index:2; color:#fff;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.fv-item figcaption span{display:block; font-family:var(--ff-display); font-style:italic; text-transform:none; letter-spacing:0; font-size:20px; margin-bottom:2px;}
.fv-item:hover figcaption{opacity:1; transform:none;}

/* ============================================================
   FEATURED FULL-WIDTH CAROUSEL
   ============================================================ */
.featured{padding:0; background:var(--ink);}
.feat-viewport{overflow:hidden;}
.feat-track{display:flex; transition:transform .95s var(--ease);}
.feat-slide{
  flex:0 0 100%; min-width:100%;
  height:82vh; min-height:520px;
  background-size:cover; background-position:center;
  position:relative; display:flex; align-items:flex-end; padding-bottom:80px;
}
.feat-slide::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(20,16,13,.25) 0%,rgba(20,16,13,.15) 45%,rgba(20,16,13,.85) 100%);
}
.feat-copy{position:relative; z-index:2; color:var(--ivory); width:100%;}
.feat-copy h3{font-size:clamp(32px,4.7vw,60px); color:var(--ivory); margin:18px 0 12px; font-weight:400;}
.feat-copy p{color:rgba(244,237,225,.8); max-width:480px; font-size:15.5px;}
.feat-ui{
  display:flex; align-items:center; gap:22px;
  padding-top:26px; padding-bottom:26px;
  color:var(--ivory);
}
.feat-arrow{
  width:44px; height:44px; border:1px solid rgba(244,237,225,.28); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:border-color .3s, color .3s, transform .3s;
}
.feat-arrow:hover{border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-2px);}
.feat-bars{display:flex; gap:10px; flex:1;}
.feat-bar{flex:1; height:2px; background:rgba(244,237,225,.2); position:relative; overflow:hidden; cursor:pointer;}
.feat-bar i{position:absolute; inset:0; width:0; background:var(--gold-bright); transition:width .3s linear;}
.feat-bar.active i{width:100%; transition:width 6s linear;}

/* ============================================================
   VALUE PROPOSITION
   ============================================================ */
.value{text-align:center; padding:140px 0; background:var(--paper-2);}
.value-line{
  font-size:clamp(30px,4.8vw,66px); line-height:1.18; font-weight:400;
  max-width:1080px; margin:0 auto;
}
.value-sub{
  color:var(--ink-soft); font-size:16.5px; max-width:600px; margin:32px auto 0;
}

/* ============================================================
   SERVICES — two column blocks
   ============================================================ */
.svc-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px;}
@media (max-width:900px){ .svc-grid{grid-template-columns:1fr; gap:64px;} }
/* No forced crop here — these are composed frames, so they show in full. */
.svc-media{overflow:hidden; margin-bottom:34px; background:var(--paper-3);}
.svc-media img{width:100%; height:auto; object-fit:contain; transition:transform 1.3s var(--ease);}
.svc:hover .svc-media img{transform:scale(1.04);}
.svc-label{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  display:inline-block; padding-bottom:8px; border-bottom:1px solid var(--gold); margin-bottom:22px;
}
.svc h3{font-size:clamp(28px,3.5vw,44px); margin-bottom:20px; font-weight:400;}
.svc p{color:var(--ink-soft); font-size:15.5px; margin-bottom:28px; max-width:480px;}

.svc-list{margin-top:110px; border-top:1px solid var(--line-2);}
.svc-row{
  display:grid; grid-template-columns:70px 1.1fr 1.4fr; gap:30px; align-items:baseline;
  padding:32px 0; border-bottom:1px solid var(--line-2);
  transition:padding-left .45s var(--ease), background .45s var(--ease);
}
.svc-row:hover{padding-left:18px; background:linear-gradient(90deg, rgba(176,133,74,.07), transparent 60%);}
@media (max-width:760px){ .svc-row{grid-template-columns:44px 1fr; gap:14px;} .svc-row p{grid-column:2;} }
.svc-row .n{font-family:var(--ff-display); font-style:italic; color:var(--gold); font-size:17px;}
.svc-row h4{font-size:23px; font-weight:400;}
.svc-row p{color:var(--ink-soft); font-size:15px;}

/* ============================================================
   ABOUT / STUDIO
   ============================================================ */
.about{background:var(--paper);}
.about-grid{display:grid; grid-template-columns:.92fr 1.08fr; gap:84px; align-items:center;}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:52px;} }
.about-media{position:relative;}
/* Clips the drifting portrait back to the frame — without this the scaled
   image spills out and covers the 276+ tag hanging off the corner. */
.about-media-frame{position:relative; overflow:hidden;}
.about-media img{width:100%; aspect-ratio:4/5; object-fit:cover;}
.about-media .frame-tag{
  position:absolute; bottom:-24px; left:-24px;
  background:var(--paper); border:1px solid var(--line);
  padding:20px 26px; max-width:240px;
}
@media (max-width:560px){ .about-media .frame-tag{position:static; margin-top:18px; max-width:none;} }
.frame-tag .num{
  font-family:var(--ff-body); font-size:36px; font-weight:500;
  color:var(--gold); font-style:normal; letter-spacing:.01em; line-height:1;
}
.frame-tag .lbl{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-top:4px;}
.about-copy h2{font-size:clamp(30px,4.1vw,50px); line-height:1.18; margin:22px 0 26px; font-weight:400;}
.about-copy p{color:var(--ink-soft); margin-bottom:18px; font-size:15.5px; max-width:540px;}
.about-sign{
  margin-top:36px;
  display:inline-flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.about-sign .script{
  font-family:'Caveat Brush', 'Sedgwick Ave Display', 'Permanent Marker', cursive, sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:32px;
  letter-spacing:0.04em;
  color:var(--gold);
  line-height:1;
  display:inline-block;
}
.about-sign .role{
  font-family:var(--ff-body);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--ink-mute);
  display:inline-block;
}

.philosophy{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  margin-top:110px; background:var(--line-2); border:1px solid var(--line-2);
}
@media (max-width:800px){ .philosophy{grid-template-columns:1fr;} }
.phi-card{background:var(--paper); padding:46px 38px; transition:background .5s var(--ease);}
.phi-card:hover{background:var(--paper-2);}
.phi-card .tag{font-family:var(--ff-script); font-size:34px; color:var(--gold); display:block; margin-bottom:16px;}
.phi-card h3{font-size:22px; margin-bottom:12px; font-weight:400;}
.phi-card p{color:var(--ink-soft); font-size:14.5px;}

/* ============================================================
   CINEMATIC QUOTE STRIP
   ============================================================ */
.cine-strip{
  position:relative; height:78vh; min-height:460px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:var(--ink);
}
.cine-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  will-change:transform;
}
.cine-strip::before{content:''; position:absolute; inset:0; background:rgba(20,16,13,.56); z-index:1;}
.cine-strip blockquote{
  position:relative; z-index:2; text-align:center; max-width:900px; padding:0 26px;
  font-family:var(--ff-display); font-style:italic; font-weight:300;
  font-size:clamp(25px,3.9vw,48px); line-height:1.36; color:var(--ivory);
}
.cine-strip cite{
  display:block; margin-top:28px; font-style:normal; font-family:var(--ff-body);
  font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-bright);
}

/* ============================================================
   GALLERY
   ============================================================ */
.work{background:var(--paper);}
.gallery-filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px; justify-content:center;}
.gf-btn{
  border:1px solid var(--line); color:var(--ink-soft);
  padding:9px 22px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  border-radius:2px; transition:all .3s;
}
.gf-btn:hover{color:var(--ink); border-color:var(--ink);}
.gf-btn.active{background:var(--ink); border-color:var(--ink); color:var(--paper);}

.contact-sheet{columns:4 260px; column-gap:12px;}
@media (max-width:1000px){ .contact-sheet{columns:3 200px;} }
@media (max-width:640px){ .contact-sheet{columns:2 140px;} }
.frame{
  break-inside:avoid; margin-bottom:12px; position:relative;
  overflow:hidden; cursor:pointer; background:var(--paper-3);
  opacity:0; transform:translateY(18px); transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.frame.in{opacity:1; transform:none;}
.frame img{width:100%; display:block; transition:transform 1.1s var(--ease);}
.frame:hover img{transform:scale(1.05);}
.frame::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:linear-gradient(180deg,transparent 50%,rgba(22,18,15,.7) 100%);
}
.frame:hover::after{opacity:1;}
.frame .frame-meta{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#fff;
  opacity:0; transform:translateY(6px); transition:opacity .4s, transform .4s;
}
.frame:hover .frame-meta{opacity:1; transform:none;}

/* lightbox */
.lightbox{
  position:fixed; inset:0; z-index:600; background:#0B0908;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .45s;
  padding:56px 40px; overflow:hidden;
}
.lightbox.open{opacity:1; pointer-events:auto;}
/* the photo itself, blown up and blurred, becomes the backdrop */
.lb-blur{
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter:blur(46px) saturate(1.05) brightness(.5);
  transform:scale(1.12); z-index:0;
  transition:opacity .5s var(--ease);
}
.lightbox img#lbImg{
  position:relative; z-index:2;
  max-height:82vh; max-width:88vw; object-fit:contain;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.lb-close, .lb-nav, .lb-caption{z-index:3;}

/* the neighbouring photos, peeking in from either edge */
.lb-side{
  position:absolute; top:50%; z-index:1;
  height:min(46vh, 400px); width:auto; max-width:24vw; object-fit:cover;
  opacity:.4; filter:brightness(.75); cursor:pointer;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transition:opacity .45s var(--ease), filter .45s var(--ease), transform .45s var(--ease);
}
.lb-side-prev{left:0;  transform:translate(-52%, -50%);}
.lb-side-next{right:0; transform:translate( 52%, -50%);}
.lb-side-prev:hover{transform:translate(-42%, -50%); opacity:.75; filter:brightness(1);}
.lb-side-next:hover{transform:translate( 42%, -50%); opacity:.75; filter:brightness(1);}
.lb-side[hidden]{display:none;}
/* no room for them on narrow screens — arrows and swipe carry navigation */
@media (max-width:1024px){ .lb-side{display:none;} }
.lb-caption{
  position:absolute; bottom:26px; left:0; right:0; text-align:center;
  color:var(--ivory-dim); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
}
.lb-close, .lb-nav{
  position:absolute; border:1px solid rgba(244,237,225,.25); color:var(--ivory);
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:all .3s; font-size:17px;
}
.lb-close:hover, .lb-nav:hover{border-color:var(--gold-bright); color:var(--gold-bright);}
.lb-close{top:28px; right:28px;}
.lb-prev{left:26px; top:50%; transform:translateY(-50%);}
.lb-next{right:26px; top:50%; transform:translateY(-50%);}
@media (max-width:640px){ .lightbox{padding:20px;} .lb-prev,.lb-next{width:38px; height:38px;} .lb-prev{left:10px;} .lb-next{right:10px;} }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{background:var(--paper-2); border-top:1px solid var(--line-2);}
.t-badges{display:flex; gap:16px; align-items:center; margin-bottom:56px; flex-wrap:wrap; justify-content:center;}
.t-badge{
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--line); padding:9px 18px; display:flex; gap:8px; align-items:center;
}
.t-badge b{color:var(--gold); font-family:var(--ff-display); font-style:italic; font-size:15px;}
.t-track-wrap{position:relative; overflow:hidden;}
.t-track{display:flex; transition:transform .8s var(--ease);}
.t-card{
  flex:0 0 50%; width:50%; padding:0 14px; text-align:center;
}
@media (max-width:860px){ .t-card{flex-basis:100%; width:100%;} }
.t-card > *{max-width:520px; margin-left:auto; margin-right:auto;}
.t-quote-mark{font-family:var(--ff-script); font-size:70px; color:var(--gold); line-height:.7; display:block; margin-bottom:20px;}
.t-card p{
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size:22px; line-height:1.5; color:var(--ink); margin-bottom:26px;
}
.t-name{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);}
.t-loc{font-size:12.5px; color:var(--ink-mute); margin-top:6px;}
.t-controls{display:flex; gap:16px; margin-top:44px; align-items:center; justify-content:center;}
.t-dots{display:flex; gap:9px;}
.t-dot{width:7px; height:7px; border-radius:50%; background:var(--line); transition:background .3s, transform .3s;}
.t-dot.active{background:var(--gold); transform:scale(1.3);}
.t-arrow{border:1px solid var(--line); width:42px; height:42px; border-radius:50%; transition:all .3s;}
.t-arrow:hover{border-color:var(--gold); color:var(--gold);}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.insta{background:var(--paper);}
.insta-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:44px;}
.insta-head h2{font-size:clamp(32px,4.3vw,54px); margin-top:18px;}
.insta-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:10px;}
@media (max-width:900px){ .insta-grid{grid-template-columns:repeat(3,1fr);} }
.insta-item{position:relative; aspect-ratio:1/1; overflow:hidden; display:block; width:100%; background:var(--paper-3);}
.insta-item img{width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease);}
.insta-item:hover img{transform:scale(1.08);}
.insta-item .ov{
  position:absolute; inset:0; background:rgba(22,18,15,.5); opacity:0; transition:opacity .35s;
  display:flex; align-items:center; justify-content:center; color:#fff;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.insta-item:hover .ov{opacity:1;}

/* ============================================================
   FULL-BLEED CTA BAND
   ============================================================ */
.cta-band{
  position:relative; min-height:88vh; padding:120px 26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:44px;
  overflow:hidden; background:var(--ink); text-align:center;
}
.cta-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.05); will-change:transform;
}
.cta-band::before{content:''; position:absolute; inset:0; background:rgba(18,14,11,.34);}
.cta-inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:40px;}
.cta-line{position:relative; display:inline-block; padding:22px 40px; color:#F1E7D6;}
.cta-text{
  position:relative; z-index:2;
  font-family:var(--ff-display); font-weight:300; font-style:normal;
  font-size:clamp(26px,4.4vw,54px); line-height:1.22; letter-spacing:.005em;
  text-shadow:0 2px 22px rgba(0,0,0,.45);
}
.cta-ring{
  position:absolute; inset:0; width:100%; height:100%; z-index:1;
  color:rgba(214,183,140,.9); overflow:visible;
}
.cta-ring ellipse{
  stroke-dasharray:1000; stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.cta-band.in .cta-ring ellipse{stroke-dashoffset:0;}

/* ============================================================
   JOURNAL
   ============================================================ */
.journal{background:var(--paper-2); border-top:1px solid var(--line-2);}
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
@media (max-width:960px){ .post-grid{grid-template-columns:1fr; gap:52px; max-width:640px; margin:0 auto;} }
.post{position:relative; display:flex; flex-direction:column; align-items:flex-start;}
.post-flag{
  position:absolute; top:16px; left:16px; z-index:3;
  background:var(--paper); color:var(--ink);
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; padding:7px 13px;
}
.post-media{overflow:hidden; width:100%; margin-bottom:24px; background:var(--paper-3);}
.post-media img{width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 1.2s var(--ease);}
.post:hover .post-media img{transform:scale(1.05);}
.post-meta{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:12px;}
.post h3{font-size:24px; line-height:1.3; font-weight:400; margin-bottom:14px;}
.post-excerpt{color:var(--ink-soft); font-size:14.5px; margin-bottom:20px;}
.post-body{
  display:grid; grid-template-rows:0fr; overflow:hidden;
  transition:grid-template-rows .6s var(--ease), opacity .5s, margin-bottom .6s var(--ease);
  opacity:0;
}
.post-body > p{min-height:0;}
.post.open .post-body{grid-template-rows:1fr; opacity:1; margin-bottom:20px;}
.post-body p{color:var(--ink-soft); font-size:14.5px; margin-bottom:14px;}
.post-toggle{margin-top:auto;}

/* ============================================================
   CONTACT
   ============================================================ */
/* Full-bleed photograph, dark wash, and a floating card of details. */
.contact{position:relative; padding:110px 0 120px; overflow:hidden; background:var(--ink);}
.contact-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:grayscale(.35);
}
.contact::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,14,11,.72) 0%, rgba(18,14,11,.55) 45%, rgba(18,14,11,.78) 100%);
}
.contact-inner{position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:0 24px;}
.contact-title{
  color:#fff; text-align:center; font-weight:400;
  font-size:clamp(28px,3.9vw,50px); line-height:1.2;
  max-width:900px; margin:0 auto 50px;
  text-shadow:0 2px 26px rgba(0,0,0,.4);
}
.contact-card{
  background:var(--paper); border-radius:2px;
  box-shadow:0 30px 80px rgba(12,9,7,.34);
  padding:56px 56px 60px;
}
@media (max-width:768px){ .contact-card{padding:36px 24px 40px;} }
.cc-lead{text-align:center; margin-bottom:48px;}
.cc-lead h3{font-size:clamp(26px,3vw,38px); margin-bottom:26px; font-weight:400;}
.cc-lead .whatsapp-cta{
  margin-bottom:0; border-radius:40px; padding:15px 30px;
  text-transform:none; font-size:15px; letter-spacing:.02em; font-weight:500;
}

.cc-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start;}
@media (max-width:900px){ .cc-grid{grid-template-columns:1fr; gap:44px;} }

.cc-studio{text-align:center;}
@media (min-width:901px){ .cc-studio{text-align:left;} }
.cc-name{font-size:clamp(24px,2.6vw,32px); margin-bottom:14px; font-weight:400;}
.cc-address{color:var(--ink-soft); font-size:14.5px; margin-bottom:18px;}
.cc-phones{display:flex; flex-direction:column; gap:6px; margin-bottom:26px;}
.cc-phones a{font-size:15.5px; color:var(--gold); transition:color .3s;}
.cc-phones a:hover{color:var(--ink);}
.cc-hours-head{font-size:clamp(20px,2.2vw,26px); margin-bottom:8px; font-weight:400;}
.cc-hours{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-soft); margin-bottom:18px;}
@media (max-width:900px){ .cc-hours{justify-content:center;} }
.cc-hours .dot{width:8px; height:8px; border-radius:50%; background:var(--ink-mute); flex:0 0 auto;}
.cc-hours .dot.open{background:#1F8F4E; box-shadow:0 0 0 4px rgba(31,143,78,.16);}
.cc-note{color:var(--ink-mute); font-size:13.5px; margin-bottom:26px;}
.cc-studio .map-frame{height:190px; margin-bottom:22px;}
@media (max-width:900px){ .cc-studio .social-row{justify-content:center;} }
.cc-submit{width:100%; margin-top:8px; text-transform:none; font-size:16px; border-radius:40px;}
.field{margin-bottom:24px;}
.field label{display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:10px;}
.field input, .field textarea, .field select{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  color:var(--ink); font-family:var(--ff-body); font-size:15px; font-weight:400; padding:11px 2px;
  transition:border-color .3s;
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-mute); opacity:.7;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--gold);}
.field textarea{resize:vertical; min-height:96px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media (max-width:520px){ .row2{grid-template-columns:1fr;} }
.form-msg{margin-top:18px; font-size:13.5px; color:var(--gold); display:none;}
.form-msg.show{display:block;}

.info-list{display:flex; flex-direction:column; gap:22px; margin-bottom:36px;}
.info-item{display:flex; gap:16px; align-items:flex-start;}
.info-item .ico{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0; font-size:14px;
}
.info-item .lbl{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:4px;}
.info-item .val{font-size:15px; color:var(--ink);}
.info-item .val a:hover{color:var(--gold);}
.whatsapp-cta{
  display:inline-flex; align-items:center; gap:12px; background:#1F8F4E; color:#fff;
  padding:15px 26px; border-radius:2px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:500; transition:transform .3s, box-shadow .3s, background .3s; margin-bottom:36px;
}
.whatsapp-cta:hover{transform:translateY(-2px); background:#25D366; box-shadow:0 12px 30px rgba(31,143,78,.22);}
.map-frame{border:1px solid var(--line); filter:grayscale(1) contrast(1.05); height:220px; width:100%;}
.social-row{display:flex; gap:12px; margin-top:26px;}
.social-row a{
  width:40px; height:40px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:all .3s;
}
.social-row a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px);}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--ink); color:var(--ivory-dim); padding:84px 0 32px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; gap:48px; flex-wrap:wrap; margin-bottom:60px;}
.footer-brand{max-width:340px;}
.footer-logo{height:52px; width:auto; margin-bottom:20px;}
.footer-brand p{font-size:14px;}
.footer-cols{display:flex; gap:70px; flex-wrap:wrap;}
.footer-col h4{font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-bright); margin-bottom:18px; font-family:var(--ff-body); font-weight:500;}
.footer-col a, .footer-col span{display:block; font-size:14px; margin-bottom:12px; transition:color .3s;}
.footer-col a:hover{color:var(--ivory);}

.footer-nav{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:26px 0; border-top:1px solid rgba(244,237,225,.1); border-bottom:1px solid rgba(244,237,225,.1);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.footer-nav a:hover{color:var(--gold-bright);}
.footer-nav i{opacity:.35; font-style:normal;}

.footer-tags{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:26px 0 6px;
}
.footer-tags span{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(244,237,225,.14); padding:6px 13px; color:rgba(244,237,225,.55);
}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  padding-top:26px; margin-top:20px; border-top:1px solid rgba(244,237,225,.1);
  font-size:11px; letter-spacing:.16em; color:rgba(244,237,225,.5);
}

/* back to top */
.totop{
  position:fixed; bottom:26px; right:26px; z-index:300;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:0 8px 26px rgba(22,18,15,.12);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .4s, transform .35s;
}
.totop.show{opacity:1; pointer-events:auto; transform:none;}
.totop:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}

/* ============================================================
   GALLERY PAGE
   ============================================================ */
.page-head{padding:96px 0 70px; text-align:center;}
.page-head .eyebrow{justify-content:center;}
.page-head h1{font-size:clamp(38px,6vw,78px); margin:22px 0 20px;}
.page-head p{color:var(--ink-soft); max-width:600px; margin:0 auto; font-size:16px;}

/* HomeBird-style rule heading: ——— text ——— */
.rule-head{display:flex; align-items:center; gap:26px; margin-bottom:52px;}
.rule-head::before, .rule-head::after{content:''; flex:1; height:1px; background:var(--line);}
.rule-head span{
  font-family:var(--ff-display); font-size:clamp(20px,2.4vw,30px);
  color:var(--gold); white-space:nowrap; letter-spacing:.01em;
}
@media (max-width:640px){
  .rule-head{gap:14px; margin-bottom:36px;}
  .rule-head span{white-space:normal; text-align:center; font-size:19px;}
}

/* One hero frame centre stage, neighbours peeking, arrows overlaid,
   thumbnail rail underneath. */
.moments{padding:20px 0 110px;}
.moments-stage{position:relative; margin:0 auto; max-width:1560px; padding:0 40px;}
@media (max-width:768px){ .moments-stage{padding:0 12px;} }

.moments-viewport{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
}
.moments-viewport::-webkit-scrollbar{display:none;}
.moments-track{display:flex; gap:14px; width:max-content; align-items:center;}
.moment{
  flex:0 0 auto; scroll-snap-align:center;
  overflow:hidden; background:var(--paper-3); cursor:pointer;
  position:relative;
}
.moment img{
  display:block;
  transition:transform 1.1s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
}
/* Wide screens: every frame shares one height and its width follows the
   photo's own proportions, so landscape and portrait both show uncropped. */
@media (min-width:769px){
  .moments-track{padding:0 max(24px, calc(50vw - 420px));}
  .moment{height:clamp(360px, 58vh, 560px);}
  .moment img{height:100%; width:auto; max-width:min(86vw, 900px); object-fit:cover;}
}
/* Narrow screens: one width, height follows the photo — nothing is cropped. */
@media (max-width:768px){
  .moments-track{padding:0 6vw;}
  .moment{width:88vw;}
  .moment img{width:100%; height:auto;}
}
/* neighbours sit back so the centred frame reads as the subject */
.moment:not(.is-active) img{opacity:.45; filter:saturate(.7);}
.moment.is-active:hover img{transform:scale(1.03);}

.mom-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:52px; height:52px; border-radius:50%;
  background:rgba(247,243,236,.9); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:17px;
  box-shadow:0 6px 24px rgba(22,18,15,.18);
  transition:background .3s, transform .3s, color .3s;
}
.mom-arrow:hover{background:var(--ink); color:var(--paper);}
.mom-prev{left:56px;}
.mom-next{right:56px;}
@media (max-width:768px){
  .mom-arrow{width:40px; height:40px; font-size:14px;}
  .mom-prev{left:16px;} .mom-next{right:16px;}
}

/* thumbnail rail */
.moments-thumbs{
  display:flex; gap:8px; overflow-x:auto; padding:22px 40px 4px;
  max-width:1560px; margin:0 auto;
  /* centred when they fit, and "safe" so the first one is never cut off
     once there are enough thumbnails to overflow */
  justify-content:safe center;
  scrollbar-width:none; -ms-overflow-style:none;
}
.moments-thumbs::-webkit-scrollbar{display:none;}
@media (max-width:768px){ .moments-thumbs{padding:16px 12px 4px;} }
.mom-thumb{
  flex:0 0 auto; width:78px; height:60px; overflow:hidden; padding:0;
  border:1px solid transparent; opacity:.55; cursor:pointer;
  transition:opacity .3s, border-color .3s, transform .3s;
}
.mom-thumb img{width:100%; height:100%; object-fit:cover;}
.mom-thumb:hover{opacity:.85;}
.mom-thumb.is-active{opacity:1; border-color:var(--gold); transform:translateY(-3px);}
@media (max-width:560px){ .mom-thumb{width:58px; height:46px;} }

.moments-ui{display:flex; align-items:center; gap:22px; margin-top:18px; justify-content:center;}
.moments-rail{max-width:760px;}
.moments-rail{flex:1; height:2px; background:var(--line-2); position:relative; border-radius:2px;}
.moments-rail span{
  position:absolute; left:0; top:0; height:100%; width:24%;
  background:var(--ink); border-radius:2px; transition:left .2s linear, width .2s linear;
}

.explore{padding-top:0;}
.gallery-more{text-align:center; margin-top:48px;}
.gallery-count{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); margin-top:18px;}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
.cookie{
  position:fixed; left:26px; bottom:26px; z-index:320;
  max-width:400px; background:var(--paper); border:1px solid var(--line);
  padding:24px 26px; box-shadow:0 18px 50px rgba(22,18,15,.16);
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.cookie.show{opacity:1; transform:none; pointer-events:auto;}
.cookie p{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px;}
.cookie-actions{display:flex; gap:10px;}
@media (max-width:560px){
  .cookie{left:12px; right:12px; bottom:12px; max-width:none; padding:16px 18px;}
  .cookie p{font-size:12.5px; margin-bottom:12px;}
  .cookie .btn-sm{padding:9px 16px; font-size:10px;}
  body.cookie-visible .totop{bottom:132px;}
}