/* Đurjak transport: page styles. Values come from tokens.css (generated from brand/tokens.json). */

/* Script accent: subset to Serbian Latin lowercase (scripts/subset-fonts.py). Not preloaded. */
@font-face{font-family:"Playfair Display";font-weight:700;font-style:italic;font-display:swap;src:url(../fonts/PlayfairDisplay-BoldItalic-latin.woff2) format("woff2");unicode-range:U+0020-007E}
@font-face{font-family:"Playfair Display";font-weight:700;font-style:italic;font-display:swap;src:url(../fonts/PlayfairDisplay-BoldItalic-latin-ext.woff2) format("woff2");unicode-range:U+0100-017F}

:root{
  --gutter:var(--l-gutter-m); --hdr:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shade:rgb(0 41 65 / .30);
}
@media (min-width:768px){:root{--gutter:var(--l-gutter-l)}}

/* ---------- Tones: every surface is one of two; the theme only decides which section gets which.
   data-l = tone in the light theme, data-d = tone in the dark theme (prefers-color-scheme, no switch).
   Hex values below are fixed mixes of the three brand colours (no new hue). ---------- */
[data-l=sky],.tone-sky{
  --bg:var(--c-sky); --fg:var(--c-navy); --muted:#1d465d;
  --accent:var(--c-navy); --ring:var(--c-navy);
  --surface:var(--c-sky-2); --surface-2:var(--c-sky-3); --line:#8eb7c7;
  --call-bg:var(--c-coral); --call-fg:var(--c-navy); --call-line:var(--c-navy); --call-ledge:var(--c-navy); --call-hi:#e2999e;
  --b2-bg:var(--c-sky); --b2-fg:var(--c-navy); --b2-line:var(--c-navy); --b2-ledge:var(--c-navy); --b2-hi:transparent;
  color-scheme:light;
}
[data-l=navy],.tone-navy{
  --bg:var(--c-navy); --fg:var(--c-sky); --muted:#92bbcb;
  --accent:var(--c-coral); --ring:var(--c-coral);
  --surface:var(--c-navy-2); --surface-2:var(--c-navy-3); --line:#2f586e;
  --call-bg:var(--c-coral); --call-fg:var(--c-navy); --call-line:var(--c-coral); --call-ledge:#844d58; --call-hi:#e2999e;
  --b2-bg:var(--c-navy); --b2-fg:var(--c-sky); --b2-line:var(--c-sky); --b2-ledge:#578094; --b2-hi:rgb(182 223 237 / .28);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  [data-d=sky]{
    --bg:var(--c-sky); --fg:var(--c-navy); --muted:#1d465d;
    --accent:var(--c-navy); --ring:var(--c-navy);
    --surface:var(--c-sky-2); --surface-2:var(--c-sky-3); --line:#8eb7c7;
    --call-bg:var(--c-coral); --call-fg:var(--c-navy); --call-line:var(--c-navy); --call-ledge:var(--c-navy); --call-hi:#e2999e;
    --b2-bg:var(--c-sky); --b2-fg:var(--c-navy); --b2-line:var(--c-navy); --b2-ledge:var(--c-navy); --b2-hi:transparent;
  color-scheme:light;
  }
  [data-d=navy]{
    --bg:var(--c-navy); --fg:var(--c-sky); --muted:#92bbcb;
    --accent:var(--c-coral); --ring:var(--c-coral);
    --surface:var(--c-navy-2); --surface-2:var(--c-navy-3); --line:#2f586e;
    --call-bg:var(--c-coral); --call-fg:var(--c-navy); --call-line:var(--c-coral); --call-ledge:#844d58; --call-hi:#e2999e;
    --b2-bg:var(--c-navy); --b2-fg:var(--c-sky); --b2-line:var(--c-sky); --b2-ledge:#578094; --b2-hi:rgb(182 223 237 / .28);
  color-scheme:dark;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0;font:400 var(--fs-body)/1.5 var(--f-text);background:var(--c-navy);color:var(--c-sky);overflow-x:hidden}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block}
a{color:inherit}
.sprite{position:absolute;width:0;height:0}
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{width:min(100% - 2*var(--gutter),var(--l-max));margin-inline:auto}
.sec{background:var(--bg);color:var(--fg);padding-block:var(--sp-7)}
@media (min-width:900px){.sec{padding-block:var(--sp-8)}}
.h2{font:800 var(--fs-h2)/1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
@media (min-width:700px){.h2{letter-spacing:0}} /* 3rem and up: no tracking */
/* Script accent inside an H2: once per section at most, never below 28 px */
.h2 em{font:italic 700 .78em/1.15 var(--f-script);letter-spacing:0;text-transform:none;color:var(--accent);white-space:nowrap;padding-bottom:.08em}
/* Card and step titles: sentence case, text face. Capitals stay for H2, the slogan and buttons. */
.h3{font:600 var(--fs-h3)/1.2 var(--f-text)}
/* Readability: no single word left alone on the last line of headings and paragraphs. */
h2,h3,.h3{text-wrap:balance} /* not h1: it breaks after each sentence */
p,li{text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.35;font-weight:600}
.muted{color:var(--muted)}
.small{font-size:var(--fs-small);line-height:1.45}
:focus-visible{outline:3px solid var(--ring,var(--c-navy));outline-offset:3px;border-radius:var(--r-1)}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:30;background:var(--c-navy);color:var(--c-sky);padding:12px 16px;border-radius:var(--r-1);font-weight:600}
.skip:focus{top:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Capsule motif (from the logo dashes: long to short) ---------- */
.dashes{display:flex;gap:8px;align-items:center}
.dashes i{display:block;height:8px;border-radius:var(--r-full);background:var(--accent)}
.dashes i:nth-child(1){width:40px}.dashes i:nth-child(2){width:24px}.dashes i:nth-child(3){width:12px}

/* Road line: the same capsules as a full-width lane along the top edge of a section. Mask keeps the tone colour. */
.road{position:relative}
.road::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:var(--line);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='8'%3E%3Crect width='40' height='8' rx='4'/%3E%3Crect x='48' width='24' height='8' rx='4'/%3E%3Crect x='80' width='12' height='8' rx='4'/%3E%3C/svg%3E") repeat-x 0 0;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='116' height='8'%3E%3Crect width='40' height='8' rx='4'/%3E%3Crect x='48' width='24' height='8' rx='4'/%3E%3Crect x='80' width='12' height='8' rx='4'/%3E%3C/svg%3E") repeat-x 0 0}
/* Deeper step of the same tone: lets two neighbours share a tone and still read as two sections. */
.sec-deep{background:var(--surface)}
/* Dark theme: Usluge, Pitanja and Sa terena share the navy tone, so Sa terena takes the deeper step and the road line.
   In the light theme it sits between navy neighbours on its own tone and needs neither. */
@media (prefers-color-scheme:dark){.shots{background:var(--surface)}}
@media not all and (prefers-color-scheme:dark){.shots.road::before{content:none}}

/* ---------- Buttons: a solid block seen from the upper left. The side (--side) runs down and to the right
   as five stacked steps, so the corners stay filled. Hover never moves the block or changes its colour;
   only the icon inside moves (see "Hover" below). Press pushes the face along the same diagonal until the
   side is gone (--k:0) and an inner shade shows it sunk in. ---------- */
.btn{
  --ex:4px;--ey:5px;--k:1;--side:var(--b2-ledge);--inset:inset 0 0 0 transparent;--ground:6px 18px 24px -14px var(--shade);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:56px;padding:0 var(--sp-4);
  border:2px solid var(--b2-line);border-radius:var(--r-2);
  background:var(--b2-bg);color:var(--b2-fg);
  font:800 1.375rem/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  box-shadow:var(--inset),
    calc(var(--ex)*var(--k)*.2) calc(var(--ey)*var(--k)*.2) 0 var(--side),
    calc(var(--ex)*var(--k)*.4) calc(var(--ey)*var(--k)*.4) 0 var(--side),
    calc(var(--ex)*var(--k)*.6) calc(var(--ey)*var(--k)*.6) 0 var(--side),
    calc(var(--ex)*var(--k)*.8) calc(var(--ey)*var(--k)*.8) 0 var(--side),
    calc(var(--ex)*var(--k)) calc(var(--ey)*var(--k)) 0 var(--side),
    var(--ground);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;
  transition:transform var(--t-fast) ease-out,box-shadow var(--t-fast) ease-out;
}
.btn:focus-visible{border-radius:var(--r-2)}
/* Hover and keyboard focus: the block stays put and keeps its colours; the icon inside moves once, in the
   direction it points (arrow forward, out-arrow up and out, app and social glyphs up, phone tilts as if ringing).
   Same move as .tlink. No motion at all when the reader asks for reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .btn .ic,.btn .ic-app{transition:transform var(--t-base) var(--ease)}
  .btn .go{--mv:translateX(4px)}
  .btn .out{--mv:translate(2px,-2px)}
  .btn-loc .ic-app,.btn-soc .ic{--mv:translateY(-2px)}
  .btn-call .tile .ic{--mv:rotate(-12deg)}
  /* One move per button: on call buttons the phone rings and the arrow stays still. */
  .btn:not(.btn-call):focus-visible :is(.go,.out,.ic-app),.btn-soc:focus-visible .ic,.btn-call:focus-visible .tile .ic{transform:var(--mv)}
  @media (hover:hover){.btn:not(.btn-call):hover :is(.go,.out,.ic-app),.btn-soc:hover .ic,.btn-call:hover .tile .ic{transform:var(--mv)}}
}
.btn:active{transform:translate(var(--ex),var(--ey));--k:0;--inset:inset 2px 3px 0 rgb(0 41 65 / .28);--ground:0 0 0 0 transparent}
.btn[disabled],.btn[aria-disabled=true]{--k:0;--ground:0 0 0 0 transparent;cursor:not-allowed;transform:none;border-style:dashed;color:var(--muted)}
.btn[disabled] :is(.go,.out,.ic-app),.btn[aria-disabled=true] :is(.go,.out,.ic-app){transform:none}
.btn-call{
  min-height:72px;padding:0 var(--sp-4) 0 6px;width:100%;max-width:440px;justify-content:flex-start;gap:var(--sp-3);
  border-color:var(--call-line);background:var(--call-bg);color:var(--call-fg);
  --side:var(--call-ledge);--inset:inset 0 2px 0 var(--call-hi);
}
/* Concentric corners: the tile sits 8 px from the button's outer edge (2 px border + 6 px), so its radius is
   16 - 8 = 8. Tile height = button height - 16: 56 in the 72 px button, 48 in the 64 px call bar, 32 in the header. */
.btn-call .tile{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-1);background:var(--c-navy);color:var(--c-sky)}
.btn-call .tile .ic{width:28px;height:28px;fill:currentColor;stroke-width:1.5} /* filled: the call glyph is a level of its own (BRAND.md) */
.btn-call .txt{display:grid;gap:4px;text-align:left}
.btn-call .verb{font-size:1.75rem}
.btn-call .num{font:600 1.125rem/1 var(--f-text);letter-spacing:.02em;text-transform:none;font-variant-numeric:tabular-nums}
.btn-call .go{margin-left:auto}
/* Header button: 48 px face + 4 px side = 52 px inside the 64 px bar (desktop only, mobile uses the call bar). */
.btn-call.is-compact{--ex:3px;--ey:4px;--ground:0 0 0 0 transparent;min-height:48px;width:auto;gap:10px;padding-inline:6px var(--sp-3);margin-bottom:var(--ey)}
.btn-call.is-compact .tile{width:32px;height:32px}
.btn-call.is-compact .tile .ic{width:20px;height:20px}
.btn-call.is-compact .verb{font-size:1.25rem}

/* ---------- Send location: equal, quieter buttons (app glyph above the name) under the call button ---------- */
.loc{margin-top:var(--sp-4);max-width:440px}
.loc-t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:1rem}
/* Touch screens: four buttons (SMS included), 2x2 on narrow phones, one row from 440 px.
   Mouse screens: no SMS app, so SMS is hidden and three buttons stay in one row. */
.loc-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);margin-top:12px}
@media (min-width:440px){.loc-row{grid-template-columns:repeat(4,1fr)}}
@media (hover:hover) and (pointer:fine){.loc-sms{display:none}.loc-row{grid-template-columns:repeat(3,1fr)}}
.btn-loc,.btn-soc{--inset:inset 0 2px 0 var(--b2-hi)} /* thin top light on navy plates */
.btn-loc{--ex:3px;--ey:4px;width:100%;min-height:72px;flex-direction:column;gap:6px;padding:8px 4px;font-size:1.125rem;letter-spacing:.01em}
/* App glyphs take the button text colour (decision 2026-11-10). */
.ic-app{width:26px;height:26px;flex:none;fill:currentColor}
.loc .msg{margin-top:var(--sp-3)}
/* Night line (01-06 h, Serbian time): main.js adds .is-on; without JS it stays hidden and the contact hint covers it. */
.loc .night{margin-top:12px;font-weight:500}
.loc .night a{font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:20;height:var(--hdr);background:var(--bg);color:var(--fg);border-bottom:2px solid var(--c-navy)}
.hdr .wrap{height:100%;display:flex;align-items:center;gap:var(--sp-4)}
.hdr .logo{display:block;padding-block:4px;border-radius:var(--r-1)} /* 41 px mark + padding = 49 px target */
.hdr nav{margin-left:auto;display:none}
.hdr nav ul{display:flex;gap:var(--sp-2)}
.hdr nav a{display:grid;place-items:center;min-height:48px;padding:0 var(--sp-3);border-radius:var(--r-1);font-weight:600;text-decoration:none;
  background:linear-gradient(currentColor,currentColor) no-repeat 16px calc(100% - 10px)/0 2px;transition:background-size var(--t-base) var(--ease)}
@media (hover:hover){.hdr nav a:hover{background-size:calc(100% - 32px) 2px}}
.hdr .open{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:1rem}
.hdr .btn-call{display:none}
@media (min-width:900px){
  .hdr nav{display:block}
  .hdr .open{margin-left:0}
  .hdr .btn-call{display:inline-flex;visibility:hidden;opacity:0;transform:translateX(-8px);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease),visibility 0s var(--t-base)}
  .call-away .hdr .btn-call{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .call-away .hdr .btn-call:active{transform:translate(var(--ex),var(--ey))}
}

/* ---------- Hero ---------- */
.hero{padding-block:var(--sp-5) var(--sp-7);background:linear-gradient(180deg,var(--bg) 45%,var(--surface))}
.hero .grid{display:grid;gap:var(--sp-5)}
.slogan{font:800 var(--fs-display)/.9 var(--f-display);letter-spacing:0;text-transform:uppercase}
.slogan em{display:block;font:italic 700 .62em/1.1 var(--f-script);letter-spacing:0;text-transform:none;color:var(--accent);margin-top:.04em;padding-bottom:.08em}
.hero .dashes{margin-top:var(--sp-3)}
.hero h1{margin-top:var(--sp-4);max-width:22ch}
.hero .btn-call{margin-top:var(--sp-4)}
.facts{display:grid;gap:var(--sp-3)}
.facts li{display:flex;align-items:center;gap:12px;font-weight:600}
.facts .ic{color:var(--accent)}
@media (min-width:1024px){.facts{gap:var(--sp-4)}.facts li{font-size:1.375rem;gap:var(--sp-3)}.facts .ic{width:32px;height:32px}}
.panel{position:relative;z-index:1;background:var(--surface-2);color:var(--fg);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-4);box-shadow:0 24px 40px -28px var(--shade)}
/* Light theme: the facts card takes the navy tone (data-l on the element), so the sky hero has one dark anchor
   and the facts do not read as a greyed-out block. */
@media (prefers-color-scheme:light){.panel{background:var(--bg);border-color:var(--bg)}}
/* Photo frame: navy edge like the form card, so the duotone never melts into a sky or navy section. */
.ph{margin:0;overflow:hidden;border:2px solid var(--c-navy);border-radius:var(--r-2);background:var(--surface-2)}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
/* Caption chip: 8 px inside the 2 px border, radius 16 - 10 = 6 (concentric rule, BRAND.md). */
.ph{position:relative}
.ph figcaption{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 10px;border-radius:6px;background:var(--c-navy);color:var(--c-sky);font-weight:600;font-size:.9375rem;line-height:1.3}
/* Hero: the photo is the surface the facts card stands on; the card overlaps its lower edge. */
.side{position:relative}
.hero-ph{border-radius:var(--r-3);aspect-ratio:4/3;box-shadow:0 24px 40px -28px var(--shade)}
/* Phones (one column): a lower 16:9 frame so the whole photo fits under the buttons on most phones, and the
   four facts in a compact card that overlaps its lower edge (they repeat the H1, so they take little height). */
@media (max-width:767px){
  .hero-ph{aspect-ratio:16/9}
  .hero-ph img{object-position:50% 62%}
  .hero .grid{gap:var(--sp-3)}
  /* The card spans the photo's full width: an inset would leave a sliver of the photo's rounded corner beside it. */
  .hero-ph + .panel{margin:-24px 0 0;padding:12px var(--sp-3);container-type:inline-size}
  /* The card is a size container, so the facts follow the card width and always fill it. */
  .hero .facts{grid-template-columns:repeat(2,auto);justify-content:space-around;gap:8px var(--sp-3)}
  .hero .facts li{align-items:flex-start;gap:8px;font-size:1rem;line-height:1.3}
  .hero .facts .ic{width:20px;height:20px}
  /* Room for four narrow columns: one row, icon above the label. */
  @container (min-width:440px){
    .hero .facts{grid-template-columns:repeat(4,1fr);column-gap:12px}
    .hero .facts li{flex-direction:column;align-items:center;text-align:center;gap:6px}
  }
  /* Room for four items side by side (measured labels + gaps): one row, spread edge to edge. */
  @container (min-width:540px){
    .hero .facts{grid-template-columns:repeat(4,auto);justify-content:space-between;padding-inline:var(--sp-2)}
    .hero .facts li{flex-direction:row;align-items:center;gap:8px}
  }
}
/* Narrowest phones: two columns would break "Čačak i okolina" and "Transport robe" in two; one fact per row. */
@media (max-width:359px){.hero .facts{grid-template-columns:1fr;justify-content:start}}
/* From 768 px the hero has two columns (tablet portrait included); the card overlaps the photo's lower edge. */
@media (min-width:768px){
  .hero .grid{grid-template-columns:1.15fr .85fr;gap:var(--sp-5);align-items:center}
  .hero-ph + .panel{margin:-64px var(--sp-4) 0}
}
@media (min-width:768px) and (max-width:1023px){.slogan{font-size:clamp(4.25rem,12vw,7.5rem)}}
@media (min-width:900px){
  .hero{padding-block:var(--sp-7) var(--sp-8)}
}
@media (min-width:1024px){
  .hero .grid{gap:var(--sp-7)}
  .panel{padding:var(--sp-5)}
}

/* ---------- Kako ide ---------- */
.steps{margin-top:var(--sp-5);display:grid;gap:0}
.steps li{display:grid;grid-template-columns:64px 1fr;grid-template-rows:64px auto;column-gap:var(--sp-3);align-items:start}
.steps .t{grid-column:2;grid-row:1 / span 2;padding-block:16px 12px}
.steps .t p{margin-top:8px;color:var(--muted);max-width:30ch}
.steps .n{display:grid;place-items:center;width:64px;height:64px;border-radius:var(--r-full);background:var(--fg);color:var(--bg);font:800 2rem/1 var(--f-display)}
.steps li:last-child .n{background:var(--c-coral);color:var(--c-navy)}
/* Lane: the road's centre line between two numbers. Equal capsules from the brand motif, spaced evenly so both
   ends are whole capsules, 12 px clear of each circle, in a quiet mix of the text colour. */
.steps .lane{grid-column:1;grid-row:2;justify-self:center;align-self:stretch;width:6px;min-height:40px;margin-block:12px;
  background:color-mix(in srgb,var(--fg) 45%,var(--surface));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='20'%3E%3Crect width='6' height='12' rx='3'/%3E%3C/svg%3E") space;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='20'%3E%3Crect width='6' height='12' rx='3'/%3E%3C/svg%3E") space}
@media (min-width:768px){
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
  .steps li{grid-template-columns:64px 1fr;grid-template-rows:64px auto;align-content:start;row-gap:var(--sp-3)}
  .steps .t{grid-column:1 / -1;grid-row:2;padding-block:0}
  /* The lane runs from the number to the next number (the column gap included); the last step has none. */
  .steps .lane{grid-column:2;grid-row:1;justify-self:stretch;align-self:center;width:auto;height:6px;min-height:0;margin-block:0;
    margin-inline:calc(12px - var(--sp-3)) calc(12px - var(--sp-4));
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6'%3E%3Crect width='12' height='6' rx='3'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6'%3E%3Crect width='12' height='6' rx='3'/%3E%3C/svg%3E")}
}

/* ---------- Usluge ---------- */
.cards{margin-top:var(--sp-5);display:grid;gap:var(--sp-3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:var(--sp-4);display:grid;gap:var(--sp-3);align-content:start;box-shadow:0 20px 32px -26px var(--shade)}
.card .top{display:flex;align-items:center;gap:var(--sp-3)}
/* Service icon: plain, no tile; the navy tile is reserved for the call button. */
.card .ci{width:32px;height:32px;color:currentColor} /* title colour: coral stays for the call button */
/* Leading service: full card in the opposite tone, so the two services do not weigh the same. */
.card.is-main{background:var(--bg);color:var(--fg);border-color:var(--bg);box-shadow:0 28px 40px -24px var(--shade)}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:600;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.tlink .ic{transition:transform var(--t-base) var(--ease)}
@media (hover:hover){.tlink:hover .ic{transform:translateX(4px)}}
/* Six cards: the two lines of business (towing, goods) lead and are wide; four supporting cards follow.
   Links sit on one line at the bottom of each row of cards. */
.card{grid-template-rows:auto 1fr auto}
@media (min-width:600px){.cards{grid-template-columns:1fr 1fr}.card.is-main,.card.is-wide{grid-column:span 2}}
@media (min-width:768px){.cards{gap:var(--sp-4)}.card.is-main,.card.is-wide{padding:var(--sp-5)}}
@media (min-width:1024px){.cards{grid-template-columns:repeat(4,1fr)}}

/* ---------- Pitanja: same tone as Usluge and no top padding, so it reads as the end of that block.
   Answers stay open (no accordion, no JS); each one starts at a 2 px rule. ---------- */
.faq{padding-top:0}
.qa{margin-top:var(--sp-5);display:grid;column-gap:var(--sp-5)}
.qa .q{display:grid;gap:8px;align-content:start;border-top:2px solid var(--line);padding-block:var(--sp-3) var(--sp-4)}
.qa p{max-width:52ch}
@media (min-width:768px){.qa{grid-template-columns:1fr 1fr}}

/* ---------- Sa terena: real jobs. One wide photo, four small; no carousel, no lightbox. ---------- */
.shots-grid{margin-top:var(--sp-5);display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.shots-grid li{aspect-ratio:3/2}
.shots-grid .ph{height:100%}
.shots-grid .big{grid-column:1 / -1}
.shots-grid .wide{grid-column:1 / -1;aspect-ratio:7/3} /* night strip over the whole grid, every width */
.shots .tlink{margin-top:var(--sp-3)}
@media (min-width:900px){
  .shots-grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
  .shots-grid .big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
}

/* ---------- Gde radimo ---------- */
.area .row{position:relative;display:grid;gap:var(--sp-5)}
.area p{max-width:44ch;margin-top:var(--sp-3)}
.area .btn{margin-top:var(--sp-4);width:100%;max-width:440px;justify-content:space-between;padding-inline:var(--sp-3);font-size:1.25rem;letter-spacing:.02em}
/* Rings: capsules around one point (the town and what lies around it). Decoration only, no distances implied. */
.rings{position:absolute;top:-20px;right:0;width:88px;height:88px}
.rings circle{fill:none;stroke:var(--line);stroke-width:8;stroke-linecap:round}
.rings .dot{fill:var(--accent);stroke:none}
@media (max-width:359px){.area .btn{font-size:1.0625rem;letter-spacing:.01em}.rings{width:64px;height:64px;top:-12px}}
@media (min-width:768px){.area .row{grid-template-columns:1fr auto;align-items:center}.area .btn{width:auto;padding-inline:var(--sp-4);gap:var(--sp-3);font-size:1.375rem;letter-spacing:.03em}.rings{position:static;width:300px;height:300px;margin-right:var(--sp-5)}}

/* ---------- Kontakt ---------- */
.contact{position:relative;z-index:1}
.contact .grid{display:grid;gap:var(--sp-6)}
.contact .btn-call{margin-top:var(--sp-4)}
.contact .hint{margin-top:var(--sp-4);max-width:36ch}
/* Trust lines: answers to public warnings about fake tow services. Capsule bullet from the brand motif. */
.contact .trust{margin-top:var(--sp-3);display:grid;gap:8px;max-width:44ch}
.contact .trust li{display:flex;align-items:baseline;gap:10px}
.contact .vcf{margin-top:var(--sp-2)} /* save-contact link under the trust lines; a quiet text link, not a second call button */
.nw{white-space:nowrap}
.contact .trust li::before{content:"";flex:none;width:14px;height:6px;border-radius:var(--r-full);background:var(--muted);transform:translateY(-3px)} /* muted: separates the two claims without drawing the eye from the call button */
.social{margin-top:var(--sp-4);display:flex;gap:var(--sp-2)}
/* Social links are keys like the message buttons: side, press-in, glyph lifts on hover. */
.btn-soc{--ex:3px;--ey:4px;width:56px;min-height:56px;padding:0}
.formcard{border-radius:var(--r-3);padding:var(--sp-4);border:2px solid var(--c-navy);box-shadow:0 6px 0 var(--c-navy),0 28px 40px -24px var(--shade);background:var(--bg);color:var(--fg)}
.formcard form{display:grid;gap:var(--sp-3);margin-top:var(--sp-4)}
.field{display:grid;gap:8px}
.field label{font-weight:600;font-size:1rem}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field textarea{
  width:100%;min-height:56px;padding:12px var(--sp-3);border:2px solid var(--c-navy);border-radius:var(--r-2);
  background:var(--c-sky);color:var(--c-navy);font:400 var(--fs-body)/1.4 var(--f-text);
  box-shadow:inset 0 2px 0 rgb(0 41 65 / .12);transition:box-shadow var(--t-fast) ease-out}
.field textarea{min-height:112px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{border-radius:var(--r-2);outline-offset:2px}
.field [aria-invalid=true]{border-width:4px;padding:10px 14px}
.msg{display:none;align-items:flex-start;gap:8px;font-weight:600;font-size:1rem;line-height:1.35}
.msg .ic{margin-top:-1px}
.field [aria-invalid=true] ~ .msg,.msg.is-on{display:flex}
.status{border:2px solid var(--c-navy);border-radius:var(--r-2);padding:var(--sp-3);background:var(--surface)}
.formcard .btn{width:100%;white-space:nowrap}
@media (max-width:359px){.formcard{padding:var(--sp-3)}.formcard .btn{padding-inline:var(--sp-3);font-size:1.25rem}}
@media (min-width:900px){
  .contact .grid{grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:start}
  .formcard{padding:var(--sp-5)} /* stays inside Kontakt (2026-11-13; it used to reach into Gde radimo) */
}

/* ---------- Footer ---------- */
.ftr{padding-block:var(--sp-6) var(--sp-5)}
.ftr .grid{display:grid;gap:var(--sp-4)}
/* Reversed mark: sky on navy, straight on the footer (decision 2026-11-12); clear space = one stroke (~10 px at 120 px). */
.ftr .mark{display:inline-block;justify-self:start;padding-block:10px}
.ftr .name{font:800 1.5rem/1.1 var(--f-display);letter-spacing:.02em;text-transform:uppercase}
/* Legal line: four short lines (name / tax ids / seat / e-mail) instead of one ~150-character line. */
.ftr .legal span{display:block}
.ftr .priv{display:grid;gap:var(--sp-2);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.ftr .priv p{max-width:70ch}
.ftr .priv h2{font:600 1.125rem/1.2 var(--f-text)}
@media (hover:hover){p a:not([class]):hover{text-decoration-thickness:2px}} /* plain text links: number, privacy, e-mail */
@media (min-width:768px){.ftr .grid{grid-template-columns:auto 1fr;align-items:center;column-gap:var(--sp-5)}.ftr .legal,.ftr .priv{grid-column:1 / -1}}

/* ---------- Mobile call bar: appears only when no call button is on screen ---------- */
.callbar{position:fixed;inset:auto 0 0 0;z-index:25;padding:10px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background:var(--bg);border-top:2px solid var(--c-navy);
  transform:translateY(110%);visibility:hidden;transition:transform var(--t-base) var(--ease),visibility 0s var(--t-base)}
.callbar .btn-call{max-width:none;min-height:64px;margin-inline:auto}
.callbar .btn-call .tile{width:48px;height:48px}
.call-away .callbar{transform:none;visibility:visible;transition-delay:0s}
.typing .callbar{transform:translateY(110%);visibility:hidden}
body{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
/* Keyboard focus never lands under the fixed call bar (WCAG 2.2, 2.4.11). */
@media (max-width:899px){html{scroll-padding-bottom:calc(104px + env(safe-area-inset-bottom))}}
@media (min-width:900px){.callbar{display:none}body{padding-bottom:0}}

/* ---------- 404 ---------- */
.nf{min-height:70vh;display:grid;align-content:center}
.nf p{margin-top:var(--sp-3)}
.nf .btn-call{margin-top:var(--sp-5)}
.nf .tlink{margin-top:var(--sp-4)}

/* ---------- Motion: calm, tied to the reader's own scrolling; nothing loops ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @supports (animation-timeline:view()){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
    @keyframes rise{from{opacity:.4;transform:translateY(12px)}}
  }
  /* Hero: slogan, H1 and the call button never move (LCP). The side pieces enter once, staggered, 400 ms at most. */
  .hero .dashes i{transform-origin:left;animation:draw 320ms var(--ease) both}
  .hero .dashes i:nth-child(2){animation-delay:90ms}.hero .dashes i:nth-child(3){animation-delay:180ms}
  .hero .panel{animation:enter 400ms var(--ease) 120ms both}
  @keyframes draw{from{transform:scaleX(0)}}
  @keyframes enter{from{opacity:0;transform:translateY(16px)}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}