/* ============================================================
   topused.ee — avalehe disainikontseptsioon
   Bootstrap 5.3 teemakiht. Laaditakse PÄRAST bootstrap.min.css.
   Värvipalett ja tüpograafia MAN-i brändist (man.eu).
   ============================================================ */

/* ---------- 0. Kirjatüübid — MAN Europe ----------
   Alamhulk: Latin + Latin Extended-A + tüpograafiline kirjavahemärk
   (~25 kB fail). Täiskomplekt on originaalpakis MANWebfonts.zip.    */

@font-face{
  font-family:"MAN EU";
  src:url("../fonts/MAN_EU-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"MAN EU";
  src:url("../fonts/MAN_EU-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"MAN EU";
  src:url("../fonts/MAN_EU-Medium.woff2") format("woff2");
  font-weight:500 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"MAN EU";
  src:url("../fonts/MAN_EU-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"MAN EU Condensed";
  src:url("../fonts/MAN_EU-Condensed-Regular.woff2") format("woff2");
  font-weight:300 500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"MAN EU Condensed";
  src:url("../fonts/MAN_EU-Condensed-Bold.woff2") format("woff2");
  font-weight:600 700;font-style:normal;font-display:swap;
}

/* ---------- 1. Disainimärgid + Bootstrapi ülekirjutused ---------- */
:root{
  /* MAN värvipalett — otse man.eu CSS muutujatest */
  --man-anthracite:#303c49;   /* --primary-800-color */
  --man-slate:#5b6f85;        /* --primary-500-color */
  --man-mist:#cbd3dc;         /* --primary-100-color */
  --man-fog:#eaedf3;          /* --primary-50-color  */
  --man-nav:#f4f5f6;          /* --header-nav-color  */
  --man-red:#e40045;          /* --secondary-color   */
  --man-red-dk:#ac003f;       /* --secondary-800     */
  --man-green:#91b900;        /* --green-color       */

  /* semantilised märgid */
  --bg:#ffffff;
  --bg-alt:var(--man-nav);
  --bg-deep:var(--man-anthracite);
  --surface:#ffffff;
  --ink:var(--man-anthracite);
  --ink-2:#5b6f85;
  --ink-3:#8494a6;
  --line:#dde2e9;
  --line-strong:var(--man-mist);
  --accent:var(--man-red);
  --accent-ink:#e40045;        /* eyebrow ja tekstilingid */
  --shade-1:#e6eaf0;
  --shade-2:#cfd6e0;
  --focus:#244a82;
  --shadow:0 22px 50px rgba(20,30,45,.16);
  --shadow-sm:0 14px 34px rgba(20,30,45,.11);

  /* mõõdud */
  --gut:clamp(20px,4vw,48px);
  --sec-y:clamp(56px,7vw,96px);

  /* kirjatüübid — MAN Europe, varufondiks MAN-i enda valik Roboto */
  --f-display:"MAN EU Condensed","Roboto Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"MAN EU","Roboto",-apple-system,"Segoe UI",Arial,sans-serif;
  --f-label:"MAN EU Condensed","Roboto Condensed",Arial,sans-serif;

  /* --- Bootstrapi globaalsed muutujad --- */
  --bs-body-font-family:var(--f-body);
  --bs-body-font-size:1rem;
  --bs-body-line-height:1.6;
  --bs-body-color:var(--ink);
  --bs-body-bg:var(--bg);
  --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--ink-2);
  --bs-tertiary-color:var(--ink-3);
  --bs-border-color:var(--line);
  --bs-border-radius:0;
  --bs-border-radius-sm:0;
  --bs-border-radius-lg:0;
  --bs-border-radius-xl:0;
  --bs-border-radius-pill:0;
  --bs-primary:var(--man-red);
  --bs-primary-rgb:228,0,69;
  --bs-link-color:var(--accent-ink);
  --bs-link-hover-color:var(--man-red-dk);
  --bs-focus-ring-color:rgba(36,74,130,.4);
}

/* ---------- 2. Alus ---------- */
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{text-decoration:none;color:inherit}
p{margin:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* konteiner: MAN-i 1320 px laius ja hingav külgpolster kõigil murdepunktidel */
.container{--bs-gutter-x:calc(var(--gut) * 2)}
@media(min-width:1200px){
  .container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl{max-width:1320px}
}

.ico{width:1.125em;height:1.125em;flex:none}
.skip:focus{
  position:fixed;top:10px;left:10px;z-index:1080;
  padding:12px 18px;background:var(--accent);color:#fff;
}

/* ---------- 3. Tüpograafia ---------- */
h1,h2,h3,.h1,.h2,.h3{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  line-height:1.04;margin:0;letter-spacing:.005em;text-wrap:balance;
}
h1{font-size:clamp(38px,6.2vw,74px)}
h2{font-size:clamp(28px,3.6vw,46px)}
h3{font-size:clamp(19px,1.5vw,23px);line-height:1.15}

.lede{font-size:clamp(16px,1.35vw,19px);font-weight:300;color:var(--ink-2);max-width:60ch}

.eyebrow{
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;
  letter-spacing:.14em;font-size:13px;color:var(--accent-ink);margin:0;
}
.eyebrow--light{color:var(--accent)}   /* sama punane, mis CTA-nupul */

/* punane taktiviip — MAN-i loendimarker */
.ticks li{position:relative;padding-left:16px}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:4px;height:1.05em;background:var(--accent)}

/* ---------- 4. Nupud (Bootstrapi --bs-btn-* kaudu) ---------- */
.btn{
  --bs-btn-border-radius:0;
  --bs-btn-font-family:var(--f-label);
  --bs-btn-font-size:14px;
  --bs-btn-font-weight:600;
  --bs-btn-padding-y:15px;
  --bs-btn-padding-x:26px;
  --bs-btn-border-width:2px;
  --bs-btn-line-height:1.2;
  text-transform:uppercase;letter-spacing:.11em;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
}
.btn-primary{
  --bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--man-red-dk);--bs-btn-hover-border-color:var(--man-red-dk);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--man-red-dk);--bs-btn-active-border-color:var(--man-red-dk);--bs-btn-active-color:#fff;
}
.btn-outline-dark{
  --bs-btn-color:var(--ink);--bs-btn-border-color:var(--ink);
  --bs-btn-hover-bg:var(--ink);--bs-btn-hover-border-color:var(--ink);--bs-btn-hover-color:var(--bg);
  --bs-btn-active-bg:var(--ink);--bs-btn-active-border-color:var(--ink);--bs-btn-active-color:var(--bg);
}
.btn-outline-light{
  --bs-btn-color:#fff;--bs-btn-border-color:#fff;
  --bs-btn-hover-bg:#fff;--bs-btn-hover-border-color:#fff;--bs-btn-hover-color:var(--man-anthracite);
  --bs-btn-active-bg:#fff;--bs-btn-active-border-color:#fff;--bs-btn-active-color:var(--man-anthracite);
}
.cta-row{margin-top:34px}

/* ---------- 5. Kontaktriba ---------- */
.utility{background:var(--man-anthracite);color:#c6cfda;font-size:14px}
.utility .container{min-height:44px;padding-block:6px}
.utility a:hover{color:#fff}

/* ligipääsetavuse link — a <button>, because it opens the panel rather than
   going anywhere, so its own background, border and font are taken off to let it
   read as one more item on the strip. */
.access{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;padding:0;
  font:inherit;color:inherit;cursor:pointer;
}
.access .ico{width:17px;height:17px}
/* `.utility a:hover` does not reach a button, so the strip's own brightening is
   repeated here — and on focus, which the links get from the UA ring alone. */
.access:hover,.access:focus-visible{color:#fff}
/* Core's accessibility.css reaches this control by id and DIMS it on hover,
   where the strip brightens instead. That file is LOADED AFTER this one, so an
   equally specific selector would lose the tie: the override needs the id AND
   the ancestor to outrank `#accessibility-toggle:hover`. */
.utility #accessibility-toggle:hover{opacity:1}

/* keelevalik: raamideta, aktiivne rasvane + punane joon */
.lang{gap:16px}
.lang a{
  font-family:var(--f-label);letter-spacing:.1em;font-size:13px;
  padding:3px 1px;border-bottom:2px solid transparent;
}
.lang a.on{color:#fff;font-weight:700;border-bottom-color:var(--accent)}

/* ---------- 6. Päis / navbar ---------- */
.masthead{
  background:var(--surface);border-bottom:1px solid var(--line);
  transition:box-shadow .2s;z-index:1030;
}
.masthead.is-stuck{box-shadow:0 6px 22px rgba(20,30,45,.10)}
.masthead .navbar{
  --bs-navbar-padding-y:0;
  --bs-navbar-padding-x:var(--gut);   /* sama sisulaius mis ülemisel ribal ja lehe sektsioonidel */
  --bs-navbar-color:var(--ink);
  --bs-navbar-hover-color:var(--accent);
  --bs-navbar-active-color:var(--ink);
  min-height:84px;
}

.lockup{display:flex;align-items:flex-end;gap:14px;padding:0;margin:0}
.lockup .logo{width:auto;height:46px}
.lockup-txt{
  white-space:nowrap;font-family:var(--f-label);font-weight:500;
  text-transform:uppercase;letter-spacing:normal;font-size:13px;color:var(--ink-3);
  line-height:1;padding-bottom:3px;   /* joondub logo alumise äärega */
}

.mainnav{gap:22px;align-items:center}
.mainnav .nav-link{
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:normal;
  font-size:16.5px;line-height:1.35;padding:29px 0;   /* suurem kiri, sama päisekõrgus */
  border-bottom:3px solid transparent;white-space:nowrap;
}
.mainnav .nav-link.active{border-bottom-color:var(--accent);color:var(--ink)}
.mainnav .dropdown-toggle::after{margin-left:.4em;vertical-align:.15em}
.mainnav .dropdown-menu{
  --bs-dropdown-border-color:var(--line);
  --bs-dropdown-bg:var(--surface);
  --bs-dropdown-link-color:var(--ink);
  --bs-dropdown-link-hover-bg:var(--bg-alt);
  --bs-dropdown-link-hover-color:var(--accent);
  --bs-dropdown-link-active-bg:var(--bg-alt);
  --bs-dropdown-link-active-color:var(--accent);
  --bs-dropdown-padding-y:0;
  --bs-dropdown-item-padding-y:11px;
  --bs-dropdown-item-padding-x:18px;
  border-top:3px solid var(--accent);margin-top:-3px;box-shadow:var(--shadow-sm);
}
.mainnav .dropdown-item{
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;
  letter-spacing:normal;font-size:15px;border-bottom:1px solid var(--line);
}
.mainnav .dropdown-item:last-child{border-bottom:0}

.nav-btn{border:2px solid var(--line-strong);border-radius:0;padding:9px 11px;color:var(--ink)}
.nav-btn:focus{box-shadow:none}
.nav-btn .ico{width:22px;height:22px}

@media(max-width:1399.98px){.mainnav{gap:16px}.mainnav .nav-link{font-size:15px}}
@media(max-width:1199.98px){
  .masthead .navbar{min-height:0;padding-block:14px}
  .mainnav{gap:0;align-items:stretch;width:100%;padding-bottom:8px}
  .mainnav .nav-link{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .mainnav .dropdown-menu{border:0;border-left:3px solid var(--accent);margin:0 0 8px;box-shadow:none;background:transparent}
  .mainnav .dropdown-item{border-bottom:0;font-size:15px;--bs-dropdown-item-padding-y:9px}
}
@media(max-width:600px){
  .utility .container{gap:14px!important;font-size:13px}
  .lockup{gap:11px}
  .lockup .logo{height:36px}
  .lockup-txt{font-size:11px;padding-bottom:2px}
}

/* ---------- 7. Hero ---------- */
.hero{background:var(--bg-deep);color:#fff;isolation:isolate}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center}
/* varjund, et valge tekst püsiks foto peal loetav */
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(22,28,35,.45) 0%,rgba(22,28,35,0) 20%),
    linear-gradient(0deg,rgba(22,28,35,.40) 0%,rgba(22,28,35,0) 20%),
    linear-gradient(95deg,
      rgba(22,28,35,.90) 0%,
      rgba(22,28,35,.86) 30%,
      rgba(22,28,35,.58) 42%,
      rgba(22,28,35,.16) 54%,
      rgba(22,28,35,0) 64%);
}
.hero-copy{z-index:2;padding-block:clamp(96px,13vw,190px)}
.hero h1{color:#fff;max-width:16ch;margin-top:18px}
.hero h1 em{font-style:normal;color:var(--man-red)}
.hero .lede{color:#c9d3de;margin-top:20px}

@media(max-width:900px){
  .hero-art{object-position:70% center}
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(22,28,35,.88) 0%,
      rgba(22,28,35,.80) 55%,
      rgba(22,28,35,.72) 100%);
  }
}

/* --- hero lauaarvutis: esimene ekraan täis, teksti pikkusest sõltumata ---
   DIVERGENCE FROM THE DESIGNER'S EXPORT, the same one as the phone block below
   and recorded with it in topused-cms.css's header. The prototype sizes the
   hero from its text, and the photograph is `inset:0` inside it — so the
   picture was exactly as tall as the words. A slide with a short heading was
   77px shorter than one with a long heading at 1440×900, the photograph jumped
   between slides, and neither reached the bottom of the screen. The client
   asked for the full screen whatever the text.

   min-height AND NOT height: a slide with more to say than fits grows the hero
   instead of clipping it. box-sizing is border-box, so the padding is inside
   the minimum and header plus hero is exactly one screen.

   THE PADDING IS 96px, NOT THE PROTOTYPE'S clamp(96px,13vw,190px). That clamp
   is 177px at 1366px wide, and on a 768px-tall laptop 354px of padding plus the
   words already overflows the space — the hero ended below the fold and the
   slides were unequal again. 96px is the clamp's own floor, and centring the
   words does the spacing the larger padding used to do. The BOTTOM stays 96px
   because it is what keeps the words clear of the slide bars, which sit
   absolute in the bottom 36px; the TOP gives way to 10svh on a short
   screen, because at 1024×600 even 96px a side left the hero 12px past the
   bottom edge.

   --header-h IS THE WHOLE HEADER, measured by the script after the header in
   includes/navbar.php, because CSS cannot measure it and it is not constant:
   the utility bar wraps with the operator's contact details, and a long menu
   wraps the masthead. 129px and 119px are only the fallbacks for a browser
   without the script — utility bar 44 plus the masthead, which is 85px at
   1200px and up (`.masthead .navbar{min-height:84px}`) and 75px below it
   (`min-height:0;padding-block:14px`), pinned to those rules by
   tests/HeroDesktopCssTest.

   svh for the reason the phone block gives. min-width:768px cannot overlap the
   phone block's max-width:767.98px, so phones are untouched. */
@media(min-width:768px){
  .hero-copy{
    display:flex;flex-direction:column;justify-content:center;
    min-height:calc(100svh - var(--header-h, 129px));
    padding-top:clamp(48px,10svh,96px);
    padding-bottom:96px;
  }
}
@media(min-width:768px) and (max-width:1199.98px){
  .hero-copy{min-height:calc(100svh - var(--header-h, 119px))}
}

/* --- hero telefonis: pool ekraani pilt, pool tume plokk tekstiga ---
   DIVERGENCE FROM THE DESIGNER'S EXPORT, recorded in topused-cms.css's header
   alongside the deleted dark scheme. The prototype's mobile hero is the block
   above: a flat 88%-to-72% scrim over the whole area, which sizes itself from
   the text and leaves the photograph as a dark smudge behind it. The client
   asked for two halves instead — the photograph across the top of the screen,
   the words on a dark block under it, and a gradient where the two meet.

   THE SPLIT IS A LENGTH, NOT A PERCENTAGE, AND EVERYTHING READS THE SAME ONE.
   `--hero-photo` is half the screen under the sticky masthead, and the photo's
   height, the copy's top padding and the gradient's stops are all written in
   terms of it. A percentage would be a share of the HERO, which grows when a
   slide has more to say — so the seam between photograph and dark block would
   drift away from the edge of the photograph it exists to hide.

   76px IS THE MASTHEAD, the same number topused-cms.css's anchor rules use on
   this breakpoint. Subtracting it is what makes the two halves halves of what
   the visitor can actually see.

   svh AND NOT vh: svh is the viewport height that does not change as the
   browser's own bars slide away, so the split holds still while scrolling.

   The breakpoint is shared with sections/pages/default/frontend/hero.php, whose
   <picture> switches to the tall file at the same 767.98px. */
@media(max-width:767.98px){
  /* HALF THE SCREEN, UNLESS THERE IS NOT ROOM FOR THE WORDS. A hero taller than
     the screen pushes its own slide bars off the bottom, and a control nobody
     can see is a slider nobody knows is there — so the photograph gives way
     rather than the block overflowing.

     23rem is the room a full slide asks for: eyebrow, heading, intro, two
     buttons and the bars. On a tall screen half the screen is already more than
     the rest needs and the even split stands; on a short one the second term
     wins and the picture shrinks. The floor stops a very short screen from
     squeezing it to nothing. The reserve is a constant rather than the actual
     copy — CSS cannot measure the text — so it is set by the longest slide the
     site ships, and a shorter one simply leaves air in the block.

     THE WHOLE HEADER, not just the sticky masthead — `--header-h`, measured in
     includes/navbar.php, with 152px (the header at 390px wide) as the fallback
     without the script. The difference between whole and masthead
     is the entire bug this rule exists to avoid. The utility bar scrolls away,
     so subtracting only the 76px masthead sizes the hero for a state the
     visitor reaches by SCROLLING — which is exactly what they cannot do to find
     a control they have no reason to believe is there. Measured at first paint,
     that put the second button and the slide bars below the fold. */
  .hero{--hero-photo:max(160px, min(calc((100svh - var(--header-h, 152px)) / 2), calc(100svh - var(--header-h, 152px) - 23rem)))}
  /* The photograph stops halfway. Everything below it is the section's own
     background, which is already --bg-deep — so the dark block costs no
     element, and a slide with no photograph is simply all block. */
  .hero-art{bottom:auto;height:var(--hero-photo)}
  /* The seam. Transparent over the picture, the block's own colour by the time
     it reaches the picture's bottom edge, so the photograph ENDS in the dark
     block instead of being cut off against it.

     EVERY STOP IS --bg-deep, which is why the middle one is a color-mix rather
     than the rgba(22,28,35) the scrim uses everywhere else. The two are not the
     same colour (#303c49 against #161c23), and a slide with no photograph is
     nothing but block — where a darker middle stop draws a visible band across
     an otherwise flat panel. Mixed with transparent, it fades into itself. */
  .hero-scrim{
    background:linear-gradient(180deg,
      transparent 0,
      transparent calc(var(--hero-photo) - 150px),
      color-mix(in srgb, var(--bg-deep) 45%, transparent) calc(var(--hero-photo) - 70px),
      var(--bg-deep) var(--hero-photo));
  }
  /* The words start where the photograph ends. min-height fills the screen when
     a slide is short; a long one grows the block downwards rather than eating
     into the picture.

     THE WORDS SIT 12px FURTHER IN THAN THE PAGE GUTTER, on request. At the
     plain gutter they started 20px from the screen's edge, flush with the
     logo, which read as cramped on the dark block. Left only: the right side
     already has the ragged edge of the text for air. */
  .hero-copy{
    display:flex;flex-direction:column;justify-content:flex-start;
    min-height:calc(100svh - var(--header-h, 152px));
    padding-top:calc(var(--hero-photo) + 20px);
    padding-bottom:36px;
    padding-left:calc(var(--gut) + 12px);
  }
  /* Room for the slide bars, which are absolute at the bottom of the hero.
     Scoped to the slider: a one-slide hero has no bars and would just get 72px
     of nothing under its buttons. */
  .hero-slider .hero-copy{padding-bottom:64px}
  /* The block is the tighter half of the design: the same lines with less air
     between them, and the two buttons side by side instead of stacked. Together
     they are 58px of the 74px that used to hang below the fold — the rest comes
     off the photograph, which is why this is worth doing rather than shrinking
     the picture twice as far. */
  .hero h1,.hero .hero-title{margin-top:12px}
  .hero .lede{margin-top:14px}
  .hero .cta-row{margin-top:22px}
  .hero .cta-row .btn{--bs-btn-padding-x:14px}
}

/* ---------- 8. Sektsioonid ---------- */
.sec{padding-block:var(--sec-y)}
.sec--alt{background:var(--bg-alt)}
.sec-head{margin-bottom:38px}
.sec-head .txt{max-width:66ch;display:grid;gap:12px}
.link-more{
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:14px;color:var(--accent-ink);display:inline-flex;gap:8px;align-items:center;white-space:nowrap;
}
.link-more:hover{color:var(--man-red-dk)}

/* ---------- 9. Kategooriad ---------- */
.cat{display:block;background:var(--surface);border:1px solid var(--line);transition:border-color .18s}
.cat:hover{border-color:var(--accent)}
.cat .art{display:block;overflow:hidden;background:linear-gradient(160deg,var(--shade-1),var(--shade-2))}
.cat .art img{object-fit:cover;object-position:center;transition:transform .35s ease}
.cat:hover .art img{transform:scale(1.04)}
.cat .bar{padding:16px 18px;border-top:1px solid var(--line)}
.cat .bar b{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:18px;letter-spacing:.02em}
.cat .bar em{font-style:normal;font-family:var(--f-label);font-size:13px;letter-spacing:.1em;color:var(--ink-3)}
.cat:hover .bar b{color:var(--accent)}

/* ---------- 10. Sõidukikaardid ---------- */
.veh{
  --bs-card-bg:var(--surface);
  --bs-card-border-color:var(--line);
  --bs-card-border-radius:0;
  --bs-card-inner-border-radius:0;
  --bs-card-spacer-y:18px;
  --bs-card-spacer-x:20px;
  transition:box-shadow .18s,border-color .18s;
}
.veh:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.veh .shot{overflow:hidden;background:linear-gradient(165deg,var(--shade-1),var(--shade-2))}
.veh .shot img{object-fit:cover;object-position:center}
.veh .flag{
  position:absolute;top:0;left:0;z-index:2;background:var(--man-anthracite);color:#fff;
  font-family:var(--f-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;
}
.veh .flag b{color:var(--man-red);font-weight:600}
.veh .state{
  position:absolute;top:0;right:0;z-index:2;background:var(--man-green);color:#14200a;font-weight:600;
  font-family:var(--f-label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;
}

/* --- eripakkumise silt --- */
/* Bottom-left: .flag holds the top-left corner and .state the top-right, so the
   third tag takes the one free corner rather than stacking. Same green and same
   ink as .state — one tag palette, two positions. */
.veh .offer{position:absolute;bottom:0;left:0;z-index:2;background:var(--man-green);color:#14200a;font-weight:600;
  font-family:var(--f-label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px}
.veh .body{gap:14px}
.veh .card-title{margin:0}
.veh .card-title a:hover{color:var(--accent)}

.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-variant-numeric:tabular-nums}
.price b{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1}
.price s{color:var(--ink-3);font-size:15px;text-decoration-color:var(--accent)}
.price .vat{font-family:var(--f-label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

.specs{
  --bs-gutter-x:1rem;--bs-gutter-y:.45rem;
  border-top:1px solid var(--line);padding-top:14px;margin-bottom:0;
  font-size:14.5px;color:var(--ink-2);
}
.specs .col{display:flex;align-items:center;gap:8px;min-width:0}
.specs .ico{color:var(--ink-3);width:18px;height:18px}
.specs span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.veh .acts{padding-top:4px;margin-bottom:0}
.veh .acts .btn{flex:1;--bs-btn-padding-y:12px;--bs-btn-padding-x:14px;--bs-btn-font-size:13px}

/* ---------- 11. Kvaliteedilubadus ---------- */
.promise .it{border-top:4px solid var(--accent);padding-top:20px}
.promise h3{margin-bottom:12px;min-height:2.3em}
.promise p{color:var(--ink-2);font-weight:300}
@media(max-width:575.98px){.promise h3{min-height:0}}

/* ---------- 12. Rendibänner ---------- */
.rent{background:var(--bg-deep);color:#fff;overflow:hidden}
.rent-art{
  position:relative;min-height:340px;padding:0;
  background:linear-gradient(150deg,#2b3542,#151c24);
}
.rent-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.rent-txt{padding:clamp(40px,5vw,72px) var(--gut) clamp(40px,5vw,72px) clamp(28px,5vw,72px);display:grid;gap:0}
.rent h2{color:#fff;margin-top:14px}
.rent .lede{color:#c2ccd8;margin-top:16px}
.rent .ticks{margin:26px 0 0;display:grid;gap:11px;font-size:16px;color:#dbe3ec}
.pricetag{display:inline-flex;align-items:baseline;gap:10px;margin-top:28px;background:var(--man-red);color:#fff;padding:12px 20px;justify-self:start}
.pricetag b{font-family:var(--f-display);font-weight:700;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.pricetag span{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:13px}
@media(max-width:991.98px){
  .rent-txt{padding:44px var(--gut)}
  .rent-art{min-height:240px}
}

/* ---------- 13. Uudised ---------- */
.post{
  --bs-card-bg:var(--surface);
  --bs-card-border-color:var(--line);
  --bs-card-border-radius:0;
  --bs-card-inner-border-radius:0;
  --bs-card-spacer-y:20px;
  --bs-card-spacer-x:22px;
}
.post:hover{border-color:var(--line-strong)}
.post .shot{overflow:hidden;background:linear-gradient(160deg,var(--shade-1),var(--shade-2))}
.post .shot img{object-fit:cover;object-position:center}
.post .body{gap:12px}
.post time{font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--ink-3)}
.post .card-title{margin:0}
.post .card-title a:hover{color:var(--accent)}
.post p{color:var(--ink-2);font-weight:300;font-size:15px}

/* ---------- 14. Uudiskiri ---------- */
.news-band{background:var(--man-anthracite);color:#fff;padding-block:52px}
.news-band h2{color:#fff;font-size:clamp(24px,2.6vw,34px)}
.news-band p{color:#b9c4d1;margin-top:8px}
.subscribe .form-control{
  font-family:var(--f-body);font-size:16px;padding:15px 18px;
  border:2px solid #fff;border-right:0;border-radius:0;
  min-width:280px;width:auto;flex:0 1 340px;
  background:#fff;color:var(--man-anthracite);
}
.subscribe .form-control:focus{box-shadow:none;border-color:#fff}
.subscribe .is-done{font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--man-green);align-self:center;padding-left:16px}
@media(max-width:575.98px){
  .subscribe .form-control{border-right:2px solid #fff;min-width:0;flex:1 1 100%}
  .subscribe .btn{width:100%}
}

/* ---------- 15. Jalus ---------- */
.sitefoot{background:var(--bg-alt);border-top:1px solid var(--line);padding-top:56px;font-size:15px}
.sitefoot h2{
  font-family:var(--f-label);font-weight:600;letter-spacing:.14em;font-size:13px;
  color:var(--ink-3);margin-bottom:16px;text-transform:uppercase;
}
.sitefoot .about{color:var(--ink-2);max-width:34ch}
/* The footer logo is optional — the design ships without one — so it is sized
   rather than reserved: nothing shifts when there is none. */
.sitefoot .foot-logo{display:block;width:auto;height:42px;margin-bottom:14px}
.sitefoot ul{display:grid;gap:9px;color:var(--ink-2);margin:0}
.sitefoot a:hover{color:var(--accent)}
.sitefoot .legal{
  margin-top:44px;border-top:1px solid var(--line);padding-block:20px;
  color:var(--ink-3);font-size:14px;
}

/* ---------- 16. Liikumine ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   17. Sõidukite listinguleht (soidukid.html)
   ============================================================ */

/* --- lehe päisebänner: madalam variant avalehe herost --- */
.page-hero{background:var(--bg-deep);color:#fff;isolation:isolate}
.page-hero .hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% center}
.page-hero .hero-scrim{
  background:linear-gradient(95deg,
    rgba(22,28,35,.92) 0%,rgba(22,28,35,.86) 34%,
    rgba(22,28,35,.55) 48%,rgba(22,28,35,.18) 62%,rgba(22,28,35,.05) 100%);
}
.page-hero-copy{z-index:2;padding-block:clamp(40px,6vw,80px)}
.page-hero h1{color:#fff;font-size:clamp(32px,4.6vw,58px);margin-top:14px}

.crumbs{
  margin:0;font-family:var(--f-label);text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;color:#9fb0c1;
}
.crumbs a:hover{color:#fff}
.crumbs [aria-current]{color:var(--accent)}

/* --- külgriba --- */
.filters{position:sticky;top:104px}
@media(max-width:991.98px){.filters{position:static}}
.filters-head{
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:13px;color:var(--ink-3);margin:0 0 12px;
}
.filters-head + .accordion{border-top:1px solid var(--line)}
.filters .search{margin-bottom:34px}
.filters .form-control,.filters .form-select{
  border-radius:0;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:11px 14px;font-size:15px;
}
.filters .form-control:focus,.filters .form-select:focus{border-color:var(--accent);box-shadow:none}

.filters .accordion{--bs-accordion-bg:transparent;--bs-accordion-border-color:var(--line);--bs-accordion-border-radius:0}
.filters .accordion-item{background:transparent;border-left:0;border-right:0;border-top:0}
.filters .accordion-button{
  background:transparent;color:var(--ink);box-shadow:none;padding:15px 0;
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-size:15px;
}
.filters .accordion-button:not(.collapsed){color:var(--accent)}
.filters .accordion-button::after{width:1rem;height:1rem;background-size:1rem}
.filters .accordion-body{padding:0 0 18px}

.filters .form-check{padding-left:1.9em;margin-bottom:9px}
.filters .form-check-input{
  margin-left:-1.9em;width:1.15em;height:1.15em;margin-top:.28em;
  border-radius:0;border:1px solid var(--line-strong);background-color:var(--surface);
}
.filters .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.filters .form-check-input:focus{border-color:var(--accent);box-shadow:none}
.filters .form-check-label{font-size:15px;color:var(--ink-2);cursor:pointer}
.filters .form-check-input:checked ~ .form-check-label{color:var(--ink)}

.filters .range span{color:var(--ink-3)}
.filters .btn-filter{margin-top:12px;--bs-btn-padding-y:10px;--bs-btn-padding-x:20px;--bs-btn-font-size:13px}

/* --- tulemuste riba --- */
.toolbar{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.count{font-size:15px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.count b{color:var(--ink);font-weight:600}
.sorter label{
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;color:var(--ink-3);
}
.sorter .form-select{
  border-radius:0;border:0;border-bottom:2px solid var(--line-strong);
  background-color:transparent;color:var(--ink);padding:6px 30px 6px 2px;width:auto;font-size:15px;
}
.sorter .form-select:focus{box-shadow:none;border-bottom-color:var(--accent)}

/* --- aktiivsed filtrid --- */
.chips{margin-bottom:26px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-alt);border:1px solid var(--line);padding:6px 10px 6px 12px;
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.08em;font-size:13px;
}
.chip button{background:0;border:0;color:var(--ink-3);font-size:17px;line-height:1;padding:0 2px;cursor:pointer}
.chip button:hover{color:var(--accent)}

/* --- broneeritud silt --- */
.veh .state--booked{background:var(--man-anthracite);color:#fff}

/* --- lehekülgede navigatsioon --- */
.listing-pager{margin-top:44px}
.pagination{
  --bs-pagination-border-radius:0;
  --bs-pagination-border-color:var(--line);
  --bs-pagination-bg:var(--surface);
  --bs-pagination-color:var(--ink);
  --bs-pagination-hover-bg:var(--bg-alt);
  --bs-pagination-hover-color:var(--accent);
  --bs-pagination-hover-border-color:var(--line);
  --bs-pagination-active-bg:var(--accent);
  --bs-pagination-active-border-color:var(--accent);
  --bs-pagination-active-color:#fff;
  --bs-pagination-focus-box-shadow:none;
  --bs-pagination-padding-x:16px;
  --bs-pagination-padding-y:10px;
  gap:2px;
}
.pagination .page-link{
  font-family:var(--f-label);font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;
}

/* ============================================================
   18. Sõiduki profiilileht (soiduk.html)
   ============================================================ */

.detail-top{background:var(--bg-alt);border-bottom:1px solid var(--line);padding-block:26px 30px}
.crumbs--light{color:var(--ink-3)}
.crumbs--light a:hover{color:var(--accent)}
.detail-head{margin-top:14px}
.detail-head h1{font-size:clamp(28px,3.6vw,46px)}
.regnr{
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.1em;
  font-size:12.5px;color:var(--ink-3);margin-top:10px;
}
.share{
  display:inline-flex;align-items:center;gap:9px;border:2px solid var(--line-strong);
  padding:10px 18px;font-family:var(--f-label);font-weight:600;text-transform:uppercase;
  letter-spacing:.11em;font-size:13px;color:var(--ink);
}
.share:hover{border-color:var(--accent);color:var(--accent)}

/* --- galerii --- */
.gallery{position:relative;background:linear-gradient(165deg,var(--shade-1),var(--shade-2))}
.gallery img{object-fit:cover}
.gallery .flag,.gallery .state,.gallery .offer{
  position:absolute;top:0;z-index:3;
  font-family:var(--f-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;
}
.gallery .flag{left:0;background:var(--man-anthracite);color:#fff}
.gallery .flag b{color:var(--man-red);font-weight:600}
.gallery .state{right:0;background:var(--man-green);color:#14200a;font-weight:600}
/* The one free corner, as on the card. `top:auto` because the shared rule above
   sets top:0 — without it the tag would sit under the flag in the top-left.
   Above the carousel controls, which start at the gallery's vertical middle. */
.gallery .offer{top:auto;bottom:0;left:0;background:var(--man-green);color:#14200a;font-weight:600}
.gallery .carousel-control-prev,.gallery .carousel-control-next{width:12%;opacity:.85}
.gallery .carousel-control-prev-icon,.gallery .carousel-control-next-icon{
  width:44px;height:44px;background-size:20px;background-color:rgba(22,28,35,.75);
}
.gallery:hover .carousel-control-prev-icon,.gallery:hover .carousel-control-next-icon{background-color:var(--accent)}

/* pisipildiriba: servast servani, ilma vahede ja raamideta */
.thumbs{margin:0;gap:0;overflow-x:auto;scrollbar-width:thin}
.thumb{
  position:relative;flex:0 0 auto;width:min(132px,25%);aspect-ratio:4/3;
  padding:0;border:0;background:var(--shade-1);overflow:hidden;cursor:pointer;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .18s}
.thumb:not(.active) img{opacity:.58}
.thumb:hover img{opacity:1}
.thumb.active::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--accent)}
.thumb:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

/* --- plokipealkirjad --- */
.block-head{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,1.9vw,24px);margin:44px 0 0;padding-top:18px;
  border-top:4px solid var(--accent);
}
.detail-side .block-head{margin-top:34px}

/* --- andmetabel --- */
.spec-list{margin:18px 0 0}
.spec-row{
  padding:11px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;align-items:baseline;
}
.spec-row dt{color:var(--ink-2);font-weight:400;margin:0}
.spec-row dd{margin:0;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
@media(min-width:768px){.spec-cols .spec-list:first-child{padding-right:0}}

/* --- varustuse loendid --- */
.feats{margin-top:26px}
.feat-head{
  font-family:var(--f-label);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:12.5px;color:var(--ink-3);margin-bottom:14px;
}
.feat{display:grid;gap:10px;margin:0;font-size:15px;color:var(--ink-2)}
/* punane linnuke on puhas CSS — ei sõltu ikoonifailist */
.feat li{position:relative;padding-left:26px}
.feat li::before{
  content:"";position:absolute;left:3px;top:.32em;
  width:6px;height:11px;border:solid var(--accent);
  border-width:0 2.5px 2.5px 0;transform:rotate(43deg);
}
/* alternatiiv: punane püstkriips — lisa loendile klass .feat--bar */
.feat--bar li::before{
  width:4px;height:1.05em;border:0;background:var(--accent);
  transform:none;left:0;top:.35em;
}

/* --- parem külgriba --- */
.detail-side{position:sticky;top:104px}
@media(max-width:991.98px){.detail-side{position:static}}

.pricebox{border:1px solid var(--line);border-top:4px solid var(--accent);padding:24px;background:var(--surface)}
.pricebox .price{margin-bottom:18px}
.pricebox .price b{font-size:38px}
.quick{margin:0 0 20px;border-top:1px solid var(--line)}
.quick > div{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;gap:12px}
.quick dt{color:var(--ink-2);font-weight:400;margin:0}
.quick dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}

/* --- päringuvorm --- */
.enquiry{margin-top:18px}
.enquiry .form-label{
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--ink-3);margin-bottom:5px;
}
.enquiry .form-label span{color:var(--accent)}
.enquiry .form-control{
  border-radius:0;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);
  padding:11px 14px;font-size:15px;
}
.enquiry .form-control:focus{border-color:var(--accent);box-shadow:none}
.enquiry .form-check-input{
  border-radius:0;border:1px solid var(--line-strong);background-color:var(--surface);
  width:1.15em;height:1.15em;margin-top:.28em;
}
.enquiry .form-check-input:checked{background-color:var(--accent);border-color:var(--accent)}
.enquiry .form-check-input:focus{border-color:var(--accent);box-shadow:none}
.enquiry .form-check-label{font-size:14.5px;color:var(--ink-2)}
.enquiry .is-done{
  font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--man-green);font-size:14px;
}

/* --- müügijuht --- */
.seller{border:1px solid var(--line);border-left:4px solid var(--accent);padding:18px 20px;background:var(--surface)}
.seller .role{
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;color:var(--ink-3);
}
.seller .name{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:21px;line-height:1.1;margin-top:4px;
}
.seller .lines{display:grid;gap:7px;margin-top:12px;font-size:15px;color:var(--ink-2)}
.seller .lines a{display:flex;align-items:center;gap:9px}
.seller .lines a:hover{color:var(--accent)}
.seller .ico{color:var(--ink-3);width:17px;height:17px}

/* ============================================================
   19. Artikli / kampaania leht (kampaania.html)
   ============================================================ */

.article-meta{
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;
  font-size:12.5px;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;
}
.article-head{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,40px);line-height:1.05;margin:34px 0 22px;
}
.sub-head{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,1.9vw,24px);margin:44px 0 20px;padding-top:18px;
  border-top:4px solid var(--accent);
}
.article > p{margin-bottom:16px;max-width:72ch}
.article .lede{margin-bottom:20px}
.article-note{
  margin-top:44px;padding-top:18px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink-3);font-weight:300;max-width:78ch;
}

/* kampaaniabänner */
.promo{position:relative;overflow:hidden;background:var(--bg-deep);color:#fff;margin-top:22px}
.promo > img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:60% 55%}
.promo-in{
  position:relative;z-index:2;padding:clamp(30px,5vw,56px);
  background:linear-gradient(100deg,rgba(22,28,35,.94) 0%,rgba(22,28,35,.86) 42%,rgba(22,28,35,.35) 68%,rgba(22,28,35,.1) 100%);
}
.promo-kicker{
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.14em;
  font-size:12.5px;color:#9fb0c1;
}
.promo-head{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,56px);line-height:1;margin-top:12px;
}
.promo-head em{font-style:normal;color:var(--man-red)}
.promo-list{display:grid;gap:9px;margin-top:22px;font-size:15.5px;color:#dbe3ec}
.promo-list li{position:relative;padding-left:26px}
.promo-list li::before{
  content:"";position:absolute;left:3px;top:.32em;
  width:6px;height:11px;border:solid var(--accent);
  border-width:0 2.5px 2.5px 0;transform:rotate(43deg);
}

/* tingimuste plaadid */
.terms{margin:0}
.term{border:1px solid var(--line);border-top:4px solid var(--accent);padding:18px 20px;background:var(--surface)}
.term dt{
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;
  font-size:11.5px;color:var(--ink-3);font-weight:600;
}
.term dd{
  margin:8px 0 0;font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:21px;line-height:1.1;
}

/* laiem linnukeste loend artiklis */
.feat--wide{gap:12px;font-size:16px}

.promo-cta{
  margin-top:44px;padding:22px 24px;
  background:var(--bg-alt);border-left:4px solid var(--accent);
}
.promo-cta-txt{font-size:17px;font-weight:300;color:var(--ink-2);max-width:48ch}

/* ============================================================
   20. Uudised ja töökojad
   ============================================================ */

/* artikli pilt */
.article-fig{margin:22px 0 26px}
.article-fig img{width:100%;height:auto;display:block}
.article-fig figcaption{
  font-size:13.5px;color:var(--ink-3);font-weight:300;
  padding-top:10px;border-top:1px solid var(--line);margin-top:10px;
}
.article-nav{margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.article .feat{margin:6px 0 22px}

/* uudiste listingu kaardi pealkiri */
.news .card-title{margin:0}
.news .card-title a:hover{color:var(--accent)}

/* töökoja kaart */
.workshop{
  background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);
  padding:24px;display:flex;flex-direction:column;
}
.w-badge{
  display:inline-block;align-self:flex-start;
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;
  background:var(--man-anthracite);color:#fff;padding:5px 10px;margin-bottom:14px;
}
.w-badge--partner{background:var(--bg-alt);color:var(--ink-2);border:1px solid var(--line)}
.workshop h2{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:20px;line-height:1.15;
}
.workshop .addr{margin-top:10px;color:var(--ink-2);font-weight:300;font-size:15.5px}
.workshop .lines{display:grid;gap:7px;margin-top:16px;font-size:15.5px}
.workshop .lines a{display:flex;align-items:center;gap:9px}
.workshop .lines a:hover{color:var(--accent)}
.workshop .ico{color:var(--ink-3);width:17px;height:17px}
.workshop .spec-list{margin-top:14px}
.workshop .spec-row{font-size:14.5px;padding:8px 0}
.workshop .spec-row:last-child{border-bottom:0}
.workshop .spec-row dd a:hover{color:var(--accent)}

/* ============================================================
   21. Artikli päis ilma bänneripealkirjata + kontaktileht
   ============================================================ */

/* murderada eraldi ribal (uudise sisuleht) */
.crumb-bar{background:var(--bg-alt);border-bottom:1px solid var(--line);padding-block:14px}

/* artikli pealkiri pildi all */
.article-fig--lead{margin-top:0}
.article-title{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,3.8vw,46px);line-height:1.04;margin:0 0 14px;text-wrap:balance;
}
.article-title + .article-meta{margin-bottom:26px}

/* lehe päisebänneri lead */
.page-hero-lede{
  color:#c9d3de;font-weight:300;font-size:clamp(16px,1.35vw,19px);
  margin-top:14px;max-width:52ch;
}

/* kontaktivorm */
.contact-form .form-select{
  border-radius:0;border:1px solid var(--line-strong);background-color:var(--surface);color:var(--ink);
  padding:11px 14px;font-size:15px;
}
.contact-form .form-select:focus{border-color:var(--accent);box-shadow:none}

/* kontaktandmete loend */
.contact-list{margin:0;border-top:1px solid var(--line)}
.contact-item{padding:16px 0;border-bottom:1px solid var(--line)}
.contact-item dt{
  display:flex;align-items:center;gap:9px;
  font-family:var(--f-label);text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;color:var(--ink-3);font-weight:600;
}
.contact-item dt .ico{width:16px;height:16px}
.contact-item dd{margin:8px 0 0;font-size:16.5px;line-height:1.5}
.contact-item dd a:hover{color:var(--accent)}
.contact-item .muted{color:var(--ink-3);font-size:14.5px}

/* kaardikaart (Google Mapsi asemel — ei vaja välispäringut) */
.mapcard{
  position:relative;display:block;overflow:hidden;margin-top:26px;
  background:var(--bg-alt);border:1px solid var(--line);border-left:4px solid var(--accent);
  aspect-ratio:16/9;
}
.mapcard-grid{
  position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;
}
.mapcard-in{
  position:absolute;inset:auto 0 0 0;padding:18px 20px;display:grid;gap:3px;
  background:linear-gradient(0deg,var(--bg-alt) 55%,transparent);
}
.mapcard-in .ico{color:var(--accent);width:20px;height:20px}
.mapcard-in b{font-family:var(--f-display);font-weight:700;text-transform:uppercase;font-size:17px}
.mapcard-in em{
  font-style:normal;font-family:var(--f-label);text-transform:uppercase;
  letter-spacing:.1em;font-size:12px;color:var(--accent-ink);
}
.mapcard:hover{border-color:var(--line-strong)}
.mapcard:hover .mapcard-in em{color:var(--man-red-dk)}

.side-txt{color:var(--ink-2);font-weight:300;font-size:15.5px;margin:16px 0 18px}