/* ============================================================
   Kozmetički salon Jamal — Zenica
   Paleta preuzeta iz vizualnog identiteta salona:
   topla krem podloga, duboka tinta, zlatno-taupe akcent.
   ============================================================ */

:root{
  --cream:      #F6F2EC;
  --cream-2:    #EFE8DF;
  --sand:       #E3D9CC;
  --ink:        #1C1917;
  --ink-soft:   #4A433C;
  --muted:      #8A7F73;
  --gold:       #B39B72;
  --gold-deep:  #9A8259;
  --rose:       #C7A6A0;
  --line:       rgba(28,25,23,.12);
  --line-soft:  rgba(28,25,23,.07);
  --white:      #FFFDFA;

  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-body:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-script:  "Parisienne", cursive;

  --wrap: 1200px;
  --pad: clamp(1.15rem, 5vw, 3rem);
  --sec: clamp(4.5rem, 11vw, 9rem);
  --r: 2px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:300;
  font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ margin:0; font-family:var(--ff-display); font-weight:400; line-height:1.06; letter-spacing:-.012em; }
p{ margin:0 0 1.1em; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--gold); color:var(--white); }

.wrap{ width:min(100% - var(--pad)*2, var(--wrap)); margin-inline:auto; }
.section{ padding-block:var(--sec); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:.8rem 1.2rem;
}
.skip:focus{ left:.5rem; top:.5rem; }
:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

/* ---------- tipografija ---------- */
.h2{
  font-size:clamp(2.1rem,1.35rem + 3.2vw,4rem);
  margin-bottom:.55em;
}
.h2 em, .hero__title em{ font-style:italic; color:var(--gold-deep); }

.eyebrow{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:500; color:var(--muted); margin-bottom:1.1rem;
}
.eyebrow::before{
  content:""; display:inline-block; width:1.9rem; height:1px;
  background:var(--gold); vertical-align:middle; margin-right:.75rem;
  transform:translateY(-1px);
}

.sec-head{ max-width:44rem; margin-bottom:clamp(2.5rem,5vw,4rem); }
.sec-head__lead{ color:var(--ink-soft); max-width:36rem; margin:0; }

/* ---------- dugmad ---------- */
.btn{
  --bg:var(--ink); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.9rem; border-radius:var(--r);
  font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  position:relative; overflow:hidden; isolation:isolate;
  border:1px solid var(--ink); color:var(--fg); background:var(--bg);
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gold-deep);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.btn:hover::after{ transform:scaleX(1); transform-origin:left; }
.btn:hover{ border-color:var(--gold-deep); color:#fff; }
.btn--ghost{ --bg:transparent; --fg:var(--ink); }
.btn--ghost:hover{ color:#fff; }
.btn--full{ width:100%; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; inset:0 0 auto; z-index:80;
  transition:background .5s var(--ease), box-shadow .5s var(--ease), backdrop-filter .5s;
}
.hdr__in{
  width:min(100% - var(--pad)*2, 1340px); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem;
  padding-block:clamp(1.1rem,2.4vw,1.9rem);
  transition:padding .5s var(--ease);
}
.hdr.is-stuck{
  background:rgba(246,242,236,.88);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 var(--line-soft), 0 12px 32px -26px rgba(28,25,23,.5);
}
.hdr.is-stuck .hdr__in{ padding-block:.75rem; }

.brand{ display:flex; flex-direction:column; line-height:1; margin-right:auto; }
.brand__kicker{
  font-size:.56rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.22rem; padding-left:.14em;
}
.brand__name{
  font-family:var(--ff-display); font-size:clamp(1.55rem,1.2rem + 1.3vw,2.1rem);
  letter-spacing:.005em;
}

.nav__list{ display:flex; gap:clamp(1.3rem,2.4vw,2.6rem); }
.nav__link{
  position:relative; font-size:.79rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:400; padding-block:.35rem;
  color:var(--ink-soft);
  transition:color .35s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--gold-deep);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav__link:hover, .nav__link.is-active{ color:var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__foot{ display:none; }

.hdr__cta{
  border:1px solid var(--line); border-radius:var(--r);
  padding:.7rem 1.35rem; font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; font-weight:500; white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.hdr__cta:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.burger{ display:none; width:40px; height:34px; position:relative; z-index:78; flex:none; }
.burger span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--ink);
  transition:transform .45s var(--ease-out), opacity .3s;
}
.burger span:nth-child(1){ top:10px; }
.burger span:nth-child(2){ top:16px; }
.burger span:nth-child(3){ top:22px; }
.burger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-scrim{
  position:fixed; inset:0; z-index:70; background:rgba(28,25,23,.35);
  opacity:0; transition:opacity .45s var(--ease);
}
.nav-scrim.is-on{ opacity:1; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(7.5rem,15vw,10.5rem) 0 clamp(3.5rem,7vw,6rem);
  background:
    radial-gradient(70% 55% at 88% 12%, rgba(179,155,114,.16), transparent 70%),
    radial-gradient(60% 50% at 6% 88%, rgba(199,166,160,.14), transparent 70%),
    var(--cream);
  overflow:hidden;
}
.hero__grid{
  width:min(100% - var(--pad)*2, 1340px); margin-inline:auto;
  display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.hero__copy{ max-width:34rem; }

.hero__title{
  font-size:clamp(3.1rem,1.6rem + 7.4vw,7.2rem);
  line-height:.98; margin:0 0 1.4rem;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{
  display:block;
  transform:translateY(105%);
  animation:riseIn 1.15s var(--ease-out) forwards;
}
.hero__title .line:nth-child(1) > span{ animation-delay:.15s; }
.hero__title .line:nth-child(2) > span{ animation-delay:.28s; }
.hero__title .line:nth-child(3) > span{ animation-delay:.41s; }
@keyframes riseIn{ to{ transform:translateY(0); } }

.hero__lead{ color:var(--ink-soft); font-size:1.06em; max-width:31rem; }
.hero__lead strong{ font-weight:500; color:var(--ink); }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-block:2rem 2.6rem; }

.hero__meta{
  display:flex; flex-wrap:wrap; gap:0; margin:0;
  border-top:1px solid var(--line-soft);
}
.hero__meta > div{
  padding:1rem 1.6rem 0 0; margin-right:1.6rem;
  border-right:1px solid var(--line-soft);
}
.hero__meta > div:last-child{ border-right:0; margin-right:0; padding-right:0; }
.hero__meta dt{
  font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.25rem;
}
.hero__meta dd{ margin:0; font-family:var(--ff-display); font-size:1.28rem; }

/* media */
.hero__media{ margin:0; position:relative; }
.hero__frame{
  overflow:hidden; border-radius:var(--r);
  box-shadow:0 44px 80px -48px rgba(28,25,23,.55);
  clip-path:inset(0 0 100% 0);
  animation:frameOpen 1.3s var(--ease-out) .25s forwards;
}
@keyframes frameOpen{ to{ clip-path:inset(0 0 0 0); } }
.hero__frame img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transform:scale(1.14);
  animation:imgSettle 1.9s var(--ease-out) .25s forwards;
  will-change:transform;
}
@keyframes imgSettle{ to{ transform:scale(1); } }

.hero__sig{
  font-family:var(--ff-script);
  font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem);
  color:var(--ink);
  position:absolute; left:-.4rem; bottom:-1.6rem;
  background:var(--cream); padding:.1em .55em .2em;
  border-radius:var(--r);
  opacity:0; transform:translateY(14px);
  animation:fadeUp .9s var(--ease-out) 1.15s forwards;
}
@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.scrollcue{
  position:absolute; left:50%; bottom:1.5rem; translate:-50% 0;
  width:1px; height:56px; background:var(--line); overflow:hidden;
}
.scrollcue span{
  position:absolute; inset:0; background:var(--gold-deep);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateY(-100%); }
  55%,100%{ transform:translateY(100%); }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  border-block:1px solid var(--line-soft);
  background:var(--cream-2);
  padding-block:1.05rem; overflow:hidden;
}
.marquee__track{
  display:flex; align-items:center; gap:2.2rem; width:max-content;
  animation:slide 42s linear infinite;
}
.marquee span{
  font-family:var(--ff-display); font-size:clamp(1.35rem,1.1rem + .9vw,2rem);
  font-style:italic; color:var(--ink-soft); white-space:nowrap;
}
.marquee i{ color:var(--gold); font-style:normal; font-size:.75rem; }
@keyframes slide{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ============================================================
   O SALONU
   ============================================================ */
.about__grid{
  display:grid; grid-template-columns:.95fr 1fr;
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.about__media{ position:relative; }
.about__media > img:first-child{
  width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r);
  box-shadow:0 40px 70px -46px rgba(28,25,23,.5);
}
.about__inset{
  position:absolute; right:-1.6rem; bottom:-2rem;
  width:42%; aspect-ratio:3/4; object-fit:cover;
  border:7px solid var(--cream); border-radius:var(--r);
  box-shadow:0 26px 46px -28px rgba(28,25,23,.45);
}
.about__text p{ color:var(--ink-soft); }
.about__text strong{ font-weight:500; color:var(--ink); }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1rem; margin-top:2.6rem;
  border-top:1px solid var(--line-soft); padding-top:1.7rem;
}
.stats b{
  display:block; font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2rem,1.5rem + 1.9vw,3rem); line-height:1;
  color:var(--gold-deep); font-variant-numeric:tabular-nums;
}
.stats span{
  display:block; margin-top:.4rem; font-size:.69rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.5;
}

/* ============================================================
   USLUGE
   ============================================================ */
.services{ background:var(--cream-2); }
.cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r); overflow:hidden;
}
.card{
  position:relative; background:var(--cream-2);
  padding:clamp(1.8rem,3.2vw,2.7rem);
  transition:background .55s var(--ease), color .55s var(--ease);
  overflow:hidden; isolation:isolate;
}
.card::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .6s var(--ease-out);
}
.card:hover::before{ transform:translateY(0); }
.card:hover{ color:var(--cream); }
.card:hover .card__num{ color:var(--gold); }
.card:hover .card__tag{ color:var(--gold); border-color:rgba(179,155,114,.4); }
.card:hover p{ color:rgba(246,242,236,.78); }

.card__num{
  display:block; font-family:var(--ff-display); font-size:.9rem;
  letter-spacing:.2em; color:var(--gold-deep); margin-bottom:1.3rem;
  transition:color .55s var(--ease);
}
.card h3{ font-size:clamp(1.5rem,1.25rem + .8vw,1.95rem); margin-bottom:.55rem; }
.card p{ font-size:.95rem; color:var(--ink-soft); margin-bottom:1.4rem; transition:color .55s var(--ease); }
.card__tag{
  display:inline-block; font-size:.63rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:99px; padding:.3rem .8rem;
  transition:color .55s var(--ease), border-color .55s var(--ease);
}
.services__note{
  margin:2.4rem 0 0; font-size:.93rem; color:var(--ink-soft);
}
.services__note a{ color:var(--gold-deep); border-bottom:1px solid currentColor; padding-bottom:1px; }
.services__note a:hover{ color:var(--ink); }

/* ============================================================
   CITAT
   ============================================================ */
.quote{ position:relative; overflow:hidden; isolation:isolate; }
.quote__bg{ position:absolute; inset:0; z-index:-2; }
.quote__bg img{ width:100%; height:100%; object-fit:cover; }
.quote::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(246,242,236,.94) 0%, rgba(246,242,236,.82) 46%, rgba(246,242,236,.42) 100%);
}
.quote__body{
  padding-block:clamp(4rem,9vw,7.5rem);
  max-width:48rem; margin:0 auto;
}
.quote__body p{
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(1.55rem,1.1rem + 2.1vw,2.85rem);
  line-height:1.3; color:var(--ink); margin-bottom:1.5rem;
}
.quote__body cite{
  font-style:normal; font-size:.7rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   GALERIJA
   ============================================================ */
.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(.6rem,1.4vw,1.1rem);
}
.tile{
  margin:0; position:relative; overflow:hidden; border-radius:var(--r);
  cursor:zoom-in; background:var(--sand);
}
.tile img{
  width:100%; height:100%; aspect-ratio:4/5; object-fit:cover;
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.tile--tall img{ aspect-ratio:3/4.4; }
.tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,25,23,.62), rgba(28,25,23,0) 48%);
  opacity:0; transition:opacity .5s var(--ease);
}
.tile figcaption{
  position:absolute; left:1rem; right:1rem; bottom:.9rem; z-index:2;
  color:var(--cream); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease-out);
}
.tile:hover img{ transform:scale(1.07); }
.tile:hover::after, .tile:hover figcaption{ opacity:1; }
.tile:hover figcaption{ transform:none; }

.gallery__more{ margin-top:clamp(2rem,4vw,3rem); }
.gallery__more svg{ transition:transform .4s var(--ease-out); }
.gallery__more:hover svg{ transform:translate(3px,-3px); }

/* ============================================================
   KONTAKT
   ============================================================ */
.contact{ background:var(--cream-2); }
.contact__grid{
  display:grid; grid-template-columns:1fr .92fr;
  gap:clamp(2.5rem,5vw,5rem); align-items:start;
}
.contact__lead{ color:var(--ink-soft); max-width:30rem; }

.contact__list{ margin-top:2.6rem; display:grid; gap:1.6rem; }
.contact__list li{ display:flex; gap:1.05rem; align-items:flex-start; }
.ico{
  flex:none; width:2.6rem; height:2.6rem; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:50%; color:var(--gold-deep);
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.contact__list li:hover .ico{ background:var(--ink); color:var(--gold); border-color:var(--ink); }
.ico svg{ width:19px; height:19px; }
.contact__list b{
  display:block; font-weight:500; font-size:.67rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.28rem;
}
.contact__list a{ border-bottom:1px solid var(--line); transition:border-color .35s; }
.contact__list a:hover{ border-color:var(--gold-deep); }

.hours{ display:grid; gap:.2rem; }
.hours > span{ display:flex; justify-content:space-between; gap:1.5rem; max-width:20rem; }
.hours i{ font-style:normal; color:var(--ink-soft); }

.contact__btns{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2.4rem; }

/* forma */
.form{
  background:var(--cream); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:clamp(1.5rem,3.2vw,2.4rem);
  box-shadow:0 30px 60px -48px rgba(28,25,23,.45);
}
.form__title{ font-size:1.7rem; margin-bottom:1.5rem; }
.hp{ position:absolute; left:-9999px; }
.field{ display:block; margin-bottom:1.05rem; }
.field > span{
  display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.42rem;
}
.field > span i{ font-style:normal; text-transform:none; letter-spacing:.04em; opacity:.75; }
.field input, .field select, .field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:.78rem .95rem; resize:vertical;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:#b6aa9c; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(179,155,114,.16);
}
.form .btn{ margin-top:.5rem; }
.form__note{ margin:.9rem 0 0; font-size:.78rem; color:var(--muted); line-height:1.55; }

.map{
  margin-top:1.1rem; border:1px solid var(--line-soft);
  border-radius:var(--r); overflow:hidden; background:var(--sand);
}
.map iframe{ width:100%; height:270px; border:0; filter:grayscale(.35) contrast(1.02); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ background:var(--ink); color:var(--cream); padding-top:clamp(3rem,6vw,4.5rem); }
.foot__in{
  display:grid; grid-template-columns:1.6fr 1fr 1.3fr;
  gap:clamp(2rem,5vw,4rem); align-items:start;
  padding-bottom:clamp(2.5rem,5vw,3.5rem);
}
.foot .brand__kicker{ color:rgba(246,242,236,.5); }
.foot .brand__name{ font-size:2.4rem; display:block; line-height:1; }
.foot__sig{
  display:block; font-family:var(--ff-script);
  font-size:1.55rem; color:var(--gold); margin-top:.35rem;
}
.foot__nav{ display:grid; gap:.6rem; }
.foot__nav a, .foot__contact a, .foot__contact span{
  font-size:.83rem; color:rgba(246,242,236,.72);
  transition:color .35s var(--ease);
}
.foot__nav a:hover, .foot__contact a:hover{ color:var(--gold); }
.foot__contact{ display:grid; gap:.6rem; text-align:right; }
.foot__legal{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem;
  padding-block:1.4rem; border-top:1px solid rgba(246,242,236,.13);
  font-size:.71rem; letter-spacing:.06em; color:rgba(246,242,236,.45);
}

/* ============================================================
   MOBILNA KONTAKT TRAKA
   ============================================================ */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; gap:.5rem; align-items:center;
  padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(246,242,236,.93);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--line-soft);
  transform:translateY(110%);
  transition:transform .5s var(--ease-out);
}
.dock.is-up{ transform:none; }
.dock__a{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.4rem;
  padding:.66rem .85rem; border-radius:var(--r);
  border:1px solid var(--line);
  font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; font-weight:500;
}
.dock__a svg{ width:15px; height:15px; }
.dock__a--solid{
  flex:1 1 auto; justify-content:center;
  background:var(--ink); color:var(--cream); border-color:var(--ink);
}
body.is-locked .dock{ transform:translateY(110%); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{
  position:fixed; inset:0; z-index:120;
  background:rgba(20,18,16,.97);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
  opacity:0; transition:opacity .4s var(--ease);
}
.lb.is-on{ opacity:1; }
.lb[hidden]{ display:none; }
.lb__fig{ margin:0; max-width:min(92vw,900px); text-align:center; }
.lb__fig img{
  max-height:80vh; width:auto; margin-inline:auto; border-radius:var(--r);
  transform:scale(.96); opacity:0;
  transition:transform .5s var(--ease-out), opacity .4s var(--ease);
}
.lb.is-on .lb__fig img{ transform:none; opacity:1; }
.lb__fig figcaption{
  margin-top:1rem; color:rgba(246,242,236,.75);
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
}
.lb__x{
  position:absolute; top:.6rem; right:1rem; z-index:2;
  font-size:2.4rem; line-height:1; color:var(--cream); opacity:.7;
  padding:.5rem; transition:opacity .3s, transform .3s var(--ease);
}
.lb__x:hover{ opacity:1; transform:rotate(90deg); }
.lb__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:3.2rem; height:3.2rem; border-radius:50%;
  font-size:2rem; line-height:1; color:var(--cream);
  background:rgba(246,242,236,.08); border:1px solid rgba(246,242,236,.18);
  display:grid; place-items:center;
  transition:background .35s var(--ease), border-color .35s;
}
.lb__nav:hover{ background:rgba(246,242,236,.2); border-color:rgba(246,242,236,.35); }
.lb__nav--prev{ left:clamp(.5rem,2vw,2rem); }
.lb__nav--next{ right:clamp(.5rem,2vw,2rem); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .cards{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .cards{ grid-template-columns:1fr; }
}

@media (max-width:1040px){
  .hero__grid{ grid-template-columns:1fr; gap:3rem; }
  .hero__copy{ max-width:none; }
  .hero__media{ max-width:32rem; }
  .hero__sig{ left:auto; right:-.2rem; }
  .about__grid, .contact__grid{ grid-template-columns:1fr; }
  .about__media{ max-width:30rem; }
  .foot__in{ grid-template-columns:1fr 1fr; }
  .foot__contact{ text-align:left; grid-column:1/-1; }
}

@media (max-width:860px){
  .hdr__cta{ display:none; }
  .burger{ display:block; }
  .dock{ display:flex; }
  .foot{ padding-bottom:4.5rem; }

  .nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,20rem); z-index:75;
    background:var(--cream); padding:6rem var(--pad) 2.5rem;
    display:flex; flex-direction:column; justify-content:space-between;
    transform:translateX(100%);
    transition:transform .6s var(--ease-out);
    box-shadow:-30px 0 60px -40px rgba(28,25,23,.6);
  }
  .nav.is-open{ transform:none; }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__list li{ border-bottom:1px solid var(--line-soft); }
  .nav__link{
    display:block; padding:1.15rem 0;
    font-family:var(--ff-display); font-size:1.7rem;
    letter-spacing:0; text-transform:none; color:var(--ink);
    opacity:0; transform:translateX(22px);
    transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  }
  .nav.is-open .nav__link{ opacity:1; transform:none; }
  .nav.is-open li:nth-child(1) .nav__link{ transition-delay:.12s; }
  .nav.is-open li:nth-child(2) .nav__link{ transition-delay:.19s; }
  .nav.is-open li:nth-child(3) .nav__link{ transition-delay:.26s; }
  .nav.is-open li:nth-child(4) .nav__link{ transition-delay:.33s; }
  .nav__link::after{ display:none; }

  .nav__foot{
    display:block; opacity:0; transform:translateY(12px);
    transition:opacity .5s var(--ease-out) .4s, transform .5s var(--ease-out) .4s;
  }
  .nav.is-open .nav__foot{ opacity:1; transform:none; }
  .nav__tel{
    display:block; font-family:var(--ff-display); font-size:1.4rem;
    color:var(--gold-deep); margin-bottom:.3rem;
  }
  .nav__addr{ display:block; font-size:.8rem; color:var(--muted); line-height:1.5; }
}

@media (max-width:700px){
  .hero__meta{ gap:0; }
  .hero__meta > div{ padding-right:1.1rem; margin-right:1.1rem; }
  .hero__meta dd{ font-size:1.12rem; }
  .about__inset{ right:-.7rem; bottom:-1.3rem; width:44%; border-width:5px; }
  .stats{ gap:.7rem; }
  .stats span{ font-size:.6rem; letter-spacing:.1em; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .tile--tall img{ aspect-ratio:4/5; }
  .hours > span{ max-width:none; }
  .foot__in{ grid-template-columns:1fr; }
  .foot__legal{ flex-direction:column; }
  .lb__nav{ width:2.7rem; height:2.7rem; font-size:1.6rem; }
}

@media (max-width:420px){
  .hero__actions .btn{ flex:1 1 100%; }
  .hero__meta > div:last-child{ padding-top:.6rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__title .line > span{ transform:none; }
  .hero__frame{ clip-path:none; }
  .hero__frame img{ transform:none; }
  .hero__sig{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}