/* ════════════════════════════════════════════════════════════
   SIOSTRY WIŚNIEWSKIE — Studio Fryzjerskie
   Design: warm editorial atelier · bone paper / ink / oak
   Motif: vertical wood-slat texture from the salon interior
   Type:  Bodoni Moda (display) · Hanken Grotesk (body)
   ════════════════════════════════════════════════════════════ */

:root{
  /* palette */
  --paper:   #F2EDE4;
  --paper-2: #E9E1D2;
  --paper-3: #FBF8F1;
  --ink:     #15110C;
  --ink-2:   #2C261C;
  --muted:   #6E6555;
  --oak:     #B5853F;
  --oak-2:   #97692C;
  --oak-soft:#E6D4B0;
  --line:    rgba(21,17,12,.14);
  --line-2:  rgba(21,17,12,.26);

  /* type */
  --serif: "Bodoni Moda", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, sans-serif;

  /* slat motif */
  --slat: repeating-linear-gradient(90deg,
            transparent 0 8px, rgba(21,17,12,.035) 8px 9px);

  --shadow: 0 24px 60px -32px rgba(21,17,12,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1240px;
}

/* ─── reset ─── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
body{
  margin:0;
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:clamp(15px,.55vw + 13px,17px);
  line-height:1.65;
  font-weight:380;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--oak); color:var(--paper-3); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:500; margin:0; letter-spacing:-.01em; line-height:1.04; }
em{ font-style:italic; }

/* ─── shared bits ─── */
.eyebrow{
  display:inline-block;
  font-size:.66rem; font-weight:600;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow--copper{ color:var(--oak-2); }
.eyebrow::before{
  content:""; display:inline-block;
  width:24px; height:1px; margin-right:.85em;
  vertical-align:middle; background:currentColor; opacity:.6;
}

.section-head{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,64px); margin-bottom:clamp(40px,6vw,72px); }
.section-head__title{ font-size:clamp(2.4rem,6.5vw,5rem); margin-top:.32em; }
.section-head__title em{ color:var(--oak-2); }
.section-head__lede{ margin-top:1.1em; max-width:46ch; color:var(--muted); font-size:1.02rem; }
.section-head--dark .section-head__title{ color:var(--paper); }
.section-head--dark .section-head__lede{ color:rgba(242,237,228,.62); }

/* ─── buttons ─── */
.btn{
  --bg:var(--ink); --fg:var(--paper-3);
  display:inline-flex; align-items:center; gap:.7em;
  padding:.95em 1.6em;
  background:var(--bg); color:var(--fg);
  border:1px solid var(--bg);
  font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  border-radius:0;
  transition:background .4s var(--ease), color .4s var(--ease),
             border-color .4s var(--ease), transform .4s var(--ease);
  position:relative;
}
.btn i{ font-style:normal; transition:transform .4s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover i{ transform:translateX(5px); }

.btn--copper{ --bg:var(--ink); --fg:var(--paper-3); }
.btn--copper:hover{ background:var(--oak); border-color:var(--oak); color:var(--ink); }

.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:var(--ink); color:var(--paper-3); border-color:var(--ink); }

.btn--dark{ --bg:transparent; --fg:var(--ink); border-color:var(--line-2); }
.btn--dark:hover{ background:var(--oak); border-color:var(--oak); color:var(--ink); }

.btn--small{ padding:.7em 1.15em; font-size:.62rem; }
.btn--block{ width:100%; justify-content:center; padding-block:1.05em; }

/* ════════════════════════ NAV ════════════════════════ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:1.1rem clamp(20px,5vw,64px);
  transition:background .45s var(--ease), padding .45s var(--ease),
             box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(242,237,228,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  padding-block:.75rem;
  border-bottom-color:var(--line);
  box-shadow:0 12px 40px -34px rgba(21,17,12,.6);
}
.nav__logo{ display:flex; align-items:center; gap:.7rem; }
.nav__logo-mark{
  width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--ink); position:relative;
  display:grid; place-items:center;
}
.nav__logo-mark::before{
  content:"✂"; font-size:.95rem; color:var(--paper-3);
  transform:rotate(-12deg);
}
.nav__logo-text{
  font-family:var(--serif); font-size:1.18rem; font-weight:500;
  letter-spacing:.01em; line-height:1;
}
.nav__logo-text em{ color:var(--oak-2); font-style:italic; }

.nav__links{ display:flex; gap:1.9rem; margin-left:auto; }
.nav__links a{
  font-size:.72rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2);
  position:relative; padding:.3em 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--oak); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.nav__cta{ flex:none; }
.nav__burger{ display:none; flex-direction:column; gap:5px; width:34px; height:34px;
  background:none; border:none; align-items:center; justify-content:center; }
.nav__burger span{ width:22px; height:1.5px; background:var(--ink); transition:.3s var(--ease); }
.nav.is-open .nav__burger span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

/* ════════════════════════ HERO ════════════════════════ */
.hero{
  position:relative;
  padding:clamp(120px,17vh,200px) clamp(20px,5vw,64px) clamp(60px,8vw,100px);
  background:var(--paper);
  overflow:hidden;
}
.hero::before{ /* slat wash on the right */
  content:""; position:absolute; inset:0 0 0 50%;
  background:var(--slat); opacity:.9; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);
          mask-image:linear-gradient(90deg,transparent,#000 40%);
}
.hero__grid{
  position:relative; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,80px);
  align-items:center;
}
.hero__text{ max-width:40ch; }
.hero__title{
  font-size:clamp(2.9rem,6.6vw,5.4rem);
  margin:.5em 0 .42em; line-height:1.0;
}
.hero__title span{ display:block; }
.hero__title span > *{ display:inline-block; padding-right:.06em; }
.hero__title em{ color:var(--oak-2); }
.hero__lede{ color:var(--muted); font-size:1.06rem; max-width:42ch; }
.hero__actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin:2.1rem 0 1.8rem; }
.hero__meta{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.hero__meta i{ width:5px; height:5px; border-radius:50%; background:var(--oak); }
.hero__meta span:first-child{ color:var(--oak-2); font-weight:600; }

/* page-load stagger */
.hero__text .eyebrow,
.hero__title span > *,
.hero__lede,.hero__actions,.hero__meta{
  opacity:0; transform:translateY(20px);
  animation:rise .9s var(--ease) forwards;
}
.hero__text .eyebrow{ animation-delay:.05s; }
.hero__title span:nth-child(1) > *{ animation-delay:.16s; }
.hero__title span:nth-child(2) > *{ animation-delay:.26s; }
.hero__title span:nth-child(3) > *{ animation-delay:.36s; }
.hero__lede{ animation-delay:.5s; }
.hero__actions{ animation-delay:.62s; }
.hero__meta{ animation-delay:.74s; }
.hero__visual{ opacity:0; animation:rise 1.1s var(--ease) .3s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* hero visual — real photo */
.hero__visual{ position:relative; }
.hero__photo{
  position:relative; margin:0;
  aspect-ratio:4/5; overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:var(--shadow);
}
.hero__photo::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  background:linear-gradient(180deg,transparent 55%,rgba(21,17,12,.42));
  pointer-events:none;
}
.hero__photo img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease); filter:saturate(1.02) contrast(1.02);
}
.hero__photo:hover img{ transform:scale(1.04); }
.hero__photo-cap{
  position:absolute; left:18px; bottom:16px; z-index:2;
  color:var(--paper-3); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; display:flex; align-items:center; gap:.7em;
}
.hero__photo-cap::before{ content:""; width:20px; height:1px; background:var(--oak); }
.hero__badge{
  position:absolute; top:-22px; right:-14px; z-index:3;
  width:96px; height:96px; border-radius:50%;
  background:var(--oak); color:var(--ink);
  display:grid; place-content:center; text-align:center;
  box-shadow:0 16px 36px -16px rgba(151,105,44,.7);
  transform:rotate(-8deg);
}
.hero__badge span{ font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; }
.hero__badge strong{ font-family:var(--serif); font-size:1.55rem; font-weight:500; line-height:1; }

.hero__scroll{
  position:absolute; left:clamp(20px,5vw,64px); bottom:30px; z-index:2;
  display:flex; align-items:center; gap:.7em;
  font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll i{ width:34px; height:1px; background:var(--line-2); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; width:12px; background:var(--oak);
  animation:scrollLine 2.2s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:translateX(-12px)} 60%,100%{transform:translateX(34px)} }

/* ════════════════════ MANIFESTO ════════════════════ */
.manifesto{
  position:relative; padding:clamp(80px,11vw,150px) clamp(20px,5vw,64px);
  border-top:1px solid var(--line);
}
.manifesto__inner{ max-width:980px; margin-inline:auto; text-align:center; }
.manifesto__title{ font-size:clamp(2.6rem,7vw,5.2rem); margin:.3em 0 .9em; }
.manifesto__title em{ color:var(--oak-2); }
.manifesto__cols{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px);
  text-align:left; max-width:820px; margin-inline:auto;
}
.manifesto__cols p{ margin:0; color:var(--ink-2); font-size:1.04rem; }
.manifesto__cols em{ color:var(--oak-2); font-family:var(--serif); }
.manifesto__credit{
  display:inline-block; margin-top:2.6em;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}

/* ════════════════════ SERVICES ════════════════════ */
.services{ padding:clamp(70px,9vw,120px) 0; background:var(--paper-3); border-block:1px solid var(--line); }
.services__grid{
  list-style:none; margin:0 auto; padding:0 clamp(20px,5vw,64px);
  max-width:var(--maxw);
  display:grid; grid-template-columns:repeat(2,1fr);
}
.svc{
  position:relative; padding:clamp(28px,3.2vw,46px) clamp(20px,2.4vw,40px);
  border-top:1px solid var(--line);
  cursor:pointer; outline:none;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.svc:nth-child(odd){ border-right:1px solid var(--line); }
.svc::before{
  content:""; position:absolute; left:0; top:-1px; height:2px; width:0;
  background:var(--oak); transition:width .45s var(--ease);
}
.svc:hover,.svc:focus-visible{ background:var(--paper-2); }
.svc:hover::before,.svc:focus-visible::before{ width:100%; }
.svc__num{
  font-family:var(--serif); font-size:.95rem; color:var(--oak-2);
  letter-spacing:.1em;
}
.svc__name{ font-size:clamp(1.6rem,2.6vw,2.3rem); margin:.5em 0 .45em; }
.svc__desc{ color:var(--muted); font-size:.96rem; max-width:42ch; margin:0 0 1.4em; }
.svc__foot{ display:flex; align-items:center; gap:.7em; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.svc__price{ font-weight:600; }
.svc__sep{ color:var(--line-2); }
.svc__arrow{ margin-left:auto; color:var(--oak-2); font-size:1.1rem;
  transform:translateX(-6px); opacity:0; transition:.4s var(--ease); }
.svc:hover .svc__arrow,.svc:focus-visible .svc__arrow{ transform:translateX(0); opacity:1; }

/* ════════════════════ PRICELIST ════════════════════ */
.pricelist{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px); }
.pricelist__head{ text-align:center; max-width:640px; margin:0 auto clamp(36px,5vw,56px); }
.pricelist__title{ font-size:clamp(2rem,5vw,3.4rem); margin:.35em 0 .5em; }
.pricelist__title em{ color:var(--oak-2); }
.pricelist__note{ color:var(--muted); font-size:.92rem; }
.pricelist__grid{
  display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:auto auto;
  gap:clamp(28px,4vw,64px) clamp(40px,6vw,90px);
}
.pricelist__grid .pcard:nth-child(1){ grid-column:1; grid-row:1 / 3; }
.pricelist__grid .pcard:nth-child(2){ grid-column:2; grid-row:1; }
.pricelist__grid .pcard:nth-child(3){ grid-column:2; grid-row:2; }
.pcard__title{
  font-size:1.36rem; padding-bottom:.7rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--line-2);
  display:flex; align-items:baseline; gap:.6em;
}
.pcard__title::before{
  content:""; width:18px; height:1px; background:var(--oak); flex:none; align-self:center;
}
.pcard__rows{ margin:0; }
.pcard__rows > div{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:.6em;
  padding:.7em 0; border-bottom:1px solid var(--line);
}
.pcard__rows > div:last-child{ border-bottom:none; }
.pcard__rows dt{ font-size:.96rem; color:var(--ink-2); display:flex; flex-direction:column; gap:.15em; }
.pcard__dur{ font-size:.72rem; letter-spacing:.04em; color:var(--muted); }
.pcard__rows dd{ margin:0; font-family:var(--serif); font-size:1.02rem; color:var(--ink);
  white-space:nowrap; letter-spacing:.01em; }
.pcard__note{ margin:.9rem 0 0; font-size:.78rem; font-style:italic; color:var(--muted); line-height:1.5; }
.pricelist__cta{ text-align:center; margin-top:clamp(40px,5vw,60px); }

/* ════════════════════ ATELIER / TEAM ════════════════════ */
.atelier{
  position:relative; padding:clamp(80px,11vw,150px) 0;
  background:var(--ink); color:var(--paper);
}
.atelier::before{ content:""; position:absolute; inset:0;
  background:var(--slat); opacity:.5; pointer-events:none;
  mix-blend-mode:overlay; }
.atelier .section-head{ position:relative; }
.atelier .eyebrow{ color:var(--oak-soft); }
.atelier__grid{
  position:relative; max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(20px,5vw,64px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,32px);
}
.member{
  border-top:1px solid rgba(242,237,228,.18);
  padding-top:1.6rem;
}
.member__num{ font-size:.68rem; letter-spacing:.3em; color:var(--oak-soft); text-transform:uppercase; }
.member__portrait{
  margin:1.3rem 0 1.2rem; aspect-ratio:1; width:100%;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--member-tone,#B5853F) 32%, transparent), transparent 60%),
    var(--ink-2);
  border:1px solid rgba(242,237,228,.14);
  position:relative; overflow:hidden;
}
.member__portrait::after{ content:""; position:absolute; inset:0;
  background:var(--slat); opacity:.4; mix-blend-mode:soft-light; }
.member__init{
  font-family:var(--serif); font-size:clamp(2.6rem,4vw,3.4rem);
  color:var(--paper); font-style:italic; position:relative;
}
.member__name{ font-size:1.42rem; }
.member__role{ color:rgba(242,237,228,.6); font-size:.8rem;
  letter-spacing:.06em; margin:.4em 0 1.3rem; min-height:2.4em; }
.atelier .btn--dark{ --fg:var(--paper); border-color:rgba(242,237,228,.3); }
.atelier .btn--dark:hover{ background:var(--oak); border-color:var(--oak); color:var(--ink); }

/* ════════════════════ GALLERY ════════════════════ */
.gallery{ padding:clamp(70px,9vw,120px) 0; }
.gallery__grid{
  max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,64px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,18px);
}
.gallery__loading{ grid-column:1/-1; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery__loading span{ aspect-ratio:3/4; background:var(--paper-2); animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.5} 50%{opacity:1} }

.gphoto{
  position:relative; aspect-ratio:3/4; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); background:var(--paper-2);
}
.gphoto img{ width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .6s var(--ease); filter:grayscale(.15); }
.gphoto:hover img{ transform:scale(1.06); filter:grayscale(0); }
.gphoto__num{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-3); mix-blend-mode:difference;
}
.gphoto__cap{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  font-size:.66rem; letter-spacing:.04em; color:var(--paper-3);
  opacity:0; transform:translateY(8px); transition:.45s var(--ease);
}
.gphoto:hover .gphoto__cap{ opacity:1; transform:none; }
.gphoto--placeholder::after{
  content:""; position:absolute; inset:0; background:var(--slat); opacity:.5;
}

.press{
  max-width:880px; margin:clamp(60px,8vw,100px) auto 0;
  padding:0 clamp(20px,5vw,64px); text-align:center; position:relative;
}
.press__mark{ font-family:var(--serif); font-size:5rem; color:var(--oak); line-height:.4; display:block; }
.press p{ font-family:var(--serif); font-size:clamp(1.5rem,3.2vw,2.3rem);
  font-style:italic; line-height:1.32; margin:.3em 0 1em; }
.press cite{ font-style:normal; font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); }
.press cite strong{ color:var(--oak-2); }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:90; display:none;
  background:rgba(15,12,8,.92); place-items:center; padding:5vw; }
.lightbox.is-open{ display:grid; }
.lightbox figure{ margin:0; max-width:min(900px,90vw); }
.lightbox img{ width:100%; max-height:80vh; object-fit:contain; }
.lightbox figcaption{ color:var(--paper); text-align:center; margin-top:1em;
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; }
.lightbox__close,.lightbox__nav{
  position:absolute; background:none; border:1px solid rgba(242,237,228,.3);
  color:var(--paper); width:48px; height:48px; font-size:1.5rem;
  display:grid; place-items:center; transition:.3s var(--ease); }
.lightbox__close:hover,.lightbox__nav:hover{ background:var(--oak); border-color:var(--oak); color:var(--ink); }
.lightbox__close{ top:4vw; right:4vw; }
.lightbox__nav--prev{ left:3vw; top:50%; transform:translateY(-50%); }
.lightbox__nav--next{ right:3vw; top:50%; transform:translateY(-50%); }

/* ════════════════════ VOICES ════════════════════ */
.voices{ padding:clamp(70px,9vw,120px) 0; background:var(--paper-3); border-block:1px solid var(--line); overflow:hidden; }
.voices__marquee{ position:relative; }
.voices__marquee::before,.voices__marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:12vw; z-index:2; pointer-events:none; }
.voices__marquee::before{ left:0; background:linear-gradient(90deg,var(--paper-3),transparent); }
.voices__marquee::after{ right:0; background:linear-gradient(270deg,var(--paper-3),transparent); }
.voices__track{ display:flex; gap:1.4rem; width:max-content; animation:marquee 52s linear infinite; }
.voices__marquee:hover .voices__track{ animation-play-state:paused; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.vcard{
  flex:none; width:min(380px,80vw); margin:0;
  background:var(--paper); border:1px solid var(--line);
  padding:2rem 1.9rem; display:flex; flex-direction:column; gap:1.1rem;
}
.vcard__num{ font-size:.64rem; letter-spacing:.24em; color:var(--oak-2); text-transform:uppercase; }
.vcard__text{ font-family:var(--serif); font-style:italic; font-size:1.14rem;
  line-height:1.45; margin:0; color:var(--ink); flex:1; }
.vcard__by{ display:flex; flex-direction:column; gap:.2em; }
.vcard__stars{ color:var(--oak); letter-spacing:.15em; font-size:.8rem; }
.vcard__by strong{ font-size:.92rem; }
.vcard__date{ font-size:.72rem; color:var(--muted); letter-spacing:.08em; }
.voices__google{
  display:flex; align-items:center; justify-content:center; gap:.9em;
  margin-top:clamp(40px,5vw,64px);
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.voices__google span:first-child{ color:var(--oak-2); font-weight:600; }

/* ════════════════════ CONTACT ════════════════════ */
.contact__split{ display:grid; grid-template-columns:1.05fr .95fr; min-height:80vh; }
.contact__dark{
  position:relative; background:var(--ink); color:var(--paper);
  padding:clamp(60px,8vw,110px) clamp(28px,5vw,80px);
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.contact__dark::before{ content:""; position:absolute; inset:0; background:var(--slat);
  opacity:.45; mix-blend-mode:overlay; }
.contact__dark > *{ position:relative; }
.contact__dark .eyebrow{ color:var(--oak-soft); }
.contact__title{ font-size:clamp(2.6rem,5vw,4.2rem); margin:.3em 0 1.1em; }
.contact__title em{ color:var(--oak-soft); }
.contact__rows{ margin:0 0 2.4rem; display:grid; gap:1.3rem; }
.contact__rows > div{ display:grid; gap:.25em; padding-bottom:1.3rem;
  border-bottom:1px solid rgba(242,237,228,.16); }
.contact__rows dt{ font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(242,237,228,.5); }
.contact__rows dd{ margin:0; font-size:1.08rem; }
.contact__rows a:hover{ color:var(--oak-soft); }
.contact__actions{ display:flex; gap:.9rem; flex-wrap:wrap; }
.contact__dark .btn--copper{ --bg:var(--oak); --fg:var(--ink); border-color:var(--oak); }
.contact__dark .btn--copper:hover{ background:var(--paper-3); border-color:var(--paper-3); }
.contact__dark .btn--ghost{ --fg:var(--paper); border-color:rgba(242,237,228,.3); }
.contact__dark .btn--ghost:hover{ background:var(--paper-3); color:var(--ink); }

.contact__light{
  background:var(--paper-2); padding:clamp(60px,8vw,110px) clamp(28px,5vw,80px);
  display:flex; flex-direction:column; justify-content:center;
}
.contact__hours-title{ font-size:clamp(2rem,3.4vw,2.8rem); margin:.4em 0 1.3em; }
.contact__hours-title em{ color:var(--oak-2); }
.contact__light table{ width:100%; border-collapse:collapse; }
.contact__light tr{ border-bottom:1px solid var(--line); }
.contact__light td{ padding:.85em 0; font-size:.95rem; }
.contact__light td:last-child{ text-align:right; color:var(--ink-2); letter-spacing:.04em; }
.contact__light tr.is-today{ color:var(--oak-2); font-weight:600; }
.contact__light tr.is-today td:last-child{ color:var(--oak-2); }
.contact__note{ margin-top:2rem; color:var(--muted); font-size:.9rem; max-width:38ch; }

/* ════════════════════ FOOTER ════════════════════ */
.footer{ background:#0E0B07; color:var(--paper); padding:clamp(60px,7vw,90px) clamp(20px,5vw,64px) 2rem; }
.footer__main{ max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1.4fr; gap:clamp(40px,6vw,90px); }
.footer__logo-img{ width:170px; height:auto; mix-blend-mode:lighten; margin-bottom:1.4rem; }
.footer__brand p{ color:rgba(242,237,228,.55); max-width:34ch; font-size:.92rem; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.footer__col-label{ font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--oak-soft); }
.footer__cols ul{ list-style:none; margin:1.1em 0 0; padding:0; display:grid; gap:.7em; }
.footer__cols a{ color:rgba(242,237,228,.7); font-size:.9rem; transition:color .3s var(--ease); }
.footer__cols a:hover{ color:var(--oak-soft); }
.footer__bottom{ max-width:var(--maxw); margin:clamp(40px,5vw,64px) auto 0;
  padding-top:1.6rem; border-top:1px solid rgba(242,237,228,.14);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(242,237,228,.5); }
.footer__bottom a{ color:var(--oak-soft); }

/* ════════════════════ FLOAT CTA ════════════════════ */
.float-cta{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px); z-index:55;
  display:inline-flex; align-items:center; gap:.6em;
  padding:1em 1.5em; background:var(--oak); color:var(--ink); border:none;
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  box-shadow:0 16px 40px -16px rgba(151,105,44,.8);
  transform:translateY(120px); transition:transform .5s var(--ease), background .3s var(--ease); }
.float-cta.is-visible{ transform:none; }
.float-cta:hover{ background:var(--ink); color:var(--paper-3); }
.float-cta i{ font-style:normal; }

/* ════════════════════ BOOKING DRAWER ════════════════════ */
.drawer{ position:fixed; inset:0; z-index:100; pointer-events:none; }
.drawer__backdrop{ position:absolute; inset:0; background:rgba(15,12,8,.55);
  opacity:0; transition:opacity .45s var(--ease); backdrop-filter:blur(3px); }
.drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(480px,100%);
  background:var(--paper); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .55s var(--ease);
  box-shadow:-30px 0 80px -40px rgba(21,17,12,.6); }
.drawer.is-open{ pointer-events:auto; }
.drawer.is-open .drawer__backdrop{ opacity:1; }
.drawer.is-open .drawer__panel{ transform:none; }

.drawer__head{ padding:1.8rem clamp(20px,5vw,34px) 1.2rem; border-bottom:1px solid var(--line); }
.drawer__head-row{ display:flex; align-items:flex-start; justify-content:space-between; }
.drawer__eyebrow{ font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; color:var(--oak-2); }
.drawer__title{ font-size:1.9rem; margin-top:.2em; }
.drawer__title em{ color:var(--oak-2); }
.drawer__close{ width:40px; height:40px; border:1px solid var(--line-2); background:none;
  position:relative; flex:none; transition:.3s var(--ease); }
.drawer__close span{ position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:var(--ink); }
.drawer__close span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.drawer__close span:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
.drawer__close:hover{ background:var(--ink); }
.drawer__close:hover span{ background:var(--paper-3); }

.drawer__steps{ display:flex; gap:.5rem; margin-top:1.5rem; }
.drawer__steps span{ flex:1; display:flex; flex-direction:column; gap:.3em;
  padding-top:.7em; border-top:2px solid var(--line); transition:.4s var(--ease); }
.drawer__steps i{ font-style:normal; font-size:.62rem; letter-spacing:.1em; color:var(--muted); }
.drawer__steps em{ font-style:normal; font-size:.7rem; letter-spacing:.06em; color:var(--ink-2); }
.drawer__steps .is-active{ border-top-color:var(--oak); }
.drawer__steps .is-active i,.drawer__steps .is-active em{ color:var(--oak-2); }
.drawer__steps .is-done{ border-top-color:var(--ink); }

.drawer__body{ flex:1; overflow-y:auto; padding:1.6rem clamp(20px,5vw,34px); }
.step{ display:none; animation:stepIn .5s var(--ease); }
.step.is-active{ display:block; }
@keyframes stepIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.step__sub{ color:var(--muted); font-size:.9rem; margin:0 0 1.3rem; }

.opt-list{ display:grid; gap:.6rem; }
.opt-group-wrap{ margin:1.4rem 0 0; }
.opt-group-wrap:first-child{ margin-top:0; }
.opt-group-wrap .opt-group__items{ display:grid; gap:.6rem; margin-top:.7rem; }
.opt-group{ font-size:.62rem; font-weight:600; letter-spacing:.26em;
  text-transform:uppercase; color:var(--oak-2); display:flex; align-items:center; gap:.7em;
  cursor:pointer; list-style:none; padding:.3rem 0; user-select:none; }
.opt-group::-webkit-details-marker{ display:none; }
.opt-group::after{ content:""; flex:1; height:1px; background:var(--line); order:1; }
.opt-group::before{ content:"+"; font-size:1rem; line-height:1; color:var(--oak); flex:none; order:2; }
.opt-group-wrap[open] > .opt-group::before{ content:"–"; }
.opt-group__count{ font-weight:400; letter-spacing:.05em; color:var(--muted); order:3; }
.opt{ display:flex; align-items:center; gap:1rem; text-align:left;
  padding:1rem 1.1rem; background:var(--paper-3); border:1px solid var(--line);
  transition:.3s var(--ease); }
.opt:hover{ border-color:var(--oak); transform:translateX(3px); }
.opt.is-picked{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.opt.is-picked .opt__meta{ color:rgba(242,237,228,.6); }
.opt.is-picked .opt__num{ background:var(--oak); color:var(--ink); border-color:var(--oak); }
.opt__num{ flex:none; width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line-2); font-family:var(--serif); font-size:.95rem; color:var(--oak-2); }
.opt__body{ display:flex; flex-direction:column; gap:.15em; flex:1; }
.opt__title{ font-size:.98rem; font-weight:500; }
.opt__meta{ font-size:.78rem; color:var(--muted); letter-spacing:.02em; }
.opt__arrow{ font-style:normal; color:var(--muted); transition:.3s var(--ease); }
.opt:hover .opt__arrow{ color:var(--oak-2); transform:translateX(4px); }

/* datebar */
.datebar{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.8rem; margin-bottom:1.4rem;
  scrollbar-width:thin; }
.datebar__d{ flex:none; width:62px; padding:.7rem 0; background:var(--paper-3);
  border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:.15em;
  transition:.3s var(--ease); }
.datebar__d:hover{ border-color:var(--oak); }
.datebar__d.is-picked{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.datebar__dow{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.datebar__d.is-picked .datebar__dow,.datebar__d.is-picked .datebar__mon{ color:rgba(242,237,228,.65); }
.datebar__day{ font-family:var(--serif); font-size:1.35rem; }
.datebar__mon{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }

.slots__hint,.slots__empty{ color:var(--muted); font-size:.9rem; text-align:center; padding:1.5rem 0; }
.slots__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.slot{ padding:.75em 0; background:var(--paper-3); border:1px solid var(--line);
  font-size:.86rem; letter-spacing:.04em; transition:.25s var(--ease); }
.slot:hover{ border-color:var(--oak); }
.slot.is-picked{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.slot.is-taken{ opacity:.3; text-decoration:line-through; cursor:not-allowed; }

/* form */
.form{ display:grid; gap:1.1rem; }
.form label{ display:grid; gap:.4em; }
.form label span{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.form input{ padding:.85em 1em; background:var(--paper-3); border:1px solid var(--line-2);
  font-family:inherit; font-size:.95rem; color:var(--ink); transition:.3s var(--ease); }
.form input:focus{ outline:none; border-color:var(--oak); background:var(--paper); }
.form__summary{ background:var(--paper-2); border-left:2px solid var(--oak); padding:1rem 1.2rem;
  display:grid; gap:.4em; font-size:.86rem; }
.form__summary strong{ color:var(--ink); }
.form__error{ color:#9a2b1f; font-size:.84rem; margin:0; }
.form__legal{ font-size:.72rem; color:var(--muted); margin:.3em 0 0; }
.form__legal a{ color:var(--oak-2); text-decoration:underline; }

.verify{ text-align:center; }
.verify__title{ font-family:var(--serif); font-size:1.6rem; margin:0 0 .4em; }
.verify__intro{ color:var(--muted); font-size:.9rem; margin:0 0 1.6rem; }
.verify__inputs{ display:flex; gap:.7rem; justify-content:center; margin-bottom:1.4rem; }
.verify__inputs input{ width:56px; height:64px; text-align:center; font-family:var(--serif);
  font-size:1.8rem; background:var(--paper-3); border:1px solid var(--line-2); color:var(--ink); }
.verify__inputs input:focus{ outline:none; border-color:var(--oak); }

.success{ text-align:center; padding:1.5rem 0; }
.success__mark{ width:64px; height:64px; border-radius:50%; background:var(--oak); color:var(--ink);
  display:grid; place-items:center; font-size:1.8rem; margin:0 auto 1.4rem; }
.success h3{ font-size:1.9rem; margin:0 0 .5em; }
.success h3 em{ color:var(--oak-2); }
.success p{ color:var(--muted); margin:0 0 1.8rem; }

.drawer__foot{ display:flex; gap:1rem; padding:1.2rem clamp(20px,5vw,34px);
  border-top:1px solid var(--line); }
.drawer__back{ display:inline-flex; align-items:center; gap:.5em; background:none; border:none;
  color:var(--muted); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.drawer__back:hover{ color:var(--ink); }
.drawer__next{ margin-left:auto; }
.drawer__next:disabled{ opacity:.35; cursor:not-allowed; }
.drawer__next:disabled:hover{ transform:none; background:var(--ink); }

/* ════════════════════ REVEAL ════════════════════ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal],.hero__text .eyebrow,.hero__title span > *,.hero__lede,
  .hero__actions,.hero__meta,.hero__visual{ opacity:1; transform:none; }
}

/* ════════════════════ RESPONSIVE ════════════════════ */
@media (max-width:1024px){
  .hero__grid{ grid-template-columns:1fr; gap:48px; }
  .hero__text{ max-width:none; }
  .hero__visual{ max-width:440px; }
  .atelier__grid{ grid-template-columns:repeat(2,1fr); gap:32px 24px; }
  .gallery__grid,.gallery__loading{ grid-template-columns:repeat(3,1fr); }
  .footer__main{ grid-template-columns:1fr; gap:48px; }
}
@media (max-width:760px){
  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(300px,82vw);
    flex-direction:column; justify-content:center; gap:1.6rem; padding:2rem;
    background:var(--paper); transform:translateX(100%); transition:transform .5s var(--ease);
    box-shadow:-20px 0 60px -30px rgba(21,17,12,.5); }
  .nav.is-open .nav__links{ transform:none; }
  .nav__links a{ font-size:1rem; }
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .services__grid{ grid-template-columns:1fr; }
  .svc:nth-child(odd){ border-right:none; }
  .pricelist__grid{ grid-template-columns:1fr; }
  .pricelist__grid .pcard:nth-child(1),
  .pricelist__grid .pcard:nth-child(2),
  .pricelist__grid .pcard:nth-child(3){ grid-column:1; grid-row:auto; }
  .manifesto__cols{ grid-template-columns:1fr; gap:1.4rem; }
  .contact__split{ grid-template-columns:1fr; }
  .gallery__grid,.gallery__loading{ grid-template-columns:repeat(2,1fr); }
  .hero__badge{ width:78px; height:78px; top:-16px; right:8px; }
  .footer__bottom{ flex-direction:column; }
}
@media (max-width:440px){
  .atelier__grid{ grid-template-columns:1fr; }
  .slots__grid{ grid-template-columns:repeat(3,1fr); }
  .verify__inputs input{ width:48px; height:56px; font-size:1.5rem; }
}