/* Dominika — vibe pass: denser storytelling, full palettes, bigger photos */

/* ——— Full theme palettes (bg + chrome + ink surfaces) ——— */
:root {
  --ink-deep: #2A160F;
  --ink-mid: #3D2116;
  --ink-lift: #5A3226;
  --surface-ink-a: rgba(217, 123, 102, 0.22);
  --surface-ink-b: rgba(219, 163, 103, 0.18);
  --on-ink: #F7F0E6;
  --on-ink-soft: rgba(247, 240, 230, 0.82);
  --on-ink-muted: rgba(247, 240, 230, 0.7);
  --header-bg: color-mix(in srgb, var(--cream) 88%, transparent);
  --footer-bg: color-mix(in srgb, var(--cream-2) 92%, var(--ink) 8%);
  --chip-bg: color-mix(in srgb, var(--paper) 88%, white);
  --card-bg: color-mix(in srgb, var(--paper) 92%, white);
  --word-card-bg: color-mix(in srgb, var(--paper) 85%, var(--cream));
  --expect-accent: color-mix(in srgb, var(--terracotta) 12%, var(--paper));
}

html[data-theme="olive"] {
  --cream: #EFE6D6;
  --cream-2: #E0D3BE;
  --sand: #C4A07E;
  --ink: #3F3426;
  --ink-soft: #5C4C3A;
  --terracotta: #6B7A3A;
  --apricot: #A8895C;
  --olive: #555934;
  --cta: #555934;
  --cta-hover: #3E4224;
  --paper: #F6F1E7;
  --line: rgba(63, 52, 38, 0.14);
  --shadow: 0 22px 60px rgba(63, 52, 38, 0.12);
  --shadow-soft: 0 10px 36px rgba(63, 52, 38, 0.08);
  --ink-deep: #2A2618;
  --ink-mid: #3F3426;
  --ink-lift: #555934;
  --surface-ink-a: rgba(85, 89, 52, 0.28);
  --surface-ink-b: rgba(191, 155, 122, 0.2);
  --on-ink: #F3ECDF;
  --on-ink-soft: rgba(243, 236, 223, 0.84);
  --on-ink-muted: rgba(243, 236, 223, 0.72);
  --footer-bg: #E8DFD0;
  --word-card-bg: #F3EBDD;
  --expect-accent: color-mix(in srgb, var(--olive) 10%, var(--paper));
}

html[data-theme="ember"] {
  --cream: #F4E8D9;
  --cream-2: #E9D5C0;
  --sand: #D9A577;
  --ink: #3A1810;
  --ink-soft: #6E3A32;
  --terracotta: #A60321;
  --apricot: #D97B66;
  --olive: #8C5C32;
  --cta: #A60321;
  --cta-hover: #7A0218;
  --paper: #FAF3EA;
  --line: rgba(58, 24, 16, 0.14);
  --shadow: 0 22px 60px rgba(58, 24, 16, 0.13);
  --shadow-soft: 0 10px 36px rgba(58, 24, 16, 0.08);
  --ink-deep: #2A0C08;
  --ink-mid: #3A1810;
  --ink-lift: #5C2018;
  --surface-ink-a: rgba(166, 3, 33, 0.28);
  --surface-ink-b: rgba(217, 123, 102, 0.2);
  --on-ink: #F8EEE4;
  --on-ink-soft: rgba(248, 238, 228, 0.86);
  --on-ink-muted: rgba(248, 238, 228, 0.72);
  --footer-bg: #ECD9C8;
  --word-card-bg: #F6EBDF;
  --expect-accent: color-mix(in srgb, var(--terracotta) 10%, var(--paper));
}

body {
  background: var(--cream);
  color: var(--ink);
}

.site-header {
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.site-footer {
  background: var(--footer-bg);
  color: var(--ink-soft);
}

.bg-cream { background: var(--cream) !important; }
.bg-paper { background: var(--paper) !important; }
.bg-deep { background: var(--cream-2) !important; }

.bg-ink {
  background:
    radial-gradient(ellipse 80% 60% at 15% 20%, var(--surface-ink-a), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 80%, var(--surface-ink-b), transparent 50%),
    linear-gradient(155deg, var(--ink-deep) 0%, var(--ink-mid) 48%, var(--ink-lift) 100%) !important;
  color: var(--on-ink) !important;
}

.bg-ink h1,
.bg-ink h2,
.bg-ink h3,
.bg-ink .slogan {
  color: var(--on-ink) !important;
}

.bg-ink .lede,
.bg-ink .beat-soft,
.bg-ink p {
  color: var(--on-ink-soft) !important;
}

.bg-ink .eyebrow {
  color: var(--apricot) !important;
}

.bg-ink .contact-details a {
  color: var(--on-ink) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.bg-ink .contact-details a:hover {
  color: var(--apricot) !important;
}

.bg-ink .contact-note {
  color: var(--on-ink) !important;
  background: color-mix(in srgb, var(--terracotta) 22%, transparent);
  border-color: color-mix(in srgb, var(--apricot) 40%, transparent);
}

.bg-deep.bg-alive,
.bg-deep {
  color: var(--ink);
}

/* Wave fills follow palette */
.wave-paper { color: var(--paper); }
.wave { color: inherit; }

/* ——— Unified liquid button fill ——— */
.btn,
.nav-cta,
.filter-btn,
.cookie-bar .btn,
button.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::before,
.nav-cta::before,
.filter-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--apricot), var(--terracotta));
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur-hover) var(--ease-liquid);
  pointer-events: none;
}

.btn:hover::before,
.btn.is-hovering::before,
.nav-cta:hover::before,
.filter-btn:hover::before,
.filter-btn.is-active::before {
  transform: scaleY(1);
}

.btn-primary {
  background: var(--cta);
  color: var(--cream);
}

.btn-primary::before {
  background: linear-gradient(165deg, var(--apricot) 0%, var(--terracotta) 55%, color-mix(in srgb, var(--terracotta) 70%, var(--ink)) 100%);
}

.btn-primary:hover,
.btn-primary.is-hovering {
  color: var(--cream);
  background: transparent; /* let ::before fill show through */
  box-shadow: 0 18px 40px color-mix(in srgb, var(--terracotta) 36%, transparent);
}

.btn-ghost {
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--ink) 28%, transparent);
}

.btn-ghost::before {
  background: var(--ink);
}

.btn-ghost:hover,
.btn-ghost.is-hovering {
  color: var(--cream) !important;
  border-color: var(--ink);
  background: transparent;
}

.nav-cta {
  background: var(--cta);
  color: var(--cream) !important;
}

.nav-cta::before {
  background: linear-gradient(90deg, var(--terracotta), var(--apricot));
  transform: scaleX(0);
  transform-origin: left center;
}

.nav-cta:hover::before {
  transform: scaleX(1);
}

.nav-cta:hover {
  color: var(--cream) !important;
  background: transparent;
}

.filter-btn:hover,
.filter-btn.is-active {
  color: var(--cream) !important;
  background: transparent !important;
  border-color: var(--terracotta);
}

.filter-btn::before {
  background: var(--terracotta);
}

@media (hover: none), (pointer: coarse) {
  .btn::before,
  .nav-cta::before,
  .filter-btn::before {
    display: none !important;
  }
  .btn-primary:hover,
  .nav-cta:hover {
    background: var(--terracotta);
  }
  .btn:hover,
  .btn-ghost:hover,
  .btn-primary:hover,
  .nav-cta:hover {
    transform: none;
  }
}

/* ——— Hero: more air between copy and bubble ——— */
@media (min-width: 981px) {
  .hero-layout-photo-led {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr) !important;
    gap: clamp(3rem, 7vw, 5.5rem) !important;
    padding-right: clamp(0.5rem, 2vw, 1.5rem);
  }
  .hero-layout-photo-led .hero-copy {
    padding-right: clamp(1rem, 3vw, 2rem);
    z-index: 3;
  }
  .hero-layout-photo-led .hero-visual {
    margin-left: clamp(1.25rem, 3.5vw, 3rem);
  }
  .hero-photo,
  .hero-visual > button.hero-photo {
    inset: -2% -1% -6% 16% !important;
    background: var(--cream) !important;
    box-shadow: 0 28px 70px color-mix(in srgb, var(--ink) 14%, transparent);
  }
  .hero-photo.shape-organic-a {
    background: var(--cream) !important;
  }
  .hero-photo picture,
  .hero-photo img {
    background: var(--cream);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-photo img {
    object-position: 58% 10% !important;
    transform: scale(1.1) !important;
    transform-origin: 55% 12% !important;
  }
  /* Soft cream feather on the left — melt dark clothing edge into page */
  .hero-photo::after {
    background:
      linear-gradient(90deg, var(--cream) 0%, color-mix(in srgb, var(--cream) 92%, transparent) 10%, color-mix(in srgb, var(--cream) 40%, transparent) 18%, transparent 28%),
      linear-gradient(to top, var(--cream) 0%, color-mix(in srgb, var(--cream) 45%, transparent) 8%, transparent 22%) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
  }
}

/* ——— Branko-style melt (radial dissolve) ——— */
.melt-branko,
.melt-branko img,
.melt-branko picture img {
  -webkit-mask-image: radial-gradient(ellipse 52% 54% at 50% 48%, #000 62%, rgba(0, 0, 0, 0.55) 82%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 52% 54% at 50% 48%, #000 62%, rgba(0, 0, 0, 0.55) 82%, transparent 100%) !important;
}

.melt-branko-soft,
.melt-branko-soft img,
.melt-branko-soft picture img {
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 42% 58%, #000 55%, rgba(0, 0, 0, 0.5) 78%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 58% 60% at 42% 58%, #000 55%, rgba(0, 0, 0, 0.5) 78%, transparent 100%) !important;
}

.melt-wide-branko,
.melt-wide-branko img,
.melt-wide-branko picture img {
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 40% 62%, #000 48%, rgba(0, 0, 0, 0.45) 74%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 70% 78% at 40% 62%, #000 48%, rgba(0, 0, 0, 0.45) 74%, transparent 100%) !important;
}

/* ——— UVOD portrait focus + editorial beats ——— */
#zgodba .portrait-panel {
  min-height: clamp(26rem, 52vw, 38rem);
}

#zgodba .portrait-panel .photo-frame,
#zgodba .portrait-panel .uvod-melt {
  border-radius: 2rem 1.6rem 2.2rem 1.7rem;
  overflow: hidden;
  background: transparent;
}

/* Gentle Branko dissolve — keep her face fully inside the opaque core */
#zgodba .uvod-melt img,
#zgodba .portrait-panel .uvod-melt img {
  -webkit-mask-image: radial-gradient(ellipse 92% 90% at 48% 46%, #000 72%, rgba(0,0,0,.6) 88%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 92% 90% at 48% 46%, #000 72%, rgba(0,0,0,.6) 88%, transparent 100%) !important;
  object-position: 42% 48% !important;
  transform: scale(1.02);
  transform-origin: 45% 45%;
}

.fragment-editorial {
  display: grid;
  gap: 1.35rem;
  max-width: 42rem;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 0 var(--pad);
  text-align: center;
}

.fragment-editorial .frag-line {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.fragment-editorial .frag-line.quiet {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(0.98rem, 1.5vw, 1.12rem);
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1.65;
  max-width: 34rem;
  margin-inline: auto;
}

.fragment-editorial .frag-line.write {
  color: var(--cta);
  position: relative;
  padding-top: 1.1rem;
}

.fragment-editorial .frag-line.write::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--apricot), var(--terracotta));
}

.fragment-editorial .frag-sep {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--terracotta);
  margin: 0.15rem auto;
  opacity: 0.55;
}

/* Hide old fragment cards if leftover */
.fragment-beats { display: none !important; }

/* ——— Barva: taller section, taller photo, no title overlap ——— */
#barva.chapter {
  padding-top: clamp(5rem, 10vw, 8rem);
  padding-bottom: clamp(4.5rem, 9vw, 7rem);
}

.barva-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(14rem, 0.9fr) !important;
  gap: clamp(1.75rem, 4vw, 3.5rem) !important;
  align-items: start !important;
}

.barva-layout .section-head {
  position: static !important;
  padding: 0 !important;
  padding-top: clamp(1.25rem, 3vw, 2.5rem) !important;
  max-width: 28rem;
  grid-column: 1;
  grid-row: 1;
}

.barva-layout .barva-portrait,
.barva-layout button.barva-portrait,
button.barva-portrait {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  left: auto !important;
  inset: auto !important;
  width: min(100%, 24rem) !important;
  max-width: 24rem !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  min-height: clamp(20rem, 42vw, 30rem) !important;
  margin: 0 0 0 auto !important;
  border-radius: 1.7rem 1.4rem 2rem 1.5rem !important;
  box-shadow: var(--shadow);
  justify-self: end !important;
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
}

.barva-layout .barva-portrait.melt-branko-soft img,
.barva-layout .barva-portrait img {
  object-position: center 16% !important;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 42%, #000 64%, rgba(0,0,0,.5) 84%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 72% 78% at 50% 42%, #000 64%, rgba(0,0,0,.5) 84%, transparent 100%) !important;
  width: 100% !important;
  height: 100% !important;
}

.barva-layout .word-strip {
  grid-column: 1 / -1 !important;
  grid-row: 2;
  margin-top: 0.75rem;
}

@media (max-width: 900px) {
  .barva-layout {
    grid-template-columns: 1fr !important;
  }
  .barva-layout .section-head,
  .barva-layout .barva-portrait,
  .barva-layout button.barva-portrait {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .barva-layout .barva-portrait,
  .barva-layout button.barva-portrait {
    width: min(16rem, 72%) !important;
    min-height: 18rem !important;
    margin-inline: auto !important;
  }
}

/* ——— Moj pristop: single large photo, no stack ——— */
#povezovanje .media-stage {
  min-height: clamp(24rem, 48vw, 34rem);
}

#povezovanje .media-stage .photo-frame.main-shot {
  inset: 0 !important;
  border-radius: 1.6rem 1.3rem 1.9rem 1.4rem;
  overflow: hidden;
}

#povezovanje .media-stage .photo-frame.main-shot.melt-branko img,
#povezovanje .media-stage .melt-branko img {
  -webkit-mask-image: radial-gradient(ellipse 85% 88% at 50% 45%, #000 70%, rgba(0,0,0,.55) 88%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 85% 88% at 50% 45%, #000 70%, rgba(0,0,0,.55) 88%, transparent 100%) !important;
}

#povezovanje .media-stage .photo-frame.float-shot {
  display: none !important;
}

#povezovanje .story-copy .beat-soft {
  max-width: 32rem;
}

/* ——— Za koga: photo in the open right space ——— */
.za-koga-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.55fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.za-koga-head .section-head {
  padding-top: clamp(0.5rem, 1.5vw, 1.25rem);
  max-width: 32rem;
}

.za-koga-photo {
  width: 100%;
  min-height: clamp(14rem, 28vw, 20rem);
  aspect-ratio: 4 / 5;
  border-radius: 46% 42% 48% 44% / 42% 48% 40% 52%;
  box-shadow: var(--shadow);
  margin-top: -1.5rem;
  justify-self: end;
  max-width: 18rem;
}

.za-koga-photo img {
  object-position: center 20%;
}

@media (max-width: 900px) {
  .za-koga-head {
    grid-template-columns: 1fr;
  }
  .za-koga-photo {
    max-width: 14rem;
    margin: 0 auto;
    margin-top: 0;
  }
}

/* ——— Photo bands between chapters ——— */
.photo-band {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem) 0;
  overflow: hidden;
}

.photo-band-inner {
  width: min(100% - (var(--pad) * 2), var(--max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
  align-items: stretch;
  min-height: clamp(14rem, 28vw, 22rem);
}

.photo-band-inner.single {
  grid-template-columns: 1fr;
  max-width: 52rem;
}

.photo-band figure,
.photo-band button {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: clamp(12rem, 24vw, 20rem);
  cursor: zoom-in;
  box-shadow: var(--shadow-soft);
}

.photo-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-band .tall {
  border-radius: 1.5rem 1.2rem 1.8rem 1.35rem;
}

.photo-band .wide {
  border-radius: 1.2rem 1.7rem 1.3rem 1.5rem;
}

@media (max-width: 760px) {
  .photo-band-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .photo-band figure,
  .photo-band button {
    min-height: 14rem;
  }
}

/* ——— Na odru journey media taller ——— */
#storitve-preview .journey-media {
  min-height: clamp(22rem, 44vw, 32rem);
}

#storitve-preview .journey-media .photo-frame {
  border-radius: 1.5rem 1.25rem 1.7rem 1.35rem;
}

#storitve-preview .journey-media img {
  object-position: center 18% !important;
  transform: none !important;
}

/* ——— Sodelovanje: bigger photo to the right ——— */
.expect-with-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.55fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.expect-intro {
  position: relative;
  max-width: none;
}

.expect-side-photo,
button.expect-side-photo {
  position: relative !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 20rem;
  aspect-ratio: 3 / 4;
  min-height: clamp(18rem, 36vw, 26rem);
  margin-left: auto;
  border-radius: 1.5rem 1.25rem 1.8rem 1.4rem;
  box-shadow: var(--shadow);
  justify-self: end;
}

.expect-side-photo img {
  object-position: center 15%;
}

.expect-journey {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .expect-with-photo {
    grid-template-columns: 1fr;
  }
  .expect-side-photo,
  button.expect-side-photo {
    max-width: 14rem;
    min-height: 16rem;
    margin: 0.5rem 0 0;
  }
}

/* ——— Kdo sem: readable mosaic shapes ——— */
.about-mosaic {
  grid-template-columns: 1.1fr 0.9fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 0.9rem !important;
  min-height: 30rem !important;
}

.about-mosaic .tile {
  border-radius: 1.35rem 1.15rem 1.55rem 1.25rem !important;
  background: var(--cream-2);
}

.about-mosaic .tile:nth-child(1) {
  grid-row: span 2 !important;
  border-radius: 1.6rem 1.3rem 1.8rem 1.4rem !important;
}

.about-mosaic .tile:nth-child(2),
.about-mosaic .tile:nth-child(3) {
  border-radius: 1.25rem 1.5rem 1.35rem 1.15rem !important;
}

.about-mosaic .tile.shape-organic-c {
  border-radius: 1.4rem 1.7rem 1.3rem 1.55rem !important;
}

.about-mosaic img {
  object-fit: cover !important;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

/* ——— Logos bigger ——— */
.logo-cloud {
  gap: clamp(2rem, 5vw, 4rem) !important;
  margin-top: 2.5rem !important;
}

.logo-cloud img {
  max-height: 8.5rem !important;
  max-width: 13rem !important;
  opacity: 1 !important;
  filter: none !important;
}

.logo-cloud img.logo-wide {
  max-width: 18rem !important;
  max-height: 5.5rem !important;
}

/* ——— Page heroes: padding + CTA ——— */
.page-hero-copy {
  padding-top: clamp(1rem, 2.5vw, 2rem) !important;
}

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

.page-hero-copy .btn-row {
  margin-top: 1.75rem;
}

.page-hero-photo {
  min-height: clamp(20rem, 46vw, 32rem) !important;
  max-height: 36rem !important;
  width: min(100%, 28rem) !important;
}

.page-hero-photo.melt-branko img,
.page-hero-photo.shape-organic-a img,
.page-hero-photo.shape-organic-b img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.page-hero-photo.shape-soft-melt {
  border-radius: 42% 48% 44% 46% / 46% 42% 50% 44%;
  overflow: hidden;
}

/* Storytelling breaks on subpages */
.story-break {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.25rem, 4vw, 2.75rem);
  align-items: center;
  margin: clamp(2rem, 5vw, 3.5rem) 0;
}

.story-break.flip > :first-child { order: 2; }

.story-break-photo {
  min-height: clamp(16rem, 34vw, 24rem);
  border-radius: 1.5rem 1.25rem 1.75rem 1.35rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.story-break-photo.melt {
  border-radius: 48% 42% 50% 44% / 44% 48% 42% 52%;
}

.story-break-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: clamp(16rem, 34vw, 24rem);
}

.story-break-copy p {
  color: var(--ink-soft);
  max-width: 32rem;
}

.story-break-copy p + p {
  margin-top: 1rem;
}

.story-break-copy .pull {
  margin: 1.25rem 0;
}

@media (max-width: 800px) {
  .story-break,
  .story-break.flip {
    grid-template-columns: 1fr;
  }
  .story-break.flip > :first-child { order: 0; }
}

/* Service blocks denser */
.service-block {
  gap: clamp(1.5rem, 4vw, 3rem);
}

.service-block-media {
  min-height: clamp(20rem, 42vw, 30rem) !important;
}

/* Word cards use theme surfaces */
.word-card {
  background: var(--word-card-bg);
  border-color: var(--line);
}

.for-card,
.expect-step,
.bridge-block,
.moment-caption,
.chip-journey article,
.story-step {
  background: var(--card-bg);
  border-color: var(--line);
}

.expect-step:last-child,
.expect-card:nth-child(7) {
  background: var(--expect-accent);
}

.live-chip {
  background: var(--chip-bg);
  border-color: var(--line);
  color: var(--ink-soft);
}

/* Quote band follows palette */
.quote-band {
  background: var(--cream);
}

.quote-band blockquote p,
.quote-band em {
  color: var(--ink);
}

.quote-band em {
  color: var(--terracotta);
}

/* Seam gradients follow theme */
.seam-gradient[data-from="cream"][data-to="paper"] {
  background: linear-gradient(to bottom, var(--cream), var(--paper));
}
.seam-gradient[data-from="paper"][data-to="cream"] {
  background: linear-gradient(to bottom, var(--paper), var(--cream));
}
.seam-gradient[data-from="cream"][data-to="ink"] {
  background: linear-gradient(to bottom, var(--cream), var(--ink-deep));
}
.seam-gradient[data-from="ink"][data-to="cream"] {
  background: linear-gradient(to bottom, var(--ink-deep), var(--cream));
}

/* Shorter body beats */
.beat-soft {
  max-width: 34rem;
}

.chapter-air {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
}

/* Theme switcher chrome */
.theme-switcher button[data-theme="default"] { background: #E8DCCE; }
.theme-switcher button[data-theme="olive"] { background: #B8BD8E; }
.theme-switcher button[data-theme="ember"] { background: #E8A090; }

/* ========== POLISH PASS 2026-10-01 ========== */

/* ——— Dark readable footer (override light vibe footer) ——— */
:root {
  --footer-bg: #24140F;
  --footer-ink: rgba(247, 240, 230, 0.88);
  --footer-muted: rgba(247, 240, 230, 0.68);
  --footer-accent: #DBA367;
}
html[data-theme="olive"] {
  --footer-bg: #1F1C12;
  --footer-accent: #C4B07A;
}
html[data-theme="ember"] {
  --footer-bg: #140706;
  --footer-accent: #E08A72;
  --footer-ink: rgba(248, 238, 228, 0.9);
}

.site-footer {
  background: var(--footer-bg) !important;
  color: var(--footer-ink) !important;
}
.site-footer p,
.site-footer .footer-col a,
.site-footer .footer-bottom,
.site-footer .footer-bottom a {
  color: var(--footer-ink) !important;
}
.site-footer .footer-col h4 {
  color: var(--footer-accent) !important;
}
.site-footer .footer-col a:hover,
.site-footer .footer-bottom a:hover,
.site-footer .footer-credit a {
  color: #F7F0E6 !important;
}
.site-footer .footer-bottom {
  border-top-color: rgba(247, 240, 230, 0.14) !important;
}
.site-footer .brand-signature-img {
  filter: brightness(0) invert(1) sepia(0.25) saturate(0.6);
  opacity: 0.95;
}

/* ——— Kill blurred melt / soft-edge masks — prefer solid custom shapes ——— */
.melt-branko,
.melt-branko-soft,
.melt-wide-branko,
.uvod-melt,
.melt,
.melt-wide,
.blend-soft,
.blend-edge,
.blend-all-soft,
.melt-branko img,
.melt-branko-soft img,
.melt-wide-branko img,
.uvod-melt img,
.melt img,
.melt picture img,
.blend-soft img,
.blend-edge img,
.barva-layout .barva-portrait img,
.barva-layout .barva-portrait.melt-branko-soft img,
#povezovanje .media-stage .melt-branko img,
#povezovanje .media-stage .photo-frame.main-shot.melt-branko img,
#zgodba .uvod-melt img,
#zgodba .portrait-panel .uvod-melt img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none;
}

/* ——— Custom shapes + smooth hover morph (site-wide) ——— */
.shape-morph,
.photo-frame,
.barva-portrait,
.expect-side-photo,
.za-koga-photo,
.story-break-photo,
.story-rail-photo,
.about-mosaic .tile,
.photo-band button,
.service-block-media,
.page-hero-photo,
.journey-media .photo-frame,
.portrait-panel .photo-frame,
.moment,
.portfolio-media button,
.gallery-constellation .frame-ornament,
.service-offer-media {
  transition:
    border-radius 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease !important;
  overflow: hidden;
}

/* Dramatic blob morph removed — subtle hover lives in FIX PASS below.
   Caption grids (.moment, gallery, portfolio) never morph. */

.shape-blob {
  border-radius: 46% 42% 48% 44% / 42% 48% 40% 52% !important;
}
.shape-petal {
  border-radius: 1.8rem 1.15rem 2.1rem 1.4rem !important;
}
.shape-soft {
  border-radius: 1.55rem 1.35rem 1.75rem 1.45rem !important;
}
.shape-arch {
  border-radius: 48% 48% 1.4rem 1.4rem / 28% 28% 1.4rem 1.4rem !important;
}
.shape-leaf {
  border-radius: 58% 42% 48% 52% / 42% 58% 42% 58% !important;
}

/* ——— Hero: wider title; shrink photo / font when tight ——— */
.hero-copy {
  max-width: none !important;
}
.hero-copy .slogan {
  max-width: none !important;
  width: 100%;
  font-size: clamp(2.45rem, 4.6vw, 4.05rem) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
  letter-spacing: -0.03em;
}
.hero-copy .lede {
  max-width: 36rem !important;
}

@media (min-width: 981px) {
  .hero-layout-photo-led {
    grid-template-columns: minmax(22rem, 1.35fr) minmax(12rem, 0.75fr) !important;
    gap: clamp(1rem, 2.5vw, 2.25rem) !important;
    align-items: center !important;
  }
  .hero-layout-photo-led .hero-copy {
    padding-right: clamp(0.25rem, 1vw, 0.75rem) !important;
    max-width: 38rem !important;
  }
  .hero-layout-photo-led .hero-visual {
    margin-left: 0 !important;
    min-height: clamp(20rem, 48vh, 32rem) !important;
    max-width: min(100%, 24rem);
    justify-self: end;
    width: 100%;
  }
  .hero-photo,
  .hero-visual > button.hero-photo {
    inset: 0 0 -4% 2% !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .hero-layout-photo-led {
    grid-template-columns: minmax(20rem, 1.4fr) minmax(11rem, 0.7fr) !important;
  }
  .hero-copy .slogan {
    font-size: clamp(2.25rem, 4.4vw, 3.7rem) !important;
  }
  .hero-layout-photo-led .hero-visual {
    min-height: clamp(16rem, 40vh, 26rem) !important;
    max-width: 20rem;
  }
}

@media (min-width: 981px) and (max-width: 1040px) {
  .hero-copy .slogan {
    font-size: clamp(2.05rem, 3.9vw, 3.2rem) !important;
  }
  .hero-layout-photo-led .hero-visual {
    max-width: 17rem;
    min-height: 18rem !important;
  }
}

/* ——— UVOD fragments: uniform style ——— */
.fragment-editorial {
  max-width: 40rem;
}
.fragment-editorial .frag-line,
.fragment-editorial .frag-line.quiet,
.fragment-editorial .frag-line.write {
  font-family: var(--font-accent) !important;
  font-size: clamp(1.15rem, 2.1vw, 1.55rem) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-top: 0 !important;
  position: static !important;
}
.fragment-editorial .frag-line.write::before {
  display: none !important;
}
.fragment-editorial .frag-sep {
  opacity: 0.4;
}
#zgodba .portrait-panel {
  min-height: clamp(22rem, 46vw, 34rem);
}
#zgodba .portrait-panel .photo-frame,
#zgodba .portrait-panel .uvod-melt {
  border-radius: 1.9rem 1.4rem 2.2rem 1.6rem !important;
}
#zgodba .story-copy .btn-row {
  margin-top: 1.5rem;
}

/* ——— Barva: dense stack + photo (no empty gap) ——— */
#barva.chapter {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}
.barva-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.3fr) minmax(12rem, 0.7fr) !important;
  grid-template-rows: auto !important;
  gap: clamp(1.25rem, 3vw, 2.5rem) !important;
  align-items: start !important;
}
.barva-stack {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  min-width: 0;
}
.barva-layout .section-head {
  grid-column: auto !important;
  grid-row: auto !important;
  padding-top: 0 !important;
  max-width: 34rem;
}
.barva-layout .word-strip {
  grid-column: auto !important;
  grid-row: auto !important;
  margin-top: 0 !important;
}
.barva-layout .barva-portrait,
.barva-layout button.barva-portrait,
button.barva-portrait {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: 20rem !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  margin: 0 0 0 auto !important;
  border-radius: 1.85rem 1.25rem 2.1rem 1.45rem !important;
  align-self: start !important;
  max-height: 26rem;
}
.barva-layout .barva-portrait img {
  object-position: center 16% !important;
}
@media (max-width: 900px) {
  .barva-layout {
    grid-template-columns: 1fr !important;
  }
  .barva-layout .barva-portrait,
  .barva-layout button.barva-portrait {
    max-width: 16rem !important;
    max-height: none;
    margin-inline: auto !important;
    order: -1;
  }
}

/* ——— Moj pristop: tighter story-break, custom shapes ——— */
#povezovanje .media-stage {
  min-height: clamp(22rem, 44vw, 32rem);
}
#povezovanje .media-stage .photo-frame.main-shot {
  border-radius: 1.75rem 1.3rem 2rem 1.45rem !important;
}
#povezovanje .story-break {
  align-items: start !important;
  margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
}
#povezovanje .story-break-photo {
  margin-top: 0 !important;
  align-self: start !important;
  border-radius: 48% 42% 50% 44% / 44% 48% 42% 52% !important;
  min-height: clamp(14rem, 28vw, 20rem) !important;
  max-width: 22rem;
  margin-left: auto;
}
#povezovanje .story-break-photo img {
  min-height: clamp(14rem, 28vw, 20rem) !important;
}
.photo-band-inner {
  min-height: clamp(16rem, 32vw, 26rem) !important;
  gap: 1.15rem !important;
}
.photo-band button {
  min-height: clamp(14rem, 28vw, 24rem) !important;
}
.photo-band .wide {
  border-radius: 1.4rem 1.9rem 1.5rem 1.7rem !important;
}
.photo-band .tall {
  border-radius: 46% 42% 48% 44% / 40% 48% 38% 52% !important;
}

/* ——— Za koga denser + bigger photo ——— */
.za-koga-photo {
  max-width: 20rem !important;
  min-height: clamp(16rem, 32vw, 24rem) !important;
  margin-top: -0.5rem !important;
  border-radius: 48% 40% 50% 42% / 42% 50% 38% 52% !important;
}
.za-koga-head .section-cta {
  margin-top: 1.25rem;
}

/* ——— Na odru / journey ——— */
#storitve-preview .journey-media {
  min-height: clamp(24rem, 48vw, 34rem) !important;
}
#storitve-preview .journey-media .photo-frame {
  border-radius: 1.7rem 1.25rem 1.9rem 1.4rem !important;
}
#storitve-preview .journey-copy .btn-row {
  margin-top: 1.35rem;
}

/* ——— Dela moments: restore readable dark caption (fix vibe card-bg bug) ——— */
.moment-caption {
  background: linear-gradient(to top, rgba(36, 20, 15, 0.88) 0%, rgba(36, 20, 15, 0.45) 55%, transparent 100%) !important;
  color: #F7F0E6 !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  padding: 2.4rem 1.2rem 1.15rem !important;
}
.moment-caption h3 {
  color: #F7F0E6 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.moment-caption p {
  color: rgba(247, 240, 230, 0.9) !important;
}

/* ——— Sodelovanje: top row (intro+photo), steps full width below ——— */
.expect-with-photo {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.35rem !important;
  align-items: stretch !important;
}
.expect-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.38fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
.expect-intro {
  max-width: 36rem !important;
  margin-bottom: 0 !important;
  padding-top: 0.35rem;
}
.expect-side-photo,
button.expect-side-photo {
  position: relative !important;
  width: 100% !important;
  max-width: 15.5rem !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  margin: -1.25rem 0 0 auto !important;
  border-radius: 1.7rem 1.2rem 2rem 1.35rem !important;
  justify-self: end !important;
}
.expect-journey {
  margin-top: 0 !important;
  width: 100%;
}
.expect-intro .btn-row {
  margin-top: 1.25rem;
}
@media (max-width: 900px) {
  .expect-top {
    grid-template-columns: 1fr;
  }
  .expect-side-photo,
  button.expect-side-photo {
    margin: 0.35rem auto 0 !important;
    max-width: 14rem !important;
  }
}

/* ——— Kdo sem mosaic: soft rounded corners ——— */
.about-mosaic .tile,
.about-mosaic .tile:nth-child(1),
.about-mosaic .tile:nth-child(2),
.about-mosaic .tile:nth-child(3) {
  border-radius: 1.15rem !important;
}
.about-mosaic .tile:nth-child(1) {
  border-radius: 1.35rem 1.15rem 1.45rem 1.2rem !important;
}
.about-mosaic {
  min-height: 32rem !important;
  gap: 0.85rem !important;
}

/* ——— Logos even bigger ——— */
.logo-cloud {
  gap: clamp(2.25rem, 6vw, 4.5rem) !important;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.logo-cloud img {
  max-height: 10.5rem !important;
  max-width: 15rem !important;
}
.logo-cloud img.logo-wide {
  max-width: 22rem !important;
  max-height: 6.5rem !important;
}

/* ——— Section CTA helper ——— */
.section-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ——— Storitve: individual inquireable offers ——— */
.service-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.service-offer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.55rem 1.4rem 1.45rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  border-radius: 1.45rem 1.15rem 1.65rem 1.25rem;
  min-height: 12.5rem;
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-radius 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.service-offer:nth-child(2) { border-radius: 1.15rem 1.55rem 1.25rem 1.7rem; }
.service-offer:nth-child(3) { border-radius: 1.6rem 1.2rem 1.4rem 1.5rem; }
.service-offer:nth-child(4) { border-radius: 1.25rem 1.7rem 1.15rem 1.45rem; }
.service-offer:nth-child(5) { border-radius: 1.5rem 1.3rem 1.75rem 1.2rem; }
.service-offer:nth-child(6) { border-radius: 1.35rem 1.55rem 1.2rem 1.65rem; }
.service-offer:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.service-offer .offer-num {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--terracotta);
  letter-spacing: 0.04em;
}
.service-offer h3 {
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.25;
}
.service-offer p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  flex: 1;
}
.service-offer .btn {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
}
.write-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.write-offer {
  padding: 1.5rem 1.4rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 1.4rem 1.2rem 1.6rem 1.3rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform 0.45s ease, border-radius 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.write-offer:hover {
  transform: translateY(-3px);
  border-radius: 1.1rem 1.7rem 1.25rem 1.55rem;
}
.write-offer h3 { margin: 0; font-size: 1.25rem; }
.write-offer ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
}
.write-offer li + li { margin-top: 0.35rem; }
.write-offer .btn { align-self: flex-start; }
@media (max-width: 900px) {
  .service-offers { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .service-offers,
  .write-offers { grid-template-columns: 1fr; }
}

.service-block-media {
  border-radius: 1.7rem 1.3rem 1.95rem 1.4rem !important;
}
.page-hero-photo.shape-soft-melt,
.page-hero-photo {
  border-radius: 42% 48% 40% 46% / 46% 40% 50% 44% !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.page-hero-photo img {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ——— O meni: redesigned story list ——— */
.life-chapters {
  display: grid;
  gap: 1.25rem;
  max-width: 52rem;
  margin-inline: auto;
}
.life-chapter {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem 1.35rem;
  padding: 1.4rem 1.35rem 1.5rem;
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 1.45rem 1.2rem 1.65rem 1.3rem;
  box-shadow: var(--shadow-soft);
  align-items: start;
  transition: transform 0.45s ease, border-radius 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.life-chapter:nth-child(even) {
  border-radius: 1.2rem 1.55rem 1.3rem 1.7rem;
}
.life-chapter:hover {
  transform: translateY(-3px);
  border-radius: 1.7rem 1.15rem 1.45rem 1.5rem;
}
.life-chapter-num {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--cream);
  background: linear-gradient(145deg, var(--terracotta), var(--apricot));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--terracotta) 28%, transparent);
}
.life-chapter-body h3 {
  margin: 0 0 0.55rem;
  font-size: 1.3rem;
}
.life-chapter-body p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}
.life-chapter-body p + p {
  margin-top: 0.65rem;
}
/* life-mosaic layout owned by FIX PASS below (.life-shot-*) */

/* Hide old chip-journey when offers present */
.service-offers + .chip-journey,
.chip-journey.is-replaced { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .shape-morph,
  .photo-frame,
  .barva-portrait,
  .expect-side-photo,
  .service-offer,
  .life-chapter,
  .life-mosaic button {
    transition: none !important;
  }
}

/* ========== FIX PASS 2026-10-01b ========== */

/* Default asymmetric frames on common photo shells (resting state) */
.photo-frame:not(.shape-blob):not(.shape-leaf):not(.shape-arch):not(.shape-petal):not(.shape-soft),
.barva-portrait:not([class*="shape-"]),
.expect-side-photo:not([class*="shape-"]),
.za-koga-photo:not([class*="shape-"]),
.story-break-photo:not([class*="shape-"]),
.service-block-media:not([class*="shape-"]),
.journey-media .photo-frame:not([class*="shape-"]),
.portrait-panel .photo-frame:not([class*="shape-"]) {
  border-radius: 1.65rem 1.25rem 1.9rem 1.4rem !important;
}
.photo-band button.wide {
  border-radius: 48% 48% 1.5rem 1.5rem / 26% 26% 1.5rem 1.5rem !important;
}
.photo-band button.tall {
  border-radius: 58% 42% 48% 52% / 42% 58% 42% 58% !important;
}
.uvod-photo .photo-frame,
.fragment-media .photo-frame {
  border-radius: 1.8rem 1.2rem 2rem 1.45rem !important;
}
.life-mosaic .life-shot-tall {
  border-radius: 1.7rem 1.15rem 1.9rem 1.35rem !important;
}
.life-mosaic .life-shot-portrait:nth-of-type(2) {
  border-radius: 46% 42% 50% 44% / 42% 50% 40% 54% !important;
}
.life-mosaic .life-shot-portrait:nth-of-type(3) {
  border-radius: 1.35rem 1.7rem 1.25rem 1.55rem !important;
}
.life-mosaic .life-shot-wide {
  border-radius: 1.55rem 1.25rem 1.7rem 1.4rem !important;
}

/* Hero: bigger bubble, copy nudged down */
@media (min-width: 981px) {
  .hero-layout-photo-led {
    grid-template-columns: minmax(18rem, 1.05fr) minmax(16rem, 1.05fr) !important;
    gap: clamp(1rem, 2.5vw, 2rem) !important;
    align-items: center !important;
  }
  .hero-layout-photo-led .hero-copy {
    padding-top: clamp(2.5rem, 6vh, 4.5rem) !important;
    padding-right: clamp(0.5rem, 1.5vw, 1.25rem) !important;
    max-width: 34rem !important;
    align-self: center;
  }
  .hero-layout-photo-led .hero-visual {
    min-height: clamp(26rem, 62vh, 40rem) !important;
    max-width: min(100%, 32rem) !important;
    width: 100%;
    justify-self: end;
  }
  .hero-photo,
  .hero-visual > button.hero-photo {
    inset: -4% -2% -8% 0 !important;
  }
  .hero-copy .slogan {
    font-size: clamp(2.35rem, 4.4vw, 4rem) !important;
  }
}

/* Default asymmetric shapes (visible without hover) */
.shape-leaf {
  border-radius: 58% 42% 48% 52% / 42% 58% 42% 58% !important;
}
.shape-petal {
  border-radius: 1.85rem 1.15rem 2.15rem 1.35rem !important;
}
.shape-arch {
  border-radius: 2.2rem 2.2rem 1.35rem 1.35rem / 2.6rem 2.6rem 1.35rem 1.35rem !important;
}
.shape-blob {
  border-radius: 46% 42% 50% 44% / 42% 48% 40% 52% !important;
}
.shape-soft {
  border-radius: 1.35rem 1.55rem 1.25rem 1.65rem !important;
}

/* Face-safe: keep subject inside softer organic frames */
.face-safe,
.face-safe img {
  overflow: hidden;
}
.face-safe img {
  object-fit: cover !important;
  transform: scale(1.04);
  transform-origin: center 20%;
}

/* Subtle hover morph — tiny nudge from each resting shape (never jump to blob) */
@media (hover: hover) and (pointer: fine) {
  .shape-leaf.shape-morph:hover {
    border-radius: 55% 45% 50% 50% / 44% 56% 44% 56% !important;
  }
  .shape-blob.shape-morph:hover,
  .page-hero-photo.shape-blob.shape-morph:hover {
    border-radius: 48% 44% 50% 46% / 44% 50% 42% 54% !important;
  }
  .shape-petal.shape-morph:hover {
    border-radius: 1.7rem 1.25rem 2rem 1.45rem !important;
  }
  .shape-arch.shape-morph:hover {
    border-radius: 50% 50% 1.5rem 1.5rem / 30% 30% 1.5rem 1.5rem !important;
  }
  .shape-soft.shape-morph:hover {
    border-radius: 1.45rem 1.55rem 1.35rem 1.6rem !important;
  }
  .photo-frame.shape-morph:hover,
  button.barva-portrait.shape-morph:hover,
  button.expect-side-photo.shape-morph:hover,
  button.za-koga-photo.shape-morph:hover,
  button.story-break-photo.shape-morph:hover,
  .photo-band button.shape-morph:hover,
  .service-block-media.shape-morph:hover,
  .journey-media .photo-frame.shape-morph:hover,
  .portrait-panel .photo-frame.shape-morph:hover,
  .life-mosaic button.shape-morph:hover {
    transform: translateY(-2px);
  }
  .about-mosaic .tile.shape-morph:hover {
    border-radius: 1.25rem 1.35rem 1.2rem 1.4rem !important;
  }
}

/* NEVER morph captioned grid photos (captions would clip) */
.moment,
.moment:hover,
.moments .moment,
.moments .moment:hover,
.gallery-constellation .frame-ornament,
.gallery-constellation .frame-ornament:hover,
.gallery-constellation figure,
.gallery-constellation figure:hover,
.no-morph,
.no-morph:hover,
.portfolio-card,
.portfolio-card:hover,
.portfolio-media button,
.portfolio-media button:hover {
  border-radius: 0 !important;
  transition: background-color 0.45s ease !important;
  transform: none !important;
  box-shadow: none !important;
}
.moment:nth-child(1),
.moment:nth-child(1):hover { border-radius: 1.6rem 1.2rem 1.8rem 1.35rem !important; }
.moment:nth-child(2),
.moment:nth-child(2):hover { border-radius: 1.2rem 1.7rem 1.3rem 1.5rem !important; }
.moment:nth-child(3),
.moment:nth-child(3):hover { border-radius: 1.5rem 1.15rem 1.65rem 1.3rem !important; }
.moment:nth-child(4),
.moment:nth-child(4):hover { border-radius: 1.35rem 1.6rem 1.2rem 1.7rem !important; }
.moment:nth-child(5),
.moment:nth-child(5):hover { border-radius: 1.7rem 1.25rem 1.45rem 1.35rem !important; }

/* Pristop break: title + breathing room; kill empty band above photos */
.pristop-break {
  margin-top: clamp(2.75rem, 5.5vw, 4.25rem) !important;
  padding-top: clamp(0.75rem, 2vw, 1.5rem);
}
.pristop-break .story-break-copy h3 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
}
.pristop-break .story-break {
  align-items: start !important;
  margin: 0 !important;
}
#povezovanje .story-break-photo {
  margin-top: 0.35rem !important;
}
.photo-band {
  padding-top: clamp(0.35rem, 1.5vw, 1rem) !important;
  padding-bottom: clamp(1.25rem, 3vw, 2.25rem) !important;
}
.photo-band-inner {
  min-height: clamp(14rem, 28vw, 22rem) !important;
  margin-top: 0 !important;
}
.photo-band button {
  min-height: clamp(13rem, 26vw, 20rem) !important;
}

/* Kdo sem: explicit corner radius on all 3 */
.about-mosaic .tile,
.about-mosaic .tile.tile-round,
.about-mosaic .tile:nth-child(1),
.about-mosaic .tile:nth-child(2),
.about-mosaic .tile:nth-child(3) {
  border-radius: 1.15rem !important;
  overflow: hidden !important;
}
.about-mosaic .tile:nth-child(1) {
  border-radius: 1.35rem 1.15rem 1.25rem 1.2rem !important;
}
.about-mosaic .tile:nth-child(2) {
  border-radius: 1.1rem 1.3rem 1.15rem 1.25rem !important;
}
.about-mosaic .tile:nth-child(3) {
  border-radius: 1.25rem 1.1rem 1.35rem 1.15rem !important;
}
.about-mosaic .tile.shape-morph:hover {
  border-radius: 1.35rem 1.2rem 1.45rem 1.25rem !important;
}

/* O meni life mosaic: natural aspect frames that fill */
.life-mosaic {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr 0.85fr;
  grid-template-rows: auto auto;
  gap: 0.9rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.life-mosaic .life-shot {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--shadow-soft);
  width: 100%;
}
.life-mosaic .life-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.life-mosaic .life-shot-tall {
  grid-row: 1 / span 2;
  grid-column: 1;
  aspect-ratio: 2 / 3; /* matches tall portraits ~1333x2000 */
  min-height: 0;
  border-radius: 1.55rem 1.25rem 1.75rem 1.35rem;
}
.life-mosaic .life-shot-portrait {
  aspect-ratio: 2 / 3; /* match source portraits; fill frame */
  min-height: 0;
  border-radius: 1.25rem 1.45rem 1.2rem 1.35rem;
}
.life-mosaic .life-shot-wide {
  grid-column: 2 / span 2;
  aspect-ratio: 3 / 4; /* portrait-soft is 1050x1400 — was wrongly 16/10 */
  min-height: 0;
  border-radius: 1.35rem 1.2rem 1.5rem 1.4rem;
}
@media (max-width: 760px) {
  .life-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .life-mosaic .life-shot-tall {
    grid-row: auto;
    grid-column: 1 / span 2;
    aspect-ratio: 4 / 5;
  }
  .life-mosaic .life-shot-wide {
    grid-column: 1 / span 2;
  }
}

/* Gallery / odrske poti: fill frames, stable rounded corners, no morph */
.gallery-constellation .frame-ornament,
.gallery-constellation .frame-ornament.no-morph {
  border-radius: 1.25rem 1.4rem 1.2rem 1.5rem !important;
  overflow: hidden;
}
.gallery-constellation .frame-ornament button {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 14rem;
  aspect-ratio: 4 / 5;
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
.gallery-constellation .frame-ornament img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-constellation figcaption {
  position: relative;
  z-index: 2;
}

/* Storitve story-break titles */
.story-break-copy h3 {
  margin: 0.15rem 0 0.85rem;
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  line-height: 1.2;
}

/* Sodelovanje photo a bit larger */
.expect-side-photo,
button.expect-side-photo {
  max-width: 17.5rem !important;
}

/* Na odru journey face-safe */
#storitve-preview .journey-media .photo-frame.face-safe img {
  object-position: center 16% !important;
}

/* Life mosaic fill fix — picture+img must stretch the aspect box */
.life-mosaic .life-shot {
  display: block;
  position: relative;
  background: var(--cream-2);
  overflow: hidden !important;
}
.life-mosaic .life-shot picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.life-mosaic .life-shot img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 18% !important;
  display: block !important;
}
.life-mosaic .life-shot-tall,
.life-mosaic .life-shot-portrait,
.life-mosaic .life-shot-wide {
  position: relative;
}

/* Gallery fill — media area only, caption stays below */
.gallery-constellation .frame-ornament {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gallery-constellation .frame-ornament button {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4; /* closer to source photos; fills without empty bands */
  min-height: 12rem;
  position: relative;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: var(--cream-2);
}
.gallery-constellation .frame-ornament picture {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery-constellation .frame-ornament img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.gallery-constellation figcaption {
  position: relative;
  z-index: 2;
  padding: 0.75rem 0.85rem 0.95rem;
}

/* Hero: bigger bubble + copy lower (keep title readable) */
@media (min-width: 981px) {
  .hero {
    min-height: min(94vh, 60rem);
  }
  .hero-layout-photo-led {
    grid-template-columns: minmax(17rem, 0.95fr) minmax(18rem, 1.15fr) !important;
    align-items: end !important;
    padding-bottom: clamp(1rem, 3vh, 2.5rem);
  }
  .hero-layout-photo-led .hero-copy {
    padding-top: clamp(4rem, 10vh, 7rem) !important;
    padding-bottom: clamp(2rem, 5vh, 4rem) !important;
    align-self: end !important;
    max-width: 32rem !important;
  }
  .hero-layout-photo-led .hero-visual {
    min-height: clamp(28rem, 68vh, 44rem) !important;
    max-width: min(100%, 36rem) !important;
    align-self: stretch !important;
  }
  .hero-photo,
  .hero-visual > button.hero-photo {
    inset: -6% -4% -10% -2% !important;
  }
  .hero-copy .slogan {
    font-size: clamp(2.3rem, 4.2vw, 3.85rem) !important;
    max-width: 11.5ch;
  }
}

/* Kill empty air above photo-band after pristop */
#povezovanje.chapter {
  padding-bottom: 0.35rem !important;
}
#povezovanje .pristop-break {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#povezovanje .story-break {
  margin-bottom: 0 !important;
}
#povezovanje + .seam-gradient {
  height: 0.5rem !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.photo-band {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
.photo-band-inner {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Pristop break breathing — space above title, none wasted below */
.pristop-break {
  margin-top: clamp(2.75rem, 5.5vw, 4.25rem) !important;
  padding-top: clamp(1rem, 2.5vw, 1.75rem) !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Pot mosaic: 3 portraits, natural 2:3 frames that fill */
.life-mosaic {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 0.85rem !important;
  align-items: stretch;
}
.life-mosaic .life-shot-tall {
  grid-row: auto !important;
  grid-column: auto !important;
  aspect-ratio: 2 / 3 !important;
}
.life-mosaic .life-shot-portrait {
  aspect-ratio: 2 / 3 !important;
}
.life-mosaic .life-shot-wide {
  display: none !important; /* removed from HTML; keep rule harmless */
}
@media (max-width: 760px) {
  .life-mosaic {
    grid-template-columns: 1fr 1fr !important;
  }
  .life-mosaic .life-shot-tall {
    grid-column: 1 / span 2 !important;
  }
}

/* ========== POLISH PASS 2026-10 (hover morph, heroes, kdo-sem, gallery, lightbox, work-stage) ========== */

/* —— Standardized hover morph: obvious but not extreme —— */
@media (hover: hover) and (pointer: fine) {
  .shape-leaf.shape-morph:hover {
    border-radius: 46% 54% 40% 60% / 54% 40% 56% 44% !important;
  }
  .shape-blob.shape-morph:hover,
  .page-hero-photo.shape-blob.shape-morph:hover {
    border-radius: 54% 38% 48% 52% / 36% 56% 44% 50% !important;
  }
  .shape-petal.shape-morph:hover {
    border-radius: 2.45rem 0.85rem 1.55rem 1.95rem !important;
  }
  .shape-arch.shape-morph:hover {
    border-radius: 56% 56% 1.05rem 1.05rem / 40% 40% 1.05rem 1.05rem !important;
  }
  .shape-soft.shape-morph:hover {
    border-radius: 2rem 1.05rem 1.75rem 1.15rem !important;
  }
  .shape-organic-a.shape-morph:hover,
  .hero-photo.shape-organic-a.shape-morph:hover {
    border-radius: 48% 40% 52% 38% / 36% 48% 40% 54% !important;
  }
  .about-mosaic .tile.shape-morph:hover {
    border-radius: 1.85rem 1.15rem 1.65rem 1.35rem !important;
  }
  .photo-frame.shape-morph:hover,
  button.barva-portrait.shape-morph:hover,
  button.expect-side-photo.shape-morph:hover,
  button.za-koga-photo.shape-morph:hover,
  button.story-break-photo.shape-morph:hover,
  .photo-band button.shape-morph:hover,
  .service-block-media.shape-morph:hover,
  .journey-media .photo-frame.shape-morph:hover,
  .portrait-panel .photo-frame.shape-morph:hover,
  .life-mosaic button.shape-morph:hover,
  .hero-photo.shape-morph:hover,
  .page-hero-photo.shape-morph:hover,
  .work-stage-photo.shape-morph:hover {
    transform: translateY(-3px) scale(1.01);
  }
}

.hero-photo.shape-organic-a,
.hero-photo.shape-morph {
  transition:
    border-radius 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s ease !important;
}
/* Prefer hover morph over continuous blob-breathe on the hero */
.hero-photo.shape-organic-a.shape-morph {
  animation: none !important;
}

/* —— Hero / page-hero: bigger circle, nudged right, focus slightly lower —— */
@media (min-width: 981px) {
  .hero-layout-photo-led {
    grid-template-columns: minmax(16rem, 0.88fr) minmax(20rem, 1.22fr) !important;
  }
  .hero-layout-photo-led .hero-visual {
    min-height: clamp(30rem, 72vh, 48rem) !important;
    max-width: min(100%, 40rem) !important;
    justify-self: end !important;
    margin-right: clamp(-1.5rem, -2vw, -0.25rem) !important;
  }
  .hero-photo,
  .hero-visual > button.hero-photo {
    inset: -8% -8% -12% -2% !important;
  }
  .hero-photo img {
    object-position: 55% 24% !important;
    transform: scale(1.08) !important;
    transform-origin: 55% 22% !important;
  }
}

.page-hero-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) !important;
}
.page-hero-photo {
  min-height: clamp(22rem, 50vw, 36rem) !important;
  max-height: 40rem !important;
  width: min(100%, 32rem) !important;
  justify-self: end !important;
  margin-right: clamp(-0.5rem, -1.5vw, 0) !important;
  margin-left: auto !important;
}
.page-hero-photo img {
  object-position: center 22% !important;
}

/* —— Kdo sem: frames match photo aspect; keep positions —— */
.about-mosaic {
  grid-template-columns: 1.05fr 1.15fr !important;
  grid-template-rows: auto auto !important;
  gap: 0.85rem !important;
  min-height: 0 !important;
  align-items: stretch;
}
.about-mosaic .tile {
  min-height: 0 !important;
  height: auto !important;
}
.about-mosaic .tile:nth-child(1) {
  grid-row: 1 / span 2 !important;
  aspect-ratio: 2 / 3 !important;
}
.about-mosaic .tile:nth-child(2),
.about-mosaic .tile:nth-child(3) {
  aspect-ratio: 3 / 2 !important;
}
.about-mosaic .tile picture,
.about-mosaic .tile img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
@media (max-width: 760px) {
  .about-mosaic {
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  .about-mosaic .tile:nth-child(1) {
    grid-row: auto !important;
    aspect-ratio: 4 / 5 !important;
  }
  .about-mosaic .tile:nth-child(2),
  .about-mosaic .tile:nth-child(3) {
    aspect-ratio: 16 / 10 !important;
  }
}

/* —— Odrske poti: brighter frames + Na odru top padding —— */
.gallery-constellation figure,
.gallery-constellation .frame-ornament,
.gallery-constellation .frame-ornament.no-morph {
  background: #FBF8F3 !important;
  box-shadow: 0 10px 28px rgba(61, 33, 22, 0.07);
}
.gallery-constellation .frame-ornament button {
  background: #F7F1E8 !important;
  padding-top: 0.35rem;
}
.gallery-constellation figure:nth-child(5),
.gallery-constellation .frame-ornament:nth-child(5) {
  margin-top: 0 !important;
  padding-top: 0.55rem !important;
}
.gallery-constellation figure:nth-child(5) button,
.gallery-constellation .frame-ornament:nth-child(5) button {
  padding-top: 0.55rem !important;
}

/* —— Lightbox button hover —— */
@media (hover: hover) and (pointer: fine) {
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, color 0.28s ease;
  }
  .lightbox-close:hover,
  .lightbox-prev:hover,
  .lightbox-next:hover {
    transform: translateY(-50%) scale(1.08);
    background: #fff;
    color: var(--terracotta);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  }
  .lightbox-close:hover {
    transform: scale(1.1);
  }
}

/* —— Work stage (Dela list + rotating showcase) —— */
.work-stage {
  display: grid;
  grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  margin-top: 1.25rem;
}
.work-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: sticky;
  top: 6.5rem;
  max-height: calc(100vh - 7.5rem);
  overflow: auto;
}
.work-nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}
.work-nav-item .work-nav-tag {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 700;
}
.work-nav-item .work-nav-title {
  font-family: var(--display, "Fraunces", Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
}
.work-nav-item:hover {
  background: color-mix(in srgb, var(--paper) 80%, var(--cream-2));
}
.work-nav-item.is-active {
  background: var(--paper);
  border-color: color-mix(in srgb, var(--apricot) 55%, var(--line));
  box-shadow: var(--shadow-soft);
  transform: translateX(4px);
}
.work-nav-item.is-hidden { display: none; }

.work-panel {
  background: #fff;
  border-radius: 1.6rem 1.9rem 1.5rem 1.75rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  padding: 0.85rem 0.85rem 1.25rem;
}
.work-panel-media {
  margin: 0;
  border-radius: 1.25rem 1.45rem 1.2rem 1.35rem;
  overflow: hidden;
  background: #fff;
}
.work-stage-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 11;
  border: 0;
  padding: 0;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
}
.work-stage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-panel-body {
  padding: 1.1rem 0.65rem 0.25rem;
}
.work-panel-body .tag {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 750;
  margin-bottom: 0.35rem;
}
.work-panel-body h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}
.work-panel-body p {
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin: 0 0 0.45rem;
}
.work-panel-body .portfolio-credit {
  margin-top: 0.55rem;
  font-size: 0.8rem;
  color: rgba(61, 33, 22, 0.55);
}
.work-stage-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0 0.35rem;
}
.work-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.work-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}
.work-dot.is-active {
  background: var(--terracotta);
  transform: scale(1.25);
}
.work-stage-arrows {
  display: flex;
  gap: 0.4rem;
}
.work-stage-arrows button {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .work-stage-arrows button:hover {
    background: #fff;
    border-color: var(--terracotta);
    transform: scale(1.06);
  }
}
.work-stage-progress {
  height: 2px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-radius: 999px;
  margin: 0.85rem 0.35rem 0;
  overflow: hidden;
}
.work-stage-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--terracotta);
  transform-origin: left center;
}
.work-stage.is-paused .work-stage-progress > span {
  animation-play-state: paused;
}
@keyframes work-progress {
  from { width: 0%; }
  to { width: 100%; }
}
.work-stage-progress > span.is-running {
  animation: work-progress 6s linear forwards;
}

@media (max-width: 900px) {
  .work-stage {
    grid-template-columns: 1fr;
  }
  .work-nav {
    position: relative;
    top: 0;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    scroll-snap-type: x mandatory;
  }
  .work-nav-item {
    min-width: 11.5rem;
    scroll-snap-align: start;
  }
  .work-nav-item.is-active { transform: none; }
}

/* Social links: hidden until CMS enables */
.social-link[hidden],
.social-link.is-hidden {
  display: none !important;
}
.visually-hidden,
.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;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.contact-details .social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  margin-top: 0.15rem;
}

/* Brand logo: never flash opaque plate */
.brand-signature-img {
  background: transparent !important;
  mix-blend-mode: multiply;
}
.site-footer .brand-signature-img {
  mix-blend-mode: normal;
  filter: brightness(1.12) contrast(1.05);
}

/* ========== PASS 2026-10-01b: hero crop, work-stage height, soft morph ========== */

/* Hero: text lower, photo with top padding, less zoom so more of her shows */
@media (min-width: 981px) {
  .hero-layout-photo-led .hero-copy {
    padding-top: clamp(5.5rem, 14vh, 9rem) !important;
    padding-bottom: clamp(1.5rem, 4vh, 3rem) !important;
  }
  .hero-layout-photo-led .hero-visual {
    padding-top: clamp(1.25rem, 3vh, 2.5rem) !important;
  }
  .hero-photo,
  .hero-visual > button.hero-photo {
    inset: 2% -6% -8% 0 !important;
  }
  .hero-photo img {
    object-position: 52% 14% !important;
    transform: scale(1.02) !important;
    transform-origin: 50% 18% !important;
  }
}
.hero-accent-line { display: none !important; }

/* Work-stage photo: shorter so it fits the viewport */
.work-stage-photo {
  aspect-ratio: 16 / 9 !important;
  max-height: min(42vh, 22rem);
}
.work-stage-home .work-stage-photo {
  aspect-ratio: 16 / 9 !important;
  max-height: min(38vh, 20rem);
}
.work-panel-body h3 {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
}
.work-panel {
  padding: 0.7rem 0.7rem 1rem;
}
.work-panel-body {
  padding: 0.85rem 0.5rem 0.15rem;
}

/* Sodelovanje side photo: gentler morph (was too aggressive) */
@media (hover: hover) and (pointer: fine) {
  .expect-side-photo.shape-morph-soft:hover,
  button.expect-side-photo.shape-leaf.shape-morph-soft:hover {
    border-radius: 56% 44% 50% 50% / 44% 56% 44% 56% !important;
    transform: translateY(-1px) scale(1) !important;
  }
}