/* =========================================================
   Desjoyaux Slovenija - style.css
   Design po Desjoyaux Brandbook (marec 2024):
   - barve: Pantone 294 navy, Process Blue, rumena SAMO za "J" v
     logotipu / puščice, nikoli kot ploskovna barva ozadja/gumba
   - pisava: Montserrat (na željo naročnika), lokalno vgrajena kot WOFF2
     (uteži 300/400/500/700), pokriva slovenske šumnike (č š ž).
   ========================================================= */

/* ---------- 1) Pisave (lokalno, WOFF2) ---------- */
@font-face {
    font-family: "Brand Sans";
    src: url("../fonts/montserrat-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Brand Sans";
    src: url("../fonts/montserrat-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Brand Sans";
    src: url("../fonts/montserrat-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Brand Sans";
    src: url("../fonts/montserrat-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ---------- 2) Barve, spremenljivke ---------- */
:root {
    /* Logotip / temeljne barve */
    --navy: #005597;       /* Pantone 294 */
    --blue: #0091d3;       /* Process Blue */
    --yellow: #ffdd00;     /* Pantone 109C - SAMO za "J" / puščice / drobne poudarke */

    --navy-dark: #003c6b;
    --blue-light: #e6f5fc;
    --navy-tint-05: rgba(0, 85, 151, 0.05);
    --navy-tint-10: rgba(0, 85, 151, 0.1);

    /* Dopolnilne barve (brandbook "Complementary colours", uporaba: 2-4 na stran) */
    --coral: #f08262;
    --orange: #f08162;
    --teal: #21b3b9;
    --teal-light: #69c9d9;
    --lilac: #d3a2ca;
    --sky: #a5c9ef;

    --ink: #1c2b36;
    --body: #3c4c58;
    --muted: #5f6f7a;
    --line: #e3e9ed;
    --bg: #ffffff;
    --bg-soft: #f5f9fb;
    --white: #ffffff;

    --ok: #1f9d55;
    --error: #c0392b;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;

    --shadow-sm: 0 2px 10px rgba(28, 43, 54, 0.06);
    --shadow-md: 0 12px 32px rgba(28, 43, 54, 0.12);

    --container: 1180px;
    --gutter: clamp(20px, 5vw, 48px);

    --font-sans: "Brand Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --header-h: 84px;
}

/* ---------- 3) Reset in osnove ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
    /* Mobilni meni (.main-nav) je position:fixed in ga, ko je zaprt, premikamo
       izven zaslona s transform:translateX(100%). Ta transformirana škatla se
       kljub temu, da ni vidna, šteje v širino dokumenta v Chromiumu/mobilnih
       brskalnikih in povzroči "fantomsko" vodoravno drsenje strani.
       Uporabimo overflow-x:clip (ne "hidden") - clip obreže vsebino brez, da bi
       ustvaril nov "scroll container", zato ne pokvari position:sticky glave
       spodaj (kar se zgodi z overflow-x:hidden na html/body). */
    overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 400;
    color: var(--body);
    background: var(--bg);
    line-height: 1.6;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
/* Ikone iz sprite.svg so risane kot obrisi (brez fill/stroke v sami datoteki),
   zato barvo in slog nastavimo tu - sicer se privzeto izrišejo kot zapolnjeni
   črni liki (pri ikonah, sestavljenih iz samih črt, kot je meni/X, pa se ne
   izrišejo sploh, ker zaprta ploskev za "fill" ne obstaja). */
svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* Logotipi družbenih omrežij so polni liki, ne obrisi. */
.footer-social svg { fill: currentColor; stroke: none; }

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.2;
    margin: 0 0 0.5em;
    font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.2rem); }
h2 { font-size: clamp(1.5rem, 2.4vw + 1rem, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1.2vw + 1rem, 1.5rem); text-transform: none; }
h4, h3.h4 { font-size: 1.05rem; text-transform: none; }

p { margin: 0 0 1em; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

ul, ol { padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

/* Vidni fokus za tipkovnico */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skoči na vsebino */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--navy);
    color: #fff;
    padding: 12px 20px;
    z-index: 1000;
    border-radius: 0 0 8px 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

section { padding: clamp(48px, 8vw, 96px) 0; }
.section-soft { background: var(--bg-soft); }
.section-navy { background: var(--navy); color: rgba(255,255,255,0.92); }
.section-navy h1, .section-navy h2, .section-navy h3 { color: #fff; }
.section-navy h1 .accent { color: var(--yellow); }
.section-navy .eyebrow { color: var(--sky); background: rgba(255,255,255,0.14); }
/* Bela ".card" znotraj temne ".section-navy" (npr. kartice s časovnico) podeduje
   belo/skoraj belo barvo besedila po zgornjih pravilih - na beli kartici bi bilo
   nevidno, zato ga tu povrnemo na običajne, temne barve. */
.section-navy .card { color: var(--body); }
.section-navy .card h3 { color: var(--navy); }

/* Eyebrow - majhen "chip" nad naslovi; barva se giblje po dopolnilni paleti
   (glej razdelek 7 spodaj), rumena pa ostane rezervirana samo za logotip. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--blue);
    background: var(--blue-light);
    padding: 0.5em 1em 0.5em 0.8em;
    border-radius: 999px;
    margin-bottom: 1em;
}
.eyebrow::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}
.eyebrow-coral { color: var(--coral); background: rgba(240,130,98,0.14); }
.eyebrow-teal { color: var(--teal); background: rgba(33,179,185,0.14); }
.eyebrow-lilac { color: var(--lilac); background: rgba(211,162,202,0.18); }
.eyebrow-sky { color: #4b7bab; background: rgba(165,201,239,0.25); }

.section-head {
    max-width: 720px;
    margin: 0 0 2.5rem;
}
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- 4) Gumbi ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 44px;
    padding: 0.9em 1.6em;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color .15s ease;
    line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
    background: var(--blue);
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--navy); color: #fff; box-shadow: var(--shadow-md); }
.btn-outline {
    background: transparent;
    border-color: rgba(255,255,255,0.7);
    color: inherit;
}
.btn-outline:hover { background: rgba(255,255,255,0.12); color: inherit; }
.btn-ghost {
    background: var(--navy-tint-10);
    color: var(--navy);
}
.btn-ghost:hover { background: var(--navy-tint-05); color: var(--navy); }
.btn-lg { padding: 1.05em 2em; font-size: 1.05rem; }

/* ---- Barvni gumbi - polna barva iz obstoječe poudarjalne palete
   (glej "--coral"/"--teal"/"--lilac" zgoraj), za razdelke, kjer si želimo
   več kot eno "pot naprej" hkrati (npr. zahvalna stran po oddaji obrazca). ---- */
.btn-coral { background: var(--coral); color: #fff; }
.btn-coral:hover { background: #dd6a49; color: #fff; box-shadow: var(--shadow-md); }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #1a9298; color: #fff; box-shadow: var(--shadow-md); }
.btn-lilac { background: var(--lilac); color: #fff; }
.btn-lilac:hover { background: #c286b8; color: #fff; box-shadow: var(--shadow-md); }
.btn-sky { background: var(--sky); color: var(--navy); }
.btn-sky:hover { background: #8fbceb; color: var(--navy); box-shadow: var(--shadow-md); }

/* ---------- 5) Glava / navigacija (lepljiva) ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: #ffffff;
    /* Opomba: brez backdrop-filter/transform/filter na .site-header - kateri
       koli od teh na tem elementu naredi nov "containing block" za njegove
       position:fixed potomce (mobilni meni .main-nav), zaradi česar se
       "inset" na meniju računa glede na glavo (cca. 72px) namesto glede na
       celoten zaslon, meni pa se sesuje na skoraj nično višino. */
    border-bottom: 1px solid var(--line);
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled {
    box-shadow: 0 4px 20px rgba(28, 43, 54, 0.08);
}
.site-header .container {
    /* max-width:none - glava ne sledi splošni ".container" širini: logotip in
       telefon+gumb naj bosta ob resničnem robu strani, meni pa se zato
       sredinsko poravna glede na celotno širino strani, ne glede na ožji
       ".container" ostalih razdelkov. Notranji razmik je nekoliko večji od
       splošnega "--gutter", da logotip in gumbi ne lepijo povsem na rob. */
    max-width: none;
    padding-left: calc(var(--gutter) + 20px);
    padding-right: calc(var(--gutter) + 20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}
.brand {
    display: flex;
    align-items: center;
    gap: 0.6em;
    flex-shrink: 0;
}
.brand img { height: 40px; width: auto; }

/* ".main-nav" je "flex:1" znotraj ".site-header .container" (glej spodaj), da
   se sam razporedi po sredini med logotipom in ".header-actions" - z več
   povezavami (glej opombo pri "gap" spodaj) je zdaj tudi vodoravno
   sredinsko poravnan namesto lepljenja na levo takoj za logotipom.
   "gap" zmanjšan na 1.1rem (prej 1.4rem), ker je na podstraneh (ki imajo
   dodaten "Domov" povezavo, torej 8 povezav skupaj) pri ~1440px širini
   vodoravni prostor za natančno toliko prekratek, da so se dvobesedne
   povezave (npr. "Gradnja bazena") lomile v dve vrstici. */
.main-nav { display: flex; align-items: center; justify-content: center; gap: 1.1rem; flex: 1; min-width: 0; }
.main-nav a {
    position: relative;
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.4em 0;
}
/* Podčrtaj kot ".main-nav a::after" namesto "border-bottom", da se ob hoverju
   (in na trenutni podstrani, ".aria-current") vrisuje animirano - "scaleX"
   od 0 do 1 - namesto da se barva samo trenutno prikaže/skrije. */
.main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
    color: var(--navy);
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
    transform: scaleX(1);
}

.header-actions { display: flex; align-items: center; gap: 1rem; }
.header-phone {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    white-space: nowrap;
}
.header-phone svg { width: 20px; height: 20px; color: var(--blue); }

.nav-toggle {
    display: none;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; color: var(--navy); }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-open { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

/* ---------- 6) Hero ---------- */
.hero {
    position: relative;
    color: #fff;
    display: flex;
    align-items: flex-end;
    min-height: min(88vh, 780px);
    overflow: hidden;
    /* .hero je <section>, zato brez tega prevzame splošno pravilo
       "section { padding: clamp(48px,8vw,96px) 0; }" - kar herotu doda do
       192px odvečne višine (96px zgoraj + spodaj) in potisne statistiko
       pod njim precej nižje, kot je videti v min-height. Razmik spodaj
       uravnava .hero-content s svojim padding-bottom. */
    padding: 0;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
    width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.hero-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,43,79,0.35) 0%, rgba(0,32,59,0.55) 55%, rgba(0,22,41,0.82) 100%);
}
.hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
    /* Zagotovi razmik od headerja tudi, ko je naslov dovolj dolg/ozek (velik
       h1 na podstraneh se pogosto prelomi v 3-4 vrstice), da vsebina hero
       razdelka preseže min-height in "align-items:flex-end" nima več
       praznega prostora, ki bi ga izkoristil - brez tega je naslov takrat
       prilepljen naravnost na header (0px razmika). */
    padding-top: clamp(64px, 9vw, 104px);
    padding-bottom: clamp(66px, 9vw, 100px);
}
.hero .eyebrow { color: #fff; background: rgba(255,255,255,0.18); }
.hero h1 {
    color: #fff;
    max-width: 18ch;
    /* Manjši naslov kot prvotni "clamp(2.4rem, 5vw + 1rem, 3.9rem)" - velja za
       podstrani; naslovnica si prvotno (večjo) velikost povrne spodaj prek
       ".hero-viewport .hero h1" (glej razdelek "NASLOVNICA - dodatni sloj"). */
    font-size: clamp(2.1rem, 4.4vw + 0.9rem, 3.35rem);
    letter-spacing: -0.01em;
}
.hero h1 .accent { color: var(--yellow); }
.hero-lede { font-size: 1.15rem; max-width: 52ch; color: rgba(255,255,255,0.9); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }

.hero-stats {
    position: relative;
    z-index: 2;
    margin-top: -56px;
}
.stats-card {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}
.stat-tile {
    padding: 1.5rem 1.2rem;
    text-align: center;
    border-right: 1px solid var(--line);
}
.stat-tile:last-child { border-right: none; }
.stat-tile strong {
    display: block;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    color: var(--navy);
    font-weight: 700;
}
/* Barvni utrip po dopolnilni paleti - "Desjoyaux fun z barvami" brez rumene */
.stat-tile:nth-child(2) strong { color: var(--teal); }
.stat-tile:nth-child(3) strong { color: var(--coral); }
.stat-tile:nth-child(4) strong { color: #9c5f92; }
.stat-tile span {
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ---------- 7) Kartice / mreže ---------- */
.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Znan "gotcha" CSS grida: privzeta "min-width:auto" pri stolpcu pomeni, da
   ga vsebina brez preloma (npr. ".compare-table" s svojim "min-width") lahko
   razširi čez razpoložljiv prostor stolpca - na ozkih zaslonih je bila zato
   slika/kartica v razdelku "Filtracija" odrezana namesto da bi se skrčila na
   1 stolpec. To popravi vse ".grid" stolpce hkrati, brez vpliva na izgled. */
.grid > * { min-width: 0; }

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.8rem;
    box-shadow: var(--shadow-sm);
}
.card-icon {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--blue-light);
    color: var(--blue);
    margin-bottom: 1rem;
}
.card-icon svg { width: 26px; height: 26px; }

/* barvni poudarki kartic (dopolnilne barve, po 1 na kartico) */
.accent-coral .card-icon { background: rgba(240,130,98,0.14); color: var(--coral); }
.accent-teal .card-icon { background: rgba(33,179,185,0.14); color: var(--teal); }
.accent-lilac .card-icon { background: rgba(211,162,202,0.18); color: var(--lilac); }
.accent-sky .card-icon { background: rgba(165,201,239,0.25); color: #4b7bab; }

/* ---------- 7b) Video v obliki telefona ----------
   Za posnetke, ki so bili sneti navpično (kot video na telefonu) - okvir
   telefona namesto klasičnega 16:9 predvajalnika, da posnetek ni obkrožen
   s črnimi robovi. */
.phone-frame {
    position: relative;
    width: min(300px, 72vw);
    aspect-ratio: 9 / 19.5;
    margin: 0 auto;
    background: #111a22;
    border-radius: 42px;
    padding: 12px;
    box-shadow: var(--shadow-md);
}
.phone-frame::before {
    content: "";
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 84px; height: 20px;
    background: #111a22;
    border-radius: 0 0 14px 14px;
    z-index: 2;
}
.phone-screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    background: #000;
}
.phone-screen iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- 8) Potek sodelovanja / koraki ---------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
/* .steps-3: različica za 6 korakov (2x3 namesto neenakomernega 4+2).
   Namerno kot razred, ne kot inline style na .steps - inline style bi imel
   višjo specifičnost od spodnjih @media pravil za .steps in bi na ozkih
   zaslonih onemogočil zlaganje korakov v 2 oz. 1 stolpec. */
@media (min-width: 981px) {
    .steps-3 { grid-template-columns: repeat(3, 1fr); }
}
.step { position: relative; padding-top: 0.2rem; }
.step .step-num {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    margin-bottom: 0.9rem;
}

/* ---------- 9) Reference / galerija ---------- */
/* Referenčna galerija: ena velika "izpostavljena" fotografija čez celotno
   širino (širok, ležeč format) + vrstica treh manjših, prav tako ležečih
   fotografij pod njo - namesto prejšnjih štirih enako velikih pokončnih
   kartic. */
.ref-grid { display: flex; flex-direction: column; gap: 1.6rem; }
.ref-grid-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.ref-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    aspect-ratio: 4/3;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ref-card-featured { aspect-ratio: 2.2/1; }
.ref-card-featured .ref-card-body { padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1.2rem, 3vw, 2.2rem) clamp(1.4rem, 3vw, 2.4rem); }
.ref-card-featured .ref-card-body h4, .ref-card-featured .ref-card-body .h4 { font-size: clamp(1.15rem, 1.6vw + 1rem, 1.7rem); }
@media (max-width: 760px) {
    /* Tudi na ozkih zaslonih ostanejo vse fotografije ležeče (ne pokončne) -
       vrstica treh se samo zloži druga pod drugo namesto v tri stolpce. */
    .ref-grid-row { grid-template-columns: 1fr; }
    .ref-card-featured { aspect-ratio: 4/3; }
}
.ref-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ref-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}
.ref-card:hover img { transform: scale(1.05); }
.ref-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,20,40,0) 42%, rgba(0,24,45,0.82) 100%);
}
.ref-card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: 1.1rem 1.2rem 1.25rem;
    color: #fff;
}
.ref-card-loc { font-weight: 700; color: var(--sky); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ref-card-body h4, .ref-card-body .h4 { color: #fff; }

/* ---------- 10) Mnenja ---------- */
.testimonial {
    background: linear-gradient(135deg, rgba(165,201,239,0.28), rgba(211,162,202,0.2));
    border-radius: var(--radius-lg);
    padding: 2rem 2.2rem;
}
.stars { color: var(--yellow); letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.stars svg { width: 18px; height: 18px; display: inline-block; fill: #f0b400; }

/* ---------- 11) FAQ ---------- */
.faq-item {
    border-bottom: 1px solid var(--line);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem 0;
    font-weight: 700;
    color: var(--navy);
    min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-icon { flex-shrink: 0; width: 22px; height: 22px; transition: transform 0.2s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p { padding-bottom: 1.2rem; color: var(--body); }

/* ---------- 12) Kontaktni obrazec ---------- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
/* .map-embed - vgrajen Google Zemljevid namesto obrazca (npr. na strani
   "Trgovina", kjer gre za obisk trgovine, ne za povpraševanje po ponudbi) -
   enako zaobljen in visok kot sosednja ".contact-info-card". */
.map-embed {
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    min-height: 360px;
    box-shadow: var(--shadow-sm);
    /* Zemljevid se naloži šele, ko je sekcija vidna (main.js -
       "[data-map-src]") - do takrat nevtralno ozadje namesto praznega okvirja. */
    background: var(--blue-light);
}
.map-embed iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
.contact-info-card {
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 2.2rem;
}
.contact-info-card a { color: #fff; }
.contact-info-card .info-row { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1.2rem; }
.contact-info-card svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--yellow); margin-top: 2px; }

/* Svetla različica kontaktne kartice (zaenkrat samo domača stran - glej
   index.html, kjer ima .contact-info-card dodan modifikator .is-light) -
   namesto polnega modrega kvadrata beli karton z barvnim poudarkom na vrhu
   in pisanimi ikonskimi čipi. */
.contact-info-card.is-light {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--body);
    box-shadow: var(--shadow-sm);
    padding: 2.4rem 2.2rem 2.2rem;
}
.contact-info-card.is-light h3 { color: var(--navy); }
.contact-info-card.is-light a { color: var(--blue); font-weight: 700; }
.contact-info-card.is-light a:hover { color: var(--navy); }
.info-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
}
.info-icon svg { width: 20px; height: 20px; }
.info-icon-coral { background: rgba(240,130,98,0.14); color: var(--coral); }
.info-icon-teal { background: rgba(33,179,185,0.14); color: var(--teal); }
.info-icon-sky { background: rgba(165,201,239,0.25); color: #4b7bab; }
.info-icon-lilac { background: rgba(211,162,202,0.18); color: var(--lilac); }

form.contact-form { display: grid; gap: 1.1rem; }
.form-row { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 700; font-size: 0.92rem; color: var(--navy); }
.field input,
.field textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 16px; /* prepreči iOS povečavo */
    padding: 0.85em 1em;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--ink);
    min-height: 44px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--blue); }
.field .field-error { color: var(--error); font-size: 0.85rem; display: none; }
.field.has-error input,
.field.has-error textarea { border-color: var(--error); }
.field.has-error .field-error { display: block; }

.checkbox-row { display: flex; gap: 0.7em; align-items: flex-start; font-size: 0.92rem; color: var(--body); }
.checkbox-row input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; }

.form-msg {
    display: none;
    border-radius: var(--radius-sm);
    padding: 0.9em 1.1em;
    font-weight: 600;
}
.form-msg.show { display: block; }
.form-msg.ok { background: rgba(31,157,85,0.12); color: #1a7a44; }
.form-msg.error { background: rgba(192,57,43,0.1); color: var(--error); }

/* Honeypot - skrito za ljudi, vidno robotom */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ---------- 13) Noga ---------- */
.site-footer {
    background: var(--navy);
    color: rgba(255,255,255,0.85);
    padding: 3.5rem 0 2rem;
}
.site-footer a { color: #fff; }
.site-footer .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 2.5rem;
    padding-bottom: 2.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
.site-footer h4, .site-footer .h4 { color: #fff; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.06em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.6em; }
.footer-social { display: flex; gap: 0.8rem; margin-top: 1rem; }
.footer-social a {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: background 0.2s ease, transform 0.2s ease;
}
.footer-social a:hover { background: var(--blue); transform: translateY(-3px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
    padding-top: 1.4rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
}
.footer-bottom a { color: rgba(255,255,255,0.85); }

/* ---------- 14) Drobtinice (breadcrumbs) ---------- */
.breadcrumbs {
    font-size: 0.85rem;
    color: var(--muted);
    padding: 1rem 0 0;
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--navy); }

/* ---------- 15) Nežne animacije ob pomikanju (samo, če JS deluje) ---------- */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 16) Pomožni razredi ---------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
.text-center { text-align: center; }

/* ---------- 17) Odziven postopek (mobile) ---------- */
@media (max-width: 980px) {
    .stats-card { grid-template-columns: repeat(2, 1fr); }
    .stat-tile:nth-child(2n) { border-right: none; }
    .stat-tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .contact-wrap { grid-template-columns: 1fr; }
    .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    :root { --header-h: 72px; }
    .nav-toggle { display: inline-flex; }
    .main-nav {
        position: fixed;
        inset: 72px 0 0 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        /* Prekliče "justify-content:center" (glej razdelek 5 zgoraj, dodano
           za sredinsko poravnavo na širšem zaslonu) - na mobilnem je meni
           poln zaslon in mora seznam povezav ostati poravnan na vrh, ne na
           navpično sredino praznega prostora. */
        justify-content: flex-start;
        padding: 1.5rem var(--gutter);
        gap: 0.2rem;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        overflow-y: auto;
    }
    .nav-open .main-nav { transform: translateX(0); }
    .main-nav a { padding: 0.9em 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
    .header-phone span { display: none; }
    /* Gumb "Brezplačen posvet" na ozkih zaslonih skupaj s telefonom in hamburger
       gumbom ne stane več v vrstico in hamburger gumb potisne izven vidnega
       območja, zato ga na mobilnem skrijemo - CTA ostane v hero razdelku in v
       meniju prek povezave "Kontakt". */
    .header-actions .btn-primary { display: none; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .site-footer .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    h1 { max-width: none; }
}

/* Minimalna velikost besedila na telefonu je zagotovljena z rem enotami
   izhodiščno 17px; noben element ne gre pod 12px. */

/* =========================================================
   NASLOVNICA - dodatni sloj (prej v ločeni home.css, zdaj združeno
   v eno datoteko, ker stran trenutno obsega samo landing page).
   ========================================================= */

/* ---- Širša vsebina na naslovnici (glava, hero, vse sekcije) - približno
   10% širše od splošnega --container, ker se je zdela vsebina (besedilo,
   slike) v primerjavi z referenco preozka. Ker je ta spremenljivka
   nastavljena samo znotraj te datoteke (naložene le v index.html), na
   podstrani ne vpliva. ---- */
:root {
    --container: 1300px;
}

/* ---- Glava - preden se pomaknete navzdol je popolnoma prosojna in lebdi
   čez hero fotografijo (zato ni več "position:sticky", ki bi zasedal
   prostor v toku, ampak "fixed", hero pa se zato začne na vrhu strani -
   glej spodaj). Ob pomiku navzdol postane temno modra. Logotip je v
   prosojnem stanju malo večji, ob pomiku pa se pomanjša nazaj na
   običajno velikost in zamenja na svetlo različico. ---- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: transparent;
    border-bottom-color: transparent;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.brand { position: relative; }
.brand img { height: 52px; transition: height 0.25s ease; }
/* Privzeto (vrh strani, glava še prosojna/čez fotografijo) se prikaže barvni
   logotip - ima lastno (modro) ozadje, zato je čitljiv na kateri koli
   podlagi. Šele ko je glava ob pomiku navzdol polno temno modra
   (".is-scrolled" spodaj), preklopimo na svetlo/belo različico. */
.brand .logo-dark { display: block; }
.brand .logo-light { display: none; }
.main-nav a { color: rgba(255,255,255,0.92); }
.main-nav a::after { background: var(--sky); }
.main-nav a:hover,
.main-nav a[aria-current="page"] {
    color: #fff;
}
/* ".main-nav a{color:...}" (zgoraj) ima zaradi ".main-nav" (razred) + "a"
   (element) višjo specifičnost kot ".btn-primary{color:#fff}" (style.css),
   zato je do zdaj "zmagalo" in gumbu ".mobile-nav-cta" (ki je hkrati
   ".btn-primary", prikazan samo v mobilnem meniju) prebarvalo besedilo v
   temno ("--ink") - na modrem ozadju komaj berljivo, na hoverju pa (glej
   mobilno različico spodaj, ki barvo ob hoverju spremeni v temno modro)
   povsem nevidno, saj postane tudi ozadje gumba temno modro. Tu obema
   stanjema vrnemo belo besedilo. */
.main-nav a.btn,
.main-nav a.btn:hover { color: #fff; }
.header-phone { color: #fff; }
.header-phone svg { color: var(--sky); }
/* Splošno pravilo "a:hover{color:navy}" (style.css) bi ob pomiku glavo
   spremenilo besedilo telefonske številke v temno modro - ker je glava ob
   pomiku navzdol prav tako temno modra, bi bilo besedilo na hover popolnoma
   nevidno. Na tej (prosojni/temno modri) glavi zato obarvamo hover v
   svetlo nebesno modro namesto v temno modro. */
.header-phone:hover { color: var(--sky); }
.nav-toggle svg { color: #fff; }

/* Na mobilnem se meni odpre v lastni beli plošči (glej style.css), ne
   direktno čez prosojno/temno glavo, zato mora besedilo tam ostati temno -
   sicer je belo besedilo na beli podlagi nevidno. */
@media (max-width: 760px) {
    .main-nav a { color: var(--ink); }
    .main-nav a::after { background: var(--blue); }
    .main-nav a:hover,
    .main-nav a[aria-current="page"] {
        color: var(--navy);
    }
}

.site-header.is-scrolled {
    background: var(--navy);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.site-header.is-scrolled .brand img { height: 40px; }
.site-header.is-scrolled .brand .logo-dark { display: none; }
.site-header.is-scrolled .brand .logo-light { display: block; }
.site-header.is-scrolled .btn-primary { background: #fff; color: var(--navy); }
.site-header.is-scrolled .btn-primary:hover { background: var(--blue-light); }

/* Meni na dotik/mobilno ostane berljiv, tudi ko je glava še prosojna. */
.nav-open .site-header { background: var(--navy); }

/* Telefon in CTA v meniju se prikažeta samo na mobilnem (glej spodnji medij
   poizvedbo) - na širšem zaslonu sta oba že v .header-actions, brez tega bi
   se podvojila v vodoravnem meniju. */
.mobile-nav-phone, .mobile-nav-cta, .mobile-nav-only { display: none; }

/* ---- Mobilni meni - "plavajoča kartica" (po vzoru priložene reference):
   ne razteza se čez cel zaslon, ampak se prilagodi vsebini, ima zaobljene
   spodnje kotove in senco, na dnu pa telefon in gumb za posvet, da je CTA
   dosegljiv tudi, ko je uporabnik meni odprl globlje na strani. ---- */
@media (max-width: 760px) {
    .main-nav {
        bottom: auto;
        max-height: calc(100vh - var(--header-h) - 28px);
        overflow-y: auto;
        border-radius: 0 0 28px 28px;
        box-shadow: 0 24px 48px rgba(0, 20, 40, 0.28);
    }
    .main-nav .mobile-nav-only { display: block; }
    .mobile-nav-phone {
        display: flex;
        align-items: center;
        gap: 0.6em;
        padding: 1.1em 0 0.3em;
        font-weight: 700;
        color: var(--navy);
        border-bottom: none;
    }
    .mobile-nav-phone svg { width: 20px; height: 20px; color: var(--blue); }
    .mobile-nav-cta {
        display: flex;
        justify-content: center;
        margin-top: 1rem;
        width: 100%;
    }
    .nav-open .nav-toggle {
        background: rgba(255, 255, 255, 0.14);
        border-radius: 10px;
    }
}

/* ---- Hero - ker glava zdaj lebdi čez sliko (namesto da jo potisne
   navzdol), fotografija sega vse do samega vrha strani in je bazen dobro
   viden. Hero zdaj sega čez celoten prvi zaslon (100vh, kot pri referenci),
   statistika pa se izrazito prekriva čez spodnji rob slike. Uporabimo tako
   "vh" (širša podpora) kot "svh" (upošteva orodno vrstico brskalnika na
   mobilnem, da se hero ne "skoči" ob prikazu/skrivanju naslovne vrstice). */
/* "hero" in "hero-stats" (statistika) si delita natanko en zaslon: namesto
   da bi hero vedno zavzel 100vh (zaradi česar je statistiko včasih treba
   rahlo podrsati v vidno polje), sta oba znotraj skupnega flex vsebnika
   ".hero-viewport", ki je visok natanko toliko kot zaslon (100svh); hero
   se z "flex:1" razširi čez ves preostali prostor, ki ga statistika pod
   njim ne potrebuje. Tako je bazen viden skoraj čez cel zaslon IN
   statistika v celoti brez pomika navzdol - na vsaki višini zaslona. */
.hero-viewport {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    /* Hero fotografija se konča prej kot ta vsebnik (razlika je ravno
       prekrivanje statistike), zato je bil v tistem robu - ob straneh
       kartice, pod fotografijo - viden pas gole bele strani. Sivo ozadje
       tu poskrbi, da je namesto bele vedno vidna ista siva kot v razdelku
       "O nas" takoj za herotom - fotografijo popolnoma prekrije, saj je
       ta absolutno pozicionirana čez cel ".hero". */
    background: #eef1f3;
}
.hero {
    flex: 1 1 auto;
    min-height: 420px; /* varovalka na zelo nizkih zaslonih (npr. mobilna ležeča) */
    align-items: center; /* manj prostora nad naslovom, več pod gumbi */
}
.hero-content { padding-bottom: clamp(48px, 7vw, 84px); }
.hero h1 { max-width: 24ch; }
/* Povrne prvotno (večjo) velikost naslova samo na naslovnici - splošno
   pravilo ".hero h1" zgoraj je bilo zmanjšano za podstrani. Namerno
   scopano na ".hero-viewport .hero h1" (ne golo ".hero h1") - to pravilo
   je v razdelku, ki se sicer (znano) pušča tudi na podstrani, in bi ob
   goli ".hero h1" povozilo zmanjšano velikost tudi tam. */
.hero-viewport .hero h1 { font-size: clamp(2.4rem, 5vw + 1rem, 3.9rem); }
.hero-lede { max-width: 46ch; }
.hero-media img { object-position: center 72%; }
.hero-media::after {
    background:
        linear-gradient(180deg, rgba(0,20,40,0.5) 0%, rgba(0,20,40,0.14) 110px, rgba(0,20,40,0.02) 190px),
        linear-gradient(100deg, rgba(0,20,40,0.62) 0%, rgba(0,20,40,0.28) 42%, rgba(0,20,40,0.02) 68%),
        linear-gradient(0deg, rgba(0,20,40,0.5) 0%, rgba(0,20,40,0.02) 45%);
}
.hero-stats {
    flex-shrink: 0;
    margin-top: -76px;
}
@media (max-width: 760px) {
    /* Glava je na naslovnici "position:fixed" in lebdi čez fotografijo (ne
       zaseda prostora v toku), zato vsebino na mobilnem poravnamo na vrh in
       z zgornjim odmikom zagotovimo, da se vedno začne pod glavo, ne glede
       na to, koliko vrstic zavzame naslov (namesto prejšnjega
       "align-items:center", ki je pri daljšem besedilu potisnil vsebino
       previsoko, čez glavo). Odmik je zdaj še večji, da ima fotografija
       (in bazen na njej) več zraka nad naslovom. */
    /* Hero naj na mobilnem sega vse do dna zaslona (100svh) - namesto da si
       z "hero-stats" deli en sam zaslon (zaradi česar je bilo prej vse
       stlačeno). Kartice s številkami so manj pomembne kot sam bazen na
       fotografiji, zato se zdaj le rahlo prikažejo čez spodnji rob herota
       in postanejo v celoti vidne šele, ko uporabnik podrsa navzdol.
       Velja samo za naslovnico (".hero-viewport .hero") - na podstraneh
       (brez "hero-stats" pod herotom) ni razloga, da bi hero na mobilnem
       zavzel cel zaslon, zato tam obdrži običajno (krajšo) višino. */
    .hero-viewport .hero {
        flex: none;
        min-height: 100vh;
        min-height: 100svh;
        align-items: flex-start;
    }
    .hero-content {
        padding-top: calc(var(--header-h) + 40px);
        padding-bottom: clamp(72px, 18vw, 130px);
    }
    .hero-stats { margin-top: -36px; }
    .brand img { height: 40px; }
}

/* ---- O NAS - jasno siva podlaga (prejšnja "var(--bg-soft)" je #f5f9fb,
   kar je tako svetlo, da je od bele skoraj neločljivo - zato tu uporabimo
   isto, bolj izrazito sivo kot pri kvadratkih statistike. ---- */
.tint-sky {
    background: #eef1f3;
}

/* ---- Kvadratki s statistiko pod herotom - čisto bela podlaga, da so
   številke jasno izstopajo iz sive sekcije "O nas" pod njimi. ---- */
.stats-card { background: #fff; }

/* ---- ZAKAJ DESJOYAUX - namenoma belo ozadje (razdelek "O nas" pred njim
   je siv), da se razdelki na strani izmenjujejo bel/siv/bel ... ---- */
.section-white-bg { background: #fff; }

/* ---- ZAKAJ DESJOYAUX - kartice v barvi svojega poudarka ---- */
.tinted-cards .card.accent-teal { background: rgba(33,179,185,0.08); border-color: rgba(33,179,185,0.25); }
.tinted-cards .card.accent-coral { background: rgba(240,130,98,0.08); border-color: rgba(240,130,98,0.25); }
.tinted-cards .card.accent-sky { background: rgba(165,201,239,0.16); border-color: rgba(165,201,239,0.4); }
.tinted-cards .card.accent-lilac { background: rgba(211,162,202,0.12); border-color: rgba(211,162,202,0.35); }
.tinted-cards .card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tinted-cards .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tinted-cards article.card { background: #fff; }

/* ---- STORITVE - mavrični preliv dopolnilnih barv ---- */
.tint-rainbow {
    background: linear-gradient(120deg, rgba(33,179,185,0.1) 0%, rgba(165,201,239,0.12) 45%, rgba(211,162,202,0.12) 100%);
}

/* ---- POTEK SODELOVANJA - vsak korak svoja barva namesto enotne modre ---- */
.steps .step:nth-child(1) .step-num { background: var(--teal); }
.steps .step:nth-child(2) .step-num { background: var(--coral); }
.steps .step:nth-child(3) .step-num { background: #9c5f92; }
.steps .step:nth-child(4) .step-num { background: var(--blue); }

/* ---- Testimonial - velik "pull quote" (veliki narekovaji, značka vira
   mnenja) z barvnim ozadjem. Barva prekriva CELOTEN razdelek (od roba
   do roba), komentar stranke pa je edina vsebina na njej - brez
   ločene "kartice". ---- */
.testimonial-section {
    /* Temno modro ozadje - ista mornarsko modra kot ".section-navy" drugje
       na strani, z rahlim prelivom v temnejši odtenek za globino. */
    background: linear-gradient(135deg, var(--navy), var(--navy-dark));
    padding: clamp(56px, 8vw, 96px) 0;
}
.testimonial {
    position: relative;
    text-align: center;
    padding: 0 2.5rem;
    background: none;
    border-radius: 0;
}
.testimonial .quote-mark {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.4rem;
    line-height: 1;
    color: rgba(255,255,255,0.35);
    margin-bottom: -0.3rem;
}
.testimonial .stars { display: flex; justify-content: center; margin-bottom: 0.4rem; }
.testimonial .quote {
    font-style: normal;
    font-weight: 500;
    font-size: 1.2rem;
    line-height: 1.5;
    color: #fff;
    max-width: 620px;
    margin: 0 auto 0.9rem;
}
.testimonial .author-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.testimonial .source-badge {
    display: inline-block;
    background: #fff;
    color: var(--navy);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.35em 0.95em;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.testimonial .source-badge:hover,
.testimonial .source-badge:focus-visible {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ---- Več mnenj - prikaže se eno naenkrat, s puščicama za preklop
   (isti vzorec kot pri drsniku bazenov spodaj na strani). ---- */
.testimonial-slider { position: relative; }
.testimonial-slider .testimonial { display: none; }
.testimonial-slider .testimonial.is-active { display: block; }
.testimonial-slider-nav {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 0.8rem;
}
.testimonial-slider-arrow {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #fff;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.testimonial-slider-arrow:hover,
.testimonial-slider-arrow:focus-visible { opacity: 0.9; }
.testimonial-slider-prev svg { transform: scaleX(-1); }

/* ---- Referenčne kartice - tanek barvni rob namesto sivega ---- */
.ref-card-featured { box-shadow: 0 0 0 2px rgba(33,179,185,0.3), var(--shadow-sm); }
.ref-grid-row .ref-card:nth-child(1) { box-shadow: 0 0 0 2px rgba(240,130,98,0.3), var(--shadow-sm); }
.ref-grid-row .ref-card:nth-child(2) { box-shadow: 0 0 0 2px rgba(211,162,202,0.3), var(--shadow-sm); }
.ref-grid-row .ref-card:nth-child(3) { box-shadow: 0 0 0 2px rgba(165,201,239,0.4), var(--shadow-sm); }

/* ---- Foto pas - galerija bazenov pod komentarjem stranke, z naslovom
   "Bazen po meri" - drsnik, ki prikaže en bazen naenkrat. Širina sledi
   celotnemu (širšemu) okvirju strani, višina je fiksna (slika se po
   potrebi rahlo obreže - to ni težava). Stil bazena je v ločeni, beli
   kartici, ki rahlo prekriva desni rob slike, da je dobro viden. ---- */
.pool-slider {
    position: relative;
    margin: 0 auto;
}
.pool-slider-track {
    position: relative;
    height: 520px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: var(--bg-soft);
}
@media (max-width: 980px) {
    .pool-slider-track { height: 400px; }
}
@media (max-width: 760px) {
    .pool-slider-track { height: 300px; }
}
.pool-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}
.pool-slide.is-active {
    opacity: 1;
    visibility: visible;
}
.pool-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Kartica s stilom - ločena od slike (drsnikov "overflow:hidden" je ne
   obreže), rahlo prekriva spodnji desni rob fotografije. */
.pool-slider-caption {
    position: absolute;
    right: 28px;
    bottom: -22px;
    z-index: 3;
    max-width: 240px;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 1rem 1.3rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.pool-slider-caption.is-active { opacity: 1; visibility: visible; }
.pool-slide-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--coral);
    margin-bottom: 0.2rem;
}
.pool-slide-label {
    display: block;
    color: var(--navy);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
}
@media (max-width: 760px) {
    .pool-slider-caption { right: 14px; bottom: -16px; max-width: 190px; padding: 0.8rem 1rem; }
    .pool-slide-label { font-size: 0.94rem; }
}
.pool-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: var(--navy);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.pool-slider-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.pool-slider-prev { left: 12px; }
.pool-slider-next { right: 12px; }
.pool-slider-prev svg { transform: scaleX(-1); }

/* Več prostora pod galerijo, preden se začne zaobljeni rob naslednje
   (temno modre) sekcije - prej je bila prenizka, saj jo ta sekcija
   dodatno "povleče" navzgor (glej ".section-navy" spodaj). */
.photo-strip-section { padding-bottom: clamp(88px, 11vw, 150px); }

/* ---- Neskončni drsnik z referenčnimi fotografijami (za pristajalno
   stran) - vsaka kartica je ".ref-card" (glej razdelek "Reference /
   galerija" zgoraj - ista fotografija + preliv + napis lokacije/velikosti,
   ki jo uporablja že naslovnica), tu pa jih je hkrati vidnih več v vrsti.
   Premik izvaja JS prek dejanskega vodoravnega drsenja ("scrollLeft"/
   "scrollTo") na ".strip-track" (glej ".strip-slider" v main.js - kartice
   se v DOM-u podvojijo v 3 kopije za brezhibno neskončno zanko). Zavestno
   NE uporabljamo "transform: translateX" za premik: v testiranju se je
   izkazalo, da Chromium v določenih primerih kartic, ki so bile ob prvem
   izrisu strani zunaj vidnega (neraztegnjenega) dela vrstice, ne izriše
   pravilno, če jih kasneje premaknemo v vidno polje samo prek
   "transform" - slike ostanejo prazne, čeprav se v DOM-u in CSS vse
   izračuna pravilno. Pravo vodoravno drsenje te napake nima. Uporabniku
   je drsenje z miško/prstom onemogočeno ("overflow-x:hidden" spodaj) -
   edini način premika sta puščici. Puščici uporabita isti gumb kot
   ".pool-slider-arrow" zgoraj (enak izgled), ".strip-arrow" pa mu
   prepiše position/transform, ker tu stojita ob strani vrstice in ne
   prekrivata fotografije. ---- */
.strip-slider { display: flex; align-items: center; gap: 0.5rem; max-width: 1100px; margin: 0 auto; }
.strip-track {
    flex: 1;
    display: flex;
    gap: 1.2rem;
    overflow-x: hidden;
    padding: 0.3rem 0.15rem 0.8rem;
    scroll-behavior: auto;
}
.strip-item { flex: 0 0 auto; width: clamp(240px, 30vw, 340px); }
.strip-arrow { position: static; transform: none; flex-shrink: 0; }
.strip-arrow:hover { background: #fff; transform: scale(1.06); }
@media (max-width: 640px) {
    /* Na ozkih zaslonih naj bo vidna natanko ena kartica naenkrat (namesto
       ene cele + roba naslednje) - kartica zato zavzame celo širino
       ".strip-track", kar jo tudi precej poveča. */
    .strip-item { width: 100%; }
}

/* ---- ".section-navy" - namesto ravne temno modre barve ima zamegljeno
   fotografijo bazenske vode pod temno modrim prelivom (prej samo raven
   preliv/barva, kar je na dolgo progo delovalo preveč ponavljajoče/ploščato
   na vseh takih razdelkih po strani) - ista fotografija/preliv, ki je bil
   prej samo na "hero" razdelkih podstrani opreme (razred ".navy-gradient",
   zdaj združen sem, glej spodaj). Odstranjeni so tudi zgornji zaobljeni
   koti - razdelki se zdaj stikajo z ravnim robom. ---- */
.section-navy {
    position: relative;
    z-index: 2;
    background-image:
        linear-gradient(120deg, rgba(0,32,59,0.92) 0%, rgba(0,60,107,0.87) 48%, rgba(0,85,151,0.82) 100%),
        url("../images/hero-oprema-blur-1920.webp");
    background-size: cover;
    background-position: center;
}
@media (max-width: 760px) {
    .section-navy {
        background-image:
            linear-gradient(120deg, rgba(0,32,59,0.92) 0%, rgba(0,60,107,0.87) 48%, rgba(0,85,151,0.82) 100%),
            url("../images/hero-oprema-blur-960.webp");
    }
}
/* Noga strani ima zdaj isti preliv/fotografijo kot ".section-navy" (glej
   razdelek 9 zgoraj) namesto ravne barve, brez zaobljenih zgornjih kotov -
   enak vzrok kot pri ".section-navy" (prej preveč ponavljajoče/ploščato). */
.site-footer {
    position: relative;
    z-index: 2;
    background-image:
        linear-gradient(120deg, rgba(0,32,59,0.92) 0%, rgba(0,60,107,0.87) 48%, rgba(0,85,151,0.82) 100%),
        url("../images/hero-oprema-blur-1920.webp");
    background-size: cover;
    background-position: center;
}
@media (max-width: 760px) {
    .site-footer {
        background-image:
            linear-gradient(120deg, rgba(0,32,59,0.92) 0%, rgba(0,60,107,0.87) 48%, rgba(0,85,151,0.82) 100%),
            url("../images/hero-oprema-blur-960.webp");
    }
}

/* ---- KONTAKT - "kartica" (bel karton, senca, barvna črta na vrhu) je zdaj
   pri obrazcu namesto pri kontaktnih podatkih - podatki na levi so zdaj
   brez okvirja, kar bolje uravnoteži razdelek, saj je obrazec vizualno
   glavna akcija. ---- */
.contact-info-plain {
    background: none;
    color: var(--body);
    padding: 0;
    border-radius: 0;
}
.contact-info-plain h3 { color: var(--navy); }
.contact-info-plain a:not(.btn) { color: var(--blue); font-weight: 700; }
.contact-info-plain a:not(.btn):hover { color: var(--navy); }
/* .contact-info-card a{color:#fff} (style.css) je bilo napisano za prvotno
   temno modro kartico in bi na tej svetli različici pobarvalo besedilo
   gumbov (.btn-ghost) belo na skoraj beli podlagi - besedilo bi bilo
   nevidno. Za gumbe znotraj te kartice obnovimo pravo barvo .btn-ghost. */
.contact-info-plain a.btn-ghost,
.contact-info-plain a.btn-ghost:hover { color: var(--navy); }
.contact-form-card { display: block; }

/* Ikone v kontaktni kartici so podedovale rumeno barvo (namenjeno prvotni
   temno modri različici kartice) - na tej, beli različici so komaj vidne.
   Barvne "čipe" (ozadja) ohranimo, glif ikone pa obarvamo temno modro. */
.contact-info-plain .info-icon svg { color: var(--navy); }
/* Telefonska številka kot gumb namesto podčrtanega modrega besedila -
   enak "ghost" slog kot spodnji gumb za Google zemljevid. */
.contact-info-plain .btn-phone {
    padding: 0.55em 1.3em;
    min-height: auto;
    font-size: 1rem;
}

/* ===================================================================
   PODSTRANI (gradnja/obnova/oprema bazena) - skupne dodatne komponente.
   Dodano v isto skupno datoteko namesto ločenega CSS-ja po strani, da se
   te komponente lahko ponovno uporabijo na vseh prihodnjih podstraneh. */

/* Koraki s fotografijo (npr. "Potek gradnje") - fotografija se doda kar
   nad obstoječi ".step" (glej ".steps"/".steps-3" zgoraj), tako da koraki
   na strani "Kako pridete do bazena" (brez fotografij) ostanejo nespremenjeni.
   Velikost/senca/razmik so zdaj na ".img-hover" ovojnici - glej razdelek
   "hover" učinka na fotografijah spodaj. */
.step img { width: 100%; }
/* Obstoječi barvni utrip pokrije le prve 4 kartice (".steps" je bil prvotno
   zasnovan za 4 korake) - tu ga razširimo na do 9 korakov. */
.steps .step:nth-child(5) .step-num { background: var(--teal); }
.steps .step:nth-child(6) .step-num { background: var(--coral); }
.steps .step:nth-child(7) .step-num { background: #9c5f92; }
.steps .step:nth-child(8) .step-num { background: var(--blue); }
.steps .step:nth-child(9) .step-num { background: var(--navy-dark); }

/* Seznam s kljukicami (npr. "Kaj potrebujete pred gradnjo") */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.check-list li { display: flex; align-items: flex-start; gap: 0.7rem; }
.check-list svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--teal); margin-top: 3px; }

/* Vgrajen odziven YouTube video v ležečem 16:9 razmerju */
.yt-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #000;
}
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Pokončen (9:16) vgrajen YouTube video brez okvirja telefona - npr.
   dodaten video ob "Poteku gradnje". Brez črnega "phone-frame" okvirja,
   samo zaobljeni robovi in senca, da posnetek ostane v pokončnem formatu. */
.yt-embed-vertical {
    position: relative;
    width: min(320px, 80vw);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: #000;
}
.yt-embed-vertical iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* YouTube "ob kliku" (facade) - namesto takojšnjega iframa (~1 MB YouTube
   kode na video) je prikazana le sličica z gumbom; pravi video se naloži
   šele ob kliku (glej main.js - ".yt-facade"). Deluje v obeh ovojnicah,
   .yt-embed (16:9) in .yt-embed-vertical (9:16) - "object-fit: cover"
   obreže črne robove YouTube sličice (ta je vedno 4:3). */
.yt-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #0d1b26;
    cursor: pointer;
    display: block;
}
.yt-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease, opacity 0.25s ease;
}
.yt-facade:hover img { transform: scale(1.03); opacity: 0.92; }
.yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.2s ease, background 0.2s ease;
}
.yt-play svg { width: 30px; height: 30px; margin-left: 4px; }
.yt-facade:hover .yt-play,
.yt-facade:focus-visible .yt-play { transform: scale(1.08); background: var(--blue); }
.yt-facade:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
    .yt-facade img, .yt-play { transition: none; }
}

/* Rahel "hover" približevalni učinek na fotografijah, da stran ni videti
   tako statična. Slika je zavita v to ovojnico (ne učinek kar na <img>),
   da zaobljeni robovi ostanejo lepo obrezani tudi med povečavo - enak
   pristop kot pri ".ref-card"/".ref-card img" zgoraj. */
.img-hover { overflow: hidden; border-radius: var(--radius-md); }
.img-hover img { display: block; width: 100%; height: 100%; transition: transform 0.45s ease; }
.img-hover:hover img { transform: scale(1.055); }
@media (prefers-reduced-motion: reduce) {
    .img-hover img { transition: none; }
}
/* Koraki ("Potek gradnje") - fotografija je znotraj ".img-hover", zato se
   razmik, senca in razmerje stranic zdaj postavijo na ovojnico, ne na
   samo <img> (ki znotraj nje preprosto zapolni ves prostor). */
.step .img-hover {
    aspect-ratio: 4 / 3;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
}
.step .img-hover img { height: 100%; object-fit: cover; }

/* ---- "Časovnica" - dejanska časovnica namesto 3 enakovrednih kartic/ikon:
   dve zaporedni fazi, povezani s črto (jasen vrstni red "najprej to, nato
   to"), s polnim, dobro vidnim barvnim krogom (ne bledim odtenkom, ki se
   je na svetlem ozadju slabo videl). Seštevek "Skupaj" je ločen, vizualno
   drugačen trak pod njima, da je jasno razviden kot VSOTA prejšnjih dveh,
   ne kot tretja, enakovredna postavka. */
.timeline-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    max-width: 640px;
    margin: 0 auto;
}
.timeline-stop { flex: 1 1 0; max-width: 240px; text-align: center; }
.timeline-dot {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: var(--shadow-sm);
}
.timeline-dot svg { width: 26px; height: 26px; }
.timeline-dot-order { background: var(--teal); }
.timeline-dot-build { background: var(--coral); }
.timeline-duration { font-weight: 700; color: var(--navy); font-size: 1.05rem; margin: 0 0 0.3rem; }
.timeline-stop h3 { margin-bottom: 0.35rem; }
.timeline-stop p:last-child { color: var(--muted); margin: 0; }
/* Pikčasta povezovalna črta s puščico med koraki - samo v vodoravni
   (namizni/tablet) postavitvi; na mobilnem se koraki zložijo pod sabo,
   kjer je vrstni red že sam po sebi razviden. */
.timeline-connector {
    flex: 0 0 auto;
    width: clamp(32px, 7vw, 88px);
    height: 2px;
    margin-top: 29px;
    background-image: repeating-linear-gradient(to right, var(--line) 0 6px, transparent 6px 12px);
    position: relative;
}
.timeline-connector::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-style: solid;
    border-width: 5px 0 5px 7px;
    border-color: transparent transparent transparent var(--line);
}
@media (max-width: 700px) {
    .timeline-track { flex-direction: column; align-items: center; gap: 2.2rem; }
    .timeline-connector { display: none; }
}
/* Ločen, poudarjen trak s seštevkom pod časovnico. */
.timeline-total {
    max-width: 560px;
    margin: 2.2rem auto 0;
    background: rgba(33,179,185,0.1);
    border: 1px solid rgba(33,179,185,0.3);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    text-align: center;
    flex-wrap: wrap;
}
.timeline-total-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--teal);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-total-icon svg { width: 18px; height: 18px; }
.timeline-total span:last-child { color: var(--navy); }

/* ---- Čez celo širino segajoč temno moder "zaupanja vreden" pas (npr.
   "Gradnja v dveh fazah" pod Časovnico) - velika okrogla ikona ob strani,
   seznam s kljukicami zraven - po istem zgledu kot zgornji ikonski koraki. ---- */
.trust-banner {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    flex-wrap: wrap;
}
.trust-banner-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-banner-icon svg { width: 30px; height: 30px; }
.trust-banner-body { flex: 1 1 320px; }
.trust-banner-body .eyebrow { margin-bottom: 0.6rem; }
.trust-banner-body h3 { margin-bottom: 0.6rem; }
.trust-banner-lede { margin: 0; color: rgba(255,255,255,0.85); }
.trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem 2rem;
}
.trust-list li { display: flex; align-items: center; gap: 0.65rem; }
.trust-list .check-badge {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--yellow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-list .check-badge svg { width: 13px; height: 13px; color: var(--navy); }
@media (max-width: 640px) {
    .trust-list { grid-template-columns: 1fr; }
}

/* ---- Velika okrogla značka s kljukico - za zahvalno stran po oddaji
   obrazca (isti "kljukica v krogu" vzorec kot ".check-badge" zgoraj, le
   večji in samostojen, ne le znotraj ".trust-list"). ---- */
.success-badge {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
}
.success-badge svg { width: 34px; height: 34px; color: #fff; }

/* .check-list-2col - dvostolpčna razporeditev za .check-list, ko sekcija
   nima slike in bi bil en sam stolpec preveč raztegnjen po širini. */
.check-list-2col { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 2rem; }
@media (max-width: 640px) {
    .check-list-2col { grid-template-columns: 1fr; }
}

/* ---- .check-list-rows - eno vprašanje/pogoj na vrstico, ločeno s tanko
   črto, ikona "sparkle" namesto kljukice v krogcu (glej ".check-list"
   zgoraj za to varianto) - za pristajalno stran, levo poravnano. ---- */
.check-list-rows { list-style: none; margin: 0; padding: 0; text-align: left; }
.check-list-rows li {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--line);
}
.check-list-rows li:last-child { border-bottom: none; }
.check-list-rows svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--teal); margin-top: 2px; }

/* .card-media - fotografija na vrhu kartice (namesto ikone), raztegnjena
   čez celo širino kartice (izven .card paddinga) z zaobljenimi zgornjimi
   robovi - za kartice izdelkov (npr. bazenska oprema). */
.card-media {
    margin: -1.8rem -1.8rem 1.2rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
}
.card-media img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.35s ease; }
/* Ob hoverju nad celo kartico se fotografija rahlo približa (isti pristop
   kot pri ".ref-card"/".ref-card img" zgoraj). */
.card:hover .card-media img { transform: scale(1.06); }

/* ---------- 15) Zavihki brez JS (.spec-tabs) ----------
   Izbira modela naprave (npr. "Specifikacije po modelu" pri bazenski opremi)
   - deluje samo s CSS prek skritih radio gumbov, brez JavaScripta, skladno
   z ostalo stranjo (glej npr. kontaktni obrazec, ki tudi deluje brez JS-ja).
   Oznaka (.tab-btn) je "label" za pripadajoči radio, plošča (.tab-panel) pa
   se prikaže prek ":checked ~" - zato morajo biti radio gumbi, oznake IN
   plošče neposredni "sibling" elementi znotraj .spec-tabs (brez vmesnega
   ovijalnega diva), da splošni "~" izbirnik deluje. */
.spec-tabs input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.spec-tabs .tab-btn {
    display: inline-block;
    margin: 0 0.7rem 0.9rem 0;
    padding: 1rem 2rem;
    border-radius: 999px;
    border: 2px solid var(--line);
    background: #fff;
    color: var(--body);
    font-weight: 700;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.spec-tabs .tab-btn:hover { border-color: var(--blue); color: var(--blue); }
.spec-tabs input:checked + .tab-btn { background: var(--navy); border-color: var(--navy); color: #fff; }
/* .tab-panel - lastni "box" okoli tabele (glej ".card" zgoraj za enak izgled) */
.spec-tabs .tab-panel {
    display: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.8rem 2rem;
    box-shadow: var(--shadow-sm);
}
/* Vsak radio prikaže SVOJO ploščo (id-based par, glej HTML komentar zgoraj) */
#tab-30:checked ~ #panel-30,
#tab-50:checked ~ #panel-50,
#tab-60:checked ~ #panel-60,
#tab-90:checked ~ #panel-90,
#tab-110:checked ~ #panel-110 { display: block; }

/* .spec-table - dvostolpčna tabela specifikacij (oznaka / vrednost) */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th, .spec-table td {
    text-align: left;
    padding: 0.8rem 0.9rem 0.8rem 0.5rem;
    border-bottom: 1px solid var(--line);
    font-weight: 400;
}
.spec-table th { color: var(--muted); width: 55%; font-size: 0.95rem; border-right: 1px solid var(--line); }
.spec-table td { color: var(--ink); font-weight: 600; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; }

/* .spec-list - dvostolpčni seznam specifikacij (oznaka / vrednost) brez
   HTML tabele - vsaka vrstica je "dl > div.spec-item > dt + dd", na ozkih
   zaslonih se sklada v en stolpec. */
.spec-list { display: flex; flex-direction: column; margin: 0; }
.spec-item {
    display: grid;
    grid-template-columns: minmax(180px, 40%) 1fr;
    gap: 0.3rem 1.5rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.spec-item:last-child { border-bottom: none; }
.spec-item dt { margin: 0; color: var(--muted); font-size: 0.95rem; }
.spec-item dd { margin: 0; color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
    .spec-item { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* .compare-table - primerjalna tabela z več stolpci (npr. stopnje sistema
   drug ob drugem) - v svojem "boxu" (glej ".spec-tabs .tab-panel" zgoraj za
   enak vzorec) in zaviti v ".table-scroll" za vodoravno drsenje na ozkih
   zaslonih, ker se - za razliko od ".spec-table" - vsebina ne more skrčiti
   na 1 stolpec. */
.compare-table-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.compare-table th, .compare-table td {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    text-align: left;
}
.compare-table th:last-child, .compare-table td:last-child { border-right: none; }
.compare-table thead tr { background: var(--bg-soft); }
.compare-table thead th { color: var(--navy); font-size: 0.95rem; }
.compare-table tbody th { color: var(--body); font-weight: 600; white-space: nowrap; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .val-yes { color: var(--ok); font-weight: 700; }
.compare-table .val-no { color: var(--muted); opacity: 0.55; }

/* .compare-table na ozkih zaslonih (telefon) - vodoravno drsenje je na
   zelo ozkem zaslonu (320-390px) skrilo del stolpcev izven prve "strani",
   zato tabela ni bila 100% vidna brez drsenja. Namesto tega se pod 760px
   vsaka vrstica sesuje v svojo "kartico": ime lastnosti postane naslov,
   trije stolpci (JD Salt Plus / + pH / + pH + Redox ...) pa se prikažejo
   pod njim, vsak s svojo oznako (iz "data-label" na <td>, glej HTML) -
   glava tabele (thead) ostane v izvorni kodi zaradi dostopnosti/SEO, a je
   vizualno skrita, ker njeno vlogo prevzamejo te oznake. */
@media (max-width: 760px) {
    .table-scroll { overflow-x: visible; }
    .compare-table { min-width: 0; }
    .compare-table thead {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        white-space: nowrap;
        border: 0;
    }
    .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td {
        display: block;
        width: 100%;
        border-right: none;
    }
    .compare-table tbody tr {
        padding: 1.1rem 1.2rem;
        border-bottom: 1px solid var(--line);
    }
    .compare-table tbody tr:last-child { border-bottom: none; }
    .compare-table tbody th {
        padding: 0 0 0.7rem;
        text-align: left;
        border-bottom: none;
    }
    .compare-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.4rem 0;
        border-bottom: none;
        text-align: left;
    }
    .compare-table tbody td::before {
        content: attr(data-label);
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--muted);
    }
}

/* ---------- 16) Podstrani bazenske opreme - dodatne komponente ---------- */

/* (".navy-gradient" - preliv/fotografija za ozadje ".section-navy" - je bil
   tu, zdaj pa je združen neposredno v ".section-navy" (glej razdelek 9
   zgoraj), ker ga zdaj uporabljajo vsi taki razdelki po strani, ne le
   "hero" na podstraneh opreme.) */

/* .icon-tile - velik pobarvan kvadrat z ikono na sredini, enakega razmerja
   stranic (4:3) kot sosednja fotografija v ".img-hover" - kadar prava
   fotografija (še) ni na voljo (glej "Podvodna izvedba" pri Avtomatski
   roleti), da sta oba bloka v mreži vizualno enako visoka. */
.icon-tile {
    aspect-ratio: 4/3;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-tile svg { width: 64px; height: 64px; }

/* =========================================================
   PRISTAJALNA STRAN ZA OGLASE (/obrazec-desjoyaux-bazeni-slovenija/)
   Uporablja iste razrede kot ostala stran (.hero, .check-list-rows,
   .stats-card, .ref-grid, .tinted-cards, .testimonial-slider,
   .contact-wrap, .field, .faq-item ...). Tu so le deli, ki jih druge
   strani nimajo: glava brez menija, video v uvodu, sezonski izračun,
   obrazec v dveh korakih, izbire s kliki in lepljiva vrstica na telefonu.
   ========================================================= */

/* Glava brez menija - ne sledi pomikanju (ena stran, en cilj) */
.site-header.lp-header { position: absolute; }
.lp-header .container { display: flex; align-items: center; justify-content: space-between; }

/* Video v uvodu: prelije se čez sliko, ko se začne predvajati */
.hero-media video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.8s ease;
}
.hero-media video.is-playing { opacity: 1; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.lp-hero .hero-media img { object-position: center; }

/* Kratka vrstica pod gumbi (nujnost na podlagi resničnih dejstev) */
.lp-note {
    display: flex; align-items: center; gap: 0.6em;
    margin-top: 1rem; font-size: 0.95rem; color: var(--muted);
}
.hero .lp-note, .section-navy .lp-note { color: rgba(255,255,255,0.85); }
.lp-note::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--coral); animation: lpPulse 2s infinite;
}
@keyframes lpPulse {
    0% { box-shadow: 0 0 0 0 rgba(240,130,98,0.55); }
    70% { box-shadow: 0 0 0 9px rgba(240,130,98,0); }
    100% { box-shadow: 0 0 0 0 rgba(240,130,98,0); }
}
.lp-lead { font-size: 1.15rem; color: var(--ink); }
.lp-lead strong { color: var(--navy); }
.check-list-rows.lp-big li { font-size: 1.08rem; color: var(--ink); }

/* Številke - pas z modrim prelivom strani (.section-navy) */
.lp-stats-band { padding: clamp(30px, 4vw, 44px) 0; }
.lp-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.lp-stat strong { display: block; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.05; color: #fff; font-weight: 700; }
.lp-stat span { display: block; margin-top: 0.45rem; font-size: 0.9rem; line-height: 1.35; color: rgba(255,255,255,0.75); }

/* Reference - drsnik s prstom (scroll-snap, brez JS) */
.lp-ref-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 14px) / 3);
    gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lp-ref-track::-webkit-scrollbar { display: none; }
.lp-ref { margin: 0; position: relative; scroll-snap-align: start; border-radius: var(--radius-md); overflow: hidden; background: var(--line); box-shadow: var(--shadow-sm); }
.lp-ref img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.45s ease; }
.lp-ref:hover img { transform: scale(1.04); }
.lp-ref figcaption {
    position: absolute; left: 12px; bottom: 12px;
    background: rgba(0,32,59,0.8); color: rgba(255,255,255,0.88);
    padding: 0.45em 0.95em; border-radius: 999px; font-size: 0.88rem;
}
.lp-ref figcaption b { color: #fff; }
.lp-swipe { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0; font-size: 0.9rem; color: var(--muted); }
.lp-swipe svg { width: 18px; height: 18px; }

/* Sezonski izračun */
.lp-season { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.lp-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.lp-month {
    font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700;
    min-height: 48px; border-radius: var(--radius-sm);
    background: #fff; color: var(--navy);
    border: 1.5px solid var(--line); cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.04em;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lp-month:hover { border-color: var(--blue); }
.lp-month[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.lp-season-card {
    background: var(--navy);
    background-image: linear-gradient(120deg, rgba(0,32,59,0.95) 0%, rgba(0,60,107,0.9) 55%, rgba(0,85,151,0.88) 100%);
    color: rgba(255,255,255,0.9);
    border-radius: var(--radius-lg); padding: 2rem;
    display: grid; gap: 1rem; box-shadow: var(--shadow-md);
}
.lp-season-card .eyebrow { color: var(--sky); background: rgba(255,255,255,0.14); margin: 0; justify-self: start; }
.lp-season-title { font-size: 1.45rem; line-height: 1.25; font-weight: 700; color: #fff; }
.lp-weeks { display: grid; grid-template-columns: repeat(17, 1fr); gap: 4px; }
.lp-weeks-ends { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.75); margin-bottom: -0.4rem; }
.lp-week { height: 24px; border-radius: 5px; background: rgba(255,255,255,0.14); transition: background 0.25s ease; }
.lp-week.on { background: var(--yellow); }
.lp-weeks-label { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
.lp-weeks-label b { color: #fff; font-size: 1rem; }
.lp-season-range { margin: -0.4rem 0 0; font-size: 0.82rem; color: rgba(255,255,255,0.6); }
.lp-foot { font-size: 0.82rem; color: var(--muted); margin-top: 0.9rem; }

/* Kartice "Česa pri nas ne boste doživeli" - prečrtana težava nad naslovom */
.lp-no {
    font-size: 0.9rem; color: var(--muted); margin-bottom: 0.4rem;
    text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px;
}

/* Cena kot filter */
.lp-price {
    background: var(--blue-light); border-radius: var(--radius-lg);
    padding: 1.8rem 2rem; margin-bottom: 2.5rem;
}
.lp-price-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); }
.lp-price-value { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 700; color: var(--navy); line-height: 1.1; margin: 0.3rem 0 0.6rem; font-variant-numeric: tabular-nums; }
.steps.lp-steps-3 { grid-template-columns: repeat(3, 1fr); }

/* Obrazec v dveh korakih */
.lp-offer { list-style: none; margin: 1.4rem 0 1.6rem; padding: 0; display: grid; gap: 0.9rem; }
.lp-offer li { display: flex; gap: 0.8rem; align-items: flex-start; color: var(--ink); }
.lp-offer svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--teal); margin-top: 1px; }
.lp-progress { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.4rem; font-size: 0.85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-progress .track { flex: 1; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.lp-progress .track span { display: block; height: 100%; width: 50%; background: var(--blue); border-radius: 99px; transition: width 0.35s ease; }
[data-step="2"] .lp-progress .track span { width: 100%; }
.lp-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.1rem; }
.lp-fs legend { padding: 0; margin-bottom: 0.3rem; font-weight: 700; text-transform: uppercase; color: var(--navy); font-size: 1.15rem; }
.lp-hint { margin: -0.6rem 0 0.2rem; font-size: 0.9rem; color: var(--muted); }
.js [data-step="1"] .lp-fs-2, .js [data-step="2"] .lp-fs-1 { display: none; }
.field .lbl { font-weight: 700; font-size: 0.92rem; color: var(--navy); }
.field .opt { font-weight: 400; color: var(--muted); }
.lp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lp-chip { position: relative; }
.lp-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lp-chip span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1em;
    border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
    font-size: 0.95rem; color: var(--ink); cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.lp-chip input:checked + span { border-color: var(--navy); background: var(--blue-light); color: var(--navy); font-weight: 700; }
.lp-chip input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.checkbox-row.has-error { color: var(--error); }
.lp-back { font: inherit; font-size: 0.92rem; background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0.5rem; justify-self: center; }
.lp-under { margin-top: 1rem; text-align: center; font-size: 0.9rem; color: var(--muted); }

/* Lepljiva vrstica (telefon, tablica) */
.lp-sticky { display: none; }
@media (max-width: 980px) {
    .has-sticky .site-footer { padding-bottom: calc(2rem + 76px + env(safe-area-inset-bottom, 0px)); }
    .lp-sticky {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
        display: flex; gap: 0.6rem; align-items: center;
        padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,0.97); border-top: 1px solid var(--line);
        box-shadow: 0 -6px 24px rgba(28,43,54,0.08);
        transform: translateY(110%); transition: transform 0.3s ease;
    }
    .lp-sticky.show { transform: none; }
    .lp-sticky .btn { flex: 1; min-height: 50px; }
    .lp-sticky-call {
        width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--blue-light); color: var(--navy);
    }
    .lp-sticky-call svg { width: 22px; height: 22px; }
    .lp-season { grid-template-columns: 1fr; gap: 1.8rem; }
    .lp-ref-track { grid-auto-columns: 46%; }
}
@media (max-width: 760px) {
    .lp-months { grid-template-columns: repeat(4, 1fr); }
    .lp-stats-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
    .lp-form .form-row { grid-template-columns: 1fr; }
    .lp-ref-track { grid-auto-columns: 84%; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); }
    .steps.lp-steps-3 { grid-template-columns: 1fr; }
    .lp-season-card { padding: 1.6rem 1.4rem; }
    .lp-price { padding: 1.5rem 1.4rem; }
    .lp-hero .hero-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-note::before { animation: none; }
    .hero-media video { display: none; }
}

/* Obrazec v dveh korakih: ob preklopu koraka se kartica pomakne na vrh -
   pusti prostor za fiksno glavo strani. */
.contact-form-card[data-step] { scroll-margin-top: calc(var(--header-h, 72px) + 16px); }

/* ---------- Kalkulator prostornine bazena (/gradbeno-dovoljenje-za-bazen/) ---------- */
.calc { display: grid; grid-template-columns: 1.05fr 1fr; gap: 2rem; align-items: start; }
.calc-input { display: grid; gap: 1.1rem; }
.calc-input h2 { margin-bottom: 0; }
.calc-input .form-row { grid-template-columns: 1fr 1fr; }
.calc-input input[type="number"] { font-size: 1.15rem; font-weight: 700; color: var(--navy); }
.calc-bottoms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.calc-bottom { position: relative; cursor: pointer; }
.calc-bottom input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.calc-bottom-card {
    display: grid; gap: 0.25rem; height: 100%;
    padding: 0.8rem 0.75rem 0.9rem;
    border: 2px solid var(--line); border-radius: var(--radius-md);
    background: #fff; transition: border-color 0.2s ease, background 0.2s ease;
}
.calc-bottom-card svg { width: 100%; height: auto; margin-bottom: 0.3rem; }
.calc-bottom-card path { fill: var(--blue-light); stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.calc-bottom-card b { color: var(--navy); font-size: 0.9rem; line-height: 1.25; }
.calc-bottom-card small { color: var(--muted); font-size: 0.82rem; }
.calc-bottom:hover .calc-bottom-card { border-color: var(--sky); }
.calc-bottom input:checked + .calc-bottom-card { border-color: var(--navy); background: var(--blue-light); }
.calc-bottom input:checked + .calc-bottom-card path { fill: var(--teal-light); }
.calc-bottom input:focus-visible + .calc-bottom-card { outline: 3px solid var(--yellow); outline-offset: 2px; }
.calc-note { font-size: 0.9rem; color: var(--muted); margin: 0; }

.calc-result {
    display: grid; gap: 1.1rem;
    padding: 1.6rem;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.calc-volumes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.calc-volumes > div { display: grid; align-content: start; gap: 0.2rem; }
.calc-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.calc-big { font-size: clamp(2.2rem, 6vw, 3rem); line-height: 1.05; color: var(--navy); font-weight: 700; }
.calc-mid { font-size: clamp(1.5rem, 4vw, 1.9rem); line-height: 1.15; color: var(--navy); font-weight: 700; }
.calc-volumes small { color: var(--muted); font-size: 0.88rem; }
.calc-permit {
    display: grid; gap: 0.35rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-md);
    border-left: 5px solid var(--ok);
    background: #fff;
}
.calc-permit b { font-size: 1.05rem; color: var(--ink); }
.calc-permit span { font-size: 0.93rem; }
.calc-permit.is-ok { border-left-color: var(--ok); }
.calc-permit.is-ok b { color: #146c3c; }
.calc-permit.is-mid { border-left-color: var(--coral); }
.calc-permit.is-mid b { color: #a3402a; }
.calc-permit.is-hi { border-left-color: var(--error); }
.calc-permit.is-hi b { color: #a02f24; }
.calc-list { list-style: none; margin: 0; padding: 0; display: grid; }
.calc-list li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 0.6rem 0; border-bottom: 1px solid var(--line);
}
.calc-list li:last-child { border-bottom: none; }
.calc-list li > span, .calc-list li > a { font-size: 0.9rem; color: var(--muted); flex-shrink: 0; }
.calc-list li > a { color: var(--blue); }
.calc-list b { color: var(--navy); text-align: right; font-size: 0.95rem; }
.calc-foot { font-size: 0.83rem; color: var(--muted); margin: 0; }
.calc-tag {
    display: inline-block; margin: 0 0 0.6rem;
    padding: 0.25rem 0.7rem; border-radius: 999px;
    font-size: 0.82rem; font-weight: 700;
}
.calc-tag-ok { background: rgba(31, 157, 85, 0.12); color: #146c3c; }
.calc-tag-mid { background: rgba(240, 130, 98, 0.16); color: #a3402a; }
.calc-tag-hi { background: rgba(192, 57, 43, 0.12); color: #a02f24; }
@media (max-width: 900px) {
    .calc { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .calc-bottoms { grid-template-columns: 1fr; }
    .calc-bottom-card { grid-template-columns: 84px 1fr; column-gap: 0.8rem; align-items: center; }
    .calc-bottom-card svg { grid-row: span 2; margin: 0; }
    .calc-result { padding: 1.2rem; }
    .calc-list li { flex-direction: column; gap: 0.15rem; }
    .calc-list b { text-align: left; }
}
.calc-teaser {
    display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center;
    padding: 2rem; border-radius: var(--radius-lg);
    background: var(--bg-soft); border: 1px solid var(--line);
}
.calc-teaser h2 { margin-bottom: 0.6rem; }
.calc-teaser .btn { margin-top: 0.6rem; }
.calc-teaser-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.calc-teaser-list li { display: grid; gap: 0.1rem; background: #fff; border-radius: var(--radius-md); padding: 0.9rem 1rem; box-shadow: var(--shadow-sm); }
.calc-teaser-list .calc-tag { margin: 0; justify-self: start; }
.calc-teaser-list li > span:last-child { font-weight: 600; color: var(--ink); font-size: 0.95rem; }
@media (max-width: 800px) {
    .calc-teaser { grid-template-columns: 1fr; padding: 1.4rem; }
}
.calc-input > .eyebrow { justify-self: start; }

/* ---------- Pomočnik za težave z vodo (/tezave-z-vodo-v-bazenu/) ---------- */
.wt { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 2rem; align-items: start; }
.wt-input { display: grid; gap: 1.2rem; }
.wt-box {
    position: relative; display: grid; gap: 1rem;
    padding: 1.4rem 1.4rem 1.5rem;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: #fff; box-shadow: var(--shadow-sm);
}
.wt-box h2 { font-size: 1.25rem; margin: 0; padding-left: 2.6rem; min-height: 2rem; display: flex; align-items: center; }
.wt-box h2 .opt { font-size: 0.85rem; font-weight: 500; color: var(--muted); text-transform: none; margin-left: 0.4rem; }
.wt-step {
    position: absolute; top: 1.4rem; left: 1.4rem; margin: 0;
    width: 2rem; height: 2rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--navy); color: #fff; font-weight: 700; font-size: 0.95rem;
}
.wt-box .form-row { grid-template-columns: 1fr 1fr; }
.wt-box .field[hidden] { display: none; }
.wt-vol { margin: 0; padding: 0.8rem 1rem; border-radius: var(--radius-md); background: var(--blue-light); color: var(--navy); }
.wt-vol b { font-size: 1.15rem; }
.wt-hint { margin: 0; font-size: 0.9rem; color: var(--muted); }
.wt-problems { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.wt-problem { position: relative; cursor: pointer; }
.wt-problem input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wt-problem span {
    display: flex; align-items: center; gap: 0.6rem; height: 100%;
    padding: 0.7rem 0.8rem; border: 2px solid var(--line); border-radius: var(--radius-md);
    font-weight: 600; font-size: 0.92rem; color: var(--ink); line-height: 1.25;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wt-problem i { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; border-radius: 50%; }
.wt-problem:hover span { border-color: var(--sky); }
.wt-problem input:checked + span { border-color: var(--navy); background: var(--blue-light); color: var(--navy); }
.wt-problem input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }

.wt-result {
    padding: 1.6rem; border-radius: var(--radius-lg);
    background: var(--bg-soft); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
    scroll-margin-top: calc(var(--header-h) + 1rem);
}
.wt-result h2 { margin-bottom: 0.6rem; }
.wt-empty p:last-child { margin-bottom: 0; }
.wt-cause { padding: 0.9rem 1rem; background: #fff; border-radius: var(--radius-md); border-left: 5px solid var(--coral); font-size: 0.95rem; }
.wt-steps { list-style: none; counter-reset: wt; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.9rem; }
.wt-steps > li { counter-increment: wt; position: relative; padding-left: 2.4rem; }
.wt-steps > li::before {
    content: counter(wt); position: absolute; left: 0; top: 0.05rem;
    width: 1.7rem; height: 1.7rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--teal); color: #fff; font-weight: 700; font-size: 0.85rem;
}
.wt-steps > li > p { margin: 0; }
.wt-prod {
    display: flex; gap: 0.9rem; align-items: center;
    padding: 0.7rem 0.9rem 0.7rem 0.7rem; margin-bottom: 0.6rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md);
}
.wt-prod img { flex: 0 0 auto; width: 76px; height: 76px; object-fit: contain; border-radius: 12px; background: #fff; }
.wt-prod > div { display: grid; gap: 0.1rem; min-width: 0; }
.wt-prod-noimg { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 12px; border: 2px dashed #b9c4cc; background: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.72rem; font-weight: 700; line-height: 1.2; color: var(--muted); padding: 0.3rem; }
.wt-prod-name { font-weight: 700; color: var(--navy); font-size: 0.98rem; line-height: 1.25; }
.wt-prod-pack { font-size: 0.8rem; color: var(--muted); }
.wt-prod-amt { font-size: 1.25rem; color: var(--ink); line-height: 1.2; margin-top: 0.15rem; }
.wt-advice { margin: 0; font-weight: 600; color: var(--ink); font-size: 0.98rem; }
.wt-how { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--body); }
.wt-how-note { color: var(--muted); }
.wt-shop { margin-top: 1.4rem; padding: 1.1rem 1.1rem 1rem; background: #fff; border: 2px solid var(--navy); border-radius: var(--radius-md); }
.wt-shop-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.wt-shop-head h3 { margin: 0; font-size: 1.1rem; }
.wt-shop-head .btn { padding: 0.55rem 1rem; font-size: 0.88rem; }
.wt-shop ul { list-style: none; margin: 0; padding: 0; display: grid; }
.wt-shop li { display: flex; gap: 0.7rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.wt-shop li:last-child { border-bottom: none; }
.wt-shop li img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 auto; }
.wt-shop li span { display: grid; font-size: 0.95rem; }
.wt-shop li b { color: var(--navy); margin-right: 0.2rem; }
.wt-shop li small { color: var(--muted); font-size: 0.82rem; }
.wt-shop-foot { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }
.wt-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.wt-pcard { display: grid; align-content: start; gap: 0.35rem; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.wt-pcard img { width: 100%; max-width: 150px; height: auto; aspect-ratio: 1; object-fit: contain; justify-self: center; margin-bottom: 0.4rem; }
.wt-pcard h3 { font-size: 0.98rem; line-height: 1.3; margin: 0; text-transform: none; letter-spacing: 0; }
.wt-pcard p { margin: 0; font-size: 0.86rem; }
.wt-pcard-pack { color: var(--teal); font-weight: 700; font-size: 0.82rem !important; }
@media (max-width: 480px) {
    .wt-pgrid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
    .wt-pcard { padding: 0.8rem; }
    .wt-prod img, .wt-prod-noimg { width: 64px; height: 64px; }
}
.wt-warn { margin-top: 1.3rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: #fff4e5; border: 1px solid #f6d7a8; }
.wt-warn b { color: #9a5a00; }
.wt-warn p { margin: 0.3rem 0 0; font-size: 0.88rem; }
.wt-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.wt-cards .card h3 { margin-bottom: 0.6rem; }
.wt-cards .card p { font-size: 0.95rem; }
.wt-cards .card p:last-child { margin-bottom: 0; }
.wt-cards > .card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .wt { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .wt-problems { grid-template-columns: 1fr; }
    .wt-box, .wt-result { padding: 1.2rem; }
    .wt-step { top: 1.2rem; left: 1.2rem; }
}
.wt-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.wt-shape { position: relative; cursor: pointer; }
.wt-shape input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wt-shape span {
    display: grid; justify-items: center; gap: 0.35rem; height: 100%;
    padding: 0.7rem 0.4rem 0.6rem; text-align: center;
    border: 2px solid var(--line); border-radius: var(--radius-md);
    font-weight: 600; font-size: 0.86rem; color: var(--ink); line-height: 1.2;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.wt-shape svg { width: 64px; height: 40px; }
.wt-shape svg rect, .wt-shape svg circle, .wt-shape svg > path:not(.wv) { fill: var(--blue-light); stroke: var(--navy); stroke-width: 2; }
.wt-shape svg .wv { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }
.wt-shape svg text { font: 700 16px Montserrat, sans-serif; fill: var(--navy); stroke: none; }
.wt-shape svg rect.m3 { fill: #fff; stroke-dasharray: 4 3; }
.wt-shape input:checked + span svg rect.m3 { fill: #fff; }
.wt-shape:hover span { border-color: var(--sky); }
.wt-shape input:checked + span { border-color: var(--navy); background: var(--blue-light); color: var(--navy); }
.wt-shape input:checked + span svg rect, .wt-shape input:checked + span svg circle, .wt-shape input:checked + span svg > path:not(.wv) { fill: var(--teal-light); }
.wt-shape input:focus-visible + span { outline: 3px solid var(--yellow); outline-offset: 2px; }
.wt-box .form-row.wt-dims { grid-template-columns: repeat(3, 1fr); }
.wt-test { display: flex; gap: 0.9rem; align-items: center; padding: 0.8rem; border-radius: var(--radius-md); background: var(--blue-light); }
.wt-test img { width: 72px; height: 72px; object-fit: contain; border-radius: 10px; background: #fff; flex: 0 0 auto; }
.wt-test b { color: var(--navy); }
.wt-test p { margin: 0.15rem 0 0; font-size: 0.88rem; }
.wt-steps > li.wt-li-warn { padding: 0.8rem 0.9rem 0.8rem 3.2rem; background: #fff4e5; border: 1px solid #f6d7a8; border-radius: var(--radius-md); }
.wt-steps > li.wt-li-warn::before { content: "!"; background: #e08a00; left: 0.8rem; top: 0.8rem; }
.wt-steps > li.wt-li-warn .wt-advice { color: #7a4600; }
@media (max-width: 480px) {
    .wt-box .form-row.wt-dims { grid-template-columns: 1fr 1fr; }
    .wt-shape svg { width: 52px; height: 32px; }
}
.wt-shop-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.wt-shop-actions .btn { padding: 0.65rem 1.1rem; font-size: 0.9rem; }
.wt-call { margin-top: 0.6rem; padding: 0.6rem 1.1rem; font-size: 0.9rem; }
#poslji-seznam .contact-info-card { max-width: 720px; margin: 0 auto; }
@media (max-width: 560px) { #poslji-seznam .form-row { grid-template-columns: 1fr; } }

/* ---------- Kratek uvod (kalkulator, nega vode) ---------- */
.hero-short > .container { padding-top: calc(var(--header-h) + 1.6rem); padding-bottom: 2rem; }
.hero-short h1 { font-size: clamp(1.7rem, 2.4vw + 1rem, 2.5rem); margin-bottom: 0.5rem; }
.hero-short .hero-lede { margin: 0; max-width: 60ch; }
#poslji-seznam .section-head p { color: rgba(255,255,255,0.85); }

/* ---------- Trgovina: izpostavljen pomočnik za nego vode ---------- */
.promo-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; }
.promo-lede { color: rgba(255,255,255,0.88); margin-bottom: 1.4rem; max-width: 52ch; }
.promo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.promo-steps li { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--radius-md); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); }
.promo-steps b { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--navy-dark); font-weight: 700; }
.promo-steps span { display: grid; gap: 0.15rem; color: rgba(255,255,255,0.8); font-size: 0.92rem; }
.promo-steps strong { color: #fff; font-size: 1rem; }

/* ---------- Naslovnica: pas z orodjema čez celo širino ---------- */
.tools-band { display: grid; grid-template-columns: 1fr 1fr; }
.tools-half { display: block; color: #fff; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 5vw, 4rem); }
.tools-calc { background: linear-gradient(135deg, #00203b 0%, var(--navy-dark) 45%, var(--navy) 100%); }
.tools-voda { background: linear-gradient(135deg, var(--navy) 0%, #0070b0 55%, #0086c6 100%); }
.tools-inner { max-width: 520px; display: grid; gap: 0.9rem; justify-items: start; }
.tools-calc .tools-inner { margin-left: auto; }
.tools-half h2 { color: #fff; margin: 0; }
.tools-half p { margin: 0; color: rgba(255,255,255,0.88); }
.tools-half .eyebrow { color: var(--sky); background: rgba(255,255,255,0.14); margin: 0; }
.tools-icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,0.14); display: grid; place-items: center; }
.tools-icon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tools-half .btn { margin-top: 0.6rem; }
@media (max-width: 860px) {
    .tools-band, .promo-split { grid-template-columns: 1fr; }
    .promo-split { gap: 2rem; }
    .tools-calc .tools-inner { margin-left: 0; }
}
section.hero-short, section.tools-band { padding-top: 0; padding-bottom: 0; }
.wt-order { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.wt-order-info { display: grid; gap: 1.1rem; }
.wt-order-info h2 { margin: 0; }
.wt-order-lede { margin: 0; color: rgba(255,255,255,0.88); }
.wt-order-extra { display: grid; gap: 0.6rem; justify-items: start; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.18); }
.wt-order-extra p { margin: 0; color: rgba(255,255,255,0.85); }
.wt-order-extra b { color: #fff; }
.wt-order-extra .btn { display: inline-flex; align-items: center; gap: 0.5rem; }
.wt-order-extra .btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
@media (max-width: 900px) { .wt-order { grid-template-columns: 1fr; gap: 2rem; } }
.wt-order-info > .eyebrow { justify-self: start; margin: 0; }
#poslji-seznam .contact-info-card { scroll-margin-top: calc(var(--header-h) + 0.8rem); }

/* =========================================================
   PIŠKOTKI - pasica za soglasje (js/consent.js)
   Kartica spodaj na sredini, stran za njo je zamegljena, dokler
   obiskovalec ne izbere. Zavrni je gumb enake velikosti kot Sprejmi
   (zahteva Informacijskega pooblaščenca: zavrnitev enako preprosta).
   ========================================================= */
.cc {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
    background: rgba(0, 30, 55, 0.22);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cc[hidden], .cc [hidden] { display: none !important; }
.cc-open, .cc-open body { overflow: hidden; }
.cc-box {
    width: 100%; max-width: 430px; max-height: calc(100vh - 20px); overflow-y: auto;
    background: #fff; color: var(--body);
    border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 20, 40, 0.3);
    padding: 1.05rem 1.15rem 0.8rem; outline: none;
    animation: cc-in 0.3s ease both;
}
@keyframes cc-in { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-box { animation: none; } }
.cc-head { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.45rem; }
.cc-emoji { font-size: 1.6rem; line-height: 1; flex: 0 0 auto; }
.cc-title { font-weight: 800; color: var(--ink); font-size: 1.05rem; line-height: 1.25; margin: 0; }
.cc-text { font-size: 0.87rem; line-height: 1.5; margin: 0 0 0.8rem; }
.cc-text a { color: var(--navy); font-weight: 700; }
.cc-opts { display: grid; gap: 0.55rem; margin: 0 0 0.8rem; padding: 0.8rem; background: var(--bg-soft); border-radius: 12px; }
.cc-opt { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.84rem; line-height: 1.45; cursor: pointer; }
.cc-opt input { width: 18px; height: 18px; margin: 0.12rem 0 0; flex: 0 0 auto; accent-color: var(--navy); }
.cc-opt b { display: block; color: var(--ink); font-size: 0.9rem; }
.cc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cc-btn {
    width: 100%; min-height: 46px; border-radius: 999px; cursor: pointer;
    font: inherit; font-weight: 700; font-size: 0.95rem;
    border: 2px solid transparent;
    background: linear-gradient(90deg, #0079b8, var(--navy)); color: #fff;
    box-shadow: 0 6px 16px rgba(0, 85, 151, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cc-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 85, 151, 0.32); }
.cc-btn-2 { background: #fff; color: var(--navy); border-color: #c9d6df; box-shadow: none; }
.cc-btn-2:hover { border-color: var(--navy); box-shadow: none; }
.cc-save, .cc-set { grid-column: 1 / -1; }
.cc-btn:focus-visible, .cc-set:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.cc-set {
    justify-self: center; background: none; border: 0; padding: 0.25rem 0.5rem 0; cursor: pointer;
    font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--muted); text-decoration: underline;
}
@media (min-width: 761px) { .cc { padding-bottom: 24px; } }
.cc-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.footer-bottom .cc-link { color: rgba(255,255,255,0.85); }
.cookie-table-wrap { overflow-x: auto; margin: 0 0 1.2rem; }
.cookie-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; min-width: 560px; }
.cookie-table th, .cookie-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--line); }
.cookie-table th { color: var(--navy); background: var(--bg-soft); }
.cookie-table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; white-space: nowrap; }

/* =========================================================
   Popravki za telefon in obrazec (paket v83)
   ========================================================= */
/* Obrazec v dveh korakih: večja, bolj opazna kartica */
.contact-form-card[data-step] { padding: clamp(1.4rem, 3vw, 2.4rem); border: 2px solid var(--blue-light); box-shadow: 0 18px 50px rgba(0, 60, 107, 0.14); }
.lp-fs legend { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.6rem); line-height: 1.2; margin-bottom: 0.5rem; }
.lp-form .field label, .lp-form .field .lbl { font-size: 1rem; }
.lp-form .field input, .lp-form .field textarea { font-size: 17px; min-height: 56px; padding: 0.9em 1.1em; border-width: 2px; }
.lp-trust { margin: -0.3rem 0 0; font-size: 0.88rem; color: var(--muted); text-align: center; }

@media (max-width: 760px) {
    /* Manjši gumbi na telefonu */
    .btn { padding: 0.72em 1.25em; font-size: 0.95rem; }
    .btn-lg { padding: 0.8em 1.4em; font-size: 1rem; }
    /* Obrazec je na telefonu pred kontaktnimi podatki */
    .contact-form-card[data-step] { order: -1; }
    /* Sredstva za nego vode v enem stolpcu, slika levo */
    .wt-pgrid { grid-template-columns: 1fr; gap: 0.7rem; }
    .wt-pcard { grid-template-columns: 88px 1fr; column-gap: 1rem; align-items: start; }
    .wt-pcard img { grid-row: 1 / span 3; max-width: 88px; margin: 0; }
}

.cc .cc-box:focus, .cc .cc-box:focus-visible { outline: none; border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 20, 40, 0.3); }

/* =========================================================
   GLAVA - prenosnik in tablica (v94)
   - prenosnik (1280-1760 px): povezave v eni vrstici, manjši razmiki,
     pri ožjih zaslonih telefon samo z ikono;
   - tablica (761-1279 px): meni se odpre z gumbom, kot na telefonu,
     gumb »Brezplačen posvet« ostane v glavi.
   ========================================================= */
.main-nav a { white-space: nowrap; }
/* »Nega vode« je v glavi samo na večjem zaslonu; v meniju z gumbom je
   namesto nje celotna povezava »Težave z vodo v bazenu«. */
@media (max-width: 1279px) { .main-nav a.desktop-nav-only { display: none; } }
@media (max-width: 1760px) and (min-width: 1280px) {
    .site-header .container { gap: 1rem; padding-left: calc(var(--gutter) + 4px); padding-right: calc(var(--gutter) + 4px); }
    .main-nav { gap: clamp(0.7rem, 1.05vw, 1.2rem); }
    .main-nav a { font-size: 0.93rem; }
    .main-nav a.nav-home { display: none; }
    .header-phone span { display: none; }
    .header-actions { gap: 0.6rem; }
    .header-actions .btn-primary { padding: 0.75em 1.15em; }
}
@media (max-width: 1380px) and (min-width: 1280px) {
    .main-nav { gap: 0.72rem; }
    .main-nav a { font-size: 0.88rem; }
    .brand img { height: 44px; }
    .header-actions .btn-primary { font-size: 0.9rem; padding: 0.7em 1em; }
}
@media (max-width: 1279px) {
    .nav-toggle { display: inline-flex; }
    .main-nav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1.5rem var(--gutter);
        gap: 0.2rem;
        transform: translateX(100%);
        transition: transform 0.25s ease;
        max-height: calc(100vh - var(--header-h) - 28px);
        overflow-y: auto;
        border-radius: 0 0 28px 28px;
        box-shadow: 0 24px 48px rgba(0, 20, 40, 0.28);
    }
    .nav-open .main-nav { transform: translateX(0); }
    .main-nav a { padding: 0.9em 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; color: var(--ink); white-space: normal; }
    .main-nav a::after { background: var(--blue); }
    .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--navy); }
    .main-nav .mobile-nav-only { display: block; }
    .mobile-nav-phone { display: flex; align-items: center; gap: 0.6em; padding: 1.1em 0 0.3em; font-weight: 700; color: var(--navy) !important; border-bottom: none !important; }
    .mobile-nav-phone svg { width: 20px; height: 20px; color: var(--blue); }
    .mobile-nav-cta { display: flex; justify-content: center; margin-top: 1rem; width: 100%; }
    .nav-open .nav-toggle { background: rgba(255, 255, 255, 0.14); border-radius: 10px; }
    .brand img { height: 44px; }
}
@media (max-width: 1279px) and (min-width: 761px) {
    .main-nav { left: auto; width: min(420px, 100%); border-radius: 0 0 0 28px; }
    .header-actions .btn-primary { display: inline-flex; }
}