/* ==========================================================================
   site.css — MAS green invest
   Smjer: svijetlo, mirno, fotografije njihovih krovova nose boju.
   Paleta: akcent je borova zelena (makija i borovi na fotkama), neutral je
   topli vapnenac. Crijep i more dolaze s fotografija, ne iz CSS-a.
   Kompozicija: asimetrični hero (naslov preko 10 stupaca, fotka izlazi iz
   mreže do desnog ruba), pa slike koje naizmjence dotiču rub ekrana.
   Jedan font (Supreme), hijerarhija težinom i veličinom.
   ========================================================================== */

@font-face {
  font-family: "Supreme";
  src: url("../fonts/Supreme-Variable.woff2") format("woff2-variations"),
       url("../fonts/Supreme-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Supreme fallback";
  src: local("Arial");
  size-adjust: 98%;
  ascent-override: 96%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  --accent-h: 162;
  --accent-c: 0.085;
  --neutral-h: 80;
  --neutral-c: 0.008;

  --font-display: "Supreme", "Supreme fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-text: var(--font-display);

  /* glavni gumb tamniji od a9: bijeli tekst na njemu ima kontrast iznad 6:1 */
  --solid: var(--a11);
  --solid-hover: oklch(37% calc(var(--accent-c) * 0.95) var(--accent-h));
  --deep: var(--a12);
  --on-deep: var(--n1);
  --on-deep-muted: oklch(88% calc(var(--accent-c) * 0.25) var(--accent-h));
  --on-deep-line: oklch(100% 0 0 / 0.14);

  /* panel u izračunu: crna ploča s naznakom ćelija */
  --panel: oklch(21% 0.025 255);
  --panel-line: oklch(100% 0 0 / 0.09);
  --panel-edge: oklch(100% 0 0 / 0.28);

  --type-hero: clamp(2.6rem, 1.15rem + 6.2vw, 6.6rem);
  --radius-img: 14px;
  --radius-btn: 12px;
  --header-h: 68px;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem);
  --content-w: 72rem;
}

html[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

body {
  font-weight: 420;
  font-optical-sizing: auto;
}
h1, h2, h3, h4 { font-weight: 640; }
h3 { font-size: var(--type-1); letter-spacing: -0.012em; line-height: 1.25; }
a { color: inherit; }
strong, b { font-weight: 640; }

.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* --- mreža ----------------------------------------------------------------
   main i sve sekcije su subgrid tijela, pa svako dijete bira content / feature
   / full liniju iz iste mreže i sve se poravnava samo.
   -------------------------------------------------------------------------- */
.main,
.main > section {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full;
}
/* :where() drži specifičnost na nuli, da pozicije pojedinih sekcija pobijede */
:where(.main > section) > * { grid-column: content; min-width: 0; }

.main > section { padding-block: var(--space-3xl); }

/* --- gumbi ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0 1.35rem;
  border-radius: var(--radius-btn);
  font-weight: 560;
  font-size: var(--type-0);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color 160ms var(--ease-out),
    border-color 160ms var(--ease-out),
    transform var(--dur-press) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-solid { background: var(--solid); color: var(--on-solid); }
.btn-solid:hover { background: var(--solid-hover); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-quiet:hover { background: var(--element); }
.btn-light { background: var(--on-deep); color: var(--deep); }
.btn-light:hover { background: oklch(93% calc(var(--accent-c) * 0.3) var(--accent-h)); }

.round-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), opacity 160ms var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.round-btn:hover { background: var(--element); }
.round-btn:active { transform: scale(0.94); }
.round-btn:disabled { opacity: 0.35; cursor: default; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 560;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.text-link:active { opacity: 0.7; }

/* --- DEMO oznaka ------------------------------------------------------------ */
.demo-badge {
  position: fixed;
  z-index: 60;
  left: 12px;
  bottom: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--warn);
  color: var(--n12);
  font-size: var(--type-n2);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  pointer-events: none;
}

/* ============================ HEADER ============================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.site-header.is-scrolled {
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  box-shadow: 0 1px 0 oklch(20% 0.02 var(--neutral-h) / 0.06), 0 8px 24px oklch(20% 0.02 var(--neutral-h) / 0.04);
}
.hdr {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  height: var(--header-h);
  max-width: calc(var(--content-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.brand {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.32em;
  min-width: 0;
  text-decoration: none;
  font-size: 1.12rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.brand > span { white-space: nowrap; }
/* logo kakav jest (izrez iz klijentove datoteke): žarulja + natpis */
.site-header .brand { align-items: center; column-gap: 10px; flex-wrap: nowrap; }
.brand-znak, .brand-natpis { background: none; }   /* image.css daje slikama podlogu za učitavanje */
.brand-znak { width: auto; height: 52px; flex: none; }
.brand-natpis { width: auto; height: 31px; min-width: 0; }
@media (max-width: 56rem) {
  .brand-znak { height: 44px; }
  .brand-natpis { height: 25px; }
}
@media (max-width: 22rem) {
  .brand-natpis { height: 21px; }
}
.brand-mas { font-weight: 760; }
.brand-rest { font-weight: 430; color: var(--text-muted); }
.brand:active { opacity: 0.7; }

.hdr-nav {
  display: flex;
  gap: var(--space-m);
  margin-inline-start: auto;
  font-size: var(--type-n1);
  font-weight: 500;
}
.hdr-nav a {
  text-decoration: none;
  color: var(--text-muted);
  padding-block: 6px;
  transition: color 160ms var(--ease-out);
}
.hdr-nav a:hover { color: var(--text); }
.hdr-nav a:active { opacity: 0.6; }

.hdr-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--solid);
  color: var(--on-solid);
  text-decoration: none;
  font-weight: 560;
  font-size: var(--type-n1);
  font-variant-numeric: tabular-nums;
  transition: background-color 160ms var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.hdr-tel:hover { background: var(--solid-hover); }
.hdr-tel:active { transform: scale(0.97); }

.hdr-menu {
  display: none;
  margin-inline-start: auto;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  place-items: center;
  cursor: pointer;
}
.hdr-menu:active { transform: scale(0.95); }

.menu {
  position: absolute;
  top: calc(var(--header-h) - 6px);
  right: var(--gutter);
  width: min(17rem, calc(100vw - 2 * var(--gutter)));
  padding: 8px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-3), var(--ring);
  display: grid;
}
.menu a {
  padding: 12px 14px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 500;
}
.menu a:hover { background: var(--element); }
.menu a:active { background: var(--element-active); }

@media (max-width: 62rem) {
  .hdr-nav { display: none; }
  .hdr-tel { margin-inline-start: auto; }
}
@media (max-width: 56rem) {
  .site-header { position: relative; }   /* na mobitelu je jedini sticky element donja traka */
  .site-header.is-scrolled { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .hdr-tel { display: none; }
  .hdr-menu { display: inline-grid; }
}
@media (min-width: 56.01rem) {
  .menu { display: none; }
}

/* ============================ HERO ============================ */
.main > .hero {
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [content-start] repeat(12, minmax(0, calc(var(--content-w) / 12)))
    [content-end] minmax(var(--gutter), 1fr) [full-end];
  padding-block: var(--space-xl) var(--space-2xl);
  row-gap: var(--space-l);
}
.hero-title {
  grid-column: 2 / 13;
  /* vw granica: i kod teksta na 200 % najduža riječ stane u redak */
  font-size: min(calc(var(--type-hero) * 0.84), 11.5vw);
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  font-weight: 680;
  max-width: none;
  text-wrap: balance;
  margin: 0;
}
.hero-copy { grid-column: 2 / 14; }
.hero-lead {
  font-size: var(--type-1);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 30ch;
  margin-bottom: var(--space-m);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-m);
  font-size: var(--type-n1);
  color: var(--text-muted);
  text-decoration: none;
}
.rating:hover span:last-child { text-decoration: underline; text-underline-offset: 0.2em; }
.rating:active { opacity: 0.7; }
.stars { display: inline-flex; gap: 1px; color: oklch(72% 0.15 75); }
/* stil iz dokumenta ne ulazi u <use>, pa boja ide na svg i path je nasljeđuje */
.stars svg { fill: currentColor; }
.hero-area {
  margin: var(--space-m) 0 0;
  font-size: var(--type-n1);
  color: var(--text-muted);
  max-width: 40ch;
}
.stars .fill, svg .fill { fill: currentColor; stroke: none; }

.hero-photo {
  grid-column: full;
  margin: 0;
}
/* na mobitelu fotka ide odmah ispod naslova; poziv i izračun su u donjoj traci */
@media (max-width: 55.99rem) {
  .hero-photo { order: 1; }
  .hero-copy { order: 2; }
}
.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hero-photo figcaption,
.part-cap {
  margin-top: 10px;
  padding-inline: var(--gutter);
  font-size: var(--type-n1);
  color: var(--text-subtle);
}

@media (min-width: 56rem) {
  .main > .hero {
    row-gap: var(--space-xl);
    padding-block: var(--space-l) var(--space-3xl);
  }
  .hero-title { grid-row: 1; }
  .hero-copy {
    grid-column: 2 / 6;
    grid-row: 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-inline-end: var(--space-l);
    padding-block-start: var(--space-xs);
  }
  /* poravnato s donjim rubom fotke (iznad potpisa) */
  .hero-area {
    margin-top: auto;
    margin-bottom: calc(var(--type-n1) * 1.6 + 10px);
    padding-top: var(--space-s);
    border-top: 1px solid var(--border);
  }
  .hero-photo {
    grid-column: 6 / full-end;
    grid-row: 2;
  }
  .hero-photo img {
    aspect-ratio: 16 / 11;
    border-radius: var(--radius-img) 0 0 var(--radius-img);
  }
  .hero-photo figcaption { padding-inline: 0; }
}

/* ============================ IZRAČUN ============================ */
.main > .calc { background: var(--bg-subtle); }
.calc-head { margin-bottom: var(--space-s); }
.calc-head h2 { max-width: 16ch; }
.calc-head p { color: var(--text-muted); max-width: 58ch; }

.calc-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}
@media (min-width: 60rem) {
  .calc-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); }
  .calc-result { position: sticky; top: calc(var(--header-h) + var(--space-m)); }
}

.calc-inputs { display: grid; gap: var(--space-l); }

.seg { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg legend, .bill label {
  padding: 0;
  margin-bottom: 12px;
  font-weight: 560;
  font-size: var(--type-n1);
  color: var(--text-muted);
}
.seg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-row label { position: relative; cursor: pointer; }
.seg-row input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.seg-row span {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-weight: 500;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.seg-row label:hover span { border-color: var(--n9); }
.seg-row label:active span { transform: scale(0.97); }
.seg-row input:checked + span {
  background: var(--solid);
  border-color: var(--solid);
  color: var(--on-solid);
}
.seg-row input:focus-visible + span { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.seg[disabled] .seg-row { opacity: 0.4; }
.seg-note { margin: 10px 0 0; font-size: var(--type-n1); color: var(--text-muted); }

.bill-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  flex-wrap: wrap;
}
.bill label { margin-bottom: 0; }
.bill-out {
  font-size: var(--type-4);
  font-weight: 620;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.bill-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--type-n2);
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}

/* klizač: puna boja do palca preko --fill koji postavlja JS */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: 6px 0 2px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--solid) var(--fill, 20%), var(--n5) var(--fill, 20%));
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--solid) var(--fill, 20%), var(--n5) var(--fill, 20%));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-press) var(--ease-out);
}
input[type="range"]::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.08); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-2), var(--ring-focus); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-2), var(--ring-focus); }

.calc-result {
  background: var(--deep);
  color: var(--on-deep);
  border-radius: 20px;
  padding: var(--space-l);
}
.res-label { margin: 0 0 4px; font-size: var(--type-n1); color: var(--on-deep-muted); font-weight: 500; }
.res-kwp {
  margin: 0 0 var(--space-m);
  font-size: var(--type-6);
  font-weight: 640;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.res-unit { font-size: 0.42em; letter-spacing: -0.01em; font-weight: 520; color: var(--on-deep-muted); }

.viz {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin-bottom: var(--space-s);
}
.viz i {
  aspect-ratio: 1 / 1.5;
  border-radius: 3px;
  border: 1px dashed var(--on-deep-line);
  transition:
    background-color 180ms var(--ease-out) var(--d, 0ms),
    border-color 180ms var(--ease-out) var(--d, 0ms);
}
.viz i.on {
  border: 1px solid var(--panel-edge);
  background-color: var(--panel);
  background-image:
    linear-gradient(to bottom, var(--panel-line) 1px, transparent 1px),
    linear-gradient(to right, var(--panel-line) 1px, transparent 1px);
  background-size: 100% calc(100% / 6), calc(100% / 3) 100%;
}
.viz-more { margin: -4px 0 var(--space-s); font-size: var(--type-n1); color: var(--on-deep-muted); }

.res-stats {
  display: grid;
  /* dva stupca dok stanu; kod teksta na 200 % slože se u jedan */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--space-s) var(--space-m);
  margin: var(--space-m) 0;
  padding-top: var(--space-m);
  border-top: 1px solid var(--on-deep-line);
}
.res-stats dt { font-size: var(--type-n1); color: var(--on-deep-muted); }
.res-stats dd {
  margin: 2px 0 0;
  font-size: var(--type-1);
  font-weight: 580;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.res-note { font-size: var(--type-n1); color: var(--on-deep-muted); margin-bottom: var(--space-m); }
.calc-result .btn { width: 100%; }

/* ============================ ŠTO MONTIRAMO ============================ */
.anat-head { margin-bottom: var(--space-xl); }
.anat-head h2 { max-width: 18ch; }
.anat-head p { color: var(--text-muted); }

.anat-reel {
  grid-column: full;
  display: flex;
  gap: var(--space-m);
  margin: 0;
  padding: 0 max(var(--gutter), calc((100% - var(--content-w)) / 2)) var(--space-xs);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.anat-reel::-webkit-scrollbar { display: none; }
/* CSS snap samo na dodir. Mišem, strelicama i trackpadom poravnava JS: snap
   koji se pali/gasi usred glatkog skrola u Safariju i Firefoxu prekida
   animaciju, pa je traka ostajala na pola prvog dijela. */
@media (pointer: coarse) {
  .anat-reel { scroll-snap-type: x mandatory; }
}
.part {
  flex: 0 0 min(80vw, 23rem);
  scroll-snap-align: start;
  max-width: none;
}
.part-img {
  margin: 0 0 var(--space-s);
  border-radius: var(--radius-img);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-sunken);
}
.part-img img { width: 100%; height: 100%; object-fit: cover; }
.part h3 { margin-bottom: 6px; }
.part p { color: var(--text-muted); font-size: var(--type-n1); line-height: 1.55; margin: 0; }

.part-img.phone {
  display: grid;
  place-items: center;
  background: var(--a3);
}
.part-img.phone picture {
  display: block;
  width: 56%;
  padding: 7px;
  border-radius: 30px;
  background: var(--n12);
  box-shadow: var(--shadow-3);
}
.part-img.phone img {
  height: auto;
  aspect-ratio: 400 / 696;
  border-radius: 23px;
}

.reel-nav {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
}
.reel-track {
  flex: 1;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  overflow: hidden;
}
.reel-track span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--text);
  transform-origin: left;
  transform: scaleX(var(--p, 0.2));
}

/* ============================ VRSTE KROVA ============================ */
.main > .roofs {
  padding-top: 0;
  row-gap: var(--space-l);
}
.roofs-title { margin-bottom: 0; }
.roof { margin: 0; }
.roof-img {
  margin: 0 0 var(--space-s);
  border-radius: var(--radius-img);
  overflow: hidden;
}
.roof-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.roof-main .roof-img img { aspect-ratio: 5 / 4; }
.roof-text p { color: var(--text-muted); margin: 0; }

@media (min-width: 40rem) and (max-width: 55.99rem) {
  .main > .roofs { grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] 1fr 1fr [content-end] minmax(var(--gutter), 1fr) [full-end]; column-gap: var(--space-m); }
  .roofs-title, .roof-main { grid-column: content; }
  .roof-lim { grid-column: 2; }
  .roof-ravni { grid-column: 3; }
}
@media (min-width: 56rem) {
  .main > .roofs {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] repeat(12, minmax(0, calc(var(--content-w) / 12)))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
    column-gap: 0;
  }
  .roofs-title { grid-column: 2 / 9; grid-row: 1; }
  /* velika kartica se raspada u mrežu: fotka do lijevog ruba ekrana,
     tekst na rubu sadržaja — bez računanja širine scrollbara */
  .roof-main { display: contents; }
  .roof-main .roof-img {
    grid-column: 2 / 9;
    grid-row: 2 / span 2;
    margin: 0 var(--space-xl) 0 0;
    border-radius: var(--radius-img);
    align-self: stretch;
  }
  /* fotka popuni visinu dviju desnih kartica, bez rupe ispod */
  .roof-main .roof-img picture { display: block; height: 100%; }
  .roof-main .roof-img img { height: 100%; aspect-ratio: auto; min-height: 22rem; }
  .roof-main .roof-text { grid-column: 2 / 9; grid-row: 4; padding-inline-end: var(--space-xl); }
  .roof-lim, .roof-ravni { grid-column: 9 / 14; }
  .roof-lim { grid-row: 2; }
  .roof-ravni { grid-row: 3; }
  .roof-lim .roof-img img, .roof-ravni .roof-img img { aspect-ratio: 2 / 1; }
}

/* ============================ RADOVI ============================ */
.works-head { margin-bottom: var(--space-xl); }
.works-head p { color: var(--text-muted); }
.main > .works > .gallery { grid-column: content; }
/* pravilna mreža: 10 fotki = 2 reda po 5 (mobitel 5 po 2), sve istog omjera */
.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.gallery li { margin: 0; max-width: none; }
@media (min-width: 56rem) {
  .gallery { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
}
.g-item {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: zoom-in;
  transition: transform var(--dur-press) var(--ease-out);
}
.g-item img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 300ms var(--ease-out); }
.g-item:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .g-item:hover img { transform: scale(1.03); }
}

/* ============================ RECENZIJE ============================ */
.main > .reviews { background: var(--deep); color: var(--on-deep); }
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  margin-bottom: var(--space-xl);
}
.reviews-head h2 { margin: 0; max-width: 16ch; }
.reviews-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em 0.5em; max-width: 22ch; }
.g-badge {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: #fff;
}
.g-badge svg { width: 0.85em; height: 0.85em; }
.reviews-head .text-link { color: var(--on-deep-muted); }
.quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl) var(--space-2xl);
}
.quote { max-width: none; margin: 0; }
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-size: var(--type-2);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 480;
  max-width: 34ch;
  margin: 0 0 var(--space-s);
  text-indent: -0.42em;
}
.quote blockquote p::before { content: "„"; }
.quote blockquote p::after { content: "“"; }
.rot .quote blockquote p { font-size: var(--type-3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 500; max-width: 26ch; }
.quote-who { margin: 0; font-size: var(--type-n1); color: var(--on-deep-muted); }
.quote-who span { opacity: 0.75; }
.quote-stars { margin: 0 0 var(--space-s); }
.quote-empty { margin: 0 0 var(--space-s); font-size: var(--type-1); color: var(--on-deep-muted); }
.quote-score { margin: 0 0 var(--space-2xs); font-size: var(--type-5); line-height: 1; font-weight: 600; letter-spacing: -0.03em; }
.reviews-note { margin: var(--space-xl) 0 0; font-size: var(--type-n2); color: var(--on-deep-muted); }
@media (min-width: 56rem) {
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* izmjena parova: bez JS-a se vide sve recenzije jedna ispod druge */
.rot { display: grid; gap: var(--space-xl); }
.rot.is-on { gap: 0; }
.rot.is-on .rot-page {
  grid-area: 1 / 1;
  transition: opacity 500ms var(--ease-out), visibility 0s linear 500ms;
}
.rot.is-on .rot-page[aria-hidden="true"] { opacity: 0; visibility: hidden; }
.rot.is-on .rot-page:not([aria-hidden="true"]) { transition-delay: 0s; }
.rot-nav { display: flex; align-items: center; gap: 4px; margin-top: var(--space-l); }
.rot-nav[hidden] { display: none; }
.rot-dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.rot-dot::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--on-deep-line);
  transition: background-color 200ms var(--ease-out);
}
.rot-dot[aria-current="true"]::before { background: var(--on-deep); }
.rot-dot:active::before { opacity: 0.6; }
.rot-pause {
  margin-inline-start: var(--space-xs);
  width: 44px;
  height: 44px;
  background: transparent;
  border-color: var(--on-deep-line);
  color: var(--on-deep);
}
@media (hover: hover) and (pointer: fine) {
  .rot-pause:hover { background: var(--on-deep-line); }
  .rot-dot:hover::before { background: var(--on-deep-muted); }
}
@media (prefers-reduced-motion: reduce) {
  .rot.is-on .rot-page { transition-duration: 200ms, 0s; transition-delay: 0s, 200ms; }
}

/* ============================ POTICAJ ============================ */
.main > .grant { row-gap: var(--space-xl); }
@media (min-width: 60rem) {
  .grant { column-gap: 0; }
  .main > .grant {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] repeat(12, minmax(0, calc(var(--content-w) / 12)))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
  }
  .grant-text { grid-column: 2 / 8; padding-inline-end: var(--space-2xl); }
  .grant-table { grid-column: 8 / 14; align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-m)); }
}
.grant-text h2 { max-width: 14ch; }
.grant-status {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--warn-bg);
  color: var(--text);
  font-size: var(--type-n1);
  max-width: 60ch;
}
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); translate: 0 -1px; }
.grant-text > p { color: var(--text-muted); }
.grant-text > p.grant-status { color: var(--text); }
.grant-text h3 { margin-top: var(--space-l); }
.prep { list-style: none; padding: 0; margin: 0 0 var(--space-l); display: grid; gap: 10px; }
.prep li { position: relative; padding-left: 22px; margin: 0; color: var(--text-muted); }
.prep li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--solid);
}
.grant-actions { margin: 0; }

.grant-table .scroll-x { border-radius: 14px; }
.grant-table table { min-width: 18rem; font-size: var(--type-n1); background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--ring); }
.grant-table caption {
  text-align: left;
  font-weight: 560;
  padding: 0 0 12px;
  color: var(--text-muted);
}
.grant-table th, .grant-table td { padding: 14px 16px; vertical-align: top; font-variant-numeric: tabular-nums; }
.grant-table thead th { font-weight: 560; color: var(--text-muted); background: var(--bg-subtle); }
.grant-table tbody th { font-weight: 560; width: 34%; }
.grant-table tr:last-child th, .grant-table tr:last-child td { border-bottom: 0; }
.table-note { margin-top: var(--space-s); font-size: var(--type-n2); color: var(--text-muted); }
.table-note a { text-underline-offset: 0.2em; }

/* ============================ PITANJA ============================ */
.main > .faq { background: var(--bg-subtle); }
@media (min-width: 60rem) {
  .main > .faq {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] repeat(12, minmax(0, calc(var(--content-w) / 12)))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
  }
  .faq .faq-title { grid-column: 2 / 6; padding-inline-end: var(--space-l); align-self: start; position: sticky; top: calc(var(--header-h) + var(--space-m)); }
  .faq .faq-list { grid-column: 6 / 14; }
}
.faq-list details { border-top: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) 0;
}
.faq-list summary h3 { margin: 0; max-width: none; font-weight: 560; flex: 1; min-width: 0; }
.faq-list summary .icon { transition: transform 200ms var(--ease-out); color: var(--text-muted); }
.faq-list details[open] summary .icon { transform: rotate(45deg); }
.faq-list summary:active h3 { opacity: 0.7; }
.faq-a p { color: var(--text-muted); padding-bottom: var(--space-m); margin: 0; }
.faq-a a { color: var(--text); text-underline-offset: 0.2em; }

/* ============================ KONTAKT ============================ */
.main > .contact { row-gap: var(--space-xl); }
@media (min-width: 60rem) {
  .main > .contact {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] repeat(12, minmax(0, calc(var(--content-w) / 12)))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
  }
  .contact-info { grid-column: 2 / 7; padding-inline-end: var(--space-2xl); }
  .contact-form { grid-column: 7 / 14; align-self: start; }
}
.contact-info h2 { max-width: 13ch; }
.contact-info > p { color: var(--text-muted); }
.big-tel {
  display: inline-block;
  margin: var(--space-xs) 0 var(--space-m);
  font-size: var(--type-5);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-accent);
}
.big-tel:active { opacity: 0.7; }
.contact-list { list-style: none; padding: 0; margin: 0 0 var(--space-l); display: grid; gap: 12px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; margin: 0; max-width: none; }
.contact-list li > :not(svg) { min-width: 0; }
.contact-list .icon { color: var(--text-subtle); margin-top: 0.15em; }
.contact-list a { text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.contact-photo { margin: 0; border-radius: var(--radius-img); overflow: hidden; }
.contact-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }

.contact-form {
  display: grid;
  gap: var(--space-s) var(--space-m);
  padding: var(--space-l);
  border-radius: 20px;
  background: var(--bg-subtle);
}
@media (min-width: 40rem) {
  .contact-form { grid-template-columns: 1fr 1fr; }
  .field-wide { grid-column: 1 / -1; }
}
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-weight: 560; font-size: var(--type-n1); }
.field input:not([type="checkbox"]), .field select, .field textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--ring-focus);
}
.field ::placeholder { color: var(--text-subtle); opacity: 1; }
.field .field-error { margin: 0; }
.field input:user-invalid ~ .field-error,
.field .is-invalid ~ .field-error { display: block; }
.field .is-invalid { border-color: var(--error); background: var(--error-bg); }
.field-hint { margin: 0; font-size: var(--type-n2); color: var(--text-accent); }
.field-check { grid-template-columns: auto 1fr; column-gap: 12px; align-items: start; }
.field-check input { width: 22px; height: 22px; margin: 2px 0 0; }
.field-check label { font-weight: 420; color: var(--text-muted); }
.field-check label a { color: var(--text); text-underline-offset: 0.2em; }
.field-check .field-error { grid-column: 2; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); }
.form-status { margin: 0; font-size: var(--type-n1); max-width: 40ch; }

/* ============================ PODNOŽJE ============================ */
.site-footer {
  background: var(--n12);
  color: var(--n6);
  padding-block: var(--space-2xl) var(--space-xl);
}
.ftr {
  max-width: calc(var(--content-w) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 56rem) {
  .ftr { grid-template-columns: 4fr 3fr 5fr; }
}
.site-footer .brand-mas { color: var(--n1); }
.site-footer .brand-rest { color: var(--n7); }
.ftr-brand .brand { align-items: center; }
.ftr-brand .brand-znak { height: 46px; margin-inline-end: 4px; }
.ftr-brand p { margin-top: var(--space-xs); font-size: var(--type-n1); }
.ftr-fb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: var(--space-xs);
  font-size: var(--type-n1);
  color: var(--n4);
  text-underline-offset: 0.2em;
}
.ftr-fb:hover { color: var(--n1); }
.ftr-fb:active { opacity: 0.7; }
.icon-brand { fill: currentColor; flex: none; }
.contact-list .icon-brand { color: var(--text-subtle); margin-top: 0.15em; }
.ftr-nav { display: grid; gap: 8px; align-content: start; font-size: var(--type-n1); }
.ftr-nav a { text-decoration: none; color: var(--n5); width: fit-content; }
.ftr-nav a:hover { color: var(--n1); text-decoration: underline; text-underline-offset: 0.2em; }
.ftr-nav a:active { opacity: 0.7; }
.ftr-legal p { font-size: var(--type-n2); line-height: 1.7; color: var(--n7); }
.ftr-legal strong { color: var(--n4); }
.ftr-copy { margin-top: var(--space-s); }

/* ============================ DONJA TRAKA (mobitel) ============================ */
.mbar { display: none; }
@media (max-width: 56rem) {
  /* --mbar-h postavlja JS prema stvarnoj visini trake (tekst na 200 % je prelomi u dva reda) */
  body { padding-bottom: var(--mbar-h, calc(76px + env(safe-area-inset-bottom, 0px))); }
  .mbar {
    position: fixed;
    z-index: 55;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in oklab, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    box-shadow: 0 -1px 0 oklch(20% 0.02 var(--neutral-h) / 0.07);
  }
  .mbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 6px 18px;
    border-radius: 12px;
    text-align: center;
    line-height: 1.15;
    text-decoration: none;
    font-weight: 560;
    transition: transform var(--dur-press) var(--ease-out);
  }
  .mbar a:active { transform: scale(0.97); }
  .mbar a { flex: 1 1 auto; }
  .mbar-call { flex-grow: 0.6; background: var(--solid); color: var(--on-solid); }
  .mbar-calc { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
  .demo-badge { bottom: auto; top: 0; left: 50%; translate: -50% 0; padding: 1px 8px; border-radius: 0 0 6px 6px; }
}
@media (prefers-reduced-transparency: reduce) {
  .mbar, .site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
}

/* ============================ LIGHTBOX ============================ */
.lightbox {
  /* 100% fiksnog bloka = prozor bez trake za skrolanje (100vw bi išao ispod nje) */
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: oklch(14% 0.01 var(--neutral-h) / 0.96);
  color: var(--n1);
  overscroll-behavior: contain;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lb-figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 64px 16px 24px;
  max-width: 100%;
}
.lb-figure img {
  max-width: min(92vw, 1400px);
  max-height: calc(100dvh - 150px);
  width: auto;
  height: auto;
  border-radius: 8px;
  background: transparent;
  touch-action: pan-y;
}
.lb-figure figcaption { font-size: var(--type-n1); color: var(--n7); text-align: center; max-width: 60ch; }
.lightbox .round-btn {
  position: absolute;
  background: oklch(100% 0 0 / 0.1);
  border-color: oklch(100% 0 0 / 0.2);
  color: var(--n1);
}
.lightbox .round-btn:hover { background: oklch(100% 0 0 / 0.18); }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 14px; top: 50%; translate: 0 -50%; }
.lb-next { right: 14px; top: 50%; translate: 0 -50%; }
.lightbox .lb-prev:active, .lightbox .lb-next:active { transform: scale(0.94); }
@media (max-width: 40rem) {
  .lb-prev, .lb-next { top: auto; bottom: 18px; translate: none; }
}

/* obične poveznice u tekstu: povratna informacija na dodir */
main a:not([class]):active { opacity: 0.7; }

/* ============================ OPREMA ============================
   Šahovnica 7/5 pa 5/7 — namjerno drugačije od sekcije krovova
   (velika fotka + dvije složene). */
.main > .gear { row-gap: var(--space-l); padding-top: var(--space-2xl); }
.gear-head h2 { max-width: 16ch; }
.gear-head p { color: var(--text-muted); max-width: 56ch; margin: 0; }
.gear-item { margin: 0; min-width: 0; }
.gear-item h3 { margin-bottom: 6px; }
.gear-item p { color: var(--text-muted); margin: 0; }
.gear-img { margin: 0 0 var(--space-s); border-radius: var(--radius-img); overflow: hidden; }
.gear-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gear-inv .gear-img img { object-position: 50% 70%; }

.gear-bat {
  background: var(--deep);
  color: var(--on-deep);
  border-radius: 20px;
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.gear-bat p { color: var(--on-deep-muted); margin-bottom: var(--space-s); }
.gear-bat .text-link { color: var(--on-deep); margin-top: auto; }
.bat-art { width: 7.5rem; height: auto; color: var(--on-deep-muted); margin-bottom: var(--space-s); }
.bat-cell { fill: oklch(80% calc(var(--accent-c) * 1.3) var(--accent-h)); }
.bat-cell-off { fill: var(--on-deep-line); }

.gear-mont {
  background: var(--bg-subtle);
  border-radius: 20px;
  padding: var(--space-l);
  display: grid;
  gap: var(--space-m);
  align-content: start;
}
.gear-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gear-list li { position: relative; padding-left: 20px; margin: 0; color: var(--text-muted); }
.gear-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--solid);
}

@media (min-width: 56rem) {
  .main > .gear {
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] repeat(12, minmax(0, calc(var(--content-w) / 12)))
      [content-end] minmax(var(--gutter), 1fr) [full-end];
    column-gap: 0;
  }
  .gear-head   { grid-column: 2 / 9; grid-row: 1; }
  .gear-panels { grid-column: 2 / 9;  grid-row: 2; padding-inline-end: var(--space-l); }
  .gear-inv    { grid-column: 9 / 14; grid-row: 2; }
  .gear-bat    { grid-column: 2 / 7;  grid-row: 3; margin-inline-end: var(--space-l); }
  .gear-mont   { grid-column: 7 / 14; grid-row: 3; grid-template-columns: 1fr 1.2fr; }
  /* obje fotke u prvom redu iste visine */
  .gear-img img { aspect-ratio: auto; height: clamp(16rem, 24vw, 24rem); }
}

/* ============================ LOKALNE STRANICE (Zadar, Šibenik) ============================ */
.main > .city-hero { padding-block: var(--space-xl) var(--space-2xl); }
.crumbs { font-size: var(--type-n1); color: var(--text-subtle); margin-bottom: var(--space-m); }
.crumbs a { color: var(--text-muted); text-underline-offset: 0.2em; }
.city-hero h1 { font-size: min(var(--type-6), 13vw); max-width: 14ch; margin-bottom: var(--space-m); letter-spacing: -0.04em; }
.city-hero .hero-lead { max-width: 52ch; }
.city-photos {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-s);
  margin-top: var(--space-xl);
}
.city-img { margin: 0; border-radius: var(--radius-img); overflow: hidden; }
.city-img img { width: 100%; height: clamp(14rem, 34vw, 28rem); object-fit: cover; }
.main > .city-sec { padding-block: var(--space-xl); }
.main > .city-sec:nth-of-type(odd) { background: var(--bg-subtle); }
.city-sec h2 { max-width: 22ch; }
.city-sec > p { color: var(--text-muted); }
.city-sec > p a { color: var(--text); text-underline-offset: 0.2em; }
.data-wrap { margin-top: var(--space-m); border-radius: 14px; box-shadow: var(--ring); background: var(--surface); }
.data-table { font-size: var(--type-n1); min-width: 34rem; }
.data-table caption { text-align: left; padding: 14px 16px 0; font-weight: 560; color: var(--text-muted); }
.data-table th, .data-table td { padding: 12px 16px; font-variant-numeric: tabular-nums; }
.data-table thead th { color: var(--text-muted); font-weight: 560; }
.data-table tbody th { font-weight: 560; }
.data-table tr:last-child th, .data-table tr:last-child td { border-bottom: 0; }
.city-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); margin-top: var(--space-l); }
@media (max-width: 40rem) {
  .city-photos { grid-template-columns: minmax(0, 1fr); }
  .city-photos .city-img:nth-child(2) { display: none; }
}
.gear-mont { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 56rem) { .gear-mont { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.city-cta .text-link { display: inline; overflow-wrap: anywhere; }
.gear-list, .prep { grid-template-columns: minmax(0, 1fr); }

/* traka dijelova: povlačenje mišem */
@media (pointer: fine) {
  .anat-reel { cursor: grab; }
}
.anat-reel.is-dragging { cursor: grabbing; user-select: none; }
.anat-reel img { -webkit-user-drag: none; user-select: none; }
.reel-btn { flex: none; }