/* =========================================================================
   Sektioner
   ========================================================================= */

/* ------------------------------------------------------------------ *
 * Navigation. Tunn, diskret, utan glaskort.
 * ------------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 1.3rem var(--gutter);
  color: var(--sand-50);
  border-bottom: 1px solid transparent;
  transition: background-color 520ms var(--ease-out),
              padding 520ms var(--ease-out),
              border-color 520ms var(--ease-out),
              transform 480ms var(--ease-out),
              opacity 560ms var(--ease-out);
}
.nav.is-stuck {
  background: rgba(20, 19, 18, .84);
  -webkit-backdrop-filter: blur(14px) saturate(.82);
  backdrop-filter: blur(14px) saturate(.82);
  border-bottom-color: rgba(255, 255, 255, .1);
  padding-block: 0.85rem;
}
.nav.is-hidden { transform: translateY(-110%); }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.625rem;
  text-decoration: none;
  flex: none;
}
/* Wordmark. Versaler i sans med rejäl spärr, inte display-serifen:
   serifen används redan till rubrikerna, och ett serift märke hade lästs
   som ännu en rubrik i stället för som avsändare. Spärren är det som gör
   ordet till ett märke — utan den läser HOUSEFLARE bara som ett ord.
   Storleken skalar ned på små skärmar så att menyknappen aldrig trängs.
   Den negativa marginalen tar bort spärrens efterspalt, annars hamnar
   mässingspunkten ett halvt tecken för långt bort. */
/* Vikten sänkt från 500 till 400 och spärren ökad från .22em till .26em.
   Skälet: bredvid navigationens 13 px/400 läste wordmarken i 14,4 px/500
   som ett tätt block snarare än som en avsändare — mörkare och bredare
   än allt annat i raden. Nu ligger den på samma stråktjocklek som
   länkarna, och det är luften mellan bokstäverna som bär identiteten.
   Så behandlar arkitektkontor och modehus sitt märke: det viskar. */
.brand__name {
  font-family: var(--font-sans);
  font-size: clamp(0.7rem, 0.64rem + 0.26vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  /* Spärren lägger en efterspalt efter sista bokstaven. Utan den här
     korrigeringen hamnar mässingspunkten ett kvarts tecken för långt bort. */
  margin-right: -0.26em;
  white-space: nowrap;
}
/* 4 px i stället för 5: punkten ska läsa som skiljetecken efter märket,
   inte som en punktlista. */
.brand__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--brass-400);
  display: block;
}

.nav__links {
  display: none;
  align-items: center;
  gap: 2rem;
  margin-inline: auto;
}
.nav__link {
  position: relative;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  padding-block: 0.3rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: #fff; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 0.7rem; margin-left: auto; }
.nav__cta { display: none; }

/* Menyknapp: ordet MENY plus två hårfina linjer i olika längd.
   Ingen ruta, ingen hamburgare. Tryckytan är 44 px men syns inte. */
.burger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0;
  border: 0;
  background: transparent;
  color: var(--sand-50);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  -webkit-tap-highlight-color: transparent;
}
.burger::after {
  content: "";
  position: absolute;
  inset: -0.35rem -0.75rem;
}
.burger__lines { display: grid; gap: 5px; width: 22px; }
.burger i {
  display: block;
  height: 1px;
  background: currentColor;
  margin-left: auto;
  transition: width 460ms var(--ease-out), opacity 260ms var(--ease-out);
}
/* Två linjer i olika längd läser som ett medvetet märke,
   inte som en generisk hamburgare */
.burger i:first-child { width: 22px; }
.burger i:last-child  { width: 13px; }
.burger:hover i:last-child { width: 22px; }
.burger:active { opacity: .65; }
.burger:focus-visible { outline: 2px solid var(--brass-400); outline-offset: 6px; }

@media (min-width: 62rem) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
}


/* ------------------------------------------------------------------ *
 * Vad kunden får
 * ------------------------------------------------------------------ */

.offer { display: grid; gap: 0; border-top: 1px solid var(--line); }
.offer__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.5rem 1.6rem;
  padding-block: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background-color 420ms var(--ease-out);
}
@media (min-width: 56rem) {
  .offer__row { grid-template-columns: 4rem minmax(0, 18rem) minmax(0, 1fr); }
  .offer__body { display: contents; }
}
.offer__no {
  font-size: 0.75rem;
  letter-spacing: var(--letter-label);
  color: var(--fg-subtle);
}
.offer__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
.offer__body p { color: var(--fg-muted); max-width: 48ch; }

/* ------------------------------------------------------------------ *
 * Process
 * ------------------------------------------------------------------ */

.steps { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }
@media (min-width: 60rem) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; } }

.step { display: grid; gap: 0.9rem; align-content: start; }
.step__no {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.6rem);
  line-height: 1;
  color: var(--accent);
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.step h3 { font-family: var(--font-body); font-size: 1.125rem; font-weight: 600; }
.step p { color: var(--fg-muted); font-size: 0.9375rem; line-height: 1.6; }

.process-note {
  margin-top: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-lead);
  color: var(--fg-muted);
  max-width: 52ch;
}
.process-note strong { color: var(--fg); font-weight: 600; }

/* ------------------------------------------------------------------ *
 * Omfattning
 * ------------------------------------------------------------------ */

.price { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
@media (min-width: 62rem) { .price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.included { display: grid; gap: 0; margin-top: 0.5rem; }
.included li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.72rem;
  border-bottom: 1px solid var(--line);
  list-style: none;
  font-size: 0.9875rem;
}
.included li::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--accent);
  flex: none;
  transform: translateY(-4px);
}

.extras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
.extras span {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.extras span:not(:first-child)::before {
  content: "·";
  position: absolute;
  left: -0.95rem;
  color: var(--accent);
}
@media (max-width: 47.99rem) {
  /* Tillvalen låg i grid, ett per rad, med en egen streckmarkör. Fyra
     rader med versaler direkt ovanför ytterligare fem rader med versaler
     — två listor efter varandra, alltså ett specifikationsblad. De radas
     nu i löpande följd med tunna avdelare, som en bildtext. Samma fyra
     ord, halva höjden, och bara en lista kvar som läser som lista. */
  .extras {
    display: block;
    font-size: 0.6875rem;
    line-height: 2;
  }
  .extras span { display: inline; padding: 0; }
  .extras span::before { content: none; }
  .extras span:not(:first-child)::before {
    content: "/";
    position: static;
    margin: 0 0.5rem;
    color: var(--accent);
  }
}

/* Upplägget och sidans sista uppmaning behöver inte varsin hel skärm. */
#ingar.section { padding-block: clamp(5rem, 3rem + 6vw, 8rem); }
#kontakt.section { padding-block: clamp(5rem, 3rem + 5vw, 7rem); }

/* ------------------------------------------------------------------ *
 * Återkommande upplägg
 * ------------------------------------------------------------------ */

.repeat {
  background: var(--char-900);
  color: var(--sand-50);
}
.repeat__inner { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); align-items: end; }
@media (min-width: 62rem) { .repeat__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.repeat h2 { max-width: 16ch; }
.repeat p { color: rgba(255, 255, 255, .74); font-size: var(--t-lead); line-height: 1.6; max-width: 48ch; }

/* ------------------------------------------------------------------ *
 * Kontakt
 * En centrerad CTA i stället för ett formulär. Sektionen samlar inga
 * uppgifter — den lämnar över till besökarens eget e-postprogram.
 * Måtten är avsiktligt generösa: när det bara finns en sak att göra
 * på sidan ska luften runt den göra det uppenbart vilken.
 * ------------------------------------------------------------------ */

.cta {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.5rem;
  max-width: 46rem;
  margin-inline: auto;
  padding-block: clamp(1rem, 0.5rem + 3vw, 4rem);
}
.cta h2 { max-width: 18ch; }
.cta__lead {
  color: var(--fg-muted);
  font-size: var(--t-lead);
  line-height: 1.6;
  max-width: 34ch;
}
.cta__action { margin-top: clamp(0.5rem, 0.2rem + 1.5vw, 1.5rem); }

.cta__note {
  font-size: 0.8125rem;
  color: var(--fg-subtle);
  line-height: 1.6;
  max-width: 38ch;
}

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

.footer {
  background: var(--char-900);
  color: var(--sand-50);
  padding-top: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  padding-bottom: 2.5rem;
}
.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
@media (min-width: 54rem) {
  .footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 3rem; }
}
.footer__brand { display: grid; gap: 1rem; align-content: start; max-width: 32ch; }
.footer__brand p { color: rgba(255, 255, 255, .6); font-size: 0.9375rem; line-height: 1.6; }
.footer__col h3 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 1.1rem;
}
.footer__col ul { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.footer__col a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col a:hover { color: #fff; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.8rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, .5);
}
.footer__bottom a { color: inherit; }

/* ------------------------------------------------------------------ *
 * Innehållssida
 * ------------------------------------------------------------------ */

.prose { max-width: var(--maxw-text); display: grid; gap: 1.1rem; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 1.1vw, 2rem); margin-top: 1.8rem; }
.prose p, .prose li { color: var(--fg-muted); line-height: 1.75; }
.prose ul { padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.prose a { color: var(--accent); }

.price__heading {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 1.3rem;
}

/* Tryckytor: WCAG kräver minst 24 px. Länkraderna i sidfoten och
   mobilmenyns fot landade på 19 respektive 25 px. */
.footer__col a,
.menu__foot a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding-block: 0.2rem;
}
.footer__col ul { gap: 0.45rem; }

/* ------------------------------------------------------------------ *
 * Positionering: rubrik till vänster, resonemang till höger
 * ------------------------------------------------------------------ */

.stance { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
@media (min-width: 62rem) {
  .stance { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}
.stance__body { display: grid; gap: 1.4rem; align-content: start; }
.stance__body h2 { max-width: 16ch; }
.stance__text { display: grid; gap: 1.2rem; max-width: 42ch; }
.stance__text p { color: var(--fg-muted); font-size: var(--t-lead); line-height: 1.6; }
@media (min-width: 62rem) { .stance__text { padding-top: 0.6rem; } }

.figure-note {
  margin-top: 1.1rem;
  font-size: 0.75rem;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* Metatext intill sekvensens avslutande knapp */
.seq__meta {
  font-size: 0.75rem;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* ------------------------------------------------------------------ *
 * Mobilmeny
 * Fullskärm som sveper ned, därefter länkarna en och en. Ingen
 * hamburgerpanel som glider in från sidan.
 * ------------------------------------------------------------------ */

.menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--char-900);
  color: var(--sand-50);
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Var en 620 ms ridå som svepte ner över hela skärmen. Det är en
     effekt man tittar PÅ. En meny ska man titta genom. Nu: stilla
     toning, ingen rörelse på själva panelen. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-out), visibility 0s 300ms;
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms var(--ease-out), visibility 0s;
}

/* Varm glöd i överkanten, samma ton som mässingen */
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70rem 40rem at 78% -8%, rgba(203, 164, 105, .12), transparent 62%);
  pointer-events: none;
}

.menu__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.3rem;
  flex: none;
}
/* Krysset hade en 42 px ram runt sig — en synlig ruta i övre hörnet
   som drog blicken från navigationen. Ramen är borta. Träffytan är
   kvar på 44 px (negativ marginal håller den optiskt i linje), men
   grafiken är 12 px och dämpad. */
.menu__close {
  width: 44px; height: 44px;
  margin-right: -0.7rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.menu__close:hover, .menu__close:focus-visible { color: #fff; }
.menu__close svg { width: 12px; height: 12px; }

/* Foten hade margin-top:auto. Med de gamla 76 px-raderna fyllde navet
   skärmen och det syntes inte. Med kortare rader blev det ett 390 px
   hål mitt i menyn. Nu får navet auto-marginal i BÅDA riktningarna:
   luften delas lika över och under, och blocket hamnar optiskt i
   mitten i stället för att hänga i toppen med en grop under sig. */
.menu__nav {
  position: relative;
  display: grid;
  margin-block: auto;
  padding-block: clamp(1rem, 0.5rem + 3vh, 2.5rem);
}

/* Hårfina linjer kvar — de är arkitektur, inte dekor — men nere på
   .085 så att de läses som en indelning och inte som en tabell. */
.menu__row {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .085);
}
.menu__row:last-child { border-bottom: 0; }

/* 35,6 px ner till 25,4 px — knappt trettio procent. Raderna var
   76 px höga och menyn blev ett eget uppslag i stället för en väg
   vidare. Rörelsen: 10 px, inte 110 %. */
.menu__link {
  display: flex;
  align-items: baseline;
  gap: 0.95rem;
  padding: clamp(0.62rem, 0.35rem + 1vh, 0.9rem) 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-out) var(--d, 0ms),
              transform 420ms var(--ease-out) var(--d, 0ms),
              color 240ms var(--ease-out);
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu__link:hover, .menu__link:focus-visible { color: var(--brass-400); }

/* Numret satt i mässing — samma vikt som en accentfärg ska ha, vilket
   gjorde att ögat läste "01" före "Demoobjekt". Nu dämpat vitt. */
.menu__link span {
  font-family: var(--font-body);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, .3);
  flex: none;
  transition: color 240ms var(--ease-out);
}
.menu__link:hover span, .menu__link:focus-visible span { color: rgba(203, 164, 105, .8); }

.menu__foot {
  position: relative;
  padding-top: clamp(1.25rem, 1rem + 2vh, 2rem);
  display: grid;
  gap: 1rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease-out) 420ms, transform 700ms var(--ease-out) 420ms;
}
.menu.is-open .menu__foot { opacity: 1; transform: none; }

.menu__contact { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.menu__contact a {
  color: rgba(255, 255, 255, .74);
  text-decoration: none;
  font-size: 0.9375rem;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
}
.menu__contact a:hover { color: #fff; }

/* Editorial CTA i stället för fylld blockknapp. Linjen under är det
   enda som markerar att raden är klickbar. */
.menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: start;
  padding: 0.55rem 0;
  color: var(--sand-50);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.menu__cta span { transition: transform 300ms var(--ease-out); }
.menu__cta:hover, .menu__cta:focus-visible { color: #fff; border-color: rgba(203, 164, 105, .75); }
.menu__cta:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .menu, .menu__link, .menu__foot { transition: none !important; }
  .menu__link { transform: none !important; opacity: 1 !important; }
  .menu__cta span, .menu__cta:hover span { transform: none !important; }
  .menu__foot { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------------------ *
 * Pre-launch
 * Ersätter prislappen. Samma plats i layouten, samma typografiska vikt
 * — men ett besked i stället för en siffra. Ingen badge, ingen ram:
 * raden ska läsa som ett medvetet val, inte som något som saknas.
 * ------------------------------------------------------------------ */

.prelaunch { display: grid; gap: 0.8rem; max-width: 34ch; }

/* Raden satt först i samma storlek som prislappen den ersatte, men en
   mening i display-serif direkt under rubriken läste som en andra
   rubrik — två serifer som slogs om samma plats. Nu är den tydligt
   underordnad: mindre, spärrad, med en mässingspunkt som signalerar
   status i stället för påstående. */
.prelaunch__rad {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.8125rem;
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color: var(--fg);
}
.prelaunch__rad::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass-500);
  flex: none;
  transform: translateY(-1px);
}
.prelaunch__not {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-muted);
}

/* ------------------------------------------------------------------ *
 * Statement
 * Ersätter stegkorten. En sektion som säger en enda sak, i rubrikens
 * storlek, med luft omkring. Inga kort, inga nummer, inget rutnät.
 * ------------------------------------------------------------------ */

.statement { display: grid; gap: 1.5rem; max-width: 52rem; }
.statement__rubrik {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-top: 0.6rem;
}
.statement__lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 46ch;
}

/* Överlämning från tjänstesektionen till beviset. En textlänk, ingen
   knapp — sektionen ska inte konkurrera med sidans primära CTA. */
.tjanst-vidare { margin-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* ------------------------------------------------------------------ *
 * Brand-film
 * Startsidans enda filmiska moment. 86svh, inte 100 — den ska läsa som
 * en andhämtning i sidan, inte som ännu en hero. En rad text, inget
 * annat: filmen ska bära, typografin bara signera.
 * ------------------------------------------------------------------ */

.brandfilm {
  position: relative;
  height: 86svh;
  min-height: 30rem;
  overflow: hidden;
  display: grid;
  align-items: end;
  background: var(--char-900);
  color: var(--sand-50);
}
.brandfilm__media { position: absolute; inset: 0; }
.brandfilm__media img,
.brandfilm__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.brandfilm__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(16, 15, 14, .74) 0%,
    rgba(16, 15, 14, .30) 42%,
    rgba(16, 15, 14, .10) 72%,
    rgba(16, 15, 14, .34) 100%);
}
.brandfilm__inner {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(2.5rem, 1.5rem + 5vw, 5.5rem);
}
.brandfilm__rad {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  max-width: 18ch;
  text-wrap: balance;
  opacity: 0;
  transform: translate3d(0, 1.2rem, 0);
  transition: opacity 1300ms var(--ease-out), transform 1300ms var(--ease-out);
}
.brandfilm__rad.is-revealed { opacity: 1; transform: none; }

@media (max-width: 47.99rem) {
  /* Lägre på telefon: 86svh av en hög smal skärm blir nästan en hel
     hero, och sidan har redan en. */
  .brandfilm { height: 68svh; min-height: 24rem; }
}

@media (prefers-reduced-motion: reduce) {
  .brandfilm__rad { transition-duration: 1ms; }
}

/* ------------------------------------------------------------------ *
 * "Portalen visar objektet" på telefon
 * ------------------------------------------------------------------ *
 * Desktoplayouten översatt rakt av gav rubrik, brödtext, en liten
 * inramad bild och en versal mikrorad under — alltså exakt formen på en
 * responsiv artikel. Här får mobilen sin egen komposition: rubriken får
 * dominera, texten kortas, och bilden går ut i kanterna som ett eget
 * moment i stället för att ligga inbäddad i texten.
 * ------------------------------------------------------------------ */

/* Förhållandet stod som inline style i HTML — style="--media-ratio:2/1" —
   och en inline-deklaration slår varje regel i ett stylesheet. Mobilregeln
   nedan hade därför aldrig någon verkan: bilden renderades 390 × 195 px,
   en remsa. Det var den enskilda orsaken till att sektionen läste som
   text + jpg + bildtext. Variabeln bor i CSS nu. */
#varfor .media { --media-ratio: 2 / 1; }

@media (max-width: 47.99rem) {
  #varfor .stance { gap: 1.25rem; }
  /* Rubriken hade en max-width från desktoprastret och bröt "runt det."
     ensamt på en tredje rad. Full bredd, något mindre grad: två rader. */
  #varfor h2 { max-width: none; font-size: clamp(1.65rem, 1.15rem + 2.2vw, 2rem); line-height: 1.08; }
  #varfor .stance__text { display: grid; gap: 0.9rem; }
  #varfor .stance__text p { font-size: 1rem; line-height: 1.58; max-width: 34ch; }

  /* Ut i kanterna och stående. 390 × 487 i stället för 390 × 195. */
  #varfor .media {
    margin-inline: calc(var(--gutter) * -1);
    width: calc(100% + var(--gutter) * 2);
    --media-ratio: 4 / 5;
  }
  /* Bilden ska följa direkt på texten, inte efter en paus. */
  #varfor > .shell + .shell { margin-top: 1.75rem !important; }

  /* Bildtexten togs bort här. Under en utfallande bild läser en versal
     mikrorad som fotobyline, inte som redaktionell signatur — och den
     var det sista som gjorde sektionen till en artikel. På desktop finns
     luften som gör den till en riktig figurnotis, så där står den kvar. */
  #varfor .figure-note { display: none; }
}

/* Redaktionell CTA på ljus botten. Samma logik som .menu__cta i menyn:
   en spärrad versalrad med en hårfin linje under, ingen fyllning. Används
   där en knapp skulle bli sidans tredje identiska konverteringsblock. */
.cta-text {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  transition: color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.cta-text span { transition: transform 300ms var(--ease-out); }
.cta-text:hover, .cta-text:focus-visible { border-color: var(--accent); }
.cta-text:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .cta-text span, .cta-text:hover span { transform: none !important; }
}