/* ===========================================================================
   UNMD AB — unmd.ai
   Grafisk profil 1.0 · variant "Springan"
   Tokens och komponenter härledda ur design_handoff_unmd_site/design_system.
   Ändra aldrig sigillets geometri eller färgtokens här — ändra i profilen.
   =========================================================================== */

/* --- Typsnitt · lokalt hostade, inga tredjepartsanrop --------------------- */

@font-face{font-family:"Satoshi";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/satoshi-500.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/satoshi-700.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/switzer-400.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/switzer-500.woff2") format("woff2")}
@font-face{font-family:"Switzer";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/switzer-600.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("../fonts/jetbrainsmono-var.woff2") format("woff2")}

/* --- Tokens -------------------------------------------------------------- */

:root{
  /* Färg — grafisk profil 1.0, avsnitt 03 */
  --oxblod:#38201D;
  --djup:#1C0E0D;
  --pergament:#F1EBE1;
  --pergament-2:#F8F4EC;
  --massing:#C08A2E;
  --massing-hover:#AD7A26;
  /* Mässing på mörk yta: mot bildplattans scrim ger #C08A2E bara 4,18:1.
     #CD9A3C ger >=5:1 på samtliga mörka ytor. */
  --massing-ljus:#CD9A3C;
  /* ...och på ljus yta gäller det omvända: #C08A2E mot pergament ger 2,56:1,
     under de 3:1 som fokusindikatorer och bärande länkstreck kräver.
     #8A5F14 ger 4,75:1. */
  --massing-mork:#8A5F14;
  --aska:#8E8A82;
  --aska-mork:#6B6660;
  --linje:#DDD5C8;
  --brod:#6B534E;
  --kod-yta:#E5DCD1;
  --klar:#3F6B3A;
  --fel:#A33C2A;

  /* Semantiska alias */
  --surface-page:var(--pergament);
  --surface-raised:var(--pergament-2);
  --surface-inverse:var(--oxblod);
  --surface-inverse-deep:var(--djup);
  --text-heading:var(--oxblod);
  --text-body:var(--brod);
  --text-muted:var(--aska-mork);
  --text-on-inverse:var(--pergament);
  --text-on-accent:var(--djup);
  --text-accent-inverse:var(--massing-ljus);
  --border-default:var(--linje);
  /* Accenten byter värde med underlaget. Ljus yta är utgångsläget; de mörka
     sektionerna skriver över den längre ner, så samma regel håller kontrast
     på båda hållen. */
  --accent-kontrast:var(--massing-mork);
  --focus-ring:var(--accent-kontrast);
  --nav-bg:rgba(241,235,225,.93);

  /* Typografi — avsnitt 04 */
  --font-display:"Satoshi",Arial,Helvetica,sans-serif;
  --font-sans:"Switzer","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ls-mono:.11em;
  --ls-wordmark:.09em;
  --measure:66ch;

  /* Rutnät 8 px — avsnitt 05 */
  --space-1:8px; --space-2:16px; --space-3:24px;
  --space-4:40px; --space-5:64px; --space-6:96px;
  --content-max:1080px;
  --page-margin:30px;
  --springa:8px;
  --header-h:56px;

  /* Radie — härledd ur sigillets 31,25 % */
  --radius-sm:3px; --radius-md:8px; --radius-lg:15px;

  /* Rörelse — redovisar tillstånd, underhåller inte */
  --ease-standard:cubic-bezier(.2,0,.2,1);
  --dur-instant:80ms; --dur-fast:120ms; --dur-base:180ms; --dur-slow:320ms;
}

/* --- Bas ----------------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--text-heading);
  margin:0;
  letter-spacing:-.025em;
  text-wrap:balance;
}

p{margin:0;text-wrap:pretty}

a{
  color:var(--oxblod);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-standard);
}
a:hover{
  color:var(--djup);
  text-decoration:underline;
  text-decoration-color:var(--accent-kontrast);
  text-underline-offset:4px;
}

img,svg{display:block;max-width:100%}

:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

section[id]{scroll-margin-top:var(--header-h)}

hr{border:0;margin:0}

::selection{background:var(--massing);color:var(--djup)}

/* Rörelse är alltid valfri */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Fördröjning och upprepning måste nollas tillsammans med tiden. Utan
     iteration-count blir en oändlig animation ett stroboskop när tiden går
     mot noll; utan delay ligger ett element kvar osynligt sin fördröjning ut. */
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:.01ms !important;
  }
  /* Pricken slutar andas och strecken står fulla: inget följer scrollen. */
  .status-dot--klar{animation:none !important;opacity:1}
  .springa > span{transform:none !important}
}

/* --- Hjälpklasser -------------------------------------------------------- */

.wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--page-margin);
}

.mono{
  font-family:var(--font-mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.mono--sm{font-size:9.5px}
.mono--10{font-size:10px}
.mono--accent{color:var(--text-accent-inverse)}
.mono--strong{color:var(--oxblod)}
.mono--klar{color:var(--klar)}
.mono--inverse{color:var(--pergament)}
/* Designens .44 gav 3,85:1 mot djup — under AA. .52 ger 4,94:1 och
   behåller hierarkin. Profilens kontrastkrav går före prototypens värde. */
.mono--faint{color:rgba(241,235,225,.52)}

.tabular{font-variant-numeric:tabular-nums}

.visually-hidden{
  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;
}

.skip-link{
  position:absolute;left:var(--page-margin);top:-100px;z-index:100;
  background:var(--oxblod);color:var(--pergament);
  padding:10px 16px;border-radius:var(--radius-sm);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--ls-mono);
  text-transform:uppercase;text-decoration:none;
  transition:top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus{top:10px;color:var(--pergament)}

/* --- Springan: varje avdelande linje bär ett brott på mitten ------------- */

.springa{display:flex;gap:var(--springa);width:100%}
.springa > span{flex:1;height:1px;background:var(--linje)}
.springa--rule{margin:56px 0 40px}
.springa--tjock > span{height:6px;background:var(--oxblod);}
.springa--tjock{gap:6px}
.springa--2 > span{height:2px;background:var(--linje)}
.springa--2{gap:5px;flex:1}
.springa--ljus > span{height:8px;background:rgba(241,235,225,.16)}
/* Sluten brygga = aktivt tillstånd. Sluter bara glappet — färgen ärvs. */
.springa--brygga{gap:0}
/* Mässingsbryggan: enda stället där springan bär accentfärg. */
.springa--massing > span{height:8px;background:var(--massing)}

/* --- Sigill och lockup --------------------------------------------------- */

.seal{display:block;flex:none}
.lockup{
  display:inline-flex;align-items:center;
  color:currentColor;gap:.27em;
  font-size:22px; /* = ikonhöjd; wordmark räknas i em */
}
.lockup .seal{width:1em;height:1em}
.lockup__wordmark{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1;
  font-size:.73em;
  letter-spacing:var(--ls-wordmark);
  text-transform:uppercase;
}
a.lockup:hover{text-decoration:none;color:inherit}

/* --- Knappar ------------------------------------------------------------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:var(--ls-mono);
  text-transform:uppercase;
  padding:9px 15px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-instant) var(--ease-standard);
}
.btn--lg{font-size:11px;padding:13px 22px}
.btn--sm{font-size:9.5px;padding:7px 12px}
.btn:active{transform:translateY(1px)}
.btn:hover{text-decoration:none}

.btn--primary{background:var(--massing);color:var(--djup);border-color:var(--massing)}
.btn--primary:hover{background:var(--massing-hover);border-color:var(--massing-hover);color:var(--djup)}

.btn--secondary{background:transparent;color:var(--oxblod);border-color:var(--oxblod)}
.btn--secondary:hover{background:var(--oxblod);color:var(--pergament)}

.btn--ghost{background:transparent;color:var(--aska-mork);border-color:var(--linje)}
.btn--ghost:hover{border-color:var(--oxblod);color:var(--oxblod)}

.btn--inverse{background:var(--pergament);color:var(--oxblod)}
.btn--inverse:hover{background:#E3DACE;color:var(--oxblod)}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* --- Sidhuvud ------------------------------------------------------------ */

.site-header{
  position:sticky;top:0;z-index:30;
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linje);
}
.header-inner{
  max-width:var(--content-max);margin:0 auto;padding:0 var(--page-margin);
  min-height:var(--header-h);
  display:flex;align-items:center;gap:var(--space-3);
}
.header-inner .lockup{color:var(--oxblod)}

.nav{margin-left:auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.nav__link{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--aska-mork);padding:3px 0;
  border-bottom:1px solid transparent;
}
.nav__link:hover{color:var(--oxblod);text-decoration:none;border-bottom-color:var(--accent-kontrast)}
.nav__link[aria-current="page"],.nav__link.is-active{
  color:var(--oxblod);border-bottom-color:var(--accent-kontrast);
}

.lang{
  display:flex;align-items:center;gap:6px;
  padding-left:14px;margin-left:4px;border-left:1px solid var(--linje);
}
.lang__link{
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-mono);
  color:var(--text-muted);padding:2px 3px;
}
.lang__link:hover{color:var(--oxblod);text-decoration:none}
.lang__link[aria-current="true"]{color:var(--oxblod)}
.lang__sep{color:var(--text-muted);font-size:10px}

.admin-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:1px solid var(--linje);border-radius:var(--radius-sm);
  padding:6px 10px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--aska-mork);
  transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
}
.admin-btn:hover{border-color:var(--oxblod);color:var(--oxblod);text-decoration:none}
.admin-btn::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--aska);display:block;
}

.nav-toggle{display:none}

/* --- Hero ---------------------------------------------------------------- */

#hem{border-bottom:1px solid var(--linje)}

.hero{padding-block:var(--space-6) var(--space-5)}
.hero__h1{
  margin:20px 0 0;
  font-size:92px;line-height:.98;letter-spacing:-.04em;
  max-width:11ch;text-wrap:initial;
}
.hero__sub{
  margin:26px 0 0;font-size:19px;line-height:1.5;max-width:52ch;color:var(--brod);
}
.hero__cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}

.plate-wrap{padding-block:0 var(--space-6)}
.plate{display:flex;gap:var(--springa)}
.plate__a{
  position:relative;overflow:hidden;
  flex:1.35;min-height:320px;
  border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  /* Ligger kvar som botten om bilden inte laddas. */
  background:linear-gradient(158deg,#4A2E29,#1C0E0D);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:32px;gap:10px;
}
/* Duplexbild i oxblod. Inga människor — bildregeln i profilen, avsnitt 07. */
.plate__img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  object-fit:cover;object-position:62% 50%;
}
/* Bär texten, inte stämningen: bara så mycket att mono-etiketten håller AA. */
.plate__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(28,14,13,.86) 0%,
    rgba(28,14,13,.52) 34%,
    rgba(28,14,13,.10) 68%,
    rgba(28,14,13,0) 100%);
}
.plate__a > .mono,
.plate__a > .plate__line{position:relative;z-index:2}
.plate__line{
  font-family:var(--font-display);font-weight:700;
  font-size:27px;line-height:1.2;color:var(--pergament);max-width:22ch;
}
/* Andra bildpanelen. Profilens beskärningsregel, avsnitt 07: bilder delas
   i två paneler med en springa emellan. Oxblodsytan ligger kvar som botten
   om bilden inte laddas. */
.plate__b{
  position:relative;overflow:hidden;
  flex:1;min-height:320px;
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  background:var(--oxblod);
}

/* Bred platta i Om-sektionen: bryter av en lång typografisk yta utan att
   ta över den. */
.verk-plate{
  position:relative;overflow:hidden;
  margin-top:var(--space-4);
  border-radius:var(--radius-lg);
  aspect-ratio:2.84;
  background:var(--djup);
}
.verk-plate__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 62%;
}

/* --- Om UNMD ------------------------------------------------------------- */

#om{border-bottom:1px solid var(--linje)}
.section{padding-block:80px}
.section__h{font-size:34px;line-height:1.1}

.about__grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-5);
  margin-top:32px;align-items:start;
}
.about__lead{
  font-size:21px;line-height:1.45;letter-spacing:-.01em;color:var(--oxblod);
}

.build__head{
  display:flex;flex-wrap:wrap;gap:var(--space-3);
  align-items:baseline;justify-content:space-between;
}
.build__h{font-size:21px;line-height:1.35;max-width:34ch}
.build__lead{font-size:14.5px;max-width:44ch}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.card{
  border:1px solid var(--linje);border-radius:var(--radius-md);
  background:var(--pergament-2);padding:var(--space-3);
  display:flex;flex-direction:column;gap:14px;
}
.card__h{font-size:21px;line-height:1.2}
.card__b{font-size:14.5px;margin:0}

/* --- Produkter (mörk sektion) -------------------------------------------- */

/* Fibertexturen ligger som ett tunt lager över oxbloden: syns knappt, men
   tar bort den platta digitala ytan. Texturen är gråskala centrerad kring
   128 — overlay är neutralt vid 50 % grått, så ytan får relief utan att
   sektionsfärgen flyttar sig från #38201D. */
.products{background:var(--oxblod);color:var(--pergament);position:relative;isolation:isolate}
.products,.site-footer,.contact-panel{--accent-kontrast:var(--massing-ljus)}
.products::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/img/fiber-1600.webp") center/cover no-repeat;
  opacity:.9;mix-blend-mode:overlay;
}
.products .section__h{color:var(--pergament)}
.products__sub{margin:12px 0 0;color:rgba(241,235,225,.72);max-width:60ch}

.product-grid{
  display:grid;grid-template-columns:1fr;gap:var(--springa);
  margin-top:var(--space-4);align-items:stretch;
}

.nomi-card{
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);
  background:var(--pergament);
  border-radius:var(--radius-lg);
  padding:36px;text-decoration:none;
  transition:background var(--dur-base) var(--ease-standard);
}
.nomi-card:hover{background:var(--pergament-2);text-decoration:none}
.nomi-card__top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.status-dot{width:6px;height:6px;border-radius:50%;display:block;flex:none}
.status-dot--klar{background:var(--klar)}
.nomi-card__h{margin:22px 0 0;font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--oxblod)}
.nomi-card__tag{
  margin:14px 0 0;font-size:21px;line-height:1.35;letter-spacing:-.01em;
  color:var(--oxblod);max-width:24ch;
}
.nomi-card__b{margin:16px 0 0;max-width:44ch;color:var(--brod)}
.nomi-card__foot{display:flex;align-items:center;gap:10px}

/* Produktvyn: Nomis egna publicerade verifikationsrader, satta i UNMD:s
   palett i stället för hämtade som bild. Skarpt i alla upplösningar och
   utan bildvikt. Dekorativ — brödtexten bredvid bär samma information i
   prosa, så skärmläsare hoppar över tabellen. */
.nomi-card__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start;
}
.nomi-view{
  border:1px solid var(--linje);border-radius:var(--radius-md);
  background:var(--pergament-2);overflow:hidden;
}
.nomi-view__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-2);padding:12px 16px;border-bottom:1px solid var(--linje);
}
.nomi-view__row{
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:14px;align-items:baseline;padding:11px 16px;
  border-top:1px solid var(--linje);
}
.nomi-view__rows > .nomi-view__row:first-child{border-top:0}
.nomi-view__nr{color:var(--text-heading)}
.nomi-view__lev{
  font-family:var(--font-sans);font-size:13px;line-height:1.3;
  letter-spacing:0;text-transform:none;color:var(--brod);
}
.nomi-view__konto{color:var(--text-muted)}
/* Valutan står i gemener — mono-klassens versalisering gäller etiketter, inte belopp. */
.nomi-view__belopp{color:var(--text-heading);text-align:right;text-transform:none}

/* --- Rörelse ------------------------------------------------------------- */
/* Redovisar tillstånd, underhåller inte. Alla tre startlägena sätts av JS
   (.is-forberedd) så att sajten utan JavaScript visar allt färdigt i stället
   för tomt. Reduced motion fångas av det globala blocket högre upp: varje
   animation och transition snappar till sitt slutläge. */

/* 1 · Verifikationsraderna tickar in när kortet kommer i vy. En körning som
       sker, inte en bild av en körning. Kör en gång, inte vid varje passage. */
.nomi-view.is-forberedd .nomi-view__row{opacity:0;transform:translateY(4px)}
.nomi-view.is-korning .nomi-view__row{
  animation:drift-rad var(--dur-slow) var(--ease-standard) both;
}
.nomi-view.is-korning .nomi-view__row:nth-child(2){animation-delay:140ms}
.nomi-view.is-korning .nomi-view__row:nth-child(3){animation-delay:280ms}
.nomi-view.is-korning .nomi-view__row:nth-child(4){animation-delay:420ms}
@keyframes drift-rad{to{opacity:1;transform:none}}

/* 2 · Statuspricken andas så länge produkten är i drift. */
@keyframes drift-puls{0%,100%{opacity:1}50%{opacity:.42}}
.status-dot--klar{animation:drift-puls 4s var(--ease-standard) infinite}

/* 3 · Springan fylls i takt med scrollen, ett streck i taget från vänster.
       De tre korten är tre steg i tiden — Kartläggning, Bygge, Drift — så
       strecken ligger på en gemensam tidslinje och tänds i följd i stället
       för allihop när raden råkar komma i vy. --framsteg (0–1) sätts av JS
       för hela elementets passage genom vyn; varje streck äger sitt eget
       fönster i den och räknar ut sin fyllnad ur det.

       Utan JS finns ingen --framsteg, --fyll blir ogiltig vid beräkning och
       var(--fyll, 1) faller tillbaka på fullt utritat streck. */
.springa > span{transform-origin:left center;transform:scaleX(var(--fyll, 1))}

/* Sex streck mellan 25 % och 70 % av passagen: 7,5 procentenheter var,
   1/0.075 = 13.3333 som multiplikator. */
.cards > :nth-child(1) .springa > span:nth-child(1){--fyll:clamp(0,calc((var(--framsteg) - .250) * 13.3333),1)}
.cards > :nth-child(1) .springa > span:nth-child(2){--fyll:clamp(0,calc((var(--framsteg) - .325) * 13.3333),1)}
.cards > :nth-child(2) .springa > span:nth-child(1){--fyll:clamp(0,calc((var(--framsteg) - .400) * 13.3333),1)}
.cards > :nth-child(2) .springa > span:nth-child(2){--fyll:clamp(0,calc((var(--framsteg) - .475) * 13.3333),1)}
.cards > :nth-child(3) .springa > span:nth-child(1){--fyll:clamp(0,calc((var(--framsteg) - .550) * 13.3333),1)}
.cards > :nth-child(3) .springa > span:nth-child(2){--fyll:clamp(0,calc((var(--framsteg) - .625) * 13.3333),1)}

/* Avdelaren ovanför fylls över sin egen passage, två streck i följd. */
.springa--rule > span:nth-child(1){--fyll:clamp(0,calc((var(--framsteg) - .30) * 5),1)}
.springa--rule > span:nth-child(2){--fyll:clamp(0,calc((var(--framsteg) - .50) * 5),1)}

/* --- Kontakt ------------------------------------------------------------- */

#kontakt{border-bottom:1px solid var(--linje)}

.contact-grid{
  display:grid;grid-template-columns:1fr 1.15fr;gap:var(--springa);
  margin-top:32px;align-items:stretch;
}

.contact-panel{
  background:var(--oxblod);
  border-radius:var(--radius-lg) var(--radius-sm) var(--radius-sm) var(--radius-lg);
  padding:36px;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);
}
.contact-panel__b{margin:16px 0 0;color:rgba(241,235,225,.78);max-width:34ch}
.contact-panel__mail{
  display:inline-block;margin-top:22px;
  font-family:var(--font-display);font-weight:700;
  font-size:30px;letter-spacing:-.03em;color:var(--pergament);
  word-break:break-word;
}
.contact-panel__mail:hover{color:var(--accent-kontrast);text-decoration:none}
.contact-panel .seal{width:64px;height:64px;color:rgba(241,235,225,.22)}

.form-card{
  border:1px solid var(--linje);
  border-radius:var(--radius-sm) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  overflow:hidden;background:var(--pergament-2);
  display:flex;flex-direction:column;justify-content:space-between;
}
.form-card__body{padding:36px;display:flex;flex-direction:column;gap:var(--space-2)}
.form-card__h{margin-top:8px;font-size:21px;line-height:1.25}
.form-card__lead{margin:8px 0 0;font-size:14.5px}
.form-card__rail{
  background:var(--pergament-2);padding:11px 16px;border-top:1px solid var(--linje);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--aska-mork);
}
.form-card__submit{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field__label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--aska-mork);
}
.field__control{
  display:flex;align-items:center;gap:var(--space-1);
  background:var(--pergament-2);
  border:1px solid var(--linje);border-radius:var(--radius-sm);
  padding:0 12px;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.field__control:focus-within{border-color:var(--oxblod);box-shadow:inset 0 -2px 0 var(--accent-kontrast)}
.field input{
  flex:1;min-width:0;border:0;outline:0;background:transparent;padding:10px 0;
  font-family:var(--font-sans);font-size:14.5px;color:var(--oxblod);
}
.field textarea{
  border:1px solid var(--linje);border-radius:var(--radius-sm);
  background:var(--pergament-2);padding:10px 12px;
  font-family:var(--font-sans);font-size:14.5px;color:var(--oxblod);
  resize:vertical;outline:0;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.field textarea:focus{border-color:var(--oxblod);box-shadow:inset 0 -2px 0 var(--accent-kontrast)}
.field__hint{font-size:12.5px;color:var(--aska-mork)}

.field.is-invalid .field__control,.field.is-invalid textarea{border-color:var(--fel)}
.field.is-invalid .field__hint{color:var(--fel)}

/* Honeypot — dold för människor, ifyllbar för robotar.
   Ingen negativ position: den får aldrig skapa sidled-scroll. */
.hp{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;opacity:0;
}

/* Kvittensläge — sluten mässingsbrygga signalerar aktivt tillstånd.
   Fyller kortet så att ingen tom pergamentyta blir kvar under. */
.receipt{
  flex:1;
  background:var(--djup);color:var(--pergament);
  padding:32px;display:flex;flex-direction:column;gap:12px;
}
.receipt__h{margin-top:8px;font-size:21px;line-height:1.25;color:var(--pergament)}
.receipt__b{margin:0;font-size:14.5px;color:rgba(241,235,225,.82)}
.form-error{
  margin:0;font-size:14.5px;color:var(--fel);
}
[hidden]{display:none !important}

/* --- Sidfot -------------------------------------------------------------- */

.site-footer{background:var(--djup);color:var(--pergament)}
.footer-inner{
  max-width:var(--content-max);margin:0 auto;
  padding:56px var(--page-margin) var(--space-4);
  display:flex;flex-wrap:wrap;gap:var(--space-4);
  justify-content:space-between;align-items:flex-start;
}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-brand .lockup{font-size:26px;color:var(--pergament)}
.footer-brand__meta{
  display:flex;flex-direction:column;gap:4px;
  font-size:13px;color:rgba(241,235,225,.72);
}
.footer-brand__ids{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14.5px;color:var(--pergament)}
.footer-col a:hover{color:var(--accent-kontrast);text-decoration-color:var(--accent-kontrast)}
.footer-col a.mono{font-size:10px;color:rgba(241,235,225,.52)}
.footer-col a.mono:hover{color:var(--accent-kontrast)}

/* --- Textsidor (juridik) ------------------------------------------------- */

.doc{padding:var(--space-5) 0 var(--space-6);max-width:74ch}
.doc h1{font-size:52px;line-height:1.02;letter-spacing:-.035em;margin:16px 0 0}
.doc h2{font-size:21px;line-height:1.35;letter-spacing:-.01em;margin:var(--space-4) 0 0}
.doc h3{font-size:16px;line-height:1.4;letter-spacing:0;margin:var(--space-3) 0 0;font-family:var(--font-sans);font-weight:600}
.doc p{margin:12px 0 0;max-width:var(--measure)}
.doc ul{margin:12px 0 0;padding-left:20px;max-width:var(--measure)}
.doc li{margin:6px 0 0}
/* Understrykningen är enda skillnaden mot brödtexten och bär därför
   länkens synlighet — 1.4.11 gäller, inte bara 4.5:1 för text. */
.doc a{border-bottom:1px solid var(--accent-kontrast)}
.doc a:hover{text-decoration:none;color:var(--accent-kontrast)}
.doc__lead{font-size:21px;line-height:1.45;letter-spacing:-.01em;color:var(--oxblod);margin-top:20px}
.doc__meta{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px solid var(--linje)}
.doc table{
  width:100%;border-collapse:collapse;margin-top:var(--space-2);
  font-size:14.5px;
}
.doc th,.doc td{
  text-align:left;padding:10px 12px 10px 0;
  border-bottom:1px solid var(--linje);vertical-align:top;
}
.doc th{
  font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-mono);
  text-transform:uppercase;color:var(--aska-mork);font-weight:400;
}

/* --- 404 ----------------------------------------------------------------- */

.notfound{
  min-height:calc(100vh - var(--header-h));
  display:flex;align-items:center;
}
.notfound__inner{padding-block:var(--space-6)}
.notfound h1{font-size:92px;line-height:.98;letter-spacing:-.04em;margin:20px 0 0}

/* --- Responsivt ---------------------------------------------------------- */

@media (max-width:1000px){
  .about__grid{gap:var(--space-4)}
  .hero__h1{font-size:9.4vw}
}

@media (max-width:900px){
  .section{padding-block:var(--space-5)}
  .hero{padding-block:var(--space-5) var(--space-4)}
  .hero__h1{font-size:max(40px,13vw);max-width:14ch}
  .hero__sub{font-size:18px}

  /* Delade ytor blir en kolumn — springan behålls som vertikalt mellanrum */
  .plate{flex-direction:column}
  .plate__a{border-radius:var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);min-height:260px}
  .plate__b{border-radius:var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-lg);min-height:220px}
  .verk-plate{aspect-ratio:1.9}

  .about__grid{grid-template-columns:1fr;gap:var(--space-3)}
  .cards{grid-template-columns:1fr}

  .nomi-card{padding:var(--space-3)}
  .nomi-card__grid{grid-template-columns:1fr;gap:var(--space-3)}
  .nomi-card__h{font-size:36px}

  .contact-grid{grid-template-columns:1fr}
  .contact-panel{border-radius:var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);padding:var(--space-3)}
  .form-card{border-radius:var(--radius-sm) var(--radius-sm) var(--radius-lg) var(--radius-lg)}
  .form-card__body{padding:var(--space-3)}

  .doc h1{font-size:11vw}
  .notfound h1{font-size:14vw}
}

@media (max-width:720px){
  :root{--page-margin:20px}

  /* Nav kollapsar till en mono-lista. Utan JS visas listan direkt. */
  .js .nav-toggle{
    display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    background:none;border:1px solid var(--linje);border-radius:var(--radius-sm);
    padding:7px 11px;cursor:pointer;
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:var(--ls-mono);
    text-transform:uppercase;color:var(--aska-mork);
  }
  .js .nav-toggle:hover{border-color:var(--oxblod);color:var(--oxblod)}

  .header-inner{flex-wrap:wrap;padding-top:0;padding-bottom:0}
  .nav{
    order:3;width:100%;margin-left:0;
    flex-direction:column;align-items:flex-start;gap:0;
    border-top:1px solid var(--linje);
    padding:var(--space-2) 0;
  }
  .nav__link{width:100%;padding:10px 0;border-bottom:0}
  .nav__link[aria-current="page"],.nav__link.is-active{border-bottom:0;color:var(--oxblod)}
  .nav__link:hover{border-bottom-color:transparent}
  .lang{border-left:0;padding-left:0;margin-left:0;margin-top:var(--space-2);gap:8px}
  .admin-btn{margin-top:var(--space-2)}

  .js .nav[data-open="false"]{display:none}

  .footer-cols{gap:var(--space-4);width:100%}
  .field-row{grid-template-columns:1fr}
  .contact-panel__mail{font-size:26px}
  .plate__line{font-size:22px}
}

@media (max-width:420px){
  .hero__cta .btn{flex:1 1 100%}
}

/* --- Utskrift ------------------------------------------------------------ */

@media print{
  .site-header,.plate-wrap,.form-card,.skip-link,.nav{display:none !important}
  body{background:#fff;color:#000}
  .products,.site-footer,.contact-panel{background:#fff !important;color:#000 !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}