/* ==========================================================================
   NALLO AI
   Designtokens, komponenter och rörelse. Delas av alla sidor.
   Allt varumärkesberoende bor i :root.
   ========================================================================== */

:root {
  /* ======================================================================
     KALL GRUND, VARM PUNKT

     Hela sidan är kall: blåsvart botten, isiga texter, grå linjer. Det enda
     varma som finns är accenten, och den är reserverad för handling.
     Knappar, den mätta punkten, aktiva lägen. Ingenting annat.

     Det är inte bara smak. På en genomgående kall yta går ögat självmant
     till det enda varma elementet, och det elementet är bokningsknappen.
     Bryter man regeln och målar rubriker eller dekor i accenten slutar den
     peka, och då är hela poängen borta.
     ====================================================================== */

  /* --- Ytor ------------------------------------------------------------ */
  --ink:        #080B0F;
  --surface:    #0F1419;
  --surface-2:  #161D24;
  --line:       #1C242D;
  --line-soft:  #111820;

  /* --- Text ------------------------------------------------------------ */
  --text:       #EEF3F7;
  --text-dim:   #93A3B2;
  --text-mute:  #7C8A97;   /* 4,81:1 mot --surface-2, sämsta läget. AA. */
  --text-ghost: #2F3A45;   /* endast text som ska tändas vid scroll */

  /* --- Accent -----------------------------------------------------------
     Signalorange. Färgen på fjällmarkeringar och mätutrustning, inte på
     lyxvaror. 6,38:1 mot botten, och mörk text på knappen ger 6,53:1.    */
  --accent:     #FF5B35;
  --accent-lit: #FF7554;
  --accent-dim: #C7431F;
  --accent-ink: #0A0604;
  --aurora:     #45E0BE;   /* mätsvepet i höjdmodellen, aldrig som varumärke */

  /* --- Rytm ------------------------------------------------------------ */
  --gutter:      clamp(1.25rem, 5vw, 4.5rem);
  --measure:     62ch;
  --radius:      2px;
  --radius-pill: 999px;

  /* --- Rörelse --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;

  --z-grain: 90;
  --z-header: 100;
  --z-menu: 110;
  --z-intro: 200;
}

/* ==========================================================================
   Reset och bas
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Under introt ska sidan inte gå att rulla */
body.is-intro { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ==========================================================================
   Kornighet
   Ett tunt lager brus över allt. Utan det ser stora mörka ytor
   digitalt platta ut, och det är just den ytan som läser som billig.
   ========================================================================== */

.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: var(--grain-src);
  background-size: 220px 220px;
}

/* ==========================================================================
   Typografi
   ========================================================================== */

.u-display {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.93;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}
.u-display--xl { font-size: clamp(2.5rem, 8.2vw, 8rem); }
.u-display--lg { font-size: clamp(1.875rem, 5.4vw, 4.25rem); }
.u-display--md { font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: -0.01em; }

/* Riktigt stor text för den pinnade utsagan.
   Måste begränsas av BÅDE bredd och höjd. Med enbart vw växer texten ur
   ett lågt fönster och sista raden hamnar utanför skärmen medan sektionen
   står fast, alltså precis när den inte går att rulla förbi. */
.u-display--mega {
  font-size: clamp(2rem, min(8.5vw, 11.5vh), 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.u-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-mute);
  margin: 0;
}
.u-label--accent { color: var(--accent); }
.u-label--aurora { color: var(--aurora); }

.u-lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: var(--measure);
  margin: 0;
}
.u-body { color: var(--text-dim); max-width: var(--measure); margin: 0; }
.u-accent { color: var(--accent); }

/* ==========================================================================
   Layout
   ========================================================================== */

.u-shell { width: 100%; max-width: 88rem; margin-inline: auto; padding-inline: var(--gutter); }
.u-section { padding-block: clamp(5rem, 12vw, 11rem); position: relative; }
.u-rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Linjen efter etiketten dras ut när sektionen kommer in, som ett måttband.
   GSAP når inte pseudoelement, så JS sätter bara klassen och CSS gör resten.
   Utgångsläget är utdraget: utan JS, utan rörelse och i utskrift ska linjen
   finnas där. */
.u-eyebrow { display: flex; align-items: center; gap: 0.875rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.u-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  transform-origin: left;
  transform: scaleX(1);
}
.js-motion .u-eyebrow::after { transform: scaleX(0); }
.js-motion .u-eyebrow.is-drawn::after {
  transform: scaleX(1);
  transition: transform 1100ms var(--ease-out);
}

/* Hårfint rutnät. Fogen ÄR linjen. Får inte heta .grid, Tailwind äger det. */
.u-hairline { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.u-hairline > * { background: var(--ink); transition: background var(--dur-base) var(--ease-out); }
.u-hairline > *:hover { background: var(--surface); }

/* ==========================================================================
   Logotyp
   Toppen och datumlinjen, sedan ordbilden. Samma lockup överallt.
   ========================================================================== */

/* padding-block lyfter klickytan från 22 till 30 px. Headern centrerar sitt
   innehåll, så det syns inte, men fingret hittar rätt. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  padding-block: 0.25rem;
}

/* Märket ligger inline i HTML, inte som <img>. Det kostar några rader men
   ger två saker en bildfil inte kan: det ärver accentfärgen, och strecken
   går att rita upp när sidan laddas. */
.brand__mark {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--accent);
  overflow: visible;
}
.brand__mark path { stroke: currentColor; }
.brand__word {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1;
}
.brand__suffix {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
  align-self: flex-start;
  margin-top: 0.08rem;
}

/* ==========================================================================
   Knappar
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border-radius: var(--radius-pill);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

/* Knappen fylls från vänster i stället för att byta färg rakt av. Samma
   rörelse som mätaren i introt och som förloppslinjen i processen: något
   som fylls upp till en nivå. Ligger på z-index -1 inuti knappens egen
   stackningskontext, alltså ovanför bakgrunden men under texten. */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

.btn--primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--primary::before { background: var(--accent-lit); }
.btn--primary:hover { border-color: var(--accent-lit); }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost::before { background: var(--surface-2); }
.btn--ghost:hover { border-color: var(--text-dim); }

.btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ==========================================================================
   Introt
   Kameran startar nere i terrängen och dras ut. Ligger dold tills JS
   bestämmer att den ska visas, så ett trasigt skript aldrig låser sidan.
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--ink);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}
.intro.is-on { display: flex; }

.intro__line {
  overflow: hidden;
  text-align: center;
}
.intro__line > span { display: block; }

.intro__meter {
  width: min(18rem, 60vw);
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.intro__meter > span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

.intro__skip {
  position: absolute;
  bottom: 2rem;
  right: var(--gutter);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.75rem;
}

/* ==========================================================================
   Header, navigation
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform 400ms var(--ease-out);
}
.site-header[data-scrolled='true'] {
  background: rgba(8, 9, 10, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
/* Åker undan när man rullar nedåt, kommer tillbaka när man rullar upp */
.site-header[data-hidden='true'] { transform: translateY(-100%); }

.nav-link {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.75rem 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0.45rem;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after,
.nav-link[aria-current='page']::after,
.nav-link[aria-current='true']::after { transform: scaleX(1); }
.nav-link[aria-current='page'],
.nav-link[aria-current='true'] { color: var(--text); }

/* Läsförlopp */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: calc(var(--z-header) + 1);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  min-height: 100dvh;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav a {
  font-size: clamp(2rem, 9vw, 3rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  color: var(--text);
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.mobile-menu nav a:hover { color: var(--accent); }

.skip-link {
  position: absolute;
  left: 1rem; top: -100px;
  z-index: 300;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   Hjälten
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-block: 7rem 4.5rem;
}

/* Storleken är provad i bild, inte gissad. Vid 60rem låg massivet halvt utanför
   kanten och läste som ett misstag. Vid 96rem tappar det formen och blir ett
   diffust fält som tränger in på rubriken. 78rem är där det läser som ett
   objekt: stort nog att synas, litet nog att fortfarande vara ett klot. */
.hero__canvas {
  position: absolute;
  top: 50%;
  right: -8%;
  /* Centreringen ligger i translate, inte transform: GSAP animerar transform
     på det här elementet och skulle annars skriva över den. */
  translate: 0 -50%;
  width: min(78rem, 124vw);
  aspect-ratio: 1;
  pointer-events: none;
  mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 34%, transparent 66%);
}


/* På mobil kapas duken till 100 % av hjälten av den globala canvas-regeln,
   och då hamnar massivets mitt rakt på knapparna. Terrängen ska ligga bakom
   innehållet, inte tvärs över det som går att klicka på: så fort en linje
   korsar en knapp läser den som i vägen i stället för som bakgrund.
   Här skjuts den ner och åt höger, och dämpas. Löftesraden ligger ovanpå och
   täcker den nedre delen, vilket är meningen. */
@media (max-width: 767px) {
  .hero__canvas {
    top: 31%;
    right: -18%;
    width: min(78rem, 112vw);
    opacity: 0.5;
  }
}

.hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 40% 45%, #000 15%, transparent 75%);
}


/* ==========================================================================
   MÄTTSTICKAN
   Stänger sidan längst ner i avslutssektionen. Samma idé som datumlinjen i
   märket: ett streck med gradering som allting mäts mot. Strukturell, inte
   dekorativ, och därför tonad i linjefärgen och aldrig i accenten.
   ========================================================================== */

.matt {
  position: relative;
  height: 12px;
  margin-top: clamp(3.5rem, 8vw, 6rem);
  /* Graderingen ligger ett snäpp ljusare än baslinjen. Med båda i --line
     blev strecken osynliga och mätidén läste inte alls. */
  background-image:
    repeating-linear-gradient(to right, #313E4B 0 1px, transparent 1px 44px),
    linear-gradient(#26313C, #26313C);
  background-size: 100% 7px, 100% 1px;
  background-position: 0 5px, 0 11px;
  background-repeat: repeat-x, no-repeat;
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  transform-origin: center;
}

/* Dras ut från mitten när sektionen kommer in. Utgångsläget är utdraget, så
   utan rörelselager finns strecket ändå. */
.js-motion .matt { transform: scaleX(0); }
.js-motion .matt.is-drawn {
  transform: scaleX(1);
  transition: transform 1400ms var(--ease-out);
}

/* ==========================================================================
   Höjdkurvor
   Genereras av JS. Fjället som mätunderlag, inte som fotografi.
   ========================================================================== */

/* Ritas större än sektionen och tonas ut mot kanterna. Utan masken slutar
   kurvorna tvärt vid sektionens kant och läser som en pålagd rektangel i
   stället för som en yta under innehållet. Drivet ovanpå får aldrig avslöja
   en kant, därför överskjutet i inset. */
.contours {
  position: absolute;
  inset: -14% -8%;
  pointer-events: none;
  opacity: 0.85;
  will-change: transform;
  mask-image: radial-gradient(ellipse 68% 62% at 50% 50%, #000 28%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 50%, #000 28%, transparent 76%);
}
.contours path {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.contours path.is-lit { stroke: var(--accent-dim); }

/* ==========================================================================
   Ticker
   ========================================================================== */

.ticker {
  border-block: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  padding-block: 0.75rem;
  position: relative;
}
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__group { display: flex; align-items: center; gap: 3rem; padding-right: 3rem; flex-shrink: 0; }
.ticker__dot { color: var(--accent); }

/* Faller tillbaka på ren CSS om JS inte driver bandet */
.no-js .ticker__track,
.ticker__track[data-css-fallback='true'] { animation: ticker-scroll 46s linear infinite; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Processpåret
   ========================================================================== */

.track { position: relative; }

/* Sätts av JS bara när påret faktiskt fästs. Sektionen tvingas då till exakt
   en skärmhöjd och fördelar utrymmet själv, så inget hamnar utanför vyn. */
.track.is-pinned {
  height: 100dvh;
  padding-block: 6.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.track.is-pinned .track__card { min-height: 0; }

.track__viewport {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.track__viewport::-webkit-scrollbar { display: none; }

.track__rail { display: flex; gap: 1px; background: var(--line); width: max-content; }

.track__card {
  background: var(--ink);
  width: min(30rem, 82vw);
  flex-shrink: 0;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 24rem;
  position: relative;
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-out);
}
.track__card::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out);
}
.track__card.is-active::after { transform: scaleX(1); }
.track__card.is-active { background: var(--surface); }

.track__progress { height: 2px; background: var(--line); position: relative; overflow: hidden; }
.track__progress span {
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}

@media (max-width: 1023px) {
  .track__rail { flex-direction: column; width: 100%; }
  .track__card { width: 100%; min-height: 0; }
  .track__progress { display: none; }
}

/* ==========================================================================
   Utsagan
   Pinnad sektion där texten skalas upp medan man rullar igenom.
   ========================================================================== */

.statement {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--surface);
  border-block: 1px solid var(--line);
  padding-block: 6rem 4rem;   /* fri från headern, och luft i botten */
}

/* ==========================================================================
   Tidslinjen
   ========================================================================== */

.timeline { position: relative; }
.timeline__spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline__spine::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}

.timeline__item {
  position: relative;
  padding-left: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(1.75rem, 4vw, 3rem);
}
.timeline__dot {
  position: absolute;
  left: 0; top: clamp(2.25rem, 4.6vw, 3.6rem);
  width: 9px; height: 9px;
  translate: -50% 0;
  background: var(--ink);
  border: 1px solid var(--text-mute);
  border-radius: 50%;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              scale var(--dur-base) var(--ease-out);
}
.timeline__item.is-lit .timeline__dot {
  background: var(--accent);
  border-color: var(--accent);
  scale: 1.35;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
  padding-block: 1.25rem;
  background: none;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq__trigger:hover { color: var(--accent); }
.faq__icon { flex-shrink: 0; color: var(--accent); transition: transform var(--dur-base) var(--ease-out); }
.faq__trigger[aria-expanded='true'] .faq__icon { transform: rotate(45deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.faq__panel[data-open='true'] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p { color: var(--text-dim); max-width: var(--measure); margin: 0; padding-bottom: 1.75rem; }

/* ==========================================================================
   Formulär (kontaktsidan)
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 0.6rem; }
.field > label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-dim); }
.field__hint { font-size: 0.8125rem; color: var(--text-mute); margin: 0; }

.input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;   /* under 16px zoomar iOS in vid fokus */
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.input::placeholder { color: var(--text-ghost); }
.input:hover { border-color: #33383D; }
.input:focus { border-color: var(--accent); background: var(--surface-2); }
textarea.input { min-height: 9rem; resize: vertical; line-height: 1.6; }

/* ==========================================================================
   Rörelseprimitiv
   ========================================================================== */

/* Radmask: raden skjuts upp bakom en osynlig kant.
   Utgångsläget sätts här, inte i JS, så inget hinner blinka förbi. */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.06em; }
.line-mask > span { display: block; will-change: transform; transform: translateY(115%); }
.no-js .line-mask > span { transform: none; }

/* Ord som tänds när de passerar */
.scrub span { color: var(--text-ghost); }
.no-js .scrub span { color: var(--text-dim); }

[data-reveal] { opacity: 0; transform: translateY(42px); }
[data-hero-fade] { opacity: 0; }

.no-js [data-reveal], [data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-hero-fade], [data-hero-fade].is-revealed { opacity: 1; }

/* ==========================================================================
   Reducerad rörelse
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .intro { display: none !important; }
  .ticker__track { animation: none; transform: none; }
  .grain { display: none; }

  [data-reveal] { opacity: 1; transform: none; }
  [data-hero-fade] { opacity: 1; }
  .line-mask > span { transform: none; }
  .scrub span { color: var(--text-dim); }
  .timeline__item .timeline__dot { background: var(--accent); border-color: var(--accent); }

  .track__rail { flex-direction: column; width: 100%; }
  .track__card { width: 100%; min-height: 0; }
  .track__viewport { overflow: visible; }
  .track__progress { display: none; }
  .statement { min-height: 0; padding-block: 6rem; }
}

/* ==========================================================================
   Utskrift
   ========================================================================== */

@media print {
  body { background: #fff; color: #000; }
  .site-header, .ticker, .mobile-menu, .hero-grid, .hero__canvas,
  .grain, .intro, .progress, .contours { display: none; }
  [data-reveal] { opacity: 1; transform: none; }
  .line-mask > span { transform: none; }
  .scrub span { color: #000; }
}

/* ==========================================================================
   LAYOUT OCH HJÄLPKLASSER
   Ersätter Tailwind. Play-CDN:n låg på cirka 100 kB, kompilerade i
   webbläsaren och skrev en varning i konsolen på varje sidladdning.
   Här ligger exakt de klasser sajten faktiskt använder, inget mer.
   ========================================================================== */

.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.block       { display: block; }
.hidden      { display: none; }

.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-1      { flex: 1; }

.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-end      { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.self-start  { align-self: flex-start; }
.mt-auto     { margin-top: auto; }

.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }
.overflow-hidden { overflow: hidden; }

.w-full   { width: 100%; }
.h-full   { height: 100%; }
.mx-auto  { margin-inline: auto; }
.m-0      { margin: 0; }
.p-0      { padding: 0; }
.list-none { list-style: none; }

.text-center { text-align: center; }
.text-white  { color: var(--text); }
.text-mute   { color: var(--text-mute); }
.text-sm     { font-size: 0.9375rem; }
.font-semibold { font-weight: 600; }

/* Mellanrum. En enda skala, samma steg som i designsystemet. */
.gap-2 { gap: 0.5rem; }   .gap-3 { gap: 0.75rem; }  .gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }   .gap-8 { gap: 2rem; }     .gap-10 { gap: 2.5rem; }

.mt-2 { margin-top: 0.5rem; }   .mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }     .mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }     .mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }    .mt-14 { margin-top: 3.5rem; }
.mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }   .mb-5 { margin-bottom: 1.25rem; }
.mb-7 { margin-bottom: 1.75rem; } .mb-8 { margin-bottom: 2rem; }

.stack > * + * { margin-top: 1.5rem; }
.stack-sm > * + * { margin-top: 0.75rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

.pad { padding: clamp(1.75rem, 3.5vw, 3rem); }

/* Mått på brödtext. Kortare mått läser snabbare i smala spalter. */
.u-measure-sm { max-width: 42ch; }
.u-measure-xs { max-width: 34ch; }
.u-hed-xs { max-width: 13ch; }
.u-hed-sm { max-width: 15ch; }
.u-hed-md { max-width: 16ch; }
.u-hed-lg { max-width: 17ch; }

/* Rutnät. Bryter till en spalt under respektive brytpunkt. */
.u-cols-2, .u-cols-3, .u-split, .u-split--narrow, .u-split--wide, .u-split--media {
  display: grid;
  grid-template-columns: 1fr;
}
.u-cols-2, .u-cols-3 { gap: 1px; }
.u-split, .u-split--narrow, .u-split--wide, .u-split--media { gap: 3rem 5rem; }

@media (min-width: 768px) {
  .u-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .u-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .u-split         { grid-template-columns: 1fr 1fr; }
  .u-split--narrow { grid-template-columns: 0.8fr 1.2fr; }
  .u-split--wide   { grid-template-columns: 1.05fr 1fr; }
  .u-split--media  { grid-template-columns: 0.75fr 1.25fr; }
}

.u-rows-gap { gap: 1.5rem 4rem; }
.u-items-end { align-items: end; }

@media (min-width: 640px)  { .sm\:inline-flex { display: inline-flex; } }
@media (min-width: 1024px) { .lg\:flex { display: flex; } .lg\:hidden { display: none; } }


/* ==========================================================================
   KLIBBIG CTA PÅ MOBIL
   Ligger utanför vyn tills hjältens knapp har rullat förbi. Därefter är det
   aldrig mer än en tumrörelse mellan läsaren och kalendern.
   ========================================================================== */

.cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem var(--gutter);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 9, 10, 0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform 320ms var(--ease-out);
}
.cta-bar[data-shown="true"] { transform: translateY(0); }
.cta-bar__text { min-width: 0; }
.cta-bar__text p { margin: 0; }
.cta-bar .btn { flex-shrink: 0; min-height: 2.875rem; padding-inline: 1.25rem; }

/* Bara mobil och läsplatta. På desktop står knappen alltid kvar i headern. */
@media (min-width: 768px) { .cta-bar { display: none; } }

@media (max-width: 767px) {
  /* Sidfoten får luft så att baren aldrig ligger över sista raden */
  body { padding-bottom: 4.75rem; }
  /* WCAG 2.2: en fast bar i botten får inte täcka det som har
     tangentbordsfokus. Rullningen stannar ovanför baren i stället. */
  html { scroll-padding-bottom: 5.5rem; }
}

/* ==========================================================================
   BRÖDSMULOR
   ========================================================================== */

.crumbs { padding-block: 0.5rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li { display: flex; align-items: center; gap: 0.5rem; }
.crumbs li + li::before {
  content: "/";
  color: var(--text-ghost);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
}
.crumbs a {
  color: var(--text-mute);
  text-decoration: none;
  /* Texten är 11 px och länken blev 18 px hög. WCAG 2.5.8 kräver minst
     24 x 24, och brödsmulor räknas inte som länkar inne i löptext. */
  display: inline-block;
  padding-block: 5px;
  transition: color var(--dur-fast) var(--ease-out);
}
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current="page"] { color: var(--text-dim); }

/* ==========================================================================
   LÖFTESRADEN
   Tre konkreta besked direkt under hjältens knapp: vad det kostar, hur lång
   tid det tar, vad som händer sedan. Tar bort invändningarna innan de hinner
   bli invändningar.
   ========================================================================== */

.promise {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  /* Listan är en ul. Utan nollställningen lämnar webbläsarens egen
     indragning en tom remsa till vänster om första cellen. */
  margin: 2.5rem 0 0;
  padding: 0;
  max-width: 54rem;
}
@media (min-width: 640px) { .promise { grid-template-columns: repeat(3, 1fr); } }

.promise__item {
  background: var(--ink);
  padding: 1.125rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.promise__icon { flex-shrink: 0; color: var(--accent); margin-top: 0.15rem; }
.promise__item p { margin: 0; }
.promise__item strong {
  display: block;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.promise__item span { font-size: 0.8125rem; color: var(--text-mute); line-height: 1.45; }

/* ==========================================================================
   VSL, videons ram
   Renderas bara när det finns en video att visa. Utan källa: ingenting.
   ========================================================================== */

.vsl { max-width: 60rem; margin-inline: auto; }
.vsl__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.vsl__frame iframe,
.vsl__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vsl__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

/* ==========================================================================
   PORTRÄTT
   Monogrammet ligger bakom bilden. Saknas eller havererar filen syns märket
   i stället för en trasig ikon eller en platshållartext.
   ========================================================================== */

.portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}
.portrait__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait__fallback img { width: 34%; opacity: 0.45; }
.portrait img[data-portrait] {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.portrait img[data-portrait][hidden] { display: none; }

/* ==========================================================================
   SMALA SIDOR: 404, tack, integritet
   ========================================================================== */

.plain { padding-block: clamp(8rem, 18vh, 12rem) clamp(5rem, 12vw, 9rem); position: relative; }
.plain__body { max-width: 46rem; }
.plain__body h2 {
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--text);
  margin: 3rem 0 1rem;
  letter-spacing: -0.01em;
}
.plain__body p, .plain__body li { color: var(--text-dim); max-width: var(--measure); }
.plain__body ul { padding-left: 1.1rem; }
.plain__body li { margin-bottom: 0.5rem; }

/* :not(.btn) är inte valfritt. Utan det ärver den gula knappen accentfärgen
   som TEXTfärg, och guld på guld gör etiketten oläslig. */
.plain__body a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   INLINE-LÄNK I BRÖDTEXT
   Egen komponent. .nav-link går inte att återanvända här: dess understrykning
   ligger på ett fast avstånd från en menyrads botten, och mitt i en mening
   hamnar strecket rakt över texten i stället för under.
   ========================================================================== */

.u-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
.u-link:hover { color: var(--accent); text-decoration-color: var(--accent-lit); }

/* Länklista på 404 och tacksidan. Vidare, i stället för återvändsgränd. */
.onward {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 3rem;
}
@media (min-width: 640px) { .onward { grid-template-columns: repeat(2, 1fr); } }
.onward a {
  background: var(--ink);
  padding: 1.5rem 1.5rem 1.625rem;
  text-decoration: none;
  display: block;
  transition: background var(--dur-base) var(--ease-out);
}
.onward a:hover { background: var(--surface); }
.onward strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 0.35rem; }
.onward span { color: var(--text-mute); font-size: 0.875rem; }

/* ==========================================================================
   SAMTYCKE
   GA4 sätter kakor, alltså krävs samtycke innan taggen får laddas. Baren
   ligger i botten och skymmer aldrig hjälten eller knappen.
   ========================================================================== */

.consent {
  position: fixed;
  left: var(--gutter); right: var(--gutter);
  bottom: 1rem;
  z-index: calc(var(--z-header) + 2);
  max-width: 34rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: 1.25rem;
  display: none;
  gap: 1rem;
  flex-direction: column;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}
.consent[data-shown="true"] { display: flex; }
.consent p { margin: 0; font-size: 0.875rem; color: var(--text-dim); }
.consent__row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.consent .btn { min-height: 2.75rem; padding-inline: 1.25rem; }

/* Krockar med den klibbiga CTA-baren på mobil, så den lyfts ovanför */
@media (max-width: 767px) { .consent { bottom: 5.25rem; } }

/* ==========================================================================
   HEDERLIGHETSRADEN
   Inga siffror, inga lånade logotyper. Bara det vi faktiskt står för.
   ========================================================================== */

.stance {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
@media (min-width: 768px) { .stance { grid-template-columns: repeat(3, 1fr); } }
.stance__item { background: var(--ink); padding: 1.75rem var(--gutter); }
.stance__item p { margin: 0.5rem 0 0; color: var(--text-dim); font-size: 0.9375rem; }

/* Honungsfällan mot skräppost. Aldrig synlig, aldrig i tabbordningen. */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Reducerad rörelse: inget ska glida in, men allt ska synas. */
@media (prefers-reduced-motion: reduce) {
  .cta-bar { transition: none; }
}