/* =====================================================================
   PHOTOWALA — front-end stylesheet
   Dark cinematic editorial. Mobile first.
   ===================================================================== */

:root{
  --bg:#0a0a0b;
  --bg-2:#111113;
  --bg-3:#17171a;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#f1f1f2;
  --muted:#93939c;
  --muted-2:#6f6f78;
  --accent:#ff3131;
  --accent-dim:rgba(255,49,49,.14);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1280px;
  --pad:clamp(18px,5vw,56px);
  --r:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.12;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---------- layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,10vw,132px)}
.section--tight{padding-block:clamp(48px,7vw,90px)}
.section--alt{background:var(--bg-2)}
.grid{display:grid;gap:clamp(18px,3vw,34px)}

/* ---------- type ---------- */
.display{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7.4vw,5.4rem);line-height:1.02;letter-spacing:-.02em}
.display em{font-style:italic;color:var(--accent)}
.h2{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.08}
.h2 em{font-style:italic;color:var(--accent)}
.h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2.4vw,1.85rem)}
.kicker{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);font-weight:500;display:flex;align-items:center;gap:12px;margin-bottom:18px
}
.kicker::before{content:'';width:34px;height:1px;background:var(--accent);flex:none}
.kicker--center{justify-content:center}
.lead{color:var(--muted);font-size:clamp(1rem,1.5vw,1.09rem);max-width:62ch}
.muted{color:var(--muted)}
.center{text-align:center}
.center .kicker{justify-content:center}
.center .lead{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:999px;font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:.35s var(--ease);border:1px solid transparent;
}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:#fff;color:#0a0a0b;transform:translateY(-2px)}
.btn--ghost{border-color:var(--line-2);color:var(--text)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn--sm{padding:11px 22px;font-size:11px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.link-arrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.link-arrow svg{transition:transform .35s var(--ease)}
.link-arrow:hover svg{transform:translateX(6px)}

/* ---------- header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:120;
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:78px}
.header.is-stuck{background:rgba(10,10,11,.86);backdrop-filter:blur(16px) saturate(1.4);border-bottom-color:var(--line)}
.header.is-stuck .header__inner{height:66px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo img{height:40px;width:auto;transition:height .4s var(--ease)}
.header.is-stuck .logo img{height:34px}
.logo__txt{display:none;line-height:1}
.logo__txt b{display:block;font:500 14px/1 var(--sans);letter-spacing:.32em;color:#fff}
.logo__txt i{display:block;font-style:normal;font-size:8px;letter-spacing:.26em;color:var(--muted);margin-top:6px;white-space:nowrap}
@media (min-width:378px){.logo__txt{display:block}}
.nav{display:none}
.nav a{
  position:relative;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);padding:6px 0;transition:color .3s
}
.nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);
  transition:width .35s var(--ease)
}
.nav a:hover,.nav a.is-active{color:#fff}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.header__cta{display:none}
.burger{
  width:44px;height:44px;display:grid;place-items:center;gap:5px;border-radius:10px;
  border:1px solid var(--line);flex:none
}
.burger span{display:block;width:18px;height:1.5px;background:#fff;transition:.35s var(--ease)}
.burger span+span{margin-top:5px}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:110;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;padding:96px var(--pad) 40px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:.45s var(--ease);
}
body.menu-open .drawer{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
.drawer a.drawer__link{
  font-family:var(--serif);font-size:clamp(2rem,9vw,2.9rem);font-weight:300;
  padding:10px 0;border-bottom:1px solid var(--line);display:flex;
  justify-content:space-between;align-items:center;color:rgba(255,255,255,.9)
}
.drawer a.drawer__link span{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--muted-2)}
.drawer a.drawer__link:hover{color:var(--accent)}
.drawer__foot{margin-top:34px;display:grid;gap:12px;font-size:14px;color:var(--muted)}
.drawer__foot a{display:flex;gap:10px;align-items:center}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.6s var(--ease);
  transform:scale(1.06);
}
.hero__slide.is-on{opacity:1;animation:kenburns 9s linear forwards}
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1.14)}}
.hero__slide picture,.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(10,10,11,.78) 0%,rgba(10,10,11,.34) 26%,rgba(10,10,11,.62) 58%,rgba(10,10,11,.94) 88%,var(--bg) 100%),
    linear-gradient(90deg,rgba(10,10,11,.86) 0%,rgba(10,10,11,.55) 42%,rgba(10,10,11,.12) 78%),
    radial-gradient(130% 85% at 15% 100%,rgba(10,10,11,.85),transparent 72%);
}
.hero__body{position:relative;z-index:2;padding-bottom:clamp(60px,12vh,120px);padding-top:140px;width:100%}
.hero .display{max-width:16ch;font-size:clamp(2.15rem,6.4vw,4.9rem);text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero .lead{margin-top:22px;color:rgba(255,255,255,.86);text-shadow:0 1px 18px rgba(0,0,0,.6)}
.hero__cta{margin-top:36px}
.hero__meta{
  margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:26px 44px;align-items:center;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.hero__meta b{display:block;font:400 26px/1 var(--serif);color:#fff;letter-spacing:0;margin-bottom:5px}
.hero__dots{position:absolute;right:var(--pad);bottom:clamp(60px,12vh,120px);z-index:3;display:none;flex-direction:column;gap:9px}
.hero__dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:.3s}
.hero__dots button.is-on{background:var(--accent);transform:scale(1.5)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__slide.is-on{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- section head ---------- */
.sec-head{display:grid;gap:20px;margin-bottom:clamp(34px,5vw,58px)}
.sec-head__row{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between}

/* ---------- category / service cards ---------- */
.cards{display:grid;gap:clamp(14px,2.2vw,26px);grid-template-columns:1fr}
.card{
  position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg-3);
  border:1px solid var(--line);isolation:isolate
}
.card__img{aspect-ratio:4/5;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.card:hover .card__img img{transform:scale(1.07)}
.card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,8,9,.5) 62%,rgba(8,8,9,.95) 100%);pointer-events:none}
.card__body{position:absolute;inset:auto 0 0;padding:clamp(20px,3vw,28px);z-index:2}
.card__body .h3{margin-bottom:6px}
.card__count{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.card__desc{font-size:14px;color:rgba(255,255,255,.72);margin-top:9px;max-width:36ch}

.svc{
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,36px);
  background:linear-gradient(180deg,var(--bg-3),var(--bg-2));
  transition:.45s var(--ease);display:flex;flex-direction:column;gap:14px;height:100%
}
.svc:hover{border-color:var(--accent);transform:translateY(-4px)}
.svc__ico{
  width:50px;height:50px;border-radius:13px;background:var(--accent-dim);color:var(--accent);
  display:grid;place-items:center;margin-bottom:6px
}
.svc__ico svg{width:23px;height:23px}
.svc p{color:var(--muted);font-size:14.5px}
.svc__price{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.svc__price b{color:#fff;font:400 21px/1 var(--serif)}

/* ---------- filter bar ---------- */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:clamp(26px,4vw,40px)}
.filters button,.filters a{
  padding:9px 19px;border-radius:999px;border:1px solid var(--line);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  transition:.3s var(--ease)
}
.filters button:hover,.filters a:hover{color:#fff;border-color:var(--line-2)}
.filters button.is-on,.filters a.is-on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---------- masonry gallery ---------- */
.masonry{--mgap:clamp(10px,1.6vw,18px);columns:1;column-gap:var(--mgap)}
.masonry .tile{break-inside:avoid;margin-bottom:var(--mgap)}
/* JS-balanced columns: every column ends at nearly the same height */
.masonry.is-js{columns:auto;display:flex;gap:var(--mgap);align-items:flex-start}
.masonry.is-js .m-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--mgap)}
.masonry.is-js .tile{margin-bottom:0}
.tile{
  position:relative;display:block;overflow:hidden;border-radius:10px;
  background:var(--bg-3);cursor:zoom-in
}
.tile img{width:100%;height:auto;transition:transform 1.1s var(--ease),opacity .5s}
.tile::after{
  content:'';position:absolute;inset:0;background:rgba(8,8,9,.35);opacity:0;transition:.4s
}
.tile:hover img{transform:scale(1.05)}
.tile:hover::after{opacity:1}
.tile__tag{
  position:absolute;left:12px;bottom:12px;z-index:2;opacity:0;transform:translateY(8px);
  transition:.4s var(--ease);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(10,10,11,.72);backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px
}
.tile:hover .tile__tag{opacity:1;transform:none}
.tile.is-hidden{display:none}

/* ---------- mosaic (uniform tiles: the bottom edge is always flush) ---------- */
.mosaic{--mgap:clamp(10px,1.6vw,18px);display:grid;gap:var(--mgap);grid-template-columns:1fr}
.mosaic .tile{aspect-ratio:4/5}
.mosaic .tile picture{display:block;width:100%;height:100%}
.mosaic .tile img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
@media (min-width:560px){.mosaic{grid-template-columns:repeat(2,1fr)}}
@media (min-width:860px){.mosaic{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1280px){.mosaic{grid-template-columns:repeat(4,1fr)}}

/* ---------- lightbox ---------- */
.lb{
  position:fixed;inset:0;z-index:300;background:rgba(6,6,7,.97);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,48px);
  opacity:0;visibility:hidden;transition:.35s var(--ease)
}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:84vh;object-fit:contain;border-radius:6px;
  animation:lbin .45s var(--ease)}
@keyframes lbin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lb__close,.lb__nav{
  position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid var(--line);transition:.3s;z-index:2
}
.lb__close:hover,.lb__nav:hover{background:var(--accent);border-color:var(--accent)}
.lb__close{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.lb__nav--prev{left:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.lb__nav--next{right:clamp(8px,2vw,28px);top:50%;transform:translateY(-50%)}
.lb__count{position:absolute;bottom:clamp(14px,3vw,28px);left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.2em;color:var(--muted)}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);border-block:1px solid var(--line)}
.stats div{background:var(--bg);padding:clamp(26px,4vw,42px) clamp(16px,3vw,28px);text-align:center}
.stats b{display:block;font:300 clamp(2.1rem,5vw,3.2rem)/1 var(--serif);color:#fff;margin-bottom:9px}
.stats span{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---------- split (about) ---------- */
.split{display:grid;gap:clamp(30px,5vw,66px);align-items:center}
.split__media{position:relative}
.split__media img,.split__media picture{border-radius:var(--r);width:100%}
.split__media picture{display:block}
.split__media img{aspect-ratio:4/5;object-fit:cover;object-position:center 26%;max-height:min(78vh,720px)}
.split__media .stamp{
  position:absolute;right:-6px;bottom:-16px;background:var(--accent);color:#fff;
  border-radius:var(--r);padding:18px 22px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.5)
}
.split__media .stamp span{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;opacity:.92;margin-bottom:6px}
.split__media .stamp b{display:block;font:300 1.9rem/1 var(--serif)}
.prose p{color:var(--muted)}
.prose p+p{margin-top:1em}

/* ---------- testimonials ---------- */
.quotes{display:grid;gap:clamp(16px,2.4vw,26px)}
.quote{
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,3.4vw,34px);
  background:var(--bg-3);display:flex;flex-direction:column;gap:16px;height:100%
}
.quote__stars{color:var(--accent);letter-spacing:3px;font-size:13px}
.quote p{font-family:var(--serif);font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.5;color:#e6e6e8;font-style:italic}
.quote footer{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.quote footer b{display:block;font-weight:500;color:#fff}
.quote footer span{color:var(--muted-2);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- packages ---------- */
.pkgs{display:grid;gap:clamp(16px,2.4vw,24px)}
.pkg{
  border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,3.4vw,36px);
  background:var(--bg-3);display:flex;flex-direction:column;gap:18px;position:relative;transition:.4s var(--ease)
}
.pkg:hover{border-color:var(--line-2);transform:translateY(-4px)}
.pkg.is-popular{border-color:var(--accent);background:linear-gradient(180deg,rgba(255,49,49,.07),var(--bg-3))}
.pkg__badge{
  position:absolute;top:-11px;left:clamp(26px,3.4vw,36px);background:var(--accent);color:#fff;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:5px 13px;border-radius:999px
}
.pkg__name{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.pkg__price{font:300 clamp(2rem,4vw,2.7rem)/1 var(--serif);color:#fff}
.pkg__price small{font-size:.33em;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;display:block;margin-top:8px;font-family:var(--sans)}
.pkg ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pkg li{position:relative;padding-left:26px;font-size:14.2px;color:var(--muted);line-height:1.55}
.pkg li::before{
  content:'';position:absolute;left:0;top:8px;width:13px;height:7px;border-left:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)
}
.pkg .btn{margin-top:auto;width:100%}

/* ---------- contact / form ---------- */
.form{display:grid;gap:16px}
.field{display:grid;gap:8px}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;color:var(--text);font:inherit;font-size:15px;transition:border-color .3s
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2393939c' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form .btn{margin-top:6px}
.alert{border-radius:10px;padding:14px 17px;font-size:14.5px;border:1px solid}
.alert--ok{background:rgba(58,208,122,.08);border-color:rgba(58,208,122,.32);color:#8fe7b4}
.alert--err{background:rgba(255,49,49,.08);border-color:rgba(255,49,49,.32);color:#ff9d9d}
.contact-list{display:grid;gap:22px;margin-top:8px}
.contact-list a,.contact-list div{display:flex;gap:15px;align-items:flex-start}
.contact-list .ico{
  width:42px;height:42px;flex:none;border-radius:11px;background:var(--accent-dim);color:var(--accent);
  display:grid;place-items:center
}
.contact-list .ico svg{width:19px;height:19px}
.contact-list b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);font-weight:500;margin-bottom:3px}
.contact-list span{color:#fff;font-size:15.5px;line-height:1.5}
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);height:340px;filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.85)}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ---------- films ---------- */
.films{display:grid;gap:clamp(16px,2.4vw,26px)}
.film{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:var(--bg-3);border:1px solid var(--line)}
.film picture{display:block;width:100%;height:100%}
.film img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.film:hover img{transform:scale(1.05)}
.film__play{
  position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,8,9,.35);transition:.4s
}
.film__play i{
  width:66px;height:66px;border-radius:50%;background:rgba(255,49,49,.92);display:grid;place-items:center;
  transition:.4s var(--ease)
}
.film:hover .film__play i{transform:scale(1.12)}
.film__play svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.film__cap{position:absolute;left:0;right:0;bottom:0;padding:20px;background:linear-gradient(transparent,rgba(8,8,9,.9));z-index:2}
.film__cap b{display:block;font:400 1.2rem/1.3 var(--serif)}
.film__cap span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--r);
  padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px);text-align:center;
  border:1px solid var(--line)
}
.cta-band__bg{position:absolute;inset:0;z-index:0}
.cta-band__bg img{width:100%;height:100%;object-fit:cover}
.cta-band::after{
  content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.82),rgba(10,10,11,.93));z-index:1
}
.cta-band>*{position:relative;z-index:2}

/* the band's background is a slideshow - slides stack, no dots, no scrim */
.cta-band__bg .pkg__slide{position:absolute;inset:0}
.cta-band__bg picture{display:block;width:100%;height:100%}
.cta-band__bg .pkg__slide img{width:100%;height:100%;object-fit:cover}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-2);padding-top:clamp(48px,7vw,80px)}
.footer__grid{display:grid;gap:36px}
.footer__logo img{height:56px;margin-bottom:18px}
.footer h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;font-weight:500}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer li a,.footer address a{color:var(--muted);font-size:14.5px;transition:color .3s;font-style:normal}
.footer li a:hover,.footer address a:hover{color:var(--accent)}
.footer address{font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.8}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{
  width:40px;height:40px;border-radius:11px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);transition:.3s
}
.socials a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.socials svg{width:17px;height:17px}
.footer__bar{
  margin-top:clamp(36px,5vw,56px);border-top:1px solid var(--line);padding-block:24px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:12.5px;color:var(--muted-2)
}
.footer__bar a:hover{color:var(--accent)}

/* ---------- sticky mobile action bar ---------- */
.mobile-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;display:grid;grid-template-columns:1fr 1fr;
  background:rgba(10,10,11,.92);backdrop-filter:blur(16px);border-top:1px solid var(--line)
}
.mobile-bar a{
  padding:15px 8px;text-align:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;justify-content:center;gap:9px
}
.mobile-bar a+a{border-left:1px solid var(--line);background:var(--accent);color:#fff}
.mobile-bar svg{width:16px;height:16px}
body{padding-bottom:0}

/* ---------- page hero (inner pages) ---------- */
.phero{position:relative;padding-top:150px;padding-bottom:clamp(48px,7vw,80px);overflow:hidden}
.phero__bg{position:absolute;inset:0;z-index:0}
.phero__bg img{width:100%;height:100%;object-fit:cover;opacity:.4}
.phero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,10,11,.9) 0%,rgba(10,10,11,.66) 42%,rgba(10,10,11,.92) 82%,var(--bg) 100%),
             linear-gradient(90deg,rgba(10,10,11,.7),rgba(10,10,11,.15) 70%)}
.phero>.wrap{position:relative;z-index:2}
.crumbs{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.crumbs a:hover{color:var(--accent)}

/* ---------- empty state ---------- */
.empty{border:1px dashed var(--line-2);border-radius:var(--r);padding:clamp(34px,5vw,60px);text-align:center;color:var(--muted)}

/* =====================================================================
   BREAKPOINTS
   ===================================================================== */
@media (max-width:479px){
  .hero__cta{display:grid;grid-template-columns:1fr;gap:11px}
  .hero__cta .btn{width:100%}
  .hero__body{padding-top:120px}
  .hero__meta{gap:20px 30px;margin-top:38px}
  .hero__meta b{font-size:22px}
}
@media (min-width:560px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2}
  .stats{grid-template-columns:repeat(4,1fr)}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .films{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:860px){
  .pkgs{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr 1fr}
  .split--rev .split__media{order:2}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr}
  .masonry{columns:3}
  .hero__dots{display:flex}
}
@media (min-width:1000px){
  .nav{display:flex;gap:clamp(18px,2.4vw,34px);align-items:center}
  .header__cta{display:inline-flex}
  .burger{display:none}
  .drawer{display:none}
  .mobile-bar{display:none}
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards--3{grid-template-columns:repeat(3,1fr)}
  .quotes{grid-template-columns:repeat(3,1fr)}
  .films{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1280px){
  .masonry{columns:4}
  .masonry--3{columns:3}
}
@media (max-width:999px){
  body{padding-bottom:54px}
}

/* keep browser autofill on-brand instead of white */
.field input:-webkit-autofill,.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,.field textarea:-webkit-autofill,
.field select:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}

/* =====================================================================
   Service cards with photographs (homepage) + service photo strips
   ===================================================================== */
.svc-card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg-3);
  transition:.45s var(--ease)
}
.svc-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.svc-card__img{position:relative;aspect-ratio:16/10;background:#000}
.svc-card__frame{position:absolute;inset:0;overflow:hidden;display:block}
.svc-card__frame picture{display:block;width:100%;height:100%}
.svc-card__frame img{width:100%;height:100%;object-fit:cover;object-position:center 34%;transition:transform 1.1s var(--ease)}
.svc-card:hover .svc-card__frame img{transform:scale(1.07)}
.svc-card__frame::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,8,9,.78))}
.svc-card__ico{
  position:absolute;left:20px;bottom:-23px;z-index:2;width:46px;height:46px;border-radius:13px;
  background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 14px 32px rgba(0,0,0,.55)
}
.svc-card__body{padding:36px 22px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.svc-card__body p{color:var(--muted);font-size:14.2px}
.svc-card__price{
  margin-top:auto;padding-top:15px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--muted)
}
.svc-card__price b{color:#fff;font:400 20px/1 var(--serif)}
.svc-card__price .go{color:var(--accent);display:flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}

.svc-shots{
  display:grid;gap:clamp(10px,1.6vw,16px);grid-template-columns:repeat(2,1fr);
  margin-bottom:clamp(26px,3.6vw,40px)
}
.svc-shots .tile{aspect-ratio:4/3}
.svc-shots .tile picture{display:block;width:100%;height:100%}
.svc-shots .tile img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
@media (min-width:860px){.svc-shots{grid-template-columns:repeat(4,1fr)}}

/* mosaic capped at three columns (used where four would be too busy) */
.mosaic--3 .tile{aspect-ratio:3/4}
@media (min-width:1280px){.mosaic--3{grid-template-columns:repeat(3,1fr)}}

/* films laid out two-up so the 16:9 posters stay big and the grid stays even */
@media (min-width:700px){.films--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.films--2{grid-template-columns:repeat(2,1fr)}}
.film__len{
  position:absolute;top:12px;right:12px;z-index:3;font-size:10.5px;letter-spacing:.12em;
  background:rgba(10,10,11,.72);backdrop-filter:blur(8px);padding:5px 10px;border-radius:999px;color:#fff
}
.film__cap b{font-size:1.32rem}

/* video player inside the lightbox */
.lb video{max-width:100%;max-height:84vh;border-radius:10px;background:#000;outline:none}

/* =====================================================================
   PACKAGES  —  navigation, homepage hub, premium package cards
   (added alongside nppsmigration.php)
   ===================================================================== */

:root{
  --tier-classic:#b9bcc4;
  --tier-elite:#d9b26a;
  --tier-royal:#ff3131;
  --gold-soft:rgba(217,178,106,.16);
}

/* ---------- the menu now carries the ceremony names, so it needs room -- */
@media (min-width:1000px){
  .nav{gap:clamp(14px,1.7vw,26px)}
  .nav a{font-size:11.5px;letter-spacing:.15em;white-space:nowrap}
}
@media (min-width:1000px) and (max-width:1180px){
  .header__cta{display:none}
}

/* ---------- mobile drawer: secondary links ---------- */
.drawer a.drawer__link.is-active{color:var(--accent)}
.drawer__more{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px
}
.drawer__more a{
  border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}
.drawer__more a:hover{border-color:var(--accent);color:var(--accent)}

/* the sticky header must not sit on top of an anchored section */
section[id]{scroll-margin-top:96px}

/* =====================================================================
   HOMEPAGE — package category hub
   ===================================================================== */
.pkg-hub{display:grid;gap:clamp(16px,2.4vw,26px);grid-template-columns:1fr}
@media (min-width:660px){.pkg-hub{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.pkg-hub{grid-template-columns:repeat(3,1fr)}}

.pkg-cat{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)
}
.pkg-cat:hover{transform:translateY(-6px);border-color:rgba(217,178,106,.5);box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.pkg-cat__media{position:relative;overflow:hidden}
.pkg-cat__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0f0f11}
.pkg-cat__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pkg-cat:hover .pkg-cat__img img{transform:scale(1.06)}
.pkg-cat__img::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.05) 30%,rgba(10,10,11,.72) 78%,var(--bg-3) 100%)
}
.pkg-cat__ico{
  position:absolute;left:clamp(18px,2.4vw,24px);bottom:14px;z-index:4;
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(10,10,11,.72);border:1px solid rgba(217,178,106,.45);color:var(--tier-elite);
  backdrop-filter:blur(6px)
}
.pkg-cat__body{padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;flex:1;gap:12px}
.pkg-cat__desc{color:var(--muted);font-size:14.4px;line-height:1.62;margin:0}
.pkg-cat__tiers{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.pkg-cat__tiers span{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-2);border-radius:999px;padding:5px 11px
}
.pkg-cat__tiers span:nth-child(2){color:var(--tier-elite);border-color:rgba(217,178,106,.42)}
.pkg-cat__tiers span:nth-child(3){color:var(--accent);border-color:rgba(255,49,49,.42)}
.pkg-cat__foot{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px
}
.pkg-cat__from{font-size:13px;color:var(--muted);display:block}
.pkg-cat__from b{font-family:var(--serif);font-size:24px;font-weight:400;color:#fff;margin-left:4px}
.pkg-cat__from i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-top:5px}
.pkg-cat__go{
  flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:500
}
.pkg-cat__go svg{transition:transform .4s var(--ease)}
.pkg-cat:hover .pkg-cat__go svg{transform:translateX(5px)}
.pkg-hub__note{
  margin:clamp(24px,3vw,34px) 0 0;text-align:center;color:var(--muted-2);font-size:13.6px
}
.pkg-hub__note a{color:var(--accent);border-bottom:1px solid rgba(255,49,49,.4)}

/* =====================================================================
   Group heading inside a service page  (Pre-Wedding / Wedding)
   ===================================================================== */
.pkg-group{
  display:flex;align-items:center;gap:16px;margin:clamp(34px,4.4vw,54px) 0 clamp(18px,2.2vw,26px)
}
.pkg-group span{
  font-family:var(--serif);font-size:clamp(1.35rem,2.6vw,1.95rem);font-weight:300;
  color:#fff;white-space:nowrap
}
.pkg-group::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.pkg-group i{
  order:3;flex:none;font-style:normal;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px
}

/* =====================================================================
   Premium package card
   ===================================================================== */
.pkgs--premium{grid-template-columns:1fr}
@media (min-width:720px){.pkgs--premium{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.pkgs--premium{grid-template-columns:repeat(3,1fr)}}

.pkgs--premium .pkg{
  --pkg-px:clamp(22px,2.6vw,30px);
  --pkg-pt:clamp(26px,3vw,34px);
  position:relative;display:flex;flex-direction:column;gap:20px;overflow:hidden;
  padding:var(--pkg-pt) var(--pkg-px) clamp(22px,2.6vw,28px);
  background:linear-gradient(180deg,#141417,var(--bg-3));
  border:1px solid var(--line);border-radius:18px;
  transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)
}
.pkgs--premium .pkg::before{
  content:'';position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--tier-classic),transparent);opacity:.55
}
.pkgs--premium .pkg--elite::before{background:linear-gradient(90deg,transparent,var(--tier-elite),transparent);opacity:.85}
.pkgs--premium .pkg--royal::before{background:linear-gradient(90deg,transparent,var(--tier-royal),transparent);opacity:.9}
.pkgs--premium .pkg:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.pkgs--premium .pkg--elite:hover{border-color:rgba(217,178,106,.55)}
.pkgs--premium .pkg--royal:hover{border-color:rgba(255,49,49,.55)}
.pkgs--premium .pkg.is-popular{
  border-color:rgba(217,178,106,.45);
  background:linear-gradient(180deg,rgba(217,178,106,.09),var(--bg-3) 42%)
}

.pkg__ribbon{
  position:absolute;z-index:4;top:16px;right:-34px;transform:rotate(45deg);
  width:132px;text-align:center;padding:5px 0;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  background:rgba(255,255,255,.08);color:var(--tier-classic);border-block:1px solid rgba(255,255,255,.14)
}
.pkg--elite .pkg__ribbon{background:var(--gold-soft);color:var(--tier-elite);border-color:rgba(217,178,106,.4)}
.pkg--royal .pkg__ribbon{background:rgba(255,49,49,.16);color:#ff7a7a;border-color:rgba(255,49,49,.4)}
.pkgs--premium .pkg__badge{
  position:static;display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  background:var(--tier-elite);color:#1a1408;border-radius:999px;padding:5px 13px;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;margin-bottom:-8px
}
/* with a photo on top the pill rides the image, so all three cards in a row
   keep their titles and prices on the same line */
.pkgs--premium .pkg__media ~ .pkg__badge{
  position:absolute;z-index:4;top:13px;left:13px;margin:0;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.9)
}

.pkg__head{display:grid;gap:9px;padding-right:52px}
.pkg__media ~ .pkg__head{padding-right:0}
.pkgs--premium .pkg__name{
  font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.5rem);font-weight:400;line-height:1.22;
  letter-spacing:0;text-transform:none;color:#fff;margin:0
}
.pkg__dur{
  margin:0;display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)
}
.pkg__dur svg{color:var(--tier-elite);flex:none}

/* ---------- photo slider at the top of every package card ---------- */
.pkg__media{
  position:relative;z-index:1;overflow:hidden;
  margin:calc(var(--pkg-pt) * -1) calc(var(--pkg-px) * -1) 0;
  aspect-ratio:16/10;background:#0f0f11
}
.pkg__slide{position:absolute;inset:0;opacity:0;transition:opacity .95s var(--ease)}
.pkg__slide.is-on{opacity:1}
.pkg__slide img{width:100%;height:100%;object-fit:cover}
.pkg__media-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,11,.28) 0%,transparent 38%,rgba(10,10,11,.55) 78%,rgba(15,15,17,.9) 100%)
}
.pkg__dots{position:absolute;z-index:3;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px}
.pkg__dots > *{
  display:block;width:6px;height:6px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background .3s var(--ease),transform .3s var(--ease)
}
.pkg__dots button{cursor:pointer}
.pkg__dots button:hover{background:rgba(255,255,255,.7)}
.pkg__dots > *.is-on{background:#fff;transform:scale(1.55)}
.pkg--elite .pkg__dots > *.is-on{background:var(--tier-elite)}
.pkg--royal .pkg__dots > *.is-on{background:var(--accent)}
.pkg-cat .pkg__dots > *.is-on{background:var(--tier-elite)}
.pkgs--premium .pkg:hover .pkg__slide.is-on img{transform:scale(1.04)}
.pkg__slide img{transition:transform 1.2s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .pkg__slide{transition:none}
  .pkg__slide img{transition:none}
}

.pkg__pricing{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pkg__meta{display:grid;gap:7px;justify-items:start;padding-bottom:5px}
.pkgs--premium .pkg__price{font:300 clamp(2.1rem,4.2vw,2.85rem)/1 var(--serif);color:#fff;letter-spacing:-.01em}
.pkg__old{font-size:15px;color:var(--muted-2);text-decoration:line-through;text-decoration-color:rgba(255,49,49,.6)}
.pkg__save{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;white-space:nowrap;
  color:#8ee7b3;background:rgba(58,208,122,.12);border:1px solid rgba(58,208,122,.3);
  border-radius:999px;padding:5px 11px
}

.pkg__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pkg__list li{position:relative;padding-left:25px;font-size:13.9px;line-height:1.58;color:var(--muted)}
.pkg__list li::before{
  content:'';position:absolute;left:0;top:7px;width:12px;height:6px;
  border-left:1.6px solid var(--tier-elite);border-bottom:1.6px solid var(--tier-elite);
  transform:rotate(-45deg)
}
.pkg--royal .pkg__list li::before{border-color:var(--accent)}
.pkg--classic .pkg__list li::before{border-color:var(--tier-classic)}

.pkg__foot{margin-top:auto;display:grid;gap:12px}
.pkg__note{
  margin:0;font-size:11.5px;line-height:1.5;color:var(--muted-2);
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:10px;padding:9px 12px
}
.pkgs--premium .pkg__cta{width:100%;margin-top:0}
.pkg__wa{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color .3s var(--ease)
}
.pkg__wa:hover{color:#5ce07f}

.pkg-terms{
  margin:clamp(30px,4vw,44px) auto 0;max-width:74ch;text-align:center;
  font-size:13px;line-height:1.7;color:var(--muted-2)
}
.pkg-terms a{color:var(--accent);border-bottom:1px solid rgba(255,49,49,.4)}

@media (max-width:479px){
  .pkg__ribbon{width:118px;right:-38px;top:13px}
  .pkg__head{padding-right:40px}
}

/* ---------------------------------------------------------------------
   Top menu that grows with the services
   The middle of the header is built from the services table, so the
   number of links is not fixed. These rules keep the bar on one line and
   let it scroll sideways instead of pushing the logo or the CTA off the
   screen when more package categories are added in the admin panel.
   --------------------------------------------------------------------- */
@media (min-width:1000px){
  .nav{
    flex:1 1 auto;min-width:0;justify-content:center;
    overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    scroll-padding-inline:12px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:none;white-space:nowrap}
}
/* six or more links: tighten the spacing before anything has to scroll */
@media (min-width:1000px) and (max-width:1439px){
  .nav:has(> a:nth-child(7)){gap:clamp(12px,1.5vw,20px)}
  .nav:has(> a:nth-child(7)) a{font-size:11px;letter-spacing:.1em}
  .nav:has(> a:nth-child(9)){gap:clamp(10px,1.2vw,16px)}
  .nav:has(> a:nth-child(9)) a{font-size:10.5px;letter-spacing:.07em}
}
/* the mobile drawer simply gets longer — make sure it can always scroll,
   and shrink the huge serif links once there are more than six of them */
.drawer{overflow-y:auto;overscroll-behavior:contain}
.drawer:has(.drawer__link:nth-of-type(7)){justify-content:flex-start}
.drawer:has(.drawer__link:nth-of-type(7)) a.drawer__link{
  font-size:clamp(1.45rem,6.4vw,2.1rem);padding:8px 0
}
.drawer:has(.drawer__link:nth-of-type(10)) a.drawer__link{
  font-size:clamp(1.2rem,5.4vw,1.7rem);padding:6px 0
}