/* ===================================================
   ROOT OF JOY — Main Stylesheet v2
   =================================================== */

/* ===== CUSTOM PROPERTIES ===== */
:root {
  --color-bg:          #F8F4EE;
  --color-bg-alt:      #EDE5DC;
  --color-bg-dark:     #8A5438;
  --color-terra:       #8A5438;
  --color-terra-hover: #A86348;
  --color-terra-pale:  #E6D5C3;
  --color-charcoal:    #7A5C4E;
  --color-muted:       #7A5C4E;
  --color-border:      #DDD5C8;
  --color-divider:     #C9BDB0;
  --color-white:       #FFFFFF;
  --color-card:        #FDFAF6;

  /* Context-specific colors — never introduce hex outside this block */
  --color-text-on-dark:       #EDD9C8;  /* text/ui on all dark/terra backgrounds */
  --color-nav-bg:             #faf8f6;  /* header bg (home) + hero text; intentionally lighter than --color-bg */
  --color-hero-text:          #5C2E12;  /* hero tagline, byline, headline — deep brown on image */
  --color-nav-cta-bg:         #E7D9CF;  /* nav CTA button background */
  --color-nav-cta-text:       #6B5247;  /* nav CTA text + scrolled nav link color */
  --color-nav-cta-hover:      #ddd0c5;  /* nav CTA button hover background */
  --color-nav-scrolled-hover: #4a3830;  /* nav link hover when header is scrolled */
  --color-btn-dark-bg:        #986850;  /* btn-outline-white background (dark sections) */
  --color-btn-dark-hover:     #a87860;  /* btn-outline-white hover background */
  --color-hero-bg:            #1a1210;  /* hero section fallback dark background */

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-hand:  'Dancing Script', 'Segoe Script', cursive;
  --font-sans:  'Montserrat', system-ui, -apple-system, sans-serif;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   32px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 4px rgba(44,41,38,.07);
  --shadow-md: 0 4px 20px rgba(44,41,38,.09);
  --shadow-lg: 0 8px 40px rgba(44,41,38,.11);

  --container:  1200px;
  --gap:        2rem;
  --transition: 0.25s ease;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height: auto ide u paru s max-width: 100%. Bez njega, cim CSS suzi sliku,
   visina ostaje na vrijednosti iz height atributa i slika se rastegne —
   tako je slika isjecaka iz novina na /in-media/ bila cetiri puta previsoka
   na mobitelu. Najniza moguca specificnost (0,0,1), pa je svako pravilo na
   razini klase (.service-row__img img i slicna, s height: 100% i object-fit)
   i dalje nadjacava. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ===== SKIP LINK ===== */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--color-terra);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  transition: top var(--transition);
}
.skip-link:focus { top: 1rem; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-charcoal);
}
h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); font-weight: 500; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; }
h3 { font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 500; }
h4 { font-size: 1.25rem; font-weight: 500; }
h5 { font-size: 1rem; font-weight: 500; }

p { margin-bottom: 1rem; color: var(--color-charcoal); }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.3rem; line-height: 1.85; color: var(--color-muted); }
.text-muted { color: var(--color-muted); }
.text-terra  { color: var(--color-terra); }
.text-serif  { font-family: var(--font-serif); }

blockquote {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  color: var(--color-charcoal);
  border-left: 3px solid var(--color-terra);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
}

/* ===== UTILITIES ===== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.container--content { max-width: 760px; }
.section { padding-block: 4rem; }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark p { color: var(--color-text-on-dark); }
.section--terra { background: var(--color-terra); color: var(--color-text-on-dark); }

.section-header { max-width: 640px; margin-bottom: 3.5rem; }
.section-header--center { text-align: center; margin-inline: auto; }
.section-cta { text-align: center; margin-top: 4rem; }

.section-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-terra);
  margin-bottom: 0.75rem;
}

.divider {
  width: 48px;
  height: 2px;
  background: var(--color-terra);
  margin: 1.25rem 0 2rem;
}
.divider--center { margin-inline: auto; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible {
  outline: 2px solid var(--color-terra);
  outline-offset: 3px;
}

.btn-primary { background: var(--color-terra); color: var(--color-text-on-dark); border-color: var(--color-terra); }
.btn-primary:hover { background: var(--color-terra-hover); border-color: var(--color-terra-hover); }

/* .btn-outline is an alias for .btn-primary — both are solid terra on light backgrounds */
.btn-outline { background: var(--color-terra); color: var(--color-text-on-dark); border-color: var(--color-terra); }
.btn-outline:hover { background: var(--color-terra-hover); color: var(--color-text-on-dark); border-color: var(--color-terra-hover); }

.btn-outline-white { background: var(--color-btn-dark-bg); color: var(--color-text-on-dark); border-color: var(--color-btn-dark-bg); }
.btn-outline-white:hover { background: var(--color-btn-dark-hover); color: var(--color-text-on-dark); border-color: var(--color-btn-dark-hover); }

.btn-ghost { background: transparent; color: var(--color-terra); border-color: transparent; padding-inline: 0; }
.btn-ghost:hover { color: var(--color-terra-hover); }

.btn-lg { padding: 1rem 2.25rem; font-size: 1rem; }
.btn--full { width: 100%; justify-content: center; }

.btn-group { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.btn-group--center { justify-content: center; }

/* ===== CARDS ===== */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card__icon { width: 48px; height: 48px; color: var(--color-terra); margin-bottom: 1.25rem; }
.card__label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-terra);
  margin-bottom: 0.5rem;
}
.card__title { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; margin-bottom: 0.75rem; color: var(--color-charcoal); }
.card__body { color: var(--color-muted); font-size: 0.925rem; line-height: 1.7; margin-bottom: 1.5rem; }
.card__link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-terra);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: gap var(--transition);
}
.card__link:hover { gap: 0.6rem; }

/* ===== GRID LAYOUTS ===== */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--gap); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }

/* ===== NAVIGATION ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(248, 244, 238, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }

main { padding-top: 68px; }
body.home main { padding-top: 0; }

/* ── Home page: always visible header */
body.home .site-header {
  background: var(--color-nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--color-border);
}
body.home .site-header.scrolled {
  background: var(--color-nav-bg);
  border-bottom: none;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* Default header text color for home */
body.home .site-header .nav-left a,
body.home .site-header .nav-right ul a { color: var(--color-charcoal); }
body.home .site-header .nav-left a:hover,
body.home .site-header .nav-right ul a:hover {
  color: var(--color-terra);
  background: transparent;
}
body.home .site-header .lang-link { color: var(--color-muted); }
body.home .site-header .lang-link.active,
body.home .site-header .lang-link:hover { color: var(--color-terra); }
body.home .site-header .lang-switcher span { color: var(--color-border); }
body.home .site-header .logo-img { filter: brightness(0) saturate(100%) invert(34%) sepia(15%) saturate(700%) hue-rotate(322deg) brightness(95%) contrast(90%); }
/* Bilo je var(--color-nav-bg) — gotovo bijelo, pa su se crtice na naslovnici
   gubile u svijetlom nebu heroa. var(--color-hero-text) je ista boja kojom
   hero vec pise tagline i headline; izmjereni kontrast prema toj pozadini
   je 10.84:1. Stanje .scrolled ispod ima svoje pravilo i ne dira se. */
body.home .site-header .menu-toggle span { background: var(--color-hero-text); }

/* Scrolled: dark text on light bg */
body.home .site-header.scrolled .nav-left a,
body.home .site-header.scrolled .nav-right ul a { color: var(--color-nav-cta-text); }
body.home .site-header.scrolled .nav-left a:hover,
body.home .site-header.scrolled .nav-right ul a:hover { color: var(--color-nav-scrolled-hover); background: transparent; }
body.home .site-header.scrolled .lang-link { color: var(--color-muted); }
body.home .site-header.scrolled .lang-link.active,
body.home .site-header.scrolled .lang-link:hover { color: var(--color-nav-cta-text); }
body.home .site-header.scrolled .lang-switcher span { color: var(--color-border); }
body.home .site-header.scrolled .logo-img { filter: brightness(0) saturate(100%) invert(34%) sepia(15%) saturate(700%) hue-rotate(322deg) brightness(95%) contrast(90%); }
body.home .site-header.scrolled .menu-toggle span { background: var(--color-charcoal); }

.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: calc(50% - 126px) 252px calc(50% - 126px);
  align-items: center;
  height: 68px;
}

.nav-left,
.nav-right {
  display: flex;
  align-items: center;
}
.nav-left {
  grid-column: 1;
  justify-content: flex-end;
  padding-left: 30px;
}
.nav-right {
  grid-column: 3;
  gap: 1rem;
  padding-right: 10px;
}
.nav-left ul,
.nav-right ul {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-left a,
.nav-right ul a {
  display: block;
  padding: 0.25rem 0;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--color-charcoal);
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-left a:hover,
.nav-left a[aria-current="page"],
.nav-right ul a:hover,
.nav-right ul a[aria-current="page"] { color: var(--color-terra); }

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 56px;
}
.site-header .logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.logo-img {
  width: 70px;
  height: auto;
  max-width: none;
  display: block;
  filter: brightness(0) saturate(100%) invert(34%) sepia(15%) saturate(700%) hue-rotate(322deg) brightness(95%) contrast(90%);
}

.nav-cta {
  display: inline-block;
  flex-shrink: 0;
  background: var(--color-nav-cta-bg);
  color: var(--color-nav-cta-text);
  border-radius: 50px;
  padding: 10px 18px;
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
.nav-cta:hover { background: var(--color-nav-cta-hover); color: var(--color-nav-cta-text); }

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  flex-shrink: 0;
}
.lang-switcher span { color: var(--color-border); }
.lang-link { transition: color var(--transition); }
.lang-link:hover, .lang-link.active { color: var(--color-terra); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-charcoal);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.mobile-nav {
  display: none;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--color-border);
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.25rem; }
.mobile-nav a {
  display: block;
  padding: 0.6rem 0;
  font-size: 1rem;
  color: var(--color-charcoal);
  border-bottom: 1px solid var(--color-border);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav__footer {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

/* ===== HERO ===== */
@keyframes kenBurns {
  from { transform: scale(1.0); }
  to   { transform: scale(1.25); }
}

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: var(--color-hero-bg);
}

.hero__bg {
  position: absolute;
  inset: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  animation: kenBurns 10s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change: transform;
}

.hero__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: 1;
}

.hero__text {
  position: absolute;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  width: 100%;
  padding: 0 60px;
}

.hero__tagline {
  font-size: 38px;
  letter-spacing: 0.18em;
  color: var(--color-hero-text);
  font-weight: 400;
  margin: 0;
  font-family: var(--font-serif);
  text-transform: uppercase;
}

.hero__byline {
  font-size: 20px;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-hero-text);
  opacity: 0.75;
  margin: 10px 0 0;
}

.hero__headline {
  font-size: 32px;
  font-family: var(--font-serif);
  color: var(--color-hero-text);
  font-weight: 300;
  line-height: 1.3;
  margin: 16px 0 0;
}

/* Hero CTA postoji SAMO na mobitelu (do 768px). Iznad toga je CTA stalno
   vidljiv u navigaciji, pa bi ovdje bio dvostruk. Ukljucuje se u
   @media (max-width: 768px). */
.hero__cta {
  display: none;
  align-self: center;
  background: transparent;
  color: var(--color-nav-bg);
  border-radius: 50px;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 400;
  white-space: nowrap;
  text-decoration: none;
  border: 1.5px solid rgba(250,248,246,0.6);
  margin-top: 24px;
  transition: background var(--transition), border-color var(--transition);
}
.hero__cta:hover { background: rgba(250,248,246,0.15); border-color: var(--color-nav-bg); color: var(--color-nav-bg); }

.hero__bottom {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.hero__h1 {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--color-nav-bg);
  line-height: 1.3;
  margin: 0;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}


/* ===== WHO SECTION ===== */
.who-rows {
  margin-bottom: 2.5rem;
}
.who-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem 3rem;
  align-items: start;
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-divider);
}
.who-row:last-child {
  border-bottom: 1px solid var(--color-divider);
}
.who-row__title {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0;
  padding-top: 0.15rem;
  margin-bottom: 1.25rem;
}
body.home .who-row__title { font-weight: 700; }
.who-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.who-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-charcoal);
  line-height: 1.6;
}
.who-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terra);
  flex-shrink: 0;
  margin-top: 0.5rem;
}
.who-closing {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--color-charcoal);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.who-closing--location {
  margin-top: 2rem;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .who-row { grid-template-columns: 1fr; gap: 1rem; }
}

/* ===== MEDIA STRIP ===== */
.media-strip {
  padding: 3rem 0;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.media-strip__label {
  text-align: center;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2rem;
}
.media-strip__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 3rem;
}
.media-logo {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.55;
  mix-blend-mode: multiply;
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.media-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  mix-blend-mode: normal;
}
.media-logo--invert {
  filter: invert(1) grayscale(100%);
  mix-blend-mode: multiply;
}
.media-logo--boost {
  opacity: 0.7;
}
.media-text-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 40px;
  opacity: 0.55;
  transition: opacity 0.25s ease;
  line-height: 1.2;
  text-align: center;
}
.media-text-logo__sup {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
.media-text-logo__name {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  white-space: nowrap;
}
.media-text-logo:hover { opacity: 0.85; }

/* ── E-E-A-T section ── */
.eeat-section__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--color-bg);
}
.eeat-section__image {
  background: var(--color-bg);
  overflow: hidden;
}
.eeat-section__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.eeat-section__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 3.5rem 3rem 3rem;
}
.eeat-section__content > .section-label,
.eeat-section__content > h2 { text-align: center; }
.eeat-block__text {
  font-size: 1.25rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin: 0;
}
.eeat-block__badges {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.eeat-badge {
  height: 140px;
  width: auto;
}
.eeat-block__links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4rem;
}
.eeat-media-logos {
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0 0;
  margin-top: 2rem;
}
.eeat-media-logos__label {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 2rem;
}
.eeat-media-logos__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1rem;
  align-items: center;
  justify-items: center;
}
.eeat-media-logos__grid .media-logo {
  height: 52px;
  max-width: 120px;
}
.eeat-media-logos__grid .media-text-logo {
  height: 52px;
}
.eeat-media-logos__grid .media-text-logo__sup {
  font-size: 0.65rem;
}
.eeat-media-logos__grid .media-text-logo__name {
  font-size: 0.85rem;
}
.eeat-link {
  font-size: 1.125rem;
  color: var(--color-terra);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.eeat-link:hover { color: var(--color-terra-hover); border-bottom-color: var(--color-terra-hover); }
@media (max-width: 768px) {
  .media-strip__logos { gap: 1.25rem 2rem; }
  .media-logo { height: 22px; }

  /* Mreza logotipa na naslovnici: na mobitelu dva stupca umjesto cetiri.
     Cetiri staze od repeat(4, 1fr) ne mogu se stisnuti ispod min-content
     svojih logotipa, pa su se probijale izvan ekrana i sest od dvanaest
     logotipa bilo je nevidljivo. minmax(0, 1fr) uklanja tu donju granicu,
     a max-width: 100% sprjecava da slika probije vlastitu stazu.
     Specificnost (0,2,0) je nuzna: pravilo .media-logo iznad ima (0,1,0)
     i gubi od .eeat-media-logos__grid .media-logo (0,2,0) iz retka 778.
     Dva stupca, a ne tri: tekstualni logotipi ("Dom na kvadrat", 143.84px)
     imaju white-space: nowrap i u tri stupca se preklapaju. */
  .eeat-media-logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eeat-media-logos__grid .media-logo { height: 34px; max-width: 100%; }
  .eeat-media-logos__grid .media-text-logo { height: 34px; }
  .eeat-section__wrap { grid-template-columns: 1fr; min-height: unset; }
  .eeat-section__image { aspect-ratio: 4/3; order: -1; position: relative; }
  .eeat-section__content { padding: 1.75rem var(--gap) 2.5rem; }
  .eeat-block__links { gap: 1rem; }
}

/* ===== TRUST BAR ===== */
.trust-bar {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding-block: 1rem;
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: nowrap;
  padding: 0;
  overflow-x: auto;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.trust-item svg { color: var(--color-terra); flex-shrink: 0; }
.trust-sep {
  width: 2px;
  height: 16px;
  background: var(--color-charcoal);
  display: list-item;
  list-style: none;
}

/* ===== PROBLEM SECTION ===== */
.problem-section {
  padding-block: 3.5rem;
  background: var(--color-bg);
}
.who-section { background: var(--color-bg-alt); padding-bottom: 2rem; }
.who-section .section-header { max-width: none; margin-bottom: 2.5rem; }
/* Intentional homepage exception: homepage H2 is larger to match hero visual. Do not change without explicit confirmation. */
body.home h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 500; }
body.home h3 { font-size: 1.65rem; font-weight: 500; }
body.home .pain-point__title { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; }
body.home .section-label { font-size: 0.85rem; }
body.home .lead { font-size: 1.3rem; }
.service-row__body,
.service-row__also { font-size: 1.125rem; }
body.home .pain-point__body,
body.home .method-step p,
body.home .about-teaser__bullets li,
body.home .hfaq-item p,
body.home .transform-state__item { font-size: 1.125rem; }
body.home .problem-section__footer p,
body.home .problem-close { font-size: 1.3rem; text-wrap: balance; }
body.home .testimonial__quote { font-size: 1.125rem; font-family: var(--font-sans); font-weight: 400; line-height: 1.8; }
body.home .who-list li { font-size: 1.125rem; }
body.home .who-closing { font-size: 1.3rem; font-family: var(--font-sans); font-style: normal; max-width: 860px; }
body.home .about-teaser__body { font-size: 1.125rem; }
body.home .about-teaser__bullets-heading { font-size: 1.1rem; }
body.home .about-teaser__quote { font-size: 1.55rem; }
body.home .eeat-block__text { font-size: 1.125rem; }
body.home .cta-steps .booking-step__title { font-size: 1.125rem; }
body.home .booking-step__body { font-size: 1.125rem; }
body.home .mini-cta p { font-size: 1.125rem; }
body.home .mini-cta .cta-body p,
body.home .mini-cta .cta-availability { font-size: 1.3rem; text-wrap: balance; }
body.home .cta-body { max-width: none; }
.problem-section .section-label { color: var(--color-terra); }
.problem-section .section-header { max-width: none; margin-bottom: 0; }
.problem-section h2 { color: var(--color-charcoal); white-space: nowrap; }
.problem-section .lead { max-width: 960px; margin-inline: auto; margin-bottom: 0; }
@media (max-width: 768px) { .problem-section h2 { white-space: normal; } }
.method-section .section-header { max-width: none; margin-bottom: 0; }
.method-section h2 { white-space: nowrap; }
@media (max-width: 1280px) { .method-section h2 { white-space: normal; } }
.method-section .lead { max-width: 800px; margin-inline: auto; }
.method-note { text-align: center; max-width: none; margin-top: 2.5rem; }
.method-note .lead { max-width: none; margin: 0; text-wrap: balance; }
@media (max-width: 768px) { .method-section h2 { white-space: normal; } }
.services-section .section-header { max-width: none; }
.services-section .lead { max-width: 720px; margin-inline: auto; text-wrap: balance; }
.transformation .section-header { max-width: none; }
.transformation .lead { max-width: 900px; margin-inline: auto; }
.who-section .lead { text-wrap: balance; }
.problem-section__footer {
  margin: 2.5rem auto 0;
  text-align: center;
  color: var(--color-charcoal);
}
.problem-section__footer p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 0;
}
.problem-quote {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-charcoal);
  border: none;
  padding: 2rem 0;
  margin: 1.5rem 0;
  white-space: nowrap;
}
@media (max-width: 768px) { .problem-quote { white-space: normal; } }
.problem-close {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-terra);
  letter-spacing: 0.02em;
}
.pain-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.pain-point {
  padding: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  transition: border-color var(--transition);
}
.pain-point:hover { border-color: var(--color-terra-pale); }
.pain-point__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-terra-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-terra);
  margin: 0 auto 1.5rem;
}
.pain-point__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-charcoal);
  margin-bottom: 0.75rem;
  line-height: 1.25;
}
.pain-point__body {
  font-size: 0.9rem;
  color: var(--color-charcoal);
  line-height: 1.8;
  margin: 0;
}

/* ===== METHOD SECTION ===== */
.method-section { background: var(--color-bg); }
.method-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
  margin-top: 2.5rem;
}
.method-step {
  position: relative;
  text-align: left;
  padding: 2.5rem 1.5rem 2rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}
.method-step__icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-terra-pale);
  color: var(--color-terra);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
body.home .method-step h3 { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; text-align: center; margin-bottom: 0.75rem; }
.method-step p { font-size: 1.125rem; color: var(--color-muted); margin: 0; }

/* ===== SERVICES SECTION ===== */
.services-section { background: var(--color-bg-alt); }

.services-nav {
  display: grid;
  grid-template-columns: auto 1px auto 1px auto;
  column-gap: 2.25rem;
  justify-content: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding: 2rem 0;
}
.services-nav__group { display: flex; flex-direction: column; }
.services-nav__divider {
  width: 1px;
  background: var(--color-divider);
  align-self: stretch;
}
.services-nav__label {
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin-bottom: 1rem;
}
.services-nav ul { list-style: none; margin: 0; padding: 0; }
.services-nav li { margin-bottom: 0.45rem; }
.services-nav a {
  display: block;
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
  text-wrap: balance;
}
.services-nav a:hover { color: var(--color-terra); border-bottom-color: var(--color-terra); }

.services-rows { margin-top: 0; border-top: 1px solid var(--color-divider); }
.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 300px;
  align-items: center;
  position: relative;
}

.service-row__img {
  display: block;
  padding: 2rem 0 2rem 2rem;
  aspect-ratio: 3/2;
  max-height: 480px;
}
.service-row__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}

/* Blago povećanje slike na svim service-row redovima OSIM prvog ("Dom",
   .service-row--multi) — manji unutarnji padding oslobađa ~16px širine,
   tekst stupac ostaje nedirnut jer se split grid-a ne mijenja */
.service-row:not(.service-row--multi) .service-row__img {
  padding: 1rem 0 1rem 1rem;
}
.service-row--reversed:not(.service-row--multi) .service-row__img {
  padding: 1rem 1rem 1rem 0;
}

.service-row--reversed .service-row__img {
  padding: 2rem 2rem 2rem 0;
}

.service-row--multi {
  align-items: stretch;
}
.service-row--multi .service-row__img {
  aspect-ratio: auto;
  max-height: none;
}

.service-row__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem 4rem 2rem 3rem;
}
.service-row__content .section-label { font-size: 0.85rem; margin-bottom: 0.4rem; text-align: left; }
.service-row__counter {
  position: absolute;
  top: 2rem;
  right: 3.5rem;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 300;
  color: var(--color-terra-pale);
  line-height: 1;
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
}
.service-row--reversed .service-row__counter {
  right: calc(50% + 3.5rem);
}
body .service-row__content :is(h2, h3) { font-size: 1.65rem; margin: 0 0 2rem; text-align: left; font-weight: 700; }
.service-row__content :is(h2, h3) a {
  color: var(--color-charcoal);
  text-decoration: none;
  transition: color var(--transition);
}
.service-row__content :is(h2, h3) a:hover { color: var(--color-terra); }
.service-row__body {
  color: var(--color-charcoal);
  line-height: 1.75;
  margin: 0 0 1.5rem;
  text-wrap: pretty;
}
.service-row__link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-terra);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
  align-self: flex-start;
}
.service-row__link:hover { color: var(--color-terra-hover); border-bottom-color: var(--color-terra-hover); }

.service-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.service-sublist__item { display: flex; flex-direction: column; }
.service-sublist__item:not(:first-child) {
  margin-top: 1rem;
}
.service-sublist__item:not(:first-child)::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--color-terra);
  margin-bottom: 1rem;
}
.service-sublist__name {
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--color-charcoal);
  margin: 0;
}
.service-sublist__desc {
  font-size: 1.125rem;
  color: var(--color-charcoal);
  line-height: 1.75;
  margin: 0.25rem 0 0.75rem;
}
.service-sublist__link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-terra);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color var(--transition), border-color var(--transition);
}
.service-sublist__link:hover { color: var(--color-terra-hover); border-bottom-color: var(--color-terra-hover); }

.services-custom-cta {
  background: var(--color-bg-dark);
  border-radius: 12px;
  padding: 2.5rem;
  text-align: center;
  margin: 4rem 0 0;
}
.services-custom-cta h3 {
  color: var(--color-text-on-dark);
  margin: 0 0 0.5rem;
  font-weight: 700;
}
body .services-custom-cta :is(h2, h3) { font-weight: 700; }
.services-custom-cta p {
  font-size: 1.3rem;
  color: var(--color-text-on-dark);
  opacity: 0.85;
  margin: 0 0 1.25rem;
  font-size: 1rem;
}

/* ===== TRANSFORMATION ===== */
.transformation { background: var(--color-bg); }
.transform-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2.5rem;
}
.transform-state {
  border-radius: var(--radius-lg);
  padding: 2.5rem;
}
.transform-state--before {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}
.transform-state--after {
  background: var(--color-terra-pale);
  border: 1px solid rgba(196,121,90,.2);
}
.transform-state__label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  display: block;
  text-align: center;
}
.transform-state--after .transform-state__label { color: var(--color-terra); }
.transform-state__list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.transform-state__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.125rem;
  color: var(--color-muted);
  line-height: 1.5;
}
.transform-state--after .transform-state__list li { color: var(--color-charcoal); font-weight: 400; }
.transform-state__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-muted);
  flex-shrink: 0;
  margin-top: 0.5rem;
}
.transform-state--after .transform-state__list li::before { background: var(--color-terra); }
.transform-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-terra);
  color: var(--color-white);
  flex-shrink: 0;
}

/* ===== ABOUT TEASER ===== */
.about-teaser {
  position: relative;
  padding: 0;
}
.about-teaser__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
}
.about-teaser__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 3rem 5rem 3.5rem;
}
.about-teaser__content > .section-label,
.about-teaser__content > h2 { text-align: center; }
.about-teaser__image {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);

}
.about-teaser__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  display: block;
}
.about-teaser__body { font-size: 1.05rem; line-height: 1.85; }
.about-teaser__bullets-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}
.about-teaser__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.about-teaser__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-charcoal);
  line-height: 1.65;
}
.about-teaser__bullets li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terra);
  flex-shrink: 0;
  margin-top: 0.55rem;
}
.about-teaser__quote {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 300;
  color: var(--color-charcoal);
  margin: 1.5rem 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--color-terra);
}
.about-teaser__credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.75rem;
}
.about-teaser__cta { margin-top: 5rem; align-self: center; }
.about-teaser__wave {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  line-height: 0;
  pointer-events: none;
}
.about-teaser__wave svg { width: 100%; display: block; }
.about-teaser__wave path { fill: var(--color-terra); }
.cred-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-charcoal);
}
.cred-chip svg { color: var(--color-terra); }

/* ===== STATS BAR ===== */
.stats-bar {
  background: var(--color-bg-dark);
  padding-block: 2.5rem;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.stat-item__number {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--color-text-on-dark);
  line-height: 1;
  display: block;
  margin-bottom: 0.35rem;
}
.stat-item__label {
  font-size: 0.82rem;
  color: var(--color-text-on-dark);
  line-height: 1.4;
}

/* ===== TESTIMONIALS ===== */
.testimonials { background: var(--color-bg-alt); }
.testimonial {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  transition: box-shadow var(--transition);
}
.testimonial__quote {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-charcoal);
  margin-bottom: 1.5rem;
}
.testimonial__author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-terra-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-terra);
  flex-shrink: 0;
}
.testimonial__name { font-weight: 600; font-size: 1.125rem; color: var(--color-charcoal); }
.testimonial__location { font-size: 1.125rem; color: var(--color-muted); }
.testimonial__read-more {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-terra);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  margin-bottom: 1.25rem;
  transition: color var(--transition), border-color var(--transition);
}
.testimonial__read-more:hover { color: var(--color-terra-hover); border-bottom-color: var(--color-terra-hover); }

/* ===== BOOKING SECTION ===== */
.booking-section {
  background: var(--color-bg-dark);
  padding-block: 6rem;
}
.booking-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.booking-text h2 { color: var(--color-text-on-dark); margin-bottom: 1rem; }
.booking-text p { color: var(--color-text-on-dark); margin-bottom: 0; }
.booking-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2.5rem;
}
.booking-alt {
  font-size: 0.85rem;
  color: var(--color-text-on-dark);
  margin: 0;
}
.booking-alt a {
  color: var(--color-text-on-dark);
  transition: opacity var(--transition);
}
.booking-alt a:hover { opacity: 0.8; }
.booking-steps {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.booking-step { display: flex; align-items: flex-start; gap: 1.25rem; }
.booking-step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-text-on-dark);
  color: var(--color-text-on-dark);
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.booking-step__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-on-dark);
  margin-bottom: 0.2rem;
}
body.home .booking-step__title { font-weight: 600; }
.booking-step__body { font-size: 0.85rem; color: var(--color-text-on-dark); line-height: 1.6; }

/* ===== HOME FAQ ===== */
.home-faq { background: var(--color-bg); }
.home-faq-grid {
  display: flex;
  flex-direction: column;
  max-width: 740px;
  margin: 3rem auto 0;
}
.hfaq-item {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-divider);
}
.hfaq-item:first-child { border-top: 1px solid var(--color-divider); }
.hfaq-item h3 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}
body.home .hfaq-item h3 { font-weight: 700; }
.hfaq-item p { font-size: 0.9rem; color: var(--color-charcoal); line-height: 1.85; margin: 0; }

/* ===== CTA STEPS ===== */
.cta-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 960px;
  margin: 1.5rem auto 0;
}
.cta-steps .booking-step {
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-steps .booking-step__title { font-size: 1.1rem; }

/* ===== MINI CTA ===== */
.mini-cta {
  background: var(--color-bg-alt);
  padding-block: 3rem;
  text-align: center;
}
.mini-cta h2 { color: var(--color-charcoal); margin-bottom: 0.5rem; }
.mini-cta p { color: var(--color-charcoal); max-width: 500px; margin: 0.75rem auto 2.5rem; font-size: 1.05rem; }
.cta-body { max-width: 820px; margin: 3.5rem auto 2.5rem; }
.cta-body p { color: var(--color-charcoal); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1rem; max-width: none; }
.cta-body p:last-child { margin-bottom: 0; }
.mini-cta .cta-availability { color: var(--color-charcoal); font-size: 0.85rem; margin-top: 1.75rem; text-align: center; max-width: none; width: 100%; }
.cta-steps .booking-step__num { border-color: var(--color-terra); color: var(--color-terra); }
.cta-steps .booking-step__title { color: var(--color-charcoal); }
.cta-steps .booking-step__body { color: var(--color-muted); }


/* ===== CTA SECTION ===== */
.cta-section {
  background: var(--color-bg-dark);
  text-align: center;
  padding-block: 6rem;
}
.cta-section h2 { color: var(--color-text-on-dark); margin-bottom: 1rem; }
.cta-section p {
  color: var(--color-text-on-dark);
  max-width: 520px;
  margin: 0 auto 2.5rem;
  font-size: 1.05rem;
}
.cta-section--inset { margin-top: 4rem; border-radius: var(--radius-xl); }

/* ===== PAGE HERO ===== */
.page-hero {
  padding-block: 3.5rem;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.page-hero .container { text-align: center; }
.page-hero .breadcrumb {
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.page-hero .breadcrumb a { color: var(--color-terra); transition: opacity var(--transition); }
.page-hero .breadcrumb a:hover { opacity: 0.75; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero .lead { max-width: 960px; margin-inline: auto; }

/* ===== SERVICES PAGE ===== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition), transform var(--transition);
  text-decoration: none;
  color: inherit;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.service-card:focus-visible { outline: 2px solid var(--color-terra); outline-offset: 3px; }
.service-card__icon { width: 44px; height: 44px; color: var(--color-terra); margin-bottom: 1.25rem; flex-shrink: 0; }
.service-card__title { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 400; margin-bottom: 0.75rem; color: var(--color-charcoal); }
.service-card__body { font-size: 0.9rem; color: var(--color-muted); line-height: 1.7; flex: 1; margin-bottom: 1.25rem; }
.service-card__cta { font-size: 0.85rem; font-weight: 500; color: var(--color-terra); display: inline-flex; align-items: center; gap: 0.3rem; transition: gap var(--transition); }
.service-card:hover .service-card__cta { gap: 0.55rem; }

/* ===== SERVICE DETAIL ===== */
.service-detail { padding-block: 5rem; }
.service-detail__content { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: start; }
.service-detail__body h2 { font-size: 2rem; margin: 2.5rem 0 1rem; }
.service-detail__body h2:first-child { margin-top: 0; }
.service-detail__body ul { list-style: none; margin: 1rem 0 1.5rem; }
.service-detail__body ul li {
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-muted);
  font-size: 0.95rem;
  border-bottom: 1px solid var(--color-border);
}
.service-detail__body ul li:last-child { border-bottom: none; }
.service-detail__body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terra);
}
.service-sidebar { position: sticky; top: 6rem; }
.sidebar-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.sidebar-card__title { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 1rem; }
.sidebar-card__desc  { font-size: .9rem; color: var(--color-muted); margin-bottom: 1.5rem; }
.sidebar-card__note  { font-size: .85rem; color: var(--color-terra); font-weight: 500; margin: 0; }
.sidebar-card--highlight { background: var(--color-terra-pale); border-color: rgba(196,121,90,.2); }

/* ===== MEET PETRA ===== */
.meet-petra__intro { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: start; }
.meet-petra__portrait {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(145deg, var(--color-bg-alt) 0%, var(--color-terra-pale) 100%);
  aspect-ratio: 3/4;
}
.meet-petra__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.credential-list { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; }
.credential {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.credential__icon {
  width: 36px;
  height: 36px;
  background: var(--color-terra-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-terra);
  flex-shrink: 0;
}
.credential__text { font-size: 0.9rem; color: var(--color-muted); }
.credential__text strong { display: block; font-weight: 600; color: var(--color-charcoal); margin-bottom: 0.2rem; }

/* ===== CONTACT ===== */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-info { padding-top: 0.5rem; }
.contact-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
.contact-item__icon {
  width: 40px;
  height: 40px;
  background: var(--color-terra-pale);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-terra);
  flex-shrink: 0;
}
.contact-item__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-terra);
  margin-bottom: 0.25rem;
}
.contact-item__value { font-size: 1rem; color: var(--color-charcoal); }
.contact-item__value a { color: var(--color-charcoal); transition: color var(--transition); }
.contact-item__value a:hover { color: var(--color-terra); }

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.875rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-charcoal);
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-terra);
  box-shadow: 0 0 0 3px rgba(196,121,90,.12);
}
.form-group textarea { resize: vertical; min-height: 130px; }
.contact-info > .lead { margin-bottom: 2.5rem; }
/* Bez uvodnog odlomka crta bi sjela preblizu prvoj stavci. */
.contact-info .divider { margin-bottom: 2.25rem; }
.form-note { font-size: .8rem; color: var(--color-muted); margin-top: 1rem; text-align: center; }

/* --- Kontakt: portret, drustvene mreze, koraci ------------------------- */
/* Portret stoji na vrhu lijevog stupca. Uspravni format 900x1349 bi na
   punoj sirini stupca bio previsok, pa je ogranicen na 280px. */
.contact-portrait { margin: 0 0 2rem; max-width: 280px; }
.contact-portrait img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
}
/* Ikone mreza u nasim bojama, iste kruznice kao ikone uz e-postu i telefon. */
/* Ikone stoje ispod oba stupca, centrirane po sirini stranice — na istoj
   osi kao naslov sekcije koja dolazi ispod. */
.contact-social { display: flex; justify-content: center; gap: 0.75rem; margin-top: 4rem; }
.contact-social .social-link--light {
  width: 40px; height: 40px;
  background: var(--color-terra-pale);
  border: 0;
  color: var(--color-terra);
}
.contact-social .social-link--light:hover {
  background: var(--color-terra);
  color: var(--color-text-on-dark);
}
.contact-social .social-link--light svg { width: 18px; height: 18px; }
/* Zamka za robote — polje mora postojati u kodu, ali se ne vidi. */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Poruka nakon slanja — ostaje na stranici, obrazac se ne napusta. */
.form-ok, .form-err {
  margin-top: 1rem; padding: 0.9rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem; line-height: 1.7; text-align: center;
}
.form-ok { background: var(--color-terra-pale); color: var(--color-charcoal); }
.form-err { background: var(--color-bg-alt); color: var(--color-charcoal); border: 1px solid var(--color-terra); }
.form-err a { color: var(--color-terra); text-decoration: underline; }


/* Rasputnica Upoznajte Petru — cetiri kartice u redu. */
.pain-points.pain-points--four { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.pain-point__link { display: block; color: inherit; }
.pain-point__link .pain-point__title { transition: color var(--transition); }
.pain-point__link:hover .pain-point__title { color: var(--color-terra); }
@media (max-width: 1024px) { .pain-points.pain-points--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pain-points.pain-points--four { grid-template-columns: 1fr; } }

/* --- Stranica O meni ------------------------------------------------- */
/* Blokovi teksta u citljivoj mjeri, poravnati uz lijevi rub stupca;
   crte htw-rule ostaju punom sirinom i drze ritam stranice. */
body.about-page .htw-full { max-width: 800px; }
/* Prva recenica otvara stranicu — serif u terakoti, kao naslov koji to nije. */
body.about-page .htw-col > p.about-open {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-terra);
  margin-bottom: 1.1rem;
}
@media (max-width: 768px) { body.about-page .htw-col > p.about-open { font-size: 1.35rem; } }

/* Potpis na kraju stranice O meni — isti font i velicina kao tekst,
   razlikuje ga samo boja. Specificnost mora pobijediti pravilo za
   body.longform .htw-full > p, inace ga ono vrati na svoju velicinu. */
body.longform .htw-full > p.signature {
  font-family: var(--font-hand);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-terra);
  margin-top: 2rem;
}

/* --- Pismo dobrodoslice ---------------------------------------------- */
/* Pismo se cita kao pismo: jedan uzi stupac, centriran na stranici,
   jer nema druge kolone koja bi ga uravnotezila. */
body.letter-page .letter-figure {
  max-width: 420px; margin: 0 auto 3rem;
}
body.letter-page .letter-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
}
body.letter-page .htw-full.letter-body {
  max-width: 720px; margin-inline: auto; margin-top: 0;
}
/* Tijelo pisma u serifu, ne u sansu kao ostatak weba — pismo se tako
   cita kao pismo. Uspravno, ne kurziv: kurziv na 450 rijeci umara. */
/* Tijelo pisma ostaje u fontu kao i ostatak weba — serif se na 450 rijeci
   citao preteško. Pismo se od ostalih stranica razlikuje uzim stupcem,
   slikom i oslovljavanjem, ne fontom. */
body.letter-page .htw-full.letter-body > p em { font-style: italic; }
/* Potpis mora nadjacati pravilo za tijelo pisma, inace ga ono vrati u serif. */
body.letter-page .htw-full.letter-body > p.signature {
  font-family: var(--font-hand);
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 2rem;
}

/* Oslovljavanje — serif u terakoti, kao rukom napisan pocetak. */
body.letter-page .htw-full.letter-body > p.letter-open {
  font-family: var(--font-serif);
  font-size: 1.6rem; font-weight: 500; line-height: 1.35;
  color: var(--color-terra);
  margin-bottom: 1.1rem;
}
@media (max-width: 768px) {
  body.letter-page .letter-figure { max-width: 320px; margin-bottom: 2rem; }
  body.letter-page .htw-full.letter-body > p.letter-open { font-size: 1.35rem; }
}

/* Recenzija ispod obrasca — stoji na mjestu odluke, pa je namjerno tiha:
   bez okvira, da se ne natjece s obrascem iznad sebe. */
.contact-quote { margin: 2.75rem 0 0; padding-top: 2rem; border-top: 1px solid var(--color-border); }
.contact-quote blockquote { margin: 0; }
/* Kurziv, ali u tezini 500 — na 400 je Cormorant pretanak za devedeset
   rijeci. Kurziv u toj tezini je zato dodan u ucitavanje fonta u base.njk. */
.contact-quote p {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 1.1rem; line-height: 1.75;
  color: var(--color-charcoal); margin: 0 0 0.75rem; max-width: none;
}
.contact-quote blockquote p:last-child { margin-bottom: 0.9rem; }
.contact-quote figcaption {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-terra);
}

/* Tri koraka na kontaktu koriste iste kartice kao prva sekcija naslovnice.
   .mini-cta centrira sav tekst, a kartice na naslovnici su lijevo poravnate,
   pa se poravnanje vraca samo unutar njih. */
.mini-cta .pain-points { text-align: left; }
.pain-point__eyebrow {
  display: block; font-family: var(--font-serif); font-size: 0.95rem;
  color: var(--color-terra); margin-bottom: 0.3rem;
}
@media (max-width: 768px) { .contact-portrait { max-width: 320px; margin-inline: auto; } }

/* ===== FAQ FULL PAGE ===== */
/* Slika na vrhu tekstualnog stupca. Puna sirina stupca, bez rezanja —
   format 2048x1367 daje na 548px visinu 366px. height:auto je uvjet
   da se ne rezervira visina iz atributa. */
.faq-figure { max-width: 480px; margin: 0 auto 2.25rem; }
.faq-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-lg);
}
@media (max-width: 768px) { .faq-figure { max-width: none; margin-bottom: 2rem; } }

.faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 1.75rem 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-charcoal);
  gap: 1rem;
  transition: color var(--transition);
}
.faq-item__question:hover { color: var(--color-terra); }
.faq-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-terra);
  transition: transform var(--transition);
}
.faq-item.is-open .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { display: none; padding-bottom: 1.75rem; }
.faq-item.is-open .faq-item__answer { display: block; }
.faq-item__answer p { color: var(--color-charcoal); line-height: 1.85; }
.faq-item__answer p:last-child { margin-bottom: 0; }
/* Naslov pitanja je serif 1.65rem, sto na uskom ekranu lomi duga pitanja
   u cetiri reda uz plus s desne strane, pa se spusta na 1.35rem. */
@media (max-width: 768px) {
  .faq-item__question { font-size: 1.35rem; }
}

/* ===== WORKSHOPS ===== */
.workshop-series { display: flex; flex-direction: column; gap: 1rem; }
.workshop-item {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  padding: 1.75rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition);
}
.workshop-item:hover { box-shadow: var(--shadow-sm); }
.workshop-item__number {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--color-terra-pale);
  line-height: 1;
  min-width: 3rem;
}
.workshop-item__date {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--color-terra);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.workshop-item__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; margin-bottom: 0.5rem; }
.workshop-item__desc { font-size: 0.9rem; color: var(--color-muted); }

.pricing-card {
  background: var(--color-bg-dark);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
}
.pricing-card .price { font-family: var(--font-serif); font-size: 3.5rem; font-weight: 300; line-height: 1; margin: 1rem 0 0.25rem; }
.pricing-card .price-label { font-size: 0.8rem; color: var(--color-text-on-dark); margin-bottom: 0.75rem; }
.pricing-card .price-note { font-size: 0.85rem; color: var(--color-text-on-dark); margin-top: 0.5rem; }
.pricing-card .section-label { color: var(--color-text-on-dark); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 4rem;
}

/* ===== MISC ===== */
.tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--color-terra-pale);
  color: var(--color-terra);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}
.collaborations { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

.stat-row { display: flex; gap: 3rem; flex-wrap: wrap; margin: 2rem 0; }
.stat { text-align: center; }
.stat__number { font-family: var(--font-serif); font-size: 2.8rem; font-weight: 300; color: var(--color-terra); line-height: 1; display: block; }
.stat__label { font-size: 0.8rem; color: var(--color-muted); margin-top: 0.25rem; }

.footer-col__heading {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-text-on-dark);
  margin-bottom: 1.25rem;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--color-terra);
  color: var(--color-text-on-dark);
  padding-block: 4rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr 1.2fr;
  gap: 3rem;
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(237,217,200,0.35);
}
.footer-brand .logo {
  color: var(--color-text-on-dark);
  font-size: 1.6rem;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  transition: opacity var(--transition);
}
.footer-brand .logo:hover { opacity: 0.8; }
.footer-logo-img {
  width: 70px;
  height: auto;
  align-self: center;
  filter: brightness(0) invert(1) sepia(0.5) brightness(0.95);
}
.footer-brand p { color: var(--color-text-on-dark); font-size: 0.9rem; max-width: 260px; }
.konmari-badge { display: block; width: 500px; max-width: 120%; height: auto; margin-top: 1.5rem; }
.footer-col ul li { margin-bottom: 0.6rem; font-size: 0.9rem; }
.footer-col a { font-size: 0.9rem; color: var(--color-text-on-dark); transition: color var(--transition); }
.footer-col a:hover { color: var(--color-white); }
.footer-col--services a { white-space: nowrap; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.social-link {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(237,217,200,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-dark);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.social-link:hover { border-color: var(--color-text-on-dark); background: rgba(237,217,200,0.15); color: var(--color-text-on-dark); }
.social-link svg { width: 16px; height: 16px; }
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-on-dark);
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
}
.footer-bottom p { color: var(--color-text-on-dark); }
.footer-bottom a { color: var(--color-text-on-dark); }
.footer-bottom a:hover { color: var(--color-white); }
.footer-col a[href^="tel:"]:hover { color: var(--color-text-on-dark); cursor: default; }
.footer-lang { display: flex; align-items: center; gap: 0.5rem; }
.footer-lang a { color: var(--color-text-on-dark); font-size: 0.8rem; transition: color var(--transition); }
.footer-lang a:hover { color: var(--color-terra-pale); }

/* ===== SCROLL TO TOP ===== */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  background: var(--color-terra);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 999;
}
.scroll-top.visible { opacity: 1; pointer-events: all; }
.scroll-top:hover { transform: translateY(-2px); }

/* ===== LANG BADGE ===== */
.lang-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: var(--color-terra-pale);
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-terra);
  margin-bottom: 1rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .konmari-badge { max-width: 100%; }
  .about-teaser__content { padding: 2.5rem 2.5rem 4.5rem; }
  .meet-petra__intro { gap: 2.5rem; }
  .booking-inner { gap: 3rem; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .pain-points { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --gap: 1.25rem; }
  .section { padding-block: 3.5rem; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.9rem; }

  .nav-left, .nav-right { display: none; }
  .menu-toggle { display: flex; }

  /* CTA u mobilnom izborniku: punom sirinom, ispod HR/EN. Prije je stajao
     u istom retku kao prebacivac jezika, s desnim rubom tocno na rubu
     spremnika (izmjereno r=340 od 360, r=370 od 390) i bez ijednog piksela
     zraka. Uz white-space: nowrap i flex-shrink: 0 svaki duzi tekst ili
     drugi font gurnuo bi ga izvan ekrana. */
  .mobile-nav__footer { flex-direction: column; align-items: stretch; gap: 1rem; }
  .mobile-nav__footer .lang-switcher { justify-content: flex-start; }
  .mobile-nav__footer .nav-cta { display: block; width: 100%; text-align: center; }

  .hero__text { bottom: 40px; }

  /* ── HERO NA MOBITELU ─────────────────────────────────────────────────
     Bocni razmak je bio 60px sa svake strane, pa je na 390px tekstu
     ostajalo samo 270px: "ROOT OF JOY" (310.42px nepresavijeno) lomio se
     u dva retka. Uz var(--gap) ostaje 350px i stane u jedan redak bez
     diranja velicine fonta. */
  .hero__text { padding-inline: var(--gap); }

  /* Headline: HR "Oslobodite prostor. Oslobodite sebe." je 456.64px
     nepresavijeno. Da stane u jedan redak i na 360px (320px prostora),
     font mora na 22px. Izmjereno: 24px jos lomi HR na 360px. */
  .hero__headline { font-size: 22px; }

  /* Byline i headline podignuti za dva koraka u sustavu razmaka: 10px i 16px
     nisu bile vrijednosti iz sustava, 0.5rem (xs) jest. Ukupno podizanje je
     10px. Razlog: izmjereno je da headline zavrsava na y=246, a krosnje
     pocinju na y=253 — samo 7px zraka. Nakon podizanja razmak je 17px.
     "ROOT OF JOY" se ne pomice; .hero__text { top: 90px } ostaje. */
  .hero__byline { margin-top: 0.5rem; }
  .hero__headline { margin-top: 0.5rem; }

  /* H1 centriran, a "KonMari® metoda" u vlastitom retku. Omotac je u
     home.njk i na desktopu ostaje inline, pa ondje naslov ostaje jedan redak. */
  .hero__h1 { text-align: center; }
  .hero__h1-brand { display: block; }

  /* Kontrast H1: bijeli naslov nad svijetlim poljem imao je 1.94:1, ispod
     praga AA od 3:1. Jaci i visi gradijent podize ga na 3.33:1. Vrijedi
     SAMO na mobitelu — iznad 768px gradijent ostaje 0.45 / 60vh, kakav je
     i bio, jer ondje H1 stoji nad tamnijim dijelom fotografije. */
  .hero__gradient {
    height: 80vh;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.65));
  }

  /* H1 blok je bio sirok tocno pola prozora (195px na 390px), jer je
     apsolutno pozicioniran s left: 50% pa mu je raspoloziva sirina samo
     desna polovica. Rezultat je bilo pet do sest redaka. Razvlacenjem na
     punu sirinu H1 staje u tri retka, u oba jezika. bottom: 40px oslobada
     prostor za CTA gumb ispod naslova. */
  .hero__bottom {
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    padding-inline: var(--gap);
    bottom: 40px;
  }
  .hero__cta { display: inline-block; }

  /* Ken Burns: fotografija je vodoravna, a na mobitelu se vidi uska okomita
     traka. Petra je desno od sredine (u izvornoj slici tijelo x 1050–1382),
     pa je pri zadanih 50% izlazila iz kadra kako zoom raste. 60% pomice
     kadar prema njoj, a transform-origin na istom mjestu usmjerava zoom
     prema njoj umjesto prema sredini polja.
     Napomena: njezin puni raspon sa ispruzenom nogom je 666px izvorne
     slike, a pri zoomu 1.25 vidljivo je 533px — stopalo se pri punom zoomu
     nuzno odreze. Tijelo i glava ostaju u kadru cijelo vrijeme. */
  .hero__img { object-position: 60% center; transform-origin: 60% center; }

  .method-steps { grid-template-columns: 1fr; }
  .services-nav { grid-template-columns: 1fr; column-gap: 0; gap: 1.5rem; padding: 1.5rem; justify-content: unset; }
  .services-nav__divider { display: none; }
  .service-row { grid-template-columns: 1fr; min-height: unset; }
  .service-row__img { aspect-ratio: 16/9; padding: 0; }
  /* Redak iznad trazi padding: 0, ali ima specificnost (0,1,0) i gubi od
     .service-row:not(.service-row--multi) .service-row__img (0,3,0) iz
     retka 1067. Zbog toga je padding ostajao i na mobitelu, pa se slika
     rezala na omjer 2.03 umjesto trazenih 16/9. Isti selektor, ista
     specificnost, ali kasnije u datoteci — zato pobjeduje. Pokriva i
     obrnute redove (pravilo 1070 ima istu specificnost i takoder gubi). */
  .service-row:not(.service-row--multi) .service-row__img { padding: 0; }
  .service-row--reversed .service-row__img { order: -1; }
  .service-row__content { padding: 1.5rem var(--gap) 2rem; }
  .service-row__counter { position: static; font-size: 2.5rem; line-height: 0.9; margin-bottom: 0.25rem; }
  .transform-inner { grid-template-columns: 1fr; }
  .transform-arrow { display: none; }
  .contact-layout,
  .meet-petra__intro,
  .service-detail__content { grid-template-columns: 1fr; }
  .about-teaser__wrap { grid-template-columns: 1fr; min-height: unset; }
  /* Na mobitelu se portret prikazuje u PRIRODNOM omjeru (1367x2048), bez
     rezanja, unutar margina i sa zaobljenim kutovima — isti okvir kao slika
     ormara u .service-row--multi (style.css:1094), izmjereno 350x524.36 na
     390px u oba slucaja. Rub slike time pada na isti piksel kao rub teksta
     u .about-teaser__content, koji vec ima bocni razmak var(--gap).
     aspect-ratio: auto ukida vodoravni okvir 16/9; position: static i
     height: auto vade sliku iz apsolutnog pozicioniranja (redci 1304-1307)
     da okvir visinu preuzme od same slike.
     Ranije je ovdje stajao object-position: center 20%, koji je podizao
     kadar na lice — uklonjen jer bez rezanja nema sto pomicati.
     Full-bleed vrijedi i dalje na desktopu, gdje se ovo pravilo ne primjenjuje. */
  .about-teaser__image { aspect-ratio: auto; order: -1; margin-inline: var(--gap); }
  .about-teaser__image img { position: static; height: auto; border-radius: 12px; }
  .about-teaser__content { max-width: none; margin-left: 0; padding: 2.5rem var(--gap) 3.5rem; }
  .about-teaser__wave { display: none; }
  .booking-inner { grid-template-columns: 1fr; gap: 3rem; }
  .cta-steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .service-sidebar { position: static; }
  .cta-section, .booking-section { padding-block: 4rem; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .trust-bar__inner { gap: 1rem; }
}

@media (max-width: 480px) {
  .container { padding-inline: 1.25rem; }
  .hero__title { font-size: 2rem; }
  .cta-steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .btn-group { flex-direction: column; }
  .btn-group .btn { text-align: center; justify-content: center; }
  .stat-row { gap: 1.5rem; justify-content: center; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .booking-cta { align-items: stretch; }
  .booking-cta .btn { text-align: center; justify-content: center; }
  .trust-sep { display: none; }
  .hero__social-proof { gap: 1rem; }
}

/* ===== HOW TO WORK WITH ME — stranica /how-to-work-with-me/ ===== */
/* Nove klase, ne diraju nijednu postojecu komponentu ni naslovnicu. */

/* Natuknice u tekstualnom stupcu — isti bullet kao .who-list,
   ali u standardnoj velicini body teksta (1.125rem, CLAUDE.md pravilo 2). */
.prose-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.prose-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 1.125rem;
  color: var(--color-charcoal);
  line-height: 1.75;
}
.prose-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-terra);
  flex-shrink: 0;
  margin-top: 0.65rem;
}
.prose-list a {
  color: var(--color-terra);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--transition);
}
.prose-list a:hover { border-bottom-color: var(--color-terra-hover); }

/* Popis trajanja po prostoru — naziv lijevo, vrijeme desno */
.duration-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.duration-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-divider);
}
.duration-list__item:first-child { border-top: 1px solid var(--color-divider); }
.duration-list__space {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-charcoal);
}
.duration-list__time {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-charcoal);
}
@media (max-width: 480px) {
  .duration-list__item { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}

/* Link na tamnoj pricing kartici */
.pricing-card__link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-on-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color var(--transition);
}
.pricing-card__link:hover { border-bottom-color: var(--color-text-on-dark); }

/* --- Stranica "Kako raditi sa mnom" — body.longform ---------------------- */
/* Sve je ograniceno na body.longform, ne moze utjecati ni na jednu drugu stranicu. */

/* Podnaslovi u tekstualnom stupcu — iste mjere kao pitanja u FAQ-u
   na naslovnici (.hfaq-item h3): serif 1.65rem / 700 / charcoal,
   0.6rem do teksta ispod. Samo izravna djeca .container--content,
   pa .hfaq-item h3 ostaje netaknut. */
body.longform .container--content > h3 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.3;
  margin-top: 3rem;
  margin-bottom: 0.6rem;
}
body.longform .container--content > .section-header + h3 { margin-top: 0; }

/* Odgovori u FAQ-u — na naslovnici ih na 1.125rem dize body.home
   pravilo, koje ova stranica ne nasljeduje. */
body.longform .hfaq-item p { font-size: 1.125rem; }

/* Skok na sidro: fiksni header je visok 68px, pa bi bez ovoga
   naslov zavrsio ispod njega. */
body.longform h2[id],
body.longform h3[id] { scroll-margin-top: 88px; }

/* Napomena da konzultacija nije obavezan korak */
body.longform .htw-note {
  font-size: 1.125rem;
  color: var(--color-charcoal);
  line-height: 1.75;
  border-left: 2px solid var(--color-terra);
  padding-left: 1.25rem;
  margin-top: 2rem;
}

/* Zavrsni CTA preslikan s naslovnice (.mini-cta) — razmak do dugmadi */
body.longform .mini-cta .cta-body { margin: 2rem auto 2.5rem; }
body.longform .mini-cta .cta-body p { font-size: 1.3rem; text-wrap: balance; }

/* Prozni tekst — 1.125rem, ista mjera kao opisi usluga na stranici
   /services/ (.service-sublist__desc). Vraceno s 1.3rem na Petrin zahtjev. */
body.longform .container--content > p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin-bottom: 1.25rem;
}

/* Vise zraka izmedu podnaslova i teksta ispod njega */
/* Podnaslovi: crta ispod naslova, s razmakom s obje strane, da oko
   ima za sto zapeti pri skeniranju stranice. */
body.longform .container--content > h3 {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 1.6rem;
}

/* Blok s natuknicama — puna sirina stupca, bez lijevog naslova.
   Uvodna recenica sama sluzi kao naslov bloka, pa nema dva naslova
   koja govore isto. Tanke crte gore i dolje razbijaju dugi tekst,
   isti ucinak kao who-row na naslovnici. */
body.longform .htw-block {
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 2rem;
  margin: 0 0 3rem;
}
body.longform .htw-block__lead {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.35;
  margin: 0 0 1.5rem;
}
body.longform .htw-block .prose-list { margin-bottom: 0; }

/* Razmak od zadnje recenice do sljedece boje mora biti jednak razmaku
   od gornjeg ruba do prve recenice. Bez ovoga zadnji odlomak/popis
   dodaje svoju marginu na padding sekcije, pa je dno uvijek nize. */
body.longform .section > .container > *:last-child,
body.longform .section > .container--content > *:last-child { margin-bottom: 0; }

/* Zavrsni CTA — isti ritam kao ostale sekcije (4rem), umjesto 3rem
   koliko .mini-cta ima na naslovnici gdje ispod gumba ide jos sadrzaja. */
body.longform .mini-cta { padding-block: 4rem; }
body.longform .mini-cta .btn-group { margin-bottom: 0; }

/* Slike na stranici "Kako raditi sa mnom".
   Tri fotografije su uspravne 1200x1798 — na punoj sirini stupca (760px)
   bile bi 1139px visoke, visina ekrana i pol. Zato su ogranicene na 520px
   i centrirane. Siroki kadar ide preko cijele sirine stupca. */
body.longform .htw-figure {
  margin: 0 0 2.5rem;
}
body.longform .htw-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
body.longform .htw-figure--portrait {
  max-width: 520px;
  margin-inline: auto;
}
body.longform .htw-figure--wide {
  max-width: 100%;
}

/* ===== STRANICA USLUGA — naslovi grupa =============================== */
/* .services-rows koristi i naslovnica, ali ondje unutar njega NEMA h2 kao
   izravnog djeteta (ide ravno na .service-row). Zato je sve ograniceno na
   body:not(.home) — naslovnica ostaje netaknuta. */

/* Crta iznad prvog naslova grupe — makuta samo na stranici usluga */
body:not(.home) .services-rows { border-top: none; }

/* Naslovi grupa: centrirani, sa zrakom iznad i ispod */
body:not(.home) .services-rows > h2 {
  text-align: center;
  max-width: 760px;
  margin: 5.5rem auto 3.5rem;
}
body:not(.home) .services-rows > h2:first-child { margin-top: 2rem; }

/* Kratka terra crtica ispod naslova — isti element koji naslovnica
   koristi kao .divider--center, samo bez dodatnog diva u predlosku. */
body:not(.home) .services-rows > h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-terra);
  margin: 1.5rem auto 0;
}
@media (max-width: 768px) {
  body:not(.home) .services-rows > h2 { margin: 3.5rem auto 2.5rem; }
}

/* ===== POKUSNO — brojevi usluga (01–11) ============================== */
/* Za uklanjanje: obrisi cijeli blok do oznake KRAJ POKUSA. Nista drugo
   ne ovisi o njemu, predlozak nije diran. Brojeve racuna CSS, pa se sami
   preracunaju ako se redoslijed usluga promijeni.
   Mjere su preuzete iz postojece .service-row__counter klase. */
body:not(.home) .services-rows { counter-reset: usluga; }
body:not(.home) .service-row { counter-increment: usluga; }
body:not(.home) .service-row::before {
  content: counter(usluga, decimal-leading-zero) / "";
  position: absolute;
  top: 2rem;
  right: 3.5rem;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 300;
  color: var(--color-terra-pale);
  line-height: 1;
  letter-spacing: -0.03em;
  pointer-events: none;
  user-select: none;
}
/* Zrcaljeni redovi imaju tekst lijevo, pa broj ide uz lijevu polovicu */
body:not(.home) .service-row--reversed::before { right: calc(50% + 3.5rem); }
/* Na uskim ekranima grid se slaze u jedan stupac i broj bi zavrsio preko
   slike — ondje ga ne prikazujemo. */
@media (max-width: 768px) {
  body:not(.home) .service-row::before { display: none; }
}

/* --- Ispravak za redove 05 i 06 ------------------------------------- */
/* KLJUC: .service-row ima align-items: center, pa je tekstualni stupac
   okomito centriran. Zbog toga se svaki dodani razmak "pojede" — kutija
   naraste na obje strane umjesto da se tekst spusti. Zato ta dva reda
   prvo prestaju biti centrirana (align-self: stretch), pa tek onda
   padding-top stvarno spusta tekst ispod broja.
   Broj je visok 4.5rem i pocinje na 2rem od vrha reda, dakle zavrsava na
   6.5rem — 7.5rem daje jos malo zraka. */
/* PAZNJA: id "3d-storage-visualization" pocinje brojkom, pa selektor
   #3d-... nije valjan CSS. Kad je jedan selektor u nizu nevaljan, browser
   odbacuje CIJELO pravilo — zato dosad nije radilo ni za 05. Rjesenje je
   [id="..."], koji brojku podnosi. Pravila su i razdvojena, da jedno ne
   moze srusiti drugo. */
body:not(.home) .service-row[id="workplace-home-office-organization"] .service-row__content {
  align-self: stretch;
  padding-top: 7.5rem;
}
body:not(.home) .service-row[id="3d-storage-visualization"] .service-row__content {
  align-self: stretch;
  padding-top: 7.5rem;
}
/* Na mobitelu je broj skriven, pa se sve vraca na normalu. */
@media (max-width: 768px) {
  body:not(.home) .service-row[id="workplace-home-office-organization"] .service-row__content,
  body:not(.home) .service-row[id="3d-storage-visualization"] .service-row__content {
    align-self: auto;
    padding-top: 1.5rem;
  }
}

/* ===== KRAJ POKUSA ================================================== */

/* --- Zig-zag redovi paketa na stranici "Kako raditi sa mnom" --------- */
/* Vlastita komponenta, namjerno NE .service-row: taj element na stranici
   usluga nosi CSS brojac, pa bi ovdje dobio pogresan broj. */
body.longform .htw-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
body.longform .htw-row--rev .htw-row__img { order: 2; }
body.longform .htw-row__img { margin: 0; }
body.longform .htw-row__img img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
body.longform .htw-row__body { position: relative; }
body.longform .htw-row__num {
  display: block;
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-terra-pale);
  margin-bottom: 0.5rem;
}
body.longform .htw-row__body h2 { margin-top: 0; }
body.longform .htw-row__body .lead { margin-bottom: 0; }

/* Dva stupca za popis trajanja i za pitanja, kad ima mjesta */
body.longform .duration-list--two,
body.longform .home-faq-grid--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.5rem;
}
body.longform .home-faq-grid--two { max-width: none; margin-top: 2rem; }
/* U dva stupca gornji rub svakog stupca treba svoju crtu */
/* (uklonjeno) Gornja crta drugog stupca — sad ju nosi sam popis, jer se
   stavke vise ne slazu lijevo-desno nego odozgo prema dolje. */
body.longform .home-faq-grid--two .hfaq-item:nth-child(2) { border-top: 1px solid var(--color-divider); }

/* Tablet */
@media (max-width: 1024px) {
  body.longform .htw-row { gap: 2rem; }
  body.longform .htw-row__num { font-size: 3.25rem; }
  body.longform .duration-list--two,
  body.longform .home-faq-grid--two { column-gap: 2.5rem; }
}
/* Mobitel — sve u jedan stupac, slika uvijek iznad teksta */
@media (max-width: 768px) {
  body.longform .htw-row { grid-template-columns: 1fr; gap: 1.5rem; }
  body.longform .htw-row--rev .htw-row__img { order: 0; }
  body.longform .htw-row__img img { max-height: 320px; }
  body.longform .htw-row__num { font-size: 2.5rem; }
  body.longform .duration-list--two,
  body.longform .home-faq-grid--two { grid-template-columns: 1fr; }
  body.longform .duration-list--two .duration-list__item:nth-child(2),
  body.longform .home-faq-grid--two .hfaq-item:nth-child(2) { border-top: 0; }
}
/* Red bez slike — jedan stupac, da broj i naslov ne vise u pola sirine */
body.longform .htw-row--noimg { grid-template-columns: 1fr; }
body.longform .htw-row--noimg .htw-row__body { max-width: 760px; }

/* --- Puna sirina u dva stupca, umjesto uske kolone ------------------- */
/* Svaka podcjelina (podnaslov + njegovi odlomci) je jedan .htw-col i
   NIKAD se ne lomi preko dva stupca — zato je grid, a ne column-count.
   Tako se cita normalno, odozgo prema dolje unutar svoje cjeline. */
body.longform .htw-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.75rem 3.5rem;
  align-items: start;
}
body.longform .htw-col > *:last-child { margin-bottom: 0; }
body.longform .htw-col > p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin-bottom: 1.25rem;
}
body.longform .htw-col > h3 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.3;
  margin: 0 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-divider);
}
body.longform .htw-col .htw-block { margin: 0 0 1.5rem; }

/* Slika kao jedan od stupaca */
body.longform .htw-colimg { margin: 0; }
body.longform .htw-colimg img {
  display: block; width: 100%; height: auto;
  max-height: 520px; object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Popis usluga u dva stupca, isti izgled kao tablica trajanja */
body.longform .htw-services .duration-list__item { display: block; }
body.longform .htw-services a {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-charcoal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
body.longform .htw-services a:hover { color: var(--color-terra); border-bottom-color: var(--color-terra); }

/* Tablet */
@media (max-width: 1024px) {
  body.longform .htw-cols { gap: 2.25rem 2.5rem; }
}
/* Mobitel — sve u jedan stupac */
@media (max-width: 768px) {
  body.longform .htw-cols { grid-template-columns: 1fr; gap: 2rem; }
  body.longform .htw-colimg img { max-height: 340px; }
}

/* --- Poravnanje crta, puna sirina, razmaci ---------------------------- */
/* Naslov stupca zauzima visinu DVA reda, i kad tekst stane u jedan.
   Bez toga crta ispod jednorednog naslova ispada vise od crte ispod
   dvorednog u istom redu mreze. */
body.longform .htw-col > h3 {
  min-height: calc(2 * 1.3em);
  display: flex;
  align-items: flex-end;
}

/* Blok preko cijele sirine — isti dojam kao uvodna recenica pod naslovom */
body.longform .htw-full { margin-top: 2.75rem; }
body.longform .htw-full > p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin-bottom: 1.25rem;
}
body.longform .htw-full > *:last-child { margin-bottom: 0; }

/* Uvodna recenica nad karticama paketa — sira, da stane u dva reda */
body.longform .section-header--center .lead { max-width: 900px; margin-inline: auto; }

/* Zrak izmedu zig-zag reda i stupaca ispod njega */
body.longform .htw-row + .htw-cols { margin-top: 4rem; }
/* Naslov u zig-zag redu malo nize od vrha slike */
body.longform .htw-row__num { margin-top: 0.75rem; }

@media (max-width: 768px) {
  body.longform .htw-col > h3 { min-height: 0; display: block; }
  body.longform .htw-row + .htw-cols { margin-top: 2.5rem; }
  body.longform .htw-full { margin-top: 2rem; }
}

/* --- Okvir: donje crte dvaju stupaca u istoj ravnini ------------------ */
/* Stupci se rastezu na visinu reda, a zadnji blok raste do dna, pa mu
   donja crta pada na istu visinu u oba stupca. */
body.longform .htw-cols--frame { align-items: stretch; }
body.longform .htw-cols--frame .htw-col { display: flex; flex-direction: column; }
body.longform .htw-cols--frame .htw-col > .htw-block:last-child {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
body.longform .htw-cols--frame .htw-col > .htw-block:last-child .prose-list { flex: 1 1 auto; }

/* Blok bez zavrsne crte — Paket 1, Paket 2, Paket 3 */
body.longform .htw-block--plain { border-bottom: 0; padding-bottom: 0; }

/* --- Paket 3: puna sirina, bez stupaca -------------------------------- */
/* Naslov s crtom, dugacak tekst, pa zavrsna crta preko cijele sirine. */
body.longform .htw-wide {
  border-bottom: 1px solid var(--color-divider);
  padding-bottom: 2.25rem;
  margin-top: 2.75rem;
}
body.longform .htw-wide > h3 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.3;
  margin: 0 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-divider);
}
body.longform .htw-wide > p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin-bottom: 1.25rem;
}
body.longform .htw-wide > *:last-child { margin-bottom: 0; }
body.longform .htw-wide .htw-block { margin-bottom: 1.5rem; }

@media (max-width: 768px) {
  body.longform .htw-cols--frame .htw-col > .htw-block:last-child { flex: 0 1 auto; display: block; }
  body.longform .htw-wide { margin-top: 2rem; padding-bottom: 1.75rem; }
}
/* Skok na Paket 3 padao je prenisko — slika i broj ostali bi iznad ekrana.
   Redovi 1 i 2 sjedaju tocno, pa se mijenja samo ovaj. */
body.longform #paket-3 { scroll-margin-top: 165px; }

/* Razmak iznad gumba koji stoji sam u sekciji */
body.longform .htw-cta { margin-top: 2.5rem; }
/* Link "Više o tome kako radimo zajedno" u stupcu */
body.longform .htw-link {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-terra);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
body.longform .htw-link:hover { border-bottom-color: var(--color-terra-hover); }

/* ===================================================================== */
/* ===== STRANICE USLUGA — ISPRAVCI RITMA I PORAVNANJA ================= */
/* ===================================================================== */

/* --- 1. Uvodna slika: cijela, bez rezanja ---------------------------- */
/* Osnovno pravilo reze sliku na 520px. Uvodna slika mora se vidjeti
   cijela, pa joj se granica visine mice, a tekst uz nju centrira po
   visini da ne visi na vrhu pokraj visoke uspravne fotografije. */
body.longform .htw-cols--media { align-items: center; }
body.longform .htw-colimg--full img {
  max-height: none;
  object-fit: fill;
}

/* --- 2. i 9. Popisi u dva stupca — tok odozgo prema dolje ------------ */
/* Mreza je punila lijevo-desno-lijevo. Visestupcani tok puni prvi stupac
   do dna pa nastavlja u drugom, bez obzira na broj stavki. Gornja crta
   ide na sam popis, pa obje kolone krecu ispod iste linije. */
body.longform .duration-list--two {
  display: block;
  columns: 2;
  column-gap: 3.5rem;
  border-top: 1px solid var(--color-divider);
}
body.longform .duration-list--two .duration-list__item {
  break-inside: avoid;
  border-top: 0;
}

/* Mali redni brojevi — samo na popisima usluga i na "Na ovoj stranici",
   ne i na tablici trajanja po prostorijama, gdje redoslijed nije
   sadrzajan. Kosa crta i prazan niz skrivaju broj citacima ekrana,
   jer smisao nosi tekst linka. */
body.longform .htw-services { counter-reset: tocnum; }
body.longform .htw-services .duration-list__item {
  counter-increment: tocnum;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 0.9rem;
  /* Osnovni .duration-list__item ima flex-wrap: wrap. Kod dugackog naslova
     link se zbog toga prelamao u novi redak i broj bi ostao sam iznad
     njega. Bez prelamanja link se suzi, a tekst se lomi unutar sebe. */
  flex-wrap: nowrap;
}
body.longform .htw-services .duration-list__item > a { min-width: 0; }
body.longform .htw-services .duration-list__item::before {
  content: counter(tocnum, decimal-leading-zero) / "";
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-charcoal);
  flex: none;
  width: 1.6rem;
}

/* --- 3., 4. i 5. Nabrajanja u dva stupca, proza punom sirinom -------- */
/* Proza uvijek ide punom sirinom. Stupci su rezervirani za nabrajanja. */
body.longform .prose-list--two {
  display: block;
  columns: 2;
  column-gap: 3.5rem;
}
body.longform .prose-list--two li {
  break-inside: avoid;
  margin-bottom: 0.75rem;
}
body.longform .prose-list--two li:last-child { margin-bottom: 0; }

/* Tanka crta izmedu dvije misaone cjeline unutar iste sekcije. */
body.longform .htw-rule {
  height: 1px;
  background: var(--color-divider);
  border: 0;
  margin: 2.75rem 0 0;
}
body.longform .htw-rule + .htw-full { margin-top: 2.75rem; }

/* Blok s uvodnom recenicom kad stoji punom sirinom, bez zavrsne crte */
body.longform .htw-full > .htw-block { margin-bottom: 0; }

/* --- 6. i 7. Slika koja zavrsava u ravnini sa zadnjim retkom --------- */
/* Suprotno od uvodne slike: ovdje se fotografija rasteze na visinu
   susjednog stupca, pa donji rub pada tocno uz zadnji bullet. */
body.longform .htw-cols--stretch { align-items: stretch; }
body.longform .htw-colimg--stretch { display: flex; height: 100%; }
body.longform .htw-colimg--stretch img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* --- 8. Tri kartice formata rada ------------------------------------- */
/* Ista kartica kao na naslovnici; preslikavaju se samo fontovi, da
   izgleda jednako. Naslovnica se ne dira. */
body.longform .pain-point__title {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
}
body.longform .pain-point__body { font-size: 1.125rem; }
body.longform .pain-points { margin-top: 2.5rem; }

/* Uvodna recenica i link centrirani, jer je te sekcije malo teksta */
body.longform .htw-center {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
}
body.longform .htw-linkrow {
  text-align: center;
  margin: 2.75rem 0 0;
}

/* --- 10. Naslovi kategorija u istoj ravnini --------------------------- */
/* Svaki je naslov dosad zivio u svojoj kutiji, pa im se crte nisu mogle
   poravnati medusobno: dulji naslov spustio bi svoju crtu nize. Sa
   subgridom naslovi u istom redu dijele isti redak mreze, tekst sjeda na
   vrh, a crta pada na zajednicki donji rub. Starijim preglednicima
   ostaje postojece rjesenje s najmanjom visinom od dva retka. */
body.longform .htw-cols--heads { row-gap: 1.6rem; }
body.longform .htw-cols--heads .htw-col__body { margin-bottom: 1.15rem; }
body.longform .htw-col__body > p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin-bottom: 1.25rem;
}
body.longform .htw-col__body > *:last-child { margin-bottom: 0; }

@supports (grid-template-rows: subgrid) {
  body.longform .htw-cols--heads { align-items: stretch; }
  body.longform .htw-cols--heads .htw-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  body.longform .htw-cols--heads .htw-col > h3 {
    min-height: 0;
    align-items: flex-start;
    margin-bottom: 0;
  }
  /* Redak naslova ima fiksnu visinu od dva retka teksta. To je ono sto
     drzi crte poravnatima: fiksan redak ne moze narasti kad neki element
     preko njega bude visi, pa sav visak ide u redak s tekstom. Zbog toga
     slika smije ostati u toku i pokazati se cijela. */
  body.longform .htw-cols--heads {
    grid-auto-rows: calc(2 * 1.3 * 1.65rem + 0.9rem) auto;
  }
  /* Stupac sa slikom nema naslov — proteze se preko dvije kategorije,
     da visoka uspravna fotografija stane cijela bez rezanja. */
  body.longform .htw-cols--heads .htw-col--img {
    display: block;
    grid-row: span 4;
  }
  body.longform .htw-cols--heads .htw-col--img img {
    max-height: none;
    object-fit: fill;
  }
  /* Kad ostane neparan broj polja, zadnji blok ide preko obje kolone
     umjesto da pola reda zjapi. Eksplicitna klasa, ne :last-child — inace
     bi se rastegnuo i ondje gdje je broj blokova paran. */
  body.longform .htw-cols--heads .htw-col--full { grid-column: 1 / -1; }
}

/* --- Tablet ---------------------------------------------------------- */
@media (max-width: 1024px) {
  body.longform .duration-list--two,
  body.longform .prose-list--two { column-gap: 2.5rem; }
}

/* --- Mobitel — sve u jedan stupac ------------------------------------ */
@media (max-width: 768px) {
  body.longform .duration-list--two,
  body.longform .prose-list--two { columns: 1; }
  body.longform .htw-colimg--full img { max-height: none; }
  body.longform .htw-colimg--stretch { display: block; height: auto; }
  body.longform .htw-colimg--stretch img { height: auto; max-height: 340px; }
  body.longform .htw-cols--media { align-items: start; }
  body.longform .htw-cols--heads .htw-col__body { margin-bottom: 0; }
  body.longform .htw-services .duration-list__item::before { width: 1.4rem; }
  body.longform .htw-rule { margin-top: 2rem; }
  body.longform .htw-rule + .htw-full { margin-top: 2rem; }
}
@supports (grid-template-rows: subgrid) {
  @media (max-width: 768px) {
    body.longform .htw-cols--heads .htw-col,
    body.longform .htw-cols--heads .htw-col--img { grid-row: auto; }
    body.longform .htw-cols--heads .htw-col { display: block; }
    body.longform .htw-cols--heads { grid-auto-rows: auto; }
    body.longform .htw-cols--heads .htw-col--full { grid-column: auto; }
    body.longform .htw-cols--heads .htw-col--img img { height: auto; max-height: 340px; }
  }
}

/* --- Dugi naslovi sekcija ne smiju ostavljati rijec samu u retku ------ */
/* Osnovni .section-header staje na 640px, a najduzi naslovi trebaju oko
   650px — pa zadnja rijec padne u drugi red sama. Na dugim stranicama
   naslov dobiva vise sirine, a balansirani prijelom cuva one koji su
   ipak preduzi za jedan redak. Centrirana zaglavlja se ne diraju. */
body.longform .section-header:not(.section-header--center) { max-width: 820px; }
body.longform .section-header:not(.section-header--center) > .lead { max-width: 640px; }
body.longform .section-header > h2 { text-wrap: balance; }

/* --- Vise zraka medu odlomcima uz visoku sliku ------------------------ */
/* Uz uspravnu fotografiju tekst je kraci od slike. Dvostruki razmak medu
   odlomcima popuni tu visinu i tekst prestane djelovati zbijeno. */
body.longform .htw-cols--media .htw-col > p { margin-bottom: 2.5rem; }
@media (max-width: 768px) {
  body.longform .htw-cols--media .htw-col > p { margin-bottom: 1.25rem; }
}

/* --- Uvodna recenica u stupcu uz sliku -------------------------------- */
/* Neke usluge imaju kratku najavu iznad uvodnih odlomaka. Nije naslov —
   predugacka je za jedan redak — nego recenica koja sazima uslugu. */
body.longform .htw-col > .lead,
body.longform .htw-full > .lead {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-terra);
  text-align: center;
  margin-bottom: 2.25rem;
}
@media (max-width: 768px) {
  body.longform .htw-col > .lead,
  body.longform .htw-full > .lead { font-size: 1.2rem; margin-bottom: 1.5rem; }
}

/* --- Prozracniji stupac uz visoku sliku ------------------------------- */
/* Kad je tekst uz sliku kraci od nje, ispod njega ostane rupa. Naslov se
   spusta za jedan redak, a razmak medu bulletima se udvostrucuje, pa
   tekst ispuni visinu fotografije. */
body.longform .htw-col--airy { padding-top: 2rem; }
body.longform .htw-col--airy .prose-list { gap: 1.5rem; }
@media (max-width: 768px) {
  body.longform .htw-col--airy { padding-top: 0; }
  body.longform .htw-col--airy .prose-list { gap: 0.75rem; }
}

/* --- Uvodna najava lijevo poravnata ----------------------------------- */
/* Kratka najava centrirana izgleda kao zalutali potpis; duga radi kao
   izdvojena recenica. Zato je poravnanje modifikator, ne pravilo. */
body.longform .htw-col > .lead.lead--left,
body.longform .htw-full > .lead.lead--left { text-align: left; }

/* --- Blok prostorije: naslov, duga crta, tekst punom sirinom ----------- */
/* Kuhinja, kupaonica, garderoba i kucni ured idu jedan ispod drugoga
   preko cijele sirine. Crtu nosi naslov; zavrsna crta bi ih razdvajala
   dvaput, pa je ovdje nema. */
body.longform .htw-wide--plain { border-bottom: 0; padding-bottom: 0; }
body.longform .htw-wide--plain + .htw-wide--plain { margin-top: 3.25rem; }
@media (max-width: 768px) {
  body.longform .htw-wide--plain + .htw-wide--plain { margin-top: 2.5rem; }
}

/* --- Razmak ispod crte naslova i oko sirokih slika -------------------- */
/* Pravilo `.htw-wide > *:last-child { margin-bottom: 0 }` ponisti razmak
   ispod naslova kad je naslov jedini sadrzaj bloka — pa se tekst ili
   slika zalijepe uz crtu. Razmak preuzima sljedeci element, i iznosi
   1.6rem, jednako kao razmak ispod naslova prostorije na renovaciji. */
body.longform .htw-wide--plain + .htw-cols,
body.longform .htw-wide--plain + .htw-figure,
body.longform .htw-wide--plain + .htw-block { margin-top: 1.6rem; }
body.longform .htw-wide--plain + .htw-full { margin-top: 1.6rem; }

/* Siroka slika treba zrak i iznad sebe, ne samo ispod. Susjedne okomite
   margine se sklapaju, pa se ovo ne zbraja s razmakom elementa iznad. */
body.longform .htw-figure { margin-top: 2.75rem; }

@media (max-width: 768px) {
  body.longform .htw-wide--plain + .htw-cols,
  body.longform .htw-wide--plain + .htw-figure,
  body.longform .htw-wide--plain + .htw-block,
  body.longform .htw-wide--plain + .htw-full { margin-top: 1.25rem; }
  body.longform .htw-figure { margin-top: 2rem; }
}

/* --- Zadnja rijec ne smije ostati sama u retku -------------------------- */
/* `text-wrap: pretty` prelama tekst tako da zadnji redak nikad ne ostane s
   jednom kratkom rijeci — preglednik radije podigne dvije ili tri. Vrijedi
   za nabrajanja i odlomke u dugim stranicama. Preglednici koji to ne
   podrzavaju samo nastave kao dosad. */
body.longform .prose-list li,
body.longform .htw-full > p,
body.longform .htw-col > p,
body.longform .htw-col__body > p,
body.longform .htw-wide > p,
body.longform .hfaq-item p { text-wrap: pretty; }


/* ===== Kartice s fotografijama — sest tema radionica ===== */
.pain-points--foto {
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.pain-points--foto .pain-point {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pain-points--foto .pain-point__figure { margin: 0; display: block; }
.pain-points--foto .pain-point__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  max-height: none;
}
.pain-points--foto .pain-point__text { padding: 1.5rem 1.5rem 1.75rem; }
.pain-points--foto .pain-point__eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-terra);
  margin-bottom: 0.4rem;
}
.pain-points--foto .pain-point__title { margin-bottom: 0.6rem; }
.pain-points--foto .pain-point__body { margin-bottom: 0; }
.pain-points--foto + .htw-cols { margin-top: 3.25rem; }

@media (max-width: 1024px) {
  .pain-points--foto { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 768px) {
  .pain-points--foto { grid-template-columns: 1fr; }
}


/* ===== RECENZIJE KLIJENATA =====
   Zid u dva stupca (CSS columns), jer su recenzije jako razlicite duljine
   pa bi obican grid ostavljao velike rupe. Kartica se nikad ne smije
   prelomiti preko dva stupca — to drzi break-inside + inline-block.
   Klase su nove; ne diraju .pain-points ni bilo sto na stranicama usluga. */
.reviews {
  columns: 2;
  column-gap: 2rem;
}
.reviews--single { columns: 1; max-width: 760px; margin-inline: auto; }
.review {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: inline-block;
  width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.75rem;
  margin: 0 0 2rem;
}
/* Globalno pravilo za blockquote (serif, kurziv, weight 300, crta lijevo)
   ovdje se namjerno ponistava — citat klijenta mora se citati jednako
   lako kao i ostatak stranice, u istom fontu i istoj velicini. */
.review-quote {
  margin: 0;
  border-left: 0;
  padding-left: 0;
  font-style: normal;
}
.review-quote p {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin: 0 0 0.9rem;
}
/* Unutar kurziva naglasak ide uspravno, inace se ne vidi. */
.review-quote p em { font-style: normal; }
.review-quote p:last-child { margin-bottom: 0; }
.review-by {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border);
}
.review-name {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-terra);
}
.review-service {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  margin-top: 0.15rem;
}
.reviews-more { text-align: center; margin-top: 0.5rem; }
/* Isti postupak koji web vec koristi za .testimonial__read-more:
   crta je u mirovanju prozirna, a pojavi se na prijelaz misem. */
.reviews-more a {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-terra);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.reviews-more a:hover,
.reviews-more a:focus-visible {
  color: var(--color-terra-hover);
  border-bottom-color: var(--color-terra-hover);
}

/* Link unutar odlomka mora se vidjeti da je link i prije nego ga
   dodirne mis — inace ga citatelj nikad ne nade. Terakota bez crte,
   na prijelaz misem crta i promjena boje. Isto vrijedi za linkove
   unutar odgovora na FAQ-u. */
.htw-full p a,
.faq-item__answer p a {
  color: var(--color-terra);
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.htw-full p a:hover,
.htw-full p a:focus-visible,
.faq-item__answer p a:hover,
.faq-item__answer p a:focus-visible {
  color: var(--color-terra-hover);
  border-bottom-color: var(--color-terra-hover);
}

@media (max-width: 900px) {
  .reviews { columns: 1; }
  .review { padding: 1.4rem 1.4rem; margin-bottom: 1.5rem; }
}
@media (max-width: 480px) {
  .review { padding: 1.2rem 1.15rem; }
  .review-quote p { font-size: 0.95rem; }
}


/* ----- Recenzije na stranicama usluga: punom sirinom, jedna ispod druge -----
   Na samostalnoj stranici Recenzije ostaje zid u dva stupca (.reviews).
   Ovdje se kartica rastvara: nema okvira ni podloge, tekst ide u istoj
   mjeri kao odlomci sekcije iznad (.htw-full), a recenzije razdvaja ista
   tanka crta kao .htw-rule. Sve je pod novim klasama — ne dira .reviews
   na stranici Recenzije ni bilo sto drugo na stranici. */
.reviews--stack { columns: auto; column-gap: normal; }
.reviews--stack.reviews--single { max-width: none; margin-inline: 0; }
.reviews--stack .review {
  display: block;
  width: auto;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 2.5rem;
  margin: 0 0 2.5rem;
  border-bottom: 1px solid var(--color-divider);
}
.reviews--stack .review:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.reviews--stack .review-by {
  border-top: 0;
  padding-top: 0;
  margin-top: 1rem;
}

/* Ako sekcija iznad vec ima pjescanu podlogu, blok recenzija uzima
   osnovnu — inace se dvije sekcije spoje u jednu plohu. */
.section--alt + .reviews-section.section--alt { background: var(--color-bg); }

/* Proba (zasad samo radni prostor): bijele kartice kao na stranici
   Recenzije, ali punom sirinom i jedna ispod druge, unutar sekcije
   koja ima svoju boju pozadine. Crta izmedu recenzija ovdje ne treba —
   kartice se same odvajaju. */
.reviews--stack.reviews--cards .review {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  margin: 0 0 1.5rem;
}
.reviews--stack.reviews--cards .review:last-child {
  border: 1px solid var(--color-border);
  padding: 1.75rem 2rem;
  margin-bottom: 0;
}
.reviews--stack.reviews--cards .review-by {
  border-top: 1px solid var(--color-border);
  padding-top: 0.9rem;
  margin-top: 1.1rem;
}

/* ===== U MEDIJIMA =====
   Popis pojavljivanja: logotip lijevo, tekst desno, redci razdvojeni
   istom tankom crtom kao recenzije. Logotip koristi postojeci .media-logo
   s naslovnice (sivo, boja na prijelaz misem) — nista se ondje ne mijenja.
   Za trazilice i AI odgovore bitan je tekst desno, logotip je ukras. */
.media-list { list-style: none; margin: 0; padding: 0; }
.media-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--color-divider);
}
.media-item:last-child { border-bottom: 0; padding-bottom: 0; }
.media-item__logo { display: flex; align-items: center; min-height: 36px; }
.media-item__logo .media-logo { height: 34px; max-width: 150px; }
.media-item__outlet {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 0.35rem;
}
.media-item__tag {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: 0.05rem 0.4rem;
  margin-left: 0.3rem;
  color: var(--color-terra);
}
.media-item__title {
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.32;
  margin: 0 0 0.5rem;
}
.media-item__title a {
  color: var(--color-terra);
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.media-item__title a:hover,
.media-item__title a:focus-visible {
  color: var(--color-terra-hover);
  border-bottom-color: var(--color-terra-hover);
}
.media-item__note {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-charcoal);
}
.media-section .htw-full { margin-bottom: 1.5rem; }

@media (max-width: 700px) {
  .media-item { grid-template-columns: 1fr; gap: 0.85rem; padding: 1.4rem 0; }
  .media-item__title { font-size: 1.2rem; }
}

/* ===== PODNOZJE: ISPRAVAK PRELJEVA NA UZIM EKRANIMA =====
   Uzrok (izmjereno 16.9.2026. na 375px): red drustvenih ikona ne moze se
   suziti — sest ikona s razmacima ima najmanju sirinu ~375px, a ima i
   margin-left:-12px. Posto su djeca grida po zadanome min-width:auto,
   ta najmanja sirina postaje najmanja sirina cijelog stupca, pa je stupac
   bio 362.7px unutar spremnika od 335px. Odatle 8px preljeva na SVAKOJ
   stranici.
   Ispravak je jedan redak: djeca grida smiju se suziti. Na sirokim
   ekranima se nista ne mijenja jer su stupci ionako siri od sadrzaja. */
.footer-grid > * { min-width: 0; }
.footer-social { flex-wrap: wrap; }
/* Drugi dio istog uzroka: nazivi usluga u podnozju imali su
   white-space: nowrap, pa je najduzi ("Organizacija doma —
   rasciscavanje i pospremanje", 363px) sam odredivao najmanju sirinu
   stupca. Na uskim ekranima smiju se prelomiti u dva retka. */
@media (max-width: 600px) {
  .footer-col--services a { white-space: normal; }
}

/* ===== MOBITEL — ISPRAVCI PRELJEVA (16.9.2026.) =====
   Ispod ovih sirina se NISTA ne mijenja na racunalu — pravila vrijede
   samo unutar medijskih upita za uske ekrane. */

/* Naslovnica: veliki naslov ima white-space:nowrap, sto je na racunalu
   ispravno (stane u jedan red), a na mobitelu ga tjera izvan ekrana —
   izmjereno 686px sadrzaja na ekranu od 375px. Na uskim ekranima se
   smije prelomiti. */
@media (max-width: 900px) {
  .hero__h1 { white-space: normal; }
}
@media (max-width: 600px) {
  .hero__h1 { font-size: 26px; }
}

/* Naslovnica: traka povjerenja ispod hero dijela stoji u jednom redu
   koji se ne smije prelomiti, pa na mobitelu gura stranicu ustranu za
   311px. Na uskim ekranima se prelama u dva-tri reda, a okomite crtice
   izmedu stavki se sakriju jer u prelomljenom rasporedu nemaju smisla. */
@media (max-width: 900px) {
  .trust-bar__inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.55rem;
    column-gap: 1.25rem;
  }
  .trust-sep { display: none; }
  /* Ista zabrana prelamanja i na retku „Radim s klijentima u Zagrebu
     i diljem Hrvatske — uzivo i online." — 666px na ekranu od 375px.
     Rect elementa ostaje 335px pa se u mjerenju ne vidi, ali sadrzaj
     strsi i gura stranicu ustranu. */
  .who-closing--location { white-space: normal; }
}

/* Blok s Marie Kondo: stupci se ne mogu suziti (min-width:auto), a
   unutarnji razmak od 104px dodatno tjera najmanju sirinu na 369px,
   pa stranica na 360px i uze bjezi ustranu. */
.eeat-section__wrap > * { min-width: 0; }
@media (max-width: 600px) {
  .eeat-section__content { padding: 2rem 1.25rem 2.5rem; }
}

/* Kontakt: dva stupca se na uskom ekranu ne mogu suziti jer su djeca
   grida po zadanome min-width:auto — isti uzrok kao u podnozju. */
.contact-layout > * { min-width: 0; }
.contact-portrait img { max-width: 100%; height: auto; }

/* Dvije velike kartice (Resursi). Cetiri kartice na Upoznajte Petru su
   uske, pa bi dvije u istom rasporedu ostavile pola reda praznog —
   ovdje svaka uzima pola sirine, a slika je zato visa. */
.pain-points.pain-points--two { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.pain-points--two .pain-point__figure img { aspect-ratio: 4 / 3; }
.pain-points--two .pain-point__title { font-size: 1.5rem; }
@media (max-width: 768px) {
  .pain-points.pain-points--two { grid-template-columns: 1fr; gap: 2rem; }
}

/* Zavrsni CTA blok ima istu pjescanu podlogu kao .section--alt, pa kad
   stoji odmah iza takve sekcije dvije se plohe stope u jednu. Isti
   postupak koji vec koristimo za blok recenzija: tada CTA uzima osnovnu
   boju. Vrijedi na cijelom webu, ne samo na Resursima. */
.section--alt + .mini-cta { background: var(--color-bg); }


/* --- Zadnja rijec nikad sama u retku (cijeli web) --- */
/* Pravilo iz `claude/pravila-rijeci-i-tona.md`: zadnja rijec odlomka ne smije
   ostati sama u novom retku. `text-wrap: pretty` to rjesava sistemski —
   preglednik radije spusti dvije rijeci nego jednu. Naslovnica (`body.home`)
   je namjerno izuzeta da se ondje nista ne pomakne; preglednici koji pravilo
   ne podrzavaju samo nastave kao dosad. */
body:not(.home) .htw-full p,
body:not(.home) .htw-col p,
body:not(.home) .htw-wide p,
body:not(.home) .prose-list li,
body:not(.home) .cta-body p,
body:not(.home) .pain-point__body,
body:not(.home) .review-quote p,
body:not(.home) .media-item__note,
body:not(.home) .section-header + .lead,
body:not(.home) .hero__lead { text-wrap: pretty; }


/* --- Siroka kartica u mrezi fotografija (.pain-point--feature) ---------- */
/* Koristi se na pod-rasputnici KonMari vodica: prva kartica (kompletan
   vodic) prelazi preko cijele sirine mreze, slika lijevo, tekst desno.
   Klasa je nova i stoji samo na toj kartici, stoga ne dira .pain-points--foto
   na Upoznajte Petru, .pain-points--two na Resursima ni bilo sto na
   stranicama usluga. Ispod 768px se sama slaze u stupac, kao i ostale. */
.pain-points--foto .pain-point--feature { grid-column: 1 / -1; }
.pain-points--foto .pain-point--feature .pain-point__link {
  display: flex;
  align-items: stretch;
}
.pain-points--foto .pain-point--feature .pain-point__figure {
  flex: 0 0 44%;
  min-width: 0;
}
.pain-points--foto .pain-point--feature .pain-point__figure img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
}
.pain-points--foto .pain-point--feature .pain-point__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.25rem 2.5rem;
}
.pain-points--foto .pain-point--feature .pain-point__title { font-size: 1.75rem; }
.pain-points--foto .pain-point--feature .pain-point__body { font-size: 1.0625rem; }

@media (max-width: 900px) {
  .pain-points--foto .pain-point--feature .pain-point__link { flex-direction: column; }
  .pain-points--foto .pain-point--feature .pain-point__figure { flex: 1 1 auto; }
  .pain-points--foto .pain-point--feature .pain-point__figure img {
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
  }
  .pain-points--foto .pain-point--feature .pain-point__text { padding: 1.5rem 1.5rem 1.75rem; }
  .pain-points--foto .pain-point--feature .pain-point__title { font-size: 1.5rem; }
}


/* --- h3 u redu slike i teksta (.htw-row__body) --- */
/* Postojece stranice koriste h2 u .htw-row__body, pa pravilo za h3 nikad
   nije napisano. Vodici koriste h3 jer je h2 zauzet naslovom sekcije.
   Preslikava izgled h3 iz .htw-col: serif, crtica ispod, zrak oko sebe.
   Hvata samo redove s h3 — stranice s h2 ostaju netaknute. */
body.longform .htw-row__body > h3 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.3;
  margin: 0 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-divider);
}
body.longform .htw-row__body > p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  margin-bottom: 1.25rem;
}
body.longform .htw-row__body > *:last-child { margin-bottom: 0; }

/* Broj iznad h3 u punoj sirini (.htw-full) — isti odnos kao u redu. */
body.longform .htw-full > .htw-row__num + h3 { margin-top: 0; }


/* --- Naslov lijevo, broj desno (.htw-head) --- */
/* Petrina odluka, 18. rujna: u numeriranim nizovima broj stoji UZ naslov,
   desno, a ne nad njim. Tako se tekst podigne za jedan red i poravna s
   gornjim rubom slike u redu.
   .htw-head je nova klasa i ne postoji nigdje drugdje, a pravila za naslov
   i broj vrijede samo unutar nje — "Kako raditi sa mnom", gdje broj stoji
   nad h2, ostaje netaknuta. */
body.longform .htw-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--color-divider);
}
body.longform .htw-head > h3 {
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--color-charcoal);
  line-height: 1.3;
  margin: 0;
  padding: 0;
  border: 0;
  min-height: 0;
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  text-wrap: balance;
}
body.longform .htw-head > .htw-row__num {
  margin: 0;
  flex: none;
  font-size: 2.5rem;
}
@media (max-width: 600px) {
  body.longform .htw-head { gap: 1rem; }
  body.longform .htw-head > h3 { font-size: 1.35rem; }
  body.longform .htw-head > .htw-row__num { font-size: 1.9rem; }
}

/* --- Razmak izmedu cik-cak redova --- */
/* Postojalo je samo .htw-row + .htw-cols. Dva reda jedan za drugim, slika
   pa red, red pa slika i dva stupca pa red lijepili su se bez zraka. */
body.longform .htw-row + .htw-row,
body.longform .htw-cols + .htw-row,
body.longform .htw-figure + .htw-row,
body.longform .htw-row + .htw-figure,
body.longform .htw-full + .htw-row,
body.longform .htw-rule + .htw-row { margin-top: 4rem; }
@media (max-width: 768px) {
  body.longform .htw-row + .htw-row,
  body.longform .htw-cols + .htw-row,
  body.longform .htw-figure + .htw-row,
  body.longform .htw-row + .htw-figure,
  body.longform .htw-full + .htw-row,
  body.longform .htw-rule + .htw-row { margin-top: 2.5rem; }
}


/* --- Broj na pjeskovitoj podlozi --- */
/* Brojevi usluga na /services/ koriste --color-terra-pale i ondje se dobro
   vide, jer ti redovi stoje na svijetloj podlozi (--color-bg). U vodicima
   numerirani nizovi stoje i na pjeskovitoj (.section--alt), gdje ista boja
   gotovo isceznе. Ondje broj ide u --color-divider, koji na toj podlozi
   daje isti vizualni odnos kao terra-pale na svijetloj.
   Vrijedi samo unutar .section--alt, pa /services/ ostaje netaknut. */
body.longform .section--alt .htw-row__num { color: var(--color-divider); }


/* --- Link u odlomku: dopuna za stupce i redove --- */
/* Ispravak od 16. rujna pokrio je samo .htw-full p a i .faq-item__answer p a.
   Linkovi unutar dvostupcanih blokova (.htw-col) i unutar redova slike i
   teksta (.htw-row__body) ostali su iste boje kao tekst oko sebe — izmjereno
   rgb(122,92,78) i za link i za odlomak, dakle citatelj ne vidi da je link.
   Vrijedi i na stranicama usluga, ne samo u vodicima. Iste vrijednosti kao
   postojece pravilo, samo prosireni selektor. */
.htw-col p a,
.htw-col li a,
.htw-row__body p a,
.htw-row__body li a,
.htw-block p a {
  color: var(--color-terra);
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.htw-col p a:hover,
.htw-col p a:focus-visible,
.htw-col li a:hover,
.htw-col li a:focus-visible,
.htw-row__body p a:hover,
.htw-row__body p a:focus-visible,
.htw-row__body li a:hover,
.htw-row__body li a:focus-visible,
.htw-block p a:hover,
.htw-block p a:focus-visible {
  color: var(--color-terra-hover);
  border-bottom-color: var(--color-terra-hover);
}


/* --- Link u odlomku: trajna crta ispod --- */
/* Boja je od pocetka --color-terra (#8A5438), ista kao link na /services/.
   Ipak se ne vidi: tamo link stoji sam u svom redu, sa strelicom i u
   weightu 500, a u tekstu je okruzen --color-charcoal (#7A5C4E) — dvije
   smede koje se razlikuju za nijansu. Boja sama nije dovoljna, pa link
   dobiva trajnu crtu ispod i weight 500. Na prijelaz misem crta i tekst
   potamne u --color-terra-hover, kako je i dosad bilo.
   Selektor pokriva samo linkove UNUTAR odlomaka i popisa u komponentama
   vodica i stranica usluga. Navigacija, footer, kartice, gumbi, izdvojeni
   .service-row__link i naslovnica ostaju netaknuti. */
.htw-full p a,
.htw-full li a,
.faq-item__answer p a,
.htw-col p a,
.htw-col li a,
.htw-row__body p a,
.htw-row__body li a,
.htw-block p a,
.htw-block li a {
  color: var(--color-terra);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--color-terra-pale);
  transition: color var(--transition), border-color var(--transition);
}
.htw-full p a:hover, .htw-full p a:focus-visible,
.htw-full li a:hover, .htw-full li a:focus-visible,
.faq-item__answer p a:hover, .faq-item__answer p a:focus-visible,
.htw-col p a:hover, .htw-col p a:focus-visible,
.htw-col li a:hover, .htw-col li a:focus-visible,
.htw-row__body p a:hover, .htw-row__body p a:focus-visible,
.htw-row__body li a:hover, .htw-row__body li a:focus-visible,
.htw-block p a:hover, .htw-block p a:focus-visible,
.htw-block li a:hover, .htw-block li a:focus-visible {
  color: var(--color-terra-hover);
  border-bottom-color: var(--color-terra-hover);
}


/* --- Naslov cestog pitanja: dva jednaka retka --- */
/* Pravilo 12 (zadnja rijec nikad sama u retku) vrijedi i za naslove
   pitanja. Kod odlomaka to rjesava text-wrap: pretty; kod kratkih
   naslova bolje radi balance, koji naslov razdijeli na dva jednaka
   retka umjesto da zadnju rijec spusti samu.
   Ograniceno na body.longform, pa naslovnica ostaje netaknuta.
   /faq/ ima svoju komponentu (.faq-item) i nije obuhvacen. */
body.longform .hfaq-item h3 { text-wrap: balance; }


/* --- Razmak izmedu odlomka pune sirine i dva stupca --- */
/* Pravilo za razmake pokrivalo je .htw-row, ali ne i .htw-cols kad dolazi
   odmah iza odlomka pune sirine. Popis se tada lijepio uz zadnju recenicu.
   Iste vrijednosti kao postojece pravilo, samo prosireni selektor. */
body.longform .htw-full + .htw-cols { margin-top: 4rem; }
@media (max-width: 768px) {
  body.longform .htw-full + .htw-cols { margin-top: 2.5rem; }
}


/* --- Stavka popisa: obican blok, ne flex --- */
/* .prose-list li je bio display: flex, zbog tocke kao prvog flex djeteta.
   U flexu svaki element unutar stavke postaje zaseban stupac, pa se
   <strong> na pocetku stavke lomio sam u sebi i odvajao od ostatka
   recenice. Isti kvar je izazvao i izlijetanje stranice o odjeci za
   124px u rujnu.
   Stavka je sada blok, a tocka ide u ::before s apsolutnim polozajem.
   Velicina, boja i visina tocke ostaju iste, a razmak od 0.75rem seli
   iz gap u padding-left. Tekst unutar stavke od tada tece normalno. */
.prose-list li {
  display: block;
  position: relative;
  padding-left: calc(6px + 0.75rem);
}
.prose-list li::before {
  position: absolute;
  left: 0;
  top: 0.65rem;
  margin-top: 0;
}


/* --- Razmak ispod bloka s popisom kad iza njega ide jos teksta --- */
/* .htw-block--plain nema donju crtu ni padding, a pravilo
   .htw-full > .htw-block { margin-bottom: 0 } napisano je za slucaj kad je
   blok zadnji u sekciji. Kad iza njega ide jos teksta, prva sljedeca
   recenica se zalijepi uz zadnju stavku popisa. */
body.longform .htw-full > .htw-block:not(:last-child) { margin-bottom: 2rem; }


/* --- Broj uz naslov kartice (.pain-points--broj) --- */
/* Petrina odluka, 18. rujna: u numeriranim karticama broj stoji UZ naslov,
   desno, u istom retku — isto pravilo kao .htw-head u cik-cak redovima,
   i broj je veci nego dok je stajao nad naslovom.
   Klasa se dodaje samo na mrezu kartica koje su numerirane. Eyebrow na
   ostalim stranicama nosi rijeci ("Prva tema", "Cijela metoda", "Prvi korak"),
   ne broj, i te kartice ostaju netaknute jer nemaju ovu klasu. */
.pain-points--broj .pain-point__text {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  column-gap: 1rem;
}
.pain-points--broj .pain-point__title {
  grid-column: 1;
  grid-row: 1;
  /* Broj uzme dio sirine retka, pa se naslov na uskom zaslonu prelama ranije.
     balance izjednacava retke i drzi pravilo 12 — zadnja rijec nikad sama. */
  text-wrap: balance;
}
.pain-points--broj .pain-point__eyebrow {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}
.pain-points--broj .pain-point__body {
  grid-column: 1 / -1;
  grid-row: 2;
}
@media (max-width: 600px) {
  .pain-points--broj .pain-point__eyebrow { font-size: 1.5rem; }
}


/* --- Zadnja rijec nikad sama: dopuna 18. rujna --- */
/* Mjerenje svih sedam vodica na 360/390/768/1024 pokazalo je da blok iznad ne
   pokriva sve: odlomci u cik-cak redovima (.htw-row__body p) i u blokovima,
   stavke u podnozju i svi naslovi ostali su izvan popisa. Naslovi dobivaju
   `balance`, ne `pretty` — kod kratkog teksta preko dva-tri retka balance
   izjednacava retke, dok pretty samo spusta zadnju rijec.
   Naslovnica (`body.home`) je i dalje izuzeta i ne mice se. `text-wrap` mijenja
   samo mjesto prijeloma, nikad sirinu ni raspored elemenata. */
body:not(.home) .htw-row__body p,
body:not(.home) .htw-block p,
body:not(.home) .htw-block li,
body:not(.home) .footer-col li { text-wrap: pretty; }

body:not(.home) .page-hero h1,
body:not(.home) .page-hero .lead,
body:not(.home) .section-header h2,
body:not(.home) .mini-cta h2,
body:not(.home) .cta-section h2,
body:not(.home) .pain-point__title,
body.longform .htw-col h3,
body.longform .htw-row__body h3 { text-wrap: balance; }


/* --- Razmak ispod dvostupcane tablice u tekstu: 19. rujna ------------ */
/* .duration-list ima margin: 0, a .htw-head nema gornju marginu, pa se
   naslov koji dolazi iza tablice zalijepio uz zadnji redak (tablica ulja
   u vodicu za sapun). Selektor hvata SAMO dvostupcani popis koji stoji
   unutar .htw-full. Provjereno 19. rujna: .duration-list--two bez
   .htw-services postoji jos jedino na /how-to-work-with-me/ (trajanje po
   prostorijama), gdje je izravno dijete .container, ne .htw-full, a svi
   ostali su .htw-services popisi "Na ovoj stranici", takoder izvan
   .htw-full. Nijedna postojeca stranica se, dakle, ne mijenja. */
body.longform .htw-full > .duration-list--two { margin-bottom: 2.75rem; }


/* ===== PRIVOLA ZA KOLACICE — 20. rujna 2026. ========================= */
/* Sve su klase nove i ne postoje nigdje drugdje na siteu. Jedino
   postojece pravilo koje se dira je donji polozaj gumba .scroll-top,
   i to samo dok je traka otvorena (body.cookie-open), jer bi ga traka
   inace prekrila. Cim posjetitelj odluci, traka nestaje i gumb se
   vraca na svoje mjesto. Visinu trake javlja consent.js kroz
   --cookie-h, jer se ona mijenja s sirinom zaslona. */

.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100; /* iznad .site-header (1000) i .scroll-top (999) */
  background: var(--color-card);
  border-top: 1px solid var(--color-divider);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar.is-open { opacity: 1; transform: translateY(0); }

.cookie-bar__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cookie-bar__img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.cookie-bar__body {
  flex: 1 1 auto;
  min-width: 0;
}

.cookie-bar__title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-charcoal);
  margin: 0 0 0.25rem;
}

.cookie-bar__body p {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-charcoal);
  margin: 0;
  text-wrap: pretty;
}
.cookie-bar__body a {
  color: var(--color-terra);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.cookie-bar__body a:hover { border-bottom-color: var(--color-terra-hover); }

/* Oba gumba nose istu klasu i istu tezinu. AZOP trazi da odbijanje
   bude jednako lako kao prihvacanje, pa se razlikuju samo tekstom. */
.cookie-bar__actions {
  flex: none;
  display: flex;
  gap: 0.75rem;
}
.cookie-bar__actions .btn { white-space: nowrap; }

/* Gumb u podnozju koji ponovno otvara traku — izgleda kao poveznica. */
.link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: color var(--transition);
}
.link-button:hover { color: var(--color-white); }

body.cookie-open .scroll-top {
  bottom: calc(var(--cookie-h, 0px) + 1.5rem);
}

@media (max-width: 860px) {
  .cookie-bar__inner {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
  }
  .cookie-bar__img { width: 48px; height: 48px; }
  .cookie-bar__body { flex: 1 1 200px; }
  .cookie-bar__actions { flex: 1 1 100%; }
  .cookie-bar__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  .cookie-bar__inner { padding: 1rem; gap: 0.85rem; }
  .cookie-bar__body p { font-size: 0.85rem; }
  .cookie-bar__actions .btn { padding-inline: 1rem; }
}


/* --- Kadar uspravne slike pomaknut prema vrhu — 20. rujna 2026. ------- */
/* .htw-colimg rezi sliku na 520 px s kadrom po sredini, sto kod uspravne
   fotografije odsijece vrh motiva. Klasa je nova i stoji samo na slici
   druge radionice; nijedno postojece pravilo se ne mijenja. */
body.longform .htw-colimg--top img { object-position: center top; }