/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: var(--lh-body);
    background: var(--alfa-surface);
    color: var(--alfa-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, .hero__title, .page-hero__title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: var(--track-tight);
    line-height: var(--lh-snug);
}

a { color: var(--alfa-ink); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--alfa-red); }

.btn { border-radius: var(--radius-sm); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--alfa-red); border-color: var(--alfa-red); }
.btn-primary:hover { background: var(--alfa-red-dark); border-color: var(--alfa-red-dark); }
.btn-outline-dark { color: var(--alfa-ink); border-color: var(--alfa-ink); }
.btn-outline-dark:hover { background: var(--alfa-ink); color: #fff; }

/* ---------- Header ---------- */
/* Logo 64px + .py-3 top and bottom (1rem each) = 96px. Below 576px the logo
   drops to 48px, so the header does too. Kept as a token because the homepage
   hero subtracts it to fill exactly the window under the navigation. */
:root { --header-h: 96px; }
@media (max-width: 575.98px) { :root { --header-h: 80px; } }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--alfa-line); }
/* The logo is a stacked mark (symbol over wordmark) at a 208:240 ratio, so it
   needs real height to stay legible — it was previously declared as 120x40
   while the file was a 1080x1080 square, which rendered it at 40x40. */
.site-brand img { display: block; height: 64px; width: auto; }
.site-footer__logo { display: block; height: 144px; width: auto; }
.site-nav__list { list-style: none; padding-left: 0; margin-bottom: 0; }
.site-nav__list > li > a {
    font-weight: 500;
    color: var(--alfa-ink);
    position: relative;
}
.site-nav__list > li > a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -6px;
    height: 2px;
    /* Bootstrap gives .dropdown-toggle its own ::after caret built from
       borders. Without zeroing them the caret and this underline merge into
       a stray red dash next to every dropdown label. */
    border: 0;
    width: auto;
    background: var(--alfa-red);
    transition: right var(--dur) var(--ease);
}
.site-nav__list > li > .dropdown-toggle::after { margin-left: 0; vertical-align: baseline; }
.site-nav__list > li > a:hover::after { right: 0; }
.site-nav__list > li > a.is-active::after { right: 0; }
.site-nav__list > li > a.in-trail::after { right: 0; opacity: .45; }

.site-nav__toggle .site-nav__bars,
.site-nav__toggle .site-nav__bars::before,
.site-nav__toggle .site-nav__bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--alfa-ink);
    position: relative;
}
.site-nav__toggle .site-nav__bars::before { content:""; position:absolute; top:-7px; left:0; right:0; }
.site-nav__toggle .site-nav__bars::after  { content:""; position:absolute; top:7px;  left:0; right:0; }

.lang-switch .dropdown-toggle { border-radius: 999px; padding: .25rem .75rem; }
.lang-switch__flag { font-weight: 600; letter-spacing: .04em; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    overflow: hidden;
    padding: var(--section-y) 0 calc(var(--section-y) * .75);
    background: linear-gradient(180deg, var(--alfa-surface) 0%, var(--alfa-surface-2) 100%);
    isolation: isolate;
}
.hero__bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(60% 50% at 80% 0%, rgba(200,16,46,.08), transparent 70%),
        radial-gradient(40% 40% at 0% 100%, rgba(134,136,138,.18), transparent 70%);
}
.hero__inner { position: relative; max-width: 760px; }
.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    font-weight: 600;
    color: var(--alfa-red);
    margin: 0 0 1rem;
}
.hero__title {
    font-size: var(--step-5);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
    color: var(--alfa-ink);
    margin: 0 0 1.25rem;
}
.hero__sub {
    font-size: var(--step-1);
    color: var(--alfa-ink-soft);
    margin: 0 0 2rem;
    max-width: 60ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- Strip section ---------- */

/* ---------- Footer ---------- */
.site-footer {
    background: var(--alfa-ink);
    color: rgba(255,255,255,.78);
    /* No top margin. body is --alfa-surface (#FFF), so a margin here is not
       breathing room — it is a stripe of bare page showing between the last
       section and the footer, which read as a mistake wherever the page ended
       on a dark band. The client logo band now closes every content page and
       carries its own --section-y padding, so the separation is real colour
       rather than a gap. */
    margin-top: 0;
}
/* The one case where the gap is still wanted: a page that opted out of the
   band (the 404) and so has nothing providing that spacing. */
main:not(:has(> .clients)) + .site-footer { margin-top: clamp(2rem, 5vw, 4rem); }
/* Bootstrap's .text-muted is ~2:1 on the ink background — the tagline and
   copyright were barely visible. Override within the footer only. */
.site-footer .text-muted { color: rgba(255,255,255,.66) !important; }
/* Label in one column, its lines stacked in the next — used by the address and
   the phone numbers, in the footer and in the contact page's side card. A hanging indent in em or px would only line up in one
   language: the label is "Adresa"/"Address"/"Adresse" and "Telefon"/"Phone",
   all different widths, so the second column has to find its own edge.
   align-items: baseline keeps the label on the first line's baseline rather
   than centred against the whole stack. */
.labelled-stack {
    display: flex;
    align-items: baseline;
    gap: .35em;
}
.labelled-stack__list {
    display: flex;
    flex-direction: column;
}
.site-footer hr { border-color: rgba(255,255,255,.14); opacity: 1; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; }
.site-footer hr { border-color: rgba(255,255,255,.12); }
.footer__h { font-size: .95rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 1rem; }

.newsletter-form .form-control { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
.newsletter-form .form-control::placeholder { color: rgba(255,255,255,.5); }
.newsletter-form .form-control:focus { border-color: var(--alfa-red); box-shadow: 0 0 0 .25rem rgba(200,16,46,.25); background: rgba(255,255,255,.1); color: #fff; }

/* ---------- 404 ---------- */
.error-page { padding: calc(var(--section-y) * 1.3) 0; background: var(--alfa-surface-2); min-height: 60vh; }
.error-page__code { font-size: var(--step-6); font-weight: 900; color: var(--alfa-red); line-height: 1; margin: 0; }
.error-page__title { font-size: var(--step-3); font-weight: 700; margin: .5rem 0 1rem; }

/* ---------- Scroll reveal ---------- */
/* Scroll reveal.
   Gated on the `js` class that assets/js/js-flag.js adds synchronously in the
   head. These attributes now sit on nearly every section of every page, so
   hiding them unconditionally means the page renders blank whenever the
   IntersectionObserver never runs — JS off, a script error, an old crawler.
   The failure mode has to be "visible, unanimated".

   An inline no-js script would be the usual fix, but public/.htaccess sets
   `script-src 'self'`. The `scripting` media feature looked like an
   alternative but Chrome reports it enabled even with scripting switched
   off, so it does not actually protect anything. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Focus ---------- */
:focus-visible {
    outline: 3px solid var(--alfa-red);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Page hero (non-home) ---------- */
.page-hero {
    background: linear-gradient(180deg, var(--alfa-surface-2) 0%, var(--alfa-surface) 100%);
    border-bottom: 1px solid var(--alfa-line);
}
.page-hero .hero__title { font-size: var(--step-4); margin-bottom: 0; }
.page-hero .hero__sub   { margin-top: 1rem; }
.page-hero--pvc  { background: linear-gradient(180deg, #f3f5f8 0%, #ffffff 100%); }
.page-hero--wood { background: linear-gradient(180deg, #f8f4ef 0%, #ffffff 100%); }

/* ---------- Page body / prose ---------- */
.page-prose { font-size: 1.05rem; line-height: 1.75; color: var(--alfa-ink-soft); }
.page-prose h2 { color: var(--alfa-ink); margin-top: 2rem; margin-bottom: .75rem; font-weight: 700; }
.page-prose h3 { color: var(--alfa-ink); margin-top: 1.5rem; margin-bottom: .5rem; font-weight: 600; }
.page-prose p, .page-prose ul { margin-bottom: 1rem; }
.page-prose a { color: var(--alfa-red); border-bottom: 1px solid currentColor; }
.page-prose a:hover { color: var(--alfa-red-dark); }

.side-card {
    background: var(--alfa-surface-2);
    border: 1px solid var(--alfa-line);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    position: sticky;
    top: 96px;
}

/* ---------- Products tiles ---------- */
.product-tile {
    display: block;
    background: var(--alfa-surface-2);
    border: 1px solid var(--alfa-line);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    height: 100%;
    color: var(--alfa-ink);
}
.product-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--alfa-red); color: var(--alfa-ink); }
.product-tile--alt { background: var(--alfa-ink); color: #fff; }
.product-tile--alt:hover { color: #fff; border-color: var(--alfa-red); }
.product-tile--alt .product-tile__p { color: rgba(255,255,255,.78); }
.product-tile__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; border-radius: 14px;
    background: var(--alfa-red-soft); color: var(--alfa-red);
    font-size: 1.6rem; margin-bottom: 1.5rem;
}
.product-tile--alt .product-tile__icon { background: rgba(255,255,255,.1); color: #fff; }
.product-tile__h   { font-size: 1.75rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .75rem; }
.product-tile__cta { font-weight: 700; color: var(--alfa-red); }
.product-tile--alt .product-tile__cta { color: #fff; }

/* ---------- Contact form ---------- */
.contact-form .form-control { border-color: var(--alfa-line); border-radius: var(--radius-sm); padding: .75rem 1rem; }
.contact-form .form-control:focus { border-color: var(--alfa-red); box-shadow: 0 0 0 .2rem rgba(200,16,46,.15); }
.contact-form .form-label { font-weight: 500; color: var(--alfa-ink); }
.contact-form .is-invalid { border-color: var(--alfa-red); }

/* ---------- Gallery ---------- */
.gallery-filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.gallery-filter__btn {
    border: 1px solid var(--alfa-line);
    background: var(--alfa-surface);
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: .875rem;
    color: var(--alfa-ink);
    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
    cursor: pointer;
}
.gallery-filter__btn:hover { border-color: var(--alfa-red); color: var(--alfa-red); }
.gallery-filter__btn.is-active { background: var(--alfa-red); border-color: var(--alfa-red); color: #fff; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.gallery-grid__tile {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--alfa-surface-2);
    display: block;
    position: relative;
}
.gallery-grid__tile img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--dur) var(--ease);
}
.gallery-grid__tile:hover img { transform: scale(1.06); }
.gallery-grid__tile[hidden] { display: none; }

.lightbox {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(20,20,22,.92);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: var(--shadow-lg); }
.lightbox__caption { color: #fff; margin-top: 1rem; }
.lightbox__close {
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(255,255,255,.15); color: #fff;
    border: 0; width: 44px; height: 44px;
    border-radius: 50%; font-size: 1.5rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lightbox__close:hover { background: rgba(255,255,255,.25); }

/* --- Lightbox navigation -------------------------------------------------- */
.lightbox__stage {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fills the space between the arrows so a backdrop click still closes. */
    flex: 1 1 auto;
    min-width: 0;
}
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; height: 56px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14);
    border: 0; border-radius: 50%;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease);
}
.lightbox__nav:hover { background: rgba(255,255,255,.28); }
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: clamp(.5rem, 3vw, 2rem); }
.lightbox__nav--next { right: clamp(.5rem, 3vw, 2rem); }

.lightbox__arrow {
    width: 14px; height: 14px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
}
.lightbox__nav--prev .lightbox__arrow { transform: translateX(2px) rotate(45deg); }
.lightbox__nav--next .lightbox__arrow { transform: translateX(-2px) rotate(-135deg); }

.lightbox__count {
    margin: var(--space-s) 0 0;
    font-size: var(--step--1);
    letter-spacing: var(--track-wide);
    color: rgba(255,255,255,.72);
}

@media (max-width: 575.98px) {
    /* Arrows would sit on top of the photo on a phone, where swiping is the
       natural gesture anyway — move them below it. */
    .lightbox__nav { width: 48px; height: 48px; top: auto; bottom: 1rem; transform: none; }
    .lightbox__nav--prev { left: 25%; }
    .lightbox__nav--next { right: 25%; }
    .lightbox__count { margin-bottom: 4.5rem; }
    .lightbox__img { max-height: 68vh; }
}

/* ---------- Print ---------- */
@media print {
    .site-header, .site-footer, .lightbox, .gallery-filter, .newsletter-form,
    .btn, .lang-switch,     body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
    .hero, .page-hero, .strip, .page-body { padding: .5rem 0 !important; }
    .page-prose { font-size: 11pt; line-height: 1.5; }
}

/* ---------- Reduced motion safety net ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- A11y: touch targets 44px+ for primary actions ---------- */
.btn-lg, .nav-link, .dropdown-item { min-height: 44px; display: inline-flex; align-items: center; }
.dropdown-item { padding-top: .5rem; padding-bottom: .5rem; }

/* ==========================================================================
   Main menu — a conventional cascading dropdown, three levels deep.
   Level 1 is Bootstrap's dropdown; level 2 opens on hover / :focus-within,
   which Bootstrap does not provide and which needs no JS.
   ========================================================================== */
.site-nav__item { position: relative; }

.site-menu.dropdown-menu {
    /* The nav's animated underline sits 6-8px below the label, so the panel is
       dropped clear of it rather than butting up against it. The distance is
       set with data-bs-offset on the toggle, because Popper positions this
       element and overrides margin-top; --menu-offset only has to match it so
       the transparent bridge below covers the same gap. */
    --menu-offset: 16px;

    min-width: 16rem;
    padding: var(--space-2xs) 0;
    margin-top: 0;
    border: 1px solid var(--alfa-line);
    border-radius: var(--radius-sm);
    background: var(--alfa-surface);
    box-shadow: var(--shadow);
}

/* Transparent spacer bridging that gap. Without it the pointer leaves the
   menu on the way down from the label and the panel closes under the cursor. */
.site-menu.dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--menu-offset) * -1);
    height: var(--menu-offset);
}

.site-menu__item { position: relative; list-style: none; }

.site-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
    padding: .45rem var(--space-s);
    font-size: var(--step--1);
    font-weight: 500;
    line-height: 1.35;
    color: var(--alfa-ink-soft);
    white-space: nowrap;
}
.site-menu__link:hover,
.site-menu__link:focus-visible { background: var(--alfa-bone); color: var(--alfa-ink); }
.site-menu__link.is-active { color: var(--alfa-red); }
.site-menu__link.in-trail  { color: var(--alfa-ink); }
.site-menu__link.is-soon   { color: var(--alfa-gray); cursor: default; }
.site-menu__link.is-soon::after {
    content: "•";
    color: var(--alfa-line);
}

/* Parent of a submenu: chevron, and the panel itself. */
.has-sub > .site-menu__link::after {
    content: "";
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-right: 1.5px solid var(--alfa-gray);
    border-bottom: 1.5px solid var(--alfa-gray);
    transform: rotate(-45deg);
    background: none;
}
.has-sub:hover > .site-menu__link::after,
.has-sub:focus-within > .site-menu__link::after { border-color: var(--alfa-red); }

.site-submenu {
    position: absolute;
    top: calc(var(--space-2xs) * -1);
    left: 100%;
    z-index: 10;
    min-width: 15rem;
    margin: 0;
    padding: var(--space-2xs) 0;
    list-style: none;
    border: 1px solid var(--alfa-line);
    border-radius: var(--radius-sm);
    background: var(--alfa-surface);
    box-shadow: var(--shadow);

    /* Hidden without display:none so it stays focusable-in-order and can
       transition. visibility keeps it out of the pointer/tab flow. */
    opacity: 0;
    visibility: hidden;
    transform: translateX(-4px);
    /* visibility is discrete, so transitioning it would delay the panel
       becoming interactive — noticeable when tabbing. Flip it instantly on
       open (0s, no delay) and defer it on close so the fade-out is visible. */
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility 0s var(--dur-fast);
}
.has-sub:hover > .site-submenu,
.has-sub:focus-within > .site-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-fast) var(--ease),
                transform var(--dur-fast) var(--ease),
                visibility 0s 0s;
}

/* Near the right edge the submenu opens to the left instead. */
.has-sub.is-flipped > .site-submenu { left: auto; right: 100%; transform: translateX(4px); }
.has-sub.is-flipped:hover > .site-submenu,
.has-sub.is-flipped:focus-within > .site-submenu { transform: none; }

/* The global 3px red focus ring is removed throughout the main menu — it
   boxed the label in a way that read as a rendering fault, especially after
   merely hovering the dropdown.
   
   Keyboard access is preserved rather than dropped: focus is shown with the
   nav's own red underline at the top level, and with the row highlight inside
   the panel. Same information, none of the box. */
.site-nav__list a:focus,
.site-nav__list .dropdown-toggle:focus,
.site-menu__link:focus {
    outline: none;
    box-shadow: none;
}

.site-nav__list a:focus-visible,
.site-nav__list .dropdown-toggle:focus-visible {
    outline: none;
}

/* Inside the panel: the row lights up, and a red rule marks the edge. */
.site-menu__link:focus-visible {
    outline: none;
    background: var(--alfa-bone);
    color: var(--alfa-ink);
    box-shadow: inset 2px 0 0 var(--alfa-red);
}

/* ==========================================================================
   Mobile drawer — nested accordion. The previous offcanvas was a flat list,
   so a three-level catalogue had no way of being reached on a phone.
   ========================================================================== */
.site-drawer { --bs-offcanvas-width: min(92vw, 380px); }
.drawer-nav { list-style: none; margin: 0; padding: 0; }
.drawer-nav--sub {
    margin-left: var(--space-s);
    padding-left: var(--space-s);
    border-left: 1px solid var(--alfa-line);
}
.drawer-nav__item { border-bottom: 1px solid var(--alfa-line); }
.drawer-nav--sub .drawer-nav__item:last-child { border-bottom: 0; }
.drawer-nav__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.drawer-nav__link {
    display: block;
    flex: 1;
    padding: .7rem 0;
    font-size: var(--step-0);
    color: var(--alfa-ink);
}
.drawer-nav--sub .drawer-nav__link { font-size: var(--step--1); color: var(--alfa-ink-soft); }
.drawer-nav__link.is-active { color: var(--alfa-red); font-weight: 600; }
.drawer-nav__link.is-soon { color: var(--alfa-gray); }

.drawer-nav__toggle {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0;
}
.drawer-nav__chev {
    width: 9px; height: 9px;
    border-right: 2px solid var(--alfa-ink);
    border-bottom: 2px solid var(--alfa-ink);
    transform: rotate(45deg);
    transition: transform var(--dur-fast) var(--ease);
}
.drawer-nav__toggle[aria-expanded="true"] .drawer-nav__chev { transform: rotate(-135deg); }

/* ==========================================================================
   Additional breakpoints. app.css previously declared exactly one
   (max-width: 991.98px), which is why the layout had so little room to move.
   ========================================================================== */
@media (max-width: 991.98px) {
    .site-menu.dropdown-menu { display: none !important; }
}
@media (max-width: 767.98px) {
    }
@media (max-width: 575.98px) {
    .site-brand img { height: 48px; }
    .site-footer__logo { height: 104px; }
    .hero__cta { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
    .hero__cta .btn { width: 100%; }
}
@media (min-width: 1400px) {
    .container-xxl { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* ==========================================================================
   Homepage hero — a full-bleed photograph, per the brief. Replaces the
   CSS-drawn animated door, which read as a placeholder rather than a
   manufacturer's showcase.
   ========================================================================== */
.home-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    /* The window below the navigation, not the whole window. The header is
       sticky and therefore still occupies flow, so a plain 100svh would push
       the fold down by exactly the header's height and leave a dead strip.
       svh is the height WITH the mobile browser's chrome shown, so the hero
       does not resize when the address bar hides on scroll; the vh line above
       is the fallback for browsers without svh. */
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    overflow: hidden;
    background: var(--alfa-ink-900);
}
.home-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.home-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(26,26,26,.30) 0%, rgba(26,26,26,.12) 35%, rgba(26,26,26,.82) 100%);
}
.home-hero__inner {
    position: relative; z-index: 2;
    padding-bottom: var(--space-2xl);
    padding-top: var(--space-3xl);
}
.home-hero__eyebrow {
    margin: 0 0 var(--space-s);
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: var(--track-wide);
    color: rgba(255,255,255,.78);
}
/* Was .home-hero__title. The hero now carries the slogan, and the heading it
   used to hold moved into the body — see .section__lead-title. */
.home-hero__slogan {
    margin: 0;
    max-width: 20ch;
    font-family: var(--font-display);
    font-size: var(--step-6);
    line-height: var(--lh-tight);
    letter-spacing: var(--track-tight);
    color: #fff;
}
.home-hero__sub {
    margin: var(--space-m) 0 0;
    max-width: 56ch;
    font-size: var(--step-1);
    line-height: var(--lh-snug);
    color: rgba(255,255,255,.86);
}
.home-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin-top: var(--space-l);
}
.home-hero .btn-outline-light { border-color: rgba(255,255,255,.6); color: #fff; }
.home-hero .btn-outline-light:hover { background: #fff; color: var(--alfa-ink); }

/* ==========================================================================
   Key figures — 1994 / 2005 / 7.500+ m² / 90+ / 30+
   ========================================================================== */
.stats { padding: var(--section-y) 0; background: var(--alfa-bone); }
.stats__h { text-align: center; }
.stats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: var(--space-xl) var(--space-m);
    margin: 0;
    padding: 0;
}
.stats__item { text-align: center; }
.stats__n {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 600;
    line-height: 1;
    color: var(--alfa-red);
    letter-spacing: var(--track-tight);
}
.stats__l {
    display: block;
    margin: var(--space-2xs) auto 0;
    max-width: 22ch;
    font-size: var(--step--1);
    line-height: var(--lh-snug);
    color: var(--alfa-ink-soft);
}
.stats__closing {
    max-width: 62ch;
    margin: var(--space-2xl) auto 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: var(--lh-snug);
    color: var(--alfa-ink);
}


/* ==========================================================================
   Shared content components. These live here rather than in catalog.css
   because the partials that render them (card-grid, gallery-grid,
   benefits, cta-band) are used by the homepage too — a stylesheet
   scoped to one page would leave them unstyled everywhere else.
   ========================================================================== */

/* --- Page hero ------------------------------------------------------------ */
.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    background: var(--alfa-bone, #F7F5F2);
    padding: var(--section-y, 4rem) 0 var(--space-xl, 3rem);
    overflow: hidden;
}
.page-hero__inner { position: relative; z-index: 2; }
.page-hero__title {
    font-family: var(--font-display, Georgia, serif);
    font-size: var(--step-5, clamp(2.5rem, 5vw, 3.4rem));
    line-height: var(--lh-tight, 1.08);
    letter-spacing: var(--track-tight, -.02em);
    margin: 0;
    color: var(--alfa-ink);
}
.page-hero__tagline {
    margin: var(--space-s, 1rem) 0 0;
    max-width: 48ch;
    font-size: var(--step-1, 1.25rem);
    line-height: var(--lh-snug, 1.3);
    color: var(--alfa-ink-soft, #4A4A4A);
}

/* With a photograph: full-bleed image, scrim, light text. */
.page-hero--image {
    min-height: clamp(320px, 46vh, 560px);
    /* The hero text turns white for the scrim, so the panel needs a dark
       ground underneath: if the photograph ever fails to load, white on the
       default bone tint would be unreadable. */
    background: var(--alfa-ink-900);
}
.page-hero--image .page-hero__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.page-hero--image .page-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(26,26,26,.15) 0%, rgba(26,26,26,.30) 45%, rgba(26,26,26,.68) 100%);
}
.page-hero--image .page-hero__title,
.page-hero--image .page-hero__tagline { color: #fff; }
/* The eyebrow is brand red by default, which disappears against a
   photograph. Over the scrim it needs to be light like the rest. */
.page-hero--image .hero__eyebrow { color: rgba(255,255,255,.82); }
/* .hero__sub is --alfa-ink-soft, which is dark grey: on a photographic hero it
   was effectively invisible. Every other text class in here was already being
   lifted; this one was missed when the contact page gained an image hero. */
.page-hero--image .hero__sub { color: rgba(255,255,255,.88); }

/* --- Generic section ------------------------------------------------------ */
.section { padding: var(--section-y, 4rem) 0; }
.section--intro { padding-bottom: 0; }
.section__h {
    font-family: var(--font-display, Georgia, serif);
    font-size: var(--step-3, 1.9rem);
    line-height: var(--lh-snug, 1.25);
    margin: 0 0 var(--space-l, 2rem);
    color: var(--alfa-ink);
}
/* The homepage's main heading, moved out of the hero. Larger than a section
   heading because it IS the page's <h1>, but deliberately short of the hero
   slogan's size so the two do not compete. */
.section__lead-title {
    font-family: var(--font-display, Georgia, serif);
    font-size: var(--step-4, 2.4rem);
    line-height: var(--lh-tight, 1.1);
    letter-spacing: var(--track-tight);
    max-width: 22ch;
    margin: 0 0 var(--space-m, 1.5rem);
    color: var(--alfa-ink);
    text-wrap: balance;
}

.section__note {
    margin: -.5rem 0 var(--space-m, 1.5rem);
    font-size: var(--step--1, .875rem);
    color: var(--alfa-gray);
}
.section--gallery { background: var(--alfa-bone, #F7F5F2); }

/* --- Prose ---------------------------------------------------------------- */
.prose { max-width: var(--measure, 68ch); color: var(--alfa-ink-soft, #4A4A4A); line-height: var(--lh-body, 1.65); }
.prose > * + * { margin-top: var(--space-s, 1rem); }
.prose h2 {
    font-family: var(--font-display, Georgia, serif);
    font-size: var(--step-2, 1.6rem);
    line-height: var(--lh-snug, 1.25);
    color: var(--alfa-ink);
    margin-top: var(--space-xl, 3rem);
    scroll-margin-top: 6rem;
}
.prose h3 { font-size: var(--step-1, 1.3rem); color: var(--alfa-ink); margin-top: var(--space-l, 2rem); }
.prose ul { padding-left: 1.1rem; }
.prose li + li { margin-top: .35rem; }
.prose a { color: var(--alfa-red); }
.prose--lead { font-size: var(--step-1, 1.2rem); color: var(--alfa-ink); max-width: 62ch; }

/* --- Card grid ------------------------------------------------------------ */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--space-l, 2rem) var(--space-m, 1.5rem);
}
.card-tile__link { display: block; text-decoration: none; color: inherit; }
.card-tile__media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--alfa-bone-2, #EFEBE6);
    border-radius: var(--radius-sm, 6px);
}
.card-tile__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur, 300ms) var(--ease, ease);
}
.card-tile__media.is-placeholder img { opacity: .75; }
.card-tile__link:hover .card-tile__media img { transform: scale(1.03); }
.card-tile__media.is-placeholder ~ * { /* no hover flourish on stand-ins */ }
.card-tile__link:hover .card-tile__media.is-placeholder img { transform: none; }

.card-tile__body { display: block; padding-top: var(--space-xs, .75rem); }
.card-tile__h {
    display: inline-block;
    font-size: var(--step-1, 1.2rem);
    font-weight: 600;
    color: var(--alfa-ink);
    position: relative;
}
/* Reuse the header's underline-sweep idiom rather than inventing a new one. */
.card-tile__h::after {
    content: "";
    position: absolute; left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: var(--alfa-red);
    transition: width var(--dur, 300ms) var(--ease, ease);
}
.card-tile__link:hover .card-tile__h::after { width: 100%; }
.card-tile__sub {
    display: block;
    margin-top: .3rem;
    font-size: var(--step--1, .9rem);
    color: var(--alfa-gray);
    line-height: var(--lh-snug, 1.35);
}
.card-tile__badge {
    display: inline-block;
    margin-top: .4rem;
    padding: .1rem .5rem;
    font-size: var(--step--2, .75rem);
    text-transform: uppercase;
    letter-spacing: var(--track-wide, .12em);
    color: var(--alfa-gray);
    border: 1px solid var(--alfa-line);
    border-radius: 999px;
}
.card-tile--soon .card-tile__media img { opacity: .55; }

/* --- Benefits ("Zašto odabrati …?") --------------------------------------- */
.benefits {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-s, 1rem) var(--space-xl, 3rem);
    max-width: 76ch;
}
.benefits__item {
    position: relative;
    padding-left: var(--space-m, 1.25rem);
    line-height: var(--lh-body, 1.6);
    color: var(--alfa-ink-soft, #4A4A4A);
}
.benefits__item::before {
    content: "";
    position: absolute;
    left: 0; top: .55em;
    width: 2px; height: 1em;
    background: var(--alfa-red);
}

/* --- Gallery -------------------------------------------------------------- */
.section--gallery .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min, 260px)), 1fr));
    gap: var(--space-2xs, .5rem);
}
.gallery-grid__tile.is-placeholder { opacity: .85; }
.gallery-grid__tile.is-placeholder img { cursor: default; }

/* --- Closing CTA ---------------------------------------------------------- */
/* ==========================================================================
   Client logo band — continuous marquee, no JavaScript
   ========================================================================== */
.clients {
    padding: var(--section-y) 0;
    background: var(--alfa-bone);
    overflow: hidden;
}
.clients__h {
    font-family: var(--font-display, Georgia, serif);
    font-size: var(--step-2, 1.5rem);
    line-height: var(--lh-snug, 1.25);
    letter-spacing: var(--track-tight);
    color: var(--alfa-ink);
    text-align: center;
    max-width: 34ch;
    margin: 0 auto var(--space-xl, 3rem);
    text-wrap: balance;
}

/* The fade stops logos appearing and vanishing at a hard edge. mask-image is
   the modern property; the -webkit- line keeps Safari before 15.4 in step. */
.clients__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.clients__track {
    display: flex;
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    animation: clients-scroll 45s linear infinite;
}
/* The list is rendered twice, so travelling exactly -50% lands on the start of
   the duplicate: the loop repeats with no jump and nothing to reset. */
@keyframes clients-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.clients__viewport:hover .clients__track,
.clients__viewport:focus-within .clients__track { animation-play-state: paused; }

.clients__item { flex: 0 0 auto; }
.clients__item img {
    display: block;
    height: clamp(34px, 4.4vw, 52px);
    width: auto;
    max-width: 200px;
    object-fit: contain;
    /* These are other companies' marks. Left in their own colours — muting them
       to grey would flatten the two hospital crests into illegible smudges. */
    opacity: .88;
}

@media (prefers-reduced-motion: reduce) {
    /* Stop the motion outright, and give the row back its own scrollbar so the
       logos past the fold are still reachable. */
    .clients__track { animation: none; }
    .clients__viewport { overflow-x: auto; }
}

.cta-band {
    background: var(--alfa-ink);
    color: #fff;
    padding: var(--space-2xl, 4rem) 0;
}
.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m, 1.5rem);
    align-items: center;
    justify-content: space-between;
}
.cta-band__h {
    font-family: var(--font-display, Georgia, serif);
    font-size: var(--step-3, 1.9rem);
    margin: 0;
}
.cta-band__sub { margin: .4rem 0 0; color: rgba(255,255,255,.72); max-width: 52ch; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 767.98px) {
    .section--gallery .gallery-grid { --tile-min: 44vw; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
    .card-grid { grid-template-columns: 1fr; }
    .subnav { top: 60px; }
}
@media (min-width: 1200px) {
    .card-grid { gap: var(--space-xl, 3rem) var(--space-l, 2rem); }
}

/* Consecutive content sections would otherwise stack two full --section-y
   gaps between a short paragraph and the next heading. Sections that carry
   their own background keep their padding, since collapsing it would cut
   into the tinted band. */
.section + .section:not(.section--gallery):not(.stats) { padding-top: 0; }
.section--intro + .section { padding-top: calc(var(--section-y) * .5); }

/* Photograph set between the sections of a story page, breaking up a long
   run of copy. Bleeds slightly wider than the prose measure so it reads as
   an image rather than an inline thumbnail. */
.story-figure {
    margin: var(--space-xl) 0;
}
.story-figure img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius);
}
@media (min-width: 992px) {
    .story-figure { margin-inline: calc(var(--space-l) * -1); }
}