/* ---------- self-hosted webfonts ----------
   Google Fonts served these split by unicode-range from a third-party origin, which
   made Serbian accented letters (c s z c d) paint in the Arial fallback for the first
   moment while the latin-ext file was still downloading -- one wrong-looking letter in
   the middle of a word. Same-origin + preloaded (see head() in site_build.py) removes
   the gap. Variable fonts: one file covers the whole weight range.
   Cyrillic subsets intentionally omitted; the site is Latin-script only. */
@font-face {
    font-family: 'DM Sans'; font-style: normal; font-weight: 400 700;
    font-display: swap; src: url(fonts/dmsans-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans'; font-style: normal; font-weight: 400 700;
    font-display: swap; src: url(fonts/dmsans-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Caveat'; font-style: normal; font-weight: 500 700;
    font-display: swap; src: url(fonts/caveat-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Caveat'; font-style: normal; font-weight: 500 700;
    font-display: swap; src: url(fonts/caveat-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   ISKRA SERVIS — "retro frame, modern content"
   Palette from the original 2012 dizajn.css.

   STRUCTURE: the original's clean feel comes from discrete rounded modules
   floating on a light ground with air between them — not one continuous
   sheet. Keep the modules separate. Keep it compact.
   ========================================================================== */

:root {
    --teal:       #038da5;   /* most-used colour in the original — the logo blue */
    --teal-dk:    #026e81;
    --navy:       #1c5084;

    --orange:     #d23300;
    --orange-dk:  #c13100;
    --crimson:    #a60013;
    --crimson-dk: #8a0010;
    --amber:      #f0a020;
    --amber-dk:   #d98600;

    --ink:        #212121;
    --ink-soft:   #3c3537;
    --grey-700:   #555;
    --grey-500:   #7b7b7b;
    --grey-300:   #c9c9c9;
    --grey-200:   #e4e4e4;
    --grey-150:   #ececec;
    --grey-100:   #f1f1f1;
    --cream:      #fff7e2;
    --white:      #fff;

    --shell:  1010px;
    --r:      7px;
    --r-sm:   4px;
    --gap:    14px;
    --bevel:  inset 0 1px 0 rgba(255,255,255,.5);
    --drop:   0 1px 2px rgba(0,0,0,.10);
    --t:      .18s ease;

    --font:      'DM Sans', Arial, Helvetica, sans-serif;
    --font-hand: 'Caveat', cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font);
    font-size: 15px; line-height: 1.6;
    color: var(--ink);
    background: #fff;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); }

.page { max-width: var(--shell); margin: 0 auto; padding: 0 15px 26px; }

/* ==========================  HEADER  ============================== */
.r-header { padding: 18px 4px 14px; }
.r-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.r-brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.r-brand__logo { width: 215px; height: auto; }
.r-brand__slogan {
    font-family: var(--font-hand); font-size: 1.6rem;
    color: var(--ink-soft); transform: rotate(-3deg); white-space: nowrap;
}
.r-phone {
    display: flex; align-items: center; gap: 13px;
    background: linear-gradient(180deg, #f4f5f6 0%, #e6e9eb 100%);
    border: 1px solid var(--grey-300); border-radius: var(--r);
    box-shadow: var(--bevel), var(--drop);
    padding: 9px 16px; text-decoration: none; transition: var(--t);
}
.r-phone:hover { background: linear-gradient(180deg,#fff 0%,#e9ecee 100%); }
.r-phone__num  { display: block; font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em; color: var(--navy); line-height: 1.15; }
.r-phone__addr { display: block; font-size: .72rem; color: var(--grey-700); }
.r-phone__icon {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #dfe3e6 100%);
    border: 1px solid var(--grey-300);
    display: grid; place-items: center; color: var(--ink-soft);
}
.r-phone__icon svg { width: 17px; height: 17px; }

/* ============================  NAV  =============================== */
.r-nav {
    background: linear-gradient(180deg, #fcfcfc 0%, #ebedee 55%, #e0e3e5 100%);
    border: 1px solid var(--grey-300); border-radius: var(--r);
    box-shadow: var(--bevel), var(--drop);
    margin-bottom: var(--gap);
}
.r-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 8px; }
.r-nav__links { list-style: none; display: flex; align-items: center; flex-wrap: wrap; }
.r-nav__links li { display: flex; align-items: center; }
.r-nav__links li + li::before {
    content: ""; width: 1px; height: 14px;
    background: var(--grey-300); box-shadow: 1px 0 0 rgba(255,255,255,.85);
}
.r-nav__links a {
    display: block; padding: 12px 17px;
    font-size: .92rem; font-weight: 600; color: var(--teal); text-decoration: none;
    transition: var(--t);
}
.r-nav__links a:hover { color: var(--orange); }
.r-nav__links a.active { color: var(--orange-dk); font-weight: 700; }

.r-nav__tabs { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.r-tab {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 13px 8px 17px; border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #e9ecee 100%);
    border: 1px solid var(--grey-300); box-shadow: var(--bevel), var(--drop);
    font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--navy); text-decoration: none; transition: var(--t);
}
.r-tab:hover, .r-tab.is-active { color: var(--orange-dk); }
.r-arrow {
    width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%;
    background: linear-gradient(180deg, #9aa2a8 0%, #767e84 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
    display: grid; place-items: center; color: #fff;
}
.r-arrow svg { width: 8px; height: 8px; }
.r-tab:hover .r-arrow, .r-tab.is-active .r-arrow { background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dk) 100%); }

/* ====================  BANNER + THREE BARS  ======================= */
.r-stage {
    border-radius: var(--r); overflow: hidden;
    border: 1px solid var(--grey-300); box-shadow: var(--drop);
    margin-bottom: var(--gap);
}
.r-hero { position: relative; background: #0a5c86; }
.r-slides { position: relative; aspect-ratio: 980 / 218; }
.r-slide {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: 0; transition: opacity .7s ease;
}
.r-slide.is-on { opacity: 1; }
.r-dots { position: absolute; left: 16px; bottom: 12px; display: flex; gap: 6px; z-index: 2; }
.r-dot {
    width: 11px; height: 11px; padding: 0; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.28); background: rgba(255,255,255,.55);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7); cursor: pointer; transition: var(--t);
}
.r-dot:hover { background: rgba(255,255,255,.85); }
.r-dot.is-on { background: var(--amber); border-color: rgba(0,0,0,.35); }
@media (prefers-reduced-motion: reduce) { .r-slide { transition: none; } }

/* inner-page title strip — same module, no image */
.r-strip {
    background: linear-gradient(180deg, #fafbfb 0%, var(--grey-100) 100%);
    padding: 20px 26px;
    border-left: 5px solid var(--orange);
}
.r-strip h1 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; color: var(--navy); letter-spacing: -.015em; }
.r-strip p  { color: var(--grey-700); margin-top: 4px; }

.r-bars { display: grid; grid-template-columns: repeat(3, 1fr); }
.r-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 20px; text-decoration: none; color: #fff;
    font-size: 1.08rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0,0,0,.28); box-shadow: var(--bevel); transition: var(--t);
}
.r-bar--1 { background: linear-gradient(180deg, var(--amber) 0%, var(--amber-dk) 100%); }
.r-bar--2 { background: linear-gradient(180deg, #e8721a 0%, #d25400 100%); }
.r-bar--3 { background: linear-gradient(180deg, var(--orange) 0%, var(--crimson) 100%); }
.r-bar + .r-bar { border-left: 1px solid rgba(0,0,0,.14); }
.r-bar:hover { filter: brightness(1.09); }
.r-bar__arrow {
    width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
    background: rgba(255,255,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
    display: grid; place-items: center;
}
.r-bar__arrow svg { width: 10px; height: 10px; }
.r-bar:hover .r-bar__arrow { background: rgba(255,255,255,.36); }

/* ==========================  BODY  =============================== */
.r-body { display: grid; grid-template-columns: 1fr 272px; gap: var(--gap); align-items: start; margin-bottom: var(--gap); }

.r-main {
    background: linear-gradient(180deg, #fafbfb 0%, var(--grey-100) 100%);
    border: 1px solid var(--grey-300); border-radius: var(--r);
    box-shadow: var(--drop); padding: 22px 26px 24px;
}
.r-main h1 { font-size: clamp(1.42rem, 2.3vw, 1.8rem); line-height: 1.18; letter-spacing: -.015em; color: var(--navy); margin-bottom: 6px; }
.r-main h2 { font-size: 1.14rem; line-height: 1.3; color: var(--navy); margin: 22px 0 9px; }
.r-main h3 { font-size: 1.02rem; line-height: 1.3; color: var(--navy); }
.r-main p  { margin-bottom: 11px; color: #333; }
.r-main b  { color: var(--ink); font-weight: 700; }
.r-lede    { font-size: 1rem; color: var(--grey-700); margin-bottom: 12px; }

/* mascot — plain cutout, no frame */
.r-welcome { display: grid; grid-template-columns: 128px 1fr; gap: 22px; align-items: start; }
.r-mascot  { width: 128px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.14)); }

/* --- compact service list, two columns --- */
.r-services { list-style: none; display: grid; gap: 6px; margin: 4px 0 0; }
.r-services--2col { grid-template-columns: 1fr 1fr; }
/* block + absolute icon, NOT flex — a flex `gap` also lands between text nodes
   and inline <b>, which visibly spaces out bold words. */
.r-services li {
    position: relative; background: var(--white);
    border: 1px solid var(--grey-200); border-left: 3px solid var(--teal);
    border-radius: var(--r-sm); padding: 9px 12px 9px 34px;
    font-size: .9rem; line-height: 1.45; transition: var(--t);
}
.r-services li:hover { border-left-color: var(--orange); }
.r-services svg { position: absolute; left: 12px; top: 11px; width: 14px; height: 14px; color: var(--teal); }

.r-note {
    background: var(--cream); border: 1px solid #e8d9a8; border-left: 4px solid var(--amber);
    border-radius: var(--r-sm); padding: 11px 15px; margin: 16px 0 0;
    font-size: .92rem; color: #5c4a1e;
}
.r-note b { color: var(--orange-dk); }

.r-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.r-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 20px; border-radius: var(--r-sm);
    font-weight: 700; font-size: .92rem; text-decoration: none;
    box-shadow: var(--bevel), var(--drop); transition: var(--t);
    border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.r-btn--primary { background: linear-gradient(180deg, var(--orange) 0%, var(--crimson) 100%); color: #fff; }
.r-btn--primary:hover { filter: brightness(1.1); }
.r-btn--ghost { background: linear-gradient(180deg, #fff 0%, #eceff1 100%); color: var(--navy); border-color: var(--grey-300); }
.r-btn--ghost:hover { color: var(--orange-dk); }

/* --- O nama: standards + client chips --- */
.r-std { list-style: none; display: grid; gap: 6px; margin: 2px 0 0; }
.r-std li {
    display: grid; grid-template-columns: 118px 1fr; gap: 12px; align-items: baseline;
    background: var(--white); border: 1px solid var(--grey-200); border-left: 3px solid var(--teal);
    border-radius: var(--r-sm); padding: 9px 13px; font-size: .9rem;
}
.r-std__k { color: var(--navy) !important; }

.r-clients { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 4px; }
.r-clients li {
    background: var(--white); border: 1px solid var(--grey-200); border-left: 2px solid var(--orange);
    border-radius: var(--r-sm); padding: 7px 10px; font-size: .8rem; color: var(--grey-700);
}

/* --- Usluge cards --- */
.r-uslist { display: grid; gap: 9px; }
.r-usluga {
    display: grid; grid-template-columns: 150px 1fr;
    background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--r-sm); overflow: hidden; transition: var(--t);
}
.r-usluga:hover { border-color: var(--grey-300); box-shadow: var(--drop); }
.r-usluga__media { background: var(--grey-150); }
.r-usluga__media img { width: 100%; height: 100%; min-height: 118px; object-fit: cover; }
.r-usluga__body { padding: 13px 16px; }
.r-usluga__body h3 { margin-bottom: 5px; }
.r-usluga__body p  { font-size: .88rem; line-height: 1.5; color: var(--grey-700); margin-bottom: 6px; }

.r-mini { list-style: none; display: grid; gap: 4px; }
.r-mini li { position: relative; padding-left: 15px; font-size: .84rem; line-height: 1.5; color: var(--grey-700); }
.r-mini li::before { content: "›"; position: absolute; left: 2px; color: var(--orange); font-weight: 700; }
.r-mini--lg li { font-size: .88rem; padding-left: 0; margin-top: 10px; }
.r-mini--lg li::before { content: none; }
.r-mini--lg b { color: var(--navy) !important; }

/* --- Iz radionice --- */
.r-radgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r-rad { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--r-sm); overflow: hidden; transition: var(--t); }
.r-rad:hover { border-color: var(--grey-300); box-shadow: var(--drop); }
.r-rad__media { position: relative; height: 118px; background: var(--grey-150); }
.r-rad__media img { width: 100%; height: 100%; object-fit: cover; }
.r-rad__tag {
    position: absolute; left: 8px; bottom: 8px;
    background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-dk) 100%);
    color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 3px; box-shadow: var(--bevel);
}
.r-rad__body { padding: 12px 14px 14px; }
.r-rad__body h3 { margin-bottom: 4px; font-size: .96rem; }
.r-rad__body p  { font-size: .84rem; line-height: 1.5; color: var(--grey-700); margin: 0; }

/* --- Prodaja split rows --- */
.r-split { display: grid; grid-template-columns: 230px 1fr; gap: 18px; align-items: start; margin-top: 6px; }
.r-split--rev .r-split__media { order: 2; }
.r-split__media { border: 1px solid var(--grey-200); border-radius: var(--r-sm); overflow: hidden; }
.r-split__media img { width: 100%; height: 165px; object-fit: cover; }
.r-split h2 { margin-top: 0; }

/* --- Kontakt --- */
.r-kgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.r-kgrid h2:first-child { margin-top: 0; }
.r-form-lede { font-size: .9rem; color: var(--grey-700); margin-bottom: 12px; }
.r-form p { margin-bottom: 10px; }
.r-form label { display: block; font-size: .82rem; font-weight: 600; color: var(--navy); margin-bottom: 3px; }
.r-form label i { color: var(--orange); font-style: normal; }
.r-form input, .r-form textarea {
    width: 100%; padding: 9px 11px;
    border: 1px solid var(--grey-300); border-radius: var(--r-sm);
    font: inherit; font-size: .9rem; color: var(--ink); background: var(--white); transition: var(--t);
}
.r-form input:focus, .r-form textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(3,141,165,.14); }
.r-form textarea { resize: vertical; }
.r-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.r-status { padding: 11px 14px; border-radius: var(--r-sm); margin-bottom: 12px; font-size: .88rem; line-height: 1.5; }
.r-status--ok  { background: #eaf6ec; border: 1px solid #b6ddbf; color: #2c6b39; }
.r-status--err { background: #fdecea; border: 1px solid #f3c0ba; color: var(--crimson); }

.r-map { border: 1px solid var(--grey-200); border-radius: var(--r-sm); overflow: hidden; }

/* ======================  SIDEBAR PANELS  ========================= */
.r-side { display: grid; gap: var(--gap); }
.r-panel { border: 1px solid var(--grey-300); border-radius: var(--r); overflow: hidden; box-shadow: var(--drop); background: var(--white); }
.r-panel__cap {
    background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-dk) 100%);
    color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 9px 13px; box-shadow: var(--bevel);
}
.r-panel__cap--teal   { background: linear-gradient(180deg, var(--teal) 0%, var(--teal-dk) 100%); }
.r-panel__cap--orange { background: linear-gradient(180deg, #e8721a 0%, var(--orange-dk) 100%); }
.r-panel__body { background: linear-gradient(180deg, #fafbfb 0%, var(--grey-100) 100%); }

.r-news, .r-links, .r-facts { list-style: none; }
.r-news li, .r-links li, .r-facts li { border-bottom: 1px solid var(--grey-200); }
.r-news li:last-child, .r-links li:last-child, .r-facts li:last-child { border-bottom: 0; }
.r-news a { display: block; padding: 9px 13px; text-decoration: none; transition: var(--t); }
.r-news a:hover, .r-links a:hover { background: var(--white); }
.r-news__date  { display: block; font-size: .7rem; font-weight: 700; color: var(--orange-dk); margin-bottom: 2px; letter-spacing: .04em; text-transform: uppercase; }
.r-news__title { display: block; font-size: .84rem; line-height: 1.4; color: var(--ink); }
.r-news a:hover .r-news__title { color: var(--teal-dk); }
.r-links a { display: flex; align-items: flex-start; gap: 8px; padding: 9px 13px; font-size: .84rem; line-height: 1.4; color: var(--ink); text-decoration: none; transition: var(--t); }
.r-links a:hover { color: var(--teal-dk); }
.r-links .chev { color: var(--orange); font-weight: 700; }
.r-facts li { padding: 9px 13px; font-size: .82rem; line-height: 1.5; color: var(--grey-700); }
.r-facts b { color: var(--navy); }

.r-contact { padding: 12px 13px; font-size: .84rem; line-height: 1.65; }
.r-contact strong { display: block; color: var(--navy); font-size: .92rem; margin-bottom: 2px; }
.r-contact a { color: var(--teal-dk); text-decoration: none; }
.r-contact a:hover { text-decoration: underline; }

/* ===================  BRAND STRIP + FOOTER  ====================== */
/* white ground so the logos' own white backgrounds are seamless */
.r-brands {
    background: var(--white);
    border: 1px solid var(--grey-300); border-radius: var(--r);
    box-shadow: var(--drop); padding: 15px 26px; margin-bottom: 14px;
}
.r-brands__row { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
/* capped at native height or below — never upscaled, so they stay sharp */
.r-brands__row img { max-height: 26px; width: auto; object-fit: contain; transition: var(--t); }
.r-brands__row img:hover { transform: scale(1.06); }

.r-footer { font-size: .78rem; color: var(--grey-500); padding: 4px 4px 0; }
.r-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.r-footer__nav { list-style: none; display: flex; flex-wrap: wrap; }
.r-footer__nav li + li::before { content: "|"; color: var(--grey-300); padding: 0 8px; }
.r-footer__nav a { color: var(--teal); text-decoration: none; }
.r-footer__nav a:hover { color: var(--orange-dk); }

/* ========================  RESPONSIVE  =========================== */
@media (max-width: 900px) {
    .r-body { grid-template-columns: 1fr; }
    .r-header__inner, .r-nav__inner { justify-content: center; }
    .r-header__inner { text-align: center; }
    .r-bars { grid-template-columns: 1fr; }
    .r-bar + .r-bar { border-left: 0; border-top: 1px solid rgba(0,0,0,.14); }
    .r-kgrid { grid-template-columns: 1fr; }
    .r-clients { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .page { padding: 0 11px 20px; }
    .r-brand { flex-direction: column; gap: 6px; }
    .r-brand__logo { width: 185px; }
    .r-welcome { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .r-welcome h1 { text-align: center; }
    .r-main { padding: 18px 16px; }
    .r-services--2col, .r-radgrid { grid-template-columns: 1fr; }
    .r-usluga, .r-split { grid-template-columns: 1fr; }
    .r-split--rev .r-split__media { order: 0; }
    .r-split__media img { height: 150px; }
    .r-std li { grid-template-columns: 1fr; gap: 2px; }
    .r-clients { grid-template-columns: 1fr; }
    .r-form__row { grid-template-columns: 1fr; }
    /* keep the 5 main links on ONE row at phone widths — they wrapped at 390px.
       nowrap + vw-scaled type + tight padding fits down to ~320px. */
    .r-nav__inner { padding: 0 4px; }
    .r-nav__links {
        width: 100%;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .r-nav__links li { flex: 0 1 auto; min-width: 0; }
    .r-nav__links a {
        padding: 11px 2vw;
        font-size: clamp(.7rem, 3.05vw, .88rem);
        white-space: nowrap;
    }
    .r-nav__tabs { width: 100%; justify-content: center; padding-bottom: 10px; }
    .r-phone__num { font-size: 1.18rem; }
    .r-strip { padding: 16px 18px; }
    .r-brands { padding: 13px 16px; }
    .r-brands__row { justify-content: center; gap: 18px; }
    .r-brands__row img { max-height: 22px; }
    .r-footer__inner { justify-content: center; text-align: center; }
}

/* ---------- radno vreme ---------- */
.r-hours { list-style: none; }
.r-hours li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 9px 13px; font-size: .84rem;
    border-bottom: 1px solid var(--grey-200);
}
.r-hours li:last-child { border-bottom: 0; }
.r-hours span { color: var(--grey-700); }
.r-hours b { color: var(--navy); white-space: nowrap; }
.r-hours b.is-off { color: var(--grey-500); font-weight: 400; }
.r-off { color: var(--grey-500); }

/* ==========================================================================
   PRODUCT PAGE — ICS 695XL
   ========================================================================== */
.p-hero { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: center; }
.p-hero__media {
    background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--r-sm); padding: 10px;
}
.p-badge {
    display: inline-block; margin-bottom: 8px;
    background: linear-gradient(180deg, var(--crimson) 0%, var(--crimson-dk) 100%);
    color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 3px; box-shadow: var(--bevel);
}
.p-hero__body h1 { margin-bottom: 7px; }
.p-keys { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.p-keys li {
    flex: 1 1 auto; text-align: center;
    background: var(--white); border: 1px solid var(--grey-200);
    border-top: 3px solid var(--orange);
    border-radius: var(--r-sm); padding: 9px 12px;
}
.p-keys b { display: block; font-size: 1.12rem; color: var(--navy); line-height: 1.2; }
.p-keys span { font-size: .72rem; color: var(--grey-500); }
.p-note-sm { font-size: .82rem; color: var(--grey-500); margin-top: 10px; }

.p-items { display: grid; gap: 9px; }
.p-item {
    display: grid; grid-template-columns: 175px 1fr;
    background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--r-sm); overflow: hidden; transition: var(--t);
}
.p-item--lead { border-left: 3px solid var(--orange); }
.p-item:hover { border-color: var(--grey-300); box-shadow: var(--drop); }
.p-item__media { background: var(--white); display: grid; place-items: center; padding: 8px; }
.p-item__media img { width: 100%; height: 118px; object-fit: contain; }
.p-item__body { padding: 13px 16px; }
.p-item__body h3 { margin-bottom: 5px; }
.p-item__body p { font-size: .88rem; line-height: 1.5; color: var(--grey-700); margin-bottom: 6px; }
.p-price {
    display: inline-block; margin-top: 9px;
    font-size: .84rem; font-weight: 700; color: var(--orange-dk); text-decoration: none;
}
.p-price:hover { text-decoration: underline; }

.p-spec { border: 1px solid var(--grey-200); border-radius: var(--r-sm); overflow: hidden; background: var(--white); }
.p-spec table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.p-spec tr + tr { border-top: 1px solid var(--grey-200); }
.p-spec th {
    text-align: left; font-weight: 600; color: var(--grey-700);
    padding: 9px 14px; width: 48%; background: #fbfcfc;
}
.p-spec td { padding: 9px 14px; color: var(--ink); }
.p-spec b { color: var(--navy); }

.p-pribor { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.p-pribor li {
    display: flex; align-items: center; gap: 10px;
    background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--r-sm); padding: 9px 12px; font-size: .84rem; color: var(--grey-700);
}
.p-pribor img { width: 42px; height: 42px; object-fit: contain; flex: 0 0 42px; }
.p-nopic {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 3px;
    background: var(--grey-100); display: grid; place-items: center; color: var(--grey-300);
}

/* home + prodaja promo card */
/* applications list, introduced by merit-m130.html */
.p-poslovi { list-style: none; display: grid; gap: 10px; margin: 10px 0 4px; }
.p-poslovi li {
    background: var(--grey-100); border-left: 3px solid var(--teal);
    border-radius: var(--r-sm); padding: 10px 14px;
    font-size: .9rem; line-height: 1.55; color: var(--grey-700);
}
.p-poslovi b { color: var(--ink); }

.p-promo {
    display: grid; grid-template-columns: 190px 1fr; gap: 18px; align-items: center;
    background: linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
    border: 1px solid var(--grey-300); border-left: 4px solid var(--orange);
    border-radius: var(--r-sm); padding: 14px 18px; margin-top: 6px;
    text-decoration: none; transition: var(--t);
}
.p-promo:hover { box-shadow: var(--drop); border-left-color: var(--crimson); }
/* When a promo card is followed by the mascot/welcome block on the homepage,
   give it breathing room so the two don't collide visually. */
.p-promo + .r-welcome { margin-top: 44px; }
.p-promo + .p-promo   { margin-top: 10px; }
.s-grid  + .r-welcome { margin-top: 44px; }
/* Homepage "Novo u prodaji" grid: push each card's title to a fixed bottom
   position inside the card, and reserve the same amount of vertical room for
   it, so all three titles line up regardless of image aspect or line count. */
.s-grid .s-card    { justify-content: space-between; }
.s-grid .s-card h3 { min-height: 3.6em; margin-top: 6px; margin-bottom: 0; }
/* Homepage: the "Novo u prodaji" h2 is the first thing in main, so kill its
   default top margin (and its orange rule marker) so it doesn't push everything down. */
.r-main > h2:first-child { margin-top: 0; padding-top: 0; }
.r-main > h2:first-child::before { display: none; }
.p-promo img { width: 100%; height: 120px; object-fit: contain; }
.p-promo h3 { color: var(--navy); margin-bottom: 5px; }
.p-promo p { font-size: .88rem; color: var(--grey-700); line-height: 1.5; margin-bottom: 8px; }
.p-promo .p-price { margin-top: 0; }

@media (max-width: 900px) {
    .p-pribor { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .p-hero { grid-template-columns: 1fr; gap: 14px; }
    .p-hero__media { max-width: 250px; margin: 0 auto; }
    .p-item, .p-promo { grid-template-columns: 1fr; }
    .p-item__media img { height: 150px; }
    .p-promo img { height: 140px; }
    .p-pribor { grid-template-columns: 1fr; }
    .p-spec th, .p-spec td { padding: 8px 11px; font-size: .82rem; }
    .p-spec th { width: 52%; }
    .p-keys li { flex: 1 1 30%; padding: 8px 6px; }
    .p-keys b { font-size: 1rem; }
}


/* ==========================================================================
   CONTACT UNIT — phone plate + WhatsApp square, joined into one control
   ========================================================================== */
:root { --wa: #25c05f; --wa-dk: #158040; }

.r-actions { display: flex; align-items: stretch; gap: 0; }

/* phone plate keeps its left radius only — the WA square butts against it */
.r-actions .r-phone {
    border-radius: var(--r) 0 0 var(--r);
    border-right: 0;
}
.r-wa {
    display: grid; place-items: center;
    width: 52px; flex: 0 0 52px;
    background: linear-gradient(180deg, var(--wa) 0%, var(--wa-dk) 100%);
    border: 1px solid var(--wa-dk);
    border-radius: 0 var(--r) var(--r) 0;
    box-shadow: var(--bevel), var(--drop);
    color: #fff; text-decoration: none;
    transition: var(--t);
}
.r-wa:hover { filter: brightness(1.09); }
.r-wa svg { width: 23px; height: 23px; }

.r-btn--wa {
    background: linear-gradient(180deg, var(--wa) 0%, var(--wa-dk) 100%);
    color: #fff; border-color: var(--wa-dk);
}
.r-btn--wa:hover { filter: brightness(1.08); }

/* contact page block */
.k-wa {
    display: flex; align-items: center; gap: 13px;
    background: linear-gradient(180deg, var(--wa) 0%, var(--wa-dk) 100%);
    border: 1px solid var(--wa-dk); border-radius: var(--r);
    box-shadow: var(--bevel), var(--drop);
    padding: 13px 16px; margin-bottom: 14px;
    color: #fff; text-decoration: none; transition: var(--t);
}
.k-wa:hover { filter: brightness(1.08); }
.k-wa svg { width: 30px; height: 30px; flex: 0 0 30px; }
.k-wa > span { display: flex; flex-direction: column; line-height: 1.35; font-size: .86rem; }
.k-wa b { font-size: 1rem; }

.r-burger { display: none; }

/* slider and bars are separate modules now — join them visually on desktop */
.r-stage--hero { margin-bottom: 0; border-radius: var(--r) var(--r) 0 0; border-bottom: 0; }
.r-bars {
    border: 1px solid var(--grey-300); border-top: 0;
    border-radius: 0 0 var(--r) var(--r);
    overflow: hidden; box-shadow: var(--drop);
    margin-bottom: var(--gap);
}

/* ==========================================================================
   MOBILE
   Rule: the first screen carries what this is, one proof point, a way to act,
   and a hint of what's for sale. Left-aligned, compact, no sticky furniture.
   ========================================================================== */
@media (max-width: 700px) {

    /* --- module order: header, slider, content, bars, brands, footer --- */
    .page { display: flex; flex-direction: column; padding-bottom: 22px; }
    .r-header       { order: 0; }
    .r-nav          { order: 1; }
    .r-stage--title { order: 2; margin-bottom: var(--gap); }
    .r-stage--hero  { order: 2; margin-bottom: var(--gap); border-radius: var(--r); border-bottom: 1px solid var(--grey-300); }
    .r-body         { order: 3; }
    .r-bars         { order: 4; border-top: 1px solid var(--grey-300); border-radius: var(--r); margin-top: var(--gap); margin-bottom: 0; }
    .r-brands       { order: 5; margin-top: var(--gap); }
    .r-footer       { order: 6; }

    /* --- header: logo left, [WhatsApp | burger] joined on the right --- */
    .r-header { padding: 9px 2px 7px; }
    .r-header__inner { flex-wrap: nowrap; gap: 10px; justify-content: space-between; text-align: left; }
    .r-brand { flex-direction: row; gap: 0; flex: 0 1 auto; min-width: 0; }
    .r-brand__logo { width: clamp(118px, 38vw, 158px); }
    .r-brand__slogan { display: none; }

    .r-phone { display: none; }              /* the mobile number lives in the menu + Kontakt */
    /* fixed height so both halves match and the unit balances the logo;
       44px is also the minimum comfortable tap target */
    .r-actions { flex: 0 0 auto; height: 44px; align-items: stretch; }
    .r-wa {
        width: 46px; flex: 0 0 46px; height: 100%;
        border-radius: var(--r) 0 0 var(--r);
        border-right: 0;
    }
    .r-wa svg { width: 22px; height: 22px; }
    .r-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 46px; flex: 0 0 46px; height: 100%; padding: 0 12px;
        background: linear-gradient(180deg, #fff 0%, #e9ecee 100%);
        border: 1px solid var(--grey-300);
        border-radius: 0 var(--r) var(--r) 0;
        box-shadow: var(--bevel), var(--drop); cursor: pointer;
    }
    .r-burger span { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: var(--t); }
    .r-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .r-burger.is-open span:nth-child(2) { opacity: 0; }
    .r-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* --- menu: a compact wrapped bar, not a full-height drawer --- */
    .r-nav { display: none; margin-bottom: 0; }
    .r-nav.is-open { display: block; margin-bottom: var(--gap); }
    .r-nav__inner { flex-direction: column; align-items: stretch; padding: 6px; gap: 6px; }
    .r-nav__links { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; }
    .r-nav__links li { display: block; }
    .r-nav__links li + li::before { display: none; }
    .r-nav__links a {
        padding: 8px 11px; font-size: .84rem; white-space: nowrap;
        background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--r-sm);
    }
    .r-nav__links a.active { border-color: var(--iskra-red-border, #e6b7ae); }
    .r-nav__tabs { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 0 0 2px; }
    .r-tab { padding: 8px 12px; font-size: .7rem; }
    /* the numbers live here so they are one tap from anywhere */
    .r-nav__inner::after {
        content: ""; display: block; height: 0;
    }

    /* --- slider: kept, full width, same proportion as desktop --- */
    .r-hero { display: block; }
    .r-slides { aspect-ratio: 980 / 190; }
    .r-dots { left: 10px; bottom: 8px; }
    .r-dot { width: 9px; height: 9px; }

    /* --- content: left aligned, small mascot beside the text --- */
    .r-main { padding: 15px 15px 18px; }
    .r-main h1 { font-size: 1.3rem; }
    .r-main h2 { font-size: 1.05rem; margin: 18px 0 8px; }
    .r-main p { margin-bottom: 9px; }
    .r-lede { font-size: .94rem; margin-bottom: 9px; }

    .r-welcome { grid-template-columns: 66px 1fr; gap: 12px; justify-items: start; text-align: left; align-items: start; }
    .r-welcome h1 { text-align: left; }
    .r-mascot { width: 66px; }

    .r-services { gap: 5px; }
    .r-services li { padding: 8px 11px 8px 32px; font-size: .85rem; }
    .r-services svg { left: 11px; top: 10px; width: 14px; height: 14px; }
    .r-note { padding: 10px 13px; font-size: .87rem; margin-top: 13px; }
    .r-cta-row { margin-top: 14px; }
    .r-strip { padding: 13px 15px; }

    .r-bar { padding: 13px 17px; font-size: 1rem; }
}

.r-tab--tel { display: none; }
@media (max-width: 700px) {
    .r-tab--tel { display: inline-flex; }
}

/* ==========================================================================
   PRODAJA — shop layout: product row + stacked category blocks (retro bento)
   ========================================================================== */
.s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.s-card {
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--grey-200);
    border-top: 3px solid var(--orange);
    border-radius: var(--r-sm); padding: 12px;
    text-decoration: none; transition: var(--t);
}
.s-card:hover { border-color: var(--grey-300); box-shadow: var(--drop); transform: translateY(-2px); }
.s-card__thumb {
    display: grid; place-items: center;
    aspect-ratio: 1 / 1;                 /* square thumbnails */
    background: #fbfcfc; border: 1px solid var(--grey-200); border-radius: 3px;
    margin-bottom: 10px; overflow: hidden;
}
.s-card__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.s-card h3 { font-size: .96rem; line-height: 1.25; margin-bottom: 5px; color: var(--navy); }
.s-card p  { font-size: .82rem; line-height: 1.5; color: var(--grey-700); margin-bottom: 8px; flex: 1 1 auto; }

.s-stack { display: grid; gap: 10px; }
.s-cat {
    display: grid; grid-template-columns: 190px 1fr;
    background: var(--white); border: 1px solid var(--grey-200);
    border-left: 3px solid var(--teal);
    border-radius: var(--r-sm); overflow: hidden; transition: var(--t);
}
.s-cat:hover { border-color: var(--grey-300); box-shadow: var(--drop); }
.s-cat__media { background: var(--grey-150); }
.s-cat__media img { width: 100%; height: 100%; min-height: 132px; object-fit: cover; }
.s-cat__body { padding: 13px 16px; }
.s-cat__body h3 { font-size: 1.02rem; margin-bottom: 5px; color: var(--navy); }
.s-cat__body p  { font-size: .87rem; line-height: 1.5; color: var(--grey-700); margin-bottom: 7px; }

@media (max-width: 700px) {
    .s-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .s-grid .s-card:first-child { grid-column: 1 / -1; }   /* lead product full width */
    .s-grid .s-card:first-child .s-card__thumb { aspect-ratio: 16 / 9; }
    .s-card { padding: 10px; }
    .s-card h3 { font-size: .88rem; }
    .s-card p  { font-size: .78rem; }
    .s-cat { grid-template-columns: 1fr; }
    .s-cat__media img { min-height: 130px; }
}

/* ---------- Kontakt: info grid (form removed — WhatsApp is the channel) ---------- */
.k-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.k-box {
    background: var(--white); border: 1px solid var(--grey-200);
    border-left: 3px solid var(--teal);
    border-radius: var(--r-sm); padding: 12px 15px;
}
.k-box h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); margin-bottom: 7px; }
.k-box p  { font-size: .92rem; line-height: 1.5; margin-bottom: 8px; }
.k-box p:last-child { margin-bottom: 0; }
.k-box a  { color: var(--teal-dk); text-decoration: none; font-weight: 600; }
.k-box a:hover { text-decoration: underline; }
.k-mut { color: var(--grey-500); font-size: .8rem; }

@media (max-width: 700px) { .k-grid { grid-template-columns: 1fr; } }

/* ---------- mobile: level the mascot with the text ----------
   A grid column left a tall dead gap under the 66px mascot. Floating it lets
   the copy wrap around and close under it, so the block reads as one shape. */
@media (max-width: 700px) {
    .r-welcome { display: block; }
    .r-welcome::after { content: ""; display: block; clear: both; }
    .r-mascot { float: left; width: 78px; margin: 2px 13px 6px 0; }
    .r-welcome h1 { text-align: left; margin-bottom: 8px; }
}

/* ==========================================================================
   PROSE — how the big text blocks are set
   Intro sits beside the mascot; everything after runs full width from the
   image's left edge. Section heads get a short rule, echoing the panel caps
   and the strip border. Measure is capped so long paragraphs stay readable.
   ========================================================================== */
.r-welcome {
    display: grid;
    grid-template-columns: 128px 1fr;
    column-gap: 22px;
    row-gap: 10px;
    align-items: start;
}
.r-mascot          { grid-column: 1; grid-row: 1; width: 128px; }
.r-welcome__intro  { grid-column: 2; grid-row: 1; }
.r-welcome__more   { grid-column: 1 / -1; grid-row: 2; }   /* full width, aligned to the image edge */
.r-welcome__intro h1 { margin-bottom: 8px; }
.r-welcome__intro .r-lede,
.r-welcome__more p { margin-bottom: 0; }

/* section heads: short orange rule above, like a stamped marker */
.r-main h2 {
    position: relative;
    padding-top: 13px;
    margin-top: 26px;
}
.r-main h2::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 30px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--orange) 0%, var(--amber) 100%);
}
.r-main > h1 + .r-lede { margin-top: 2px; }

/* readable measure — long lines are the main thing that made these blocks heavy */
.r-main > p, .r-main > .r-lede, .r-welcome__more p { max-width: 68ch; }

@media (max-width: 700px) {
    .r-welcome { grid-template-columns: 100px 1fr; column-gap: 14px; row-gap: 8px; }
    .r-mascot { width: 100px; }
    .r-main h2 { padding-top: 11px; margin-top: 20px; }
    .r-main h2::before { width: 26px; height: 3px; }
}

/* ---------- product thumbnails: fit, never crop ----------
   `height:100%` cannot resolve against an aspect-ratio box, so the image fell
   back to its intrinsic square and overflow:hidden clipped it. Constrain with
   max-* instead and let the centring do the work. */
.s-card__thumb img,
.p-item__media img,
.p-promo img {
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    margin: 0 auto;
}
.p-item__media { display: grid; place-items: center; }
.p-item__media img { max-height: 118px; }
.p-promo { align-items: center; }
.p-promo img { max-height: 120px; }

@media (max-width: 700px) {
    .p-item__media img { max-height: 150px; }
    .p-promo img { max-height: 140px; }
}

/* percentages still can't resolve against the aspect-ratio box — pin the image
   to the box instead, which always resolves */
.s-card__thumb { position: relative; }
.s-card__thumb img {
    position: absolute; inset: 8px;
    width: calc(100% - 16px); height: calc(100% - 16px);
    object-fit: contain; padding: 0; margin: 0;
}

/* ---------- mascot geometry ----------
   Artwork replaced 2026-08-17 with Nikola's own cutout: 519x809 (0.64 w/h),
   where the old scan was 251x351 (0.72). Sizing was driven from width, so the
   narrower aspect silently made it ~21px taller and opened a dead white gap
   beside the intro paragraph. Size now comes from one variable per breakpoint,
   picked so the rendered HEIGHT matches the layout that was already approved.
   If the artwork changes again, change --mascot-w and nothing else. */
:root { --mascot-w: 116px; }                                /* -> 181px tall */
@media (max-width: 700px) { :root { --mascot-w: 96px; } }   /* -> 150px tall */

.r-welcome { grid-template-columns: var(--mascot-w) 1fr; }
.r-mascot  { width: var(--mascot-w); height: auto; margin: 0; }

/* ---------- product hero: stacked, not side-by-side ----------
   Was `grid-template-columns: 300px 1fr` with `align-items:center`, which
   centred the 300px image box against a 444px body — the image started 70px
   below the badge, which is the misalignment Nikola flagged. It also left the
   title only 318px of the 640px content column, so the H1 wrapped hard and the
   two CTAs stacked instead of sitting side by side.
   The saw is a 1.7:1 object; a narrow column was always the wrong container.
   Full-width media on top gives it ~4x the area, gives the copy full measure,
   and makes image and title share a left edge by construction. */
.p-hero { display: block; }
.p-hero__media {
    width: 100%; margin-bottom: 16px; padding: 14px 18px;
    display: grid; place-items: center;
}
.p-hero__media img { width: 100%; max-width: 460px; height: auto; }
.p-hero__body h1 { margin-bottom: 7px; }
.p-hero__body .r-cta-row { margin-top: 14px; }

/* parts list — a service promise, not a product grid */
.p-delovi {
    list-style: none; margin: 8px 0 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
    font-size: .89rem; color: var(--grey-700);
}
.p-delovi li { display: flex; align-items: center; gap: 8px; }
/* the tick SVG carries no intrinsic size, so as a flex child it grows to fill
   the track — it has to be pinned, exactly as .r-services svg is */
.p-delovi svg { flex: 0 0 14px; width: 14px; height: 14px; color: var(--teal); }

@media (max-width: 700px) {
    .p-hero__media { padding: 10px; margin-bottom: 13px; }
    .p-hero__media img { max-width: 100%; }
    .p-delovi { grid-template-columns: 1fr; }
}

/* ---------- product items are links now ----------
   They were <article> with a dead "Cena na upit" span: the shop cards all pointed
   at the bare page, so clicking a chain landed on a picture of the saw and the
   block itself did nothing. Each item is now an <a> that opens WhatsApp already
   asking about that exact item, and carries an id the shop cards deep-link to.
   :target highlights whichever one you arrived for. */
.p-item { text-decoration: none; color: inherit; scroll-margin-top: 16px; }

/* Anchor landings. There is no sticky header, so a target would otherwise sit flush
   against the viewport edge. Every id that something links to lives on one of these. */
.r-rad, .r-usluga, .s-cat, .r-main h2[id] { scroll-margin-top: 18px; }

/* Links inside the tick/fact lists: the lists are dense, so an inline link needs an
   underline to be findable -- colour alone does not read as clickable at .84rem. */
/* ---------- article figures ----------
   The guide and pillar pages had no imagery at all, while the workshop photos were only ever
   used as 118px card thumbnails. Two variants, because the source photos differ by an order of
   magnitude in resolution:
     .a-fig        full content width, for anything >= 800px wide
     .a-fig--side  floats right and the text wraps, for the 400-640px photos that would go soft
                   if stretched. Not a decorative choice -- it is what those files can carry.
   Width/height attributes are emitted from IMG_DIM in site_build.py so the browser reserves the
   box before the file arrives and the text below does not jump. */
.r-foot__mut { opacity: .72; font-size: .92em; }

.a-fig {
    margin: 22px 0; border: 1px solid var(--grey-200); border-radius: var(--r);
    overflow: hidden; background: var(--grey-150); box-shadow: var(--drop);
}
.a-fig img { display: block; width: 100%; height: auto; }
.a-fig figcaption {
    padding: 8px 13px; font-size: .78rem; line-height: 1.45;
    color: var(--grey-700); background: var(--white); border-top: 1px solid var(--grey-200);
}
.a-fig--side { float: right; width: 46%; max-width: 330px; margin: 4px 0 14px 20px; }
.a-fig--side figcaption { font-size: .74rem; }

/* A floated figure must not be overlapped by the next heading. */
.r-main h2 { clear: both; }

@media (max-width: 640px) {
    .a-fig--side { float: none; width: 100%; max-width: none; margin: 22px 0; }
}

.r-services a, .r-facts a, .r-mini a {
    color: var(--teal-dk); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.r-services a:hover, .r-facts a:hover, .r-mini a:hover { color: var(--orange); }
.p-item:hover .p-price { text-decoration: underline; }
.p-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.p-item:target {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(210, 51, 0, .13);
}

/* ---------- video facade ----------
   Poster + play button; the real YouTube iframe is only injected on click.
   A bare embed costs ~1MB of script on every page view even if nobody presses
   play, and this page has to be fast on a phone at the edge of a trench. */
.p-video {
    position: relative; margin-top: 6px; cursor: pointer;
    aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--grey-200); border-radius: var(--r-sm);
    background: #000;
}
.p-video img, .p-video iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border: 0; display: block;
}
.p-video__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 68px; height: 48px; padding: 0; border: 0; background: none;
    cursor: pointer; transition: var(--t);
}
.p-video__play svg { width: 100%; height: 100%; display: block; }
.p-video__play .pv-bg { fill: #1c1c1c; opacity: .82; transition: var(--t); }
.p-video:hover .pv-bg { fill: var(--crimson); opacity: 1; }
.p-video__play:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.p-video__note {
    position: absolute; right: 8px; bottom: 7px;
    background: rgba(0, 0, 0, .55); color: #fff;
    font-size: .68rem; padding: 3px 7px; border-radius: 3px;
}
.p-video.is-playing .p-video__play,
.p-video.is-playing .p-video__note,
.p-video.is-playing img { display: none; }

/* ---------- campaign hero ----------
   Text is live HTML, never baked into the image: crisp on every screen, editable
   without regenerating, and it can restructure for mobile — which it has to, because
   overlaid text on a 2.35:1 image at 360px wide would sit in a 153px-tall strip.
   Desktop overlays it on a scrim; mobile drops it into a panel underneath. */
.c-hero {
    position: relative; margin: 0 0 16px;
    border-radius: var(--r-sm); overflow: hidden;
    background: #14100c;
}
.c-hero > img { display: block; width: 100%; height: auto; }

.c-hero__txt {
    position: absolute; inset: 0 0 0 auto;
    width: 52%; padding: 0 22px 0 42px;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    /* scrim, so the copy holds over both the blown-out sky and the dark trench wall */
    background: linear-gradient(90deg, rgba(12,10,8,0) 0%, rgba(12,10,8,.62) 34%, rgba(12,10,8,.82) 100%);
    color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.c-hero__kicker {
    font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #fff; background: var(--crimson);
    padding: 4px 9px; border-radius: 3px; margin-bottom: 10px;
}
.c-hero__line {
    font-size: 1.62rem; font-weight: 700; line-height: 1.12; letter-spacing: -.01em;
    margin-bottom: 7px;
}
.c-hero__sub { font-size: .93rem; line-height: 1.45; color: rgba(255,255,255,.9); max-width: 30ch; }

/* clean product view, moved down beside the technical data */
.p-shot {
    background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--r-sm); padding: 12px; margin-bottom: 10px;
    display: grid; place-items: center;
}
.p-shot img { width: 100%; max-width: 420px; height: auto; display: block; }

@media (max-width: 700px) {
    .c-hero__txt {
        position: static; width: auto;
        padding: 13px 15px 15px;
        background: #14100c;             /* solid — a scrim can't carry text this small */
        text-shadow: none;
    }
    .c-hero__line { font-size: 1.22rem; }
    .c-hero__sub  { font-size: .87rem; max-width: none; }
    .p-shot { padding: 8px; }
}

/* The saw's bar runs across the middle-right of the crop, so a full-height right-hand
   text column sat on top of it. Anchor the copy to the TOP right instead, over the
   trench wall, and narrow it — the bar passes underneath it now. */
.c-hero__txt {
    inset: 0 0 auto auto; width: 46%;
    padding: 16px 20px 20px 34px;
    justify-content: flex-start;
    background: linear-gradient(200deg, rgba(12,10,8,.80) 0%, rgba(12,10,8,.62) 45%, rgba(12,10,8,0) 100%);
}
.c-hero__line { font-size: 1.42rem; }
@media (max-width: 700px) {
    .c-hero__txt { inset: auto; width: auto; padding: 13px 15px 15px; background: #14100c; }
    .c-hero__line { font-size: 1.22rem; }
}

/* a box-shaped scrim reads as a pasted-on rectangle — fade it toward the bottom-left
   so only the top-right corner is dark, and stop the badge wrapping */
.c-hero__txt {
    width: 50%;
    background: linear-gradient(162deg,
        rgba(12,10,8,.90) 0%, rgba(12,10,8,.74) 52%, rgba(12,10,8,0) 100%);
}
.c-hero__kicker { white-space: nowrap; font-size: .62rem; padding: 4px 8px; }
@media (max-width: 700px) {
    .c-hero__txt { width: auto; background: #14100c; }
    .c-hero__kicker { white-space: normal; font-size: .64rem; }
}

/* ---------- slider captions ----------
   One caption per slide, toggled by the same index as the images, so only the ICS
   slide carries copy. Hidden on mobile: the slider is 980/190 there, which is about
   65px tall on a phone — no amount of type sizing makes text work in that. The mobile
   hero already carries the message in the content panel below. */
.r-caps { position: absolute; inset: 0; pointer-events: none; }
.r-cap {
    position: absolute; inset: 0 0 0 auto; width: 46%;
    display: none; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 0 30px 0 34px; text-decoration: none; color: #fff;
    background: linear-gradient(100deg, rgba(10,9,7,0) 0%, rgba(10,9,7,.55) 32%, rgba(10,9,7,.80) 100%);
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.r-cap.is-on { display: flex; }
.r-cap--ics { pointer-events: auto; }
.r-cap__kicker {
    font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    background: var(--crimson); padding: 3px 8px; border-radius: 3px;
    margin-bottom: 8px; white-space: nowrap;
}
.r-cap__line { font-size: 1.5rem; font-weight: 700; line-height: 1.12; margin-bottom: 5px; }
.r-cap__sub  { font-size: .88rem; color: rgba(255,255,255,.9); margin-bottom: 9px; }
.r-cap__go {
    font-size: .84rem; font-weight: 700; color: #fff;
    border-bottom: 2px solid var(--crimson); padding-bottom: 2px;
}
.r-cap--ics:hover .r-cap__go { border-bottom-color: #fff; }

@media (max-width: 980px) {
    .r-cap__line { font-size: 1.2rem; }
    .r-cap__sub  { font-size: .8rem; }
}
@media (max-width: 700px) {
    .r-caps { display: none; }
}

/* the scrim belongs to the caption that has copy — an empty .r-cap was still painting
   a dark gradient over the right of slides 1 and 3 */
.r-cap { background: none; }
.r-cap--ics.is-on {
    background: linear-gradient(100deg, rgba(10,9,7,0) 0%, rgba(10,9,7,.55) 32%, rgba(10,9,7,.80) 100%);
}

/* ---------- no scrim behind banner copy ----------
   The dark gradient read as a black box pasted over the photograph. Both images are
   backlit with the copy sitting over dark trench wall, so a hard text-shadow carries
   legibility on its own — layered shadows rather than one soft blur, so the letterforms
   stay crisp instead of looking haloed. */
.r-cap--ics.is-on { background: none; }
.r-cap, .c-hero__txt {
    text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 2px 10px rgba(0,0,0,.65), 0 0 26px rgba(0,0,0,.5);
}
.c-hero__txt { background: none; }
.r-cap__sub, .c-hero__sub { color: #fff; }

@media (max-width: 700px) {
    /* the mobile panel is a real panel, not an overlay — it keeps its solid ground */
    .c-hero__txt { background: #14100c; text-shadow: none; }
}

/* Sampled the wide banner's luminance in a 6x3 grid: the top right is 222-236/255 —
   blown-out sky — which is why white copy disappeared there once the scrim came off.
   The bottom right runs 15-84. Anchor the copy there and it stays legible on the
   photograph alone, which is what removing the black box required. */
.c-hero__txt {
    inset: auto 0 0 auto; width: 44%;
    padding: 0 20px 18px 30px;
    justify-content: flex-end;
}
@media (max-width: 700px) {
    .c-hero__txt { inset: auto; width: auto; padding: 13px 15px 15px; }
}

/* ---------- banner copy: right-aligned ----------
   Product hero moves to the TOP right. Measured that corner across four different
   crops and it always sweeps bright-to-dark (the sun sits in it), so plain text on the
   photograph can't hold there. Instead of the black box, a soft corner vignette —
   a radial wash that reads as photographic falloff rather than a pasted panel. */
.c-hero__txt {
    inset: 0 0 auto auto; width: 52%;
    padding: 20px 22px 26px 30px;
    justify-content: flex-start; align-items: flex-end;
    text-align: right;
    background: radial-gradient(120% 130% at 100% 0%,
        rgba(10,8,6,.72) 0%, rgba(10,8,6,.46) 45%, rgba(10,8,6,0) 78%);
}
.c-hero__sub { max-width: 26ch; }

.r-cap { align-items: flex-end; text-align: right; padding: 0 34px 0 30px; }
.r-cap__line { line-height: 1.1; }

@media (max-width: 700px) {
    .c-hero__txt {
        inset: auto; width: auto; padding: 13px 15px 15px;
        align-items: flex-start; text-align: left; background: #14100c;
    }
    .c-hero__sub { max-width: none; }
}

/* manufacturer credibility block */
.p-maker {
    display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start;
    background: var(--white); border: 1px solid var(--grey-200);
    border-radius: var(--r-sm); padding: 15px 17px; margin-top: 8px;
}
.p-maker img { width: 88px; height: auto; }
.p-maker p { font-size: .89rem; margin-bottom: 7px; }
.p-maker__link a { font-weight: 700; font-size: .86rem; color: var(--teal); text-decoration: none; }
.p-maker__link a:hover { text-decoration: underline; }
@media (max-width: 700px) {
    .p-maker { grid-template-columns: 1fr; gap: 10px; }
    .p-maker img { width: 74px; }
}

/* Gradient back behind the slider caption: transparent at the left edge of the block,
   solid at the right. The block is 46% wide and the copy is right-aligned, so the fade
   runs out roughly where the longest line starts — no visible edge, more contrast under
   the white text than a shadow alone can give. */
.r-cap--ics.is-on {
    background: linear-gradient(90deg,
        rgba(0,0,0,0) 0%, rgba(0,0,0,.30) 38%, rgba(0,0,0,.62) 72%, rgba(0,0,0,.82) 100%);
}

/* ---------- manufacturer block, aligned ----------
   The logo is 88x34 inside a ~190px-tall card, so a plain two-column grid left a tall
   empty well beneath it — that void was the problem, not the top alignment. Give the
   mark its own full-height cell, tinted and ruled off, with the logo centred in it.
   Reads as a brand plate and the card has no dead corner. */
.p-maker {
    grid-template-columns: 132px 1fr;
    gap: 0; padding: 0; overflow: hidden; align-items: stretch;
}
.p-maker__mark {
    display: grid; place-items: center;
    padding: 16px 14px;
    background: var(--grey-50, #f7f8f9);
    border-right: 1px solid var(--grey-200);
}
.p-maker__mark img { width: 92px; height: auto; display: block; }
/* Merit's wordmark is white, so its tile carries the machine's own graphite instead of
   grey-50. The colour matches the plate baked into brand-merit.png, so the two meet
   seamlessly and the logo reads as it does on the saw. */
.p-maker__mark--dark { background: #22262b; border-right-color: #22262b; }
.p-maker__body { padding: 15px 18px 16px; }
.p-maker__body p:last-of-type { margin-bottom: 0; }
.p-maker__link { margin-top: 10px; }

@media (max-width: 700px) {
    .p-maker { grid-template-columns: 1fr; }
    .p-maker__mark {
        justify-items: start; padding: 12px 15px;
        border-right: 0; border-bottom: 1px solid var(--grey-200);
    }
    .p-maker__mark img { width: 78px; }
    .p-maker__body { padding: 13px 15px 14px; }
}

/* ---------- shop card thumbs: transparent art, width-driven ----------
   Three near-whites used to stack here — the JPEG carried a baked #ffffff field, the
   thumb box was #fbfcfc and the card is #fff — so the artwork read as a pale rectangle
   inside the card. The art is now a transparent PNG and the box has no fill of its own,
   so there is nothing to mismatch.
   The box was also locked to aspect-ratio:1/1, which made a square image fit to HEIGHT
   and render small — worst on mobile. Sizing is now driven by width: the subject spans
   the full card less a 6% margin each side, and the box height follows the image. */
.s-card__thumb {
    aspect-ratio: auto;
    background: none; border: 0; border-radius: 0;
    padding: 0; overflow: visible; position: static;
    display: block; margin-bottom: 9px;
}
.s-card__thumb img {
    position: static; inset: auto;
    width: 100%; height: auto;
    padding: 0; margin: 0; display: block;
}

@media (max-width: 700px) {
    /* the lead card is full width on mobile; nothing to override any more since the
       image simply fills whatever width the card gives it */
    .s-grid .s-card:first-child .s-card__thumb { aspect-ratio: auto; }
}

/* cross-link thumbs use the same transparent art — no fill to mismatch, and the
   fixed 118px height was cropping the subject small inside a wide media column */
.p-item__media { background: none; padding: 10px 12px; }
.p-item__media img { width: 100%; height: auto; object-fit: contain; }
.p-promo img { width: 100%; height: auto; }

/* "read more" link on a service card that has its own page */
.r-usluga__more { margin: 8px 0 0; }
.r-usluga__more a {
    font-weight: 600; font-size: .9rem; color: var(--teal);
    text-decoration: none; border-bottom: 1px solid rgba(3, 141, 165, .35);
}
.r-usluga__more a:hover { border-bottom-color: var(--teal); }