/* LC Pulverlakk — "industrial spec-sheet editorial" design language.
   This repo is the design source of truth (the Claude Design project is archived reference).
   Breakpoint: 880px (mobile ≤ 880px).

   System: Schibsted Grotesk for headlines/body + IBM Plex Mono for labels/data.
   One layout primitive: the hairline-ruled row (index list, spec table, facts, quotes).
   Gold is reserved for CTAs, links/hover, focus, C3–C5 codes and single data highlights. */

/* ------------------------------------------------------- self-hosted fonts --
   Served from our own domain instead of Google's CDN: hotlinking fonts sends
   every visitor's IP to Google (a GDPR problem, and Norwegian sites are held to
   it) and adds a third-party round trip before first paint. Both families are
   OFL-licensed, so self-hosting is permitted. The `latin` range covers æ ø å;
   `latin-ext` is only fetched if such a glyph actually appears on the page. */

@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/schibsted-grotesk-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/schibsted-grotesk-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/schibsted-grotesk-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/schibsted-grotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/schibsted-grotesk-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/schibsted-grotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/schibsted-grotesk-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/schibsted-grotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/schibsted-grotesk-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/schibsted-grotesk-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --font-body: 'Schibsted Grotesk', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --gold: #daae30;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --sec-pad: clamp(48px, 6.5vw, 96px);
  --sec-side: clamp(14px, 2.5vw, 20px);
  /* The shared desktop "spine": every split section uses the SAME two columns
     (headings left, content right) so the interior edge lines up page-wide. */
  --spine-cols: minmax(0, 5fr) minmax(0, 7fr);
  --spine-gap: clamp(48px, 7vw, 110px);
  --rule: 1px solid rgba(255, 255, 255, 0.10);
  --rule-brown: 1px solid rgba(255, 255, 255, 0.14);
}

html, body { margin: 0; padding: 0; background: #0a0a0b; }
body { font-family: var(--font-body); color: #f5f5f7; -webkit-font-smoothing: antialiased; }
a { color: #f5f5f7; text-decoration: none; }
a:hover { color: #daae30; }
/* Keyboard focus must stay visible on every interactive element (lovpålagt —
   WCAG 2.1 AA). :focus-visible so mouse users don't see a ring on click. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}
::selection { background: #daae30; color: #0a0a0b; }
input::placeholder, textarea::placeholder { color: #6e6e73; opacity: 1; }
h1, h2 { margin: 0; }

@keyframes heroZoom { from { transform: scale(1.07); } to { transform: scale(1); } }
/* Scroll-driven hero effect (used inside the 880 block; see the @supports rule
   there). hero-px-scroll runs over [0, 1.1 x hero]: translateY% resolves
   against the wrap's own height (= hero height), so 5.5% = the JS's
   0.055 x heroH drift and 1.34 matches the JS cap. hero-ren-scroll runs over
   [0, 0.75 x hero]; the opacity stops trace the JS's quadratic 1−p² fade,
   transform stays linear. */
@keyframes hero-px-scroll {
  from { transform: scale(1.18) translateY(0); }
  to   { transform: scale(1.34) translateY(5.5%); }
}
@keyframes hero-ren-scroll {
  0%   { transform: translateY(0); opacity: 1; }
  25%  { opacity: 0.9375; }
  50%  { opacity: 0.75; }
  75%  { opacity: 0.4375; }
  100% { transform: translateY(calc(var(--hero-h, 76svh) * -0.154)); opacity: 0; }
}
@keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes heroGlint { from { background-position: 100% 0, 0 0; } to { background-position: 0% 0, 0 0; } }
/* Mobile dropdown menu: panel wipes down, items spring up with a defocus blur */
@keyframes mmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmFadeOut { to { opacity: 0; } }
@keyframes mmIn { from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-10px); } to { opacity: 1; clip-path: inset(0 0 -90px 0); transform: none; } }
@keyframes mmOut { to { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(-10px); } }
@keyframes mmItem { from { opacity: 0; transform: translateY(24px) scale(0.98); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes mmItemOut { to { opacity: 0; transform: translateY(24px) scale(0.98); filter: blur(8px); } }

.page { background: #0a0a0b; padding: clamp(10px, 1.5vw, 20px); }
.wrap1180 { max-width: 1180px; margin: 0 auto; }
section[id] { scroll-margin-top: 84px; }

/* --------------------------------------------------------- scroll reveal -- */
/* Elements tagged data-reveal rise 12px and fade in the first time they enter
   the viewport (IntersectionObserver in main.js). Stagger siblings that appear
   together with data-reveal-delay (ms, capped at 600). No blur, no bounce. */
[data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.33, 0.66, 0.3, 1), transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: opacity, transform;
}
[data-reveal].ss-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --------------------------------------------- shared section furniture -- */
.sec-head { margin: 0 0 clamp(32px, 5vw, 56px); }
.sec-h2 {
  font-size: clamp(34px, 5.2vw, 64px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.02; margin: 0; text-align: left; text-wrap: balance;
}
.sec-sub { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 18px 0 0; max-width: 560px; text-wrap: pretty; }
.gold { color: var(--gold); }

/* Interior pages are type-led: no photo hero, just headline + one lead line.
   The photo hero stays exclusive to the home page so it keeps its impact. */
.page-head { padding: clamp(52px, 8vw, 104px) var(--sec-side) clamp(28px, 4vw, 44px); }
.page-h1 {
  font-size: clamp(36px, 6vw, 72px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.02; margin: 0; max-width: 16ch; text-wrap: balance;
}
.page-lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6; color: var(--ink-2); margin: 22px 0 0; max-width: 620px; text-wrap: pretty; }

/* Closing call to action, repeated at the foot of every page. */
.cta-band { padding: var(--sec-pad) var(--sec-side); border-top: var(--rule); }
.cta-h2 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 700; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0; max-width: 20ch; text-wrap: balance;
}
.cta-p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 18px 0 30px; max-width: 520px; text-wrap: pretty; }

/* --------------------------------------------------------------- buttons -- */
/* Generic button primitives. These used to live inside the hero block because
   the hero was their only caller; now that every page has CTAs they belong here.
   inline-block so padding holds outside a flex container (inside .hero-ctas the
   flex item is blockified anyway, so the hero is unchanged). */
.btn { display: inline-block; padding: 15px 32px; font-weight: 600; font-size: 16px; border-radius: 980px; }
.btn-gold { background: #b8922a; color: #fff; }
.btn-gold:hover { background: #cda32f; color: #fff; }
.btn-glass {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #f5f5f7;
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.btn-outline { border: 1px solid rgba(255, 255, 255, 0.28); color: #f5f5f7; padding: 14px 31px; }
.btn-outline:hover { border-color: rgba(255, 255, 255, 0.55); color: #fff; }

/* ---------------------------------------------------------------- banner -- */
.banner-wrap {
  margin: calc(clamp(10px, 1.5vw, 20px) * -1) calc(clamp(10px, 1.5vw, 20px) * -1) 0;
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease;
}
.banner-clip { min-height: 0; overflow: hidden; }
.banner {
  position: relative; background: #453612; color: #f7f3ea; font-size: 14px; line-height: 1.4; font-weight: 500;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 12px;
  padding: 12px 20px; text-align: center;
}
.banner-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.banner-close {
  display: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  width: 44px; height: 44px; align-items: center; justify-content: center; color: rgba(247,243,234,0.75);
}

/* ------------------------------------------------------------------- nav -- */
#nav-spacer { height: 0; }
.site-nav {
  position: sticky; top: 0; z-index: 200;
  margin: 0 calc(clamp(10px, 1.5vw, 20px) * -1);
  padding: 12px clamp(18px, 3vw, 40px);
  background: rgba(10, 10, 11, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
  display: flex; align-items: center; justify-content: space-between;
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), margin 0.45s cubic-bezier(0.32, 0.72, 0, 1), padding 0.45s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.45s cubic-bezier(0.32, 0.72, 0, 1), background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}
.site-nav.stuck {
  top: 12px; margin: 0; padding: 12px 18px;
  background: rgba(22, 22, 23, 0.72);
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.site-nav.nav-hidden { transform: translateY(-140%); }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 36px; height: 36px; border-radius: 11px; display: block; }
.brand-name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: #f5f5f7; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 15px; font-weight: 500; }
.nav-cta { background: #b8922a; color: #fff; padding: 10px 22px; font-weight: 600; border-radius: 980px; }
.nav-cta:hover { background: #cda32f; color: #fff; }
/* Current page: full-white label with a small gold dot floated clear under it
   (echoes the gold dots on the C1-C5 scale). Set with a static
   aria-current="page" in each page's copy of the shell, so it needs no JS and
   is announced to screen readers rather than being visual-only. */
.nav-link { position: relative; }
.nav-link[aria-current="page"] { color: #f5f5f7; }
.nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}
.mm-link[aria-current="page"] { color: var(--gold); }
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; align-items: center;
}
.burger-line { display: block; width: 16px; height: 2px; background: #f5f5f7; border-radius: 2px; transition: transform 0.38s cubic-bezier(0.2, 1, 0.3, 1); }
/* Two bars morph into an X while the menu is open (gap 5px + line 2px → 3.5px shift) */
body[data-menu-open="1"] .nav-burger .burger-line:first-child { transform: translateY(3.5px) rotate(45deg); }
body[data-menu-open="1"] .nav-burger .burger-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger-line { transition: none !important; } }

/* ----------------------------------------------------------- mobile menu -- */
/* Full-width dropdown panel under the nav. Opens with a downward clip-path wipe
   while the links spring up staggered with a defocus blur; the CTA lands last.
   Closing plays the sequence backwards (CTA first), then the panel wipes shut.
   Anchored to the live nav box in main.js so it lines up whether the nav is the
   in-flow bar (top of page) or the floating pill (scrolled). */
body.menu-lock { overflow: hidden; }

.menu-backdrop {
  position: fixed; inset: 0; z-index: 140;
  background: rgba(0, 0, 0, 0.42);
  animation: mmFade 0.3s ease both;
  touch-action: none;
}
.menu-backdrop[hidden] { display: none !important; }
.menu-backdrop.mm-out { animation: mmFadeOut 0.4s ease both; }

/* Flush-at-top state: full-bleed under the in-flow nav. Solid #0a0a0b so it reads
   as a seamless extension of the (transparent-over-#0a0a0b) header — no frosted
   tint, no side rules. Just a bottom hairline like the nav's own. */
.mobile-menu {
  position: fixed; z-index: 150; box-sizing: border-box;
  background: #0a0a0b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  padding: 8px clamp(18px, 3vw, 40px) 16px;
  animation: mmIn 0.55s cubic-bezier(0.3, 0.9, 0.2, 1) both;
  transform-origin: top center;
}
.mobile-menu[hidden] { display: none !important; }
/* Floating rounded card — used when the nav is the scrolled pill (small gap set in
   JS). Frosted to match the pill nav; full border + radius since it's detached. */
.mobile-menu.mm-float {
  background: rgba(18, 18, 20, 0.9);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px; padding: 10px 16px 14px;
}
.mm-links { display: flex; flex-direction: column; }
.mm-link {
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: #f5f5f7;
  padding: 15px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mm-links .mm-link:last-child { border-bottom: none; }
.mm-link:hover { color: #daae30; }
.mm-cta {
  margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #b8922a; color: #fff; font-weight: 600; font-size: 16px;
  padding: 15px; border-radius: 980px;
}
.mm-cta:hover { background: #cda32f; color: #fff; }

/* open: links spring up staggered, CTA (direct child) lands last */
.mobile-menu a { animation: mmItem 0.7s cubic-bezier(0.3, 1.4, 0.36, 1) both; animation-delay: 0.05s; }
.mobile-menu .mm-links a:nth-child(2) { animation-delay: 0.11s; }
.mobile-menu .mm-links a:nth-child(3) { animation-delay: 0.17s; }
.mobile-menu .mm-links a:nth-child(4) { animation-delay: 0.23s; }
.mobile-menu > a { animation-delay: 0.3s; }

/* close = open reversed: items sink in reverse order (CTA first), panel wipes shut */
.mobile-menu.mm-out { animation: mmOut 0.42s cubic-bezier(0.8, 0, 0.7, 0.1) 0.22s both; }
.mobile-menu.mm-out a { animation: mmItemOut 0.38s cubic-bezier(0.64, 0, 0.7, -0.4) both; animation-delay: 0.2s; }
.mobile-menu.mm-out .mm-links a:nth-child(2) { animation-delay: 0.15s; }
.mobile-menu.mm-out .mm-links a:nth-child(3) { animation-delay: 0.1s; }
.mobile-menu.mm-out .mm-links a:nth-child(4) { animation-delay: 0.05s; }
.mobile-menu.mm-out > a { animation-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu a, .menu-backdrop { animation: none !important; }
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; overflow: hidden;
  margin: 0 calc(clamp(10px, 1.5vw, 20px) * -1);
  min-height: clamp(540px, 88svh, 880px);
  background: #0a0a0b; display: flex;
  transition: min-height 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.hero-media {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%; z-index: 1;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(84% 74% at 71% 61%, rgba(0,0,0,1.0000) 0.00%, rgba(0,0,0,0.9928) 5.00%, rgba(0,0,0,0.9720) 10.00%, rgba(0,0,0,0.9393) 15.00%, rgba(0,0,0,0.8960) 20.00%, rgba(0,0,0,0.8438) 25.00%, rgba(0,0,0,0.7840) 30.00%, rgba(0,0,0,0.7183) 35.00%, rgba(0,0,0,0.6480) 40.00%, rgba(0,0,0,0.5747) 45.00%, rgba(0,0,0,0.5000) 50.00%, rgba(0,0,0,0.4252) 55.00%, rgba(0,0,0,0.3520) 60.00%, rgba(0,0,0,0.2817) 65.00%, rgba(0,0,0,0.2160) 70.00%, rgba(0,0,0,0.1562) 75.00%, rgba(0,0,0,0.1040) 80.00%, rgba(0,0,0,0.0608) 85.00%, rgba(0,0,0,0.0280) 90.00%, rgba(0,0,0,0.0072) 95.00%, rgba(0,0,0,0.0000) 100.00%), linear-gradient(to top, rgba(0,0,0,0.0000) 0.00%, rgba(0,0,0,0.0197) 2.33%, rgba(0,0,0,0.0741) 4.67%, rgba(0,0,0,0.1562) 7.00%, rgba(0,0,0,0.2593) 9.33%, rgba(0,0,0,0.3762) 11.67%, rgba(0,0,0,0.5000) 14.00%, rgba(0,0,0,0.6238) 16.33%, rgba(0,0,0,0.7407) 18.67%, rgba(0,0,0,0.8438) 21.00%, rgba(0,0,0,0.9259) 23.33%, rgba(0,0,0,0.9803) 25.67%, rgba(0,0,0,1.0000) 28.00%, #000 100%);
  mask-image: radial-gradient(84% 74% at 71% 61%, rgba(0,0,0,1.0000) 0.00%, rgba(0,0,0,0.9928) 5.00%, rgba(0,0,0,0.9720) 10.00%, rgba(0,0,0,0.9393) 15.00%, rgba(0,0,0,0.8960) 20.00%, rgba(0,0,0,0.8438) 25.00%, rgba(0,0,0,0.7840) 30.00%, rgba(0,0,0,0.7183) 35.00%, rgba(0,0,0,0.6480) 40.00%, rgba(0,0,0,0.5747) 45.00%, rgba(0,0,0,0.5000) 50.00%, rgba(0,0,0,0.4252) 55.00%, rgba(0,0,0,0.3520) 60.00%, rgba(0,0,0,0.2817) 65.00%, rgba(0,0,0,0.2160) 70.00%, rgba(0,0,0,0.1562) 75.00%, rgba(0,0,0,0.1040) 80.00%, rgba(0,0,0,0.0608) 85.00%, rgba(0,0,0,0.0280) 90.00%, rgba(0,0,0,0.0072) 95.00%, rgba(0,0,0,0.0000) 100.00%), linear-gradient(to top, rgba(0,0,0,0.0000) 0.00%, rgba(0,0,0,0.0197) 2.33%, rgba(0,0,0,0.0741) 4.67%, rgba(0,0,0,0.1562) 7.00%, rgba(0,0,0,0.2593) 9.33%, rgba(0,0,0,0.3762) 11.67%, rgba(0,0,0,0.5000) 14.00%, rgba(0,0,0,0.6238) 16.33%, rgba(0,0,0,0.7407) 18.67%, rgba(0,0,0,0.8438) 21.00%, rgba(0,0,0,0.9259) 23.33%, rgba(0,0,0,0.9803) 25.67%, rgba(0,0,0,1.0000) 28.00%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.hero-img-wrap {
  position: absolute; inset: 0;
  transform: scaleX(-1) scale(1.18);
  transform-origin: 50% 45%;
}
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 44% 42%;
  filter: brightness(0.9) contrast(1.05) saturate(1.03);
  animation: heroZoom 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-overlay { position: absolute; inset: 0; background: rgba(10, 10, 11, 0.400); }
.hero-scrim { position: absolute; inset: 0; background: transparent; }
/* Left-side text scrim, above the masked photo (unmasked) and behind the text,
   so the headline sits on a dark base and fades to clear before the worker.
   Tinted to the page/section background #0a0a0b = rgb(10,10,11) (not pure black)
   so the hero's dark areas match the section below it and blend seamlessly. */
.hero-scrim-left {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right,
    rgba(10, 10, 11, 0.72) 0%,
    rgba(10, 10, 11, 0.58) 28%,
    rgba(10, 10, 11, 0.30) 50%,
    rgba(10, 10, 11, 0.08) 70%,
    rgba(10, 10, 11, 0) 84%);
}
/* Bottom scrim, tinted to the section background, that melts the bottom of the
   photo into the section below over a long, gentle fade (no visible edge). */
.hero-scrim-bottom {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 10, 11, 1) 0%,
    rgba(10, 10, 11, 0.85) 7%,
    rgba(10, 10, 11, 0.45) 17%,
    rgba(10, 10, 11, 0.15) 28%,
    rgba(10, 10, 11, 0) 40%);
}
.hero-content {
  position: relative; z-index: 3; width: 100%; max-width: 1080px; margin: 0 auto;
  box-sizing: border-box; padding: 0 clamp(18px, 3vw, 40px) clamp(96px, 16vh, 180px);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-text { margin: auto 0 0; max-width: 800px; padding-top: clamp(48px, 8vw, 96px); }
.hero-h1 {
  font-size: clamp(30px, 5.8vw, 68px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 22px;
  animation: heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.hero-h1-lead { display: block; width: max-content; max-width: 100%; white-space: nowrap; }
.hero-r-lead { display: inline-block; }
.hero-p {
  font-size: clamp(16px, 2.2vw, 20px); line-height: 1.55; color: #fff;
  max-width: 560px; margin: 0 0 32px; text-wrap: pretty;
  animation: heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 0;
  animation: heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
/* Mobile "Ren" hero content — matches the Claude Design mobile preview.
   Hidden on desktop; the 880px media query hides the Foto block and shows this. */
.hero-ren { display: none; }
.hero-r-h1 {
  font-size: clamp(33px, 5.6vw, 76px); line-height: 1.03; font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 26px; text-wrap: balance;
  animation: heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.hero-r-p {
  font-size: clamp(16px, 2.2vw, 19px); line-height: 1.6; color: #fff;
  max-width: 500px; margin: 0 0 36px; text-wrap: pretty;
  animation: heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
/* The block is bottom-pinned, so widening this gap between the paragraph and the
   buttons lifts the headline + intro upward while the buttons stay in place. */
.hero-r-ctas {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(125px, 22svh, 170px);
  animation: heroUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

/* Headline "shiny metal" — scoped to the lead word "Overflatebehandling" ONLY
   (the .hero-h1-lead / .hero-r-lead spans). The rest of each H1 stays solid
   #f5f5f7, inherited — the user returned it to white 2026-07-23.
   The whole treatment is POLISHED GOLD (user asked to make the shine golden,
   2026-07-24 — earlier a gold streak over a SILVER base read weak and was
   rejected, so this time the base itself is gold, on-brand with the CTA gold).
   Base (bottom layer): a champagne→rich-gold→champagne fade run diagonally
   (128deg, leaning the same way as the glint) for a metallic sheen.
   Glint (top layer): a narrow 108deg bright-gold streak with warm dark-bronze
   fringes (anisotropic highlight) that sweeps left→right CONSTANTLY — as one
   pass exits the right, the next enters from the left with no rest (user wanted
   it continuous, 2026-07-24, reversing the earlier rest-between-passes).
   heroGlint loops 100%→0% linearly in 1.2s: at both endpoints the visible
   glyphs map to the gradient's transparent tails (bright core off-word), so
   the wrap is seamless — no flash, no gap.
   The lead spans are sized to fit the word (block + max-content on desktop,
   inline-block on mobile) so the gradient and glint scope to the glyphs, not
   a full-width box. Reduced-motion / pre-delay state parks the streak off-word
   at background-position 115%, leaving just the steel fade.
   No text-shadow on these headlines — it would show through the transparent fill. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-h1-lead, .hero-r-lead {
    background-image:
      linear-gradient(108deg, transparent 0%, transparent 40%, rgba(40, 28, 6, 0.2) 45.5%, rgba(255, 232, 150, 0.5) 48%, rgba(255, 243, 194, 0.98) 49.4%, rgba(255, 243, 194, 0.98) 50.6%, rgba(255, 232, 150, 0.5) 52%, rgba(40, 28, 6, 0.2) 54.5%, transparent 60%, transparent 100%),
      linear-gradient(128deg, #f4e4b8 0%, #e3c884 30%, #c19a3c 50%, #d8b45e 62%, #edd694 88%, #f2e0a8 100%);
    background-size: 250% 100%, 100% 100%;
    background-position: 115% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* The tight H1 line-heights (1.02/1.03) make the span's box shorter than the
       glyph ink, and background-clip:text paints nothing outside the box — the
       "g" descender rendered chopped. Padding extends the paint box over the
       full ascender/descender range; the negative margins hand the space back,
       so layout is untouched. Only glyph areas paint, so the bigger box is
       otherwise invisible. Keep these two lines paired. */
    padding: 0.2em 0;
    margin: -0.2em 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-h1-lead, .hero-r-lead {
      animation: heroGlint 1.2s linear 1.4s infinite;
    }
  }
}

/* ------------------------------------------- home: gateway links (oversikt) -- */
/* The home page routes rather than explains. Desktop: each link is a full-width
   hairline-topped row (title | text | arrow) so the left-aligned type composes
   across the whole container. Bigger in type and without the mono numbering, so
   it never reads as the Tjenester index repeated. Mobile keeps the stacked
   large-type links (arrow floats to the row's top right, reset in 880px block). */
.oversikt { padding: var(--sec-pad) var(--sec-side); }
.ov-list { display: grid; gap: 0; border-bottom: var(--rule); }
.ov-item {
  position: relative;
  display: grid; grid-template-columns: var(--spine-cols);
  gap: 8px var(--spine-gap); align-items: baseline;
  border-top: var(--rule); padding: clamp(26px, 3.5vw, 40px) 0;
}
.ov-title {
  display: block; font-size: clamp(23px, 3vw, 32px); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; color: #f5f5f7;
  transition: color 0.25s ease;
}
/* Arrow pinned to the row's right edge (works both as a sibling cell on the
   home rows and nested inside the title on the 404 rows). */
.ov-arrow {
  position: absolute; right: 0; top: calc(clamp(26px, 3.5vw, 40px) + 4px);
  color: var(--ink-3); font-size: 22px;
  transition: transform 0.25s ease, color 0.25s ease;
}
.ov-item:hover .ov-title { color: var(--gold); }
.ov-item:hover .ov-arrow { color: var(--gold); transform: translateX(5px); }
.ov-text {
  display: block; font-size: 16px; line-height: 1.6; color: var(--ink-2);
  max-width: 580px; text-wrap: pretty;
}

/* ----------------------------------------- tjenester: numbered index list -- */
.tjenester { padding: var(--sec-pad) var(--sec-side); }
.index-list { border-bottom: var(--rule); }
.irow {
  display: grid; grid-template-columns: var(--spine-cols); gap: 8px var(--spine-gap);
  border-top: var(--rule); padding: 30px 0; align-items: baseline;
}
.irow-left { display: flex; gap: 24px; align-items: baseline; }
.irow-num {
  flex: 0 0 72px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: var(--ink-3); transition: color 0.5s ease;
}
/* The numbers light gold in sequence as the list scrolls into view (staggered
   in main.js), not on hover — the old hover gold stuck after a tap on touch. */
.irow.lit .irow-num { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .irow-num { transition: none; }
}
.irow-title { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.irow-text { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 640px; text-wrap: pretty; }

/* ------------------------------------ klasser: C1–C5 corrosivity scale -- */
/* A low→high severity scale: one hairline axis with five nodes (code/level/
   note). Desktop = five across sharing a horizontal axis; mobile = a vertical
   rail (see the 880px block). A scale, not another vertical spec list. */
.klasser { padding: var(--sec-pad) var(--sec-side); }
.cscale { max-width: 1180px; }
.cscale-track {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 clamp(20px, 3vw, 36px);
}
.cscale-track::before {                 /* the axis, level with the node dots */
  content: ""; position: absolute; top: 13px; left: 6%; right: 6%;
  height: 1px; background: rgba(255, 255, 255, 0.16);
}
.cnode { position: relative; text-align: center; padding-top: 30px; }
.cnode-dot {
  position: absolute; top: 13px; left: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  background: #0a0a0b; border: 1.5px solid var(--ink-3); z-index: 1;
}
.cnode.hot .cnode-dot { background: var(--gold); border-color: var(--gold); }
.cnode-code { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 500; color: var(--ink-2); }
.cnode.hot .cnode-code { color: var(--gold); }
.cnode-level { display: block; font-size: 15px; font-weight: 600; margin: 10px 0 8px; }
.cnode-env { margin: 0 auto; max-width: 190px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cscale-ends {
  display: flex; justify-content: space-between; margin-top: 30px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
}

/* --------------------------------------------------------------- reviews -- */
.reviews { padding: var(--sec-pad) 0; }
.rev-head { padding: 0 clamp(14px, 2.5vw, 20px); text-align: center; margin-bottom: 32px; }
.rev-h2 {
  font-size: clamp(34px, 5vw, 46px); font-weight: 700; letter-spacing: -0.025em;
  line-height: 1.06; margin: 0; text-wrap: balance;
}
.rev-meta {
  max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 2.5vw, 20px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 40px;
}
.rev-score-row { display: flex; align-items: center; gap: 20px; }
.rev-score { font-size: clamp(40px, 6vw, 54px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.rev-stars-col { display: flex; flex-direction: column; gap: 7px; }
.stars { display: flex; gap: 3px; }
.rev-count { font-size: 14.5px; color: #a1a1a6; }
.btn-google {
  display: inline-flex; align-items: center; gap: 8px;
  background: #b8922a; color: #fff; padding: 14px 28px;
  font-weight: 600; font-size: 16px; border-radius: 980px; white-space: nowrap;
}
.btn-google:hover { background: #cda32f; color: #fff; }
.marquee {
  margin-top: 28px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; padding: 6px 0; animation: lc-marquee 60s linear infinite; }
/* Pause-on-hover only for real pointers. On touch, :hover sticks after a tap
   and would freeze the marquee ("it just stops"), so gate it to hover devices. */
@media (hover: hover) and (pointer: fine) {
  .marquee-track:hover { animation-play-state: paused; }
}
.rev {
  margin: 0 20px 0 0; flex: 0 0 clamp(280px, 78vw, 350px); box-sizing: border-box;
  background: #161618; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 26px;
  padding: clamp(24px, 3vw, 30px) clamp(22px, 3vw, 28px);
  display: flex; flex-direction: column; gap: 16px;
}
.rev-quote { margin: 0; font-size: 15.5px; line-height: 1.6; color: #f5f5f7; text-wrap: pretty; }
.rev-who { margin-top: auto; display: flex; align-items: center; gap: 7px; }
.rev-name { font-weight: 600; font-size: 15px; }
.rev-src { font-size: 12.5px; color: #86868b; }

/* ---------------------------------------------------------------- anlegg -- */
.anlegg {
  background: #241d10;
  margin: 0 calc(clamp(10px, 1.5vw, 20px) * -1);
  padding: var(--sec-pad) clamp(18px, 4vw, 48px);
}
.anlegg-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(36px, 5vw, 64px); align-items: center;
}
.anlegg-h2 {
  font-size: clamp(34px, 5vw, 48px); line-height: 1.03; font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 24px; text-wrap: balance;
}
.anlegg-p { font-size: 18px; line-height: 1.6; color: #c9bfa3; margin: 0 0 18px; text-wrap: pretty; }
.anlegg-p-last { margin-bottom: 34px; }
.btn-light {
  display: inline-block; background: #f5f5f7; color: #1d1707;
  padding: 15px 30px; font-weight: 600; font-size: 16px; border-radius: 980px;
}
.btn-light:hover { background: #daae30; color: #1d1707; }
.anlegg-side { display: flex; flex-direction: column; gap: 24px; }
.anlegg-photo { width: 100%; border-radius: 14px; display: block; object-fit: cover; }
/* Facts as a compact 2×2 ledger (not a vertical list) — supporting metadata to
   the pitch. Becomes a photo-split when a real facility image is added. */
/* Rules sit UNDER each fact (user, 2026-08-01: "put the lines under, not
   over"), and there is no big closing rule for the ledger as a whole. */
.anlegg-facts {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.5vw, 28px) clamp(28px, 4vw, 48px);
}
.afact { border-bottom: var(--rule-brown); padding: 4px 0 18px; }
.afact-tag {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: #c9bfa3; margin-bottom: 8px;
}
.afact-text { font-size: 15px; line-height: 1.55; color: #ddd3b8; text-wrap: pretty; overflow-wrap: break-word; }

/* ------------------- baerekraft points (on hva-er-pulverlakkering.html) -- */
/* Four rule-free prose points in the right column of a .forklaring split. Kept
   deliberately unruled so the hairline rows stay unique to the 01-06 index and
   the home gateway. */
.b-points { display: grid; gap: clamp(24px, 3vw, 34px); }
.bpoint-title { font-size: clamp(18px, 2vw, 21px); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.bpoint-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); max-width: 640px; text-wrap: pretty; }

/* --------------------------------------------------------------- kontakt -- */
.kontakt { padding: var(--sec-pad) var(--sec-side); }
.kontakt-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: clamp(36px, 5vw, 64px); align-items: start;
}
.kontakt-h2 {
  font-size: clamp(32px, 4vw, 48px); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 22px; text-wrap: balance;
}
.kontakt-p { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 440px; text-wrap: pretty; }
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.field input, .field textarea {
  background: #161618; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px;
  padding: 14px 16px; color: #f5f5f7; font-family: inherit; font-size: 16px;
  width: 100%; box-sizing: border-box; outline: none;
}
.field input:focus, .field textarea:focus { border-color: #daae30; }
.field textarea { resize: vertical; }
.form-row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn-submit {
  background: #b8922a; color: #fff; border: none; padding: 15px 32px;
  font-weight: 600; font-size: 16px; border-radius: 980px; cursor: pointer; font-family: var(--font-body);
}
.btn-submit:hover { background: #cda32f; }
.btn-submit:disabled { opacity: 0.7; cursor: default; }
.btn-submit:disabled:hover { background: #b8922a; }
.form-note { font-size: 13px; color: var(--ink-3); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin: 0; font-size: 15px; line-height: 1.5; }
.form-status.ok { color: #daae30; font-weight: 600; }
.form-status.err { color: #a1a1a6; }
.form-status a { color: #daae30; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------ interior pages: prose, flow, details -- */
/* Explainer prose. Measure is held near 65 characters so the longer educational
   sections stay readable rather than running the full 1180px. Desktop: the H2
   takes the left column and the prose (or point list) the right, the editorial
   split, so these sections fill the container instead of a lone left strip. */
.forklaring { padding: var(--sec-pad) var(--sec-side); }
.forklaring .wrap1180 {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(48px, 7vw, 110px); align-items: start;
}
.forklaring .sec-head { margin: 0; }
/* Split headings keep the FULL section heading scale even though long words
   stack in the narrow column — the user tried a smaller size (42px) and
   rejected it 2026-08-01: "i liked the size before". Do not shrink again. */
.prose { max-width: 720px; }
.prose-p { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 20px; text-wrap: pretty; }
.prose-p:last-child { margin-bottom: 0; }
.inline-link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.inline-link:hover { color: #e9c95e; }
.qlist { margin: 0 0 20px; padding-left: 20px; font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.qlist li { margin-bottom: 8px; }

/* The process: a left-to-right run of named stages joined by arrows. A different
   shape from both the numbered index and the C1–C5 axis, so the three sections
   never read as the same list repeated with new words. */
.prosess { padding: var(--sec-pad) var(--sec-side); }
.flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 2.4vw, 30px);
}
.fstep { position: relative; padding-right: 20px; }
.fstep::after { content: "→"; position: absolute; right: 0; top: 0; color: var(--ink-3); font-size: 15px; }
.fstep:last-child { padding-right: 0; }
.fstep:last-child::after { content: none; }
.fstep-name { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 9px; }
.fstep-text { display: block; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* Contact details as a small spec table beside the form. */
.ki-list { border-bottom: var(--rule); max-width: 460px; }
.ki-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; border-top: var(--rule); padding: 16px 0; align-items: baseline; }
.ki-label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.ki-value { font-size: 16px; line-height: 1.6; }
.ki-link { color: var(--gold); }
.ki-link:hover { color: #e9c95e; }

/* Privacy policy and other long-form legal text. */
.legal { padding: var(--sec-pad) var(--sec-side); }
.legal-h2 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 700; letter-spacing: -0.02em; margin: 42px 0 14px; }
.legal .prose > .legal-h2:first-child { margin-top: 0; }

.nf-tel { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: clamp(32px, 5vw, 48px) 0 0; }
.banner-here { color: rgba(247, 243, 234, 0.72); }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  background: #111113; border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin: 0 calc(clamp(10px, 1.5vw, 20px) * -1) calc(clamp(10px, 1.5vw, 20px) * -1);
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 48px) 26px;
}
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.foot-brand-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.foot-brand-name { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.foot-desc { font-size: 14px; line-height: 1.6; color: #86868b; }
.foot-label {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px;
}
.foot-list { display: flex; flex-direction: column; gap: 9px; font-size: 15px; }
.foot-person { font-weight: 600; }
.foot-tel { color: #daae30; font-weight: 600; }
.foot-mail { color: #a1a1a6; }
.foot-mail:hover { color: #daae30; }
.foot-addr { color: #a1a1a6; }
.foot-nav { color: #a1a1a6; }
.foot-nav:hover { color: #daae30; }
.foot-legal { color: #86868b; }
.foot-legal:hover { color: #daae30; }
.soc-row { display: flex; gap: 12px; }
.soc {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 980px;
  background: rgba(255, 255, 255, 0.08); color: #f5f5f7;
}
.soc:hover { background: rgba(218, 174, 48, 0.2); color: #daae30; }
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 44px; padding-top: 22px;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 10px 24px; font-size: 13px; color: #86868b; font-weight: 500;
}
.brand-link { color: #daae30; font-weight: 500; }
.brand-link:hover { color: #e9c95e; }

/* ==================================================== mobile (<= 880px) == */
@media (max-width: 880px) {
  .banner { font-size: 12.5px; padding: 8px 44px; }
  .banner-close { display: flex; }
  .banner-wrap.banner-closed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }

  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .site-nav {
    position: relative; top: auto;
    padding: 12px clamp(18px, 3vw, 40px);
    transition: none;
  }
  .site-nav.nav-fixed {
    position: fixed; top: 0; left: 0; right: 0; margin: 0;
    background: #0a0a0b;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
  .site-nav.nav-fixed.pill {
    top: 12px; left: clamp(10px, 1.5vw, 20px); right: clamp(10px, 1.5vw, 20px);
    padding: 12px 18px;
    background: rgba(22, 22, 23, 0.72);
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  .site-nav.nav-fixed.nav-hidden { transform: translateY(calc(-100% - 16px)); }
  .site-nav.nav-anim {
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), top 0.45s cubic-bezier(0.32, 0.72, 0, 1), left 0.45s cubic-bezier(0.32, 0.72, 0, 1), right 0.45s cubic-bezier(0.32, 0.72, 0, 1), padding 0.45s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.45s cubic-bezier(0.32, 0.72, 0, 1), background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
  }

  /* --hero-h is the single source for the hero's height AND the scroll-effect
     keyframes below (the content lift is a fraction of it). */
  .hero { --hero-h: calc(clamp(460px, 76svh, 720px) + var(--hero-extra, 0px)); min-height: var(--hero-h); }
  .hero-media {
    width: 100%;
    -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 7%, rgba(0,0,0,0.78) 14%, #000 22%);
    mask-image: linear-gradient(#000, #000), linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 7%, rgba(0,0,0,0.78) 14%, #000 22%);
  }
  /* will-change keeps the wrap on its own compositor layer: without it Safari
     re-rasterizes the scaled full-viewport photo on every scroll-driven
     transform write (the Chrome-smooth/Safari-janky delta). Mobile only —
     desktop never animates this element. */
  .hero-img-wrap { transform: scale(1.18); will-change: transform; }
  .hero-img { object-position: 80% 30%; }
  .hero-scrim { background: linear-gradient(to bottom, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.18) 18%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.0000) 34.00%, rgba(0,0,0,0.0080) 36.86%, rgba(0,0,0,0.0305) 39.71%, rgba(0,0,0,0.0649) 42.57%, rgba(0,0,0,0.1090) 45.43%, rgba(0,0,0,0.1603) 48.29%, rgba(0,0,0,0.2165) 51.14%, rgba(0,0,0,0.2750) 54.00%, rgba(0,0,0,0.3335) 56.86%, rgba(0,0,0,0.3897) 59.71%, rgba(0,0,0,0.4410) 62.57%, rgba(0,0,0,0.4851) 65.43%, rgba(0,0,0,0.5195) 68.29%, rgba(0,0,0,0.5420) 71.14%, rgba(0,0,0,0.5500) 74.00%, rgba(0,0,0,0.55) 100%), linear-gradient(to right, rgba(0,0,0,0.6200) 0.00%, rgba(0,0,0,0.6110) 5.57%, rgba(0,0,0,0.5857) 11.14%, rgba(0,0,0,0.5468) 16.71%, rgba(0,0,0,0.4971) 22.29%, rgba(0,0,0,0.4392) 27.86%, rgba(0,0,0,0.3760) 33.43%, rgba(0,0,0,0.3100) 39.00%, rgba(0,0,0,0.2440) 44.57%, rgba(0,0,0,0.1808) 50.14%, rgba(0,0,0,0.1229) 55.71%, rgba(0,0,0,0.0732) 61.29%, rgba(0,0,0,0.0343) 66.86%, rgba(0,0,0,0.0090) 72.43%, rgba(0,0,0,0.0000) 78.00%); }
  .hero-scrim-left { display: none; }
  .hero-scrim-bottom { display: none; }
  .hero-content { max-width: 1080px; padding-bottom: 16px; }
  .hero-text { display: none; }
  .hero-ren { display: block; max-width: 640px; margin: auto 0 0; padding-top: clamp(48px, 8vw, 96px); will-change: transform, opacity; }

  /* Scroll-driven version of the hero effect (Safari 26+/Chrome 115+). Runs on
     the COMPOSITOR thread, so it stays perfectly smooth at 120Hz no matter what
     the main thread is doing — Safari on ProMotion iPhones janked on the JS
     version even after it was rAF-coalesced. main.js detects support and skips
     its own hero writes; browsers without support keep the JS fallback. The
     timeline is the hero's own exit from the viewport, so the pacing is
     hero-relative by construction, same as the JS. Curves are slope-identical
     to the JS fallback across the visible range (the JS zoom nominally tops
     out at 1.34 at 1.1×heroH; scale 1.3255 at 1.0×heroH is the same line, and
     past 1.0×heroH the hero is off screen, so the tail was never visible). */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      /* scroll(root), not a view() timeline: the JS keyed on absolute scrollY
         from 0, and a view timeline would only start once the hero's top edge
         passes the banner+nav (~106px late). Length ranges off --hero-h give
         the exact JS pacing: content done at 0.75 x hero, photo at 1.1 x hero. */
      .hero-img-wrap {
        animation: hero-px-scroll linear both;
        animation-timeline: scroll(root block);   /* must follow the shorthand: it resets timeline/range */
        animation-range: 0px calc(var(--hero-h, 76svh) * 1.1);
      }
      .hero-ren {
        animation: hero-ren-scroll linear both;
        animation-timeline: scroll(root block);
        animation-range: 0px calc(var(--hero-h, 76svh) * 0.75);
      }
    }
  }

  .irow { display: block; padding: 22px 0; }
  .irow-left { gap: 14px; }
  .irow-num { flex-basis: 44px; }
  .irow-text { margin-top: 6px; padding-left: 58px; }

  /* The desktop-only split stacks back to a single column on mobile. */
  .forklaring .wrap1180 { display: block; }
  .forklaring .sec-head { margin: 0 0 clamp(32px, 5vw, 56px); }

  /* Gateway rows return to the stacked links; the arrow floats top right. */
  .ov-list { border-bottom: none; gap: clamp(30px, 4.5vw, 48px); }
  .ov-item { display: block; border-top: none; padding: 0 34px 0 0; }
  .ov-text { margin-top: 10px; }
  .ov-arrow { top: 4px; }

  /* C1–C5 scale → vertical rail: axis down the left, five nodes */
  .cscale-track { grid-template-columns: 1fr; gap: 0; }
  .cscale-track::before { top: 0; bottom: 0; left: 5.5px; right: auto; width: 1px; height: auto; }
  .cnode { text-align: left; padding: 15px 0 15px 30px; }
  .cnode-dot { top: 27px; left: 5.5px; }
  .cnode-code { display: inline-block; }
  .cnode-level { display: inline-block; margin: 0 0 0 12px; }
  .cnode-env { margin: 8px 0 0; max-width: none; font-size: 14.5px; }
  .cscale-ends { display: none; }

  /* anlegg facts stack to one column */
  .anlegg-facts { grid-template-columns: 1fr; }

  /* process flow: horizontal arrows do not survive stacking, so it becomes a
     vertical rail like the C1–C5 scale does */
  .flow { grid-template-columns: 1fr; gap: 0; }
  .fstep { padding: 0 0 22px 20px; border-left: var(--rule); }
  .fstep::after { content: none; }
  .fstep:last-child { padding-bottom: 0; }

  .ki-row { grid-template-columns: 1fr; gap: 5px; }

  /* Touch targets: footer links and social icons are comfortable to hit with a
     thumb (project floor is 44px). Gap drops to 0 because the padding now
     provides the rhythm, so the footer does not get taller than it should. */
  .foot-list { gap: 0; }
  .foot-list a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-person { padding: 8px 0; }
  .foot-addr { padding: 8px 0; }
  .soc { width: 44px; height: 44px; }
  .nav-brand { padding: 4px 0; }
  /* tap-to-call and mailto are primary actions on the contact page */
  .ki-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* The marquee deliberately has NO mobile override: it inherits the desktop
     edge mask (7%/93%) so both viewports fade identically. Per-card fading and
     a thinner mobile-only fade were both tried and rejected (2026-08-01). */
}