@import url('fonts.css');

/* ─────────────────────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────────────────────── */
:root {
  --cream:      #FFF8EF;
  --card:       #FFFCF6;
  --card-hover: #F7EEDF;
  --line:       #E9DECF;
  --line-soft:  #F0E7D8;
  --brand:      #50372B;
  --brand-hi:   #6A4E3C;
  --ink:        #1B1A19;
  --ink-2:      #3B352C;
  --ink-3:      #4B443A;
  --muted:      #6E6558;
  --muted-2:    #8C8272;
  --dark:       #2F221B;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Poppins', system-ui, -apple-system, sans-serif;

  --shell: 1200px;
  --gutter: 24px;
  --header-h: 66px;
}

/* ─────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--brand); }

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

button { font-family: inherit; }

section[id], [id="kontakti"] { scroll-margin-top: calc(var(--header-h) + 10px); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Horizontal snap strips share this: hidden scrollbar, touch momentum. */
.snap-strip {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.snap-strip::-webkit-scrollbar { display: none; }

/* Section headings share one scale. */
.h-section {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 3.8vw, 48px);
  letter-spacing: 0.03em;
  margin: 0 0 14px;
}

/* Filled brand button, both sizes. */
.btn {
  font-family: inherit;
  letter-spacing: 0.04em;
  border: none;
  border-radius: 5px;
  background: var(--brand);
  color: var(--cream);
  cursor: pointer;
  transition: background 0.2s;
}
.btn:hover { background: var(--brand-hi); color: var(--cream); }
.btn--sm { font-size: 13px;   padding: 10px 20px; }
.btn--lg { font-size: 15px;   padding: 14px 36px; }

/* Phone popover hung off a .pop-anchor. */
.pop-anchor { position: relative; display: inline-block; }
.pop {
  position: absolute;
  top: calc(100% + 10px);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(27, 26, 25, 0.1);
  padding: 16px 22px;
  white-space: nowrap;
  z-index: 60;
}
.pop[hidden] { display: none; }
.pop__label {
  margin: 0 0 3px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.pop__tel {
  font-size: 19px;
  font-weight: 500;
  color: var(--ink);
  user-select: all;
}
.pop__tel:hover { color: var(--brand); }

/* ─────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 248, 239, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.13em;
}

.nav-desktop { display: flex; align-items: center; gap: 26px; }
.nav-desktop a {
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.nav-desktop a:hover { color: var(--brand); }

.header-actions { display: flex; align-items: center; gap: 22px; }

/* Language picker — desktop */
.lang { position: relative; }
.lang__toggle {
  font-size: 13.5px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 2px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.lang__toggle:hover { color: var(--brand); }
.lang__caret { font-size: 9px; color: var(--muted-2); }
.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(27, 26, 25, 0.08);
  overflow: hidden;
  min-width: 96px;
  z-index: 60;
}
.lang__menu[hidden] { display: none; }
.lang__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 9px 14px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.lang__opt:hover { background: var(--line); }
.lang__opt[aria-selected="true"] { background: var(--line); }

/* Hamburger */
.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  flex-direction: column;
  gap: 5px;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
}

/* Mobile drawer */
.nav-mobile {
  display: none;
  border-top: 1px solid var(--line);
  padding: 12px var(--gutter) 24px;
  flex-direction: column;
  gap: 4px;
  background: var(--cream);
}
.nav-mobile[data-open="true"] { display: flex; }
.nav-mobile a.nav-mobile__link {
  font-size: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}
.nav-mobile__langs { display: flex; gap: 8px; margin-top: 16px; }
.nav-mobile__lang {
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}
.nav-mobile__lang[aria-pressed="true"] { background: var(--line); }
.nav-mobile__call {
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  padding: 13px;
  background: var(--brand);
  color: var(--cream);
  border-radius: 5px;
}
.nav-mobile__call:hover { color: var(--cream); background: var(--brand-hi); }

@media (max-width: 900px) {
  .nav-desktop, .header-actions { display: none; }
  .burger { display: flex; }
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(32px, 6vw, 72px) clamp(48px, 7vw, 88px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 5.8vw, 74px);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 20px;
}
.hero__lead {
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 300;
  line-height: 1.45;
  margin: 0 0 12px;
  color: var(--ink-2);
  max-width: 26em;
}
.hero__sub {
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 36px;
}

.carousel {
  position: relative;
  height: clamp(400px, 58vh, 600px);
  background: var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
.carousel__slide[data-active="true"] { opacity: 1; pointer-events: auto; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.carousel__dots {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 5;
}
.carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(27, 26, 25, 0.28);
  transition: background 0.3s;
}
.carousel__dot[aria-current="true"] { background: var(--ink); }

/* ─────────────────────────────────────────────────────────────
   Services
   ───────────────────────────────────────────────────────────── */
.services { border-top: 1px solid var(--line); }
.services .shell { padding-block: clamp(56px, 8vw, 96px); }
.services__intro {
  font-size: 15px;
  font-weight: 300;
  color: var(--muted);
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 34em;
  line-height: 1.6;
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 20px;
  align-items: start;
}
.svc {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  overflow: hidden;
}
.svc__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 22px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s;
}
.svc__toggle:hover { background: var(--card-hover); }
.svc__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.svc__sym {
  font-size: 20px;
  font-weight: 300;
  color: var(--brand);
  line-height: 1;
}
.svc__panel { padding: 2px 24px 18px; }
.svc__panel[hidden] { display: none; }
.svc__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}
.svc__row-name { font-size: 14.5px; color: var(--ink-2); }
.svc__row-price {
  font-size: 14px;
  color: var(--brand);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.services__note {
  font-size: 12.5px;
  font-weight: 300;
  font-style: italic;
  color: var(--muted-2);
  margin: clamp(24px, 3vw, 36px) 0 0;
  max-width: 42em;
  line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   About
   ───────────────────────────────────────────────────────────── */
.about { background: var(--line); }
.about .shell {
  padding-block: clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.about__portrait {
  aspect-ratio: 4 / 5;
  max-height: 640px;
  border-radius: 6px;
  overflow: hidden;
}
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
.about__heading { margin-bottom: 22px; }
.about__lead {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.about__body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-3);
  margin: 0 0 30px;
  max-width: 36em;
}
.about__facts {
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   Work / gallery
   ───────────────────────────────────────────────────────────── */
.work .shell { padding-block: clamp(56px, 8vw, 88px); }
.work__heading { margin-bottom: clamp(28px, 4vw, 44px); }
.work__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* .shot is an <a> — the whole tile links to Instagram, not just the icon. */
.shot {
  display: block;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot__veil {
  position: absolute;
  inset: 0;
  background: rgba(27, 26, 25, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.shot__link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
  color: var(--cream);
}
.shot:hover .shot__veil,
.shot:focus-visible .shot__veil { opacity: 1; }
.shot:hover .shot__link,
.shot:focus-visible .shot__link { opacity: 1; }

/* Mobile: full-bleed swipe strip with a corner Instagram badge. */
.work__strip {
  display: none;
  gap: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.work__strip .shot { flex: 0 0 72%; scroll-snap-align: center; }
.shot__badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  background: rgba(47, 34, 27, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
}


@media (max-width: 900px) {
  .work__grid { display: none; }
  .work__strip { display: flex; }
}

/* ─────────────────────────────────────────────────────────────
   Reviews
   ───────────────────────────────────────────────────────────── */
.reviews { border-top: 1px solid var(--line); }
.reviews .shell { padding-block: clamp(48px, 6vw, 72px) clamp(56px, 9vw, 120px); }
.reviews__heading {
  font-size: clamp(30px, 3.4vw, 42px);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.reviews__frame { position: relative; padding-inline: 62px; }
.reviews__strip { gap: clamp(28px, 4vw, 56px); }
.quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: calc((100% - 2 * clamp(28px, 4vw, 56px)) / 3);
  scroll-snap-align: start;
}
.quote__mark { margin-bottom: 10px; }
.quote blockquote {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-2);
}
.quote figcaption {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  margin-top: auto;
}
.reviews__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: rgba(233, 222, 207, 0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  transition: opacity 0.3s ease, background 0.25s ease, color 0.25s ease;
}
.reviews__arrow:hover { background: var(--brand); color: var(--cream); }
.reviews__arrow--prev { left: 0; }
.reviews__arrow--next { right: 0; }
.reviews__arrow[aria-hidden="true"] { opacity: 0; pointer-events: none; }

@media (max-width: 900px) {
  .reviews__frame { padding-inline: 0; }
  .reviews__strip {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* Without this the snap engine aligns the first card to the
       scrollport edge, cancelling the padding above — the strip loaded
       already scrolled 24px and the quotes sat flush against the screen
       edge while every heading beside them sat at the gutter. */
    scroll-padding-inline: var(--gutter);
  }
  .quote { width: 78%; }
  .reviews__arrow { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Map
   ───────────────────────────────────────────────────────────── */
.map { position: relative; line-height: 0; }
.map__frame { filter: grayscale(0.35) sepia(0.08); }
.map iframe { border: 0; display: block; pointer-events: none; }
.map__link { position: absolute; inset: 0; cursor: pointer; }

/* ─────────────────────────────────────────────────────────────
   WhatsApp float
   ───────────────────────────────────────────────────────────── */
.whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 60;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--brand);
  border: 1px solid rgba(233, 222, 207, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(27, 26, 25, 0.16);
  color: var(--cream);
  transition: background 0.2s;
}
.whatsapp:hover { background: var(--ink); color: var(--cream); }

/* ─────────────────────────────────────────────────────────────
   Footer
   ───────────────────────────────────────────────────────────── */
.site-footer { background: var(--dark); color: var(--cream); }
.site-footer .shell {
  padding-block: clamp(48px, 6vw, 72px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(32px, 4vw, 56px);
}
.site-footer__mark {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.12em;
  margin: 0 0 18px;
  color: var(--line);
}
.social { display: flex; gap: 16px; margin-bottom: 20px; }
.social a { color: var(--line); display: flex; }
.social a:hover { color: var(--cream); }
.site-footer__tel { font-size: 14.5px; margin: 0; }
.site-footer__tel a {
  color: var(--line);
  display: inline-block;
  padding: 4px 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(233, 222, 207, 0.5);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.site-footer__tel a:hover { color: var(--cream); text-decoration-color: var(--cream); }
.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav a { font-size: 14px; color: var(--line); width: fit-content; }
.footer-nav a:hover { color: var(--cream); }
.footer-meta {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--line);
}
.footer-meta p { margin: 0; display: flex; gap: 8px; }
.footer-meta p + p { margin-top: 14px; }
.footer-meta svg { flex-shrink: 0; margin-top: 4px; }
.footer-meta a { color: var(--line); transition: color 0.2s; }
.footer-meta a:hover { color: var(--cream); }
.site-footer__band {
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px) 12px 0;
  display: flex;
  justify-content: center;
}
.site-footer__band span {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(30px, 13.5vw, 258px);
  line-height: 1;
  white-space: nowrap;
  color: var(--line);
}
.site-footer__legal {
  border-top: 1px solid rgba(255, 248, 239, 0.12);
  padding: 18px var(--gutter);
  text-align: center;
  font-size: 12px;
  color: var(--muted-2);
}

/* ─────────────────────────────────────────────────────────────
   Phone layout

   The vertical rhythm above is tuned for desktop, and its clamp()
   floors (48–56px) are still desktop-sized on a 400px screen: a
   105px band of empty cream opened between the gallery and the
   reviews, and the footer ran to 600px on a 744px viewport. These
   scale the spacing down proportionally; the desktop composition
   is untouched.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hero { padding-block: 28px 40px; }

  .services .shell,
  .about .shell,
  .work .shell { padding-block: 44px; }

  .reviews .shell { padding-block: 32px 44px; }

  .work__heading,
  .reviews__heading { margin-bottom: 22px; }

  .services__intro { margin-bottom: 28px; }

  /* Stacking all three blocks ran the footer to 600px on a 744px
     screen. The brand keeps the full width; the nav and the contact
     details pair up beneath it. */
  .site-footer .shell {
    grid-template-columns: 1fr 1fr;
    padding-block: 40px 0;
    gap: 28px 20px;
  }
  .site-footer .shell > :first-child { grid-column: 1 / -1; }
  .footer-nav { gap: 14px; }

  /* The oversized wordmark sat 17px from both edges and rested
     directly on the copyright rule with no gap at all. */
  .site-footer__band { padding: 36px 20px 18px; }
  .site-footer__band span { font-size: 12vw; }
}

/* ─────────────────────────────────────────────────────────────
   Motion
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Crop nudges carried over from the design's image framing.
   Everything else sits at plain centred cover; these two were
   repositioned by hand in Claude Design, so the offsets are
   reproduced here rather than baked into the files.

   Expressed as object-position, NOT transform. The <img> box is
   exactly the size of its frame, so translating it slides it off
   the frame and exposes the background behind — which is what put
   an 18px band above the hero. object-position moves the crop
   WITHIN the box, so the frame stays covered at every viewport.
   scale() is safe here: it only ever grows the image.
   ───────────────────────────────────────────────────────────── */
img[src$="hero-hair-closeup.webp"] {
  object-position: 50% 46%;
}
img[src$="gallery-02.webp"] {
  object-position: 55% 23%;
  transform: scale(1.1616);
}