/* ============================================================
   RD Stolarija — main.css
   The extrusion is the argument. Mill-grey ground, hairline rules,
   one specular line, brand red spent once per view. No build step:
   edit this file directly.
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/sourcesans-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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/sourcesans-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:Archivo;font-style:normal;font-weight:600 700;font-display:swap;
  src:url(/assets/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Archivo;font-style:normal;font-weight:600 700;font-display:swap;
  src:url(/assets/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2192,U+2212,U+2215}

/* ---------- tokens ---------- */
:root{
  /* Cool anodised aluminium. Red is spent once per view — never a wash. */
  --c-bg:#ebecee;
  --c-surface:#fff;
  --c-ink:#16181a;
  --c-ink-soft:#565b60;
  --c-aluminium:#9aa0a6;
  --c-line:#d5d8db;
  --c-accent:#c4161c;
  --c-accent-dark:#9c1116;
  --c-focus:#0b6ab0;

  --font-display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem;   --sp-7:3rem;   --sp-8:4.5rem;

  --radius:2px;
  --wrap:1140px;

  /* Motion multiplier: every timed transition is written as
     calc(var(--motion) * <duration>) so reduced-motion can zero the whole
     site from one place, with no !important anywhere. */
  --motion:1;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce){ :root{ --motion:0 } }

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0;background:var(--c-bg);color:var(--c-ink);
  font:400 clamp(1rem,.97rem + .15vw,1.0625rem)/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
img,picture,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 var(--sp-4);line-height:1.08;font-family:var(--font-display);
  font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h3,h4{font-weight:600;line-height:1.2}
h1{font-size:clamp(2.1rem,1.4rem + 3.4vw,3.9rem);letter-spacing:-.03em}
h2{font-size:clamp(1.5rem,1.2rem + 1.8vw,2.5rem);letter-spacing:-.025em}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);letter-spacing:-.01em}
p{margin:0 0 var(--sp-4);text-wrap:pretty}
a{color:var(--c-ink);text-decoration-color:var(--c-line);text-underline-offset:.18em}
a:hover,a:focus-visible{color:var(--c-accent-dark);text-decoration-color:currentColor}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.25rem}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px;border-radius:2px}

/* ---------- layout ---------- */
.container{width:min(100% - 2rem,var(--wrap));margin-inline:auto}
/* Cadence, not a metronome: more air above a section's opening move than
   it leaves below, so major movements read as movements. */
.section{padding-block:clamp(3.25rem,1.8rem + 6vw,7rem) clamp(2.25rem,1.4rem + 3.4vw,4.25rem)}
.section--tight{padding-block:clamp(2rem,1.3rem + 2.8vw,3.5rem) clamp(1.5rem,1.1rem + 1.6vw,2.25rem)}
.section--alt{background:var(--c-surface);border-block:1px solid var(--c-line)}
/* Two plain sections in a row read as one continuous piece of writing, so the
   second gives up its opening air: the first one's bottom padding is already the
   gap. Without this the two padding blocks stack to ~11rem of blank page. A
   .section--alt neighbour keeps both, because its band needs room on each side. */
.section:not(.section--alt)+.section:not(.section--alt){padding-top:0}
/* The hero photo sits in a bare .section--tight; the first block of text under it
   does not also need a full opening move on top of the photo's own bottom padding. */
.section--tight:not(.section)+.section:not(.section--alt){padding-top:clamp(1.5rem,1rem + 2.4vw,3rem)}
.section-title{text-align:center;margin-top:0;margin-bottom:var(--sp-3)}
.section-subtitle{
  text-align:center;max-width:60ch;margin:0 auto var(--sp-7);
  color:var(--c-ink-soft);font-size:1.05rem;
}
.lead{font-size:1.15rem;line-height:1.6;color:var(--c-ink-soft)}
.grid{display:grid;gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.text-center{text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:.75rem 1.5rem;border:1px solid transparent;border-radius:var(--radius);
  font:500 1rem/1 var(--font-body);text-decoration:none;cursor:pointer;
  transition:background-color calc(var(--motion) * .18s) ease,border-color calc(var(--motion) * .18s) ease,color calc(var(--motion) * .18s) ease;
}
.btn--primary{background:var(--c-accent);color:#fff}
.btn--primary:hover{background:var(--c-accent-dark);color:#fff}
.btn--ghost{background:transparent;border-color:currentColor;color:var(--c-ink)}
.btn--ghost:hover{border-color:var(--c-accent);color:var(--c-accent)}
.btn:active{transform:translateY(1px)}
/* Closing CTA band and the 404 link row. This is what the twelve
   `class="hero__actions" style="margin-top:1.5rem"` copies were reaching for;
   .hero__actions now belongs to the heroes again. */
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-5)}
.cta-band__phone{margin-top:var(--sp-4)}
.cta-band__phone a{white-space:nowrap}
/* Size modifiers — same colours as .btn--primary/.btn--ghost, larger targets
   for a multi-step form's primary actions. Canonical over any page-local
   `.btn-lg`/`.btn-sm`. */
.btn--lg{padding:1rem 2rem;font-size:1.125rem;min-height:60px}
.btn--sm{padding:.75rem 1.5rem;font-size:.875rem;min-height:44px}

/* ---------- forms ----------
   Promoted out of quote-form.css when /kontakt gained a message form: two
   pages share the field system now, and a second copy of it is the thing that
   drifts. Only page-specific furniture stays behind there — the quote form's
   step badges, cart table and dimension row. */
.form-group{position:relative}
.form-group label{
  display:block;margin-bottom:8px;
  font:600 .8rem/1 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--c-ink);
}
/* Optional is worth saying; required is not worth an asterisk legend. */
.form-optional{font-weight:400;letter-spacing:.03em;text-transform:none;color:var(--c-ink-soft)}
.form-control{
  width:100%;padding:16px 20px;
  background:var(--c-bg);color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--radius);
  font-family:var(--font-body);font-size:1rem;
  transition:border-color calc(var(--motion) * .15s) ease,background-color calc(var(--motion) * .15s) ease;
}
.form-control:focus{outline:none;border-color:var(--c-accent);background:var(--c-surface)}
.form-control::placeholder{color:var(--c-aluminium)}
select.form-control{
  cursor:pointer;appearance:none;padding-right:48px;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%23565b60" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
  background-position:right 16px center;background-repeat:no-repeat;background-size:16px;
}
/* Selected-value contrast comes from .form-control's own color/background
   (var(--c-ink) on var(--c-bg), 15.06:1) — no reinforcement needed. */
select.form-control option{padding:12px;background:var(--c-surface);color:var(--c-ink);font-weight:500}
select.form-control option:checked,
select.form-control option:hover{background:var(--c-ink);color:#fff;font-weight:600}
select.form-control optgroup{
  font-weight:700;color:var(--c-ink);background:var(--c-bg);
  font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;
}
textarea.form-control{resize:vertical;min-height:120px}

/* An errored field takes an ink hairline, not a red one: red is already this
   system's focus colour on an input, so a red error border would read as
   "this field is focused". The message below and aria-invalid carry the
   meaning — colour never carries it alone. */
.form-control[aria-invalid="true"]{border-color:var(--c-ink)}
.form-error{margin:var(--sp-2) 0 0;font-size:.9rem;font-weight:600;color:var(--c-ink)}

/* Status messages (functional feedback — kept semantically distinct).
   Two-Plane Rule: a white surface on the ground, divided by a hairline. The
   mint/rose panels these replaced were a third and fourth background tone in
   a near-monochrome system. The icon carries the distinction — red is spent
   as a mark here, never as a wash or as running text. */
.status-message{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:16px 20px;margin-bottom:var(--sp-5);
  background:var(--c-surface);color:var(--c-ink);
  border:1px solid var(--c-line);border-radius:var(--radius);font-weight:500;
}
.status-message .icon{width:18px;height:18px;flex-shrink:0}
.status-message p:last-child{margin-bottom:0}
.status-success .icon{color:var(--c-ink)}
.status-error .icon{color:var(--c-accent)}
.status-error{font-weight:600}
/* Transient feedback, positioned in CSS rather than by inline style. */
.status-toast{position:fixed;top:20px;right:20px;left:20px;z-index:9999;margin-bottom:0}
@media (min-width:480px){ .status-toast{left:auto;max-width:26rem} }

/* Message form on /kontakt. Five fields, two to a row wherever there is room
   for them and one column below that — auto-fit, not a sixth breakpoint. */
.contact-form,
.contact-form__alert{max-width:44rem;margin-inline:auto}
.contact-form{
  display:grid;gap:var(--sp-5);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);
}
.contact-form__row{display:grid;gap:var(--sp-5);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.contact-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-5)}
.contact-form__foot .btn{flex:0 0 auto}
/* Sits beside the button rather than pushed to the far edge: space-between
   opened a 240px gap that read as two unrelated blocks. */
.contact-form__note{margin:0;flex:0 1 34ch;color:var(--c-ink-soft);font-size:.9rem;line-height:1.5}
/* Off screen rather than display:none — a bot fills every input it can parse,
   and a field it cannot see is the one that identifies it. */
.form-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:480px){
  .contact-form__foot .btn{width:100%}
}

/* ---------- header / nav ---------- */
/* Condensing is scroll-driven JS (adds .site-header--condensed); everything
   here degrades to the uncondensed, always-sticky header with JS off. */
.site-header{
  position:sticky;top:0;z-index:40;background:var(--c-surface);border-bottom:1px solid var(--c-line);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:76px;
}
/* The box itself snaps size instantly (a single, one-off reflow when the
   class toggles) instead of transitioning min-height/height — animating
   those forces layout on every frame of a scroll-driven transition, which
   is the worst place for it. The brand mark carries the motion instead:
   its layout box stays fixed at native size (crisp, never upscaled) and
   only its paint is scaled down via transform, which is compositor-only. */
.site-header--condensed .site-header__inner{min-height:56px}
.site-header__brand img{
  height:36px;width:auto;
  transform:scale(1);
  transform-origin:left center;
  transition:transform calc(var(--motion) * .3s) var(--ease-out-expo);
}
.site-header--condensed .site-header__brand img{transform:scale(calc(26/36))}
/* .site-nav nests inside .site-header, which is its own stacking context
   (sticky + z-index). A fixed, full-viewport nav still stacks inside that
   context, so brand/toggle need an explicit z-index above it or the open
   panel paints over them instead of just the page below. */
/* 44px touch floor; the 76px header already has the room, and centring the
   38px logo inside it leaves the paint where it was. */
.site-header__brand{position:relative;z-index:2;display:inline-flex;
  align-items:center;min-height:44px}

/* Borderless morphing toggle: two hairlines, no box. Hidden entirely
   without JS — the no-JS fallback nav below is always on-screen instead. */
.nav-toggle{
  display:none;position:relative;z-index:2;width:44px;height:44px;padding:0;border:0;
  background:transparent;cursor:pointer;color:var(--c-ink);
}
.nav-toggle__bar{
  position:absolute;left:11px;right:11px;height:2px;background:currentColor;
  transition:transform calc(var(--motion) * .32s) var(--ease-out-expo),
             top calc(var(--motion) * .32s) var(--ease-out-expo);
}
.nav-toggle__bar:first-child{top:17px}
.nav-toggle__bar:last-child{top:25px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:first-child{top:21px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:last-child{top:21px;transform:rotate(-45deg)}

.site-nav ul{display:flex;align-items:center;gap:var(--sp-5);list-style:none;margin:0;padding:0}
.site-nav a{
  display:block;padding:.5rem 0;color:var(--c-ink);text-decoration:none;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:-.005em;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--c-accent)}
.site-nav [aria-current="page"]{color:var(--c-ink);border-bottom-color:var(--c-ink)}
/* Specificity beats `.site-nav a` on its own — no !important required. */
.site-nav a.site-nav__cta{
  background:var(--c-ink);border-bottom-color:transparent;color:#fff;
  padding:.55rem 1.05rem;font-size:.85rem;letter-spacing:.01em;border-radius:var(--radius);
}
.site-nav a.site-nav__cta:hover{background:var(--c-accent-dark);color:#fff}
.site-nav__bottom{display:none}

/* Usluge dropdown. Server-rendered links, opened by hover or keyboard focus with
   no script; main.js only adds tap-to-toggle for touch. The panel lingers 0.2s
   after the pointer leaves so it can cross the gap between the link and the
   panel without the menu closing under it. */
.has-menu{display:flex;align-items:center}
.submenu-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:2rem;
  padding:0;border:0;background:transparent;cursor:pointer;color:var(--c-ink);
}
.submenu-toggle__chev{
  width:.42rem;height:.42rem;border:solid currentColor;border-width:0 2px 2px 0;
  transform:translateY(-2px) rotate(45deg);
  transition:transform calc(var(--motion) * .2s) var(--ease-out-expo);
}
.has-menu[data-open="true"] .submenu-toggle__chev{transform:translateY(2px) rotate(-135deg)}
.mega__title{
  margin:0 0 var(--sp-2);font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-soft);
}
.mega ul{display:block;padding:0;margin:0;list-style:none}
.site-nav .mega a{padding:.3rem 0;font-size:.95rem;font-weight:500;border-bottom:0}
.site-nav .mega a[aria-current="page"]{text-decoration:underline;text-underline-offset:.25em}
.site-nav .mega__all{display:inline-block;margin-top:var(--sp-4);font-weight:600}
.site-nav .mega__all::after{content:" \2192"}
@media (min-width:901px){
  .mega{
    position:absolute;top:100%;left:50%;width:min(58rem,calc(100vw - 2rem));
    transform:translateX(-50%);background:var(--c-surface);border:1px solid var(--c-line);
    border-top:0;box-shadow:0 18px 40px -22px rgba(0,0,0,.35);
    padding:var(--sp-6) var(--sp-6) var(--sp-5);
    opacity:0;visibility:hidden;
    transition:opacity .15s ease,visibility 0s linear .2s;
  }
  .has-menu:hover .mega,.has-menu:focus-within .mega,.has-menu[data-open="true"] .mega{
    opacity:1;visibility:visible;transition-delay:0s;
  }
  .mega__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6)}
}

@media (max-width:900px){
  /* No-JS baseline: the nav is a plain, always-visible stacked list under
     the header — reachable and usable with zero script. */
  .site-nav{
    background:var(--c-surface);border-bottom:1px solid var(--c-line);
    padding:var(--sp-4) 1rem var(--sp-5);
  }
  .site-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .site-nav li+li{border-top:1px solid var(--c-line)}
  .site-nav a{padding:.9rem 0}
  .site-nav a.site-nav__cta{display:inline-block;margin-top:var(--sp-3)}

  /* JS-enhanced baseline: hide behind the toggle, promote to a full-viewport
     panel driven by aria-expanded/data-open. This is the one authored motion
     moment — everything else on the page enters already visible. */
  html.js .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  html.js .site-nav{
    position:fixed;inset:77px 0 0;z-index:1;display:flex;flex-direction:column;
    justify-content:space-between;background:var(--c-bg);border-bottom:0;
    padding:var(--sp-5) var(--sp-5) var(--sp-6);
    opacity:0;transform:translateY(-.75rem);visibility:hidden;overflow-y:auto;
    transition:opacity calc(var(--motion) * .32s) var(--ease-out-expo),
               transform calc(var(--motion) * .32s) var(--ease-out-expo),
               visibility 0s linear calc(var(--motion) * .32s);
  }
  html.js .site-nav[data-open="true"]{
    opacity:1;transform:translateY(0);visibility:visible;
    transition:opacity calc(var(--motion) * .32s) var(--ease-out-expo),
               transform calc(var(--motion) * .32s) var(--ease-out-expo),
               visibility 0s linear 0s;
  }
  html.js .site-nav ul{gap:0}
  html.js .site-nav li+li{border-top-color:var(--c-line)}
  html.js .site-nav a{
    padding:1.05rem 0;font-size:clamp(1.5rem,1.15rem + 2.2vw,2rem);letter-spacing:-.02em;
  }
  /* The panel starts under the header row (76px + its 1px rule) rather than
     behind it, so the long Usluge accordion scrolls beneath a solid bar instead
     of bleeding through the logo and the close button. The header keeps its full
     height and the panel colour while the menu is open, even if it was condensed. */
  body.nav-open .site-header{background:var(--c-bg)}
  body.nav-open .site-header__inner{min-height:76px}
  html.js .site-nav li.site-nav__cta-item{display:none}
  html.js .site-nav__bottom{
    display:flex;flex-direction:column;gap:var(--sp-4);
    margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--c-line);
  }
  html.js .site-nav__phone{
    display:inline-flex;align-items:center;gap:var(--sp-2);
    font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;
    color:var(--c-accent);text-decoration:none;
  }
  html.js .site-nav__phone .icon{width:22px;height:22px}
  /* `html.js .site-nav a` (link size, zero side padding, ink colour) outranks
     .btn, so the panel's button needs its own component styles restored. */
  html.js .site-nav .btn{
    display:flex;padding:.75rem 1.5rem;border:1px solid transparent;font:500 1rem/1 var(--font-body);letter-spacing:0;
  }
  html.js .site-nav .btn--primary,html.js .site-nav .btn--primary:hover{color:#fff}
  html.js .site-nav__bottom .btn{width:100%}
  /* Dropdown on the phone: the link and its chevron share the first row, the
     groups open beneath as an accordion. Without JS they stay open. */
  .has-menu{flex-wrap:wrap;justify-content:space-between}
  .has-menu>a{flex:1}
  .submenu-toggle{display:none;width:2.75rem;height:2.75rem}
  html.js .submenu-toggle{display:inline-flex}
  .mega{flex-basis:100%;padding:0 0 var(--sp-3)}
  .mega__group{padding-top:var(--sp-3)}
  html.js .mega{display:none}
  html.js .has-menu[data-open="true"] .mega{display:block}
  html.js .site-nav .mega a{padding:.55rem 0;font-size:1.1rem;letter-spacing:0;font-weight:500}
}
@media (min-width:901px){ .nav-toggle{display:none} }

/* ---------- hero (photo header, interior pages) ---------- */
.hero{position:relative}
.hero:not(.hero--split){
  display:grid;place-items:center;min-height:clamp(230px,32vh,340px);
  padding-block:var(--sp-7);background-color:#3a3d41;background-position:center;
  background-size:cover;background-repeat:no-repeat;background-blend-mode:luminosity;
  color:#fff;text-align:center;
}
.hero:not(.hero--split)::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,16,18,.5),rgba(14,16,18,.72))}
.hero:not(.hero--split) > .container{position:relative;z-index:1}
.hero__title{color:#fff;margin-bottom:var(--sp-3)}
.hero__subtitle{max-width:60ch;margin:0 auto var(--sp-2);font-size:1.1rem;color:rgba(255,255,255,.94)}
.hero__desc{max-width:60ch;margin:0 auto var(--sp-4);color:rgba(255,255,255,.84);font-size:.95rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-2)}
/* White ghost is for the interior heroes, which are photographs. The split
   hero's copy sits on mill grey, where white measures ~1.1:1 — scoped the
   same way as the other .hero:not(.hero--split) rules above. */
.hero:not(.hero--split) .btn--ghost{color:#fff;border-color:rgba(255,255,255,.65)}
.hero:not(.hero--split) .btn--ghost:hover{color:#fff;border-color:#fff}

/* ---------- hero — homepage split (the compositional contract) ---------- */
.hero--split{
  display:grid;grid-template-columns:minmax(300px,38%) 1fr;
  min-height:clamp(420px,58vh,600px);background:var(--c-bg);
}
.hero__copy{display:flex;flex-direction:column;justify-content:center;gap:var(--sp-4);
  padding:var(--sp-7) clamp(1.25rem,4vw,3.25rem)}
/* The global h1 clamp is scaled for a 1140px measure. Left at that size inside
   this 38% column it wraps to five ragged lines and drives the hero past the
   fold, taking the phone number — the point of the first viewport — with it. */
.hero__copy .hero__title{color:var(--c-ink);margin-bottom:0;
  font-size:clamp(1.9rem,1.3rem + 1.6vw,2.9rem)}
.hero__copy .hero__subtitle,.hero__copy .hero__desc{
  text-align:left;color:var(--c-ink-soft);max-width:36ch;margin:0;font-size:1.02rem}
/* The pair is the site's own .btn--primary / .btn--ghost — the same two
   controls as the closing CTA band and the same split as the mobile call
   bar. It used to be a bespoke text pair, a bare red number beside an
   underlined link, which read as two paragraphs rather than as the page's
   call to action and made the hero the one place on the site not using the
   button components. .btn carries its own 48px height, so the 44px
   pseudo-element that protected the old shared baseline goes with it. */
.hero__copy .hero__actions{justify-content:flex-start;align-items:center;gap:var(--sp-3);margin-top:var(--sp-2)}
.hero__copy .hero__actions .icon{width:22px;height:22px;margin:0}
.hero__media{position:relative;margin:0;overflow:hidden;display:grid;align-self:stretch}
/* <picture> is the grid item; without this the img sizes to the source
   natural 1161x1600 and drives the whole hero past the fold. */
.hero__media picture{display:contents}
/* Portrait sources in a landscape frame: bias the crop to the facade band so
   the windows — the work — stay in view rather than sky or pavement. */
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:saturate(.85)}
/* Caption sits on whatever the photo happens to be; a short base scrim keeps
   0.7rem white type legible over pale facades. Same device as the interior
   page heroes, confined to the caption band. */
.hero__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,transparent,rgba(14,16,18,.55));pointer-events:none}
.hero__media figcaption,.hero__media .specular{z-index:1}
.hero__media .specular{position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.9}
/* Inset on both sides: with only a left inset the caption wraps flush to the
   frame's right edge on a 320-360px phone. */
.hero__media figcaption{position:absolute;left:var(--sp-5);right:var(--sp-5);bottom:var(--sp-5);color:#fff;
  font:600 .7rem/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,.45)}
@media (max-width:820px){
  .hero--split{grid-template-columns:1fr;height:auto}
  .hero__copy{padding:var(--sp-6) 1.25rem}
  /* Height from the width, never the reverse. `aspect-ratio` with a fixed
     height derived a 400px-wide well from a 300px height, which overflowed
     every phone under 400px (80px of sideways scroll at 320px) and left the
     building stranded at 400px against 820px of ground on a tablet. 75vw is
     the 4:3 the frame wants; the cap stops it eating a tablet viewport and
     the floor keeps a real photograph on the narrowest phone. */
  .hero__media{width:100%;height:clamp(280px,75vw,420px)}
}

/* ---------- cards ---------- */
.card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);
  text-decoration:none;color:inherit;transition:border-color calc(var(--motion) * .18s) ease,transform calc(var(--motion) * .18s) ease;
}
.card:hover{border-color:var(--c-aluminium);transform:translateY(-2px);color:inherit}
.card__media{aspect-ratio:4/3;overflow:hidden;background:var(--c-bg)}
/* Two thirds of the building library is portrait. A centred crop in a 4:3 well
   decapitates it; anchoring to the top keeps the roofline. */
.card__media img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.card__body{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);flex:1}
.card__body h3{margin:0}
.card__body p{margin:0;color:var(--c-ink-soft);font-size:.95rem}
.card__cta{margin-top:auto;padding-top:var(--sp-3);color:var(--c-ink);font-weight:600}
.card:hover .card__cta{color:var(--c-accent)}

/* ---------- feature / process ---------- */
/* ---------- contact lead (kontakt) ---------- */
/* The same conversion pair as the split hero — red number, underlined
   secondary — so the contact page speaks the homepage's language. It sits
   above the address and hours detail because the call is the conversion; the
   address is what you read after deciding to get in touch, not before. */
/* Every line in the block is icon + text, so the four items read as one list
   at two weights instead of four unrelated bits of type: a red number and a
   plain underlined address were the same rank visually but looked like a
   mistake side by side. Underlines are hover-only here — with an icon already
   marking each item as actionable, a static underline on one link and not the
   next is just noise. */
.contact-lead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:var(--sp-2) var(--sp-6);margin:0 0 var(--sp-3)}
.contact-lead a{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);
  text-decoration-thickness:1px;text-underline-offset:.28em}
/* 44px touch floor grown with a pseudo-element, not box height, because the
   two share a baseline that box growth would break. Same device as the hero. */
.contact-lead a::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
.contact-lead .icon{stroke:currentColor;color:inherit;margin:0}
.contact-lead__tel{text-decoration:none;
  font:700 1.4rem/1 var(--font-display);letter-spacing:-.01em;
  color:var(--c-accent)}
.contact-lead__tel:hover{color:var(--c-accent-dark);text-decoration:underline;
  text-decoration-color:currentColor}
.contact-lead__tel .icon{width:26px;height:26px}
.contact-lead__mail{font:600 1.05rem/1 var(--font-display);color:var(--c-ink);
  text-decoration:none}
.contact-lead__mail .icon{width:22px;height:22px;color:var(--c-aluminium)}
.contact-lead__mail:hover{color:var(--c-accent);text-decoration:underline;
  text-decoration-color:currentColor}
.contact-lead__mail:hover .icon{color:currentColor}

/* The address and hours, under the number rather than beside it. This replaced
   two .feature cards — one carrying a map button, one carrying two lines of
   hours and 200px of nothing — whose content the footer already repeats on
   every page and whose map button duplicated the map section right below. The
   NAP itself stays: it has to match business.php for local search. The cards
   were what had to go, and .feature and .grid--start went with them; this page
   was the only thing using either. */
.contact-nap{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2) var(--sp-5);
  margin:0 0 var(--sp-6);font-style:normal;
  color:var(--c-ink-soft);font-size:.95rem;
}
.contact-nap > span{display:inline-flex;align-items:center;gap:var(--sp-2)}
.contact-nap .icon{width:20px;height:20px;color:var(--c-aluminium);flex-shrink:0}
.contact-nap a{color:inherit;text-decoration:none;text-underline-offset:.24em}
.contact-nap a:hover{color:var(--c-accent-dark);text-decoration:underline}
.icon{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;color:var(--c-ink)}
.step{text-align:center}
.step__num{
  display:grid;place-items:center;width:42px;height:42px;margin:0 auto var(--sp-3);
  border-radius:50%;background:var(--c-ink);color:#fff;font-family:var(--font-display);font-weight:700;
}

/* ---------- breadcrumb ---------- */
.breadcrumb{background:var(--c-surface);border-bottom:1px solid var(--c-line);font-size:.9rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:var(--sp-3) 0}
.breadcrumb li+li::before{content:"/";margin-right:var(--sp-2);color:var(--c-aluminium)}
.breadcrumb a{color:var(--c-ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--c-ink)}
.breadcrumb [aria-current="page"]{color:var(--c-ink)}

/* ---------- FAQ ---------- */
.faq{max-width:52rem;margin-inline:auto}
.faq__item{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);margin-bottom:var(--sp-3)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-5);cursor:pointer;font-weight:500;list-style:none;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";font:600 1.4rem/1 var(--font-display);color:var(--c-ink)}
.faq__item[open] summary::after{content:"\2212"}
.faq__item > div{padding:0 var(--sp-5) var(--sp-5);color:var(--c-ink-soft)}

/* ---------- projects ---------- */
/* .project is an <a> wrapping a <figure> on the homepage and a bare <figure>
   on /reference, so the element and its child both need the margin reset. */
.project,.project figure{margin:0}
.project{display:block;color:inherit;text-decoration:none;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.project a{display:block;text-decoration:none;color:inherit}
.project img{aspect-ratio:4/3;object-fit:cover;object-position:50% 20%;width:100%;filter:saturate(.9)}
.project__meta{padding:var(--sp-4) var(--sp-5)}
.project__meta h3{font-size:1.05rem;margin-bottom:var(--sp-1)}
.project__meta p{margin:0;color:var(--c-ink-soft);font-size:.9rem}

/* ---------- gallery dialog ---------- */
dialog{border:1px solid var(--c-line);background:var(--c-surface)}
dialog::backdrop{background:rgba(22,24,26,.7)}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;inset-inline:0;bottom:0;z-index:50;display:none;gap:1px;
  background:var(--c-line);border-top:1px solid var(--c-line);
  padding-bottom:env(safe-area-inset-bottom);
}
.sticky-cta a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:56px;background:var(--c-surface);color:var(--c-ink);
  font-weight:500;text-decoration:none;
}
.sticky-cta a.is-primary{background:var(--c-accent);color:#fff}
/* The number must never break across lines: at 320px "Pozovite 064 821 5101"
   wrapped mid-number ("064 821" / "5101") inside the primary call control.
   The label sheds its verb before the number is allowed to split — the phone
   icon already says what the button does. Fifth media query in the system,
   and it names the one component it fixes. */
.sticky-cta__num{white-space:nowrap}
@media (max-width:359px){ .sticky-cta__verb{display:none} }
@media (max-width:768px){
  .sticky-cta{display:flex}
  /* The sticky call bar owns the bottom 56px of the viewport for the whole
     scroll, so a bottom-anchored caption collides with it at whatever width
     happens to land the image base there — nudging it up by 56px only moves
     the collision to other widths. The Attribution Rule caption is what stops
     a full-bleed apartment block reading as a construction claim, so below the
     bar's breakpoint the caption and its scrim move to the top of the frame,
     out of the bar's territory entirely and at every scroll position. */
  .hero__media figcaption{top:var(--sp-5);bottom:auto}
  /* The scrim holds full strength across the caption band and only fades
     below it. A gradient that fades THROUGH the caption puts the second line
     on the weakest part of the scrim, and the flipped top band lands on sky
     rather than the dark shopfront the bottom placement had — measured at
     3.26:1 that way, under the 4.5 floor. Stops are set from measurement of
     the worst (lightest) backdrop pixel behind the glyphs, not by eye. */
  .hero__media::after{top:0;bottom:auto;height:52%;
    background:linear-gradient(180deg,
      rgba(14,16,18,.68) 0,
      rgba(14,16,18,.64) 64px,
      transparent 100%)}
  body{padding-bottom:56px}
  /* The open full-viewport nav carries its own terminal actions — the
     sticky bar would just duplicate them underneath the panel. */
  body.nav-open .sticky-cta{display:none}
}
body.nav-open{overflow:hidden}

/* ---------- footer ---------- */
.site-footer{background:var(--c-ink);color:#c7ccd1;padding-block:var(--sp-7) var(--sp-5);margin-top:var(--sp-8)}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover,.site-footer a:focus-visible{text-decoration:underline;color:#fff}
.site-footer h3{color:#fff;font-family:var(--font-display);font-size:1rem;font-weight:600;margin-bottom:var(--sp-3)}
.site-footer__cols{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.site-footer__bottom{
  margin-top:var(--sp-6);padding-top:var(--sp-4);
  border-top:1px solid rgba(255,255,255,.14);font-size:.875rem;color:#9aa1a8;
}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:var(--sp-2)}
.site-footer__services{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid rgba(255,255,255,.14)}
.site-footer__groups{display:grid;gap:var(--sp-5) var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr))}
.type-list{display:grid;gap:var(--sp-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.type-list h3{margin:0 0 var(--sp-2);font-size:1.05rem}
.type-list ul{list-style:none;margin:0;padding:0}
.type-list li{margin-bottom:var(--sp-2)}
.type-list a{text-decoration:none}
.type-list a:hover{text-decoration:underline}
.site-footer__group-title{margin:0 0 var(--sp-2);color:#fff;font-weight:600;font-size:.9rem}

/* ---------- utilities ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:var(--sp-3) var(--sp-4);background:var(--c-accent);color:#fff}
.skip-link:focus{left:0}
.prose{max-width:70ch}
.prose h2{margin-top:var(--sp-6)}
.prose>h2:first-child{margin-top:0}
.prose a{text-decoration:underline}
.prose blockquote{
  margin:var(--sp-6) 0;padding:var(--sp-5) 0;
  border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  color:var(--c-ink-soft);font-style:italic;
}
.prose blockquote cite{display:block;margin-top:var(--sp-3);font-style:normal;font-weight:600;color:var(--c-ink)}

/* ---------- browser surfaces ---------- */
.specular{background:linear-gradient(90deg,transparent,#fff,transparent)}
::selection{background:rgba(196,22,28,.22);color:var(--c-ink)}
input,textarea{caret-color:var(--c-accent)}
html{scrollbar-color:var(--c-ink-soft) var(--c-line)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--c-line)}
::-webkit-scrollbar-thumb{background:var(--c-ink-soft);border-radius:2px;border:3px solid var(--c-line)}
::-webkit-scrollbar-thumb:hover{background:var(--c-ink)}

/* ---------- odds and ends that used to be inline style attributes ---------- */
.section-more{margin-top:var(--sp-6)}
.gallery{max-width:min(96vw,1200px);border-radius:var(--radius);padding:0}
.gallery figure{margin:0}
.gallery img{width:100%;height:auto;display:block}
.gallery figcaption{padding:var(--sp-4) var(--sp-5);font-size:.95rem}
.gallery .btn{margin:0 var(--sp-5) var(--sp-5)}
.error-code{color:var(--c-accent);font-weight:700;margin-bottom:0;
  font-size:clamp(3rem,2.2rem + 4vw,6rem);line-height:1}
.map-embed{border:0;border-radius:var(--radius);display:block}
.form-note{margin-top:var(--sp-4);font-size:.9rem;color:var(--c-ink-soft);text-align:center}
.qty-badge{background:var(--c-bg);padding:4px 12px;border-radius:var(--radius);font-weight:600}