/* ==========================================================================
   DUBRAVKA — dizajn sustav, Početna, O meni, Usluge, Radovi i suradnje, Kontakt (Phase 1)
   Ručno pisano, bez frameworka. Odluke i obrazloženja: docs/design/DESIGN-SYSTEM.md
   Prijelomne točke: telefon < 700 px · tablet 700–1099 px · računalo ≥ 1100 px
   ========================================================================== */

/* ── fontovi: samostalno posluženi, OFL (public/assets/fonts/*-OFL.txt) ── */

@font-face {
  font-family: 'Newsreader Display'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/newsreader-display-normal-latin-hr.woff2') format('woff2');
  /* + č ć đ š ž (scripts/fonts/croatian-merge.py): naslov s hrvatskim slovom slaže se iz jednog reza. */
  unicode-range: U+0000-00FF, U+0106-0107, U+010C-010D, U+0110-0111, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader Display'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('../fonts/newsreader-display-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-0105, U+0108-010B, U+010E-010F, U+0112-015F, U+0162-017C, U+017F-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader Text'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/newsreader-text-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader Text'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/newsreader-text-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/instrument-sans-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/instrument-sans-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── tokeni ─────────────────────────────────────────────────────────────── */

:root {
  /* Paleta iz audita §9. Bez naglasne boje: boju nose fotografije. */
  --ink: #0e0d0b;
  --ivory: #f0ebe2;
  --paper: #e7dfd4;
  --muted: #655c52;          /* na ivory i paper ≥ 4.5:1 (tests/unit_design.php) */
  --muted-on-ink: #b3a898;   /* na ink ≥ 4.5:1 */
  --rule: rgba(14, 13, 11, .2);
  --rule-on-ink: rgba(240, 235, 226, .22);
  --error: #8f2a1c;          /* samo poruke obrasca; na ivory 7.0:1, na paper 6.3:1 */
  --scrim: 14, 13, 11;

  --display: 'Newsreader Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --text: 'Newsreader Text', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --gutter: 16px;                       /* bočni rub stranice */
  --frame-gap: clamp(6px, .8vw, 14px);  /* razmak među kadrovima */
  --header-h: 60px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Natpis DUBRAVKA: omjer širine riječi i veličine fonta (Newsreader Display
     300, razmak slova .02em), izmjeren u pregledniku. */
  --name-ratio: 5.67;
}

@media (min-width: 700px)  { :root { --gutter: 24px; --header-h: 68px; } }
@media (min-width: 1100px) { :root { --gutter: clamp(24px, 2.4vw, 44px); --header-h: 76px; } }

/* ── osnova ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.on-ink :focus-visible, .page-home .site-header :focus-visible { outline-color: var(--ivory); }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 50;
  background: var(--ink); color: var(--ivory);
  font: 500 13px/1 var(--sans); letter-spacing: .08em;
  padding: 14px 18px; text-decoration: none;
}
.skip:focus { top: 12px; outline-color: var(--ivory); }

.wrap { max-width: 1680px; margin: 0 auto; padding: 0 var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Oznake, gumbi, izbornik: jedini sans na stranici, uvijek ista mjera. */
.label, .button, .link-rule, .video-cta__label, .site-nav__link, .lang__link, .menu-toggle__label, .hero__signature {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── gumbi i poveznice ──────────────────────────────────────────────────── */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  background: var(--ink); color: var(--ivory);
  text-decoration: none;
  transition: background-color .25s var(--ease);
}
.button:hover { background-color: #2b2824; }

/* Tekstualna poveznica s kratkom crtom ispred (iz reference, audit §9). */
.link-rule {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px;
  text-decoration: none;
}
.link-rule::before {
  content: ''; width: 28px; height: 1px; background: currentColor;
  transition: width .3s var(--ease);
}
.link-rule:hover::before { width: 44px; }

.video-cta {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  text-decoration: none;
}
.video-cta__icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.video-cta__icon svg { margin-left: 2px; }
.video-cta:hover .video-cta__icon { background: currentColor; }
.video-cta:hover .video-cta__icon svg { color: var(--ink); }

/* ── zaglavlje ──────────────────────────────────────────────────────────── */

.site-header { position: relative; z-index: 30; background: var(--ivory); color: var(--ink); }
.site-header__bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: 4px;
  padding: 0 var(--gutter);
}
.brand {
  font-family: var(--display); font-weight: 300;
  font-size: 19px; line-height: 1; letter-spacing: .24em;
  margin-right: auto;
  padding: 12px 0;
  text-decoration: none;
}
.lang__list, .site-nav__list { list-style: none; margin: 0; padding: 0; }
.lang__list { display: flex; }
.lang__link {
  display: grid; place-items: center;
  min-width: 40px; min-height: 44px;
  color: var(--muted); text-decoration: none;
}
.lang__link[aria-current] { color: inherit; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.lang__link:hover { color: inherit; }

.menu-toggle {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 0 0 14px; margin-left: 4px;
  background: none; border: 0; color: inherit; cursor: pointer;
}
.menu-toggle[hidden] { display: none; }
.menu-toggle__bars { position: relative; width: 22px; height: 9px; }
.menu-toggle__bars::before, .menu-toggle__bars::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle__bars::before { top: 0; }
.menu-toggle__bars::after { top: 8px; }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::before { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__bars::after { top: 4px; transform: rotate(-45deg); }

/* Telefon i tablet: samo ikona; oznaka ostaje za čitače zaslona (ime gumba).
   Odobreno nakon vizualnog pregleda 13. 10. 2026.: bez vidljivog „Izbornik” i na tabletu. */
@media (max-width: 1099.98px) {
  .menu-toggle { padding: 0 0 0 10px; min-width: 44px; justify-content: flex-end; }
  .menu-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
@media (max-width: 699.98px) {
  .brand { font-size: 16px; letter-spacing: .26em; }
}

/* Ispod 1100 px: izbornik je ploča ispod trake. Bez JavaScripta: red poveznica. */
@media (max-width: 1099.98px) {
  .site-header__bar { flex-wrap: wrap; }
  .site-nav { order: 9; width: 100%; padding-bottom: 10px; }
  .site-nav__list { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .site-nav__link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

  .js .site-header__bar { flex-wrap: nowrap; }
  .js .site-nav {
    position: fixed; z-index: 29;
    inset: var(--header-h) 0 0 0;
    /* Revizija 22. 10. 2026.: popis niže i manjim slovima. */
    padding: clamp(56px, 13svh, 128px) var(--gutter) 40px;
    background: var(--ivory);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity .25s var(--ease), visibility 0s linear .25s;
  }
  .js .site-header.is-open .site-nav { visibility: visible; opacity: 1; transition-delay: 0s; }
  .js .site-nav__list { display: block; border-top: 1px solid var(--rule); }
  .js .site-nav__list li { border-bottom: 1px solid var(--rule); }
  .js .site-nav__link {
    display: flex; align-items: center; min-height: 56px;
    font-family: var(--display); font-weight: 300;
    font-size: clamp(24px, 6vw, 32px); letter-spacing: -.004em; text-transform: none;
  }
  .js .site-nav__link[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
  .js .site-header.is-open { position: sticky; top: 0; }
  html.menu-open { overflow: hidden; }
}

@media (min-width: 1100px) {
  .site-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; }
  .brand { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; font-size: 20px; }
  .site-nav { grid-column: 2; grid-row: 1; }
  .menu-toggle { display: none !important; }
  .site-nav__list { display: flex; gap: clamp(20px, 2.2vw, 40px); }
  .site-nav__link {
    display: inline-flex; align-items: center; min-height: 44px;
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) left calc(50% + 12px) / 0 1px no-repeat;
    transition: background-size .3s var(--ease);
  }
  .site-nav__link:hover, .site-nav__link[aria-current] { background-size: 100% 1px; }
  .lang { grid-column: 3; grid-row: 1; justify-self: end; }
}

/* Početna na tabletu i računalu: zaglavlje stoji na tamnoj podlozi glavnog vizuala. */
@media (min-width: 700px) {
  .page-home .site-header { background: var(--ink); color: var(--ivory); }
  .page-home .lang__link { color: var(--muted-on-ink); }
  .page-home .lang__link[aria-current], .page-home .lang__link:hover { color: var(--ivory); }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .js .page-home .site-nav { background: var(--ink); }
  .js .page-home .site-nav__list, .js .page-home .site-nav__list li { border-color: var(--rule-on-ink); }
}

/* ── glavni vizual ──────────────────────────────────────────────────────── */

/* Revizija klijentice 22. 10. 2026.: pet kadrova istim redom na svim širinama.
   Telefon (zadano): natpis i potpis (desno) na svijetloj podlozi, pa kadrovi u jednom
   vodoravnom nizu od ruba do ruba zaslona, koji se pomiče prstom unutar sebe
   (scroll-snap) — stranica nikad nije šira od prozora — pa odmah ispod gumb za video.
   Kadar je u omjeru izreza (1 : 2), pa se na telefonu ništa ne reže; vidi se gotovo
   dva kadra, a dio trećeg pokazuje da niz ide dalje. */
.hero {
  --strip-w: min(calc((100vw - 2 * var(--gutter) - 8px) / 1.8), 260px);
  position: relative; display: flex; flex-direction: column; padding: 0 var(--gutter);
}
.hero__type, .hero__bar { display: contents; }
.hero__name {
  order: 1; padding-top: clamp(14px, 5vw, 26px);
  font-family: var(--display); font-weight: 300;
  font-size: calc((100vw - 2 * var(--gutter)) / var(--name-ratio));
  line-height: .84;
  letter-spacing: .02em; margin-right: -.02em;
  white-space: nowrap; text-align: center;
}
/* Potpis u sredini ispod imena (klijentica 22. 10. 2026., prije desno), korak manji od
   ostalih oznaka; desna margina poništava razmak iza zadnjeg slova pa je optički u sredini. */
.hero__signature { order: 2; margin: 14px -.3em 0 0; text-align: center; color: var(--muted); font-size: 11px; letter-spacing: .3em; }
.hero__frames {
  order: 3; display: flex; gap: 8px;
  margin: clamp(16px, 5vw, 26px) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.hero__frames::-webkit-scrollbar { display: none; }
.hero__frames:focus-visible { outline-offset: -2px; }
.frame { position: relative; margin: 0; overflow: hidden; background: var(--paper); }
.hero__frames > .frame { flex: 0 0 var(--strip-w); aspect-ratio: 1 / 2; scroll-snap-align: start; }
.frame__img { width: 100%; height: 100%; object-fit: cover; }
.hero__video { order: 4; align-self: center; margin-top: 8px; }

/* Tablet i računalo: kadrovi pune visine na tamnoj podlozi, natpis preko njih.
   Gumb za video (u sredini) i potpis (desno) stoje u tamnoj traci ispod kadrova,
   nikad na fotografiji — namjerno nesimetrično. */
@media (min-width: 700px) {
  .hero {
    --hero-h: max(calc(66svh - var(--header-h)), 480px);
    --bar: clamp(56px, 7svh, 72px);
    display: block;
    height: var(--hero-h);
    padding: 0 var(--frame-gap) var(--bar);
    background: var(--ink); color: var(--ivory);
  }
  .hero__frames {
    display: grid; height: 100%; margin: 0; padding: 0; overflow: visible;
    gap: var(--frame-gap); grid-template-columns: 1fr .9fr 1.15fr .9fr 1fr;
  }
  .hero__frames > .frame { height: 100%; aspect-ratio: auto; background: #1c1a17; }

  /* Izrez 1:2 centriran na žarište; okomito iz assets-images.csv.
     P07 ima lice niže u kadru (40–62 %), pa se u širokim kadrovima (kad se
     izrez reže okomito) prozor spušta: lice se diže, dalje od natpisa. */
  .frame--p11 .frame__img { object-position: 50% 26%; }
  .frame--p03 .frame__img { object-position: 50% 29%; }
  .frame--p07 .frame__img { object-position: 50% 70%; }
  .frame--p16 .frame__img { object-position: 50% 39%; }
  .frame--p01 .frame__img { object-position: 50% 22%; }
  .frame--p19 .frame__img { object-position: 49% 15%; }
  .frame--p20 .frame__img { object-position: 48% 23%; }

  /* Zatamnjenje samo iza natpisa, kao sloj — pikseli fotografije se ne mijenjaju.
     Počinje ispod lica u svakom kadru (tests/browser/face-safety.js). Jačina je
     izmjerena na snimkama: na bijeloj podlozi (P01, P19, P20 studio, P11 pista) natpis
     treba ≥ 55 % tinte u visini vrha slova za 3:1 (tests/browser/wordmark-contrast.py). */
  .frame::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: var(--scrim-top, 50%);
    background: linear-gradient(to bottom, rgba(var(--scrim), 0), rgba(var(--scrim), .5) 45%, rgba(var(--scrim), .72));
    pointer-events: none;
  }
  .frame--p11 { --scrim-top: 34%; }
  .frame--p03 { --scrim-top: 46%; }
  .frame--p07 { --scrim-top: 64%; }
  .frame--p16 { --scrim-top: 50%; }
  .frame--p01 { --scrim-top: 32%; }
  .frame--p19 { --scrim-top: 28%; }
  .frame--p20 { --scrim-top: 36%; }
  /* Nove fotografije iz administracije (faza B): bez vlastitih pravila gore —
     položaj slike i početak zatamnjenja dolaze iz žarišta i okvira lica, u
     koracima od 5 % (templates/partials/hero.php, media_face_entry()).
     Zatamnjenje počinje najkasnije na 50 %, pa lice mora biti iznad toga. */
  [class*="frame--ox-"] .frame__img { object-position: var(--ox, 50%) var(--oy, 50%); }
  .frame--ox-0 { --ox: 0%; } .frame--ox-5 { --ox: 5%; } .frame--ox-10 { --ox: 10%; }
  .frame--ox-15 { --ox: 15%; } .frame--ox-20 { --ox: 20%; } .frame--ox-25 { --ox: 25%; }
  .frame--ox-30 { --ox: 30%; } .frame--ox-35 { --ox: 35%; } .frame--ox-40 { --ox: 40%; }
  .frame--ox-45 { --ox: 45%; } .frame--ox-50 { --ox: 50%; } .frame--ox-55 { --ox: 55%; }
  .frame--ox-60 { --ox: 60%; } .frame--ox-65 { --ox: 65%; } .frame--ox-70 { --ox: 70%; }
  .frame--ox-75 { --ox: 75%; } .frame--ox-80 { --ox: 80%; } .frame--ox-85 { --ox: 85%; }
  .frame--ox-90 { --ox: 90%; } .frame--ox-95 { --ox: 95%; } .frame--ox-100 { --ox: 100%; }
  .frame--oy-0 { --oy: 0%; } .frame--oy-5 { --oy: 5%; } .frame--oy-10 { --oy: 10%; }
  .frame--oy-15 { --oy: 15%; } .frame--oy-20 { --oy: 20%; } .frame--oy-25 { --oy: 25%; }
  .frame--oy-30 { --oy: 30%; } .frame--oy-35 { --oy: 35%; } .frame--oy-40 { --oy: 40%; }
  .frame--oy-45 { --oy: 45%; } .frame--oy-50 { --oy: 50%; } .frame--oy-55 { --oy: 55%; }
  .frame--oy-60 { --oy: 60%; } .frame--oy-65 { --oy: 65%; } .frame--oy-70 { --oy: 70%; }
  .frame--oy-75 { --oy: 75%; } .frame--oy-80 { --oy: 80%; } .frame--oy-85 { --oy: 85%; }
  .frame--oy-90 { --oy: 90%; } .frame--oy-95 { --oy: 95%; } .frame--oy-100 { --oy: 100%; }
  .frame--st-30 { --scrim-top: 30%; } .frame--st-35 { --scrim-top: 35%; } .frame--st-40 { --scrim-top: 40%; }
  .frame--st-45 { --scrim-top: 45%; } .frame--st-50 { --scrim-top: 50%; }

  /* Širinu bloka određuje natpis (najmanje 760 px, da na tabletu gumb i potpis ne
     stoje jedan uz drugi); traka ispod je iste širine: gumb u sredini, potpis desno. */
  .hero__type {
    position: absolute; left: 50%; bottom: 0;
    transform: translateX(-50%);
    display: block; min-width: min(calc(100% - 2 * var(--frame-gap)), 760px);
    padding: 0; text-align: left;
  }
  .hero__bar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; height: var(--bar);
  }
  /* Veličina natpisa: po širini, ali i po visini kadra — vrh slova ostaje
     ispod najniže brade (P07 na 62 % visine). Tekst je visok 0,92 em iznad
     dna retka, pa: 0,41 × visina kadra − 34 px (izmjereno, audit §12). */
  .hero__name {
    padding: 0;
    font-size: min(calc(84vw / var(--name-ratio)), calc(.41 * (var(--hero-h) - var(--bar)) - 34px));
    margin-bottom: clamp(6px, 1.2vh, 16px);
    color: var(--ivory);
  }
  .hero__signature { grid-column: 3; grid-row: 1; justify-self: end; margin: 0 -.3em 0 0; color: var(--ivory); }
  .hero__video { grid-column: 2; grid-row: 1; display: inline-flex; margin: 0; color: var(--ivory); }
  /* Na tamnoj podlozi obrub fokusa je svijetao (na telefonu je glavni vizual na svijetloj). */
  .hero :focus-visible { outline-color: var(--ivory); }
}

@media (min-width: 700px) and (orientation: landscape) and (max-width: 1099.98px) {
  .hero { --hero-h: max(calc(84svh - var(--header-h)), 500px); }
}
/* Uski tablet: traka je jedva šira od gumba i potpisa, pa potpis dobiva manji razmak slova. */
@media (min-width: 700px) and (max-width: 899.98px) {
  .hero__signature { letter-spacing: .2em; margin-right: -.2em; }
}

@media (min-width: 1100px) {
  .hero { --hero-h: max(calc(100svh - var(--header-h)), 560px); }
  .hero__name { font-size: min(calc(76vw / var(--name-ratio)), calc(.41 * (var(--hero-h) - var(--bar)) - 34px), 224px); }
}

/* ── uvod (H1) ──────────────────────────────────────────────────────────── */

.intro { padding: clamp(36px, 7vw, 116px) 0 clamp(64px, 9vw, 140px); }
.intro__grid { display: grid; gap: 26px; }
.intro__title {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(38px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.012em;
  max-width: 13ch;
  text-wrap: balance;
}
.intro__text { font-size: clamp(18px, 1.3vw, 21px); line-height: 1.6; max-width: 33em; }
.intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin-top: 32px; }

@media (max-width: 699.98px) {
  .intro { padding-top: 40px; }
  .intro__actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .intro__actions .button { width: 100%; margin-bottom: 8px; }
}
@media (min-width: 960px) {
  .intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 128px); align-items: end; }
  .intro__body { padding-bottom: .35em; }
}

/* Početna: veliki naslovi odjeljaka u sredini (revizija klijentice 22. 10. 2026.).
   Uvod je kratak, pa i tekst i gumbi idu u sredinu, kao kod „Imate projekt na umu”. */
.page-home .intro__grid { justify-items: center; text-align: center; }
.page-home .intro__title { max-width: 15ch; }
.page-home .intro__text { margin-inline: auto; }
.page-home .intro__actions { justify-content: center; }
@media (min-width: 960px) {
  .page-home .intro__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .page-home .intro__body { padding-bottom: 0; }
}

/* ── odjeljci: zajedničko ───────────────────────────────────────────────── */

:root {
  --section-y: clamp(72px, 9vw, 152px);
  --col-gap: clamp(16px, 2vw, 32px);
}

.section { padding: var(--section-y) 0; }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--ivory); }
.section--ink :focus-visible, .site-footer :focus-visible { outline-color: var(--ivory); }
/* Gumb na tamnoj podlozi: obrnut (pravilo kuće — .section--ink a ne smije pobijediti .button). */
.section--ink .button { background: var(--ivory); color: var(--ink); }
.section--ink .button:hover { background-color: var(--paper); }
figure { margin: 0; }

.h2 {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(34px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -.01em;
  text-wrap: balance;
}
.prose { font-size: clamp(18px, 1.25vw, 20px); line-height: 1.62; max-width: 34em; }
.prose + .prose { margin-top: 1em; }

/* ── Početna: „Pred kamerom…” i „Kako krenuti…” (urednički par) ─────────── */

/* Naslov u sredini iznad para (revizija 22. 10. 2026.). Telefon i tablet:
   naslov → slika → tekst → poveznica, slika u svom omjeru. */
.split__grid {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'title' 'media' 'text' 'action';
}
.split__title { grid-area: title; max-width: 16ch; justify-self: center; text-align: center; }
.split__media { grid-area: media; margin-top: 32px; }
.split__img { width: 100%; height: auto; }
.split__text { grid-area: text; margin-top: 28px; }
.split__action { grid-area: action; margin-top: 20px; }
.intro + .split { padding-top: 0; }

/* Savjetovanje je na telefonu i tabletu u sredini kao „Pred kamerom…” (klijentica
   22. 10. 2026.; prije uvučeno udesno). */
@media (min-width: 700px) {
  .split__media { width: min(100%, 460px); justify-self: center; }
}
/* Računalo: naslov preko cijele širine, ispod slika 5/12 i tekst 6/12 sredinom
   visine slike; kod savjetovanja obrnuto. */
@media (min-width: 900px) {
  .split__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr auto auto 1fr;
    grid-template-areas: 'title title title' 'media . .' 'media . text' 'media . action' 'media . .';
  }
  .split--reverse .split__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
    grid-template-areas: 'title title title' '. . media' 'text . media' 'action . media' '. . media';
  }
  .split__title { max-width: 20ch; margin-bottom: clamp(48px, 5vw, 80px); }
  .split__media, .split--reverse .split__media { width: 100%; margin: 0; }
  .split__text { margin-top: 0; }
  .split__action { margin-top: 28px; }
}

/* ── Početna: četiri načina suradnje (kazalo, bez kartica) ─────────────── */

.ways__head { display: grid; gap: 24px; justify-items: center; text-align: center; }
.ways__list { list-style: none; margin: clamp(40px, 6vw, 88px) 0 0; padding: 0; border-top: 1px solid var(--rule); }
.ways__row {
  position: relative;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 6px; row-gap: 12px;
  align-items: baseline;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--rule);
}
.ways__num { font: 500 12px/1 var(--sans); letter-spacing: .16em; color: var(--muted); }
.ways__title {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(28px, 3.3vw, 50px); line-height: 1.06; letter-spacing: -.008em;
  text-wrap: balance;
}
.ways__link {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 96% / 0 1px no-repeat;
  transition: background-size .35s var(--ease);
}
/* Cijeli red vodi na poglavlje; ime poveznice ostaje kratko (naslov skupine). */
.ways__link::after { content: ''; position: absolute; inset: 0; }
.ways__row:hover .ways__link { background-size: 100% 1px; }
.ways__text { grid-column: 2; max-width: 30em; }
.ways__action { margin-top: clamp(32px, 4vw, 48px); }

@media (min-width: 900px) {
  .ways__row { grid-template-columns: minmax(0, 1fr) minmax(0, 6fr) minmax(0, 5fr); column-gap: 0; padding: 34px 0 40px; }
  .ways__text { grid-column: 3; }
  .ways__action { display: flex; justify-content: flex-end; }
}

/* ── Početna: odabrani radovi (drugo tamno poglavlje) ───────────────────── */

/* Revizija 22. 10. 2026.: bez videa, četiri fotografije. Naslov i tekst u sredini.
   Telefon: P06 u punoj mjeri, dvije uspravne u paru, kvadrat u sredini.
   Tablet i računalo: dva reda iste visine (širina razmjerna omjeru izreza, kao
   galerija na Radovima — ništa se ne reže); drugi red na užoj mjeri, u sredini. */
.work__head { display: grid; gap: 24px; justify-items: center; text-align: center; }
.work__title { max-width: 16ch; }
.work__photos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: clamp(40px, 6vw, 96px);
}
.work__row { display: contents; }
.work__photo--wide { grid-column: 1 / -1; order: -1; margin-inline: calc(-1 * var(--gutter)); }
.work__photo--square { grid-column: 1 / -1; order: 1; justify-self: center; width: 67%; margin-top: 30px; }
.work__img { width: 100%; height: auto; }
.work__action { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 64px); }

@media (min-width: 700px) {
  .work__photos { display: block; }
  .work__row { display: flex; align-items: flex-start; gap: clamp(10px, 1.1vw, 18px); }
  .work__row + .work__row { margin-top: clamp(10px, 1.1vw, 18px); }
  .work__photo { flex: var(--ratio) 1 0; min-width: 0; margin: 0; width: auto; }
  .work__photo--r45 { --ratio: .8; }
  .work__photo--wide { --ratio: 1.5; }
  .work__photo--square { --ratio: 1; }
  .work__row--narrow { width: calc(100% * 10 / 12); margin-inline: auto; }
}
@media (min-width: 1100px) {
  .work__row--narrow { width: calc(100% * 8 / 12); }
}

/* ── Početna: „Imate projekt na umu” — zatišje prije podnožja ──────────── */

.closing { padding: clamp(96px, 13vw, 210px) 0; text-align: center; }
.closing__inner { display: grid; justify-items: center; }
.closing__title {
  margin: 0; max-width: 12ch;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(46px, 8.4vw, 140px); line-height: .98; letter-spacing: -.02em;
  text-wrap: balance;
}
.closing__text { margin-top: clamp(24px, 3vw, 40px); max-width: 30em; }
.closing__action { margin-top: clamp(32px, 4vw, 48px); }

/* ── podnožje ───────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink); color: var(--ivory);
  border-top: 1px solid var(--rule-on-ink);
  padding: clamp(48px, 6vw, 88px) 0 clamp(20px, 2.4vw, 32px);
}
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'brand brand' 'place place' 'reach reach' 'social social' 'legal legal' 'copy credit';
}
.site-footer__brand { grid-area: brand; }
.site-footer__place { grid-area: place; }
.site-footer__social { grid-area: social; }
.site-footer__legal { grid-area: legal; }
.site-footer__brand { font-family: var(--display); font-weight: 300; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; letter-spacing: .24em; }
.site-footer__place { margin-top: 12px; color: var(--muted-on-ink); font-size: 16px; }
/* E-pošta i telefon (vlasnik 22. 10. 2026.): ispod mjesta, iste mjere i boje — sporedno, bez okvira. */
.site-footer__reach { grid-area: reach; list-style: none; margin: 6px 0 0; padding: 0; color: var(--muted-on-ink); font-size: 16px; line-height: 1.55; }
.site-footer__reach-link {
  display: inline-flex; align-items: center; min-height: 32px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 11px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.site-footer__reach-link:hover, .site-footer__reach-link:focus-visible { background-size: 100% 1px; color: var(--ivory); }
.site-footer__social, .site-footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 26px; }
/* Ikone mreža (DOCX ¶10): kvadrat 44 px za dodir, crtež 24 px; lijevi rub crteža poravnat s tekstom iznad. */
.site-footer__social { margin-top: 18px; margin-left: -10px; column-gap: 4px; }
.site-footer__icon-link {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  background: linear-gradient(currentColor, currentColor) 50% calc(50% + 18px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.site-footer__icon-link:hover { background-size: 24px 1px; }
.site-footer__icon { display: block; width: 24px; height: 24px; }
.site-footer__legal { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--rule-on-ink); }
.site-footer__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 17px; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + 12px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.site-footer__link:hover { background-size: 100% 1px; }
/* Vlasnik 21. 10. 2026.: „Web by Trik” u istom retku — na telefonu uz autorsku oznaku, od 900 px između nje i pravnih poveznica. */
.site-footer__copy { grid-area: copy; align-self: center; margin-top: 16px; color: var(--muted-on-ink); font-size: 14px; }
.site-footer__credit { grid-area: credit; align-self: center; margin: 16px 0 0 16px; color: var(--muted-on-ink); }
.site-footer__credit .site-footer__link { font-size: 14px; }

@media (min-width: 900px) {
  .site-footer__grid { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'brand brand social' 'place place social' 'reach reach social' 'copy credit legal'; }
  .site-footer__social { align-self: start; justify-content: flex-end; margin: -10px -10px 0 0; }
  /* Jedna crta preko cijele širine: sve tri ćelije donjeg reda nose isti rub. */
  .site-footer__copy, .site-footer__credit, .site-footer__legal { align-self: stretch; margin: clamp(48px, 5vw, 72px) 0 0; padding-top: 12px; border-top: 1px solid var(--rule-on-ink); }
  .site-footer__copy { display: flex; align-items: center; }
  .site-footer__credit { display: flex; align-items: center; justify-content: center; padding-left: 24px; padding-right: 24px; }
  .site-footer__legal { justify-content: flex-end; }
}

/* ── stranice: zajednički naslovi ───────────────────────────────────────── */

.page-head { padding: clamp(40px, 7vw, 120px) 0 clamp(36px, 5vw, 80px); }
.page-title {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(46px, 9vw, 168px); line-height: .94; letter-spacing: -.025em;
  text-wrap: balance;
}
/* O meni: naslov na telefonu u sredini (klijentica 22. 10. 2026.). */
@media (max-width: 699.98px) {
  .page-about .page-title { text-align: center; }
}
.lead {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(24px, 2.1vw, 32px); line-height: 1.32; letter-spacing: -.004em;
  max-width: 24em;
}
.h2-sub {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(28px, 2.8vw, 44px); line-height: 1.1; letter-spacing: -.006em;
  text-wrap: balance;
}

/* ── O meni ─────────────────────────────────────────────────────────────── */

.about-open__grid { display: grid; gap: 36px; }
.about-open__img { width: 100%; height: auto; }
.about-open__body .h2-sub { margin-top: clamp(48px, 5vw, 80px); }
.about-open__body .h2-sub + .prose { margin-top: 20px; }

/* Prijelom: slika na granici dviju podloga — priča prelazi iza kamere. */
.about-break {
  margin-top: clamp(72px, 9vw, 152px);
  background: linear-gradient(var(--ivory) 50%, var(--paper) 50%);
}
.about-break__img { width: 100%; height: auto; }
/* P10 je malen original (1205 px): vodoravni izrez stoji u sredini, najviše 880 px širok. */
.about-break__figure { max-width: calc(880px + 2 * var(--gutter)); }

.about-rest { background: var(--paper); padding: clamp(56px, 7vw, 120px) 0 var(--section-y); }
.chapter { display: grid; gap: 20px; padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); border-top: 1px solid var(--rule); }
.about-next { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--rule); }

@media (min-width: 700px) {
  .about-open__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(28px, 4vw, 64px); align-items: start; }
}
@media (min-width: 900px) {
  .chapter, .about-next { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 5fr) minmax(0, 1fr); }
  .chapter { gap: 0; }
  .chapter__title { grid-column: 1; }
  .chapter__text { grid-column: 3; }
  .about-next { display: grid; }
  .about-next > * { grid-column: 3; }
}
@media (min-width: 1100px) {
  .about-open__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 5fr) minmax(0, 1fr); column-gap: 0; }
  .about-open__body { grid-column: 3; }
}

/* ── Usluge ─────────────────────────────────────────────────────────────── */

/* Bez fotografija (revizija klijentice 22. 10. 2026.): broj, naslov, tekst i crte. */
.page-intro { padding-bottom: clamp(48px, 6vw, 96px); }

.services { padding-bottom: var(--section-y); }
.service {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'num' 'title' 'text';
  padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 16px;
}
.service:last-of-type { border-bottom: 1px solid var(--rule); }
.service__num { grid-area: num; font: 500 12px/1 var(--sans); letter-spacing: .16em; color: var(--muted); }
.service__title {
  grid-area: title; margin: 14px 0 0; max-width: 16ch;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(32px, 3.8vw, 58px); line-height: 1.04; letter-spacing: -.01em;
  text-wrap: balance;
}
.service__text { grid-area: text; margin-top: 22px; }

@media (min-width: 900px) {
  .service {
    grid-template-columns: minmax(0, 1fr) minmax(0, 5fr) minmax(0, 1fr) minmax(0, 5fr);
    grid-template-areas: 'num title . text';
    align-items: baseline;
  }
  .service__title, .service__text { margin-top: 0; }
}

.start__grid { display: grid; gap: 28px; }
.start__action { margin-top: 32px; }
@media (max-width: 699.98px) {
  .start__action .button { width: 100%; }
}
@media (min-width: 960px) {
  .start__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 128px); align-items: end; }
  .start__title { font-size: clamp(40px, 5.6vw, 88px); }
}

/* ── Radovi i suradnje ──────────────────────────────────────────────────── */

/* Uvod: naslov i tekst u sredini (revizija klijentice 22. 10. 2026.; prije dijagonala). */
.work-open { padding: clamp(40px, 7vw, 120px) 0 clamp(64px, 9vw, 152px); }
.work-open__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px; justify-items: center; text-align: center; }
.work-open__title {
  margin: 0;
  font-family: var(--display); font-weight: 300;
  /* Telefon: mjera po širini, da „and collaborations” stane u jedan redak i na 360 px. */
  font-size: clamp(40px, 11.6vw, 72px); line-height: .95; letter-spacing: -.024em;
  text-wrap: balance;
}
.work-open__text { font-size: clamp(18px, 1.3vw, 21px); line-height: 1.6; max-width: 33em; }

@media (min-width: 700px) {
  .work-open__title { font-size: clamp(66px, 9.4vw, 160px); }
}
@media (min-width: 900px) {
  .work-open__grid { row-gap: clamp(32px, 3.6vw, 56px); }
}

/* Zid brendova. Svaka kopija logotipa nacrtana je na istom platnu 200 × 80
   (config/logo-plan.json), s optičkom veličinom već u datoteci — zato je ovdje
   jedno pravilo, bez okvira i bez veličina po logotipu. Redovi su centrirani:
   2 u redu na telefonu, 3 od 480 px, 4 na tabletu, 6 na računalu (6·6·6·6·5). */
.brands__title { max-width: 14ch; margin-inline: auto; text-align: center; }
.brands__wall {
  list-style: none; margin: clamp(36px, 6vw, 96px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  row-gap: clamp(10px, 2.2vw, 36px);
}
.brands__item { flex: 0 0 50%; display: grid; place-items: center; container-type: inline-size; }
.brands__logo { width: 100%; height: auto; }
/* Brend bez dostavljenog logotipa: naziv u display rezu, u mjeri platna. */
.brands__name {
  font-family: var(--display); font-weight: 300;
  font-size: 19px; font-size: 10.6cqw; line-height: 1; letter-spacing: -.004em;
  white-space: nowrap;
}

@media (min-width: 480px)  { .brands__item { flex-basis: 33.333%; } }
@media (min-width: 700px)  { .brands__item { flex-basis: 25%; } }
@media (min-width: 1100px) { .brands__item { flex-basis: 16.666%; } }

/* Fotografije. Šest cjelina (A–F); unutar cjeline mali razmak, među cjelinama
   stanka. Pločica je uvijek u omjeru svog izreza — ništa se ne reže u CSS-u.

   Telefon: mreža od šest stupaca na jednoj osi (revizija 22. 10. 2026.): ležeći i
   gotovo kvadratni kadar u punoj mjeri, sam portret u sredini (4 od 6 stupaca),
   dva portreta u paru — bez naizmjeničnog uvlačenja lijevo i desno. */
.gallery { --shot-gap: 8px; --spread-gap: clamp(44px, 12vw, 72px); }
.spread { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--shot-gap); align-items: start; }
.spread + .spread { margin-top: var(--spread-gap); }
.shot { min-width: 0; }
.shot__link { display: block; }
.js .shot__link { cursor: zoom-in; }
.shot__img { width: 100%; height: auto; }
.shot__brand {
  margin-top: 10px;
  font: 500 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;   /* u paru na telefonu naziv teče ispod susjedne pločice, ne lomi se */
}
.shot--at-full { grid-column: 1 / -1; }
.shot--at-center { grid-column: 2 / span 4; }
.shot--at-half { grid-column: span 3; }

/* Tablet i računalo: red u kojem svaka pločica dobiva širinu razmjernu svom
   omjeru, pa su sve u redu iste visine bez ijednog izreza u CSS-u. */
@media (min-width: 700px) {
  .gallery { --shot-gap: clamp(10px, 1.1vw, 18px); --spread-gap: clamp(48px, 6.4vw, 108px); }
  .spread { display: flex; }
  .shot { flex: var(--ratio) 1 0; margin-inline: 0; }
  .shot--r23 { --ratio: .6667; }
  .shot--r34 { --ratio: .75; }
  .shot--r45 { --ratio: .8; }
  .shot--near { --ratio: .939; }
  .shot--r43 { --ratio: 1.3333; }
}
/* Računalo: B i F stoje na užoj mjeri (10 od 12 stupaca), u sredini. U punoj
   širini B je viša od prozora prijenosnog računala; uža mjera uz to mijenja ritam,
   pa galerija nije niz jednako širokih redova. */
@media (min-width: 1100px) {
  .spread--b, .spread--f { width: calc(100% * 10 / 12); margin-inline: auto; }
}

/* Video radovi na tamnoj podlozi: pet okomitih naslovnica. Oznaka reprodukcije
   i naziv brenda stoje ispod naslovnice (kao na Početnoj), nikad na slici. */
.films__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 20px; }
.film { display: block; color: inherit; text-decoration: none; }
.film__img { width: 100%; height: auto; }
.film__caption { display: flex; align-items: center; gap: 12px; margin-top: 12px; min-height: 44px; }
.film:hover .video-cta__icon { background: currentColor; }
.film:hover .video-cta__icon svg { color: var(--ink); }

/* Telefon: desni stupac spušten za pola naslovnice — pet komada u dva stupca
   bez rupe (lijevo tri, desno dva), redoslijed čitanja ostaje cik-cak. */
@media (max-width: 699.98px) {
  .films__item:nth-child(even) { translate: 0 50%; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .films__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 32px; }
  .films__item:nth-child(4) { grid-column: 2; }
}
@media (min-width: 1100px) {
  .films { --film-step: clamp(36px, 5vw, 88px); }
  .films__list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(16px, 1.8vw, 30px); padding-bottom: var(--film-step); }
  .films__item:nth-child(even) { translate: 0 var(--film-step); }
}

/* Optička veličina logotipa iz admina, u odnosu na uravnoteženu kopiju (1,00);
   raspon 0,70–1,30 u koracima od 5 % (Cms::SCALE_MIN/MAX). */
.brands__logo--s70 { scale: 0.7; }
.brands__logo--s75 { scale: 0.75; }
.brands__logo--s80 { scale: 0.8; }
.brands__logo--s85 { scale: 0.85; }
.brands__logo--s90 { scale: 0.9; }
.brands__logo--s95 { scale: 0.95; }
.brands__logo--s105 { scale: 1.05; }
.brands__logo--s110 { scale: 1.1; }
.brands__logo--s115 { scale: 1.15; }
.brands__logo--s120 { scale: 1.2; }
.brands__logo--s125 { scale: 1.25; }
.brands__logo--s130 { scale: 1.3; }

/* ── Kontakt ────────────────────────────────────────────────────────────── */

/* Revizija klijentice 22. 10. 2026. („neuredno”): računalo — lijevo H1, uvod,
   podaci i Česta pitanja, desno obrazac; oba stupca počinju istom crtom i podjednako
   su visoka. Ispod 1100 px jedno ispod drugoga: uvod, obrazac (odvojen crtom), pitanja
   na papirnatoj traci do podnožja. Bez kartica i ikona: polje je oznaka, crta i tekst. */
.contact { padding: clamp(40px, 7vw, 116px) 0 0; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(56px, 8vw, 96px); }
.contact__intro { margin-top: 26px; }
.contact__details {
  display: grid; justify-items: start; gap: 10px;
  margin-top: clamp(32px, 4vw, 48px); padding-top: 22px;
  border-top: 1px solid var(--rule);
  max-width: 33em;
}
.contact__place { font-size: 17px; line-height: 1.55; color: var(--muted); }
/* E-pošta i telefon: samo kad ih vlasnica uključi u adminu (Postavke). */
.contact__line { font-size: 17px; line-height: 1.55; }
.contact__line a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

.enquiry { max-width: 40rem; scroll-margin-top: 16px; padding-top: clamp(40px, 6vw, 56px); border-top: 1px solid var(--rule); }
.enquiry__intro { margin-top: 16px; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.6; }

/* Potvrda i greška slanja: tekst klijentice među dvjema crtama, gdje je pogled. */
.notice {
  margin-top: 28px; padding: 20px 0;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(22px, 1.8vw, 27px); line-height: 1.3;
}
/* Fokus dobiva samo da ga čitač zaslona pročita; nije kontrola, pa bez obruba. */
.notice:focus { outline: none; }
.notice--failure { color: var(--error); }

.form { display: grid; row-gap: 30px; margin-top: clamp(32px, 4vw, 48px); }
.form__required { font-size: 15px; color: var(--muted); }

.field { display: grid; gap: 10px; }
.field__label { font: 500 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.field__hint { font-size: 16px; line-height: 1.5; color: var(--muted); }
/* Crta polja nosi --muted (≥ 3:1 za granicu kontrole, WCAG 1.4.11); fokus je
   obrub stranice plus tamnija crta. */
.field__control {
  display: block; width: 100%; min-height: 48px; margin: 0;
  padding: 10px 0 9px;
  border: 0; border-bottom: 1px solid var(--muted); border-radius: 0;
  background: transparent; color: var(--ink);
  font: 400 19px/1.45 var(--text);
  appearance: none;
}
.field__control:focus { border-bottom-color: var(--ink); }
.field__control--select {
  padding-right: 32px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230e0d0b' stroke-width='1.2'/%3E%3C/svg%3E") right 4px center / 12px 8px no-repeat;
}
.field__control--textarea { min-height: 7.5em; resize: vertical; field-sizing: content; max-height: 60vh; }
.field__count { justify-self: end; font: 500 12px/1 var(--sans); letter-spacing: .08em; color: var(--muted); }
.field__count[hidden] { display: none; }
.field--error .field__control { border-bottom-color: var(--error); box-shadow: 0 1px 0 var(--error); }
.field__error { color: var(--error); font-size: 16px; line-height: 1.45; }

/* Zamka za robote: izvan zaslona, izvan redoslijeda tipkovnice. */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.form__privacy { font-size: 15px; line-height: 1.55; color: var(--muted); max-width: 34em; }
.form__privacy-link { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.form__submit[disabled] { cursor: progress; background-color: #2b2824; }

@media (max-width: 699.98px) {
  .form__submit { width: 100%; }
}
@media (min-width: 700px) {
  .field__control--textarea { min-height: 9.5em; }
}
@media (min-width: 1100px) {
  .contact { padding-bottom: var(--section-y); }
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr); grid-template-rows: auto 1fr; align-items: start; row-gap: 0; }
  .contact__aside { grid-column: 1; grid-row: 1; }
  /* Obrazac počinje u visini naslova stranice: crta iznad njega stoji gdje i vrh slova H1. */
  .enquiry { grid-column: 3; grid-row: 1 / span 2; padding-top: 0; border-top: 0; }
}

/* Česta pitanja: tri kratka odgovora, popis s crtama, bez harmonike. Telefon i
   tablet: traka na papiru od ruba do ruba, ispod obrasca. Računalo: lijevi stupac,
   ispod podataka, bez trake — naslov iste razine kao „Obrazac za upit”. */
.faq {
  margin: 0 calc(-1 * var(--gutter)); padding: var(--section-y) var(--gutter);
  background: var(--paper);
}
.faq__title { max-width: 14ch; }
.faq__list { max-width: 40rem; margin-top: clamp(32px, 4vw, 48px); }
.faq__item { padding: clamp(24px, 3vw, 36px) 0 clamp(28px, 3.4vw, 44px); border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q {
  margin: 0; max-width: 22ch;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(25px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -.006em;
  text-wrap: balance;
}
.faq__a { margin-top: 14px; }

@media (min-width: 1100px) {
  .faq { grid-column: 1; grid-row: 2; margin: clamp(72px, 7vw, 112px) 0 0; padding: 0; background: none; }
  .faq__q { font-size: clamp(22px, 1.8vw, 28px); }
}

/* ── stranice u izradi i 404 ────────────────────────────────────────────── */

.stub { padding: clamp(64px, 12vw, 180px) 0; min-height: 60svh; }
.stub__title {
  margin: 0; max-width: 14ch;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(38px, 5.6vw, 88px); line-height: 1.02; letter-spacing: -.012em;
}
.stub__text { margin: 24px 0 12px; color: var(--muted); }

/* ── Impresum i Kolačići (vlasnik 19. 10. 2026.) ─────────────────────────── */

.legal { padding: clamp(64px, 12vw, 180px) 0 var(--section-y); }
.legal a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__lead { margin-top: clamp(24px, 3vw, 40px); }
.legal__facts { margin: clamp(40px, 5vw, 72px) 0 0; max-width: 46rem; border-top: 1px solid var(--rule); }
.legal__fact { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.legal__fact dt { color: var(--muted); }
.legal__fact dd { margin: 0; font-size: clamp(18px, 1.25vw, 20px); line-height: 1.5; }
.legal__fact code { font-size: .88em; }
.legal__text { margin-top: clamp(32px, 4vw, 48px); max-width: 34em; font-size: clamp(18px, 1.25vw, 20px); line-height: 1.62; }
.legal__text p { margin: 0 0 1em; }
.legal__h2 { margin: 1.6em 0 .5em; font-family: var(--display); font-weight: 300; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; }
/* Politika privatnosti (vlasnik 21. 10. 2026.): datum inačice, popisi, rokovi u tekstu. */
.legal__version { margin: 16px 0 0; color: var(--muted); }
.legal__list { margin: 0 0 1em; padding-left: 1.2em; }
.legal__list li { margin: 0 0 .45em; padding-left: .2em; }
.legal__facts--text { margin: 0 0 1.2em; font-size: 1rem; }

@media (min-width: 700px) {
  .legal__fact { grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--col-gap); align-items: baseline; }
}

/* ── video dijalog ──────────────────────────────────────────────────────── */

.video-dialog {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--ivory);
}
.video-dialog::backdrop { background: rgba(14, 13, 11, .95); }
.video-dialog__inner { position: relative; height: 100%; display: grid; place-items: center; padding: 68px 16px 20px; }
/* Zamijenjeni element: uz width/height auto, max-height smanjuje ga razmjerno. */
.video-dialog__video {
  width: auto; height: auto;
  max-width: 100%; max-height: calc(100dvh - 88px);
  aspect-ratio: 9 / 16; object-fit: contain;
  background: #000;
}
.video-dialog__close {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center; width: 48px; height: 48px;
  background: none; border: 1px solid var(--rule-on-ink); border-radius: 50%;
  color: inherit; cursor: pointer;
}
.video-dialog__close:hover { border-color: var(--ivory); }
.video-dialog :focus-visible { outline-color: var(--ivory); }

.video-dialog__error { position: absolute; left: 16px; right: 16px; bottom: 24px; text-align: center; font-size: 16px; }
/* Otvoren dijalog: stranica iza njega se ne pomiče. */
html.dialog-open { overflow: hidden; }

/* ── uvećani prikaz fotografija ─────────────────────────────────────────── */

/* Tamna podloga preko cijelog prozora; cijela fotografija (object-fit: contain
   ovdje ništa ne reže — samo je smješta). Telefon: fotografija gotovo preko
   cijelog zaslona, zatvaranje gore desno, strelice dolje uz rubove. */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--ink); color: var(--ivory);
}
.lightbox::backdrop { background: var(--ink); }
.lightbox__stage { position: absolute; inset: 64px 8px 76px; display: grid; }
.lightbox__stage picture { display: contents; }
.lightbox__img { grid-area: 1 / 1; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.lightbox__img.is-coming { opacity: 0; }
.lightbox__meta {
  position: absolute; left: 16px; top: 8px; height: 48px;
  display: flex; align-items: center; gap: 18px;
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.lightbox__brand { color: var(--muted-on-ink); }
.lightbox__button {
  position: absolute;
  display: grid; place-items: center; width: 48px; height: 48px;
  background: none; border: 1px solid var(--rule-on-ink); border-radius: 50%;
  color: inherit; cursor: pointer;
}
.lightbox__button:hover { border-color: var(--ivory); }
.lightbox__close { top: 8px; right: 8px; }
.lightbox__prev { left: 8px; bottom: 14px; }
.lightbox__next { right: 8px; bottom: 14px; }
.lightbox__note {
  position: absolute; left: 24px; right: 24px; top: 50%; translate: 0 -50%;
  display: grid; justify-items: center; gap: 8px; text-align: center;
}
.lightbox__note[hidden] { display: none; }
.lightbox__retry { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.lightbox :focus-visible { outline-color: var(--ivory); }

@media (min-width: 900px) {
  .lightbox__stage { inset: 28px 96px; }
  .lightbox__meta { left: 24px; top: 16px; }
  .lightbox__close { top: 16px; right: 24px; }
  .lightbox__prev, .lightbox__next { top: 50%; bottom: auto; translate: 0 -50%; }
  .lightbox__prev { left: 24px; }
  .lightbox__next { right: 24px; }
}

/* ── pokret: malo i suzdržano ───────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .hero__type { animation: rise .9s var(--ease) .1s both; }
  @keyframes rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
}

/* Pojavljivanje pri pomicanju (site.js): .reveal dobiva samo ono što je pri
   učitavanju ispod vidljivog dijela, a kad uđe u prozor, sve se klase skidaju.
   Samo prozirnost i transform: clip-path bi elementu oduzeo presjek s prozorom
   pa se nikad ne bi pojavio. Na ispisu i uz smanjeno kretanje ništa se ne skriva. */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .is-in.reveal--d1 { transition-delay: .08s; }
  .is-in.reveal--d2 { transition-delay: .16s; }
  .is-in.reveal--d3 { transition-delay: .24s; }
  .is-in.reveal--d4 { transition-delay: .32s; }
}

/* Lebdenje, samo uz miš: fotografija se polako primakne unutar svog okvira
   (glavni vizual i galerija na Radovima). Natpis preko kadrova ne prekida
   lebdenje; gumb za video i dalje prima klik. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .shot__link { overflow: hidden; }
  .frame__img, .shot__img { transition: scale 1.1s var(--ease); }
  .frame:hover .frame__img, .shot__link:hover .shot__img { scale: 1.04; }
  .hero__type { pointer-events: none; }
  .hero__video { pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}