/* =========================================================================
   luv2move.se — design system
   Pure monochrome. Cinematic. Tesla-inspired. Accessible (WCAG 2.2 AA target).
   One family (Inter), black / white / gray only — imagery carries the warmth.
   ========================================================================= */

/* Self-hosted Inter (variable, 400–700) — no external font CDN, GDPR-friendly. */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  /* --- Nordic palette: soft limewash light, spruce forest + fjord blue,
     warm birch, deep aurora-night. Calm, natural, unmistakably Scandinavian. */
  --bg:#f6f7f3;        /* limewash birch-white — soft Nordic daylight */
  --bg-2:#e9efe9;      /* soft sage section          */
  --bg-3:#dde6df;      /* deeper sage-grey           */
  --ink:#16231e;       /* deep pine charcoal (text)  */
  --ink-2:#38473f;
  --ink-3:#5d6a62;
  --ink-4:#8a948d;
  --line:#dee5df;
  --line-2:#c6cfc8;
  /* Spruce-green brand — the forests of the North */
  --brand:#2f5d4e;     /* spruce green (buttons, accents)   */
  --brand-2:#244a3d;   /* darker spruce (hover)             */
  --brand-3:#4f8a76;   /* brighter spruce (on-dark accents) */
  --brand-tint:#e6f0ea;/* soft green wash (gentle sections) */
  /* Fjord blue — Nordic water, sky and ice */
  --nord:#33697e;      /* fjord blue accent                 */
  --nord-2:#28566a;    /* deeper fjord (hover)              */
  --nord-3:#6fa7ba;    /* light fjord (on-dark)            */
  --nord-tint:#e4eef1; /* soft fjord wash                   */
  /* Birch / sand — the warmth of wood and wool (hygge) */
  --sand:#efe7d7;      /* warm birch section                */
  --sand-2:#e4d8c1;    /* deeper sand                       */
  --aurora:#63c8a4;    /* northern-lights teal (scenes)     */
  --dark:#102a2b;      /* deep aurora-night (cool spruce)   */
  --dark-2:#091d1e;    /* deepest night                     */
  --on-dark:#ffffff;
  --on-dark-2:rgba(255,255,255,.76);
  --on-dark-3:rgba(255,255,255,.6);
  --r:4px;             /* crisp Tesla button radius */
  --r-lg:10px;
  --pill:100px;
  --maxw:1200px;
  --gut:clamp(20px,4vw,48px);
  --headerh:60px;
  --promoh:36px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow:0 2px 10px rgba(0,0,0,.06), 0 20px 44px -28px rgba(0,0,0,.35);
  --disp:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--disp); margin:0; line-height:1.1; letter-spacing:-.02em; font-weight:600}
p{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:var(--ink); text-decoration:none}
a:hover{color:var(--brand)}
ul{margin:0}
[id]{scroll-margin-top:calc(var(--headerh) + 14px)}
body.has-promo [id]{scroll-margin-top:calc(var(--promoh) + 14px)}

:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:3px}
body.over-hero:not(.scrolled) .site-header :focus-visible{outline-color:#fff}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gut)}
.icn{width:24px; height:24px; flex:none}
.icn-sm{width:18px; height:18px; flex:none; vertical-align:middle}

/* interior pages sit below the fixed header */
body.solid-head{padding-top:var(--headerh)}
/* configurator pages drop the header entirely — only the finance banner sits on top */
body.has-promo.solid-head{padding-top:var(--promoh)}

/* Tesla-style promo bar — a slim finance nudge fixed above the header. */
.promo-bar{position:fixed; top:0; left:0; right:0; height:var(--promoh); z-index:130;
  display:flex; align-items:center; justify-content:center; gap:10px; padding:0 16px;
  background:#f3ead2; color:#4a4327; font-size:13px; font-weight:500; letter-spacing:.005em; text-align:center}
.promo-bar a{color:#4a4327; text-decoration:underline; text-underline-offset:2px; font-weight:600; white-space:nowrap}
.promo-bar a:hover{color:#2c2818}
.promo-strong{font-weight:600}
@media (max-width:560px){ .promo-bar{font-size:12px; gap:7px} .promo-lead, .promo-hide-sm{display:none} }

/* -------------------------------------------------------------------------
   Buttons — Tesla dual-CTA system
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:500; font-size:15px; letter-spacing:.02em;
  line-height:1; padding:0 22px; min-height:44px; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn .icn{width:18px; height:18px; stroke-width:2}
.btn:active{transform:translateY(1px)}
/* solid forest-green primary (interior sections on light bg) */
.btn-primary{background:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-2); color:#fff}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}
.btn-sm{min-height:40px; font-size:14px; padding:0 18px}
.btn-block{width:100%}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:28px}

/* on dark bands / cta band — white button, forest text */
.band-dark .btn-primary,.cta-band .btn-primary,.proof .btn-primary{background:#fff; color:var(--brand)}
.band-dark .btn-primary:hover,.cta-band .btn-primary:hover,.proof .btn-primary:hover{background:var(--brand-tint)}
.btn-ghost.on-dark{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.1); border-color:#fff; color:#fff}

/* -------------------------------------------------------------------------
   Eyebrow / section heads
   ------------------------------------------------------------------------- */
.eyebrow{display:inline-block; font-weight:600; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand)}
.eyebrow.on-dark{color:var(--on-dark-3)}
.lead{font-size:20px; line-height:1.55; color:var(--ink-2); font-weight:400}
.sec-head{max-width:680px; margin-bottom:44px}
.sec-head .eyebrow{margin-bottom:14px}
.sec-head h2, .sec-head h1{font-size:clamp(28px,4vw,44px); letter-spacing:-.03em}
.sec-head .sec-intro{margin-top:16px; font-size:18px; color:var(--ink-2)}
.sec-head.on-dark h2, .sec-head.on-dark h1{color:#fff}
.sec-head.on-dark .sec-intro{color:var(--on-dark-2)}

/* -------------------------------------------------------------------------
   Header — fixed, transparent over hero, solid on scroll / interior
   ------------------------------------------------------------------------- */
.skip-link{position:fixed; left:-9999px; top:0; background:var(--ink); color:#fff;
  padding:12px 18px; border-radius:0 0 6px 0; z-index:200}
.skip-link:focus{left:0}

.site-header{position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background-color .25s ease, border-color .25s ease, box-shadow .25s ease}
body.has-promo .site-header{top:var(--promoh)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--headerh)}
.brand{display:flex; align-items:center}
.brand-logo{height:40px; width:auto; display:block}
.brand-logo-white{display:none}

/* solid state (interior pages, or scrolled home/product) */
.site-header{background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.site-nav a{color:var(--ink-2)}

/* transparent state (over a hero panel, before scroll) */
body.over-hero:not(.scrolled) .site-header{background:transparent; border-color:transparent;
  backdrop-filter:none}
body.over-hero:not(.scrolled) .site-header::before{content:""; position:absolute; inset:0 0 auto 0;
  height:160px; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0))}
body.over-hero:not(.scrolled) .brand-logo-color{display:none}
body.over-hero:not(.scrolled) .brand-logo-white{display:block}
body.over-hero:not(.scrolled) .site-nav a{color:rgba(255,255,255,.92)}
body.over-hero:not(.scrolled) .site-nav a:hover{color:#fff}
body.over-hero:not(.scrolled) .nav-toggle{color:#fff}

.site-nav{display:flex; align-items:center; gap:8px}
.site-nav a{font-weight:500; font-size:14px; letter-spacing:.01em; padding:8px 14px;
  border-radius:var(--r); transition:color .18s ease, background-color .18s ease}
.site-nav a:not(.btn):hover{color:var(--ink); background:rgba(0,0,0,.05)}
body.over-hero:not(.scrolled) .site-nav a:not(.btn):hover{background:rgba(255,255,255,.14)}
.site-nav a[aria-current="page"]:not(.btn){color:var(--ink); font-weight:600}
body.over-hero:not(.scrolled) .site-nav a[aria-current="page"]:not(.btn){color:#fff}
.site-nav > .btn{margin-left:6px}
/* the header CTA: outline that adapts to state */
.site-nav .btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.site-nav .btn-primary:hover{background:#000}
body.over-hero:not(.scrolled) .site-nav .btn-primary{background:rgba(255,255,255,.92); color:var(--ink); border-color:transparent}
body.over-hero:not(.scrolled) .site-nav .btn-primary:hover{background:#fff}

/* burger — hidden on desktop */
.nav-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px;
  margin-right:-10px; padding:0; background:none; border:0; border-radius:8px;
  color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent}
.nav-toggle .nav-ic{width:26px; height:26px}
.nav-toggle .nav-ic-close{display:none}
.site-header.nav-open .nav-toggle .nav-ic-open{display:none}
.site-header.nav-open .nav-toggle .nav-ic-close{display:block}

/* -------------------------------------------------------------------------
   Panels — full-viewport cinematic (Tesla)
   ------------------------------------------------------------------------- */
.panel{position:relative; width:100%; min-height:100vh; min-height:100svh; overflow:hidden;
  scroll-snap-align:start}
.panel-media{position:absolute; inset:0; z-index:0; background:var(--dark)}
.panel-media svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.panel-photo{position:absolute; inset:0; background-size:cover; background-position:center;
  background-repeat:no-repeat}
.panel-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.08) 20%, rgba(0,0,0,0) 42%,
    rgba(0,0,0,.05) 60%, rgba(0,0,0,.62) 100%)}
.panel-light .panel-scrim{background:linear-gradient(180deg, rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.1) 24%, rgba(255,255,255,0) 46%, rgba(255,255,255,.2) 64%, rgba(255,255,255,.78) 100%)}
.panel-inner{position:relative; z-index:2; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  text-align:center; padding:calc(var(--headerh) + 8vh) var(--gut) 7vh}
.panel-top{display:flex; flex-direction:column; align-items:center; gap:14px; max-width:900px}
.panel-eyebrow{font-weight:600; font-size:13px; letter-spacing:.18em; text-transform:uppercase}
.panel h1,.panel h2{font-size:clamp(38px,6.4vw,66px); font-weight:600; letter-spacing:-.035em; line-height:1.02}
.panel-sub{font-size:clamp(16px,2.1vw,21px); font-weight:400; line-height:1.4; max-width:44ch}
.panel-bottom{display:flex; flex-direction:column; align-items:center; gap:16px; width:100%}
.panel-note{font-size:13px; font-weight:500; letter-spacing:.01em; margin:0}
/* Floated product cutout in a hero panel (Tesla product-hero feel). Sits
   between the title and the CTAs; space-between centres it in the viewport. */
.panel-stage{width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:0; flex:1 1 auto; padding:18px 0}
.panel-cut{max-height:46vh; width:auto; max-width:min(720px,86vw); object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.5))}
.panel-shadow{display:block; width:min(400px,56vw); height:22px; margin-top:-6px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,0) 72%)}
.panel-light .panel-shadow{background:radial-gradient(ellipse at center, rgba(0,0,0,.22), rgba(0,0,0,0) 72%)}

/* tone: dark (white text) */
.panel-dark .panel-eyebrow{color:rgba(255,255,255,.8)}
.panel-dark h1,.panel-dark h2{color:#fff}
.panel-dark .panel-sub{color:rgba(255,255,255,.86)}
.panel-dark .panel-note{color:rgba(255,255,255,.66)}
/* tone: light (dark text) */
.panel-light .panel-media{background:var(--bg-2)}
.panel-light .panel-eyebrow{color:var(--ink-3)}
.panel-light h1,.panel-light h2{color:var(--ink)}
.panel-light .panel-sub{color:var(--ink-2)}
.panel-light .panel-note{color:var(--ink-3)}

/* =========================================================================
   Nordic ambience — living northern lights
   A decorative layer dropped over any dark scene (heroes, product panels,
   closing CTAs). Sits above the scrim, below the copy. All motion is pure
   CSS and fully stilled under prefers-reduced-motion.
   ========================================================================= */
.sky-fx{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden}
/* --- Aurora curtains: soft, blurred ribbons of light high in the sky --- */
.aurora{position:absolute; left:-30%; right:-30%; top:-14%; height:66%;
  filter:blur(52px) saturate(1.2); mix-blend-mode:screen; will-change:transform,opacity;
  border-radius:0 0 60% 60%/0 0 100% 100%}
.aurora-1{opacity:.55; transform:translateX(-4%) rotate(-7deg);
  background:
    radial-gradient(46% 120% at 28% 8%, rgba(99,200,164,.85), rgba(99,200,164,0) 68%),
    radial-gradient(40% 120% at 60% 0%, rgba(84,197,214,.6), rgba(84,197,214,0) 72%)}
.aurora-2{opacity:.42; height:56%; top:-8%; transform:translateX(4%) rotate(6deg);
  background:
    radial-gradient(42% 120% at 52% 4%, rgba(120,224,196,.8), rgba(120,224,196,0) 68%),
    radial-gradient(38% 120% at 80% 0%, rgba(155,134,223,.5), rgba(155,134,223,0) 72%)}
.aurora-3{opacity:.34; height:48%; top:-2%; transform:rotate(-3deg);
  background:radial-gradient(40% 120% at 20% 0%, rgba(72,167,201,.7), rgba(72,167,201,0) 70%)}
/* Vertical striation gives the curtains their characteristic rays; masked so it
   fades out before it reaches the ground. */
.aurora-1::after,.aurora-2::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(94deg, rgba(255,255,255,0) 0 24px, rgba(232,255,247,.12) 24px 28px, rgba(255,255,255,0) 28px 60px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 80%); mask-image:linear-gradient(180deg,#000 0,transparent 80%)}
@media (prefers-reduced-motion: no-preference){
  .aurora-1{animation:auroraA 19s ease-in-out infinite}
  .aurora-2{animation:auroraB 27s ease-in-out infinite}
  .aurora-3{animation:auroraA 34s ease-in-out infinite reverse}
}
@keyframes auroraA{0%,100%{transform:translateX(-6%) rotate(-7deg); opacity:.4} 50%{transform:translateX(5%) rotate(-4deg); opacity:.62}}
@keyframes auroraB{0%,100%{transform:translateX(4%) rotate(6deg); opacity:.3} 50%{transform:translateX(-4%) rotate(3deg); opacity:.5}}
/* Closing CTA becomes a deep aurora-night, so every page ends on a Nordic note */
.cta-band{position:relative; overflow:hidden;
  background:linear-gradient(165deg,#071a1c 0%,#0f2d30 52%,#081f21 100%)}
.cta-band>.wrap{position:relative; z-index:2}

/* buttons over panels — translucent Tesla pair */
.panel .cta-row{margin-top:0; justify-content:center}
.panel .cta-row .btn{min-width:min(264px,80vw)}
.panel-dark .btn-primary{background:rgba(23,26,32,.82); color:#fff; border-color:transparent;
  backdrop-filter:blur(2px)}
.panel-dark .btn-primary:hover{background:rgba(23,26,32,.96)}
.panel-dark .btn-ghost{background:rgba(244,244,244,.62); color:var(--ink); border-color:transparent;
  backdrop-filter:blur(2px)}
.panel-dark .btn-ghost:hover{background:rgba(255,255,255,.9); color:var(--ink)}
.panel-light .btn-primary{background:var(--brand); color:#fff}
.panel-light .btn-primary:hover{background:#000}
.panel-light .btn-ghost{background:rgba(255,255,255,.72); color:var(--ink); border-color:rgba(23,26,32,.18);
  backdrop-filter:blur(2px)}
.panel-light .btn-ghost:hover{background:#fff; border-color:var(--ink)}

/* scroll-snap only on the home showcase */
html.home{scroll-snap-type:y proximity}

/* -------------------------------------------------------------------------
   Interior hero (page variant) + guide hero
   ------------------------------------------------------------------------- */
.hero{position:relative}
/* Light page heroes carry the Nordic motif in a light key: a soft aurora glow
   from above and a pale pine treeline along the base — legible, unmistakably
   Scandinavian. */
.hero-page{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  padding:clamp(48px,7vw,86px) 0 clamp(40px,4vw,56px);
  background:
    radial-gradient(120% 96% at 50% -34%, rgba(99,200,164,.17), rgba(99,200,164,0) 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%)}
.hero-page::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:56px; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27480%27%20height%3D%27140%27%20viewBox%3D%270%200%20480%20140%27%3E%3Cg%20fill%3D%27%23cdddd2%27%3E%3Cpath%20d%3D%27M60%2022%20L104%20132%20L16%20132%20Z%27%2F%3E%3Cpath%20d%3D%27M60%2056%20L96%20132%20L24%20132%20Z%27%2F%3E%3Cpath%20d%3D%27M168%2042%20L206%20132%20L130%20132%20Z%27%2F%3E%3Cpath%20d%3D%27M270%2014%20L322%20132%20L218%20132%20Z%27%2F%3E%3Cpath%20d%3D%27M270%2054%20L312%20132%20L228%20132%20Z%27%2F%3E%3Cpath%20d%3D%27M382%2036%20L422%20132%20L342%20132%20Z%27%2F%3E%3Cpath%20d%3D%27M442%2058%20L476%20132%20L408%20132%20Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat:repeat-x; background-position:center bottom; background-size:auto 100%; opacity:.5; pointer-events:none}
.hero-page>.wrap{position:relative; z-index:1}
.hero-page .eyebrow{margin-bottom:16px}
.hero-page h1{font-size:clamp(36px,6vw,58px); letter-spacing:-.035em; max-width:18ch; margin:0}
.hero-page .lead{margin-top:20px; max-width:56ch}

.guide-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  padding:clamp(48px,7vw,92px) 0 clamp(30px,4vw,46px);
  background:
    radial-gradient(120% 96% at 50% -34%, rgba(99,200,164,.15), rgba(99,200,164,0) 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%)}
.guide-hero>.wrap{position:relative; z-index:1}
.guide-hero .eyebrow{margin-bottom:16px}
.guide-hero h1{font-size:clamp(32px,5.4vw,58px); letter-spacing:-.035em; max-width:20ch; margin:0}
.guide-hero .lead{font-size:clamp(18px,2.3vw,22px); color:var(--ink-2); max-width:64ch; margin-top:20px}
.guide-meta{margin-top:20px; color:var(--ink-3); font-weight:500; font-size:14px; letter-spacing:.02em}

/* -------------------------------------------------------------------------
   Trust strip
   ------------------------------------------------------------------------- */
.trust{background:var(--ink); color:#fff}
.trust-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:26px 0}
.trust-item{display:flex; align-items:center; gap:14px; padding:6px 8px}
.trust-item .icn{width:24px; height:24px; stroke:rgba(255,255,255,.8)}
.trust-item b{font-family:var(--disp); font-size:22px; font-weight:600; display:block; line-height:1.05}
.trust-item span{font-size:13px; color:rgba(255,255,255,.7); font-weight:400}

/* -------------------------------------------------------------------------
   Generic block / prose
   ------------------------------------------------------------------------- */
.block{padding:clamp(56px,8vw,104px) 0}
.prose{max-width:760px}
.prose h2{font-size:clamp(26px,4vw,38px); letter-spacing:-.03em}
.prose p{margin-top:18px; color:var(--ink-2)}
.prose p:first-of-type{margin-top:0}
.block .prose .sec-head p{color:var(--ink-2)}
.prose-list{margin:16px 0 0; padding-left:22px; color:var(--ink-2)}
.prose-list li{margin-top:8px}
.article-body h2{font-size:26px; margin-top:44px; color:var(--ink); letter-spacing:-.02em}
.article-body h2:first-child{margin-top:0}
.article-body p{margin-top:16px}
.article-body p:first-of-type{margin-top:0}
.article-body .prose-list{margin-top:14px}

.band-dark{color:var(--on-dark-2);
  background:radial-gradient(110% 70% at 50% 0%, rgba(99,200,164,.11), rgba(99,200,164,0) 56%), var(--dark)}
.band-dark h2, .band-dark h3, .band-dark .sec-head h2{color:#fff}
.band-dark p, .band-dark .prose p, .band-dark .prose-list{color:var(--on-dark-2)}
.band-dark .eyebrow{color:var(--on-dark-3)}
/* Soft green-wash band — gentle warmth, easy on the eye (no harsh contrast) */
.band-soft{background:var(--brand-tint)}
.band-soft .eyebrow{color:var(--brand-2)}
/* Warm birch-sand band — Nordic hygge warmth */
.band-sand{background:var(--sand)}
.band-sand .eyebrow{color:var(--nord-2)}
/* Nordic (SE/FI/DK) band */
.nordic-band{background:linear-gradient(140deg, var(--sand) 0%, var(--nord-tint) 100%); text-align:center}
.nordic-band .eyebrow{color:var(--nord-2)}
.nordic-flags{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}
.nordic-flag{display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.65);
  border:1px solid var(--line); border-radius:var(--pill); padding:9px 20px 9px 12px; font-weight:600; color:var(--ink)}
.nordic-flag svg{width:28px; height:auto; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.18)}
.nordic-band .cta-row{margin-top:24px; justify-content:center}

/* -------------------------------------------------------------------------
   Grids / cards
   ------------------------------------------------------------------------- */
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px;
  display:flex; flex-direction:column; gap:12px}
.card h3{font-size:21px; letter-spacing:-.02em}
.card p{color:var(--ink-2); font-size:15.5px; margin:0}
.card-icon{display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px;
  border-radius:12px; background:var(--bg-2); color:var(--ink); margin-bottom:2px}
.card-icon .icn{width:25px; height:25px; stroke-width:1.7}
/* Product image tile at the top of a card (used instead of an icon when a shot exists). */
.card-media{display:flex; align-items:center; justify-content:center; width:100%; height:170px;
  border-radius:12px; background:var(--bg-2); margin-bottom:6px; overflow:hidden}
.card-media img{max-width:84%; max-height:90%; object-fit:contain}
.card-link{margin-top:auto; font-weight:600; color:var(--ink); display:inline-flex; align-items:center; gap:6px; font-size:15px}
.card-link .icn-sm{stroke-width:2}
a.card-link-wrap{color:inherit; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
a.card-link-wrap:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--line-2); color:inherit}

/* feature / checklist */
.feature-list, .checklist{list-style:none; padding:0; display:flex; flex-direction:column; gap:14px; margin-top:22px}
.feature-list li, .checklist li{display:flex; gap:13px; align-items:flex-start}
.feature-list .icn, .checklist .icn{stroke:var(--ink); margin-top:1px; width:22px; height:22px}

/* facts */
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:26px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.fact{background:var(--bg); padding:22px 24px}
.fact dt{font-size:13px; color:var(--ink-3); font-weight:500}
.fact dd{margin:6px 0 0; font-family:var(--disp); font-size:21px; font-weight:600; color:var(--ink); letter-spacing:-.01em}

/* steps */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:34px}
.step-num{display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%;
  background:var(--ink); color:#fff; font-family:var(--disp); font-weight:600; font-size:18px}
.step h3{font-size:21px; margin-top:18px; letter-spacing:-.02em}
.step p{margin-top:10px; color:var(--ink-2); font-size:15.5px}

/* find your fit (legacy) */
.fit{background:var(--bg-2)}
.fit-card{display:grid; grid-template-columns:minmax(0,1fr) 330px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.fit-left{padding:36px}
.fit-kicker{font-weight:600; color:var(--ink-3); font-size:12px; letter-spacing:.1em; text-transform:uppercase}
.fit-left h3{font-size:25px; margin-top:10px; letter-spacing:-.02em}
.fit-opts{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 24px}
.chip{display:inline-flex; align-items:center; padding:10px 18px; border-radius:var(--pill);
  border:1px solid var(--line-2); background:var(--bg); font-weight:500; font-size:15px}
.chip.sel{background:var(--ink); color:#fff; border-color:var(--ink)}
.fit-right{background:var(--ink); color:#fff; padding:34px;
  display:flex; flex-direction:column; justify-content:center; gap:12px}
.fit-ic{width:32px; height:32px; stroke:#fff}
.fit-big{font-family:var(--disp); font-size:26px; font-weight:600; line-height:1.12; letter-spacing:-.02em}
.fit-right p{color:var(--on-dark-2); font-size:15px}

/* funding (legacy) */
.fund{background:var(--bg-2)}
.fund-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:52px; align-items:center}
.fund-text h2{font-size:clamp(28px,4vw,40px); letter-spacing:-.03em}
.fund-text .lead{margin-top:16px}
.fund-card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px; box-shadow:var(--shadow)}
.fund-q{font-family:var(--disp); font-size:23px; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.fund-card p{margin-top:14px; color:var(--ink-2)}

/* -------------------------------------------------------------------------
   Proof / quotes / testimonials
   ------------------------------------------------------------------------- */
.proof{background:var(--ink); color:#fff}
.quote{max-width:900px; margin:0 auto; text-align:center}
.stars{display:flex; gap:6px; justify-content:center; color:#fff}
.stars .icn{width:20px; height:20px}
.quote blockquote{font-family:var(--disp); font-weight:500; font-size:clamp(24px,3.4vw,34px); line-height:1.28;
  letter-spacing:-.025em; margin:22px 0 0; color:#fff}
.quote .attr{margin-top:22px; color:var(--on-dark-2); font-weight:500}
.proof-h{text-align:center; color:#fff; font-size:clamp(26px,3.6vw,38px); letter-spacing:-.03em}
.tcard{margin:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:30px}
.tcard .stars{justify-content:flex-start; color:rgba(255,255,255,.85)}
.tcard blockquote{margin:16px 0 0; font-family:var(--disp); font-weight:500; font-size:20px; line-height:1.4;
  color:#fff; letter-spacing:-.01em}
.tcard figcaption{margin-top:18px; color:var(--on-dark-2); font-weight:500}
.tcard figcaption span{color:var(--on-dark-3); font-weight:400}

/* -------------------------------------------------------------------------
   Lead form
   ------------------------------------------------------------------------- */
.lead-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:40px}
.lead-copy h2{font-size:clamp(26px,3.4vw,34px); letter-spacing:-.03em}
.lead-copy .lead{margin-top:14px}
.lead-copy .feature-list{margin-top:22px}
.muted-ink{margin-top:22px; color:var(--ink-3); font-size:15px}
.muted-ink a{text-decoration:underline}
.lead-form{display:flex; flex-direction:column; gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.lead-form label{font-weight:500; font-size:13px; color:var(--ink-2); letter-spacing:.01em}
.lead-form input, .lead-form select, .lead-form textarea{font-family:var(--body); font-size:16px; padding:13px 14px;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg); color:var(--ink); width:100%; min-height:50px}
.lead-form textarea{min-height:92px; resize:vertical}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(23,26,32,.12)}
.lead-hint{font-size:13px; color:var(--ink-3); text-align:center; margin:0}
.lead-consent{font-size:12px; color:var(--ink-3); text-align:center; margin:0}
.lead-consent a{text-decoration:underline}
.lead-status{margin:0; font-size:14px; font-weight:500; text-align:center; min-height:1.2em}

/* Booking form: visual model picker */
.book-models{border:0; padding:0; margin:0; min-width:0}
.book-models legend{padding:0; font-weight:500; font-size:13px; color:var(--ink-2); letter-spacing:.01em; margin-bottom:10px}
.book-models-hint{font-weight:400; opacity:.72}
.book-model-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.book-model{position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px 10px;
  border:1.5px solid var(--line); border-radius:14px; cursor:pointer; background:var(--bg); transition:border-color .15s, box-shadow .15s, background .15s; text-align:center}
.book-model input{position:absolute; opacity:0; width:1px; height:1px}
.book-model-media{display:flex; align-items:center; justify-content:center; width:100%; height:74px;
  background:linear-gradient(165deg,#eef2ef,#e1e8e2); border-radius:10px}
.book-model-media img{max-height:70px; max-width:88%; width:auto; object-fit:contain; filter:drop-shadow(0 5px 7px rgba(24,39,31,.16))}
.book-any-ic{width:30px; height:30px; color:var(--brand)}
.book-model-name{font-size:12.5px; font-weight:600; color:var(--ink-2); line-height:1.2}
.book-model:hover{border-color:var(--brand-3,#8fae99)}
.book-model:has(input:checked){border-color:var(--brand); box-shadow:0 0 0 3px rgba(37,74,52,.14); background:var(--bg-2)}
.book-model:has(input:checked) .book-model-name{color:var(--ink)}
.book-model input:focus-visible + .book-model-media{outline:2px solid var(--brand); outline-offset:2px}
.book-model-any .book-model-media{background:var(--bg-2)}
@media (max-width:520px){ .book-model-grid{grid-template-columns:1fr 1fr} .book-model-media{height:66px} }
.lead-status.err{color:#b3261e}
.lead-ok{background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:28px;
  text-align:center; color:var(--ink); font-size:18px}
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}

/* feature video (product, feels real) */
.feature-video{position:relative; aspect-ratio:16 / 9; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow); max-width:960px; margin:0 auto; background:#000}
.feature-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* -------------------------------------------------------------------------
   Products mega-menu (monochrome)
   ------------------------------------------------------------------------- */
.nav-item{display:flex; align-items:center}
.has-mega{position:static}
.nav-trigger{display:inline-flex; align-items:center; gap:5px}
.nav-chevron{width:15px; height:15px; transition:transform .2s ease}
.has-mega:hover .nav-chevron, .has-mega:focus-within .nav-chevron{transform:rotate(180deg)}
.mega{position:absolute; top:100%; left:50%; width:min(1080px,96vw); padding-top:14px;
  transform:translateX(-50%) translateY(8px); opacity:0; visibility:hidden;
  transition:opacity .25s ease .4s, transform .25s ease .4s, visibility 0s linear .65s; z-index:120}
.has-mega:hover .mega, .has-mega:focus-within .mega{opacity:1; visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition:opacity .2s ease 0s, transform .2s ease 0s, visibility 0s}
.mega-panel{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:26px; display:grid; grid-template-columns:1fr 232px; gap:0}
.mega-products{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-right:26px}
.mega-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:2px}
/* Naked, blended thumb: the transparent product render floats on the panel with
   just a soft ground-shadow on hover — no grey tile. */
.mega-thumb{width:100%; aspect-ratio:4 / 3; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:none; overflow:visible; margin-bottom:4px}
.mega-thumb img{width:100%; height:100%; object-fit:contain; padding:6px;
  filter:drop-shadow(0 8px 12px rgba(24,39,31,.14)); transition:transform .2s ease}
.mega-card:hover .mega-thumb img{transform:translateY(-3px) scale(1.03)}
.mega-thumb.mega-ph{color:#fff}
.mega-thumb .mega-ic{width:40px; height:40px; stroke-width:1.5}
.mega-thumb-genny{background:linear-gradient(160deg,#3a3d42,#171a20)}
.mega-thumb-freee{background:linear-gradient(160deg,#4a4d52,#232629)}
.mega-thumb-addseat{background:linear-gradient(160deg,#5c5e62,#2b2e33)}
.mega-thumb-baddaboom{background:linear-gradient(160deg,#26282c,#0b0c0e)}
.mega-name{font-family:var(--disp); font-weight:600; font-size:16px; color:var(--ink)}
.mega-tag{font-size:12.5px; color:var(--ink-2); line-height:1.3; max-width:22ch; min-height:2.6em;
  display:flex; align-items:center; text-align:center}
.mega-price{font-size:13px; font-weight:700; color:var(--ink); margin-top:1px}
.mega-links{display:flex; gap:16px; justify-content:center; margin-top:8px}
.mega-links a{font-size:13px; font-weight:500; color:var(--ink-2)}
.mega-links a:hover{color:var(--ink); text-decoration:underline}
.mega-side{display:flex; flex-direction:column; border-left:1px solid var(--line); padding-left:26px}
.mega-side a{font-size:14px; font-weight:500; color:var(--ink-2); padding:9px 0}
.mega-side a:hover{color:var(--ink)}
/* Mega links live inside .site-nav, so the transparent-header state would
   otherwise paint them white on this always-light panel. Keep them dark and
   flat in both header states (equal specificity, later source order wins). */
.mega a{padding:0}
.mega-links a:not(.btn):hover,
.mega-side a:not(.btn):hover,
.mega-name:not(.btn):hover,
.mega-thumb:not(.btn):hover{background:none}
body.over-hero:not(.scrolled) .mega-links a,
body.over-hero:not(.scrolled) .mega-side a{color:var(--ink-2)}
a.mega-name, body.over-hero:not(.scrolled) a.mega-name{color:var(--ink)}
body.over-hero:not(.scrolled) .mega-links a:not(.btn):hover,
body.over-hero:not(.scrolled) .mega-side a:not(.btn):hover,
body.over-hero:not(.scrolled) a.mega-name:not(.btn):hover{color:var(--ink); background:none}
a.mega-name:hover{text-decoration:underline}

/* -------------------------------------------------------------------------
   Language picker (SV / DA / FI) — Nordic flags in the header
   ------------------------------------------------------------------------- */
/* Compact segmented pill — the three languages sit tight together as one chip,
   the active one filled. */
.lang-switch{display:inline-flex; align-items:center; align-self:center; gap:1px; margin-left:10px;
  padding:1px; border-radius:999px; background:rgba(23,26,32,.06)}
.lang-opt{display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px;
  font-size:11px; line-height:1; font-weight:600; letter-spacing:.02em; color:var(--ink-2);
  transition:background-color .15s ease, color .15s ease}
.lang-opt svg{width:13px; height:auto; border-radius:2px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.lang-opt:hover{color:var(--ink)}
.lang-opt.on{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.14)}
.lang-opt.on .lang-code{color:var(--brand)}
/* Transparent header over a dark hero. */
body.over-hero:not(.scrolled) .lang-switch{background:rgba(255,255,255,.15)}
body.over-hero:not(.scrolled) .lang-opt{color:rgba(255,255,255,.85)}
body.over-hero:not(.scrolled) .lang-opt:hover{color:#fff}
body.over-hero:not(.scrolled) .lang-opt.on{background:rgba(255,255,255,.96); color:var(--ink)}
body.over-hero:not(.scrolled) .lang-opt.on .lang-code{color:var(--brand)}
@media (max-width:860px){
  /* In the mobile menu the picker sits on its own row, flags spread out. */
  .lang-switch{margin:8px 0 4px; gap:6px}
  .lang-opt{padding:8px 10px; font-size:14px}
}

/* -------------------------------------------------------------------------
   Flagship guide components (monochrome)
   ------------------------------------------------------------------------- */
.callout{max-width:840px; margin:0 auto; text-align:center}
.callout-label{display:inline-block; font-weight:600; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-dark-3); margin-bottom:14px}
.callout p{font-family:var(--disp); font-weight:500; font-size:clamp(23px,3.3vw,33px); line-height:1.28;
  letter-spacing:-.025em; margin:0; color:#fff}
.callout-light{background:var(--bg-2); border-radius:var(--r-lg); padding:clamp(28px,4vw,44px); text-align:left}
.callout-light .callout-label{color:var(--ink-3)}
.callout-light p{color:var(--ink)}
/* Soft (pale-green) band: dark text so the callout stays legible, not white-on-light. */
.band-soft .callout p{color:var(--ink)}
.band-soft .callout .callout-label{color:var(--brand-2)}

.defbox{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,3.4vw,34px); max-width:860px; margin:0 auto}
.defbox .callout-label{display:block; color:var(--ink-3); margin-bottom:8px}
.defbox p{font-size:19px; color:var(--ink); margin:0; line-height:1.55}

.cmp-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:16px}
.cmp-col{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,30px)}
.cmp-col h3{font-size:20px; margin-bottom:16px; letter-spacing:-.02em}
.cmp-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.cmp-col li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); font-size:15.5px}
.cmp-ic{width:22px; height:22px; flex:none; margin-top:1px; stroke-width:2}
.cmp-no .cmp-ic{stroke:var(--ink-4)}
.cmp-yes{border-color:var(--line-2); background:var(--bg-2)}
.cmp-yes .cmp-ic{stroke:var(--ink)}
.band-dark .cmp-col{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.band-dark .cmp-col li{color:var(--on-dark-2)}
.band-dark .cmp-col h3{color:#fff}
.band-dark .cmp-yes{background:rgba(255,255,255,.1)}
.band-dark .cmp-no .cmp-ic{stroke:var(--on-dark-3)}
.band-dark .cmp-yes .cmp-ic{stroke:#fff}

.table-wrap{overflow-x:auto; margin-top:16px; border:1px solid var(--line); border-radius:var(--r-lg)}
.data-table{width:100%; border-collapse:collapse; font-size:15px; min-width:560px}
.data-table th{text-align:left; font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); padding:14px 18px; border-bottom:1px solid var(--line); background:var(--bg-2)}
.data-table td{padding:14px 18px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top}
.data-table tr:last-child td{border-bottom:none}
.data-table .td-lead{font-weight:600; color:var(--ink)}
.band-dark .table-wrap{border-color:rgba(255,255,255,.14)}
.band-dark .data-table th{background:rgba(255,255,255,.06); color:var(--on-dark-3); border-color:rgba(255,255,255,.14)}
.band-dark .data-table td{color:var(--on-dark-2); border-color:rgba(255,255,255,.12)}
.band-dark .data-table .td-lead{color:#fff}

.bigsteps{margin-top:12px}
.bigstep{display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,32px); padding:clamp(26px,3.4vw,36px) 0;
  border-top:1px solid var(--line)}
.bigstep:first-child{border-top:none}
.bigstep-n{font-family:var(--disp); font-weight:600; font-size:clamp(34px,5vw,54px); color:var(--ink-4); line-height:1}
.bigstep-body h3{font-size:clamp(21px,3vw,27px); letter-spacing:-.02em}
.bigstep-body p{margin-top:12px; color:var(--ink-2); max-width:64ch}
.bigstep-take{margin-top:14px !important; font-weight:600; color:var(--ink) !important}
.band-dark .bigstep{border-color:rgba(255,255,255,.14)}
.band-dark .bigstep-n{color:var(--on-dark-3)}
.band-dark .bigstep-body h3{color:#fff}
.band-dark .bigstep-take{color:#fff !important}

.crsl{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  background:var(--bg); margin-top:16px}
.band-dark .crsl{border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04)}
.crsl-stage{position:relative; aspect-ratio:16 / 9; background:var(--bg-2)}
.band-dark .crsl-stage{background:#0b0c0e}
.crsl-slide{position:absolute; inset:0; opacity:0; transition:opacity .5s ease}
.crsl-slide.on{opacity:1}
.crsl-slide svg{width:100%; height:100%; display:block}
.crsl-arrow{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:var(--ink); display:flex; align-items:center;
  justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.22)}
.crsl-arrow svg{width:22px; height:22px}
.crsl-prev{left:14px} .crsl-next{right:14px}
.crsl-caption{margin:0; padding:18px 20px; font-weight:500; font-size:16px; color:var(--ink); text-align:center;
  transition:opacity .2s ease, transform .2s ease}
.band-dark .crsl-caption{color:#fff}
.crsl-caption.crsl-fade{opacity:0; transform:translateY(6px)}
.crsl-dots{display:flex; gap:8px; justify-content:center; padding:0 0 18px}
.crsl-dot{width:9px; height:9px; border-radius:50%; border:none; background:var(--line-2); cursor:pointer; padding:0}
.crsl-dot.on{background:var(--ink)}
.band-dark .crsl-dot{background:rgba(255,255,255,.3)}
.band-dark .crsl-dot.on{background:#fff}

/* stat band */
.statband{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px; margin-top:22px}
.statband-item b{display:block; font-family:var(--disp); font-weight:600; font-size:clamp(30px,4.4vw,50px);
  line-height:1; color:#fff; letter-spacing:-.03em}
.statband-item span{display:block; margin-top:10px; color:var(--on-dark-3); font-size:14px; font-weight:500; line-height:1.35}
.block:not(.band-dark) .statband-item b{color:var(--ink)}
.block:not(.band-dark) .statband-item span{color:var(--ink-3)}

/* figure (labeled diagram) */
.fig{margin:16px 0 0}
.fig-frame{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2)}
.band-dark .fig-frame{border-color:rgba(255,255,255,.14); background:#0b0c0e}
.fig-frame svg{display:block; width:100%; height:auto}
.fig figcaption{margin-top:14px; text-align:center; color:var(--ink-3); font-size:14px}
.band-dark .fig figcaption{color:var(--on-dark-3)}

/* diagram row */
.dgr-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:22px}
.dgr-item{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px}
.band-dark .dgr-item{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.dgr-svg{border-radius:8px; overflow:hidden; background:var(--bg-2); margin-bottom:16px}
.band-dark .dgr-svg{background:#0b0c0e}
.dgr-svg svg{display:block; width:100%; height:auto}
.dgr-item h3{font-size:19px; letter-spacing:-.02em}
.band-dark .dgr-item h3{color:#fff}
.dgr-item p{margin-top:8px; color:var(--ink-2); font-size:15px}
.band-dark .dgr-item p{color:var(--on-dark-2)}

/* team cards */
.team-card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; text-align:center}
.team-avatar{display:inline-flex; align-items:center; justify-content:center; width:64px; height:64px;
  border-radius:50%; background:var(--ink); color:#fff; font-family:var(--disp); font-weight:600; font-size:22px;
  margin-bottom:14px; letter-spacing:.02em}
.team-card h3{font-size:20px; letter-spacing:-.02em}
.team-note{display:inline-block; margin-top:8px; padding:3px 11px; border-radius:999px;
  background:var(--brand-tint); color:var(--brand-2); font-size:12.5px; font-weight:600; letter-spacing:.01em}
.team-contact{margin-top:10px; display:flex; flex-direction:column; gap:4px}
.team-contact a{color:var(--ink-2); font-weight:500; font-size:15px}
.team-contact a:hover{color:var(--ink); text-decoration:underline}

/* contact "Ring oss" list */
.ring-list{display:flex; flex-direction:column; gap:16px; margin-top:6px; text-align:left}
.ring-person{display:flex; flex-direction:column}
.ring-name{font-weight:600; color:var(--ink)}
.ring-note{color:var(--brand-2); font-size:13px; font-weight:600; margin-bottom:2px}
.ring-person a{color:var(--ink-2); font-size:15px}
.ring-person a:hover{color:var(--ink); text-decoration:underline}
.contact-card address{font-style:normal; color:var(--ink-2); line-height:1.7}
.contact-card p{color:var(--ink-2)}

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative;
  font-family:var(--disp); font-weight:600; font-size:19px; color:var(--ink); letter-spacing:-.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-plus{position:absolute; right:2px; top:26px; width:16px; height:16px}
.faq-plus::before,.faq-plus::after{content:""; position:absolute; background:var(--ink); border-radius:2px;
  transition:transform .2s ease}
.faq-plus::before{left:0; top:7px; width:16px; height:2px}
.faq-plus::after{left:7px; top:0; width:2px; height:16px}
.faq-item[open] .faq-plus::after{transform:rotate(90deg); opacity:0}
.faq-item p{padding:0 40px 24px 0; color:var(--ink-2); margin:0}

/* -------------------------------------------------------------------------
   Video grid
   ------------------------------------------------------------------------- */
.video{background:var(--ink); color:#fff}
.video-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14)}
.video-card h3{color:#fff; font-size:19px; letter-spacing:-.02em}
.video-card p{color:var(--on-dark-2); font-size:15px}
.video-embed{position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-soon{align-items:flex-start}
.play-btn{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%;
  background:#fff; color:var(--ink)}
.play-btn .pl{width:22px; height:22px}
.play-btn.sm{width:46px; height:46px}

/* YouTube facade — thumbnail + play button; real embed loads only on click. */
.yt-lite{position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0;
  display:block; cursor:pointer; background:#000; overflow:hidden}
.yt-thumb{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.yt-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:68px; height:48px; display:flex; align-items:center; justify-content:center}
.yt-play svg{width:100%; height:100%; filter:drop-shadow(0 2px 8px rgba(0,0,0,.45))}
.yt-play-bg{fill:#212121; opacity:.86; transition:fill .2s ease, opacity .2s ease}
.yt-lite:hover .yt-thumb,.yt-lite:focus-visible .yt-thumb{transform:scale(1.04)}
.yt-lite:hover .yt-play-bg,.yt-lite:focus-visible .yt-play-bg{fill:#e11d2a; opacity:1}
.yt-lite:focus-visible{outline:3px solid #fff; outline-offset:-3px}
.yt-frame{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (prefers-reduced-motion: reduce){
  .yt-thumb{transition:none}
  .yt-lite:hover .yt-thumb,.yt-lite:focus-visible .yt-thumb{transform:none}
}

/* Genny trim selector (Base / Plus+ / Advance) */
.trim-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:8px}
.trim-card{position:relative; display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px 20px 22px; text-align:center}
.trim-featured{border-color:var(--brand); box-shadow:0 14px 44px -20px rgba(47,93,78,.55)}
.trim-badge{position:absolute; top:14px; right:14px; background:var(--brand); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px}
.trim-media{aspect-ratio:5 / 4; display:flex; align-items:center; justify-content:center; text-decoration:none}
.trim-media img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 14px rgba(24,39,31,.14)); transition:transform .2s ease}
.trim-media:hover img{transform:translateY(-4px) scale(1.02)}
.trim-name{font-size:24px; letter-spacing:-.02em; margin-top:4px}
.trim-name a{color:inherit; text-decoration:none}
.trim-name a:hover{text-decoration:underline}
.trim-tag{color:var(--ink-2); font-size:15px; margin-top:2px}
.trim-price{margin-top:10px; font-size:15px; color:var(--ink-2)}
.trim-price b{font-size:19px; color:var(--ink); font-weight:700}
.trim-pn{display:block; font-size:12px; color:var(--ink-3); margin-top:1px}
.trim-dots{display:flex; gap:7px; justify-content:center; margin-top:12px}
.trim-dot{width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.18)}
.trim-feats{list-style:none; padding:0; margin:16px 0 0; text-align:left; display:flex; flex-direction:column; gap:8px}
.trim-feats li{display:flex; gap:8px; align-items:flex-start; font-size:14px; color:var(--ink-2); line-height:1.4}
.trim-fi{width:16px; height:16px; color:var(--brand); flex:0 0 auto; margin-top:2px}
.trim-cta-row{display:flex; gap:10px; margin-top:18px}
.trim-cta{justify-content:center; flex:1 1 auto}
.trim-quick{flex:0 0 auto}
@media (max-width:420px){ .trim-cta-row{flex-direction:column} }
.trim-note{margin-top:16px; font-size:13px; color:var(--ink-3); text-align:center; max-width:60ch; margin-left:auto; margin-right:auto}
@media (max-width:820px){ .trim-grid{grid-template-columns:1fr; max-width:420px; margin-left:auto; margin-right:auto} }

/* Self-hosted feature video (R2 mp4) */
.media-video{margin:8px 0 0}
.media-video video{width:100%; aspect-ratio:16 / 9; object-fit:cover; border-radius:var(--r-lg); background:#000; display:block}
.media-video figcaption{margin-top:12px; text-align:center; color:var(--ink-2); font-size:14px}
.band-dark .media-video figcaption{color:var(--on-dark-2)}

/* Trim detail modal (Base / Plus+ / Advance) */
.trim-fi-plus{display:inline-flex; align-items:center; justify-content:center; color:var(--brand); font-weight:800; font-size:16px; line-height:1}
.trim-modal{width:min(1100px,94vw); max-height:92vh; padding:0; border:0; border-radius:20px; overflow:hidden;
  background:#fff; color:var(--ink); box-shadow:0 30px 80px -20px rgba(20,28,24,.5)}
.trim-modal::backdrop{background:rgba(20,28,24,.55)}
.tm-inner{display:grid; grid-template-columns:1.15fr .85fr; max-height:92vh}
.tm-media{position:relative; background:var(--bg-2); display:flex; align-items:center; justify-content:center; min-height:340px; padding:24px}
.tm-img{width:100%; height:100%; max-height:78vh; object-fit:contain}
.tm-nav{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0;
  background:rgba(255,255,255,.9); color:var(--ink); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(0,0,0,.12)}
.tm-prev{left:14px} .tm-next{right:14px}
.tm-nav:hover{background:#fff}
.tm-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:7px}
.tm-dot{width:8px; height:8px; border-radius:50%; border:0; background:rgba(24,39,31,.25); cursor:pointer; padding:0}
.tm-dot.on{background:var(--brand)}
.tm-info{padding:26px 26px 22px; overflow-y:auto; display:flex; flex-direction:column; position:relative}
.tm-close{position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:50%; border:0;
  background:rgba(24,39,31,.06); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink)}
.tm-close svg{width:18px; height:18px}
.tm-name{font-size:30px; letter-spacing:-.02em; margin:0 40px 0 0}
.tm-desc{color:var(--ink-2); font-size:15px; line-height:1.55; margin-top:8px}
.tm-opt{display:flex; align-items:center; gap:14px; margin-top:16px}
.tm-opt-label{font-size:13px; color:var(--ink-3); min-width:52px}
.tm-handles{display:inline-flex; background:var(--bg-2); border-radius:999px; padding:3px}
.tm-h{border:0; background:transparent; padding:6px 16px; border-radius:999px; font-size:14px; font-weight:600; color:var(--ink-2); cursor:pointer}
.tm-h.on{background:var(--ink); color:#fff}
.tm-colors{display:flex; gap:8px}
.tm-c{width:24px; height:24px; border-radius:50%; border:0; cursor:pointer; box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.2)}
.tm-c.on{box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px var(--brand)}
.tm-inc{margin-top:18px}
.tm-inc-h{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.tm-inc-list{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:7px}
.tm-inc-list li{display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--ink-2)}
.tm-mk{flex:0 0 auto; width:16px; text-align:center; font-weight:800}
.tm-mk-ok{color:#2fa04e}
.tm-mk-plus{color:var(--brand)}
.tm-foot{margin-top:auto; padding-top:18px}
.tm-price{font-size:15px; color:var(--ink-2)}
.tm-price b{font-size:20px; color:var(--ink)}
.tm-pn{font-size:12px; color:var(--ink-3)}
.tm-ctas{display:flex; gap:10px; margin-top:12px}
.tm-ctas .btn{flex:1; justify-content:center}
@media (max-width:760px){
  .tm-inner{grid-template-columns:1fr; max-height:92vh; overflow-y:auto}
  .tm-media{min-height:240px}
  .tm-name{font-size:24px}
}

/* -------------------------------------------------------------------------
   CTA band
   ------------------------------------------------------------------------- */
.cta-band{background:var(--ink); color:#fff; text-align:center; padding:clamp(60px,9vw,110px) 0}
.cta-band h2{font-size:clamp(30px,4.6vw,50px); font-weight:600; color:#fff; max-width:20ch; margin:0 auto;
  letter-spacing:-.035em}
.cta-band p{margin:16px auto 0; max-width:56ch; color:var(--on-dark-2); font-size:18px}
.cta-band .cta-row{justify-content:center}

/* -------------------------------------------------------------------------
   Terrain visualizer (legacy / monochrome-safe)
   ------------------------------------------------------------------------- */
.terrain-viz{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
  background:var(--bg); margin-top:8px}
.tv-stage{position:relative}
.tv-scene{display:block; width:100%; height:auto; aspect-ratio:800 / 460; filter:grayscale(1)}
.tv-caption{position:absolute; left:16px; bottom:16px; margin:0; background:rgba(23,26,32,.9); color:#fff;
  font-weight:500; font-size:15px; padding:10px 16px; border-radius:var(--pill); max-width:72%}
.tv-m{display:none}
.terrain-viz[data-terrain="skog"] .tv-m-skog,
.terrain-viz[data-terrain="strand"] .tv-m-strand,
.terrain-viz[data-terrain="sno"] .tv-m-sno,
.terrain-viz[data-terrain="stad"] .tv-m-stad,
.terrain-viz[data-terrain="backe"] .tv-m-backe{display:block}
.tv-controls{display:flex; flex-wrap:wrap; gap:8px; padding:18px}
.tv-chip{font-family:var(--body); font-weight:500; font-size:15px; padding:10px 16px; border-radius:var(--pill);
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink); cursor:pointer; min-height:44px;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease}
.tv-chip:hover{border-color:var(--ink)}
.tv-chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.tv-arrow{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  border:none; background:rgba(255,255,255,.92); color:var(--ink); display:flex; align-items:center;
  justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.22)}
.tv-arrow svg{width:22px; height:22px}
.tv-prev{left:14px} .tv-next{right:14px}
.tv-terrain-label{position:absolute; left:16px; top:16px; font-family:var(--disp); font-weight:600;
  color:#fff; font-size:18px; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.tv-cta{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:18px}
.tv-cta span{font-family:var(--disp); font-weight:600; font-size:18px; color:var(--ink)}
.tv-fade{opacity:0}

/* -------------------------------------------------------------------------
   Footer — light, minimal (Tesla)
   ------------------------------------------------------------------------- */
.site-footer{background:var(--bg-2); color:var(--ink-2); padding:60px 0 30px; border-top:1px solid var(--line)}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:36px}
.footer-logo{height:48px; width:auto; opacity:.95; margin-bottom:14px}
.site-footer h2{color:var(--ink); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin:0 0 14px}
.site-footer ul{list-style:none; padding:0; display:flex; flex-direction:column; gap:9px}
.site-footer a{color:var(--ink-2); font-size:15px}
.site-footer a:hover{color:var(--ink); text-decoration:underline}
/* Buttons must keep their own label colour — beat the generic footer link colour. */
.site-footer a.btn-primary,.site-footer a.btn-primary:hover{color:#fff; text-decoration:none}
.muted{color:var(--ink-3); font-size:14px; line-height:1.6}
.foot-nordic{margin-top:8px; font-size:13.5px; font-weight:500; color:var(--ink-2); line-height:1.5; max-width:32ch}
.foot-links{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px}
.foot-ring{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
.foot-person{display:flex; flex-direction:column; gap:2px}
.foot-name{color:var(--ink); font-weight:600; font-size:15px}
.foot-note{color:var(--brand-2); font-size:12.5px; font-weight:600}
.foot-person a{color:var(--ink-2); font-size:14px}
.foot-person a:hover{color:var(--ink)}
.foot-h4-gap{margin-top:22px}
.site-footer address{font-style:normal; line-height:1.6}
.foot-map{display:inline-flex; flex-direction:column; gap:6px; color:var(--ink-2)}
.foot-map:hover{color:var(--ink)}
.foot-map .foot-map-cue{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--ink)}
.foot-map:hover .foot-map-cue{text-decoration:underline}
.foot-map .icn-sm{width:15px; height:15px}
.foot-social-block{margin-top:30px; padding-top:26px; border-top:1px solid var(--line)}
.foot-social-block h2{margin:0 0 4px}
.foot-social{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:10px}
.foot-social a{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; color:var(--ink-2); font-weight:600; font-size:14px; transition:color .15s, border-color .15s, background .15s}
.foot-social a:hover{color:var(--ink); border-color:var(--ink); background:var(--surface-2, rgba(0,0,0,.03))}
.foot-social .icn-sm{width:18px; height:18px}
.footer-bottom{margin-top:44px; padding-top:22px; border-top:1px solid var(--line)}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:960px){
  .fit-card{grid-template-columns:1fr}
  .fund-grid{grid-template-columns:1fr; gap:32px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:760px){
  body{font-size:16px}
  /* mobile nav drawer */
  .nav-toggle{display:inline-flex}
  .site-nav{position:absolute; top:100%; left:0; right:0; z-index:120;
    flex-direction:column; align-items:stretch; gap:0;
    padding:8px var(--gut) 18px;
    background:rgba(255,255,255,.98); backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    max-height:calc(100vh - var(--headerh)); overflow-y:auto; display:none}
  .site-header.nav-open .site-nav{display:flex}
  /* drawer is always light, regardless of header state */
  .site-header.nav-open{background:rgba(255,255,255,.98); backdrop-filter:saturate(180%) blur(12px);
    border-bottom-color:transparent}
  body.over-hero:not(.scrolled) .site-header.nav-open .brand img{filter:brightness(0)}
  body.over-hero:not(.scrolled) .site-header.nav-open .nav-toggle{color:var(--ink)}
  .site-nav a:not(.btn){display:block; width:100%; padding:15px 4px; font-size:17px; color:var(--ink-2);
    border-bottom:1px solid var(--line)}
  body.over-hero:not(.scrolled) .site-nav a:not(.btn){color:var(--ink-2)}
  .site-nav a:not(.btn):hover{background:transparent; color:var(--ink)}
  .site-nav a[aria-current="page"]:not(.btn){color:var(--ink)}
  .site-nav .nav-item{display:block; width:100%}
  .nav-chevron{display:none}
  .has-mega .mega{display:none !important}
  .site-nav > .btn{margin:16px 0 0; width:100%}
  .site-nav .btn-primary,
  body.over-hero:not(.scrolled) .site-nav .btn-primary{background:var(--brand); color:#fff; border-color:var(--brand)}
  /* Language chips sit in the light mobile drawer — keep them dark/legible
     even under the transparent-header (over-hero) state, which would otherwise
     paint the active chip white-on-white. Give the row its own divider. */
  .lang-switch,
  body.over-hero:not(.scrolled) .lang-switch{width:100%; justify-content:flex-start; gap:8px;
    margin:6px 0 2px; padding:14px 0 4px; border-top:1px solid var(--line); background:none}
  .lang-opt,
  body.over-hero:not(.scrolled) .lang-opt{color:var(--ink-2); opacity:1; box-shadow:none}
  .lang-opt.on,
  body.over-hero:not(.scrolled) .lang-opt.on{color:var(--ink); background:var(--bg-2); box-shadow:none}
  .lang-opt.on .lang-code,
  body.over-hero:not(.scrolled) .lang-opt.on .lang-code{color:var(--brand)}
  .lang-opt:hover,
  body.over-hero:not(.scrolled) .lang-opt:hover{background:var(--bg-2); color:var(--ink)}

  .panel-inner{padding-top:calc(var(--headerh) + 12vh)}
  .panel-has-cut .panel-inner{padding-top:calc(var(--headerh) + 5vh); padding-bottom:5vh}
  .panel-cut{max-height:34vh}
  .panel-stage{padding:12px 0}
  .panel .cta-row{flex-direction:column; width:100%; max-width:340px}
  .panel .cta-row .btn{width:100%; min-width:0}

  .grid-3,.steps{grid-template-columns:1fr}
  .grid-2,.lead-card{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .lead-card{padding:26px}
  .facts{grid-template-columns:1fr}
  .cmp-grid{grid-template-columns:1fr}
  .bigstep{grid-template-columns:1fr; gap:6px}
  .statband{grid-template-columns:repeat(2,1fr)}
  .dgr-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-row .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.home{scroll-snap-type:none}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .btn:active,a.card-link-wrap:hover{transform:none}
  .crsl-slide, .crsl-caption{transition:none}
}

/* -------------------------------------------------------------------------
   Hero auto-slider (Tesla-style cover)
   ------------------------------------------------------------------------- */
.hero-carousel{position:relative; width:100%; min-height:100vh; min-height:100svh; overflow:hidden;
  background:var(--dark); scroll-snap-align:start}
.hc-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .8s ease}
.hc-slide.on{opacity:1; visibility:visible}
.hc-media{position:absolute; inset:0; z-index:0; background:var(--dark)}
.hc-media svg{position:absolute; inset:0; width:100%; height:100%; display:block}
.hc-photo{position:absolute; inset:0; background-size:cover; background-position:center}
.hc-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; background:var(--dark)}
.hc-scrim{position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.12) 24%, rgba(0,0,0,0) 50%, rgba(0,0,0,.5) 100%)}
/* Video frames are unpredictable — a stronger, more even scrim keeps the
   headline and CTAs legible over any frame. */
.hc-vid .hc-scrim{background:linear-gradient(180deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.24) 52%, rgba(0,0,0,.4) 76%, rgba(0,0,0,.66) 100%)}
.hc-inner{position:relative; z-index:3; min-height:100vh; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; text-align:center; padding:calc(var(--headerh) + 4vh) var(--gut) 4vh}
.hc-top{display:flex; flex-direction:column; align-items:center; gap:13px; max-width:900px; flex:none}
/* The product occupies ONLY the flexible space between the headline and the
   CTAs, bounded by it (max-height:100% of the stage). It can never overlap the
   text above or the buttons below — on any viewport, at any height. */
.hc-stage{flex:1 1 auto; min-height:0; width:100%; display:flex;
  align-items:center; justify-content:center; padding:10px 0}
/* No card, no tile: the product floats free on the aurora scene, grounded by
   its own soft drop-shadow (Tesla product-hero feel). */
.hc-podium{position:relative; display:flex; align-items:center; justify-content:center; overflow:visible;
  width:min(560px,92vw); height:100%; max-height:100%; padding:0; background:none}
.hc-cut{max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; display:block;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.48)); transition:transform .25s ease}
/* Product image links to its model page — transparent to layout, clickable. */
.hc-cut-link{display:contents}
.hc-cut-link .hc-cut{cursor:pointer}
.hc-cut-link:hover .hc-cut{transform:translateY(-6px) scale(1.02)}
.hc-inner-product .hc-stage{flex:1 1 auto; min-height:0; padding-top:0}
.hc-actions{flex:none; width:100%; margin-top:clamp(12px,2vh,22px)}
.hc-actions .cta-row{justify-content:center}
.hc-sub-tight{margin:10px auto 0; font-size:clamp(15px,1.7vw,18px)}
.hc-badge{display:inline-block; font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.4); color:#fff}
.hc-eyebrow{font-weight:600; font-size:12px; letter-spacing:.18em; text-transform:uppercase}
.hc-title{font-size:clamp(38px,6.2vw,64px); font-weight:600; letter-spacing:-.035em; line-height:1.02}
.hc-sub{font-size:clamp(16px,2.1vw,21px); font-weight:400; line-height:1.4; max-width:46ch}
.hc-slide .cta-row{margin-top:6px; justify-content:center}
.hc-slide .cta-row .btn{min-width:min(240px,72vw)}
/* dark slide */
.hc-dark .hc-badge{border-color:rgba(255,255,255,.45); color:#fff}
.hc-dark .hc-eyebrow{color:rgba(255,255,255,.8)}
.hc-dark .hc-title{color:#fff}
.hc-dark .hc-sub{color:rgba(255,255,255,.86)}
/* Clean, high-contrast CTAs on the dark cover: solid-white primary, crisp
   outlined-white secondary (the old frosted charcoal read as grey). */
.hc-dark .btn-primary{background:#fff; color:var(--ink); border-color:transparent}
.hc-dark .btn-primary:hover{background:var(--brand-tint); color:var(--ink)}
.hc-dark .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.hc-dark .btn-ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; color:#fff}
/* light slide */
.hc-light .hc-media{background:var(--bg-2)}
.hc-light .hc-scrim{background:linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%, rgba(255,255,255,.7) 100%)}
.hc-light .hc-badge{border-color:rgba(23,26,32,.25); color:var(--ink)}
.hc-light .hc-eyebrow{color:var(--ink-3)}
.hc-light .hc-title{color:var(--ink)}
.hc-light .hc-sub{color:var(--ink-2)}
.hc-light .btn-primary{background:var(--brand); color:#fff}
.hc-light .btn-ghost{background:rgba(255,255,255,.72); color:var(--ink); border:1px solid rgba(23,26,32,.18)}
/* controls */
.hc-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%;
  border:none; background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(4px); transition:background-color .15s ease}
.hc-arrow:hover{background:rgba(255,255,255,.3)}
.hc-arrow svg{width:24px; height:24px}
.hc-prev{left:clamp(10px,2vw,26px)} .hc-next{right:clamp(10px,2vw,26px)}
.hc-dots{position:absolute; left:0; right:0; bottom:14px; z-index:5; display:flex; gap:4px; justify-content:center}
.hc-dot{width:26px; height:26px; border:none; padding:0; cursor:pointer; background:transparent;
  display:inline-flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent}
.hc-dot::before{content:""; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45);
  transition:background-color .15s ease, transform .15s ease}
.hc-dot:hover::before{transform:scale(1.25)}
.hc-dot.on::before{background:#fff}
.hc-dot:focus-visible,.hc-arrow:focus-visible{outline:2px solid #fff; outline-offset:3px; border-radius:6px}
@media (max-width:760px){
  .hc-podium{width:92vw; height:100%; padding:0}
  .hc-inner{padding-top:calc(var(--headerh) + 2.5vh); padding-bottom:3vh}
  .hc-stage{padding-top:0}
  .hc-slide .cta-row{flex-direction:column; width:100%; max-width:320px}
  .hc-slide .cta-row .btn{width:100%; min-width:0}
  .hc-arrow{width:40px; height:40px}
}

/* -------------------------------------------------------------------------
   Product gallery (real renders)
   ------------------------------------------------------------------------- */
.pgal{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px}
.pgal-item{margin:0; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.pgal-item img{width:100%; aspect-ratio:4/3; object-fit:contain; background:#fff; display:block; padding:clamp(12px,3%,24px)}
.pgal-item figcaption{padding:12px 16px; font-size:14px; color:var(--ink-3); border-top:1px solid var(--line)}
.pgal-item img{cursor:zoom-in}

/* Customer photo wall — CSS-columns is the no-JS fallback; MASONRY_JS upgrades
   it to a gapless grid (.pw-grid) whose items span rows by their height. */
.photo-wall{columns:3; column-gap:18px; margin-top:24px}
.photo-wall.pw-grid{columns:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:8px; gap:18px; align-items:start}
.photo-wall .pw-item{break-inside:avoid; margin:0 0 18px; position:relative; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:0 10px 30px rgba(24,39,31,.14); background:var(--bg)}
.photo-wall.pw-grid .pw-item{margin:0; grid-row-end:span 40}
.photo-wall .pw-item img{width:100%; height:auto; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.photo-wall .pw-item:hover img{transform:scale(1.04)}
.photo-wall .pw-item figcaption{position:absolute; left:0; right:0; bottom:0; padding:26px 16px 13px;
  color:#fff; font-size:14px; font-weight:600; letter-spacing:.01em;
  background:linear-gradient(180deg, rgba(15,26,20,0), rgba(15,26,20,.72)); pointer-events:none}
@media (max-width:900px){ .photo-wall{columns:2; column-gap:14px} .photo-wall.pw-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px} .photo-wall .pw-item{margin-bottom:14px} }
@media (max-width:560px){ .photo-wall{columns:1} .photo-wall.pw-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .photo-wall .pw-item:hover img{transform:none} }

/* Admin-managed gallery (CMS media from /admin, loaded from /api/gallery). */
.cms-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:16px; margin-top:24px}
.cms-gallery .cmsg-item{margin:0; position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--bg-2); box-shadow:0 2px 12px rgba(0,0,0,.06)}
.cms-gallery .cmsg-item img,.cms-gallery .cmsg-item video{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block}
.cms-gallery .cmsg-item figcaption{position:absolute; left:0; right:0; bottom:0; padding:22px 14px 12px; color:#fff; font-size:14px;
  background:linear-gradient(transparent,rgba(0,0,0,.6))}
@media (max-width:560px){ .cms-gallery{grid-template-columns:1fr 1fr; gap:12px} }

/* Full-width image band (banners, diagrams) */
.image-band{margin:8px 0 0; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 14px 40px rgba(24,39,31,.16)}
.image-band img{display:block; width:100%; height:auto}
.image-band-contain{background:#fff; box-shadow:0 1px 0 var(--line), 0 14px 40px rgba(24,39,31,.10); border:1px solid var(--line)}
.image-band-contain img{max-width:min(760px,100%); margin:0 auto; padding:clamp(16px,4%,40px)}
.image-band figcaption{padding:12px 18px; font-size:14px; color:var(--ink-3); background:var(--bg); border-top:1px solid var(--line)}
.image-band-contain figcaption{text-align:center}

/* Flagship photo hero (full-bleed headline image) */
.photo-hero{position:relative; min-height:clamp(440px,66vh,660px); display:flex; align-items:flex-end; overflow:hidden; isolation:isolate}
.photo-hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.photo-hero-scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(15,26,20,.30) 0%, rgba(15,26,20,.10) 34%, rgba(15,26,20,.55) 74%, rgba(15,26,20,.82) 100%)}
.photo-hero-inner{padding-top:calc(var(--headerh) + 40px); padding-bottom:clamp(34px,6vh,74px); color:#fff}
.photo-hero-inner .eyebrow{color:#fff; opacity:.92; margin-bottom:14px}
.photo-hero-inner h1{color:#fff; font-size:clamp(34px,6vw,66px); line-height:1.03; letter-spacing:-.03em; max-width:17ch}
.photo-hero-lead{color:rgba(255,255,255,.92); font-size:clamp(17px,2vw,21px); line-height:1.5; max-width:60ch; margin-top:18px}
.photo-hero-inner .cta-row{margin-top:28px}
.photo-hero-meta{margin-top:18px; font-size:14px; color:rgba(255,255,255,.72)}
/* Imageless cover: premium brand gradient instead of a photo */
.photo-hero-grad{min-height:clamp(360px,54vh,540px);
  background:
    radial-gradient(115% 95% at 80% 4%, rgba(99,200,164,.30) 0%, rgba(99,200,164,0) 52%),
    radial-gradient(95% 90% at 6% 104%, rgba(51,105,126,.52) 0%, rgba(51,105,126,0) 60%),
    linear-gradient(158deg, #0e2c2e 0%, #0a2124 58%, #07171a 100%)}
.photo-hero-grad .photo-hero-inner{padding-bottom:clamp(40px,7vh,80px)}

/* Oversized horizontal filmstrip (scroll-snap) */
.filmstrip-track{display:flex; gap:18px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin; scroll-padding-left:var(--gut);
  padding:6px max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut))) 22px; margin-top:6px; overscroll-behavior-x:contain}
.filmstrip-track:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:4px}
.fs-item{flex:0 0 auto; scroll-snap-align:start; height:clamp(360px,60vh,600px); margin:0; position:relative;
  border-radius:16px; overflow:hidden; box-shadow:0 16px 44px rgba(24,39,31,.20); background:var(--bg)}
.fs-item img{height:100%; width:auto; max-width:none; display:block; object-fit:cover}
.fs-item figcaption{position:absolute; left:0; right:0; bottom:0; padding:34px 20px 16px; color:#fff;
  font-size:15px; font-weight:600; letter-spacing:.01em; background:linear-gradient(180deg, rgba(15,26,20,0), rgba(15,26,20,.74)); pointer-events:none}
.filmstrip-track::-webkit-scrollbar{height:8px}
.filmstrip-track::-webkit-scrollbar-thumb{background:var(--line-2,rgba(0,0,0,.2)); border-radius:8px}
@media (max-width:560px){ .fs-item{height:clamp(320px,52vh,460px); border-radius:14px} }

/* Filterable gallery (e.g. transport: bil / buss) — pure CSS tabs */
.filter-gal{margin-top:22px}
.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.fg-radio{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0)}
.fg-tabs{display:inline-flex; flex-wrap:wrap; gap:6px; padding:5px; background:var(--surface-2,rgba(20,40,30,.05));
  border:1px solid var(--line); border-radius:999px; margin-bottom:24px}
.fg-tab{display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px;
  font-weight:600; font-size:14px; color:var(--ink-2); cursor:pointer; transition:background .15s, color .15s; white-space:nowrap}
.fg-tab:hover{color:var(--ink)}
.fg-tab .icn-sm{width:17px; height:17px}
.fg-panel{display:none}
.fg-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.fg-item{margin:0; border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:0 10px 26px rgba(24,39,31,.13)}
.fg-item img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fg-item:hover img{transform:scale(1.04)}
.fg-item figcaption{position:absolute; left:0; right:0; bottom:0; padding:24px 14px 11px; color:#fff;
  font-size:13.5px; font-weight:600; background:linear-gradient(180deg, rgba(15,26,20,0), rgba(15,26,20,.72)); pointer-events:none}
#fg-bil:checked ~ .fg-panel-bil, #fg-buss:checked ~ .fg-panel-buss{display:block}
#fg-bil:checked ~ .fg-tabs label[for="fg-bil"], #fg-buss:checked ~ .fg-tabs label[for="fg-buss"]{background:var(--brand); color:#fff}
#fg-bil:focus-visible ~ .fg-tabs label[for="fg-bil"], #fg-buss:focus-visible ~ .fg-tabs label[for="fg-buss"]{outline:2px solid var(--brand); outline-offset:2px}
@media (max-width:820px){ .fg-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .fg-grid{grid-template-columns:1fr} .fg-tab{padding:9px 14px} }
@media (prefers-reduced-motion:reduce){ .fg-item:hover img{transform:none} }

/* Fullscreen image lightbox */
.lightbox{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(11,12,14,.95); padding:clamp(16px,4vw,64px)}
.lightbox.on{display:flex}
.lb-fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; max-width:100%; max-height:100%}
.lb-img{max-width:min(1280px,92vw); max-height:82vh; width:auto; height:auto; object-fit:contain; background:#fff; border-radius:8px; display:block}
.lb-cap{margin:0; color:rgba(255,255,255,.82); font-size:14px; font-weight:500; text-align:center; max-width:60ch}
.lb-close{position:absolute; top:clamp(12px,2vw,24px); right:clamp(12px,2vw,24px); width:44px; height:44px; border:none; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background-color .15s ease}
.lb-close:hover{background:rgba(255,255,255,.28)}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border:none; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background-color .15s ease}
.lb-nav:hover{background:rgba(255,255,255,.28)}
.lb-nav svg{width:26px; height:26px}
.lb-prev{left:clamp(8px,2vw,28px)} .lb-next{right:clamp(8px,2vw,28px)}
.lb-count{position:absolute; left:0; right:0; bottom:clamp(12px,2vw,22px); text-align:center; color:rgba(255,255,255,.68); font-size:13px; font-weight:500; letter-spacing:.02em}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid #fff; outline-offset:3px}
@media (max-width:560px){ .lb-nav{width:44px; height:44px} .lb-img{max-height:74vh} }

/* Animated funding-journey flow (financing guide) */
.flow-block .flow{position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:24px; margin:38px 0 0; padding:0; list-style:none}
.flow-block .flow::before,.flow-block .flow::after{content:""; position:absolute; top:30px; height:3px; left:calc(50% / var(--n)); right:calc(50% / var(--n)); border-radius:2px}
.flow-block .flow::before{background:var(--line-2)}
.band-dark .flow::before{background:rgba(255,255,255,.18)}
.flow-block .flow::after{background:var(--brand); transform:scaleX(0); transform-origin:left; animation:flow-draw 1.1s cubic-bezier(.4,0,.2,1) .25s forwards}
.band-dark .flow::after{background:#fff}
@keyframes flow-draw{to{transform:scaleX(1)}}
.flow-step{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  opacity:0; transform:translateY(10px); animation:flow-rise .5s ease forwards; animation-delay:calc(.35s + var(--i) * .32s)}
@keyframes flow-rise{to{opacity:1; transform:none}}
.flow-node{width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--brand-tint); border:2px solid var(--brand); color:var(--brand); flex:none}
.band-dark .flow-node{background:rgba(255,255,255,.08); border-color:var(--brand-3); color:#fff}
.band-soft .flow-node{background:#fff}
.flow-ic{width:26px; height:26px}
.flow-body{display:flex; flex-direction:column; gap:5px; max-width:22ch}
.flow-body b{font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:-.01em}
.flow-body span{font-size:13.5px; line-height:1.45; color:var(--ink-3)}
.band-dark .flow-body b{color:#fff}
.band-dark .flow-body span{color:rgba(255,255,255,.72)}
@media (max-width:720px){
  .flow-block .flow{grid-template-columns:1fr; gap:0; margin-top:26px}
  .flow-block .flow::before,.flow-block .flow::after{left:31px; right:auto; top:34px; bottom:34px; width:3px; height:auto}
  .flow-block .flow::after{transform:scaleY(0); transform-origin:top; animation:flow-draw-v 1.1s cubic-bezier(.4,0,.2,1) .25s forwards}
  @keyframes flow-draw-v{to{transform:scaleY(1)}}
  .flow-step{flex-direction:row; text-align:left; gap:18px; padding:11px 0}
  .flow-body{max-width:none}
}
@media (prefers-reduced-motion: reduce){
  .flow-block .flow::after{animation:none; transform:none}
  .flow-step{animation:none; opacity:1; transform:none}
}

/* Gentle scroll-reveal */
[data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
[data-reveal].is-in{opacity:1; transform:none}
.tl-item[data-reveal]{transition-delay:calc(var(--i, 0) * .08s)}
@media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1; transform:none; transition:none} }

/* Vertical timeline (history) */
.timeline{list-style:none; margin:40px 0 0; padding:0; position:relative; max-width:760px}
.timeline::before{content:""; position:absolute; left:27px; top:8px; bottom:8px; width:2px; background:var(--line-2)}
.band-dark .timeline::before{background:rgba(255,255,255,.2)}
.band-soft .timeline::before{background:var(--brand); opacity:.35}
.tl-item{position:relative; display:flex; gap:24px; padding:0 0 34px}
.tl-item:last-child{padding-bottom:0}
.tl-marker{position:relative; z-index:1; flex:none; width:56px; height:56px; border-radius:50%;
  background:var(--brand-tint); border:2px solid var(--brand); color:var(--brand);
  display:flex; align-items:center; justify-content:center}
.band-dark .tl-marker{background:var(--dark); border-color:var(--brand-3); color:#fff}
.tl-ic{width:24px; height:24px}
.tl-body{padding-top:3px}
.tl-year{display:inline-block; font-family:var(--disp); font-weight:700; font-size:15px; letter-spacing:.04em; color:var(--brand)}
.band-dark .tl-year{color:var(--brand-3)}
.tl-title{font-size:clamp(19px,2.4vw,23px); margin:2px 0 6px; letter-spacing:-.02em}
.tl-text{margin:0; color:var(--ink-2); line-height:1.6; max-width:52ch}
.band-dark .tl-text{color:var(--on-dark-2)}

/* Product line-up (image cards) */
.lineup{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:34px}
.lineup-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px;
  padding:22px 18px 20px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-lg);
  color:var(--ink); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.lineup-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-2); color:var(--ink)}
.lineup-media{width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:var(--bg-2); border-radius:8px; overflow:hidden; margin-bottom:10px}
.lineup-media img{width:100%; height:100%; object-fit:contain; padding:10px}
.lineup-name{font-family:var(--disp); font-weight:600; font-size:18px}
.lineup-tag{font-size:13.5px; color:var(--ink-3); line-height:1.4}
.lineup-cta{margin-top:8px; display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--brand)}
.lineup-cta .icn-sm{transition:transform .18s ease}
.lineup-card:hover .lineup-cta .icn-sm{transform:translateX(3px)}

/* bigStep with an icon badge instead of a number */
.bigstep-ic{flex:none; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--brand-tint); color:var(--brand)}
.band-dark .bigstep-ic{background:rgba(255,255,255,.08); color:var(--brand-3)}
.bigstep-ic .icn{width:26px; height:26px}

/* Soft / light CTA (gentle, not a hard dark band) */
.cta-soft{background:var(--brand-tint)} .cta-light{background:var(--bg-2)}
.cta-soft h2,.cta-light h2{color:var(--ink)} .cta-soft p,.cta-light p{color:var(--ink-2)}
.cta-soft .btn-primary,.cta-light .btn-primary{background:var(--brand); color:#fff}
.cta-soft .btn-primary:hover,.cta-light .btn-primary:hover{background:var(--brand-2)}
.cta-soft .btn-ghost,.cta-light .btn-ghost{color:var(--ink); border-color:var(--line-2)}

@media (max-width:860px){ .lineup{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .lineup{grid-template-columns:1fr} .tl-item{gap:18px} }

.mega-foot{display:flex; flex-wrap:wrap; gap:20px; margin-top:14px}

/* -------------------------------------------------------------------------
   Configurator (Tesla-style "Design")
   ------------------------------------------------------------------------- */
.cfg-block{padding-top:clamp(24px,4vw,48px)}
body:has(.cfg-bar){padding-bottom:96px}
/* Tesla-style: the product image is center-stage (big, borderless, floating);
   the options sit in a narrow right rail. The configurator breaks out wider
   than the normal text column so the product can dominate. */
.cfg-block > .wrap{max-width:min(1720px, 96vw)}
.cfg-block .sec-head{max-width:760px}
.cfg{display:grid; grid-template-columns:minmax(0,1fr) clamp(324px,27vw,392px); gap:clamp(20px,3vw,52px); align-items:start}
/* Sticky media is bounded to the viewport (minus banner + fixed buy-bar) and is a
   flex column, so the image flexes to fill and the thumbnails always stay in view. */
.cfg-media{position:sticky; top:calc(var(--promoh) + 16px);
  height:min(780px, calc(100vh - var(--promoh) - 16px - 96px));
  display:flex; flex-direction:column; gap:16px}
.cfg-gallery{display:flex; flex-direction:column; gap:16px; flex:1 1 auto; min-height:0}
.gal-main{position:relative; background:transparent; border:0; border-radius:0; overflow:visible;
  flex:1 1 auto; min-height:0; display:flex; align-items:center; justify-content:center; padding:0;
  user-select:none; -webkit-user-select:none}
.gal-main-img{position:relative; z-index:1; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; background:transparent; display:block; cursor:zoom-in}
/* Turntable: a ghost layer cross-fades to the next angle while the base image swaps under it. */
.gal-ghost{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2;
  opacity:0; pointer-events:none; transition:opacity .55s ease}
.gal-main.has-spin .gal-main-img{cursor:grab; touch-action:pan-y}
.gal-main.has-spin .gal-main-img:active{cursor:grabbing}
/* A self-balancing product should look like it hovers — a slow, calm float. */
.gal-main.gal-float{animation:genny-float 7s ease-in-out infinite}
@keyframes genny-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.gal-spin-ctrl{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); z-index:3;
  display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--ink-2); font-size:13px; font-weight:600; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(23,48,38,.10); transition:color .15s ease, border-color .15s ease}
.gal-spin-ctrl svg{width:16px; height:16px; flex:none}
.gal-spin-ctrl:hover{color:var(--brand); border-color:var(--brand-3)}
.gal-spin-ctrl:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .gal-main.gal-float{animation:none}
  .gal-ghost{transition:none}
}
.gal-thumbs{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.gal-thumb{width:76px; height:60px; padding:0; border:1px solid var(--line); border-radius:8px; overflow:hidden;
  background:#fff; cursor:pointer; transition:border-color .15s ease, transform .15s ease}
.gal-thumb img{width:100%; height:100%; object-fit:contain; display:block}
.gal-thumb:hover{transform:translateY(-2px)}
.gal-thumb.on{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.gal-thumb:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.cfg-form{min-width:0}
.cfg-specs{display:flex; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:8px}
.cfg-spec{flex:1; padding:14px 12px; border-right:1px solid var(--line); text-align:center}
.cfg-spec:last-child{border-right:0}
.cfg-spec b{display:block; font-family:var(--disp); font-weight:600; font-size:clamp(16px,1.5vw,20px); letter-spacing:-.02em; white-space:nowrap}
.cfg-spec span{display:block; margin-top:4px; font-size:12px; color:var(--ink-3)}

.cfg-group{border:0; padding:26px 0 6px; margin:0; border-top:1px solid var(--line)}
.cfg-group legend{padding:0; font-family:var(--disp); font-weight:600; font-size:19px; letter-spacing:-.02em; color:var(--ink)}
.cfg-help{margin:6px 0 0; font-size:14px; color:var(--ink-3); line-height:1.5}
.cfg-opts{display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px}
/* Accessories: fit as many columns as comfortably hold the name+price; in the
   narrow form rail that's one column, so names never get squeezed. */
.cfg-group[data-cfg-multi="1"] .cfg-opts{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cfg-opt{min-width:0}
.cfg-opt-body{min-width:0}
.cfg-opt-main{min-width:0}
.cfg-opt-name, .cfg-opt-detail, .cfg-opt-note{min-width:0; overflow-wrap:break-word; hyphens:none}
.cfg-opt{position:relative; display:block; cursor:pointer}
.cfg-opt input{position:absolute; opacity:0; width:1px; height:1px}
.cfg-opt-body{display:flex; align-items:center; gap:11px; padding:14px 16px; min-height:100%;
  border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--bg);
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease}
.cfg-opt:hover .cfg-opt-body{border-color:var(--ink-4)}
.cfg-opt input:checked + .cfg-opt-body{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
.cfg-opt input:focus-visible + .cfg-opt-body{outline:2px solid var(--ink); outline-offset:2px}
.cfg-opt-main{display:flex; flex-direction:column; gap:3px; flex:1; min-width:0}
.cfg-opt-name{font-weight:600; font-size:15px}
.cfg-opt-detail{font-size:13px; color:var(--ink-3)}
.cfg-opt-note{font-size:12.5px; color:var(--ink-4)}
.cfg-opt-price{font-weight:600; font-size:14px; white-space:nowrap; color:var(--ink)}
.cfg-sw{width:22px; height:22px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* "Ingår" feature chips */
.cfg-included{margin:4px 0 6px}
.cfg-included-h{display:block; font-family:var(--disp); font-weight:600; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.cfg-chips{display:flex; flex-wrap:wrap; gap:8px}
.cfg-chip{font-size:12.5px; font-weight:500; color:var(--ink-2); background:var(--bg-2); border:1px solid var(--line); border-radius:100px; padding:6px 12px}

/* scene fallback (no product photos yet) */
.cfg-scene{position:relative; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--dark)}
.cfg-scene svg{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover}
.cfg-scene-note{position:absolute; left:0; right:0; bottom:0; margin:0; padding:12px 16px; font-size:13px;
  font-weight:500; color:rgba(255,255,255,.8); background:linear-gradient(0deg, rgba(0,0,0,.6), rgba(0,0,0,0))}

/* "Din konfiguration" summary card */
.cfg-summary{margin-top:26px; padding:22px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg)}
.cfg-summary-h{font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.cfg-summary-rows{margin:0; display:flex; flex-direction:column; gap:8px}
.cfg-srow{display:flex; justify-content:space-between; gap:16px; font-size:14.5px}
.cfg-srow dt{color:var(--ink-3); margin:0}
.cfg-srow dd{margin:0; color:var(--ink); font-weight:500; text-align:right}
.cfg-summary-line{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line)}
.cfg-total-row span{color:var(--ink-2)} .cfg-total-row em{font-style:normal; font-size:12px; color:var(--ink-3)}
.cfg-acc-note{margin:8px 0 0; font-size:12px; line-height:1.45; color:var(--ink-3)}
.cfg-total{font-family:var(--disp); font-weight:600; font-size:22px; letter-spacing:-.01em}
.cfg-code-row{margin-top:8px; padding-top:0; border-top:0; font-size:13px}
.cfg-code-row span{color:var(--ink-3)}
.cfg-code{font-family:ui-monospace,"SFMono-Regular",Menlo,monospace; letter-spacing:.06em; font-weight:600}
.cfg-summary-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.cfg-summary-actions .btn{flex:1; min-width:150px}

/* sticky bar price */
.cfg-bar-price{display:flex; flex-direction:column; align-items:flex-end; flex:none; margin-left:auto}
.cfg-bar-total{font-family:var(--disp); font-weight:600; font-size:16px; white-space:nowrap}
.cfg-bar-note{font-size:11px; color:var(--ink-3)}
@media (max-width:760px){ .cfg-bar-price{display:none} .cfg-summary-actions .btn{min-width:0} }

.cfg-note{display:flex; gap:12px; align-items:flex-start; margin:26px 0 0; padding:16px 18px;
  background:var(--bg-2); border-radius:var(--r-lg); font-size:14.5px; color:var(--ink-2); line-height:1.5}
.cfg-note .icn{flex:none; width:22px; height:22px; stroke:var(--ink); margin-top:1px}

.cfg-contact{margin-top:26px; padding-top:26px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:16px}
.cfg-contact h3{font-size:20px; letter-spacing:-.02em}
.cfg-contact .field{gap:6px}
.cfg-contact label{font-weight:500; font-size:13px; color:var(--ink-2)}
.cfg-contact input, .cfg-contact textarea{font-family:var(--body); font-size:16px; padding:13px 14px;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg); color:var(--ink); width:100%; min-height:50px}
.cfg-contact textarea{min-height:60px; resize:vertical}
.cfg-contact input:focus, .cfg-contact textarea:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,26,32,.12)}

.cfg-bar{position:fixed; left:0; right:0; bottom:0; z-index:90; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px); border-top:1px solid var(--line); box-shadow:0 -6px 24px rgba(0,0,0,.06)}
.cfg-bar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.cfg-bar-text{min-width:0}
.cfg-bar-text b{display:block; font-family:var(--disp); font-weight:600; font-size:16px; letter-spacing:-.01em}
.cfg-bar-summary{display:block; font-size:13px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52vw}
.cfg-bar-cta{display:flex; gap:10px; flex:none}

@media (max-width:900px){
  .cfg{grid-template-columns:1fr; gap:24px}
  .cfg-media{position:static; min-width:0; height:auto; display:block}
  .gal-main{height:min(46vh,380px); flex:none}
}
@media (max-width:760px){
  .cfg-opts{grid-template-columns:1fr}
  .pgal{grid-template-columns:1fr 1fr; gap:12px}
  .cfg-bar-summary{display:none}
  .cfg-bar-cta .btn{min-height:42px; font-size:14px; padding:0 16px}
  .cfg-bar-cta .btn-ghost{display:none}
  body:has(.cfg-bar){padding-bottom:78px}
}
@media (max-width:520px){
  .pgal{grid-template-columns:1fr}
}

/* Admin-only floating "edit this page" button (shown only to a logged-in admin;
   see index.ts editHref). Invisible to normal visitors. */
.cms-editbtn{
  position:fixed;right:18px;bottom:18px;z-index:9000;
  display:inline-flex;align-items:center;gap:8px;
  background:#0a66c2;color:#fff;text-decoration:none;
  font:700 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  padding:13px 18px;border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:transform .15s,filter .15s;
}
.cms-editbtn:hover{filter:brightness(1.08);transform:translateY(-2px)}
.cms-editbtn:focus-visible{outline:3px solid #ffd479;outline-offset:2px}
@media (max-width:520px){ .cms-editbtn span{display:none} .cms-editbtn{padding:14px} }
@media (prefers-reduced-motion:reduce){ .cms-editbtn{transition:none} }