/* ============================================================
     1) DESIGN TOKENS
     Every color, font and spacing value the site uses lives here,
     as a CSS "custom property" (a variable). Change one line here
     and it updates everywhere it's used. This is the single most
     useful CSS habit to build early.
     ============================================================ */
  :root{
    /* Palette lifted from IVECO's own site: their near-black is
       #14181f and their brand accent is the electric blue #1554ff.
       The earlier teal was a guess at "nod to Iveco" — this is the
       real thing, and it happens to match the blue on Auto Animo's
       own building in the hero photo. */
    --ink:      #14181f;   /* IVECO near-black — text / dark sections */
    --steel:    #5a6472;   /* secondary text, borders                 */
    --fog:      #eef0f3;   /* light background for alt sections       */
    --paper:    #ffffff;   /* main page background                    */
    --iveco:    #1554ff;   /* IVECO electric blue — primary accent    */
    --iveco-dk: #0f3fc4;   /* pressed / hover state for the accent    */
    /* Darkened from #e8590c, which measured 3.58:1 on white — below AA for
       the error messages and the required-field asterisk that use it. This
       is 5.18:1 on white and 4.54:1 on --fog. */
    --signal:   #c2410c;   /* functional only: errors + focus ring    */
    --line:     #dfe3e8;   /* soft card borders                       */
    --white:    #ffffff;

    /* Rubik, self-hosted (_build/get-fonts.py). Its letters are built from
       rounded rectangles — the same geometry as the IVECO wordmark and the
       Auto Animo logo — so text, logos and the pill buttons share one
       shape language. Chosen in October 2026 when the client asked for a
       "rounder" face than Barlow.

       It is a VARIABLE font: one file per subset carries every weight from
       400 to 700, so any weight in that range renders exactly. Outside it
       the browser clamps to 400 or 700.

       Display and body are the same face; both tokens are kept so the roles
       can diverge again in one line. */
    --font-display: 'Rubik', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'Rubik', 'Segoe UI', system-ui, sans-serif;

    --radius:    6px;      /* inputs and small chrome                 */
    --radius-lg: 16px;     /* photos and large cards — the modern bit */
    --radius-pill: 999px;  /* CTA buttons — see the .btn note         */
    --max-w: 1180px;
  }

  /* ============================================================
     2) RESET
     Browsers ship with their own default margins/paddings/box
     sizing per element. We zero them out so OUR css is the only
     thing deciding spacing — otherwise every browser looks slightly
     different.
     ============================================================ */
  *, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
  html{ scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
    *{ animation: none !important; transition: none !important; }
  }
  body{
    font-family: var(--font-body);
    /* Rubik's Regular is already sturdy — about as dark as most faces'
       Medium — so 400 keeps the firm page the client asked for without
       turning paragraphs into a wall of bold. */
    font-weight: 400;
    color: var(--ink);
    background: var(--paper);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  img{ max-width: 100%; display: block; }
  a{ color: inherit; text-decoration: none; }
  ul{ list-style: none; }
  .wrap{ max-width: var(--max-w); margin-inline: auto; padding-inline: 24px; }
  .skip-link{
    position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--white);
    padding: 10px 16px; z-index: 100;
  }
  .skip-link:focus{ left: 24px; top: 24px; }
  :focus-visible{ outline: 3px solid var(--signal); outline-offset: 2px; }

  h1, h2, h3, h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.18; text-wrap: balance; }
  /* balance: a two-line heading splits evenly instead of leaving one word
     ("mjestu.") alone on the second line. */

  /* ---- Labels ------------------------------------------------------------
     Every small readout — eyebrows, spec lines, form labels, phone numbers
     in the utility bar — is set at 500 with tabular figures, so phone
     numbers and tonnages line up. (Until September 2026 these were
     JetBrains Mono, which made a truck dealer's site read like a code
     editor.) Add new label-type elements to
     this list rather than restating the font on each. */
  .eyebrow, .plate-row dt, .hero-stats dt, .cert-card small,
  .card .spec, .model-links a, .moto-card span, .utility-contact,
  .mega-tab small, .mega-group h4, .mega-item small, .logo-fallback,
  .veh-spec, .veh-cta, .field label, .footer-col h4, .map-consent .addr-line{
    font-family: var(--font-display);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }

  /* <strong> steps up to 600 and darkens to --ink — paragraphs are
     --steel, so the colour carries emphasis as well. */
  strong, b{ font-weight: 600; color: var(--ink); }

  /* The IVECO wordmark set inline in running text, in place of the word
     (client request, October 2026 — landing page only). Sized so the
     logo's letters stand exactly as tall as the surrounding capitals:
     Rubik's cap height is 0.7em, and the SVG's letters fill 26.2 of its
     27.19 units (the V dips 1 unit below the others), so the box is
     0.7 x 27.19/26.2 = 0.726em tall and drops 0.026em below the baseline to
     sit the letters on it. Re-derive both numbers if the font changes.
     On dark bands it is knocked out to white, as IVECO's own negative logo
     is — safe because the SVG has real transparency. */
  .iveco-word{ display:inline-block; height:0.726em; width:auto; vertical-align:-0.026em; }
  .hero .iveco-word, .cta-banner .iveco-word, .certs .iveco-word{ filter: brightness(0) invert(1); }

  .eyebrow{
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--iveco);
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* The eyebrow used to carry a small blue dash before the text. With one
     on nearly every section it added a lot of marks for no meaning, so the
     label now stands on its own. */

  /* Pill CTAs: fully rounded, uppercase, letterspaced. Against the cards'
     smaller radius they give the one "click me" element a shape nothing
     else on the page has. The tracking is what makes uppercase
     readable at this size; without it the caps crowd.

     Deliberately no arrow glyph inside the pill: "↗" already means "this
     leaves the site" here, and a second arrow on every button would say the
     same thing twice. */
  .btn{
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 30px;
    border-radius: var(--radius-pill);
    display: inline-block;
    border: 2px solid transparent;
  }
  /* Primary action is IVECO blue, not black — it's the one colour on
     the page that should mean "click me", so nothing else uses it as
     a fill. Black is demoted to the neutral/ghost button. */
  .btn-solid{ background: var(--iveco); color: var(--white); }
  .btn-solid:hover{ background: var(--iveco-dk); }
  .btn-outline{ border-color: var(--ink); color: var(--ink); }
  .btn-outline:hover{ border-color: var(--iveco); color: var(--iveco); background: rgba(21,84,255,0.05); }

  /* ============================================================
     3) THE SPEC CARD
     A vehicle's stamped ID plate: a bordered box with condensed
     labels and values in two columns. It used to draw four corner
     "rivets" as well — literal but purely decorative, and with
     several plates per page that was a lot of marks doing nothing.
     The two-column label/value rhythm carries the idea on its own.
     ============================================================ */
  .plate{
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
  }
  .plate-row{ display:flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--fog); font-size: 0.92rem; align-items: baseline; }
  .plate-row:last-child{ border-bottom: none; }
  .plate-row dt{ font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--steel); }
  .plate-row dd{ font-weight: 700; text-align: right; }

  /* ============================================================
     4) HEADER / NAV
     ============================================================ */
  /* Was a diagonal hazard-stripe band. It shouted, and with one above the
     footer on every page plus another on the home page it was doing the
     shouting repeatedly. A single accent rule marks the same boundary. */
  .stripe-divider{ height: 3px; background: var(--iveco); }

  .logo-fallback{ letter-spacing:0.06em; }
  .cert-card .logo-fallback{ color: var(--white); font-size:0.8rem; }
  .moto-card .logo-fallback{ color: var(--ink); font-size:0.95rem; height:48px; display:flex; align-items:center; justify-content:center; margin-bottom:10px; }

  header{
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--fog);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-block: 16px;
  }
  .logo-lockup{ display:flex; align-items:center; }
  /* The wordmark is 11.79:1 — far wider than the logo file it replaced, so it
     is sized by HEIGHT ONLY. Never give it a max-width: an <img> defaults to
     object-fit:fill, so clamping the width against a fixed height squashes the
     letterforms rather than scaling them. That is exactly what the old
     `max-width:170px` in the 620px block was doing. object-fit:contain is kept
     as a backstop so a future clamp letterboxes instead of distorting.
     The third step down lives in the max-width:620px block near the bottom. */
  .logo-mark{ height:28px; width:auto; object-fit:contain; }
  @media (max-width:1080px){ .logo-mark{ height:22px; } }
  /* Sized against the two wordmarks it sits between. Both logos are 28px of
     pure cap height. Rubik's cap height is 0.7em, so 1rem gives 11.2px caps
     — clearly secondary to the logos, not dwarfed by them. Rubik is wide:
     check the 900px clearance before growing this. */
  .nav-links{ display:flex; align-items:center; gap: 24px; font-family: var(--font-display); font-size:1rem; font-weight:500; }
  @media (max-width:1160px){ .nav-links{ font-size:0.94rem; gap:18px; } }
  /* 880-1000px is the tight band: both logos and five links share the bar. */
  @media (max-width:1000px){ .nav-links{ font-size:0.88rem; gap:12px; } }
  .nav-links a{ position:relative; padding-block:4px; }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--iveco);
    transition: width .2s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-cta{ display:flex; align-items:center; gap:12px; }
  /* The manufacturer mark sits where the quote button used to. It is a badge
     of authorisation, not navigation — deliberately not a link, because the
     mega menu's whole point is to keep a visitor on a page of ours that has a
     quote CTA rather than sending them to iveco.com. Hidden below 880px,
     where the Auto Animo wordmark and the hamburger already fill the bar; the
     quote button survives there inside the mobile menu.

     Both logo files are cropped to their ink, so setting the same CSS height
     on each gives the same LETTER height — which is what "matching" means for
     two wordmarks of very different widths (11.79:1 against 6.10:1). The
     IVECO PNG shipped with padding that made its ink only 72.5% of the file
     height, so at an equal CSS height it rendered a third smaller than the
     Auto Animo mark; it is now cropped to 177x29. Keep both heights equal. */
  .nav-brand{ height:28px; width:auto; object-fit:contain; }
  @media (max-width:1080px){ .nav-brand{ height:22px; } }
  .hamburger{
    display:none; background:none; border:2px solid var(--ink); border-radius: var(--radius);
    width:42px; height:42px; cursor:pointer; position:relative;
  }
  .hamburger span, .hamburger span::before, .hamburger span::after{
    content:""; position:absolute; left:10px; right:10px; height:2px; background: var(--ink);
  }
  .hamburger span{ top:20px; }
  /* The two outer bars are positioned inside the span, so they must span IT
     (left/right 0) — inheriting the 10px insets above gave them negative
     width and the button showed one line instead of three. */
  .hamburger span::before, .hamburger span::after{ left:0; right:0; }
  .hamburger span::before{ top:-7px; }
  .hamburger span::after{ top:7px; }

  /* ============================================================
     5) HERO
     ============================================================ */
  /* The photo is the backdrop now, not a column beside the copy. Three layers:
     .hero-bg (the rotating photos) -> .hero-scrim (legibility) -> .wrap (copy).
     Text sits on the left half, and every one of these press shots puts its
     vehicle right of centre, so the scrim is a left-to-right gradient: near
     opaque where the words are, thin enough on the right to leave the truck
     visible. That is what lets one treatment work over a dark studio shot and
     a bright sky alike. */
  .hero{
    position:relative; isolation:isolate; overflow:hidden;
    padding-block: 72px 64px;
    background: var(--ink);
  }
  .hero-bg{ position:absolute; inset:0; z-index:0; }
  .hero-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(100deg, rgba(20,24,31,0.95) 0%, rgba(20,24,31,0.88) 38%,
                              rgba(20,24,31,0.55) 68%, rgba(20,24,31,0.28) 100%),
      linear-gradient(to top, rgba(20,24,31,0.55), rgba(20,24,31,0) 45%);
  }
  .hero > .wrap{ position:relative; z-index:2; }
  /* Copy occupies the left; the right stays clear so the vehicle can be seen. */
  .hero-grid{ display:grid; grid-template-columns: minmax(0, 640px) 1fr; gap: 44px; align-items:center; }

  /* Everything in the hero is now light-on-dark. --iveco measures 3.17:1 on
     --ink, which fails AA for text, so the eyebrow uses --fog rather than the
     accent — same rule the certs strip already follows. */
  .hero .eyebrow{ color: var(--fog); }
  .hero h1, .hero-stats dd{ color: var(--white); }
  .hero-stats dd a{ color: var(--white); }
  .hero-stats dd a:hover{ color: var(--fog); text-decoration:underline; }
  .hero .btn-outline{ border-color: var(--white); color: var(--white); }
  .hero .btn-outline:hover{ border-color: var(--white); color: var(--ink); background: var(--white); }
  /* The size is set against the LOGO, not picked by eye. Rubik's cap
     height is 0.7em, so 2.5rem gives 28px capitals against
     the 28px wordmark: the same letter size, so slogan and brand read as
     equals. (At one point the slogan's caps were half again as tall as the
     logo and the hero read as shouting over the brand.) Change one of these
     two numbers and the other needs revisiting. */
  .hero h1{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height:1.12; margin-block: 18px 20px; }
  .hero p{ color: var(--fog); font-size: 1.05rem; max-width: 46ch; margin-bottom: 30px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
  .plate-row dd.accent{ color: var(--iveco); }

  /* Three facts under the slogan, replacing the big spec card that used
     to sit where the photo now goes. They stay put while the slider
     rotates above them, so the layout never shifts height. */
  .hero-stats{
    display:grid; grid-auto-flow:column; justify-content:start; gap:34px;
    margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.22);
  }
  .hero-stats dt{
    font-size:0.72rem; letter-spacing:0.1em;
    text-transform:uppercase; color: var(--fog); opacity:0.75; margin-bottom:3px;
  }
  .hero-stats dd{ font-family: var(--font-display); font-weight:600; font-size:0.95rem; }

  /* Each photo fills the whole hero and crops to taste — the section's height
     is set by the copy, so differing source ratios (the building is 1.776:1,
     the press shots 3.6:1) cannot shift the layout. object-position keeps the
     vehicle in view on the right, where the scrim is thinnest.

     The banners are served at their native 1440px rather than the 591px crops
     they used to be: as a backdrop those would upscale roughly 2.7x. */
  .hero-photo{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover; object-position:center;
    opacity:0; transition: opacity 1s ease;
  }
  .hero-photo.active{ opacity:1; }


  /* ============================================================
     6) CERTIFICATION / BRAND STRIP
     ============================================================ */
  .certs{ background: var(--ink); padding-block: 36px; }
  .certs .eyebrow{ color: var(--fog); margin-bottom: 20px; }
  .cert-row{ display:flex; gap:16px; flex-wrap:wrap; }
  .cert-card{
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: var(--radius);
    padding: 14px 18px;
    display:flex; align-items:center; gap:12px;
    flex: 1 1 200px;
    transition: transform .2s ease, background .2s ease;
  }
  .cert-card:hover{ background: rgba(255,255,255,0.09); }
  /* Logos sit on their own white tile rather than being tinted white.
     `filter: brightness(0) invert(1)` only knocks a logo out cleanly if the
     file has a real alpha channel. Four of these five don't — Piaggio and
     Aprilia are JPEGs, Vespa and Moto Guzzi are flattened 8-bit PNGs — so
     every pixel is opaque and the filter painted the whole box solid white.
     The logos weren't failing to load; they were being erased. A white tile
     works no matter how the file is encoded, and keeps each mark in its own
     brand colours, which is what the manufacturers require anyway. */
  .cert-card img{
    width:96px; height:44px; flex:none;
    object-fit:contain;
    background: var(--white);
    border-radius: 2px;
    padding: 6px 8px;
  }
  .cert-card small{ color: var(--fog); font-size:0.72rem; letter-spacing:0.08em; display:block; }
  .cert-card strong{ color: var(--white); font-size:0.9rem; white-space: nowrap; }

  /* ============================================================
     7) SECTION SCAFFOLDING + SCROLL REVEAL
     ============================================================ */
  section{ padding-block: 84px; }
  .alt{ background: var(--fog); }
  .section-head{ max-width: 60ch; margin-bottom: 44px; }
  .section-head h2{ font-size: clamp(1.55rem, 2.8vw, 2.1rem); margin-top:10px; }

  /* Spacing that used to live in style="" attributes across the page bodies.
     It moved here so the CSP can drop style-src 'unsafe-inline' — and because
     one-off spacing scattered through markup is how two identical blocks end
     up 2px apart. Add a rule here rather than a style attribute: an inline
     style="" now fails the CSP and silently does nothing. */
  .h-lead{ margin-block: 12px 16px; }                  /* heading right under an eyebrow */
  .lead{ color: var(--steel); font-size: 1rem; max-width: 48ch; margin-bottom: 24px; }
  .plate > .eyebrow{ margin-bottom: 12px; }
  .plate + .dept-grid{ margin-top: 20px; }
  .moto-grid + .grid-3{ margin-top: 44px; }
  .form-grid .contact-actions{ margin-top: 0; }
  .page-header .hero-ctas{ margin-top: 28px; }
  .reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }

  /* ============================================================
     8) PROGRAM / CAPABILITY GRIDS
     ============================================================ */
  .grid-3{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:20px; }
  .card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding:26px; height:100%; box-shadow: 0 1px 2px rgba(20,24,31,0.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .card:hover{ box-shadow: 0 10px 26px rgba(20,24,31,0.10); border-color: var(--steel); }
  .alt .card{ background: var(--paper); }
  .card h3{ font-size:1.12rem; margin-block: 10px 8px; }
  .card p{ color: var(--steel); font-size:0.92rem; }
  .card .spec{ margin-top:14px; font-size:0.8rem; color: var(--ink); border-top:1px dashed var(--steel); padding-top:10px; }
  .model-links{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
  .model-links a{
    font-size:0.72rem; letter-spacing:0.03em;
    border:1px solid var(--steel); border-radius:3px; padding:4px 8px; color: var(--ink);
  }
  .model-links a:hover{ border-color: var(--iveco); color: var(--iveco); }

  /* ============================================================
     9) ABOUT
     ============================================================ */
  .about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; }
  .about-grid img{ border-radius: var(--radius-lg); box-shadow: 0 20px 48px rgba(20,24,31,0.16); }
  .about-grid p{ color: var(--steel); font-size: 1rem; margin-bottom:16px; }

  /* ============================================================
     10) MOTO STRIP
     ============================================================ */
  .moto-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:18px; }
  .moto-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding:18px; text-align:center; box-shadow: 0 1px 2px rgba(20,24,31,0.04); transition: border-color .2s ease, box-shadow .2s ease; }
  .moto-card:hover{ border-color: var(--iveco); box-shadow: 0 12px 28px rgba(20,24,31,0.10); }
  .moto-card img{ width:100%; max-width:110px; height:48px; margin:0 auto 10px; object-fit:contain; }
  .moto-card span{ font-size:0.74rem; letter-spacing:0.06em; color: var(--steel); }

  /* ============================================================
     11) CONTACT
     ============================================================ */
  .contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:48px; align-items:start; }
  /* Grid items default to min-width:auto, i.e. never narrower than their
     widest unbreakable content. The form's <select> sizes itself to its
     longest option, which at 320px pushed the page 15px sideways. */
  .contact-grid > *, .about-grid > *, .hero-grid > *{ min-width: 0; }
  .contact-grid h2{ font-size: clamp(1.55rem,2.8vw,2.1rem); margin-bottom:16px; }
  .contact-actions{ display:flex; gap:14px; margin-top:24px; flex-wrap:wrap; }

  footer{ background: var(--ink); color: var(--fog); padding-block:28px; }
  .footer-row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.82rem; }
  /* Not the blue accent here: #1554ff on the near-black footer is only
     3.17:1, below the 4.5:1 AA threshold for text. White is the only
     hover that stays readable on this background. */
  .footer-row a:hover{ color: var(--white); text-decoration: underline; }

  /* ============================================================
     12) RESPONSIVE — mobile-first breakpoint
     Below 880px we go from side-by-side to stacked, and swap the
     desktop nav for a hamburger menu.
     ============================================================ */
  /* ============================================================
     13) MULTI-PAGE ADDITIONS
     Everything below supports splitting the single homepage into
     several real pages that share this same stylesheet.
     ============================================================ */
  .nav-links a.active{ color: var(--iveco); }
  .nav-links a.active::after{ width:100%; }

  .page-header{ background: var(--fog); padding-block: 56px 48px; }
  .page-header h1{ font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-block: 14px 14px; }
  .page-header p{ color: var(--steel); font-size: 1.04rem; max-width: 56ch; }

  .cta-banner{ background: var(--ink); color: var(--white); padding-block: 52px; }
  .cta-banner-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .cta-banner h2{ font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
  .cta-banner p{ color: var(--fog); margin-top:6px; }

  .pillars{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:20px; }
  .pillar-card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding:30px; box-shadow: 0 1px 2px rgba(20,24,31,0.04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .pillar-card:hover{ box-shadow: 0 10px 26px rgba(20,24,31,0.10); border-color: var(--steel); }
  .pillar-card h3{ font-size:1.2rem; margin-block:10px 8px; }
  .pillar-card p{ color: var(--steel); font-size:0.92rem; margin-bottom:16px; }
  /* Compact pills: uppercase + tracking needs more side padding than the old
     square buttons did, or the caps sit on the curve. */
  .pillar-card .btn{ padding: 10px 22px; font-size:0.8rem; }

  .map-frame{ border:1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: 0 12px 32px rgba(20,24,31,0.10); }
  .map-frame iframe{ width:100%; height:340px; border:0; display:block; }

  @media (max-width: 880px){
    .nav-links{ display:none; }
    .hamburger{ display:block; }
    .nav.open .nav-links{
      display:flex; position:absolute; top:100%; left:0; right:0;
      flex-direction:column; background: var(--paper); padding:20px 24px;
      border-bottom:1px solid var(--fog); gap:2px;
    }
    .hero-grid, .about-grid, .contact-grid{ grid-template-columns: 1fr; }
    /* One column means the copy runs the full width, so the left-weighted
       gradient no longer covers it. Flatten the scrim instead. */
    .hero-scrim{
      background:
        linear-gradient(to bottom, rgba(20,24,31,0.90), rgba(20,24,31,0.82)),
        linear-gradient(to top, rgba(20,24,31,0.5), rgba(20,24,31,0) 50%);
    }
    .about-grid{ direction: ltr; }
    .about-grid img{ order:-1; }
    .cta-banner-row{ flex-direction: column; align-items:flex-start; }

  }

  /* ============================================================
     14) UTILITY BAR
     The real Auto Animo site puts IVECO's own tools (used stock,
     configurator, dealer network, press) in the main menu alongside
     the dealer's own pages. Mixing "our pages" and "IVECO's pages"
     in one row makes it unclear what belongs to whom, so the
     outbound IVECO links live up here in a thin utility strip and
     the main nav below stays purely Auto Animo.
     ============================================================ */
  .utility{ background: var(--ink); color: var(--fog); font-size: 0.8rem; }
  .utility-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:8px; flex-wrap:wrap; }
  .utility-contact{ display:flex; gap:20px; font-size:0.78rem; letter-spacing:0.03em; }
  .utility-contact a:hover{ color: var(--white); }
  /* Standalone links on phones need a tappable height, not just the text's. */
  .utility-contact a, .footer-col li a{ display:inline-block; padding-block:5px; }
  .utility-links{ display:flex; gap:16px; flex-wrap:wrap; }
  .utility-links a{ color: var(--fog); opacity:0.85; }
  .utility-links a:hover{ opacity:1; color: var(--white); text-decoration:underline; }
  .utility-links a::after{ content:" ↗"; font-size:0.7em; opacity:0.6; }
  @media (max-width: 880px){
    .utility-links{ display:none; }
    .utility-row{ justify-content:center; }
  }

  /* ============================================================
     15) PRODUCT MEGA MENU
     "Proizvodi" opens a panel listing the whole IVECO range, split
     into four use-cases and then by weight class — the same shape
     the manufacturer uses, so a haulier already knows where to look.
     On desktop it's a dropdown; below 880px the same markup becomes
     an accordion inside the mobile menu. One set of HTML, two
     behaviours, decided entirely in CSS.
     ============================================================ */
  .nav-links > li{ position: static; }
  .mega-toggle{
    font: inherit; background:none; border:0; cursor:pointer;
    color: inherit; padding-block:4px; position:relative;
    display:inline-flex; align-items:center; gap:7px;
  }
  .mega-toggle::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background: var(--iveco);
    transition: width .2s ease;
  }
  .mega-toggle:hover::after, .mega-toggle[aria-expanded="true"]::after{ width:100%; }
  .mega-toggle .chev{ transition: transform .2s ease; font-size:0.7em; }
  .mega-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }
  .mega-toggle.active{ color: var(--iveco); }

  .mega{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background: var(--white);
    border-top:1px solid var(--fog);
    border-bottom:1px solid var(--ink);
    box-shadow: 0 18px 40px rgba(20,24,28,0.12);
  }
  .mega.open{ display:block; }
  .mega-inner{
    max-width: var(--max-w); margin-inline:auto; padding: 30px 24px 34px;
    display:grid; grid-template-columns: 244px 1fr; gap:34px;
  }
  .mega-tabs{ display:flex; flex-direction:column; gap:4px; border-right:1px solid var(--fog); padding-right:20px; }
  .mega-tab{
    font: inherit; font-weight:500; font-size:0.98rem; text-align:left;
    background:none; border:0; cursor:pointer; color: var(--steel);
    padding:13px 14px; border-radius: var(--radius);
    display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .mega-tab:hover{ background: var(--fog); color: var(--ink); }
  .mega-tab[aria-selected="true"]{ background: var(--ink); color: var(--white); }
  .mega-tab small{ font-size:0.72rem; opacity:0.7; }

  .mega-panel{ display:none; }
  .mega-panel.active{ display:block; }
  .mega-groups{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:28px; }
  .mega-group h4{
    font-size:0.72rem; letter-spacing:0.1em;
    text-transform:uppercase; color: var(--iveco);
    border-bottom:1px dashed var(--steel); padding-bottom:9px; margin-bottom:9px;
  }
  .mega-item{ display:flex; align-items:center; gap:13px; padding:9px 9px; border-radius: var(--radius); }
  .mega-item:hover{ background: var(--fog); }
  .mega-item img{ width:66px; height:50px; flex:none; object-fit:contain; }
  .mega-item b{ font-family: var(--font-display); font-weight:600; font-size:0.98rem; display:block; }
  .mega-item small{ font-size:0.72rem; color: var(--steel); letter-spacing:0.04em; }
  .mega-foot{
    grid-column:1 / -1; margin-top:22px; padding-top:16px; border-top:1px solid var(--fog);
    display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  }
  .mega-foot .btn{ padding:12px 26px; font-size:0.8rem; }
  .mega-foot span{ font-size:0.92rem; color: var(--steel); }
  .mega-foot span a{ color: var(--iveco); font-weight:700; }

  /* ============================================================
     16) HERO SLIDER
     The previous autoanimo.com rotated IVECO's campaign messages in a carousel.
     Same idea here, but only the left-hand copy changes — the spec
     plate on the right stays put so the layout never jumps. It
     pauses on hover/focus, stops entirely for anyone who has asked
     for reduced motion, and works with the arrows alone if JS
     autoplay is off.
     ============================================================ */
  /* All slides share one grid cell, so the slider is always as tall as the
     TALLEST slide. With display:none on inactive slides the hero resized on
     every rotation and the stats row and the page below bounced — the first
     slogan runs to two lines where the others take one. visibility:hidden
     also keeps inactive slides out of the accessibility tree (block E sets
     inert and aria-hidden on them as well). */
  .hero-slider{ display:grid; }
  .hero-slide{ grid-area: 1 / 1; visibility:hidden; }
  .hero-slide.active{ visibility:visible; animation: heroIn .45s ease; }
  @keyframes heroIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
  .hero-controls{ display:flex; align-items:center; gap:16px; margin-top:32px; }
  /* The dots double as a progress bar: the current slide stretches into a
     short bar instead of just filling in, so at a glance you can see both
     where you are and how many there are. They were 9px circles, which read
     as specks against 28px logos and a 43px slogan. */
  .hero-dots{ display:flex; align-items:center; gap:14px; }
  .hero-dot{
    position:relative;
    width:12px; height:12px; padding:0; border-radius:99px; cursor:pointer;
    border:1px solid rgba(255,255,255,0.55); background:none;
    transition: width .3s ease, background-color .2s ease, border-color .2s ease;
  }
  .hero-dot:hover{ border-color: var(--white); background: rgba(255,255,255,0.35); }
  /* The dot stays 12px to look at but takes taps over 26x28px, above the
     24px minimum (WCAG 2.5.8). The 14px gap keeps neighbours' areas apart. */
  .hero-dot::after{ content:""; position:absolute; inset:-8px -7px; }
  .hero-dot[aria-current="true"]{
    width:38px; background: var(--white); border-color: var(--white);
  }
  .hero-arrow{
    width:36px; height:36px; flex:none; cursor:pointer; background:none;
    border:1px solid rgba(255,255,255,0.55); border-radius: var(--radius);
    color: var(--white); font-size:0.95rem; line-height:1;
  }
  .hero-arrow:hover{ border-color: var(--white); background: rgba(255,255,255,0.16); }
  /* Injected by script.js block E3, so it only exists when there is actually
     something moving to stop. Pushed to the end of the row because it acts on
     the whole hero, not on the slide the arrows step through. */
  .hero-pause{ margin-left:auto; font-family: var(--font-display); font-weight:500; font-size:0.72rem; letter-spacing:0.05em; }
  .hero-pause[aria-pressed="true"]{ background: var(--white); color: var(--ink); border-color: var(--white); }

  /* ============================================================
     17) VEHICLE CARDS
     ============================================================ */
  .veh-groups{ display:grid; gap:52px; }
  .veh-group > .eyebrow{ margin-bottom:6px; }
  .veh-group h3{ font-size:1.35rem; margin-bottom:6px; }
  .veh-group > p{ color: var(--steel); font-size:0.95rem; max-width:62ch; margin-bottom:22px; }
  .veh-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(235px,1fr)); gap:20px; }
  .veh-card{
    background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg);
    overflow:hidden; display:flex; flex-direction:column;
    box-shadow: 0 1px 2px rgba(20,24,31,0.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .veh-card:hover{ box-shadow: 0 10px 26px rgba(20,24,31,0.10); border-color: var(--steel); }
  /* IVECO's studio shots are cut-outs on pure white JPEG with no alpha, so the
     thumb ground must be white too — on --fog each photo showed as a white
     rectangle. The hairline is what separates it from the white card body.

     max-height/max-width scale DOWN only, never up. That is deliberate: the
     two vehicles without an official photo (diesel S-Way, Daily minibus) are
     105x80 menu thumbnails, and blowing those up to card size would put two
     visibly soft pictures in the grid. They sit smaller instead. */
  .veh-thumb{
    background: var(--white); border-bottom: 1px solid var(--line);
    height: 168px; padding: 14px 18px 8px;
    display:flex; align-items:center; justify-content:center;
  }
  .veh-thumb img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; }
  .veh-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
  .veh-body h4{ font-size:1.08rem; }
  .veh-body p{ font-size:0.88rem; color: var(--steel); flex:1; }
  .veh-spec{ font-size:0.74rem; border-top:1px dashed var(--steel); padding-top:9px; }
  .veh-cta{ font-size:0.72rem; letter-spacing:0.04em; color: var(--ink); border:1px solid var(--steel); border-radius:3px; padding:6px 10px; align-self:flex-start; }
  .veh-cta:hover{ border-color: var(--iveco); color: var(--iveco); }

  /* ============================================================
     18) FORMS
     The previous site's enquiry form, rebuilt with real validation.
     There's no server behind this static site, so on submit we build
     a pre-filled e-mail and hand it to the visitor's mail client —
     honest about what it does rather than pretending to send.
     ============================================================ */
  .form-grid{ display:grid; gap:16px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field label{
    display:block; margin-bottom:6px;
    font-size:0.7rem; letter-spacing:0.08em;
    text-transform:uppercase; color: var(--steel);
  }
  .field label .req{ color: var(--signal); }
  .field input, .field select, .field textarea{
    /* 1rem, not less: iOS Safari zooms the whole page into any field under
       16px when it is tapped, and leaves it zoomed. */
    width:100%; font:inherit; font-size:1rem; color: var(--ink);
    padding:11px 13px; background: var(--white);
    border:1px solid var(--steel); border-radius: var(--radius);
  }
  .field textarea{ min-height:132px; resize:vertical; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color: var(--iveco); box-shadow: 0 0 0 3px rgba(21,84,255,0.16);
  }
  .field .err{ display:none; margin-top:5px; font-size:0.78rem; color: var(--signal); }
  .field.invalid input, .field.invalid select, .field.invalid textarea{ border-color: var(--signal); }
  .field.invalid .err{ display:block; }
  /* Stands in for the Google map until the visitor asks for it. Same height as
     the iframe it replaces, so nothing shifts when the map appears. It sits
     inside .map-frame, which already draws the border, radius and shadow —
     giving this its own border too drew a box inside a box. */
  .map-consent{
    display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:340px; padding:34px 24px;
    background: var(--fog);
  }
  .map-consent strong{ display:block; margin-bottom:8px; }
  .map-consent p{ color: var(--steel); font-size:0.9rem; max-width:52ch; margin-inline:auto; }
  .map-consent .btn{ margin-top:18px; }
  .map-consent .addr-line{
    font-size:0.8rem;
    margin-top:16px; color: var(--ink);
  }

  /* Honeypot — hidden from people, visible to bots. Not `visibility:hidden`
     or an off-screen shift: display:none is what most scrapers skip and what
     keeps it out of the tab order and the accessibility tree. */
  .hp-field{ display:none; }
  .form-note{ font-size:0.82rem; color: var(--steel); }
  .form-status{
    display:none; padding:13px 16px; border-radius: var(--radius);
    border:1px solid var(--iveco); background: rgba(21,84,255,0.07);
    font-size:0.9rem;
  }
  .form-status.show{ display:block; }
  /* Error tone. script.js toggles this class rather than writing colours into
     inline styles, so every colour the form can show is findable in CSS. */
  .form-status.is-bad{ border-color: var(--signal); background: rgba(194,65,12,0.08); }

  /* ============================================================
     19) CONTACT DEPARTMENTS
     ============================================================ */
  .dept-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:20px; }
  .dept .plate-row dd{ font-size:0.88rem; }
  .dept h3{ font-size:1.08rem; margin-block:10px 12px; }

  /* ============================================================
     20) FOOTER
     ============================================================ */
  /* Three columns: about, address + hours, contact. Keep the track count
     equal to the column count — this once read repeat(3, 1fr) after a cut to
     three columns, leaving an empty fourth track that pushed the rest left. */
  .footer-grid{ display:grid; grid-template-columns: 1.5fr repeat(2, 1fr); gap:32px; padding-bottom:26px; }
  .footer-col h4{
    font-size:0.74rem; letter-spacing:0.1em;
    text-transform:uppercase; color: var(--white); margin-bottom:13px;
  }
  .footer-col ul{ display:grid; gap:12px; font-size:0.88rem; line-height:1.5; }
  .footer-col a:hover{ color: var(--white); text-decoration:underline; }
  /* The wordmark is ink-coloured; knock it out to white for the dark footer.
     Safe here, unlike on the partner logos: the SVG has real transparency. */
  .footer-logo{ height:18px; width:auto; filter: brightness(0) invert(1); opacity:0.9; }
  .footer-about p{ font-size:0.86rem; margin-top:12px; max-width:34ch; }
  .footer-bottom{ border-top:1px solid rgba(255,255,255,0.14); padding-top:18px; }

  /* ============================================================
     21) (formerly the cookie notice — removed September 2026; the site
     sets no cookies and stores nothing, so there was nothing to consent
     to. See CLAUDE.md before adding anything that would need one.)
     ============================================================ */

  /* ============================================================
     22) RESPONSIVE — mega menu + new blocks
     ============================================================ */
  @media (max-width: 980px){
    .footer-grid{ grid-template-columns: 1fr 1fr; gap:28px; }
  }
  /* The mobile CTA lives inside .nav-links, so the "current page"
     rule would repaint its label teal on the dark button. It's a
     button, not a nav link — opt it out of both active styles. */
  .nav-cta-mobile{ display:none; }
  .nav-links .nav-cta-mobile a.active{ color: var(--white); }
  .nav-links .nav-cta-mobile a::after{ content:none; }
  /* The mobile CTA is an <a> inside .nav-links, so `.nav-links a{padding-block:4px}`
     outranks .btn's own padding and flattens the pill. Restate it here, above
     that rule's specificity. */
  .nav-links .nav-cta-mobile .btn{ padding: 14px 30px; }

  @media (max-width: 880px){
    /* The IVECO badge and the full-width wordmark together overflow a 375px
       phone, so the badge drops out here. The quote button still lives in
       the mobile menu, so the "request a quote" path survives the
       breakpoint even though the top bar no longer carries it. */
    .nav-brand{ display:none; }
    .nav-cta-mobile{ display:block; margin-top:8px; }
    .nav-cta-mobile .btn{ display:block; text-align:center; }

    /* The dropdown becomes a plain accordion block in the mobile menu. */
    .nav.open .nav-links{ max-height: calc(100vh - 96px); overflow-y:auto; align-items:stretch; }
    .nav-links > li{ position:relative; }
    .mega-toggle{ width:100%; justify-content:space-between; font-size:1rem; padding-block:10px; }
    /* Full-width rows with real height, so each is an easy thumb target. */
    .nav.open .nav-links > li > a:not(.btn){ display:block; padding-block:10px; }
    .mega{
      position:static; display:none; box-shadow:none; border:0;
      background:none; margin-top:10px;
    }
    .mega.open{ display:block; }
    .mega-inner{ grid-template-columns:1fr; gap:14px; padding:0; }
    .mega-tabs{ flex-direction:row; flex-wrap:wrap; border-right:0; padding-right:0; gap:6px; }
    .mega-tab{ padding:7px 11px; font-size:0.84rem; border:1px solid var(--fog); }
    .mega-tab small{ display:none; }
    .mega-groups{ grid-template-columns:1fr; gap:18px; }
    .mega-foot{ margin-top:14px; }
    .form-row{ grid-template-columns:1fr; }
    .hero-stats{ grid-auto-flow:row; grid-template-columns:1fr 1fr; gap:18px 24px; }
  }
  @media (max-width: 620px){
    .footer-grid{ grid-template-columns: 1fr; }
    .utility-contact{ gap:14px; font-size:0.72rem; }
    .logo-mark{ height:18px; }
  }
  /* At 320px the 18px wordmark leaves only ~3px before the hamburger. */
  @media (max-width: 360px){
    .logo-mark{ height:16px; }
  }

  /* ============================================================
     23) ANCHOR OFFSET
     The header is sticky, so a plain jump to #s-way would park the
     card underneath it. scroll-margin-top reserves that space when
     the browser scrolls an element into view — no JS needed.
     ============================================================ */
  [id]{ scroll-margin-top: 104px; }
  a.veh-card{ color: inherit; }
  .plate-row dd a{ color: var(--iveco); }
  .plate-row dd a:hover{ text-decoration: underline; }