/* =====================================================================
   SeaPattern — site.css
   Shared design-system stylesheet: tokens, reset, type, shell components
   (header / menu overlay / footer), reveal & hover systems, responsive
   layer. Ported from the design source (tekniken.html / index.html
   <style> blocks + _runtime-reveal.css). Consumed by all pages.
   ===================================================================== */

/* ===== Self-hosted fonts (Inter, Inter Tight — latin subset) =====
   Self-hosted to remove the render-blocking Google Fonts CSS request
   (fonts.googleapis.com/css2). Rules mirror the @font-face declarations
   Google's CSS2 endpoint returned for the "latin" subset on 2026-07-27
   (family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700),
   fetched with a Chrome desktop User-Agent so woff2 (not TTF) was served.
   Both families were served as VARIABLE fonts (wght axis 100-900): every
   discrete weight block in Google's response pointed at the same latin
   woff2 file per family, so a single @font-face per family with a
   font-weight range covers 400/500/600/700 exactly as before. Files:
   /assets/fonts/inter-latin-var.woff2, /assets/fonts/intertight-latin-var.woff2.
   Licensed under the SIL Open Font License 1.1 — see
   /assets/fonts/OFL-Inter.txt and /assets/fonts/OFL-InterTight.txt. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter Tight';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/intertight-latin-var.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;
}

/* ===== Tokens ===== */
:root{
  --c-ink-900:#050F14; --c-ink-800:#07151B; --c-ink-700:#0E2129;
  --c-teal-500:#159B9B; --c-teal-400:#1DB8B8; --c-teal-300:#2DD4D4;
  --c-green:#2FB283;
  --c-text:#EAF1F4; --c-text-soft:#C7D5DC; --c-text-mute:#9DB2BC;
  --c-text-dim:#7C929C; --c-text-faint:#5E747E;
  /* Mobile-readability contrast fixes (Task 3, 2026-07-23). Scoped overrides,
     not shifts of the base tokens above: --c-text-dim and --c-text-faint each
     also have passing usages (dark-bg menu/nav for dim; the light-bg
     .inv-report-arrow "down" glyph for faint) that must keep their original,
     already-compliant values. See docs/mobile/2026-07-22-audit-baseline.md
     P0 grey-contrast table and .superpowers/sdd/mob-task-3-report.md. */
  --c-text-dim-fix:#607078;        /* --c-text-dim on light bg (F2F6F8/#FFF), small text: 2.99-3.26:1 -> >=4.72:1 */
  --c-text-faint-fix:#70828C;      /* --c-text-faint on near-black flat bg (#050F14/#061116/#07151B): 3.78-3.94:1 -> >=4.64:1 */
  --c-text-faint-media-fix:#80949E;/* --c-text-faint on .ph-slot's own dark gradient (text-over-media): true bg is opaque, not the audit's ancestor-bg fallback reading (#EDF2F4) -- see report */
  --c-light-bg:#FFFFFF; --c-light-bg-2:#F2F6F8;
  --c-line:rgba(255,255,255,0.14);
  --ff-body:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --ff-disp:'Inter Tight','Helvetica Neue',Helvetica,Arial,sans-serif;
  --fs-h1:clamp(34px,4.2vw,62px); --fs-h1-xl:clamp(38px,5.6vw,82px);
  --fs-h2:clamp(26px,2.9vw,44px); --fs-h3:clamp(19px,1.6vw,24px);
  --fs-lead:clamp(15px,1.2vw,17px); --fs-eyebrow:13px;
  --sp-gutter:clamp(18px,3vw,34px); --sp-section:clamp(64px,10vh,120px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--c-ink-800)}
body{font-family:var(--ff-body);color:var(--c-text);-webkit-font-smoothing:antialiased}
/* width:auto / height:auto (not just max-width:100%) are required here because
   an <img width height> HTML attribute pair installs a low-priority CSS
   presentational hint for the `width`/`height` properties themselves (distinct
   from -- and lower priority than -- the intrinsic-size aspect-ratio mapping
   those same attributes also install). Any selector elsewhere in this codebase
   that sets ONLY `height` (e.g. .footer-brand img{height:44px}) leaves `width`
   unclaimed by author CSS, so without this rule the presentational hint's
   width= value (not the image's rendered/auto width) wins the cascade for
   `width`, gets clamped by max-width:100%, and distorts the aspect ratio.
   Any more specific selector that explicitly sets both width and height
   (all of the absolute-fill / object-fit:cover components below) still wins
   over this base rule and is unaffected. */
img,video{max-width:100%;width:auto;height:auto;display:block}
a{color:var(--c-teal-500)} a:hover{color:var(--c-teal-300)}
.container{width:100%;max-width:1280px;margin:0 auto;padding-left:var(--sp-gutter);padding-right:var(--sp-gutter)}
h1,h2,h3{font-family:var(--ff-disp);font-weight:600;letter-spacing:-0.02em;line-height:1.08;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:var(--fs-eyebrow);letter-spacing:0.22em;text-transform:uppercase;color:var(--c-teal-300)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--c-teal-300)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 30px;font:600 12px/1 var(--ff-body);letter-spacing:0.16em;text-transform:uppercase;text-decoration:none;cursor:pointer;border:1px solid var(--c-teal-400);background:var(--c-teal-400);color:var(--c-ink-800);transition:background .24s,border-color .24s,color .24s}
.btn:hover,.btn:active{background:var(--c-teal-300);border-color:var(--c-teal-300);color:var(--c-ink-800)}
.btn-ghost{background:transparent;color:var(--c-text)}
.btn-ghost:hover,.btn-ghost:active{background:transparent;color:var(--c-teal-300);border-color:var(--c-teal-300)}
.lang-off{color:var(--c-text-faint-fix);cursor:default}
.ph-slot{background:linear-gradient(135deg,#0E2129 0%,#132A34 55%,#0E2129 100%);border:1px solid var(--c-line);display:flex;align-items:center;justify-content:center;color:var(--c-text-faint-media-fix);font-size:11px;letter-spacing:.18em;text-transform:uppercase;width:100%;height:100%}

/* =====================================================================
   Keyframes — ported verbatim from design source
   (tekniken.html sys-* set; index.html sp-cue/sp-marquee/sp-cta-fade)
   ===================================================================== */
@keyframes sp-cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
@keyframes sp-menu-item{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes sp-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(47,178,131,0.5)}50%{opacity:0.55;box-shadow:0 0 0 6px rgba(47,178,131,0)}}
@keyframes sp-cta-fade{0%{opacity:0}3%{opacity:1}25%{opacity:1}29%{opacity:0}100%{opacity:0}}
@keyframes sp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sys-dash{to{stroke-dashoffset:-76}}
@keyframes sys-rot{to{transform:rotate(360deg)}}
@keyframes sys-scan{0%{transform:translateX(0)}100%{transform:translateX(720px)}}
@keyframes sys-prog{from{width:0%}to{width:100%}}
@keyframes sys-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes sys-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* =====================================================================
   Reveal & hover system — ported VERBATIM from _runtime-reveal.css
   ===================================================================== */
.rv{opacity:0;transform:translateY(18px);transition:opacity 700ms cubic-bezier(0.22,0.61,0.36,1),transform 700ms cubic-bezier(0.22,0.61,0.36,1)}
.rv-in{opacity:1;transform:translateY(0)}
.hv{transition:transform 240ms cubic-bezier(0.22,0.61,0.36,1),box-shadow 240ms cubic-bezier(0.22,0.61,0.36,1),border-color 240ms cubic-bezier(0.22,0.61,0.36,1)}
.rv.hv{transition:opacity 700ms cubic-bezier(0.22,0.61,0.36,1),transform 700ms cubic-bezier(0.22,0.61,0.36,1),box-shadow 240ms cubic-bezier(0.22,0.61,0.36,1),border-color 240ms cubic-bezier(0.22,0.61,0.36,1)}
.hv:hover{transform:translateY(-3px)}
.hv-light:hover{box-shadow:0 14px 34px rgba(14,33,41,0.10)!important}
.hv-dark:hover{border-color:rgba(45,212,212,0.55)!important;box-shadow:0 0 26px rgba(29,184,184,0.14)!important}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hv,.rv.hv{transition:none}
  .hv:hover{transform:none}
}

/* =====================================================================
   Navlink underline + watermark + menu-overlay stagger rules
   Ported from tekniken.html / index.html <style> blocks. `.navlink` and
   `.menu-side` are carried over verbatim from the design source for
   fidelity even though current page markup uses `.m-item`/`.m-foot`.
   ===================================================================== */
.navlink{position:relative}
.navlink::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:#2DD4D4;transform:scaleX(0);transform-origin:left center;transition:transform 420ms cubic-bezier(0.22,0.61,0.36,1)}
.navlink:hover::after{transform:scaleX(1)}
.menu-ov nav a.navlink{opacity:0}
.menu-ov.menu-open nav a.navlink{animation:sp-menu-item 540ms cubic-bezier(0.22,0.61,0.36,1) both}
.menu-ov.menu-open nav a.navlink:nth-of-type(1){animation-delay:300ms}
.menu-ov.menu-open nav a.navlink:nth-of-type(2){animation-delay:370ms}
.menu-ov.menu-open nav a.navlink:nth-of-type(3){animation-delay:440ms}
.menu-ov.menu-open nav a.navlink:nth-of-type(4){animation-delay:510ms}
.menu-ov.menu-open nav a.navlink:nth-of-type(5){animation-delay:580ms}
.menu-ov.menu-open nav a.navlink:nth-of-type(6){animation-delay:650ms}
.menu-ov .menu-side{opacity:0;transform:translateY(28px);transition:opacity 560ms cubic-bezier(0.22,0.61,0.36,1),transform 560ms cubic-bezier(0.22,0.61,0.36,1)}
.menu-ov.menu-open .menu-side{opacity:1;transform:translateY(0);transition-delay:460ms}

.sp-wm{display:block;font-family:var(--ff-disp);font-weight:700;font-size:clamp(90px,15.5vw,320px);line-height:0.94;letter-spacing:-0.035em;white-space:nowrap;text-align:center;margin-bottom:-0.24em;background:linear-gradient(180deg,rgba(157,178,188,0.2) 0%,rgba(157,178,188,0.02) 90%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none;transform:translateY(80%);opacity:0;transition:transform 1500ms cubic-bezier(0.22,0.61,0.36,1),opacity 1100ms cubic-bezier(0.22,0.61,0.36,1)}
.sp-wm-in{transform:translateY(0);opacity:1}

/* Meny — bottom index (verbatim from design source) */
.menu-ov .m-item,.menu-ov .m-foot{opacity:0;transform:translateY(34px);transition:opacity 520ms cubic-bezier(0.22,1,0.36,1),transform 520ms cubic-bezier(0.22,1,0.36,1),padding-left 480ms cubic-bezier(0.22,1,0.36,1),border-color 480ms cubic-bezier(0.22,1,0.36,1)}
.menu-ov.menu-open .m-item,.menu-ov.menu-open .m-foot{opacity:1;transform:none}
/* Per-property delays map to the transition list on .m-item (opacity, transform,
   padding-left, border-color): stagger the ENTRANCE only — hover slide/border must
   start instantly, in sync with the text color flip. */
.menu-ov.menu-open .m-list .m-item:nth-child(1){transition-delay:200ms,200ms,0ms,0ms}
.menu-ov.menu-open .m-list .m-item:nth-child(2){transition-delay:270ms,270ms,0ms,0ms}
.menu-ov.menu-open .m-list .m-item:nth-child(3){transition-delay:340ms,340ms,0ms,0ms}
.menu-ov.menu-open .m-list .m-item:nth-child(4){transition-delay:410ms,410ms,0ms,0ms}
.menu-ov.menu-open .m-list .m-item:nth-child(5){transition-delay:480ms,480ms,0ms,0ms}
.menu-ov.menu-open .m-list .m-item:nth-child(6){transition-delay:550ms,550ms,0ms,0ms}
.menu-ov.menu-open .m-list .m-item:nth-child(7){transition-delay:620ms,620ms,0ms,0ms}
.menu-ov.menu-open .m-foot{transition-delay:730ms}
.menu-ov .m-emblem{position:absolute;right:-6vw;bottom:-14vh;height:66vh;max-width:none;opacity:0.05;pointer-events:none;transform:translateY(6vh) scale(1.04);transition:transform 1100ms cubic-bezier(0.22,1,0.36,1) 150ms}
.menu-ov.menu-open .m-emblem{transform:none}

/* Marquee support for the animated .logo-row variant (sp-marquee keyframe) */
.sp-marquee-mask{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.sp-marquee-track{display:flex;align-items:center;gap:76px;width:max-content;animation:sp-marquee 34s linear infinite}
.sp-marquee-mask:hover .sp-marquee-track{animation-play-state:paused}

/* =====================================================================
   Header
   ===================================================================== */
/* Header backdrop: hold near-full opacity through the zone where the logo,
   language picker and menu button actually sit (the top ~60% of the bar),
   then fade out — the old gradients faded from a weak start straight to
   transparent, so page content scrolling underneath collided visibly with
   the header items (owner report). Darker for the dark world, more opaque
   light for the light world; applies at every viewport width. */
.header{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:space-between;align-items:center;padding:22px var(--sp-gutter);transition:background .4s,transform .32s ease;background:linear-gradient(180deg,rgba(7,21,27,0.88) 0%,rgba(7,21,27,0.7) 55%,rgba(7,21,27,0) 100%)}
.header.on-light{background:linear-gradient(180deg,rgba(242,246,248,0.96) 0%,rgba(242,246,248,0.82) 55%,rgba(242,246,248,0) 100%)}
/* Mobile auto-hide (class applied by site.js initAutoHideHeader on <=600px only) */
.header.header-hidden{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.header{transition:background .4s}}
.header .logo{height:52px}
.header button{display:inline-flex;align-items:center;gap:14px;background:none;border:none;cursor:pointer;color:var(--c-text);padding:6px 2px;min-height:44px;font-family:var(--ff-body);font-weight:500;font-size:13px;letter-spacing:0.24em;text-transform:uppercase;transition:color .3s}
.header button:hover{color:var(--c-teal-500)}
.header.on-light button{color:var(--c-ink-700)}

/* Hamburger icon (header "Meny" button) — 3 bars, third short */
.hbars{display:flex;flex-direction:column;gap:5px;width:26px;align-items:flex-end}
.hbar{height:1.5px;width:26px;background:currentColor;display:block}
.hbar-s{width:17px}

/* Logo lockup: two stacked <img> variants (.logo-w dark-bg/white,
   .logo-c light-bg/color) — reused by header + menu overlay top row.
   `.header.on-light` toggles which is visible via opacity crossfade. */
.logo{height:52px;display:block;position:relative;text-decoration:none}
.logo img{height:100%;width:auto;display:block}
.logo .logo-c{position:absolute;top:0;left:0;opacity:0;transition:opacity .3s}
.header.on-light .logo .logo-w{opacity:0}
.header.on-light .logo .logo-c{opacity:1}

/* Reusable language switcher (menu overlay foot + footer bottom bar).
   EN<->SV entries are real <a> links (Task 2 i18n). DE was previously shown
   as an inert <span>; it was removed from every switcher on 2026-07-31
   (owner: don't advertise a language that isn't live) and comes back as a
   real <a> at DE launch — see the DE launch runbook in README.md.
   .lang-off's color applies to either tag (bare class selector), but <a>
   needs its default underline/cursor overridden. */
.lang-switch{display:flex;align-items:center;gap:12px;font-family:var(--ff-body);font-size:12px;letter-spacing:0.08em}
.lang-switch span{color:var(--c-text-faint-fix)}
.lang-switch .lang-on{color:var(--c-text)}
.lang-switch a.lang-off{text-decoration:none;cursor:pointer}
.lang-switch a.lang-off:hover,.lang-switch a.lang-off:active{color:var(--c-teal-300)}

/* Header-right group: wraps the new header language picker + the existing
   menu button so `.header` still has exactly two flex children (logo left,
   group right via justify-content:space-between) — the button's own
   position stays pixel-identical to before this group existed. */
.header-right{display:flex;align-items:center;gap:28px}

/* Header instance of the language switcher (world-aware). Reuses
   .lang-switch's layout/gap but overrides color: the shared
   .lang-switch/.lang-on/.lang-off rules above were tuned for the footer's
   flat near-black background and the dark menu overlay ONLY — measured
   against those they clear 4.5:1 (--c-text-faint-fix ~4.65:1 on the dark
   scrim), but the header sits on a translucent gradient scrim over
   arbitrary scrolling content and the SAME dimmed tone drops to ~3.67:1
   against the light-world scrim's own flat color (rgb(242,246,248)),
   failing 4.5:1. Fix: every item here uses the FULL-strength world color
   (identical to `.header button`, same .3s transition) instead of a
   dimmed tone — active vs inactive is shown via weight + underline only,
   so legibility never depends on which item is "on". */
.header-lang span,.header-lang a.lang-off{color:var(--c-text);transition:color .3s}
.header-lang .lang-on{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.header-lang a.lang-off{font-weight:500;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px}
.header-lang a.lang-off:hover,.header-lang a.lang-off:active{color:var(--c-teal-500)}
.header.on-light .header-lang span,.header.on-light .header-lang a.lang-off{color:var(--c-ink-700)}

/* =====================================================================
   Menu overlay
   ===================================================================== */
.menu-ov:focus{outline:none}
.menu-ov{position:fixed;inset:0;z-index:90;overflow:hidden;visibility:hidden;pointer-events:none;background:rgba(4,10,14,0);transition:visibility 780ms,background 320ms ease}
.menu-ov.menu-open{background:rgba(4,10,14,0.82)}
.menu-ov.menu-open{visibility:visible;pointer-events:auto}
.menu-ov .m-sheet{position:absolute;left:0;right:0;top:0;height:100%;display:flex;flex-direction:column;background:rgb(6,17,22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transform:translateY(-115%);transition:transform 720ms cubic-bezier(0.22,0.61,0.36,1)}
.menu-ov.menu-open .m-sheet{transform:translateY(0)}
.menu-ov .m-bg{position:absolute;inset:0;background:radial-gradient(120% 90% at 78% 8%,#10222C 0%,#0A141B 45%,#07090B 82%)}
.menu-ov .m-top{display:flex;align-items:center;justify-content:space-between;padding:22px 34px;flex:none;position:relative}
.menu-ov .m-close{display:inline-flex;align-items:center;gap:13px;background:none;border:none;cursor:pointer;color:var(--c-text-mute);min-height:44px;font-family:var(--ff-body);font-weight:500;font-size:13px;letter-spacing:0.24em;text-transform:uppercase;transition:color 220ms}
.menu-ov .m-close:hover{color:var(--c-teal-300)}

/* Close icon (menu overlay "Stäng" button) — X from two rotated bars */
.xwrap{position:relative;width:22px;height:22px;display:inline-block}
.xbar{position:absolute;top:10px;left:0;width:22px;height:1.5px;background:currentColor}
.xwrap .xbar:first-child{transform:rotate(45deg)}
.xwrap .xbar:last-child{transform:rotate(-45deg)}

.menu-ov .m-body{flex:1;display:flex;flex-direction:column;justify-content:flex-end;max-width:1220px;width:100%;margin:0 auto;padding:96px 40px clamp(28px,5vh,56px);position:relative;min-height:0}
.m-list{display:flex;flex-direction:column}

.m-item{display:flex;align-items:baseline;gap:26px;padding:clamp(10px,1.8vh,18px) 0;border-top:1px solid var(--c-line);color:#fff;text-decoration:none;min-height:44px}
.m-item:hover{padding-left:16px;border-top-color:rgba(255,255,255,0.45)}
.m-item:last-child{border-bottom:1px solid var(--c-line)}
.m-item span:first-child{font-family:var(--ff-body);font-size:12px;letter-spacing:0.18em;color:var(--c-text-dim)}
.m-item span:last-child{font-family:var(--ff-disp);font-weight:600;font-size:clamp(1.8rem,4.8vh,3.4rem);letter-spacing:-0.02em;line-height:1.1}

.m-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;margin-top:clamp(28px,5vh,52px)}

/* =====================================================================
   Footer
   ===================================================================== */
.footer{min-height:100vh;min-height:100svh;position:relative;display:flex;flex-direction:column;background:var(--c-ink-900);overflow:hidden}
.footer::before{content:"";position:absolute;left:50%;bottom:-16%;width:1300px;height:560px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(29,184,184,0.13) 0%,rgba(29,184,184,0) 62%);pointer-events:none}
.footer-top{flex:1;max-width:1180px;margin:0 auto;width:100%;padding:110px var(--sp-gutter) 48px;display:flex;justify-content:space-between;gap:64px;flex-wrap:wrap;position:relative}
.footer-brand{max-width:340px}
.footer-brand img{height:44px;display:block}
.footer-brand p{font-family:var(--ff-body);font-size:16px;line-height:1.6;color:var(--c-text-mute);margin:26px 0 0}
.footer-status{display:flex;align-items:center;gap:10px;margin:28px 0 0}
.footer-status .dot{width:7px;height:7px;border-radius:50%;background:var(--c-green);animation:sp-pulse 2.6s ease-in-out infinite}
.footer-status .label{font-family:var(--ff-body);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-text-faint-fix)}
.footer-social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--c-line);color:var(--c-text-mute);margin-top:28px;transition:color 200ms,border-color 200ms}
.footer-social:hover{color:var(--c-teal-300);border-color:var(--c-teal-300)}
.footer-cols{display:flex;gap:72px;flex-wrap:wrap}
.footer-col-title{font-family:var(--ff-body);font-weight:500;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-text-faint-fix);margin:0 0 16px}
.footer-col a{display:block;font-family:var(--ff-body);font-size:15px;color:var(--c-text-mute);text-decoration:none;padding:7px 0;min-height:44px;transition:color 180ms}
.footer-col a:hover{color:var(--c-teal-300)}
.footer-col a.is-current{color:var(--c-teal-300)}
.footer-col .footer-office-city{font-family:var(--ff-body);font-size:15px;color:var(--c-text-mute)}
.footer-col .footer-office-addr{font-family:var(--ff-body);font-size:13px;line-height:1.5;color:var(--c-text-faint-fix);margin-top:4px}
.footer-col .footer-office-geo{font-family:var(--ff-body);font-size:11px;letter-spacing:0.08em;color:var(--c-text-faint-fix);margin-top:4px}
.footer-wm{position:relative;width:100%;overflow:hidden;pointer-events:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);position:relative}
.footer-bottom-in{max-width:1180px;margin:0 auto;width:100%;padding:24px var(--sp-gutter);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.footer-bottom-in .copyright{font-family:var(--ff-body);font-size:12px;letter-spacing:0.1em;color:var(--c-text-faint-fix)}
.footer-bottom-in .footer-legal{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.footer-bottom-in .footer-legal a{font-family:var(--ff-body);font-size:13px;color:var(--c-text-faint-fix);text-decoration:none;transition:color 180ms}
.footer-bottom-in .footer-legal a:hover{color:var(--c-text-mute)}

/* =====================================================================
   Shell components: stats, CTAs, logo row
   ===================================================================== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--c-line)}
.stat-grid > *{padding:26px 26px 0 26px}
.stat-grid > *:first-child{padding-left:0}
.stat-grid > * + *{border-left:1px solid var(--c-line)}
.stat-grid .stat-num{font-family:var(--ff-disp);font-weight:600;font-size:clamp(28px,3vw,44px);letter-spacing:-0.02em;line-height:1;color:#fff}
.stat-grid .stat-label{font-family:var(--ff-body);font-weight:500;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-teal-300);margin-top:12px}

.cta-split{min-height:100vh;min-height:100svh;position:relative;display:flex;flex-wrap:wrap;overflow:hidden;background:var(--c-ink-800)}
.cta-split > *{flex:1 1 50%;min-width:300px}
.cta-split > *:first-child{position:relative;display:flex;flex-direction:column;justify-content:center;padding:100px 5vw}
.cta-split > *:last-child{position:relative;overflow:hidden;background:var(--c-ink-700);min-height:420px}
.cta-split > *:last-child img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-split > *:last-child img.is-crossfade{opacity:0;animation:sp-cta-fade 26s linear infinite}

.cta-band{position:relative;overflow:hidden;background:var(--c-ink-800);padding:var(--sp-section) max(var(--sp-gutter),calc((100% - 1180px)/2 + var(--sp-gutter)))}
.cta-band > *{position:relative;z-index:2;max-width:1180px;margin:0 auto}
.cta-band h2{max-width:20ch}

.logo-row{display:flex;align-items:center;flex-wrap:wrap;gap:48px}
.logo-row img{height:32px;width:auto;display:block;object-fit:contain;flex:none}

/* =====================================================================
   Responsive layer — max-width 1200 / 900 / 600 ONLY
   ===================================================================== */
@media (max-width:1200px){
  :root{--sp-gutter:24px}
  .header{padding:20px var(--sp-gutter)}
}

@media (max-width:900px){
  /* stat-grid: 4 -> 2 columns, dangling divider reset */
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid > *{padding-left:26px}
  .stat-grid > *:nth-child(2n+1){border-left:0;padding-left:0}
  .stat-grid > *:nth-child(n+3){border-top:1px solid var(--c-line);padding-top:26px}
  .stat-grid > *:nth-child(n+3):nth-child(2n){border-left:1px solid var(--c-line)}

  /* cta-split: stack, text half always first */
  .cta-split{flex-direction:column}
  .cta-split > *{order:0}
  .cta-split > *:first-child{padding:64px 5vw}
  .cta-split > *:last-child{min-height:320px}

  /* footer: stack brand above nav columns, watermark shrinks */
  .footer-top{flex-direction:column;gap:48px}
  .sp-wm{font-size:clamp(48px,14vw,320px)}
}

@media (max-width:600px){
  :root{--sp-gutter:18px}
  .header{padding:16px var(--sp-gutter)}
  .header .logo,.logo{height:40px}

  /* Header picker: 320px must fit logo + picker + burger on one row with no
     wrap/overflow (owner ask). Tighten the group gap and the picker's own
     item gap/type size; tap target floor (44px) on the anchor is untouched. */
  .header-right{gap:12px}
  .header-lang{gap:6px;font-size:11px}

  /* Burger-only on mobile (owner ask 2026-07-31): the MENU/MENY word is
     visually clipped rather than display:none so the button keeps its
     accessible name for screen readers and voice control — the icon alone
     carries no text alternative. gap:0 closes the space the word left. */
  .header button{gap:0}
  .header button > span:not(.hbars){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

  /* stat-grid: 2 -> 1 column, no dangling dividers */
  .stat-grid{grid-template-columns:1fr}
  .stat-grid > *{border-left:0!important;padding-left:0}
  .stat-grid > * + *{border-top:1px solid var(--c-line);padding-top:26px}

  /* logo-row: tighter wrap */
  .logo-row{gap:28px}

  /* Menu overlay on phones: the 7 items + foot must fit without the list
     becoming its own scroll area. The list used to be capped at
     `max-height:70vh; overflow-y:auto`, which is what produced the cramped,
     scrollbarred menu — measured at 390x844 the list needed 562px but the
     cap plus .m-body's inherited 96px top padding left it only 528px, so it
     scrolled even on a large phone. That 96px is decorative slack from the
     desktop rule (.m-top is a flex sibling, not an overlay, so nothing needs
     clearing); trimming it and easing the per-item padding fits every
     viewport from 561px tall upward with the type scale untouched. Below
     561px the @media (max-height:560px) rule further down top-aligns the
     list and scrolls the sheet as a whole.
     Do NOT add `overflow-y:auto` to .m-sheet here as a safety net: the
     decorative .m-emblem is absolutely positioned at `bottom:-14vh`, so it
     extends past the sheet's padding box and a scrollable sheet reports
     ~118px of phantom scroll height at 844px — a scrollbar with nothing to
     scroll to. .menu-ov's own `overflow:hidden` is what clips it. */
  .menu-ov nav{overflow-y:visible;max-height:none}
  .menu-ov .m-body{padding-top:28px}
  .m-item{padding:clamp(10px,1.6vh,16px) 0}
  .m-item span:last-child{font-size:clamp(1.35rem,4.8vh,3.4rem)}

  /* Task 2 — mobile type floors: shared/site-wide consumers of sub-12px
     micro text (labels/eyebrows floor = 12px). Every consumer of these
     three classes is non-body chrome (footer geo line, stat number
     caption, image placeholder caption) — safe as a single shared bump.
     Selectors below match the base rules' specificity (.footer-col …,
     .stat-grid …) — a bare .footer-office-geo/.stat-label mobile override
     loses the cascade to those two-class base rules despite coming later
     in source order, so specificity must be matched, not just position. */
  .footer-col .footer-office-geo{font-size:12px}
  .stat-grid .stat-label{font-size:12px}
  .ph-slot{font-size:12px}

  /* --fs-lead token override: verified consumers are .nyh-hero-lead
     (nyheter.html) and .act-hero-lead (nyheter/actemium.html) only — both
     are hero lead-paragraph body copy, so the token itself is the
     cleanest single change (no other element reads this token). */
  :root{--fs-lead:16px}

  /* Task 4 — mobile spacing/tap-target fixes (register: docs/mobile/2026-07-22-audit-baseline.md)
     .m-top: audit found the header logo (140px) + "Stäng" close button
     (~107px) leave only ~4.7px between them at 320px against the base
     34px side padding (320 - 2*34 - 247 =~ 4.7). Narrowing the top bar's
     own side padding (desktop-only value, unrelated to --sp-gutter) frees
     enough room for an >=8px gap at 320 while keeping >=16px text-to-edge
     on both the logo and the close label; verified >=12px gap at 320 and
     wide headroom at 360/390 (interior width only grows from there). */
  .menu-ov .m-top{padding:22px 28px}

  /* .logo tap target: header (dark + on-light) and menu-overlay logo all
     share this class; each renders 140x40 at this breakpoint (register
     rows: header logo, header.on-light logo, menu logo — all <44px tall).
     Widening the image itself would change the mobile header's visual
     size, so instead extend the *hit area* only, via an invisible
     pseudo-element centered on the existing box (WCAG 2.5.5 target-size
     technique) — logo width (140px) already clears 44px, only height
     needs the extra +2px top/bottom. */
  .logo{position:relative}
  .logo::after{content:"";position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}

  /* .footer-social tap target: 38x38 at this breakpoint, just under the
     44px floor. Icon itself (17x17) stays the same size/position (centered
     via inline-flex); only the frame grows. */
  .footer-social{width:44px;height:44px}

  /* .footer-legal a tap target: 53x16 at 320 — unlike .footer-col a (which
     already carries padding+min-height for the nav column links), the
     bottom-bar legal links never got the same treatment. */
  .footer-bottom-in .footer-legal a{display:inline-flex;align-items:center;min-height:44px}
}

/* Short/landscape viewports (e.g. 820x500 tablet-landscape): .m-body's
   flex-end alignment plus its fixed 96px top padding pushes the nav list's
   min-content height above the sheet's own top edge, overlapping .m-top
   and stealing its click target. Let the sheet scroll and top-align the
   list instead so it always clears the top bar. */
@media (max-height:560px){
  .menu-ov .m-sheet{overflow-y:auto}
  .menu-ov .m-body{justify-content:flex-start;padding-top:20px}
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1 !important;transform:none !important}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}