/* =========================================================================
   scrollstyrda scener
   =========================================================================
   js/scroll.js skriver --p (0–1) och --l0…--lN på scenen. All animation
   nedan läser dessa och rör bara transform och opacity.

   SKÄRPEREGEL — gäller varje bild som animeras:
   Elementet ritas i sin STÖRSTA visningsstorlek och skalas sedan bara
   NER. Skalar man upp ett komposit-lager sträcker webbläsaren den redan
   rastrerade texturen, och bilden blir suddig under hela rörelsen även
   om källan är tillräckligt stor. Därför är varje scale() ≤ 1.
   ========================================================================= */

/* Gemensam bas: bilden är större än sin ram och centreras med translate,
   så att nedskalning alltid sker mot mitten. */
.zoom-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.zoom-media > img {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform-origin: center;
  backface-visibility: hidden;
}

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

.hero {
  position: relative;
  height: 178vh;                 /* 100vh scen + 78vh scrollväg */
  background: var(--char-900);
}
@media (max-width: 47.99rem) { .hero { height: 142vh; } }

.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  color: var(--sand-50);
}

.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: hero-settle 2100ms var(--ease-out) both;
}
/* 108 % bas → scale 0.926 ser ut som 100 %, scale 1 som 108 %.
   Zoomen går alltså inåt utan att någonsin skala upp texturen. */
.hero__media img {
  position: absolute;
  top: 50%; left: 50%;
  width: 108%; height: 108%;
  object-fit: cover;
  transform: translate3d(-50%, -50%, 0) scale(calc(0.926 + var(--p, 0) * 0.074));
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

@keyframes hero-settle {
  from { opacity: 0; }
  55%  { opacity: 1; }
  to   { opacity: 1; }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(14, 13, 12, .92) 0%, rgba(14, 13, 12, .26) 54%, rgba(14, 13, 12, .48) 100%),
    linear-gradient(to right, rgba(14, 13, 12, .62), transparent 58%);
  opacity: calc(0.86 + var(--p, 0) * 0.14);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(3rem, 2rem + 5vw, 6.5rem);
  padding-top: 8rem;
  /* Texten lämnar scenen före bilden */
  opacity: calc(1 - var(--p, 0) * 1.8);
  transform: translate3d(0, calc(var(--p, 0) * -56px), 0);
  will-change: transform, opacity;
}

/* Inladdning: etikett, rubrik, ingress, knappar, fot i tur och ordning */
.js .hero__seq > * {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-in 1200ms var(--ease-out) both;
  animation-delay: calc(420ms + var(--i, 0) * 140ms);
}
@keyframes hero-in { to { opacity: 1; transform: none; } }

.hero h1 {
  font-size: var(--t-display);
  line-height: 0.92;
  max-width: 15ch;
  margin: 1.6rem 0 1.5rem;
}
.hero__lead {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, .82);
  max-width: 44ch;
  line-height: 1.5;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); }
.hero__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2.2rem;
  align-items: center;
  margin-top: clamp(2rem, 1.6rem + 2.5vw, 3.2rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, .68);
  list-style: none;
}
.hero__foot li { display: inline-flex; align-items: center; gap: 0.55rem; }
.hero__foot li::before {
  content: "";
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass-400);
}

/* ------------------------------------------------------------------ *
 * Signatursekvensen
 * Fem tempon: Ett objekt · Arkitekturen · Detaljerna · Rummen · Berättelsen
 *
 * Scenen är EN resa, inte fem bilder. Tre rörelser löper samtidigt:
 *   1. Ridåerna drar undan och tar bilden från ett format till helskärm.
 *   2. Varje bild andas — in något större, ut något mindre.
 *   3. Vid ute mot inne öppnar en mask underifrån, texten släcks helt och
 *      navigeringen tonar bort, så att huset äger skärmen ett ögonblick.
 * ------------------------------------------------------------------ */

.seq {
  position: relative;
  height: 620vh;
  background: var(--char-900);
}
@media (max-width: 61.99rem) { .seq { height: 430vh; } }

.seq__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  color: var(--sand-50);

  /* Ridåerna är helt öppna efter 38 % av scenen */
  --open: clamp(0, calc(var(--p, 0) / 0.38), 1);
  /* Maskens egen, enkelriktade väg genom ute mot inne */
  --mask: clamp(0, calc((var(--p, 0) - 0.55) / 0.17), 1);
  /* De övriga bildbytena är korta, ogenomskinliga ridåer. Det nya
     fotografiet sveper över det gamla i stället för att blandas med det. */
  --wipe-1: clamp(0, calc((var(--p, 0) - 0.13) / 0.12), 1);
  --wipe-2: clamp(0, calc((var(--p, 0) - 0.33) / 0.12), 1);
  --wipe-4: clamp(0, calc((var(--p, 0) - 0.73) / 0.12), 1);
  /* Toppar exakt där lager 3 och 4 möts — noll på båda sidor */
  --cross: clamp(0, calc(var(--l2, 0) * var(--l3, 0) * 4), 1);
}

.seq__layers { position: absolute; inset: 0; }

.seq__layer {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  opacity: 1;
}
/* 114 % bas, scale aldrig över 1 — texturen skalas bara ner */
.seq__layer img {
  position: absolute;
  top: 50%; left: 50%;
  width: 114%; height: 114%;
  object-fit: cover;
  transform: translate3d(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)), 0) scale(var(--s, 1));
  transform-origin: center;
  backface-visibility: hidden;
}
.seq__stage.is-live .seq__layer img { will-change: transform; }

/* Täckande avslöjande, inte crossfade — men med mjuk kant.
   Se den utförliga motiveringen i css/objekt.css: clip-path gav en
   knivskarp linje mellan två olika motiv, och riktningarna växlade så
   att sekvensen läste som ett effektpaket. Samma toningsmask används
   här, med samma stigande riktning, så att startsidan och objektsidan
   talar samma språk. */
.seq__layer:nth-of-type(2) { --avsloj: var(--wipe-1); }
.seq__layer:nth-of-type(3) { --avsloj: var(--wipe-2); }
.seq__layer:nth-of-type(5) { --avsloj: var(--wipe-4); }

.seq__layer:nth-of-type(2),
.seq__layer:nth-of-type(3),
.seq__layer:nth-of-type(5) {
  --mjuk: 4%;   /* se motiveringen i css/objekt.css */
  -webkit-mask-image: linear-gradient(to top,
    #000 calc(var(--avsloj, 0) * (100% + var(--mjuk)) - var(--mjuk)),
    transparent calc(var(--avsloj, 0) * (100% + var(--mjuk))));
  mask-image: linear-gradient(to top,
    #000 calc(var(--avsloj, 0) * (100% + var(--mjuk)) - var(--mjuk)),
    transparent calc(var(--avsloj, 0) * (100% + var(--mjuk))));
}

.seq__layer:nth-of-type(1) img { --s: calc(1 - var(--l0, 1) * 0.08); }
.seq__layer:nth-of-type(2) img { --s: calc(1 - var(--l1, 0) * 0.08); --dy: calc(var(--l1, 0) * -2vh); }
.seq__layer:nth-of-type(4) img { --s: calc(1 - var(--l3, 0) * 0.08); --dy: calc((1 - var(--l3, 0)) * 3vh); }
.seq__layer:nth-of-type(5) img { --s: calc(1 - var(--l4, 0) * 0.08); }

/* Detaljerna: bilden vandrar mot bryggan medan ordet skrivs ut. Här
   ritas bilden extra stor, annars tar överskottet slut mitt i rörelsen. */
.seq__layer--pan img {
  width: 124%; height: 124%;
  --s: calc(1 - var(--l2, 0) * 0.05);
  --dx: calc(var(--l2, 0) * -4.5vw);
  --dy: calc(var(--l2, 0) * 2.5vh);
}

/* Ute mot inne. Masken går bara en väg och stannar öppen.
   Lagret korsfadar INTE — det vore två halvgenomskinliga bilder ovanpå
   varandra. I stället sveper det in med full täckning. */
.seq__layer.seq__layer--mask {
  opacity: 1;
  clip-path: inset(calc((1 - var(--mask)) * 100%) 0 0 0);
}

/* Mässingslinjen som rider på maskens kant */
.seq__edge {
  position: absolute;
  z-index: 2;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--brass-400) 22%, var(--brass-400) 78%, transparent);
  opacity: calc(var(--cross) * 0.9);
  transform: translate3d(0, calc((1 - var(--mask)) * 100svh), 0);
  pointer-events: none;
}

.seq__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Första gradienten gick tidigare .9 → .18 → .32 hela vägen upp, alltså
     en 32-procentig hinna över himlen i varje bild i sekvensen. Den fanns
     för att bära den fasta navigeringen, men den bar hela fotot på köpet.
     Nu två separata band: ett smalt i toppen för navigeringen och ett i
     botten för texten. Mellan 18 % och 52 % av höjden ligger bilden helt
     orörd. De två sidogradienterna var redan lokala och står kvar. */
  background:
    linear-gradient(to bottom, rgba(14, 13, 12, .30) 0%, rgba(14, 13, 12, 0) 18%),
    linear-gradient(to top, rgba(14, 13, 12, .90) 0%, rgba(14, 13, 12, .34) 26%, rgba(14, 13, 12, 0) 52%),
    linear-gradient(to right, rgba(14, 13, 12, .7), transparent 58%),
    /* håller förloppslinjen läsbar även mot en ljus himmel */
    linear-gradient(to left, rgba(14, 13, 12, .5), transparent 22%);
  /* När texten är släckt behöver bilden inget raster alls */
  opacity: calc(1 - var(--cross) * 0.6);
}

/* --- Ridåerna ----------------------------------------------------- */

.seq__bars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.seq__bar {
  position: absolute;
  display: block;
  background: var(--char-900);
  will-change: transform;
}
/* Startläget var 15vh / 27vh / 16vw — bildytan blev 974×530 i en vy på
   1440×900, alltså fyrtio procent svart ridå runt om. Det läste inte som
   en film som ska öppna sig utan som ett mellanstort bildblock placerat
   i ett stort svart fält, och den känslan uppstod innan animationen ens
   börjat. Nu öppnar sekvensen på 84 % bredd: tillräckligt smalt för att
   ridåerna ska ha någonstans att ta vägen, brett nog för att första
   bildrutan ska läsa som film.
   Underkanten är fortfarande djupast — där står texten. */
.seq__bar--t { top: 0; left: 0; right: 0; height: 7vh;  transform: translate3d(0, calc(var(--open) * -101%), 0); }
.seq__bar--b { bottom: 0; left: 0; right: 0; height: 15vh; transform: translate3d(0, calc(var(--open) * 101%), 0); }
.seq__bar--l { top: 0; bottom: 0; left: 0; width: 8vw;  transform: translate3d(calc(var(--open) * -101%), 0, 0); }
.seq__bar--r { top: 0; bottom: 0; right: 0; width: 8vw;  transform: translate3d(calc(var(--open) * 101%), 0, 0); }

/* --- Text ---------------------------------------------------------- */

.seq__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: clamp(2.5rem, 2rem + 3vw, 5rem);
  /* Texten släcks helt i det ögonblick huset öppnar sig inåt */
  opacity: calc(1 - var(--cross) * 1.15);
  will-change: opacity;
}

.seq__label {
  color: rgba(255, 255, 255, .68);
  margin-bottom: 1.6rem;
  opacity: calc(1 - var(--p, 0) * 3.4);
}

.seq__lines {
  position: relative;
  height: clamp(3.6rem, 2.2rem + 8vw, 8.5rem);
  margin-bottom: 0.6rem;
}
.seq__line {
  position: absolute;
  left: 0; bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.4rem + 5.4vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  will-change: transform, opacity;
}
/* Orden klipper efter varandra med en mycket kort mörk bildruta emellan.
   Två stora serifrader får aldrig ligga ovanpå varandra. */
.seq__line:nth-child(1) { opacity: clamp(0, calc((.135 - var(--p, 0)) * 40), 1); transform: none; }
.seq__line:nth-child(2) { opacity: clamp(0, min(calc((var(--p, 0) - .145) * 40), calc((.335 - var(--p, 0)) * 40)), 1); transform: none; }
.seq__line:nth-child(3) { opacity: clamp(0, min(calc((var(--p, 0) - .345) * 40), calc((.535 - var(--p, 0)) * 40)), 1); transform: none; }
.seq__line:nth-child(4) { opacity: clamp(0, min(calc((var(--p, 0) - .545) * 40), calc((.735 - var(--p, 0)) * 40)), 1); transform: none; }
.seq__line:nth-child(5) { opacity: clamp(0, calc((var(--p, 0) - .745) * 40), 1); transform: none; }

.seq__texts { position: relative; min-height: 5.5rem; max-width: 42ch; }
.seq__text {
  position: absolute;
  left: 0; top: 0;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.seq__text:nth-child(1) { opacity: clamp(0, calc((.135 - var(--p, 0)) * 40), 1); }
.seq__text:nth-child(2) { opacity: clamp(0, min(calc((var(--p, 0) - .145) * 40), calc((.335 - var(--p, 0)) * 40)), 1); }
.seq__text:nth-child(3) { opacity: clamp(0, min(calc((var(--p, 0) - .345) * 40), calc((.535 - var(--p, 0)) * 40)), 1); }
.seq__text:nth-child(4) { opacity: clamp(0, min(calc((var(--p, 0) - .545) * 40), calc((.735 - var(--p, 0)) * 40)), 1); }
.seq__text:nth-child(5) { opacity: clamp(0, calc((var(--p, 0) - .745) * 40), 1); }

/* --- Förloppslinje -------------------------------------------------- */

.seq__rail {
  --rail-h: min(46vh, 21rem);
  position: absolute;
  right: var(--gutter);
  top: 50%;
  z-index: 4;
  display: none;
  grid-template-columns: auto 1px;
  gap: 1.15rem;
  height: var(--rail-h);
  transform: translateY(-50%);
  opacity: calc(1 - var(--cross) * 0.9);
}
@media (min-width: 62rem) { .seq__rail { display: grid; } }

.seq__steps {
  display: grid;
  align-content: space-between;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.seq__step {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.55rem;
  font-size: 0.6875rem;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  white-space: nowrap;
  /* Kommande steg ligger kvar på 0,10. Passerade lyfts till 0,34 av
     regeln nedan, och det aktiva lyser upp kontinuerligt. */
  color: rgba(255, 255, 255, calc(var(--floor, .10) + var(--a, 0) * 0.9));
  transition: color 420ms var(--ease-out);
}
.seq__step b { font-weight: 500; font-variant-numeric: tabular-nums; opacity: .55; }

.seq__step:nth-child(1) { --a: var(--l0, 1); }
.seq__step:nth-child(2) { --a: var(--l1, 0); }
.seq__step:nth-child(3) { --a: var(--l2, 0); }
.seq__step:nth-child(4) { --a: var(--l3, 0); }
.seq__step:nth-child(5) { --a: var(--l4, 0); }

.seq__stage[data-step="1"] .seq__step:nth-child(-n+1),
.seq__stage[data-step="2"] .seq__step:nth-child(-n+2),
.seq__stage[data-step="3"] .seq__step:nth-child(-n+3),
.seq__stage[data-step="4"] .seq__step:nth-child(-n+4) { --floor: .34; }

.seq__track {
  position: relative;
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, .13);
}
.seq__track i {
  position: absolute;
  inset: 0;
  background: var(--brass-400);
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
/* Ljuspunkten i linjens framkant */
.seq__track::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 5px; height: 5px;
  margin: -2px 0 0 -2.5px;
  border-radius: 50%;
  background: var(--brass-400);
  transform: translate3d(0, calc(var(--p, 0) * var(--rail-h)), 0);
}

/* Mobilens motsvarighet: en hårfin linje längst ned i scenen */
.seq__bar-progress {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .12);
}
.seq__bar-progress i {
  position: absolute;
  inset: 0;
  background: var(--brass-400);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
@media (min-width: 62rem) { .seq__bar-progress { display: none; } }

/* --- Avslut --------------------------------------------------------- */

.seq__end {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  align-items: center;
  opacity: var(--l4, 0);
  transform: translate3d(0, calc((1 - var(--l4, 0)) * 22px), 0);
  pointer-events: none;
}
.seq__stage[data-step="4"] .seq__end { pointer-events: auto; }
.seq__meta {
  flex: 0 0 100%;
  font-size: 0.75rem;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* Navigeringen kliver undan när huset öppnar sig */
body:has(.seq__stage[data-step="3"]) .nav { opacity: 0; pointer-events: none; }

.is-static .seq__end { opacity: 1; transform: none; pointer-events: auto; }
.is-static .seq__line:nth-child(n+2),
.is-static .seq__text:nth-child(n+2) { display: none; }
.is-static .seq__layer--mask { clip-path: none; opacity: 0; }
.is-static .seq__bars,
.is-static .seq__rail,
.is-static .seq__bar-progress,
.is-static .seq__edge { display: none; }

/* ------------------------------------------------------------------ *
 * Bild som växer till helskärm
 * ------------------------------------------------------------------ */

.expand {
  position: relative;
  overflow: hidden;
  /* Öppningen är klar när sektionen står mitt i vyn, inte när den lämnar */
  --e: clamp(0, calc((var(--p, 0) - 0.16) / 0.34), 1);
}
/* Ramen har fast proportion. Ingen bredd animeras, alltså inget omräknat
   layoutarbete per bildruta — bara fyra ridåer som glider undan. */
.expand__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.expand__media { position: absolute; inset: 0; }
/* 112 % bas, scale 1 → 0.893. Aldrig över 1. */
.expand__media img {
  position: absolute;
  top: 50%; left: 50%;
  width: 112%; height: 112%;
  object-fit: cover;
  transform: translate3d(-50%, -50%, 0) scale(calc(1 - var(--e) * 0.107));
  transform-origin: center;
  backface-visibility: hidden;
  will-change: transform;
}

.expand__bars { position: absolute; inset: 0; pointer-events: none; }
.expand__bar { position: absolute; display: block; background: var(--bg); will-change: transform; }
.expand__bar--t { top: 0; left: 0; right: 0; height: 15%; transform: translate3d(0, calc(var(--e) * -101%), 0); }
.expand__bar--b { bottom: 0; left: 0; right: 0; height: 15%; transform: translate3d(0, calc(var(--e) * 101%), 0); }
.expand__bar--l { top: 0; bottom: 0; left: 0; width: 21%; transform: translate3d(calc(var(--e) * -101%), 0, 0); }
.expand__bar--r { top: 0; bottom: 0; right: 0; width: 21%; transform: translate3d(calc(var(--e) * 101%), 0, 0); }

/* Texten viker undan medan bilden tar över */
.expand__cap {
  margin-top: 1.4rem;
  max-width: 44ch;
  color: var(--fg-muted);
  font-size: var(--t-lead);
  line-height: 1.6;
  /* Texten kommer fram när bilden är helt öppen, i stället för att
     försvinna precis när man vill läsa den. */
  opacity: clamp(0, calc((var(--e) - 0.55) * 2.6), 1);
  transform: translate3d(0, calc((1 - var(--e)) * 18px), 0);
}
@media (max-width: 47.99rem) {
  .expand__frame { aspect-ratio: 4 / 3; }
  .expand__bar--l, .expand__bar--r { width: 7%; }
  .expand__bar--t, .expand__bar--b { height: 8%; }
}

/* ------------------------------------------------------------------ *
 * Parallax
 * ------------------------------------------------------------------ */

.par-media { overflow: hidden; }
.par-media img {
  width: 100%;
  height: 114%;
  object-fit: cover;
  transform: translate3d(0, var(--par, 0), 0);
  backface-visibility: hidden;
  will-change: transform;
}

/* ------------------------------------------------------------------ *
 * Maskavtäckning
 * ------------------------------------------------------------------ */

.js .mask-reveal { clip-path: inset(0 0 100% 0); }
.js .mask-reveal img { transform: scale(1); }
.js .mask-reveal,
.js .mask-reveal img {
  transition: clip-path 1500ms var(--ease-out) var(--reveal-delay, 0ms),
              transform 1900ms var(--ease-out) var(--reveal-delay, 0ms);
}
.js .mask-reveal.is-revealed { clip-path: inset(0 0 0 0); }
/* Bilden är 106 % bred och skalas ner till 100 % — aldrig upp */
.js .mask-reveal img {
  width: 106%;
  height: 106%;
  position: absolute;
  top: 50%; left: 50%;
  object-fit: cover;
  transform: translate3d(-50%, -50%, 0) scale(1);
  backface-visibility: hidden;
}
.js .mask-reveal.is-revealed img { transform: translate3d(-50%, -50%, 0) scale(0.943); }

/* ------------------------------------------------------------------ *
 * Små skärmar: egen regi, inte desktop ihoptryckt
 * ------------------------------------------------------------------ */

@media (max-width: 47.99rem) {
  .hero__inner { padding-top: 5rem; padding-bottom: 2rem; }
  .hero h1 { margin: 1.1rem 0 1rem; }
  .hero__cta { margin-top: 1.3rem; gap: 0.6rem; }
  .hero__cta .btn { width: 100%; }
  .hero__foot { margin-top: 1.5rem; padding-top: 1.1rem; gap: 0.5rem 1.6rem; }

  /* Mindre zoom och kortare väg — rörelse på mobil ska antydas, inte köras */
  .hero__media img { width: 104%; height: 104%; transform: translate3d(-50%, -50%, 0) scale(calc(0.962 + var(--p, 0) * 0.038)); }

  /* --- Sekvensen på mobil ---
     Samma fem tempon, men kortare väg, snabbare ridå, mindre förflyttning
     och en ram som lämnar mer plats åt texten under bilden. */
  .seq__stage {
    --open: clamp(0, calc(var(--p, 0) / 0.30), 1);
    --mask: clamp(0, calc((var(--p, 0) - 0.54) / 0.20), 1);
  }
  /* Mobilen öppnar nästan direkt i fullbredd — på 390 px finns ingen
     bredd att offra på ridåer. */
  .seq__bar--t { height: 5vh; }
  .seq__bar--b { height: 18vh; }
  .seq__bar--l, .seq__bar--r { width: 3vw; }

  /* Varje lager har numera en egen stående fil, beskuren i pipelinen ur
     originalet i 8000 px. object-position behövs därför inte längre — och
     ska inte finnas kvar, eftersom den skulle förskjuta en beskärning som
     redan är komponerad för telefonen. */
  .seq__layer img { width: 108%; height: 108%; }
  .seq__layer:nth-of-type(1) img { --s: calc(1 - var(--l0, 1) * 0.045); }
  .seq__layer:nth-of-type(2) img { --s: calc(1 - var(--l1, 0) * 0.045); --dy: calc(var(--l1, 0) * -1vh); }
  .seq__layer:nth-of-type(4) img { --s: calc(1 - var(--l3, 0) * 0.045); --dy: calc((1 - var(--l3, 0)) * 1.5vh); }
  .seq__layer:nth-of-type(5) img { --s: calc(1 - var(--l4, 0) * 0.045); }
  .seq__layer--pan img {
    width: 120%; height: 120%;
    --s: calc(1 - var(--l2, 0) * 0.035);
    --dx: calc(var(--l2, 0) * -4vw);
    --dy: calc(var(--l2, 0) * 1.5vh);
  }

  .seq__inner { padding-block: 1.6rem 2.4rem; }
  .seq__label { margin-bottom: 1rem; }
  .seq__lines { height: 3.4rem; margin-bottom: 0.5rem; }
  .seq__line { font-size: 2.375rem; letter-spacing: -0.03em; }
  .seq__texts { min-height: 4.75rem; max-width: 30ch; }
  .seq__text { font-size: 1rem; line-height: 1.45; }
  .seq__end { margin-top: 1.2rem; gap: 0.7rem 1rem; }
  .seq__end .btn { width: 100%; }
  .seq__meta { font-size: 0.6875rem; }

  .expand__media img { width: 106%; height: 106%; transform: translate3d(-50%, -50%, 0) scale(calc(1 - var(--e) * 0.057)); }
  .par-media img { height: 106%; }
}

/* Låga skärmar: rubriken får inte tränga undan bilden helt */
@media (max-width: 47.99rem) and (max-height: 44rem) {
  .seq__bar--b { height: 26vh; }
  .seq__lines { height: 3rem; }
  .seq__line { font-size: 2.125rem; }
  .seq__texts { min-height: 4rem; }
}

@media (max-height: 40rem), (max-width: 20.5rem) {
  .hero__foot { display: none; }
}

/* ------------------------------------------------------------------ *
 * Nedtonad rörelse
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .hero, .seq { height: auto; }
  .hero__stage, .seq__stage { position: relative; height: 100svh; }
  .hero__media, .js .hero__seq > * { animation: none; opacity: 1; transform: none; }
  .seq__layer img,
  .expand__media img,
  .js .mask-reveal img { transform: translate3d(-50%, -50%, 0) !important; }
  .par-media img { transform: none !important; height: 100%; }
  .hero__media img { width: 100%; height: 100%; top: 0; left: 0; transform: none !important; }
  .hero__inner, .expand__cap, .seq__inner, .seq__label { opacity: 1 !important; transform: none !important; }
  .js .mask-reveal { clip-path: none !important; }
  .seq__layer--mask { clip-path: none !important; }
  /* Ridåer, förloppslinje och maskkant hör till rörelsen och tas bort helt */
  .seq__bars, .seq__rail, .seq__bar-progress, .seq__edge,
  .expand__bars { display: none !important; }
}

/* ------------------------------------------------------------------ *
 * Mobil hero — egen art direction, inte desktop ihoptryckt
 * ------------------------------------------------------------------ */

@media (max-width: 47.99rem) {
  /* Rastret bar tidigare hela bilden: .42 även i toppen, .62 mitt i.
     Det gjorde ett ljust hus i kvällssol grått. Nu är det två LOKALA
     band — ett smalt i toppen som bara bär wordmarken, ett i botten
     som bara bär copyn. Mellan 30 % och 62 % av höjden ligger fotot
     helt orört, och det är exakt där glaspartiet och taklinjen sitter.
     Huset först, texten sedan. */
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        rgba(14, 13, 12, .34) 0%,
        rgba(14, 13, 12, .10) 16%,
        rgba(14, 13, 12, 0)   30%),
      linear-gradient(to top,
        rgba(14, 13, 12, .95) 0%,
        rgba(14, 13, 12, .86) 20%,
        rgba(14, 13, 12, .58) 33%,
        rgba(14, 13, 12, .20) 45%,
        rgba(14, 13, 12, 0)   58%);
    opacity: calc(0.94 + var(--p, 0) * 0.06);
  }

  /* Rubriken ner tolv procent (40,2 → 35,4 px) och radavståndet
     hårdare. Marginalerna runt den var satta för desktoprytm och
     kostade nästan 60 px i ett block som redan tog för mycket. */
  .hero h1 {
    font-size: clamp(2.1rem, 1rem + 5.05vw, 2.7rem);
    line-height: 0.96;
    letter-spacing: -0.026em;
    max-width: none;
    margin: 0.7rem 0 0.65rem;
    text-wrap: balance;
  }
  /* Ingressen sa "Fristående digitala presentationer" direkt under
     etiketten "DIGITALA OBJEKTSPRESENTATIONER" — samma ord två gånger
     i samma vy. Den meningen är struken; kvar står bara löftet.
     Fyra rader blev två. */
  .hero__lead {
    font-size: 1rem;
    line-height: 1.45;
    max-width: 28ch;
    color: rgba(255, 255, 255, .78);
  }

  /* CTA:n var en vit fylld knapp i full bredd — 57 px hög och det
     tyngsta elementet i hela vyn. En SaaS-knapp mitt i en
     fastighetskampanj. Nu: hårfin ram, egen bredd, ingen fyllning.
     Fortfarande otvetydigt en knapp, men den tar plats efter huset. */
  .hero__cta { flex-direction: row; align-items: center; gap: 0.65rem; margin-top: 1.15rem; }
  .hero__cta .btn--solid {
    width: auto;
    background: transparent;
    color: var(--sand-50);
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 2px;
    padding: 0.82rem 1.35rem;
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    box-shadow: none;
  }
  .hero__cta .btn--solid:hover,
  .hero__cta .btn--solid:active {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .78);
    color: #fff;
  }

  /* Fotnoten: en rad, inte tre ojämna */
  .hero__foot {
    gap: 0.4rem 1.2rem;
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, .6);
  }
  .hero__foot li:nth-child(n+4) { display: none; }
}

@media (max-width: 47.99rem) {
  /* Den stående beskärningen har mycket himmel i toppen. Bilden görs
     högre än scenen och skjuts uppåt, så att himlen beskärs bort och
     huset flyttar upp i bild. */
  .hero__media img {
    height: 118%;
    transform: translate3d(-50%, -56%, 0) scale(calc(0.962 + var(--p, 0) * 0.038));
  }
  /* Två poster får plats på en rad; tre gav en ojämn andra rad */
  .hero__foot li:nth-child(n+3) { display: none; }
}

/* ------------------------------------------------------------------ *
 * Utan JavaScript
 * Ridåerna öppnas av scrollmotorn. Kör den inte ska de inte finnas,
 * annars blir bilderna instängda i en ram som aldrig öppnar sig.
 * ------------------------------------------------------------------ */

html:not(.js) .seq__bars,
html:not(.js) .seq__rail,
html:not(.js) .seq__bar-progress,
html:not(.js) .seq__edge,
html:not(.js) .expand__bars { display: none; }
html:not(.js) .seq__layer.seq__layer--mask { clip-path: none; opacity: 0; }

/* ------------------------------------------------------------------ *
 * Överskottet får inte kapas
 * ------------------------------------------------------------------ */
/* base.css sätter `img { max-width: 100% }` för att bilder i flöden
   aldrig ska spränga sin spalt. Men de scrollstyrda bilderna ritas
   medvetet 108–132 % breda för att ha marginal att skalas ner och
   panoreras inom. Utan undantaget klipps bredden till 100 %, och när
   scale() sedan drar ihop bilden uppstår tomma remsor i kanterna. */
.hero__media img,
.seq__layer img,
.expand__media img,
.par-media img,
.zoom-media > img,
.js .mask-reveal img { max-width: none; max-height: none; }