/* Nordens AB — design system per Design/Nordens Design System Brief.
   Tokens: Blå 900 #001042, Blå 700 #002077, Blå 500 #1B3E8F, Blå 300 #A6B4D6,
   Blå 100 #EBEEF7 · grayscale #111111/#4A4A4A/#FDFDFC/#F4F4F2/#EFEFEC.
   Poppins headings, Open Sans body, IBM Plex Mono eyebrows.
   Fasningen: 45° cuts, --fas (20px) on cards, larger on section edges. */

:root {
  --b900: #001042; --b700: #002077; --b500: #1B3E8F; --b300: #A6B4D6; --b100: #EBEEF7;
  --ink: #111111; --body: #4A4A4A; --mute: #8A8A85;
  --bg: #FDFDFC; --alt: #F4F4F2; --prod: #EFEFEC; --line: #E4E4E0;
  --fas: 20px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 400 16px/1.65 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--b700); text-decoration: none; }
a:hover { color: var(--b500); }
img { max-width: 100%; }
.wrap { max-width: 1440px; margin: 0 auto; padding-left: 100px; padding-right: 100px; }

/* ------------------------------------------------------------- header ---- */
.topbar { background: var(--b900); }
.topbar .wrap { height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .07em; color: rgba(255,255,255,.72); }
.topbar .right { display: flex; align-items: center; gap: 26px; }
.topbar .sep { width: 1px; height: 12px; background: rgba(255,255,255,.22); }
.topbar button { all: unset; color: #fff; cursor: pointer; font: inherit; letter-spacing: inherit; }
.topbar button:hover { color: var(--b300); }
.masthead { background: var(--bg); border-bottom: 1px solid var(--line); }
.masthead .wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.masthead .logo img { width: 158px; height: auto; display: block; }
.masthead nav { display: flex; align-items: center; gap: 34px; }
.masthead nav a { padding: 4px 0; font: 600 14.5px 'Open Sans', sans-serif; color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--b700); }
.masthead nav a:hover, .masthead nav a.active { color: var(--b700); text-decoration-line: underline; }
.masthead .actions { display: flex; align-items: center; gap: 20px; flex: none; }

/* ------------------------------------------------------------ buttons ---- */
.btn { display: inline-block; border: 0; cursor: pointer; border-radius: 999px; font: 600 15px 'Open Sans', sans-serif; padding: 15px 34px; transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--b700); color: #fff; }
.btn-primary:hover { background: var(--b500); color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #333; color: #fff; }
.btn-white { background: #fff; color: var(--b900); }
.btn-white:hover { background: var(--b100); color: var(--b900); }
.btn-outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); padding: 13.5px 32px; }
.btn-outline-light:hover { border-color: #fff; color: #fff; }
.btn-sm { font-size: 14px; padding: 13px 28px; }
.arrow-link { display: inline-flex; align-items: center; gap: 11px; font: 600 15px 'Open Sans', sans-serif; color: var(--ink); }
.arrow-link:hover { color: var(--b700); }
.arrow-link .fas-dash, .eyebrow .fas-dash { width: 15px; height: 2px; background: var(--b700); transform: rotate(-45deg); display: inline-block; flex: none; }

/* ------------------------------------------------------------ section ---- */
.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--b700); }
.eyebrow.on-dark { color: var(--b300); }
.eyebrow.on-dark .fas-dash { background: var(--b300); }
h1, h2, h3 { font-family: Poppins, sans-serif; color: var(--ink); }
.h-section { margin: 20px 0 0; font: 700 38px/1.18 Poppins, sans-serif; letter-spacing: -.018em; }
.lede { font: 400 18px/1.72 'Open Sans', sans-serif; color: var(--body); }

/* fasningen, recipe A: cut corner */
.fas-a { clip-path: polygon(0 0, calc(100% - var(--fas)) 0, 100% var(--fas), 100% 100%, 0 100%); }
/* recipe B: section edge, top-left cut */
.fas-b { clip-path: polygon(0 44px, 44px 0, 100% 0, 100% 100%, 0 100%); }

/* --------------------------------------------------------------- hero ---- */
.hero { position: relative; height: 640px; background: var(--b900); overflow: hidden; }
.hero .art { position: absolute; inset: 0; }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,16,66,.9) 0%, rgba(0,16,66,.74) 52%, rgba(0,16,66,.48) 100%); }
.hero .wrap { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero h1 { margin: 0; max-width: 880px; font: 800 72px/1.04 Poppins, sans-serif; letter-spacing: -.022em; text-transform: uppercase; color: #fff; }
.hero p { margin: 30px 0 0; max-width: 620px; font: 400 20px/1.6 'Open Sans', sans-serif; color: rgba(255,255,255,.8); }
.hero .ctas { margin-top: 40px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------- cards ----- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.pcard { display: block; color: var(--ink); }
.pcard:hover { color: var(--b700); }
.pcard .ph { height: 240px; background: var(--prod); overflow: hidden; display: grid; place-items: center; }
.pcard .ph svg, .pcard .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcard .t { margin-top: 20px; font: 700 21px/1.3 Poppins, sans-serif; }
.pcard .d { margin-top: 8px; font: 400 15.5px/1.6 'Open Sans', sans-serif; color: var(--body); }

/* --------------------------------------------------------- dark band ----- */
.band { background: var(--b900); }
.band .grid4 { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 40px; }
.band .cell { padding-top: 24px; border-top: 1px solid rgba(166,180,214,.28); }
.band .check { font: 400 18px 'IBM Plex Mono', monospace; color: var(--b300); }
.band .cell b { display: block; margin-top: 14px; font: 700 21px/1.35 Poppins, sans-serif; color: #fff; }

/* -------------------------------------------------------------- quote ---- */
.pull { max-width: 1040px; }
.pull p { margin: 0; font: 400 34px/1.44 Poppins, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.pull .who { margin-top: 32px; display: flex; align-items: center; gap: 14px; font: 600 15.5px 'Open Sans', sans-serif; }
.pull .who .fas-dash { width: 20px; }

/* ----------------------------------------------------------- contact ----- */
.contact-card { background: var(--b100); padding: 36px 38px 40px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); display: flex; flex-direction: column; gap: 22px; }
.contact-card .k { font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--b700); }
.contact-card .v { margin-top: 7px; font: 700 22px Poppins, sans-serif; color: var(--ink); }
.contact-card .v.small { font-size: 17px; line-height: 1.5; }
.contact-card .sub { margin-top: 4px; font: 400 13.5px/1.6 'Open Sans', sans-serif; color: var(--body); }

/* -------------------------------------------------------- breadcrumb ----- */
.crumbs { border-bottom: 1px solid var(--line); }
.crumbs .wrap { height: 52px; display: flex; align-items: center; gap: 10px; font: 400 12px 'IBM Plex Mono', monospace; color: var(--mute); }
.crumbs a { color: var(--mute); }
.crumbs a:hover { color: var(--b700); }
.crumbs .here { color: var(--ink); }

/* ------------------------------------------------------ product hero ----- */
.phero { display: grid; grid-template-columns: 1fr 560px; gap: 0 72px; align-items: start; }
.tag { display: inline-block; background: var(--b700); color: #fff; font: 500 10px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; padding: 6px 11px; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
.tag-note { font: 500 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.phero h1 { margin: 26px 0 0; font: 700 54px/1.1 Poppins, sans-serif; letter-spacing: -.022em; }
.phero .sub { margin: 24px 0 0; max-width: 560px; font: 400 19px/1.62 'Open Sans', sans-serif; color: var(--body); }
.phero .ctas { margin-top: 34px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.statgrid { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 24px; }
.statgrid .k { font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .11em; text-transform: uppercase; color: var(--mute); }
.statgrid .v { margin-top: 8px; font: 700 22px Poppins, sans-serif; color: var(--ink); }
.pimg { height: 470px; background: var(--prod); overflow: hidden; clip-path: polygon(0 0, calc(100% - 40px) 0, 100% 40px, 100% 100%, 0 100%); display: grid; place-items: center; }
.pimg svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------- specs ----- */
.speccols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 80px; }
.specrow { display: grid; grid-template-columns: 200px 1fr; gap: 0 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.specrow:last-child { border-bottom: 1px solid var(--line); }
.specrow .k { font: 600 14.5px 'Open Sans', sans-serif; color: var(--ink); }
.specrow .v { font: 400 14.5px/1.6 'Open Sans', sans-serif; color: var(--body); }

.variants { border-top: 1px solid var(--line); }
.variant { display: grid; grid-template-columns: 60px 340px 1fr; gap: 0 32px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.variant .n { font: 500 12px 'IBM Plex Mono', monospace; color: var(--b300); padding-top: 4px; }
.variant h3 { margin: 0; font: 700 19px/1.35 Poppins, sans-serif; }
.variant p { margin: 0; max-width: 620px; font: 400 15.5px/1.65 'Open Sans', sans-serif; color: var(--body); }

/* ----------------------------------------------------------- leverans ---- */
.leverans { background: var(--b100); padding: 40px 44px; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.leverans h3 { margin: 0; font: 700 24px Poppins, sans-serif; }
.leverans p { margin: 14px 0 0; max-width: 70ch; color: var(--body); font-size: 15.5px; }
.leverans .row { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.stock { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px 'Open Sans', sans-serif; color: var(--ink); }
.stock::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #1c7c3c; }

/* ---------------------------------------------------------------- faq ---- */
.faq h3 { font: 700 26px/1.25 Poppins, sans-serif; margin: 56px 0 6px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 0; font: 600 17px/1.4 Poppins, sans-serif; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 22px 'IBM Plex Mono', monospace; color: var(--b700); flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0 0 22px; max-width: 78ch; color: var(--body); font-size: 15.5px; }

/* ------------------------------------------------------------- footer ---- */
footer.site { background: var(--b900); font-family: 'Open Sans', sans-serif; clip-path: polygon(0 56px, 56px 0, 100% 0, 100% 100%, 0 100%); margin-top: 100px; }
footer.site .inner { padding-top: 96px; }
footer.site .cols { display: grid; grid-template-columns: 340px repeat(4, 1fr); gap: 40px 44px; }
footer.site .wordmark img { width: 168px; height: auto; display: block; }
footer.site .about { margin: 22px 0 0; max-width: 268px; font: 400 14px/1.7 'Open Sans', sans-serif; color: rgba(255,255,255,.62); }
footer.site .colh { font: 500 10.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--b300); }
footer.site .col a, footer.site .col span { display: block; color: rgba(255,255,255,.8); font-size: 14px; }
footer.site .col a:hover { color: #fff; }
footer.site .links { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; }
footer.site .tel { font: 600 14px 'Open Sans', sans-serif; color: #fff; }
footer.site .hours { margin-top: 3px; font: 400 12.5px/1.5 'Open Sans', sans-serif; color: rgba(255,255,255,.55); }
footer.site .rule { margin-top: 76px; display: flex; align-items: center; gap: 14px; }
footer.site .rule .l { flex: 1; height: 1px; background: rgba(166,180,214,.28); }
footer.site .rule .d { width: 16px; height: 1.5px; background: var(--b300); transform: rotate(-45deg); }
footer.site .legal { padding: 28px 0 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; font: 400 11.5px 'IBM Plex Mono', monospace; letter-spacing: .04em; color: rgba(255,255,255,.5); }
footer.site .legal .list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
footer.site .legal a { color: rgba(255,255,255,.5); text-decoration: underline; text-underline-offset: 3px; }
footer.site .legal a:hover { color: rgba(255,255,255,.8); }

/* --------------------------------------------------------- responsive ---- */
@media (max-width: 1100px) {
  .wrap { padding-left: 40px; padding-right: 40px; }
  .hero h1 { font-size: 52px; }
  .phero { grid-template-columns: 1fr; gap: 48px 0; }
  .speccols { grid-template-columns: 1fr; gap: 0; }
  .speccols > div:last-child .specrow:first-child { border-top: 0; }
  .band .grid4 { grid-template-columns: 1fr 1fr; }
  .cards3 { grid-template-columns: 1fr 1fr; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .grid2, .contact-grid { grid-template-columns: 1fr !important; gap: 48px 0 !important; }
}
@media (max-width: 640px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hero { height: auto; }
  .hero .wrap { padding-top: 88px; padding-bottom: 96px; }
  .hero h1 { font-size: 38px; }
  .phero h1 { font-size: 36px; }
  .h-section { font-size: 28px; }
  .pull p { font-size: 24px; }
  .cards3 { grid-template-columns: 1fr; }
  .band .grid4 { grid-template-columns: 1fr; }
  .masthead nav { display: none; }
  .topbar .wrap { justify-content: center; }
  .topbar .right { display: none; }
  .variant { grid-template-columns: 40px 1fr; }
  .variant p { grid-column: 2; margin-top: 8px; }
  .statgrid { grid-template-columns: 1fr; }
  footer.site .cols { grid-template-columns: 1fr; }
}