:root{
  /* =========================
     COLOR SYSTEM
     ========================= */

  /* Document surface (paper) */
  --surface: #e5e5e5;

  /* EDGE ENVIRONMENT COLOR (RGB, no spaces) */
  --edge-color: 81,112,255;

  /* Page width */
  --maxw: 980px;

  /* Match “surface-zone” to container width (responsive + safe) */
  --mid-width: clamp(220px, min(var(--maxw), calc(100vw - 56px)), 980px);

  /* Text */
  --ink: #141414;
  --body: rgba(20,20,20,0.96);
  --muted: rgba(20,20,20,0.96);
  --muted2: rgba(20,20,20,0.96);

  /* Lines */
  --line: rgba(20,20,20,0.40);
  --line2: rgba(20,20,20,0.28);
  --line3: rgba(20,20,20,0.20);

  /* Accent */
  --blue: rgb(82,113,255);

  /* Layout */
  --radius: 18px;

  /* Header thin accent line */
  --header-line-h: 1px;
  --header-line-a: 0.55;
  --header-pad-y: 14px;

  /* Hairline used in h2::after */
  --hairline-strong: rgba(22,22,22,0.18);

  /* =========================
     ENVIRONMENT (pattern layer)
     ========================= */

  /* Blend/strength for the environment layer */
  --env-blend: multiply;   /* normal / multiply / soft-light */
  --env-opacity: 1;      /* JS kan skriva över */

  /* JS drift variables (always defined) */
  --bg-x-l: 0px;
  --bg-x-r: 0px;
  --bg-y: 0px;

  /* =========================
     PATTERN: PLUS / CROSS GRID
     ========================= */

  /* Pattern alpha (how “inked” the pluses are) */
  --dot1-alpha: 1;

  /* Cell size (spacing between symbols) — RESPONSIVE */
  /* (JS läser --dot1-gap för wrap, så detta är nyckeln) */
  --dot1-gap: clamp(12px, 1.4vw, 20px);

  /* Plus symbol geometry — RESPONSIVE */
  --mark-stroke: clamp(1.2px, 0.15vw, 1.9px);
  --mark-arm: clamp(2.8px, 0.30vw, 3.8px);

  /* =========================
     EDGE FADE SHAPE
     (pattern dies toward mid panel)
     ========================= */

  /* Fallback / stilla strand */
  --fade-depth: 360px;

  --fade-c: var(--fade-depth);
  --fade-b: calc(var(--fade-depth) * 0.0);
  --fade-a: calc(var(--fade-depth) * 0.0);


  /* ------------------------------- */

  --rule-bleed-left: 30px;

  /* HERO H1 line */
  --h1-left-alpha: 0.00;
  --h1-left-ramp: 50px;
  --h1-mid-alpha: 1.00;
  --h1-mid-stop: 65%;
  --h1-right-end: 100%;

  /* SECTION H2 line */
  --h2-left-alpha: 0.00;
  --h2-left-ramp: 100px;
  --h2-mid-alpha: 1.00;
  --h2-mid-stop: 35%;
  --h2-right-end: 100%;

  --content-inset: 16px;
}


/* =========================
   BASE + ONE DOT LAYER
   ========================= */
*{ box-sizing:border-box; }
html, body{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html{
  background: var(--surface);
  position: relative;
  isolation: isolate;
}

/* ✅ MÖNSTRET ligger här (och är det enda lagret) */
html::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(to right,
      transparent calc(50% - (var(--mark-stroke) / 2)),
      rgba(var(--edge-color), var(--dot1-alpha)) 0,
      rgba(var(--edge-color), var(--dot1-alpha)) calc(50% + (var(--mark-stroke) / 2)),
      transparent 0
    ),
    linear-gradient(to bottom,
      transparent calc(50% - (var(--mark-stroke) / 2)),
      rgba(var(--edge-color), var(--dot1-alpha)) 0,
      rgba(var(--edge-color), var(--dot1-alpha)) calc(50% + (var(--mark-stroke) / 2)),
      transparent 0
    );

  background-size: var(--dot1-gap) var(--dot1-gap);
  background-repeat: repeat;

  /* JS-styrd drift */
  background-position: var(--bg-x-l, 0px) var(--bg-y, 0px);
;

  will-change: opacity, -webkit-mask-image, mask-image;

  /* Fade mot mitten */
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) var(--fade-a),
    rgba(0,0,0,0.55) var(--fade-b),
    rgba(0,0,0,0.18) var(--fade-c),
    rgba(0,0,0,0.00) calc(50% - (var(--mid-width) / 2))
  );
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) var(--fade-a),
    rgba(0,0,0,0.55) var(--fade-b),
    rgba(0,0,0,0.18) var(--fade-c),
    rgba(0,0,0,0.00) calc(50% - (var(--mid-width) / 2))
  );



  opacity: var(--env-opacity);
  mix-blend-mode: var(--env-blend);
}

html::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(to right,
      transparent calc(50% - (var(--mark-stroke) / 2)),
      rgba(var(--edge-color), var(--dot1-alpha)) 0,
      rgba(var(--edge-color), var(--dot1-alpha)) calc(50% + (var(--mark-stroke) / 2)),
      transparent 0
    ),
    linear-gradient(to bottom,
      transparent calc(50% - (var(--mark-stroke) / 2)),
      rgba(var(--edge-color), var(--dot1-alpha)) 0,
      rgba(var(--edge-color), var(--dot1-alpha)) calc(50% + (var(--mark-stroke) / 2)),
      transparent 0
    );

  background-size: var(--dot1-gap) var(--dot1-gap);
  background-repeat: repeat;

  /* JS-styrd drift */
  background-position: var(--bg-x-r, 0px) var(--bg-y, 0px);

  will-change: opacity, -webkit-mask-image, mask-image;

  /* Fade mot mitten (höger sida) */
  -webkit-mask-image: linear-gradient(90deg,
    rgba(0,0,0,0.00) calc(50% + (var(--mid-width) / 2)),
    rgba(0,0,0,0.18) calc(100% - var(--fade-c)),
    rgba(0,0,0,0.55) calc(100% - var(--fade-b)),
    rgba(0,0,0,1) calc(100% - var(--fade-a)),
    rgba(0,0,0,1) 100%
  );
  mask-image: linear-gradient(90deg,
    rgba(0,0,0,0.00) calc(50% + (var(--mid-width) / 2)),
    rgba(0,0,0,0.18) calc(100% - var(--fade-c)),
    rgba(0,0,0,0.55) calc(100% - var(--fade-b)),
    rgba(0,0,0,1) calc(100% - var(--fade-a)),
    rgba(0,0,0,1) 100%
  );

  opacity: var(--env-opacity);
  mix-blend-mode: var(--env-blend);
}


/* Body ligger ovanpå prick-layern */
body{
  background: transparent;
  position: relative;
  z-index: 1;

  font-family: "Saira", Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.75;
  color: var(--body);

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}


/* =========================
   ENVIRONMENT: DOT FADE ONLY
   (dots ARE the fade)
   ========================= */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* Two dot layers */
}

/* Content must sit above the environment layer */
body > *{ position: relative; z-index: 1; }


/* Ultra-subtil spec-grid (bakom allt) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    repeating-linear-gradient(90deg,
      rgba(22,22,22,0.028) 0,
      rgba(22,22,22,0.028) 1px,
      transparent 1px,
      transparent 72px),
    repeating-linear-gradient(0deg,
      rgba(22,22,22,0.020) 0,
      rgba(22,22,22,0.020) 1px,
      transparent 1px,
      transparent 72px);

  opacity: 0.07;
  z-index: 0; /* above dots, below content */
}


/* Outer container (header/footer rows) */
.container{
  width: min(var(--maxw), calc(100% - 56px));
  margin: 0 auto;
}


/* =========================
   HEADER
   ========================= */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;

  background: var(--surface);
  z-index: 1000;

  padding: var(--header-pad-y) 0;

  box-shadow:
    0 1px 0 rgba(0,0,0,0.08),
    0 8px 24px rgba(0,0,0,0.04);
}



.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-22px;
  height:22px;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    rgba(22,22,22,0.38),
    rgba(22,22,22,0.00)
  );
  opacity: 0.60;
}

.site-header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height: var(--header-line-h);
  pointer-events:none;

  background: linear-gradient(
    90deg,
    rgba(var(--edge-color), 0.00) 0%,
    rgba(var(--edge-color), var(--header-line-a)) 18%,
    rgba(var(--edge-color), var(--header-line-a)) 82%,
    rgba(var(--edge-color), 0.00) 100%
  );
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 0;
}

.brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  border-radius: 12px;
}

.logo{
  height: 50px;              /* behåll samma */
  width: auto;
  display: block;

  transform: translateY(3px) scale(1.50);
  transform-origin: left center;

  filter:
    drop-shadow(0 1px 0 rgba(22,22,22,0.10))
    drop-shadow(0 10px 20px rgba(22,22,22,0.06));
}


.nav-link{
  font-family: "Saira Extra Condensed", Inter, system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;

  color: var(--ink);
  text-decoration: none;

  padding: 10px 12px;
  border-radius: 12px;

  border: 1px solid transparent;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.nav-link:hover{
  background: rgba(22,22,22,0.03);
  border-color: rgba(22,22,22,0.10);
  transform: translateY(-1px);
}

.nav-cta{
  font-size: 15px;
  letter-spacing: 0.18em;
  padding: 12px 18px;
  border: 1px solid rgba(22,22,22,0.22);
  background: var(--surface);
}
.nav-cta:hover{
  background: rgba(81,112,255,0.08);
  border-color: rgba(81,112,255,0.45);
}


/* =========================
   DOCUMENT PANEL
   ========================= */
main.container.doc{
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--surface);
  isolation: isolate;

  border-left: none;
  border-right: none;

  box-shadow:
    0 18px 54px rgba(82,113,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.65);

  padding: 0 22px 34px;
}

main.container.doc::after{ content: none !important; }
main.container.doc::before{ content: none !important; }

main.container.doc > *{
  position: relative;
  z-index: 1;
}


/* =========================
   TYPOGRAPHY / HERO
   ========================= */
h1, h2, h3{ color: var(--ink); margin: 0; }

.hero{
  padding: 88px 0 36px;
}

.meta-row{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 16px;
}

.badge{
  font-family: "Saira Extra Condensed", Inter, system-ui, sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  color: rgba(22,22,22,0.82);
  border: 1px solid rgba(22,22,22,0.28);
  background: rgba(240,240,240,0.88);
  padding: 7px 11px;
  border-radius: 999px;
}

.meta{
  font-family: "Saira Extra Condensed", Inter, system-ui, sans-serif;
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(22,22,22,0.60);
}

.hero h1{
  font-family: Saira, Inter, system-ui, sans-serif;
  font-weight: 200;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1.08;
  letter-spacing: 0.1px;
  margin: 0 0 22px;
  text-wrap: balance;

  position: relative;
  padding-bottom: 28px;
}

.hero h1::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: min(750px, 100%);
  height: 3px;

  background: linear-gradient(90deg,
    rgba(81,112,255,var(--h1-left-alpha)) 0%,
    rgba(81,112,255,var(--h1-mid-alpha)) var(--h1-left-ramp),
    rgba(81,112,255,0.85) var(--h1-mid-stop),
    rgba(81,112,255,0.00) var(--h1-right-end)
  );

  border-radius: 2px;
}

.lead{
  font-size: 1.35rem;
  line-height: 1.85;
  color: rgba(22,22,22,0.88);
  margin: 0 0 40px;
  max-width: 66ch;
}


/* =========================
   SECTIONS + RULES (CLEAN)
   ========================= */
.section{
  padding: 48px 0;
  position: relative;
}

/* Flytta INNEHÅLL i sektion åt höger (utan att påverka regler/linjer) */
.section h2,
.section p,
.section h3,
.section .contact,
.section .bullets{
  padding-left: var(--content-inset);
}

/* Listor: behåll bullet-geometrin men flytta in hela listan */
.section .bullets{
  padding-left: calc(20px + var(--content-inset));
}

/* Section-divider (fullbredd, ingen inset) */
.section .divider{
  margin-left: 0;
}

/* Horisontell rule mellan sektioner (fullbredd) */
.section:not(:last-of-type)::after{
  content:"";
  position:absolute;
  left:-999px;
  right:-999px;
  bottom:-26px;
  height:1px;
  background: rgba(22,22,22,0.14);
}

/* H2 underline: linjen får ligga kvar i “bleed”, men rubriken är inset */
.section h2{
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 16px;
  font-family: Saira, Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.2px;
  margin: 0 0 12px;
}

.section h2::before{
  content:"";
  position:absolute;
  left: calc(var(--rule-bleed-left) * -1);
  bottom:0;
  width: min(540px, 52%);
  height: 2px;

  background: linear-gradient(90deg,
    rgba(81,112,255,var(--h2-left-alpha)) 0%,
    rgba(81,112,255,var(--h2-mid-alpha)) var(--h2-left-ramp),
    rgba(81,112,255,0.80) var(--h2-mid-stop),
    rgba(81,112,255,0.00) var(--h2-right-end)
  );
}

.section h2::after{
  content:"";
  position:absolute;
  left: calc(var(--rule-bleed-left) * -10);
  bottom:0;
  width: 64px;
  height: 2px;
  background: var(--hairline-strong);
  opacity: 0.75;
}


.section p{
  margin: 0;
  max-width: 76ch;
  color: rgba(22,22,22,0.88);

  font-size: 1.20rem;
  line-height: 1.85;
}

.section li{
  font-size: 1.20rem;
  line-height: 1.85;
}


h3{
  font-family: "Saira Extra Condensed", Inter, system-ui, sans-serif;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(22,22,22,0.98);
  margin: 22px 0 10px;
}

.section p em{
  font-style: italic;
  color: rgba(22,22,22,0.98);
}


/* =========================
   GRID / CARDS
   ========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.card{
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--blue);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 22px 22px 20px;
}

.card h2{
  font-family: "Saira Extra Condensed", Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.30rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(22,22,22,0.98);
  margin: 0 0 14px;
}

.card p{
  margin: 0;
  color: rgba(22,22,22,0.90);
  line-height: 1.7;
  font-size: 1.20rem;
}

.card p strong{
  font-weight: 500;
  color: var(--ink);
}


/* =========================
   LISTS / DIVIDERS / LINKS
   ========================= */
.bullets{
  padding-left: 20px;
  margin: 12px 0 0;
}
.bullets li{
  margin: 10px 0;
  color: rgba(22,22,22,0.88);
}
.bullets.muted{
  margin-top: 8px;
}
.bullets.muted li{
  color: rgba(22,22,22,0.88);
}

.divider{
  height: 1px;
  background: rgba(22,22,22,0.12);
  margin: 22px 0;
}

.contact a,
.section a{
  color: rgba(22,22,22,0.92);
  text-decoration: none;
  border-bottom: 2px solid rgba(22,22,22,0.28);
  transition: border-color 160ms ease;
}
.contact a:hover,
.section a:hover{
  border-bottom-color: var(--blue);
}


/* =========================
   FOOTER (FIXED: no double ::after)
   ========================= */
.site-footer{
  position: relative;
  z-index: 20;
  isolation: isolate;

  background: var(--surface);
  border-top: 1px solid rgba(22,22,22,0.10);

  padding: 18px 0;

  color: rgba(22,22,22,0.85);
  font-size: 13px;
  font-weight: 400;
}

/* Fade up into content */
.site-footer::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-22px;
  height:22px;
  pointer-events:none;
  z-index: 2;

  background: linear-gradient(
    to top,
    rgba(22,22,22,0.38),
    rgba(22,22,22,0.00)
  );

  opacity: 0.60;
}

/* Thin highlight line at top of footer */
.site-footer::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  pointer-events:none;
  z-index: 3;

  background: rgba(255,255,255,0.55);
}

.site-footer .container{
  position: relative;
  z-index: 1;
}

.footer-inner{
  display:flex;
  gap: 10px;
  align-items:center;
}
.dot{ opacity: 0.5; }


/* =========================
   REVEAL
   ========================= */
.reveal{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none !important; transform: none !important; }
}


/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 860px){
  .grid{ grid-template-columns: 1fr; }

  .container{ width: min(var(--maxw), calc(100% - 56px)); }

  .hero{ padding-top: 64px; }

  main.container.doc{
    border-left: none;
    border-right: none;
  }

  .section:not(:last-of-type)::after{
    bottom:-18px;
  }

  .section h2::before{
    width: min(420px, 86%);
  }
}
/* =========================
   ACCESSIBILITY: SKIP LINK
   ========================= */
.skip-link{
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 150ms ease;
  z-index: 9999;
}
.skip-link:focus{ transform: translateY(0); }


/* =========================
   OPTIONAL: SECTION WRAPPER
   (safe; doesn't break desktop)
   ========================= */
.section-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (max-width: 480px){
  .section-inner{ padding: 0 18px; }
}


/* =========================
   MOBILE / TABLET PATCH
   (fixes the actual mobile issues)
   ========================= */
@media (max-width: 860px){

  /* Too much inset on mobile: remove it */
  :root{
    --content-inset: 0px;
    --rule-bleed-left: 0px;
  }

  /* Remove extra left padding on mobile */
  .section h2,
  .section p,
  .section h3,
  .section .contact,
  .section .bullets{
    padding-left: 0 !important;
  }

  /* Keep bullets readable */
  .section .bullets{
    padding-left: 20px !important;
  }

  /* Paper panel padding: reduce */
  main.container.doc{
    padding: 0 12px 24px !important;
  }

  /* Container: full width on phones */
  .container{
    width: 100% !important;
  }

  /* Header: prevent overflow */
  .header-inner{
    padding: 10px 0 !important;
  }
  .logo{
    height: 62px !important;
    transform: none !important; /* mobile can't handle scale(1.50) */
  }

  /* Typography */
  .hero{
    padding: 56px 0 24px !important;
  }
  .hero h1{
    font-size: 30px !important;
    line-height: 1.15 !important;
  }
  .lead,
  .section p,
  .section li,
  .card p{
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Grid/cards: stack */
  .grid{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .card{
    padding: 18px 18px 16px !important;
  }

  /* Turn off extra fade overlay helper */
  .fade-edge::after{
    display: none !important;
  }

  /* Reduce “jumpy” feel from reveal */
  .reveal{
    transform: none !important;
  }

  /* Optional: disable background overlays on mobile if they look weird */
  html::before,
  html::after,
  body::after{
    display: none !important;
  }
}

/* iPad: 2-column grid */
@media (min-width: 760px) and (max-width: 1100px){
  .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}