/* ═══ FONTS — self-hosted, no CDN ═══ */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-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;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-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;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/unbounded-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;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/unbounded-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;
}
/* latin-ext */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/unbounded-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;
}
/* latin */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/unbounded-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;
}

    /* ═══════════════════════════════════════════
       DESIGN TOKENS — Apno in ogljik
       Carbon black + signal red + lime-white concrete
       ═══════════════════════════════════════════ */
    :root {
      --orange:       #CE3B26;
      --orange-light: #FAEBE9;
      --orange-mid:   #DD7667;
      --charcoal:     #101010;
      --charcoal-2:   #1D1D1D;
      --steel:        #78787B;
      --steel-text:   #57575A;
      --steel-light:  #ECECEA;
      --concrete:     #F7F7F5;
      --border:       #E2E2DE;
      --white:        #FFFFFF;
      --muted:        #5A5A5A;

      --radius-sm: 10px;
      --radius-md: 18px;
      --radius-lg: 28px;
      --shadow-sm: 0 2px 12px rgba(0,0,0,.06);
      --shadow-md: 0 6px 28px rgba(0,0,0,.10);
      --shadow-lg: 0 16px 48px rgba(0,0,0,.13);
      --transition: .22s cubic-bezier(.4,0,.2,1);
    }

    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      overflow-x: clip;
      font-family: 'DM Sans', sans-serif;
      background: var(--concrete);
      color: var(--charcoal);
      line-height: 1.6;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    ul { list-style: none; }

    /* ── Utility ── */
    .container { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 40px; }
    @media (max-width: 768px) { .container { padding: 0 16px; } }

    .section-eyebrow {
      display: inline-block;
      font-family: 'Unbounded', sans-serif;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 14px;
      background: var(--orange-light);
      color: var(--orange);
    }
    .section-eyebrow--steel {
      background: var(--steel-light);
      color: var(--steel);
    }
    .section-title {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(1.2rem, 2.4vw, 1.9rem);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -.03em;
      margin-bottom: 10px;
    }
    .section-sub {
      font-size: 1.05rem;
      color: var(--muted);
      margin-bottom: 48px;
      max-width: 600px;
      line-height: 1.7;
    }

    /* Buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: 100px;
      font-family: 'Unbounded', sans-serif;
      font-size: .9rem;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
      border: none;
      transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
    }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .btn-orange  { background: var(--orange); color: #fff; }
    .btn-orange:hover { background: #A82F1E; }
    .btn-charcoal { background: var(--charcoal); color: #fff; }
    .btn-outline {
      background: transparent;
      border: 2px solid var(--charcoal);
      color: var(--charcoal);
    }
    .btn-outline-white {
      background: transparent;
      border: 2px solid rgba(255,255,255,.6);
      color: #fff;
    }
    .btn-outline-white:hover { border-color: #fff; background: rgba(255,255,255,.08); }

    /* ════════════════════════════════════════
       NAV
       ════════════════════════════════════════ */
    #site-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 16px 0;
      padding-top: max(16px, env(safe-area-inset-top));
      isolation: isolate;
      transition: background var(--transition), box-shadow var(--transition);
    }
    #site-nav.scrolled {
      background: rgba(247,247,245,.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 rgba(0,0,0,.08), var(--shadow-sm);
      padding: 10px 0;
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    /* Logo — mark + wordmark lockup */
    .nav-logo { display: flex; align-items: center; gap: 10px; }
    .nav-logo-mark { width: 44px; height: 44px; display: block; flex-shrink: 0; }
    .nav-logo-word {
      font-family: 'Unbounded', sans-serif;
      font-size: .82rem;
      font-weight: 800;
      letter-spacing: -.01em;
      line-height: 1.05;
      text-transform: uppercase;
      color: var(--charcoal);
      display: flex;
      flex-direction: column;
    }
    .nav-logo-word em { font-style: normal; color: var(--orange); }
    @media (max-width: 420px) {
      .nav-logo-mark { width: 38px; height: 38px; }
      .nav-logo-word { font-size: .72rem; }
    }

    .nav-links {
      display: flex;
      gap: 28px;
      align-items: center;
    }
    .nav-links a {
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: .9rem;
      color: var(--charcoal);
      transition: color var(--transition);
      position: relative;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 0; right: 0;
      height: 2px;
      border-radius: 2px;
      background: var(--orange);
      transform: scaleX(0);
      transition: transform var(--transition);
    }
    .nav-links a:not(.btn):hover { color: var(--orange); }
    .nav-links a:not(.btn):hover::after { transform: scaleX(1); }
    .nav-links .btn:hover { color: #fff; }
    .nav-links .btn { padding: 9px 20px; font-size: .82rem; }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: transparent;
      border: none;
      width: 38px; height: 38px;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .hamburger span {
      display: block;
      width: 26px; height: 2.5px;
      background: var(--charcoal);
      border-radius: 2px;
      transition: transform var(--transition), opacity var(--transition);
      flex-shrink: 0;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(247,247,245,.97);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      z-index: 99;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 36px;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--charcoal);
      letter-spacing: -.02em;
    }
    .mobile-menu a:not(.btn):hover { color: var(--orange); }
    .mobile-menu .btn:hover { color: #fff; }
    .mobile-menu .btn { font-size: 1rem; padding: 14px 32px; }

    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      #site-nav { padding: 12px 0; }
      #site-nav.scrolled {
        padding: 10px 0;
        background: rgba(247,247,245,.55);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
    }

    /* ════════════════════════════════════════
       HERO
       ════════════════════════════════════════ */
    .hero {
      /* Was 100svh. With the stats strip moved out of the hero the text column
         is shorter, and a full-viewport hero left dead space above the fold —
         and pushed the stats band out of sight. Height is now content-driven
         with a floor, so the red band peeks in on a standard laptop screen. */
      min-height: 86svh;
      display: flex;
      align-items: center;
      padding: 104px 0 64px;
      position: relative;
      overflow: visible;
      background: var(--concrete);
    }

    /* Decorative geometric shapes */
    .hero-shape {
      position: absolute;
      border-radius: 50%;
      z-index: 0;
      pointer-events: none;
    }
    .hero-shape-1 {
      width: 520px; height: 520px;
      background: radial-gradient(circle, rgba(206,59,38,.12) 0%, transparent 70%);
      top: -120px; right: -80px;
    }
    .hero-shape-2 {
      width: 300px; height: 300px;
      background: radial-gradient(circle, rgba(120,120,123,.10) 0%, transparent 70%);
      bottom: 60px; left: -60px;
    }
    /* Grid texture overlay */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(120,120,123,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120,120,123,.06) 1px, transparent 1px);
      background-size: 40px 40px;
      z-index: 0;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }

    .hero-text { display: flex; flex-direction: column; align-items: flex-start; }
    .hero-tagline {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(1.55rem, 3.2vw, 2.6rem);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.15;
      margin-bottom: 22px;
      color: var(--charcoal);
    }
    .hero-tagline em {
      font-style: normal;
      color: var(--orange);
    }
    .hero-sub {
      font-size: clamp(1rem, 1.8vw, 1.15rem);
      color: var(--muted);
      margin-bottom: 16px;
      max-width: 480px;
      line-height: 1.75;
    }
    .hero-body {
      font-size: .95rem;
      /* --steel is 3.4:1 on the light desktop hero; the darker token is AA.
         Set here, not in the late a11y group, so the dark-hero mobile
         override further down still wins. */
      color: var(--steel-text);
      margin-bottom: 32px;
      max-width: 460px;
      line-height: 1.7;
    }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 28px;
    }
    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: .82rem;
      font-weight: 600;
      color: var(--muted);
    }
    .hero-trust-item::before {
      content: '';
      display: block;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--orange-light);
      border: 2px solid var(--orange);
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' fill='none' stroke='%23CE3B26' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: 10px;
      background-repeat: no-repeat;
      background-position: center;
    }

    /* Hero right: image card — bleeds to right viewport edge */
    .hero-image-wrap {
      position: relative;
      display: flex;
      /* push right edge of card to viewport edge */
      margin-right: calc(-1 * ((100vw - min(1380px, 100vw)) / 2 + 40px));
    }
    .hero-image-card {
      width: 100%;
      min-height: 620px;
      border-radius: var(--radius-lg) 0 0 var(--radius-lg);
      overflow: hidden;
      position: relative;
      box-shadow: var(--shadow-lg);
      /* Poster sits under the video: instant paint, and the still that shows
         if the video is blocked or prefers-reduced-motion hides it. */
      background: var(--charcoal-2) url('/assets/img/hero-desktop-poster.jpg') center center / cover no-repeat;
    }
    .hero-image-card img,
    .hero-image-card video {
      /* Fill the card by position, not by flow: a portrait clip would otherwise
         resolve height:100% to its intrinsic height and blow the card out. */
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    /* Hidden on desktop; shown full-bleed inside the mobile block below. */
    .hero-video--mobile { display: none; }
    /* Orange corner accent */
    .hero-image-card::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 100%; height: 6px;
      background: linear-gradient(90deg, var(--orange), var(--orange-mid));
    }

    /* Floating badges */
    .hero-badge {
      position: absolute;
      background: var(--white);
      border-radius: var(--radius-md);
      padding: 12px 16px;
      box-shadow: var(--shadow-md);
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: .82rem;
      white-space: nowrap;
      z-index: 2;
      animation: floatBadge 4s ease-in-out infinite;
    }
    .hero-badge-icon {
      width: 32px; height: 32px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem;
    }
    .hero-badge-1 { top: -16px; left: -16px; animation-delay: 0s; }
    .hero-badge-2 { bottom: -18px; right: 28px; animation-delay: 2s; }
    .hero-badge-label { font-size: .72rem; color: var(--muted); font-weight: 500; }
    @keyframes floatBadge {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-8px); }
    }

    @media (max-width: 768px) {
      .hero {
        padding: 0;
        min-height: 100svh;
        align-items: center;
        overflow: hidden;
      }
      .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        /* Poster still, under the video: instant paint + reduced-motion fallback. */
        background: url('/assets/img/hero-mobile-poster.jpg') center center / cover no-repeat;
        z-index: 0;
      }
      .hero-video--mobile {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        z-index: 1;                 /* above the poster still, below the scrim */
      }
      .hero::before {
        z-index: 2;
        /* Light scrim only: the hero text carries its own text-shadow, so this
           just needs to lift contrast a touch — not black out the footage. Kept
           lightest at the very top so the logo, hamburger and video read clearly,
           with a gentle lift behind the centred copy. */
        background:
          radial-gradient(120% 85% at 50% 55%, rgba(16,16,16,.06) 0%, rgba(16,16,16,.24) 100%),
          linear-gradient(180deg, rgba(16,16,16,.30) 0%, rgba(16,16,16,.18) 42%, rgba(16,16,16,.34) 100%);
        background-image:
          radial-gradient(120% 85% at 50% 55%, rgba(16,16,16,.06) 0%, rgba(16,16,16,.24) 100%),
          linear-gradient(180deg, rgba(16,16,16,.30) 0%, rgba(16,16,16,.18) 42%, rgba(16,16,16,.34) 100%);
      }
      .hero-shape { display: none; }
      .hero-inner {
        position: relative;
        z-index: 3;
        grid-template-columns: 1fr;
        text-align: center;
        padding: 90px 0 28px;
      }
      .hero-text { align-items: center; }
      .hero-image-wrap { display: none; }
      .hero-tagline { color: #fff; font-size: clamp(1.5rem, 7vw, 2.2rem); text-shadow: 0 2px 16px rgba(0,0,0,.7), 0 1px 4px rgba(0,0,0,.5); }
      .hero-sub { text-shadow: 0 1px 8px rgba(0,0,0,.6); }
      .hero-body { text-shadow: 0 1px 8px rgba(0,0,0,.6); }
      .hero-trust-item { text-shadow: 0 1px 6px rgba(0,0,0,.5); }
      .hero-tagline em { color: var(--orange-mid); }
      .hero-sub { color: rgba(255,255,255,.85); margin: 0 auto 12px; font-size: 1rem; font-weight: 500; }
      .hero-body { color: rgba(255,255,255,.65); margin: 0 auto 28px; font-size: .9rem; font-weight: 500; }
      .hero-actions { justify-content: center; flex-direction: column; align-items: center; width: 100%; }
      .hero-actions .btn { width: 100%; max-width: none; justify-content: center; }
      /* The outline CTA is charcoal-on-transparent — invisible over the dark
         video. Switch it to a white outline on mobile only. */
      .hero-actions .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; background: rgba(255,255,255,.08); }
      .hero-actions .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.16); }
      .hero-trust { justify-content: center; gap: 8px; margin-top: 16px; }
      .hero-trust-item { color: rgba(255,255,255,.75); }
      .hero-inner .section-eyebrow { display: none; }
    }


    /* ════════════════════════════════════════
       ADVANTAGES / WHY US
       ════════════════════════════════════════ */
    .advantages {
      padding: 96px 0;
      background: var(--concrete);
    }
    .advantages-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }
    .advantages-image-wrap { position: relative; }
    .advantages-image-card {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      background: var(--steel-light);
      aspect-ratio: 4/3;
    }
    .advantages-image-card img { width: 100%; height: 100%; object-fit: cover; }

    /* Before/after slider inside pain image */
    .ba-slider {
      position: relative;
      width: 100%;
      height: 100%;
      cursor: ew-resize;
      user-select: none;
      -webkit-user-select: none;
    }
    .ba-before, .ba-after {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .ba-before { clip-path: inset(0 50% 0 0); }
    .ba-handle {
      position: absolute;
      top: 0; left: 50%;
      width: 3px; height: 100%;
      background: var(--white);
      transform: translateX(-50%);
      z-index: 5;
    }
    /* Circle button centered on the line */
    .ba-handle::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 42px; height: 42px;
      background: var(--white);
      border-radius: 50%;
      box-shadow: var(--shadow-md);
    }
    /* Arrows rendered as SVG background inside ::after pseudo */
    .ba-handle::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 42px; height: 42px;
      border-radius: 50%;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 42'%3E%3Cpolygon points='14,21 20,15 20,27' fill='%23101010'/%3E%3Cpolygon points='28,21 22,15 22,27' fill='%23101010'/%3E%3C/svg%3E");
      background-size: 100%;
      z-index: 1;
    }
    .ba-label {
      position: absolute; top: 14px;
      background: rgba(16,16,16,.78); color: #fff;
      font-family: 'Unbounded', sans-serif; font-size: .68rem; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      padding: 4px 12px; border-radius: 100px; z-index: 5; pointer-events: none;
    }
    .ba-label--before { left: 14px; }
    .ba-label--after  { right: 14px; }

    /* orange accent stripe on image */
    .advantages-accent {
      position: absolute;
      bottom: -12px; left: 24px; right: 24px;
      height: 4px;
      background: linear-gradient(90deg, var(--orange), transparent);
      border-radius: 100px;
    }

    .advantages-text .section-sub { margin-bottom: 28px; }
    .advantages-list {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-bottom: 32px;
    }
    .advantages-list-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px;
      background: var(--white);
      border-radius: var(--radius-md);
      border-left: 3px solid var(--orange);
      box-shadow: var(--shadow-sm);
    }
    .advantages-list-icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      background: var(--orange-light);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .advantages-list-icon svg { width: 18px; height: 18px; color: var(--orange); }
    .advantages-list-item strong { display: block; font-size: .9rem; font-weight: 700; margin-bottom: 3px; }
    .advantages-list-item span { font-size: .87rem; color: var(--muted); line-height: 1.55; }

    @media (max-width: 768px) {
      .advantages-inner { grid-template-columns: 1fr; gap: 40px; }
      .advantages-image-card { aspect-ratio: 3/2; }
    }

    /* ════════════════════════════════════════
       SERVICES
       ════════════════════════════════════════ */
    .services {
      padding: 96px 0;
      background: var(--charcoal);
    }
    .services-header { margin-bottom: 56px; }
    .services-header .section-title { color: #fff; }
    .services-header .section-sub { color: rgba(255,255,255,.6); }
    .services-header .section-eyebrow { background: rgba(206,59,38,.2); color: var(--orange-mid); }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .service-card {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 17/13;
      cursor: pointer;
    }
    /* image / gradient bg */
    .service-card-img {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform .5s cubic-bezier(.4,0,.2,1);
    }
    .service-card:hover .service-card-img,
    .service-card.active .service-card-img {
      transform: scale(1.06);
    }
    /* dark gradient at top so title is always readable */
    .service-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, rgba(16,16,16,.82) 0%, rgba(16,16,16,.2) 50%, transparent 100%);
      z-index: 1;
    }
    /* name bar — always visible at TOP */
    .service-card-name {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 3;
      padding: 18px 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
    }
    .service-card-name h3 {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.05rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.01em;
      line-height: 1.3;
      margin: 0;
    }
    .service-card-arrow {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.25);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background var(--transition), transform var(--transition);
    }
    .service-card-arrow svg { width: 12px; height: 12px; color: #fff; transition: transform var(--transition); }
    .service-card:hover .service-card-arrow,
    .service-card.active .service-card-arrow {
      background: var(--orange);
      border-color: var(--orange);
    }
    .service-card.active .service-card-arrow svg { transform: rotate(45deg); }

    /* description — slides DOWN from below the title */
    .service-card-desc {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 2;
      background: rgba(16,16,16,.93);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding: 80px 20px 20px;
      transform: translateY(-100%);
      transition: transform .38s cubic-bezier(.4,0,.2,1);
    }
    .service-card.active .service-card-desc { transform: translateY(0); }
    .service-card-desc p {
      font-size: .97rem;
      color: rgba(255,255,255,.8);
      line-height: 1.65;
      margin-bottom: 12px;
    }
    .service-card-desc-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'Unbounded', sans-serif;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 100px;
      background: rgba(206,59,38,.25);
      color: var(--orange-mid);
      text-decoration: none;
      transition: background var(--transition), color var(--transition);
    }
    .service-card-desc-tag:hover { background: var(--orange); color: #fff; }

    @media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .services-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }


    /* ════════════════════════════════════════
       PROCESS STEPS
       ════════════════════════════════════════ */
    .process {
      padding: 96px 0;
      background: var(--concrete);
    }
    .process-header { text-align: center; margin-bottom: 64px; }
    .process-header .section-sub { margin: 0 auto 0; }
    .process-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      position: relative;
    }
    .process-steps::before {
      content: '';
      position: absolute;
      top: 36px;
      left: calc(16.66% + 20px);
      right: calc(16.66% + 20px);
      height: 2px;
      background: linear-gradient(90deg, var(--orange), var(--orange-mid), var(--orange));
      opacity: .3;
    }
    .process-step {
      text-align: center;
      padding: 0 20px 0;
      position: relative;
    }
    .process-step-num {
      width: 72px; height: 72px;
      border-radius: 50%;
      background: var(--white);
      border: 3px solid var(--orange);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Unbounded', sans-serif;
      font-size: 1.6rem;
      font-weight: 800;
      color: var(--orange);
      margin: 0 auto 20px;
      box-shadow: var(--shadow-sm);
      position: relative;
      z-index: 1;
    }
    .process-step h3 {
      font-family: 'Unbounded', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -.01em;
    }
    .process-step p { font-size: .87rem; color: var(--muted); line-height: 1.65; }
    .process-step-tag {
      display: inline-block;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 100px;
      background: var(--orange-light);
      color: var(--orange);
      margin-top: 12px;
    }

    @media (max-width: 768px) {
      .process-steps { grid-template-columns: 1fr; gap: 40px; }
      .process-steps::before { display: none; }
    }

    /* ════════════════════════════════════════
       STATS COUNTER
       ════════════════════════════════════════ */
    .stats-section {
      padding: 36px 0;
      background: var(--orange);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      text-align: center;
    }
    .stat-item {}
    .stat-num {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(2.8rem, 6vw, 4.2rem);
      font-weight: 800;
      color: #fff;
      letter-spacing: -.05em;
      line-height: 1;
    }
    .stat-suffix {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.8rem;
      font-weight: 800;
      /* Large text on the red band, so 3:1 applies here. Declared on the base
         rule so the mobile block below (where it shrinks and needs 4.5:1) can
         still override it. */
      color: rgba(255,255,255,.88);
      /* The noun now sits beside the number ("3 stopnje obdelave"). Space it
         from the digit, and cancel the -.05em the .stat-num sets — that kerning
         is for big digits and crushed the words together. */
      margin-left: .32em;
      letter-spacing: 0;
    }
    .stat-label {
      font-size: .85rem;
      color: rgba(255,255,255,.75);
      font-weight: 500;
      margin-top: 6px;
      letter-spacing: .02em;
    }

    @media (max-width: 600px) {
      /* One stat per row so the bold headline "3 stopnje obdelave" fits on a
         single line with the detail beneath it — 3-across is too narrow for
         that phrase at a readable size. Numbers stay big; the noun sits inline
         and bold, matching "6 mest". */
      .stats-grid { grid-template-columns: 1fr; gap: 0; text-align: left; }
      .stat-item {
        padding: 15px 2px;
        border-top: 1px solid rgba(255,255,255,.22);
      }
      .stat-item:first-child { border-top: none; padding-top: 0; }
      .stat-num {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 1.9rem;
        line-height: 1;
      }
      /* Bold noun on the same line as the number. #fff on the red band is
         5.23:1, clears 4.5:1 at this size. */
      .stat-suffix { font-size: 1.05rem; margin-left: 0; color: #fff; }
      /* Detail line, larger and identical across all three stats. */
      .stat-label { margin-top: 6px; font-size: .92rem; font-weight: 500; line-height: 1.5; color: #fff; }
    }
    @media (max-width: 360px) {
      .stat-num { font-size: 1.7rem; }
      .stat-suffix { font-size: .98rem; }
      .stat-label { font-size: .88rem; }
    }

    /* ════════════════════════════════════════
       GALLERY
       ════════════════════════════════════════ */
    .gallery {
      padding: 80px 0;
      background: var(--concrete);
    }
    .gallery-header {
      text-align: center;
      margin-bottom: 48px;
    }
    /* Gallery — see .gallery-cols below (multi-column masonry retired: it could
       not be made to end flush). Item chrome is shared by both. */
    .gallery-item {
      border-radius: var(--radius-md);
      overflow: hidden;
      position: relative;
      cursor: pointer;
    }
    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .4s cubic-bezier(.4,0,.2,1);
      border-radius: var(--radius-md);
    }
    .gallery-item:hover img { transform: scale(1.04); }
    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: rgba(16,16,16,.45);
      border-radius: var(--radius-md);
      opacity: 0;
      transition: opacity .3s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .gallery-item:hover .gallery-overlay { opacity: 1; }
    .gallery-overlay svg { opacity: 0; transform: scale(.8); transition: all .3s; }
    .gallery-item:hover .gallery-overlay svg { opacity: 1; transform: scale(1); }

    /* Per-image label — the section subhead promises each shot names its stage.
       Sits above the hover overlay so it stays readable on hover. */
    .gallery-caption {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      z-index: 3;
      padding: 30px 14px 12px;
      font-size: .8rem;
      font-weight: 600;
      line-height: 1.32;
      color: #fff;
      background: linear-gradient(to top, rgba(16,16,16,.9) 0%, rgba(16,16,16,.55) 52%, transparent 100%);
      pointer-events: none;
    }

    /* Lightbox */
    .lightbox {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.92);
      z-index: 200;
      align-items: center;
      justify-content: center;
    }
    .lightbox.open { display: flex; }
    .lightbox-img {
      max-width: 90vw;
      max-height: 88vh;
      border-radius: var(--radius-md);
      object-fit: contain;
      box-shadow: 0 24px 80px rgba(0,0,0,.6);
    }
    .lightbox-close {
      position: absolute;
      top: 20px; right: 24px;
      background: rgba(255,255,255,.1);
      border: none;
      color: #fff;
      width: 44px; height: 44px;
      border-radius: 50%;
      font-size: 1.4rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--transition);
    }
    .lightbox-close:hover { background: var(--orange); }
    .lightbox-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,.1);
      border: none;
      color: #fff;
      width: 48px; height: 48px;
      border-radius: 50%;
      font-size: 1.4rem;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background var(--transition);
    }
    .lightbox-nav:hover { background: var(--orange); }
    .lightbox-prev { left: 20px; }
    .lightbox-next { right: 20px; }

    @media (max-width: 768px) { .gallery-masonry { columns: 2; } }
    @media (max-width: 480px) { .gallery-masonry { columns: 2; column-gap: 10px; } .gallery-item { margin-bottom: 10px; } }

    /* ════════════════════════════════════════
       OBJECTION HANDLER + COMPARISON TABLE
       ════════════════════════════════════════ */
    .objections {
      padding: 96px 0;
      background: var(--concrete);
    }
    .objections-inner {
      display: flex;
      flex-direction: column;
      gap: 48px;
    }
    .objection-block {
      background: var(--white);
      border-radius: var(--radius-lg);
      padding: 36px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }
    .objection-q {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--charcoal);
      margin-bottom: 14px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }
    .objection-q::before {
      content: '"';
      font-size: 2.5rem;
      line-height: .8;
      color: var(--orange);
      font-family: Georgia, serif;
      flex-shrink: 0;
    }
    .objection-a { font-size: .95rem; color: var(--muted); line-height: 1.75; }

    /* Comparison table */
    .comparison-wrap { overflow-x: auto; margin-top: 24px; }
    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .9rem;
    }
    .comparison-table thead tr { background: var(--charcoal); color: #fff; }
    .comparison-table th {
      font-family: 'Unbounded', sans-serif;
      font-weight: 700;
      padding: 14px 18px;
      text-align: left;
      letter-spacing: .03em;
      font-size: .82rem;
    }
    .comparison-table th:last-child { background: var(--orange); border-radius: 0 6px 0 0; }
    .comparison-table th:first-child { border-radius: 6px 0 0 0; }
    .comparison-table td { padding: 13px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .comparison-table tr:last-child td { border-bottom: none; }
    .comparison-table tr:nth-child(even) td { background: var(--concrete); }
    .comparison-table td:last-child { font-weight: 600; color: var(--orange); }
    .comparison-table td:first-child { color: var(--muted); font-size: .88rem; }
    .td-no { color: #999 !important; font-weight: 400 !important; }
    .td-yes { color: var(--orange) !important; font-weight: 700 !important; text-align: center; }

    /* ════════════════════════════════════════
       LOCATIONS
       ════════════════════════════════════════ */
    .locations {
      padding: 88px 0;
      background: var(--charcoal-2);
      position: relative;
      overflow: clip;
    }
    .locations::before {
      content: '';
      position: absolute;
      top: -100px; right: -100px;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(206,59,38,.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .locations::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -80px;
      width: 360px; height: 360px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(120,120,123,.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .locations-inner {
      position: relative; z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1.1fr;
      gap: 64px;
      align-items: center;
    }
    .locations-text { }
    .locations-text .section-eyebrow { background: rgba(206,59,38,.2); color: var(--orange-mid); }
    .locations-text h2 {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(1.3rem, 2.5vw, 2rem);
      font-weight: 800;
      color: #fff;
      letter-spacing: -.03em;
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .locations-text h2 em { font-style: normal; color: var(--orange-mid); }
    .locations-text p {
      color: rgba(255,255,255,.6);
      font-size: .95rem;
      margin-bottom: 32px;
      line-height: 1.75;
    }
    .locations-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 36px;
    }
    .locations-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 14px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,.15);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
      font-size: .95rem;
      font-weight: 600;
      transition: background var(--transition), border-color var(--transition), color var(--transition);
      cursor: default;
    }
    .locations-pill::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--orange);
      flex-shrink: 0;
    }
    .locations-pill:hover { background: rgba(206,59,38,.15); border-color: var(--orange); color: #fff; }
    .locations-btns { display: flex; gap: 14px; flex-wrap: wrap; }
    .locations-note { margin-top: 16px; font-size: .8rem; color: rgba(255,255,255,.35); }

    /* SVG map */
    .locations-map-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .locations-map-wrap svg { width: 100%; max-width: 560px; height: auto; }
    .map-region {
      fill: rgba(255,255,255,.06);
      stroke: rgba(255,255,255,.12);
      stroke-width: .8;
      transition: fill .2s;
    }
    .map-region:hover { fill: rgba(206,59,38,.18); }
    .map-city-dot {
      fill: var(--orange);
      filter: drop-shadow(0 0 6px rgba(206,59,38,.7));
      transition: r .2s;
      cursor: pointer;
    }
    .map-city-dot:hover { r: 7; }
    .map-city-label {
      fill: #fff;
      font-family: 'Unbounded', sans-serif;
      font-size: 9px;
      font-weight: 700;
      pointer-events: none;
      opacity: .9;
    }

    @media (max-width: 900px) {
      .locations-inner { grid-template-columns: 1fr; gap: 48px; }
      .locations-map-wrap svg { max-width: 420px; }
    }
    @media (max-width: 600px) {
      /* City names are ~9 user units on a 642-wide viewBox — about 5px once the
         map scales to a phone. Doubled so they're legible; label positions were
         checked and none collide at this size. */
      .map-city-label { font-size: 18px; }
      /* Kranj and Koper sit with the dot just right of the label; at 18px the
         last glyph rides onto the dot. Lift only those two labels a little. */
      .map-city-label--shift { transform: translateY(-13px); }
    }

    /* ════════════════════════════════════════
       CONTACT FORM
       ════════════════════════════════════════ */
    .contact { padding: 96px 0; background: var(--white); }
    .contact-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }
    .contact-info .section-sub { margin-bottom: 36px; }
    .contact-details { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }
    .contact-detail {
      display: flex; align-items: center; gap: 14px;
      font-weight: 600; font-size: .92rem;
    }
    .contact-detail-icon {
      width: 44px; height: 44px;
      border-radius: var(--radius-sm);
      background: var(--orange-light);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .contact-detail-icon svg { width: 20px; height: 20px; color: var(--orange); }

    .contact-form-wrap {
      background: var(--concrete);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px 32px;
      box-shadow: var(--shadow-sm);
    }
    .form-title {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 24px;
      letter-spacing: -.02em;
    }
    .form-group { margin-bottom: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: 6px; color: var(--charcoal); letter-spacing: .03em; text-transform: uppercase; }
    input, textarea, select {
      width: 100%;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      border: 1.5px solid var(--border);
      background: var(--white);
      font-family: 'DM Sans', sans-serif;
      font-size: .95rem;
      color: var(--charcoal);
      transition: border-color var(--transition), box-shadow var(--transition);
      outline: none;
      appearance: none;
    }
    input:focus, textarea:focus, select:focus {
      border-color: var(--orange);
      box-shadow: 0 0 0 3px rgba(206,59,38,.12);
    }
    textarea { resize: vertical; min-height: 100px; }
    .sqm-wrap { display: flex; align-items: center; gap: 12px; }
    .sqm-wrap input[type=range] {
      flex: 1; padding: 0;
      border: none; box-shadow: none;
      accent-color: var(--orange);
    }
    .sqm-wrap input[type=range]:focus { box-shadow: none; border: none; }
    .sqm-val {
      font-family: 'Unbounded', sans-serif;
      font-size: 1rem; font-weight: 700;
      color: var(--orange);
      min-width: 54px;
      text-align: right;
    }
    .form-submit { width: 100%; justify-content: center; margin-top: 8px; font-size: .95rem; }
    .form-trust {
      margin-top: 14px;
      font-size: .78rem;
      color: var(--muted);
      text-align: center;
      display: flex; align-items: flex-start; gap: 7px;
      line-height: 1.5;
    }
    .form-trust svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; color: var(--steel); }
    #form-status { display: none; margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; }
    #form-status.success { background: #edfaf0; color: #1a7f37; border: 1px solid #b7f0c5; display: block; }
    #form-status.error   { background: #fef0ee; color: #c0392b; border: 1px solid #f5c0bb; display: block; }

    @media (max-width: 768px) {
      .contact-inner { grid-template-columns: 1fr; gap: 40px; }
      .contact-form-wrap { padding: 24px 18px; }
      .form-row { grid-template-columns: 1fr; gap: 0; }
    }

    /* ════════════════════════════════════════
       FAQ — inside objections section
       ════════════════════════════════════════ */
    .faq-block { margin-top: 0; max-width: 780px; margin-left: auto; margin-right: auto; }
    .faq-block-header {
      font-family: 'Unbounded', sans-serif;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--steel);
      margin-bottom: 16px;
    }
    .faq-list { display: flex; flex-direction: column; }
    .faq-item {
      border-bottom: 1px solid var(--border);
      padding-left: 16px;
      border-left: 3px solid var(--orange);
      transition: border-left-color var(--transition);
    }
    .faq-item:first-child { border-top: 1px solid var(--border); }
    .faq-item.open { border-left-color: var(--orange); }
    .faq-q {
      width: 100%;
      background: none;
      border: none;
      padding: 14px 12px 14px 0;
      font-family: 'Unbounded', sans-serif;
      font-size: .82rem;
      font-weight: 700;
      color: var(--charcoal);
      text-align: left;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      letter-spacing: -.01em;
    }
    .faq-q:hover { color: var(--orange); }
    .faq-chevron {
      width: 18px; height: 18px;
      flex-shrink: 0;
      color: var(--orange);
      transition: transform var(--transition);
    }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .3s ease;
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.75;
      padding: 0 12px 0 0;
    }
    .faq-item.open .faq-a { max-height: 400px; padding: 0 12px 14px 0; }

    /* ════════════════════════════════════════
       FOOTER
       ════════════════════════════════════════ */
    footer {
      background: var(--charcoal);
      color: rgba(255,255,255,.65);
      padding: 60px 0 28px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }
    .footer-brand-logo {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.1rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -.03em;
      margin-bottom: 12px;
    }
    .footer-brand-logo span { color: var(--orange); }
    .footer-brand p { font-size: .87rem; line-height: 1.7; max-width: 280px; margin-bottom: 16px; }
    .footer-contact-line {
      display: flex; align-items: center; gap: 8px;
      font-size: .85rem; font-weight: 500;
      color: rgba(255,255,255,.75);
      margin-bottom: 8px;
    }
    .footer-contact-line svg { width: 16px; height: 16px; color: var(--orange); flex-shrink: 0; }
    .footer-col h4 {
      font-family: 'Unbounded', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 16px;
    }
    .footer-links { display: flex; flex-direction: column; gap: 10px; }
    .footer-links a {
      font-size: .85rem;
      color: rgba(255,255,255,.55);
      transition: color var(--transition);
    }
    .footer-links a:hover { color: var(--orange); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.08);
      padding-top: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      font-size: .78rem;
    }
    .footer-legal { display: flex; gap: 20px; }
    .footer-legal a { color: rgba(255,255,255,.4); transition: color var(--transition); }
    .footer-legal a:hover { color: rgba(255,255,255,.7); }

    @media (max-width: 768px) {
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; align-items: flex-start; }
      footer { padding: 48px 0 24px; }
    }

    /* ════════════════════════════════════════
       MOBILE — global section padding + typography
       ════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Section padding */
      .advantages  { padding: 60px 0; }
      .services    { padding: 60px 0; }

      .process     { padding: 60px 0; }
      .stats-section { padding: 24px 0; }
      .gallery     { padding: 56px 0; }
      .objections  { padding: 60px 0; }
      .locations   { padding: 60px 0; }
      .contact     { padding: 60px 0; }

      /* CTA buttons — desktop sizing (14px 28px, .9rem) reads oversized once
         the column narrows to 358px. Specific rules elsewhere (hero, gallery,
         locations, form) still control width / justify-content on top of this. */
      .btn { padding: 11px 20px; font-size: .76rem; gap: 6px; }

      /* Section typography */
      .section-title { font-size: clamp(1.15rem, 5.5vw, 1.5rem); }
      .section-sub { font-size: .95rem; margin-bottom: 28px; max-width: 100%; }
      .section-eyebrow { font-size: .65rem; }

      /* Advantages */
      .advantages-inner { gap: 32px; }
      .advantages-text .section-sub { margin-bottom: 20px; }
      .advantages-list { gap: 12px; }
      .advantages-list-item { padding: 13px 14px; gap: 10px; }
      .advantages-list-item strong { font-size: .85rem; }
      .advantages-list-item span { font-size: .82rem; }

      /* Services */
      .services-header { margin-bottom: 32px; }
      .services-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
      .service-card { aspect-ratio: 17/11.1; }
      .service-card-name { padding: 10px 12px; }
      .service-card-desc { padding: 54px 12px 12px; }
      .service-card-desc p { margin-bottom: 6px; }
      .service-card-name h3 { font-size: .88rem; }
      .service-card-desc p { font-size: .85rem; }

      /* Process */
      .process-header { margin-bottom: 40px; }
      .process-step { padding: 0 8px; }

      /* Gallery */
      .gallery-header { margin-bottom: 28px; }
      .gallery-masonry { columns: 2; column-gap: 10px; }
      .gallery-item { margin-bottom: 10px; }
      .gallery-caption { font-size: .72rem; padding: 22px 10px 9px; }


      /* Objections + FAQ */
      .objection-block { padding: 24px 20px; }
      .objection-q { font-size: .95rem; }
      .objection-a { font-size: .88rem; }
      /* Column widths for the reference's 3-column table used to live here.
         This table has four columns; see the 4-column block further down. */
      .comparison-wrap { margin-top: 16px; }
      .comparison-table { font-size: .78rem; }
      .comparison-table th { font-size: .68rem; padding: 10px 10px; }
      .comparison-table td { padding: 9px 10px; }
      .faq-block { max-width: 100%; }
      .faq-q { font-size: .8rem; padding: 15px 16px; }

      /* Locations */
      .locations-inner { gap: 36px; }
      .locations-text h2 { font-size: clamp(1.2rem, 5.5vw, 1.6rem); }
      .locations-btns { flex-direction: column; }
      .locations-btns .btn { width: 100%; justify-content: center; }
      .locations-map-wrap svg { max-width: 100%; }
      .locations-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .locations-pill { justify-content: center; padding: 9px 12px; }

      /* Contact */
      .contact-info .section-sub { margin-bottom: 24px; }

      /* Footer */
      .footer-brand-logo { font-size: .95rem; }
    }

    /* Extra small screens */
    @media (max-width: 420px) {
      .services-grid { grid-template-columns: 1fr; }
    }

    /* ════════════════════════════════════════
       TRI DELA — the three-job map (differentiator)
       ════════════════════════════════════════ */
    .jobs { padding: 96px 0; background: var(--white); }
    .jobs-header { text-align: center; margin-bottom: 48px; }
    .jobs-header .section-sub { margin: 0 auto; }
    .jobs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: stretch;
    }
    .job-card {
      display: flex;
      flex-direction: column;
      background: var(--concrete);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      transition: transform var(--transition), box-shadow var(--transition);
    }
    .job-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
    .job-card-top { height: 5px; background: linear-gradient(90deg, var(--orange), var(--orange-mid)); }
    .job-card-body { padding: 26px 24px 24px; display: flex; flex-direction: column; flex: 1; gap: 12px; }
    .job-card-idx {
      font-family: 'Unbounded', sans-serif;
      font-size: .68rem; font-weight: 700;
      letter-spacing: .14em; text-transform: uppercase;
      color: var(--steel);
    }
    .job-card h3 {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.05rem; font-weight: 800;
      letter-spacing: -.02em; line-height: 1.25;
      margin: 0;
    }
    .job-card-price {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.55rem; font-weight: 800;
      color: var(--orange); letter-spacing: -.04em; line-height: 1;
    }
    .job-card-price small { font-size: .8rem; font-weight: 600; color: var(--muted); letter-spacing: 0; display: block; margin-top: 5px; }
    .job-card-when {
      font-size: .78rem; font-weight: 700; color: var(--steel);
      letter-spacing: .04em; text-transform: uppercase;
      padding-bottom: 12px; border-bottom: 1px solid var(--border);
    }
    .job-card-desc { font-size: .9rem; color: var(--muted); line-height: 1.7; flex: 1; }
    .job-card-sign {
      display: flex; gap: 10px; align-items: flex-start;
      background: var(--white);
      border-left: 3px solid var(--orange);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      padding: 12px 14px;
      font-size: .84rem; line-height: 1.6;
    }
    .job-card-sign strong { display: block; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }

    .jobs-aside {
      margin-top: 20px;
      display: flex; gap: 16px; align-items: flex-start;
      background: var(--charcoal);
      color: rgba(255,255,255,.72);
      border-radius: var(--radius-md);
      padding: 22px 26px;
      font-size: .9rem; line-height: 1.7;
    }
    .jobs-aside strong { color: #fff; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: .95rem; }
    .jobs-aside-price { color: var(--orange-mid); font-weight: 700; white-space: nowrap; }
    .jobs-note {
      margin-top: 20px;
      font-size: .8rem; color: var(--muted); line-height: 1.65;
      padding-left: 14px; border-left: 2px solid var(--border);
    }
    .jobs-actions { text-align: center; margin-top: 32px; }

    @media (max-width: 900px) { .jobs-grid { grid-template-columns: 1fr; } }
    @media (max-width: 768px) {
      .jobs { padding: 60px 0; }
      .jobs-header { margin-bottom: 28px; }
      .job-card-body { padding: 22px 20px 20px; }
      .jobs-aside { flex-direction: column; gap: 8px; padding: 18px 20px; }
    }


    /* ── 4-column comparison table (three-job cost table) ── */
    .comparison-table th:nth-child(2),
    .comparison-table th:nth-child(3) { background: var(--charcoal); }
    .comparison-table td:nth-child(2),
    .comparison-table td:nth-child(3) { color: var(--charcoal); font-weight: 600; text-align: center; }
    .comparison-table td:last-child { text-align: center; }
    .comparison-table tbody th {
      text-align: left; background: transparent; color: var(--muted);
      font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: .88rem;
      padding: 13px 18px; border-bottom: 1px solid var(--border);
    }
    /* The hint is only true while the table scrolls, i.e. under 768px. Declared
       before the media query so the query's `display: flex` wins. */
    .table-hint { display: none; }
    .comparison-scroll { position: relative; }

    @media (max-width: 768px) {
      /* Four columns will not fit 358px. It scrolls sideways - but the label
         column stays pinned, so a value is never stranded without its row name. */
      .comparison-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
      }
      .comparison-wrap:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 3px; }
      /* Reserve a strip above the table for the scroll badge, so the badge
         does not sit on top of the header row text. */
      .comparison-scroll { padding-top: 36px; }
      .comparison-table { table-layout: auto; min-width: 494px; }
      .comparison-table th:first-child, .comparison-table td:first-child,
      .comparison-table th:nth-child(2), .comparison-table td:nth-child(2),
      .comparison-table th:last-child, .comparison-table td:last-child { width: auto; }

      .comparison-table thead th:first-child,
      .comparison-table tbody th {
        position: sticky;
        left: 0;
        z-index: 2;
        box-shadow: 1px 0 0 var(--border);
      }
      .comparison-table thead th:first-child { background: var(--charcoal); }
      .comparison-table tbody tr:nth-child(odd)  th { background: var(--white); }
      .comparison-table tbody tr:nth-child(even) th { background: var(--concrete); }
      .comparison-table thead th:not(:first-child) { scroll-snap-align: start; }

      .table-hint {
        margin: 10px 2px 0;
        font-size: .76rem;
        color: var(--steel-text);
      }

      /* Without this the table just stops mid-word at the card edge and reads
         as broken. The fade says "there is more this way"; JS clears it once
         you reach the end. */
      .comparison-scroll::after {
        content: '';
        position: absolute;
        top: 36px; right: 0; bottom: 0;
        width: 30px;
        pointer-events: none;
        border-radius: 0 6px 6px 0;
        /* A shadow, not a white wash: the header row is near-black and a white
           fade smeared across it. This darkens the edge and works on both. */
        background: linear-gradient(90deg, rgba(16,16,16,0) 0%, rgba(16,16,16,.18) 100%);
        transition: opacity .2s;
      }
      .comparison-scroll.at-end::after { opacity: 0; }

      /* Scroll cue as a badge pinned over the top-right of the header row —
         a bottom-of-table text hint was too easy to miss before scrolling
         down that far. Fades out the moment the table is touched (JS adds
         .scrolled), not only once it reaches the end. */
      .scroll-badge {
        position: absolute;
        top: 0;
        right: 2px;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 4px;
        padding: 6px 10px;
        border-radius: 100px;
        background: var(--orange-text);
        color: #fff;
        font-family: 'DM Sans', sans-serif;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .01em;
        box-shadow: 0 4px 14px rgba(0,0,0,.28);
        pointer-events: none;
        opacity: 1;
        transition: opacity .25s;
        animation: scroll-badge-nudge 1.6s ease-in-out infinite;
      }
      .scroll-badge svg { width: 13px; height: 13px; }
      .comparison-scroll.scrolled .scroll-badge { opacity: 0; }
      @keyframes scroll-badge-nudge {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(4px); }
      }
      @media (prefers-reduced-motion: reduce) {
        .scroll-badge { animation: none; }
      }

      /* The primary conversion button should not break across two lines. */
      .form-submit { font-size: .82rem; letter-spacing: .02em; padding-left: 18px; padding-right: 18px; }
    }

    /* ── Placeholder image marker ── */
    .is-placeholder { position: relative; }

    /* ── Utilities added for this build ── */
    .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
      white-space: nowrap; border: 0;
    }
    .table-source {
      margin-top: 16px;
      font-size: .85rem; color: var(--steel); line-height: 1.7;
    }
    .jobs-note a { color: var(--orange); font-weight: 600; }
    .jobs-note a:hover { text-decoration: underline; }
    a.locations-pill { cursor: pointer; text-decoration: none; }
    .footer-bottom a { color: rgba(255,255,255,.55); }
    .footer-bottom a:hover { color: var(--orange); }
    .contact-detail a:hover { color: var(--orange); }
    :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

    /* ════════════════════════════════════════
       SUBPAGE HEADER
       ════════════════════════════════════════ */
    .pagehero {
      background: var(--charcoal);
      color: #fff;
      padding: 150px 0 72px;
      position: relative;
      overflow: clip;
    }
    .pagehero::before {
      content: '';
      position: absolute;
      top: -140px; right: -100px;
      width: 520px; height: 520px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(206,59,38,.16) 0%, transparent 70%);
      pointer-events: none;
    }
    .pagehero-inner { position: relative; z-index: 1; max-width: 820px; }
    .pagehero .section-eyebrow { background: rgba(206,59,38,.2); color: var(--orange-mid); }
    .pagehero h1 {
      font-family: 'Unbounded', sans-serif;
      font-size: clamp(1.45rem, 3.4vw, 2.4rem);
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.18;
      margin-bottom: 18px;
    }
    .pagehero h1 em { font-style: normal; color: var(--orange-mid); }
    .pagehero-lead {
      font-size: clamp(1rem, 1.6vw, 1.12rem);
      color: rgba(255,255,255,.72);
      line-height: 1.75;
      margin-bottom: 28px;
      max-width: 720px;
    }
    .pagehero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    .crumbs {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
      font-size: .78rem; font-weight: 600;
      color: rgba(255,255,255,.45);
      margin-bottom: 18px;
    }
    .crumbs a { color: rgba(255,255,255,.6); }
    .crumbs a:hover { color: var(--orange-mid); }
    .crumbs span[aria-current] { color: rgba(255,255,255,.85); }
    .crumbs i { font-style: normal; opacity: .5; }

    /* Article body inside .objections blocks */
    .prose { font-size: .97rem; color: var(--muted); line-height: 1.8; }
    .prose > * + * { margin-top: 16px; }
    .prose h3 {
      font-family: 'Unbounded', sans-serif;
      font-size: 1rem; font-weight: 700; color: var(--charcoal);
      letter-spacing: -.01em; margin-top: 26px;
    }
    .prose strong { color: var(--charcoal); }
    .prose a { color: var(--orange); font-weight: 600; }
    .prose a:hover { text-decoration: underline; }
    .prose ul { display: flex; flex-direction: column; gap: 10px; }
    .prose ul li { padding-left: 22px; position: relative; }
    .prose ul li::before {
      content: ''; position: absolute; left: 0; top: .62em;
      width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
    }
    .prose .callout {
      background: var(--concrete);
      border-left: 3px solid var(--orange);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      padding: 16px 18px;
      font-size: .92rem;
    }
    .block-title {
      font-family: 'Unbounded', sans-serif;
      font-size: 1.15rem; font-weight: 700; color: var(--charcoal);
      letter-spacing: -.02em; margin-bottom: 14px;
    }

    @media (max-width: 768px) {
      .pagehero { padding: 108px 0 52px; }
      .pagehero-actions { flex-direction: column; }
      .pagehero-actions .btn { width: 100%; justify-content: center; }
      .prose { font-size: .92rem; }
    }

    /* ── Inline SVG sizing guards (never let an icon blow up a flex row) ── */
    .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
    .hero-trust-item svg,
    .contact-detail svg,
    .footer-contact-line svg,
    .form-trust svg { flex-shrink: 0; }
    .advantages-list-icon svg { width: 18px; height: 18px; }
    .contact-detail-icon svg { width: 20px; height: 20px; }
    .footer-contact-line svg { width: 16px; height: 16px; }
    .form-trust svg { width: 14px; height: 14px; }
    .faq-chevron { width: 18px; height: 18px; }
    .service-card-desc-tag svg { width: 10px; height: 10px; flex-shrink: 0; }
    .service-card-arrow svg { width: 12px; height: 12px; }

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

    /* Motion-sensitive users get the still poster, no autoplaying video. */
    @media (prefers-reduced-motion: reduce) {
      .hero-video { display: none !important; }
    }

    /* ── Narrow-phone guards (below the width headless can render) ── */
    @media (max-width: 400px) {
      .hero-trust { flex-direction: column; align-items: center; gap: 6px; }
      .jobs-aside-price { white-space: normal; }
      /* Storitve / Obmocje stay side by side even here - a single stacked
         column of two 5-6 item lists ran the footer on for another screen. */
      .footer-grid { gap: 20px 16px; }
    }

    /* ── A11y fixes (Lighthouse) ── */

    /* Contrast: steel was 3.4:1 on white. Text usages move to the darker token. */
    .job-card-when,
    .table-source,
    .jobs-note,
    .faq-block-header,
    .section-eyebrow--steel { color: var(--steel-text); }
    .form-trust svg,
    .prose .callout { color: var(--steel-text); }

    /* Links in prose must not rely on colour alone */
    .prose a,
    .jobs-note a,
    .objection-a a,
    .locations-text p a,
    .footer-bottom a { text-decoration: underline; text-underline-offset: 2px; }

    /* Counters: reserve digit width so 0 -> 213 does not shift layout */
    .counter {
      display: inline-block;
      font-variant-numeric: tabular-nums;
      text-align: left;
    }

    /* Skip link */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 300;
      background: var(--charcoal);
      color: #fff;
      padding: 12px 20px;
      border-radius: 0 0 var(--radius-sm) 0;
      font-family: 'Unbounded', sans-serif;
      font-size: .85rem;
      font-weight: 700;
    }
    .skip-link:focus { left: 0; }

    /* Footer section headings are h3 now — keep the original look */
    .footer-col h3 {
      font-family: 'Unbounded', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #fff;
      margin-bottom: 16px;
    }

    /* ══════════════════════════════════════════════════════════
       WCAG AA CONTRAST PASS
       Palette "Apno in ogljik". Brand --orange (#CE3B26) is 4.91:1 on
       white and 4.58:1 on the concrete ground — fine everywhere except
       against the light tint used by eyebrow pills.
       --orange-text (#C63924) clears 4.5:1 on white, concrete AND tint,
       and white on it is 5.23:1, so it also carries buttons and bands.
       ══════════════════════════════════════════════════════════ */
    :root { --orange-text: #C63924; }

    /* Small orange text on light backgrounds */
    .section-eyebrow,
    .process-step-tag,
    .job-card-sign strong,
    .job-card-idx,
    .jobs-note a,
    .prose a,
    .objection-a a,
    .locations-text p a,
    .sqm-val,
    .comparison-table td:last-child,
    .td-yes,
    .nav-logo-word em,
    .faq-block-header { color: var(--orange-text); }
    .comparison-table .td-yes { color: var(--orange-text) !important; }

    .nav-links a:not(.btn):hover,
    .faq-q:hover,
    .contact-detail a:hover,
    .footer-links a:hover { color: var(--orange-text); }

    /* White text on orange must sit on the deeper tone */
    .btn-orange { background: var(--orange-text); }
    .btn-orange:hover { background: #A82F1E; }
    .comparison-table th:last-child { background: var(--orange-text); }
    .stats-section { background: var(--orange-text); }
    .stat-label { color: #fff; }

    /* Muted "no" cells were #999 (2.59:1) */
    .td-no { color: #6B6B6B !important; }

    /* Steel-on-concrete small text */
    .job-card-when { color: var(--steel-text); }

    /* ── Nav CTA: white on orange (was inheriting charcoal from .nav-links a) ── */
    .nav-links .btn-orange,
    .mobile-menu .btn-orange { color: #fff; }

    /* ══════════════════════════════════════════════════════════
       DARK-HERO PAGES (every subpage opens on a charcoal .pagehero)
       Until the nav picks up its light scrolled background, its text
       must be light or it is charcoal-on-charcoal.
       ══════════════════════════════════════════════════════════ */
    .dark-hero #site-nav:not(.scrolled) .nav-logo-word { color: #fff; }
    .dark-hero #site-nav:not(.scrolled) .nav-logo-word em { color: var(--orange-mid); }
    .dark-hero #site-nav:not(.scrolled) .nav-links a:not(.btn) { color: rgba(255,255,255,.88); }
    .dark-hero #site-nav:not(.scrolled) .nav-links a:not(.btn):hover { color: var(--orange-mid); }
    .dark-hero #site-nav:not(.scrolled) .hamburger span { background: #fff; }

    /* Breadcrumb nav is in normal flow — never the fixed header */
    .crumbs { position: static; }

    /* Hero image column matches the height of the text column */
    .hero-inner { align-items: stretch; }
    .hero-image-wrap { align-items: stretch; }
    .hero-image-card { align-self: stretch; }
    @media (max-width: 900px) {
      .hero-inner { align-items: center; }
      .hero-image-card { min-height: 420px; }
    }

    /* ── Contrast corrections for the "Apno in ogljik" palette ── */

    /* The --steel eyebrow variant sits on --steel-light, where the red drops to
       4.42:1. Raise specificity so the modifier wins over the generic rule. */
    .section-eyebrow.section-eyebrow--steel { color: var(--steel-text); }

    /* On the near-black footer/dark sections the full-strength accent is only
       3.87:1. --orange-mid is 6.22:1 there. */
    .footer-brand-logo span,
    .footer-links a:hover,
    .footer-bottom a:hover { color: var(--orange-mid); }

    /* ════════════════════════════════════════
       GALLERY — balanced masonry
       Three explicit columns. Inside each, the aspect ratios are chosen so the
       sum of heights is identical across columns, so the block ends flush while
       the columns still differ from one another.
       ════════════════════════════════════════ */
    .gallery-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      align-items: start;
    }
    .gallery-col {
      display: flex;
      flex-direction: column;
      gap: 16px;
      min-width: 0;
    }

    /* Six tiles by default; .expanded reveals the rest. Twelve tiles unfurled
       on a phone is roughly two extra screens of scrolling. */
    .gallery-extra { display: none; }
    .gallery-cols.expanded .gallery-extra { display: block; }
    .gallery-actions { text-align: center; margin-top: 28px; }

    @media (max-width: 900px) {
      /* Real masonry, not a forced square grid: CSS multi-column layout lets
         each tile keep its own aspect-ratio (set inline per item) and the
         browser balances the two columns itself. */
      .gallery-col { display: contents; }
      .gallery-cols {
        display: block;
        columns: 2;
        column-gap: 12px;
      }
      .gallery-item {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
        margin-bottom: 12px;
        width: 100%;
      }
      .gallery-actions { margin-top: 20px; }
      .gallery-actions .btn { width: 100%; justify-content: center; }
    }
    @media (max-width: 420px) {
      .gallery-cols { gap: 10px; }
    }

    /* ════════════════════════════════════════
       COMPARISON TABLE — one colour per stage
       Grey → terracotta → red reads as a ladder, and stops stages 1 and 2
       blending into each other. All three clear AA on white and on the
       striped rows (7.20 / 6.65 / 5.23 : 1).
       ════════════════════════════════════════ */
    :root {
      --stage-1: #57575A;
      --stage-2: #8C4A3C;
      --stage-3: #C63924;
    }
    .comparison-table th.th-s1 { background: var(--stage-1); }
    .comparison-table th.th-s2 { background: var(--stage-2); }
    .comparison-table th.th-s3 { background: var(--stage-3); border-radius: 0 6px 0 0; }
    .comparison-table th.th-s1,
    .comparison-table th.th-s2,
    .comparison-table th.th-s3 { color: #fff; text-align: center; vertical-align: middle; }

    .comparison-table td.s1 { color: var(--stage-1); font-weight: 700; text-align: center; }
    .comparison-table td.s2 { color: var(--stage-2); font-weight: 700; text-align: center; }
    .comparison-table td.s3 { color: var(--stage-3); font-weight: 700; text-align: center; }
    /* "ne" cells read as an absence through weight, not opacity — opacity
       dropped the grey to 3.44:1 and failed AA. */
    .comparison-table td.td-off { font-weight: 400 !important; color: #6B6B6E; }

    /* a hairline in each stage colour under the header keeps the columns
       distinguishable once you have scrolled past the header row */
    .comparison-table td.s1 { box-shadow: inset 3px 0 0 rgba(87,87,90,.20); }
    .comparison-table td.s2 { box-shadow: inset 3px 0 0 rgba(140,74,60,.22); }
    .comparison-table td.s3 { box-shadow: inset 3px 0 0 rgba(198,57,36,.26); }

    /* ════════════════════════════════════════
       FAQ — full-width section
       ════════════════════════════════════════ */
    .faq-section { padding: 88px 0; background: var(--white); }
    .faq-head { margin-bottom: 34px; }
    .faq-section .faq-block { max-width: none; margin: 0; }
    .faq-section .faq-item { border-left-width: 4px; padding-left: 22px; }
    .faq-section .faq-q {
      font-size: 1rem;
      padding: 22px 12px 22px 0;
      letter-spacing: -.015em;
    }
    .faq-section .faq-a {
      font-size: .95rem;
      max-width: 900px;
      line-height: 1.8;
    }
    .faq-section .faq-item.open .faq-a { max-height: 520px; padding-bottom: 22px; }
    .faq-section .faq-chevron { width: 22px; height: 22px; }

    @media (max-width: 768px) {
      .faq-section { padding: 56px 0; }
      .faq-head { margin-bottom: 22px; }
      .faq-section .faq-item { padding-left: 14px; border-left-width: 3px; }
      .faq-section .faq-q { font-size: .88rem; padding: 16px 10px 16px 0; }
      .faq-section .faq-a { font-size: .88rem; }
    }