/* Pages — preloader, hero, squeegee, film lab, process, galleries, 404 */

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: var(--z-preloader); display: flex; align-items: center; justify-content: center; background: var(--plum-900); }
.preloader.is-done { display: none; }
.preloader__box { position: relative; width: min(280px, 60vw); display: grid; justify-items: center; gap: var(--s-6); }

/* four crop marks that draw inward */
.preloader__marks { position: absolute; inset: -34px; pointer-events: none; }
.preloader__marks span { position: absolute; width: 26px; height: 26px; }
.preloader__marks span:nth-child(1) { top: 0; left: 0; border-top: 1px solid var(--gold-500); border-left: 1px solid var(--gold-500); }
.preloader__marks span:nth-child(2) { top: 0; right: 0; border-top: 1px solid var(--gold-500); border-right: 1px solid var(--gold-500); }
.preloader__marks span:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid var(--gold-500); border-left: 1px solid var(--gold-500); }
.preloader__marks span:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid var(--gold-500); border-right: 1px solid var(--gold-500); }
.js .preloader__marks span { opacity: 0; }
.preloader__logo { position: relative; width: 132px; }
.preloader__logo img { width: 100%; height: auto; }

/* diagonal gold sheen swept across the logo via a mask over the PNG */
.preloader__sheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(248, 233, 102, 0.85) 50%, transparent 62%); mix-blend-mode: overlay; pointer-events: none; opacity: 0; }
.preloader__meter { width: 132px; display: flex; align-items: center; gap: 10px; font-size: var(--t-xs); color: var(--mauve-400); font-variant-numeric: tabular-nums; }
.preloader__track { flex: 1; height: 1px; background: var(--plum-600); overflow: hidden; }
.preloader__bar { height: 100%; width: 0%; background: var(--gold-grad); }

@media (prefers-reduced-motion: reduce) {
.preloader { display: none; } }

/* Squeegee reveal A frosted-film layer sits over the photo; a squeegee edge with a gold leading line sweeps diagonally and clears it. */
.sq { position: relative; overflow: hidden; }
.sq__frost { position: absolute; inset: 0; z-index: 2; pointer-events: none; backdrop-filter: blur(14px) saturate(70%); -webkit-backdrop-filter: blur(14px) saturate(70%); background: rgba(240, 240, 240, 0.34); /* the un-frosted part is clipped away as the squeegee passes */ clip-path: polygon(-20% 0, 120% 0, 120% 120%, -20% 120%); will-change: clip-path; }
.sq__edge { position: absolute; top: -20%; left: 0; width: 3px; height: 140%; z-index: 3; background: var(--gold-grad); box-shadow: 0 0 22px 3px rgba(248, 233, 102, 0.55); transform: rotate(14deg) translate3d(-40px, 0, 0); opacity: 0; pointer-events: none; will-change: transform; }

/* Without JS or with reduced motion the frost is simply absent. */
html:not(.js) .sq__frost,
html:not(.js) .sq__edge { display: none; }

@media (prefers-reduced-motion: reduce) {
.sq__frost, .sq__edge { display: none !important; }
}

/* Home hero */

@media (min-width: 1024px) {
}
/* On phones the photo leads, matching the agreed mobile wireframe. */
@media (min-width: 1024px) {
}

@media (min-width: 1024px) {
}

/* slideshow */

@media (min-width: 1024px) {
}

/* keep slide 1 visible if JS never runs */
html:not(.js) .hero__slide { opacity: 0; }
html:not(.js) .hero__slide:first-child { opacity: 1; }

/* SplitText line masks */

/* Strengths strip */

@media (max-width: 767px) {
}

@media (min-width: 768px) {
}

@media (min-width: 1024px) {
}

/* About excerpt — overlapping images */
.about__media { position: relative; display: grid; }
.about__img-a { width: 82%; }
.about__img-b { width: 56%; position: relative; margin-top: -22%; margin-left: auto; z-index: 2; border: 6px solid var(--bg); border-radius: var(--r-frame); }

@media (min-width: 1024px) {
.about__img-b { margin-top: -30%; width: 52%; }
}

/* Services — desktop pinned horizontal scroll, mobile snap carousel */
.svc-pin { position: relative; }
/* On desktop the flex track is ~4700px wide before ScrollTrigger translates it; without this the document itself scrolls sideways. */
@media (min-width: 1024px) {
.svc-pin { overflow: hidden; } }
.svc-track { display: flex; gap: var(--s-6); }

/* mobile: snap carousel (chosen over tap-reveal: a horizontal snap row with a visible pagination line reads as native on phones and keeps photos large) */
@media (max-width: 1023px) {
.svc-track { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); gap: var(--s-4); }
.svc-track::-webkit-scrollbar { display: none; }
.svc-panel { flex: 0 0 82%; scroll-snap-align: center; }
}

@media (min-width: 1024px) {
.svc-panel { flex: 0 0 clamp(380px, 32vw, 470px); }
}
.svc-panel { position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line-soft); border-radius: var(--r-card); overflow: hidden; background: var(--surface); transition: border-color var(--d-base); }
.svc-panel:hover { border-color: var(--plum-600); }
.svc-panel__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-raised); }
.svc-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--e-out); }
.svc-panel:hover .svc-panel__media img { transform: scale(1.06); }
.svc-panel__body { padding: var(--s-5); display: grid; gap: var(--s-2); flex: 1; align-content: start; }
.svc-panel__t { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.svc-panel__d { font-size: var(--t-small); color: var(--text-muted); }
.svc-panel__more { margin-top: auto; padding-top: var(--s-4); font-size: var(--t-xs); font-weight: 700; color: var(--gold-500); }
.svc-progress { height: 2px; background: var(--line-soft); margin-top: var(--s-6); position: relative; overflow: hidden; }
.svc-progress__bar { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--gold-grad); }

/* Film Lab (interactive illustration) */
.lab { display: grid; gap: var(--s-6); }
/* Runda 5 (1): dve kartice — segmentni izbor jednakih sirina, a ne dve slobodne
   „pilule“ razlicite duzine. Aktivna je zlatna (.chip[aria-selected]). */
.lab__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); max-width: 440px; }
.lab__tabs .chip { justify-content: center; text-align: center; }
.lab__tabs .chip[aria-selected="true"] { background: var(--gold-grad); border-color: var(--gold-700); color: var(--ink); }
.lab__stage { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-frame); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--line-soft); touch-action: none; user-select: none; }
.lab__stage img.lab__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* frost layer, clipped to the drag handle position */
.lab__frost { position: absolute; inset: 0; backdrop-filter: blur(11px) saturate(72%); -webkit-backdrop-filter: blur(11px) saturate(72%); background: rgba(240, 240, 240, 0.36); clip-path: inset(0 0 0 var(--lab-x, 50%)); }

/* stopsol tint */
.lab__tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 42, 60, 0.9), rgba(12, 28, 44, 0.95)); opacity: var(--lab-tint, 0.45); mix-blend-mode: multiply; }

/* ultraclear printed graphic */
.lab__handle { position: absolute; top: 0; bottom: 0; left: var(--lab-x, 50%); width: 3px; margin-left: -1.5px; background: var(--gold-grad); box-shadow: 0 0 16px rgba(248, 233, 102, 0.5); cursor: ew-resize; touch-action: none; }
.lab__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: var(--r-fab); background: var(--gold-grad); border: 2px solid var(--plum-900); display: grid; place-items: center; color: var(--ink); box-shadow: var(--sh-2); }
.lab__knob svg { width: 18px; height: 18px; }
.lab__handle:focus-visible .lab__knob { outline: 2px solid var(--paper-100); outline-offset: 3px; }
.lab__range { display: flex; align-items: center; gap: var(--s-4); }
.lab__range input[type="range"] { flex: 1; accent-color: var(--gold-500); height: 44px; }
.lab__range-label { font-size: var(--t-xs); color: var(--text-dim); min-width: 7ch; }
.lab__note { font-size: var(--t-xs); color: var(--text-dim); }
.lab__badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: 4; padding: 5px 10px; border-radius: var(--r-chip); background: rgba(23, 16, 26, 0.78); backdrop-filter: blur(6px); font-size: 11px; font-weight: 700; color: var(--silver-300); letter-spacing: 0.01em; }

/* Process — a real 4-step sequence, so numbers are earned */
.process { position: relative; display: grid; gap: var(--s-8); }

@media (min-width: 900px) {
.process { grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } }
.process__line { position: absolute; left: 0; top: 18px; height: 1px; width: 100%; background: var(--gold-grad); transform-origin: left center; display: none; }

@media (min-width: 900px) {
.process__line { display: block; } }
.js .process__line[data-draw] { transform: scaleX(0); }
.step { position: relative; display: grid; gap: var(--s-3); align-content: start; }
.step__n { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-fab); border: 1px solid var(--gold-700); background: var(--bg); color: var(--gold-500); font-family: var(--font-display); font-weight: 800; font-size: 1rem; position: relative; z-index: 1; }
/* Gold text on the light paper background is ~1.2:1. On paper the disc becomes the gold fill and the number turns to ink. */
.on-paper .step__n { background: var(--gold-grad); color: var(--ink); }
.step__t { font-size: var(--t-h4); font-family: var(--font-display); font-weight: 600; }
.step__d { font-size: var(--t-small); color: var(--text-muted); }

/* Projects grid */
.projects { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 768px) {
.projects { gap: var(--s-6); grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 1024px) {
.projects--editorial { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* staggered on mobile */
@media (max-width: 767px) {
.projects > *:nth-child(even) { margin-top: var(--s-8); }
}
.project { position: relative; display: block; text-decoration: none; color: inherit; border-radius: var(--r-frame); overflow: hidden; background: var(--surface-raised); }
.project__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }

@media (min-width: 768px) {
.project__media { aspect-ratio: 4 / 3; } }
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--e-out), filter var(--d-slow); }
.project:hover .project__media img { transform: scale(1.06); }
.project__veil { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(10, 6, 12, 0.85)); opacity: 0.85; transition: opacity var(--d-base); }
.project:hover .project__veil { opacity: 1; }
.project__name { position: absolute; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); font-family: var(--font-display); font-size: clamp(1.125rem, 2.2vw, 1.625rem); font-weight: 600; line-height: 1.1; color: #fff; transform: translateY(6px); transition: transform var(--d-base) var(--e-out); }
.project:hover .project__name { transform: none; }
.project__meta { font-size: var(--t-xs); color: var(--silver-300); font-weight: 500; font-family: var(--font-text); display: block; margin-top: 4px; }

/* editorial spans */
@media (min-width: 1024px) {
.projects--editorial .project { grid-column: span 4; }
.projects--editorial .project:nth-child(7n + 1) { grid-column: span 7; }
.projects--editorial .project:nth-child(7n + 2) { grid-column: span 5; }
.projects--editorial .project:nth-child(7n + 6) { grid-column: span 5; }
.projects--editorial .project:nth-child(7n + 7) { grid-column: span 7; }
.projects--editorial .project:nth-child(7n + 1) .project__media,
.projects--editorial .project:nth-child(7n + 7) .project__media { aspect-ratio: 16 / 10; }
}


/* CTA band */
.cta-band { position: relative; }
.cta-band__grid { display: grid; gap: var(--s-8); align-items: center; }

@media (min-width: 900px) {
.cta-band__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-16); } }
.cta-band__title { font-size: var(--t-h2); }
.cta-band__actions { display: grid; gap: var(--s-3); }
.cta-phone { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: 10px 28px; line-height: 1; border-radius: var(--r-frame); background: var(--gold-grad); border: 1px solid var(--gold-700); color: var(--ink); font-family: var(--font-display); font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-base); }
/* Runda 5 (4.3): dugme sme do 64 px visine. Sa normalnim proredom prikaznog pisma
   od 34 px bilo je 82 px na desktopu; jedan red teksta ne treba prored, pa
   line-height: 1 drzi dugme tacno na min-height od 64 px na svakoj sirini. */
.cta-phone:hover { box-shadow: var(--sh-gold); }
.cta-phone:active { transform: scale(0.98); }
.cta-phone svg { width: 24px; height: 24px; flex: none; }

/* Contact */
.contact__grid { display: grid; gap: var(--s-10); }

@media (min-width: 1024px) {
.contact__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--s-16); } }
.ccard { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-5); border: 1px solid var(--line-soft); border-radius: var(--r-card); background: var(--surface); }
.ccard__icon { width: 22px; height: 22px; color: var(--gold-500); flex: none; margin-top: 3px; }
.ccard__b { flex: 1; min-width: 0; }
.ccard__l { font-size: var(--t-xs); color: var(--text-dim); font-weight: 600; }
.ccard__v { font-size: 1.0625rem; font-weight: 700; word-break: break-word; text-decoration: none; display: block; margin-top: 2px; }
.ccard__v:hover { color: var(--gold-300); }
.on-paper .ccard__v:hover { color: var(--plum-900); text-decoration: underline; }
.ccard__copy { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-chip); border: 1px solid var(--line); color: var(--text-muted); transition: all var(--d-fast); }
.ccard__copy:hover { border-color: var(--gold-500); color: var(--gold-500); }
.ccard__copy svg { width: 16px; height: 16px; }

/* Map — privacy-friendly click to load */
.map { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-frame); overflow: hidden; border: 1px solid var(--line-soft); background: var(--plum-800); }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__ph { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-4); text-align: center; padding: var(--s-6); /* a styled plum "map" graphic drawn in CSS — no third-party request */ background-color: var(--plum-800); background-image: linear-gradient(rgba(124, 112, 126, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 112, 126, 0.16) 1px, transparent 1px), linear-gradient(rgba(124, 112, 126, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 112, 126, 0.09) 1px, transparent 1px); background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px; }
.map__pin { width: 32px; height: 32px; color: var(--gold-500); }
.map__ph p { font-size: var(--t-small); color: var(--text-muted); max-width: 32ch; }

/* Galleries */

@media (min-width: 640px) {
}

@media (min-width: 1024px) {
}

/* every 5th tile is tall — a masonry feel without JS layout */
@media (min-width: 640px) {
}

/* vehicle drive-by strip (desktop) */
@media (min-width: 1024px) {
}

/* before/after comparison slider */

/* Service / project page detail */
.facts { display: grid; gap: var(--s-4); }

@media (min-width: 768px) {
.facts { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.fact { display: grid; gap: 6px; padding-left: var(--s-4); border-left: 1px solid var(--gold-700); }
.fact__t { font-weight: 700; font-size: 1rem; }
.fact__d { font-size: var(--t-small); color: var(--text-muted); }

/* next/prev project with peeking image */
.pnav { display: grid; gap: var(--s-4); }

@media (min-width: 768px) {
.pnav { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.pnav__item { position: relative; display: grid; gap: var(--s-2); padding: var(--s-6); min-height: 160px; align-content: center; border: 1px solid var(--line-soft); border-radius: var(--r-card); text-decoration: none; overflow: hidden; background: var(--surface); }
.pnav__item--next { text-align: right; }
.pnav__peek { position: absolute; inset: 0; z-index: 0; opacity: 0.16; transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
.pnav__peek img { width: 100%; height: 100%; object-fit: cover; }
.pnav__item:hover .pnav__peek { opacity: 0.32; transform: scale(1.05); }
.pnav__l { position: relative; z-index: 1; font-size: var(--t-xs); color: var(--text-dim); font-weight: 600; }
.pnav__t { position: relative; z-index: 1; font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.1; }

/* Services overview rows */
.srow { display: grid; gap: var(--s-5); padding-block: var(--s-8); border-bottom: 1px solid var(--line-soft); align-items: center; text-decoration: none; color: inherit; }

@media (min-width: 768px) {
.srow { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--s-10); } }

@media (min-width: 1024px) {
.srow { grid-template-columns: 80px minmax(0, 0.72fr) minmax(0, 1fr); gap: var(--s-8); } }
.srow[hidden] { display: none; }
.srow__idx { display: none; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--mauve-400); }

@media (min-width: 1024px) {
.srow__idx { display: block; } }
.srow__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--r-frame); background: var(--surface-raised); }
.srow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--e-out); }
.srow:hover .srow__media img { transform: scale(1.05); }
.srow__t { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; }
.srow__d { margin-top: var(--s-3); font-size: var(--t-small); color: var(--text-muted); }
.srow__more { margin-top: var(--s-4); font-size: var(--t-xs); font-weight: 700; color: var(--gold-500); }
.on-paper .srow__more { color: var(--plum-900); }

/* Stickers landing page (no photos yet — drawn in CSS/SVG) */
.diecut { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); }

@media (min-width: 768px) {
.diecut { grid-template-columns: repeat(2, 1fr); gap: var(--s-8); } }
.diecut__item { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; }
.diecut__item svg { width: 100%; height: 100%; }

/* 404 */
.nf { min-height: 78dvh; display: grid; place-content: center; justify-items: center; text-align: center; gap: var(--s-6); padding-top: var(--header-h); }
.nf__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* === ROUND 2 === */
/* ========================= HOME HERO (round 2) =========================
   Full-viewport background slider. Layer order:
   images -> overlay stack -> content/controls -> preview card.           */
.hero {
  position: relative; isolation: isolate;
  height: 100vh; height: 100svh;
  min-height: 560px;
  display: flex; align-items: center;
  padding-top: var(--header-h); padding-bottom: 0;
  overflow: hidden;
}
@media (max-height: 559px) { .hero { height: auto; min-height: 0; padding-block: calc(var(--header-h) + 32px) 48px; } }

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--e-io); }
.hero__slide.is-active { opacity: 1; }
.hero__slide img, .hero__slide picture { width: 100%; height: 100%; display: block; }
.hero__slide img { object-fit: cover; will-change: transform; }
html:not(.js) .hero__slide { opacity: 0; }
html:not(.js) .hero__slide:first-child { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hero__slide { transition: none; }
.hero__slide img { transform: none !important; transition: none !important; }
}

/* --- overlay stack: all inert, all above the photos --- */
.hero__ov { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* 1. directional scrim (desktop) */
.hero__ov--dir { background: linear-gradient(90deg, rgba(23,16,26,.92) 0%, rgba(23,16,26,.70) 45%, rgba(23,16,26,.25) 100%); }
/* 2. bottom fade into the next section */
.hero__ov--bot { background: linear-gradient(180deg, transparent 65%, rgba(23,16,26,1) 100%); }
/* 3. top fade for header legibility */
.hero__ov--top { background: linear-gradient(180deg, rgba(23,16,26,.70) 0, transparent 180px); }
/* 4. film grain */
.hero__ov--grain { background-image: var(--grain); background-size: 180px 180px; opacity: .04; mix-blend-mode: overlay; }
/* NOTE (round 2 critique): an engineering-grid layer used to sit here at 3%
   opacity over the hero photos. Over a photographic background it was
   imperceptible — cost without effect — so it was removed. The grid is kept
   only where it actually reads, on flat surfaces (e.g. the map placeholder). */
@media (max-width: 1023px) {
/* on phones the text sits low, so the scrim is vertical and heaviest at the bottom */
.hero__ov--dir { background: linear-gradient(180deg, rgba(23,16,26,.55) 0%, rgba(23,16,26,.62) 38%, rgba(23,16,26,.88) 66%, rgba(23,16,26,.94) 100%); }
}

.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr); gap: clamp(40px, 5vw, 88px); } }
@media (max-width: 1023px) {
.hero { align-items: flex-end; }
/* clears the controls row, which itself clears the floating buttons */
.hero__inner { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 156px); }
}
@media (min-width: 1024px) { .hero__inner { padding-bottom: 96px; } }

.hero__title { font-size: var(--t-display); font-family: var(--font-display); font-weight: 800; line-height: var(--lh-display); letter-spacing: -.015em; text-wrap: balance; }
.hero__slogan { margin-top: var(--s-5); font-style: normal; color: var(--silver-300); font-size: clamp(1rem, 2vw, 1.1875rem); max-width: 42ch; }
.hero__actions { margin-top: var(--s-8); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.line-mask { display: block; overflow: hidden; }

/* --- controls, aligned to the content column ---
   Kept clear of the floating buttons: on desktop the FAB occupies 24..80px from
   the bottom, on mobile tabbar+16 .. tabbar+72. The controls start above that. */
.hero__controls { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 3; }
@media (max-width: 1023px) { .hero__controls { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 88px); } }
/* one row, always — wrapping pushed the segments into the CTA on phones */
.hero__controls-in { display: flex; align-items: center; gap: var(--s-4); flex-wrap: nowrap; }
@media (max-width: 1023px) {
.hero__controls-in { gap: 10px; }
.hero__seg, .hero__seg::before, .hero__seg-fill { width: 26px; }
.hero__counter { font-size: 11px; }
.hero__btns { gap: 6px; }
.hero__btn { width: 40px; height: 40px; }
}
.hero__segs { display: flex; gap: 8px; }
.hero__seg { width: 46px; height: 24px; display: flex; align-items: center; padding: 0; background: none; border: 0; cursor: pointer; }
.hero__seg::before { content: ""; position: absolute; width: 46px; height: 2px; background: rgba(255,255,255,.28); }
.hero__seg { position: relative; }
.hero__seg-fill { position: relative; width: 46px; height: 2px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left center; }
.hero__counter { font-size: var(--t-xs); color: var(--silver-300); font-variant-numeric: tabular-nums; letter-spacing: .04em; white-space: nowrap; }
.hero__btns { display: flex; gap: 8px; margin-left: auto; }
.hero__btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: #fff;
  background: rgba(35,24,33,.55); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: border-color var(--d-fast), background-color var(--d-fast), transform var(--d-fast) var(--e-out);
}
.hero__btn:hover { border-color: var(--gold-500); }
.hero__btn:active { transform: scale(.94); }
.hero__btn svg { width: 18px; height: 18px; }
.hero__btn .i-play { display: none; }
.hero__btn.is-paused .i-play { display: block; }
.hero__btn.is-paused .i-pause { display: none; }

/* --- right card: preview of the NEXT slide --- */
.hero__card { position: relative; display: none; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
@media (min-width: 768px) { .hero__card { display: block; } }
/* The card sits over a photo of the same kind, so it needs a real edge to read
   as a separate object: hairline border, dark plate and a lifted shadow. */
.hero__card-media {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-frame); background: var(--plum-900);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 6px rgba(23,16,26,.35);
  transition: border-color var(--d-base), transform var(--d-base) var(--e-out);
}
.hero__card:hover .hero__card-media { border-color: var(--gold-500); transform: translateY(-3px); }
.hero__card:active .hero__card-media { transform: scale(.99); }
/* crop marks on the card, drawn outside the media box */
.hero__card-marks { position: absolute; inset: -7px; pointer-events: none; }
.hero__card-marks span { position: absolute; width: 14px; height: 14px; }
.hero__card-marks span:nth-child(1) { top: 0; left: 0; border-top: 1px solid var(--silver-300); border-left: 1px solid var(--silver-300); }
.hero__card-marks span:nth-child(2) { top: 0; right: 0; border-top: 1px solid var(--silver-300); border-right: 1px solid var(--silver-300); }
.hero__card-marks span:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid var(--silver-300); border-left: 1px solid var(--silver-300); }
.hero__card-marks span:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid var(--silver-300); border-right: 1px solid var(--silver-300); }
@media (min-width: 768px) and (max-width: 1023px) { .hero__card { max-width: 320px; margin-left: auto; } }
.hero__card-img { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms var(--e-io); }
.hero__card-img.is-active { opacity: 1; }
.hero__card-img img, .hero__card-img picture { width: 100%; height: 100%; }
.hero__card-img img { object-fit: cover; }
.hero__card-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(23,16,26,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 11px; font-weight: 700; color: var(--silver-300); letter-spacing: .02em;
}
.hero__card:hover .hero__card-label { color: #fff; border-color: var(--gold-500); }

/* ========================= PAGE BANNER (round 2) ========================= */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Runda 5 (3.3): min-height umesto height. Sadrzaj je prikacen za dno, pa je
     kod fiksne visine duzi tekst (ultraclear na 360x780, uz novi red o ceni)
     izlazio GORE, ispod zaglavlja, i secen. Kad sadrzaj stane, izgled je isti;
     kad ne stane, baner poraste umesto da sece naslov. */
  min-height: clamp(460px, 68svh, 680px);
  display: flex; align-items: flex-end;
  margin-bottom: 0;
}
@media (min-width: 1024px) { .page-hero { min-height: clamp(520px, 72svh, 820px); } }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
.page-hero__bg img, .page-hero__bg picture { width: 100%; height: 100%; display: block; }
.page-hero__bg img { object-fit: cover; }
.page-hero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(40px, 7vh, 84px); padding-top: calc(var(--header-h) + 40px); }
.page-hero__crumbs { margin-bottom: var(--s-4); }
.page-hero__title { font-size: var(--t-h1); font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -.015em; max-width: 18ch; text-wrap: balance; }
.page-hero__desc { margin-top: var(--s-4); color: var(--silver-300); max-width: 56ch; }
.page-hero__actions { margin-top: var(--s-7, 28px); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.page-hero .crumbs a, .page-hero .crumbs [aria-current] { color: var(--silver-300); }
.page-hero .crumbs li + li::before { color: rgba(255,255,255,.35); }

/* graphic banner (no photo available) */
.page-hero--graphic .page-hero__bg {
  background: radial-gradient(ellipse 80% 70% at 75% 40%, #2c2030 0%, var(--plum-900) 70%);
}
/* shapes live on the right half so they never sit behind the headline */
.page-hero__shapes { position: absolute; inset: 0; display: grid; align-items: center; justify-items: end; padding-right: clamp(16px, 6vw, 90px); opacity: .55; }
.page-hero__shapes svg { width: min(46%, 540px); height: auto; }
@media (max-width: 767px) { .page-hero__shapes { align-items: start; padding-top: calc(var(--header-h) + 28px); justify-items: center; opacity: .4; } .page-hero__shapes svg { width: 74%; } }

/* ========================= GALLERY (round 2) ========================= */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } }
@media (min-width: 1024px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } }

.g-item {
  position: relative; display: block; width: 100%;
  aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r-frame); background: var(--surface-raised);
  text-decoration: none; cursor: pointer;
  --sx: 50%; --sy: 50%;
}
.g-item[hidden] { display: none; }
.g-item picture { display: block; width: 100%; height: 100%; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--e-out); }
.g-item:hover img { transform: scale(1.05); }
.g-item:active { transform: scale(.985); }
/* cursor-follow spotlight + gold hairline, both inert */
.g-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid transparent; border-radius: var(--r-frame);
  transition: border-color var(--d-base), box-shadow var(--d-base);
}
.g-item:hover::after { border-color: rgba(248,233,102,.55); box-shadow: inset 0 0 0 1px rgba(248,233,102,.18); }
.g-item__spot {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity var(--d-base);
  background: radial-gradient(180px circle at var(--sx) var(--sy), rgba(248,233,102,.16), transparent 70%);
}
@media (hover: hover) and (pointer: fine) { .g-item:hover .g-item__spot { opacity: 1; } }
/* crop marks, identical offset everywhere, never clickable */
.g-item__marks { position: absolute; inset: 8px; pointer-events: none; opacity: .55; transition: opacity var(--d-base); }
.g-item__marks span { position: absolute; width: 12px; height: 12px; }
.g-item__marks span:nth-child(1) { top: 0; left: 0; border-top: 1px solid var(--silver-300); border-left: 1px solid var(--silver-300); }
.g-item__marks span:nth-child(2) { top: 0; right: 0; border-top: 1px solid var(--silver-300); border-right: 1px solid var(--silver-300); }
.g-item__marks span:nth-child(3) { bottom: 0; left: 0; border-bottom: 1px solid var(--silver-300); border-left: 1px solid var(--silver-300); }
.g-item__marks span:nth-child(4) { bottom: 0; right: 0; border-bottom: 1px solid var(--silver-300); border-right: 1px solid var(--silver-300); }
.g-item:hover .g-item__marks { opacity: 1; }
.gallery__more { margin-top: var(--s-8); display: flex; justify-content: center; }

/* vehicle drive-by strip stays horizontal on desktop */
@media (min-width: 1024px) {
.gallery--drive { display: flex; overflow-x: auto; gap: 16px; scroll-snap-type: x proximity; padding-bottom: var(--s-4); }
.gallery--drive .g-item { flex: 0 0 clamp(300px, 26vw, 400px); scroll-snap-align: start; }
}

/* 404 body now sits under a banner, so it no longer needs to fill the screen */
.nf { min-height: 0; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(56px, 7vw, 96px); }

/* section rhythm */
.section { padding-block: clamp(72px, 10vw, 140px); }
.section--tight { padding-block: clamp(48px, 6vw, 84px); }
/* the banner already fades into the page, so the first section after it does not
   need a full pad on top — that was the dead space the owner flagged */
.page-hero + .section { padding-top: clamp(40px, 5vw, 72px); }
.hero + .section { padding-top: clamp(48px, 6vw, 88px); }
/* === /ROUND 2 === */

/* === ROUND 3: stopsol Spolja / Iznutra (1.5) === */
.ss { display: grid; gap: var(--s-4); }
.ss__stage { position: relative; }
.ss__view { position: absolute; inset: 0; opacity: 0; transition: opacity 340ms var(--e-out); }
.ss__view.is-on { opacity: 1; }
.ss__view img.lab__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Outside: a faint specular sheen that reads as reflected sky on the glass. */
.ss__mirror { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(197,196,197,.30) 0%, rgba(255,255,255,.10) 34%, rgba(124,112,126,.16) 58%, rgba(255,255,255,.08) 100%); mix-blend-mode: screen; }
/* Inside: the cool bluish cast the client described, view stays readable. */
.ss__cool { position: absolute; inset: 0; pointer-events: none; background: rgba(40, 90, 140, .35); mix-blend-mode: multiply; }
html:not(.js) .ss__view { position: relative; opacity: 1; }
html:not(.js) .ss__view[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .ss__view { transition: none; } }

/* === ROUND 3: before / after slider (1.8) === */
.ba { --ba-x: 50%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--r-frame); background: var(--surface-raised); touch-action: pan-y; user-select: none; cursor: ew-resize; }
@media (min-width: 768px) { .ba { aspect-ratio: 16 / 10; } }
.ba__pane { position: absolute; inset: 0; }
.ba__pane img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba__pane--after { clip-path: inset(0 0 0 var(--ba-x)); }
.ba__tag { position: absolute; bottom: 12px; padding: 6px 12px; border-radius: var(--r-chip); background: rgba(23, 16, 26, .82); color: #fff; font-size: var(--t-xs); font-weight: 700; letter-spacing: .02em; }
.ba__tag--l { left: 12px; }
.ba__tag--r { right: 12px; }
.ba__handle { position: absolute; top: 0; bottom: 0; left: var(--ba-x); width: 3px; margin-left: -1.5px; background: var(--gold-grad); box-shadow: 0 0 16px rgba(248, 233, 102, .5); cursor: ew-resize; }
.ba__handle:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 3px; }
.ba__knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: var(--r-fab); display: grid; place-items: center; background: var(--gold-grad); color: var(--ink); box-shadow: var(--sh-2); }
.ba__knob svg { width: 22px; height: 22px; }
.ba.is-dragging { cursor: grabbing; }
/* No JS: show both photos stacked rather than a half-clipped one. */
html:not(.js) .ba { aspect-ratio: auto; display: grid; gap: 2px; cursor: default; }
html:not(.js) .ba__pane { position: relative; inset: auto; }
html:not(.js) .ba__pane--after { clip-path: none; }
html:not(.js) .ba__handle { display: none; }