/* ============================================================
   GOKARTUTLEIE ÅLESUND — landing v3 (Nordic Web Agency)
   ============================================================ */
:root{
  --bg:        oklch(0.16 0.008 250);
  --bg-elev:   oklch(0.20 0.010 250);
  --surface:   oklch(0.235 0.012 250);
  --ink:   oklch(0.98 0 0);
  --muted: oklch(0.78 0.012 250);
  --faint: oklch(0.62 0.010 250);
  --line:  oklch(0.32 0.010 250);
  --accent:       oklch(0.87 0.185 111);
  --accent-press: oklch(0.81 0.185 111);
  --accent-ink:   oklch(0.19 0.03 120);
  --accent-soft:  oklch(0.87 0.185 111 / 0.14);
  --glass:      oklch(0.18 0.012 250 / 0.55);
  --glass-edge: oklch(1 0 0 / 0.14);
  --glass-hi:   oklch(1 0 0 / 0.20);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pop:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --maxw: 1240px;
  --pad:  clamp(1.1rem, 4vw, 2.6rem);
  --radius: 14px;
  --header-h: 92px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,0.96rem + 0.28vw,1.1rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.02;letter-spacing:-0.03em;font-weight:900;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(2.9rem,6.4vw,5.6rem)}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.6rem)}
h3{font-size:clamp(1.15rem,1.02rem + .6vw,1.5rem);letter-spacing:-0.02em}
p{text-wrap:pretty}
.mono{font-family:"Space Mono",ui-monospace,monospace}
.accent{color:var(--accent)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(4.5rem,10vh,8rem);position:relative}
.deck{font-size:clamp(1.08rem,1rem + .55vw,1.32rem);color:var(--muted);max-width:52ch;line-height:1.55}
.sectionhead h2{margin-bottom:1.1rem}

/* ---------- Preloader ---------- */
html.is-loading{overflow:hidden}
#preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:grid;place-items:center;overflow:hidden;
  transition:opacity .7s var(--ease),visibility .7s var(--ease)}
#preloader::after{content:"";position:absolute;width:62vmax;height:62vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--accent-soft),transparent 60%);opacity:.45}
#preloader.done{opacity:0;visibility:hidden}
.pl-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:min(340px,74vw)}
.pl-logo{height:clamp(38px,9vw,54px);width:auto;filter:brightness(0) invert(1);animation:plpulse 1.8s var(--ease) infinite}
@keyframes plpulse{0%,100%{opacity:.82}50%{opacity:1}}
.pl-bar{width:100%;height:3px;border-radius:3px;background:oklch(0.3 0.008 250);overflow:hidden}
.pl-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent-press),var(--accent));box-shadow:0 0 10px var(--accent)}

/* No section kicker (removed the "eyebrow" text label and its numbered-chip
   replacement, .secnum) — headings carry enough weight on their own at this
   type scale, and sections are already distinguished by background tone and
   spacing. Kept out deliberately; don't reintroduce a kicker component here. */

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-weight:800;font-size:.9rem;letter-spacing:.02em;text-transform:uppercase;
  padding:.85rem 1.6rem;border-radius:10px;background:var(--accent);color:var(--accent-ink);
  border:2px solid var(--accent);cursor:pointer;white-space:nowrap;
  transition:transform .18s var(--ease),background .18s,border-color .18s;touch-action:manipulation}
.btn:hover{transform:translateY(-2px);background:var(--accent-press);border-color:var(--accent-press)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:oklch(1 0 0 / .07);border-color:var(--ink)}
.btn.lg{padding:1rem 1.9rem;font-size:.98rem}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:.75rem 0 auto 0;z-index:210;pointer-events:none}
.site-header .wrap{max-width:1360px}
html.menu-open{overflow:hidden}
.glass-bar{pointer-events:auto;position:relative;isolation:isolate;
  display:flex;flex-direction:column;gap:.6rem;
  padding:.82rem 1.15rem .82rem 1.5rem;border-radius:22px;
  background:linear-gradient(180deg,oklch(0.22 0.012 250 /.6),oklch(0.15 0.012 250 /.48));border:1px solid var(--glass-edge);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 18px 50px oklch(0 0 0 /.48), 0 0 0 1px oklch(0.87 0.185 111 /.10), inset 0 1px 0 oklch(1 0 0 /.26), inset 0 -1px 0 oklch(0 0 0 /.30);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.glass-bar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,oklch(1 0 0 /.14),transparent 42%)}
.gb-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.scrolled .glass-bar{background:oklch(0.14 0.010 250 / .86);box-shadow:0 18px 50px oklch(0 0 0 /.5), 0 0 0 1px oklch(0.87 0.185 111 /.16), inset 0 1px 0 oklch(1 0 0 /.22)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:44px;width:auto;filter:brightness(0) invert(1)}
.nav{display:flex;align-items:center;gap:.3rem}
.nav a{position:relative;font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:.005em;text-shadow:0 1px 10px oklch(0 0 0 /.35);padding:.55rem .9rem;border-radius:8px;transition:color .2s,background .2s}
.nav a:hover,.nav a:focus-visible{color:var(--accent);background:oklch(1 0 0 / .09)}
.nav a::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.32rem;height:2px;background:var(--accent);border-radius:2px;box-shadow:0 0 8px var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:.5rem;flex:0 0 auto}
.header-cta .btn{padding:.82rem 1.55rem;box-shadow:0 6px 20px oklch(0.87 0.185 111 /.42)}
.header-cta .btn:hover{box-shadow:0 12px 30px oklch(0.87 0.185 111 /.6)}
.menu-btn{display:none;width:46px;height:46px;border-radius:12px;border:1px solid var(--glass-edge);
  background:oklch(1 0 0 / .06);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
.mb-bars{position:relative;width:20px;height:14px;display:block}
.mb-bars i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transform-origin:center;
  transition:transform .32s var(--ease),opacity .2s var(--ease)}
.mb-bars i:nth-child(1){top:0}
.mb-bars i:nth-child(2){top:6px}
.mb-bars i:nth-child(3){top:12px}
.menu-open .mb-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .mb-bars i:nth-child(2){opacity:0}
.menu-open .mb-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* race-track progress lane */
.track{position:relative;height:6px;border-radius:6px;
  background:linear-gradient(oklch(0.30 0.008 250),oklch(0.23 0.008 250));box-shadow:inset 0 1px 2px oklch(0 0 0 /.45),inset 0 0 0 1px oklch(1 0 0 /.06)}
.track-fill{position:absolute;left:0;top:0;bottom:0;width:0;z-index:1;border-radius:6px 0 0 6px;
  background:linear-gradient(90deg,var(--accent-press),var(--accent))}
.track-dash{position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-50%);z-index:2;opacity:.65;
  background:repeating-linear-gradient(90deg,oklch(1 0 0 /.55) 0 7px,transparent 7px 15px)}
.track-finish{position:absolute;right:0;top:0;bottom:0;width:11px;z-index:2;border-radius:0 6px 6px 0;overflow:hidden;
  background:repeating-conic-gradient(oklch(0.98 0 0) 0 25%, oklch(0.14 0 0) 0 50%) 0 0/5.5px 5.5px}
.track-marker{position:absolute;top:50%;left:0;width:11px;height:11px;border-radius:50%;z-index:5;pointer-events:none;
  transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 38%,#fff,var(--accent) 62%);
  box-shadow:0 0 10px 2px var(--accent),0 0 3px #fff;animation:mpulse 1.7s ease-in-out infinite}
@keyframes mpulse{0%,100%{box-shadow:0 0 8px 1px var(--accent),0 0 3px #fff}50%{box-shadow:0 0 15px 4px var(--accent),0 0 4px #fff}}

.mobile-menu-scrim{position:fixed;inset:0;z-index:199;background:oklch(0.06 0.006 250 / .55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility .4s}
.mobile-menu-scrim.open{opacity:1;visibility:visible;pointer-events:auto}
.mobile-menu{position:fixed;left:var(--pad);right:var(--pad);
  top:calc(var(--header-h,92px) + .6rem);
  bottom:auto;
  max-height:calc(100vh - var(--header-h,92px) - 2rem - env(safe-area-inset-bottom,0px));
  max-height:calc(100svh - var(--header-h,92px) - 2rem - env(safe-area-inset-bottom,0px));
  z-index:200;isolation:isolate;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;justify-content:center;gap:.05rem;
  padding:1.1rem clamp(1.4rem,6.5vw,2.2rem) calc(1.1rem + env(safe-area-inset-bottom,0px));
  border-radius:22px;
  background:linear-gradient(180deg,oklch(0.16 0.010 250 /.94),oklch(0.10 0.012 250 /.98));
  border:1px solid var(--glass-edge);
  box-shadow:0 24px 60px oklch(0 0 0 /.55), 0 0 0 1px oklch(0.87 0.185 111 /.12), inset 0 1px 0 oklch(1 0 0 /.24);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:scale(.94) translateY(-8px);transform-origin:top center;
  transition:opacity .32s var(--ease),transform .5s var(--pop),visibility .5s;
  will-change:transform,opacity}
.mobile-menu::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,oklch(1 0 0 /.14),transparent 46%)}
.mobile-menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1) translateY(0)}
.mobile-menu a{position:relative;display:flex;align-items:center;justify-content:space-between;padding:.68rem .25rem;
  font-size:clamp(1.02rem,4.4vw,1.4rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);
  border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),color .2s,background .2s;border-radius:10px}
.mobile-menu a:active{background:oklch(1 0 0 / .07)}
.mobile-menu a::after{content:"\2192";color:var(--accent);font-weight:400;font-size:.75em;transition:transform .25s var(--ease)}
.mobile-menu a:active::after{transform:translateX(3px)}
.mobile-menu.open a{opacity:1;transform:none}
.mobile-menu.open a:nth-child(1){transition-delay:.05s}
.mobile-menu.open a:nth-child(2){transition-delay:.09s}
.mobile-menu.open a:nth-child(3){transition-delay:.13s}
.mobile-menu.open a:nth-child(4){transition-delay:.17s}
.mobile-menu.open a:nth-child(5){transition-delay:.21s}
.mobile-menu.open a:nth-child(6){transition-delay:.25s}
.mobile-menu.open a:nth-child(7){transition-delay:.29s}
.mobile-menu.open a:nth-child(8){transition-delay:.33s}
.mobile-menu .btn{margin-top:.85rem;justify-content:center;border-bottom:0;font-size:.88rem;padding:.8rem 1.7rem;transition-delay:.38s}
.mobile-menu .btn::after{content:none}
@media(max-width:980px){.nav,.header-cta .btn{display:none}.menu-btn{display:inline-flex}.brand img{height:34px}}
@media(min-width:981px){.mobile-menu,.mobile-menu-scrim{display:none}}

/* ---------- Hero ---------- */
.hero{min-height:100svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bg-elev)}
.hero-parallax{position:absolute;inset:-8% 0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.08);animation:kb 18s var(--ease) forwards}
@keyframes kb{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,
  oklch(0.12 0.008 250 /.62) 0%,oklch(0.12 0.008 250 /.14) 32%,oklch(0.13 0.008 250 /.72) 78%,var(--bg) 100%)}
.hero-inner{padding-block:9rem clamp(4rem,9vh,7rem)}
@media(max-width:680px){.hero-inner{padding-block:7rem 2.2rem}}
.hero .tagline{font-family:"Space Mono",monospace;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:.7rem}
.hero .tagline::before{content:"";width:30px;height:2px;background:var(--accent)}
.hero h1{margin-top:1.3rem}
.hero .lead{margin-top:1.5rem;font-size:clamp(1.08rem,1rem + .6vw,1.4rem);color:oklch(0.92 0 0);max-width:44ch}
.hero-cta{display:flex;gap:.9rem;margin-top:2.3rem;flex-wrap:wrap}
.h-line{overflow:hidden;display:block}
.hero h1 .h-anim{display:inline-block;will-change:transform}
.scrollcue{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:1;
  font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.2em;color:var(--faint);text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scrollcue span{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-8px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* ---------- Marquee band ---------- */
.marquee{border-block:1px solid var(--line);background:var(--bg-elev);padding:1.5rem 0;overflow:hidden}
.mq-row{display:flex;white-space:nowrap;will-change:transform}
.mq-item{display:inline-flex;align-items:center;font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(2rem,5.5vw,4rem);padding:0 1.4rem;color:var(--ink)}
.mq-item.glow{color:var(--accent);text-shadow:0 0 22px oklch(0.87 0.185 111 /.6),0 0 7px oklch(0.87 0.185 111 /.5)}
.mq-item .sep{display:inline-block;width:13px;height:13px;background:var(--accent);border-radius:2px;margin:0 1.4rem;transform:rotate(45deg);box-shadow:0 0 12px oklch(0.87 0.185 111 /.5)}

/* ---------- Heritage (full-bleed cinematic) ---------- */
.heritage{position:relative;isolation:isolate;overflow:hidden;min-height:90vh;display:flex;align-items:center;padding-block:clamp(6rem,14vh,9rem)}
.her-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bg-elev)}
.her-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.05);animation:herkb 20s var(--ease) forwards}
@keyframes herkb{to{transform:scale(1.13)}}
.heritage::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,oklch(0.11 0.008 250 /.5),oklch(0.11 0.008 250 /.72) 60%,oklch(0.12 0.008 250 /.92))}
.her-content{max-width:780px}
.her-content h2{margin:1rem 0 1.4rem;font-size:clamp(2.4rem,1.5rem + 3.4vw,4.6rem)}
.her-content p{color:oklch(0.9 0 0);max-width:54ch;font-size:clamp(1.05rem,1rem + .45vw,1.28rem)}
.her-stats{display:flex;flex-wrap:wrap;gap:2rem 2.8rem;margin-top:2.6rem;padding-top:1.9rem;border-top:1px solid oklch(1 0 0 /.2)}
.her-stats .hs b{display:block;font-size:clamp(2rem,1.4rem + 1.8vw,3rem);font-weight:900;letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.her-stats .hs span{font-family:"Space Mono",monospace;font-size:.7rem;color:oklch(0.82 0 0);text-transform:uppercase;letter-spacing:.1em;margin-top:.5rem;display:block}

/* ---------- Circuit (technical: map + real corner) ---------- */
.circuit{background:var(--bg);overflow:hidden}
.circ-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3rem)}
.circ-head h2{margin-top:1rem}
.circ-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.circ-map{position:relative;border-radius:var(--radius);overflow:hidden;clip-path:inset(0 0 0 0);aspect-ratio:16/11;box-shadow:0 22px 50px oklch(0 0 0 /.42)}
.circ-map img{width:100%;height:100%;object-fit:cover}
.circ-side{display:flex;flex-direction:column;gap:1.3rem}
.circ-side p{color:var(--muted)}
.corners{display:flex;flex-wrap:wrap;gap:.6rem}
/* CHANGED 25 Aug 2026 — was a near-invisible 1px outline pulled into a full
   999px pill: on a short wide label that reads as a thin arch, not a tag
   (flagged as looking like "eyebrows" on both the sim-teaser corners row
   and the Simulator page's address note). Now a proper small glass chip —
   reuses the header .glass-bar's own material (soft gradient fill,
   backdrop blur, inset top highlight, var(--radius) instead of a full
   pill) so it reads as part of the site's language instead of a bare
   outline shape. Shared class — this fixes every .corner on the site
   (Banen's circ-side, corners-named, sim-teaser, Simulator address note)
   in one place. */
.corner{display:inline-flex;align-items:center;gap:.55rem;font-size:.85rem;font-weight:600;
  border:1px solid var(--glass-edge);border-radius:var(--radius);padding:.5rem 1.05rem;
  background:linear-gradient(180deg,oklch(1 0 0 /.11),oklch(1 0 0 /.03));
  -webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);
  box-shadow:0 10px 24px oklch(0 0 0 /.22), inset 0 1px 0 oklch(1 0 0 /.16)}
.corner b{font-family:"Space Mono",monospace;color:var(--accent);font-size:.78rem}
.circ-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10;box-shadow:0 16px 40px oklch(0 0 0 /.35);clip-path:inset(0 0 0 0)}
.circ-photo img{width:100%;height:100%;object-fit:cover}
.circ-side .btn{align-self:flex-start}
@media(max-width:860px){.circ-grid{grid-template-columns:1fr}}

/* ---------- Reveal + Explosion (one immersive section) ---------- */
.reveal-explode{position:relative;height:100svh;background:var(--bg);overflow:hidden}
/* White, not var(--bg) — this matches the canvas's own ctx.fillRect("#fff") fill.
   The pinned canvas is meant to fully cover this box at all times, but iOS Safari's
   collapsing address bar can momentarily desync the pin-spacer height from the
   canvas's actual size mid-scroll. When that happens for a frame, whatever's behind
   the canvas shows through — matching it to white turns that into an invisible
   non-event instead of a jarring dark stripe cutting through the white spec panel. */
.rx-pin{position:absolute;inset:0;overflow:hidden;background:#fff}
#exCanvas{display:block;width:100%;height:100%}
.rx-cover{position:absolute;inset:0;z-index:4;background:var(--bg);display:grid;place-items:center;text-align:center;overflow:hidden;clip-path:inset(0 0 0 0)}
.brace-glow{position:absolute;width:80vmax;height:80vmax;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft),transparent 62%);opacity:0;will-change:transform,opacity}
.brace-inner{position:relative;z-index:2;padding-inline:var(--pad)}
.brace-l1{font-family:"Space Mono",monospace;font-size:.9rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.brace-l2,.brace-l3{font-size:clamp(2.6rem,1.6rem + 5vw,5.6rem);line-height:.98;color:#fff}
.brace-l3{color:var(--accent)}
.brace-cue{margin-top:1.6rem;font-family:"Space Mono",monospace;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.brace-flash{position:absolute;inset:0;background:#fff;opacity:0;z-index:5;pointer-events:none;will-change:opacity}
.explode-loader{position:absolute;inset:0;display:grid;place-items:center;background:#fff;z-index:2;
  font-family:"Space Mono",monospace;font-size:.8rem;letter-spacing:.16em;color:#111;
  animation:plpulse 1.8s var(--ease) infinite}
.explode-head{position:absolute;left:0;right:0;top:clamp(8rem,13vh,9.5rem);text-align:center;pointer-events:none;z-index:3;opacity:0}
.explode-head .tag{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:oklch(0.5 0.14 111)}
.explode-head h2{color:#0a0a0b;margin-top:.55rem;font-size:clamp(1.7rem,1.1rem + 2.6vw,3rem)}
/* Spec strip — appears only once the parts have fully settled (nothing moving
   underneath it), sits in the dead zone below the artwork, never on top of it.
   No pointers/callouts to individual parts — just a clean Apple-style tech-spec row. */
.explode-legend{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;
  row-gap:.5rem;padding:1.5rem 1.6rem 1.8rem;
  background:linear-gradient(0deg,oklch(1 0 0 /.96) 30%,oklch(1 0 0 /0));
  opacity:0;transform:translateY(12px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.explode-legend.on{opacity:1;transform:translateY(0)}
.leg-item{font-family:"Space Mono",monospace;font-size:.78rem;letter-spacing:.01em;
  color:#0a0a0b;white-space:nowrap;padding-inline:.9rem}
.leg-item:not(:first-child)::before{content:"·";display:inline-block;margin-right:.9rem;color:oklch(0 0 0 /.28)}
.leg-item b{color:oklch(0.5 0.16 111)}
@media(min-width:681px) and (max-width:1180px){
  .explode-legend{font-size:.92em;padding:1.2rem 1.2rem 1.5rem}
}
@media(max-width:680px){
  .brace-l2,.brace-l3{font-size:clamp(2.1rem,1.2rem + 5vw,3.4rem)}
  .brace-inner{padding-inline:1.4rem}
  .explode-legend{padding:1.1rem 1rem 1.4rem;row-gap:.4rem}
  .leg-item{font-size:.68rem;padding-inline:.6rem}
  .leg-item:not(:first-child)::before{margin-right:.6rem}
}

/* ---------- Word reveal (masked neon fill) ---------- */
.wordmask{position:relative;background:var(--bg);overflow:hidden;text-align:center;padding-block:clamp(5rem,13vh,8.5rem)}
.wordmask::before{content:"";position:absolute;left:0;right:0;top:0;height:40vh;background:linear-gradient(180deg,#fff,var(--bg));z-index:0}
.wordmask .wrap{position:relative;z-index:1}
.wm-stage{position:relative;display:inline-block}
.wm-outline,.wm-fill{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(3rem,2rem + 8vw,8rem);margin:0}
.wm-outline{color:transparent;-webkit-text-stroke:1.5px oklch(1 0 0 /.26)}
.wm-fill{position:absolute;inset:0;color:var(--accent);clip-path:inset(0 100% 0 0)}
.wordmask .tail{margin-top:1.9rem;color:var(--muted);max-width:48ch;margin-inline:auto}

/* ---------- Experiences (photo-led bento + light sim box) ---------- */
.opplevelser .sectionhead{max-width:56ch}
.exp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem;margin-top:2.6rem}
.exp{position:relative;border-radius:var(--radius);overflow:hidden;min-height:270px;display:flex;
  align-items:flex-end;isolation:isolate;border:1px solid var(--line)}
.exp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:-2;opacity:0;transition:opacity 1.1s var(--ease),transform .6s var(--ease)}
.exp img.on{opacity:1}
.exp::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,oklch(0.1 0 0 /.08) 26%,oklch(0.07 0 0 /.85))}
.exp:hover img.on{transform:scale(1.05)}
.exp .txt{padding:1.5rem 1.6rem 1.6rem}
.exp h3{margin-bottom:.35rem}
.exp p{font-size:.92rem;color:oklch(0.88 0 0)}
.exp.big{grid-column:span 4;min-height:360px}
.exp.sm{grid-column:span 2}
.exp.med{grid-column:span 3}
@media(max-width:920px){.exp.big{grid-column:span 6}.exp.sm,.exp.med{grid-column:span 3}}
@media(max-width:600px){.exp-grid{grid-template-columns:1fr}.exp.big,.exp.sm,.exp.med{grid-column:1/-1;min-height:240px}}

/* ---------- Simulator teaser (homepage, full-bleed) ----------
   REBUILT 24 Aug 2026: was a boxed light card (.sim-box, #f4f4f6) tucked
   at the bottom of Opplevelser — clashed with the dark theme and didn't
   read as prominent. Now its own chapter, reusing .heritage's full-bleed
   photo + scrim + big statement type (see markup) so it carries the same
   weight as Banen higher up the page. .sim-media/.sim-vid-card below are
   unrelated — those belong to the dedicated simulator.html page. */
.sim-teaser{min-height:76vh}
.sim-teaser .brace-l1{display:block;margin-bottom:.7rem}
.sim-teaser .corners{margin-top:1.8rem}
.sim-teaser .btn{margin-top:2.2rem}

/* ---------- Packages (start-list) ---------- */
.pakker .sectionhead{max-width:60ch}
.pricelist{margin-top:2.4rem;border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:auto 1fr auto auto;gap:1.4rem;align-items:center;
  padding:1.5rem .3rem;border-bottom:1px solid var(--line);transition:background .2s,padding-left .25s var(--ease)}
.prow:hover{background:oklch(1 0 0 /.03);padding-left:1rem}
.prow .pnum{font-family:"Space Mono",monospace;font-size:.82rem;color:var(--faint)}
.prow .pname h3{margin:0}
.prow .pname p{font-size:.9rem;color:var(--muted);margin-top:.25rem}
.prow .pprice{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right}
.prow .pprice small{font-size:.72rem;font-weight:600;color:var(--muted)}
.prow.feat{background:linear-gradient(90deg,var(--accent-soft),transparent 70%)}
.prow.feat .pname h3 .ftag{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.1em;color:var(--accent-ink);
  background:var(--accent);padding:.2rem .5rem;border-radius:5px;margin-left:.7rem;vertical-align:middle;text-transform:uppercase}
.prow .btn{padding:.6rem 1.2rem;font-size:.8rem}
.incl{font-size:.86rem;color:var(--muted);margin-top:1.8rem;font-family:"Space Mono",monospace;letter-spacing:.02em;line-height:1.8}
@media(max-width:720px){.prow{grid-template-columns:1fr auto;gap:.5rem 1rem}.prow .pnum{display:none}.prow .btn{grid-column:2;grid-row:1/3}.prow .pprice{grid-column:1;text-align:left}}

/* ---------- Gift card ---------- */
.gift{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.gift h2{margin-bottom:1.1rem}
.gift p{color:var(--muted);max-width:42ch}
.gift .btn{margin-top:1.6rem}
.giftcard{aspect-ratio:16/10;border-radius:16px;padding:1.8rem;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(135deg,oklch(0.27 0.02 250),oklch(0.18 0.01 250));border:1px solid var(--line);
  box-shadow:0 24px 60px oklch(0 0 0 /.45);position:relative;overflow:hidden}
.giftcard::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:-50px;top:-50px;background:radial-gradient(circle,var(--accent-soft),transparent 70%)}
.giftcard .gc-top{display:flex;justify-content:space-between;align-items:center;font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.giftcard .gc-amt{font-size:2.4rem;font-weight:900;letter-spacing:-.02em}
.giftcard .gc-brand{font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.giftcard .gc-brand b{color:var(--accent)}
@media(max-width:760px){.gift{grid-template-columns:1fr}.giftcard{order:-1}}

/* ---------- Booking CTA (full bleed) ---------- */
.cta-full{position:relative;overflow:hidden;isolation:isolate;min-height:clamp(460px,66vh,740px);display:grid;place-items:center;padding-block:clamp(4rem,10vh,7rem)}
.cta-bg{position:absolute;left:0;right:0;top:-15%;width:100%;height:130%;object-fit:cover;z-index:-2;object-position:center 50%;will-change:transform}
.cta-full::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,oklch(0.1 0.006 250 /.70),oklch(0.1 0.006 250 /.90))}
.cta-inner{max-width:820px;margin-inline:auto;padding-inline:var(--pad);text-align:center}
.cta-inner p{margin:1.2rem auto 0;color:oklch(0.92 0 0);max-width:52ch}
.cta-inner .btn{margin-top:2.1rem}

/* ---------- Nyheter (news) ---------- */
.nyheter{background:var(--bg);overflow:hidden}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.news-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.6rem;
  display:flex;flex-direction:column;gap:.55rem;transition:transform .22s var(--ease),border-color .22s}
.news-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.news-card time{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.06em;color:var(--accent)}
.news-card h3{margin-top:.1rem}
.news-card p{font-size:.94rem;color:var(--muted)}
.news-card.soon{border-style:dashed;background:transparent}
.news-card.soon time{color:var(--faint)}
@media(max-width:820px){.news-grid{grid-template-columns:1fr}}

/* ---------- Nyheter subpage — hero device: a pulsing signal-bar equalizer,
   distinct medium from every other page (Banen=line, Gokarter=frames,
   Pakker=ring, Opplevelser=drifting orbs). Fits the "broadcast" idea of a
   news page and reads as alive without repeating any earlier trick. ---------- */
.nyh-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  min-height:70svh;display:flex;align-items:center;justify-content:center;
  background:var(--bg-elev)}
.nyh-hero h1{max-width:16ch}
.nyh-hero .lead{margin-top:1.3rem;max-width:50ch;margin-inline:auto;color:oklch(0.92 0 0);font-size:clamp(1.05rem,1rem + .5vw,1.3rem)}
.nyh-signal{position:absolute;inset:0 0 -2% 0;z-index:0;display:flex;align-items:flex-end;
  justify-content:center;gap:.9vw;opacity:.4;pointer-events:none}
.nyh-bar{width:.7vw;max-width:9px;min-width:4px;height:12%;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--accent),oklch(0.87 0.185 111 / 0));
  animation:nyh-pulse 2.6s ease-in-out infinite}
@keyframes nyh-pulse{0%,100%{height:10%}50%{height:var(--h,55%)}}
.nyh-bar:nth-child(4n){--h:80%;animation-delay:.05s}
.nyh-bar:nth-child(4n+1){--h:38%;animation-delay:.3s}
.nyh-bar:nth-child(4n+2){--h:62%;animation-delay:.55s}
.nyh-bar:nth-child(4n+3){--h:46%;animation-delay:.8s}
.nyh-bar:nth-child(3n){animation-duration:2.1s}
.nyh-bar:nth-child(5n){animation-duration:3.1s}
@media(prefers-reduced-motion:reduce){.nyh-bar{animation:none;height:35%}}
@media(max-width:700px){.nyh-signal{gap:1.6vw}.nyh-bar{width:1.4vw}}

.nyheter-page{background:var(--bg);padding-block:clamp(3rem,6vw,4.5rem);overflow:hidden}
/* auto-fit (not auto-fill) so empty tracks collapse instead of leaving a
   sparse post stranded in a narrow column with dead space beside it; a
   capped max (360px, not 1fr) keeps cards a consistent card-sized width
   instead of stretching to fill the row when there are only one or two. */
.nyheter-page .news-grid{grid-template-columns:repeat(auto-fit,minmax(280px,360px));margin-top:0}
.nyh-status{color:var(--muted);font-size:.98rem;padding:1rem 0}
.nyh-status.err{color:var(--accent)}

/* ---------- Kontakt (inquiry form) ---------- */
.kontakt{background:var(--bg-elev);overflow:hidden}
.kontakt-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.kontakt-intro h2{margin:1rem 0 1.2rem}
.kontakt-intro p{color:var(--muted);max-width:42ch}
.kontakt-intro .k-note{margin-top:1rem;font-size:.95rem}
/* Grid, not stacked flex rows: each row used to be its OWN flex container
   with a min-width:64px label — fine as long as no label was wider than
   64px, but "Simulator"/"Facebook" both run past that, so those two rows'
   values started further right than "Ring"/"E-post"/"Bane"'s did (the
   uneven-looking column Jonas flagged). A shared grid sizes column 1 to
   the widest label ONCE, across every row, so every value lines up. The
   wrapping <a>/<span> gets display:contents so its own <b>+text children
   become the grid's actual cells — the element (and its click/hover
   behaviour) stays, it just stops drawing its own box. */
.k-details{display:grid;grid-template-columns:max-content 1fr;column-gap:.8rem;row-gap:.75rem;align-items:baseline;margin-top:2rem;padding-top:1.7rem;border-top:1px solid var(--line)}
.k-details a,.k-details span{display:contents;color:var(--muted);font-size:.95rem}
.k-details b{color:var(--faint);font-family:"Space Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.k-details a:hover{color:var(--accent)}
.k-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-content:start}
.k-form .field{display:flex;flex-direction:column;gap:.4rem}
.k-form .field.full{grid-column:1/-1}
.k-form label{font-size:.78rem;font-weight:600;color:var(--muted)}
.k-form label .opt{color:var(--faint);font-weight:400}
.k-form input,.k-form select,.k-form textarea{background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  padding:.75rem .9rem;font:inherit;font-size:.95rem;min-height:48px;transition:border-color .2s,background .2s}
.k-form textarea{min-height:112px;resize:vertical}
.k-form input:focus,.k-form select:focus,.k-form textarea:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.k-form select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
.k-form .btn.full{grid-column:1/-1;margin-top:.4rem}
.form-status{grid-column:1/-1;font-size:.92rem;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;padding:.9rem 1rem;line-height:1.5}
@media(max-width:820px){.kontakt-grid{grid-template-columns:1fr}}
@media(max-width:520px){.k-form{grid-template-columns:1fr}}

/* ---------- Admin (Nyheter editor) — utilitarian internal tool, not a
   marketing page: reuses the Kontakt form grammar (.k-form/.field/.btn) so
   it stays on-brand without needing its own design language. No header/nav/
   footer chrome, no preloader, no GSAP — this page is for Darius, not
   visitors. ---------- */
.form-status.err{color:oklch(0.68 0.19 25);background:oklch(0.68 0.19 25 / .1);border-color:oklch(0.68 0.19 25)}
.btn.sm{padding:.55rem 1rem;font-size:.85rem}
.btn.danger{border-color:oklch(0.68 0.19 25 / .5);color:oklch(0.78 0.16 25)}
.btn.danger:hover{background:oklch(0.68 0.19 25 / .12);border-color:oklch(0.68 0.19 25)}

.admin-body{min-height:100svh;display:flex;align-items:flex-start;justify-content:center;padding:clamp(2rem,5vw,4rem) 1.2rem}
.admin-wrap{width:100%;max-width:760px}
.admin-logo{height:32px;filter:brightness(0) invert(1);margin-bottom:2.4rem;display:block}
.admin-pane h1{font-size:clamp(1.6rem,3vw,2.1rem)}
.admin-sub{color:var(--muted);margin-top:.5rem}
.admin-form{margin-top:1.8rem;padding:1.8rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.admin-list{margin-top:2rem;display:flex;flex-direction:column;gap:.9rem}
.admin-loading{color:var(--muted);padding:1rem 0}
.admin-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem}
.admin-row-txt time{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.06em;color:var(--accent)}
.admin-row-txt h4{margin-top:.3rem;font-size:1.02rem}
.admin-row-txt p{margin-top:.3rem;color:var(--muted);font-size:.92rem;max-width:52ch}
.admin-row-actions{display:flex;gap:.5rem;flex-shrink:0}
@media(max-width:600px){.admin-row{flex-direction:column}.admin-row-actions{align-self:flex-end}}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--bg-elev);padding-block:3.4rem 2.2rem;margin-top:0}
.site-footer .wrap{max-width:1560px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:2.2rem}
.foot-grid h4{font-family:"Space Mono",monospace;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:1rem;font-weight:700}
.foot-grid a{color:var(--muted);display:block;margin-bottom:.4rem;font-size:.94rem}
.foot-grid a:hover{color:var(--accent)}
.foot-brand img{height:48px;filter:brightness(0) invert(1);margin-bottom:1rem}
.foot-brand p{color:var(--muted);max-width:34ch;font-size:.94rem}
.hours-row{display:flex;justify-content:space-between;gap:1rem;font-size:.9rem;color:var(--muted);padding:.3rem 0;border-bottom:1px solid var(--line)}
.hours-row:last-child{border-bottom:0}
.hours-row span:last-child{font-family:"Space Mono",monospace}
.hours-table-row{display:grid;grid-template-columns:1fr auto auto;gap:.5rem 1rem;font-size:.9rem;color:var(--muted);padding:.3rem 0;border-bottom:1px solid var(--line);align-items:center}
.hours-table-row:last-child{border-bottom:0}
.hours-table-row span:not(:first-child){font-family:"Space Mono",monospace;text-align:right}
.hours-table-head span{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.hours-table-head small{display:block;font-size:.85em;text-transform:none;letter-spacing:0;color:var(--muted);font-family:"Space Mono",monospace;margin-top:.15rem}
.hours-table-row .span2{grid-column:2/4}

.foot-bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--faint);font-family:"Space Mono",monospace}
.foot-bottom a{color:var(--faint);text-decoration:underline;text-underline-offset:2px;transition:color .2s ease}
.foot-bottom a:hover{color:var(--ink)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- Reveal motion ---------- */
.reveal-on .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-on .reveal.in{opacity:1;transform:none}
.reveal-on .stagger.in > *{animation:rise .7s var(--ease) both}
.reveal-on .stagger.in > *:nth-child(2){animation-delay:.07s}
.reveal-on .stagger.in > *:nth-child(3){animation-delay:.14s}
.reveal-on .stagger.in > *:nth-child(4){animation-delay:.21s}
.reveal-on .stagger.in > *:nth-child(5){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* Mobile: softer focus-in for section copy — smoother, more premium than a hard slide */
@media(max-width:600px){
  .reveal-on .reveal{transform:translateY(18px);filter:blur(7px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
  .reveal-on .reveal.in{filter:blur(0)}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .hero-media img{animation:none;transform:none}
  .her-bg img{animation:none;transform:scale(1.05)}
  .scrollcue span{animation:none}
  .reveal-on .reveal{opacity:1;transform:none;filter:none;transition:none}
  .reveal-on .stagger.in > *{animation:none}
  .wm-fill{clip-path:inset(0 0 0 0)}
  .explode-legend{opacity:1;transform:none}
  .rx-cover{display:none}
  .explode-head{opacity:1}
}

/* ============================================================
   BANEN PAGE (banen.html) — Nordic Web Agency
   Lean + track-focused. Shares tokens + components with the homepage.
   ============================================================ */

/* Active nav item (interior pages) */
.nav a.active,.nav a[aria-current="page"]{color:var(--accent)}
.nav a.active::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.mobile-menu a.active{color:var(--accent)}
/* A visited nav link must look identical to an unvisited one -- otherwise
   the current page (or any link you've clicked before) reads as dimmer
   than the rest of the menu, which is what was making "Banen" look faded
   on a phone that had already opened it. Pin every state explicitly so
   the browser's default visited-link color can never leak through. */
.nav a:visited{color:var(--ink)}
.nav a.active:visited,.nav a[aria-current="page"]:visited{color:var(--accent)}
.mobile-menu a:visited{color:var(--ink)}
.mobile-menu a.active:visited{color:var(--accent)}

/* ---------- Full-height hero, centered — no photo. Quiet + slow, its own thing. ---------- */
.banen-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at center,var(--bg-elev) 0%,var(--bg) 68%)}

/* Watermark numeral — faint, breathes slowly. Bigger + smoother than the first pass:
   opacity and a hair of scale move together on a slow symmetric ease, not a linear
   back-and-forth, so it reads as a breath rather than a blink. */
.bh-watermark{position:absolute;left:50%;top:50%;z-index:0;transform:translate(-50%,-52%);
  font-family:"Archivo",sans-serif;font-weight:900;line-height:1;letter-spacing:-.04em;
  font-size:clamp(10.5rem,39vw,33rem);color:oklch(1 0 0 /.075);white-space:nowrap;
  pointer-events:none;user-select:none}
/* On narrow screens the 10.5rem floor above is wider than the viewport, so the
   numeral overflows and gets clipped unevenly on each side — it reads as
   off-center even though it's mathematically centered. Scale it down so the
   whole "1981" fits inside the frame and visibly centers behind the heading. */
@media(max-width:680px){.bh-watermark{font-size:clamp(5.5rem,30vw,9rem)}}
/* Static — no brightness animation. Any periodic pulse on a shape this large is
   noticeable no matter how small the delta (tried .6-1, then .72-.82, both visible).
   Motion budget for this hero now lives entirely in .bh-line's traveling glow. */

/* One thin hand-drawn line, not the real track trace (too busy) and not
   Gokarter's streaks (different page, different device) — a single quiet
   sweep with a small bright glow slowly traveling its length. */
.bh-line{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.bh-line svg{width:100%;height:100%;display:block}
.bh-line-base{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;opacity:.13}
.bh-line-glow{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;opacity:.8;
  filter:drop-shadow(0 0 7px oklch(0.87 0.185 111 /.85));
  stroke-dasharray:70 2600;animation:linetravel 11s linear infinite}
@keyframes linetravel{to{stroke-dashoffset:-2670}}

.bh-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}
/* .h-line's overflow:hidden (global, above) exists to mask the yPercent
   slide-up used on the homepage/Pakker/Nyheter heroes. Banen's entrance is a
   scale+blur "comes into focus" effect instead (see app.js playHero) — it
   starts at scale:1.07, which is briefly LARGER than the final text, so the
   shared overflow:hidden box clips the top/bottom of the letters while it
   animates down to scale:1. Banen doesn't need the mask, so let it breathe. */
.banen-hero .h-line{overflow:visible}
.banen-hero h1{max-width:16ch}
.banen-hero h1 .h-anim{display:inline-block;will-change:transform}
.banen-hero .lead{margin-top:1.3rem;max-width:50ch;margin-inline:auto;color:oklch(0.92 0 0);font-size:clamp(1.05rem,1rem + .5vw,1.3rem)}
.banen-jump{display:inline-block;margin-top:1.7rem;font-family:"Space Mono",monospace;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.banen-jump:hover{text-decoration:underline}

/* ---------- Banetrasé — the focus (light editorial) ---------- */
.banen-map-sec{position:relative;background:#f4f4f6;color:#0a0a0b;overflow:hidden}
.mm-watermark{position:absolute;top:-1.5rem;right:-.5rem;z-index:0;pointer-events:none;user-select:none;
  font-family:"Archivo",sans-serif;font-weight:900;line-height:1;letter-spacing:-.04em;
  font-size:clamp(7rem,22vw,18rem);color:oklch(0 0 0 /.05);white-space:nowrap}
/* Wider than the site's default column (not full-bleed — tried that, no) so
   the map has more room and the section doesn't leave so much empty grey on
   wide screens. Heading still caps its own width below for readability. */
.banen-map-sec .wrap{position:relative;z-index:1;max-width:1760px}
.banen-map-sec .mh{max-width:720px;margin-bottom:clamp(2rem,4vw,3rem)}
.banen-map-sec .mh h2{margin:0 0 1.1rem;color:#0a0a0b}
.banen-map-sec .mh p{color:oklch(0.34 0.01 250);max-width:56ch;font-size:clamp(1.02rem,1rem + .3vw,1.18rem)}

/* The curtain — covers the WHOLE section (not pinned, not scroll-scrubbed).
   Two solid panels sit over everything (heading, map, strip, corner cards —
   all normal document flow underneath) and part from the centre once, the
   moment the section scrolls into view. See app.js for the one-shot trigger. */
.tc-panel{position:absolute;top:0;bottom:0;width:50%;z-index:5;background:var(--bg)}
.tc-panel.tc-left{left:0;border-right:1px solid var(--line)}
.tc-panel.tc-right{right:0;border-left:1px solid var(--line)}

/* The map itself — contained within the column again (full-bleed didn't work).
   No pins overlaid on it (they clipped at the edges; S6/S10 still live in the
   corner cards below). Shadow is layered — a warm neon-tinted glow under a
   deep drop shadow — so it reads with some of the hero's energy, not flat. */
.trase-stage{position:relative;width:100%;aspect-ratio:2/1;border-radius:18px;overflow:hidden;
  background:#0a0a0b;border:1px solid oklch(0 0 0 /.08);
  box-shadow:0 0 70px oklch(0.87 0.185 111 /.14),0 34px 76px oklch(0 0 0 /.28)}
.ts-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;display:block}

.map-cap{font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.05em;color:oklch(0.46 0.01 250);margin-top:1.4rem}

.ts-strip{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin-top:1.8rem;padding:1.3rem 1.6rem;
  background:#fff;border:1px solid oklch(0 0 0 /.1);border-radius:14px;box-shadow:0 12px 30px oklch(0 0 0 /.06)}
.ts-stat{display:flex;flex-direction:column;gap:.2rem}
.ts-stat b{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.05rem;letter-spacing:-.01em;color:#0a0a0b}
.ts-stat span{font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:oklch(0.5 0.01 250)}

.corners-named{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
.cn{border:1px solid oklch(0 0 0 /.14);border-radius:12px;padding:1rem 1.1rem;background:#fff}
.cn b{display:flex;align-items:center;gap:.6rem;font-family:"Space Mono",monospace;font-size:.9rem;color:#0a0a0b;letter-spacing:.02em}
.cn .tag{background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:.16rem .5rem;font-size:.72rem;font-weight:700}
.cn p{margin-top:.45rem;font-size:.92rem;color:oklch(0.4 0.01 250)}
.cn-note{display:block;margin-top:1rem;font-family:"Space Mono",monospace;font-size:.75rem;color:oklch(0.5 0.01 250);letter-spacing:.02em}
@media(max-width:640px){.corners-named{grid-template-columns:1fr}}

/* ---------- Short history ---------- */
.banen-hist{background:var(--bg);overflow:hidden}
.hist-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,5vw,4rem);align-items:start}
.hist-head h2{margin-top:0}
.hist-body p{color:var(--muted);max-width:60ch}
.hist-body p + p{margin-top:1.1rem}
.kna-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.4rem;
  font-family:"Space Mono",monospace;font-size:.85rem;color:var(--accent);letter-spacing:.03em}
.kna-link:hover{text-decoration:underline}
@media(max-width:760px){.hist-grid{grid-template-columns:1fr;gap:1rem}}

/* ---------- Slim booking CTA ---------- */
.banen-cta{background:var(--bg-elev);border-top:1px solid var(--line);padding-block:clamp(2.8rem,6vh,4.2rem)}
.bcta-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem}
.bcta-inner h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
@media(max-width:560px){.bcta-inner{flex-direction:column;align-items:flex-start}}

@media(prefers-reduced-motion:reduce){
  .bh-line-glow{animation:none;opacity:.4}
}

/* ============================================================
   GOKARTER PAGE (gokarter.html) — Nordic Web Agency
   Deliberately simple — mirrors the old site's shape (photo +
   name + plain spec list per kart), same skeleton as Banen
   (compact hero, slim CTA) but no photo hero, no cards, no
   extra machinery in between.
   ============================================================ */

/* ---------- Full-height hero — centered, same skeleton as Banen (proven).
   Kept distinct through STRUCTURE, not just style: the accent frames the
   text from the sides instead of sweeping through behind it. Two near-
   vertical lines out near the edges, each with its own glow segment
   travelling — one down, one up — so the two sides don't mirror each other. ---------- */
.gk-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  background:var(--bg-elev)}
.gk-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}
.gk-hero h1{max-width:18ch}
.gk-hero .lead{margin-top:1.3rem;max-width:54ch;margin-inline:auto;color:var(--muted)}

.gk-frame{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.gk-frame svg{width:100%;height:100%;display:block}
.gk-frame-base{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.15}
.gk-frame-glow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;opacity:.85;
  filter:drop-shadow(0 0 8px oklch(0.87 0.185 111 /.85));stroke-dasharray:90 1400}
.gk-glow-down{animation:gkframedown 6.5s linear infinite}
.gk-glow-up{animation:gkframeup 7.5s linear infinite}
@keyframes gkframedown{to{stroke-dashoffset:-1490}}
@keyframes gkframeup{to{stroke-dashoffset:1490}}
@media(max-width:760px){.gk-frame{opacity:.6}}

@media(prefers-reduced-motion:reduce){
  .gk-frame-glow{animation:none;opacity:.35}
}

/* ---------- Kart feature — two separate write-ups again, each with a real
   photo + a proper spec-sheet grid (not bullets, not a shared table).
   Spec-sheet borrows Linear's "precision instrument" discipline via
   styles.refero.design: hairline dividers instead of shadows/cards, tight
   tracking, monospace for the label metadata, minimal ornament. ---------- */
.kf-sec{background:#f4f4f6;color:#0a0a0b}
.kf-sec + .kf-sec{border-top:1px solid oklch(0 0 0 /.08)}
/* Gokarter's hero is dark, this section is light — same hard cut Banen avoids
   by hiding it under a matching-colour curtain reveal. Simpler version of the
   same idea here: fade the top of this section from the hero's own dark tone
   into its own light one (same trick as .wordmask::before), so the seam reads
   as an intentional transition instead of a gap. Scoped to only the FIRST
   kf-sec (the one right after .gk-hero) — the second one (Sodi LR5) already
   sits on light background above and below, no seam to fix there. */
.gk-hero + .kf-sec{position:relative}
.gk-hero + .kf-sec::before{content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(4.5rem,10vh,8rem);background:linear-gradient(180deg,var(--bg-elev),#f4f4f6);
  z-index:0;pointer-events:none}
.kf-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.2rem,5vw,4rem);align-items:center;
  padding-block:clamp(3.4rem,7vh,5.2rem)}
.kf-alt .kf-inner{grid-template-columns:1fr 1.05fr}
@media(max-width:860px){
  .kf-inner{grid-template-columns:1fr!important;padding-block:2.8rem}
  .kf-alt .kf-photo{order:-1}
}

.kf-photo{position:relative;border-radius:4px;overflow:hidden;border:1px solid oklch(0 0 0 /.1)}
.kf-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}

.kf-body h2{color:#0a0a0b;margin-bottom:.7rem;letter-spacing:-.03em}
.kf-lead{color:oklch(0.34 0.01 250);max-width:46ch;margin-bottom:1.6rem;
  font-size:clamp(1.02rem,1rem + .3vw,1.15rem)}

.kf-sheet{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid oklch(0 0 0 /.14);
  border-left:1px solid oklch(0 0 0 /.14)}
.kf-cell{border-right:1px solid oklch(0 0 0 /.14);border-bottom:1px solid oklch(0 0 0 /.14);
  padding:.8rem .9rem}
.kf-cell span{display:block;font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.07em;
  text-transform:uppercase;color:oklch(0.52 0.01 250);margin-bottom:.35rem}
.kf-cell b{display:block;font-size:.86rem;font-weight:700;letter-spacing:-.01em;color:#0a0a0b;line-height:1.25}
@media(max-width:560px){
  .kf-sheet{grid-template-columns:repeat(2,1fr)}
}

/* Race-plate badge — real hestekrefter number, on the photo's corner */
.plate{position:absolute;top:14px;left:14px;z-index:2;text-align:center;
  background:oklch(0.14 0.008 250 /.92);border:1.5px solid var(--accent);border-radius:10px;
  padding:.5rem .8rem;backdrop-filter:blur(4px);
  box-shadow:0 0 20px oklch(0.87 0.185 111 /.35),0 8px 18px oklch(0 0 0 /.35)}
.plate b{display:block;font-family:"Space Mono",monospace;font-size:1.3rem;font-weight:700;
  line-height:1;letter-spacing:-.02em;color:var(--accent)}
.plate b i{font-style:normal;font-size:.55rem;font-weight:700;margin-left:.1rem;vertical-align:super}
.plate span{display:block;margin-top:.3rem;font-family:"Space Mono",monospace;font-size:.48rem;
  letter-spacing:.09em;text-transform:uppercase;color:oklch(0.8 0 0)}

/* ---------- Dobbeltkart note — one line, no extra section machinery ---------- */
.kart-note{background:var(--bg);padding-block:clamp(2.6rem,5vh,3.6rem)}
.kart-note p{max-width:68ch;margin-inline:auto;text-align:center;color:var(--muted);font-size:1.02rem}
.kart-note b{color:var(--ink)}
.kart-note p + p{margin-top:.9rem}

/* Simulator placeholder page — plain centered content, no hero device (page
   is a stand-in until real photos/pricing arrive from Darius). Top padding
   clears the fixed .site-header since there's no full hero underneath it. */
.sim-page{padding-block:clamp(8.5rem,20vh,11rem) clamp(4rem,9vh,6rem)}
.sim-page .sim-inner{max-width:640px;margin-inline:auto;text-align:center}
.sim-page .tagline{justify-content:center}
.sim-page .sim-tag{display:inline-block;font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:.4rem 1rem;margin-bottom:1.2rem}
.sim-page h1{margin-bottom:1rem}
.sim-page .deck{margin-inline:auto;margin-bottom:2rem}
.sim-page .btn{margin-inline:auto}

/* ============================================================
   SIMULATOR PAGE — real build, 24 Aug 2026. Reuses existing site
   grammar wherever possible: Pakker's pk-spec-sec/pk-tier for
   individual pricing, Pakker's pk-formats-list/pk-format for the
   group tier, Opplevelser's rounded-photo-card shape for the room
   video, Kontakt's kontakt/kontakt-grid/k-form for the booking
   section. Only new pieces are the photo hero and the two-address
   location split Darius explicitly asked for.
   ============================================================ */

/* ---------- Hero — full-bleed real photo. Text pinned to the
   bottom-left over a dark gradient instead of centered, so the
   room photo itself stays the focus. ---------- */
.sim-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;align-items:flex-end;text-align:left;
  padding-block:clamp(6rem,14vh,8rem) clamp(3rem,8vh,4.5rem)}
.sim-hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bg-elev)}
.sim-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  transform:scale(1.1);animation:simherokb 22s var(--ease) forwards}
@keyframes simherokb{to{transform:scale(1.02)}}
.sim-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,oklch(0.11 0.008 250 /.1) 0%,oklch(0.11 0.008 250 /.5) 55%,oklch(0.11 0.008 250 /.94) 100%)}
.sim-hero-inner{position:relative;z-index:1;max-width:720px}
.sim-hero h1{max-width:14ch}
.sim-hero .lead{margin-top:1.2rem;max-width:52ch;color:oklch(0.92 0 0);font-size:clamp(1.05rem,1rem + .5vw,1.3rem)}
@media(prefers-reduced-motion:reduce){.sim-hero-bg img{animation:none;transform:scale(1.02)}}

/* ---------- Location split — Darius's explicit ask made unmissable: two
   addresses, two bookings, side by side so nobody assumes the simulator
   sits at the karting track. ---------- */
/* Address-confirm strip — replaces the old two-card .sim-loc location
   split (24 Aug 2026, see markup comment). Deliberately NOT a <section> —
   full section padding (clamp 4.5rem–8rem, see the generic `section` rule)
   would look bloated for one line; this gets its own compact spacing. */
.sim-addr-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.9rem 1.4rem;padding-block:clamp(1.6rem,3vw,2.2rem);background:var(--bg)}
/* background is --bg, not --bg-elev: the hero above fades to near-black
   (oklch(0.11 ../.94) over the photo) so --bg (0.16) sits much closer to
   that than --bg-elev (0.20) would — avoids reintroducing the exact
   lightness-jump "line" bug just fixed on .opp-feature below. No border
   here either, for the same reason. */
.sim-addr-link{font-size:.95rem;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.sim-addr-link:hover{color:var(--accent)}
@media(max-width:600px){.sim-addr-note{flex-direction:column;text-align:center}}

/* ---------- Room video/photo — same rounded-card shape as Opplevelser's
   feature photos (.opp-feature-photo), sized for a muted looping clip. Named
   .sim-vid-card, NOT .sim-media — that name is already taken by the
   homepage's sim-box teaser (bare .sim-media selector, contained-image
   layout) and reusing it here would silently override that section. ---------- */
.sim-vid-card{border-radius:18px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 30px 70px oklch(0 0 0 /.4);background:#000}
.sim-vid-card video,.sim-vid-card img{width:100%;height:100%;object-fit:cover;display:block}

/* Two-tier pricing grid needs to fall back to 2 columns instead of the
   Pakker page's fixed 3 (this page only has an individual 30/60-min pair). */
.pk-tiers.cols-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.pk-tiers.cols-2{grid-template-columns:1fr}}

/* Homepage teaser sections — link out to each dedicated page (mirrors Banen's "Se hele banen").
   Generic (not scoped to one section) so any future teaser can reuse it. */
.cta-below{margin-top:1.8rem;display:inline-block}

/* ============================================================
   PAKKER PAGE (pakker.html) — Nordic Web Agency
   Rebuilt after the first pass read as generic (split image-card
   hero + two pill buttons + a pricing-widget bar chart — exactly
   the SaaS template the brief bans). Now follows the SAME skeleton
   as Banen/Gokarter: centered no-photo hero with its own single SVG
   device (a slow-rotating ring — distinct from Banen's straight
   line and Gokarter's vertical frame), one quiet jump link instead
   of a button pair — the real booking CTA already lives in the
   header. Pricing reuses Gokarter's own kf-sheet spec-grid instead
   of inventing a new chart widget. Dark / light / dark rhythm.
   ============================================================ */

/* ---------- Hero — centered, no photo. Flat --bg-elev + border-bottom,
   same as Gokarter's hero (Banen's radial vignette doubled up oddly with
   this page's own ring device, which is why it read as not matching).
   A slow-rotating ring behind the heading; one quiet jump link below
   (banen-jump, reused as-is). ---------- */
.pk-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  background:var(--bg-elev)}
.pk-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}
.pk-hero h1{max-width:14ch}
.pk-hero .lead{margin-top:1.3rem;max-width:48ch;margin-inline:auto;color:oklch(0.92 0 0);font-size:clamp(1.05rem,1rem + .5vw,1.3rem)}

.pk-ring{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none}
.pk-ring svg{width:min(72vmin,720px);height:min(72vmin,720px)}
.pk-ring-base{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.12}
.pk-ring-glow{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;opacity:.82;
  filter:drop-shadow(0 0 7px oklch(0.87 0.185 111 /.85));
  stroke-dasharray:140 1880;animation:ringtravel 13s linear infinite}
@keyframes ringtravel{to{stroke-dashoffset:-2020}}
@media(max-width:760px){.pk-ring svg{width:88vmin;height:88vmin}}
@media(prefers-reduced-motion:reduce){.pk-ring-glow{animation:none;opacity:.4}}

/* ---------- Pricing — REBUILT: the bordered kf-sheet cells read like a
   basic data table next to real money, not a 25k-kroner site. Dropped the
   boxes entirely — the price itself is now the oversized, confident
   element (impeccable's own guidance: real hierarchy over cards), duration
   is a small caption above it, columns separated by a single hairline
   rule instead of grid-lined cells. Editorial menu-column feel, not a
   spreadsheet. ---------- */
.pk-spec-sec{background:#f4f4f6;color:#0a0a0b;position:relative}
/* Same dark-hero-into-light-section seam fix as Gokarter's .kf-sec above. */
.pk-spec-sec::before{content:"";position:absolute;left:0;right:0;top:0;
  height:clamp(4.5rem,10vh,8rem);background:linear-gradient(180deg,var(--bg-elev),#f4f4f6);
  z-index:0;pointer-events:none}
.pk-spec-sec .wrap{position:relative;z-index:1;max-width:1120px}
.pk-spec-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3rem)}
.pk-spec-head h2{color:#0a0a0b;margin-bottom:1rem}
.pk-spec-head p{color:oklch(0.34 0.01 250);max-width:56ch;font-size:clamp(1.02rem,1rem + .3vw,1.18rem)}
.pk-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.4rem)}
.pk-tier:not(:first-child){border-left:1px solid oklch(0 0 0 /.12);padding-left:clamp(1.6rem,3vw,2.4rem)}
.pk-tier-min{display:block;font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:oklch(0.5 0.01 250)}
/* font-weight:700, not 800 — Space Mono only ships 400/700 (only those two
   are even loaded via the Google Fonts link), so 800 was never a real face;
   the browser was faking the extra weight with synthetic bold, which
   flattened the "4"'s top joint. Turned out that was a dead end — pulled
   the real SpaceMono-Bold.ttf and drew "499" straight from the font file,
   no browser/CSS involved, and it STILL has that flat-topped "4": it's a
   genuine, deliberate feature of Space Mono's numeral design (an "open
   four", same idea as an open 6/9), not a rendering bug at all — it just
   reads as a mistake at hero-price size even though it's fine in small
   mono labels. Checked Archivo (already loaded site-wide, up to weight
   900) the same way — its "4" stays properly pointed at every weight — so
   the big digits themselves now use Archivo instead of Space Mono. Kept
   Space Mono on the "kr" suffix below, matching how every other mono
   label/unit on the site pairs with a bold Archivo number. */
.pk-tier-price{margin-top:.5rem;font-family:"Archivo",sans-serif;font-weight:900;
  font-size:clamp(2.6rem,2rem + 2.4vw,3.7rem);letter-spacing:-.02em;line-height:1;color:#0a0a0b}
.pk-tier-price small{font-family:"Space Mono",monospace;font-size:.85rem;font-weight:700;letter-spacing:0;color:oklch(0.5 0.01 250);margin-left:.3rem}
.pk-tier h3{color:#0a0a0b;margin-top:1rem;font-size:clamp(1.05rem,1rem + .3vw,1.25rem)}
.pk-tier p{margin-top:.5rem;color:oklch(0.4 0.01 250);font-size:.92rem}
@media(max-width:760px){
  .pk-tiers{grid-template-columns:1fr;gap:2rem}
  .pk-tier:not(:first-child){border-left:0;border-top:1px solid oklch(0 0 0 /.12);padding-left:0;padding-top:1.8rem}
}

/* ---------- Race formats — REBUILT: was a photo docked beside a feature
   list, which read too close to a generic "image + list" template. Now a
   full-bleed cinematic band (reuses the homepage's own .heritage device —
   photo bg, dark gradient, slow kb-zoom) for the intro, then the two
   write-ups live in their own plain section below with no photo beside
   them at all. Photo is cropped hard toward the top-left (object-position
   + extra scale) so the ©Visva_Foto credit in the bottom-right corner sits
   outside the visible frame — usage rights on that photo set are still
   unconfirmed with Darius, flag again before launch either way. ---------- */
.pk-formats-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:64vh;display:flex;align-items:center;padding-block:clamp(5rem,12vh,7.5rem)}
.pk-formats-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--bg-elev)}
.pk-formats-bg img{width:100%;height:100%;object-fit:cover;object-position:32% 62%;
  transform:scale(1.14);animation:pkformskb 20s var(--ease) forwards}
@keyframes pkformskb{to{transform:scale(1.24)}}
.pk-formats-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,oklch(0.11 0.008 250 /.95) 0%,oklch(0.11 0.008 250 /.62) 48%,oklch(0.11 0.008 250 /.22) 100%)}
.pk-formats-head{max-width:620px;position:relative;z-index:1}
.pk-formats-head .deck{margin-top:1.1rem}

.pk-formats-list-sec{background:var(--bg)}
.pk-formats-list{max-width:880px}
.pk-format{padding-block:1.4rem}
.pk-format:first-child{padding-top:0}
.pk-format + .pk-format{border-top:1px solid var(--line)}
.pk-format-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.pk-format-price{font-family:"Archivo",sans-serif;font-weight:900;font-size:1.35rem;color:var(--accent);white-space:nowrap}
.pk-format-price small{font-family:"Space Mono",monospace;font-size:.6rem;font-weight:600;color:var(--muted)}
.pk-format p{color:var(--muted);margin-top:.5rem;max-width:52ch}
.pk-formats-note{margin-top:clamp(1.6rem,4vw,2.4rem);color:var(--muted);font-size:.96rem}
.pk-formats-note a{color:var(--accent)}
@media(prefers-reduced-motion:reduce){.pk-formats-bg img{animation:none;transform:scale(1.05)}}

/* ============================================================
   OPPLEVELSER PAGE (opplevelser.html) — Nordic Web Agency
   REBUILT v2: v1 gave the four segments four different structural
   gimmicks (big photo, full-bleed overlay, circular badge, no photo)
   trying to avoid repetition — that just made two of them read as
   demoted next to the other two. Jonas's own old site had this right
   in one way: all four equal, own photo, own real copy. Fix: ONE
   consistent "chapter" pattern for all four (heading+lead, one real
   contained photo, a fuller tail paragraph), alternating background
   tone instead of alternating photo side (side-flipping is what read
   as repetitive the first time). Hero gets a soft drifting glow orb —
   a different MEDIUM than the other three pages' crisp SVG strokes
   (Banen's line, Gokarter's frames, Pakker's ring), not a fourth
   variant of the same trick. ---------- */

.opp-hero{position:relative;isolation:isolate;text-align:center;z-index:1;
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  background:var(--bg-elev)}
.opp-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}
.opp-hero h1{max-width:15ch}
.opp-hero .lead{margin-top:1.3rem;max-width:50ch;margin-inline:auto;color:oklch(0.92 0 0);font-size:clamp(1.05rem,1rem + .5vw,1.3rem)}

/* Drifting glow orbs — CSS-only (no canvas). Six soft radial blobs in the
   one brand accent (was three — read as too sparse/concentrated), each on
   its own keyframe loop with a wide swing in position/scale/opacity so the
   motion reads as alive rather than a static gradient. Positioned toward
   the corners/edges of the hero, deliberately clear of the centered
   headline column (roughly the middle 30-70% horizontal band) so they
   frame the type instead of glowing behind it. No overflow:hidden on the
   hero — horizontal spill is still caught by the body's own
   overflow-x:hidden, but the bottom orbs are free to fade a little into
   the next section instead of getting guillotined at the section edge.
   The hero's own z-index:1 (it's position:relative, so this promotes it
   to its own paint layer) is what makes that bottom sliver actually
   visible on top of the next section's background instead of getting
   painted over by it, since that section is a plain in-flow box. */
.opp-glow-wrap{position:absolute;inset:-10%;bottom:-22%;z-index:0;pointer-events:none;filter:blur(6px)}
.opp-orb{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 32%, oklch(0.87 0.185 111 / .6), transparent 70%);
  filter:blur(30px);will-change:transform,opacity}
.opp-orb.o1{width:26vw;height:26vw;top:-8%;left:-8%;animation:opp-drift1 13s ease-in-out infinite}
.opp-orb.o2{width:22vw;height:22vw;bottom:-6%;right:-6%;animation:opp-drift2 16s ease-in-out infinite}
.opp-orb.o3{width:17vw;height:17vw;top:46%;left:-9%;animation:opp-drift3 10.5s ease-in-out infinite 1.5s}
.opp-orb.o4{width:23vw;height:23vw;top:-9%;right:-7%;animation:opp-drift1 14.5s ease-in-out infinite 4s}
.opp-orb.o5{width:18vw;height:18vw;bottom:-9%;left:6%;animation:opp-drift2 17.5s ease-in-out infinite 2.5s}
.opp-orb.o6{width:15vw;height:15vw;top:52%;right:-8%;animation:opp-drift3 11.5s ease-in-out infinite 3.5s}
@keyframes opp-drift1{
  0%,100%{transform:translate(0,0) scale(1);opacity:.5}
  35%{transform:translate(6vw,7vh) scale(1.1);opacity:.78}
  70%{transform:translate(-3vw,4vh) scale(.9);opacity:.36}
}
@keyframes opp-drift2{
  0%,100%{transform:translate(0,0) scale(1);opacity:.46}
  40%{transform:translate(-8vw,-6vh) scale(1.12);opacity:.72}
  75%{transform:translate(4vw,-3vh) scale(.88);opacity:.34}
}
@keyframes opp-drift3{
  0%,100%{transform:translate(0,0) scale(1);opacity:.38}
  50%{transform:translate(-6vw,6vh) scale(1.18);opacity:.64}
}
@media(prefers-reduced-motion:reduce){.opp-orb{animation:none}}

/* ---------- The four "chapters" — same grammar every time: heading+lead
   on top, one large contained photo (with a small offset accent photo
   overlapping its corner — a second real image, not a data widget) below,
   a pull-quote line, then a fuller paragraph. Tone + accent corner
   alternate between chapters instead of flipping the main photo side. ---------- */
.opp-feature{border-bottom:1px solid var(--line)}
.opp-feature.tone-elev{background:var(--bg-elev)}
/* simulator.html only: the video section is a one-off, not part of a
   repeating stack like on opplevelser.html, so the divider border below
   just showed up as a stray line right where the light pk-spec-sec pricing
   band begins. Also, .pk-spec-sec::before's seam gradient assumes the
   section above it is --bg-elev (that's what precedes it on pakker.html) —
   here it was plain --bg, one shade darker, so the gradient's start colour
   didn't match and the mismatch itself showed as a second line. Matching
   the background to --bg-elev and dropping the border fixes both. */
.opp-feature.sim-video-feature{border-bottom:none;background:var(--bg-elev)}
.opp-feature-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3rem)}
.opp-feature-head p{color:var(--muted);margin-top:.9rem;font-size:clamp(1.02rem,1rem + .3vw,1.18rem);max-width:56ch}
.opp-feature-media{position:relative}
.opp-feature-photo{border-radius:18px;overflow:hidden;aspect-ratio:20/9;box-shadow:0 30px 70px oklch(0 0 0 /.4)}
.opp-feature-photo img{width:100%;height:100%;object-fit:cover;display:block}
.opp-feature-accent{position:absolute;z-index:2;width:26%;aspect-ratio:1/1;
  border-radius:12px;overflow:hidden;box-shadow:0 20px 40px oklch(0 0 0 /.5);
  border:3px solid var(--bg)}
.tone-elev .opp-feature-accent{border-color:var(--bg-elev)}
.opp-feature-accent img{width:100%;height:100%;object-fit:cover;display:block}
.opp-feature-accent.br{right:6%;bottom:-8%}
.opp-feature-accent.bl{left:6%;bottom:-8%}
.opp-feature-accent.tl{left:6%;top:-8%}
.opp-feature-accent.tr{right:6%;top:-8%}
/* Extra clearance so the accent's protrusion never touches neighbouring text —
   bottom-anchored accents push the quote down, top-anchored ones push the
   whole media block down away from the heading above it. */
.opp-feature-quote{margin-top:1.6rem;font-weight:800;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);letter-spacing:-.02em;line-height:1.3;max-width:34ch}
.opp-feature-quote b{color:var(--accent)}
.opp-feature-tail{margin-top:1rem;color:var(--muted);max-width:64ch;font-size:.98rem}
.opp-feature-media:has(.opp-feature-accent.br),
.opp-feature-media:has(.opp-feature-accent.bl){margin-bottom:clamp(3rem,7vw,4.5rem)}
.opp-feature-media:has(.opp-feature-accent.tl),
.opp-feature-media:has(.opp-feature-accent.tr){margin-top:clamp(3rem,6vw,4rem)}
@media(max-width:700px){
  .opp-feature-photo{aspect-ratio:4/3}
  .opp-feature-accent{width:38%}
  .opp-feature-accent.br,.opp-feature-accent.bl{bottom:-6%}
  .opp-feature-accent.tl,.opp-feature-accent.tr{top:-6%}
  .opp-feature-media:has(.opp-feature-accent.br),
  .opp-feature-media:has(.opp-feature-accent.bl){margin-bottom:clamp(2.2rem,10vw,3rem)}
  .opp-feature-media:has(.opp-feature-accent.tl),
  .opp-feature-media:has(.opp-feature-accent.tr){margin-top:clamp(2.2rem,10vw,3rem)}
}

/* ============================================================
   KONTAKT PAGE (kontakt.html) — Nordic Web Agency
   Own hero device: a location ping (three rings pulsing outward from a
   fixed dot) — a sixth distinct medium after Banen's line, Gokarter's
   frames, Pakker's ring, Opplevelser's orbs and Nyheter's signal bars.
   Below the hero: the form (reuses homepage's .kontakt/.k-form grammar
   as-is), a group/event fork, a map embed, and an FAQ accordion — none
   of which exist anywhere else on the site yet. ---------- */
.kt-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  min-height:100svh;display:flex;align-items:center;justify-content:center;
  background:var(--bg-elev)}
.kt-inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center}
.kt-hero h1{max-width:17ch}
.kt-hero .lead{margin-top:1.3rem;max-width:50ch;margin-inline:auto;color:oklch(0.92 0 0);font-size:clamp(1.05rem,1rem + .5vw,1.3rem)}

.kt-ping{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none}
.kt-ping-core{position:relative;width:40px;height:40px}
.kt-ping-ring{position:absolute;inset:0;margin:auto;border:1.5px solid var(--accent);border-radius:50%;
  opacity:0;animation:kt-ping 3.6s var(--ease) infinite}
.kt-ping-ring.r2{animation-delay:1.2s}
.kt-ping-ring.r3{animation-delay:2.4s}
.kt-ping-dot{position:absolute;inset:0;margin:auto;width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 22px 5px oklch(0.87 0.185 111 /.65)}
@keyframes kt-ping{0%{transform:scale(1);opacity:.85}100%{transform:scale(15);opacity:0}}
@media(prefers-reduced-motion:reduce){.kt-ping-ring{animation:none;display:none}}

/* Group / event fork — REBUILT: was a self-contained bordered/rounded card
   floating inside the section, which didn't line up with how every other
   block on the site is built (flat, full-width, hairline-divided — see
   .banen-cta) and read as a generic "AI callout card" rather than something
   art-directed. Now it's a flat band matching .banen-cta's own grammar:
   border-top/bottom hairlines, no inset card, content sits directly in the
   normal .wrap column like every other section. */
.kt-groups{background:var(--bg-elev);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(2.6rem,6vh,3.6rem)}
.kt-groups-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.8rem}
.kt-groups-txt{max-width:50ch}
.kt-groups-txt h2{margin-bottom:.7rem;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.2rem)}
.kt-groups-txt p{color:var(--muted)}
.kt-groups-actions{display:flex;flex-wrap:wrap;gap:.8rem;flex:0 0 auto}
@media(max-width:640px){.kt-groups-inner{flex-direction:column;align-items:flex-start}}

/* Map */
.kt-map-embed{margin-top:2.2rem;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/7;box-shadow:0 30px 70px oklch(0 0 0 /.4)}
.kt-map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15) contrast(1.05)}
@media(max-width:640px){.kt-map-embed{aspect-ratio:4/5}}

/* FAQ — centered narrow column (was left-aligned at the same width as the
   wrap, which left a large dead gap on the right on wide screens — read as
   unbalanced rather than deliberate). Open/close is a real <button> +
   assets/app.js class toggle, NOT native <details>/<summary> — different
   browsers (and different Chrome versions) hide <details> content via
   incompatible internal mechanisms that silently defeat a CSS-only open/
   close animation (the icon would animate, the box itself wouldn't). The
   box's own animation is the grid-template-rows 0fr→1fr trick: no guessed
   max-height, the row animates to fit whatever height the answer needs. */
.kt-faq .sectionhead{text-align:center;max-width:640px;margin-inline:auto}
.faq-list{max-width:760px;margin-inline:auto;display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--line);padding-block:1.1rem}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{background:none;border:0;padding:0;margin:0;width:100%;cursor:pointer;text-align:left;
  font:inherit;color:var(--ink);display:flex;align-items:center;justify-content:space-between;
  gap:1rem;font-weight:700;font-size:1.02rem}
.faq-q::after{content:"+";font-family:"Space Mono",monospace;font-size:1.3rem;color:var(--accent);
  flex:0 0 auto;line-height:1;transition:transform .3s var(--ease)}
.faq-q[aria-expanded="true"]::after{transform:rotate(45deg)}
.faq-item .faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.faq-item.is-open .faq-body{grid-template-rows:1fr}
.faq-item .faq-body p{overflow:hidden;min-height:0;margin-top:.8rem;color:var(--muted);
  max-width:64ch;margin-inline:auto;font-size:.96rem;line-height:1.6;text-align:left}
@media(prefers-reduced-motion:reduce){
  .faq-item .faq-body{transition:none}
  .faq-q::after{transition:none}
}