/* 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; }
    .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; }
      /* 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) {
      /* 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; }
      main > section > div { 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 { 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. */
      [style*="border-radius"][style*="padding: 40px;"],
      [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; }
      /* 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; }

    /* ===================== 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:24px;}
    .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:26px;}
    .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;}
    @media (max-width:1024px){.sb-nav-links,.sb-nav-actions{display:none;}.sb-burger{display:flex;}}

    /* ===================== 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; }
    }