/* ============================================================
   Fjord & Flint
   Signaturgreppet: en ljuskalla inne i teckningen, och sidan
   svalnar fran 82 till 4 grader medan du scrollar.
   Varden hamtade ur design/01-riktning.md.
   ============================================================ */

:root{
  /* Paletten. Kontrast uppmatt i 01-riktning.md. */
  --kol-varm:#100B09;
  --kol-kall:#070B0E;
  --yta-varm:#191110;
  --yta-kall:#0F1519;
  --ink:#F1ECE4;
  --ink-dim:#A79E93;
  --glod:#FF7A29;
  --frost:#8FD8EE;

  /* Temperaturen. 0 = 82 grader, 1 = 4 grader. Skrivs av app.js. */
  --k:0;

  /* Kurvorna. Tre, med var sitt jobb. 04-rorelse.md. */
  --ut:cubic-bezier(.16,1,.3,1);
  --vand:cubic-bezier(.65,0,.35,1);
  --kort:cubic-bezier(.3,.9,.4,1);

  /* Langderna. En stege, inte ett varde. */
  --t-mikro:180ms;
  --t-tillstand:320ms;
  --t-avtack:720ms;
  --t-entre:900ms;
  --t-ljus:1200ms;

  /* Snitten */
  --display:"Familjen Grotesk",system-ui,-apple-system,sans-serif;
  --brod:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",monospace;

  /* Skalan, i tal. 03-hero.md. */
  --t-hero:clamp(2.9rem,9.4vw,8.75rem);
  --t-h2:clamp(2rem,4.6vw,4rem);
  --t-h3:clamp(1.15rem,1.5vw,1.3125rem);
  --t-txt:clamp(1.0625rem,1rem + .28vw,1.1875rem);
  --t-tal:clamp(2.25rem,5.2vw,4rem);
  --t-mono:.75rem;

  --marg:clamp(20px,4vw,40px);
  --max:1440px;
  --rail:112px;
  --matt:68ch;

  /* Glodens mitt. Ska ligga bakom kaminen i heroritningen, annars
     stammer inte pastaendet om att ljuset kommer darifran.
     Vardena ar i glodlagrets eget koordinatsystem (inset -25%). */
  --gx:53%;
  --gy:73%;
}

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

/* Rutnatsbarn har min-width:auto som standard. Ritningarnas egen
   bredd blaser da upp spalten och sidan blir bredare an skarmen. */
.hero__ram>*,.bygget__rad>*,.offert__rad>*,.drift>*,.stege>*,
.fot__rad>*,.falt__par>*,.val__rad>*{min-width:0}

html{
  background:var(--kol-varm);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--brod);
  font-size:var(--t-txt);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%}
a{color:inherit}

/* ---------- Verktyg ---------- */

.dolj{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.hoppa{
  position:fixed;top:12px;left:12px;z-index:60;
  transform:translateY(-160%);
  background:var(--ink);color:var(--kol-varm);
  padding:12px 18px;border-radius:2px;
  font-family:var(--mono);font-size:.8125rem;text-decoration:none;
  transition:transform var(--t-mikro) var(--kort);
}
.hoppa:focus-visible{transform:none}

:focus-visible{
  outline:2px solid var(--frost);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------- Bakgrunden: signaturgreppets motor ---------- */

.temp{position:fixed;inset:0;z-index:-2;pointer-events:none}
.temp__varm,.temp__kall{position:absolute;inset:0}
.temp__varm{background:var(--kol-varm)}

/* Kalla lagret ligger ovanpa och tonas in med opacitet. Ingen
   bakgrundsfarg animeras nagonstans pa sidan. */
.temp__kall{
  opacity:var(--k);
  background:
    radial-gradient(72vw 54vh at 84% 6%,#16222B 0%,#0C1116 46%,rgba(7,11,14,0) 74%),
    var(--kol-kall);
}

/* Glodén. Taket ar #2A1508, ljusare an sa far ingen bakgrundspixel bli
   utan att damptexten faller under 6:1. */
.temp__glod{
  position:absolute;inset:-25%;
  opacity:calc(1 - var(--k));
  background:radial-gradient(42vw 44vh at var(--gx) var(--gy),#2A1508 0%,#1B0E07 34%,rgba(16,11,9,0) 70%);
  will-change:transform;
}

.korn{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

.defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Ritningarna ---------- */

.ritning svg{display:block;width:100%;height:auto;overflow:visible}

.rit__linje path,.rit__linje circle{
  fill:none;stroke:var(--ink);stroke-width:1.4;
  stroke-linejoin:miter;vector-effect:non-scaling-stroke;
}
.rit__linje .fyll{fill:url(#massiv)}
.rit__linje .tunn{stroke-width:.9;opacity:.5}
.rit__linje .tjock{stroke-width:2.6}
.rit__linje .mark{stroke-width:1;opacity:.42}

/* Mattlinjerna. Vilolage 0,45 for linjer och 0,72 for text.
   0,35 pa texten gav 2,84:1 och foll pa kontrastgrinden. */
.rit__matt path{
  fill:none;stroke:var(--ink);stroke-width:1;
  opacity:.45;vector-effect:non-scaling-stroke;
  transition:opacity var(--t-tillstand) var(--vand);
}
.rit__matt .pil{fill:var(--ink);stroke:none}
.rit__matt text{
  fill:var(--ink);opacity:.72;
  font-family:var(--mono);font-size:15px;font-weight:400;
  letter-spacing:.08em;text-anchor:middle;
  transition:opacity var(--t-tillstand) var(--vand);
}
.ritning:hover .rit__matt path,
.ritning:hover .rit__matt text{opacity:1}

.rit__anga path{
  fill:none;stroke:var(--ink);stroke-width:1.1;opacity:.3;
  stroke-linecap:round;vector-effect:non-scaling-stroke;
}
.rit__vatten path{
  fill:none;stroke:var(--frost);stroke-width:1.6;
  vector-effect:non-scaling-stroke;
}
.rit__vatten .tunn{stroke-width:1;opacity:.45}

.rit__glod{opacity:.9}
.rit__glod--svag{opacity:.34}
.rit__karna{fill:#FFD9A8;opacity:.95}

/* ---------- Navet ---------- */

.nav{position:fixed;top:0;left:0;right:0;z-index:20;height:72px}
.nav::before,.nav::after{content:"";position:absolute;inset:0;pointer-events:none}
.nav::before{
  background:var(--kol-varm);
  border-bottom:1px solid rgba(241,236,228,.13);
  opacity:0;transition:opacity var(--t-tillstand) var(--vand);
}
.nav::after{background:var(--kol-kall);opacity:0}
.nav.fast::before{opacity:1}
.nav.fast::after{opacity:var(--k)}

.nav__rad{
  position:relative;z-index:1;height:100%;
  max-width:var(--max);margin-inline:auto;
  padding-inline:var(--marg);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* Inte flex. Flexbarn slukar mellanrummen och ordbilden blev FJORD&FLINT. */
.ordbild{
  display:inline-block;padding-block:13px;
  font-family:var(--display);font-weight:700;font-size:.9375rem;
  letter-spacing:.2em;text-decoration:none;white-space:nowrap;
}
.ordbild span{color:var(--glod)}

.nav__lankar{display:flex;align-items:center;gap:clamp(18px,2.2vw,34px)}
.nav__lankar a{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;
  text-decoration:none;font-size:.9375rem;color:var(--ink);
}
.nav__lankar a::after{
  content:"";position:absolute;left:0;right:0;bottom:11px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mikro) var(--kort);
}
.nav__lankar a:hover::after{transform:scaleX(1)}

.nav__cta{
  color:var(--glod)!important;
  opacity:0;pointer-events:none;
  transition:opacity var(--t-tillstand) var(--vand);
}
.nav.fast .nav__cta{opacity:1;pointer-events:auto}

.lucka{
  display:none;width:48px;height:48px;margin-right:-12px;
  background:none;border:0;padding:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.lucka__strek{
  display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform var(--t-tillstand) var(--vand);
}
.lucka[aria-expanded="true"] .lucka__strek:first-child{transform:translateY(3.75px) rotate(45deg)}
.lucka[aria-expanded="true"] .lucka__strek:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- Panelen ---------- */

.panel{
  position:fixed;inset:0;z-index:19;
  background:var(--kol-varm);
  padding:104px var(--marg) 40px;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:translateY(-12px);
  transition:opacity 220ms var(--vand),transform 220ms var(--vand);
}
.panel.oppen{opacity:1;transform:none;transition-duration:var(--t-tillstand)}
.panel__lankar{display:flex;flex-direction:column;gap:4px}
.panel__lankar a{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.75rem,8vw,2.5rem);line-height:1.18;
  text-decoration:none;padding:10px 0;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--t-tillstand) var(--ut),transform var(--t-tillstand) var(--ut);
}
.panel.oppen .panel__lankar a{opacity:1;transform:none}
.panel.oppen .panel__lankar a:nth-child(1){transition-delay:40ms}
.panel.oppen .panel__lankar a:nth-child(2){transition-delay:80ms}
.panel.oppen .panel__lankar a:nth-child(3){transition-delay:120ms}
.panel.oppen .panel__lankar a:nth-child(4){transition-delay:160ms}
.panel.oppen .panel__lankar a:nth-child(5){transition-delay:200ms}
.panel__fot{
  font-family:var(--mono);font-size:.8125rem;
  color:var(--ink-dim);margin:0;list-style:none;padding:0;
}
.panel__fot a{
  display:flex;align-items:center;min-height:44px;text-decoration:none;
}
.panel__fot a:hover{color:var(--ink)}

/* Forfattarens display slar UA:s [hidden]. Maste sattas explicit. */
.panel[hidden],.blankett__slut[hidden],.knapp[hidden],.kvitto[hidden]{display:none}

/* ---------- Gradskalan ---------- */

.skala{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  max-width:var(--max);margin-inline:auto;display:none;
}
.skala__linje{
  position:absolute;left:var(--marg);top:20vh;bottom:24vh;width:1px;
  background:
    linear-gradient(rgba(241,236,228,.28),rgba(241,236,228,.28)) left/1px 100% no-repeat;
  transform:scaleY(0);transform-origin:top;
  transition:transform var(--t-entre) var(--ut) 980ms;
}
.skala__linje::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:9px;
  background:repeating-linear-gradient(to bottom,
    rgba(241,236,228,.34) 0 1px,transparent 1px 7.14%);
}
.laddad .skala__linje{transform:scaleY(1)}
.skala__markor{
  position:absolute;left:-1px;width:19px;height:1px;
  background:var(--ink);
  transform:translateY(calc(var(--k) * 56vh));
}
.skala__tal{
  position:absolute;left:calc(var(--marg) + 26px);top:20vh;
  font-family:var(--mono);font-size:clamp(1.5rem,2.2vw,2rem);
  font-weight:500;line-height:1;letter-spacing:-.01em;
  color:var(--ink);margin-top:-.5em;
  transform:translateY(calc(var(--k) * 56vh));
  opacity:0;transition:opacity 400ms var(--ut) 1180ms;
}
.skala__tal i{
  font-style:normal;font-size:.5em;color:var(--ink-dim);
  margin-left:.2em;vertical-align:.9em;
}
.laddad .skala__tal{opacity:1}

/* ---------- Avtackningar ---------- */

.av{
  opacity:0;transform:translateY(18px);
  transition:opacity var(--t-avtack) var(--ut),transform var(--t-avtack) var(--ut);
  transition-delay:calc(min(var(--i,0),5) * 70ms);
}
.av.syns{opacity:1;transform:none}

.laddin{
  opacity:0;transform:translateY(8px);
  transition:opacity 640ms var(--ut) var(--d,0ms),transform 640ms var(--ut) var(--d,0ms);
}
.laddad .laddin{opacity:1;transform:none}

/* Rubrikgreppet. Ett grepp for h1 och h2, inget annat.
   Padding + negativ marginal ger ringen pa A plats i maskrutan. */
.mask{
  display:block;overflow:hidden;
  padding-top:.16em;margin-top:-.16em;
  padding-bottom:.04em;margin-bottom:-.04em;
}
.mask__rad{
  display:block;transform:translateY(106%);
  transition:transform 760ms var(--ut);
  transition-delay:var(--d,0ms);
}
.laddad .hero__rubrik .mask__rad{transform:none}
.rubrik.syns .mask__rad{transform:none}
.rubrik.syns .mask:nth-child(2) .mask__rad{transition-delay:90ms}

/* ---------- Typografi ---------- */

.hero__rubrik,.rubrik{
  font-family:var(--display);font-weight:700;
  margin:0;text-wrap:balance;
}
.hero__rubrik{
  font-size:var(--t-hero);line-height:1.09;letter-spacing:-.025em;
}
.rubrik{
  font-size:var(--t-h2);line-height:1.12;letter-spacing:-.02em;
}

.ogonbryn{
  font-family:var(--mono);font-size:var(--t-mono);font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 clamp(18px,2.4vw,30px);
}
.ogonbryn span + span::before{content:"·";margin:0 .7em;opacity:.55}

.brod{margin:0 0 1.1em;max-width:var(--matt)}
.ingress{
  font-size:clamp(1.1875rem,1.6vw,1.4375rem);line-height:1.5;
  max-width:56ch;margin:clamp(22px,2.6vw,32px) 0 0;color:var(--ink);
}

.lank{
  position:relative;display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;color:var(--glod);font-weight:500;white-space:nowrap;
}
.lank::after{
  content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mikro) var(--kort);
}
.lank:hover::after{transform:scaleX(1)}

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

.knapp{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;
  background:var(--glod);color:var(--kol-varm);
  font-family:var(--brod);font-weight:500;font-size:.9375rem;letter-spacing:.01em;
  text-decoration:none;border:0;border-radius:2px;cursor:pointer;
  transition:transform 90ms var(--kort);
}
.knapp__ring{
  position:absolute;inset:-1px;border:1px solid var(--glod);border-radius:3px;
  opacity:0;transform:scale(1);
  transition:opacity var(--t-mikro) var(--kort),transform var(--t-mikro) var(--kort);
}
.knapp:hover .knapp__ring{opacity:.6;transform:scale(1.045)}
.knapp:active{transform:scale(.985)}
.knapp--kall{background:var(--frost)}
.knapp--kall .knapp__ring{border-color:var(--frost)}

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

.hero{
  position:relative;overflow:hidden;
  min-height:100svh;
  display:flex;align-items:center;
  padding-top:72px;
}
.hero__ram{
  width:100%;max-width:var(--max);margin-inline:auto;
  padding-inline:var(--marg);
  padding-bottom:6vh;
  display:grid;gap:clamp(28px,3vw,56px);align-items:center;
}
.hero__text{position:relative;z-index:2}
.hero__under{
  font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;
  max-width:46ch;color:var(--ink);
  margin:clamp(22px,2.6vw,32px) 0 0;
}
.hero__knappar{
  display:flex;align-items:center;gap:clamp(20px,2.6vw,34px);
  flex-wrap:wrap;margin:clamp(30px,3.4vw,44px) 0 0;
}
.hero__ritning{position:relative}

/* ---------- Sektioner ---------- */

.sek{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  padding-inline:var(--marg);
  scroll-margin-top:88px;
}

/* Rytmen ar medvetet olika per sektion. Samma varde overallt ar
   det som far en sida att se maskinsatt ut. */
.svangen{padding-block:clamp(88px,11vw,132px) clamp(78px,9.5vw,116px)}
.bygget{padding-block:clamp(60px,7.5vw,92px) clamp(112px,14vw,168px)}
.verkstad{padding-block:clamp(120px,15vw,192px)}
.hotell{padding-block:clamp(78px,9vw,108px) clamp(64px,7vw,84px)}
.offert{padding-block:clamp(72px,8vw,100px) clamp(88px,10vw,120px)}

/* ---------- Svangen ---------- */

.stege{
  list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,1.8vw,28px);
}
.stege__steg{
  position:relative;padding-top:20px;
  border-top:1px solid rgba(241,236,228,.2);
  transition:opacity var(--t-tillstand) var(--vand),
             transform var(--t-avtack) var(--ut);
}
.stege__steg::before{
  content:"";position:absolute;left:0;top:0;width:1px;height:11px;
  background:var(--ink);opacity:.55;
}
.stege.rord .stege__steg{opacity:.55}
.stege.rord .stege__steg:hover{opacity:1}
.stege__grad{
  display:block;font-family:var(--mono);font-weight:500;
  font-size:var(--t-tal);line-height:1;letter-spacing:-.03em;
  color:var(--ink);
}
.stege__namn{
  display:block;margin-top:10px;
  font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--glod);
}
.stege__text{
  display:block;margin-top:12px;font-size:.9375rem;line-height:1.5;
  color:var(--ink-dim);max-width:26ch;
}

/* ---------- Bygget ---------- */

.bygget__rad{
  margin-top:clamp(44px,5vw,76px);
  display:grid;grid-template-columns:1.55fr 1fr;
  gap:clamp(32px,4.5vw,80px);align-items:start;
}
.bygg--liten{margin-top:120px}
.bygg__rit{margin-bottom:clamp(22px,2.6vw,34px)}
.bygg__namn{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.125rem);line-height:1.1;
  letter-spacing:-.02em;margin:0;
}
/* Flex sa varje specrad ar en egen brytpunkt. Med nowrap pa inline-span
   och utan mellanslag i kallan fanns ingen brytmojlighet alls, och raden
   sprack ut ur skarmen vid 375. */
.spec{
  display:flex;flex-wrap:wrap;align-items:baseline;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-dim);
  margin:12px 0 0;line-height:1.9;
}
.spec span{white-space:nowrap}
.spec span:not(:last-child)::after{content:"·";margin:0 .55em;opacity:.55}
.bygg__text{margin:18px 0 0;max-width:44ch;color:var(--ink)}
.bygg__pris{
  margin:22px 0 0;font-family:var(--mono);font-size:.9375rem;
  font-weight:500;color:var(--glod);letter-spacing:.02em;
}
.bygget__slut{
  margin:clamp(56px,6vw,88px) 0 0;
  font-size:clamp(1.125rem,1.5vw,1.3125rem);color:var(--ink-dim);
}

/* ---------- Verkstaden ---------- */

.verkstad{overflow:hidden}
.verkstad__ringar{
  position:absolute;left:-18%;top:50%;width:min(62vw,720px);
  transform:translateY(-50%);pointer-events:none;
}
.verkstad__ringar svg{display:block;width:100%;height:auto}
.ring ellipse{
  fill:none;stroke:var(--ink);stroke-width:1;opacity:.17;
  vector-effect:non-scaling-stroke;
}
.spricka path{
  fill:none;stroke:var(--ink);stroke-width:1.2;opacity:.11;
  vector-effect:non-scaling-stroke;
}
.marg{fill:var(--ink);opacity:.24}
.verkstad__spalt{
  position:relative;z-index:1;
  max-width:58ch;margin-left:auto;width:min(100%,58ch);
  margin-right:clamp(0px,6vw,120px);
}
.verkstad__spalt .brod{max-width:58ch}
.pastaenden{
  list-style:none;margin:clamp(32px,3.6vw,46px) 0 0;padding:0;
}
.pastaenden li{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;
  color:var(--ink-dim);padding:14px 0 14px 26px;position:relative;
  border-top:1px solid rgba(241,236,228,.14);
}
.pastaenden li:last-child{border-bottom:1px solid rgba(241,236,228,.14)}
.pastaenden li::before{
  content:"";position:absolute;left:0;top:calc(50% - 1px);
  width:12px;height:1px;background:var(--glod);
}

/* ---------- Hotell ---------- */

.drift{
  margin:clamp(44px,5vw,72px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,48px);
}
.drift__post{
  border-top:1px solid rgba(241,236,228,.2);padding-top:20px;
  transition:opacity var(--t-avtack) var(--ut),transform var(--t-avtack) var(--ut);
}
.drift__tal{
  font-family:var(--mono);font-weight:500;
  font-size:var(--t-tal);line-height:1;letter-spacing:-.03em;
  color:var(--frost);
}
.drift__etikett{
  margin:12px 0 0;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);
}
.hotell__text{
  margin:clamp(44px,5vw,72px) 0 0;
  columns:2;column-gap:clamp(32px,4vw,72px);
}
.hotell__text .brod{max-width:none;break-inside:avoid}
.hotell__cta{margin:clamp(36px,4vw,56px) 0 0}

/* Bevisbilden. Ligger i samma tvaspalt som texten ovanfor, sa knappen
   star kvar dar den stod och fotot fyller den tomma hogerhalvan.
   Ingen aspect-ratio: hojden foljer bildens egna matt via height:auto. */
.hotell__bevis{
  margin:clamp(36px,4vw,56px) 0 0;
  display:grid;grid-template-columns:5fr 7fr;
  gap:clamp(32px,4vw,72px);align-items:start;
}
.hotell__bevis .hotell__cta{margin:0}
.anlaggning{margin:0}
.anlaggning img{
  display:block;width:100%;height:auto;
  border:1px solid rgba(143,216,238,.18);
}
.anlaggning__text{
  margin:14px 0 0;font-family:var(--mono);font-size:var(--t-mono);
  line-height:1.6;letter-spacing:.04em;color:var(--ink-dim);
}

/* ---------- Offert ---------- */

.offert__rad{
  margin-top:clamp(44px,5vw,72px);
  display:grid;grid-template-columns:5fr 7fr;
  gap:clamp(36px,5vw,88px);align-items:start;
}
.vagen{list-style:none;margin:0;padding:0;counter-reset:v}
.vagen li{
  counter-increment:v;position:relative;padding:20px 0 20px 46px;
  border-top:1px solid rgba(241,236,228,.14);
  transition:opacity var(--t-avtack) var(--ut),transform var(--t-avtack) var(--ut);
}
.vagen li:last-child{border-bottom:1px solid rgba(241,236,228,.14)}
.vagen li::before{
  content:counter(v,decimal-leading-zero);
  position:absolute;left:0;top:22px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  color:var(--glod);
}
.vagen h3{
  margin:0;font-family:var(--brod);font-weight:500;
  font-size:var(--t-h3);line-height:1.3;
}
.vagen p{margin:6px 0 0;font-size:.9375rem;line-height:1.5;color:var(--ink-dim)}

.blankett{max-width:640px}
.falt{position:relative;margin-bottom:clamp(24px,2.6vw,32px)}
.falt label{
  display:block;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  margin-bottom:10px;
}
.valfri{text-transform:none;letter-spacing:.04em}
.falt input,.falt textarea{
  display:block;width:100%;
  background:transparent;border:0;
  border-bottom:1px solid rgba(241,236,228,.28);
  color:var(--ink);font-family:var(--brod);font-size:1.0625rem;
  padding:12px 2px;border-radius:0;
  min-height:48px;
}
.falt textarea{resize:vertical;line-height:1.5;min-height:96px}
.falt input::placeholder,.falt textarea::placeholder{color:#8A8177}
.falt input:focus,.falt textarea:focus{outline:none}
.falt input:focus-visible,.falt textarea:focus-visible{
  outline:2px solid var(--frost);outline-offset:4px;
}
.strek{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--frost);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-mikro) var(--kort);
}
.falt:focus-within .strek{transform:scaleX(1)}
.falt__par{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px)}
.fel{
  margin:10px 0 0;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.04em;color:#FF9E6B;
}
.falt.trasig .strek{background:#FF9E6B;transform:scaleX(1)}

.val{border:0;padding:0;margin:0 0 clamp(24px,2.6vw,32px)}
.val legend{
  padding:0;font-family:var(--mono);font-size:var(--t-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);
  margin-bottom:12px;
}
.val__rad{display:flex;flex-wrap:wrap;gap:10px}
.brick{position:relative;display:block}
.brick input{
  position:absolute;inset:0;width:100%;height:100%;
  margin:0;opacity:0;cursor:pointer;
}
.brick span{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;
  border:1px solid rgba(241,236,228,.28);border-radius:2px;
  font-size:.9375rem;color:var(--ink-dim);
  transition:color var(--t-mikro) var(--kort),
             border-color var(--t-mikro) var(--kort);
}
.brick:hover span{border-color:rgba(241,236,228,.5);color:var(--ink)}
.brick input:checked + span{
  color:var(--kol-varm);background:var(--ink);border-color:var(--ink);
}
.brick input:focus-visible + span{outline:2px solid var(--frost);outline-offset:3px}

.blankett__slut{
  display:flex;align-items:center;gap:clamp(20px,2.4vw,32px);
  flex-wrap:wrap;margin-top:clamp(30px,3.4vw,44px);
}
.blankett__villkor{
  margin:0;flex:1 1 260px;
  font-family:var(--mono);font-size:.75rem;line-height:1.8;
  letter-spacing:.02em;color:var(--ink-dim);
}
/* Kvittensen tar knappens plats i samma rad och har samma hojd,
   sa dokumentet inte vaxer en enda pixel nar den byts in. */
.kvitto{
  display:flex;align-items:center;
  min-height:52px;margin:0;padding:0 22px;
  border:1px solid var(--frost);border-radius:2px;
  color:var(--ink);font-size:.9375rem;
}

/* ---------- Foten ---------- */

.fot{
  position:relative;
  max-width:var(--max);margin-inline:auto;
  padding:clamp(64px,7vw,96px) var(--marg) clamp(36px,4vw,52px);
  border-top:1px solid rgba(241,236,228,.14);
}
.fot__ordbild{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.25rem,7.5vw,5.5rem);line-height:1;
  letter-spacing:-.02em;margin:0 0 clamp(44px,5vw,72px);
}
.fot__ordbild span{color:var(--glod)}
.fot__rad{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,48px);
}
.fot__block h2{
  margin:0 0 14px;font-family:var(--mono);font-size:var(--t-mono);
  font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  color:var(--glod);
}
.fot__block p{margin:0;font-size:.9375rem;line-height:1.9;color:var(--ink-dim)}
.fot__lista{list-style:none;margin:0;padding:0}
.fot__lista a{
  display:flex;align-items:center;min-height:44px;
  font-size:.9375rem;color:var(--ink-dim);text-decoration:none;
}
.fot__block a{text-decoration:none}
.fot__block a:hover,.fot__lista a:hover{color:var(--ink)}
.fot__slut{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:clamp(56px,6vw,88px) 0 0;padding-top:22px;
  border-top:1px solid rgba(241,236,228,.14);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;
  color:var(--ink-dim);
}
.fot__demo{color:var(--ink-dim)}

/* ---------- Bottenlisten pa mobil ---------- */

.list{
  position:fixed;left:0;right:0;bottom:0;z-index:18;
  display:none;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--marg);
  background:var(--kol-kall);
  border-top:1px solid rgba(241,236,228,.16);
  transform:translateY(100%);
  transition:transform var(--t-tillstand) var(--vand);
}
.list.syns{transform:none}
.meny-oppen .list{display:none}
.list__grad{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;
  color:var(--ink-dim);white-space:nowrap;
}
.list__grad i{font-style:normal;font-size:1.25rem;color:var(--ink);margin-right:2px}
.list__cta{
  display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 20px;
  background:var(--glod);color:var(--kol-varm);border-radius:2px;
  font-size:.9375rem;font-weight:500;text-decoration:none;white-space:nowrap;
}

/* ============================================================
   Brytpunkter
   ============================================================ */

@media (min-width:900px){
  :root{--marg:clamp(40px,5vw,64px);--gx:72%;--gy:60%}
  .skala{display:block}
  .hero__ram{grid-template-columns:7fr 5fr}
  .sek,.hero__ram,.nav__rad,.fot{padding-left:calc(var(--marg) + var(--rail))}
  .hero__ritning{width:132%;margin-right:-32%}
  .stege{margin-left:16.66%}
}

@media (max-width:899px){
  .nav__lankar{display:none}
  .lucka{display:flex}
  .list{display:flex}
  .fot{padding-bottom:calc(clamp(36px,4vw,52px) + 72px)}

  /* Ritningen far ligga som ritning, inte som spoke bakom brodtexten.
     Ghostad bakom texten blev den brus och at lasbarheten. */
  .hero{min-height:auto;padding-top:96px;padding-bottom:clamp(24px,6vw,48px)}
  .hero__ram{grid-template-columns:1fr;padding-bottom:0;row-gap:clamp(28px,7vw,44px)}
  .hero__ritning{
    position:static;width:132%;margin-left:-16%;
    opacity:1;transform:none;
  }
  .hero__text{position:relative;z-index:2}

  .stege{grid-template-columns:1fr;gap:0;margin-left:0}
  .stege__steg{
    display:grid;grid-template-columns:auto 1fr;
    column-gap:20px;padding:18px 0;
  }
  .stege__grad{font-size:clamp(1.75rem,9vw,2.5rem);min-width:2.6em}
  .stege__namn{grid-column:2;margin-top:0}
  .stege__text{grid-column:2;margin-top:6px;max-width:none}

  .bygget__rad{grid-template-columns:1fr;gap:clamp(56px,9vw,80px)}
  .bygg--liten{margin-top:0;padding-left:24px}
  .rit__matt path,.rit__matt text{opacity:1}

  .verkstad__ringar{
    left:50%;top:50%;width:min(120vw,620px);
    transform:translate(-50%,-50%);opacity:.4;
  }
  .verkstad__spalt{margin-right:0;max-width:none;width:auto}

  .drift{grid-template-columns:1fr;gap:0}
  .drift__post{
    display:flex;align-items:baseline;justify-content:space-between;
    gap:20px;padding:16px 0;
  }
  .drift__tal{font-size:clamp(1.75rem,9vw,2.5rem)}
  .drift__etikett{margin:0;text-align:right}
  .hotell__text{columns:1}
  .hotell__bevis{grid-template-columns:1fr;gap:clamp(36px,6vw,52px)}

  .offert__rad{grid-template-columns:1fr;gap:clamp(44px,7vw,64px)}
  .falt__par{grid-template-columns:1fr}
  .blankett{max-width:none}

  .fot__rad{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width:520px){
  .hero__knappar{gap:20px}
  .knapp{width:100%}
  .ogonbryn--hero span{display:block}
  .ogonbryn--hero span + span::before{content:none}
  .fot__rad{grid-template-columns:1fr;gap:28px}
  .fot__slut{flex-direction:column;gap:10px}
  .blankett__slut{flex-direction:column;align-items:stretch}
  .blankett__slut .knapp{width:100%}
}

/* ============================================================
   Reducerad rorelse. Sidan ska vara hel utan rorelse.
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    transition-delay:0ms!important;
  }
  .av,.laddin{opacity:1;transform:none}
  .mask__rad{transform:none}
  .skala__linje{transform:scaleY(1)}
  .skala__tal{opacity:1}
  .nav__cta{opacity:1;pointer-events:auto}
  .temp__glod{transform:none!important}
}