/* Swapbat — shared stylesheet (design tokens, fonts, keyframes, component classes) */
:root{
      --sb-blood-orange:#B91512; --sb-blood-orange-light:#E35350; --sb-lemon-green:#83CE21;
      --sb-white:#ffffff; --sb-grey-1:#fcfcfc; --sb-grey-2:#f7f7f7; --sb-grey-3:#ededed; --sb-black-metal:#242626;
      --sb-grey-4:#d6d6d6; --sb-grey-5:#9a9d9d; --sb-grey-6:#5a5d5d;
      --sb-fg:#242626; --sb-fg-muted:#5a5d5d; --sb-fg-subtle:#9a9d9d;
      --sb-accent:#B91512; --sb-accent-hover:#9d0f0d; --sb-accent-soft:#fbe7e6;
      --sb-success:#83CE21;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body { font-family: 'Open Sans', sans-serif; color: #242626; background: #fff; -webkit-font-smoothing: antialiased; }
    @keyframes sb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes sb-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    a { color: inherit; }
    details.sb-faq > summary { list-style: none; cursor: pointer; }
    details.sb-faq > summary::-webkit-details-marker { display: none; }
    details.sb-faq[open] .sb-faq-chevron { transform: rotate(180deg); }
    body { transition: background-color .8s ease; }
    @media (prefers-reduced-motion: no-preference){
      .sb-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); will-change: opacity, transform; }
      .sb-reveal.sb-in { opacity: 1; transform: none; }
    }
    .sb-hero-glow { position: absolute; z-index: 1; top: 26%; right: 6%; width: 62vw; max-width: 780px; height: 62vw; max-height: 780px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(227,83,80,0.30) 0%, rgba(185,21,18,0.16) 38%, rgba(185,21,18,0) 70%); filter: blur(18px); }
    @media (prefers-reduced-motion: no-preference){ .sb-hero-glow { animation: sb-glow 9s ease-in-out infinite; } }
    @keyframes sb-glow { 0%,100% { opacity: .65; transform: scale(1) translate(0,0); } 50% { opacity: 1; transform: scale(1.12) translate(-2%,2%); } }
    @media (prefers-reduced-motion: no-preference){
      main button { transition: background .3s ease, transform .3s ease, box-shadow .3s ease !important; }
      main button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(185,21,18,0.18), 0 0 0 1px rgba(227,83,80,0.5); }
      .sb-proc-img { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
      .sb-proc-fig:hover .sb-proc-img { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(185,21,18,0.20), 0 0 0 1px rgba(227,83,80,0.55); }
    }
    .sb-proc-fig { position: relative; }
    .sb-proc-glow { position: absolute; z-index: 0; width: 80%; height: 80%; right: -8%; bottom: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(227,83,80,0.22), rgba(185,21,18,0) 70%); filter: blur(30px); pointer-events: none; }
    .sb-proc-img { position: relative; z-index: 1; box-shadow: 0 16px 40px rgba(36,38,38,0.14); }
    .sb-trace-tilt { transform: perspective(1800px) rotateY(-14deg) rotateX(5deg); transform-origin: center; transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; }
    .sb-trace-tilt:hover { transform: perspective(1800px) rotateY(-7deg) rotateX(2deg) translateY(-4px); }
    @media (prefers-reduced-motion: reduce){ .sb-trace-tilt, .sb-trace-tilt:hover { transform: none; } }
    .sb-land { fill: rgba(255,255,255,0.05); stroke: rgba(255,255,255,0.16); stroke-width: 1.1; stroke-linejoin: round; }
    .sb-pin { cursor: pointer; }
    .sb-pin circle.sb-dot { transition: r .18s ease, fill .18s ease; }
    .sb-pin text { opacity: 0; transition: opacity .18s ease; pointer-events: none; }
    .sb-pin:hover text, .sb-pin-on text { opacity: 1; }
    .sb-pin:hover circle.sb-dot { fill: #fff; }
    .sb-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
    .sb-ring-on { opacity: 1; }
    @media (prefers-reduced-motion: no-preference){ .sb-ring-on { animation: sb-ping 1.9s cubic-bezier(.16,1,.3,1) infinite; } }
    @keyframes sb-ping { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.8); opacity: 0; } 100% { opacity: 0; } }
    .sb-partner-row { transition: background .15s ease, border-color .15s ease; cursor: pointer; }
    /* Partner map: Finland is a tall country, so the map panel is portrait and
       stays pinned while the workshop list beside it is scanned. The list is
       far taller than the map, and this uses that space instead of leaving a
       gap under it. Not sticky once the grid stacks on mobile. */
    .sb-partner-map { position: sticky; top: 96px; }
    @media (max-width: 900px) { .sb-partner-map { position: static; min-height: 460px !important; } }
    .sb-partner-row:hover { background: var(--sb-grey-2); }
    .sb-partner-row-on { background: var(--sb-accent-soft) !important; border-color: var(--sb-accent) !important; }
    .sb-map-panel { background:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 100% 38px,
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0 / 38px 100%,
      radial-gradient(120% 90% at 70% 18%, #3a0c0a 0%, #260807 45%, #160604 100%); }

    /* ===== MOBILE / RESPONSIVE ===== */
    html, body { overflow-x: hidden; max-width: 100%; }
    img, video { max-width: 100%; }
    @media (max-width: 900px) {
      /* stack every multi-column grid */
      [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      /* Section headers use a 2-col grid (heading left, intro right) with a wide
         column gap. Once stacked that gap becomes vertical space between a heading
         and its own paragraph, which reads as a break. Tighten it. */
      [style*="grid-template-columns: 1.05fr 1fr"] { gap: 14px !important; }
      /* wrap flex rows */
      [style*="justify-content: space-between"] { flex-wrap: wrap !important; }
      /* ...but the FAQ row must stay on one line, or a long question pushes the
         chevron onto its own line and leaves dead space. */
      details.sb-faq > summary { flex-wrap: nowrap !important; align-items: flex-start !important; }
      details.sb-faq > summary > .sb-faq-chevron { margin-top: 4px; }
    }
    @media (max-width: 768px) {
    /* Hero photo overlays: the desktop gradient runs left->right, which on a
       narrow screen leaves body copy sitting over the bright side of the photo.
       Swap to a vertical wash on phones so the text stays legible. */
    [style*="rgba(22, 6, 4, 0.82)"],
    [style*="rgba(22, 6, 4, 0.92)"] {
        background: linear-gradient(180deg, rgba(22, 6, 4, 0.88) 0%, rgba(22, 6, 4, 0.74) 55%, rgba(22, 6, 4, 0.82) 100%) !important;
    }

      /* tame big headings + hero */
      h1 { font-size: 38px !important; line-height: 1.08 !important; }
      h2 { font-size: 28px !important; line-height: 1.12 !important; }
      /* Side gutter: some sections carry it themselves (FAQ, quote form), others
         via an inner wrapper. Put it on the section and zero the wrapper so it
         is applied exactly once — never doubled, never missing. */
      main > section { padding-left: 20px !important; padding-right: 20px !important; }
      /* :not([style*="border-radius"]) is essential — the reset must only strip
         plain layout wrappers. A bordered/rounded BOX owns its padding, and
         zeroing it pushes the content flush against the box's own border. */
      main > section > div:not([style*="border-radius"]) { padding-left: 0 !important; padding-right: 0 !important; }
      /* The section owns the vertical rhythm — the inner wrapper must NOT add
         its own, or every gap doubles (56+56 top AND bottom = 224px of void). */
      main > section:not(:first-child) { padding-top: 40px !important; padding-bottom: 40px !important; }
      main > section:not(:first-child) > div:not([style*="border-radius"]) { padding-top: 0 !important; padding-bottom: 0 !important; }
      /* Hero: no padding on the section; the content wrapper clears the fixed
         72px header and keeps some breathing room below. */
      main > section:first-child { padding-top: 0 !important; padding-bottom: 0 !important; }
      main > section:first-child > div { padding-top: 96px !important; padding-bottom: 64px !important; }
      /* CARD / BOX CONTAINERS — generic mobile padding.
         Boxes designed with 40–52px desktop padding leave only ~250px of text
         width on a 390px phone, which reads cramped ("A longer second life",
         dark CTA panels, etc.). Slim the padding and tighten oversized internal
         gaps (they become vertical dead space once the grid stacks).
         The border-radius guard limits this to actual boxes (not sections), and
         the second attribute selector raises specificity above the
         "main > section > div" reset further up.
         No trailing ';' in the match, so two-value shorthands are caught too
         (e.g. "padding: 40px 44px" on the Other-brands box). */
      [style*="border-radius"][style*="padding: 34px"],
      [style*="border-radius"][style*="padding: 36px"],
      [style*="border-radius"][style*="padding: 40px"],
      [style*="border-radius"][style*="padding: 44px"],
      [style*="border-radius"][style*="padding: 48px"],
      [style*="border-radius"][style*="padding: 52px"] { padding: 22px !important; }
      [style*="border-radius"][style*="gap: 48px"],
      [style*="border-radius"][style*="gap: 56px"] { gap: 22px !important; }
      [style*="border-radius"][style*="gap: 32px"] { gap: 20px !important; }

      /* "We do not recommend single module replacement" callout (model pages).
         Side-by-side icon + 40px padding squeezed the text to ~214px on a phone.
         Stack the icon above the text and slim the padding so the copy gets the
         full width. */
      /* Two attribute selectors so this outranks the "zero the inner wrapper"
         rule above (which would otherwise strip the box's vertical padding). */
      [style*="var(--sb-accent-soft)"][style*="padding: 40px"] {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 22px !important;
      }
      [style*="var(--sb-accent-soft)"][style*="padding: 40px"] h3 { font-size: 20px !important; line-height: 1.2 !important; }
      /* PROCESS PAGE — stage timeline (Stage 01–04).
         The decorative 2px connector rail is absolutely positioned at x=21px.
         Once the "44px 1fr" grid collapses, the stage content runs full width
         and the rail cuts straight through the text, while each marker circle
         floats on its own row detached from its stage. Drop the rail on mobile
         and tighten the marker gap so every stage reads as a clean block. */
      [style*="position: absolute"][style*="width: 2px"] { display: none !important; }
      [style*="grid-template-columns: 44px 1fr"] { gap: 12px !important; padding-bottom: 8px !important; }
      /* footer gets the same gutter, and stacks */
      footer > div { grid-template-columns: 1fr !important; gap: 32px !important; padding-left: 20px !important; padding-right: 20px !important; }
    }

    /* ===== DESKTOP SECTION RHYTHM =====
       Trim only the oversized symmetric section paddings. Values are matched
       with a trailing ';' so asymmetric variants (e.g. "88px 32px 0px") keep
       their intentional tight/loose sides. */
    @media (min-width: 769px) {
      [style*="padding: 88px 0px;"],
      [style*="padding: 92px 0px;"] { padding-top: 60px !important; padding-bottom: 60px !important; }
      [style*="padding: 80px 32px;"] { padding-top: 56px !important; padding-bottom: 56px !important; }
      [style*="padding: 84px 32px;"],
      [style*="padding: 88px 32px;"] { padding-top: 60px !important; padding-bottom: 60px !important; }
      [style*="padding: 96px 32px;"] { padding-top: 64px !important; padding-bottom: 64px !important; }
    }

    /* Anchor targets must clear the fixed 72px header, or jumping to
       #request-quote hides its heading behind the nav. */
    #request-quote { scroll-margin-top: 96px; }
    html { scroll-behavior: smooth; }

    /* ===== INSTAGRAM FEED (Smash Balloon) — on-brand overrides =====
       Scoped to .sb-ig-feed so it cannot affect anything else. */
    .sb-ig-feed #sb_instagram { padding-bottom: 0 !important; }
    .sb-ig-feed #sb_instagram .sbi_photo_wrap,
    .sb-ig-feed #sb_instagram .sbi_photo { border-radius: 10px; overflow: hidden; }
    .sb-ig-feed #sb_instagram .sbi_item { padding: 7px !important; }
    .sb-ig-feed #sb_instagram #sbi_load .sbi_load_btn,
    .sb-ig-feed #sb_instagram .sbi_follow_btn a {
      font-family: 'Bai Jamjuree', sans-serif !important;
      font-weight: 600 !important;
      background: var(--sb-accent) !important;
      color: #fff !important;
      border-radius: 6px !important;
      border: none !important;
    }

    /* ===================== SITE HEADER / NAV (v2) ===================== */
    /* Fixed + transparent over the dark hero at the top of every page; turns
       solid white once scrolled (the sb-scrolled class is toggled by JS). */
    .sb-nav{position:fixed;left:0;right:0;top:0;z-index:50;background:transparent;backdrop-filter:none;border-bottom:1px solid transparent;transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;}
    .sb-nav.sb-scrolled{background:rgba(255,255,255,0.94);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--sb-grey-3);}
    .sb-nav-inner{max-width:1200px;margin:0 auto;padding:0 32px;height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
    /* flex:0 0 auto is load-bearing. The logo's width comes from the image's
       aspect ratio, which makes it the most shrinkable item in the row, so
       without this it collapses to 0px wide once the nav runs out of space
       instead of the row overflowing. */
    .sb-logo{flex:0 0 auto;}
    .sb-nav-actions{flex:0 0 auto;}
    .sb-logo img{height:34px;width:auto;display:block;transition:filter .4s ease;}
    /* transparent (top) state — white logo, links, burger and outline login button over the dark hero */
    .sb-nav:not(.sb-scrolled) .sb-logo img{filter:brightness(0) invert(1);}
    .sb-nav:not(.sb-scrolled) .sb-nav-link{color:#fff;}
    .sb-nav:not(.sb-scrolled) .sb-nav-link:hover{color:#fff;opacity:.72;}
    .sb-nav:not(.sb-scrolled) .sb-burger{color:#fff;}
    .sb-nav:not(.sb-scrolled) .sb-btn-login{background:transparent;border-color:rgba(255,255,255,0.55);color:#fff;}
    .sb-nav:not(.sb-scrolled) .sb-btn-login:hover{background:rgba(255,255,255,0.14);border-color:#fff;color:#fff;}
    .sb-nav-links{display:flex;align-items:center;gap:20px;}
    .sb-nav-link{font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:14px;text-decoration:none;color:var(--sb-fg);white-space:nowrap;transition:color .15s;}
    .sb-nav-link:hover{color:var(--sb-accent);}
    .sb-nav-actions{display:flex;align-items:center;gap:12px;}
    .sb-btn-login{display:inline-flex;align-items:center;gap:7px;font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:14px;height:42px;padding:0 18px;border-radius:6px;border:1px solid var(--sb-accent);background:#fff;color:var(--sb-accent);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
    .sb-btn-login:hover{background:var(--sb-accent);color:#fff;}
    .sb-btn-contact{display:inline-flex;align-items:center;font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:14px;height:42px;padding:0 22px;border-radius:6px;border:none;background:var(--sb-accent);color:#fff;text-decoration:none;white-space:nowrap;transition:background .15s;}
    .sb-btn-contact:hover{background:var(--sb-accent-hover);}
    .sb-models{position:relative;}
    .sb-models-trigger{display:inline-flex;align-items:center;gap:5px;cursor:pointer;}
    .sb-dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(6px);opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;background:#fff;border:1px solid var(--sb-grey-3);border-radius:12px;box-shadow:0 12px 28px rgba(36,38,38,.12);padding:8px;min-width:260px;z-index:60;}
    .sb-models:hover .sb-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
    .sb-dropdown::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
    .sb-drop-item{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;padding:11px 14px;border-radius:7px;font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:14px;color:var(--sb-fg);transition:background .12s;}
    .sb-drop-item:hover{background:var(--sb-grey-2);}
    .sb-drop-item span:last-child{font-family:'Open Sans',sans-serif;font-weight:400;font-size:12px;color:var(--sb-fg-subtle);}
    .sb-drop-div{height:1px;background:var(--sb-grey-3);margin:6px 8px;}
    .sb-drop-all{display:flex;align-items:center;gap:6px;text-decoration:none;padding:10px 14px;border-radius:7px;font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:13px;color:var(--sb-accent);}
    .sb-drop-all:hover{background:var(--sb-grey-2);}
    .sb-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;cursor:pointer;color:var(--sb-fg);}
    .sb-burger svg{width:26px;height:26px;}
    .sb-mobile{position:fixed;inset:0;z-index:100;background:#fff;transform:translateX(100%);transition:transform .28s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;visibility:hidden;}
    .sb-mobile.open{transform:translateX(0);visibility:visible;}
    .sb-mobile-top{display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 24px;border-bottom:1px solid var(--sb-grey-3);flex:0 0 auto;}
    .sb-mobile-top img{height:32px;}
    .sb-close{width:44px;height:44px;border:none;background:transparent;cursor:pointer;color:var(--sb-fg);display:flex;align-items:center;justify-content:center;}
    .sb-close svg{width:26px;height:26px;}
    .sb-mobile-body{flex:1 1 auto;overflow-y:auto;padding:8px 24px 24px;}
    .sb-m-link{display:block;font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:22px;color:var(--sb-fg);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--sb-grey-3);}
    .sb-m-models{border-bottom:1px solid var(--sb-grey-3);}
    .sb-m-models-trigger{display:flex;align-items:center;justify-content:space-between;font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:22px;color:var(--sb-fg);padding:16px 0;cursor:pointer;background:none;border:none;width:100%;text-align:left;}
    .sb-m-models-trigger svg{transition:transform .2s;}
    .sb-m-models.open .sb-m-models-trigger svg{transform:rotate(180deg);}
    .sb-m-sub{max-height:0;overflow:hidden;transition:max-height .28s ease;}
    .sb-m-models.open .sb-m-sub{max-height:340px;}
    .sb-m-sublink{display:block;font-family:'Open Sans',sans-serif;font-size:17px;color:var(--sb-fg-muted);text-decoration:none;padding:12px 0 12px 16px;}
    .sb-mobile-actions{flex:0 0 auto;padding:20px 24px;border-top:1px solid var(--sb-grey-3);display:flex;flex-direction:column;gap:12px;background:#fff;}
    .sb-m-login{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:8px;border:1px solid var(--sb-accent);background:#fff;color:var(--sb-accent);font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:16px;text-decoration:none;}
    .sb-m-contact{display:inline-flex;align-items:center;justify-content:center;height:52px;border-radius:8px;background:var(--sb-accent);color:#fff;font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:16px;text-decoration:none;}
    body.sb-noscroll{overflow:hidden;}
    /* Nav width tiers, measured in Finnish - the longest label set
       ("Jaljitettavyys", "Ajankohtaista"), so it is the binding case; English
       needs ~55px less. Note .sb-nav-inner is capped at 1200px, so the widest
       tier has to fit 1200 no matter how large the screen is.
         >=1201  gaps 20/20, 14px  -> needs 1159 in a 1200 container (41px spare)
         1141-1200  gaps 16/14, 13.5px -> needs 1105 (36px spare at 1141)
         <=1140  burger
       Every tier keeps headroom so a longer translation cannot collapse the
       logo again. */
    @media (max-width:1200px){
      .sb-nav-inner{gap:14px;}
      .sb-nav-links{gap:16px;}
      .sb-nav-link{font-size:13.5px;}
    }
    @media (max-width:1140px){.sb-nav-links,.sb-nav-actions{display:none;}.sb-burger{display:flex;}}

    /* ===================== LANGUAGE SWITCHER ===================== */
    /* Globe button in the nav actions area; languages drop down beneath it,
       reusing the same panel styling as the Models dropdown. */
    .sb-lang{position:relative;display:inline-flex;align-items:center;}
    .sb-lang-trigger{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 10px;
      background:none;border:none;cursor:pointer;color:var(--sb-fg);
      font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:14px;
      transition:color .15s;}
    .sb-lang-trigger:hover{color:var(--sb-accent);}
    .sb-lang-code{letter-spacing:.02em;}
    .sb-lang-menu{position:absolute;top:calc(100% + 10px);right:0;
      opacity:0;visibility:hidden;transform:translateY(6px);
      transition:opacity .16s,transform .16s;
      background:#fff;border:1px solid var(--sb-grey-3);border-radius:12px;
      box-shadow:0 12px 28px rgba(36,38,38,.12);padding:8px;min-width:180px;z-index:60;}
    .sb-lang:hover .sb-lang-menu,
    .sb-lang:focus-within .sb-lang-menu{opacity:1;visibility:visible;transform:translateY(0);}
    /* invisible bridge so the menu does not close while crossing the gap */
    .sb-lang-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px;}
    .sb-lang-item{display:flex;align-items:center;justify-content:space-between;gap:16px;
      text-decoration:none;padding:10px 12px;border-radius:7px;
      font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:14px;
      color:var(--sb-fg);transition:background .12s;}
    .sb-lang-item:hover{background:var(--sb-grey-2);}
    .sb-lang-item span:last-child{font-family:'Open Sans',sans-serif;font-weight:400;
      font-size:12px;color:var(--sb-fg-subtle);}
    .sb-lang-item.is-current{color:var(--sb-accent);cursor:default;}
    .sb-lang-item.is-current:hover{background:none;}
    /* Over the transparent hero the nav text is white. */
    .sb-nav:not(.sb-scrolled) .sb-lang-trigger{color:#fff;}
    .sb-nav:not(.sb-scrolled) .sb-lang-trigger:hover{color:rgba(255,255,255,.75);}
    /* Mobile menu: a plain row, no hover dropdown on touch. Lives in the panel's
       top bar, pushed right so it sits just left of the close button. */
    .sb-lang-mobile{display:flex;align-items:center;gap:2px;margin:0 2px 0 auto;}
    .sb-lang-m-label{display:inline-flex;color:var(--sb-fg-muted);margin-right:6px;}
    /* min-height + padding give each code a 44px touch target without changing
       how the row looks; the top bar is 72px tall so there is room. */
    .sb-lang-m-current,.sb-lang-m-link{display:inline-flex;align-items:center;
      justify-content:center;min-height:44px;min-width:34px;padding:0 4px;}
    .sb-lang-m-current{font-family:'Bai Jamjuree',sans-serif;font-weight:700;font-size:17px;color:var(--sb-accent);}
    .sb-lang-m-link{font-family:'Bai Jamjuree',sans-serif;font-weight:600;font-size:17px;
      color:var(--sb-fg-muted);text-decoration:none;}
    .sb-lang-m-link:hover{color:var(--sb-accent);}

/* ===================== MODEL PRICING TABLE — MOBILE ===================== */
    /* On phones the 5-column pricing grid otherwise stacks into one column with
       big gaps. Turn each row into a compact 2-column card: model info on the
       left, price + enquire on the right. Header row (grey bg) is hidden — the
       "incl. 25.5% VAT" note under the table keeps the VAT context. */
    @media (max-width: 900px) {
      [style*="2.2fr 2.2fr 1.4fr 1fr 120px"][style*="var(--sb-grey-2)"] { display: none !important; }
      [style*="2.2fr 2.2fr 1.4fr 1fr 120px"] {
        grid-template-columns: 1fr auto !important;
        column-gap: 16px !important;
        row-gap: 3px !important;
        padding: 15px 18px !important;
        align-items: start !important;
      }
      [style*="2.2fr 2.2fr 1.4fr 1fr 120px"] > :nth-child(1) { grid-area: 1 / 1; }
      [style*="2.2fr 2.2fr 1.4fr 1fr 120px"] > :nth-child(2) { grid-area: 2 / 1; }
      [style*="2.2fr 2.2fr 1.4fr 1fr 120px"] > :nth-child(3) { grid-area: 3 / 1; }
      [style*="2.2fr 2.2fr 1.4fr 1fr 120px"] > :nth-child(4) { grid-area: 1 / 2; text-align: right !important; }
      [style*="2.2fr 2.2fr 1.4fr 1fr 120px"] > :nth-child(5) { grid-area: 3 / 2; justify-self: end; }
    }