:root {
  --bg-cream: #f4efe5;
  --bg-cream-warm: #ede6d8;
  --ink: #0f0f0e;
  --ink-soft: #2c2a26;
  --forest: #143c2e;
  --forest-deep: #0b2a20;
  --sage: #8fa386;
  --sage-soft: #b5c2ac;
  --sage-deep: #5f7359;
  --terracotta: #b7472a;
  --terracotta-soft: #d6634a;
  --stone-light: #e8dfd0;
  --stone-mid: #b3a593;
  --stone-dark: #8b7e6e;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  /* Anchor links (#place-*) need offset so they don't slide under the
     fixed nav (~88px). scroll-padding-top is the modern fix. */
  scroll-padding-top: 96px;
}

html,
body {
  background: var(--bg-cream);
  color: var(--ink);
  font-family: "Geist", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
}

/* iOS Safari computes 100vh including the URL bar height, then the
   layout jumps when the bar hides. 100dvh tracks the live viewport. */
.hero { min-height: 100dvh; }

/* Anchor-target offset for the BiH-map → frame jumps. */
[id^="place-"] { scroll-margin-top: 96px; }

body {
  /* `overflow-x: clip` instead of `hidden` — `clip` still prevents horizontal
     scrollbar from off-screen elements BUT does NOT make body a scroll
     container. `hidden` would silently break `position: sticky` on every
     descendant by promoting body to a scroll context. See also the later
     html/body override block. */
  overflow-x: clip;
}

::selection {
  background: var(--terracotta);
  color: var(--bg-cream);
}

/* ========== NAV — minimal pre-launch ========== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 32px 48px;
  /* Grid with 1fr | auto | 1fr columns ensures the middle column (.nav__links)
     sits at true viewport center regardless of side column widths. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  transition:
    padding 0.4s ease,
    background 0.4s ease;
  backdrop-filter: blur(0px);
}

.nav__logo  { justify-self: start; }
.nav__right { justify-self: end;   }

.nav.scrolled {
  padding: 16px 48px;
  background: rgba(244, 239, 229, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(139, 126, 110, 0.08);
}

.nav__logo {
  /* Subtle dim hover — matches .foot__logo-link pattern. Only active when
     the logo is in its DARK state (scrolled home or any subpage with
     filter:none). Above-fold home keeps the white logo solid (no hover)
     so the brand mark stays bold against the hero photo. */
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav.scrolled .nav__logo:hover,
body.legal-page .nav__logo:hover,
body.propose-page .nav__logo:hover,
body.place-detail-page .nav__logo:hover,
body.partner-page .nav__logo:hover,
body.city-page-body .nav__logo:hover {
  opacity: 0.78;
}

.nav__logo-img {
  height: 72px;
  width: auto;
  display: block;
  filter: brightness(0) invert(0.96) sepia(4%) saturate(380%) hue-rotate(15deg);
  transition:
    filter 0.4s ease,
    height 0.4s ease;
}

.nav.scrolled .nav__logo-img {
  filter: none;
  height: 56px;
}

.nav__right {
  display: inline-flex;
  align-items: center;
  gap: 28px;
}

.nav__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.88);
  font-weight: 500;
  transition: color 0.4s;
}

.nav.scrolled .nav__status {
  color: var(--ink-soft);
}

/* ========== Language switcher (BS · EN · DE) ========== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.lang-btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 4px;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  color: rgba(244, 239, 229, 0.55);
  cursor: pointer;
  transition: color 0.25s ease;
  line-height: 1;
}
.lang-btn:hover,
.lang-btn:focus-visible {
  color: var(--terracotta);
  outline: none;
}
.lang-btn.is-active {
  color: var(--terracotta);
  font-weight: 600;
}
.lang-divider {
  color: rgba(244, 239, 229, 0.35);
  user-select: none;
  pointer-events: none;
  padding: 0 2px;
}

.nav.scrolled .lang-btn {
  color: rgba(15, 15, 14, 0.5);
}
.nav.scrolled .lang-btn:hover,
.nav.scrolled .lang-btn:focus-visible,
.nav.scrolled .lang-btn.is-active {
  color: var(--terracotta);
}
.nav.scrolled .lang-divider {
  color: rgba(15, 15, 14, 0.25);
}

@media (max-width: 640px) {
  .nav__right {
    gap: 14px;
  }
  .lang-switch {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .lang-btn {
    padding: 4px 2px;
  }
}

.nav__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta-soft);
  box-shadow: 0 0 0 0 rgba(214, 99, 74, 0.6);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(214, 99, 74, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(214, 99, 74, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(214, 99, 74, 0);
  }
}

/* ========== HERO — full-bleed magazine cover ========== */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  contain: layout style paint;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  contain: layout style paint;
}

.hero__slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  backface-visibility: hidden;
  will-change: transform;
  /* Ken Burns is permanently attached but paused — only the active slide runs it.
       fill-mode:both means the from-state (scale 1.08) renders while paused-at-start,
       and the to-state (scale 1) holds after the animation eventually completes.
       This is what eliminates the snap-back when a slide is deactivated mid-flight. */
  transform: translate3d(0, 0, 0);
  animation-name: heroKenBurns;
  animation-duration: 9s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide.is-active .hero__slide-img {
  animation-play-state: running;
}

@keyframes heroKenBurns {
  from {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* While the preloader curtain covers hero, hold Ken Burns at frame 0 (paused).
     When .is-loading is removed at curtain-open, animation-play-state flips to
     running and the animation starts fresh from the from-state. */
.hero.is-loading .hero__slide.is-active .hero__slide-img {
  animation-play-state: paused;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(11, 42, 32, 0.55) 0%,
      rgba(11, 42, 32, 0.2) 35%,
      rgba(11, 42, 32, 0.4) 70%,
      rgba(11, 42, 32, 0.85) 100%
    ),
    linear-gradient(90deg, rgba(11, 42, 32, 0.45) 0%, transparent 50%);
}

.hero__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 64px 80px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  color: var(--bg-cream);
}

.hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(244, 239, 229, 0.78);
  margin-bottom: 40px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  animation: fadeIn 1.4s 0.2s ease-out forwards;
}

.hero__eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--terracotta-soft);
}

.hero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(54px, 10.5vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--bg-cream);
  max-width: 22ch;
  margin-bottom: 32px;
  text-wrap: balance;
  word-break: keep-all;
  opacity: 0;
  animation: fadeUp 1.6s 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  transition: opacity 0.6s ease;
}

.hero__title.is-changing {
  opacity: 0;
}

/* Line 2 wrapper — historical name kept. Previously forced display: block
   to put the em on its own line below the prefix. After 2026-05 line-break
   redesign, the editorial break point lives in the i18n em string itself
   (one explicit <br> per slide). Keeping this span inline lets the prefix
   and the first part of em flow together on visual line 1, with the <br>
   creating visual line 2. Without this change, the page renders 3 lines
   per slide (prefix on line 1 from display:block + em split into 2 by the
   inner <br>). */
.hero__title-line2 {
  display: inline;
}
/* Inline italic accent on a single keyword inside line 2.
     Cream colour keeps contrast against any hero photo; a thin terracotta
     underline animates in left→right (delay 0.6s, 1.2s ease) for the
     editorial accent — re-triggers on every slide swap because the JS
     replaces the <em> via innerHTML, giving a fresh element each time. */
.hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--bg-cream);
}

.hero__sub {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.3;
  color: rgba(244, 239, 229, 0.88);
  max-width: 64ch;
  margin-bottom: 56px;
  /* All 5 slides on all 3 langs are now trimmed to ≤45 chars and fit in
     a single line at the widened max — no wrap, cleaner hero rhythm.
     overflow + ellipsis is a safety net that should never trigger. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  animation: fadeUp 1.4s 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  transition: opacity 0.6s ease;
}

/* Mobile: nowrap is risky on narrow viewports — let it wrap naturally */
@media (max-width: 768px) {
  .hero__sub {
    white-space: normal;
    font-size: clamp(15px, 4vw, 20px);
    max-width: 40ch;
    text-wrap: balance;
  }
}

.hero__sub.is-changing {
  opacity: 0;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 1.2s 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.hero__cta-btn {
  background: var(--terracotta);
  color: var(--bg-cream);
  border: none;
  padding: 26px 44px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  position: relative;
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.32);
}

/* Subtle pulsing ring */
.hero__cta-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1px solid rgba(244, 239, 229, 0.4);
  opacity: 0;
  animation: ctaPulse 3s ease-out infinite;
  pointer-events: none;
}

@keyframes ctaPulse {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  50% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

.hero__cta-btn:hover {
  background: #9a3b22;
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(183, 71, 42, 0.42);
}

.hero__cta-btn span {
  transition: transform 0.3s;
  font-size: 18px;
}
.hero__cta-btn:hover span {
  transform: translateX(6px);
}

.hero__cta-text {
  font-size: 14px;
  color: rgba(244, 239, 229, 0.7);
  line-height: 1.5;
  max-width: 26ch;
}

.hero__photo-credit {
  position: absolute;
  bottom: 20px;
  right: 24px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.65);
  z-index: 2;
  transition: opacity 0.6s ease;
}

.hero__indicators {
  position: absolute;
  bottom: 48px;
  right: 48px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  opacity: 0;
  animation: fadeIn 1.4s 1.2s ease-out forwards;
}
/* Slide counter — sits above the indicator stack, "01 / 05" */
.hero__slide-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(244, 239, 229, 0.55);
  font-weight: 500;
  user-select: none;
}
.hero__slide-counter-current {
  color: var(--terracotta);
}
.hero__slide-counter-sep {
  opacity: 0.5;
}
.hero__slide-counter-total {
  opacity: 0.7;
}

.hero__dot {
  width: 28px;
  height: 1px;
  background: rgba(244, 239, 229, 0.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: visible;
}

.hero__dot::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: 0;
  right: 0;
}

.hero__dot.is-active {
  width: 48px;
  background: var(--bg-cream);
}

.hero__dot:hover {
  background: rgba(244, 239, 229, 0.7);
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== INTRO — manifesto ========== */
.intro {
  padding: clamp(120px, 16vw, 220px) 48px;
  background: var(--bg-cream);
  text-align: center;
  position: relative;
}

.intro__inner {
  max-width: 1280px;
  margin: 0 auto;
}

.intro__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 56px;
  display: inline-block;
}

.intro__eyebrow::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: var(--terracotta);
  margin: 14px auto 0;
}

.intro__statement {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 6.2vw, 92px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
  margin: 0 auto 32px;
  text-wrap: balance;
}

.intro__statement em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.intro__sub {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0.88;
  max-width: 52ch;
  margin: 0 auto;
  text-wrap: pretty;
}

.intro__sub em {
  font-style: normal;
  color: var(--terracotta);
}

/* Intro details: 2-col with image + concrete description */
.intro__details {
  max-width: 1280px;
  margin: clamp(96px, 14vw, 180px) auto 0;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
  text-align: left;
}

.intro__details-media {
  aspect-ratio: 4/5;
  overflow: visible;
  background-color: transparent;
  position: relative;
}

/* Cream offset frame behind image */
.intro__details-media::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -24px;
  right: 24px;
  bottom: -24px;
  background: var(--bg-cream-warm);
  z-index: 0;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Terracotta accent line top-right */
.intro__details-media::after {
  content: "";
  position: absolute;
  top: -12px;
  right: -12px;
  width: 88px;
  height: 88px;
  border-top: 1px solid var(--terracotta);
  border-right: 1px solid var(--terracotta);
  z-index: 2;
  pointer-events: none;
  transition:
    width 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    height 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro__details:hover .intro__details-media::before {
  transform: translate(-8px, 8px);
}

.intro__details:hover .intro__details-media::after {
  width: 120px;
  height: 120px;
}

.intro__details-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.8s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  clip-path: inset(0);
}

.intro__details:hover .intro__details-img {
  transform: scale(1.03);
}

.intro__details-content {
  padding-right: 16px;
}

.intro__details-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.intro__details-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--sage-deep);
}

.intro__details-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 32px;
  text-wrap: balance;
}

.intro__details-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.intro__details-text {
  font-family: "Geist", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  opacity: 0.88;
  text-wrap: pretty;
  margin-bottom: 20px;
}

.intro__details-text:last-of-type {
  margin-bottom: 0;
}

/* Intro services: 6 services grid (the WOW + safety).
     Spacing tightened — section-divider above already provides separation,
     so no margin-top + smaller padding-top + no border-top. */
.intro__services {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: clamp(48px, 5vw, 80px);
  padding-bottom: clamp(56px, 6vw, 96px);
}

.intro__services-header {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 72px);
  text-align: center;
}

.intro__services-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.intro__services-eyebrow::before,
.intro__services-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--terracotta);
}

.intro__services-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(28px, 3.8vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  margin-bottom: 20px;
}

.intro__services-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.intro__services-note {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 720px;
  margin: 0 auto;
  font-style: italic;
  font-family: "Fraunces", serif;
}

/* 2×2 grid — 4 cards perfectly balanced. Gap is editorial-tight, not SaaS-wide. */
.intro__services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 32px);
  text-align: left;
}

/* Editorial info-block: full subtle border + tiny lift off the cream page bg
   (warm-white card surface). Padding is generous for premium breathing.
   Hover: translateY + soft shadow + terracotta border tint — refined, not flashy. */
.intro__service {
  position: relative;
  padding: clamp(32px, 3.6vw, 52px) clamp(28px, 3vw, 44px);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(15, 15, 14, 0.08);
  border-radius: 4px;
  transition:
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: default;
  overflow: hidden;
}

.intro__service:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(15, 15, 14, 0.05);
  border-color: rgba(183, 71, 42, 0.22);
}

/* Top accent line — short terracotta marker at card top-left, grows full
   width on hover. Sits inside the rounded corner. */
.intro__service::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--terracotta);
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro__service:hover::before {
  width: 100%;
}

.intro__service-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 28px;
  color: var(--terracotta);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.intro__service:hover .intro__service-icon {
  transform: scale(1.1) rotate(-4deg);
}

.intro__service-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.intro__service-num {
  position: absolute;
  top: 16px;
  right: 0;
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--stone-dark);
  letter-spacing: 0.24em;
  opacity: 0.7;
  transition:
    color 0.4s ease,
    opacity 0.4s ease;
}

.intro__service:hover .intro__service-num {
  color: var(--terracotta);
  opacity: 1;
}

.intro__service-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 2.5vw, 30px);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.15;
}

.intro__service-desc {
  font-family: "Geist", sans-serif;
  font-size: clamp(14px, 1.05vw, 15px);
  line-height: 1.7;
  color: var(--ink-soft);
  text-wrap: pretty;
  margin: 0;
  max-width: 42ch;
}

/* Packages footer — more destinations coming */
.packages__footer {
  max-width: 1080px;
  margin: 80px auto 0;
  padding: 56px 48px 0;
  border-top: 1px solid rgba(139, 126, 110, 0.18);
  text-align: center;
}

.packages__footer-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.packages__footer-eyebrow::before,
.packages__footer-eyebrow::after {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--sage-deep);
}

.packages__footer-text {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.3;
  color: var(--ink);
  max-width: 36ch;
  margin: 0 auto 16px;
  text-wrap: balance;
}

.packages__footer-text em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.packages__footer-sub {
  font-size: 14px;
  color: var(--stone-dark);
  letter-spacing: 0.04em;
}

/* ========== PHASES — what's coming next ========== */
.phases {
  background: var(--bg-cream-warm);
  padding: clamp(120px, 14vw, 180px) 48px;
  position: relative;
  overflow: hidden;
}

.phases::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(95, 115, 89, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.phases__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.phases__header {
  max-width: 720px;
  margin-bottom: 96px;
}

.phases__eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.phases__eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--terracotta);
}

.phases__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 14ch;
  text-wrap: balance;
}

.phases__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.phases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 96px;
}

.phase {
  background: var(--bg-cream);
  padding: 48px 36px 44px;
  position: relative;
  transition: transform 0.4s ease;
  border-top: 2px solid transparent;
}

.phase--now {
  border-top-color: var(--sage-deep);
}
.phase--soon {
  border-top-color: var(--terracotta);
}
.phase--later {
  border-top-color: var(--stone-mid);
}

.phase:hover {
  transform: translateY(-4px);
}

.phase__status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone-dark);
  margin-bottom: 40px;
}

.phase__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.phase__dot--now {
  background: var(--sage-deep);
  box-shadow: 0 0 0 0 rgba(95, 115, 89, 0.5);
  animation: phasePulse 2.4s ease-out infinite;
}

.phase__dot--soon {
  background: var(--terracotta);
}
.phase__dot--later {
  background: var(--stone-mid);
}

@keyframes phasePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(95, 115, 89, 0.55);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(95, 115, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(95, 115, 89, 0);
  }
}

.phase__num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 56px;
  color: var(--terracotta);
  letter-spacing: -0.015em;
  line-height: 0.9;
  margin-bottom: 20px;
}

.phase__name {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 16px;
}

.phase__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.82;
  text-wrap: pretty;
}

.phases__footer {
  border-top: 1px solid rgba(139, 126, 110, 0.18);
  padding-top: 56px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
}

/* Tablet — 2 col phases */
@media (max-width: 1100px) and (min-width: 901px) {
  .phases__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.phases__feedback {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 32ch;
  text-wrap: balance;
}

.phases__feedback em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.phases__email {
  justify-self: end;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 4px;
  transition:
    color 0.3s ease,
    transform 0.3s ease;
  display: inline-block;
}

.phases__email:hover {
  color: var(--terracotta);
  transform: translateY(-2px);
}

/* ========== FOUNDER — bio + trust signal ========== */
.founder {
  padding: clamp(96px, 12vw, 160px) 48px;
  background: var(--bg-cream-warm);
  position: relative;
}

.founder__inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.founder__media {
  aspect-ratio: 4/5;
  background: var(--bg-cream);
  position: relative;
  overflow: visible;
}

.founder__media::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -24px;
  right: 24px;
  bottom: -24px;
  background: var(--sage-soft);
  z-index: 0;
  opacity: 0.4;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.founder__media::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: -10px;
  width: 88px;
  height: 88px;
  border-bottom: 1px solid var(--terracotta);
  border-left: 1px solid var(--terracotta);
  z-index: 2;
}

.founder__inner:hover .founder__media::before {
  transform: translate(-8px, 8px);
}

.founder__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--stone-light);
  z-index: 1;
  clip-path: inset(0);
  /* placeholder pattern until real photo */
  background-image: linear-gradient(
    135deg,
    var(--sage-soft) 0%,
    var(--bg-cream-warm) 50%,
    var(--stone-light) 100%
  );
}

.founder__content {
  max-width: 520px;
}

.founder__eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.founder__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--terracotta);
}

.founder__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 32px;
  text-wrap: balance;
}

.founder__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.founder__text {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  opacity: 0.88;
  margin-bottom: 20px;
  text-wrap: pretty;
  max-width: 42rem;
}

.founder__text:last-of-type {
  margin-bottom: 32px;
}

.founder__signature {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(139, 126, 110, 0.18);
}

.founder__name {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
}

.founder__role {
  font-size: 13px;
  color: var(--stone-dark);
  letter-spacing: 0.04em;
}

.founder__linkedin {
  margin-left: auto;
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--terracotta);
  padding-bottom: 2px;
  transition: color 0.3s ease;
}

.founder__linkedin:hover {
  color: var(--terracotta);
}

@media (max-width: 900px) {
  .founder {
    padding: 80px 24px;
  }
  .founder__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .founder__media {
    max-width: 320px;
    margin: 0 auto;
  }
  .founder__media::before {
    top: 16px;
    left: -16px;
    right: 16px;
    bottom: -16px;
  }
  .founder__media::after {
    width: 56px;
    height: 56px;
  }
  .founder__signature {
    flex-wrap: wrap;
    gap: 12px;
  }
  .founder__linkedin {
    margin-left: 0;
  }
}

/* ========== PACKAGES — editorial spreads ========== */
.packages {
  background: var(--bg-cream);
  padding: 40px 0 80px;
}

.packages__header {
  max-width: 1280px;
  margin: 0 auto 80px;
  padding: 0 48px;
}

.packages__eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.packages__eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--terracotta);
}

.packages__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 16ch;
  text-wrap: balance;
}

.packages__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--forest);
}

.package {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  border-bottom: 1px solid rgba(139, 126, 110, 0.18);
}

.package:last-of-type {
  border-bottom: none;
}

.package--reverse .package__content {
  order: 2;
}
.package--reverse .package__media {
  order: 1;
}

.package__media {
  aspect-ratio: 4/5;
  overflow: visible;
  background-color: transparent;
  position: relative;
}

/* Cream offset frame */
.package__media::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -20px;
  right: 20px;
  bottom: -20px;
  background: var(--bg-cream-warm);
  z-index: 0;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Terracotta corner accent — top-left for normal, top-right for reversed */
.package__media::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 72px;
  height: 72px;
  border-top: 1px solid var(--terracotta);
  border-left: 1px solid var(--terracotta);
  z-index: 2;
  pointer-events: none;
  transition:
    width 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    height 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Reverse layout: flip frame & accent to opposite side */
.package--reverse .package__media::before {
  left: 20px;
  right: -20px;
}

.package--reverse .package__media::after {
  left: auto;
  right: -10px;
  border-left: none;
  border-right: 1px solid var(--terracotta);
}

.package:hover .package__media::before {
  transform: translate(-6px, 6px);
}

.package--reverse:hover .package__media::before {
  transform: translate(6px, 6px);
}

.package:hover .package__media::after {
  width: 100px;
  height: 100px;
}

.package__media-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
  clip-path: inset(0);
}

.package:hover .package__media-img {
  transform: scale(1.04);
}

.package__number {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--terracotta);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.package__number::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--terracotta);
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.package:hover .package__number::after {
  width: 72px;
}

.package__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 12px;
  text-wrap: balance;
}

.package__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--sage-deep);
  transition: color 0.5s ease;
}

.package:hover .package__title em {
  color: var(--terracotta);
}

.package__duration {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 500;
  margin-bottom: 28px;
}

.package__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.85;
  margin-bottom: 28px;
  max-width: 48ch;
  text-wrap: pretty;
}

.package__locations {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-top: 1px solid rgba(139, 126, 110, 0.18);
  padding-top: 32px;
}

.package__loc-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package__loc-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.package__loc-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--stone-mid);
}

.package__loc-items {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.55;
  color: var(--sage-deep);
  letter-spacing: -0.015em;
  text-wrap: pretty;
}

.package__loc-items span {
  color: var(--stone-mid);
  font-style: normal;
  margin: 0 8px;
  font-weight: 400;
}

.package__more {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.package__more::before {
  content: "+";
  color: var(--terracotta);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  text-transform: none;
  line-height: 1;
}

/* Package footer — destinations count left + CTA right */
.package__footer {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(139, 126, 110, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ========== DIGITAL — QR coming soon teaser ========== */
.digital {
  background: var(--forest);
  color: var(--bg-cream);
  padding: clamp(100px, 12vw, 160px) 48px;
  position: relative;
  overflow: hidden;
}

.digital::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(214, 99, 74, 0.18) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.digital::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(143, 163, 134, 0.12) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.digital__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  align-items: center;
  position: relative;
}

.digital__media {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 480px;
}

/* QR code visual placeholder — abstract grid pattern */
.digital__qr {
  width: 100%;
  height: 100%;
  background: var(--bg-cream);
  border-radius: 8px;
  padding: 32px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-3deg);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

.digital__media:hover .digital__qr {
  transform: rotate(0deg) scale(1.02);
}

.digital__qr-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  width: 100%;
  aspect-ratio: 1/1;
}

.digital__qr-cell {
  background: var(--forest);
  border-radius: 1px;
}

.digital__qr-cell--off {
  background: transparent;
}

/* Decorative scan tag */
.digital__qr-tag {
  position: absolute;
  bottom: -16px;
  right: -16px;
  background: var(--terracotta);
  color: var(--bg-cream);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  transform: rotate(3deg);
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.32);
}

.digital__content {
  max-width: 520px;
}

.digital__eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta-soft);
  font-weight: 600;
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.digital__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--terracotta-soft);
}

.digital__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--bg-cream);
  margin-bottom: 32px;
  text-wrap: balance;
}

.digital__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--sage-soft);
}

.digital__desc {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(244, 239, 229, 0.78);
  margin-bottom: 36px;
  text-wrap: pretty;
}

.digital__features {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.digital__feature {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 15px;
  color: rgba(244, 239, 229, 0.88);
}

.digital__feature::before {
  content: "→";
  color: var(--terracotta-soft);
  font-style: italic;
  font-family: "Fraunces", serif;
  font-size: 18px;
  flex-shrink: 0;
}

.digital__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 32px);
  padding: 16px 32px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(183, 71, 42, 0.22);
  transition:
    background 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.digital__link:hover {
  background: #9a3b22;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(183, 71, 42, 0.32);
}

.digital__link:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(183, 71, 42, 0.22);
}

.digital__link span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.digital__link:hover span {
  transform: translateX(4px);
}

/* CTA row — primary filled button + secondary text link, side-by-side on
   desktop, stacked on narrow viewports. Visual hierarchy: filled button
   is the ONE primary action; text link is the alternative path. */
.digital__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: clamp(20px, 3vw, 32px);
}

.digital__cta-row .digital__link {
  margin-top: 0; /* reset: the row owns the top margin */
}

/* Secondary variant — text + arrow, cream color (on dark forest bg),
   underline-on-hover. No fill, no shadow, no terracotta. */
/* Secondary text CTA on dark section — matches the global text+arrow pattern
   (.routes-teaser__cta-secondary, .qrp-btn--secondary). Cream text on forest
   background; gap-grow hover; NO underline; NO opacity fade. */
.digital__link--secondary {
  background: transparent !important;
  color: var(--bg-cream) !important;
  padding: 0 !important;
  margin-top: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 8px;
  position: static;
  transition: color 0.3s ease, gap 0.3s ease;
}

.digital__link--secondary:hover,
.digital__link--secondary:active {
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  color: rgba(244, 239, 229, 0.78) !important;
  gap: 12px;
}

@media (max-width: 640px) {
  .digital__cta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .digital__link--secondary {
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .digital {
    padding: 80px 24px;
  }
  .digital__inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .digital__media {
    max-width: 320px;
    margin: 0 auto;
  }
  .digital__features {
    gap: 12px;
  }
}
.capture {
  background: var(--bg-cream-warm);
  padding: 180px 48px 200px;
  position: relative;
  overflow: hidden;
}

.capture::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(214, 99, 74, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.capture::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(95, 115, 89, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.capture__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.capture__eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 28px;
}

.capture__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(44px, 7vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 32px;
  text-wrap: balance;
}

.capture__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.capture__intro {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0 auto 56px;
  text-wrap: pretty;
}

.capture__form {
  max-width: 640px;
  margin: 0 auto 32px;
  background: var(--bg-cream);
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(15, 15, 14, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.capture__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.capture__field {
  position: relative;
  display: flex;
  flex-direction: column;
}

.capture__label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 600;
  margin-bottom: 8px;
  padding-left: 16px;
}

.capture__input,
.capture__select {
  background: rgba(244, 239, 229, 0.5);
  border: 1px solid rgba(139, 126, 110, 0.18);
  border-radius: 999px;
  padding: 14px 20px;
  font-family: inherit;
  /* 16px minimum on mobile prevents iOS auto-zoom on focus. */
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: all 0.3s ease;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.capture__select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7472A' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px;
  padding-right: 44px;
  cursor: pointer;
}

.capture__input:focus,
.capture__select:focus {
  border-color: var(--terracotta);
  background: var(--bg-cream);
  box-shadow: 0 0 0 3px rgba(183, 71, 42, 0.08);
}

.capture__input::placeholder {
  color: var(--stone-dark);
}

.capture__btn {
  background: var(--terracotta);
  color: var(--bg-cream);
  border: none;
  padding: 18px 32px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  margin-top: 8px;
}

.capture__btn:hover {
  background: #9a3b22;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.24);
}

.capture__btn:active {
  transform: translateY(0);
}

.capture__btn span {
  transition: transform 0.3s;
}
.capture__btn:hover span {
  transform: translateX(4px);
}

.capture__note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 80px;
  text-align: center;
}

/* ========== Capture: tourist / partner tabs ========== */
.capture__tabs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 32px;
  padding: 4px;
  border: 1px solid rgba(183, 71, 42, 0.32);
  border-radius: 999px;
  background: rgba(244, 239, 229, 0.4);
}
.capture__tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 28px;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  cursor: pointer;
  border-radius: 999px;
  transition:
    background 300ms ease,
    color 300ms ease;
  line-height: 1;
}
.capture__tab:hover,
.capture__tab:focus-visible {
  background: rgba(183, 71, 42, 0.08);
  color: var(--terracotta);
  outline: none;
}
.capture__tab.is-active {
  background: var(--terracotta);
  color: var(--bg-cream);
}
.capture__tab.is-active:hover {
  background: var(--terracotta);
}

/* Wrap the tabs in a centring container — they're inline-flex so the
     parent needs to be a flex/text-align centred block. */
.capture__inner .capture__tabs {
  align-self: center;
}
.capture__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.capture__inner > * {
  width: 100%;
}
.capture__inner > .capture__tabs {
  width: auto;
}

@media (max-width: 640px) {
  .capture__tab {
    padding: 10px 18px;
    font-size: 11px;
    letter-spacing: 0.14em;
  }
}

/* phases__subtitle — sits below the title in the section header */
.phases__subtitle {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 24px auto 0;
  text-wrap: balance;
}

.capture__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto clamp(40px, 5vw, 64px);
  font-size: 12px;
  color: var(--stone-dark);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
  max-width: 720px;
  padding: 32px 0;
  border-top: 1px solid rgba(139, 126, 110, 0.18);
  border-bottom: 1px solid rgba(139, 126, 110, 0.18);
}

.capture__trust > div {
  flex: 1;
  text-align: center;
  padding: 0 24px;
  position: relative;
}

.capture__trust > div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: rgba(139, 126, 110, 0.22);
}

.capture__trust strong {
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4vw, 48px);
  color: var(--forest);
  margin-bottom: 6px;
  letter-spacing: -0.015em;
  line-height: 1;
  transform: translateZ(0);
  transition: text-shadow 300ms ease-out;
  will-change: transform;
}

.capture__trust strong.is-bouncing {
  animation: countBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.capture__trust strong.is-glowing {
  text-shadow: 0 0 24px rgba(183, 71, 42, 0.55);
}

@keyframes countBounce {
  0% {
    transform: translateZ(0) scale(1);
  }
  35% {
    transform: translateZ(0) scale(1.15);
  }
  100% {
    transform: translateZ(0) scale(1);
  }
}

.capture__trust span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 600;
  transition: opacity 220ms ease;
}

.capture__trust span.is-fading {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .capture__trust strong.is-bouncing {
    animation: none;
  }
  .capture__trust strong.is-glowing {
    text-shadow: none;
  }
  .capture__trust strong {
    transition: none;
  }
  .capture__trust span {
    transition: opacity 120ms ease;
  }
}

.capture__success {
  display: none;
  text-align: center;
  padding: 32px 0;
}

.capture.is-submitted .capture__form,
.capture.is-submitted .capture__note {
  display: none;
}
/* Trust trio stays visible after submit so the counter bounce + label swap
     ("Ti si broj N. Hvala.") give the user immediate social-proof feedback. */

.capture.is-submitted .capture__success {
  display: block;
}

.capture__success-text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 24px;
  color: var(--sage-deep);
}

/* ========== FOOTER — minimal ========== */
.foot {
  background: var(--bg-cream);
  padding: 0;
}

.foot__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px 32px;
}

/* Philosophy strip — 3 numbered values */
.foot__philosophy {
  padding: 96px 0 80px;
  border-top: 1px solid rgba(139, 126, 110, 0.12);
  border-bottom: 1px solid rgba(139, 126, 110, 0.12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}

.foot__phil {
  text-align: left;
  padding: 0 32px;
  position: relative;
}

.foot__phil:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 80px;
  background: rgba(139, 126, 110, 0.16);
}

.foot__phil:first-child {
  padding-left: 0;
}

.foot__phil:last-child {
  padding-right: 0;
}

.foot__phil-num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--terracotta);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.foot__phil-num::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--terracotta);
  transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.foot__phil:hover .foot__phil-num::after {
  width: 56px;
}

.foot__phil-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
  margin-bottom: 16px;
}

.foot__phil-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--sage-deep);
}

.foot__phil-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.78;
  max-width: 28ch;
  text-wrap: pretty;
}

/* Newsletter duplicate */
.foot__newsletter {
  padding: 80px 0;
  border-bottom: 1px solid rgba(139, 126, 110, 0.12);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.foot__news-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.foot__news-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--terracotta);
}

.foot__news-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.foot__news-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

.foot__news-form {
  display: flex;
  gap: 8px;
  background: var(--bg-cream-warm);
  padding: 8px;
  border-radius: 999px;
}

.foot__news-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 16px 22px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}

.foot__news-input::placeholder {
  color: var(--stone-dark);
}

.foot__news-btn {
  background: var(--terracotta);
  color: var(--bg-cream);
  border: none;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.foot__news-btn:hover {
  background: #9a3b22;
}

.foot__news-success {
  display: none;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--sage-deep);
  padding: 16px 0;
}

.foot__news-success.is-shown {
  display: block;
}

/* Partners CTA strip */
.foot__partners {
  padding: 56px 0;
  border-bottom: 1px solid rgba(139, 126, 110, 0.12);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
}

.foot__partners-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sage-deep);
  font-weight: 600;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.foot__partners-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--sage-deep);
}

.foot__partners-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
  text-wrap: balance;
}

.foot__partners-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--sage-deep);
}

.foot__partners-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0.78;
  max-width: 52ch;
}

.foot__partners-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 20px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--sage-deep);
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

.foot__partners-cta:hover {
  color: var(--sage-deep);
}

.foot__partners-cta span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.foot__partners-cta:hover span {
  transform: translateX(6px);
}

/* Main brand row */
.foot__main {
  padding: 80px 0 56px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 80px;
  align-items: start;
  border-bottom: 1px solid rgba(139, 126, 110, 0.12);
}

.foot__brand {
  max-width: 420px;
}

.foot__logo-link {
  display: inline-block;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s ease;
}

.foot__logo-link:hover {
  opacity: 0.78;
}

.foot__logo-img {
  width: 180px;
  height: auto;
  display: block;
  margin-bottom: 24px;
}

.foot__tagline {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0;
  max-width: 24ch;
}

.foot__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Last column (Pratite nas) aligns right to container edge */
.foot__main > .foot__col:last-child {
  align-items: flex-end;
  text-align: right;
}

.foot__col-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 600;
  margin-bottom: 8px;
}

.foot__col a,
.foot__col p {
  font-family: "Geist", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}

.foot__col a:hover {
  color: var(--terracotta);
}

.foot__col-email {
  font-family: "Fraunces", serif !important;
  font-size: 18px !important;
  font-style: italic;
}

.foot__col-partners-block {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(139, 126, 110, 0.12);
}

.foot__col-partners-text {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  opacity: 0.75;
  margin-bottom: 10px;
  max-width: 26ch;
}

.foot__col-partners {
  font-size: 13px !important;
  color: var(--sage-deep) !important;
  letter-spacing: 0.02em;
  font-weight: 500;
  transition: all 0.3s ease;
}

.foot__col-partners:hover {
  color: var(--terracotta) !important;
}

/* Bottom row */
.foot__bottom {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12px;
  color: var(--stone-dark);
}

.foot__bottom-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.foot__heart em {
  color: var(--terracotta);
  font-style: italic;
  font-family: "Fraunces", serif;
}

.foot__bottom a {
  color: var(--stone-dark);
  text-decoration: none;
  transition: color 0.2s;
}

.foot__bottom a:hover {
  color: var(--terracotta);
}

.foot__socials {
  display: flex;
  gap: 20px;
}

/* ========== GDPR Cookie Banner ========== */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 520px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--bg-cream);
  padding: 24px 28px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transform: translateY(120%);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  font-size: 14px;
  line-height: 1.55;
}

.cookie-banner.is-shown {
  transform: translateY(0);
}

.cookie-banner__text {
  margin-bottom: 16px;
  color: rgba(244, 239, 229, 0.85);
}

.cookie-banner__text a {
  color: var(--terracotta-soft);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
}

.cookie-banner__btn {
  border: none;
  padding: 10px 20px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
}

.cookie-banner__btn--accept {
  background: var(--terracotta);
  color: var(--bg-cream);
}

.cookie-banner__btn--accept:hover {
  background: var(--terracotta-soft);
}

.cookie-banner__btn--decline {
  background: transparent;
  color: var(--bg-cream);
  border: 1px solid rgba(244, 239, 229, 0.3);
}

.cookie-banner__btn--decline:hover {
  border-color: rgba(244, 239, 229, 0.6);
}

@media (max-width: 600px) {
  .cookie-banner {
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 20px;
  }
}

/* ========== Scroll reveals ========== */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== Mobile ========== */
@media (max-width: 900px) {
  .nav {
    padding: 20px 24px;
  }
  .nav.scrolled {
    padding: 14px 24px;
  }
  .nav__logo-img {
    height: 56px;
  }
  .nav.scrolled .nav__logo-img {
    height: 44px;
  }
  .nav__status {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .hero__content {
    /* Bottom padding pushes content above the slider stack:
       indicators are at bottom:64px (counter + dots ~50px tall),
       photo-credit at bottom:28px. 140px clears both with breathing room. */
    padding: 0 24px 140px;
  }
  .hero__eyebrow {
    margin-bottom: 28px;
    font-size: 10px;
  }
  .hero__title {
    margin-bottom: 24px;
  }
  .hero__sub {
    margin-bottom: 40px;
  }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .hero__cta-btn {
    justify-content: center;
  }
  .hero__cta-text {
    text-align: center;
    max-width: none;
  }

  .hero__indicators {
    bottom: 28px;
    right: auto;
    left: 24px;
    flex-direction: row;
    gap: 8px;
  }
  .hero__dot {
    width: 20px;
  }
  .hero__dot.is-active {
    width: 32px;
  }
  /* Touch target ≥44px tall — invisible halo around the 1px progress bar */
  .hero__dot::before {
    top: -22px;
    bottom: -22px;
  }
  .hero__photo-credit {
    bottom: 18px;
    right: 24px;
  }

  .intro {
    padding: 96px 24px;
  }
  .intro__eyebrow {
    margin-bottom: 40px;
  }
  .intro__statement {
    margin-bottom: 40px;
  }
  .intro__details {
    grid-template-columns: 1fr;
    gap: 56px;
    margin-top: 80px;
  }
  .intro__details-content {
    padding-right: 0;
  }
  .intro__details-media::before {
    top: 16px;
    left: -16px;
    right: 16px;
    bottom: -16px;
  }
  .intro__details-media::after {
    width: 56px;
    height: 56px;
  }

  .intro__services {
    margin-top: 0;
    padding-top: clamp(40px, 8vw, 56px);
  }
  .intro__services-header {
    margin-bottom: clamp(28px, 6vw, 40px);
  }
  .intro__services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .intro__service {
    padding: 32px 28px;
  }

  .phases {
    padding: 80px 24px;
  }
  .phases__header {
    margin-bottom: 56px;
  }
  .phases__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 64px;
  }
  .phase {
    padding: 36px 28px 32px;
  }
  .phase__status {
    margin-bottom: 28px;
  }
  .phase__num {
    font-size: 44px;
    margin-bottom: 16px;
  }
  .phases__footer {
    grid-template-columns: 1fr;
    padding-top: 40px;
    gap: 24px;
  }
  .phases__email {
    justify-self: start;
  }

  .packages__header {
    padding: 0 24px;
    margin-bottom: 48px;
  }

  .packages__footer {
    margin: 56px auto 0;
    padding: 40px 24px 0;
  }

  .package {
    grid-template-columns: 1fr;
    gap: 56px;
    padding: 56px 24px;
  }

  .package--reverse .package__content {
    order: 2;
  }
  .package--reverse .package__media {
    order: 1;
  }

  .package__media::before {
    top: 14px;
    left: -14px;
    right: 14px;
    bottom: -14px;
  }
  .package--reverse .package__media::before {
    left: 14px;
    right: -14px;
  }
  .package__media::after {
    width: 48px;
    height: 48px;
  }

  .capture {
    padding: 96px 24px 100px;
  }
  .capture__form {
    padding: 20px;
    border-radius: 12px;
  }
  .capture__field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .capture__input,
  .capture__select {
    padding: 14px 18px;
  }
  .capture__btn {
    justify-content: center;
    padding: 16px 24px;
  }
  .capture__trust {
    flex-direction: column;
    padding: 32px 0;
    gap: 0;
  }
  .capture__trust > div {
    padding: 16px 24px;
    width: 100%;
  }
  .capture__trust > div:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 32px;
    height: 1px;
  }

  .foot {
    padding: 0 0 32px;
  }
  .foot__inner {
    padding: 0 24px;
  }

  .foot__philosophy {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px 0 56px;
  }
  .foot__phil {
    padding: 0;
  }
  .foot__phil:not(:last-child)::after {
    display: none;
  }

  .foot__newsletter {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 56px 0;
  }

  .foot__main {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 0 40px;
  }

  /* Reset desktop right-alignment of the last column (.foot__col--social)
     on mobile/tablet — when columns stack vertically, having the last one
     right-aligned while the others are left creates an asymmetric look. */
  .foot__main > .foot__col:last-child {
    align-items: flex-start;
    text-align: left;
  }

  .foot__bottom {
    flex-direction: column;
    gap: 12px;
  }
}

/* Tablet portrait sweet spot — 601-900px: brand stretches full width,
   Contact + Social sit side-by-side on the row below. Cleaner than a
   single tall stack; uses tablet horizontal real estate properly. */
@media (min-width: 601px) and (max-width: 900px) {
  .foot__main {
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
  }
  .foot__main > .foot__brand {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
}

/* ========== Hero tagline below CTA ========== */
.hero__tagline {
  margin: 28px 0 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(14px, 1.3vw, 17px);
  color: var(--sage-deep);
  letter-spacing: 0.01em;
  max-width: 48ch;
  text-wrap: balance;
}
.hero .hero__tagline {
  color: rgba(244, 239, 229, 0.78); /* over the dark hero overlay */
}

/* ========== "Šta je Soul of Bosnia" — editorial manifesto block ========== */
.shta {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 32px 100px;
  text-align: left;
}
.shta__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 24px;
}
.shta__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin-bottom: 40px;
  text-wrap: balance;
}
.shta__title em {
  font-style: italic;
  color: var(--terracotta);
}
.shta__body p {
  font-family: "Fraunces", serif;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 42rem;
}
.shta__body p:last-child {
  margin-bottom: 0;
}
.shta__body em {
  font-style: italic;
  color: var(--terracotta);
}
@media (max-width: 640px) {
  .shta {
    padding: 80px 24px 60px;
  }
}

/* ========== Pillars — 3 platform pillars (Discover/Experience/QR) ========== */
.pillars {
  background: var(--bg-cream-warm);
  padding: 120px 0 100px;
}
.pillars__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}
.pillars__header {
  text-align: center;
  margin-bottom: 72px;
}
.pillars__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 20px;
}
.pillars__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin: 0 auto;
  max-width: 14ch;
  text-wrap: balance;
}
.pillars__title em {
  font-style: italic;
  color: var(--terracotta);
}
.pillars__subtitle {
  margin: 24px auto 0;
  max-width: 56ch;
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: balance;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.pillar {
  background: var(--bg-cream);
  padding: clamp(28px, 3vw, 40px) 32px 40px;
  border-radius: 4px;
  border: 1px solid rgba(139, 126, 110, 0.16);
}
.pillar__eyebrow {
  display: inline-block;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid rgba(183, 71, 42, 0.32);
  border-radius: 999px;
  margin-bottom: 20px;
}
.pillar__num {
  font-family: "Fraunces", serif;
  font-size: 13px;
  color: var(--stone-mid);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.pillar__name {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.05;
  color: var(--forest);
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.pillar__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}
.pillars__footer {
  margin: 56px auto 0;
  max-width: 60ch;
  text-align: center;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--stone-dark);
}
@media (max-width: 900px) {
  .pillars__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .pillars__inner {
    padding: 0 24px;
  }
}

/* ========== Packages: simplified destinations list ========== */
.package__destinations {
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid rgba(139, 126, 110, 0.18);
  border-bottom: 1px solid rgba(139, 126, 110, 0.18);
}
.package__destinations-list {
  font-family: "Geist", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--forest);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.package__destinations-more {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--stone-dark);
}
.packages__section-footer {
  margin: 80px auto 0;
  max-width: 56ch;
  text-align: center;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--stone-dark);
  text-wrap: balance;
}

/* ========== Audiences — Tourists / Partners / Cities ========== */
.audiences {
  padding: 60px 0 100px;
}
.audiences__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}
.audiences__header {
  text-align: center;
  margin-bottom: 72px;
}
.audiences__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 20px;
}
.audiences__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin: 0 auto;
  max-width: 18ch;
  text-wrap: balance;
}
.audiences__title em {
  font-style: italic;
  color: var(--terracotta);
}
.audiences__subtitle {
  margin: 24px auto 0;
  max-width: 56ch;
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: balance;
}
.audiences__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.audience {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  border-radius: 6px;
  background: var(--bg-cream-warm);
  border: 1px solid rgba(139, 126, 110, 0.18);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.audience:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 15, 14, 0.08);
}
.audience--travelers {
  border-left: 3px solid var(--terracotta);
}
.audience--travelers:hover {
  border-color: var(--terracotta);
}
.audience--partners {
  border-left: 3px solid var(--sage-deep);
}
.audience--partners:hover {
  border-color: var(--sage-deep);
}
.audience--cities {
  border-left: 3px solid var(--forest);
}
.audience--cities:hover {
  border-color: var(--forest);
}

.audience__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  color: var(--forest);
}
.audience__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.audience--travelers .audience__icon {
  color: var(--terracotta);
}
.audience--partners .audience__icon {
  color: var(--sage-deep);
}
.audience--cities .audience__icon {
  color: var(--forest);
}

.audience__name {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--forest);
  margin-bottom: 18px;
  letter-spacing: -0.015em;
}
.audience__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.audience__subnote {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--stone-dark);
  margin-bottom: 24px;
}
.audience__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--terracotta);
  transition: gap 0.3s ease;
}
.audience--partners .audience__cta {
  color: var(--sage-deep);
}
.audience--cities .audience__cta {
  color: var(--forest);
}
.audience:hover .audience__cta {
  gap: 14px;
}
@media (max-width: 900px) {
  .audiences__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .audiences__inner {
    padding: 0 24px;
  }
}

/* ========== Capture: single-form field row variant ========== */
.capture__field-row--single {
  grid-template-columns: 1fr;
}

/* ========== Footer tagline split (line + small uppercase badge) ========== */
.foot__tagline {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--stone-dark);
  margin: 0 0 12px;
  max-width: 28ch;
}
.foot__tagline-badge {
  display: inline-block;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* =====================================================================
     Pillars: SVG icons, dark variant for card 3, sophisticated hover
     ===================================================================== */

.pillar {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    background 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Top-accent line that grows on hover (light cards only). */
.pillar:not(.pillar--dark)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 32px;
  background: var(--terracotta);
  transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.pillar:not(.pillar--dark):hover::after {
  width: 100%;
}

/* Radial wash from top-right on hover (light cards). */
.pillar:not(.pillar--dark)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top right,
    rgba(183, 71, 42, 0.06) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
.pillar:not(.pillar--dark):hover::before {
  opacity: 1;
}

.pillar:not(.pillar--dark):hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(15, 15, 14, 0.08);
}
.pillar:not(.pillar--dark):hover .pillar__name {
  transform: translateX(-4px);
}

.pillar__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 24px;
  color: var(--terracotta);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.pillar__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pillar:hover .pillar__icon {
  transform: scale(1.1) rotate(-3deg);
}
.pillar__name {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---- Dark variant: card 3 (Skeniraj / QR vodiči) -------------------- */
.pillar--dark {
  background: var(--forest);
  border: 1px solid var(--forest-deep);
  color: var(--bg-cream);
  position: relative;
}
.pillar--dark .pillar__num {
  color: rgba(244, 239, 229, 0.5);
}
.pillar--dark .pillar__name {
  color: var(--bg-cream);
}
.pillar--dark .pillar__desc {
  color: rgba(244, 239, 229, 0.92);
}
.pillar--dark .pillar__icon {
  color: var(--terracotta-soft);
}

.pillar__eyebrow--pulse {
  background: rgba(214, 99, 74, 0.16);
  border-color: rgba(214, 99, 74, 0.5);
  color: var(--terracotta-soft);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.pillar__pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta-soft);
  animation: pillarPulse 1.5s ease-in-out infinite;
}
@keyframes pillarPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.55;
  }
}

/* Decorative QR grid in top-right corner of dark card. */
.pillar__qr-deco {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 56px;
  height: 56px;
  background-image:
    linear-gradient(rgba(244, 239, 229, 0.45) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244, 239, 229, 0.45) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.5;
  transform: rotate(0deg);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
.pillar--dark:hover .pillar__qr-deco {
  transform: rotate(3deg);
}
.pillar--dark:hover .pillar__pulse-dot {
  animation-duration: 1s;
}
.pillar--dark:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(20, 60, 46, 0.28);
}

/* Suptilan scroll-down cue u uglu kartice "Skeniraj" — bez teksta,
     samo signal "ima još dolje" prema velikoj QR sekciji. */
.pillar__scroll-hint {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: inline-flex;
  color: var(--terracotta);
  opacity: 0.45;
  pointer-events: none;
  animation: pillarScrollHint 3s ease-in-out infinite;
}
@keyframes pillarScrollHint {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  50% {
    transform: translateY(4px);
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pillar__scroll-hint {
    animation: none;
    opacity: 0.6;
  }
}

/* =====================================================================
     Stagger reveal — pillars + audience cards fade-up in sequence
     ===================================================================== */

.stagger-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.stagger-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Per-position delays inside each 3-card grid (works for both pillars + audiences). */
.pillars__grid > .stagger-reveal:nth-child(1),
.audiences__grid > .stagger-reveal:nth-child(1) {
  transition-delay: 0ms;
}
.pillars__grid > .stagger-reveal:nth-child(2),
.audiences__grid > .stagger-reveal:nth-child(2) {
  transition-delay: 150ms;
}
.pillars__grid > .stagger-reveal:nth-child(3),
.audiences__grid > .stagger-reveal:nth-child(3) {
  transition-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .stagger-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================================
     Audience cards — sophisticated hover (lift, pulse bar, CTA arrow + underline)
     ===================================================================== */

.audience {
  position: relative;
  overflow: hidden;
}
/* Replace the static left border-left with a vertical bar pseudo-element
     we can animate to 8px wide + scaleY pulse on hover. */
.audience--travelers {
  border-left: 0;
}
.audience--partners {
  border-left: 0;
}
.audience--cities {
  border-left: 0;
}
.audience::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  transition: width 0.4s ease;
  transform-origin: center;
}
.audience--travelers::before {
  background: var(--terracotta);
}
.audience--partners::before {
  background: var(--sage-deep);
}
.audience--cities::before {
  background: var(--forest);
}
.audience:hover::before {
  width: 8px;
  animation: audiencePulse 1s ease-in-out infinite;
}
@keyframes audiencePulse {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.05);
  }
}

/* Subtle category-tinted overlay on hover. */
.audience::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.audience--travelers::after {
  background: rgba(183, 71, 42, 0.03);
}
.audience--partners::after {
  background: rgba(143, 163, 134, 0.04);
}
.audience--cities::after {
  background: rgba(20, 60, 46, 0.03);
}
.audience:hover::after {
  opacity: 1;
}

.audience:hover {
  transform: translateY(-6px);
  background: var(--bg-cream);
  box-shadow: 0 12px 32px rgba(15, 15, 14, 0.08);
}

/* CTA arrow + underline micro-interaction (overrides earlier gap-only rule). */
.audience__cta {
  position: relative;
  padding-bottom: 4px;
}
.audience__cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
.audience:hover .audience__cta::after {
  width: 100%;
}
.audience__cta > span:last-child {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.audience:hover .audience__cta > span:last-child {
  transform: translateX(8px);
}
/* Cancel the earlier gap-only rule since we now animate via translate. */
.audience:hover .audience__cta {
  gap: 10px;
}

/* =====================================================================
     Section dividers — editorial · · · between major blocks
     ===================================================================== */
.section-divider {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(60px, 8vw, 100px) 0;
  font-family: "Fraunces", serif;
  font-size: 14px;
  letter-spacing: 0.5em;
  color: var(--terracotta);
  opacity: 0.4;
  user-select: none;
}

/* Shared bounce — used by .places-cinematic__hint */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* =====================================================================
     Package rotating image carousel
     ===================================================================== */
.package__media {
  position: relative;
  overflow: hidden;
}
.package__slides {
  position: absolute;
  inset: 0;
}
.package__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.package__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 6s ease-out;
  will-change: transform;
}
.package__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.package__slide.is-active img {
  transform: translate3d(0, 0, 0) scale(1.05);
}
.package__indicators {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.package__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(244, 239, 229, 0.45);
  transition:
    background 0.3s ease,
    width 0.3s ease,
    border-radius 0.3s ease;
}
.package__dot.is-active {
  background: var(--terracotta);
  width: 24px;
  border-radius: 999px;
}

/* =====================================================================
     PLACES — cinematic showcase (6 lake frames)
     ===================================================================== */
.places-cinematic {
  position: relative;
  background: var(--bg-cream-warm);
}
.places-cinematic__intro {
  text-align: center;
  padding: clamp(96px, 14vw, 180px) clamp(24px, 6vw, 80px);
  max-width: 800px;
  margin: 0 auto;
}
.places-cinematic__eyebrow {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 24px;
}
.places-cinematic__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--forest);
  text-wrap: balance;
  margin: 0 auto 28px;
  max-width: 18ch;
}
.places-cinematic__title em {
  font-style: italic;
  color: var(--terracotta);
}
.places-cinematic__lead {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}
.places-cinematic__hint {
  display: block;
  margin-top: 56px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--terracotta);
  opacity: 0.7;
  animation: scrollBounce 2s ease-in-out infinite;
}

.places-cinematic__frames {
  /* No scroll-snap by default — would interfere with whole-page scrolling.
       The user can scroll naturally; frames animate on intersection. */
}

.frame {
  position: relative;
  height: 70vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.frame--reversed {
  direction: rtl;
}
.frame--reversed > * {
  direction: ltr;
}

.frame__media {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.frame__media picture {
  display: block;
  height: 100%;
  width: 100%;
}
.frame__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.frame.in-view .frame__image {
  transform: scale(1.12);
}

.frame__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(40px, 6vw, 80px);
  pointer-events: none;
  z-index: 2;
}
.frame--reversed .frame__overlay {
  justify-content: flex-end;
}

.frame__hero-text {
  font-family: "Fraunces", serif;
  font-weight: 200;
  font-style: italic;
  font-size: clamp(72px, 12vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--bg-cream);
  mix-blend-mode: overlay;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
  transform: translateY(40px);
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 1.2s ease;
  transition-delay: 0.3s;
}
.frame.in-view .frame__hero-text {
  transform: translateY(0);
  opacity: 0.95;
}

.frame__detail {
  background: var(--bg-cream);
  padding: clamp(48px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 3;
  border-left: 4px solid var(--tint-color, var(--terracotta));
  transform: translateX(40px);
  opacity: 0;
  transition:
    transform 1s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 1s ease;
  transition-delay: 0.5s;
}
.frame--reversed .frame__detail {
  border-left: 0;
  border-right: 4px solid var(--tint-color, var(--terracotta));
  transform: translateX(-40px);
}
.frame.in-view .frame__detail {
  transform: translateX(0);
  opacity: 1;
}

.frame__index {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone-dark);
  display: block;
  margin-bottom: 24px;
}
.frame__name {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 500;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.frame__type {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  color: var(--tint-color, var(--terracotta));
  display: block;
  margin-bottom: 40px;
}
.frame__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  margin: 0 0 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(15, 15, 14, 0.08);
}
.frame__facts > div {
  display: flex;
  flex-direction: column;
}
.frame__facts dt {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-dark);
  margin-bottom: 6px;
}
.frame__facts dd {
  font-family: "Fraunces", serif;
  font-size: 18px;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
}
.frame__quote {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  padding-left: 16px;
  border-left: 2px solid var(--tint-color, var(--terracotta));
}

.frame[data-tint="forest"] {
  --tint-color: #143c2e;
}
.frame[data-tint="sage"] {
  --tint-color: #6b8770;
}
.frame[data-tint="stone-blue"] {
  --tint-color: #5a7080;
}
.frame[data-tint="terracotta"] {
  --tint-color: #b7472a;
}
.frame[data-tint="ocean-teal"] {
  --tint-color: #2d5a5e;
}
.frame[data-tint="midnight"] {
  --tint-color: #1a2a3a;
}

.places-cinematic__outro {
  text-align: center;
  padding: clamp(80px, 10vw, 140px) clamp(24px, 6vw, 80px);
  max-width: 720px;
  margin: 0 auto;
}
.places-cinematic__outro p {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  color: var(--ink-soft);
  margin-bottom: 32px;
  line-height: 1.55;
}
.places-cinematic__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--terracotta);
  color: var(--bg-cream);
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-decoration: none;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}
.places-cinematic__cta:hover {
  transform: translateY(-2px);
  background: #9a3b22;
}

/* Mobile: stack frame as image-on-top, detail-below */
@media (max-width: 768px) {
  .frame {
    grid-template-columns: 1fr;
    grid-template-rows: 56vh auto;
    height: auto;
    min-height: auto;
  }
  .frame--reversed {
    direction: ltr;
  }
  .frame__hero-text {
    font-size: clamp(56px, 18vw, 110px);
  }
  .frame__detail {
    padding: 40px 24px;
    transform: translateY(40px);
  }
  .frame--reversed .frame__detail {
    transform: translateY(40px);
    border-right: 0;
    border-left: 4px solid var(--tint-color, var(--terracotta));
  }
  .frame.in-view .frame__detail {
    transform: translateY(0);
  }
  .frame__facts {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Stagger pillars/audiences existing rules — extend to services 6-card grid */
.intro__services-grid > .stagger-reveal:nth-child(1) {
  transition-delay: 0ms;
}
.intro__services-grid > .stagger-reveal:nth-child(2) {
  transition-delay: 100ms;
}
.intro__services-grid > .stagger-reveal:nth-child(3) {
  transition-delay: 200ms;
}
.intro__services-grid > .stagger-reveal:nth-child(4) {
  transition-delay: 300ms;
}
.intro__services-grid > .stagger-reveal:nth-child(5) {
  transition-delay: 400ms;
}
.intro__services-grid > .stagger-reveal:nth-child(6) {
  transition-delay: 500ms;
}

/* =====================================================================
     Hero tagline — terracotta mark line + italic pull-quote (override .hero__tagline)
     ===================================================================== */
.hero__tagline {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 32px;
  max-width: 520px;
  color: rgba(244, 239, 229, 0.85);
}
.hero__tagline-mark {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--terracotta);
  margin-top: 14px;
  flex-shrink: 0;
  animation: taglinePulse 3s ease-in-out infinite;
}
@keyframes taglinePulse {
  0%,
  100% {
    width: 32px;
    opacity: 1;
  }
  50% {
    width: 48px;
    opacity: 0.7;
  }
}
.hero__tagline p {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: inherit;
  letter-spacing: 0.01em;
  margin: 0;
  max-width: none; /* unset previous tagline max-width */
}
@media (prefers-reduced-motion: reduce) {
  .hero__tagline-mark {
    animation: none;
  }
}

/* =====================================================================
     Manifest section — 2-column with animated abstract lines
     ===================================================================== */
.manifest {
  position: relative;
  padding: clamp(96px, 12vw, 160px) clamp(24px, 6vw, 80px);
  background: var(--bg-cream);
  overflow: hidden;
}
.manifest__pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.manifest__line {
  position: absolute;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(143, 163, 134, 0.4) 20%,
    rgba(143, 163, 134, 0.4) 80%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: lineFloat 12s ease-in-out infinite;
  will-change: transform, opacity;
}
.manifest__line--1 {
  top: 15%;
  left: -20%;
  width: 60%;
  animation-delay: 0s;
}
.manifest__line--2 {
  top: 32%;
  left: 30%;
  width: 45%;
  animation-delay: 2s;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(183, 71, 42, 0.25) 50%,
    transparent 100%
  );
}
.manifest__line--3 {
  top: 55%;
  left: -10%;
  width: 70%;
  animation-delay: 4s;
}
.manifest__line--4 {
  top: 72%;
  left: 20%;
  width: 55%;
  animation-delay: 6s;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(20, 60, 46, 0.2) 50%,
    transparent 100%
  );
}
.manifest__line--5 {
  top: 88%;
  left: 40%;
  width: 50%;
  animation-delay: 8s;
}
@keyframes lineFloat {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .manifest__line {
    animation: none;
    opacity: 0;
  }
}

.manifest__wrapper {
  max-width: 1200px;
  margin: 0 auto;
  /* Horizontal padding mirrors the canonical inner-wrapper pattern used by
     .brand-moment__inner — section itself has no horizontal padding (per
     the canonical override at end of file) so the wrapper has to gutter
     content on small viewports. Without this, manifest text touches the
     viewport edge on mobile. */
  padding: 0 clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: clamp(48px, 6vw, 96px);
  position: relative;
  z-index: 2;
}
.manifest__meta {
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding-top: 80px;
  border-top: 1px solid rgba(15, 15, 14, 0.1);
}
.manifest__meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.manifest__meta-label {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
}
.manifest__meta-value {
  font-family: "Fraunces", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
.manifest__eyebrow {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 16px;
}
.manifest__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--forest);
  margin: 0 0 64px;
  text-wrap: balance;
}
.manifest__title em {
  color: var(--terracotta);
  font-style: italic;
}
.manifest__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 680px;
}
.manifest__paragraph {
  font-family: "Fraunces", serif;
  font-weight: 350;
  font-size: 18px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0;
  padding-left: 0;
  max-width: 42rem;
}
/* Legacy bullet mark — hidden in case stale markup ships from a cache */
.manifest__paragraph-mark {
  display: none;
}
.manifest__paragraph em {
  font-style: italic;
  color: var(--terracotta);
}
@media (max-width: 768px) {
  .manifest__wrapper {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .manifest__meta {
    padding-top: 32px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }
  .manifest__meta-item {
    min-width: 140px;
  }
}

/* =====================================================================
     Pillar 3 "Dolazi uskoro" badge
     ===================================================================== */
.pillar__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 4px 12px;
  border: 1px solid rgba(244, 239, 229, 0.3);
  border-radius: 999px;
  background: rgba(244, 239, 229, 0.05);
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.7);
}
.pillar__badge svg {
  color: var(--terracotta);
  opacity: 0.85;
}

/* =====================================================================
     Services — softer gradient bg, tighter padding (Izmjena 4)
     ===================================================================== */
.intro__services {
  padding: clamp(72px, 8vw, 120px) clamp(24px, 6vw, 80px);
  background: linear-gradient(
    180deg,
    var(--bg-cream) 0%,
    var(--bg-cream-warm) 100%
  );
}

/* =====================================================================
     Packages — editorial L/R alternating + floating tag + big title + CTA line
     ===================================================================== */
.package--editorial {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(80px, 10vw, 160px);
  /* Override the older `.package` flex layout that may apply. */
  flex-direction: unset;
}
.package--editorial:nth-of-type(even) {
  direction: rtl;
}
.package--editorial:nth-of-type(even) > * {
  direction: ltr;
}

.package__media-wrapper {
  position: relative;
}
.package--editorial .package__media {
  position: relative;
  aspect-ratio: 5/6;
  overflow: hidden;
}
.package--editorial .package__slide img {
  transition: transform 6s cubic-bezier(0.4, 0, 0.2, 1);
}
.package--editorial:hover .package__slide.is-active img {
  transform: translate3d(0, 0, 0) scale(1.06);
}

.package__floating-tag {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: rgba(244, 239, 229, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 999px;
  z-index: 3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.package__floating-days,
.package__floating-stops {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}
.package__floating-sep {
  color: var(--terracotta);
  font-size: 16px;
}

.package--editorial .package__content {
  display: flex;
  flex-direction: column;
  /* Override older padding that boxed content. */
  padding: 0;
}
.package__index {
  font-family: "Geist", sans-serif;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: var(--stone-dark);
  margin-bottom: 24px;
}
.package--editorial .package__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
}
.package--editorial .package__title em {
  color: var(--terracotta);
  font-style: italic;
}
.package__description {
  font-family: "Geist", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 40px;
  max-width: 480px;
}
.package--editorial .package__destinations {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(15, 15, 14, 0.1);
  border-top: 0;
}
.package__destinations-label {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone-dark);
  margin-bottom: 12px;
}
.package--editorial .package__destinations-list {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 768px) {
  .package--editorial {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .package--editorial:nth-of-type(even) {
    direction: ltr;
  }
  .package--editorial .package__title {
    font-size: clamp(36px, 9vw, 56px);
  }
}

/* =====================================================================
     Cinematic frame restructure — remove hero-text overlay, add category
     ===================================================================== */
/* Hide the old overlay markup if it still renders. */
.frame__overlay {
  display: none !important;
}
.frame__hero-text {
  display: none !important;
}
.frame__quote {
  display: none !important;
}

/* Category label sits over the image — terracotta pill with subtle dark
     backdrop so it's legible regardless of how bright the photo is. */
.frame__category {
  position: absolute;
  top: clamp(32px, 4vw, 56px);
  left: clamp(32px, 4vw, 56px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  padding: 8px 16px;
  background: rgba(15, 15, 14, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(183, 71, 42, 0.4);
  border-radius: 999px;
  transform: translateY(-20px);
  opacity: 0;
  transition:
    transform 1s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 1s ease;
  transition-delay: 0.4s;
}
.frame.in-view .frame__category {
  transform: translateY(0);
  opacity: 1;
}
.frame__category-line {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--terracotta);
  opacity: 0.9;
}
.frame__category-text {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bg-cream);
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.frame--reversed .frame__category {
  left: auto;
  right: clamp(32px, 4vw, 56px);
  flex-direction: row-reverse;
}

.frame__fact-box {
  margin-top: clamp(28px, 3vw, 40px);
  padding: 24px 28px;
  background: rgba(183, 71, 42, 0.04);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 4px 4px 0;
}
.frame__fact-label {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 12px;
}
.frame__fact-text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* =====================================================================
     Capture → Digital — color contrast as transition (no divider)
     ===================================================================== */
.capture {
  padding-bottom: clamp(56px, 7vw, 100px);
  background: var(--bg-cream-warm);
}
.digital {
  padding-top: clamp(56px, 7vw, 100px);
}

/* (Canonical section padding lives at the end of this file — see the
   "CANONICAL SECTION PADDING" block at the bottom, after all later
   section additions, so it wins on CSS source-order specificity.) */

/* Old animated lines pattern — disable cleanly in case any leftover markup
     still ships. New manifest uses .manifest__river SVG instead. */
.manifest__pattern,
.manifest__line {
  display: none !important;
}
.manifest__river {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: auto;
  transform: translate(-50%, -50%);
  color: var(--sage-deep);
  pointer-events: none;
  z-index: 1;
}
.manifest::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.4) 0%,
    transparent 70%
  );
  z-index: 1;
  pointer-events: none;
}

/* Pillar 3 "Dolazi uskoro" — text-only with pulsing dot + radar ring.
     No background, no border, no padding box. Sits top-left of the dark
     pillar card. */
.pillar__soon {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.55);
  animation: soonPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.pillar__soon-dot {
  position: relative;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: dotPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.pillar__soon-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid var(--terracotta);
  opacity: 0;
  animation: dotRing 2.4s ease-out infinite;
}
@keyframes soonPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 0.85;
  }
}
@keyframes dotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}
@keyframes dotRing {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pillar__soon,
  .pillar__soon-dot,
  .pillar__soon-dot::before {
    animation: none;
  }
  .pillar__soon {
    opacity: 0.7;
  }
}
/* Hide the older inline badge + the v2 corner-badge if anything still
     references them. */
.pillar__badge,
.pillar__corner-badge {
  display: none !important;
}

/* =====================================================================
     Package — dramatic v2 redesign (overrides earlier .package--editorial)
     ===================================================================== */
.package--v2 {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  padding: clamp(40px, 5vw, 64px) 0;
  margin: 0;
}
.package--v2:nth-of-type(even) {
  direction: rtl;
}
.package--v2:nth-of-type(even) > * {
  direction: ltr;
}

.package__massive-number {
  position: absolute;
  top: -8px;
  left: -20px;
  font-family: "Fraunces", serif;
  font-weight: 200;
  font-style: italic;
  font-size: clamp(160px, 20vw, 320px);
  line-height: 1;
  color: var(--terracotta);
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.015em;
}
.package--v2:nth-of-type(even) .package__massive-number {
  left: auto;
  right: -20px;
}

.package--v2 .package__media-wrapper {
  position: relative;
  z-index: 1;
}
.package--v2 .package__media {
  position: relative;
  aspect-ratio: 5/6;
  overflow: hidden;
  outline: 1px solid rgba(15, 15, 14, 0.05);
}

.package__breakout-tag {
  position: absolute;
  bottom: -24px;
  right: -16px;
  background: var(--bg-cream);
  border: 1px solid rgba(15, 15, 14, 0.08);
  padding: 14px 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 3;
  box-shadow: 0 16px 40px rgba(15, 15, 14, 0.12);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  white-space: nowrap;
}
.package--v2:hover .package__breakout-tag {
  transform: translate(-4px, -4px);
}
.package__breakout-days,
.package__breakout-stops {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
}
.package__breakout-sep {
  color: var(--terracotta);
}
.package--v2:nth-of-type(even) .package__breakout-tag {
  right: auto;
  left: -16px;
}

.package--v2 .package__content {
  position: relative;
  z-index: 1;
  padding: clamp(16px, 3vw, 48px) 0 0;
  display: flex;
  flex-direction: column;
}
.package--v2 .package__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
}
.package--v2 .package__title em {
  color: var(--terracotta);
  font-style: italic;
}
.package--v2 .package__description {
  font-family: "Geist", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 480px;
}
.package__region-tag {
  display: inline-block;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone-dark);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(15, 15, 14, 0.1);
  margin-bottom: 32px;
}

.package--v2 .package__destinations-list {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 0;
  border-bottom: 0;
}
.package--v2 .package__destinations-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: "Fraunces", serif;
  font-size: 17px;
  color: var(--ink);
  padding: 8px 0;
  border-bottom: 1px solid rgba(15, 15, 14, 0.05);
  transition:
    padding-left 0.3s ease,
    color 0.3s ease;
  cursor: default;
}
.package--v2 .package__destinations-list li:hover {
  padding-left: 8px;
  color: var(--terracotta);
}
.package--v2 .package__destinations-list li > span {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--stone-dark);
  min-width: 26px;
}

@media (max-width: 768px) {
  .package--v2 {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 0;
  }
  .package--v2:nth-of-type(even) {
    direction: ltr;
  }
  .package__massive-number {
    font-size: clamp(100px, 25vw, 180px);
    top: -16px;
    left: -8px;
  }
  .package--v2:nth-of-type(even) .package__massive-number {
    right: -8px;
    left: auto;
  }
  .package--v2 .package__title {
    font-size: clamp(40px, 12vw, 64px);
  }
}

/* =====================================================================
     Package — v4 FULL-BLEED CINEMATIC
     Image dominates edge-to-edge of the section; detail card floats over
     the image in the alternating corner. Same visual grammar as the
     places-cinematic frames. Rotator JS lives on .package__image-slider.
     ===================================================================== */

/* Section: contained padding (v5 packages live inside the contained box) */
.packages {
  padding: clamp(56px, 7vw, 100px) clamp(24px, 6vw, 80px);
}
.packages__header {
  max-width: 1280px;
  margin: 0 auto clamp(56px, 7vw, 100px);
  text-align: center;
}

/* Reset the legacy .package generic grid box for v4 instances */
.package--v4 {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(80px, 10vw, 140px);
  padding: 0;
  display: block;
}
.package--v4:last-of-type {
  margin-bottom: 0;
}

/* HERO IMAGE — full-bleed dominante */
.package--v4 .package__hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--ink);
}
.package--v4 .package__image-slider {
  position: absolute;
  inset: 0;
}
/* v4 slides cover the slider (override the generic .package__slides positioning) */
.package--v4 .package__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.package--v4 .package__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.package--v4 .package__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}
.package--v4:hover .package__slide.is-active img {
  transform: scale(1.04);
}

/* Gradient overlay — sit on the detail-card side for readability.
     Odd packages (01, 03) detail-card is right → gradient fades from right.
     Even (02) detail-card is left → gradient fades from left. */
.package--v4 .package__gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    to left,
    rgba(15, 15, 14, 0.55) 0%,
    rgba(15, 15, 14, 0.2) 35%,
    transparent 60%
  );
}
.package--v4:nth-of-type(even) .package__gradient {
  background: linear-gradient(
    to right,
    rgba(15, 15, 14, 0.55) 0%,
    rgba(15, 15, 14, 0.2) 35%,
    transparent 60%
  );
}

/* FLOATING TAG — opposite side from detail card. Odd → tag bottom-LEFT.
     Even → tag bottom-RIGHT. */
.package--v4 .package__floating-tag {
  position: absolute;
  bottom: clamp(32px, 4vw, 64px);
  left: clamp(32px, 4vw, 64px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(244, 239, 229, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(15, 15, 14, 0.2);
  white-space: nowrap;
}
.package--v4:nth-of-type(even) .package__floating-tag {
  left: auto;
  right: clamp(32px, 4vw, 64px);
}
.package__tag-days,
.package__tag-stops {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
}
.package__tag-sep {
  color: var(--terracotta);
}

/* INDICATORS — bottom centre of hero (override generic bottom-right) */
.package--v4 .package__indicators {
  position: absolute;
  bottom: clamp(32px, 4vw, 64px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
}
.package--v4 .package__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(244, 239, 229, 0.5);
  transition:
    width 0.4s ease,
    background 0.4s ease;
}
.package--v4 .package__dot.is-active {
  width: 24px;
  border-radius: 999px;
  background: var(--bg-cream);
}

/* DETAIL CARD — floats over image, alternating side */
.package--v4 .package__detail {
  position: absolute;
  bottom: clamp(32px, 5vw, 80px);
  right: clamp(32px, 5vw, 80px);
  z-index: 4;
  width: clamp(360px, 32vw, 460px);
  padding: clamp(28px, 3vw, 44px);
  background: var(--bg-cream);
  border: 1px solid rgba(15, 15, 14, 0.06);
  box-shadow:
    0 32px 80px rgba(15, 15, 14, 0.2),
    0 8px 24px rgba(15, 15, 14, 0.08);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.package--v4:nth-of-type(even) .package__detail {
  right: auto;
  left: clamp(32px, 5vw, 80px);
}
.package--v4:hover .package__detail {
  transform: translateY(-8px);
}

.package--v4 .package__index {
  display: block;
  font-family: "Fraunces", serif;
  font-weight: 200;
  font-style: italic;
  font-size: clamp(56px, 4.5vw, 88px);
  line-height: 0.9;
  color: var(--terracotta);
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

.package--v4 .package__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(15, 15, 14, 0.1);
}
.package--v4 .package__eyebrow-line {
  width: 20px;
  height: 1px;
  background: var(--terracotta);
  flex-shrink: 0;
}
.package--v4 .package__eyebrow > span:not(.package__eyebrow-line) {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

.package--v4 .package__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(34px, 3vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  color: var(--ink);
}
.package--v4 .package__title em {
  color: var(--terracotta);
  font-style: italic;
  font-weight: 500;
}

.package--v4 .package__description {
  font-family: "Fraunces", serif;
  font-style: normal;
  font-weight: 350;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 42rem;
}

.package--v4 .package__destinations {
  margin: 0 0 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(15, 15, 14, 0.08);
}
.package--v4 .package__dest-label {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 500;
  margin-bottom: 8px;
}
.package--v4 .package__dest-list {
  font-family: "Fraunces", serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Reduced motion — kill the lift + Ken Burns scale */
@media (prefers-reduced-motion: reduce) {
  .package--v4 .package__detail,
  .package--v4 .package__slide.is-active img {
    transition: none !important;
    transform: none !important;
  }
}

/* Tablet — taller image, card drops below and overlaps from bottom */
@media (max-width: 1024px) {
  .package--v4 .package__hero {
    aspect-ratio: 4/5;
  }
  .package--v4 .package__detail,
  .package--v4:nth-of-type(even) .package__detail {
    position: relative;
    bottom: auto;
    right: auto;
    left: auto;
    width: calc(100% - 48px);
    max-width: 560px;
    margin: -100px auto 0;
    padding: clamp(28px, 4vw, 40px);
  }
  .package--v4 .package__floating-tag,
  .package--v4:nth-of-type(even) .package__floating-tag {
    top: 24px;
    bottom: auto;
    left: 24px;
    right: auto;
  }
  .package--v4 .package__indicators {
    bottom: 24px;
  }
  .package--v4 .package__gradient {
    background: linear-gradient(
      to top,
      rgba(15, 15, 14, 0.45) 0%,
      rgba(15, 15, 14, 0.15) 30%,
      transparent 55%
    );
  }
  .package--v4:nth-of-type(even) .package__gradient {
    background: linear-gradient(
      to top,
      rgba(15, 15, 14, 0.45) 0%,
      rgba(15, 15, 14, 0.15) 30%,
      transparent 55%
    );
  }
}

@media (max-width: 640px) {
  .package--v4 .package__hero {
    aspect-ratio: 3/4;
  }
  .package--v4 .package__detail,
  .package--v4:nth-of-type(even) .package__detail {
    width: calc(100% - 32px);
    margin: -60px auto 0;
    padding: 26px 22px;
  }
  .package--v4 .package__title {
    font-size: clamp(28px, 8vw, 44px);
  }
  .package--v4 .package__index {
    font-size: clamp(44px, 12vw, 64px);
  }
  .package--v4 .package__floating-tag {
    top: 16px;
    left: 16px !important;
    right: auto !important;
    padding: 10px 16px;
  }
  .package__tag-days,
  .package__tag-stops {
    font-size: 12px;
  }
}

/* =====================================================================
     Package — v5 SIDE-BY-SIDE EDITORIAL
     Classic image-left/text-right (alternating per package) with editorial
     accents: corner step border, big italic index over image edge, vertical
     line marker, chip-style destinations, ink CTA with terracotta fill.
     Reuses .package__slide / .package__indicators / .package__dot from
     generic rules (rotator JS unchanged).
     ===================================================================== */
.package--v5 {
  position: relative;
  max-width: 1280px;
  margin: 0 auto clamp(80px, 10vw, 140px);
  padding: 0;
  display: block;
}
.package--v5:last-of-type {
  margin-bottom: 0;
}

.package--v5 .package__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  min-height: 540px;
}
.package--v5:nth-of-type(even) .package__layout {
  grid-template-columns: 1fr 1.15fr;
}
.package--v5:nth-of-type(odd) .package__visual {
  order: 1;
}
.package--v5:nth-of-type(odd) .package__content {
  order: 2;
}
.package--v5:nth-of-type(even) .package__visual {
  order: 2;
}
.package--v5:nth-of-type(even) .package__content {
  order: 1;
}

/* IMAGE BLOCK */
.package--v5 .package__visual {
  position: relative;
}
.package__step-accent {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 80px;
  height: 80px;
  border-top: 3px solid var(--terracotta);
  border-left: 3px solid var(--terracotta);
  z-index: 2;
  pointer-events: none;
}
.package--v5:nth-of-type(even) .package__step-accent {
  left: auto;
  right: -16px;
  border-left: none;
  border-right: 3px solid var(--terracotta);
}
.package--v5 .package__image-frame {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--ink);
  z-index: 1;
}
.package--v5 .package__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.package--v5 .package__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.package--v5 .package__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 8s ease;
}
.package--v5:hover .package__slide.is-active img {
  transform: scale(1.04);
}

/* Floating duration tag — bottom-left of image */
.package__duration {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(244, 239, 229, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(15, 15, 14, 0.15);
  white-space: nowrap;
}
.package__duration > span {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink);
}
.package__dur-sep {
  color: var(--terracotta);
}

/* Override generic indicators to bottom-right within v5 image-frame */
.package--v5 .package__indicators {
  position: absolute;
  bottom: 24px;
  right: 24px;
  left: auto;
  transform: none;
  z-index: 3;
  display: flex;
  gap: 6px;
}
.package--v5 .package__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(244, 239, 229, 0.6);
  transition:
    width 0.3s ease,
    background 0.3s ease,
    border-radius 0.3s ease;
}
.package--v5 .package__dot.is-active {
  width: 20px;
  border-radius: 999px;
  background: var(--bg-cream);
}

/* TEXT BLOCK */
.package--v5 .package__content {
  position: relative;
  padding: 24px 0;
}
.package__vertical-mark {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}
.package__vertical-line {
  display: block;
  width: 1px;
  height: 64px;
  background: var(--terracotta);
  flex-shrink: 0;
  margin-top: 4px;
}
.package__vertical-text {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  line-height: 1.8;
  font-weight: 500;
  max-width: 24ch;
}

.package--v5 .package__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(56px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 0 0 28px;
  color: var(--ink);
}
.package--v5 .package__title em {
  color: var(--terracotta);
  font-style: italic;
  font-weight: 500;
}

.package--v5 .package__description {
  font-family: "Fraunces", serif;
  font-style: normal;
  font-weight: 350;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 36px;
  max-width: 460px;
}

.package__chips {
  margin: 0 0 40px;
}
.package__chip-label {
  display: block;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 500;
  margin-bottom: 16px;
}
.package__chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.package__chip {
  display: inline-block;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid rgba(15, 15, 14, 0.15);
  border-radius: 999px;
  font-family: "Fraunces", serif;
  font-size: 13px;
  color: var(--ink);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
  cursor: default;
}
.package__chip:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--bg-cream);
  transform: translateY(-2px);
}

/* CTA — kopiran identičan stil iz .partner-form__btn (forest → terracotta hover, lift). */
/* Arrow translates desno on hover. Targets .package__cta-arrow span if present,
   plus last span fallback for buttons that just use a bare <span>→</span>. */
/* Partner form submit — same arrow translate on hover for consistency. */
.partner-form__btn > span:last-child {
  display: inline-block;
  transition: transform 0.3s ease;
}
.partner-form__btn:hover > span:last-child {
  transform: translateX(4px);
}
/* Force cream arrow color (override the terracotta from .package__cta:hover at line ~1747)
   and lock transform to 4px (override the 8px from same rule). */
@media (prefers-reduced-motion: reduce) {
  .package--v5 .package__slide.is-active img,
  .package__chip {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 1024px) {
  .package--v5 .package__layout,
  .package--v5:nth-of-type(even) .package__layout {
    grid-template-columns: 1fr;
    gap: 48px;
    min-height: auto;
  }
  .package--v5:nth-of-type(odd) .package__visual,
  .package--v5:nth-of-type(even) .package__visual {
    order: 1;
  }
  .package--v5:nth-of-type(odd) .package__content,
  .package--v5:nth-of-type(even) .package__content {
    order: 2;
  }
  .package--v5 .package__title {
    font-size: clamp(44px, 9vw, 72px);
  }
}

@media (max-width: 640px) {
  .package__step-accent {
    width: 56px;
    height: 56px;
    top: -10px;
    left: -10px;
  }
  .package--v5:nth-of-type(even) .package__step-accent {
    right: -10px;
  }
  .package--v5 .package__description {
    font-size: 16px;
  }
  .package__chip {
    font-size: 12px;
    padding: 7px 14px;
  }
}

/* =====================================================================
     Legal pages v1.0 — impressum, privatnost, uslovi, kolačići
     Editorial layout with sticky sidebar navigation. Brand-consistent
     (cream bg, terracotta accents, Fraunces serif body). [PLACEHOLDER]
     spans render as terracotta-tinted pills so founder can find + fill
     the items that need real data before public launch.
     ===================================================================== */
.legal-page {
  background: var(--bg-cream);
  color: var(--ink);
}
.legal-page .legal-back {
  position: absolute;
  top: 32px;
  left: clamp(24px, 5vw, 64px);
  z-index: 10;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}
.legal-page .legal-back:hover {
  color: var(--terracotta);
}

.legal-hero {
  padding: clamp(96px, 12vw, 160px) clamp(24px, 6vw, 80px)
    clamp(48px, 5vw, 72px);
  border-bottom: 1px solid rgba(15, 15, 14, 0.08);
  max-width: 1280px;
  margin: 0 auto;
}
.legal-hero__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 24px;
}
.legal-hero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 18ch;
  text-wrap: balance;
}
.legal-hero__subtitle {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 620px;
}
.legal-hero__version {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dark);
  padding: 6px 14px;
  border: 1px solid rgba(183, 71, 42, 0.3);
  border-radius: 999px;
  background: rgba(183, 71, 42, 0.04);
}
.legal-hero__version::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  opacity: 0.8;
}

.legal-content {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(48px, 6vw, 96px);
  padding: clamp(56px, 7vw, 96px) clamp(24px, 6vw, 80px)
    clamp(80px, 10vw, 140px);
  max-width: 1280px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 900px) {
  .legal-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.legal-sidebar {
  position: sticky;
  top: 120px;
  align-self: start;
}
@media (max-width: 900px) {
  .legal-sidebar {
    position: static;
  }
}
.legal-sidebar__label {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 600;
  margin-bottom: 16px;
}
.legal-sidebar__nav {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}
.legal-sidebar__nav li {
  margin-bottom: 10px;
}
.legal-sidebar__nav a {
  font-family: "Fraunces", serif;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.legal-sidebar__nav a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.legal-sidebar__contact {
  padding-top: 28px;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
}
.legal-sidebar__contact-label {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 600;
  margin-bottom: 10px;
}
.legal-sidebar__contact-text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 10px;
  line-height: 1.5;
}
.legal-sidebar__contact-email {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid var(--terracotta);
}

.legal-body {
  max-width: 720px;
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
}
.legal-section {
  margin-bottom: clamp(36px, 4vw, 56px);
  scroll-margin-top: 120px;
}
.legal-section__number {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 14px;
}
.legal-section__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 18px;
}
.legal-section__text p {
  margin: 0 0 16px;
}
.legal-section__text strong {
  color: var(--ink);
  font-weight: 600;
}
.legal-section__text ul {
  margin: 14px 0 18px 24px;
  padding: 0;
}
.legal-section__text li {
  margin-bottom: 8px;
  line-height: 1.65;
}
.legal-section__text a {
  color: var(--terracotta);
  border-bottom: 1px solid var(--terracotta);
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.legal-section__text a:hover {
  opacity: 0.75;
}

.legal-placeholder {
  display: inline-block;
  background: rgba(183, 71, 42, 0.08);
  border-left: 2px solid var(--terracotta);
  padding: 2px 10px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-style: normal;
  color: var(--terracotta);
  border-radius: 0 3px 3px 0;
  letter-spacing: 0.02em;
}

/* =====================================================================
     Propose-a-place — community QR submission page
     ===================================================================== */
.propose-page {
  background: var(--bg-cream);
  color: var(--ink);
}
.propose-page .legal-back {
  color: var(--ink-soft);
}
.propose-page .legal-back:hover {
  color: var(--terracotta);
}

.propose-hero {
  padding: clamp(96px, 12vw, 160px) clamp(24px, 6vw, 80px)
    clamp(64px, 7vw, 100px);
  max-width: 1280px;
  margin: 0 auto;
  text-align: center;
}
.propose-hero__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 24px;
}
.propose-hero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 auto 28px;
  max-width: 18ch;
  text-wrap: balance;
}
.propose-hero__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}
.propose-hero__subtitle {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 32px;
}
.propose-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  margin-top: clamp(32px, 4vw, 48px);
  background: var(--terracotta);
  color: var(--bg-cream);
  border: none;
  border-radius: 999px;
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  box-shadow: 0 4px 16px rgba(183, 71, 42, 0.18);
  transition:
    background 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.propose-hero__cta:hover {
  background: #9b3a23;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(183, 71, 42, 0.28);
}
.propose-hero__cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(183, 71, 42, 0.2);
}

/* ----- How it works (3 steps) ----- */
.propose-how {
  padding: clamp(64px, 8vw, 110px) clamp(24px, 6vw, 80px);
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
}
.propose-how__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.propose-how__eyebrow,
.propose-cats__eyebrow,
.propose-why__eyebrow,
.propose-form-sec__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 18px;
}
.propose-how__title,
.propose-cats__title,
.propose-why__title,
.propose-form-sec__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 auto 16px;
  max-width: 22ch;
  text-wrap: balance;
}
.propose-how__title em,
.propose-cats__title em,
.propose-why__title em,
.propose-form-sec__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}
.propose-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
}
@media (max-width: 900px) {
  .propose-how__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.propose-step {
  position: relative;
  padding: 32px 0 0;
  border-top: 1px solid rgba(183, 71, 42, 0.3);
}
.propose-step__num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: 18px;
}
.propose-step__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--ink);
  margin: 0 0 14px;
}
.propose-step__text {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
  max-width: 42rem;
}

/* ----- Categories (8 cards) ----- */
.propose-cats {
  padding: clamp(64px, 8vw, 110px) clamp(24px, 6vw, 80px);
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
}
.propose-cats__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.propose-cats__subtitle {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}
.propose-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) {
  .propose-cats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .propose-cats__grid {
    grid-template-columns: 1fr;
  }
}
.propose-cat {
  padding: 22px 20px;
  background: rgba(15, 15, 14, 0.02);
  border: 1px solid rgba(15, 15, 14, 0.08);
  border-radius: 4px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}
.propose-cat:hover {
  background: rgba(183, 71, 42, 0.04);
  border-color: var(--terracotta);
  transform: translateY(-2px);
}
.propose-cat__title {
  font-family: "Fraunces", serif;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 6px;
  font-weight: 400;
}
.propose-cat__example {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ----- Why (manifest) ----- */
.propose-why {
  padding: clamp(72px, 9vw, 120px) clamp(24px, 6vw, 80px);
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
  text-align: center;
}
.propose-why__title {
  margin: 0 auto 36px;
}
.propose-why__body {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}
.propose-why__body p {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 42rem;
}

/* ----- Form section ----- */
.propose-form-sec {
  padding: clamp(64px, 8vw, 110px) clamp(24px, 6vw, 80px)
    clamp(96px, 10vw, 140px);
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
}
.propose-form-sec__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.propose-form-sec__subtitle {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}
.propose-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg-cream-warm);
  padding: clamp(32px, 4vw, 56px);
  border-radius: 4px;
  border: 1px solid rgba(15, 15, 14, 0.06);
}
.propose-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .propose-form__row {
    grid-template-columns: 1fr;
  }
}
.propose-form__field {
  margin-bottom: 20px;
}
.propose-form__label {
  display: flex;
  align-items: flex-end;
  min-height: 28px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-weight: 600;
  margin-bottom: 8px;
}
.propose-form__input,
.propose-form__select,
.propose-form__textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-cream);
  border: 1px solid rgba(15, 15, 14, 0.12);
  border-radius: 4px;
  font-family: "Fraunces", serif;
  /* 16px minimum on mobile prevents iOS auto-zoom on focus. */
  font-size: 16px;
  color: var(--ink);
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}
.propose-form__input:focus,
.propose-form__select:focus,
.propose-form__textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  background: #fff;
}
.propose-form__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}
.propose-form__optional-label {
  margin: 28px 0 16px;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone-dark);
  padding-top: 24px;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
}
.propose-form__radios {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.propose-form__radio {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Fraunces", serif;
  font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
}
.propose-form__radio input {
  accent-color: var(--terracotta);
  cursor: pointer;
}
.propose-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: var(--terracotta);
  color: var(--bg-cream);
  border: none;
  border-radius: 999px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 16px;
  cursor: pointer;
  margin-top: 24px;
  transition:
    background 0.3s ease,
    transform 0.3s ease;
}
.propose-form__submit:hover {
  background: var(--ink);
  transform: translateY(-2px);
}
.propose-form__disclaimer {
  margin-top: 16px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* ----- Thank-you state ----- */
.propose-thanks {
  display: none;
  text-align: center;
  padding: clamp(40px, 5vw, 72px);
}
.propose-form.is-submitted .propose-form__inner {
  display: none;
}
.propose-form.is-submitted .propose-thanks {
  display: block;
}
.propose-thanks__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 56px);
  color: var(--terracotta);
  margin: 0 0 18px;
}
.propose-thanks__text {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 12px;
  max-width: 42rem;
}
.propose-thanks__actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
  justify-content: center;
}
.propose-thanks__actions a {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  color: var(--terracotta);
  border-bottom: 1px solid var(--terracotta);
  text-decoration: none;
}

/* =====================================================================
     Propose-a-place — LAYOUT VARIATIONS v2
     Break monotonous "centered eyebrow + H2 + P" pattern across the 5
     sections: asymmetric hero, vertical timeline, magazine grid, pull
     quote, sticky-sidebar form.
     ===================================================================== */

/* Hero — 1.4fr text / 1fr visual */
.propose-hero--asymmetric {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  text-align: left;
  padding: clamp(120px, 14vw, 180px) clamp(24px, 6vw, 80px)
    clamp(72px, 9vw, 120px);
  min-height: 75vh;
}
.propose-hero--asymmetric .propose-hero__title {
  margin: 0 0 28px;
  max-width: 14ch;
  font-size: clamp(56px, 8vw, 112px);
  line-height: 0.96;
}
.propose-hero--asymmetric .propose-hero__subtitle {
  margin: 0 0 36px;
  max-width: 56ch;
}
.propose-hero__visual {
  position: relative;
  aspect-ratio: 1 / 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.propose-hero__visual svg {
  width: 100%;
  height: 100%;
  color: var(--terracotta);
}
@media (max-width: 900px) {
  .propose-hero--asymmetric {
    grid-template-columns: 1fr;
    min-height: auto;
    text-align: center;
  }
  .propose-hero--asymmetric .propose-hero__title {
    margin-left: auto;
    margin-right: auto;
  }
  .propose-hero--asymmetric .propose-hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .propose-hero__visual {
    aspect-ratio: 16 / 9;
    order: -1;
  }
}

/* Kako radi — vertikalni timeline */
.propose-how--timeline {
  max-width: 980px;
  margin: 0 auto;
}
.propose-how--timeline .propose-how__steps {
  position: relative;
  padding-left: 100px;
}
.propose-how--timeline .propose-how__steps::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--terracotta) 0%,
    var(--terracotta) 70%,
    rgba(183, 71, 42, 0.2) 100%
  );
}
.propose-how--timeline .propose-step {
  position: relative;
  margin-bottom: clamp(40px, 5vw, 72px);
  border-top: 0;
  padding-top: 0;
}
.propose-how--timeline .propose-step:last-child {
  margin-bottom: 0;
}
.propose-how--timeline .propose-step__num {
  position: absolute;
  left: -100px;
  top: -10px;
  width: 80px;
  text-align: center;
  background: var(--bg-cream);
  padding: 4px 0;
  z-index: 2;
  font-size: clamp(40px, 4vw, 56px);
  color: var(--terracotta);
  font-style: italic;
  line-height: 1;
  margin: 0;
}
.propose-how--timeline .propose-step__text {
  max-width: 60ch;
}
@media (max-width: 720px) {
  .propose-how--timeline .propose-how__steps {
    padding-left: 56px;
  }
  .propose-how--timeline .propose-how__steps::before {
    left: 22px;
  }
  .propose-how--timeline .propose-step__num {
    left: -56px;
    width: 44px;
    font-size: 32px;
  }
}

/* ============================================================
   CATEGORIES — editorial mosaic
   8 cards in a varied 4-col grid: 1 feature (2x2 terracotta) +
   3 wide (2x1) + 1 tall (1x2 forest tint) + 3 standard,
   2 of which carry a subtle cream warm tint. Cards have a number,
   title, italic description, and a thin · -separated example list.
   ============================================================ */
.propose-cats--mosaic {
  --cats-gap: 18px;
}
.propose-cats--mosaic .propose-cats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: var(--cats-gap);
}

/* Default card chrome refreshed for the mosaic */
.propose-cats--mosaic .propose-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.5vw, 32px) clamp(20px, 2vw, 28px);
  background: var(--bg-cream);
  border: 1px solid rgba(15, 15, 14, 0.10);
  border-radius: 6px;
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.propose-cats--mosaic .propose-cat:hover {
  border-color: var(--terracotta);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(20, 60, 46, 0.06);
}

/* Per-card number — top-right corner, italic Fraunces, subtle */
.propose-cat__num {
  position: absolute;
  top: clamp(16px, 2vw, 20px);
  right: clamp(18px, 2vw, 22px);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(15, 15, 14, 0.32);
  z-index: 1;
}

/* Description — italic editorial line that carries the emotion */
.propose-cat__desc {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 8px 0 12px;
  text-wrap: pretty;
  flex: 1 1 auto;
}

/* Example list — small, separator-driven (· already in copy) */
.propose-cats--mosaic .propose-cat__example {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
  opacity: 0.86;
}

/* Title refresh for mosaic */
.propose-cats--mosaic .propose-cat__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  padding-right: 32px; /* leave room for the corner number */
}

/* ----- Size variants ----- */
.propose-cat--feature {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--terracotta) !important;
  border-color: var(--terracotta) !important;
  color: var(--bg-cream);
  padding: clamp(32px, 4vw, 48px) clamp(28px, 3vw, 40px) !important;
  justify-content: flex-end;
}
.propose-cat--feature:hover {
  background: #9a3b22 !important;
  border-color: #9a3b22 !important;
  transform: translateY(-3px);
}
.propose-cat--feature .propose-cat__title {
  color: var(--bg-cream);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.propose-cat--feature .propose-cat__desc {
  color: rgba(244, 239, 229, 0.88);
  font-size: 17px;
  line-height: 1.4;
  margin: 14px 0 18px;
}
.propose-cat--feature .propose-cat__example {
  color: rgba(244, 239, 229, 0.72);
  border-top-color: rgba(244, 239, 229, 0.20);
}
.propose-cat--feature .propose-cat__num {
  color: rgba(244, 239, 229, 0.55);
  font-size: 16px;
}

.propose-cat--wide  { grid-column: span 2; }
.propose-cat--tall  { grid-column: span 1; grid-row: span 2; }

/* ----- Tint variants ----- */
.propose-cat--tint-forest {
  background: var(--forest) !important;
  border-color: var(--forest) !important;
  color: var(--bg-cream);
}
.propose-cat--tint-forest:hover {
  background: #0d2f24 !important;
  border-color: #0d2f24 !important;
}
.propose-cat--tint-forest .propose-cat__title { color: var(--bg-cream); }
.propose-cat--tint-forest .propose-cat__desc { color: rgba(244, 239, 229, 0.78); }
.propose-cat--tint-forest .propose-cat__example {
  color: var(--terracotta);
  border-top-color: rgba(244, 239, 229, 0.18);
}
.propose-cat--tint-forest .propose-cat__num { color: rgba(244, 239, 229, 0.40); }

.propose-cat--tint-cream {
  background: var(--bg-cream-warm) !important;
}

/* ----- CTA block after the mosaic ----- */
.propose-cats__cta {
  margin: clamp(48px, 6vw, 72px) auto 0;
  max-width: 720px;
  text-align: center;
  padding: clamp(24px, 3vw, 32px) clamp(20px, 3vw, 32px);
}
.propose-cats__cta-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.propose-cats__cta-body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.propose-cats__cta-btn {
  /* Inherits .qrp-btn .qrp-btn--primary geometry. Just centers itself. */
  display: inline-flex;
}

/* ----- Responsive collapse ----- */
@media (max-width: 1024px) {
  .propose-cats--mosaic .propose-cats__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .propose-cat--feature,
  .propose-cat--wide {
    grid-column: span 2;
  }
  .propose-cat--feature {
    grid-row: auto;
  }
  .propose-cat--tall {
    grid-column: span 1;
    grid-row: span 2;
  }
}
@media (max-width: 640px) {
  .propose-cats--mosaic .propose-cats__grid {
    grid-template-columns: 1fr;
  }
  .propose-cat--feature,
  .propose-cat--wide,
  .propose-cat--tall {
    grid-column: 1;
    grid-row: auto;
  }
  .propose-cat__desc { font-size: 14.5px; }
  .propose-cat--feature .propose-cat__desc { font-size: 15.5px; }
  .propose-cat--feature .propose-cat__title { font-size: 28px; }
}

/* Why — pull-quote full-bleed */
.propose-why--quote {
  background: rgba(183, 71, 42, 0.03);
  padding: clamp(96px, 12vw, 160px) 0;
  margin: 0;
  max-width: none;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
  border-bottom: 1px solid rgba(15, 15, 14, 0.08);
  text-align: left;
}
.propose-why--quote .propose-why__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}
.propose-why--quote .propose-why__eyebrow {
  margin-bottom: 36px;
}
.propose-why--quote .propose-why__title {
  font-size: clamp(48px, 8vw, 132px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin: 0 0 64px;
  padding-left: clamp(20px, 3vw, 48px);
  border-left: 3px solid var(--terracotta);
  text-align: left;
  text-wrap: balance;
}
.propose-why--quote .propose-why__body {
  max-width: 920px;
  margin-left: clamp(20px, 3vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  text-align: left;
}
.propose-why--quote .propose-why__body p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  max-width: 42rem;
}
@media (max-width: 720px) {
  .propose-why--quote .propose-why__body {
    grid-template-columns: 1fr;
  }
}

/* Form — sticky sidebar + form */
.propose-form-sec--sidebar {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(48px, 6vw, 96px);
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 140px) clamp(24px, 4vw, 48px);
  align-items: start;
}
.propose-form-sec--sidebar .propose-form-sec__header {
  text-align: left;
  margin-bottom: 0;
}
.propose-form-sec--sidebar .propose-form-sec__title {
  margin-left: 0;
  margin-right: 0;
  font-size: clamp(36px, 3.5vw, 48px);
  max-width: none;
}
.propose-form-sidebar {
  position: sticky;
  top: 120px;
  align-self: start;
}
.propose-form-sidebar__principles {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
}
.propose-form-sidebar__principle {
  padding: 16px 0;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.propose-form-sidebar__principle:last-child {
  border-bottom: 1px solid rgba(15, 15, 14, 0.08);
}
@media (max-width: 900px) {
  .propose-form-sec--sidebar {
    grid-template-columns: 1fr;
  }
  .propose-form-sidebar {
    position: static;
  }
}

/* =====================================================================
     Subpage nav — force the scrolled (solid + dark) state from page load
     because subpages start on cream, not over a dark hero photo. Mirrors
     all the .nav.scrolled rules so logo, status, lang switcher are
     immediately visible.
     ===================================================================== */
body.legal-page .nav,
body.propose-page .nav,
body.place-detail-page .nav,
body.partner-page .nav {
  padding: 16px 48px;
  background: rgba(244, 239, 229, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(139, 126, 110, 0.08);
}
body.legal-page .nav__logo-img,
body.propose-page .nav__logo-img,
body.place-detail-page .nav__logo-img,
body.partner-page .nav__logo-img {
  filter: none;
  height: 56px;
}
body.legal-page .nav__status,
body.propose-page .nav__status,
body.place-detail-page .nav__status,
body.partner-page .nav__status {
  color: var(--ink-soft);
}
body.legal-page .lang-btn,
body.propose-page .lang-btn,
body.place-detail-page .lang-btn,
body.partner-page .lang-btn {
  color: rgba(15, 15, 14, 0.55);
}
body.legal-page .lang-btn:hover,
body.propose-page .lang-btn:hover,
body.place-detail-page .lang-btn:hover,
body.partner-page .lang-btn:hover,
body.legal-page .lang-btn:focus-visible,
body.propose-page .lang-btn:focus-visible,
body.place-detail-page .lang-btn:focus-visible,
body.partner-page .lang-btn:focus-visible,
body.legal-page .lang-btn.is-active,
body.propose-page .lang-btn.is-active,
body.place-detail-page .lang-btn.is-active,
body.partner-page .lang-btn.is-active {
  color: var(--terracotta);
}
body.legal-page .lang-divider,
body.propose-page .lang-divider,
body.place-detail-page .lang-divider,
body.partner-page .lang-divider {
  color: rgba(15, 15, 14, 0.25);
}
@media (max-width: 768px) {
  body.legal-page .nav,
  body.propose-page .nav,
  body.place-detail-page .nav,
  body.partner-page .nav {
    padding: 14px 24px;
  }
}

/* Back-to-home link above hero eyebrow on subpages — stronger visual
     weight so it's the first thing users see after the nav. */
.page-back-link {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.page-back-link__anchor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-decoration: none;
  font-weight: 600;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid rgba(183, 71, 42, 0.3);
  transition:
    border-color 0.25s ease,
    padding 0.25s ease;
}
.page-back-link__anchor:hover {
  border-bottom-color: var(--terracotta);
  padding-right: 10px;
}
.page-back-link__arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  font-size: 16px;
}
.page-back-link__anchor:hover .page-back-link__arrow {
  transform: translateX(-6px);
}

/* Floating back-to-home FAB — fixed bottom-right, appears after scroll
     past the in-hero back link. Cream pill with terracotta arrow + label;
     compacts to arrow-only on narrow screens. */
.floating-back {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-cream);
  color: var(--terracotta);
  border: 1px solid rgba(183, 71, 42, 0.25);
  border-radius: 999px;
  box-shadow:
    0 8px 24px rgba(15, 15, 14, 0.1),
    0 2px 8px rgba(15, 15, 14, 0.06);
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.4s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  pointer-events: none;
}
.floating-back.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.floating-back:hover {
  background: var(--terracotta);
  color: var(--bg-cream);
  border-color: var(--terracotta);
  box-shadow:
    0 12px 32px rgba(183, 71, 42, 0.22),
    0 4px 12px rgba(15, 15, 14, 0.08);
}
.floating-back__arrow {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.3s ease;
}
.floating-back:hover .floating-back__arrow {
  transform: translateX(-3px);
}
@media (max-width: 640px) {
  .floating-back {
    bottom: 20px;
    right: 20px;
    padding: 14px;
    gap: 0;
  }
  .floating-back__text {
    display: none;
  }
  .floating-back__arrow {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .floating-back {
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SOUL OF BOSNIA — BiH Map Component
   Pravi BiH outline (potrace tracing) sa 6 lokacija iz "Mjesta" sekcije
   
   Korištenje: SVG mora biti INLINE (ne <img>) da bi animacije
   i currentColor radile.
   ═══════════════════════════════════════════════════════════════ */

.bih-map-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 560px;
}

.bih-map {
  display: block;
  width: 100%;
  height: auto;
  color: var(--terracotta);
}

/* ═══════════════════════════════════════════════
   OUTLINE — animacija crtanja na load
   ═══════════════════════════════════════════════ */
.bih-map__outline {
  stroke-dasharray: 12000;
  stroke-dashoffset: 12000;
  animation: bih-draw-outline 2.8s cubic-bezier(0.65, 0.05, 0.35, 1) 0.3s
    forwards;
  opacity: 0;
}

@keyframes bih-draw-outline {
  0% {
    stroke-dashoffset: 12000;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════
   LOKACIJE — pojavljivanje + pulse
   ═══════════════════════════════════════════════ */
.bih-location {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: bih-location-appear 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: calc(2.6s + var(--delay, 0s));
}

@keyframes bih-location-appear {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  60% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse ring oko dot-a */
.bih-location__pulse {
  fill: var(--terracotta);
  fill-opacity: 0.18;
  transform-origin: center;
  transform-box: fill-box;
  animation: bih-pulse 2.8s ease-in-out infinite;
  animation-delay: calc(3.4s + var(--delay, 0s));
}

@keyframes bih-pulse {
  0%,
  100% {
    transform: scale(0.7);
    fill-opacity: 0.2;
  }
  50% {
    transform: scale(1.4);
    fill-opacity: 0;
  }
}

/* Glavna tačka */
.bih-location__dot {
  fill: var(--terracotta);
  filter: drop-shadow(0 0 6px rgba(183, 71, 42, 0.35));
}

/* ═══════════════════════════════════════════════
   INTERACTIVITY — hover / focus / click
   ═══════════════════════════════════════════════ */
.bih-location {
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bih-location:focus { outline: none; }

.bih-location:hover,
.bih-location:focus-visible {
  transform: scale(1.15);
}

.bih-location:hover .bih-location__dot,
.bih-location:focus-visible .bih-location__dot {
  fill: var(--terracotta);
  filter: drop-shadow(0 0 14px rgba(183, 71, 42, 0.7));
}

.bih-location:hover .bih-location__pulse,
.bih-location:focus-visible .bih-location__pulse {
  animation-play-state: paused;
  fill-opacity: 0.35;
}

/* Hitarea — nevidljiva veća zona za bolji hit target */
.bih-location__hitarea {
  fill: transparent;
}

.bih-location__dot {
  transition: filter 0.3s ease, fill 0.3s ease;
}

/* ═══════════════════════════════════════════════
   CUSTOM TOOLTIP (DOM-positioned, prati kursor)
   ═══════════════════════════════════════════════ */
.bih-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--bg-cream);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(15, 15, 14, 0.25);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 16px)) scale(0.9);
  transition: opacity 0.2s ease,
              transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bih-tooltip.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 16px)) scale(1);
}
.bih-tooltip::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  margin-right: 4px;
}
.bih-tooltip::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--ink);
}
.bih-tooltip__place {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
}
.bih-tooltip__separator {
  opacity: 0.5;
  font-size: 11px;
}
.bih-tooltip__city {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

/* Touch devices — tooltip ide ISPOD prsta */
@media (hover: none) and (pointer: coarse) {
  .bih-tooltip {
    transform: translate(-50%, calc(100% + 16px)) scale(0.9);
  }
  .bih-tooltip.is-visible {
    transform: translate(-50%, calc(100% + 16px)) scale(1);
  }
  .bih-tooltip::after {
    top: -5px;
    bottom: auto;
  }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bih-map {
    max-width: 400px;
  }
}

@media (max-width: 600px) {
  .bih-map {
    max-width: 300px;
  }
}

/* ═══════════════════════════════════════════════
   ACCESSIBILITY — reduce motion preference
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .bih-map__outline {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .bih-location {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }

  .bih-location__pulse {
    animation: none;
    fill-opacity: 0.18;
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL FIX — resolves the mobile-audit scroll-lock on iOS.
   The audit added `overflow-x: hidden` to <html>, which interacts
   badly with viewport-fit=cover + dvh on iOS Safari and can kill
   vertical scroll. This block restores explicit overflow-y: auto
   so the document is always scrollable. Must stay at end of file.
   ═══════════════════════════════════════════════════════════════ */

html {
  /* `clip` prevents horizontal scrollbar from off-screen elements WITHOUT
     creating a scroll container. Using `hidden` here would break
     `position: sticky` site-wide because it would promote <html> to a
     scrolling element, splitting the scroll context with the viewport. */
  overflow-x: clip;
  /* overflow-y NOT explicitly set — default `visible` keeps the viewport as
     the single scroll container, which is what sticky needs. */
  height: auto;
  max-height: none;
  touch-action: auto;
  overscroll-behavior: auto;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  /* overflow-y NOT explicitly set — body inherits document scrolling from
     viewport. Setting `overflow-y: auto` here would make body a scroll
     container and break sticky descendants (e.g. .history-tracker). */
  height: auto;
  min-height: 100vh;
  max-height: none;
  touch-action: auto;
  overscroll-behavior: auto;
}

/* ═══════════════════════════════════════════════════════════════
   MJESTA — DETAIL PAGE TEMPLATE
   Reusable layout za /mjesta/{kategorija}/{slug}.html.
   Sekcije: hero, intro-lead, story sections, pull-quotes,
   full-image, practical sidebar, related, end CTA.
   ═══════════════════════════════════════════════════════════════ */

.place-detail {
  background: var(--bg-cream);
  color: var(--ink);
  padding-top: 88px; /* clear fixed nav */
}

/* ═══ Topbar — Back link + Breadcrumbs ═══ */
.place-detail__topbar {
  padding-top: clamp(24px, 3vw, 32px);
}

.place-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: clamp(16px, 2vw, 24px) 0 clamp(8px, 1.5vw, 16px);
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone-dark);
}

.place-breadcrumbs a {
  color: var(--stone-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.place-breadcrumbs a:hover {
  color: var(--terracotta);
}

.place-breadcrumbs__separator {
  opacity: 0.4;
}

.place-breadcrumbs__current {
  color: var(--ink);
  font-weight: 500;
}

/* ═══ Hero ═══ */
.place-hero {
  padding: clamp(32px, 4vw, 48px) 0 0;
}

.place-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 24px;
  font-family: "Geist", sans-serif;
}

.place-hero__title {
  font-family: "Fraunces", serif;
  font-size: clamp(56px, 9vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
  color: var(--ink);
  max-width: 1100px;
}

.place-hero__title em {
  font-style: italic;
  color: var(--terracotta);
}

.place-hero__lead {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 80px);
}

/* Meta data strip */
.place-meta-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3.5vw, 40px) 0;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
  border-bottom: 1px solid rgba(15, 15, 14, 0.08);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.place-meta-strip__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.place-meta-strip__label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stone-dark);
  font-family: "Geist", sans-serif;
  font-weight: 500;
}

.place-meta-strip__value {
  font-family: "Fraunces", serif;
  font-size: clamp(15px, 1.5vw, 19px);
  color: var(--ink);
}

@media (max-width: 720px) {
  .place-meta-strip {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

/* ═══ Hero image ═══ */
.place-hero-image {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 480px;
  max-height: 820px;
  margin-bottom: clamp(64px, 8vw, 112px);
  overflow: hidden;
  background: linear-gradient(135deg,
    rgba(183, 71, 42, 0.08) 0%,
    rgba(183, 71, 42, 0.04) 100%);
}

.place-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.place-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 240px;
  background: linear-gradient(135deg,
    rgba(183, 71, 42, 0.06) 0%,
    rgba(15, 15, 14, 0.04) 100%);
  color: var(--terracotta);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 24px;
}

/* ═══ Intro Lead ═══ */
.place-intro-lead {
  max-width: 720px;
  margin: 0 auto clamp(80px, 10vw, 140px);
  padding: 0 clamp(24px, 4vw, 48px);
}

.place-intro-lead__text {
  font-family: "Fraunces", serif;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
  max-width: 42rem;
}

.place-intro-lead__text strong {
  font-style: normal;
  color: var(--terracotta);
  font-weight: 500;
}

/* ═══ Story sections ═══ */
.place-section {
  padding: clamp(64px, 8vw, 112px) 0;
  position: relative;
}

.place-section--alt {
  background: rgba(183, 71, 42, 0.02);
}

.place-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.place-section__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.place-section__grid--reversed {
  grid-template-columns: 1fr 1.2fr;
}

@media (max-width: 900px) {
  .place-section__grid,
  .place-section__grid--reversed {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .place-section__grid--reversed .place-section__text {
    order: 1;
  }
  .place-section__grid--reversed .place-section__visual {
    order: 2;
  }
}

.place-section__eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 20px;
  font-family: "Geist", sans-serif;
}

.place-section__title {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: clamp(24px, 3vw, 36px);
  max-width: 600px;
}

.place-section__title em {
  font-style: italic;
  color: var(--terracotta);
}

.place-section__body {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  max-width: 580px;
}

.place-section__body p {
  margin-bottom: 20px;
}

.place-section__body p:last-child {
  margin-bottom: 0;
}

.place-section__body em {
  color: var(--terracotta);
}

.place-section__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  background: rgba(183, 71, 42, 0.04);
  overflow: hidden;
}

.place-section__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place-section__visual-caption {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 12px;
  color: var(--bg-cream);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  background: rgba(15, 15, 14, 0.4);
  backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
}

/* ═══ Pull-quote moment ═══ */
.place-pullquote {
  padding: clamp(96px, 12vw, 160px) 0;
  background: var(--ink);
  color: var(--bg-cream);
  text-align: center;
}

.place-pullquote__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.place-pullquote__mark {
  font-family: "Fraunces", serif;
  font-size: 80px;
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: 24px;
  opacity: 0.7;
}

.place-pullquote__text {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  /* margin auto centres the 42rem block within .place-pullquote__inner
     (1200px wrapper). Without auto, the block sits flush-left of its
     parent while text-align: center on .place-pullquote only centres
     inline content — producing an optical left offset where the mark
     and attribution read centred but the text block does not. */
  margin: 0 auto 32px;
  max-width: 42rem;
}

.place-pullquote__text em {
  font-style: italic;
  color: var(--terracotta);
}

.place-pullquote__attribution {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 239, 229, 0.6);
}

/* ═══ Full-bleed image moment ═══ */
.place-full-image {
  width: 100%;
  height: 80vh;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  background: rgba(183, 71, 42, 0.04);
}

.place-full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.place-full-image__caption {
  position: absolute;
  bottom: clamp(32px, 4vw, 56px);
  left: clamp(24px, 4vw, 48px);
  max-width: 480px;
  color: var(--bg-cream);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ═══ Practical section with sticky sidebar ═══ */
.place-practical {
  padding: clamp(80px, 10vw, 140px) 0;
}

.place-practical__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

@media (max-width: 900px) {
  .place-practical__inner {
    grid-template-columns: 1fr;
  }
}

.place-practical__content {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
}

.place-practical__content p {
  margin-bottom: 20px;
}

.place-practical__content em {
  color: var(--terracotta);
}

.place-practical-sidebar {
  position: sticky;
  top: 120px;
  padding: clamp(28px, 3vw, 40px);
  background: rgba(183, 71, 42, 0.03);
  border-left: 3px solid var(--terracotta);
}

@media (max-width: 900px) {
  .place-practical-sidebar {
    position: static;
    margin-top: 32px;
  }
}

.place-practical-sidebar__title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22px;
  margin-bottom: 24px;
  color: var(--ink);
}

.place-practical-sidebar__item {
  padding: 14px 0;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
}

.place-practical-sidebar__item:first-of-type {
  border-top: none;
}

.place-practical-sidebar__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 6px;
  font-family: "Geist", sans-serif;
}

.place-practical-sidebar__value {
  font-family: "Fraunces", serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  display: block;
}

/* ═══ Related places ═══ */
.place-related {
  padding: clamp(80px, 10vw, 140px) 0;
  background: rgba(15, 15, 14, 0.02);
}

.place-related__title {
  font-family: "Fraunces", serif;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.15;
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
  color: var(--ink);
}

.place-related__title em {
  font-style: italic;
  color: var(--terracotta);
}

.place-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

@media (max-width: 900px) {
  .place-related__grid {
    grid-template-columns: 1fr;
  }
}

.place-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.place-related-card:hover {
  transform: translateY(-4px);
}

.place-related-card__image {
  aspect-ratio: 4 / 3;
  background: rgba(183, 71, 42, 0.05);
  margin-bottom: 16px;
  overflow: hidden;
}

.place-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.place-related-card:hover .place-related-card__image img {
  transform: scale(1.05);
}

.place-related-card__category {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 8px;
  font-family: "Geist", sans-serif;
  font-weight: 600;
}

.place-related-card__title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 4px;
}

.place-related-card__location {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ═══ End CTA — Predloži dopunu ═══ */
.place-end-cta {
  padding: clamp(80px, 10vw, 120px) 0;
  text-align: center;
}

.place-end-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.place-end-cta__text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 32px;
  max-width: 42rem;
}

.place-end-cta__text em {
  color: var(--terracotta);
}

.place-end-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-decoration: none;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1.5px solid var(--terracotta);
  transition: gap 0.3s ease;
}

.place-end-cta__link:hover {
  gap: 16px;
}

/* ═══ Home frame — "Saznaj više" CTA, embedded desno u fact-box ═══
   CTA sjedi UNUTAR .frame__fact-box (kao zadnji element), poravnat
   desno. Ne mijenja height/layout frame-a — kompaktan inline element. */
.frame__fact-box {
  display: flex;
  flex-direction: column;
}

.frame__fact-box .frame__cta-link {
  align-self: flex-end;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-decoration: none;
  font-weight: 600;
  padding: 4px 0;
  transition: gap 0.3s ease;
}

.frame__fact-box .frame__cta-link:hover {
  gap: 12px;
}

.frame__fact-box .frame__cta-arrow {
  font-size: 13px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.frame__fact-box .frame__cta-link:hover .frame__cta-arrow {
  transform: translateX(2px);
}

/* "Stiže uskoro" status chip — sits in the same fact-box slot as the deep-link
   CTA on Kastel, but for places that don't yet have their own subpage. Same
   eyebrow uppercase rhythm + pulsing dot pattern as .pillar__soon. */
.frame__soon {
  align-self: flex-end;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  padding: 4px 0;
  opacity: 0.78;
}

.frame__soon-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: dotPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .frame__fact-box .frame__cta-link {
    font-size: 10px;
    gap: 6px;
    letter-spacing: 0.16em;
  }
}

/* ═══ "Uskoro dolazi" — placeholder umjesto related places ═══ */
.place-coming-soon {
  padding: clamp(96px, 12vw, 160px) 0;
  background: rgba(183, 71, 42, 0.03);
  text-align: center;
}

.place-coming-soon__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.place-coming-soon__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin-bottom: 24px;
}

.place-coming-soon__title {
  font-family: "Fraunces", serif;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.place-coming-soon__title em {
  font-style: italic;
  color: var(--terracotta);
}

.place-coming-soon__text {
  font-family: "Fraunces", serif;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: clamp(32px, 4vw, 48px);
  max-width: 42rem;
}

.place-coming-soon__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: clamp(40px, 5vw, 56px);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--ink);
}

.place-coming-soon__dot {
  color: var(--terracotta);
  opacity: 0.5;
}

.place-coming-soon__item {
  position: relative;
}

.place-coming-soon__item--more {
  font-style: italic;
  color: var(--terracotta);
  opacity: 0.85;
}

.place-coming-soon__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-decoration: none;
  font-weight: 600;
  padding: 12px 0;
  border-bottom: 1.5px solid var(--terracotta);
  transition: gap 0.3s ease;
}

.place-coming-soon__link:hover {
  gap: 18px;
}

@media (max-width: 768px) {
  .place-coming-soon__list {
    flex-direction: column;
    gap: 8px;
  }
  .place-coming-soon__dot {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FINE-TUNING — 5 specifičnih popravki
   Targetira <768px viewports — desktop nije pogođen.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── PROBLEM 1 — Header tighter on mobile.
     (Napomena: "ROUTES ONLY LOCALS KNOW" taglin ne postoji
     u našem navu; nav ima samo logo + lang switch + status
     badge "Stiže · 2026". Smanjujem logo, padding i razmake.) */
  .nav {
    padding: 14px 20px;
  }
  .nav__right {
    gap: 14px;
  }
  .nav__status {
    font-size: 9px;
    letter-spacing: 0.2em;
  }
  .lang-switch {
    gap: 6px;
  }
  .lang-btn {
    font-size: 11px;
    padding: 4px 6px;
  }

  /* ── PROBLEM 2 — Hero slider counter + place name stacked.
     Layout sada: counter na vrhu, dots ispod, place name dolje. */
  .hero__indicators {
    flex-direction: row;
    flex-wrap: wrap;
    bottom: 64px;
    left: 24px;
    right: 24px;
    gap: 8px;
    align-items: center;
  }
  .hero__slide-counter {
    flex-basis: 100%;
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.22em;
  }
  .hero__photo-credit {
    bottom: 28px;
    left: 24px;
    right: 24px;
    font-size: 10px;
    letter-spacing: 0.15em;
    line-height: 1.4;
    white-space: normal;
    text-align: left;
  }

  /* ── PROBLEM 3 — "Bez sitnih slova" sekcija: smanji top
     padding tako da eyebrow počinje bliže vrhu sekcije. */
  .intro__services {
    padding-top: clamp(24px, 4vw, 40px);
    padding-bottom: clamp(40px, 6vw, 56px);
  }
  .intro__services-header {
    margin: 0 auto clamp(28px, 4vw, 40px);
  }
  .intro__services-eyebrow {
    margin-bottom: 16px;
  }
  .intro__services-title {
    margin-bottom: 16px;
  }

  /* ── PROBLEM 4 — QR mockup veći i izraženiji na mobile.
     Pojačan box-shadow daje "objekat" feeling. Tag-badge veći. */
  .digital__media {
    max-width: 360px;
  }
  .digital__qr {
    padding: 28px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
  }
  .digital__qr-tag {
    font-size: 12px;
    padding: 14px 22px;
    letter-spacing: 0.22em;
    bottom: -14px;
    right: -10px;
  }

  /* ── PROBLEM 5 — Footer "Od nas, za vas. Sa ljubavlju."
     ide ispod legal linkova na svojoj liniji, centrirano. */
  .foot__bottom {
    text-align: center;
    align-items: center;
  }
  .foot__bottom-right {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    width: 100%;
  }
  .foot__heart {
    flex-basis: 100%;
    text-align: center;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.5;
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER MOBILE — Burger button + Drawer menu (injected via JS).
   Mounts inside <nav class="nav">; drawer is appended to <body>.
   ═══════════════════════════════════════════════════════════════ */

.header__burger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  z-index: 1001;
  -webkit-tap-highlight-color: transparent;
}

.header__burger-line {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 1.5px;
  /* Default = transparent header (hero overlay) — cream/white lines. */
  background: var(--bg-cream);
  transition: top 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.2s ease,
              background 0.3s ease;
  transform-origin: center;
}

/* Solid header states (scrolled on home, always-solid on subpages) — dark lines. */
.nav.scrolled .header__burger-line,
body.legal-page .header__burger-line,
body.propose-page .header__burger-line,
body.place-detail-page .header__burger-line,
body.partner-page .header__burger-line {
  background: var(--ink);
}

/* Active (X) state — menu is on cream BG, so X is always dark. */
.header__burger.is-active .header__burger-line {
  background: var(--ink) !important;
}
.header__burger-line:nth-child(1) { top: 16px; }
.header__burger-line:nth-child(2) { top: 22px; }
.header__burger-line:nth-child(3) { top: 28px; }

.header__burger.is-active .header__burger-line:nth-child(1) {
  top: 22px;
  transform: rotate(45deg);
}
.header__burger.is-active .header__burger-line:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}
.header__burger.is-active .header__burger-line:nth-child(3) {
  top: 22px;
  transform: rotate(-45deg);
}

/* ============================================================================
   MOBILE MENU — premium editorial drawer (redesigned)
   Grouped navigation (NAVIGACIJA + SARADNJA), compact lang segmented
   control, single CTA, small status badge. Calm, scannable, not oversized.
   Max content width 420px, left-aligned, generous but not excessive padding.
   ============================================================================ */

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--bg-cream);
  z-index: 1000;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu__inner {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 22px clamp(24px, 7vw, 32px) 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Tightened section rhythm: was clamp(28px,4vh,44px). Sections breathe but
     don't drift apart on tall screens. CTA bottom area still gets explicit
     larger gap below. */
  gap: clamp(22px, 3.2vh, 32px);
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1) 0.08s,
              opacity 0.45s ease 0.08s;
}

.mobile-menu.is-open .mobile-menu__inner {
  transform: translateY(0);
  opacity: 1;
}

/* — Header (logo left, close right) — */
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 15, 14, 0.08);
  margin-bottom: 0;
}

.mobile-menu__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu__brand-img {
  height: 32px;
  width: auto;
  display: block;
}

.mobile-menu__close {
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 15, 14, 0.12);
  border-radius: 50%;
  transition: border-color 0.3s ease, transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.mobile-menu__close:hover,
.mobile-menu__close:active {
  border-color: var(--terracotta);
  transform: rotate(90deg);
}

.mobile-menu__close-line {
  position: absolute;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
  top: 50%;
  left: 50%;
  transition: background 0.3s ease;
}

.mobile-menu__close-line:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-menu__close-line:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-menu__close:hover .mobile-menu__close-line,
.mobile-menu__close:active .mobile-menu__close-line {
  background: var(--terracotta);
}

/* — Group blocks (NAVIGACIJA + SARADNJA + JEZIK) — */
.mobile-menu__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Tighter label → first-link spacing (was 8px) so the section reads as one
     editorial unit instead of two floating pieces. */
  gap: 6px;
}

.mobile-menu__group-label {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0;
  /* Tiny terracotta accent line before the label */
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mobile-menu__group-label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--terracotta);
  flex-shrink: 0;
}

/* — Nav links (left-aligned, refined size — premium nav, not page titles) — */
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
}

.mobile-menu__nav-link {
  display: inline-flex;
  align-items: center;
  /* Explicit text-align: left guards against any inherited centering from a
     parent (defensive — nav must stay editorial / left-anchored). */
  text-align: left;
  align-self: flex-start;
  font-family: "Fraunces", serif;
  font-weight: 400;
  /* Slightly trimmed size for tighter editorial rhythm (was 34-46px). */
  font-size: clamp(30px, 7.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
  /* Tighter vertical breathing (was clamp(9px, 1.5vh, 14px)). Floor at 7px so
     even on iPhone SE (320×568) the row clears the 44px touch-target floor. */
  padding: clamp(7px, 1.2vh, 10px) 0;
  white-space: nowrap;
  transition: color 0.25s ease, padding 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu__nav-link::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 1px;
  background: var(--terracotta);
  margin-left: 12px;
  align-self: center;
  transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.mobile-menu__nav-link:hover,
.mobile-menu__nav-link:active {
  color: var(--terracotta);
}

.mobile-menu__nav-link:hover::after {
  width: 24px;
}

/* — Language segmented control — */
.mobile-menu__group--lang {
  /* Tightened (was 14px) to match the trimmed section rhythm. */
  gap: 10px;
}

.mobile-menu__langs {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  background: rgba(15, 15, 14, 0.04);
  border: 1px solid rgba(15, 15, 14, 0.06);
  border-radius: 999px;
  align-self: flex-start;
}

.mobile-menu__lang {
  background: transparent;
  border: none;
  font-family: "Geist", sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.3s ease, color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}

.mobile-menu__lang:hover,
.mobile-menu__lang:active {
  color: var(--ink);
}

.mobile-menu__lang.is-active {
  background: var(--terracotta);
  color: var(--bg-cream);
}

/* — Bottom: CTA + status + hint —
   This block keeps a slightly larger top breathing room (margin-top) since the
   above section gap was trimmed; CTA area earns its space as the main action. */
.mobile-menu__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 0;
  margin-top: clamp(6px, 1.2vh, 14px);
}

.mobile-menu__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  /* ~60px tall (22px vertical padding + 14px font line-height ≈ 60px). */
  padding: 22px 32px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(183, 71, 42, 0.2);
  transition: background 0.3s ease, gap 0.3s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu__cta:hover,
.mobile-menu__cta:active {
  background: #9a3b22;
  gap: 14px;
}

.mobile-menu__cta-arrow {
  display: inline-block;
  font-size: 16px;
  transition: transform 0.3s ease;
}

.mobile-menu__cta:hover .mobile-menu__cta-arrow,
.mobile-menu__cta:active .mobile-menu__cta-arrow {
  transform: translateX(3px);
}

.mobile-menu__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 6px 14px;
  background: transparent;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  opacity: 0.85;
}

.mobile-menu__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: badgePulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

.mobile-menu__hint {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
  opacity: 0.75;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

body.is-menu-open {
  overflow: hidden;
  height: 100vh;
}

/* — Very small phones (≤380px) — proportionally tighter — */
@media (max-width: 380px) {
  .mobile-menu__inner {
    padding: 18px 22px 26px;
    gap: clamp(20px, 3vh, 32px);
  }
  .mobile-menu__brand-img {
    height: 26px;
  }
  .mobile-menu__close {
    width: 36px;
    height: 36px;
  }
  .mobile-menu__header {
    padding-bottom: 12px;
  }
  .mobile-menu__group {
    gap: 6px;
  }
  .mobile-menu__nav-link {
    font-size: 30px;
    padding: 8px 0;
  }
  .mobile-menu__group-label {
    font-size: 10px;
    letter-spacing: 0.24em;
  }
  .mobile-menu__group-label::before {
    width: 14px;
  }
  .mobile-menu__cta {
    padding: 18px 26px;
    font-size: 13px;
  }
  .mobile-menu__lang {
    padding: 7px 13px;
    font-size: 12px;
  }
  .mobile-menu__hint {
    font-size: 12px;
  }
}

/* Mobile breakpoint: shrink logo + tighten nav padding.
   (Burger visibility is now handled at the unified ≤1099px breakpoint
   above so tablet widths 769–1099 also get the burger — no gap.) */
@media (max-width: 768px) {
  .nav__logo-img  { height: 40px; }
  .nav            { padding: 12px 20px; }
}

/* Very small phones (iPhone SE 320-379px) — back off slightly */
@media (max-width: 380px) {
  .nav__logo-img { height: 34px; }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND MOMENT — Final emotional closing section before footer.
   "Jer Bosna ima dušu." with word-by-word reveal + line draw +
   supporting line. Lives as standalone <section> immediately
   before <footer>. Word stagger uses inline transition-delay set
   by JS (initBrandMoment) so any number of words / language works.
   ═══════════════════════════════════════════════════════════════ */

.brand-moment {
  position: relative;
  padding: clamp(120px, 18vw, 240px) 0;
  background: var(--bg-cream);
  text-align: center;
  overflow: hidden;
}

.brand-moment__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.brand-moment__title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(48px, 6vw, 80px) 0;
  /* Words injected as spans via JS for staggered reveal.
     Horizontal spacing is owned by .brand-moment__word (margin-inline),
     NOT by flex `gap`, so it stays correct on browsers where flex-gap
     fails. Parent only contributes a tiny row-gap so wrapped lines breathe. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  row-gap: 0.06em;
  column-gap: 0;
  max-width: 100%;
}

.brand-moment__word {
  position: relative;
  display: inline-block;
  /* Explicit horizontal spacing — independent of flex `gap` support which
     can fail on older mobile Safari. With margin-inline 0.125em on each
     word, the visible gap between any two adjacent words is 0.25em — same
     as the original design. */
  margin-inline: 0.125em;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

.brand-moment.is-visible .brand-moment__word {
  opacity: 1;
  transform: translateY(0);
}

/* Accent words — terracotta. Marked explicitly by .brand-moment__word--accent
   class (driven by brand.phraseParts[i].accent === true in i18n). Replaces
   the old :nth-child(2) + :last-child positional selectors, which only
   worked because BS/EN happened to have the same accent positions; DE word
   order (Weil Bosnien eine Seele hat.) needs accent on Bosnien (2nd) and
   Seele (4th), NOT the last word. Positional selectors can't express that. */
.brand-moment__word--accent {
  color: var(--terracotta);
}

.brand-moment__supporting {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.4;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(16px);
  /* Lands as the title's word stagger finishes (~0.9s) */
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.9s,
              transform 0.7s cubic-bezier(0.25, 1, 0.5, 1) 0.9s;
}

.brand-moment.is-visible .brand-moment__supporting {
  opacity: 1;
  transform: translateY(0);
}

/* CTA "Pročitaj našu filozofiju →" — canonical solid terracotta pill
   matching the rest of the site (.hero__cta-btn, .capture__btn,
   .places-cinematic__cta, .packages__cta-main). Subtle uppercase text-link
   was missed by users scrolling past, so promoted to a high-contrast
   button you can't miss against the cream brand-moment background.

   Reveal sequence (post-tightening): title word stagger 0.05–1.35s →
   supporting fades in at 0.9s → CTA fades in at 1.5s. Strict order
   words → supporting → CTA so the eye lands on each in turn. */
.brand-moment__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 52px);
  padding: 18px 36px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.22);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.5s,
              transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) 1.5s,
              background 0.3s ease,
              box-shadow 0.3s ease,
              gap 0.3s ease;
}

.brand-moment.is-visible .brand-moment__cta {
  opacity: 1;
  transform: translateY(0);
}

.brand-moment__cta-arrow {
  display: inline-block;
  font-size: 17px;
  transition: transform 0.3s ease;
}

/* Hover overrides the reveal transitions so it remains snappy after entrance */
.brand-moment__cta:hover {
  background: #9a3b22;
  box-shadow: 0 12px 32px rgba(183, 71, 42, 0.32);
  gap: 16px;
  transform: translateY(-2px);
}

.brand-moment__cta:hover .brand-moment__cta-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .brand-moment__word,
  .brand-moment__supporting {
    transition: none;
  }
  .brand-moment__word { opacity: 1; transform: none; }
  .brand-moment__supporting { opacity: 1; transform: none; }
  .brand-moment__cta { opacity: 1; transform: none; transition: color 0.3s ease, gap 0.3s ease; }
}

@media (max-width: 768px) {
  .brand-moment {
    padding: clamp(80px, 14vw, 120px) 0;
  }
  .brand-moment__title {
    font-size: clamp(56px, 16vw, 96px);
    row-gap: 0.04em;
    column-gap: 0;
  }
  .brand-moment__supporting {
    font-size: clamp(16px, 4vw, 19px);
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .brand-moment__title {
    font-size: clamp(48px, 14vw, 72px);
    line-height: 1.0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HEADER NAV REDESIGN — nav links + CTA + status pill + scrolled polish
   (Uses existing `.nav` element as the header container; new sub-elements
   sit alongside .nav__logo, .lang-switch, .nav__status.)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Nav links (desktop center) ─── */
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 36px);
  justify-self: center;
}

.nav__link {
  position: relative;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--bg-cream);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 0;
  transition: color 0.3s ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav__link:hover {
  color: var(--terracotta);
}
.nav__link:hover::after {
  transform: scaleX(1);
}

/* Status pill (redesign existing .nav__status as a pill with terracotta border) */
.nav__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(244, 239, 229, 0.3);
  border-radius: 999px;
  transition: border-color 0.4s ease;
}

/* CTA button */
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--terracotta);
  color: var(--bg-cream);
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  transition: background 0.3s ease, gap 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(183, 71, 42, 0.18);
}
.nav__cta:hover {
  background: #9a3b22;
  gap: 12px;
  box-shadow: 0 4px 16px rgba(183, 71, 42, 0.32);
}
.nav__cta-arrow {
  transition: transform 0.3s ease;
}
.nav__cta:hover .nav__cta-arrow {
  transform: translateX(2px);
}

/* ─── SCROLLED state polish (existing .nav.scrolled already handles bg)
   Add tighter border, subtle shadow, and recolor nav links/cta. */
.nav.scrolled {
  border-bottom: 1px solid rgba(15, 15, 14, 0.08);
  box-shadow: 0 1px 0 rgba(15, 15, 14, 0.02),
              0 8px 24px -16px rgba(15, 15, 14, 0.08);
}
.nav.scrolled .nav__link {
  color: var(--ink);
}
.nav.scrolled .nav__status {
  border-color: rgba(15, 15, 14, 0.15);
}
.nav.scrolled .nav__cta {
  /* Stays terracotta on scroll — it's the action; keeps contrast. */
}

/* Subpages (always solid header) — same treatment as .scrolled for links */
body.legal-page .nav__link,
body.propose-page .nav__link,
body.place-detail-page .nav__link,
body.partner-page .nav__link {
  color: var(--ink);
}
body.legal-page .nav__status,
body.propose-page .nav__status,
body.place-detail-page .nav__status,
body.partner-page .nav__status {
  border-color: rgba(15, 15, 14, 0.15);
}

/* ─── Tablet + mobile (≤1099px): nav reverts to flex space-between so
   logo + burger sit at edges without a 3rd grid column producing weird
   centering. The burger is also shown HERE (not at 768px) so there is
   no gap between 769–1099px where neither desktop nav nor burger are
   visible — that was the 820px iPad Air "empty header" bug. ─── */
@media (max-width: 1099px) {
  .nav {
    display: flex;
    justify-content: space-between;
    gap: 0;
  }
  .nav__links,
  .nav__cta,
  .nav__right {
    display: none;
  }
  .header__burger {
    display: block;
  }
}

/* Anchor offset so fixed header doesn't cover scrolled-into section */
section[id="mjesta"],
section[id="rute"],
section[id="capture"] {
  scroll-margin-top: 80px;
}

/* (Legacy MOBILE DRAWER block removed 2026-05 — was orphaned after the
   grouped-menu rewrite and was overriding the new .mobile-menu__nav-link
   font-size: 15px with font-size: 32px due to source order. The canonical
   styles for the drawer live higher up in this file. Don't reintroduce
   selectors here without checking the upper block first.) */

/* ═══════════════════════════════════════════════════════════════
   PACKAGES (Rute) — Forest green CTA, terracotta hover.
   Matches the .digital section ("Bosna koja priča svoju priču") tone.
   Overrides legacy .package__cta button styles earlier in this file.
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
}

/* ═══════════════════════════════════════════════════════════════
   FORM STATES — GDPR consent, submit button busy, inline error
   ═══════════════════════════════════════════════════════════════ */

/* GDPR consent (capture + propose forms) */
.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 6px 0;
  margin-top: clamp(20px, 2.5vw, 28px);
}

.form-consent__checkbox {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--terracotta);
  cursor: pointer;
}

.form-consent__text {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 42rem;
}

.form-consent__text a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-consent__text a:hover {
  color: var(--ink);
}

/* Submit button — disabled / busy state */
button[type="submit"].is-submitting,
button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: wait;
  pointer-events: none;
}

/* Inline form error (Formspree fail / network error) */
.form-error {
  display: none;
  margin-top: clamp(16px, 2vw, 20px);
  padding: 14px 18px;
  background: rgba(183, 71, 42, 0.06);
  border-left: 3px solid var(--terracotta);
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.form-error[aria-hidden="false"] {
  display: block;
}

.form-error a {
  color: var(--terracotta);
  font-weight: 600;
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE FIXES — Pillar 03 (Skeniraj) + Digital/QR section cleanup
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* PILLAR 03 (Skeniraj) — decorative grid out of the way, "Stiže uskoro"
     pill flows in normal card order at top instead of absolute top-left. */
  .pillar--dark .pillar__qr-deco {
    display: none;
  }
  .pillar--dark .pillar__soon {
    position: static;
    display: inline-flex;
    margin: 0 0 16px;
    /* Slightly stronger tone since it's now a real label, not a corner mark */
    color: rgba(244, 239, 229, 0.75);
    pointer-events: auto;
  }

  /* DIGITAL (QR teaser "Bosna koja priča svoju priču") — drop the QR card
     mockup entirely on mobile; it doesn't render meaningfully at narrow widths.
     Content (eyebrow / title / desc / features / CTA) becomes the whole section. */
  .digital__media {
    display: none;
  }
  .digital__inner {
    gap: 0;
  }
  .digital__content {
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS MODAL — Full-screen premium thank you (waitlist + propose)
   ═══════════════════════════════════════════════════════════════ */

.success-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1),
              visibility 0.5s;
  overflow-y: auto;
}

.success-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.success-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 14, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
}

.success-modal__card {
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: auto;
  padding: clamp(40px, 5vw, 64px);
  background: var(--bg-cream);
  border-radius: 8px;
  box-shadow: 0 24px 64px -16px rgba(15, 15, 14, 0.4);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success-modal[aria-hidden="false"] .success-modal__card {
  transform: translateY(0) scale(1);
}

.success-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(15, 15, 14, 0.12);
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, transform 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.success-modal__close:hover {
  background: var(--ink);
  color: var(--bg-cream);
  border-color: var(--ink);
  transform: rotate(90deg);
}

.success-modal__logo {
  text-align: center;
  margin-bottom: 24px;
}

.success-modal__logo img {
  display: inline-block;
  width: clamp(64px, 8vw, 96px);
  height: auto;
}

.success-modal__accent {
  width: 48px;
  height: 2px;
  background: var(--terracotta);
  margin: 0 auto 32px;
}

.success-modal__title {
  text-align: center;
  margin: 0 0 32px 0;
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
}

.success-modal__greeting {
  display: block;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.success-modal__subtitle {
  display: block;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
  font-weight: 400;
  color: var(--ink-soft);
}

.success-modal__body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 24px 0;
  text-align: left;
  max-width: 42rem;
}

.success-modal__pullquote {
  border-left: 3px solid var(--terracotta);
  padding: 8px 0 8px 20px;
  margin: 24px 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.5;
  color: var(--ink);
}

.success-modal__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 32px 0 16px 0;
}

.success-modal__list {
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
}

.success-modal__list-item {
  font-family: "Geist", sans-serif;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 8px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.success-modal__list-arrow {
  color: var(--terracotta);
  font-weight: 600;
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.5;
}

.success-modal__closing {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 24px 0 16px 0;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
}

.success-modal__closing a {
  color: var(--terracotta);
  text-decoration: none;
  font-weight: 500;
}

.success-modal__closing a:hover {
  text-decoration: underline;
}

.success-modal__brand-phrase {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.4;
  color: var(--terracotta);
  margin: 16px 0 32px 0;
  text-align: left;
}

/* Promoted to canonical primary CTA — was forest, now matches the same
   terracotta family as hero / capture / packages / etc. */
.success-modal__cta {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: var(--terracotta);
  color: var(--bg-cream);
  border: none;
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  margin-bottom: 32px;
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.22);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.success-modal__cta:hover {
  background: #9a3b22;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(183, 71, 42, 0.32);
}

.success-modal__footer {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid rgba(15, 15, 14, 0.08);
}

.success-modal__brand {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px 0;
}

.success-modal__tagline {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 12px 0;
}

.success-modal__signature {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  color: var(--terracotta);
  margin: 0;
}

@media (max-width: 600px) {
  .success-modal {
    padding: 16px;
    align-items: flex-start;
  }
  .success-modal__card {
    padding: 32px 24px;
    margin-top: 24px;
  }
  .success-modal__close {
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
  }
  .success-modal__logo { margin-bottom: 16px; }
  .success-modal__accent { margin-bottom: 24px; }
  .success-modal__title { margin-bottom: 24px; }
  .success-modal__list-item { font-size: 14px; }
}

body.modal-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   BRAND LINE — River-curve SVG used as decorative underline.
   Used as inline <svg class="brand-line"> + size modifiers.
   Animation: stroke-dashoffset draws path on .is-visible parent/self.
   ═══════════════════════════════════════════════════════════════ */

.brand-line {
  display: block;
  width: 100%;
  height: auto;
  color: var(--terracotta);
  pointer-events: none;
}

.brand-line--small {
  width: 80px;
  height: 5px;
}

.brand-line--medium {
  width: 120px;
  height: 6px;
}

.brand-line--large {
  width: clamp(140px, 16vw, 220px);
  height: clamp(8px, 1vw, 12px);
}

.brand-line path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  /* Lock stroke to constant pixel width regardless of SVG scale —
     otherwise hero short words ("šuma") render thinner than long ones. */
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.brand-line.is-visible path,
.is-visible .brand-line path {
  stroke-dashoffset: 0;
}

/* Hero emphasis uses the simple straight ::after underline (defined earlier
   in this file at .hero__title em::after). No SVG injection.
   Brand-moment uses highlighter ::before on 2nd + last word (defined above). */

@media (prefers-reduced-motion: reduce) {
  .brand-line path {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GRADOVI PAGE — "Uskoro" page za gradove i institucije
   Editorial premium ton, BS-only sadržaj, solid nav uvijek.
   ═══════════════════════════════════════════════════════════════ */

/* Solid nav from start (same treatment as legal/propose/place-detail/partner pages). */
body.city-page-body .nav {
  padding: 16px 48px;
  background: rgba(244, 239, 229, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(139, 126, 110, 0.08);
}
body.city-page-body .nav__logo-img { filter: none; height: 56px; }
body.city-page-body .nav__status   { color: var(--ink-soft); }
body.city-page-body .nav__link     { color: var(--ink); }
body.city-page-body .nav__status   { border-color: rgba(15, 15, 14, 0.15); }
body.city-page-body .lang-btn      { color: rgba(15, 15, 14, 0.55); }
body.city-page-body .lang-btn:hover,
body.city-page-body .lang-btn:focus-visible,
body.city-page-body .lang-btn.is-active { color: var(--terracotta); }
body.city-page-body .lang-divider  { color: rgba(15, 15, 14, 0.25); }
body.city-page-body .header__burger-line { background: var(--ink); }
@media (max-width: 768px) {
  body.city-page-body .nav { padding: 14px 24px; }
}

.city-page {
  background: var(--bg-cream);
  padding-top: 96px;
}

.city-page__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.city-page__topbar {
  padding-top: clamp(20px, 3vw, 32px);
}

/* ─── Hero ─── */
.city-hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 120px);
}

.city-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(20, 60, 46, 0.06);
  border: 1px solid rgba(20, 60, 46, 0.16);
  border-radius: 999px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.city-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forest);
  animation: statusPulse 2.4s ease-in-out infinite;
}

.city-hero__badge-text {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--forest);
}

.city-hero__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 24px;
}

.city-hero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 920px;
}

.city-hero__title-emphasis {
  font-style: italic;
  color: var(--forest);
}

.city-hero__lead {
  font-family: "Fraunces", serif;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0;
}

/* ─── Vision ─── */
.city-vision {
  padding: clamp(64px, 10vw, 120px) 0;
  border-top: 1px solid rgba(15, 15, 14, 0.06);
}

.city-vision__intro {
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 720px;
}

.city-vision__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 24px;
}

.city-vision__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.city-vision__title-italic {
  font-style: italic;
  color: var(--terracotta);
}

.city-vision__story {
  max-width: 720px;
}

.city-vision__paragraph {
  font-family: "Fraunces", serif;
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 42rem;
}

/* ─── Šta dolazi (3 cards) ─── */
.city-coming {
  padding: clamp(64px, 10vw, 120px) 0;
  background: rgba(20, 60, 46, 0.03);
}

.city-coming__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 24px;
}

.city-coming__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 clamp(48px, 6vw, 64px);
}

.city-coming__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 48px);
}

.city-coming__card-num {
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 24px;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 16px;
}

.city-coming__card-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
}

.city-coming__card-desc {
  font-family: "Geist", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ─── Status (Uskoro + CTA) ─── */
.city-status {
  padding: clamp(80px, 12vw, 160px) 0;
  border-top: 1px solid rgba(15, 15, 14, 0.06);
}

.city-status__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.city-status__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 24px;
}

.city-status__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 40px;
}

.city-status__title-italic {
  font-style: italic;
  color: var(--terracotta);
}

.city-status__body {
  font-family: "Fraunces", serif;
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 42rem;
}

.city-status__signature {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  color: var(--terracotta);
  margin: 40px 0;
}

.city-status__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  background: var(--forest);
  color: var(--bg-cream);
  font-family: "Geist", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.4s ease, color 0.4s ease,
              border-color 0.4s ease, gap 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
  box-shadow: 0 4px 14px -4px rgba(20, 60, 46, 0.4);
}

.city-status__cta:hover {
  background: var(--terracotta);
  gap: 16px;
  box-shadow: 0 6px 20px -4px rgba(183, 71, 42, 0.5);
}

.city-status__cta-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.city-status__cta:hover .city-status__cta-arrow {
  transform: translateX(3px);
}

.city-status__email {
  font-family: "Geist", sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  margin-top: 24px;
}

.city-status__email a {
  color: var(--terracotta);
  text-decoration: none;
  font-weight: 500;
}

.city-status__email a:hover {
  text-decoration: underline;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .city-page { padding-top: 80px; }
  .city-coming__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PARTNERI PAGE — Editorial premium style mirroring city-* pattern
   Replaces the inline <style> block that was in partneri.html.
   Solid nav already handled by body.partner-page rules earlier in file.
   ═══════════════════════════════════════════════════════════════ */

.partner-page {
  background: var(--bg-cream);
  padding-top: 96px;
}

.partner-page__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.partner-page__topbar {
  padding-top: clamp(20px, 3vw, 32px);
}

/* ─── Hero ─── */
.partner-hero {
  padding: clamp(48px, 8vw, 96px) 0 clamp(64px, 10vw, 120px);
  position: static;
  min-height: 0;
  background: transparent;
  border-bottom: none;
  display: block;
}

.partner-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(20, 60, 46, 0.06);
  border: 1px solid rgba(20, 60, 46, 0.16);
  border-radius: 999px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.partner-hero__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--forest);
  animation: statusPulse 2.4s ease-in-out infinite;
}

.partner-hero__badge-text {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--forest);
}

.partner-hero__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 24px;
}

.partner-hero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 32px;
  max-width: 920px;
  text-wrap: balance;
}

.partner-hero__title em {
  font-style: italic;
  color: var(--forest);
}

.partner-hero__sub {
  font-family: "Fraunces", serif;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0;
  font-style: normal;
}

/* ─── Why ─── */
.partner-why {
  padding: clamp(64px, 10vw, 120px) 0;
  background: rgba(20, 60, 46, 0.03);
  border-top: 1px solid rgba(15, 15, 14, 0.06);
}

.partner-why__header {
  text-align: left;
  margin-bottom: clamp(48px, 6vw, 64px);
  max-width: 720px;
}

.partner-why__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 24px;
}

.partner-why__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  max-width: none;
}

.partner-why__title em {
  font-style: italic;
  color: var(--terracotta);
}

.partner-why__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 5vw, 64px);
}

.partner-why__item {
  display: flex;
  flex-direction: column;
}

.partner-why__num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 24px;
  color: var(--terracotta);
  font-weight: 500;
  margin-bottom: 16px;
}

.partner-why__name {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(22px, 2.5vw, 28px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}

.partner-why__desc {
  font-family: "Geist", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}

/* ─── Form section ─── */
.partner-form-section {
  padding: clamp(64px, 10vw, 120px) 0;
  background: var(--bg-cream);
  border-top: 1px solid rgba(15, 15, 14, 0.06);
}

.partner-form-section__header {
  margin-bottom: clamp(40px, 5vw, 56px);
  max-width: 720px;
}

.partner-form-section__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 600;
  margin: 0 0 24px;
}

.partner-form-section__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 48px);
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.partner-form-section__title em {
  font-style: italic;
  color: var(--terracotta);
}

.partner-form-section__intro {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

.partner-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 920px;
}

.partner-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.partner-form__row--single { grid-template-columns: 1fr; }

.partner-form__field { display: flex; flex-direction: column; }

.partner-form__label {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.partner-form__input,
.partner-form__select,
.partner-form__textarea {
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg-cream);
  border: 1px solid rgba(139, 126, 110, 0.28);
  border-radius: 4px;
  padding: 14px 16px;
  font-family: "Geist", sans-serif;
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.3s ease;
}

.partner-form__textarea {
  resize: vertical;
  min-height: 120px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
}

.partner-form__input:focus,
.partner-form__select:focus,
.partner-form__textarea:focus {
  border-color: var(--terracotta);
  outline: none;
}

.partner-form__btn {
  appearance: none;
  align-self: flex-start;
  background: var(--forest);
  color: var(--bg-cream);
  border: 0;
  padding: 18px 36px;
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 14px -4px rgba(20, 60, 46, 0.4);
}

.partner-form__btn:hover {
  background: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -4px rgba(183, 71, 42, 0.5);
}

.partner-form__btn > span:last-child {
  display: inline-block;
  transition: transform 0.3s ease;
}
.partner-form__btn:hover > span:last-child {
  transform: translateX(4px);
}

.partner-form__note {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  color: var(--stone-dark);
  margin-top: 12px;
  max-width: 720px;
}

.partner-form-section__success {
  display: none;
  padding: 40px 32px;
  text-align: center;
  background: rgba(20, 60, 46, 0.04);
  border-left: 3px solid var(--forest);
  border-radius: 0 6px 6px 0;
  margin-top: 32px;
}

.partner-form-section.is-submitted .partner-form,
.partner-form-section.is-submitted .partner-form-section__header,
.partner-form-section.is-submitted .partner-form__note {
  display: none;
}

.partner-form-section.is-submitted .partner-form-section__success {
  display: block;
}

.partner-form-section__success-text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 24px);
  color: var(--ink);
  margin: 0;
}

@media (max-width: 768px) {
  .partner-page { padding-top: 80px; }
  .partner-why__grid { grid-template-columns: 1fr; gap: 32px; }
  .partner-form__row { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================================
   PLACES "more" CTA block — bridges the trimmed 3-frame showcase to the future
   /mjesta.html index page. Sits inside .places-cinematic, after the last frame
   and before the outro paragraph.
   ============================================================================ */

.places-cinematic__more {
  text-align: center;
  padding: clamp(60px, 10vh, 120px) 24px;
  background: var(--bg-cream);
}

.places-cinematic__more-eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 16px;
}

.places-cinematic__more-title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.3;
  color: var(--ink);
  max-width: 800px;
  margin: 0 auto 32px;
}

.places-cinematic__more-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.places-cinematic__more-cta:hover {
  background: #9a3b22;
  transform: translateY(-2px);
}

/* ============================================================================
   CTA STRIP — full-bleed conversion nudge between Places and Services. Forest
   green band, italic editorial line + terracotta button anchored to #capture.
   ============================================================================ */

.cta-strip {
  background: var(--forest);
  padding: clamp(24px, 4vh, 40px) 24px;
}

.cta-strip__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-strip__text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2.5vw, 24px);
  color: var(--bg-cream);
  margin: 0;
  flex: 1;
  min-width: 280px;
  max-width: 42rem;
}

.cta-strip__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.3s ease;
}

.cta-strip__button:hover {
  background: #9a3b22;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .cta-strip__inner {
    flex-direction: column;
    text-align: center;
  }
  .cta-strip__text {
    margin-bottom: 8px;
  }
}

/* ============================================================================
   PACKAGES consolidated CTA block — replaces the three per-package "Pridruži
   se" buttons. Three chips (radio-like, exclusive selection) feed the hidden
   `package` input on the Capture form, then a single primary CTA scrolls to
   #capture with that route context already set.
   ============================================================================ */

/* Single solid pill below the 3 package cards — matches canonical CTA pattern
   (.hero__cta-btn, .places-cinematic__cta). No chip preselection, no eyebrow:
   the section's H2 + 3 cards already contextualise what "the early list" is. */
.packages__cta-block {
  text-align: center;
  padding: clamp(28px, 4vh, 44px) 24px clamp(20px, 3vh, 32px);
  background: var(--bg-cream);
}

.packages__cta-main {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.packages__cta-main:hover {
  background: #9a3b22;
  transform: translateY(-2px);
}

/* ============================================================================
   PLACES INDEX PAGE — /mjesta.html
   Re-uses .city-page, .city-hero, .frame, .places-cinematic from styles above.
   These rules layer page-specific spacing + the "Više uskoro" placeholder block.
   ============================================================================ */

/* Loosen the home-page Places intro spacing for the dedicated subpage:
   the subpage already has a hero above the frames, so the .places-cinematic
   wrapper doesn't need its top padding. */
.places-index-frames {
  padding-top: 0;
}
.places-index-frames .places-cinematic__frames {
  padding-top: clamp(40px, 6vw, 72px);
}

/* "Više uskoro" placeholder — final section of /mjesta.html */
.places-index-more {
  padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 64px);
  background: var(--bg-cream);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.places-index-more__inner {
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.places-index-more__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 20px;
}

.places-index-more__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 28px;
}

.places-index-more__title em {
  font-style: italic;
  color: var(--terracotta);
}

.places-index-more__text {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  /* margin: 0 auto centres the 42rem block within the parent's 820px
     wrapper. Without auto, the block sat flush-left, so the centred text
     inside it appeared offset from true page centre. */
  margin: 0 auto 40px;
  max-width: 42rem;
  text-wrap: balance;
}

.places-index-more__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 48px;
  max-width: 720px;
}

.places-index-more__chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(15, 15, 14, 0.16);
  color: var(--ink-soft);
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: default;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Hover signals these are real entities we're building, even though they
   aren't clickable yet. Same outline → terracotta fill rhythm as the
   home-page route chips (now removed but the visual pattern lives on). */
.places-index-more__chip:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--bg-cream);
}

/* "i mnoga druga" — bigger italic Fraunces variant, sits as the visual
   period at the end of the chip cloud. Editorial signal, not a list item. */
.places-index-more__chip--more {
  padding: 12px 22px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--terracotta);
  border-color: var(--terracotta);
  text-transform: lowercase;
}

.places-index-more__chip--more:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--bg-cream);
}

.places-index-more__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.places-index-more__cta:hover {
  background: #9a3b22;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .places-index-more__chip {
    font-size: 12px;
    padding: 8px 14px;
  }
}

/* ============================================================================
   UTILITY — .is-hidden
   Generic display-none toggle. Used right now to hide the footer social
   column on every page until the real Instagram/TikTok/Facebook accounts
   exist. Remove the class + the `hidden` attribute from the wrapping
   .foot__col when the accounts go live.
   ============================================================================ */

.is-hidden {
  display: none !important;
}

/* ============================================================================
   NAV LINK — active page state
   Subtle terracotta marker on the current-page nav link. Triggered via
   .is-active class + aria-current="page" on the matching <a>. Currently
   used on /mjesta.html ("Mjesta" tab) — extend to other subpages when
   they get a dedicated landing page (partneri, gradovi, etc.).
   ============================================================================ */

.nav__link.is-active {
  color: var(--terracotta);
  font-weight: 500;
}

.nav.scrolled .nav__link.is-active {
  color: var(--terracotta);
}

/* ============================================================================
   CANONICAL SECTION PADDING — single source of truth for vertical rhythm
   across the entire site. Placed at the very end of this file so it wins
   over every earlier section-specific rule (CSS source order specificity).

   Vertical scale: clamp(56px, 6vw, 96px)
     320px  (small phone)    → 56px
     768px  (tablet)         → 56px (still at clamp min)
     1024px (small laptop)   → 61px
     1280px (laptop)         → 77px
     1440px (desktop)        → 86px
     1600px+ (27"/32" mon.)  → 96px (clamp max)

   Horizontal scale: clamp(24px, 6vw, 80px) — for sections that own their
   own gutter (services/packages/capture/digital/places__intro). Sections
   that don't pad horizontally (manifest, pillars, audiences, brand-moment)
   rely on inner wrappers to gutter their own content.

   Section-divider scale: clamp(20px, 3vw, 40px) — slightly tighter than
   section padding so visual rhythm reads:
     [section bottom][breath][· · ·][breath][next section top]
   without doubling up the gap between content blocks.
   ============================================================================ */

/* Section divider (· · · between major sections) */
.section-divider {
  padding: clamp(20px, 3vw, 40px) 0;
}

/* Sections WITHOUT horizontal padding (rely on inner wrapper for gutter) */
.manifest,
.pillars,
.audiences,
.brand-moment {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
  padding-left: 0;
  padding-right: 0;
}

/* Sections WITH horizontal padding (own their gutter directly) */
.intro__services,
.packages,
.places-cinematic__intro,
.places-cinematic__outro,
.capture,
.digital,
.places-index-more {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

/* Slim by-design strips — full-bleed conversion bridges, not content
   sections. Same vertical scale as the section-divider so they read as
   visual punctuation between sections. */
.cta-strip {
  padding-top: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(20px, 3vw, 40px);
}

/* Inside-section sub-blocks — sit INSIDE an already-padded parent section,
   so use half the section vertical scale to avoid stacking gaps.
   Applies to:
   - .places-cinematic__more  → "I još mjesta" CTA block on home page Places
   - .packages__cta-block     → consolidated CTA below 3 package cards */
.places-cinematic__more,
.packages__cta-block {
  padding-top: clamp(28px, 3vw, 48px);
  padding-bottom: clamp(28px, 3vw, 48px);
}

/* ============================================================================
   PACKAGE CHIP — "i još N" overflow variant
   Dashed terracotta border + Fraunces italic — visually signals "there's more
   here" without competing with the solid-style location chips next to it.
   ============================================================================ */

.package__chip--more {
  background: transparent;
  border: 1px dashed var(--terracotta);
  color: var(--terracotta);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: lowercase;
  cursor: default;
  transition: background 0.3s ease, color 0.3s ease, border-style 0.3s ease;
}

.package__chip--more:hover {
  background: var(--terracotta);
  border-style: solid;
  color: var(--bg-cream);
}

/* ============================================================================
   FOOTER — minimal tagline block (replaces 3-pillar philosophy)
   Editorial single-line + link to /o-nama.html for the full philosophy.
   ============================================================================ */

/* Footer is cream-on-cream (light bg) — tagline uses dark ink-soft text;
   link uses terracotta. Hover darkens (no flip to invisible cream). */
.foot__tagline-block {
  padding: clamp(20px, 3vw, 36px) clamp(24px, 6vw, 80px);
  text-align: center;
  border-bottom: 1px solid rgba(15, 15, 14, 0.06);
}

.foot__tagline-block .foot__tagline {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--ink-soft);
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
}

/* Editorial CTA link — text + arrow as separate spans so the arrow can
   translateX on hover (canonical pattern shared with .frame__cta-link,
   .packages__chip-arrow, etc). Subtle by-design — sits in the footer,
   should signal "follow this thread" without competing with form CTAs. */
.foot__tagline-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--terracotta);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.3s ease, gap 0.3s ease;
}

.foot__tagline-link-arrow {
  display: inline-block;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.foot__tagline-link:hover {
  color: #9a3b22;
  gap: 12px;
}

.foot__tagline-link:hover .foot__tagline-link-arrow {
  transform: translateX(3px);
}

/* ============================================================================
   /o-nama.html — page-specific styling
   Re-uses .city-page, .city-hero, .city-page__inner from styles above.
   These rules layer the story / philosophy / team / contact sections.
   ============================================================================ */

/* — STORY (sits between hero and philosophy — emotional editorial centerpiece)
   Decorative river/topographic SVG sits behind the prose at low opacity,
   echoing the rivers/bridges/roads referenced in the copy. Inner content
   has higher z-index so SVG never competes with text. */
.onama-story {
  position: relative;
  background: var(--bg-cream-warm);
  border-top: 1px solid rgba(15, 15, 14, 0.05);
  border-bottom: 1px solid rgba(15, 15, 14, 0.05);
  overflow: hidden;
}

.onama-story__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--terracotta);
  pointer-events: none;
  z-index: 0;
}

.onama-story .city-page__inner {
  position: relative;
  z-index: 1;
}

.onama-story__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.onama-story__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 20px;
  text-align: center;
}

.onama-story__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(36px, 4vw, 56px);
  text-align: center;
}

.onama-story__title em {
  font-style: italic;
  color: var(--terracotta);
}

.onama-story__body {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 28px);
}

.onama-story__paragraph {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
  max-width: 42rem;
}

/* First-line drop-cap-style emphasis — first word of paragraph 1 in italic */
.onama-story__paragraph:first-child::first-line {
  font-style: italic;
}

.onama-story__signature {
  margin: clamp(36px, 4vw, 56px) 0 0;
  text-align: center;
  font-family: "Fraunces", serif;
  font-size: clamp(15px, 1.5vw, 18px);
  color: var(--terracotta);
  letter-spacing: 0.02em;
}

.onama-story__signature em {
  font-style: italic;
}

@media (max-width: 640px) {
  .onama-story__inner {
    text-align: left;
  }
  .onama-story__paragraph {
    font-size: clamp(16px, 4.4vw, 18px);
  }
}

.onama-philosophy {
  background: var(--bg-cream);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.onama-philosophy__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.onama-philosophy__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 16px;
}

.onama-philosophy__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

.onama-philosophy__title em {
  font-style: italic;
  color: var(--terracotta);
}

.onama-philosophy__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
  max-width: 1100px;
  margin: 0 auto;
}

.onama-philosophy__pillar {
  text-align: left;
}

.onama-philosophy__num {
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 64px);
  color: var(--terracotta);
  line-height: 1;
  margin-bottom: 20px;
}

.onama-philosophy__pillar-title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 12px;
}

.onama-philosophy__pillar-desc {
  font-family: "Geist", sans-serif;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 768px) {
  .onama-philosophy__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* — TEAM (forest dark band) — */
.onama-team {
  background: var(--forest);
  color: var(--bg-cream);
  text-align: center;
}

.onama-team__inner {
  max-width: 760px;
  margin: 0 auto;
}

.onama-team__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 16px;
}

.onama-team__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 24px;
  color: var(--bg-cream);
}

.onama-team__title em {
  font-style: italic;
  color: var(--terracotta);
}

/* Two-paragraph body — refined statement, replaces the old dashed placeholder.
   Same Fraunces register as story prose so it reads continuous with the rest. */
.onama-team__body {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
  max-width: 660px;
  margin: 0 auto;
}

.onama-team__paragraph {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.65;
  color: rgba(244, 239, 229, 0.92);
  margin: 0;
  text-wrap: pretty;
  max-width: 42rem;
}

.onama-team__closing {
  margin: clamp(36px, 4vw, 56px) 0 0;
  text-align: center;
  font-family: "Fraunces", serif;
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--terracotta);
  letter-spacing: 0.02em;
}

.onama-team__closing em {
  font-style: italic;
}

/* — CONTACT — */
.onama-contact {
  background: var(--bg-cream);
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.onama-contact__inner {
  max-width: 760px;
  margin: 0 auto;
}

.onama-contact__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 16px;
}

.onama-contact__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
}

.onama-contact__title em {
  font-style: italic;
  color: var(--terracotta);
}

.onama-contact__lead {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 auto 40px;
  max-width: 520px;
}

.onama-contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
  max-width: 1080px;
  margin: 0 auto;
}

.onama-contact__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3vw, 40px) clamp(16px, 2vw, 24px);
  background: rgba(15, 15, 14, 0.02);
  border: 1px solid rgba(15, 15, 14, 0.06);
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.onama-contact__card:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: translateY(-2px);
}

.onama-contact__card-label {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  margin: 0 0 12px;
  transition: color 0.3s ease;
}

/* Email value uses Geist sans — emails are technical data, not editorial
   prose. Sans is ~10-15% more compact than italic Fraunces at the same size,
   which lets longer addresses (partner@soulofbosnia.com is 24 chars) fit in
   one line on tight 1024-1100px viewports without overflow. The label above
   still carries the editorial register; this just keeps the address legible. */
.onama-contact__card-value {
  font-family: "Geist", sans-serif;
  font-style: normal;
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
  hyphens: none;
  transition: color 0.3s ease;
}

/* Third card — "Suggest a place". Has a body line + CTA arrow instead of a
   plain mailto value. Same hover (terracotta fill, cream text). Arrow
   translates X on hover via the --propose modifier. */
.onama-contact__card-text {
  font-family: "Geist", sans-serif;
  font-size: clamp(13px, 1.1vw, 14px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
  transition: color 0.3s ease;
}

.onama-contact__card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  margin-top: auto;
  transition: color 0.3s ease, gap 0.3s ease;
}

.onama-contact__card-cta-arrow {
  display: inline-block;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.onama-contact__card:hover .onama-contact__card-label,
.onama-contact__card:hover .onama-contact__card-value,
.onama-contact__card:hover .onama-contact__card-text,
.onama-contact__card:hover .onama-contact__card-cta {
  color: var(--bg-cream);
}

.onama-contact__card--propose:hover .onama-contact__card-cta {
  gap: 12px;
}

.onama-contact__card--propose:hover .onama-contact__card-cta-arrow {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .onama-contact__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

/* Add /o-nama page sections to canonical section padding (overrides earlier) */
.onama-story,
.onama-philosophy,
.onama-team,
.onama-contact {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

/* ============================================================================
   ROUTES TEASER — homepage compact section
   Replaces the old 3 full package cards. Featured large card (Grand Tour)
   spans the full width, two mini cards sit side-by-side below. Goal is
   ~1.4 vh on desktop (was ~3 vh with full cards). Full route detail lives
   on /rute.html — this is the trailer.
   ============================================================================ */

.routes-teaser {
  background: var(--bg-cream);
}

.routes-teaser__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.routes-teaser__header {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.routes-teaser__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 16px;
}

.routes-teaser__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
}
.routes-teaser__title em {
  font-style: italic;
  color: var(--terracotta);
}

.routes-teaser__lead {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  /* 72rem (~1152px) — wide enough at desktop body font for the first sentence
     ("Kada mreža mjesta… rute.") to fit on one line. The route-final-line
     span then forces "Za sada gradimo temelje." onto its own block as line 2.
     Total: 2 lines on desktop ≥1024px. Mobile naturally wraps below the
     max-width, producing 3-4 lines which is acceptable per spec. */
  max-width: 72rem;
  margin: 0 auto;
}

/* — Featured card (Grand Tour) — image left, content right on desktop */
.routes-teaser__featured {
  margin-bottom: clamp(20px, 2.4vw, 32px);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(15, 15, 14, 0.08);
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.routes-teaser__featured:hover {
  border-color: rgba(183, 71, 42, 0.22);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15, 15, 14, 0.06);
}

.routes-teaser__featured-link {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  text-decoration: none;
  color: inherit;
}

.routes-teaser__featured-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.routes-teaser__featured-image picture,
.routes-teaser__featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.routes-teaser__featured:hover .routes-teaser__featured-image img {
  transform: scale(1.04);
}

.routes-teaser__badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: var(--bg-cream);
  border: 1px solid rgba(15, 15, 14, 0.08);
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.routes-teaser__badge--on-image {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(244, 239, 229, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.routes-teaser__featured-content {
  padding: clamp(32px, 3.5vw, 56px) clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.routes-teaser__featured-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
}
.routes-teaser__featured-title em {
  font-style: italic;
  color: var(--terracotta);
}

.routes-teaser__featured-desc {
  font-family: "Geist", sans-serif;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 48ch;
}

.routes-teaser__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.routes-teaser__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid rgba(15, 15, 14, 0.16);
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-soft);
}

.routes-teaser__chip--more {
  font-family: "Fraunces", serif;
  font-style: italic;
  border-color: var(--terracotta);
  color: var(--terracotta);
}

/* — 2 mini cards row (Sjeverna + Sarajevo→Hercegovine) — */
.routes-teaser__mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 1.6vw, 20px);
  margin-bottom: clamp(40px, 4.5vw, 64px);
}

.routes-teaser__mini {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(15, 15, 14, 0.08);
  border-left: 2px solid var(--terracotta);
  border-radius: 6px;
  transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.routes-teaser__mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 15, 14, 0.05);
  border-top-color: rgba(183, 71, 42, 0.22);
  border-right-color: rgba(183, 71, 42, 0.22);
  border-bottom-color: rgba(183, 71, 42, 0.22);
}

.routes-teaser__mini-link {
  display: block;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 36px);
  text-decoration: none;
  color: inherit;
}

.routes-teaser__mini .routes-teaser__badge {
  margin-bottom: 16px;
}

.routes-teaser__mini-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.routes-teaser__mini-title em {
  font-style: italic;
  color: var(--terracotta);
}

.routes-teaser__mini-desc {
  font-family: "Geist", sans-serif;
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* — CTAs below mini grid — */
.routes-teaser__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 32px);
  text-align: center;
}

.routes-teaser__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.22);
  transition: background 0.3s ease, transform 0.3s ease, gap 0.3s ease;
}

.routes-teaser__cta-primary:hover {
  background: #9a3b22;
  transform: translateY(-2px);
  gap: 16px;
}

.routes-teaser__cta-arrow {
  display: inline-block;
  font-size: 17px;
  transition: transform 0.3s ease;
}

.routes-teaser__cta-primary:hover .routes-teaser__cta-arrow {
  transform: translateX(3px);
}

.routes-teaser__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--terracotta);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: color 0.3s ease, gap 0.3s ease;
}

.routes-teaser__cta-secondary:hover {
  color: #9a3b22;
  gap: 12px;
}

@media (max-width: 900px) {
  .routes-teaser__featured-link {
    grid-template-columns: 1fr;
  }
  .routes-teaser__featured-image {
    aspect-ratio: 16 / 9;
  }
  .routes-teaser__mini-grid {
    grid-template-columns: 1fr;
  }
}

/* Apply canonical section padding to homepage routes teaser */
.routes-teaser {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

/* ============================================================================
   /rute.html — page-specific CTA block
   "Prve rute stižu 2026" closing block. Cream bg, centered, big editorial
   title + lead + solid terracotta pill linking back to home capture.
   ============================================================================ */

.rute-page__cta {
  background: var(--bg-cream-warm);
  border-top: 1px solid rgba(15, 15, 14, 0.05);
  text-align: center;
}

.rute-page__cta-inner {
  max-width: 720px;
  margin: 0 auto;
}

.rute-page__cta-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 24px;
}
.rute-page__cta-title em {
  font-style: italic;
  color: var(--terracotta);
}

.rute-page__cta-lead {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto 36px;
  max-width: 540px;
}

.rute-page__cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.22);
  transition: background 0.3s ease, transform 0.3s ease, gap 0.3s ease;
}

.rute-page__cta-button:hover {
  background: #9a3b22;
  transform: translateY(-2px);
  gap: 16px;
}

.rute-page__cta-button-arrow {
  display: inline-block;
  font-size: 17px;
  transition: transform 0.3s ease;
}

.rute-page__cta-button:hover .rute-page__cta-button-arrow {
  transform: translateX(3px);
}

.rute-page__cta {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

/* ============================================================================
   /drustvene-mreze.html — social platforms placeholder page
   Reuses .city-page chrome (nav, hero, brand-moment, footer). Three
   platform cards with pulsing "Stiže uskoro" badge, then a story section
   explaining why we're starting slowly, then a single CTA back to capture.
   ============================================================================ */

/* Platform cards row */
.social-platforms__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
  max-width: 1080px;
  margin: 0 auto;
}

.social-platform {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 3.5vw, 48px) clamp(24px, 2.6vw, 36px);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(15, 15, 14, 0.08);
  border-radius: 6px;
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.social-platform:hover {
  border-color: rgba(183, 71, 42, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(15, 15, 14, 0.05);
}

.social-platform__icon {
  width: 36px;
  height: 36px;
  margin-bottom: 24px;
  color: var(--terracotta);
}

.social-platform__icon svg {
  width: 100%;
  height: 100%;
}

.social-platform__name {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}

.social-platform__desc {
  font-family: "Geist", sans-serif;
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
  flex: 1;
}

/* "Stiže uskoro" pulsing dot — same pattern as .pillar__soon / .frame__soon */
.social-platform__soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
  opacity: 0.85;
}

.social-platform__soon-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: dotPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .social-platforms__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

/* Story — "zašto polako" editorial breath */
.social-story {
  background: var(--bg-cream-warm);
  border-top: 1px solid rgba(15, 15, 14, 0.05);
  border-bottom: 1px solid rgba(15, 15, 14, 0.05);
}

.social-story__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.social-story__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 20px;
}

.social-story__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(28px, 3vw, 40px);
}

.social-story__title em {
  font-style: italic;
  color: var(--terracotta);
}

.social-story__paragraph {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  text-wrap: pretty;
  max-width: 42rem;
}

.social-story__paragraph:last-child { margin-bottom: 0; }

/* CTA section */
.social-cta {
  background: var(--bg-cream);
  text-align: center;
}

.social-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}

.social-cta__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 20px;
}

.social-cta__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 20px;
}

.social-cta__lead {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto 36px;
  max-width: 480px;
}

.social-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  background: var(--terracotta);
  color: var(--bg-cream);
  text-decoration: none;
  font-family: "Geist", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.22);
  transition: background 0.3s ease, transform 0.3s ease, gap 0.3s ease;
}

.social-cta__button:hover {
  background: #9a3b22;
  transform: translateY(-2px);
  gap: 16px;
}

.social-cta__button-arrow {
  display: inline-block;
  font-size: 17px;
  transition: transform 0.3s ease;
}

.social-cta__button:hover .social-cta__button-arrow {
  transform: translateX(4px);
}

/* Add /drustvene-mreze sections to canonical padding scale */
.social-platforms,
.social-story,
.social-cta {
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

/* ============================================================================
   HERO TITLE — per-language fit overrides
   BS source copy max em length is ~29 chars (fits cleanly in `max-width: 22ch`
   at the canonical font-size). EN goes up to 35 chars ("you only hear when
   you fall silent.") and DE up to 38 chars ("das du erst hörst, wenn du
   verstummst.") — those wrap to 3 lines on cinematic screens, which looks
   ugly on a brand hero.

   Fix: slightly smaller font + wider character allowance on EN/DE only, so
   every slide on every language renders as exactly 2 lines (prefix + em).
   The i18n engine sets <html lang="en|de"> on each language switch so these
   selectors track the active language correctly.
   ============================================================================ */

html[lang="en"] .hero__title,
html[lang="de"] .hero__title {
  font-size: clamp(44px, 8.8vw, 130px);
  max-width: 34ch;
  letter-spacing: -0.04em;
}

/* Sub override removed — base .hero__sub now handles all languages with a
   uniformly trimmed copy budget (≤45 chars) and nowrap-on-desktop. */

@media (max-width: 768px) {
  html[lang="en"] .hero__title,
  html[lang="de"] .hero__title {
    font-size: clamp(38px, 10.5vw, 70px);
    max-width: 26ch;
  }
}

/* ============================================================================
   CANONICAL STATUS-PULSE — single ring-expand animation used by every
   status pill/dot across the site ("Stiže 2026", "Otvoreno za prijave",
   "Stiže uskoro", platform "coming soon" tags, etc.). Mirrors the original
   .nav__status-dot `pulse` keyframe (terracotta ring expanding outward)
   so a visitor sees the same alive/coming signal everywhere.

   To apply: dot needs `animation: statusPulse 2.4s ease-out infinite`.
   All existing dots are overridden below in one sweep.
   ============================================================================ */

@keyframes statusPulse {
  0%   { box-shadow: 0 0 0 0   rgba(214, 99, 74, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(214, 99, 74, 0); }
  100% { box-shadow: 0 0 0 0   rgba(214, 99, 74, 0); }
}

.nav__status-dot,
.partner-hero__badge-dot,
.pillar__soon-dot,
.frame__soon-dot,
.mobile-menu__badge-dot,
.social-platform__soon-dot,
.foot__tagline-badge-dot {
  animation: statusPulse 2.4s ease-out infinite !important;
}

/* Partner-hero badge dot was forest-colored; normalise to terracotta so the
   ring colour matches the dot (and matches every other status pill). */
.partner-hero__badge-dot {
  background: var(--terracotta) !important;
}

/* Footer "Stiže 2026" badge — add a dot prefix so it matches the pattern
   of every other status pill on the site. */
.foot__tagline-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.foot__tagline-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
  animation: statusPulse 2.4s ease-out infinite;
}

/* =========================================================
   A11Y + FORM UTILITIES (added 2026-05-16, P0 production fixes)
   ========================================================= */

/* Screen-reader only — visually hidden but available to AT */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Skip-to-content link — visible only on keyboard focus.
   Hidden by default via translateY(-200%) + opacity:0 + pointer-events:none.
   Slides into view on :focus / :focus-visible (keyboard Tab). Premium pill:
   forest fill, cream text, fully rounded, terracotta focus ring. The 404
   page is standalone (no styles.css link), so an equivalent rule is inlined
   in 404.html — keep the two in sync. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  transform: translateY(-200%);
  opacity: 0;
  pointer-events: none;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  background: var(--forest);
  color: var(--bg-cream);
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 180ms ease, opacity 180ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* =========================================================================
   FIX: thin blue line at top of page on skip-link / hash-fragment focus.
   ───────────────────────────────────────────────────────────────────────
   Containers like <main id="main" tabindex="-1"> and <section id="hero"
   tabindex="-1"> exist as skip-link / hash-navigation targets. When the
   skip link is activated or the user lands on /page#main, the browser
   draws its DEFAULT 2-3px focus outline on the wide container — which
   reads as a horizontal blue line at the top of the page.

   tabindex="-1" means "programmatically focusable only, NOT in tab order",
   so keyboard users tabbing never reach these elements. Suppressing the
   visual outline on them is the standard WCAG-safe pattern — interactive
   elements (buttons, links, form controls, accordion toggles) keep their
   custom terracotta :focus-visible outlines defined elsewhere.
   ========================================================================= */
[tabindex="-1"]:focus {
  outline: none;
}

/* Footer newsletter consent disclosure */
.foot__news-consent {
  margin: 10px 0 0;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(244, 239, 229, 0.55);
  max-width: 420px;
}

/* Capture form: 1-column on small mobile (P0 fix — was overflowing 320-640px) */
@media (max-width: 640px) {
  .capture__field-row {
    grid-template-columns: 1fr !important;
  }
}

/* Footer newsletter input: prevent iOS auto-zoom on focus (16px floor) */
@media (max-width: 768px) {
  .foot__news-input {
    font-size: 16px !important;
  }
}

/* Footer tap targets — bump padding on small mobile so legal/social links hit 44px floor */
@media (max-width: 640px) {
  .foot__col a,
  .foot__bottom-link {
    padding-block: 8px;
  }
}

/* Canonical :focus-visible token for interactive elements that previously had outline:none */
.nav__link:focus-visible,
.nav__cta:focus-visible,
.nav__logo:focus-visible,
.mobile-menu__nav-link:focus-visible,
.mobile-menu__cta:focus-visible,
.lang-btn:focus-visible,
.foot__col a:focus-visible,
.foot__logo-link:focus-visible,
.foot__bottom-link:focus-visible,
.hero__cta-btn:focus-visible,
.cta-strip__button:focus-visible,
.capture__btn:focus-visible,
.foot__news-btn:focus-visible,
.routes-teaser__cta-primary:focus-visible,
.routes-teaser__cta-secondary:focus-visible,
.places-cinematic__more-cta:focus-visible,
.brand-moment__cta:focus-visible,
.partner-form__btn:focus-visible,
.propose-form__submit:focus-visible,
.success-modal__cta:focus-visible,
.success-modal__close:focus-visible,
.cookie-banner__btn:focus-visible,
.frame__cta-link:focus-visible,
.rute-page__cta-button:focus-visible,
.social-cta__button:focus-visible,
.city-status__cta:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Form inputs focus-visible */
.capture__input:focus-visible,
.foot__news-input:focus-visible,
.partner-form__input:focus-visible,
.partner-form__select:focus-visible,
.partner-form__textarea:focus-visible,
.propose-form__input:focus-visible,
.propose-form__select:focus-visible,
.propose-form__textarea:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

/* Success modal close — bump to 44×44 tap target */
.success-modal__close {
  min-width: 44px;
  min-height: 44px;
}

/* -webkit-backdrop-filter parity (Safari < 18 needs prefix) */
.nav,
.nav.scrolled {
  -webkit-backdrop-filter: blur(0);
}

/* =========================================================
   BETA TRANSPARENCY NOTES (added 2026-05-16)
   Subtle premium info notes — used on home, /rute, /gradovi
   and in form helper positions. Brand-aligned: forest text on
   cream-tinted surface with a thin terracotta accent line.
   ========================================================= */

.beta-note {
  position: relative;
  max-width: 720px;
  margin: clamp(40px, 6vw, 64px) auto;
  padding: clamp(20px, 2.5vw, 28px) clamp(22px, 3vw, 36px);
  background: rgba(244, 239, 229, 0.55);
  border: 1px solid rgba(20, 60, 46, 0.10);
  border-left: 3px solid var(--terracotta);
  border-radius: 4px;
  font-family: "Geist", sans-serif;
  text-align: left;
}

.beta-note__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 12px;
}

.beta-note__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  display: inline-block;
  animation: statusPulse 2.4s ease-out infinite;
  flex-shrink: 0;
}

.beta-note__text {
  margin: 0;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.65;
  color: rgba(20, 60, 46, 0.82);
  max-width: 42rem;
}

/* In dark/forest sections invert the palette */
.beta-note--on-dark {
  background: rgba(244, 239, 229, 0.06);
  border-color: rgba(244, 239, 229, 0.12);
  border-left-color: var(--terracotta);
}
.beta-note--on-dark .beta-note__text {
  color: rgba(244, 239, 229, 0.78);
}

/* Centered alignment variant for hero-after / page-end use */
.beta-note--centered {
  text-align: center;
}
.beta-note--centered .beta-note__eyebrow {
  margin-left: auto;
  margin-right: auto;
}

/* Compact horizontal variant — single-line trust note. Overrides base for
   tighter padding, smaller text, inline dot + text layout. */
.beta-note--compact {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: clamp(24px, 3vw, 40px) auto;
  padding: 12px 18px;
  background: rgba(244, 239, 229, 0.55);
  border: 1px solid rgba(20, 60, 46, 0.08);
  border-left: 2px solid var(--terracotta);
  border-radius: 4px;
  text-align: left;
}
.beta-note--compact .beta-note__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
  animation: statusPulse 2.4s ease-out infinite;
}
.beta-note--compact .beta-note__text {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
  color: rgba(20, 60, 46, 0.82);
  max-width: 42rem;
}
@media (max-width: 640px) {
  .beta-note--compact {
    align-items: flex-start;
    padding: 10px 14px;
    gap: 10px;
  }
  .beta-note--compact .beta-note__dot {
    margin-top: 6px;
  }
  .beta-note--compact .beta-note__text {
    font-size: 12px;
    line-height: 1.55;
  }
}

/* Form helper note — slimmer than the page-level beta-note,
   sits below consent checkbox in partner / propose forms */
.form-helper-note {
  margin: 12px 0 0;
  padding: 12px 16px;
  background: rgba(20, 60, 46, 0.04);
  border-left: 2px solid rgba(183, 71, 42, 0.55);
  border-radius: 2px;
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(20, 60, 46, 0.72);
  max-width: 640px;
}

/* Non-binding legal notice — calm, explicit, sits between consent and helper note */
.form-nonbinding-notice {
  margin: 14px 0 0;
  padding: 14px 18px;
  background: rgba(183, 71, 42, 0.06);
  border-left: 2px solid rgba(183, 71, 42, 0.85);
  border-radius: 2px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(20, 60, 46, 0.85);
  max-width: 640px;
}

/* Footer status line — small, calm, sits above copyright */
.foot__beta-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
  padding: 0 24px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(15, 15, 14, 0.72);
  text-align: center;
}

.foot__beta-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
  animation: statusPulse 2.4s ease-out infinite;
}

@media (max-width: 640px) {
  .beta-note {
    margin: 32px auto;
    padding: 18px 20px;
    border-left-width: 2px;
  }
  .beta-note__text {
    font-size: 14px;
  }
  .form-helper-note {
    margin-top: 10px;
    padding: 11px 14px;
    font-size: 12px;
    line-height: 1.55;
  }
  .foot__beta-status {
    font-size: 12px;
    padding: 0 20px;
    line-height: 1.55;
    text-wrap: balance;
  }
}

/* Tiny phones (iPhone SE 1st gen, ≤380px) — tighter rhythm */
@media (max-width: 380px) {
  .beta-note {
    margin: 28px auto;
    padding: 16px 16px;
  }
  .beta-note__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
  .beta-note__text {
    font-size: 13.5px;
    line-height: 1.6;
  }
  .form-helper-note {
    padding: 10px 12px;
    font-size: 11.5px;
  }
  .foot__beta-status {
    font-size: 11.5px;
    padding: 0 16px;
  }
}

/* =========================================================================
   QR VODIČI PAGE — bespoke product page (added 2026-05-16)
   Namespace: .qrp-*  — does NOT reuse city-page generic classes; each
   section is custom-designed for a premium product feel.

   Background rhythm (top → bottom):
     hero       — cream
     experience — forest (immersive moment after hero)
     split      — cream
     how        — cream-warm
     showcase   — cream
     audiences  — cream-warm
     final      — forest-deep (immersive closing)

   Brand tokens (already defined in :root):
     --bg-cream  #f4efe5
     --bg-cream-warm #ede6d8
     --ink       #0f0f0e
     --ink-soft  #2c2a26
     --forest    #143c2e
     --forest-deep #0b2a20
     --terracotta #b7472a
   ========================================================================= */

/* Page body class to remove default chrome backgrounds if needed */
body.qr-page-body {
  background: var(--bg-cream);
}

/* ---------- Shared inner container ---------- */
.qrp__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}

/* ---------- Eyebrow / title / lead — shared editorial typography ---------- */
.qrp__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 18px;
}

.qrp__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
}

.qrp__section-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}

.qrp__section-title em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.qrp__lead {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0;
}

/* On dark sections, recolor */
.qrp-section--dark .qrp__section-title { color: var(--bg-cream); }
.qrp-section--dark .qrp__lead { color: rgba(244, 239, 229, 0.78); }
.qrp-section--dark .qrp__eyebrow { color: var(--terracotta); }

/* =========================================================================
   QRP BUTTONS — primary filled, secondary outline, ghost text link.
   Designed for this page; not coupled to other CTA systems.
   ========================================================================= */
.qrp-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    color 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.qrp-btn__arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.qrp-btn:hover .qrp-btn__arrow {
  transform: translateX(4px);
}

/* Primary — filled terracotta */
.qrp-btn--primary {
  background: var(--terracotta);
  color: var(--bg-cream);
  box-shadow: 0 4px 16px rgba(183, 71, 42, 0.22);
}
.qrp-btn--primary:hover {
  background: #9a3b22;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(183, 71, 42, 0.32);
}
.qrp-btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(183, 71, 42, 0.22);
}

/* Secondary — outline pill. Mirrors primary geometry (same radius / padding /
   font / letter-spacing) so the two buttons sit as a balanced pair.
   Terracotta border on cream; transparent fill; subtle fill on hover. */
/* Secondary CTA — text + arrow (NOT a button). Matches the global secondary
   pattern used in `.routes-teaser__cta-secondary` and `.digital__link--secondary`.
   One secondary style site-wide: terracotta text on cream, cream text on dark.
   Override base .qrp-btn padding/radius since we are NOT rendering a pill here. */
.qrp-btn--secondary {
  background: transparent;
  color: var(--terracotta);
  border: 0;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  gap: 8px;
  box-shadow: none;
  transition: color 0.3s ease, gap 0.3s ease;
}
.qrp-btn--secondary:hover {
  color: #9a3b22;
  gap: 12px;
  background: transparent;
  transform: none;
  box-shadow: none;
}
.qrp-btn--secondary:active {
  transform: none;
  box-shadow: none;
}
/* The .qrp-btn__arrow span sits next to the text. Reset any inherited shifts
   so the gap-grow effect is the only motion on hover. */
.qrp-btn--secondary .qrp-btn__arrow { transition: none; }
.qrp-btn--secondary:hover .qrp-btn__arrow { transform: none; }

/* Secondary on dark sections — cream text + cream-tinted hover */
.qrp-section--dark .qrp-btn--secondary {
  color: var(--bg-cream);
}
.qrp-section--dark .qrp-btn--secondary:hover {
  color: rgba(244, 239, 229, 0.78);
  background: transparent;
}

/* Ghost text link with arrow — used for inline secondary navigation */
.qrp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 60, 46, 0.25);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.qrp-link:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.qrp-section--dark .qrp-link {
  color: var(--bg-cream);
  border-bottom-color: rgba(244, 239, 229, 0.35);
}
.qrp-section--dark .qrp-link:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* =========================================================================
   QRP SPACING SYSTEM
   ───────────────────────────────────────────────────────────────────────
   Site-wide spacing scale applied to all .qrp-* sections.
   - Standard:  56px mobile  → 72px tablet → 96px desktop  (clamp 8vw)
   - Flagship:  72px mobile  → 90px tablet → 120px desktop (clamp 10vw)
   - Hero rhythm: eyebrow→title 22px, title→lead 24px, lead→CTA 32px, CTA→trust 24px
   ========================================================================= */

/* Status badge — pairs with topbar back link, opens left column above eyebrow */
.qrp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(20, 60, 46, 0.06);
  border: 1px solid rgba(20, 60, 46, 0.12);
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest);
  margin: 0 0 clamp(22px, 3vw, 32px);
}
.qrp-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: statusPulse 2.4s ease-out infinite;
  flex-shrink: 0;
}

/* Topbar wrapper — page-back-link sits above hero. Reuses .city-page__topbar. */
.qrp-topbar { background: var(--bg-cream); }

/* =========================================================================
   HERO — product-first: editorial text left, single phone mockup right
   ========================================================================= */
.qrp-hero {
  /* Flagship top, tightened bottom — pulls Doživljaj section closer for intentional flow */
  padding: clamp(48px, 7vw, 80px) 0 clamp(56px, 7vw, 80px);
  background: var(--bg-cream);
  position: relative;
  overflow: hidden;
}

/* Decorative river line behind hero (subtle, same family as manifest) */
.qrp-hero__river {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.qrp-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}

.qrp-hero__content {
  min-width: 0;
  max-width: 100%;
}
.qrp-hero__content > * {
  max-width: 560px;
}

.qrp-hero__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 22px;
}

.qrp-hero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}
.qrp-hero__title em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.qrp-hero__lead {
  font-family: "Geist", sans-serif;
  font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 0 32px;
}

.qrp-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* Trust line — small reassurance below CTAs */
.qrp-hero__trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(15, 15, 14, 0.62);
}
.qrp-hero__trust::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
  flex-shrink: 0;
  animation: statusPulse 2.4s ease-out infinite;
}

/* =========================================================================
   HERO RIGHT — product mockup stage: phone + floating module pills + demo badge
   ========================================================================= */
.qrp-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  width: 100%;
}

.qrp-hero__phone-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 2.2vw, 26px);
  padding: clamp(20px, 3vw, 36px) clamp(36px, 4vw, 52px);
}

/* PHONE FRAME — premium deep-forest bezel, soft natural shadow */
.qrp-hero__phone {
  position: relative;
  width: clamp(248px, 22vw, 296px);
  aspect-ratio: 9 / 19;
  background: #0b1f17;
  border-radius: 38px;
  padding: 11px;
  box-shadow:
    0 24px 60px rgba(20, 60, 46, 0.22),
    0 8px 20px rgba(20, 60, 46, 0.12),
    inset 0 0 0 1px rgba(244, 239, 229, 0.05);
  z-index: 2;
}

.qrp-hero__phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
  height: 22px;
  background: #050d0a;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}

.qrp-hero__phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: var(--bg-cream);
}

/* DEMO GUIDE UI inside phone — editorial preview, not generic SaaS chrome */
.qrp-demo {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.qrp-demo__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 34px 12px 12px;
  font-family: "Geist", sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.qrp-demo__loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 8.5px;
}
.qrp-demo__loc > span:last-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qrp-demo__loc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: statusPulse 2.4s ease-out infinite;
  flex-shrink: 0;
}


/* LANG SWITCH — 3 tiny buttons in status bar. Active gets terracotta dot underline. */
.qrp-demo__lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.qrp-demo__lang-btn {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  padding: 4px 6px;
  font-family: "Geist", sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(15, 15, 14, 0.42);
  border-radius: 4px;
  transition: color 0.18s ease, background 0.18s ease;
  position: relative;
}
.qrp-demo__lang-btn:hover { color: var(--ink); }
.qrp-demo__lang-btn.is-active {
  color: var(--terracotta);
}
.qrp-demo__lang-btn.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--terracotta);
}
.qrp-demo__lang-btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.qrp-demo__cover {
  position: relative;
  width: calc(100% - 16px);
  margin: 0 8px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--forest-deep);
}
.qrp-demo__cover picture,
.qrp-demo__cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.qrp-demo__body {
  padding: 14px 14px 18px;
}

.qrp-demo__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 6px;
}

.qrp-demo__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}

/* Body text — short editorial paragraph, line-clamped to 3 lines so the
   phone never overflows even when EN/DE wrapping differs */
.qrp-demo__text {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  line-height: 1.55;
  color: rgba(15, 15, 14, 0.74);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  max-width: 42rem;
}

/* TABS — real buttons. Active gets terracotta underline; keyboard-nav arrow keys. */
.qrp-demo__tabs {
  display: flex;
  gap: 14px;
  padding: 0 0 8px;
  margin: 0 0 12px;
  border-bottom: 1px solid rgba(20, 60, 46, 0.08);
}
.qrp-demo__tab {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  cursor: pointer;
  font-family: "Geist", sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 0 6px;
  position: relative;
  transition: color 0.18s ease;
}
.qrp-demo__tab:hover { color: var(--ink); }
.qrp-demo__tab.is-active { color: var(--terracotta); }
.qrp-demo__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  background: var(--terracotta);
  border-radius: 1px;
}
.qrp-demo__tab:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* PANELS container — fixed min-height so tab swap never causes layout shift.
   Sized for the tallest panel (story w/ 2 info blocks). */
.qrp-demo__panels {
  position: relative;
  min-height: 230px;
}

.qrp-demo__panel { animation: qrpDemoPanelIn 0.22s ease-out; }
.qrp-demo__panel[hidden] { display: none; }

@keyframes qrpDemoPanelIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* MAP PANEL — stylized SVG map card + caption + sub-line */
.qrp-demo__map {
  position: relative;
  height: 124px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(180deg, #efe7d4 0%, #e6dec9 100%);
  border: 1px solid rgba(20, 60, 46, 0.08);
  margin-bottom: 10px;
}
.qrp-demo__map-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.qrp-demo__map-pin {
  position: absolute;
  top: 50%;
  left: 56%;
  width: 10px;
  height: 10px;
  background: var(--terracotta);
  border: 1.5px solid var(--bg-cream);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(183, 71, 42, 0.42);
  z-index: 2;
  transform: translate(-50%, -50%);
}
.qrp-demo__map-pin::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(183, 71, 42, 0.18);
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: statusPulse 2.4s ease-out infinite;
}
.qrp-demo__map-pin-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  font-family: "Geist", sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--forest);
  background: rgba(244, 239, 229, 0.88);
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(20, 60, 46, 0.10);
}
.qrp-demo__map-place {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 2px;
}
.qrp-demo__map-sub {
  font-family: "Geist", sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0;
}

/* NEARBY PANEL — refined list of 3 items */
.qrp-demo__nearby-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qrp-demo__nearby-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: rgba(20, 60, 46, 0.035);
  border: 1px solid rgba(20, 60, 46, 0.07);
  border-radius: 8px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.qrp-demo__nearby-item:hover {
  background: rgba(20, 60, 46, 0.06);
  border-color: rgba(20, 60, 46, 0.14);
}
.qrp-demo__nearby-name {
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  color: var(--ink);
}
.qrp-demo__nearby-meta {
  font-family: "Geist", sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* STORY INFO BLOCKS — 2 compact rows below body text, separated by hairline */
.qrp-demo__info {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(20, 60, 46, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qrp-demo__info-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qrp-demo__info-title {
  font-family: "Geist", sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0;
}
.qrp-demo__info-body {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  line-height: 1.5;
  color: rgba(15, 15, 14, 0.74);
  margin: 0;
  /* line-clamp safeguard so DE longer text never overflows */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* MAP context tags — Vrbas river label + Kastel location label, absolute on map */
.qrp-demo__map-river-tag {
  position: absolute;
  bottom: 6px;
  right: 8px;
  z-index: 2;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(20, 60, 46, 0.62);
  background: rgba(244, 239, 229, 0.78);
  padding: 1px 6px;
  border-radius: 3px;
}
.qrp-demo__map-kastel-tag {
  position: absolute;
  top: 36%;
  left: 56%;
  transform: translateX(8px);
  z-index: 2;
  font-family: "Geist", sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--terracotta);
  background: rgba(244, 239, 229, 0.92);
  padding: 2px 6px;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(20, 60, 46, 0.08);
}

/* DEMO BADGE — sits below phone, clarifies this is a sample */
.qrp-hero__demo-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  background: rgba(244, 239, 229, 0.88);
  border: 1px solid rgba(20, 60, 46, 0.08);
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  white-space: nowrap;
}

/* =========================================================================
   EXPERIENCE — 3 moments, forest immersive section
   ========================================================================= */
.qrp-exp {
  padding: clamp(56px, 7vw, 80px) 0 clamp(56px, 8vw, 96px);
  background: var(--forest-deep);
  color: var(--bg-cream);
  position: relative;
  overflow: hidden;
}

.qrp-exp__header {
  max-width: 720px;
  margin: 0 auto clamp(56px, 7vw, 96px);
  text-align: center;
}
.qrp-exp__header .qrp__eyebrow {
  justify-content: center;
}

.qrp-exp__moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: start;
  position: relative;
}

/* Five-card variant: cinematic strip, narrower per-card on wide screens */
.qrp-exp__moments--five {
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
}

/* Decorative connector line — applies ONLY to the 3-moment variant.
   The 5-card visual variant uses real frames as its own visual rhythm. */
.qrp-exp__moments:not(.qrp-exp__moments--five)::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(244, 239, 229, 0.16) 12%,
    rgba(183, 71, 42, 0.32) 50%,
    rgba(244, 239, 229, 0.16) 88%,
    transparent 100%);
  pointer-events: none;
}

.qrp-moment {
  position: relative;
  text-align: left;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.qrp-moment:hover {
  transform: translateY(-3px);
}

/* Visual frame — top of each card, 4:3 aspect, contains either <picture> or inline <svg> */
.qrp-moment__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 18px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--forest-deep);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.32),
    0 4px 10px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(244, 239, 229, 0.06);
}

/* Image variant — used by moment 01 (Kastel walls) */
.qrp-moment__visual--image picture,
.qrp-moment__visual--image img {
  width: 100%;
  height: 100%;
  display: block;
}
.qrp-moment__visual--image img {
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.qrp-moment:hover .qrp-moment__visual--image img {
  transform: scale(1.04);
}
.qrp-moment__visual--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(11, 42, 32, 0.55) 100%);
  pointer-events: none;
}

/* SVG variant — used by moments 02-05 (illustrations) */
.qrp-moment__visual--svg {
  display: flex;
}
.qrp-moment__visual--svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Number chip — overlaid on visual, bottom-left corner */
.qrp-moment__num {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 28px;
  padding: 0 10px;
  margin: 0;
  background: var(--terracotta);
  border: none;
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--bg-cream);
  box-shadow: 0 4px 12px rgba(183, 71, 42, 0.38);
  transition: transform 0.3s ease;
}
.qrp-moment:hover .qrp-moment__num {
  transform: translateY(-1px);
}

.qrp-moment__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.18;
  color: var(--bg-cream);
  margin: 0 0 10px;
  text-wrap: balance;
}

.qrp-moment__desc {
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(244, 239, 229, 0.72);
  margin: 0;
  max-width: 32ch;
}

/* Reduced motion — disable hover scale + lift */
@media (prefers-reduced-motion: reduce) {
  .qrp-moment,
  .qrp-moment__visual--image img,
  .qrp-moment__num {
    transition: none;
    transform: none !important;
  }
}

/* =========================================================================
   AFTER-SCAN — 4 product chips on dark, sits below the 3-step moments
   ========================================================================= */
.qrp-after-scan {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid rgba(244, 239, 229, 0.10);
}

.qrp-after-scan__heading {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  color: var(--bg-cream);
  margin: 0 0 clamp(24px, 3vw, 36px);
  text-align: center;
  text-wrap: balance;
}

.qrp-after-scan__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 22px);
}

.qrp-after-scan-card {
  padding: clamp(18px, 2vw, 24px) clamp(18px, 2vw, 22px);
  background: rgba(244, 239, 229, 0.035);
  border: 1px solid rgba(244, 239, 229, 0.10);
  border-radius: 14px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.qrp-after-scan-card:hover {
  background: rgba(244, 239, 229, 0.06);
  border-color: rgba(183, 71, 42, 0.32);
  transform: translateY(-2px);
}

.qrp-after-scan-card__title {
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.005em;
  color: var(--bg-cream);
  margin: 0 0 8px;
}

.qrp-after-scan-card__desc {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.66);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .qrp-after-scan-card {
    transition: none;
    transform: none !important;
  }
}

/* =========================================================================
   VALUE SPLIT — 2 cards (For visitor / For city)
   ========================================================================= */
.qrp-split {
  padding: clamp(32px, 5vw, 56px) 0 clamp(56px, 8vw, 96px);
  background: var(--bg-cream);
}

.qrp-split__header {
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 56px);
  text-align: center;
}
.qrp-split__header .qrp__eyebrow {
  justify-content: center;
}

.qrp-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 36px);
}

/* Value card — upgraded with gradient bg, number treatment, deeper shadow */
.qrp-split-card {
  position: relative;
  padding: clamp(36px, 4vw, 52px) clamp(28px, 3.5vw, 44px) clamp(32px, 4vw, 48px);
  background: linear-gradient(180deg, var(--bg-cream-warm) 0%, var(--bg-cream) 100%);
  border: 1px solid rgba(20, 60, 46, 0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(20, 60, 46, 0.06), 0 2px 6px rgba(20, 60, 46, 0.04);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.qrp-split-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px rgba(20, 60, 46, 0.10), 0 4px 12px rgba(20, 60, 46, 0.06);
  border-color: rgba(20, 60, 46, 0.14);
}
.qrp-split-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--terracotta);
}

/* Subtle Fraunces italic number top-right ('01' / '02') as visual anchor */
.qrp-split-card::after {
  content: attr(data-card-num);
  position: absolute;
  top: 22px;
  right: 26px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: rgba(20, 60, 46, 0.18);
  line-height: 1;
  pointer-events: none;
}

.qrp-split-card__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 16px;
}

.qrp-split-card__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 28px;
  max-width: 28ch;
  text-wrap: balance;
}

/* List uses flex per row — guarantees marker aligns to text baseline */
.qrp-split-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.qrp-split-card__list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  font-family: "Geist", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(20, 60, 46, 0.07);
}
.qrp-split-card__list li:last-child {
  border-bottom: none;
}
.qrp-split-card__list li::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 1.5px;
  background: var(--terracotta);
  /* nudge dash up to align with cap height of body text */
  transform: translateY(-3px);
}

/* =========================================================================
   SHOWCASE — Kastel demo as featured product proof
   ========================================================================= */
.qrp-showcase {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-cream);
}

.qrp-showcase__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.qrp-showcase__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20, 60, 46, 0.18);
  background: var(--forest);
}
.qrp-showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qrp-showcase__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 50%,
    rgba(11, 42, 32, 0.55) 100%);
  pointer-events: none;
}
.qrp-showcase__media-caption {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg-cream);
}
.qrp-showcase__media-caption::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
  margin-right: 10px;
  animation: statusPulse 2.4s ease-out infinite;
}

.qrp-showcase__content {
  min-width: 0;
}

.qrp-showcase__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
.qrp-showcase__title em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.qrp-showcase__body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 48ch;
}

/* Demo-status disclosure — sits below body, signals "concept not installed" */
.qrp-showcase__note {
  display: inline-block;
  margin: 0 0 28px;
  padding: 10px 14px;
  background: rgba(183, 71, 42, 0.07);
  border-left: 2px solid var(--terracotta);
  border-radius: 2px;
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 48ch;
}

.qrp-showcase__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 36px;
}
.qrp-showcase__tag {
  display: inline-flex;
  padding: 6px 14px;
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: rgba(20, 60, 46, 0.06);
  border: 1px solid rgba(20, 60, 46, 0.10);
  color: var(--forest);
  border-radius: 999px;
}

.qrp-showcase__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

/* =========================================================================
   AUDIENCES — lighter, smaller cards, 5 columns
   ========================================================================= */
.qrp-aud {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-cream-warm);
}

.qrp-aud__header {
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}
.qrp-aud__header .qrp__eyebrow {
  justify-content: center;
}

.qrp-aud__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.qrp-aud-card {
  display: flex;
  flex-direction: column;
  padding: 28px 22px;
  background: var(--bg-cream);
  border: 1px solid rgba(20, 60, 46, 0.08);
  border-radius: 8px;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  height: 100%;
}
.qrp-aud-card:hover {
  transform: translateY(-3px);
  border-color: rgba(20, 60, 46, 0.18);
  box-shadow: 0 8px 20px rgba(20, 60, 46, 0.06);
}

.qrp-aud-card__num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--terracotta);
  margin: 0 0 14px;
  display: block;
}

.qrp-aud-card__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.qrp-aud-card__desc {
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* =========================================================================
   FINAL CTA — forest-deep immersive close
   ========================================================================= */
.qrp-final {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--forest-deep);
  color: var(--bg-cream);
  position: relative;
  overflow: hidden;
}

.qrp-final__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.qrp-final__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bg-cream);
  margin: 0 0 24px;
  text-wrap: balance;
}
.qrp-final__title em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.qrp-final__body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: rgba(244, 239, 229, 0.78);
  margin: 0 auto 40px;
  max-width: 56ch;
}

.qrp-final__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
  margin-bottom: 28px;
}

.qrp-final__support {
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  color: rgba(244, 239, 229, 0.55);
  margin: 0;
}
.qrp-final__support a {
  color: rgba(244, 239, 229, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 229, 0.30);
  transition: border-color 0.25s ease, color 0.25s ease;
  padding-bottom: 1px;
}
.qrp-final__support a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* =========================================================================
   BETA TRANSPARENCY — subtle inset note shown after exp section
   ========================================================================= */
.qrp-betanote-wrap {
  padding: clamp(8px, 1.5vw, 16px) 0 clamp(8px, 1.5vw, 16px);
  background: var(--bg-cream);
}
/* Compact variant manages its own margin — no negative pull-up needed */
.qrp-betanote-wrap .beta-note--compact {
  margin-top: 0;
  margin-bottom: 0;
}

/* =========================================================================
   RESPONSIVE — collapse to single-column where needed
   ========================================================================= */
@media (max-width: 1100px) {
  /* Five-card variant drops to a clean 3+2 grid before going single-col */
  .qrp-exp__moments--five {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 40px) clamp(24px, 3vw, 32px);
  }
  /* Hide decorative connector once cards wrap to multi-row */
  .qrp-exp__moments--five::before { display: none; }
}

@media (max-width: 1024px) {
  /* COLLAPSE: 1-col stack. Text first, phone mockup below, both centered. */
  .qrp-hero__inner {
    grid-template-columns: 1fr;
    gap: clamp(40px, 5vw, 64px);
  }
  .qrp-hero__content > * {
    max-width: 100%;
  }
  .qrp-hero__visual {
    width: 100%;
  }
  .qrp-aud__list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  /* Phone mockup keeps premium proportions on narrow screens — tighter stage padding */
  .qrp-hero__phone-stage { padding: clamp(12px, 2vw, 20px) 8px; }
}

@media (max-width: 1100px) {
  .qrp-after-scan__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .qrp-exp__moments {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .qrp-exp__moments::before { display: none; }
  .qrp-exp__moments--five {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .qrp-after-scan__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .qrp-split__grid { grid-template-columns: 1fr; gap: 20px; }
  .qrp-showcase__inner {
    grid-template-columns: 1fr;
    gap: clamp(36px, 5vw, 56px);
  }
  .qrp-showcase__media { max-width: 480px; margin: 0 auto; }
  .qrp-aud__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .qrp-exp__moments--five {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .qrp-moment__visual {
    margin-bottom: 14px;
  }
  .qrp-moment__num {
    bottom: 10px;
    left: 10px;
    min-width: 32px;
    height: 24px;
    padding: 0 9px;
    font-size: 11px;
  }
  .qrp-hero__trust {
    font-size: 12.5px;
    line-height: 1.55;
  }
}

@media (max-width: 480px) {
  .qrp-hero__cta-row,
  .qrp-showcase__cta-row,
  .qrp-final__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .qrp-hero__cta-row .qrp-btn,
  .qrp-showcase__cta-row .qrp-btn,
  .qrp-final__cta-row .qrp-btn {
    justify-content: center;
  }
  .qrp-aud__list { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  .qrp__inner { padding-left: 18px; padding-right: 18px; }
  .qrp-split-card { padding: 24px; }
}

/* :focus-visible parity for QRP buttons + links (canonical token) */
.qrp-btn:focus-visible,
.qrp-link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =========================================================================
   HISTORY PAGE — Bosna kroz vrijeme (v2 — visual rebuild)
   ───────────────────────────────────────────────────────────────────────
   Editorial timeline page. 2-col grid (sticky tracker | periods+rail).
   Rail and dots use exact pixel math so dots sit EXACTLY on rail center.
   Per-period cards have top image strips (decorative SVG visuals).
   Tracker upgraded with SVG progress ring + circular percent indicator.
   Hero gets a parchment/topographic SVG backdrop.
   ========================================================================= */

.history-page-body { background: var(--bg-cream); }
.history-topbar { background: var(--bg-cream); position: relative; z-index: 3; }

/* =========================================================================
   HERO — editorial intro with full-width composite hero visual
   ========================================================================= */
.history-hero {
  position: relative;
  padding: clamp(32px, 5vw, 56px) 0 clamp(64px, 9vw, 110px);
  background: var(--bg-cream);
  overflow: hidden;
}

/* Full-width composite hero visual — the image carries baked-in title/subtitle text.
   Sits at top of hero, full-bleed within the content max-width. */
.history-hero__media {
  position: relative;
  max-width: 1240px;
  margin: 0 auto clamp(28px, 4vw, 48px);
  padding: 0 clamp(24px, 4vw, 48px);
}
.history-hero__media picture,
.history-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}
.history-hero__media img {
  /* Cap height so on very tall narrow screens the image doesn't overwhelm */
  max-height: 78vh;
  object-fit: cover;
  box-shadow:
    0 24px 60px rgba(20, 60, 46, 0.16),
    0 8px 20px rgba(20, 60, 46, 0.08);
}
.history-hero__inner {
  /* Was max-width: 880px centred — visually disconnected from the 1200px
     wrapper used by every other content section on the page. Now uses the
     same 1200 + padding-left clamp gutter, with inner children capped at
     48rem for readable line measure (left-anchored, not centred). */
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}
.history-hero__eyebrow,
.history-hero__title,
.history-hero__lead,
.history-hero__note,
.history-hero__cta-row,
.history-hero__helper {
  max-width: 48rem;
}
.history-hero__eyebrow {
  display: inline-block;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 24px;
  padding: 6px 12px;
  background: rgba(244, 239, 229, 0.86);
  border: 1px solid rgba(20, 60, 46, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.history-hero__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(40px, 5.6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 28px;
  text-wrap: balance;
  max-width: 22ch;
}
.history-hero__lead {
  font-family: "Geist", sans-serif;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 54ch;
  background: rgba(244, 239, 229, 0.62);
  padding: 0;
}
.history-hero__note {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(14.5px, 1.15vw, 17px);
  line-height: 1.55;
  color: rgba(15, 15, 14, 0.62);
  margin: 0 0 36px;
  max-width: 54ch;
  padding: 12px 0 12px 16px;
  border-left: 2px solid var(--terracotta);
  background: rgba(244, 239, 229, 0.55);
  padding-right: 16px;
}
.history-hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
}

/* Optional helper line below the CTA — subtle scroll prompt */
.history-hero__helper {
  margin: 18px 0 0;
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: rgba(15, 15, 14, 0.50);
  font-style: italic;
}

/* =========================================================================
   INTRO — unified 2-col editorial block (main intro + editorial card)
   Replaces the prior separate intro + inspiration sections.
   Mobile: stacks vertically; main intro first, card second.
   ========================================================================= */
.history-intro {
  padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 56px);
  background: var(--bg-cream);
}
.history-intro__layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* ----- LEFT: main intro ----- */
.history-intro__main {
  min-width: 0;
}
.history-intro__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 16px;
}
.history-intro__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 20px;
  text-wrap: balance;
}
.history-intro__body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 52ch;
}
.history-intro__quote {
  margin: 0;
  padding: 14px 0 4px 18px;
  border-left: 2px solid var(--terracotta);
}
.history-intro__quote p {
  margin: 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
  max-width: 38ch;
}

/* ----- RIGHT: editorial note card ----- */
.history-intro__card {
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
  background: rgba(244, 239, 229, 0.62);
  border: 1px solid rgba(20, 60, 46, 0.10);
  border-left: 3px solid var(--terracotta);
  border-radius: 6px;
  position: relative;
}
.history-intro__card-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 14px;
}
.history-intro__card-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
}
.history-intro__card-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.history-intro__card-body p {
  font-family: "Geist", sans-serif;
  font-size: clamp(14.5px, 1.1vw, 15.5px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.history-intro__card-body p:last-child { margin-bottom: 0; }

/* Responsibility note inside the card — visually separated by hairline */
.history-intro__card-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(20, 60, 46, 0.12);
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(15, 15, 14, 0.55);
  font-style: italic;
}

/* ----- Responsive: stack on tablet/mobile ----- */
@media (max-width: 900px) {
  .history-intro__layout {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }
  .history-intro__body,
  .history-intro__quote p {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .history-intro {
    padding: clamp(32px, 6vw, 48px) 0 clamp(32px, 6vw, 48px);
  }
}

/* =========================================================================
   TIMELINE — 2-column grid (sticky tracker | periods with internal rail)
   ───────────────────────────────────────────────────────────────────────
   RAIL MATH (desktop):
   - .history-periods has padding-left: 60px (60px reserved for rail+dots)
   - .history-periods__line lives inside, position absolute, left: 24px,
     width: 1px → rail visual line at container x=24px
   - Each card's body sits at container x=60+ (after padding)
   - Each dot is absolute inside the card with left: -42px
     → dot left edge at container x = 60 - 42 = 18px
     → dot is 12px wide → dot center at container x = 24px → SITS ON RAIL ✓
   ========================================================================= */
.history-timeline {
  padding: clamp(48px, 7vw, 96px) 0 clamp(80px, 10vw, 120px);
  background: var(--bg-cream);
}
.history-timeline__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* ----- TRACKER (sticky left) ─────────────────────────────────────────
   Sticky within the timeline grid. `align-self: start` keeps it shrink-to-fit
   so it doesn't stretch to the cards column height. `height: fit-content`
   reinforces that. The grid row track itself is still tall (sized by cards
   column), so sticky has the full vertical range to "travel" through.
   ───────────────────────────────────────────────────────────────────── */
.history-tracker {
  position: -webkit-sticky;
  position: sticky;
  top: clamp(88px, 12vh, 140px);
  align-self: start;
  height: fit-content;
  /* Note: no `max-height` + `overflow-y: auto` here. Those were a workaround
     for a deeper bug (html/body had overflow that broke sticky context).
     Root fix is in the html/body rules above. Tracker just sticks naturally
     within the grid container's row track height. */
}
.history-tracker__sticky {
  padding: 28px 24px;
  background: rgba(244, 239, 229, 0.62);
  border: 1px solid rgba(20, 60, 46, 0.10);
  border-radius: 8px;
  text-align: left;
}
.history-tracker__label {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.history-tracker__label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: statusPulse 2.4s ease-out infinite;
}

/* Circular progress ring */
.history-tracker__ring-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 0 20px;
}
.history-tracker__ring {
  width: 100%;
  height: 100%;
  display: block;
}
.history-tracker__ring-track { stroke: rgba(20, 60, 46, 0.12); }
.history-tracker__ring-fill {
  stroke: var(--terracotta);
  transition: stroke-dashoffset 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.history-tracker__ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--ink);
}

.history-tracker__current { margin: 0 0 20px; }
.history-tracker__num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.015em;
}
.history-tracker__num [data-tracker-num] { color: var(--terracotta); }
.history-tracker__sep { margin: 0 5px; color: rgba(15, 15, 14, 0.28); }
.history-tracker__total { color: rgba(15, 15, 14, 0.42); }
.history-tracker__name {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 16px;
  line-height: 1.22;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  min-height: 2.4em;
  transition: opacity 0.3s ease;
}
.history-tracker__hint {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 15, 14, 0.42);
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 60, 46, 0.08);
}

/* ----- PERIODS (right column) ----- */
.history-periods {
  position: relative;
  padding-left: 60px;        /* reserves rail+dot lane */
}
.history-periods__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;                /* RAIL CENTER X */
  width: 1px;
  background: rgba(20, 60, 46, 0.18);
}
.history-periods__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 14%;
  background: var(--terracotta);
  transition: height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.history-period {
  position: relative;
  margin-bottom: clamp(36px, 5vw, 56px);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.history-period.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.history-period:last-child { margin-bottom: 0; }

/* Dot — absolute-positioned to land EXACTLY on the rail center
   See math comment above. left: -42px; width: 12px → center @ container x=24 */
.history-period__dot {
  position: absolute;
  left: -42px;
  top: 28px;                 /* visually aligns with card top (image top) */
  width: 12px;
  height: 12px;
  background: var(--bg-cream);
  border: 2px solid rgba(20, 60, 46, 0.30);
  border-radius: 50%;
  z-index: 2;
  transition: background 0.35s ease, border-color 0.35s ease,
              transform 0.35s ease, box-shadow 0.35s ease;
}
.history-period.is-completed .history-period__dot {
  background: var(--forest);
  border-color: var(--forest);
}
.history-period.is-active .history-period__dot {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: scale(1.20);
  box-shadow: 0 0 0 6px rgba(183, 71, 42, 0.14);
  animation: historyDotPulse 2.6s ease-out infinite;
}

@keyframes historyDotPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(183, 71, 42, 0.14); }
  50%      { box-shadow: 0 0 0 10px rgba(183, 71, 42, 0.05); }
}

/* ----- CARD (native <details> accordion) ----- */
/* Closed state shows summary (visual strip + head). Open state reveals expanded
   editorial content. Uses <details name="history-timeline"> for single-open
   semantics in modern browsers; falls back to multi-open gracefully. */

.history-period__details {
  border: 1px solid rgba(20, 60, 46, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-cream);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.history-period.is-active .history-period__details {
  border-color: rgba(183, 71, 42, 0.32);
  box-shadow: 0 16px 36px rgba(20, 60, 46, 0.06);
}
.history-period.is-completed .history-period__details {
  border-color: rgba(20, 60, 46, 0.16);
}
.history-period__details[open] {
  border-color: rgba(183, 71, 42, 0.35);
  box-shadow: 0 20px 44px rgba(20, 60, 46, 0.08);
}
/* Remove default disclosure marker */
.history-period__summary { list-style: none; }
.history-period__summary::-webkit-details-marker { display: none; }
.history-period__summary::marker { content: ""; }

/* SUMMARY (always-visible part) — image strip + compact head + toggle hint */
.history-period__summary {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 22px;
  padding: 18px 22px 18px 18px;
  cursor: pointer;
  position: relative;
  overflow: hidden;             /* clip watermark when it overflows on narrow widths */
  transition: background 0.25s ease;
}
/* Summary children should always paint above the watermark */
.history-period__visual,
.history-period__head { position: relative; z-index: 1; }
.history-period__summary:hover {
  background: rgba(244, 239, 229, 0.62);
}
.history-period__summary:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

/* Slim image strip in closed state */
.history-period__visual {
  position: relative;
  aspect-ratio: 200 / 130;
  overflow: hidden;
  border-radius: 6px;
  background: var(--bg-cream-warm);
}
.history-period__visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.92);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.history-period__details[open] .history-period__visual img {
  transform: scale(1.02);
}

/* Head block (right of image in summary) */
.history-period__head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding-right: 110px; /* room for toggle */
}
.history-period__time {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 4px;
}
/* Editorial watermark — large italic Fraunces number in the bottom-right corner
   of the summary card. Decorative only (aria-hidden in HTML). Sits behind content
   via low opacity; never blocks tap targets or expanded body. */
.history-period__num {
  position: absolute;
  bottom: 6px;
  right: 22px;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(56px, 6vw, 88px);
  line-height: 0.9;
  letter-spacing: -0.015em;
  color: var(--forest);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.history-period__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
  text-wrap: balance;
}
.history-period__closed-summary {
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 58ch;
}

/* Toggle hint (right side of head) */
.history-period__toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.history-period__toggle-label--close { display: none; }
.history-period__details[open] .history-period__toggle-label[data-toggle-open] { display: none; }
.history-period__details[open] .history-period__toggle-label--close { display: inline; }
.history-period__toggle-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--terracotta);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.history-period__details[open] .history-period__toggle-chevron {
  transform: rotate(180deg);
}

/* EXPANDED — revealed when details is open */
.history-period__expanded {
  padding: 6px 28px 28px;
  border-top: 1px solid rgba(20, 60, 46, 0.08);
  animation: historyPeriodExpand 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes historyPeriodExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.history-period__main-text {
  font-family: "Geist", sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 18px 0 22px;
}
.history-period__main-text p {
  margin: 0 0 14px;
  max-width: 64ch;
}
.history-period__main-text p:last-child { margin-bottom: 0; }

/* FACTS — Key facts list */
.history-period__facts {
  margin: 0 0 22px;
  padding: 16px 18px;
  background: rgba(244, 239, 229, 0.55);
  border-left: 2px solid rgba(20, 60, 46, 0.18);
  border-radius: 4px;
}
.history-period__facts-label {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 10px;
}
.history-period__facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-period__facts-list li {
  position: relative;
  padding-left: 22px;
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
}
.history-period__facts-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1.5px;
  background: var(--terracotta);
  border-radius: 1px;
}

/* WHY — highlighted mini block */
.history-period__why {
  margin: 0 0 18px;
  padding: 14px 18px;
  background: rgba(183, 71, 42, 0.05);
  border-left: 2px solid var(--terracotta);
  border-radius: 4px;
}
.history-period__why-label {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 6px;
}
.history-period__why-body {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* PLACES — bottom tag-style row */
.history-period__places {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(20, 60, 46, 0.08);
}
.history-period__places-label {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  flex-shrink: 0;
}
.history-period__places-text {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* QR-RELATED — optional callout */
.history-period__qr-related {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: rgba(20, 60, 46, 0.04);
  border: 1px solid rgba(20, 60, 46, 0.10);
  border-radius: 6px;
}
.history-period__qr-label {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.history-period__qr-label::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
}
.history-period__qr-body {
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* FINAL NOTE (P7 only) — careful framed note about post-1992 */
.history-period__final-note {
  margin: 18px 0 0;
  padding: 16px 18px;
  background: rgba(11, 31, 23, 0.04);
  border: 1px solid rgba(11, 31, 23, 0.12);
  border-left: 2px solid var(--forest-deep);
  border-radius: 4px;
}
.history-period__final-note-label {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--forest);
  margin: 0 0 6px;
}
.history-period__final-note-body {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15, 15, 14, 0.74);
  margin: 0;
}

/* CLOSING NOTE (P7) — kept compatible with prior styling */
.history-period__closing-note {
  margin: 14px 0 0;
  padding: 14px 16px;
  background: rgba(20, 60, 46, 0.04);
  border-left: 2px solid var(--terracotta);
  border-radius: 4px;
}
.history-period__closing-note p {
  margin: 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15, 15, 14, 0.74);
}

/* =========================================================================
   SOURCES — discreet end-of-timeline reference block
   ========================================================================= */
.history-sources {
  padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
  background: var(--bg-cream-warm);
}
.history-sources__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}
.history-sources__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 12px;
}
.history-sources__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
}
.history-sources__intro {
  font-family: "Geist", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 60ch;
}
.history-sources__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.history-sources__item {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(20, 60, 46, 0.08);
}
.history-sources__item:last-child { border-bottom: 0; }
.history-sources__name {
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0;
}
.history-sources__desc {
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.history-sources__note {
  margin: 24px 0 0;
  padding: 12px 16px;
  background: rgba(20, 60, 46, 0.04);
  border-left: 2px solid var(--forest);
  border-radius: 4px;
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.history-sources__note-label {
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--forest);
  margin-right: 10px;
  font-size: 10.5px;
}

/* =========================================================================
   REFLECTION (final dark editorial block — unchanged from prior pass)
   ========================================================================= */
.history-reflection {
  padding: clamp(72px, 10vw, 120px) 0;
  background: var(--forest-deep);
  color: var(--bg-cream);
  text-align: center;
}
.history-reflection__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 clamp(24px, 6vw, 80px);
}
.history-reflection__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 18px;
}
.history-reflection__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--bg-cream);
  margin: 0 0 22px;
  text-wrap: balance;
}
.history-reflection__body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.65;
  color: rgba(244, 239, 229, 0.80);
  margin: 0 auto 32px;
  max-width: 58ch;
}
.history-reflection__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 20px;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
  /* Timeline becomes single column. Tracker is a horizontal sticky strip on top. */
  .history-timeline__inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
  }
  .history-tracker {
    position: sticky;
    top: 0;
    z-index: 8;
    margin: 0 calc(-1 * clamp(24px, 6vw, 80px));
    padding: 0 clamp(24px, 6vw, 80px);
    background: rgba(244, 239, 229, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(20, 60, 46, 0.10);
  }
  .history-tracker__sticky {
    padding: 12px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px 16px;
    align-items: center;
  }
  .history-tracker__label,
  .history-tracker__hint { display: none; }
  .history-tracker__ring-wrap {
    width: 44px;
    height: 44px;
    margin: 0;
    grid-row: 1 / span 2;
    grid-column: 1;
  }
  .history-tracker__ring-pct { font-size: 11px; }
  .history-tracker__current {
    margin: 0;
    grid-row: 1 / span 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .history-tracker__num { font-size: 18px; margin: 0; }
  .history-tracker__name {
    font-size: 13.5px;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  /* Tighter rail+dot on phones */
  .history-periods { padding-left: 36px; }
  .history-periods__line { left: 12px; }
  .history-period__dot { left: -28px; width: 11px; height: 11px; }
  .history-period.is-active .history-period__dot {
    box-shadow: 0 0 0 5px rgba(183, 71, 42, 0.14);
  }
  .history-period { margin-bottom: 32px; }
  /* Summary collapses to single column (image on top, text below) */
  .history-period__summary {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px 14px 16px;
  }
  .history-period__visual { aspect-ratio: 600 / 200; }
  .history-period__head { padding-right: 0; }
  .history-period__num {
    /* On mobile, shrink and pull in so it never clashes with the stacked toggle */
    font-size: 44px;
    bottom: 8px;
    right: 12px;
    opacity: 0.10;
  }
  .history-period__title { font-size: 20px; padding-right: 36px; }
  .history-period__closed-summary { font-size: 13px; }
  .history-period__toggle {
    position: static;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(20, 60, 46, 0.10);
    justify-content: space-between;
    width: 100%;
  }
  .history-period__expanded { padding: 4px 18px 22px; }
  .history-period__main-text { font-size: 14.5px; }
  .history-sources__item { grid-template-columns: 1fr; gap: 4px; }
  .history-hero__cta-row .qrp-btn,
  .history-reflection__cta-row .qrp-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 380px) {
  .history-hero__title { font-size: 34px; }
  .history-period__body { padding: 18px 14px 20px; }
  /* Hide the watermark number on tiny phones to avoid any clutter */
  .history-period__num { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .history-period {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .history-period.is-active .history-period__dot { animation: none; }
  .history-period.is-active .history-period__visual img { transform: none; }
  .history-periods__line-fill,
  .history-tracker__ring-fill { transition: none; }
  .history-tracker__label::before { animation: none; }
}

/* =========================================================================
   PLACES — interactive thematic explorer "Mjesta koja nose vrijeme"
   ─────────────────────────────────────────────────────────────────────
   Filter chips at top → cards grid filters by data-themes attribute.
   Active chip = terracotta filled. Inactive = cream outlined.
   Cards are static in DOM, JS toggles `hidden` based on activeTheme.
   Featured Bobovac block at end.
   ========================================================================= */
.history-places {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-cream);
}
.history-places__intro,
.history-places__filters,
.history-places__count,
.history-places__grid {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

/* ----- INTRO -----
   Uses the wrapper rule (max-width: 1200px + margin auto + padding-left
   clamp 24-80px) so the intro outer box matches the .history-places__
   path-layout below pixel-for-pixel. Inner children capped at 48rem for
   readable measure stay left-anchored against the same gutter, so the
   eyebrow/title/subcopy left edges align with the .hp-path column below.
   Earlier attempt (commit dfe94eb) overrode max-width to 48rem +
   margin-left: 0 which anchored intro to viewport-left instead of
   wrapper-content-left, breaking the container alignment. */
.history-places__intro {
  margin-bottom: clamp(28px, 4vw, 40px);
  text-align: left;
}
.history-places__intro .history-places__title {
  max-width: 48rem;
}
.history-places__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 14px;
}
.history-places__title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.history-places__subcopy {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

/* ----- FILTER CHIPS ----- */
.history-places__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 16px;
}
.hp-chip {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: var(--bg-cream);
  color: var(--ink);
  border: 1px solid rgba(20, 60, 46, 0.18);
  border-radius: 999px;
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.2s ease;
}
.hp-chip:hover {
  background: rgba(183, 71, 42, 0.06);
  border-color: rgba(183, 71, 42, 0.45);
  color: var(--terracotta);
}
.hp-chip.is-active {
  background: var(--terracotta);
  color: var(--bg-cream);
  border-color: var(--terracotta);
}
.hp-chip:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

/* Count under chips */
.history-places__count {
  font-family: "Geist", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 0 0 clamp(28px, 4vw, 40px);
  text-transform: uppercase;
}
.history-places__count-active {
  color: var(--terracotta);
  font-weight: 500;
}
.history-places__count-sep { margin: 0 6px; color: rgba(15, 15, 14, 0.32); }
.history-places__count-num { font-weight: 500; }

/* ----- CARDS GRID ----- */
.history-places__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.hp-card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 26px);
  background: var(--bg-cream);
  border: 1px solid rgba(20, 60, 46, 0.10);
  border-radius: 8px;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.hp-card[hidden] { display: none; }
.hp-card:hover {
  border-color: rgba(183, 71, 42, 0.32);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20, 60, 46, 0.06);
}

.hp-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}
.hp-card__theme-tag {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  flex: 1 1 auto;
  min-width: 0;
}

/* Status chips — small label, color per status */
.hp-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(20, 60, 46, 0.06);
  color: var(--forest);
  border: 1px solid rgba(20, 60, 46, 0.12);
  flex-shrink: 0;
  white-space: nowrap;
}
.hp-card__status--qr {
  background: rgba(183, 71, 42, 0.08);
  color: var(--terracotta);
  border-color: rgba(183, 71, 42, 0.32);
}
.hp-card__status--demo {
  background: rgba(20, 60, 46, 0.14);
  color: var(--forest);
  border-color: rgba(20, 60, 46, 0.22);
}
.hp-card__status--map {
  background: rgba(20, 60, 46, 0.20);
  color: var(--bg-cream);
  border-color: transparent;
}
.hp-card__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.hp-card__name {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 23px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}

.hp-card__period {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  font-family: "Geist", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.hp-card__period-label {
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(20, 60, 46, 0.55);
  flex-shrink: 0;
}

/* Why-it-matters block */
.hp-card__why {
  margin: 6px 0 16px;
  padding: 10px 12px;
  background: rgba(244, 239, 229, 0.62);
  border-left: 2px solid var(--terracotta);
  border-radius: 3px;
  flex: 1 1 auto;
}
.hp-card__why-label {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 4px;
}
.hp-card__why-body {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* CTA — reuses global qrp-btn--secondary text+arrow style */
.hp-card__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* ----- FEATURED BOBOVAC BLOCK ----- */
.history-places__featured {
  max-width: 1200px;
  margin: clamp(48px, 6vw, 72px) auto 0;
  padding: 0 clamp(24px, 6vw, 80px);
}
.history-places__featured-inner {
  padding: clamp(40px, 5vw, 64px) clamp(32px, 4vw, 56px);
  background: var(--forest-deep);
  color: var(--bg-cream);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.history-places__featured-inner::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 180%;
  background:
    radial-gradient(circle at 70% 50%, rgba(183, 71, 42, 0.16) 0%, transparent 60%);
  pointer-events: none;
}
.history-places__featured-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 18px;
}
.history-places__featured-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: statusPulse 2.4s ease-out infinite;
}
.history-places__featured-title {
  position: relative;
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--bg-cream);
  margin: 0 0 14px;
  max-width: 22ch;
  text-wrap: balance;
}
.history-places__featured-subtitle {
  position: relative;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.4;
  color: rgba(244, 239, 229, 0.82);
  margin: 0 0 22px;
  max-width: 48ch;
}
.history-places__featured-body {
  position: relative;
  font-family: "Geist", sans-serif;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.65;
  color: rgba(244, 239, 229, 0.78);
  margin: 0 0 32px;
  max-width: 58ch;
}
.history-places__featured-cta-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* Secondary discover button — reuses qrp-btn--secondary text+arrow, but on
   dark bg so it gets cream color via .qrp-section--dark override pattern.
   We aren't using qrp-section--dark wrapper here, so apply directly. */
.history-places__featured .qrp-btn--secondary {
  color: var(--bg-cream);
}
.history-places__featured .qrp-btn--secondary:hover {
  color: rgba(244, 239, 229, 0.78);
}

/* ----- Responsive ----- */
@media (max-width: 900px) {
  .history-places__filters {
    /* horizontal scroll on tablet so chips don't wrap awkwardly */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .hp-chip { flex-shrink: 0; }
}
@media (max-width: 640px) {
  .history-places__grid {
    grid-template-columns: 1fr;
  }
  .hp-card__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .history-places__featured-cta-row .qrp-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-card { transition: none; }
  .hp-card:hover { transform: none; }
  .history-places__featured-eyebrow::before { animation: none; }
}

/* =========================================================================
   PLACES — rework: Royal subsection + Facts panel + Layers subsection
   Adds: split layout for royal cards + sticky "Znaš li?" facts on desktop,
   editorial per-card tags (replaces theme-name tags), priority status chip,
   layers intro block.
   ========================================================================= */

/* ----- Royal subsection wrapper ----- */
.history-places__royal {
  max-width: 1200px;
  margin: clamp(8px, 1vw, 16px) auto clamp(56px, 8vw, 88px);
  padding: 0 clamp(24px, 6vw, 80px);
}
.history-places__royal-intro {
  max-width: 760px;
  margin: 0 0 clamp(28px, 4vw, 40px);
}
.history-places__royal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 12px;
}
.history-places__royal-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: statusPulse 2.4s ease-out infinite;
}
.history-places__royal-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.history-places__royal-body {
  font-family: "Geist", sans-serif;
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: 60ch;
}

/* Split layout: cards grid left, facts panel right */
.history-places__royal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.history-places__royal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* Royal cards — slightly stronger card chrome to signal "featured" */
.hp-card--royal {
  background: var(--bg-cream);
  border-color: rgba(20, 60, 46, 0.14);
}
.hp-card--royal:hover {
  border-color: rgba(183, 71, 42, 0.42);
}

/* Editorial per-card tag — replaces theme-name tag.
   Now each card carries its own short editorial descriptor
   (e.g. "Kraljevsko središte", "Most preko Drine") which is
   the same regardless of active filter — no cross-theme mismatch. */
.hp-card__editorial-tag {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  flex: 1 1 auto;
  min-width: 0;
}

/* New "priority" status chip — terracotta filled, used for Bobovac */
.hp-card__status--priority {
  background: var(--terracotta);
  color: var(--bg-cream);
  border-color: var(--terracotta);
}
.hp-card__status--priority::before {
  background: var(--bg-cream);
  opacity: 1;
}

/* ----- Znaš li? facts panel ----- */
.history-places__facts {
  position: sticky;
  top: clamp(88px, 12vh, 140px);
  padding: clamp(24px, 3vw, 32px);
  background: var(--forest-deep);
  color: var(--bg-cream);
  border-radius: 8px;
  align-self: start;
  height: fit-content;
}
.history-places__facts-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.1;
  color: var(--bg-cream);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(244, 239, 229, 0.16);
  display: flex;
  align-items: center;
  gap: 10px;
}
.history-places__facts-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}
.history-places__facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.history-places__fact {
  position: relative;
  padding-left: 20px;
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(244, 239, 229, 0.84);
}
.history-places__fact::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 1.5px;
  background: var(--terracotta);
  border-radius: 1px;
}

/* ----- Layers subsection wrapper ----- */
.history-places__layers {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 6vw, 80px) 0;
  border-top: 1px solid rgba(20, 60, 46, 0.10);
}
.history-places__layers-intro {
  max-width: 720px;
  margin: 0 0 clamp(24px, 3vw, 32px);
}
.history-places__layers-eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 12px;
}
.history-places__layers-title {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.14;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

/* Layers section's filter + count + grid use the same .history-places__filters/__count/__grid
   rules from the previous pass — no overrides needed since they're now scoped inside
   .history-places__layers wrapper rather than .history-places directly. Reset their padding
   to inherit the layers wrapper padding. */
.history-places__layers .history-places__filters,
.history-places__layers .history-places__count,
.history-places__layers .history-places__grid {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
  /* Royal split → stack: cards first, facts below */
  .history-places__royal-layout {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }
  .history-places__facts {
    position: static;
    top: auto;
  }
}
@media (max-width: 640px) {
  .history-places__royal-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .history-places__royal-eyebrow::before { animation: none; }
}

/* =========================================================================
   PLACES STORY PATH — 5-card narrative (refinement of "Mjesta koja nose vrijeme")
   ─────────────────────────────────────────────────────────────────────
   Replaces the previous royal-grid + layers-filter pattern with a focused
   numbered path: 5 cards (Bobovac → Kraljeva Sutjeska → Jajce → Stećci →
   Počitelj) each as a <details name="history-places-path"> accordion.
   Single-open semantics via the name attribute. Sticky "Znaš li?" panel
   on the right. Numbered visual path with subtle connecting line on left.
   ========================================================================= */

/* Two-col split: path on left, sticky facts on right */
.history-places__path-layout {
  max-width: 1200px;
  margin: clamp(8px, 1vw, 16px) auto clamp(56px, 8vw, 88px);
  padding: 0 clamp(24px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* ----- STORY PATH (left col) ----- */
.hp-path {
  position: relative;
  padding-left: clamp(56px, 6vw, 72px);  /* room for numbered badges + line */
}

.hp-path__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 clamp(24px, 3vw, 32px);
}
.hp-path__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: statusPulse 2.4s ease-out infinite;
}

/* Vertical connecting line — muted base, terracotta fill grows on scroll.
   JS (royalPlacesActiveIndex tracker) sets .hp-path__line-fill height %. */
.hp-path__line {
  position: absolute;
  top: 60px;     /* below the eyebrow */
  bottom: 0;
  left: clamp(20px, 2.4vw, 28px);  /* column center where number badges sit */
  width: 1px;
  background: rgba(20, 60, 46, 0.16);
  pointer-events: none;
  overflow: hidden;
}
.hp-path__line-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: var(--terracotta);
  transition: height 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

/* Each step in the path */
.hp-path__step {
  position: relative;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.hp-path__step:last-child { margin-bottom: 0; }

/* Number badge — sits on the connecting line */
.hp-path__num {
  position: absolute;
  left: calc(-1 * clamp(56px, 6vw, 72px) + clamp(8px, 1.4vw, 16px));
  top: 22px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--terracotta);
  background: var(--bg-cream);
  border: 1.5px solid var(--terracotta);
  border-radius: 50%;
  z-index: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
/* Marker states driven by JS scroll-tracker (single royalPlacesActiveIndex
   source of truth). is-active = current reading position, is-completed =
   past cards. Open-state highlight still applies as a secondary cue. */
.hp-path__step.is-completed .hp-path__num {
  background: var(--terracotta);
  color: var(--bg-cream);
  border-color: var(--terracotta);
  opacity: 0.62;
}
.hp-path__step.is-active .hp-path__num {
  background: var(--terracotta);
  color: var(--bg-cream);
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(183, 71, 42, 0.14);
}
/* Accordion-open as visual cue too (independent of scroll position) */
.hp-path__step:has(.hp-path__details[open]) .hp-path__num {
  background: var(--terracotta);
  color: var(--bg-cream);
  opacity: 1;
}

/* Subtle active card border — sits in step's accordion border on top of
   the existing open-state shadow. Light, not loud. */
.hp-path__step.is-active .hp-path__details {
  border-color: rgba(183, 71, 42, 0.28);
}

/* ----- Accordion card ----- */
.hp-path__details {
  border: 1px solid rgba(20, 60, 46, 0.12);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-cream);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.hp-path__details[open] {
  border-color: rgba(183, 71, 42, 0.32);
  box-shadow: 0 12px 28px rgba(20, 60, 46, 0.06);
}
.hp-path__summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2.5vw, 28px);
  transition: background 0.25s ease;
}
.hp-path__summary::-webkit-details-marker { display: none; }
.hp-path__summary::marker { content: ""; }
.hp-path__summary:hover { background: rgba(244, 239, 229, 0.62); }
.hp-path__summary:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

.hp-path__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
}
.hp-path__tag {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  flex: 1 1 auto;
  min-width: 0;
}

/* Status chip — reuses the same look as the QR-vodici demo panels */
.hp-path__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(20, 60, 46, 0.06);
  color: var(--forest);
  border: 1px solid rgba(20, 60, 46, 0.12);
  flex-shrink: 0;
  white-space: nowrap;
}
.hp-path__status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.hp-path__status--priority {
  background: var(--terracotta);
  color: var(--bg-cream);
  border-color: var(--terracotta);
}
.hp-path__status--priority::before { background: var(--bg-cream); opacity: 1; }
.hp-path__status--qr {
  background: rgba(183, 71, 42, 0.08);
  color: var(--terracotta);
  border-color: rgba(183, 71, 42, 0.32);
}

.hp-path__name {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.hp-path__closed-sent {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: 52ch;
}

/* Toggle hint inside summary */
.hp-path__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.hp-path__toggle-label--close { display: none; }
.hp-path__details[open] .hp-path__toggle-label[data-toggle-open] { display: none; }
.hp-path__details[open] .hp-path__toggle-label--close { display: inline; }
.hp-path__toggle-chevron {
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--terracotta);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.hp-path__details[open] .hp-path__toggle-chevron { transform: rotate(180deg); }

/* ----- Expanded content ----- */
.hp-path__expanded {
  padding: 0 clamp(20px, 2.5vw, 28px) clamp(22px, 2.5vw, 28px);
  border-top: 1px solid rgba(20, 60, 46, 0.08);
  animation: hpPathExpand 0.32s cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes hpPathExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hp-path__body {
  font-family: "Geist", sans-serif;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 18px 0 18px;
  max-width: 60ch;
}

/* Mini-facts block ("Ključni momenti") */
.hp-path__facts {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: rgba(244, 239, 229, 0.62);
  border-left: 2px solid var(--terracotta);
  border-radius: 4px;
}
.hp-path__facts-label {
  font-family: "Geist", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 8px;
}
.hp-path__facts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp-path__facts-list li {
  position: relative;
  padding-left: 20px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.hp-path__facts-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 12px;
  height: 1.5px;
  background: var(--terracotta);
  border-radius: 1px;
}

.hp-path__cta {
  align-self: flex-start;
}

/* Featured emphasis for Bobovac (first card) — subtle, not flashy */
.hp-path__step:first-child .hp-path__details {
  background: var(--bg-cream-warm);
}

/* ----- Responsive: stack the split, simplify path ----- */
@media (max-width: 1024px) {
  .history-places__path-layout {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }
  /* Facts panel was sticky in the previous CSS pass; static rule already
     applied via existing .history-places__facts override below 1024px. */
}
@media (max-width: 640px) {
  .hp-path { padding-left: clamp(40px, 12vw, 56px); }
  .hp-path__num {
    width: 24px;
    height: 24px;
    font-size: 11px;
    top: 18px;
  }
  .hp-path__line { left: clamp(14px, 5vw, 20px); }
  .hp-path__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hp-path__eyebrow::before { animation: none; }
  .hp-path__expanded { animation: none; }
  .hp-path__details,
  .hp-path__num,
  .hp-path__toggle-chevron,
  .hp-path__line-fill { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER NEWSLETTER — GDPR consent (B1, v=191)
   Form wraps the pill row + a separate consent checkbox below.
   ═══════════════════════════════════════════════════════════════ */
.foot__news-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.foot__news-consent-check {
  margin-top: 0;
  padding: 0;
}

/* Footer is cream-on-cream (.foot { background: var(--bg-cream) }), so consent
   label needs DARK text. Earlier override of cream-on-cream made it invisible. */
.foot__news-consent-check .form-consent__text {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
  max-width: 42rem;
}

.foot__news-consent-check .form-consent__text a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.foot__news-consent-check .form-consent__text a:hover,
.foot__news-consent-check .form-consent__text a:focus-visible {
  color: #9a3b22;
}

/* Ensure checkbox box + tick are visible on cream — accent-color already
   set on .form-consent__checkbox, but bump touch target on mobile. */
@media (max-width: 480px) {
  .foot__news-consent-check .form-consent__checkbox {
    width: 20px;
    height: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HISTORY TEASER — editorial bridge to /historija-bih (v=192)
   Three variants:
     1. .history-bridge       — homepage slim horizontal callout
     2. .history-link-card    — mjesta intro subtle prompt
     3. .history-link-inline  — o-nama in-flow paragraph + secondary CTA
   All reuse the canonical secondary CTA pattern (text + arrow gap-grow,
   terracotta on cream). No new CTA styles introduced.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Homepage history-bridge ─────────────────────────────── */
.history-bridge {
  background: var(--bg-cream);
  padding: clamp(48px, 7vw, 88px) clamp(24px, 6vw, 48px);
}

.history-bridge__inner {
  max-width: 920px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(28px, 5vw, 56px);
  padding: clamp(32px, 4vw, 44px) clamp(32px, 5vw, 52px);
  background: rgba(20, 60, 46, 0.03);
  border-left: 2px solid var(--terracotta);
  border-radius: 2px;
}

.history-bridge__text {
  min-width: 0;
}

.history-bridge__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 14px;
}

.history-bridge__heading {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.18;
  color: var(--forest);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}

.history-bridge__body {
  font-family: "Geist", sans-serif;
  font-size: 15px;
  line-height: 1.62;
  color: rgba(20, 60, 46, 0.78);
  margin: 0 0 18px;
  max-width: 540px;
}

.history-bridge__cta-wrap {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .history-bridge__inner {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ── 2. Mjesta intro history-link-card ──────────────────────── */
.history-link-card {
  max-width: 720px;
  margin: clamp(24px, 4vw, 40px) auto clamp(40px, 6vw, 56px);
  padding: clamp(22px, 3.5vw, 32px) clamp(24px, 4vw, 36px);
  background: rgba(20, 60, 46, 0.03);
  border-left: 2px solid var(--terracotta);
  border-radius: 2px;
}

.history-link-card__heading {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.22;
  color: var(--forest);
  margin: 0 0 10px;
}

.history-link-card__body {
  font-family: "Geist", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(20, 60, 46, 0.75);
  margin: 0 0 16px;
  max-width: 42rem;
}

/* ── 3. O-nama inline history-link ──────────────────────────── */
.history-link-inline {
  margin: clamp(24px, 3vw, 36px) 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(20, 60, 46, 0.12);
}

.history-link-inline__body {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.6;
  color: rgba(20, 60, 46, 0.85);
  margin: 0;
  max-width: 620px;
}

/* ═══════════════════════════════════════════════════════════════
   HISTORY TODAY — closing synthesis section (v=194)
   "Bosnia and Herzegovina today" — 5 editorial cards + Ukratko
   fact strip + closing editorial note with canonical CTAs.
   Sits between history-places (Kraljevska Bosna) and history-sources.
   ═══════════════════════════════════════════════════════════════ */

/* v2 (v=198): asymmetric editorial layout — featured statement card + 4
   identity cards (2x2) + factual structure card + refined label/value
   fact strip + closing note with canonical CTAs. Replaces earlier 5-card
   grid for a stronger editorial closing chapter. */
.history-today {
  background: var(--bg-cream);
  padding: clamp(72px, 9vw, 120px) clamp(24px, 6vw, 48px);
  position: relative;
}

.history-today__inner {
  max-width: 1180px;
  margin: 0 auto;
}

/* === Header (left-aligned editorial) === */
.history-today__header {
  max-width: 820px;
  margin: 0 0 clamp(40px, 5vw, 60px);
}

.history-today__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.history-today__eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--terracotta);
}

.history-today__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.12;
  color: var(--forest);
  margin: 0 0 14px;
  letter-spacing: -0.015em;
}

.history-today__headline {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.4;
  color: var(--sage-deep, #5F7359);
  margin: 0 0 22px;
}

.history-today__body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.55vw, 17px);
  line-height: 1.7;
  color: rgba(20, 60, 46, 0.78);
  margin: 0;
  max-width: 720px;
}

/* === Top split: featured statement (left) + identity 2x2 (right) === */
.history-today__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 2.6vw, 32px);
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

/* Featured statement card — soft sage gradient, terracotta accent stripe */
.history-today__featured {
  background: linear-gradient(135deg, rgba(95, 115, 89, 0.085) 0%, rgba(255, 255, 255, 0.45) 100%);
  border: 1px solid rgba(20, 60, 46, 0.10);
  border-left: 3px solid var(--terracotta);
  border-radius: 4px;
  padding: clamp(32px, 3.8vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
}

.history-today__featured-label {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0;
}

.history-today__featured-title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.18;
  color: var(--forest);
  margin: 0;
  letter-spacing: -0.015em;
}

.history-today__featured-body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.7;
  color: rgba(20, 60, 46, 0.82);
  margin: 0;
}

/* Identity 2x2 grid — 4 smaller cards on the right */
.history-today__identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 20px);
}

.history-today__identity-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(20, 60, 46, 0.10);
  border-radius: 4px;
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.history-today__identity-card:hover {
  border-color: rgba(183, 71, 42, 0.28);
  background: rgba(255, 255, 255, 0.78);
}

.history-today__identity-title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.18;
  color: var(--forest);
  margin: 0;
}

.history-today__identity-body {
  font-family: "Geist", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(20, 60, 46, 0.78);
  margin: 0;
}

/* === Factual structure card (full-width, calm) === */
.history-today__structure {
  background: rgba(20, 60, 46, 0.03);
  border: 1px solid rgba(20, 60, 46, 0.10);
  border-radius: 4px;
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3.4vw, 44px);
  margin-bottom: clamp(20px, 2.6vw, 32px);
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.history-today__structure-title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.22;
  color: var(--forest);
  margin: 0;
}

.history-today__structure-body {
  font-family: "Geist", sans-serif;
  font-size: clamp(14px, 1.45vw, 15.5px);
  line-height: 1.7;
  color: rgba(20, 60, 46, 0.78);
  margin: 0;
}

/* === Ukratko: refined horizontal strip with label+value pairs === */
.history-today__facts {
  padding: clamp(28px, 3vw, 36px) 0 clamp(40px, 5vw, 56px);
  border-top: 1px solid rgba(20, 60, 46, 0.10);
  border-bottom: 1px solid rgba(20, 60, 46, 0.10);
  margin-bottom: clamp(48px, 5vw, 64px);
}

.history-today__facts-label {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.history-today__facts-label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--terracotta);
}

.history-today__facts-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 36px);
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-today__fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid rgba(183, 71, 42, 0.30);
  padding-left: clamp(14px, 1.4vw, 18px);
}

.history-today__fact-label {
  font-family: "Geist", sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-deep, #5F7359);
}

.history-today__fact-value {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.32;
  color: var(--forest);
}

/* === Closing note + CTAs (centered) === */
.history-today__closing {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.history-today__closing-title {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.22;
  color: var(--forest);
  margin: 0 0 16px;
}

.history-today__closing-body {
  font-family: "Geist", sans-serif;
  font-size: clamp(15px, 1.6vw, 16.5px);
  line-height: 1.7;
  color: rgba(20, 60, 46, 0.78);
  margin: 0 0 32px;
}

.history-today__cta-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 28px;
}

/* === Responsive === */
@media (max-width: 900px) {
  .history-today__top {
    grid-template-columns: 1fr;
  }
  .history-today__structure {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .history-today__identity {
    grid-template-columns: 1fr;
  }
  .history-today__facts-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .history-today__facts-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .history-today__cta-row {
    flex-direction: column;
    width: 100%;
  }
  .history-today__cta-row .qrp-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE HEADLINE OVERFLOW GUARDS (v=199)
   Several large editorial headlines use clamp() with a min font-size
   of 56–72px. Translated copy (EN/DE often has longer individual words
   than BS) renders single words wider than a 320–430px viewport at that
   floor, causing the title to clip against its overflow:hidden parent
   (or worse, hint at horizontal scroll).
   Fix: lower the min font-size at ≤640px and ≤430px, and add
   overflow-wrap: break-word so even a single oversized word will break
   gracefully instead of overflowing. Parent sections already have
   overflow: hidden (html has overflow-x: clip), so this only prevents
   the visible clip-cut-off of the headline itself.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .brand-moment__title {
    font-size: clamp(40px, 11vw, 72px);
    line-height: 1.02;
    /* overflow-wrap moved to .brand-moment__word — see word rule below */
    max-width: 100%;
    row-gap: 0.04em;
    column-gap: 0;
  }
  .brand-moment__word {
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .brand-moment__supporting {
    overflow-wrap: anywhere;
    max-width: 100%;
  }
  .hero__title {
    font-size: clamp(40px, 10vw, 72px);
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .frame__hero-text {
    font-size: clamp(40px, 11vw, 72px);
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .propose-hero--asymmetric .propose-hero__title,
  .place-hero__title,
  .package--v5 .package__title,
  .package__title {
    font-size: clamp(38px, 10vw, 72px);
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .city-hero__title,
  .onama-story__title,
  .history-hero__title,
  .history-today__title {
    overflow-wrap: break-word;
    max-width: 100%;
  }
  /* Decorative oversized numbers (.package__massive-number, .history-period__num)
     are NUMBERS, not translatable text — they don't overflow due to language.
     Left untouched. */
}

@media (max-width: 430px) {
  .brand-moment__title {
    font-size: clamp(34px, 10vw, 56px);
    letter-spacing: -0.015em;
  }
  .brand-moment__supporting {
    font-size: clamp(15px, 4vw, 19px);
  }
  .hero__title {
    font-size: clamp(36px, 9.5vw, 56px);
  }
  .frame__hero-text,
  .propose-hero--asymmetric .propose-hero__title,
  .place-hero__title,
  .package--v5 .package__title,
  .package__title {
    font-size: clamp(34px, 9.5vw, 56px);
  }
}

/* Section parents — defensive max-width: 100% guard against any future
   inline-block child whose intrinsic width exceeds viewport. (html +
   body already have overflow-x: clip per CLAUDE.md sticky fix.) */
.brand-moment,
.hero,
.frame,
.frame__hero-text,
.propose-hero,
.place-hero,
.package {
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   PLACE PAGES — shared dark fact box + per-page practical tune (v=203)
   ───────────────────────────────────────────────────────────────
   .place-factbox: canonical dark fact-box rule, lives inside
   .place-pullquote (dark ink bg). Cream-on-dark text for legibility.
   Used by Ušće, Kula, and future place pages.
   .usce-practical: usce-specific tighter padding (kastel page has
   5 paragraphs of body content; usce has 3 short, so the global
   clamp(80px,10vw,140px) feels empty).
   ═══════════════════════════════════════════════════════════════ */

/* Canonical dark fact-box for place pages. Lives inside .place-pullquote
   (which provides background var(--ink) + color cream). Use as:
   <section class="place-pullquote place-factbox">
     <div class="place-pullquote__inner">
       <h3 class="place-factbox__title">Znaš li?</h3>
       <ul class="place-factbox__list">
         <li class="place-factbox__item">…</li>
   First introduced for the Ušće page (was .usce-factbox in v=202),
   generalized to .place-factbox in v=203 so all place pages share it. */
.place-factbox {
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(56px, 7vw, 88px);
}

.place-factbox__title {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-align: center;
  margin: 0 0 clamp(24px, 3vw, 36px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.place-factbox__list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.place-factbox__item {
  font-family: "Geist", sans-serif;
  font-size: 15px;
  line-height: 1.62;
  /* Cream-on-dark — high contrast against .place-pullquote dark ink bg. */
  color: rgba(244, 239, 229, 0.88);
  padding-left: 18px;
  border-left: 2px solid rgba(183, 71, 42, 0.65);
}

@media (max-width: 480px) {
  .place-factbox__item {
    font-size: 14.5px;
    padding-left: 14px;
  }
}

/* Practical section — tighter rhythm than the global .place-practical,
   which is sized for kastel's 5-paragraph left content. */
.usce-practical {
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(56px, 7vw, 100px);
}

.usce-practical .place-practical__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.usce-practical .place-practical__content > p {
  margin: 0;
  max-width: 56ch;
}

/* Heading line breaks on usce page should hold across breakpoints — guard
   against narrow viewports collapsing the carefully placed <br>. */
.place-section__title br {
  display: inline;
}
@media (min-width: 480px) {
  /* On any viewport wider than ~iPhone SE, honor manual <br> for editorial wrap. */
  .place-section__title br {
    display: block;
  }
}

/* =========================================================================
   TYPOGRAPHY CALIBRATION — Phase 3 (main editorial paragraph readability)
   Lifts only the prominent body blocks (place-page narrative, history-today
   editorial, intro-lead). Functional small body (cards, demo info, footer)
   intentionally untouched.
   ========================================================================= */

/* Main place-page narrative paragraphs (Section 01 / 02 / 03 bodies) */
.place-section__body p,
.place-practical__content p {
  font-size: 17px;
  line-height: 1.7;
  max-width: 65ch;
}

/* Place-page intro lead — already serif large; just open the leading */
.place-intro-lead__text {
  line-height: 1.65;
  max-width: 38rem;
}

/* History-today editorial body blocks (already at lh 1.7 — ensure measure) */
.history-today__featured-body,
.history-today__closing-body {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  /* text-wrap: balance distributes the final line so a single word never
     orphans. Modern browsers (2024+) support it natively; older fall back
     to default wrap with no harm. Centres + balanced wrap matches the
     centred editorial block intent of .history-today__closing wrapper. */
  text-wrap: balance;
}

/* Mobile guard — keep the lift safe on small screens */
@media (max-width: 640px) {
  .place-section__body p,
  .place-practical__content p {
    font-size: 16px;
    line-height: 1.65;
    max-width: none;
  }
}

/* =========================================================================
   CONTROLLED LINE-BREAK UTILITIES — wrap pattern for editorial headings
   that must break at intentional phrase boundaries (not browser-default).
   Used by hero eyebrow, hero slide titles, routes-teaser lead, and the
   places-more title. Spans are author-controlled in i18n bundles.
   ========================================================================= */

/* (A) Hero eyebrow: two phrase chunks. The wrapper .hero__eyebrow-text
       is the single flex child of .hero__eyebrow (which is inline-flex with
       gap:14px) — without this wrapper, two direct flex spans would gain
       a 14px gap where there should just be a word space. Inside the
       wrapper, .eyebrow-line spans are inline on desktop and block on
       mobile, stacking the eyebrow onto 2 lines. */
.hero__eyebrow-text {
  display: inline-block;
}
.eyebrow-line {
  display: inline;
}
@media (max-width: 768px) {
  .eyebrow-line {
    display: block;
  }
}

/* (B) Generic nowrap protector — keep a short phrase from splitting across
       lines. Use ONLY on phrases short enough that nowrap won't push the
       line off-screen at 320px. */
.keep-together {
  white-space: nowrap;
}

/* (C) Routes-teaser final sentence: forced to its own line below the main
       lead sentence. "Za sada gradimo temelj." is 22 chars — safe to nowrap
       at any reasonable mobile width. Safety relief at <360px. */
.route-final-line {
  display: block;
  margin-top: 0.25em;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .route-final-line {
    white-space: normal;
  }
}

/* (D) Places-more title second part: forced block + nowrap so
       "Vjetrenica i drugi." sits cleanly on line 2 instead of wrapping
       the first word up to line 1. */
.places-more-line2 {
  display: block;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .places-more-line2 {
    white-space: normal;
  }
}

/* (E) Places-intro final sentence ("Mjesta širom BiH koja zaslužuju više
       pažnje." / "Places across BiH that deserve more attention." /
       "Orte in ganz BiH, die mehr Aufmerksamkeit verdienen.") — forced to
       its own line below the first sentence. No nowrap (sentence too long
       for that — let natural wrap handle internal width). */
.places-final-line {
  display: block;
  margin-top: 0.25em;
}


/* (F) Place-frame fun-fact second sentence — Kastel, Hutovo Blato, and any
       other places.frames[N].factText that wraps the 2nd sentence in this
       span. Forces the second editorial sentence onto its own line below
       the first. No nowrap — sentences are long enough to need natural wrap. */
.funfact-second-line {
  display: block;
  margin-top: 0.25em;
}

/* =========================================================================
   MOBILE-ONLY CONTROLLED LINE-BREAK UTILITIES
   Used by hero slide Kravica nowrap protections, the manifest intro title
   3-line mobile composition, and the CTA strip 2-line mobile composition.
   All inline on desktop (no visual impact); only engage at ≤768px.
   ========================================================================= */

/* (G) Generic mobile-only block — desktop inline, mobile each on own line.
       Used by intro.title to stack "Centralno mjesto" / "gdje Bosna postaje"
       / "vidljiva." cleanly on mobile while preserving inline desktop flow. */
.mobile-line-block {
  display: inline;
}
@media (max-width: 768px) {
  .mobile-line-block {
    display: block;
  }
}

/* (H) Mobile-only nowrap — protects a short phrase from splitting on mobile.
       Used inside .mobile-line-block on the middle line of intro.title to
       keep "gdje Bosna postaje" glued at narrow viewports. Inactive on
       desktop where natural wrap is fine. */
.mobile-keep-together {
  /* desktop default: normal */
}
@media (max-width: 768px) {
  .mobile-keep-together {
    white-space: nowrap;
  }
}

/* (I) CTA strip second line — "se grade dok čitaš." / EN / DE. Inline on
       desktop (CTA stays on one line if container allows), block on mobile
       to force the 2-line composition that doesn't orphan "čitaš." */
.cta-line-mobile {
  display: inline;
}
@media (max-width: 768px) {
  .cta-line-mobile {
    display: block;
    margin-top: 0.15em;
  }
}

/* =========================================================================
   INSTAGRAM CARD — full-card click affordance (drustvene-mreze.html)
   Canonical "card-link" pattern: the inner .social-platform__live-cta <a>
   gets a transparent ::after overlay that covers the whole .social-platform
   --live card. One <a> remains in the DOM; click anywhere on the card
   navigates to the same Instagram URL. Text inside stays visible/styled.
   ========================================================================= */
.social-platform--live {
  cursor: pointer;
}

.social-platform--live .social-platform__live-cta {
  /* Self-contained position so ::after can absolutely position against
     the card (parent .social-platform already has position: relative). */
  margin-top: auto;
}

.social-platform--live .social-platform__live-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* No background, no border — invisible overlay that captures clicks. */
}

/* Sync CTA hover state when user hovers anywhere on the card, so the
   whole card visually responds as one interactive zone. Matches the
   .qrp-btn--secondary:hover transition (color shift + gap-grow). */
.social-platform--live:hover .social-platform__live-cta {
  color: #9a3b22;
  gap: 12px;
}

/* /mjesta only — left-anchor the .history-link-card to the page content
   gutter so its left edge aligns with the .city-hero intro column above.
   Scoped via body class so other pages with .history-link-card would
   still default to centred. (Currently the class is mjesta-only, so the
   scope is precautionary — keeps the rule surgical.) The card is now
   wrapped in .city-page__inner (1200px + clamp padding) in markup. */
.city-page-body .history-link-card {
  margin-left: 0;
  margin-right: auto;
}

/* =========================================================================
   KASTEL AUDIO TEST — reversible audio player styles.
   Only applies to /mjesta/tvrdjave/kastel.html where the .place-audio
   section appears. To remove: delete this entire block + the
   <section class="place-audio"> markup + the <script> controller in
   kastel.html.
   ========================================================================= */
.place-audio {
  padding: clamp(24px, 4vw, 40px) 0;
  background: var(--bg-cream);
}

.place-audio .audio-player {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 15, 14, 0.08);
  border-radius: 8px;
  max-width: 38rem;
  margin: 0 auto;
}

.place-audio .audio-player__cta {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--terracotta);
  color: var(--bg-cream);
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(183, 71, 42, 0.22);
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.place-audio .audio-player__cta:hover {
  background: #9a3b22;
  box-shadow: 0 6px 20px rgba(183, 71, 42, 0.32);
  transform: translateY(-1px);
}
.place-audio .audio-player__cta:active { transform: translateY(0); }
.place-audio .audio-player__cta:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

.place-audio .audio-player__cta-icon {
  display: inline-block;
  width: 10px;
  height: 12px;
  position: relative;
}
/* Play triangle */
.place-audio .audio-player__cta-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1px;
  width: 0;
  height: 0;
  border-left: 8px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
/* Pause (two bars) — replaces triangle when .is-playing */
.place-audio .audio-player.is-playing .audio-player__cta-icon::before {
  top: 0;
  left: 0;
  width: 3px;
  height: 12px;
  background: currentColor;
  border: 0;
}
.place-audio .audio-player.is-playing .audio-player__cta-icon::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 3px;
  height: 12px;
  background: currentColor;
}

.place-audio .audio-player__progress-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.place-audio .audio-player__track {
  position: relative;
  height: 3px;
  background: rgba(15, 15, 14, 0.08);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}
.place-audio .audio-player__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--terracotta);
  border-radius: 999px;
  transition: width 0.08s linear;
}

.place-audio .audio-player__time {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
}

@media (max-width: 640px) {
  .place-audio .audio-player {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .place-audio .audio-player__cta {
    justify-content: center;
    width: 100%;
  }
}

/* =========================================================================
   PHOTO CREDIT — minimal author attribution below images.
   Currently used only on Kula page section 01 photo (Nermin Tabaković).
   Right-aligned, Geist 11px, premium editorial publishing pattern.

   IMPORTANT: .place-section__visual by default has aspect-ratio:4/5 +
   overflow:hidden and the <img> fills it 100%×100%. That clips anything
   placed AFTER the picture inside the same .place-section__visual. The
   :has() rule below reverts the wrapper to a flex-column and pushes
   the aspect-ratio/overflow contract down onto the <picture> so the
   credit can sit naturally beneath the image.
   ========================================================================= */
.place-section__visual:has(> .photo-credit) {
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.place-section__visual:has(> .photo-credit) > picture {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(183, 71, 42, 0.04);
  width: 100%;
}

.place-section__visual:has(> .photo-credit) > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-credit {
  margin: 12px 0 0;
  text-align: right;
  font-family: "Geist", sans-serif;
  font-size: 11px;
  color: rgba(15, 15, 14, 0.55);
}

.photo-credit__label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  margin-right: 10px;
}

.photo-credit__author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--terracotta);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.3s ease;
}

.photo-credit__author:hover,
.photo-credit__author:focus-visible {
  color: #9a3b22;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.photo-credit__arrow {
  font-size: 10px;
  opacity: 0.7;
  transition: transform 0.3s ease;
}

.photo-credit__author:hover .photo-credit__arrow,
.photo-credit__author:focus-visible .photo-credit__arrow {
  transform: translate(2px, -2px);
}

/* =========================================================================
   PLACE AUDIO — language-aware visibility.
   When a .place-audio section declares which languages have a recording via
   data-audio-langs="bs", hide it whenever <html lang> is NOT one of those
   languages. Avoids confusing UX where a Bosnian-only audio player shows up
   for EN/DE visitors who would only get Bosnian audio if they pressed play.

   Audio file pre-paint sync (inline <script> in <head>) ensures html[lang]
   reflects the saved/URL language before first paint — no FOUC.

   Inline gracefullyHide() (when the MP3 is missing or 404s) sets
   `style="display:none"` directly, which beats any CSS rule below, so
   that path stays correct regardless of language. */
.place-audio[data-audio-langs] {
  display: none;
}
html[lang="bs"] .place-audio[data-audio-langs~="bs"],
html[lang="en"] .place-audio[data-audio-langs~="en"],
html[lang="de"] .place-audio[data-audio-langs~="de"] {
  display: block;
}

/* =========================================================================
   POGLEDAJ OKO SEBE — Kula-only section listing things to notice on site.
   Full-width inside .place-section__inner, numbered list, prose width.
   Reuses .place-section__eyebrow + .place-section__title for heading.
   ========================================================================= */
.place-look-around {
  padding: clamp(64px, 9vw, 120px) 0;
  background: rgba(20, 60, 46, 0.03);
}

.place-look-around__head {
  max-width: 720px;
  margin: 0 0 clamp(48px, 6vw, 72px) 0;
}

.place-look-around__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(28px, 3vw, 40px);
  max-width: 820px;
}

.place-look-around__item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  align-items: start;
  padding-top: 24px;
  border-top: 1px solid rgba(20, 60, 46, 0.12);
}

.place-look-around__item:first-child {
  padding-top: 0;
  border-top: none;
}

.place-look-around__num {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  padding-top: 4px;
}

.place-look-around__body {
  display: block;
}

.place-look-around__lead {
  display: block;
  font-family: "Fraunces", serif;
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.005em;
}

.place-look-around__desc {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
  max-width: 600px;
}

@media (max-width: 640px) {
  .place-look-around__item {
    grid-template-columns: 40px 1fr;
    gap: 16px;
  }
  .place-look-around__num {
    font-size: 11px;
  }
}

/* =========================================================================
   PLACES INDEX SYSTEM — filter chips + responsive card grid + empty state.
   Registry-driven from /public/data/places.json via /public/places-system.js.
   Used by /mjesta.html, /mjesta/{type}/index.html overviews, /mjesta/{city}/
   overviews, and the "Slično ovome" related sections on individual pages.
   ========================================================================= */

.places-index {
  padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px);
}

.places-filter {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

.places-filter__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: center;
}

.places-filter__label {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 15, 14, 0.5);
}

.places-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.places-filter__chip {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(20, 60, 46, 0.18);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.places-filter__chip:hover,
.places-filter__chip:focus-visible {
  border-color: rgba(20, 60, 46, 0.5);
  background: rgba(20, 60, 46, 0.04);
}

.places-filter__chip.is-active {
  background: var(--forest);
  color: var(--bg-cream);
  border-color: var(--forest);
}

@media (max-width: 720px) {
  .places-filter__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .places-filter__label {
    margin-bottom: 4px;
  }
}

/* ───── Grid + card ───── */
.places-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}

@media (max-width: 980px) {
  .places-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .places-grid {
    grid-template-columns: 1fr;
  }
}

.place-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--bg-cream);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.4s ease;
  box-shadow: 0 1px 0 rgba(20, 60, 46, 0.04);
}

.place-card:hover,
.place-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -16px rgba(15, 15, 14, 0.25);
}

.place-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: rgba(183, 71, 42, 0.04);
  overflow: hidden;
}

.place-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.place-card:hover .place-card__image,
.place-card:focus-visible .place-card__image {
  transform: scale(1.04);
}

.place-card__body {
  padding: 20px 4px 8px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.place-card__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 10px;
}

.place-card__title {
  font-family: "Fraunces", serif;
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px;
}

.place-card__tagline {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(15, 15, 14, 0.72);
  margin: 0 0 16px;
  flex-grow: 1;
}

.place-card__cta {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--forest);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.place-card__arrow {
  transition: transform 0.3s ease;
}

.place-card:hover .place-card__arrow,
.place-card:focus-visible .place-card__arrow {
  transform: translateX(4px);
}

/* ───── Empty state + error ───── */
.places-grid__empty {
  text-align: center;
  padding: clamp(48px, 7vw, 96px) 0;
}

.places-grid__empty-text {
  font-family: "Fraunces", serif;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(15, 15, 14, 0.7);
  margin: 0 0 20px;
}

.places-grid__empty-reset {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--forest);
  background: transparent;
  color: var(--forest);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.places-grid__empty-reset:hover,
.places-grid__empty-reset:focus-visible {
  background: var(--forest);
  color: var(--bg-cream);
}

.places-grid__error {
  font-family: "Fraunces", serif;
  font-style: italic;
  color: rgba(15, 15, 14, 0.6);
  text-align: center;
  padding: 48px 0;
}

/* =========================================================================
   PLACE RELATED — "Slično ovome" section on individual place pages.
   Sits between .place-end-cta and the footer, reuses .places-grid +
   .place-card markup so styling stays consistent with the index.
   ========================================================================= */
.place-related {
  padding: clamp(64px, 9vw, 120px) 0;
  background: rgba(20, 60, 46, 0.03);
}

.place-related__head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 5vw, 56px);
  padding: 0 clamp(24px, 4vw, 48px);
  text-align: center;
}

.place-related__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: block;
  margin-bottom: 12px;
}

.place-related__title {
  font-family: "Fraunces", serif;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.place-related__title em {
  font-style: italic;
  color: var(--terracotta);
}

.place-related__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 48px);
}

.place-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}

@media (max-width: 980px) {
  .place-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .place-related__grid { grid-template-columns: 1fr; }
}

.place-related__footer {
  text-align: center;
  margin-top: clamp(40px, 5vw, 56px);
}

.place-related__more {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(15, 15, 14, 0.55);
  margin: 0 0 20px;
}

.place-related__see-all {
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--forest);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.place-related__see-all:hover,
.place-related__see-all:focus-visible {
  color: var(--terracotta);
}

/* =========================================================================
   PLACES EDITORIAL — large alternating blocks on /mjesta.html.
   Replaces the filter+grid layout at the 3-places-live stage. Restore
   the registry-driven filter+grid when ≥8 places land.
   ========================================================================= */

.places-editorial {
  padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 96px);
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 112px);
}

.place-editorial {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.place-editorial--right {
  grid-template-columns: 4fr 6fr;
}

.place-editorial--right .place-editorial__media {
  order: 2;
}

.place-editorial--right .place-editorial__content {
  order: 1;
}

.place-editorial__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(183, 71, 42, 0.04);
  text-decoration: none;
  border-radius: 4px;
}

.place-editorial__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.place-editorial__media:hover img,
.place-editorial__media:focus-visible img {
  transform: scale(1.03);
}

.place-editorial__content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(8px, 1.5vw, 16px) 0;
}

.place-editorial__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.place-editorial__title {
  font-family: "Fraunces", serif;
  font-size: clamp(32px, 3.8vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}

.place-editorial__title em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.place-editorial__title > span {
  display: block;
}

.place-editorial__excerpt {
  font-family: "Fraunces", serif;
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.7;
  color: rgba(15, 15, 14, 0.78);
  margin: 0;
  max-width: 540px;
}

.place-editorial__link {
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--forest);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  align-self: flex-start;
  transition: color 0.3s ease;
}

.place-editorial__link:hover,
.place-editorial__link:focus-visible {
  color: var(--terracotta);
}

.place-editorial__arrow {
  transition: transform 0.3s ease;
}

.place-editorial__link:hover .place-editorial__arrow,
.place-editorial__link:focus-visible .place-editorial__arrow {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .place-editorial,
  .place-editorial--right {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
  }
  .place-editorial--right .place-editorial__media,
  .place-editorial--right .place-editorial__content {
    order: initial;
  }
  .place-editorial__media {
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================================
   PLACES STORIES — refined editorial collection on /mjesta (v=281).
   Replaces the loose .place-editorial alternating layout with a section
   intro + bordered "story-card" components. Scoped class names: only
   used in mjesta.html. Old .place-editorial CSS above stays intact for
   safety (no other page references it, but kept until next cleanup pass).
   ========================================================================= */

.places-stories {
  padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 96px);
}

.places-stories__intro {
  max-width: 720px;
  margin: 0 0 clamp(40px, 5vw, 64px) 0;
}

.places-stories__intro-eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin: 0 0 16px 0;
}

.places-stories__intro-heading {
  font-family: "Fraunces", serif;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 20px 0;
  font-weight: 400;
}

.places-stories__intro-heading em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.places-stories__intro-supporting {
  font-family: "Fraunces", serif;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.6;
  color: rgba(15, 15, 14, 0.72);
  margin: 0;
  max-width: 620px;
}

.places-stories__list {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 48px);
}

/* CARD — bordered, rounded, two-column on desktop */
.story-card {
  display: grid;
  grid-template-columns: 11fr 9fr;     /* image ~55%, body ~45% */
  align-items: stretch;
  background: rgba(245, 240, 229, 0.55);
  border: 1px solid rgba(15, 15, 14, 0.08);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.story-card:hover {
  border-color: rgba(183, 71, 42, 0.32);
  background: rgba(245, 240, 229, 0.85);
}

.story-card--media-right {
  grid-template-columns: 9fr 11fr;
}

.story-card--media-right .story-card__media { order: 2; }
.story-card--media-right .story-card__body  { order: 1; }

.story-card__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;                  /* consistent across cards */
  overflow: hidden;
  text-decoration: none;
  background: rgba(183, 71, 42, 0.04);
}

.story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.story-card:hover .story-card__media img,
.story-card:focus-within .story-card__media img {
  transform: scale(1.03);
}

/* Placeholder inside media slot keeps brand pattern when image missing. */
.story-card__media .place-image-placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.story-card__body {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
  padding: clamp(28px, 3vw, 44px);
  justify-content: center;
}

.story-card__meta {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.story-card__title {
  font-family: "Fraunces", serif;
  font-size: clamp(26px, 2.6vw, 36px); /* smaller than .place-editorial__title */
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}

.story-card__title em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.story-card__title > span {
  display: block;
}

.story-card__excerpt {
  font-family: "Fraunces", serif;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.65;
  color: rgba(15, 15, 14, 0.74);
  margin: 0;
  max-width: 56ch;
}

.story-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--terracotta);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  margin-top: 4px;
  transition: color 0.3s ease;
}

.story-card__cta:hover,
.story-card__cta:focus-visible {
  color: var(--terracotta-soft);
}

.story-card__cta-arrow {
  transition: transform 0.3s ease;
  display: inline-block;
}

.story-card:hover .story-card__cta-arrow,
.story-card:focus-within .story-card__cta-arrow,
.story-card__cta:hover .story-card__cta-arrow {
  transform: translateX(4px);
}

/* Mobile/tablet (≤900px): stack image on top, no alternating */
@media (max-width: 900px) {
  .story-card,
  .story-card--media-right {
    grid-template-columns: 1fr;
  }
  .story-card--media-right .story-card__media,
  .story-card--media-right .story-card__body {
    order: initial;
  }
  .story-card__media {
    aspect-ratio: 16 / 10;
  }
  .story-card__body {
    padding: clamp(24px, 5vw, 32px);
  }
  .story-card__title {
    font-size: clamp(24px, 5vw, 30px);
  }
}

/* =========================================================================
   PLACES COMING — categorized prose lists, replaces the chip grid below
   the editorial blocks. Two-column on desktop, single column on mobile.
   ========================================================================= */

.places-coming {
  padding: clamp(56px, 7vw, 96px) 0;
  border-top: 1px solid rgba(20, 60, 46, 0.08);
}

.places-coming__header {
  max-width: 720px;
  margin: 0 0 clamp(40px, 5vw, 64px) 0;
}

.places-coming__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terracotta);
  display: block;
  margin-bottom: 14px;
}

.places-coming__title {
  font-family: "Fraunces", serif;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 16px;
  font-weight: 400;
}

.places-coming__title em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}

.places-coming__lead {
  font-family: "Fraunces", serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(15, 15, 14, 0.7);
  margin: 0;
}

.places-coming__categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 56px) clamp(40px, 5vw, 72px);
  margin-bottom: clamp(40px, 5vw, 56px);
}

.places-coming__category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.places-coming__category-title {
  font-family: "Fraunces", serif;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.places-coming__category-title a {
  color: var(--forest);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 60, 46, 0.25);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.places-coming__category-title a:hover,
.places-coming__category-title a:focus-visible {
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.places-coming__category-list {
  font-family: "Fraunces", serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(15, 15, 14, 0.72);
  margin: 0;
  max-width: 480px;
}

.places-coming__cta {
  font-family: "Geist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--forest);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

.places-coming__cta:hover,
.places-coming__cta:focus-visible {
  color: var(--terracotta);
}

@media (max-width: 720px) {
  .places-coming__categories {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   .city-hero--compact — used on /mjesta after the editorial rewrite.
   Trims vertical padding and tightens title spacing so the hero reads as
   a short signpost ("QR vodiči za bosanska mjesta sa pričom.") rather
   than a dominant landing. Em is inline (not on its own line) per the
   new copy structure.
   ========================================================================= */
.city-hero--compact {
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(28px, 4vw, 48px);
}

.city-hero--compact .city-hero__title {
  margin-bottom: clamp(16px, 2vw, 24px);
}

.city-hero--compact .city-hero__title-emphasis {
  /* em inline — same italic treatment, but no forced line break before it */
  display: inline;
  font-style: italic;
  color: var(--terracotta);
}

.city-hero--compact .city-hero__lead {
  max-width: 560px;
}

/* =========================================================================
   PLACE QR NOTE — small contextual note on detail pages explaining that
   the page is a Soul of Bosnia demo QR guide. Sits between .place-intro-lead
   and .place-audio (or first .place-section if no audio). Reads like a
   book footnote, not an ad: subtle terracotta accent line, location-pin
   icon, single sentence in slightly smaller body type.
   ========================================================================= */
.place-qr-note {
  max-width: 720px;
  margin: clamp(20px, 3vw, 36px) auto clamp(28px, 4vw, 44px);
  padding: 14px clamp(20px, 3vw, 28px);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(20, 60, 46, 0.03);
  border-left: 2px solid var(--terracotta);
  border-radius: 2px;
}

.place-qr-note__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
  margin-top: 3px;
}

.place-qr-note__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.place-qr-note__text {
  margin: 0;
  font-family: "Fraunces", serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(15, 15, 14, 0.7);
  font-style: italic;
}

/* =========================================================================
   CITY HERO QR LINE — small contextual subline below .city-hero__lead on
   overview pages (/mjesta/tvrdjave, /mjesta/rijeke, /mjesta/{city}/), so
   visitors arriving from search engines immediately see these are demo
   QR-guide examples, not a generic listing.
   ========================================================================= */
.city-hero__qr-line {
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid rgba(20, 60, 46, 0.12);
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(15, 15, 14, 0.6);
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-hero__qr-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--terracotta);
}

.city-hero__qr-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* =========================================================================
   POLISH v=264 — focused CSS additions (kept after v=265 revert).
   Section 1 (hero-eyebrow pill) was reverted in v=265 — subpage hero
   eyebrows return to their original per-class treatment. The pill
   approach over-flattened the brand voice across heterogeneous pages
   and felt like badge spam on legal/history pages. Sections 2 and 3
   stay — those were structural balance fixes, not voice changes.
   ========================================================================= */

/* ──────────── 2. AUDIENCES GRID — 2 cards balanced ────────────
   Was repeat(3, 1fr) full-width; with the third card removed it
   stretched awkwardly. Centered max-width keeps the two cards
   readable without filling the entire viewport. */
.audiences__grid {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  max-width: 920px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .audiences__grid {
    grid-template-columns: 1fr;
    max-width: 500px;
  }
}

/* ──────────── 3. /predlozi-mjesto hero — align gutter with subpage standard ────────────
   Previous horizontal padding was clamp(24px, 6vw, 80px), wider than
   the city-page__inner standard clamp(24px, 4vw, 48px). On wide
   viewports the hero content was pushed too close to the viewport
   edges relative to other subpages. Aligning padding here. */
.propose-hero {
  padding-left: clamp(24px, 4vw, 48px);
  padding-right: clamp(24px, 4vw, 48px);
  max-width: 1200px;
}

.propose-hero--asymmetric {
  padding-left: clamp(24px, 4vw, 48px);
  padding-right: clamp(24px, 4vw, 48px);
}

/* =========================================================================
   HOMEPAGE HERO EYEBROW REWORK — v=265
   Only targets .hero__eyebrow on /index.html (the line above the H1,
   "QR vodiči za bosanska mjesta sa pričom. Skeniraj kod na lokaciji,
   otvori priču."). Sits over a 5-slide photo rotation, so the cream
   text needed a stronger contrast treatment without losing the
   editorial restraint.

   Replaces the previous horizontal 40px×1px ::before line with a
   vertical 3px terracotta accent line + drop shadow on the text +
   slight contrast bump. Existing fadeIn animation kept intact.
   ========================================================================= */
.hero__eyebrow {
  /* Was inline-flex + gap:14px to align with horizontal ::before line.
     Switch to inline-block + absolute ::before for a vertical bar. */
  display: inline-block;
  position: relative;
  padding-left: 18px;
  gap: 0;
  /* Lift opacity 0.78 → 0.96 so cream is closer to pure cream */
  color: rgba(244, 239, 229, 0.96);
  font-weight: 500;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero__eyebrow::before {
  /* Override horizontal 40×1 terracotta-soft line with a vertical
     3×80% solid-terracotta accent that runs alongside the (often
     two-line) eyebrow text. */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 80%;
  background: var(--terracotta);
}

@media (max-width: 720px) {
  .hero__eyebrow {
    padding-left: 14px;
  }
  .hero__eyebrow::before {
    width: 2px;
  }
}

/* =========================================================================
   HERO PHOTO CREDIT — sits immediately below .place-hero-image
   (i.e. NOT inside a .place-section__visual wrapper, where the existing
   :has() rule at L17038 already handles credits). Added for the Šamac
   ušće page where all four photos came from the Bosanski Šamac FB page,
   so the hero needed attribution too — not just the three in-section
   visuals. Pattern is reusable on any future detail page.

   Implementation: when .place-hero-image is followed by a sibling
   .place-hero-image-credit, the hero's normal 64-112px bottom gap
   collapses to a tight 12px so the credit reads as a caption of the
   hero, and the original gap is restored after the credit so the
   section spacing below stays unchanged.
   ========================================================================= */
.place-hero-image:has(+ .place-hero-image-credit) {
  margin-bottom: 12px;
}

.place-hero-image-credit {
  max-width: 1280px;
  margin: 0 auto clamp(64px, 8vw, 112px);
  padding: 0 clamp(24px, 5vw, 48px);
}

/* ============================================================================
   EDITORIAL POLICY — /o-nama bridge section + /nas-pristup full page (v=270)

   .our-approach
     Lives inside /o-nama between .onama-philosophy and .onama-team. Short
     two-line title + paragraph + canonical secondary CTA (.routes-teaser__
     cta-secondary). Section eyebrow uses the regular pattern (no hero
     drop-shadow). Cream-warm band so it visually rhymes with .onama-story.

   .nas-pristup-story
     The body of /nas-pristup. Re-uses .onama-story body vocabulary (cream
     background, decorative river/topo SVG, 720px column, Fraunces prose
     17–21px) but adds in-flow H2 chapter titles with a thin terracotta
     rule, since the page is a long-read with eight numbered chapters
     instead of a single emotional centerpiece.
   ============================================================================ */

/* — Bridge section on /o-nama — */
.our-approach {
  background: var(--bg-cream-warm);
  border-top: 1px solid rgba(15, 15, 14, 0.05);
  border-bottom: 1px solid rgba(15, 15, 14, 0.05);
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(56px, 6vw, 96px);
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

.our-approach__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.our-approach__eyebrow {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 16px;
}

.our-approach__title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
}

.our-approach__title em {
  font-style: italic;
  color: var(--terracotta);
}

.our-approach__text {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 clamp(24px, 3vw, 32px);
  text-wrap: pretty;
}

.our-approach__cta {
  /* inherits .routes-teaser__cta-secondary; no overrides needed */
}

/* — /nas-pristup body — */
.nas-pristup-story {
  position: relative;
  background: var(--bg-cream-warm);
  border-top: 1px solid rgba(15, 15, 14, 0.05);
  border-bottom: 1px solid rgba(15, 15, 14, 0.05);
  overflow: hidden;
  padding-top: clamp(56px, 6vw, 96px);
  padding-bottom: clamp(72px, 8vw, 120px);
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
}

.nas-pristup-story__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--terracotta);
  pointer-events: none;
  z-index: 0;
}

.nas-pristup-story .city-page__inner {
  position: relative;
  z-index: 1;
}

.nas-pristup-story__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

.nas-pristup-story__chapter {
  margin: 0 0 clamp(36px, 4vw, 56px);
}

.nas-pristup-story__chapter:last-child {
  margin-bottom: 0;
}

.nas-pristup-story__chapter-title {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--terracotta);
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(15, 15, 14, 0.1);
}

.nas-pristup-story__chapter:first-child .nas-pristup-story__chapter-title {
  /* first chapter sits just below the hero — no top rule, no top pad */
  padding-top: 0;
  border-top: 0;
}

.nas-pristup-story__paragraph {
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 clamp(14px, 1.5vw, 18px);
  text-wrap: pretty;
}

.nas-pristup-story__paragraph:last-child {
  margin-bottom: 0;
}

.nas-pristup-story__paragraph em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 500;
}

.nas-pristup-story__chapter--final .nas-pristup-story__chapter-title {
  color: var(--forest);
}

@media (max-width: 640px) {
  .nas-pristup-story__chapter-title {
    font-size: clamp(22px, 5.8vw, 26px);
  }
  .nas-pristup-story__paragraph {
    font-size: clamp(16px, 4.4vw, 18px);
  }
}

/* =========================================================================
   SREBRENIK HERO — mobile-only shorter title composition (v=282).
   Scope: only the .place-hero__title--srebrenik h1 on /mjesta/srebrenik/
   stari-grad-srebrenik.html. Other place detail pages keep their existing
   single-titleHtml rendering. Desktop here also keeps the existing copy.
   Pattern: h1 holds two child spans (desktop / mobile); CSS shows one or
   the other based on viewport width. Mobile copy is intentionally shorter,
   stored as srebrenik.hero.titleHtmlMobile per locale.
   ========================================================================= */

.place-hero__title--srebrenik .place-hero__title-mobile {
  display: none;
}

@media (max-width: 600px) {
  .place-hero__title--srebrenik .place-hero__title-desktop {
    display: none;
  }
  .place-hero__title--srebrenik .place-hero__title-mobile {
    display: block;
    font-size: clamp(3.1rem, 14vw, 3.7rem);
    line-height: 0.98;
    letter-spacing: -0.018em;
    color: var(--ink);
    max-width: 100%;
  }
  /* The terracotta italic accent starts on its own line, tight under the
     dark heading so they read as one editorial unit. */
  .place-hero__title--srebrenik .place-hero__title-mobile em {
    display: block;
    margin-top: 0.12em;
    font-style: italic;
    color: var(--terracotta);
  }
  /* Refine the intro lead on the same page so it does not compete with
     the heading. Scope: only on the Srebrenik detail page, identified
     by the unique title modifier on the same <main>. */
  .place-detail-page:has(.place-hero__title--srebrenik) .place-hero__lead,
  .place-detail-page:has(.place-hero__title--srebrenik) .place-intro-lead__text {
    font-size: clamp(1.45rem, 4.4vw, 1.7rem);
    line-height: 1.5;
  }
}

/* =========================================================================
   STICKY AUDIO PLAYER — bottom-fixed mini player (v=287).
   Pojavljuje se kad korisnik pokrene hero audio i skroluje ispod glavnog
   .place-audio elementa. Pause/play, seek, close, sve preko JS-a u
   /public/sticky-audio-player.js. Scope: page mora imati
   <div id="sticky-audio-player"> i <audio data-main-player>. Inicijalno
   na Kula detail stranici (kasnije i ostale audio lokacije).
   ========================================================================= */

.sticky-audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0F0F0E;
  border-top: 1px solid rgba(183, 71, 42, 0.3);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1000;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 250ms ease-out, opacity 250ms ease-out;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  /* iOS Safari home-indicator safe area */
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.sticky-audio-player.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sap-play-pause,
.sap-close {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.sap-play-pause {
  color: var(--terracotta);
}

.sap-play-pause svg {
  width: 24px;
  height: 24px;
}

.sap-play-pause .sap-icon-pause {
  display: none;
}

.sap-play-pause.is-playing .sap-icon-play {
  display: none;
}

.sap-play-pause.is-playing .sap-icon-pause {
  display: block;
}

.sap-close {
  color: rgba(245, 240, 229, 0.6);
  transition: color 0.2s ease;
}

.sap-close:hover,
.sap-close:focus-visible {
  color: var(--bg-cream);
}

.sap-close svg {
  width: 20px;
  height: 20px;
}

.sap-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sap-title {
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--bg-cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.sap-progress-bar {
  height: 2px;
  background: rgba(245, 240, 229, 0.2);
  border-radius: 1px;
  cursor: pointer;
  position: relative;
}

.sap-progress-fill {
  height: 100%;
  background: var(--terracotta);
  width: 0%;
  border-radius: 1px;
  transition: width 100ms linear;
}

.sap-time {
  font-family: "Geist Mono", "Geist", monospace;
  font-size: 11px;
  color: rgba(245, 240, 229, 0.7);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.sap-time-divider {
  opacity: 0.5;
}

/* Desktop: centered card max-width 480px */
@media (min-width: 768px) {
  .sticky-audio-player {
    max-width: 480px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    border-radius: 8px 8px 0 0;
    border-top: 1px solid rgba(183, 71, 42, 0.3);
    border-left: 1px solid rgba(183, 71, 42, 0.15);
    border-right: 1px solid rgba(183, 71, 42, 0.15);
  }
  .sticky-audio-player.is-visible {
    transform: translateX(-50%) translateY(0);
  }
}

/* Reduced motion — skip slide, just fade */
@media (prefers-reduced-motion: reduce) {
  .sticky-audio-player {
    transition: opacity 150ms ease-out;
    transform: none;
  }
  .sticky-audio-player.is-visible {
    transform: none;
  }
  @media (min-width: 768px) {
    .sticky-audio-player {
      transform: translateX(-50%);
    }
    .sticky-audio-player.is-visible {
      transform: translateX(-50%);
    }
  }
}

/* Ako je sticky mini player vidljiv, sakrij floating-back da se ne
   preklapaju u donjem desnom uglu na mobile-u. */
body:has(.sticky-audio-player.is-visible) .floating-back {
  opacity: 0;
  pointer-events: none;
}

/* =====================================================================
   PLACE SHARE — Sprint 3 (2026-06-06)
   Subtle row of share links above .place-end-cta on published place pages.
   Reuses Geist UI font, terracotta accent, focus-visible pattern, and the
   gap-grow hover idiom already used by .place-end-cta__link.
   ===================================================================== */
.place-share {
  padding: clamp(40px, 5vw, 64px) 0 0;
  text-align: center;
}
.place-share__heading {
  font-family: "Geist", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft, #6a6a6a);
  margin: 0 0 18px;
}
.place-share__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  max-width: 720px;
  padding: 0 clamp(24px, 4vw, 48px);
}
.place-share__link {
  /* Reset for <button> tag */
  background: transparent;
  border: 0;
  margin: 0;
  cursor: pointer;
  /* Shared with <a> tag */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  font-family: "Geist", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--terracotta);
  text-decoration: none;
  transition: gap 0.25s ease, color 0.2s ease, opacity 0.2s ease;
  border-radius: 4px;
}
.place-share__link:hover { gap: 12px; color: #9a3b22; }
.place-share__link:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
}
.place-share__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: currentColor;
}
.place-share__link.is-copied {
  color: var(--forest);
  opacity: 0.85;
}
/* Visually hidden aria-live region — announces copy success to screen readers
   without changing layout. */
.place-share__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 540px) {
  .place-share__actions { gap: 4px 14px; }
  .place-share__link { font-size: 12px; }
}