/* ==========================================================================
   Kozmetika KK — styles.css
   Static site. No framework, no preprocessor, no build step.
   Organised as: tokens → reset → primitives → components → sections → footer.
   Every breakpoint is min-width except the one noted at .bar (max-width:639px).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* surfaces — light to dark */
  --cream:#fdf3ec;        /* page background */
  --shell:#f7e5d9;        /* alternating section background */
  --sand:#f0d7c5;         /* image placeholder, hover fill, dark-section text */
  --surface:#fffcfa;      /* cards, panels, elevated surfaces */
  --espresso:#28150f;     /* dark sections + footer */

  /* text */
  --ink:#34201b;          /* headings, primary body */
  --ink-soft:#6e5048;     /* secondary body */
  --ink-faint:#a08a82;    /* labels, meta, captions */

  /* gold accents */
  --gold:#ac7d2c;         /* accent text, prices, eyebrows */
  --gold-soft:#d9b781;    /* accent on dark, decorative dots */
  --gold-line:#e7d0b4;    /* every hairline border and rule */

  /* type families */
  --display:"Cormorant Garamond",Georgia,serif;   /* 300–600, incl. italic */
  --body:"Jost","Helvetica Neue",Arial,sans-serif; /* 300, 400, 500 */
  --script:"Ballet","Pinyon Script",cursive;       /* 400 only — logo + signature */

  /* layout */
  --wrap:1240px;          /* content max-width */
  --pad:24px;             /* gutter, mobile/tablet */
  --pad-lg:40px;          /* gutter, ≥1024px */
  --radius-card:18px;     /* cards, panels, gallery tiles */
  --radius-pill:999px;    /* buttons, chips, dots, counters */
  --radius-arch:170px;    /* arched image top corners */

  /* elevation — warm, low-opacity, never neutral grey */
  --shadow-soft:0 24px 60px -38px rgba(52,32,27,.5);
  --shadow-lift:0 10px 30px -22px rgba(52,32,27,.45);

  /* header height — also the scroll-margin offset for anchors */
  --header-h:104px;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{display:block;max-width:100%}
a{color:inherit}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.02em;
  line-height:1.05;
  margin:0;
}

/* Visible keyboard focus. Mouse users never see it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

/* Anchor targets clear the sticky header. */
section{scroll-margin-top:calc(var(--header-h) + 8px)}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
@media(min-width:1024px){.wrap{padding:0 var(--pad-lg)}}

/* Vertical rhythm for a full-width section. */
.sec{padding:96px 0}
@media(min-width:1024px){.sec{padding:128px 0}}

.bg-cream{background:var(--cream)}
.bg-shell{
  background:var(--shell);
  border-top:1px solid var(--gold-line);
  border-bottom:1px solid var(--gold-line);
}
/* Rules on a cream section (used by the price list). */
.bordered{border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}

/* Intro block above a section grid. */
.sec-head{max-width:42rem}
.sec-head .lead{margin-top:24px}

/* --------------------------------------------------------------------------
   4. TYPE PRIMITIVES
   -------------------------------------------------------------------------- */

/* Small caps-ish label with a leading gold rule.
   Deliberately keeps the default <p> margins — the vertical rhythm of every
   section head depends on them collapsing against the following heading. */
.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.32em;
  color:var(--gold);
}
.eyebrow::before{content:"";display:block;width:40px;height:1px;background:var(--gold-soft)}

/* Section heading. Fluid between mobile and desktop — no per-breakpoint sizes. */
.h2{font-size:clamp(2rem,4.4vw,3rem);margin-top:28px}
.h2-sm{font-size:clamp(1.75rem,3.6vw,2.25rem);margin-top:28px}

.lead{font-size:17px;color:var(--ink-soft);line-height:1.75}
.italic-gold{font-style:italic;color:var(--gold)}

/* --------------------------------------------------------------------------
   5. BUTTONS
   Four variants. Hover changes background only — no transform, no shadow shift.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 34px;
  border:1px solid transparent;border-radius:var(--radius-pill);
  font-family:inherit;font-size:12px;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn-icon{
  flex:none;width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
}
.btn-dark{background:var(--espresso);color:var(--cream)}
.btn-dark:hover{background:var(--ink)}
.btn-dark:active{background:var(--espresso)}

.btn-ghost{border-color:var(--gold);color:var(--ink)}
.btn-ghost:hover{background:var(--sand)}

.btn-light{background:var(--cream);color:var(--espresso)}
.btn-light:hover{background:var(--surface)}

.btn-line{border-color:var(--gold-line);background:var(--surface);color:var(--ink);padding:16px 26px}
.btn-line:hover{background:var(--sand)}

/* Decorative gold bullet. Reused in notes, contact rows, how-to. */
.dot{flex:none;width:6px;height:6px;border-radius:var(--radius-pill);background:var(--gold)}

/* --------------------------------------------------------------------------
   6. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--gold-line);
}
.bar{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.bar-actions{display:flex;align-items:center;gap:12px}

/* Two-line script lockup: "Kozmetika" over an indented "KK".
   line-height 1.3 is required — Ballet has tall ascenders that clip at 1. */
.logo{display:flex;flex-direction:column;line-height:1.3;text-decoration:none}
.logo b{font-family:var(--script);font-weight:400;font-size:32px;color:var(--gold)}
.logo i{
  font-family:var(--script);font-style:normal;font-size:26px;color:var(--ink);
  padding-left:54px;margin-top:-12px;
}

/* Desktop nav appears at 900px, where the five links stop crowding the logo. */
.nav-desk{display:none;gap:36px}
.nav-desk a{
  font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-soft);text-decoration:none;
  transition:color .15s ease;
}
.nav-desk a:hover{color:var(--gold)}
@media(min-width:900px){.nav-desk{display:flex;align-items:center}}

.hdr-cta{display:none}
@media(min-width:640px){.hdr-cta{display:inline-flex;padding:13px 26px}}

.burger{
  width:44px;height:44px;
  border:1px solid var(--gold-line);border-radius:var(--radius-pill);
  background:transparent;
  display:grid;place-items:center;
  cursor:pointer;
  transition:background-color .15s ease;
}
.burger:hover{background:var(--sand)}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);margin:3px 0}
@media(min-width:900px){.burger{display:none}}

/* Mobile drawer. Toggled by adding .is-open in js/main.js. */
.nav-mobile{
  display:none;
  border-top:1px solid var(--gold-line);
  background:var(--surface);
  padding:8px var(--pad) 20px;
}
.nav-mobile.is-open{display:block}
.nav-mobile a{
  display:block;padding:14px 0;
  border-bottom:1px solid rgba(231,208,180,.6);
  font-family:var(--display);font-size:24px;
  text-decoration:none;
}
.nav-mobile .btn{display:flex;width:100%;margin-top:16px}

/* Shorter bar and smaller lockup below 640px. */
@media(max-width:639px){
  :root{--header-h:88px}
  .logo b{font-size:27px}
  .logo i{font-size:22px;padding-left:45px;margin-top:-10px}
}

/* --------------------------------------------------------------------------
   7. HERO
   Two columns from 1024px. The media column stacks three layers in ONE grid
   cell — halo behind, cut-out portrait in front, price badge over the corner.
   Grid stacking, not absolute positioning, so the column keeps its own height.
   -------------------------------------------------------------------------- */
.hero{padding:64px var(--pad) 96px}
@media(min-width:1024px){
  .hero{
    padding:96px var(--pad-lg) 128px;
    display:grid;grid-template-columns:1fr 1fr;gap:56px;
    align-items:start;
  }
}
.hero h1{font-size:clamp(2.75rem,7vw,4.6rem);margin-top:28px}
.hero .lead{margin-top:28px;max-width:28rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:40px}

.facts{
  list-style:none;
  margin:48px 0 0;padding:32px 0 0;
  border-top:1px solid var(--gold-line);
  display:grid;gap:12px;
}
.facts li{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--ink-soft)}
.facts li::before{
  content:"";flex:none;
  width:6px;height:6px;border-radius:var(--radius-pill);background:var(--gold-soft);
}

.hero-media{display:grid;margin-top:64px}
@media(min-width:1024px){.hero-media{margin-top:0}}
/* all three children share cell 1/1 */
.hero-media>*{grid-area:1/1}

.halo{
  justify-self:center;align-self:start;
  z-index:0;
  width:min(460px,86%);aspect-ratio:1;
  border:1px solid var(--gold-line);border-radius:var(--radius-pill);
  background:radial-gradient(circle at 50% 35%,var(--shell),var(--sand));
}
/* The PNG cut-out is cropped flat across the hair, so the top edge is faded
   into the background instead of ending on a hard line. */
.portrait{
  justify-self:center;align-self:start;
  z-index:1;
  width:min(520px,94%);margin-top:20px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14%);
}
.badge{
  justify-self:start;align-self:end;
  z-index:2;
  width:256px;margin:0 0 32px -8px;
  background:var(--surface);
  border:1px solid var(--gold-line);
  padding:20px;
  box-shadow:var(--shadow-lift);
}
@media(min-width:1024px){.badge{margin-left:-40px}}
.badge small{
  font-size:10px;font-weight:500;
  text-transform:uppercase;letter-spacing:.28em;color:var(--gold);
}
.badge p{font-family:var(--display);font-size:24px;margin:8px 0 0}
.badge span{font-size:14px;color:var(--ink-soft)}

.location-pill{
  display:none;justify-self:end;align-self:start;z-index:3;
  align-items:center;gap:8px;
  margin:-16px 16px 0 0;padding:10px 20px;
  border:1px solid var(--gold-line);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--ink-soft);
  font-size:11px;text-transform:uppercase;letter-spacing:.2em;
}
.location-pill svg{
  flex:none;width:14px;height:14px;
  fill:none;stroke:var(--gold);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
@media(min-width:1024px){.location-pill{display:flex}}

/* --------------------------------------------------------------------------
   8. ARCHED IMAGE FRAME (about section)
   -------------------------------------------------------------------------- */
.arch{
  align-self:start;
  overflow:hidden;
  border:1px solid var(--gold-line);
  border-radius:var(--radius-arch) var(--radius-arch) 18px 18px;
  background:var(--sand);
  box-shadow:var(--shadow-soft);
}
.arch img{width:100%;height:440px;object-fit:cover;object-position:center 30%}

/* --------------------------------------------------------------------------
   9. ABOUT
   -------------------------------------------------------------------------- */
.about{display:grid;gap:56px}
@media(min-width:1024px){.about{grid-template-columns:5fr 7fr;gap:64px}}
@media(min-width:1024px){.about .arch img{height:520px}}

.about-body{margin-top:32px;max-width:36rem}
.about-body p{margin:0 0 20px}
.about-body p:last-child{margin-bottom:0}

.sign{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--gold-line)}
.sign b{display:block;font-family:var(--script);font-weight:400;font-size:46px;color:var(--gold)}
.sign small{
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.24em;color:var(--ink-faint);
}

/* --------------------------------------------------------------------------
   10. SERVICES
   6-column grid. 2 cards per row at 768px, then 2+3 at 1100px.
   -------------------------------------------------------------------------- */
.svc-grid{display:grid;gap:24px;margin-top:56px}
@media(min-width:768px){.svc-grid{grid-template-columns:repeat(6,1fr)}}

.card{
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--gold-line);
  border-radius:var(--radius-card);
  overflow:hidden;
}
.span3,.span2{grid-column:span 6}
@media(min-width:768px){.span3{grid-column:span 3}.span2{grid-column:span 3}}
@media(min-width:1100px){.span2{grid-column:span 2}}

.card>img{width:100%;height:224px;object-fit:cover;background:var(--sand)}
.card-body{padding:28px;display:flex;flex-direction:column;flex:1}
.card-body h3{font-size:28px}
.card-body>p{font-size:15px;color:var(--ink-soft);margin:12px 0 0}

.card ul{
  list-style:none;
  margin:24px 0 0;padding:24px 0 0;
  border-top:1px solid var(--gold-line);
  display:grid;gap:14px;flex:1;
}
.card ul li{display:flex;gap:12px}
.card ul li::before{
  content:"";flex:none;
  width:6px;height:6px;border-radius:var(--radius-pill);background:var(--gold-soft);
  margin-top:9px;
}
.card ul strong{display:block;font-weight:400;font-size:15px;color:var(--ink)}
.card ul span span{display:block;font-size:13px;color:var(--ink-faint)}

/* Pushed to the bottom of the card by flex:1 on the list above. */
.card-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin:28px 0 0;padding-top:20px;
  border-top:1px solid var(--gold-line);
}
.card-foot small{
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.24em;color:var(--ink-faint);
}
.card-foot b{font-family:var(--display);font-weight:400;font-size:24px;color:var(--gold)}

/* --------------------------------------------------------------------------
   11. SIGNATURE / GOLD SECTION (dark)
   Borders here are gold at low alpha, not --gold-line, which disappears on dark.
   -------------------------------------------------------------------------- */
.gold{background:var(--espresso);color:var(--sand)}
.gold .eyebrow{color:var(--gold-soft)}
.gold .eyebrow::before{background:var(--gold)}

.gold-grid{display:grid;gap:56px}
@media(min-width:1024px){.gold-grid{grid-template-columns:5fr 7fr;gap:64px}}

.gold-img{align-self:start;border:1px solid rgba(172,125,44,.4);border-radius:var(--radius-card);overflow:hidden}
.gold-img img{width:100%;height:420px;object-fit:cover}
@media(min-width:1024px){.gold-img img{height:560px}}

.gold h2{color:var(--cream);font-size:clamp(2rem,4.4vw,3.25rem);margin-top:28px}
.gold h2 em{font-style:italic;color:var(--gold-soft)}
.gold-lead{font-size:17px;margin:24px 0 0;max-width:36rem;color:var(--sand)}

.benefits{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:14px}
@media(min-width:640px){.benefits{grid-template-columns:1fr 1fr}}
.benefits li{display:flex;gap:12px;font-size:15px}
.benefits li::before{
  content:"";flex:none;
  width:6px;height:6px;border-radius:var(--radius-pill);background:var(--gold-soft);
  margin-top:9px;
}

.steps{margin-top:40px;padding-top:28px;border-top:1px solid rgba(172,125,44,.3)}
.steps small{
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.24em;color:var(--gold-soft);
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{
  border:1px solid rgba(172,125,44,.35);border-radius:var(--radius-pill);
  padding:6px 16px;font-size:13px;
}

.gold-price{
  display:flex;flex-wrap:wrap;align-items:center;gap:32px;
  margin-top:40px;padding-top:32px;
  border-top:1px solid rgba(172,125,44,.3);
}
.gold-price>p{margin:0}
.gold-price b{display:block;font-family:var(--display);font-weight:400;font-size:40px;color:var(--gold-soft)}
.gold-price small{
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.24em;color:rgba(240,215,197,.7);
}

/* --------------------------------------------------------------------------
   12. PRICE LIST
   Poster-like composition inspired by the salon's printed price list.
   Alternating text and arched photos become a single column on small screens.
   -------------------------------------------------------------------------- */
#cennik{
  position:relative;overflow:hidden;background:var(--shell);
}
.price-sheet{
  position:relative;
}
.price-head{display:flex;flex-direction:column;gap:24px}
.price-head .lead{max-width:28rem;margin:0;font-size:15px;color:var(--ink-soft)}
@media(min-width:900px){
  .price-head{flex-direction:row;align-items:flex-end;justify-content:space-between}
}

.price-feature{display:grid;gap:48px;margin-top:64px;align-items:start}
@media(min-width:800px){
  .price-feature{grid-template-columns:minmax(0,7fr) minmax(240px,4fr);gap:64px}
}

.price-layout{
  display:grid;
  grid-template-areas:
    "lashes-text"
    "lashes-photo"
    "pmu-text"
    "pmu-photo"
    "dep-text"
    "dep-photo";
  gap:48px;margin-top:76px;align-items:start;
}
.price-lashes{grid-area:lashes-text}
.price-photo-lashes{grid-area:lashes-photo}
.price-pmu{grid-area:pmu-text}
.price-photo-pmu{grid-area:pmu-photo}
.price-depilation{grid-area:dep-text}
.price-photo-depilation{grid-area:dep-photo}
@media(min-width:700px){
  .price-layout{
    grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr);
    grid-template-areas:
      "lashes-photo lashes-text"
      "pmu-text pmu-photo"
      "dep-photo dep-text";
    gap:72px 48px;
  }
}
@media(min-width:1100px){
  .price-layout{
    grid-template-columns:minmax(250px,.95fr) minmax(360px,1.15fr) minmax(250px,.95fr);
    grid-template-areas:
      "lashes-photo lashes-text ."
      ". pmu-text pmu-photo"
      "dep-photo dep-text .";
    gap:84px 48px;
  }
}

.price-grp{min-width:0}
.price-grp h3{font-size:clamp(1.65rem,3vw,2.25rem);font-weight:600}
.rule{display:flex;align-items:center;gap:14px}
.rule h3{display:flex;align-items:center;gap:12px}
.rule h3::after{
  content:"›››››";font-family:var(--body);font-size:18px;font-weight:500;
  letter-spacing:-.14em;color:var(--gold);
}
.arrow-left h3::before{
  content:"‹‹‹‹‹";font-family:var(--body);font-size:18px;font-weight:500;
  letter-spacing:-.14em;color:var(--gold);
}
.arrow-left h3::after{content:none}
.rule::after{content:"";height:1px;flex:1;background:rgba(172,125,44,.35)}

.price-grp ul{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:13px}
.price-grp li{display:flex;align-items:baseline;gap:10px}
.price-grp .nm{flex:0 1 auto;min-width:0}
.price-grp .nm b{font-family:var(--display);font-style:italic;font-weight:500;font-size:18px;color:var(--ink)}
.price-grp .nm i{font-style:italic;font-size:12px;color:var(--ink-soft);margin-left:8px}
.price-grp .dots{flex:1;height:0;border-bottom:2px dotted rgba(110,80,72,.4);margin-bottom:5px}
.price-grp .pr{flex:none;font-family:var(--display);font-size:21px;font-weight:500;color:var(--ink)}

.price-photo{
  position:relative;margin:0 auto;padding:9px;width:100%;max-width:340px;
  border:1px solid var(--gold);border-radius:999px;
  background:rgba(255,255,255,.34);
}
.price-photo::before{
  content:"";position:absolute;inset:-9px;
  border:1px solid rgba(172,125,44,.42);border-radius:inherit;pointer-events:none;
}
.price-photo::after{
  content:"✦";position:absolute;right:-22px;top:50%;transform:translateY(-50%);
  width:42px;height:42px;display:grid;place-items:center;
  background:var(--shell);color:var(--gold);font-size:19px;
}
.price-photo img{width:100%;height:100%;object-fit:cover;border-radius:999px;background:#fbf2ec}
.price-photo-gold{aspect-ratio:1055/1491;max-width:360px}
.price-photo-lashes{aspect-ratio:1055/1491;max-width:340px}
.price-photo-pmu{aspect-ratio:2/3;max-width:340px}
.price-photo-depilation{aspect-ratio:1055/1491;max-width:330px}
@media(max-width:639px){
  .price-feature{margin-top:48px}
  .price-layout{margin-top:60px}
  .rule{display:block}
  .rule::after{display:none}
  .rule h3{white-space:normal}
  .price-grp .nm{flex:0 1 auto;min-width:0}
  .price-grp .dots{min-width:12px}
  .price-grp .nm b{font-size:16px}
  .price-grp .nm i{display:block;margin:1px 0 0}
  .price-grp .pr{font-size:19px}
}

.notes{display:grid;gap:20px;margin-top:72px;padding-top:36px;border-top:1px solid rgba(172,125,44,.34)}
@media(min-width:768px){.notes{grid-template-columns:1fr 1fr}}
.note{
  display:flex;gap:16px;
  border:1px solid rgba(172,125,44,.3);border-radius:var(--radius-card);
  padding:28px;background:rgba(255,252,250,.42);
}
.note.alt{background:rgba(247,229,217,.52)}
.note .dot{margin-top:9px}
.note p:first-of-type{font-family:var(--display);font-size:20px;margin:0}
.note p+p{font-size:15px;color:var(--ink-soft);margin:8px 0 0}
.note a{color:var(--gold)}

/* --------------------------------------------------------------------------
   13. GALLERY
   6 columns, fixed 190px rows. Two feature tiles span 2 rows.
   -------------------------------------------------------------------------- */
.gal-head{display:flex;flex-direction:column;gap:24px}
@media(min-width:640px){.gal-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.gal-head .lead{max-width:19rem;font-size:15px}

.gal{display:grid;gap:16px;margin-top:56px;grid-auto-rows:190px}
@media(min-width:768px){.gal{grid-template-columns:repeat(6,1fr)}}
.gal figure{
  margin:0;overflow:hidden;
  border:1px solid var(--gold-line);border-radius:var(--radius-card);
  background:var(--sand);
  grid-column:span 6;
}
.gal figure img{width:100%;height:100%;object-fit:cover}
.gal-open{
  width:100%;height:100%;padding:0;border:0;
  display:block;background:transparent;cursor:zoom-in;
}
.gal-open img{transition:opacity .15s ease}
.gal-open:hover img{opacity:.88}
@media(min-width:768px){
  .gal figure{grid-column:span 2}
  .gal .big{grid-column:span 2;grid-row:span 2}
}

/* Native dialog lightbox. Grid keeps navigation outside the image without
   absolute positioning and the browser handles focus trapping + Escape. */
.lightbox{
  width:min(1100px,calc(100% - 32px));max-height:calc(100dvh - 32px);
  margin:auto;padding:0;border:1px solid rgba(217,183,129,.45);
  border-radius:var(--radius-card);background:var(--espresso);color:var(--cream);
  box-shadow:0 28px 80px rgba(40,21,15,.45);
}
.lightbox::backdrop{background:rgba(40,21,15,.82)}
.lightbox[open]{display:grid}
.lightbox-panel{min-width:0;padding:16px}
.lightbox-close,.lightbox-nav{
  border:1px solid rgba(217,183,129,.45);border-radius:var(--radius-pill);
  background:rgba(255,252,250,.08);color:var(--cream);cursor:pointer;
  transition:background-color .15s ease;
}
.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,252,250,.18)}
.lightbox-close{
  display:grid;place-items:center;width:42px;height:42px;margin:0 0 12px auto;
  font-family:var(--body);font-size:28px;font-weight:300;line-height:1;
}
.lightbox-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px}
.lightbox-stage figure{min-width:0;margin:0;text-align:center}
.lightbox-stage img{
  display:block;width:auto;max-width:100%;height:auto;max-height:calc(100dvh - 125px);
  margin:auto;border-radius:12px;object-fit:contain;
}
.lightbox-nav{width:46px;height:46px;font-family:var(--display);font-size:34px;line-height:1}
@media(max-width:639px){
  .lightbox{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
  .lightbox-panel{padding:10px}
  .lightbox-stage{grid-template-columns:40px minmax(0,1fr) 40px;gap:6px}
  .lightbox-nav{width:40px;height:40px}
  .lightbox-stage img{max-height:calc(100dvh - 115px)}
}

/* --------------------------------------------------------------------------
   14. CONTACT
   -------------------------------------------------------------------------- */
.ct{display:grid;gap:64px}
.ct>*{min-width:0}
@media(min-width:1024px){.ct{grid-template-columns:1fr 1fr}}

.details{margin:48px 0 0;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.details .row{
  display:flex;align-items:center;gap:20px;
  padding:20px 0;border-bottom:1px solid var(--gold-line);
}
.details .row:last-child{border-bottom:0}
.details dt{
  width:96px;flex:none;
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.2em;color:var(--ink-faint);
}
.details dd{min-width:0;margin:0;font-size:17px;overflow-wrap:anywhere}
.details dd a{text-decoration:none;transition:color .15s ease}
.details dd a:hover{color:var(--gold)}

.appointment-only{
  display:inline-flex;align-items:center;gap:12px;
  margin:28px 0 0;padding:10px 16px;
  border:1px solid var(--gold-line);border-radius:var(--radius-pill);
  background:var(--surface);
  font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);
}

.socials{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

.howto{
  border:1px solid var(--gold-line);border-radius:var(--radius-card);
  background:var(--surface);padding:36px;
}
@media(min-width:1024px){.howto{padding:44px}}
.howto h3{font-size:30px;margin-top:24px}
/* Numbered steps use a CSS counter — the numbers are not in the markup. */
.howto ol{list-style:none;counter-reset:step;margin:32px 0 0;padding:0;display:grid;gap:28px}
.howto li{counter-increment:step;display:flex;gap:20px}
.howto li::before{
  content:counter(step);flex:none;
  width:36px;height:36px;
  border:1px solid var(--gold-line);border-radius:var(--radius-pill);
  display:grid;place-items:center;
  font-family:var(--display);font-size:18px;color:var(--gold);
}
.howto li p{margin:6px 0 0;font-size:16px;color:var(--ink-soft)}
.howto .tip{margin-top:36px;padding-top:28px;border-top:1px solid var(--gold-line)}
.howto .tip small{
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.24em;color:var(--ink-faint);
}
.howto .tip p{font-size:15px;color:var(--ink-soft);margin:12px 0 0}

.location-map{
  grid-column:1/-1;
  overflow:hidden;border:1px solid var(--gold-line);border-radius:var(--radius-card);
  background:var(--surface);
}
.location-map iframe{display:block;width:100%;height:420px;border:0}
.location-map-caption{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 28px;border-top:1px solid var(--gold-line);
}
.location-map-caption small{
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);
}
.location-map-caption p{margin:5px 0 0;font-family:var(--display);font-size:22px}
@media(max-width:639px){
  .location-map iframe{height:340px}
  .location-map-caption{align-items:flex-start;flex-direction:column;padding:22px}
}

/* --------------------------------------------------------------------------
   15. LEGAL ACCORDION
   Native <details>/<summary>. No JS. The +/− is a ::after pseudo-element
   swapped by the [open] attribute the browser manages itself.
   -------------------------------------------------------------------------- */
.legal{max-width:900px;margin:0 auto;padding:80px var(--pad)}
@media(min-width:1024px){.legal{padding:96px var(--pad-lg)}}

.acc{margin-top:40px;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.acc details{border-bottom:1px solid var(--gold-line)}
.acc details:last-child{border-bottom:0}
.acc summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;
  font-family:var(--display);font-size:24px;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"+";flex:none;
  width:36px;height:36px;
  border:1px solid var(--gold-line);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--gold);
  display:grid;place-items:center;
  font-family:var(--body);font-size:18px;
}
.acc details[open] summary::after{content:"\2013"}
.acc summary:hover::after{background:var(--sand)}
.acc .body{padding:0 56px 32px 0;display:grid;gap:16px}
.acc .body p{margin:0;font-size:15px;color:var(--ink-soft)}
.acc .body section{display:grid;gap:10px;scroll-margin-top:0}
.acc .body h3{font-family:var(--body);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:0}
.acc .body ul{margin:0;padding-left:20px;color:var(--ink-soft);font-size:15px}
.acc .body li+li{margin-top:6px}
@media(max-width:639px){.acc .body{padding-right:0}}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{background:var(--espresso);color:var(--sand)}
.foot{display:flex;flex-direction:column;gap:48px;padding:64px 0 0}
@media(min-width:1024px){.foot{flex-direction:row;justify-content:space-between}}

.site-footer .logo{margin:0}
.site-footer .logo b{color:var(--gold-soft);font-size:42px}
.site-footer .logo i{color:var(--cream);font-size:33px;padding-left:70px;margin-top:-14px}

.foot-about{max-width:20rem;font-size:15px;color:rgba(240,215,197,.8);margin:24px 0 0}

.foot-cols{display:grid;gap:40px}
@media(min-width:640px){.foot-cols{grid-template-columns:1fr 1fr;gap:64px}}
.foot-cols p{
  margin:0;
  font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.24em;color:var(--gold-soft);
}
.foot-cols ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;font-size:15px}
.foot-cols a{text-decoration:none;transition:color .15s ease}
.foot-cols a:hover{color:var(--cream)}

.foot-bottom{
  display:flex;flex-direction:column;gap:12px;
  margin-top:56px;padding:28px 0 40px;
  border-top:1px solid rgba(172,125,44,.25);
  font-size:13px;color:rgba(240,215,197,.7);
}
@media(min-width:640px){.foot-bottom{flex-direction:row;justify-content:space-between}}
.foot-bottom p{margin:0}

/* --------------------------------------------------------------------------
   17. ACCESSIBILITY
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}