/* Dominika — adjust pass 2026-10-05
   Flip photo sides, Dela CTA, thread, smoother chrome,
   mobile glossy menu, work rail, viewport stability */

/* Close control is mobile-only (injected by main.js) */
.nav-close {
  display: none;
}

/* ========== Desktop: real photo flip (grid-row was pinning media left) ========== */
@media (min-width: 901px) {
  .split-bleed {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  .split-bleed > .split-media,
  .split-bleed > button.split-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 0 !important;
  }

  .split-bleed > .split-copy {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 0 !important;
  }

  /* .flip = photo on the RIGHT */
  .split-bleed.flip > .split-media,
  .split-bleed.flip > button.split-media {
    grid-column: 2 !important;
  }

  .split-bleed.flip > .split-copy {
    grid-column: 1 !important;
  }
}

/* ========== Inner-facing glow (toward copy) ========== */
.split-media.has-glow::before,
.work-frame.has-glow::before {
  inset: 10% -12% 10% 18% !important; /* glow bleeds toward right = inner when photo LEFT */
  opacity: 0;
}

.split-bleed.flip .split-media.has-glow::before {
  inset: 10% 18% 10% -12% !important; /* glow bleeds toward left = inner when photo RIGHT */
}

.split-media.has-glow.is-glow-in::before,
.work-frame.has-glow.is-glow-in::before {
  opacity: 0.78;
}

#pricakovanja .split-media.has-glow::before {
  filter: blur(44px);
  opacity: 0;
}
#pricakovanja .split-media.has-glow.is-glow-in::before {
  opacity: 0.24;
}
.split-bleed.flip#pricakovanja .split-media.has-glow::before,
#pricakovanja .split-bleed.flip .split-media.has-glow::before {
  inset: 16% 14% 16% -8% !important;
}

/* Soft blend on inner edge */
.split-bleed:not(.flip) .split-media.photo-blend::after {
  background: linear-gradient(to right, transparent 0%, transparent 78%, var(--cream) 100%) !important;
}
.bg-paper .split-bleed:not(.flip) .split-media.photo-blend::after {
  background: linear-gradient(to right, transparent 0%, transparent 78%, var(--paper) 100%) !important;
}
.split-bleed.flip .split-media.photo-blend::after {
  background: linear-gradient(to left, transparent 0%, transparent 78%, var(--cream) 100%) !important;
}
.bg-paper .split-bleed.flip .split-media.photo-blend::after {
  background: linear-gradient(to left, transparent 0%, transparent 78%, var(--paper) 100%) !important;
}

/* ========== Zaupanje desktop: keep classic one-row flex ========== */
@media (min-width: 901px) {
  #kdo-sem .container.reveal:has(.logo-cloud) {
    margin-top: 3.25rem !important;
    padding-top: 1.25rem;
  }

  #kdo-sem .logo-cloud {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
    max-width: none !important;
    grid-template-columns: none !important;
  }

  #kdo-sem .logo-cloud img:last-child:nth-child(odd) {
    grid-column: auto !important;
    justify-self: auto !important;
  }
}

/* ========== Homepage Dela: title → stage → CTA ========== */
#trenutki .moments-head {
  display: block !important;
  margin-bottom: 1rem;
}

#trenutki .moments-head .btn,
#trenutki .moments-cta {
  display: none !important; /* moved below stage */
}

#trenutki .work-stage-after {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.15rem;
}

#trenutki .work-stage-shell {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  justify-content: flex-start !important;
  gap: 0.65rem !important;
  padding-inline: 0 !important;
}

#trenutki .work-stage-shell > .work-panel,
#trenutki .work-stage-shell > article {
  flex: 1 1 auto;
  max-width: calc(100% - 6.5rem);
}

#trenutki .work-side-btn {
  margin: 0 !important;
}

/* Dela subpage shell also flush to container start */
.chapter-tight .work-stage-shell,
#work-stage .work-stage-shell {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  justify-content: flex-start !important;
}

/* ========== Red story thread ========== */
.story-thread {
  position: fixed;
  top: 0;
  bottom: 0;
  left: clamp(0.45rem, 2.2vw, 1.6rem);
  width: 26px;
  pointer-events: none;
  z-index: 35;
  opacity: 0.5;
}

.story-thread svg {
  width: 100%;
  height: 100%;
}

.story-thread path {
  fill: none;
  stroke: url(#threadGrad);
  stroke-width: 2.1;
  stroke-linecap: round;
}

.thread-node {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--cta, #A60321);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cta, #A60321) 22%, transparent);
  transform: scale(0.35);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s ease;
}

.thread-node.is-on {
  transform: scale(1);
  opacity: 1;
}

@media (max-width: 900px) {
  .story-thread {
    opacity: 0.22;
    left: 0.2rem;
    width: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-thread path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .thread-node {
    transform: scale(1);
    opacity: 1;
  }
}

/* ========== Follow header: fixed fade overlay (no layout bar) ==========
   Opacity-only — never transform/filter/visibility-toggle on the header,
   or fixed .nav becomes relative / the bar “bugs out” before appearing. */
body.has-immersive-hero .site-header-follow {
  display: flex !important;
  position: fixed !important;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  opacity: 0;
  visibility: visible !important; /* keep in tree so opacity can fade smoothly */
  pointer-events: none;
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  margin: 0 !important;
  height: var(--header-h, 4.5rem);
  background: rgba(250, 246, 240, 0.96);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  will-change: opacity;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

body.has-immersive-hero.is-past-hero .site-header-follow,
body.has-immersive-hero.nav-open .site-header-follow {
  opacity: 1;
  pointer-events: auto;
  transform: none !important;
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px rgba(61, 33, 22, 0.07);
}

/* Keep follow chrome readable while menu is open mid-page */
body.has-immersive-hero.nav-open.is-past-hero .site-header-follow,
body.has-immersive-hero.nav-open .site-header-follow {
  z-index: 230;
  background: rgba(250, 246, 240, 0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 28px rgba(61, 33, 22, 0.07);
}

/* Beat polish.css visibility:hidden — that snap-hides and flashes on mobile */
body.has-immersive-hero.is-past-hero .hero-immersive .site-header {
  opacity: 0 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body.has-immersive-hero .hero-immersive .site-header {
  opacity: 1;
  visibility: visible !important;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Desktop: nudge immersive hero copy slightly right of red thread */
@media (min-width: 901px) {
  .hero-immersive .hero-copy {
    margin-left: 1.1rem;
    padding-left: 0.35rem;
  }
}

/* Hero photo: no zoom crop; keep subject framed after sky trim */
.hero-immersive .hero-bg picture,
.hero-immersive .hero-bg img {
  object-fit: cover !important;
  object-position: center 34% !important;
  transform: none !important;
  animation: none !important;
}
@media (max-width: 900px) {
  .hero-immersive .hero-bg picture,
  .hero-immersive .hero-bg img {
    object-position: center 28% !important;
  }
}

/* ========== Subtle polished motion ========== */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition:
      opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .reveal-scale {
    transition:
      opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
      transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .for-card,
  .storitve-card,
  .service-offer,
  .write-offer,
  .odrske-card,
  .pristop-bullet {
    transition:
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.45s ease,
      border-color 0.35s ease;
  }

  .btn,
  .nav-cta,
  .work-side-btn,
  .filter-btn {
    transition:
      background-color 0.35s ease,
      color 0.35s ease,
      border-color 0.35s ease,
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.35s ease;
  }

  .logo-cloud img {
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .logo-cloud img:hover {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* ========== Subpages: shorter heroes + no bg morph ========== */
body:not(.has-immersive-hero) {
  background-color: var(--cream) !important;
  transition: none !important;
}

body:not(.has-immersive-hero) .chapter,
body:not(.has-immersive-hero) .page-hero-compact,
body:not(.has-immersive-hero) .page-hero,
body:not(.has-immersive-hero) .bridge-cta {
  transition: none !important;
}

@media (min-width: 901px) {
  /* Subpage heroes: fill the screen under the sticky header */
  body:not(.has-immersive-hero) .page-hero-compact,
  body:not(.has-immersive-hero) .page-hero-compact.split-flush {
    height: calc(100svh - var(--header-h, 4.5rem)) !important;
    min-height: calc(100svh - var(--header-h, 4.5rem)) !important;
    max-height: calc(100svh - var(--header-h, 4.5rem)) !important;
  }

  .page-hero-compact .split-bleed {
    min-height: 100% !important;
    height: 100% !important;
  }

  body:not(.has-immersive-hero) .page-hero {
    min-height: calc(100svh - var(--header-h, 4.5rem)) !important;
    height: calc(100svh - var(--header-h, 4.5rem)) !important;
    max-height: calc(100svh - var(--header-h, 4.5rem)) !important;
    display: flex !important;
    align-items: center !important;
    padding-block: clamp(2.5rem, 6vh, 4rem) !important;
    box-sizing: border-box !important;
  }

  .page-hero .lede {
    margin-top: 1.15rem !important;
  }
}

/* Uniform subpage section headings (nadnaslovi) */
body:not(.has-immersive-hero) .chapter h2,
body:not(.has-immersive-hero) .page-hero-compact h1,
body:not(.has-immersive-hero) .section-head h2,
body:not(.has-immersive-hero) .section-head h3 {
  font-size: clamp(1.85rem, 3.6vw, 2.65rem) !important;
  line-height: 1.15 !important;
}

body:not(.has-immersive-hero) .service-offer h3,
body:not(.has-immersive-hero) .write-offer h3 {
  font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
  line-height: 1.25 !important;
}

/* Visible bullets on Osebna / Poslovna besedila */
.write-offer ul {
  list-style: disc !important;
  padding-left: 1.25rem !important;
  margin: 0.85rem 0 1.15rem !important;
  display: block !important;
}

.write-offer li {
  list-style: disc !important;
  display: list-item !important;
  margin: 0.4rem 0 !important;
  padding-left: 0.15rem !important;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.write-offer li::before,
.write-offer li::marker {
  color: var(--cta, #A60321);
}

/* Zasebnost lede spacing */
.page-hero .lede,
#main > .page-hero .lede {
  margin-top: 1.25rem !important;
  padding-top: 0.35rem;
}

#piskotki {
  scroll-margin-top: calc(var(--header-h, 4.5rem) + 1.25rem);
}

/* Extra room so #piskotki can sit near top of viewport */
.prose #piskotki {
  padding-top: 0.5rem;
}

.prose {
  padding-bottom: 30vh;
}

/* ========== Mobile work rail (peek + snap) ========== */
.work-rail {
  display: none;
}

@media (max-width: 900px) {
  /* ——— Viewport stability: lock to svh, avoid dvh jump ——— */
  .chapter.one-screen,
  #zgodba.chapter,
  #kdo-sem.chapter,
  #povezovanje.chapter,
  #za-koga.chapter,
  #storitve-preview.chapter,
  #trenutki.chapter,
  #pricakovanja.chapter,
  .page-hero-compact {
    min-height: 100svh !important;
    /* prevent reflow when browser chrome toggles */
    height: auto !important;
    max-height: none !important;
  }

  html {
    overflow-x: hidden;
  }

  body {
    /* visible so nested .work-rail can receive horizontal pan gestures */
    overflow-x: visible;
    /* reduce layout shift when visual viewport changes */
    min-height: 100svh;
  }

  /* Glossy dark mobile menu */
  .nav {
    background:
      linear-gradient(165deg, rgba(48, 22, 18, 0.92) 0%, rgba(28, 12, 10, 0.96) 48%, rgba(18, 8, 7, 0.98) 100%) !important;
    backdrop-filter: blur(22px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
    box-shadow: inset 0 1px 0 rgba(255, 240, 230, 0.12), 0 24px 60px rgba(0, 0, 0, 0.35);
    border: none !important;
  }

  .nav a {
    color: #F8EEE4 !important;
    border-bottom: 1px solid rgba(248, 238, 228, 0.1);
  }

  .nav a:not(.nav-cta):hover,
  .nav a[aria-current="page"]:not(.nav-cta) {
    background: rgba(248, 238, 228, 0.08) !important;
    color: #fff !important;
  }

  .nav a.nav-cta {
    color: #fff !important;
    background: var(--cta, #A60321) !important;
    border: none !important;
    box-shadow: 0 10px 28px rgba(166, 3, 33, 0.35);
  }

  body.has-immersive-hero:not(.is-past-hero) .hero-immersive .nav.is-open,
  body.has-immersive-hero:not(.is-past-hero) .hero-immersive .nav {
    background:
      linear-gradient(165deg, rgba(48, 22, 18, 0.92) 0%, rgba(28, 12, 10, 0.96) 48%, rgba(18, 8, 7, 0.98) 100%) !important;
  }

  body.has-immersive-hero:not(.is-past-hero) .hero-immersive .nav a {
    color: #F8EEE4 !important;
  }

  /* Zaupanje logos — 2×2 grid, tighter gaps, more top pad */
  #kdo-sem .container.reveal:has(.logo-cloud) {
    margin-top: 2.75rem !important;
    padding-top: 1.35rem;
    text-align: center;
  }

  #kdo-sem .logo-cloud {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem 0.85rem !important;
    justify-items: center;
    align-items: center;
    max-width: 18.5rem;
    margin: 0.55rem auto 0 !important;
    padding: 0.2rem 0.35rem 0.35rem;
  }

  #kdo-sem .logo-cloud img {
    max-height: 5.25rem !important;
    max-width: 9.5rem !important;
    width: auto !important;
    height: auto !important;
    min-height: 3.5rem;
    opacity: 0.92;
  }

  #kdo-sem .logo-cloud img.logo-wide {
    max-height: 3.6rem !important;
    max-width: 11.5rem !important;
    min-height: 2.4rem;
  }

  /* Odd last logo centered across both columns */
  #kdo-sem .logo-cloud img:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }

  /* Soft asymmetric offsets (keep 2×2 readable) */
  #kdo-sem .logo-cloud img:nth-child(1) { transform: translate(-0.2rem, 0.1rem); }
  #kdo-sem .logo-cloud img:nth-child(2) { transform: translate(0.25rem, -0.12rem); }
  #kdo-sem .logo-cloud img:nth-child(3) { transform: translate(0.12rem, 0.2rem); }
  #kdo-sem .logo-cloud img:nth-child(4) { transform: translate(-0.15rem, -0.08rem); }

  /* Moj pristop frames — more top pad from description */
  #povezovanje .pristop-bullets {
    padding-top: 1.35rem !important;
    gap: 0.55rem !important;
  }

  /* Dela: hide desktop shell arrows; show snap rail */
  #trenutki .moments-head .btn {
    display: none !important;
  }

  #trenutki .work-stage-after {
    display: flex !important;
    justify-content: flex-start;
    margin-top: 1rem;
    padding-inline: 0.15rem;
  }

  /* Swipe rail replaces desktop stage on mobile (home + /dela) */
  .work-stage-framed .work-stage-shell,
  .work-stage-home .work-stage-shell,
  #trenutki .work-stage-shell,
  #work-stage .work-stage-shell,
  .chapter-tight .work-stage-shell {
    display: none !important;
  }

  /* Full-bleed past-works rail (viewport width) + fotosannja native snap */
  #trenutki .work-stage,
  .chapter-tight .work-stage,
  #work-stage.work-stage {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .work-rail,
  #trenutki .work-rail,
  #work-stage .work-rail,
  .chapter-tight .work-rail {
    display: flex !important;
    flex-direction: row;
    flex: 1 1 auto;
    gap: 0.55rem;
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0.35rem 0.75rem 0.25rem;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.75rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* Do not set pan-y / pan-x — lets the browser own the gesture like .folio-grid */
    touch-action: manipulation;
  }

  .work-rail::-webkit-scrollbar {
    display: none;
  }

  /* Kill mobile.css pan-y on photos inside the rail — that blocked native horizontal snap */
  .work-rail,
  .work-rail *,
  .work-rail .work-stage-photo,
  .work-rail-slide,
  .work-rail-slide img,
  .work-rail-slide .work-caption-banner {
    touch-action: manipulation !important;
  }

  .work-rail-slide {
    flex: 0 0 calc(100vw - 1.5rem);
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    height: auto;
    margin: 0 !important;
    scroll-snap-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #120806;
    min-height: min(48svh, 18.5rem);
    box-shadow: 0 18px 40px rgba(20, 7, 6, 0.16);
    cursor: pointer;
    box-sizing: border-box;
  }

  .work-rail-slide .work-stage-photo {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .work-rail-slide img {
    width: 100%;
    height: min(48svh, 18.5rem);
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
  }

  .work-rail-slide .work-caption-banner {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 0.75rem 0.9rem 0.95rem !important;
    background: linear-gradient(to top, rgba(18, 8, 6, 0.88), transparent);
    color: #F8EEE4;
    pointer-events: none;
  }

  .work-rail-slide .work-caption-banner h3 {
    color: #F8EEE4;
    font-size: 1.05rem !important;
    margin: 0.15rem 0;
  }

  .work-rail-slide .work-caption-banner p {
    color: rgba(248, 238, 228, 0.88);
    font-size: 0.8rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .work-rail-dots {
    display: flex;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
  }

  .work-rail-dots button {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
    background: color-mix(in srgb, var(--ink) 35%, transparent);
    padding: 0;
  }

  .work-rail-dots button.is-active {
    background: var(--cta, #A60321);
    border-color: var(--cta, #A60321);
    transform: scale(1.15);
  }

  /* Sodelovanje: photo on top, airier list */
  #pricakovanja .split-bleed {
    display: flex !important;
    flex-direction: column !important;
  }

  #pricakovanja .split-media {
    order: -1 !important;
    min-height: min(28svh, 11rem) !important;
    height: min(30svh, 12rem) !important;
    max-height: 32svh !important;
  }

  #pricakovanja .split-copy {
    order: 1 !important;
    padding: 1rem 1.15rem 1.25rem !important;
  }

  #pricakovanja .pristop-bullets,
  #pricakovanja .expect-journey {
    gap: 0.55rem !important;
    padding-top: 0.85rem !important;
  }

  #pricakovanja .pristop-bullet,
  #pricakovanja .expect-step {
    padding: 0.55rem 0.35rem !important;
    min-height: 2.65rem;
    gap: 0.65rem !important;
  }

  #pricakovanja .pristop-bullet strong,
  #pricakovanja .expect-step strong,
  #pricakovanja .expect-step h3 {
    font-size: 0.95rem !important;
  }

  #pricakovanja .pristop-bullet p,
  #pricakovanja .expect-step p {
    display: block !important;
    font-size: 0.8rem !important;
    line-height: 1.35;
    margin: 0.15rem 0 0;
    color: var(--ink-soft);
  }

  /* Subpage heroes: header + hero = one phone screen (homepage immersive is 100svh alone) */
  .page-hero-compact {
    min-height: calc(100svh - var(--header-h, 4rem)) !important;
    height: calc(100svh - var(--header-h, 4rem)) !important;
    max-height: calc(100svh - var(--header-h, 4rem)) !important;
  }

  .page-hero-compact > .split-bleed {
    min-height: 100% !important;
    height: 100% !important;
    flex: 1 1 auto;
  }

  .page-hero-compact .split-media,
  .page-hero-compact > .split-bleed > button.split-media {
    min-height: min(46svh, 18rem) !important;
    height: min(48svh, 19.5rem) !important;
    max-height: 52svh !important;
  }

  body:not(.has-immersive-hero) .chapter h2,
  body:not(.has-immersive-hero) .page-hero-compact h1,
  body:not(.has-immersive-hero) .section-head h3 {
    font-size: clamp(1.55rem, 6.2vw, 1.95rem) !important;
  }

  .page-hero-compact .btn-row .btn:not(:first-child),
  .page-hero .btn-row .btn:not(:first-child),
  .page-hero-compact .btn-row a.btn-ghost {
    display: none !important;
  }

  .page-hero-compact .btn-row {
    margin-top: 0.85rem;
  }

  .page-hero {
    padding-top: calc(var(--header-h, 4rem) + 1.5rem) !important;
    padding-bottom: 1.5rem !important;
    min-height: 0 !important;
  }

  .page-hero .lede {
    margin-top: 1.1rem !important;
    padding-top: 0.45rem;
  }

  /* Allow page scroll while mobile keyboard is open */
  body.keyboard-open {
    overflow: visible !important;
    position: static !important;
  }

  body.keyboard-open main {
    touch-action: pan-y !important;
  }

  /* Mobile nav sheet: close control + scrollable panel */
  .nav {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: calc(var(--header-h, 4rem) + 2.75rem) !important;
  }

  .nav-close {
    position: absolute;
    top: max(0.85rem, env(safe-area-inset-top));
    right: 1.1rem;
    z-index: 2;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid rgba(248, 238, 228, 0.35);
    border-radius: 0 !important;
    background: rgba(248, 238, 228, 0.1);
    color: #F8EEE4;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .nav-close:hover,
  .nav-close:focus-visible {
    background: rgba(248, 238, 228, 0.18);
    border-color: rgba(248, 238, 228, 0.55);
    outline: none;
  }

  /* Kill header backdrop-filter — it makes fixed .nav position relative to the header */
  .site-header,
  .site-header-follow,
  body:not(.has-immersive-hero) .site-header,
  body.has-immersive-hero.is-past-hero .site-header-follow {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
  }

  body.nav-open .site-header .menu-toggle,
  body.nav-open .site-header-follow .menu-toggle {
    z-index: 260;
  }

  /* Open menu is portaled to body (.nav-sheet) — always full viewport */
  .nav.is-open,
  body.nav-open .nav.is-open,
  .nav.nav-sheet,
  body.nav-open .nav.nav-sheet {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 250 !important;
    transform: none !important;
  }
}

/* ——— CMS empty / multiline paragraphs ——— */
.cms-empty {
  display: none !important;
}
.cms-para {
  display: block;
}
.cms-para + .cms-para {
  margin-top: 0.85em;
}

/* O meni (homepage): photos align to top of section */
#kdo-sem .about-split {
  align-items: start !important;
}
#kdo-sem .about-mosaic {
  align-self: start !important;
}

/* Storitve preview: more air under title after lede removed */
#storitve-preview .storitve-board {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
#storitve-preview .section-head .lede.cms-empty,
#storitve-preview .section-head .lede:empty {
  display: none !important;
}

/* ========== Popravki 2026-10-09: structure, gallery, brand, heights ========== */

/* Larger Fraunces wordmark */
.brand.brand-wordmark {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.brand.brand-wordmark .brand-name {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}
.hero-immersive .brand.brand-wordmark .brand-name,
.brand.brand-wordmark.brand-on-dark .brand-name {
  color: var(--cream, #f8eee4);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.site-footer .brand.brand-wordmark .brand-name {
  color: var(--cream, #f8eee4);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
}

/* Desktop: sections clearly under one viewport (hero stays full) */
@media (min-width: 901px) {
  .chapter.one-screen.split-flush > .split-bleed {
    min-height: min(82svh, 46rem) !important;
    height: auto !important;
    max-height: none !important;
  }
  .chapter.one-screen:not(.split-flush) {
    min-height: min(82svh, 46rem) !important;
    padding-top: clamp(2.5rem, 5vw, 4rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  }
  /* Subpage heroes: fill the visible screen under sticky header (same presence as homepage 100svh) */
  body:not(.has-immersive-hero) .page-hero-compact,
  body:not(.has-immersive-hero) .page-hero-compact.split-flush,
  body:not(.has-immersive-hero) .page-hero {
    min-height: calc(100svh - var(--header-h, 4.5rem)) !important;
    height: calc(100svh - var(--header-h, 4.5rem)) !important;
    max-height: calc(100svh - var(--header-h, 4.5rem)) !important;
  }
  body:not(.has-immersive-hero) .page-hero-compact > .split-bleed,
  body:not(.has-immersive-hero) .page-hero-compact.split-flush > .split-bleed {
    min-height: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }
  body:not(.has-immersive-hero) .chapter.chapter-air,
  body:not(.has-immersive-hero) .chapter-tight {
    padding-top: clamp(2.25rem, 4.5vw, 3.75rem) !important;
    padding-bottom: clamp(2.25rem, 4.5vw, 3.75rem) !important;
    min-height: 0 !important;
  }
  .chapter-compact {
    min-height: 0 !important;
    padding-top: clamp(2.5rem, 5vw, 4rem) !important;
    padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  }
  .chapter-compact .about-split {
    align-items: start !important;
  }
  .chapter-compact .about-mosaic {
    min-height: 0 !important;
    max-height: 28rem;
  }
}

/* Reference / logo band (Zaupajo mi) */
.ref-band {
  padding: clamp(1.35rem, 3vw, 2.1rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ref-band-title {
  text-align: center;
  width: 100%;
  justify-content: center;
  margin: 0 0 0.85rem;
}
.logo-cloud-band,
.ref-logos-desktop {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: clamp(1.1rem, 2.4vw, 2rem) !important;
  margin-top: 0.35rem !important;
}
/* When logos wrap, settle into a balanced auto-fit grid */
@supports (width: 1cqw) {
  .ref-logos-desktop {
    container-type: inline-size;
  }
}
.ref-logo-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex: 1 1 10.5rem;
  max-width: 14.5rem;
  min-width: 9.5rem;
  text-decoration: none;
  color: inherit;
  background: color-mix(in srgb, var(--paper) 88%, white);
  border: 1px solid var(--line);
  padding: clamp(0.85rem, 1.6vw, 1.25rem) clamp(0.75rem, 1.4vw, 1.1rem);
  box-sizing: border-box;
}
.ref-logo-item img,
.logo-cloud-band img {
  max-height: clamp(5.5rem, 9vw, 8.5rem) !important;
  max-width: min(12.5rem, 100%) !important;
  min-height: 3.75rem;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent;
  padding: 0;
  border: 0;
  display: block;
}
.ref-logo-item.ref-logo-wide,
.ref-logo-item:has(img.logo-wide) {
  flex-basis: 14rem;
  max-width: 18rem;
}
.ref-logo-item img.logo-wide,
.logo-cloud-band img.logo-wide {
  max-height: clamp(3.5rem, 5.5vw, 5rem) !important;
  max-width: min(16rem, 100%) !important;
  min-height: 2.5rem;
}
.ref-logo-item figcaption {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink-soft);
  font-weight: 500;
}
a.ref-logo-item:hover {
  border-color: color-mix(in srgb, var(--cta) 35%, var(--line));
}
a.ref-logo-item:hover figcaption {
  color: var(--ink);
}
/* Mid widths: force even grid once flex would leave orphans */
@media (max-width: 1100px) and (min-width: 901px) {
  .ref-logos-desktop {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem !important;
  }
  .ref-logo-item {
    max-width: none;
    min-width: 0;
  }
}
/* Mobile rail uses past-works card chrome; hide on desktop (beat .work-scroll-shell display:grid) */
.ref-logo-rail,
.work-scroll-shell.ref-logo-rail {
  display: none !important;
}
.ref-logo-card {
  cursor: default;
}
.ref-logo-card .ref-logo-media,
.ref-logo-card .work-scroll-media.ref-logo-media {
  aspect-ratio: 5 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--paper) 90%, white);
  padding: 1.25rem;
  box-sizing: border-box;
}
.ref-logo-card .ref-logo-media img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
a.ref-logo-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
@media (max-width: 900px) {
  .ref-logos-desktop {
    display: none !important;
  }
  /* Match past-works full-bleed rail; arrows overlay so cards keep full snap width */
  .ref-logo-rail,
  .work-scroll-shell.ref-logo-rail {
    display: block !important;
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    grid-template-columns: none !important;
  }
  .ref-logo-rail .work-scroll,
  .work-scroll-shell.ref-logo-rail .work-scroll,
  .ref-logos-mobile {
    display: flex !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0.35rem 1rem !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 1rem !important;
    touch-action: manipulation !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  /* Same card width as Pretekla dela — must beat later .work-scroll-card rule */
  .ref-logo-rail .work-scroll-card.ref-logo-card,
  .ref-logo-rail .ref-logo-card {
    flex: 0 0 calc(100vw - 2.5rem) !important;
    width: calc(100vw - 2.5rem) !important;
    max-width: calc(100vw - 2.5rem) !important;
    min-width: 0 !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: normal !important;
    box-sizing: border-box !important;
  }
  .ref-logo-rail .ref-logo-media,
  .ref-logo-rail .work-scroll-media.ref-logo-media {
    aspect-ratio: 5 / 4;
    max-height: min(42svh, 16rem);
  }
  /* Overlay arrows (don't shrink the cards) */
  .ref-logo-rail .work-scroll-btn,
  .work-scroll-shell.ref-logo-rail .work-scroll-btn {
    display: grid !important;
    place-items: center;
    position: absolute !important;
    top: 50%;
    transform: translateY(-70%);
    z-index: 6;
    width: 2.4rem;
    height: 2.4rem;
    font-size: 1.25rem;
    margin: 0;
    background: color-mix(in srgb, var(--cream) 92%, white);
    box-shadow: 0 4px 14px rgba(20, 7, 6, 0.18);
    touch-action: manipulation !important;
    -webkit-user-select: none;
    user-select: none;
  }
  .ref-logo-rail .work-scroll-prev,
  .work-scroll-shell.ref-logo-rail .work-scroll-prev {
    left: 0.45rem;
  }
  .ref-logo-rail .work-scroll-next,
  .work-scroll-shell.ref-logo-rail .work-scroll-next {
    right: 0.45rem;
  }
  .ref-logo-card .work-scroll-caption {
    padding: 0.7rem 0.85rem 0.85rem;
  }
  .ref-logo-card .work-scroll-caption h3 {
    margin: 0;
    font-size: 1.02rem;
  }
}

/* Event / offer bullets */
.event-bullets {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.event-bullets li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.45;
}
.event-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--cta, #a60321);
}

/* Sodelovanje: text-only lines (no title duplication) */
.expect-lines .pristop-bullet p {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
}
.expect-lines .pristop-bullet strong {
  display: none;
}

/* Storitve thin prep banner */
.intro-band {
  padding: clamp(1.25rem, 2.8vw, 1.9rem) 0;
  border-bottom: 1px solid var(--line);
}
.intro-band-text {
  margin: 0 auto;
  max-width: 48rem;
  text-align: center;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.55;
  color: var(--ink);
}

/* Homepage ADA-style horizontal work scroll */
.work-scroll {
  display: flex;
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
  overflow-x: auto;
  overflow-y: hidden;
  /* Desktop: no snap — continuous banner drift must not fight snap points */
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  /* Allow vertical page scroll + horizontal rail pan; browser picks axis */
  touch-action: manipulation;
  padding: 0.35rem max(1.25rem, calc((100vw - 72rem) / 2 + 1.25rem));
  margin: clamp(1.1rem, 2.5vw, 1.75rem) 0 0;
  scrollbar-width: thin;
}
@media (min-width: 901px) {
  .work-scroll-card {
    scroll-snap-align: none;
  }
}
.work-scroll::-webkit-scrollbar {
  height: 6px;
}
.work-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}
.work-scroll-card,
.work-scroll-card.portfolio-card {
  /* Fluid card width: stay compact when the window shrinks so several stay visible */
  flex: 0 0 clamp(14.5rem, 22vw, 22rem);
  width: clamp(14.5rem, 22vw, 22rem);
  max-width: min(22rem, 42vw);
  scroll-snap-align: start;
  background: var(--cream);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: none !important;
  transform: none !important;
  isolation: isolate;
  cursor: zoom-in;
}
@media (min-width: 901px) and (max-width: 1100px) {
  .work-scroll-card,
  .work-scroll-card.portfolio-card {
    flex-basis: clamp(13.5rem, 34vw, 18rem);
    width: clamp(13.5rem, 34vw, 18rem);
    max-width: 38vw;
  }
}
@media (min-width: 1101px) and (max-width: 1400px) {
  .work-scroll-card,
  .work-scroll-card.portfolio-card {
    flex-basis: clamp(16rem, 26vw, 20rem);
    width: clamp(16rem, 26vw, 20rem);
    max-width: 22rem;
  }
}
/* Single full-frame wash from cursor — no separate caption tint (that caused a hard cut under shorter captions) */
.work-scroll-card::before,
.portfolio-card.work-scroll-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle farthest-corner at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--cta, #a60321) 22%, transparent) 0%,
    color-mix(in srgb, var(--cta, #a60321) 12%, transparent) 38%,
    color-mix(in srgb, var(--apricot, #e08a72) 8%, transparent) 62%,
    transparent 100%
  );
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-scroll-card:hover::before,
.work-scroll-card.is-cursor-glow::before {
  opacity: 1;
}
.work-scroll-card .work-scroll-caption,
.work-scroll-card > button,
.work-scroll-card > .work-scroll-media {
  position: relative;
  z-index: 1;
  background: transparent;
}
/* Kill legacy lift/shadow hovers on past-work modules sitewide */
.work-scroll-card:hover,
.work-scroll-card.portfolio-card:hover,
.portfolio-card.work-scroll-card:hover,
.dela-gallery .portfolio-card:hover,
.dela-gallery .odrske-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .work-scroll-card::before,
  .work-scroll-card:hover::before,
  .work-scroll-card.is-cursor-glow::before {
    display: none !important;
  }
}
.work-scroll-card button,
.work-scroll-card .work-scroll-media {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* manipulation = pan-x + pan-y without delaying clicks */
  touch-action: manipulation;
}
.work-scroll-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.work-scroll-caption {
  padding: 0.85rem 1rem 1.05rem;
  border-top: 1px solid var(--line);
  background: transparent;
  pointer-events: none;
}
.work-scroll-caption .tag {
  display: inline-block;
  margin-bottom: 0.35rem;
}
.work-scroll-caption h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}
.work-scroll-caption p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dela multi-photo gallery (O meni style + filters) */
.dela-gallery.odrske-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(0.85rem, 2vw, 1.35rem) !important;
  margin-top: clamp(1.25rem, 3vw, 2rem);
  overflow: visible !important;
}
.dela-gallery .portfolio-card.odrske-card {
  border-radius: 0 !important;
  background: var(--cream);
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex;
  flex-direction: column;
  margin: 0;
  box-shadow: none !important;
  border: 1px solid var(--line);
  overflow: hidden;
  transform: none !important;
}
.dela-gallery .portfolio-card.is-hidden {
  display: none !important;
}
.dela-gallery .portfolio-body {
  padding: 0.85rem 1rem 1.1rem;
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.dela-gallery .portfolio-body .tag {
  margin-bottom: 0.3rem;
}
.dela-gallery .portfolio-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.12rem;
}
.dela-gallery .portfolio-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.4;
}
.dela-gallery .odrske-card button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--paper);
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
  min-height: 0;
  overflow: hidden;
}
.dela-gallery .odrske-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

/* Kontakt immediate form (no tall hero) */
.contact-page-immediate {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  min-height: calc(100svh - var(--header-h, 4.5rem));
}
.contact-page-immediate h1 {
  margin-bottom: 0.75rem;
}


/* Mobile: keep section heights near phone viewport; brand readable */
@media (max-width: 900px) {
  .brand.brand-wordmark .brand-name {
    font-size: clamp(1.2rem, 5.2vw, 1.45rem);
  }

  .chapter.one-screen,
  #zgodba.chapter,
  #vodenje-home.chapter,
  #pisanje-home.chapter,
  #pricakovanja.chapter,
  #kdo-sem.chapter,
  #trenutki.chapter,
  #storitve-preview.chapter {
    min-height: 100svh !important;
    height: auto !important;
    max-height: none !important;
  }

  .work-scroll-card button,
  .work-scroll-card .work-scroll-media {
    aspect-ratio: 3 / 4;
  }

  .ref-band {
    padding: 1.15rem 0;
  }
  .logo-cloud-band {
    gap: 1rem 1.5rem;
  }
  .logo-cloud-band img {
    max-height: 4.2rem !important;
    max-width: 7rem !important;
  }
  .logo-cloud-band img.logo-wide {
    max-height: 2.8rem !important;
    max-width: 10rem !important;
  }

  .intro-band {
    padding: 1rem 0;
  }
  .intro-band-text {
    text-align: left;
    font-size: 0.95rem;
  }

  .dela-gallery.odrske-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
  }
  .dela-gallery .odrske-card button,
  .dela-gallery .odrske-card img {
    aspect-ratio: 3 / 4;
    min-height: 0;
  }

  .contact-page-immediate {
    min-height: calc(100svh - var(--header-h, 4rem)) !important;
    padding-top: 1.25rem;
  }
}


/* Hide empty CMS paragraphs that leave visual gaps */
p.beat-soft:empty,
p[data-cms]:empty,
.event-bullets + p:empty {
  display: none !important;
}


/* Storitve prep band — wide, centered, no accent bar; em phrases use theme color */
.intro-quote.quote-band {
  padding: clamp(1.75rem, 4vw, 2.85rem) 0 !important;
  min-height: 0 !important;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cta, #a60321) 4%, var(--paper, #fbf1e6)) 0%,
      var(--paper, #fbf1e6) 50%,
      color-mix(in srgb, var(--apricot, #e08a72) 6%, var(--paper, #fbf1e6)) 100%
    );
}
.intro-quote.quote-band .container {
  max-width: min(72rem, calc(100% - 2rem)) !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}
.intro-quote.quote-band blockquote {
  margin: 0 auto;
  max-width: 68rem;
  width: 100%;
  text-align: center;
  position: relative;
  padding: 0.15rem 0.75rem;
}
.intro-quote.quote-band blockquote::before {
  content: none !important;
  display: none !important;
}
.intro-quote.quote-band blockquote p {
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 auto;
  text-align: center !important;
  text-wrap: pretty;
  max-width: 68rem;
}
.intro-quote.quote-band blockquote p em,
.quote-band blockquote p em,
h1 em, h2 em, .slogan em,
/* Colored accent = <em>; plain italic = <i> (CMS Poševno) */
.beat-soft em,
.slogan em,
h1 em, h2 em, h3 em,
[data-cms-html] em {
  color: var(--title-accent, var(--cta, #a60321));
  font-style: italic;
}
.beat-soft i,
[data-cms-html] i {
  font-style: italic;
  color: inherit;
}

/* Desktop hero: soft vignette around copy — no hard dim frame */
@media (min-width: 901px) {
  .hero-immersive .hero-scrim {
    background:
      radial-gradient(ellipse 78% 68% at 22% 82%, rgba(20, 7, 6, 0.62) 0%, rgba(20, 7, 6, 0.28) 38%, rgba(20, 7, 6, 0.08) 58%, transparent 74%),
      linear-gradient(100deg, rgba(20, 7, 6, 0.42) 0%, rgba(20, 7, 6, 0.16) 34%, transparent 58%),
      linear-gradient(180deg, rgba(20, 7, 6, 0.22) 0%, transparent 26%, transparent 58%, rgba(20, 7, 6, 0.38) 100%) !important;
  }
}

/* Work-scroll shell with arrows */
.work-scroll-shell {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0 clamp(0.5rem, 2vw, 1rem);
}
.work-scroll-btn {
  flex: none;
  width: 2.85rem;
  height: 2.85rem;
  border: 1px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0 !important;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(46, 16, 12, 0.12);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.work-scroll-btn:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.work-scroll-shell .work-scroll {
  margin: 0;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}
.work-scroll-card.is-hidden-filter {
  display: none !important;
}
[data-cms-module].cms-module-hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .work-scroll-shell {
    grid-template-columns: 1fr;
    padding: 0;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  /* Native continuous swipe — hide desktop arrows */
  .work-scroll-shell .work-scroll-btn {
    display: none !important;
  }

  .chapter-compact {
    min-height: auto !important;
    padding-top: clamp(2rem, 6vw, 3rem) !important;
    padding-bottom: clamp(2rem, 6vw, 3rem) !important;
  }
}


/* Final height hammer (desktop) — beat refine/polish one-screen 100svh */
@media (min-width: 901px) {
  .hero-immersive {
    min-height: 100svh !important;
    height: 100svh !important;
  }
  .chapter.one-screen.split-flush > .split-bleed,
  #zgodba.chapter > .split-bleed,
  #vodenje-home.chapter > .split-bleed,
  #pisanje-home.chapter > .split-bleed,
  #pricakovanja.chapter > .split-bleed {
    min-height: min(80svh, 44rem) !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Override refine.css full-viewport desktop chapters (hero stays full screen) */
@media (min-width: 901px) {
  .chapter.split-flush > .split-bleed,
  .chapter:has(> .split-bleed) > .split-bleed {
    min-height: min(80svh, 44rem) !important;
    height: auto !important;
  }
  .chapter.split-flush.one-screen,
  .chapter.one-screen:has(> .split-bleed) {
    min-height: 0 !important;
    height: auto !important;
  }
  .chapter.split-flush.one-screen > .split-bleed,
  .chapter.one-screen:has(> .split-bleed) > .split-bleed {
    min-height: min(80svh, 44rem) !important;
    height: auto !important;
    flex: 0 1 auto !important;
  }
  /* Immersive homepage hero unchanged */
  .hero-immersive,
  .hero-immersive .hero-bg,
  body.has-immersive-hero .hero-immersive {
    min-height: 100svh !important;
    height: 100svh !important;
  }
}

/* Keep homepage Storitve cream when alternating after O meni paper */
#storitve-preview.chapter.bg-cream {
  background-color: var(--cream) !important;
  background-image: none !important;
  box-shadow: none !important;
}
#storitve-preview.chapter.bg-paper {
  background-color: var(--paper) !important;
}

/* ========== Pass 2026-10-09 evening: uniform rules + mobile polish ========== */

/* Work-scroll cards: always sharp corners (kill vibe rounded hover) */
.work-scroll-card,
.work-scroll-card:hover,
.work-scroll-card.portfolio-card,
.work-scroll-card.portfolio-card:hover,
.portfolio-card.work-scroll-card,
.portfolio-card.work-scroll-card:hover,
.dela-gallery .portfolio-card,
.dela-gallery .portfolio-card:hover,
.odrske-card,
.odrske-card:hover {
  border-radius: 0 !important;
}

/* Uniform body/description copy under titles sitewide */
.split-copy > p:not(.eyebrow):not(.lede),
.split-copy .beat-soft,
.chapter .section-head .lede,
.chapter .section-head .lede.short,
.odrske-grid + .section-head .lede,
#pot .split-copy > p,
body:not(.has-immersive-hero) .chapter.split-flush .split-copy > p:not(.eyebrow):not(.lede),
.page-hero-compact .lede,
.work-scroll-caption p,
.portfolio-body p {
  font-size: clamp(1.02rem, 1.35vw, 1.125rem) !important;
  line-height: 1.65 !important;
  font-family: var(--font-body, "Outfit", "Segoe UI", sans-serif) !important;
  color: var(--ink-soft, #7a3a30);
}
.page-hero-compact .lede,
.hero-immersive .lede {
  color: inherit;
}
.hero-immersive .lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important;
  line-height: 1.55 !important;
  -webkit-line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Homepage Vsa dela CTA centered */
#trenutki .work-stage-after,
#trenutki .work-stage-after .btn {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
}
#trenutki .work-stage-after {
  width: 100%;
}

/* O meni subpage: uniform split-copy padding in the 3 story steps */
body:not(.has-immersive-hero) .chapter.chapter-air.split-flush > .split-bleed > .split-copy {
  padding-top: clamp(2rem, 4.5vw, 3.25rem) !important;
  padding-bottom: clamp(2rem, 4.5vw, 3.25rem) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body:not(.has-immersive-hero) .chapter.chapter-air.split-flush > .split-bleed > .split-copy > p:last-child,
body:not(.has-immersive-hero) .chapter.chapter-air.split-flush > .split-bleed > .split-copy .btn-row {
  margin-bottom: 0 !important;
}

/* Kill ellipsis / line-clamp on all descriptive copy */
.lede,
.beat-soft,
.split-copy > p,
.hero-immersive .lede,
.page-hero-compact .lede,
.work-scroll-caption p,
.section-head .lede {
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-height: none !important;
}
.work-scroll-caption p {
  display: -webkit-box !important; /* keep multi-line readable but no hard ellipsis cut of content meaning - actually user wants full text */
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  /* Subpage heroes fill phone screen under header */
  body:not(.has-immersive-hero) .page-hero-compact,
  body:not(.has-immersive-hero) .page-hero-compact.split-flush,
  body:not(.has-immersive-hero) .page-hero {
    min-height: calc(100svh - var(--header-h, 4rem)) !important;
    height: calc(100svh - var(--header-h, 4rem)) !important;
    max-height: none !important;
  }

  /* Never truncate hero / body text on mobile */
  .hero-immersive .lede,
  .hero-immersive .slogan,
  .page-hero-compact .lede,
  .split-copy > p,
  .beat-soft,
  .lede,
  .section-head .lede,
  .work-scroll-caption p {
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-height: none !important;
    white-space: normal !important;
  }

  /* Hide compact tags/chips to help fit one screen; keep full sentences */
  .event-bullets,
  .storitve-preview .tag-row,
  #storitve-preview .chip,
  #storitve-preview .tag,
  .storitve-card .tag,
  .write-offer .tag {
    /* keep bullets that are content; hide decorative chip rows only */
  }
  #storitve-preview .tag-row,
  .stage-tags,
  .paper-tags {
    display: none !important;
  }

  /* Work-scroll: free continuous swipe; manipulation keeps vertical page scroll alive */
  .work-scroll-shell .work-scroll,
  .work-scroll {
    display: flex !important;
    gap: 0.65rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain;
    touch-action: manipulation !important;
    scrollbar-width: none;
  }
  .work-scroll::-webkit-scrollbar {
    display: none;
  }
  .work-scroll,
  .work-scroll *,
  .work-scroll-card,
  .work-scroll-card button,
  .work-scroll-card .work-scroll-media,
  .work-scroll-card img {
    touch-action: manipulation !important;
  }
  .work-scroll-card {
    flex: 0 0 calc(100vw - 2.5rem) !important;
    width: calc(100vw - 2.5rem) !important;
    max-width: calc(100vw - 2.5rem) !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: normal !important;
  }
  /* Zaupajo mi must keep the same snap width as past works (after generic rule) */
  .ref-logo-rail .work-scroll-card.ref-logo-card {
    flex: 0 0 calc(100vw - 2.5rem) !important;
    width: calc(100vw - 2.5rem) !important;
    max-width: calc(100vw - 2.5rem) !important;
  }

  /* Homepage O meni (#kdo-sem): kill vast empty gap on mobile */
  #kdo-sem.chapter,
  #kdo-sem.chapter-compact,
  .chapter-compact {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }
  #kdo-sem .about-mosaic,
  .chapter-compact .about-mosaic {
    max-height: none !important;
    min-height: 0 !important;
    gap: 0.65rem !important;
  }
  #kdo-sem .about-split {
    gap: 1rem !important;
  }

  /* O meni subpage steps: uniform compact padding */
  body:not(.has-immersive-hero) .chapter.chapter-air.split-flush {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body:not(.has-immersive-hero) .chapter.chapter-air.split-flush > .split-bleed > .split-copy {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  /* Prep band full width text on mobile */
  .intro-quote.quote-band .container,
  .intro-quote.quote-band blockquote,
  .intro-quote.quote-band blockquote p {
    max-width: 100% !important;
    text-align: center !important;
  }

  /* Disable ALL hover animations / morphs / lifts on touch */
  .shape-morph,
  .shape-morph-soft,
  .shape-morph:hover,
  .shape-morph-soft:hover,
  .portfolio-card:hover,
  .work-scroll-card:hover,
  .odrske-card:hover,
  .moment:hover,
  .for-card:hover,
  .expect-step:hover,
  .expect-card:hover,
  .word-card:hover,
  .btn:hover,
  .nav-cta:hover,
  .logo-cloud img:hover,
  .split-media:hover img,
  .photo-frame:hover img,
  .tile:hover img {
    transform: none !important;
    box-shadow: none !important;
    border-radius: inherit !important;
    filter: none !important;
    letter-spacing: inherit !important;
  }
  .work-scroll-card::before,
  .work-scroll-card:hover::before,
  .work-scroll-card.is-cursor-glow::before {
    display: none !important;
    opacity: 0 !important;
  }
  .shape-morph,
  .shape-morph-soft {
    transition: none !important;
  }
}

/* FINAL: subpage heroes always fill the screen under the header */
@media (min-width: 901px) {
  body:not(.has-immersive-hero) .page-hero-compact,
  body:not(.has-immersive-hero) .page-hero-compact.split-flush,
  body:not(.has-immersive-hero) main > .page-hero-compact,
  body:not(.has-immersive-hero) .page-hero {
    min-height: calc(100svh - var(--header-h, 4.5rem)) !important;
    height: calc(100svh - var(--header-h, 4.5rem)) !important;
    max-height: calc(100svh - var(--header-h, 4.5rem)) !important;
    box-sizing: border-box !important;
  }
  body:not(.has-immersive-hero) .page-hero-compact > .split-bleed,
  body:not(.has-immersive-hero) .page-hero-compact.split-flush > .split-bleed {
    min-height: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }
}
@media (max-width: 900px) {
  body:not(.has-immersive-hero) .page-hero-compact,
  body:not(.has-immersive-hero) .page-hero-compact.split-flush,
  body:not(.has-immersive-hero) .page-hero {
    min-height: calc(100svh - var(--header-h, 4rem)) !important;
    height: calc(100svh - var(--header-h, 4rem)) !important;
    max-height: none !important;
  }
}

@media (max-width: 900px) {
  #kdo-sem.chapter,
  #kdo-sem.chapter-compact,
  #kdo-sem.one-screen,
  .chapter-compact#kdo-sem {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding-block: 1.5rem !important;
  }
  #kdo-sem .about-mosaic {
    display: grid !important; /* show personal tiles; earlier mobile hid them causing empty feel + mismatch */
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #kdo-sem .about-split {
    min-height: 0 !important;
  }
}