:root {
  --ink: #2d2526;
  --body: #5e5255;
  --muted: #7a6d70;
  --muted-2: #6f6366;
  --muted-light: #b3a3a7;
  --muted-light-2: #cbbcbf;
  --bg: #faf5f3;
  --bg-booking: #efebe8;
  --card: #fff;
  --card-2: #faf8f6;
  --pink: #f4dfdc;
  --pink-hover: #f5ebe9;
  --accent: #a9566a;
  --accent-dark: #8a3d50;
  --accent-dark-2: #7d3d4c;
  --accent-on-dark: #e3a9b5;
  --accent-divider: #c98d99;
  --line-1: #ebe0dd;
  --line-2: #e3d6d3;
  --line-3: #e2dbd7;
  --line-4: #ddd5d1;
  --line-5: #f0e8e6;
  --disabled: #c4ada8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; overflow-x: hidden; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
button, input, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }
h1, h2 { margin: 0; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.section-pad { padding-top: clamp(56px, 7vw, 80px); padding-bottom: clamp(56px, 7vw, 80px); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 99px; padding: 16px 26px; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #4a3d40; color: #fff; }
.btn-light { background: #fff; border: 1px solid var(--line-2); color: var(--ink); padding: 15px 26px; }
.btn-light:hover { border-color: var(--ink); color: var(--ink); }
.btn-pink-fill { background: #fff; color: var(--ink); }

/* ---------- Scroll reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Announcement bar ---------- */
.ann-bar { background: var(--ink); color: #f1e7e5; font-size: 13px; padding: 9px 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ann-bar a { color: #fff; font-weight: 600; }
.ann-mobile { display: none; }
.ann-desktop { display: inline; }
@media (max-width: 759px) {
  .ann-mobile { display: inline; }
  .ann-desktop { display: none; }
}

/* ---------- Header ---------- */
.header-wrap { position: relative; z-index: 50; }
.site-header { max-width: 1160px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; z-index: 2; background: var(--bg); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; }
.brand-name { font-size: 19px; font-weight: 600; }

.site-nav { display: none; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line-1); border-radius: 99px; background: #fff; }
.site-nav a { padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; color: #4d4245; }
.site-nav a:hover { background: var(--pink-hover); color: var(--ink); }
.site-nav a.is-active { background: var(--ink); color: #fff; }
.site-nav a.is-active:hover { color: #fff; }
.site-nav a.nav-book { font-weight: 600; color: var(--accent); }
.site-nav a.nav-book:hover { background: var(--pink-hover); }

.burger { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; border-radius: 99px; border: 1px solid var(--line-1); background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .35s ease, color .35s ease; }
.burger.is-open { background: var(--ink); color: #fff; }
.burger-icon { position: relative; width: 16px; height: 10px; display: block; }
.burger-line { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .45s cubic-bezier(.7,0,.2,1), top .45s cubic-bezier(.7,0,.2,1); }
.burger-line-1 { top: 1px; }
.burger-line-3 { top: 7px; }
.burger.is-open .burger-line-1 { top: 4px; transform: rotate(45deg); }
.burger.is-open .burger-line-3 { top: 4px; transform: rotate(-45deg); }

@media (min-width: 920px) {
  .site-nav { display: flex; }
}
@media (max-width: 919px) {
  .burger { display: flex; }
}

.menu-scrim { position: fixed; inset: 0; background: rgba(45,37,38,.28); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .45s ease; z-index: 1; }
.menu-scrim.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line-1); border-radius: 0 0 28px 28px; padding: 4px 24px 24px; clip-path: inset(0 0 100% 0 round 0 0 28px 28px); pointer-events: none; transition: clip-path .55s cubic-bezier(.7,0,.2,1); }
.mobile-menu.is-open { clip-path: inset(0 0 0 0 round 0 0 28px 28px); pointer-events: auto; }
.mobile-menu-link { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line-1); font-size: 26px; font-weight: 600; letter-spacing: -.025em; color: var(--ink); opacity: 0; transform: translateY(-14px); transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
.mobile-menu.is-open .mobile-menu-link { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu-link:nth-child(1) { transition-delay: .12s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(2) { transition-delay: .18s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(3) { transition-delay: .24s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(4) { transition-delay: .30s; }
.mobile-menu.is-open .mobile-menu-link:nth-child(5) { transition-delay: .36s; }
.mobile-menu-link-label { flex: 1; }
.mobile-menu-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: 0; }
.mobile-menu-link.is-active .mobile-menu-dot { opacity: 1; }
.mobile-menu-footer { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line-1); opacity: 0; transition: opacity .45s ease; }
.mobile-menu.is-open .mobile-menu-footer { opacity: 1; transition-delay: .25s; }
.mobile-menu-cta { display: flex; justify-content: center; padding: 16px; border-radius: 99px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 600; }
.mobile-menu-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.mobile-menu-row a { color: var(--ink); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { max-width: 1160px; margin: 0 auto; padding: clamp(32px,5vw,52px) 24px 56px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.pill-badge { display: flex; align-items: center; gap: 8px; background: var(--pink); padding: 7px 14px; border-radius: 99px; font-size: 14px; font-weight: 500; }
.pill-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.hero h1 { font-size: clamp(44px,7vw,88px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; max-width: 13em; }
.hero h1 .accent { color: var(--accent); }
.hero-sub { margin: 0; font-size: 18px; color: var(--body); text-wrap: pretty; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-actions.is-left { justify-content: flex-start; }
.hero-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font-size: 14px; }
.hero-chip { background: #fff; border: 1px solid var(--line-5); border-radius: 8px; padding: 6px 12px; }
.hero-chip strong { font-weight: 600; }
.hero-chip .muted { color: var(--muted); }
.hero-collage { width: 100%; margin-top: 14px; display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 10px; align-items: end; }
.hero-collage img { width: 100%; object-fit: cover; border-radius: 16px; }
.hero-collage .side { height: clamp(220px,32vw,400px); }
.hero-collage .center { height: clamp(270px,39vw,490px); }

/* ---------- Dark feature section ---------- */
.dark-section { background: var(--ink); color: #fff; }
.dark-grid { max-width: 1160px; margin: 0 auto; padding: clamp(56px,7vw,80px) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,400px),1fr)); gap: 40px; }
.dark-eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-on-dark); font-weight: 600; }
.dark-grid h2 { font-size: clamp(36px,4.4vw,56px); line-height: 1.04; letter-spacing: -.03em; }
.feature-row { display: grid; grid-template-columns: 44px 1fr; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); }
.feature-row .no { font-size: 14px; color: var(--muted-light-2); padding-top: 4px; }
.feature-row .copy { display: flex; flex-direction: column; gap: 6px; }
.feature-row .title { font-size: 20px; font-weight: 600; }
.feature-row .quote { font-size: 15px; color: var(--muted-light-2); }

/* ---------- Services teaser (Home) ---------- */
.services-teaser { max-width: 1160px; margin: 0 auto; padding: clamp(56px,7vw,80px) 24px; display: flex; flex-direction: column; gap: 28px; }
.services-teaser-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.services-teaser-head h2 { font-size: clamp(36px,4.4vw,56px); letter-spacing: -.03em; }
.price-pill { background: var(--pink); color: var(--accent-dark-2); padding: 7px 14px; border-radius: 99px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.service-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,250px),1fr)); gap: 10px; }
.service-chip { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; background: #fff; border: 1px solid var(--line-1); border-radius: 14px; color: var(--ink); }
.service-chip:hover { border-color: var(--ink); color: var(--ink); }
.service-chip img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.service-chip .name { flex: 1; font-size: 15px; font-weight: 500; }
.service-chip .price { font-size: 17px; font-weight: 600; }
.text-link { align-self: flex-start; font-size: 15px; font-weight: 600; }

/* ---------- Naši radovi slider ---------- */
.works-section { padding: clamp(56px,7vw,72px) 0; display: flex; flex-direction: column; gap: 22px; }
.works-head { max-width: 1160px; width: 100%; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.works-head h2 { font-size: clamp(36px,4.4vw,56px); letter-spacing: -.03em; }
.works-ig { font-size: 15px; font-weight: 600; color: var(--accent); }
.works-slider { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-left: max(24px, calc((100vw - 1112px) / 2)); }
.works-slider::-webkit-scrollbar { display: none; }
.works-slider img { flex: 0 0 auto; width: 240px; height: 320px; object-fit: cover; border-radius: 14px; }

/* ---------- Footer ---------- */
.footer-cta { background: var(--pink); text-align: center; }
.footer-cta-inner { max-width: 760px; margin: 0 auto; padding: clamp(56px,7vw,80px) 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-cta h2 { font-size: clamp(34px,4.2vw,52px); letter-spacing: -.03em; text-wrap: balance; }
.footer-cta p { margin: 0; font-size: 17px; color: var(--body); }
.footer-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.site-footer { background: var(--ink); color: #fff; }
.footer-grid { max-width: 1160px; margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-brand-name { font-size: 19px; font-weight: 600; }
.footer-brand-sub { font-size: 15px; color: #e2d6d4; }
.footer-brand-city { font-size: 13px; color: var(--muted-light); }
.footer-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.footer-phone { color: #fff; font-size: 18px; font-weight: 600; }
.footer-email { color: var(--accent-on-dark); font-size: 15px; font-weight: 500; }
.footer-hours { font-size: 15px; }
.footer-link { margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--accent-on-dark); }
.footer-cta .ig-link { font-size: 15px; font-weight: 600; color: var(--accent-dark-2); }
.footer-bottom { width: calc(100% - 48px); max-width: 1112px; margin: 0 auto; padding: 18px 0 40px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--muted-light); }

/* ---------- Page intro (Usluge / Kontakt) ---------- */
.page-intro { max-width: 1160px; margin: 0 auto; padding: clamp(32px,5vw,56px) 24px 24px; display: flex; flex-direction: column; gap: 14px; }
.page-intro h1 { font-size: clamp(44px,6vw,72px); letter-spacing: -.035em; line-height: 1; }
.page-intro .price-pill { align-self: flex-start; }
.page-intro p { margin: 0; font-size: 18px; color: var(--body); max-width: 36em; }

/* ---------- Usluge cards ---------- */
.usluge-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.usluge-section { max-width: 1160px; margin: 0 auto; padding: 24px 24px clamp(56px,7vw,80px); display: flex; flex-direction: column; gap: 20px; }
.usluge-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: 0; background: #fff; border: 1px solid var(--line-1); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgba(45,37,38,.04); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s; }
.usluge-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(45,37,38,.1); border-color: var(--accent-divider); }
.usluge-card.is-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.usluge-card.is-dark:hover { border-color: var(--ink); }
.usluge-card.is-reverse { grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); }
.usluge-card.is-reverse .usluge-card-img { order: 2; }
.usluge-card-img { min-height: 220px; height: 100%; overflow: hidden; }
.usluge-card-img img { width: 100%; height: 100%; min-height: 220px; max-height: 300px; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.usluge-card:hover .usluge-card-img img { transform: scale(1.06); }
.usluge-card-body { display: flex; flex-direction: column; padding: clamp(20px,3vw,32px); gap: 2px; }
.usluge-card-num { font-size: 13px; letter-spacing: .14em; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.usluge-card.is-dark .usluge-card-num { color: var(--accent-on-dark); }
.usluge-card-body h2 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.025em; }
.usluge-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-5); }
.usluge-card.is-dark .usluge-row { border-top-color: rgba(255,255,255,.12); }
.usluge-row .name { flex: 1; font-size: 16px; }
.usluge-row .meta { color: #8a7c80; font-size: 14px; }
.usluge-card.is-dark .usluge-row .meta { color: var(--muted-light-2); }
.usluge-row .price { font-size: 19px; font-weight: 700; color: var(--accent); }
.usluge-card.is-dark .usluge-row .price { color: #fff; }
.usluge-row .book-link { flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; border: 1px solid var(--line-2); border-radius: 99px; padding: 7px 12px; transition: background .2s, border-color .2s, color .2s; }
.usluge-row:hover .book-link { background: var(--ink); border-color: var(--ink); color: #fff; }
.usluge-card.is-dark .usluge-row .book-link { border-color: rgba(255,255,255,.25); }
.usluge-card.is-dark .usluge-row:hover .book-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.usluge-card-note { font-size: 14px; color: var(--muted-light-2); padding-top: 8px; }

@media (max-width: 639px) {
  .usluge-card.is-reverse .usluge-card-img { order: initial; }
}

/* ---------- O nama ---------- */
.about-hero { max-width: 1160px; margin: 0 auto; padding: clamp(32px,5vw,56px) 24px clamp(56px,7vw,80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: clamp(28px,5vw,64px); align-items: center; }
.about-portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: 22px; }
.about-copy { display: flex; flex-direction: column; gap: 22px; }
.about-copy h1, .about-copy h2 { font-size: clamp(36px,4.6vw,58px); letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.about-copy p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
.about-signoff { display: flex; flex-direction: column; gap: 4px; }
.about-signoff .line1 { font-size: 18px; font-weight: 600; }
.about-signoff .line2 { font-size: 15px; color: var(--muted); }

.about-points { max-width: 1160px; margin: 0 auto; padding: clamp(56px,7vw,80px) 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px),1fr)); gap: 32px 24px; }
.about-point { padding: 20px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: flex; flex-direction: column; gap: 10px; }
.about-point .no { font-size: 14px; color: var(--accent-on-dark); }
.about-point .title { font-size: 19px; font-weight: 600; }
.about-point .text { font-size: 15px; color: var(--muted-light-2); line-height: 1.5; }

/* ---------- Shared bits ---------- */
.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.text-link.is-muted { color: var(--muted); font-weight: 500; }
.link-row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.5; color: var(--body); }
.check-list li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--pink); color: var(--accent-dark); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---------- Home: intro (Vesna) ---------- */
.intro-section { padding-top: clamp(56px,7vw,80px); }
.portrait-wrap { position: relative; }
.portrait-badge { position: absolute; right: -14px; bottom: -14px; width: clamp(84px,10vw,120px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 5px solid var(--bg); box-shadow: 0 10px 24px rgba(45,37,38,.14); }
@media (max-width: 639px) { .portrait-badge { right: 12px; bottom: -18px; } }

/* ---------- Home: ritual ---------- */
.ritual-section { max-width: 1160px; margin: 0 auto; padding: 0 24px clamp(56px,7vw,80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: clamp(28px,5vw,64px); align-items: center; }
.ritual-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; }
.ritual-copy { display: flex; flex-direction: column; gap: 18px; }
.ritual-copy h2 { font-size: clamp(32px,4vw,50px); letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
.ritual-copy > p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--body); }
.ritual-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.ritual-steps li { display: grid; grid-template-columns: 44px 1fr; padding: 18px 0; border-top: 1px solid var(--line-1); font-size: 16px; line-height: 1.55; color: var(--body); }
.ritual-steps .no { font-size: 14px; color: var(--accent); font-weight: 700; padding-top: 2px; }
.ritual-steps strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 4px; }
@media (min-width: 840px) { .ritual-photo { order: 2; } }

/* ---------- Home: hygiene teaser ---------- */
.hygiene-teaser { max-width: 1160px; margin: 0 auto; padding: clamp(56px,7vw,80px) 24px 0; }
.hygiene-card { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); background: #fff; border: 1px solid var(--line-1); border-radius: 22px; overflow: hidden; }
.hygiene-card > img { width: 100%; height: 100%; min-height: 280px; max-height: 520px; object-fit: cover; }
.hygiene-copy { padding: clamp(24px,4vw,48px); display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.hygiene-copy h2 { font-size: clamp(30px,3.6vw,44px); letter-spacing: -.03em; line-height: 1.06; text-wrap: balance; }
.hygiene-sign { margin: 0; font-size: 18px; font-weight: 600; color: var(--accent-dark); }

/* ---------- Usluge descriptions ---------- */
.usluge-card-desc { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.usluge-card-desc strong { color: var(--ink); }
.usluge-card-quote { margin: 0 0 14px; padding-left: 14px; border-left: 2px solid var(--accent-divider); font-size: 15px; font-style: italic; color: var(--accent-dark-2); }
.usluge-card-img img { max-height: 420px; }

/* ---------- Higijena ---------- */
.hyg-section { max-width: 1160px; margin: 0 auto; padding: 24px 24px clamp(56px,7vw,80px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: clamp(28px,5vw,64px); align-items: center; }
.hyg-section.is-reverse { padding-top: clamp(56px,7vw,80px); }
.hyg-media { display: flex; flex-direction: column; gap: 14px; }
.hyg-media img, .hyg-photo { width: 100%; height: auto; object-fit: cover; border-radius: 22px; }
.hyg-photo { aspect-ratio: 4 / 5; }
.hyg-reel { font-size: 15px; font-weight: 600; color: var(--accent); }
.hyg-steps { display: flex; flex-direction: column; }
.hyg-step { display: grid; grid-template-columns: 44px 1fr; padding: 20px 0; border-top: 1px solid var(--line-1); }
.hyg-step .no { font-size: 14px; font-weight: 700; color: var(--accent); padding-top: 4px; }
.hyg-step h3 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.hyg-step p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.quote-band { max-width: 1160px; margin: 0 auto; padding: clamp(56px,7vw,88px) 24px; text-align: center; }
.quote-band p { margin: 0; font-size: clamp(34px,5vw,60px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.quote-band .accent { color: var(--accent-on-dark); }
@media (min-width: 840px) { .hyg-section.is-reverse .hyg-photo { order: 2; } }

/* ---------- Kontakt ---------- */
.contact-section { max-width: 1160px; margin: 0 auto; padding: clamp(32px,5vw,56px) 24px clamp(56px,7vw,80px); display: flex; flex-direction: column; gap: 32px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); gap: 12px; align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: 12px; }
.contact-list-card { background: #fff; border: 1px solid var(--line-1); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.contact-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line-5); }
.contact-list-row:last-child { border-bottom: none; }
.contact-list-row .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.contact-list-row .val { font-size: 20px; font-weight: 600; }
.contact-list-row .val-sm { font-size: 18px; font-weight: 600; }
.contact-list-row .action { font-weight: 600; color: var(--accent); }
.contact-dark-card { background: var(--ink); color: #fff; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 22px; }
.contact-dark-card .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-light-2); font-weight: 600; }
.contact-location .name { font-size: 22px; font-weight: 600; }
.contact-location .city { font-size: 15px; color: var(--muted-light-2); }
.contact-hours-row { display: flex; justify-content: space-between; font-size: 16px; }
.contact-hours-row.is-muted { color: var(--muted-light-2); }
.contact-dark-card .btn-pink-fill { margin-top: auto; align-self: flex-start; }
.contact-photo { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: 18px; }

.contact-form-card { background: #fff; border: 1px solid var(--line-1); border-radius: 18px; padding: clamp(22px,3vw,32px); }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form h2 { font-size: clamp(24px,2.6vw,30px); font-weight: 700; letter-spacing: -.02em; }
.contact-form-sub { margin: -10px 0 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
.contact-form .form-field input, .contact-form .form-field textarea { background: var(--card-2); }
.form-submit { align-self: flex-start; border: none; background: var(--ink); color: #fff; border-radius: 99px; padding: 15px 28px; font-size: 15px; font-weight: 600; cursor: pointer; }
.form-submit:hover { background: #4a3d40; }
.sent-state { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(22px,3vw,32px) 0; }
.sent-state h2 { font-size: 26px; font-weight: 700; }
.sent-state p { margin: 0; color: var(--body); font-size: 16px; }

/* ================================================================
   Zakazivanje (booking)
   ================================================================ */
.booking-body { background: var(--bg-booking); min-height: 100vh; padding-bottom: 120px; }
.booking-wrap { max-width: 880px; margin: 0 auto; padding: 24px 20px; display: flex; flex-direction: column; }

.booking-cover-wrap { position: relative; }
.booking-cover { display: block; width: 100%; height: clamp(220px,34vw,380px); object-fit: cover; object-position: center 40%; border-radius: 14px; }
.booking-back-pill { position: absolute; top: 12px; right: 12px; background: #fff; border-radius: 99px; padding: 7px 14px; font-size: 14px; font-weight: 500; }
.booking-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: -36px; position: relative; }
.booking-brand-logo { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; border: 3px solid var(--bg-booking); }
.booking-brand h1 { margin: 6px 0 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.booking-brand-sub { font-size: 14px; color: var(--muted-2); }
.booking-brand-divider { width: 40px; height: 2px; background: var(--accent-divider); margin-top: 12px; }

.booking-step-head { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; }
.booking-step-head h2 { margin: 0; font-size: 21px; font-weight: 600; }
.booking-step-head p { margin: 0; font-size: 14px; color: var(--muted-2); }

.cat-list { display: flex; flex-direction: column; margin-top: 10px; }
.cat-block { display: flex; flex-direction: column; }
.cat-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; background: none; border: none; cursor: pointer; color: var(--ink); text-align: left; }
.cat-toggle-label { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cat-badge { font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; background: var(--ink); color: #fff; border-radius: 99px; padding: 2px 8px; opacity: 0; }
.cat-badge.is-visible { opacity: 1; }
.cat-chevron { width: 9px; height: 9px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); margin-right: 6px; transform: rotate(45deg); transition: transform .2s ease; }
.cat-toggle.is-open .cat-chevron { transform: rotate(-135deg) translate(-2px,-2px); }
.cat-items { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-3); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.cat-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: #fff; border: none; border-top: 1px solid #f0eae7; cursor: pointer; text-align: left; color: var(--ink); min-height: 64px; width: 100%; }
.cat-item:first-child { border-top: none; }
.cat-item.is-selected { background: #fbf6f4; }
.cat-item-copy { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.cat-item-name { font-size: 16px; font-weight: 500; }
.cat-item-meta { font-size: 13px; color: var(--muted); }
.cat-item-price { font-size: 15px; font-weight: 600; }
.cat-item-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #cfc6c2; background: #fff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 auto; }
.cat-item.is-selected .cat-item-check { border-color: var(--ink); background: var(--ink); }
.cat-item-check.is-addon { border-radius: 6px; }

.booking-divider { height: 1px; background: var(--line-4); margin: 24px 0; }
.booking-sub-head { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
.team-row { display: flex; align-items: center; gap: 12px; }
.team-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top; }
.team-name { font-size: 15px; font-weight: 500; }
.team-role { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8a7c80; font-weight: 600; }

.find-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: 14px; }
.find-card { background: var(--card-2); border: 1px solid var(--line-3); border-radius: 10px; }
.find-card.phone-card { display: flex; flex-direction: column; }
.find-row { display: flex; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #e9e2de; font-size: 15px; }
.find-row:last-child { border-bottom: none; }
.find-row a { color: var(--accent-dark); font-weight: 600; }
.find-hours { padding: 14px 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 15px; align-content: start; }
.find-hours .lbl { color: var(--muted); }
.booking-change-link { align-self: center; margin-top: 28px; font-size: 14px; color: var(--muted-2); text-decoration: underline; }

.booking-step-header { display: flex; align-items: center; gap: 12px; padding: 4px 0 18px; }
.booking-back-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-4); background: var(--card-2); cursor: pointer; font-size: 18px; color: var(--ink); flex: 0 0 auto; }
.booking-step-logo { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.booking-step-title { flex: 1; display: flex; flex-direction: column; }
.booking-step-title .name { font-size: 15px; font-weight: 600; }
.booking-step-title .sub { font-size: 13px; color: var(--muted); }
.booking-progress { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 28px; }
.booking-progress span { height: 3px; border-radius: 2px; background: var(--line-4); }
.booking-progress span.is-done { background: var(--ink); }

.step-panel { display: flex; flex-direction: column; gap: 24px; }
.step-panel h2 { font-size: 26px; font-weight: 600; }
.summary-mini { display: flex; align-items: center; gap: 14px; background: var(--card-2); border: 1px solid var(--line-3); border-radius: 12px; padding: 14px 16px; }
.summary-mini img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
.summary-mini-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.summary-mini-copy .name { font-size: 15px; font-weight: 600; }
.summary-mini-copy .meta { font-size: 13px; color: var(--muted); }
.summary-mini-edit { background: none; border: none; color: var(--accent-dark); font-size: 14px; font-weight: 600; cursor: pointer; }

.day-field { display: flex; flex-direction: column; gap: 12px; }
.day-field-label { font-size: 15px; font-weight: 600; }
.day-pills { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
.day-pill { flex: 0 0 auto; width: 62px; padding: 10px 0; border-radius: 12px; border: 1px solid var(--line-4); background: var(--card-2); color: var(--ink); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.day-pill.is-selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.day-pill.is-closed { color: #b8acae; cursor: not-allowed; background: transparent; }
.day-pill .dow { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.day-pill .num { font-size: 20px; font-weight: 600; }
.day-pill.is-closed .num { text-decoration: line-through; }

.slot-group { display: flex; flex-direction: column; gap: 10px; }
.slot-group-label { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap: 8px; }
.slot-btn { min-height: 46px; border-radius: 10px; border: 1px solid var(--line-4); background: var(--card-2); color: var(--ink); font-size: 15px; font-weight: 600; cursor: pointer; }
.slot-btn.is-selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.slot-btn.is-taken { background: transparent; color: #b8acae; border-color: var(--line-3); text-decoration: line-through; cursor: not-allowed; }
.no-slots-note { background: var(--card-2); border: 1px solid var(--line-3); border-radius: 12px; padding: 18px; font-size: 15px; color: var(--body); }

.order-summary { background: var(--card-2); border: 1px solid var(--line-3); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.order-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.order-summary-row.is-main { font-weight: 600; }
.order-summary-row.is-addon { font-size: 14px; color: var(--body); }
.order-summary-when { font-size: 14px; color: var(--body); }
.order-summary-divider { height: 1px; background: #e9e2de; margin: 4px 0; }
.order-summary-total { display: flex; justify-content: space-between; font-size: 16px; font-weight: 600; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.form-field input, .form-field textarea { padding: 14px; border-radius: 10px; border: 1px solid var(--line-4); background: #fff; font-size: 16px; font-weight: 400; color: var(--ink); outline: none; }
.form-field textarea { resize: vertical; }
.form-note { font-size: 13px; color: var(--muted); }

.confirm-panel { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 24px 0; }
.confirm-check { width: 60px; height: 60px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.confirm-panel h2 { font-size: 30px; font-weight: 600; }
.confirm-panel p { margin: 0; font-size: 16px; color: var(--body); max-width: 28em; line-height: 1.5; }
.confirm-summary { width: 100%; max-width: 460px; background: var(--card-2); border: 1px solid var(--line-3); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; margin-top: 8px; }
.confirm-summary-row { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; }
.confirm-summary-sub { font-size: 14px; color: var(--body); }
.confirm-back-btn { margin-top: 10px; background: var(--ink); color: #fff; border-radius: 10px; padding: 15px 28px; font-size: 15px; font-weight: 600; }

.booking-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(239,235,232,.96); border-top: 1px solid var(--line-4); padding: 12px 20px; display: flex; justify-content: center; }
.booking-bar-btn { width: 100%; max-width: 446px; min-height: 48px; border: none; border-radius: 8px; background: var(--disabled); color: #fff; font-size: 16px; font-weight: 500; cursor: not-allowed; }
.booking-bar-btn.is-active { background: var(--ink); cursor: pointer; }

a[href*="zakazivanje"], .btn, button { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
a[href*="zakazivanje"]:hover, .btn:hover { transform: translateY(-2px); }

/* ---- Usluge bez cena (revizija 9.11.) ---- */
.service-chip .arrow { font-size: 17px; color: var(--accent); transition: transform .2s; }
.service-chip:hover .arrow { transform: translateX(3px); }
.usluge-card-body { justify-content: center; }
.usluge-card-cta { align-self: flex-start; margin-top: 10px; }
.usluge-card-img img { height: 100%; }
.usluge-more { margin: 8px 0 0; text-align: center; font-size: 15px; color: var(--body); text-wrap: balance; }
.usluge-more a { color: var(--accent-dark-2); font-weight: 600; }
.works-slider + .works-slider { margin-top: -12px; }