:root{
    --ink:#0c0f14;
    --ink-2:#141a23;
    --ink-3:#1b2330;
    --fog:#e9ecee;
    --fog-dim:#b7bfc6;
    --signal:#0066ff;
    --signal-soft:#4791ff;
    --steel:#8b93a1;
    --brass:#c99a56;
    --brass-dim:#8a6835;
    --line: rgba(233,236,238,0.13);
    --line-strong: rgba(233,236,238,0.22);
    --radius-s:2px;

    --font-display:'Fraunces', Georgia, 'Iowan Old Style', serif;
    --font-body:'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--fog);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  ::selection{background:var(--signal);color:var(--ink);}
  h1,h2,h3{font-family:var(--font-display);font-weight:460;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-0.01em;}
  p{margin:0;}
  a{color:inherit;}
  button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
  ul{margin:0;padding:0;list-style:none;}
  img,svg{display:block;max-width:100%;}
  /* Every plain SilverStripe\Forms\Form (the product "Intresserad?" form,
     the Security login/lost-password/change-password forms — see
     Page.ss's $Form block) wraps its fields in Form.ss's own <fieldset>,
     which nothing in this theme ever targeted — so it fell back to the
     browser's default "groove" 3D-beveled border, nested INSIDE our
     already-correctly-styled .form/.contact-form-embed box. That's the
     "standard-looking frame" Stefan kept seeing: the outer box and every
     input were right all along, but this un-styled inner <fieldset> was
     layering the browser's own default border on top. Reset globally —
     there's no page on this site where the UA default is wanted. */
  fieldset{border:0;margin:0;padding:0;min-width:0;}
  legend{padding:0;}

  .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px);}
  .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--steel);}

  a.skip-link{
    position:absolute;left:16px;top:-60px;z-index:100;
    background:var(--signal);color:var(--ink);padding:10px 16px;
    font-family:var(--font-mono);font-size:12px;transition:top .25s ease;
  }
  a.skip-link:focus{top:16px;}

  :focus-visible{outline:2px solid var(--signal-soft);outline-offset:3px;}

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(12,15,20,0.7);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transition:padding .35s ease, background .35s ease;
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    max-width:1180px;margin:0 auto;
    padding:18px clamp(20px,5vw,64px);
    transition:padding .35s ease;
  }
  header.shrink .nav{padding-top:11px;padding-bottom:11px;}
  header.shrink{background:rgba(12,15,20,0.88);}
  .brandmark{display:flex;align-items:center;gap:10px;text-decoration:none;}
  .brandmark img{height:34px;width:auto;display:block;}
  nav.links{display:flex;gap:30px;align-items:center;}
  nav.links a{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.09em;text-transform:uppercase;
    color:var(--steel);text-decoration:none;transition:color .3s ease;
  }
  nav.links a:hover{color:var(--fog);}
  nav.links a[aria-current="page"]{color:var(--fog);}
  .lang-switch{display:flex;gap:2px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;}
  .lang-switch a{color:var(--steel);text-decoration:none;padding:4px 6px;transition:color .3s ease;}
  .lang-switch a[aria-current="true"]{color:var(--fog);font-weight:600;}
  .lang-switch a:hover{color:var(--signal-soft);}
  .lang-switch span{color:var(--line-strong);}
  /* Hidden at the SAME breakpoint as nav.links/.menu-btn below (820px),
     not a separate one — they used to be 980px vs 820px, which left a
     ~160px range where the desktop language switch had already
     disappeared but the hamburger (and its own .lang-switch--mobile)
     hadn't appeared yet, so there was no way to change language at all. */
  /* Mobile menu's own language switcher needs its own class (not just an
     inline style) so the :not(.lang-switch--mobile) exclusion in the
     820px block above (which hides the desktop switch) leaves this one
     alone, and so it also beats .mobile-panel a's 32px display-serif
     nav styling. */
  .lang-switch--mobile{display:flex;margin-top:28px;}
  .mobile-panel .lang-switch--mobile a{
    font-family:var(--font-mono);font-size:14px;letter-spacing:0.04em;
    padding:6px 0;border-bottom:none;color:var(--steel);
  }
  .mobile-panel .lang-switch--mobile a[aria-current="true"]{color:var(--fog);font-weight:600;}
  .lang-switch--mobile span{margin:0 8px;color:var(--line-strong);}
  .nav-cta{
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.06em;
    color:var(--ink);background:var(--signal-soft);
    padding:9px 16px;text-decoration:none;transition:background .3s ease, transform .3s ease;
  }
  .nav-cta:hover{background:var(--fog);}
  /* 44x44 flush box (no padding-based inset) so its right edge sits
     exactly on the same padding boundary as everything else in .nav —
     and so it lines up, by construction rather than a tuned magic
     number, with .mobile-close below, which is the same 44x44 flush
     box in the mobile panel's own .top row. */
  .menu-btn{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;padding:0;}
  .menu-btn span{width:20px;height:2px;background:var(--fog);display:block;transition:transform .3s ease, opacity .3s ease;}
  .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-panel{
    position:fixed; inset:0; top:0;
    background:var(--ink);
    z-index:60;
    display:flex; flex-direction:column;
    /* Matches .nav's own (unshrunk) 18px top padding so the logo lands
       at the same height as in the header. */
    padding:18px clamp(20px,5vw,64px);
    transform:translateY(-8px);
    opacity:0;
    transition:opacity .3s ease, transform .3s ease;
  }
  .mobile-panel.open{opacity:1;transform:translateY(0);}
  .mobile-panel[hidden]{display:none;}
  .mobile-panel .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:56px;}
  .mobile-close{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;padding:0;
    background:none;border:none;cursor:pointer;position:relative;flex-shrink:0;
  }
  .mobile-close span{position:absolute;width:20px;height:2px;background:var(--fog);transition:background .25s ease;}
  .mobile-close span:first-child{transform:rotate(45deg);}
  .mobile-close span:last-child{transform:rotate(-45deg);}
  .mobile-close:hover span, .mobile-close:focus-visible span{background:var(--signal-soft);}
  .mobile-panel a{
    font-family:var(--font-display);font-size:32px;padding:14px 0;
    border-bottom:1px solid var(--line);text-decoration:none;
  }
  .mobile-panel .nav-cta{margin-top:32px;text-align:center;width:fit-content;}
  .mobile-panel a[aria-current="page"]{color:var(--signal-soft);}

  @media (max-width:820px){
    nav.links{display:none;}
    /* :not(.lang-switch--mobile) because the mobile panel's own language
       switcher (below) reuses the .lang-switch class for its base
       styling and only adds --mobile on top — excluding it here avoids
       relying on which of these two same-specificity rules happens to
       come later in the stylesheet. */
    .lang-switch:not(.lang-switch--mobile){display:none;}
    /* Pre-existing gap found while testing a bigger header logo: the
       header's own "Boka ett möte" button was never hidden below this
       breakpoint, so at narrow widths .nav ended up with three flex
       items (logo, CTA button, hamburger) fighting for space, and the
       CTA button's text wrapped and overlapped the logo. The mobile
       panel already has its own identical "Boka ett möte" link (see
       MobilePanel.ss), so hiding this one here loses nothing — it's
       the same fix nav.links/.lang-switch already got above. */
    .nav-cta{display:none;}
    .menu-btn{display:flex;}
  }

  /* ---------- sub-nav (homepage section-jump bar) ---------- */
  /* Homepage-only (Includes/SubNav.ss, only included from
     app/templates/App/PageTypes/Layout/HomePage.ss). --header-h is set
     inline by theme.js's "sub-nav" block to <header>'s ACTUAL current
     rendered height (which itself changes the moment header.shrink
     kicks in, see above) — the 70px fallback here only matters for the
     one frame before that script runs.

     REAL BUG, FOUND AND FIXED: this used to be position:sticky, same as
     <header>. Sticky (unlike fixed) never leaves normal document flow —
     it still reserves its own box's height at its natural position in
     the page, even while translateY(-100%) pushes its PAINTED content
     off-screen. That reserved-but-invisible box (this bar's own ~40px
     rendered height) sat between </header> and the Hero section on
     every page load, showing up as a plain black gap/bar above the
     Hero's own background before the visitor had scrolled at all —
     Stefan caught this visually ("en svart balk ... när jag skrollat
     högst upp"). position:fixed (plus left/right:0, since a fixed
     block-level element with no explicit width shrinks to its content's
     width instead of spanning full-bleed) takes it out of flow
     entirely regardless of visibility state, so there is no reserved
     space to leave a gap — Hero now butts directly against the header
     whether the bar is hidden or shown, exactly like it did before this
     bar existed.

     translateY/opacity (not display/visibility) so the .3s show/hide
     transition has something to animate — toggled by theme.js's "sub-
     nav" block once the visitor has scrolled a ways into the Hero
     section (see that file for exactly how far, and why it's a
     fraction of Hero's height rather than "the whole section"), and
     pointer-events is switched off in the hidden state so an invisible
     bar can't eat clicks meant for whatever sits behind it. */
  .sub-nav{
    position:fixed; left:0; right:0; top:var(--header-h,70px); z-index:40;
    background:rgba(12,15,20,0.92);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .3s ease, opacity .3s ease;
  }
  .sub-nav.is-visible{transform:translateY(0);opacity:1;pointer-events:auto;}
  /* Horizontally scrollable on narrow viewports instead of wrapping —
     six pill-style links on one line reads as a toolbar; wrapped onto
     two lines it reads as a mistake. Scrollbar hidden (still fully
     usable via touch-swipe/trackpad) to keep it looking like a chip row
     rather than a text area with an overflow indicator.

     All six links need ~640px; most phones are 320-414px wide, so on
     mobile only the first 3-4 are visible without swiping — and at some
     of those widths (e.g. 375px) the next link lands just past the
     edge with nothing visibly cut off, so there's no hint that swiping
     reveals more. .has-more (toggled by theme.js's "sub-nav" block,
     same scrollLeft/clientWidth/scrollWidth check the product gallery's
     prev/next buttons already use elsewhere in this file) fades the
     right edge via a mask whenever there's unscrolled content past it,
     and clears once fully scrolled to Kontakt — a soft "there's more"
     cue instead of a hard-edged clip. */
  .sub-nav .wrap{
    display:flex; gap:2px; align-items:center;
    overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;
  }
  .sub-nav .wrap::-webkit-scrollbar{display:none;}
  .sub-nav .wrap.has-more{
    mask-image:linear-gradient(to right, black calc(100% - 32px), transparent);
    -webkit-mask-image:linear-gradient(to right, black calc(100% - 32px), transparent);
  }
  .sub-nav a{
    flex:0 0 auto;
    font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--steel); text-decoration:none; white-space:nowrap;
    padding:13px 14px; position:relative;
    transition:color .25s ease;
  }
  .sub-nav a:hover{color:var(--fog);}
  /* aria-current="true" here is scrollspy state written by theme.js as
     the visitor scrolls (see that file's "sub-nav" block) — a live
     equivalent of the $LinkingMode-driven aria-current="page" Header.ss
     sets once per page load, same attribute/CSS pattern as
     .lang-switch a[aria-current="true"] above. */
  .sub-nav a[aria-current="true"]{color:var(--fog);}
  .sub-nav a[aria-current="true"]::after{
    content:''; position:absolute; left:14px; right:14px; bottom:0; height:2px;
    background:var(--signal-soft);
  }
  @media (max-width:820px){
    .sub-nav a{padding:12px 12px;font-size:10.5px;}
  }
  /* Anchor targets for the sub-nav's links (and for the header/mobile
     "Boka ett möte" CTA's own #kontakt fallback) — without this, the
     sticky header + sub-nav would cover each section's own heading the
     instant a click/anchor jump lands on it. --anchor-offset is kept in
     sync with the sub-nav's real height by the same theme.js code that
     sets --header-h above; the 112px fallback is header + sub-nav's
     approximate combined height for the one frame before that script
     runs. html{scroll-behavior:smooth} (top of this file) is what makes
     these actual anchor jumps (both the sub-nav's own links and any
     plain #id link elsewhere) animate rather than snap — no JS smooth-
     scroll needed on top of it. */
  #tjanster, #process, #tackning, #referensjobb, #faq, #kontakt{
    scroll-margin-top:var(--anchor-offset,112px);
  }

  /* ---------- hero ---------- */
  .hero{position:relative;padding:clamp(56px,10vw,108px) 0 clamp(48px,7vw,80px);overflow:hidden;}
  .radar{
    position:absolute; z-index:0; pointer-events:none;
    top:50%; left:50%; width:min(1100px,150vw); height:min(1100px,150vw);
    transform:translate(-50%,-46%);
  }
  .radar svg{width:100%;height:100%;}
  .ring{fill:none;stroke:var(--signal);opacity:0;transform-origin:center;animation:ringpulse 6s ease-in-out infinite;animation-delay:var(--d,0s);}
  @keyframes ringpulse{0%,100%{opacity:0;transform:scale(.9);}50%{opacity:.55;transform:scale(1);}}

  /* ---------- content page (generic Page type) ---------- */
  /* Horizontal inset comes only from the nested .wrap.inner (below) —
     .content-hero itself only carries vertical padding. It used to
     also set its own left/right padding here, which stacked on top of
     .wrap's identical clamp() padding and pushed the heading/breadcrumb
     to double the inset of the header and body text on any viewport
     narrower than ~1308px (where .wrap isn't yet wide enough to hit
     its own max-width and start centering). */
  .content-hero{
    position:relative;
    padding:64px 0 40px;
    overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .content-hero .radar-corner{
    position:absolute; z-index:0; pointer-events:none;
    top:-140px; right:-90px; width:420px; height:420px;
  }
  .content-hero .radar-corner svg{width:100%;height:100%;}
  @keyframes ringpulse-quiet{0%,100%{opacity:0;transform:scale(.92);}50%{opacity:.16;transform:scale(1);}}
  .content-hero .ring{animation-name:ringpulse-quiet;animation-duration:9s;}
  .content-hero .inner{position:relative;z-index:1;}
  .content-hero .eyebrow{margin-bottom:18px;}
  .content-hero .breadcrumb a{color:var(--steel);text-decoration:none;transition:color .3s ease;}
  .content-hero .breadcrumb a:hover{color:var(--signal-soft);}
  .content-hero .breadcrumb span{margin:0 6px;color:var(--line-strong);}
  .content-hero h1{font-size:clamp(30px,4.2vw,46px);max-width:20ch;font-weight:440;}
  .content-hero .meta{
    margin-top:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;
    color:var(--steel);text-transform:uppercase;
  }
  /* Matches .wrap's own max-width/padding formula exactly (see .wrap
     above and .nav in the header) so a plain content page's left/right
     margins line up with the header's, rather than the narrower 720px
     reading-column width this used before. The no-nav case sets the
     max-width here; the has-nav (sidebar) case below sets this back to
     `none` and instead sizes its own outer grid container
     (.content-layout.has-nav) to the same 1180px formula, so both
     layouts' outer edges line up with the header either way. */
  .content-body{max-width:1180px;margin:0 auto;padding:56px clamp(20px,5vw,64px) 120px;}
  .content-body h2{font-size:25px;margin:48px 0 14px;color:var(--fog);font-weight:460;}
  .content-body h2:first-child{margin-top:0;}
  .content-body h3{font-size:18px;margin:32px 0 10px;color:var(--fog);font-weight:460;}
  .content-body p{margin:0 0 18px;color:var(--fog-dim);line-height:1.75;font-size:15.5px;}
  .content-body ul,.content-body ol{margin:0 0 18px;padding-left:22px;color:var(--fog-dim);line-height:1.75;font-size:15.5px;}
  .content-body li{margin-bottom:6px;}
  .content-body li::marker{color:var(--steel);}
  .content-body a{color:var(--signal-soft);text-decoration:underline;text-underline-offset:2px;}
  .content-body a:hover{color:var(--brass);}
  .content-body strong{color:var(--fog);font-weight:600;}
  .content-body blockquote{
    margin:28px 0;padding:2px 0 2px 20px;border-left:2px solid var(--line-strong);
    color:var(--fog-dim);font-style:italic;
  }
  .content-body hr{border:none;border-top:1px solid var(--line);margin:44px 0;}
  .content-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px;}
  .content-body th,.content-body td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;}
  .content-body th{
    font-family:var(--font-mono);text-transform:uppercase;font-size:10.5px;
    letter-spacing:0.05em;color:var(--steel);font-weight:500;
  }
  @media (max-width:600px){
    .content-hero .radar-corner{width:280px;height:280px;top:-90px;right:-70px;}
  }

  /* ---------- section nav (left column: subpages / siblings) ---------- */
  /* Outer container matches .wrap/.nav's own 1180px formula (see
     .content-body above) so pages with a section-nav sidebar keep the
     same left/right margins as the header and as the no-nav content
     pages. The 220px sidebar + 56px gap + up-to-720px reading column
     is a max, not a fixed width — on narrower viewports the reading
     column simply shrinks below 720px before it gets to the sidebar. */
  .content-layout.has-nav{
    max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px) 120px;
    display:grid;grid-template-columns:220px minmax(0,720px);gap:56px;align-items:start;
  }
  .content-layout.has-nav .content-body{max-width:none;margin:0;padding:56px 0 0;}
  /* Modifier for a has-nav page whose content isn't a single reading
     column — currently just ProductPage's full-width gallery and its
     product-detail-columns row underneath. Same 220px category/section
     nav, but the content side gets the rest of the 1180px container
     instead of the 720px reading-column cap.
     Scoped to desktop widths only (min-width:781px, the exact complement
     of the 780px mobile breakpoint below) — a real bug found here: with
     no media condition, this 3-class selector out-specifies the 780px
     mobile rule's 2-class .content-layout.has-nav selector regardless of
     which one is inside a media query, so it kept forcing the 220px+1fr
     split even on mobile, squeezing the gallery/info into the narrow
     220px track instead of collapsing to one full-width column. */
  @media (min-width:781px){
    .content-layout.has-nav.is-wide{grid-template-columns:220px minmax(0,1fr);}
  }
  .section-nav{
    position:sticky;top:88px;
    padding-top:56px;
    display:flex;flex-direction:column;gap:2px;
  }
  .section-nav-label{
    font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;
    color:var(--steel);margin:0 0 12px;
  }
  .section-nav a{
    display:block;padding:9px 0;color:var(--fog-dim);text-decoration:none;font-size:14.5px;
    border-bottom:1px solid var(--line);transition:color .3s ease,padding-left .3s ease;
  }
  .section-nav a:last-child{border-bottom:none;}
  .section-nav a:hover{color:var(--fog);padding-left:4px;}
  .section-nav a[aria-current="page"]{color:var(--signal-soft);font-weight:500;}
  @media (max-width:780px){
    .content-layout.has-nav{grid-template-columns:1fr;gap:0;}
    .content-layout.has-nav .content-body{padding-top:32px;}
    .section-nav{
      position:static;padding:24px 0 20px;
      flex-direction:row;flex-wrap:wrap;gap:8px;
      border-bottom:1px solid var(--line);
    }
    .section-nav-label{width:100%;margin-bottom:4px;}
    .section-nav a{
      border-bottom:none;padding:6px 12px;background:rgba(233,236,238,0.05);
      border:1px solid var(--line);border-radius:100px;font-size:13px;
    }
    .section-nav a:hover{padding-left:12px;background:rgba(233,236,238,0.09);}
    .section-nav a[aria-current="page"]{border-color:var(--signal-soft);background:rgba(71,145,255,0.1);}
  }
  .cursor-glow{
    position:absolute; z-index:0; pointer-events:none;
    width:520px;height:520px;border-radius:50%;
    background:radial-gradient(circle, rgba(59,110,246,0.16), transparent 68%);
    left:0;top:0; transform:translate(-260px,-260px);
    opacity:0; transition:opacity .5s ease;
  }
  .hero-inner{position:relative;z-index:1;}
  .hero-mark{width:52px;height:auto;margin-bottom:26px;filter:drop-shadow(0 0 16px rgba(59,110,246,0.4));}
  .hero h1{font-size:clamp(34px,5.6vw,68px);max-width:16ch;font-weight:440;}
  .hero h1 em{font-style:italic;color:var(--signal-soft);font-weight:420;}
  .hero-sub{margin-top:24px;max-width:50ch;font-size:clamp(15px,1.4vw,17.5px);color:var(--fog-dim);line-height:1.65;}
  .hero-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
  .btn-primary{
    font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
    background:var(--signal-soft);color:var(--ink);padding:15px 26px;text-decoration:none;
    transition:background .3s ease, transform .3s ease;
  }
  .btn-primary:hover{background:var(--fog);transform:translateY(-1px);}
  .btn-ghost{
    font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
    border:1px solid var(--line-strong);color:var(--fog);padding:14px 24px;text-decoration:none;
    transition:border-color .3s ease, color .3s ease;
  }
  .btn-ghost:hover{border-color:var(--brass);color:var(--brass);}
  .signal-status{
    margin-top:52px;display:flex;align-items:center;gap:10px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;color:var(--steel);
  }
  .signal-dot{width:7px;height:7px;border-radius:50%;background:var(--brass);animation:blink 2.6s ease-in-out infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}

  .trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .trust-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    padding:26px 0;
  }
  @media (max-width:820px){ .trust-grid{grid-template-columns:repeat(2,1fr);gap:22px 0;} }
  .trust-grid div{font-family:var(--font-mono);font-size:11px;color:var(--steel);letter-spacing:0.04em;}
  .trust-grid div b{display:block;font-family:var(--font-display);font-style:normal;font-size:22px;color:var(--fog);margin-bottom:4px;font-weight:460;}

  /* ---------- shared section ---------- */
  section{padding:clamp(64px,10vw,104px) 0;}
  .tick-divider{position:relative;height:1px;background:var(--line);}
  .tick-divider .wrap{position:relative;height:1px;}
  .tick-label{position:absolute;top:-9px;left:clamp(20px,5vw,64px);background:var(--ink);padding:0 10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;color:var(--steel);}
  .section-head{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;margin-bottom:52px;align-items:end;}
  .section-head h2{font-size:clamp(26px,3.2vw,38px);}
  .section-head p{color:var(--fog-dim);font-size:15px;line-height:1.7;max-width:46ch;}
  @media (max-width:820px){ .section-head{grid-template-columns:1fr;} }

  .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,.68,.24,1), transform .8s cubic-bezier(.16,.68,.24,1);}
  .reveal.in{opacity:1;transform:translateY(0);}
  .reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,.68,.24,1), transform .7s cubic-bezier(.16,.68,.24,1);}
  .reveal-stagger.in > *{opacity:1;transform:translateY(0);}
  .reveal-stagger.in > *:nth-child(1){transition-delay:0s;}
  .reveal-stagger.in > *:nth-child(2){transition-delay:.08s;}
  .reveal-stagger.in > *:nth-child(3){transition-delay:.16s;}
  .reveal-stagger.in > *:nth-child(4){transition-delay:.24s;}
  .reveal-stagger.in > *:nth-child(5){transition-delay:.32s;}

  /* ---------- services ---------- */
  .services-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
  @media (max-width:900px){ .services-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .services-grid{grid-template-columns:1fr;} }
  .service{background:var(--ink);padding:30px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s ease;}
  .service:hover{background:var(--ink-2);}
  .service .icon{width:34px;height:34px;margin-bottom:18px;color:var(--signal-soft);}
  .service.is-new .icon{color:var(--brass);}
  .service h3{font-size:18px;font-weight:500;font-family:var(--font-body);}
  .service .tag{display:inline-block;margin-top:8px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;color:var(--brass);border:1px solid var(--brass-dim);padding:2px 7px;}
  .service p{margin-top:10px;font-size:13.5px;color:var(--fog-dim);line-height:1.6;}

  /* In the prototype .partners sits nested inside the #tjanster section; here
     PartnersElement is its own Elemental block/section, so this override
     removes the generic section{padding-top} to keep it visually stitched
     right under ServicesElement rather than opening a second big gap. */
  .partners-section{padding-top:0;}
  .partners{margin-top:44px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;}
  .partners-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--steel);}
  .partners-row{display:flex;flex-wrap:wrap;gap:8px 34px;}
  .partners-row span{font-family:var(--font-display);font-style:italic;font-size:17px;color:var(--fog-dim);transition:color .3s ease;}
  .partners-row span:hover{color:var(--fog);}

  /* ---------- process ---------- */
  .process{border-top:1px solid var(--line);}
  .rail{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
  @media (max-width:820px){ .rail{grid-template-columns:1fr;gap:44px;} }
  .rail::before{
    content:"";position:absolute;top:17px;left:0;right:0;height:1px;background:var(--line);
  }
  @media (max-width:820px){ .rail::before{display:none;} }
  .rail-fill{position:absolute;top:17px;left:0;height:1px;background:var(--signal);width:0%;transition:width 1.4s cubic-bezier(.16,.68,.24,1);}
  .step{position:relative;padding-top:48px;}
  .step .n{
    position:absolute;top:0;left:0;width:35px;height:35px;border:1px solid var(--line-strong);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-mono);font-size:12px;color:var(--fog-dim);background:var(--ink);
  }
  .step.in .n{border-color:var(--signal);color:var(--fog);}
  .step h3{font-size:17.5px;font-weight:500;font-family:var(--font-body);}
  .step p{margin-top:8px;font-size:13.5px;color:var(--fog-dim);line-height:1.6;max-width:34ch;}

  /* ---------- coverage ---------- */
  .coverage{border-top:1px solid var(--line);}
  .cov-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  @media (max-width:900px){ .cov-grid{grid-template-columns:1fr;} }
  .cov-copy h2{font-size:clamp(26px,3.2vw,38px);margin-bottom:14px;}
  .cov-copy p{color:var(--fog-dim);font-size:15px;line-height:1.8;}
  .cov-list{margin-top:22px;display:flex;flex-direction:column;gap:2px;}
  .cov-list div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:12px;color:var(--fog-dim);}
  .cov-list div b{font-family:var(--font-body);font-weight:500;color:var(--fog);font-size:13.5px;}
  .cov-map{position:relative;aspect-ratio:1/1;border:1px solid var(--line);background:var(--ink-2);overflow:hidden;}
  .cov-map svg{width:100%;height:100%;}
  .node{transform-origin:center;}
  .node circle.ping{fill:none;stroke:var(--brass);opacity:0;animation:ping 3.2s ease-out infinite;}
  .node.n1 circle.ping{animation-delay:0s;} .node.n2 circle.ping{animation-delay:.5s;}
  .node.n3 circle.ping{animation-delay:1s;} .node.n4 circle.ping{animation-delay:1.5s;} .node.n5 circle.ping{animation-delay:2s;}
  @keyframes ping{0%{r:4;opacity:.9;stroke-width:2;}100%{r:26;opacity:0;stroke-width:0.5;}}
  .node text{font-family:'IBM Plex Mono'; font-size:8.5px; fill:var(--fog-dim); letter-spacing:0.02em;}
  .node.home text{fill:var(--fog); font-weight:500;}

  /* ---------- reference jobs ---------- */
  .ref-jobs{border-top:1px solid var(--line);}
  .ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:8px;}
  @media (max-width:900px){ .ref-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .ref-grid{grid-template-columns:1fr;} }
  .ref-card{background:var(--ink);padding:36px clamp(20px,4vw,40px);}
  .ref-card .tag{display:inline-block;margin-bottom:14px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass-dim);padding:2px 7px;}
  .ref-card h3{font-size:19px;font-weight:500;font-family:var(--font-body);margin-bottom:14px;}
  .ref-card p{color:var(--fog-dim);font-size:14.5px;line-height:1.75;margin:0 0 10px;}
  .ref-card p b{color:var(--fog);font-weight:500;}
  .ref-card .stack{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px;}
  .ref-card .stack span{font-family:var(--font-mono);font-size:10px;letter-spacing:0.05em;color:var(--fog-dim);border:1px solid var(--line-strong);padding:3px 8px;}

  /* ---------- faq ---------- */
  .faq{border-top:1px solid var(--line);}
  .faq-list{max-width:760px;}
  .faq-item{border-bottom:1px solid var(--line);}
  .faq-item h3{margin:0;}
  .faq-q{
    width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:22px 0;text-align:left;font-family:var(--font-body);font-size:16px;font-weight:500;
  }
  .faq-q .plus{font-family:var(--font-mono);font-size:16px;color:var(--steel);transition:transform .35s ease;flex:none;}
  .faq-item[data-open="true"] .plus{transform:rotate(45deg);color:var(--signal-soft);}
  .faq-a-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.16,.68,.24,1);}
  .faq-item[data-open="true"] .faq-a-wrap{grid-template-rows:1fr;}
  .faq-a-inner{overflow:hidden;}
  .faq-a{padding-bottom:22px;font-size:14.5px;color:var(--fog-dim);line-height:1.7;max-width:60ch;}
  .faq-a p{margin:0 0 12px;}
  .faq-a p:last-child{margin-bottom:0;}

  /* ---------- final CTA ---------- */
  .final-cta{position:relative;border-top:1px solid var(--line);overflow:hidden;}
  .final-glow{position:absolute;top:0;left:50%;width:900px;height:600px;transform:translateX(-50%);background:radial-gradient(ellipse at center, rgba(59,110,246,0.14), transparent 65%);pointer-events:none;}
  .cta-grid{position:relative;display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;}
  @media (max-width:900px){ .cta-grid{grid-template-columns:1fr;} }
  .final-cta h2{font-size:clamp(30px,4.6vw,50px);max-width:14ch;}
  .final-cta h2 em{font-style:italic;color:var(--signal-soft);}
  /* Was ".final-cta > .cta-grid > .cta-copy > p" — a chain of DIRECT-child
     (>) combinators that skipped right over the real ".wrap" div sitting
     between .final-cta and .cta-grid in ClosingCTAElement.ss, so the rule
     never matched anything and its margin-top:20px never applied — the
     $Copy paragraph sat flush against the heading with no gap. .cta-copy
     is specific enough on its own (only used in this one block). */
  .cta-copy > p{margin-top:20px;color:var(--fog-dim);font-size:15px;line-height:1.7;max-width:44ch;}
  .cta-direct{margin-top:30px;display:flex;flex-direction:column;gap:10px;font-family:var(--font-mono);font-size:13px;color:var(--fog-dim);}
  .cta-direct a{color:var(--fog);text-decoration:none;border-bottom:1px solid var(--line-strong);}
  .cta-direct a:hover{color:var(--signal-soft);border-color:var(--signal-soft);}

  .form{border:1px solid var(--line);background:var(--ink-2);padding:30px;}
  .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
  .field label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel);}
  .field input,.field textarea{
    background:transparent;border:1px solid var(--line-strong);color:var(--fog);
    padding:12px 13px;font-family:var(--font-body);font-size:14px;resize:vertical;
    transition:border-color .3s ease;
  }
  .field input:focus,.field textarea:focus{border-color:var(--signal-soft);outline:none;}
  .field input::placeholder,.field textarea::placeholder{color:var(--steel);opacity:.7;}
  .form .submit{
    width:100%;margin-top:4px;background:var(--signal-soft);color:var(--ink);
    font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
    padding:15px;transition:background .3s ease;
  }
  .form .submit:hover{background:var(--fog);}
  .form .fine{margin-top:12px;font-size:11px;color:var(--steel);line-height:1.5;}

  /* Fallback styling for SilverStripe\Security\Security's own login/lost-
     password/change-password forms (see Page.ss's $Form block). Like
     .contact-form-embed below, that form's HTML is the framework's own —
     not our hand-built .field/.submit markup — so its submit button and
     any links (e.g. "I've lost my password?") fell back to unstyled
     browser defaults (grey button, blue underlined link), clashing with
     the dark theme. Targets plain element types/generic classes so it
     holds regardless of the exact Silverstripe version's field markup. */
  .form input[type="submit"],
  .form button[type="submit"],
  .form .btn,
  .form .action{
    display:block;width:100%;margin-top:4px;background:var(--signal-soft);color:var(--ink);border:none;cursor:pointer;
    font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
    padding:15px;transition:background .3s ease;
  }
  .form input[type="submit"]:hover,
  .form button[type="submit"]:hover,
  .form .btn:hover,
  .form .action:hover{background:var(--fog);}
  .form a{color:var(--signal-soft);text-decoration:none;border-bottom:1px solid var(--line-strong);}
  .form a:hover{color:var(--fog);border-color:var(--signal-soft);}
  /* "Remember me" etc: checkbox fields read better as checkbox+label on
     one line than stacked the way .field's column layout defaults to. */
  .form .field.checkbox{flex-direction:row;align-items:center;gap:8px;}
  .form .field.checkbox label{text-transform:none;font-family:var(--font-body);font-size:13px;letter-spacing:normal;color:var(--fog-dim);}

  /* Styling for the embedded silverstripe/userforms Form (see
     ClosingCTAElement.ss / ContactForm()). Previously targeted plain
     element types as a guessed fallback (no source access at the time)
     — that's what caused the "too airy" bug Stefan found: margin-bottom
     was set directly on every <input>/<textarea>, and a field with a
     RightTitle (CMS "help text" under a field) rendered that text as a
     sibling <span class="right-title"> AFTER the input, so that field's
     own layout ended up taller/more uneven than fields without one.
     Now verified against userforms' actual template source
     (EditableFormField_holder.ss, 6.x): every field is a
     <div class="field ..."> containing <label class="left">, a
     <div class="middleColumn"> wrapping the input, and optionally
     <span class="right-title"> (help text) and/or <span class="message">
     (validation error). Spacing now lives in exactly ONE place — a flex
     gap + margin-bottom on .field itself — so label, input, help text
     and error message all sit in the same even rhythm regardless of
     which optional pieces a given field has, and inputs/textareas no
     longer carry their own margin. See the README's "Contact form
     styling" note. */
  .contact-form-embed{border:1px solid var(--line);background:var(--ink-2);padding:30px;}
  .contact-form-embed .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
  .contact-form-embed .field:last-child{margin-bottom:0;}
  .contact-form-embed .field > label{margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel);}
  .contact-form-embed .middleColumn{display:block;}
  .contact-form-embed input[type="text"],
  .contact-form-embed input[type="email"],
  .contact-form-embed input[type="tel"],
  .contact-form-embed textarea,
  .contact-form-embed select{
    display:block;width:100%;background:transparent;border:1px solid var(--line-strong);color:var(--fog);
    padding:12px 13px;font-family:var(--font-body);font-size:14px;resize:vertical;
    transition:border-color .3s ease;
  }
  .contact-form-embed input:focus,.contact-form-embed textarea:focus{border-color:var(--signal-soft);outline:none;}
  .contact-form-embed .right-title{font-size:12px;line-height:1.5;color:var(--steel);}
  .contact-form-embed .message{font-size:12px;}
  .contact-form-embed .message.error{color:#e8635a;}
  .contact-form-embed button[type="submit"],
  .contact-form-embed input[type="submit"]{
    width:100%;margin-top:4px;background:var(--signal-soft);color:var(--ink);border:none;cursor:pointer;
    font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;text-transform:uppercase;
    padding:15px;transition:background .3s ease;
  }
  .contact-form-embed button[type="submit"]:hover,
  .contact-form-embed input[type="submit"]:hover{background:var(--fog);}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--line);padding:56px 0 30px;}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
  @media (max-width:720px){ .foot-grid{grid-template-columns:1fr;gap:32px;} }
  .foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .foot-brand img{height:24px;width:auto;display:block;}
  footer p{color:var(--fog-dim);font-size:13px;line-height:1.7;max-width:32ch;}
  footer h4{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--steel);margin-bottom:14px;}
  footer .col a, footer .col p{display:block;font-size:13.5px;color:var(--fog-dim);text-decoration:none;margin-bottom:9px;}
  footer .col a:hover{color:var(--signal-soft);}

  /* Sociala medier-ikoner (Settings > NextIT > Sociala medier). Higher
     specificity than "footer .col a" above on purpose, so these don't
     inherit that rule's block/stacked layout — they sit in a row of
     small circular buttons instead. Hand-drawn inline SVGs (see
     Footer.ss), so `fill:currentColor` here is what actually colors
     them — no icon font/external library. */
  .social-links{display:flex;gap:10px;margin-top:14px;}
  footer .col .social-links a{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;margin-bottom:0;flex:none;
    border:1px solid var(--line-strong);border-radius:50%;
    color:var(--steel);transition:color .3s ease,border-color .3s ease;
  }
  footer .col .social-links a:hover{color:var(--signal-soft);border-color:var(--signal-soft);}
  .social-links svg{width:16px;height:16px;fill:currentColor;}
  .foot-bottom{
    margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
    font-family:var(--font-mono);font-size:10.5px;color:var(--steel);letter-spacing:0.04em;
  }

  /* ---------- products (Produkter / Produkt) ---------- */
  .product-toolbar{
    display:flex;gap:24px;flex-wrap:wrap;align-items:flex-end;margin-bottom:32px;
    padding-bottom:24px;border-bottom:1px solid var(--line);
  }
  .product-toolbar label{display:flex;flex-direction:column;gap:6px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel);}
  .product-toolbar select{
    background:var(--ink-2);border:1px solid var(--line-strong);color:var(--fog);
    padding:9px 12px;font-family:var(--font-body);font-size:13.5px;min-width:160px;
  }
  .product-toolbar select:focus{border-color:var(--signal-soft);outline:none;}

  .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
  .product-card{background:var(--ink);display:flex;flex-direction:column;transition:background .3s ease;}
  .product-card:hover{background:var(--ink-2);}
  .product-card-media{position:relative;display:block;aspect-ratio:4/3;background:var(--ink-2);overflow:hidden;}
  .product-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,.68,.24,1);}
  .product-card:hover .product-card-media img{transform:scale(1.04);}
  .product-card-media-empty{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--ink-2),var(--ink-3));}
  .product-card-body{padding:18px 18px 0;flex:1;}
  .product-card-body h3{margin-top:6px;font-size:15.5px;font-weight:500;font-family:var(--font-body);}
  .product-card-body h3 a{color:var(--fog);text-decoration:none;}
  .product-card-body h3 a:hover{color:var(--signal-soft);}
  .product-card-model{margin-top:4px;font-size:12.5px;color:var(--steel);}
  .product-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px 18px;}
  .product-price,.product-price-large{font-family:var(--font-mono);color:var(--fog);}
  .product-price{font-size:14.5px;}
  .product-price-large{font-size:24px;margin:16px 0;display:block;}
  .product-card-availability{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.04em;color:var(--signal-soft);}
  .product-card-availability.is-out{color:var(--steel);}

  .product-badge{
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.08em;text-transform:uppercase;
    padding:3px 8px;border:1px solid var(--brass-dim);color:var(--brass);background:var(--ink);
  }
  /* Only overlaid on top of the card thumbnail; on the detail page (inside
     .product-badges) it stays in normal flow, sitting inline next to the
     availability badge instead. */
  .product-card-media .product-badge-condition{position:absolute;top:10px;left:10px;}
  .product-badges{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0 0;}
  .product-availability{
    font-family:var(--font-mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;
    color:var(--signal-soft);border:1px solid var(--line-strong);padding:3px 9px;
  }
  .product-availability.is-out{color:var(--steel);}
  .product-model{color:var(--steel);font-size:13px;margin-top:4px;}
  .product-description{margin-top:24px;}
  .product-description p{color:var(--fog-dim);line-height:1.75;font-size:15px;}

  .pagination{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line);}
  .pagination a,.pagination span{font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.03em;}
  .pagination a{color:var(--fog);text-decoration:none;}
  .pagination a:hover{color:var(--signal-soft);}
  .pagination .is-disabled{color:var(--steel);opacity:.5;}
  .pagination-status{color:var(--steel);}

  /* Gallery/single image sits full-width on top of the page (no longer
     a sticky side column — .product-detail-columns below is a separate,
     later row, not a sibling it needs to stay level with); info and the
     "Intresserad?" form then sit side by side underneath it. */
  .product-gallery-wrap{margin-bottom:40px;}
  .product-detail-columns{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:start;}
  @media (max-width:900px){ .product-detail-columns{grid-template-columns:1fr;gap:32px;} }

  .product-gallery{position:relative;}
  .product-gallery-track{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    border:1px solid var(--line);background:var(--ink-2);scrollbar-width:none;
  }
  .product-gallery-track::-webkit-scrollbar{display:none;}
  /* height:auto is required here, not just tidiness: the <img> tag also
     carries real width/height HTML attributes (from Fill(1200,900) in
     ProductPage.ss — needed so the browser can reserve the right box
     before the image loads, avoiding layout shift). Those attributes
     count as a definite CSS height via the browser's own presentational
     hints, and a definite height beats aspect-ratio — aspect-ratio only
     computes a size for a dimension that's actually 'auto'. Without this
     line every gallery image rendered at its EXACT uploaded height
     (e.g. 900px) squeezed into whatever width the track happened to be,
     instead of a proper 4:3 box — cropped tall/narrow rather than 4:3.
     Explicitly forcing height back to auto here is what lets aspect-ratio
     actually take over. */
  .product-gallery-slide{flex:0 0 100%;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:start;}
  .product-gallery-single{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);background:var(--ink-2);}
  .product-gallery-empty{width:100%;aspect-ratio:4/3;border:1px solid var(--line);background:linear-gradient(135deg,var(--ink-2),var(--ink-3));}
  .product-gallery-nav{
    position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
    background:rgba(12,15,20,0.72);border:1px solid var(--line-strong);color:var(--fog);
    display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .25s ease,border-color .25s ease;
  }
  .product-gallery-nav:hover{background:var(--ink);border-color:var(--signal-soft);color:var(--signal-soft);}
  .product-gallery-nav.prev{left:12px;}
  .product-gallery-nav.next{right:12px;}
  /* Toggled by theme.js on scroll — hidden at either end of the track
     instead of staying clickable with nothing left to scroll to. */
  .product-gallery-nav.is-hidden{display:none;}

  .product-interest{margin-top:36px;}
  .product-interest .section-nav-label{margin-bottom:16px;}

  /* Honeypot field (App\Forms\SpamProtection) — hidden from sighted users
     and screen readers alike, but still a real, focusable-by-default
     input so naive bots that fill every field in the DOM still trip it. */
  .spam-trap{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

  /* ---------- cookie consent (banner + settings modal) ---------- */
  .cookie-heading{font-family:var(--font-display);font-size:19px;font-weight:500;margin-bottom:8px;}

  .cookie-banner{
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:rgba(12,15,20,0.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line-strong);
    opacity:0;transform:translateY(24px);transition:opacity .35s ease,transform .35s ease;
  }
  .cookie-banner.is-visible{opacity:1;transform:translateY(0);}
  .cookie-banner-inner{
    max-width:1180px;margin:0 auto;padding:26px clamp(20px,5vw,64px);
    display:flex;gap:32px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  }
  .cookie-banner-copy{flex:1 1 420px;max-width:640px;}
  .cookie-banner-copy p{color:var(--fog-dim);font-size:13.5px;line-height:1.65;}
  .cookie-banner-copy a{color:var(--signal-soft);text-decoration:underline;text-underline-offset:2px;}
  .cookie-banner-copy a:hover{color:var(--brass);}
  .cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto;}
  .cookie-banner-actions button,.cookie-modal-actions button{
    font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.04em;padding:11px 18px;white-space:nowrap;
  }

  .cookie-modal-overlay{
    position:fixed;inset:0;z-index:90;background:rgba(6,8,11,0.72);
    display:flex;align-items:center;justify-content:center;padding:24px;
    opacity:0;transition:opacity .3s ease;
  }
  /* .cookie-modal-overlay's own `display:flex` above has the same CSS
     specificity as the browser default `[hidden]{display:none}` rule, so
     without this it would win by source order and the overlay would stay
     visible (and capture clicks) even with the `hidden` attribute set —
     same fix already applied to .mobile-panel[hidden] above. */
  .cookie-banner[hidden],.cookie-modal-overlay[hidden]{display:none;}
  .cookie-modal-overlay.is-visible{opacity:1;}
  .cookie-modal{
    position:relative;width:100%;max-width:560px;max-height:86vh;overflow-y:auto;
    background:var(--ink-2);border:1px solid var(--line-strong);padding:36px;
    transform:translateY(16px);transition:transform .3s ease;
  }
  .cookie-modal-overlay.is-visible .cookie-modal{transform:translateY(0);}
  .cookie-modal-close{
    position:absolute;top:14px;right:14px;width:32px;height:32px;font-size:22px;line-height:1;
    color:var(--steel);transition:color .25s ease;
  }
  .cookie-modal-close:hover{color:var(--fog);}
  .cookie-modal-intro{color:var(--fog-dim);font-size:14px;line-height:1.65;margin-bottom:26px;}

  .cookie-category{padding:16px 0;border-bottom:1px solid var(--line);}
  .cookie-category:last-of-type{border-bottom:none;}
  .cookie-category-head{display:flex;align-items:center;gap:12px;}
  .cookie-category-name{font-size:14.5px;font-weight:500;color:var(--fog);}
  .cookie-category-locked{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:var(--steel);}
  .cookie-category-desc{margin-top:8px;margin-left:52px;color:var(--fog-dim);font-size:13px;line-height:1.6;}
  @media (max-width:480px){ .cookie-category-desc{margin-left:0;} }

  /* Custom toggle switch: a real checkbox, visually hidden but still
     keyboard/screen-reader operable, plus a track+thumb built from the
     label's own ::before/::after so no extra DOM elements are needed. */
  .cookie-toggle{position:relative;display:inline-flex;flex:none;width:40px;height:22px;cursor:pointer;}
  .cookie-toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
  .cookie-toggle-track{
    position:absolute;inset:0;background:var(--ink-3);border:1px solid var(--line-strong);
    border-radius:100px;transition:background .25s ease,border-color .25s ease;
  }
  .cookie-toggle-track::after{
    content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
    background:var(--steel);transition:transform .25s ease,background .25s ease;
  }
  .cookie-toggle input:checked + .cookie-toggle-track{background:rgba(71,145,255,0.18);border-color:var(--signal-soft);}
  .cookie-toggle input:checked + .cookie-toggle-track::after{transform:translateX(18px);background:var(--signal-soft);}
  .cookie-toggle input:disabled + .cookie-toggle-track{opacity:.6;cursor:not-allowed;}
  .cookie-toggle input:focus-visible + .cookie-toggle-track{outline:2px solid var(--signal-soft);outline-offset:2px;}

  .cookie-modal-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:28px;}

  /* The footer's reopen control is a <button> (it triggers JS, not a
     navigation), styled to be indistinguishable from the <a> links next
     to it in the same "Sidor" column. */
  .footer-cookie-link{
    display:block;background:none;border:none;padding:0;margin-bottom:9px;
    font-family:inherit;font-size:13.5px;color:var(--fog-dim);text-decoration:none;
    text-align:left;cursor:pointer;transition:color .3s ease;
  }
  .footer-cookie-link:hover{color:var(--signal-soft);}

  @media (max-width:640px){
    .cookie-banner-inner{padding:22px 20px;}
    .cookie-banner-actions{width:100%;}
    .cookie-banner-actions button{flex:1 1 auto;}
    .cookie-modal{padding:28px 22px;}
  }

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .ring,.demo-sweep,.signal-dot,.node circle.ping{animation:none !important;opacity:.25;}
    .reveal,.reveal-stagger,.reveal-stagger > *,.step,.rail-fill{transition:none !important;opacity:1 !important;transform:none !important;width:100% !important;}
    .cursor-glow{display:none;}
    .cookie-banner,.cookie-modal-overlay,.cookie-modal,.cookie-toggle-track,.cookie-toggle-track::after{transition:none !important;}
  }

  /* Punkter och nummer för listor skrivna i CMS:et. Den globala återställningen
     högst upp (ul{list-style:none}) är till för menyer och navigering, men
     innehållslistor ska visa sina markörer. Markörfärgen kommer från den
     befintliga .content-body li::marker-regeln. */
  .content-body ul, .faq-a ul{list-style:disc;}
  .content-body ol, .faq-a ol{list-style:decimal;}
  .content-body ul ul, .faq-a ul ul{list-style:circle;margin:6px 0 0;}
  .faq-a ul, .faq-a ol{margin:0 0 12px;padding-left:22px;}
  .faq-a li::marker{color:var(--steel);}

/* == Produktsida: tackruta efter intresseanmälan == */
#intresse{scroll-margin-top:110px;}
.form-success{display:flex;flex-direction:column;align-items:flex-start;gap:10px;outline:none;}
.form-success-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--signal-soft,#4791ff);color:var(--signal-soft,#4791ff);background:rgba(71,145,255,.08);margin-bottom:4px;}
.form-success-icon svg{width:22px;height:22px;}
.form-success-title{margin:0;font-size:clamp(24px,2.6vw,30px);font-weight:460;line-height:1.2;color:inherit;}
.form-success p{margin:0;line-height:1.65;font-size:15.5px;max-width:52ch;}
.form-success .form-success-meta{font-size:13px;opacity:.8;margin-top:4px;}
.form-success-meta a{color:var(--signal-soft,#4791ff);white-space:nowrap;}
@media (prefers-reduced-motion:no-preference){
  .form-success{animation:formSuccessIn .45s ease-out both;}
  @keyframes formSuccessIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
}