/* ============================================================
   Hibombo — portfolio
   Följer Figma-sektionen "Case 1" (260:2443). Varje case är ett antal
   1440 breda ramar; --px gör ett Figma-mått till ett flytande mått, så
   vid 1440 bredd landar allt på exakt sitt Figma-värde.
   Bara desktop än så länge — mobilnivån kommer när layouten sitter.
   ============================================================ */

:root {
  --dark: #06181f;        /* Blue 800 */
  --pink: #f1a3a4;        /* Pink 400 */
  --pink-light: #ffd1d2;  /* Pink 200 */
  --alabaster: #ebe9e1;

  --font-display: "New Amsterdam", "Arial Narrow", sans-serif;
  --font-body: "Cabin", system-ui, sans-serif;

  /* Den minsta av bredd och höjd styr, som på huvudsidan: ett kort på
     900 Figma-pixlar får då alltid plats i fönstret, även i ett lågt
     MacBook-fönster. Är fönstret bredare än 16:10 blir layouten smalare
     än fönstret, och --ox centrerar den i sidled. Vid 1440 x 900 är
     --px exakt 1px och --ox 0, så designstorleken är oförändrad. */
  --px: min(calc(100vw / 1440), calc(100lvh / 900));
  --ox: calc((100vw - 1440 * var(--px)) / 2);
}

/* ============================================================
   Casets tema
   Varje case är en <article data-case> och sätter sina egna färger
   här. Allt nedanför läser bara variablerna, så ett nytt case är ett
   nytt block här plus sin markup.
     --bg / --bg-alt   ramarnas bakgrund, växlar mellan sektionerna
     --bg-statement    påståendets bakgrund
     --ticker-bg/-ink  banderollen
     --phone-*         telefonens kropp, kant och kontur
   ============================================================ */
[data-case] {
  --bg: #0b1f26;
  --bg-alt: #0f2a33;
  --bg-statement: linear-gradient(135deg, #06181f 0%, #1f4d4a 110%);
  --ticker-bg: var(--mint);
  --ticker-ink: var(--dark);
  --phone-fill: #0a1214;
  --phone-edge: #1d3a3f;
  --phone-rim: #8aeab0;
  --accent: var(--mint);
  --accent-light: var(--mint-light);
}

[data-case="hyph"] {
  --accent: var(--pink);
  --accent-light: var(--pink-light);
  --bg: #1c0b24;
  --bg-alt: #2a0c38;
  --bg-statement: linear-gradient(135.8deg, #27072f 1.06%, #c57ed3 106.42%);
  --ticker-bg: #9761bc;
  --ticker-ink: var(--alabaster);
  --phone-fill: #120a16;
  --phone-edge: #3d194e;
  --phone-rim: #b15cf6;
}

/* Den nya designens palett: nattblått, mint och lila, som appens ikon. */
[data-case="kiddotales"] {
  --bg: #0c0a1f;
  --bg-alt: #161233;
  --bg-statement: linear-gradient(135deg, #0c0a1f 0%, #6b2fb3 130%);
  --ticker-bg: #52f5b3;
  --ticker-ink: #0c0a1f;
  --phone-fill: #0a0818;
  --phone-edge: #2a2350;
  --phone-rim: #d98bff;
  --accent: #52f5b3;
  --accent-light: #d98bff;
}

/* Spelets egen palett: marinblått, med flodens blå och gräsets gröna. */
[data-case="riomaker"] {
  --bg: #07102a;
  --bg-alt: #0c1838;
  --bg-statement: linear-gradient(135deg, #07102a 0%, #1f6fb8 130%);
  --ticker-bg: #8fdc4a;
  --ticker-ink: #07102a;
  --phone-fill: #050b1e;
  --phone-edge: #1b2a52;
  --phone-rim: #5fd0f5;
  --accent: #5fd0f5;
  --accent-light: #b6f06a;
}

/* Festivalens egen palett, som i Behance-caset: nästan svart botten,
   gult, ljusblått och rosa. */
[data-case="stockholm-jazzfestival"] {
  --bg: #0e1a20;
  --bg-alt: #13242c;
  --bg-statement: linear-gradient(135deg, #0e1a20 0%, #2e6f78 130%);
  --ticker-bg: #ffe500;
  --ticker-ink: #0e1a20;
  --phone-fill: #0a1216;
  --phone-edge: #24343c;
  --phone-rim: #a6dde1;
  --accent: #ffe500;
  --accent-light: #a6dde1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--dark);
  font-family: var(--font-body);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "liga" 0;
  color: var(--alabaster);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
}

/* Bilder som inte finns än döljs, så platshållaren syns i stället
   för webbläsarens trasiga ikon. Klassen sätts av skriptet i sidan. */
img.is-missing {
  visibility: hidden;
}

/* ============================================================
   Telefonen (260:2415, iPhone 12 Pro Max)
   En komponent för alla skärmar. Bredden sätts av den som använder
   den, med --phone-w; allt annat räknas i procent av bredden (cqw),
   så formen är densamma i alla storlekar. Mått ur Figma vid 430 bredd:
   kropp 430 x 884.6, radie 60.77, skärm 387.6 x 840.6 inskjuten 21 / 22.
   ============================================================ */
.phone {
  container-type: inline-size;
  width: var(--phone-w, calc(430 * var(--px)));
  flex: none;
}

.phone__body {
  position: relative;
  aspect-ratio: 430 / 884.6;
  border-radius: 14.13cqw;
  background: var(--phone-fill);
  box-shadow:
    inset 0 0 0 1.07cqw var(--phone-edge),   /* Screen Background, kanten */
    0 0 0 max(1px, 0.25cqw) var(--phone-rim), /* Stroke Body */
    0 6cqw 14cqw rgba(0, 0, 0, 0.55);
}

/* Det röda lagret i Figma: "Screen (Replace here)". */
.phone__screen {
  position: absolute;
  top: 2.51%;
  left: 4.9%;
  right: 4.9%;
  aspect-ratio: 387.62 / 840.63;
  border-radius: 9.4cqw;
  overflow: hidden;
  background: #dc7b7b;
}

.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   Case
   ============================================================ */
.frame {
  position: relative;
  height: calc(900 * var(--px));
  overflow: hidden;
  background: var(--frame-bg, var(--bg));
}

/* Kortstapel, som på huvudsidan: varje ram pinnas och nästa glider in
   ovanpå. top räknas så att en ram som är högre än vyn pinnas först när
   dess UNDERKANT når vyns underkant — skärmrutnätet scrollas alltså
   färdigt innan nästa kort täcker det. Skuggan kastas uppåt på kortet
   bakom och syns bara under själva övergången. */
.frame {
  --h: 900;
  position: sticky;
  top: min(0px, calc(100lvh - var(--h) * var(--px)));
  /* Aldrig lägre än vyn. Ett pinnat kort som är kortare än skärmen
     lämnar en remsa där kortet bakom syns igenom — sist på sidan (de
     relaterade casen är 820) och i varje kort när fönstret är högre än
     1440 x 900, som på en MacBook. lvh av samma skäl som huvudsidan:
     den står still när Safaris verktygsfält fälls ut. */
  min-height: 100lvh;
  box-shadow: 0 -40px 60px rgba(0, 0, 0, 0.35);
}

/* Helt täckta kort ritas inte alls (portfolio.js). Utan det här kan
   Safari låta animerade lager i ett kort längre ner synas igenom. */
.frame.is-covered {
  visibility: hidden;
}

.frame.is-covered .ticker__track {
  animation-play-state: paused;
}

.frame:nth-child(1) { z-index: 1; }
.frame:nth-child(2) { z-index: 2; }
.frame:nth-child(3) { z-index: 3; }
.frame:nth-child(4) { z-index: 4; }
.frame:nth-child(5) { z-index: 5; }
.frame:nth-child(6) { z-index: 6; }
.frame:nth-child(7) { z-index: 7; }
.frame:nth-child(8) { z-index: 8; }
.frame:nth-child(9) { z-index: 9; }
.frame:nth-child(10) { z-index: 10; }
.frame:nth-child(11) { z-index: 11; }
.frame:nth-child(12) { z-index: 12; }

/* Startlägen för det som tonas in. Klassen sätts av portfolio.js, så
   allt står kvar synligt om skriptet inte kör eller rörelse är avslagen. */
.has-reveal .frame .copy > *,
.has-reveal .frame [data-enter="fade"],
.has-reveal .frame [data-enter="grow"] {
  opacity: 0;
  will-change: transform, opacity;
}

.frame > * {
  position: absolute;
}

.fill {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.copy {
  left: calc(var(--ox) + 96 * var(--px));
  width: calc(528 * var(--px));
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(40 * var(--px));
  line-height: 0.9;
  color: var(--pink);
  margin-bottom: calc(8 * var(--px));
}

.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(110 * var(--px));
  line-height: 0.9;
  color: var(--pink-light);
}

.body {
  font-size: calc(28 * var(--px));
  line-height: 1.6;
  color: var(--alabaster);
}

.body + .body {
  margin-top: calc(28 * 1.6 * var(--px));
}

/* Platshållare för grafik som inte är exporterad än. */
.slot {
  background: rgba(241, 163, 164, 0.08);
  outline: 1px dashed rgba(241, 163, 164, 0.4);
  outline-offset: -1px;
}

/* 1 · Hero (253:735) */
[data-case="hyph"] .case-hero { --frame-bg: #150c2a; }

/* Hero utan telefon: en bild i högra halvan i stället (en webbplats,
   en identitet). Fyller halvan och tonas mot ramen nedtill. */
.case-hero .art,
.case-story .art {
  left: calc(var(--ox) + 720 * var(--px));
  top: 0;
  width: calc(720 * var(--px));
  height: 100%;
  object-fit: cover;
}

/* Banderoll överst i hero, efter Hyphs egen: lila band, ljus text,
   vanliga ord i fet Cabin och nyckelorden i New Amsterdam i en
   konturerad pill. Glider åt vänster i jämn takt; står still utan rörelse. */
.ticker {
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--ticker-bg);
  color: var(--ticker-ink);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker 40s linear infinite;
}

.ticker__list {
  display: flex;
  align-items: center;
  list-style: none;
  height: calc(62 * var(--px));
  white-space: nowrap;
}

.ticker__list li {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  /* Luften mellan fraserna. Ligger efter varje fras, även den sista,
     så att skarven där listan börjar om inte syns. */
  padding-right: calc(36 * var(--px));
  font-weight: 700;
  font-size: calc(30 * var(--px));
  line-height: 1;
}

.ticker .pill {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(26 * var(--px));
  letter-spacing: 0.04em;
  padding: calc(5 * var(--px)) calc(14 * var(--px)) calc(3 * var(--px));
  border: max(1.5px, calc(2 * var(--px))) solid currentColor;
  border-radius: 999px;
}

/* Ordvarianten: bara nyckelord i New Amsterdam, åtskilda av en prick.
   Används av Hyph. */
.ticker--words .ticker__list li {
  gap: 0;
  padding-right: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(32 * var(--px));
  letter-spacing: 0.02em;
}

/* Pricken efter varje ord, även det sista, så att skarven där listan
   börjar om inte syns. */
.ticker--words .ticker__list li::after {
  content: "";
  width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  margin: 0 calc(28 * var(--px));
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-10%);
}

@keyframes ticker {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

.case-hero .shade {
  left: 0;
  right: 0;
  top: calc(196 * var(--px));
  bottom: 0;
  background: linear-gradient(to bottom, transparent, #000);
}

.case-hero .copy {
  top: calc(330 * var(--px));
}

.case-hero .title + .body {
  margin-top: calc(16 * var(--px));
}

.case-hero .phone {
  --phone-w: calc(624 * var(--px));
  left: calc(var(--ox) + 720 * var(--px));
  top: calc(96 * var(--px));
}

/* 2 · Animationer (254:1148) */
.case-brand {
  --frame-bg: var(--bg-alt);
}

.case-brand .logo {
  left: calc(var(--ox) + 96 * var(--px));
  width: calc(528 * var(--px));
  height: calc(210 * var(--px));
}

.case-brand .logo:nth-of-type(1) { top: calc(96 * var(--px)); }
.case-brand .logo:nth-of-type(2) { top: calc(345 * var(--px)); }
.case-brand .logo:nth-of-type(3) { top: calc(594 * var(--px)); }

/* Animationen är rosa (#e878bb); de två andra färgas om här.
   CSS vinner över fill-attributen Lottie skriver ut. */
.logo--light path { fill: var(--alabaster); }
.logo--purple path { fill: #9a6ad6; }

/* Header Pattern (254:1531) är 1339 x 900 och sticker ut till höger,
   precis som i Figma — ramen klipper den. */
.case-brand .pattern {
  left: calc(var(--ox) + 720 * var(--px));
  top: 0;
  width: calc(1339.3 * var(--px));
  height: 100%;
}

/* 3 · Skärmar (254:1692). Tre spalter som ligger förskjutna mot
   varandra; spalterna själva är vanligt flöde, så en skärm till är
   bara en rad till i markupen. */
.case-screens {
  /* --h är sektionens höjd i Figma-pixlar och sätts per case i
     markupen: 2733 rymmer tio skärmar (4 + 3 + 3), Hyphs sexton
     behöver 4657. */
  --h: 2733;
  /* Figmas 2733 rymmer tio skärmar. Med sexton slutar mittspalten
     på 4535 och högerspalten på 4657; vänsterspalten får sticka ut
     nedtill, som den gör upptill. */
  height: calc(var(--h) * var(--px));
}

.case-screens .col {
  display: flex;
  flex-direction: column;
  gap: calc(48.4 * var(--px));
}

.case-screens .col:nth-child(1) { left: calc(var(--ox) + 40 * var(--px));  top: calc(-609 * var(--px)); }
.case-screens .col:nth-child(2) { left: calc(var(--ox) + 505 * var(--px)); top: calc(-82 * var(--px)); }
.case-screens .col:nth-child(3) { left: calc(var(--ox) + 970 * var(--px)); top: calc(40 * var(--px)); }

/* 4 · Påståenden (254:1947) */
/* Den svartvita konsertbilden ligger i soft light ovanpå ramens
   gradient — det är gradienten som färgar den lila, som i Figma. */
.case-statement {
  --frame-bg: var(--bg-statement);
}

.case-statement .blend {
  mix-blend-mode: soft-light;
}

/* Rubriken är centrerad i höjd i Figma, inte toppställd. */
.case-statement .copy {
  top: 50%;
  transform: translateY(-50%);
}

/* Figmas storlek och lägen: 458.6 breda, den högra högre upp och
   delvis utanför kanten. Ramen klipper dem nedtill och till höger. */
.case-statement .phone,
.case-story .phone {
  --phone-w: calc(458.6 * var(--px));
}

.case-statement .phone:nth-of-type(1),
.case-story .phone:nth-of-type(1) {
  left: calc(var(--ox) + 720 * var(--px));
  top: calc(146 * var(--px));
}

.case-statement .phone:nth-of-type(2),
.case-story .phone:nth-of-type(2) {
  left: calc(var(--ox) + 1055 * var(--px));
  top: calc(50 * var(--px));
}

/* Designsektionerna: statements upplägg, med rubrik och brödtext till
   vänster. Påståendet säger vad projektet handlade om; de här tre visar
   hur, ett designbeslut var. Bakgrunderna växlar så att korten skiljer
   sig åt när de glider in över varandra. */
.case-story .copy {
  top: 50%;
  transform: translateY(-50%);
}

.case-story .title + .body {
  margin-top: calc(32 * var(--px));
}

/* Sektioner med --alt får den andra bakgrunden, så att två kort
   i rad inte har samma färg. */
.case-story--alt { --frame-bg: var(--bg-alt); }
[data-case="hyph"] .case-story--loop { --frame-bg: linear-gradient(160deg, #3a0f4a 0%, #1c0b24 70%); }

/* 5 · Detaljer (254:2169) */
[data-case="hyph"] .case-details { --frame-bg: #24092f; }

/* 50 % större än Figmas 872, med samma mittpunkt (1004, 419). */
.case-details .loader {
  left: calc(var(--ox) + 350 * var(--px));
  top: calc(-235 * var(--px));
  width: calc(1308 * var(--px));
  height: calc(1308 * var(--px));
}

.case-details .card {
  width: calc(646 * var(--px));
  height: auto;
}

.case-details .card--back {
  left: calc(var(--ox) + 85 * var(--px));
  top: calc(77.5 * var(--px));
}

.case-details .card--front {
  left: calc(var(--ox) + 116.9 * var(--px));
  top: calc(323 * var(--px));
}

/* ============================================================
   Översikten, /portfolio/
   ============================================================ */
.overview-intro {
  padding: calc(160 * var(--px)) calc(96 * var(--px)) calc(96 * var(--px));
}

.overview-intro .title {
  font-size: calc(110 * var(--px));
}

.overview-intro .body {
  max-width: calc(720 * var(--px));
  margin-top: calc(24 * var(--px));
}

.overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(32 * var(--px));
  padding: 0 calc(96 * var(--px)) calc(160 * var(--px));
  list-style: none;
}

.work-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.work-card__art {
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: calc(24 * var(--px));
  background: var(--card-bg, #0f2a33);
}

.work-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.work-card a:hover .work-card__art img,
.work-card a:focus-visible .work-card__art img {
  transform: scale(1.04);
}

.work-card__name {
  margin-top: calc(24 * var(--px));
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(56 * var(--px));
  line-height: 0.9;
  color: var(--pink-light);
}

.work-card__line {
  margin-top: calc(8 * var(--px));
  font-size: calc(22 * var(--px));
  line-height: 1.5;
}

.work-card__tags {
  margin-top: calc(12 * var(--px));
  font-family: var(--font-display);
  font-size: calc(22 * var(--px));
  letter-spacing: 0.04em;
  color: var(--pink);
}

/* ============================================================
   Påståendet: bara copy
   Som huvudsidans punch: en centrerad rubrik på flera rader där
   varannan rad kommer in från vänster och varannan från höger, och de
   möts i mitten när kortet landat. Bryter av mellan sektionerna med
   bilder. Startläget sätts bara när skriptet kör.
   ============================================================ */
.case-punch .statement {
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--px));
  text-align: center;
}

.statement-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(110 * var(--px));
  line-height: 0.9;
  white-space: nowrap;
  color: var(--accent);
  will-change: transform;
}

.statement-line:nth-child(even) {
  color: var(--accent-light);
}

.has-reveal .statement-line:nth-child(odd) { transform: translateX(-100vw); }
.has-reveal .statement-line:nth-child(even) { transform: translateX(100vw); }

/* Med fotot: påståendets gradient bakom, bilden i soft light. */
.case-punch--photo {
  --frame-bg: var(--bg-statement);
}

/* ============================================================
   Två skärmar, ingen text
   Designvy mellan textsidorna: två telefoner centrerade, den högra
   högre upp, samma storlek och förskjutning som i statements.
   ============================================================ */
.case-duo {
  --frame-bg: var(--bg-statement);
}

.case-duo .phone {
  --phone-w: calc(458.6 * var(--px));
}

.case-duo .phone:nth-of-type(1) {
  left: calc(var(--ox) + 241 * var(--px));
  top: calc(146 * var(--px));
}

.case-duo .phone:nth-of-type(2) {
  left: calc(var(--ox) + 740 * var(--px));
  top: calc(50 * var(--px));
}

/* ============================================================
   Relaterade case
   Sist på varje case: de tre andra, i samma kort som översikten.
   ============================================================ */
/* I casets egen mörka färg, så att slutet hör ihop med resten. */
.case-related {
  --frame-bg: var(--bg);
}

.case-related .copy {
  top: calc(96 * var(--px));
  width: calc(1248 * var(--px));
}

.case-related .overview-grid {
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  margin-top: calc(48 * var(--px));
}

.case-related .work-card__name {
  font-size: calc(44 * var(--px));
}

.case-related .work-card__line,
.case-related .work-card__tags {
  font-size: calc(18 * var(--px));
}

.case-related .back {
  display: inline-block;
  margin-top: calc(40 * var(--px));
  font-size: calc(22 * var(--px));
  color: inherit;
  border-bottom: 2px solid currentColor;
  text-decoration: none;
}

/* Collage och stående bilder visas hela i stället för att beskäras. */
.work-card__art--contain img {
  object-fit: contain;
}

/* ============================================================
   Affischer
   Skärmrutnätets parallax, med 2:3-bilder i stället för telefoner.
   ============================================================ */
.case-posters .poster {
  width: calc(430 * var(--px));
  aspect-ratio: 2 / 3;
  border-radius: calc(24 * var(--px));
  object-fit: cover;
  box-shadow: 0 calc(24 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, 0.5);
}

.case-posters .col:nth-child(1) { top: calc(-160 * var(--px)); }
.case-posters .col:nth-child(2) { top: calc(120 * var(--px)); }
.case-posters .col:nth-child(3) { top: calc(-40 * var(--px)); }

/* ============================================================
   Tre bilder, ingen text
   En kampanj eller en serie: tre bilder i rad, den mittersta högre.
   ============================================================ */
.case-trio {
  --frame-bg: var(--bg-statement);
}

.case-trio img {
  width: calc(380 * var(--px));
  border-radius: calc(24 * var(--px));
  box-shadow: 0 calc(24 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, 0.5);
}

.case-trio img:nth-of-type(1) { left: calc(var(--ox) + 110 * var(--px)); top: calc(212 * var(--px)); }
.case-trio img:nth-of-type(2) { left: calc(var(--ox) + 530 * var(--px)); top: calc(112 * var(--px)); }
.case-trio img:nth-of-type(3) { left: calc(var(--ox) + 950 * var(--px)); top: calc(212 * var(--px)); }

/* En designsektion med en enda telefon: centrerad i högra halvan. */
.case-story--single .phone:nth-of-type(1) {
  left: calc(var(--ox) + 851 * var(--px));
  top: calc(96 * var(--px));
}

/* ============================================================
   Meny
   Samma som huvudsidan (styles.css): ikonen fast i överkanten, 32px
   ner och 24px in från höger, i alla nivåer. Ikonen ritas som mask så
   att färgen sitter i CSS — över banderollen tar den banderollens
   textfärg (portfolio.js), annars Alabaster. Kurvan är menyns egen,
   cubic-bezier(0.23, 1, 0.32, 1): gränssnitt, inte scrollkomposition.
   ============================================================ */
.menu-btn {
  position: fixed;
  top: 32px;
  right: 24px;
  z-index: 101;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-open,
.menu-close {
  position: absolute;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-open {
  width: 26px;
  height: 26px;
  background-color: var(--menu-ink, var(--alabaster));
  -webkit-mask: url("/Assets/MenuIcon.svg") center / contain no-repeat;
  mask: url("/Assets/MenuIcon.svg") center / contain no-repeat;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.3s ease;
}

/* Tillbaka till översikten, fast uppe till vänster i varje case, i
   höjd med menyikonen. En mörk pill, så att den läses lika bra över
   banderollen som över ljusa sektioner. */
.back-btn {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 20px;
  border-radius: 999px;
  background: rgba(6, 24, 31, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--alabaster);
  text-decoration: none;
}

.back-btn__arrow {
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.back-btn:hover .back-btn__arrow,
.back-btn:focus-visible .back-btn__arrow {
  transform: translateX(-4px) rotate(45deg);
}

/* Gömda över banderollen i hero (portfolio.js). visibility följer med
   efter toningen, så att de inte går att tabba till medan de är borta. */
.menu-btn,
.back-btn {
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s;
}

.menu-btn.is-tucked,
.back-btn.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), visibility 0s 0.4s;
}

/* Krysset ritas i kod — två streck med samma tjocklek som ikonens. */
.menu-close {
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: scale(0.7) rotate(-45deg);
}

.menu-close::before,
.menu-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--alabaster);
}

.menu-close::before { transform: translateY(-50%) rotate(45deg); }
.menu-close::after { transform: translateY(-50%) rotate(-45deg); }

.menu-btn[aria-expanded="true"] .menu-open {
  opacity: 0;
  transform: scale(0.7) rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-close {
  opacity: 1;
  transform: none;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.menu ul {
  list-style: none;
  text-align: center;
}

/* Raden klipper, så länken kan ligga gömd under den och svepa upp. */
.menu li {
  overflow: hidden;
}

.menu a {
  display: block;
  padding: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 9vw, 72px);
  line-height: 0.9;
  color: var(--pink-light);
  text-decoration: none;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease;
}

.menu.is-open a {
  transform: translateY(0);
}

.menu li:nth-child(1) a { transition-delay: 0.05s; }
.menu li:nth-child(2) a { transition-delay: 0.10s; }
.menu li:nth-child(3) a { transition-delay: 0.15s; }
.menu li:nth-child(4) a { transition-delay: 0.20s; }
.menu li:nth-child(5) a { transition-delay: 0.25s; }
.menu li:nth-child(6) a { transition-delay: 0.30s; }
.menu li:nth-child(7) a { transition-delay: 0.35s; }

.menu a:hover,
.menu a:focus-visible,
.menu a[aria-current] {
  color: var(--pink);
}

/* Utan rörelse står länkarna framme direkt, annars är menyn tom. */
@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu a,
  .menu-open,
  .menu-close {
    transition: none;
  }

  .menu a {
    transform: none;
  }
}

/* ============================================================
   Skärmlägen
   Samma spel på olika skärmar, sida vid sida. En enkel ram runt en
   skärmdump som redan har skärmens hörn: telefonens kropp och kontur,
   men utan fast proportion — bilden bestämmer formen.
   ============================================================ */
.case-devices {
  --frame-bg: var(--bg-alt);
}

.device {
  padding: calc(10 * var(--px));
  border-radius: calc(44 * var(--px));
  background: var(--phone-fill);
  box-shadow:
    inset 0 0 0 calc(4 * var(--px)) var(--phone-edge),
    0 0 0 max(1px, calc(1 * var(--px))) var(--phone-rim),
    0 calc(30 * var(--px)) calc(80 * var(--px)) rgba(0, 0, 0, 0.55);
}

.device img {
  width: 100%;
  border-radius: calc(36 * var(--px));
}

/* Uppfälld 951 x 669, hopfälld 466 x 678 — samma höjd på båda. */
.device--open {
  left: calc(var(--ox) + 91 * var(--px));
  top: calc(150 * var(--px));
  width: calc(840 * var(--px));
}

.device--closed {
  left: calc(var(--ox) + 971 * var(--px));
  top: calc(150 * var(--px));
  width: calc(413 * var(--px));
}

/* En bakgrundsbild i hero som inte är byggd för att ha text över sig:
   nedtonad, så att copyn till vänster läses. */
.case-hero .fill--dim {
  opacity: 0.35;
}

/* ============================================================
   Riomaker-brädet
   Huvudsidans bräde (styles.css), här centrerat i en egen ram och
   större. Brickorna är SVG och håller i alla storlekar; portfolio.js
   låter dem falla in i tur och ordning efter sitt --i.
   ============================================================ */
.case-board {
  --frame-bg: var(--bg-alt);
}

.rio-board {
  left: 50%;
  top: calc(60 * var(--px));
  height: calc(780 * var(--px));
  aspect-ratio: 542.705 / 746;
  transform: translateX(-50%);
}

/* I en designsektion: i högra halvans mitt, bredvid texten. */
.case-story .rio-board {
  left: calc(var(--ox) + 1080 * var(--px));
}

.rio-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  display: block;
  will-change: transform;
}

/* En bild som bara ska ge stämning: suddig och nedtonad, så att den
   varken konkurrerar med texten eller visar att den är liten. */
.fill--blur {
  filter: blur(calc(20 * var(--px))) brightness(0.45) saturate(1.2);
  transform: scale(1.1);
}

/* Sagokompisarna: arket centrerat, på samma nattblå som bilden. */
.case-buddies {
  --frame-bg: #0d081f;
}

.case-buddies .buddies {
  left: calc(var(--ox) + 290 * var(--px));
  top: calc(153 * var(--px));
  width: calc(860 * var(--px));
}

/* Riomakers påstående: landskapet är ljust och mönstrat och drunknade
   rubriken. Nedtonat med filter, inte opacitet — opaciteten styrs av
   intoningen (data-enter="fade") och skulle skrivas över. */
[data-case="riomaker"] .case-punch .blend {
  filter: brightness(0.35) saturate(0.8);
}

/* ============================================================
   Tre telefoner, ingen text
   Designvy: tre skärmar som ligger olika högt, den mittersta högst.
   De sticker ut under kortets underkant, som i skärmrutnätet.
   ============================================================ */
.case-phones {
  --frame-bg: var(--bg-statement);
}

.case-phones .phone {
  --phone-w: calc(400 * var(--px));
}

.case-phones .phone:nth-of-type(1) { left: calc(var(--ox) + 150 * var(--px)); top: calc(230 * var(--px)); }
.case-phones .phone:nth-of-type(2) { left: calc(var(--ox) + 520 * var(--px)); top: calc(80 * var(--px)); }
.case-phones .phone:nth-of-type(3) { left: calc(var(--ox) + 890 * var(--px)); top: calc(310 * var(--px)); }

/* ============================================================
   Knapp
   Som huvudsidans (styles.css): accentfärgad platta, mörk text.
   ============================================================ */
.button-row {
  margin-top: calc(40 * var(--px));
}

.button {
  display: inline-block;
  padding: calc(16 * var(--px)) calc(28 * var(--px));
  border-radius: calc(8 * var(--px));
  background: var(--accent);
  color: var(--dark);
  font-size: calc(22 * var(--px));
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.button:hover,
.button:focus-visible {
  opacity: 0.85;
}

/* Riomakers avslutning: brädet som SVG, stort och skarpt i alla
   storlekar. Det tar högra halvan och lite till — det tomma hörnet
   uppe till vänster i bilden får gå in under textspaltens marginal. */
.case-story .board-art {
  left: calc(var(--ox) + 600 * var(--px));
  top: calc(30 * var(--px));
  width: calc(870 * var(--px));
  height: auto;
}

/* Apples officiella App Store-badge. Höjden följer Apples riktlinjer
   för webb (minst 40px); bredden ges av badgens egen proportion. */
.store-badge {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.store-badge img {
  display: block;
  height: max(40px, calc(64 * var(--px)));
  width: auto;
}

.store-badge:hover,
.store-badge:focus-visible {
  opacity: 0.85;
}

/* Spegelvänd designsektion: telefonerna till vänster, texten till
   höger. Samma mått som standardsektionen, speglade kring mitten. */
.case-story--flip .copy {
  left: calc(var(--ox) + 816 * var(--px));
}

.case-story--flip .phone:nth-of-type(1) {
  left: calc(var(--ox) + 261.4 * var(--px));
}

.case-story--flip .phone:nth-of-type(2) {
  left: calc(var(--ox) + -73.6 * var(--px));
}

/* ---- KiddoTales ---------------------------------------------------- */
/* Norrskenet: en riktig bild i full storlek, så den får synas — bara
   nedtonad så att texten läses. */
[data-case="kiddotales"] .fill--aurora {
  opacity: 0.55;
}

[data-case="kiddotales"] .case-punch .fill--aurora {
  opacity: 0.4;
}

/* En Lottie i stället för en skärmdump: fyller skärmen, på splashens
   egen bakgrundsfärg. */
.lottie-screen {
  width: 100%;
  height: 100%;
  background: #0d081f;
}

/* ============================================================
   Platserna i Tilodalen
   Tre spalter med kort i appens kortstil som glider långsamt, varannan
   upp och varannan ner, i högra halvan. Varje spalt har listan två
   gånger och flyttas exakt ett halvt varv, så att loopen saknar skarv.
   Tonas ut upptill och nertill. Pausas när kortet är täckt; står still
   utan rörelse.
   ============================================================ */
.places {
  left: calc(var(--ox) + 720 * var(--px));
  top: 0;
  width: calc(720 * var(--px));
  height: 100%;
  display: flex;
  justify-content: center;
  gap: calc(24 * var(--px));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.places__col {
  width: calc(196 * var(--px));
  flex: none;
}

.places__track {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
  animation: places-up 90s linear infinite;
}

.places__col:nth-child(2) .places__track {
  animation-name: places-down;
  animation-duration: 75s;
}

.places__col:nth-child(3) .places__track {
  animation-duration: 105s;
}

.places__track img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: calc(22 * var(--px));
  box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, 0.45);
}

/* Halva spåret plus halva mellanrummet: då landar kopian exakt där
   originalet började. */
@keyframes places-up {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - 12 * var(--px))); }
}

@keyframes places-down {
  from { transform: translateY(calc(-50% - 12 * var(--px))); }
  to { transform: translateY(0); }
}

.frame.is-covered .places__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .places__track { animation: none; }
}

/* ============================================================
   iPad
   Som telefonen: en komponent i kod, allt i procent av bredden (cqw).
   iPad Air på höjden, skärm 1640 x 2360, jämn ram runt om. Skärmen
   toppställs, så en längre skärmdump visar sin överkant.
   ============================================================ */
.tablet {
  container-type: inline-size;
  width: var(--tablet-w, calc(560 * var(--px)));
  flex: none;
}

.tablet__body {
  position: relative;
  padding: 4cqw;
  border-radius: 7cqw;
  background: var(--phone-fill);
  box-shadow:
    inset 0 0 0 0.8cqw var(--phone-edge),
    0 0 0 max(1px, 0.18cqw) var(--phone-rim),
    0 6cqw 14cqw rgba(0, 0, 0, 0.55);
}

.tablet__screen {
  aspect-ratio: 1640 / 2360;
  border-radius: 3cqw;
  overflow: hidden;
  background: #dc7b7b;
}

.tablet__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ---- Stockholm Jazzfestival ---------------------------------------- */
/* iPad och telefon bredvid varandra; telefonen ligger lite över iPadens
   högra kant. */
.case-devices-jazz {
  --frame-bg: var(--bg-alt);
}

.case-devices-jazz .tablet {
  --tablet-w: calc(600 * var(--px));
  left: calc(var(--ox) + 220 * var(--px));
  top: calc(100 * var(--px));
}

.case-devices-jazz .phone {
  --phone-w: calc(360 * var(--px));
  left: calc(var(--ox) + 860 * var(--px));
  top: calc(170 * var(--px));
}

/* En iPad i en designsektion: i högra halvan, bredvid texten. */
.case-story .tablet {
  --tablet-w: calc(560 * var(--px));
  left: calc(var(--ox) + 800 * var(--px));
  top: calc(110 * var(--px));
}

/* iPad på bredden: samma ram, skärmen 2360 x 1640. */
.tablet--landscape .tablet__screen {
  aspect-ratio: 2360 / 1640;
}

.case-story .tablet--landscape {
  --tablet-w: calc(640 * var(--px));
  left: calc(var(--ox) + 740 * var(--px));
  top: calc(210 * var(--px));
}

/* Festivalens former som dekor: ligger under allt annat i kortet och
   tar inga klick. Läget sätts i markupen, rörelsen av data-drift. */
.deco {
  pointer-events: none;
  height: auto;
  will-change: transform;
}

/* Formen speglad, så att dess raka kant ligger mot vänsterkanten. */
.deco--flip {
  scale: -1 1;
}

/* Identiteten: loggan stort på festivalens ljusblå. */
.case-jazz-brand {
  --frame-bg: #addae0;
}

.case-jazz-brand .jazz-logo {
  left: calc(var(--ox) + 340 * var(--px));
  top: calc(225 * var(--px));
  width: calc(760 * var(--px));
  height: auto;
}

/* Texten ska ligga över formerna även när de driver in under den. */
[data-case="stockholm-jazzfestival"] .copy,
[data-case="stockholm-jazzfestival"] .statement {
  z-index: 1;
}

/* ============================================================
   MacBook
   Som telefonen och iPaden: en komponent i kod, mått i cqw. Locket med
   jämn svart ram runt skärmen (16:10, 2880 x 1806) och en bredare,
   platt underdel med ett grepp i mitten.
   ============================================================ */
.laptop {
  container-type: inline-size;
  width: var(--laptop-w, calc(1100 * var(--px)));
}

.laptop__lid {
  margin: 0 7%;
  padding: 1.8cqw 1.8cqw 2.6cqw;
  border-radius: 2.4cqw 2.4cqw 0.6cqw 0.6cqw;
  background: var(--phone-fill);
  box-shadow:
    inset 0 0 0 0.35cqw var(--phone-edge),
    0 0 0 max(1px, 0.1cqw) var(--phone-rim);
}

.laptop__screen {
  aspect-ratio: 2880 / 1806;
  border-radius: 0.5cqw;
  overflow: hidden;
  background: #dc7b7b;
}

.laptop__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.laptop__base {
  position: relative;
  height: 2.2cqw;
  border-radius: 0.3cqw 0.3cqw 2cqw 2cqw;
  background: linear-gradient(to bottom, var(--phone-edge), var(--phone-fill));
  box-shadow:
    0 0 0 max(1px, 0.1cqw) var(--phone-rim),
    0 4cqw 8cqw rgba(0, 0, 0, 0.55);
}

/* Greppet i underdelens framkant. */
.laptop__base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 14%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 1cqw 1cqw;
  background: var(--phone-fill);
}

.case-laptop {
  --frame-bg: var(--bg-alt);
}

.case-laptop .laptop {
  --laptop-w: calc(1180 * var(--px));
  left: calc(var(--ox) + 130 * var(--px));
  top: calc(80 * var(--px));
}

/* Scensidan i EVERY VENUE: en telefon som ligger över iPadens högra
   hörn och kommer in uppifrån. */
.case-story .phone.phone--venue {
  --phone-w: calc(280 * var(--px));
  left: calc(var(--ox) + 1110 * var(--px));
  top: calc(330 * var(--px));
}

/* Jazz-hero: en stor iPad som skjuter in från höger, bara den vänstra
   delen av skärmen syns. */
.case-hero .tablet {
  --tablet-w: calc(860 * var(--px));
  left: calc(var(--ox) + 696 * var(--px));
  top: calc(120 * var(--px));
}

/* Jazz: iPaden på bredden i vyn med iPad och telefon. */
/* Större, och i rimligare relation till varandra: en riktig iPad Air på
   bredden är ungefär tre och en halv iPhone bred. Här 2,6 — telefonen får
   vara lite större än verkligheten så att skärmen går att läsa. */
.case-devices-jazz .tablet--landscape {
  --tablet-w: calc(1000 * var(--px));
  left: calc(var(--ox) + 70 * var(--px));
  top: calc(130 * var(--px));
}

.case-devices-jazz .phone {
  --phone-w: calc(380 * var(--px));
  left: calc(var(--ox) + 990 * var(--px));
  top: calc(110 * var(--px));
}

/* En skärm utan enhet runt: bara bilden, rundade hörn och en kraftig
   skugga. För desktopvyer, där en dator runt omkring mest tar plats. */
.screen-card {
  overflow: hidden;
  border-radius: calc(24 * var(--px));
  box-shadow:
    0 calc(40 * var(--px)) calc(100 * var(--px)) rgba(0, 0, 0, 0.6),
    0 calc(12 * var(--px)) calc(30 * var(--px)) rgba(0, 0, 0, 0.35);
}

.screen-card img {
  display: block;
  width: 100%;
  height: auto;
}

.case-laptop .screen-card {
  left: calc(var(--ox) + 150 * var(--px));
  top: calc(90 * var(--px));
  width: calc(1140 * var(--px));
}

/* Jazz: utmärkelserna. Hibombos rosa i stället för fotot, rubriken i
   Blue 800 och vitt, och de två priserna i klartext under. */
.case-punch--awards {
  /* Hibombos rosa: Pink 400 mot Pink 200. */
  --frame-bg: linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 100%);
}

.case-punch--awards .statement-line {
  color: var(--dark);
}

.case-punch--awards .statement-line:nth-child(even) {
  color: #fff;
}

.awards {
  max-width: calc(620 * var(--px));
  margin-top: calc(40 * var(--px));
  font-size: calc(24 * var(--px));
  line-height: 1.6;
  color: var(--dark);
}

/* ============================================================
   Kortbilder
   Varje kort bär sitt case tema (data-case på kortet). Bilden är nära:
   casets bästa skärm i vår telefon, så stor att kortets underkant skär
   av den, på en bakgrund ur caset.
   ============================================================ */
.work-card__art {
  position: relative;
  background: var(--bg-statement);
}

.work-card__art .work-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card__art .phone {
  position: absolute;
  left: 24%;
  top: 9%;
  --phone-w: 52%;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Riomaker: landskapet tonas ner så att banan i telefonen bär. */
.work-card[data-case="riomaker"] .work-card__bg {
  filter: brightness(0.4) saturate(0.85);
}

/* Jazz: pianobilden, med tangenterna under telefonen. */
.work-card[data-case="stockholm-jazzfestival"] .work-card__bg {
  object-position: 50% 80%;
}

/* Bilden zoomar inte vid hover; telefonen lyfter och visar mer. */
.work-card a:hover .work-card__art img.work-card__bg,
.work-card a:focus-visible .work-card__art img.work-card__bg {
  transform: none;
}

.work-card a:hover .work-card__art .phone,
.work-card a:focus-visible .work-card__art .phone {
  transform: translateY(-5%);
}

/* Relaterade case: högre kort, så att sektionen fyller sin höjd. */
.case-related .work-card__art {
  aspect-ratio: 4 / 5;
}

.case-related .work-card__art .phone {
  left: 9%;
  top: 11%;
  --phone-w: 82%;
}

.case-related .overview-grid {
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  margin-top: calc(48 * var(--px));
}

.case-related .work-card__name {
  font-size: calc(44 * var(--px));
}

.case-related .work-card__line,
.case-related .work-card__tags {
  font-size: calc(18 * var(--px));
}

.case-related .back {
  display: inline-block;
  margin-top: calc(40 * var(--px));
  font-size: calc(22 * var(--px));
  color: inherit;
  border-bottom: 2px solid currentColor;
  text-decoration: none;
}

/* Collage och stående bilder visas hela i stället för att beskäras. */
.work-card__art--contain img {
  object-fit: contain;
}

/* ============================================================
   Affischer
   Skärmrutnätets parallax, med 2:3-bilder i stället för telefoner.
   ============================================================ */
.case-posters .poster {
  width: calc(430 * var(--px));
  aspect-ratio: 2 / 3;
  border-radius: calc(24 * var(--px));
  object-fit: cover;
  box-shadow: 0 calc(24 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, 0.5);
}

.case-posters .col:nth-child(1) { top: calc(-160 * var(--px)); }
.case-posters .col:nth-child(2) { top: calc(120 * var(--px)); }
.case-posters .col:nth-child(3) { top: calc(-40 * var(--px)); }

/* ============================================================
   Tre bilder, ingen text
   En kampanj eller en serie: tre bilder i rad, den mittersta högre.
   ============================================================ */
.case-trio {
  --frame-bg: var(--bg-statement);
}

.case-trio img {
  width: calc(380 * var(--px));
  border-radius: calc(24 * var(--px));
  box-shadow: 0 calc(24 * var(--px)) calc(60 * var(--px)) rgba(0, 0, 0, 0.5);
}

.case-trio img:nth-of-type(1) { left: calc(var(--ox) + 110 * var(--px)); top: calc(212 * var(--px)); }
.case-trio img:nth-of-type(2) { left: calc(var(--ox) + 530 * var(--px)); top: calc(112 * var(--px)); }
.case-trio img:nth-of-type(3) { left: calc(var(--ox) + 950 * var(--px)); top: calc(212 * var(--px)); }

/* En designsektion med en enda telefon: centrerad i högra halvan. */
.case-story--single .phone:nth-of-type(1) {
  left: calc(var(--ox) + 851 * var(--px));
  top: calc(96 * var(--px));
}

/* ============================================================
   Meny
   Samma som huvudsidan (styles.css): ikonen fast i överkanten, 32px
   ner och 24px in från höger, i alla nivåer. Ikonen ritas som mask så
   att färgen sitter i CSS — över banderollen tar den banderollens
   textfärg (portfolio.js), annars Alabaster. Kurvan är menyns egen,
   cubic-bezier(0.23, 1, 0.32, 1): gränssnitt, inte scrollkomposition.
   ============================================================ */
.menu-btn {
  position: fixed;
  top: 32px;
  right: 24px;
  z-index: 101;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-open,
.menu-close {
  position: absolute;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu-open {
  width: 26px;
  height: 26px;
  background-color: var(--menu-ink, var(--alabaster));
  -webkit-mask: url("/Assets/MenuIcon.svg") center / contain no-repeat;
  mask: url("/Assets/MenuIcon.svg") center / contain no-repeat;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), background-color 0.3s ease;
}

/* Krysset ritas i kod — två streck med samma tjocklek som ikonens. */
.menu-close {
  width: 22px;
  height: 22px;
  opacity: 0;
  transform: scale(0.7) rotate(-45deg);
}

.menu-close::before,
.menu-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--alabaster);
}

.menu-close::before { transform: translateY(-50%) rotate(45deg); }
.menu-close::after { transform: translateY(-50%) rotate(-45deg); }

.menu-btn[aria-expanded="true"] .menu-open {
  opacity: 0;
  transform: scale(0.7) rotate(45deg);
}

.menu-btn[aria-expanded="true"] .menu-close {
  opacity: 1;
  transform: none;
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

.menu ul {
  list-style: none;
  text-align: center;
}

/* Raden klipper, så länken kan ligga gömd under den och svepa upp. */
.menu li {
  overflow: hidden;
}

.menu a {
  display: block;
  padding: 8px 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 9vw, 72px);
  line-height: 0.9;
  color: var(--pink-light);
  text-decoration: none;
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.3s ease;
}

.menu.is-open a {
  transform: translateY(0);
}

.menu li:nth-child(1) a { transition-delay: 0.05s; }
.menu li:nth-child(2) a { transition-delay: 0.10s; }
.menu li:nth-child(3) a { transition-delay: 0.15s; }
.menu li:nth-child(4) a { transition-delay: 0.20s; }
.menu li:nth-child(5) a { transition-delay: 0.25s; }
.menu li:nth-child(6) a { transition-delay: 0.30s; }
.menu li:nth-child(7) a { transition-delay: 0.35s; }

.menu a:hover,
.menu a:focus-visible,
.menu a[aria-current] {
  color: var(--pink);
}

/* Utan rörelse står länkarna framme direkt, annars är menyn tom. */
@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu a,
  .menu-open,
  .menu-close {
    transition: none;
  }

  .menu a {
    transform: none;
  }
}

/* ============================================================
   Skärmlägen
   Samma spel på olika skärmar, sida vid sida. En enkel ram runt en
   skärmdump som redan har skärmens hörn: telefonens kropp och kontur,
   men utan fast proportion — bilden bestämmer formen.
   ============================================================ */
.case-devices {
  --frame-bg: var(--bg-alt);
}

.device {
  padding: calc(10 * var(--px));
  border-radius: calc(44 * var(--px));
  background: var(--phone-fill);
  box-shadow:
    inset 0 0 0 calc(4 * var(--px)) var(--phone-edge),
    0 0 0 max(1px, calc(1 * var(--px))) var(--phone-rim),
    0 calc(30 * var(--px)) calc(80 * var(--px)) rgba(0, 0, 0, 0.55);
}

.device img {
  width: 100%;
  border-radius: calc(36 * var(--px));
}

/* Uppfälld 951 x 669, hopfälld 466 x 678 — samma höjd på båda. */
.device--open {
  left: calc(var(--ox) + 91 * var(--px));
  top: calc(150 * var(--px));
  width: calc(840 * var(--px));
}

.device--closed {
  left: calc(var(--ox) + 971 * var(--px));
  top: calc(150 * var(--px));
  width: calc(413 * var(--px));
}

/* En bakgrundsbild i hero som inte är byggd för att ha text över sig:
   nedtonad, så att copyn till vänster läses. */
.case-hero .fill--dim {
  opacity: 0.35;
}

/* ============================================================
   Riomaker-brädet
   Huvudsidans bräde (styles.css), här centrerat i en egen ram och
   större. Brickorna är SVG och håller i alla storlekar; portfolio.js
   låter dem falla in i tur och ordning efter sitt --i.
   ============================================================ */
.case-board {
  --frame-bg: var(--bg-alt);
}

.rio-board {
  left: 50%;
  top: calc(60 * var(--px));
  height: calc(780 * var(--px));
  aspect-ratio: 542.705 / 746;
  transform: translateX(-50%);
}

/* I en designsektion: i högra halvans mitt, bredvid texten. */
.case-story .rio-board {
  left: calc(var(--ox) + 1080 * var(--px));
}

.rio-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  display: block;
  will-change: transform;
}

/* En bild som bara ska ge stämning: suddig och nedtonad, så att den
   varken konkurrerar med texten eller visar att den är liten. */
.fill--blur {
  filter: blur(calc(20 * var(--px))) brightness(0.45) saturate(1.2);
  transform: scale(1.1);
}

/* Sagokompisarna: arket centrerat, på samma nattblå som bilden. */
.case-buddies {
  --frame-bg: #0d081f;
}

.case-buddies .buddies {
  left: calc(var(--ox) + 290 * var(--px));
  top: calc(153 * var(--px));
  width: calc(860 * var(--px));
}

/* Riomakers påstående: landskapet är ljust och mönstrat och drunknade
   rubriken. Nedtonat med filter, inte opacitet — opaciteten styrs av
   intoningen (data-enter="fade") och skulle skrivas över. */
[data-case="riomaker"] .case-punch .blend {
  filter: brightness(0.35) saturate(0.8);
}

/* ============================================================
   Tre telefoner, ingen text
   Designvy: tre skärmar som ligger olika högt, den mittersta högst.
   De sticker ut under kortets underkant, som i skärmrutnätet.
   ============================================================ */
.case-phones {
  --frame-bg: var(--bg-statement);
}

.case-phones .phone {
  --phone-w: calc(400 * var(--px));
}

.case-phones .phone:nth-of-type(1) { left: calc(var(--ox) + 150 * var(--px)); top: calc(230 * var(--px)); }
.case-phones .phone:nth-of-type(2) { left: calc(var(--ox) + 520 * var(--px)); top: calc(80 * var(--px)); }
.case-phones .phone:nth-of-type(3) { left: calc(var(--ox) + 890 * var(--px)); top: calc(310 * var(--px)); }

/* ============================================================
   Knapp
   Som huvudsidans (styles.css): accentfärgad platta, mörk text.
   ============================================================ */
.button-row {
  margin-top: calc(40 * var(--px));
}

.button {
  display: inline-block;
  padding: calc(16 * var(--px)) calc(28 * var(--px));
  border-radius: calc(8 * var(--px));
  background: var(--accent);
  color: var(--dark);
  font-size: calc(22 * var(--px));
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.button:hover,
.button:focus-visible {
  opacity: 0.85;
}

/* Riomakers avslutning: brädet som SVG, stort och skarpt i alla
   storlekar. Det tar högra halvan och lite till — det tomma hörnet
   uppe till vänster i bilden får gå in under textspaltens marginal. */
.case-story .board-art {
  left: calc(var(--ox) + 600 * var(--px));
  top: calc(30 * var(--px));
  width: calc(870 * var(--px));
  height: auto;
}

/* Apples officiella App Store-badge. Höjden följer Apples riktlinjer
   för webb (minst 40px); bredden ges av badgens egen proportion. */
.store-badge {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.store-badge img {
  display: block;
  height: max(40px, calc(64 * var(--px)));
  width: auto;
}

.store-badge:hover,
.store-badge:focus-visible {
  opacity: 0.85;
}

/* Spegelvänd designsektion: telefonerna till vänster, texten till
   höger. Samma mått som standardsektionen, speglade kring mitten. */
.case-story--flip .copy {
  left: calc(var(--ox) + 816 * var(--px));
}

.case-story--flip .phone:nth-of-type(1) {
  left: calc(var(--ox) + 261.4 * var(--px));
}

.case-story--flip .phone:nth-of-type(2) {
  left: calc(var(--ox) + -73.6 * var(--px));
}

/* ---- KiddoTales ---------------------------------------------------- */
/* Norrskenet: en riktig bild i full storlek, så den får synas — bara
   nedtonad så att texten läses. */
[data-case="kiddotales"] .fill--aurora {
  opacity: 0.55;
}

[data-case="kiddotales"] .case-punch .fill--aurora {
  opacity: 0.4;
}

/* En Lottie i stället för en skärmdump: fyller skärmen, på splashens
   egen bakgrundsfärg. */
.lottie-screen {
  width: 100%;
  height: 100%;
  background: #0d081f;
}

/* ============================================================
   Platserna i Tilodalen
   Tre spalter med kort i appens kortstil som glider långsamt, varannan
   upp och varannan ner, i högra halvan. Varje spalt har listan två
   gånger och flyttas exakt ett halvt varv, så att loopen saknar skarv.
   Tonas ut upptill och nertill. Pausas när kortet är täckt; står still
   utan rörelse.
   ============================================================ */
.places {
  left: calc(var(--ox) + 720 * var(--px));
  top: 0;
  width: calc(720 * var(--px));
  height: 100%;
  display: flex;
  justify-content: center;
  gap: calc(24 * var(--px));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.places__col {
  width: calc(196 * var(--px));
  flex: none;
}

.places__track {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--px));
  animation: places-up 90s linear infinite;
}

.places__col:nth-child(2) .places__track {
  animation-name: places-down;
  animation-duration: 75s;
}

.places__col:nth-child(3) .places__track {
  animation-duration: 105s;
}

.places__track img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: calc(22 * var(--px));
  box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, 0.45);
}

/* Halva spåret plus halva mellanrummet: då landar kopian exakt där
   originalet började. */
@keyframes places-up {
  from { transform: translateY(0); }
  to { transform: translateY(calc(-50% - 12 * var(--px))); }
}

@keyframes places-down {
  from { transform: translateY(calc(-50% - 12 * var(--px))); }
  to { transform: translateY(0); }
}

.frame.is-covered .places__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .places__track { animation: none; }
}

/* ============================================================
   iPad
   Som telefonen: en komponent i kod, allt i procent av bredden (cqw).
   iPad Air på höjden, skärm 1640 x 2360, jämn ram runt om. Skärmen
   toppställs, så en längre skärmdump visar sin överkant.
   ============================================================ */
.tablet {
  container-type: inline-size;
  width: var(--tablet-w, calc(560 * var(--px)));
  flex: none;
}

.tablet__body {
  position: relative;
  padding: 4cqw;
  border-radius: 7cqw;
  background: var(--phone-fill);
  box-shadow:
    inset 0 0 0 0.8cqw var(--phone-edge),
    0 0 0 max(1px, 0.18cqw) var(--phone-rim),
    0 6cqw 14cqw rgba(0, 0, 0, 0.55);
}

.tablet__screen {
  aspect-ratio: 1640 / 2360;
  border-radius: 3cqw;
  overflow: hidden;
  background: #dc7b7b;
}

.tablet__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* ---- Stockholm Jazzfestival ---------------------------------------- */
/* iPad och telefon bredvid varandra; telefonen ligger lite över iPadens
   högra kant. */
.case-devices-jazz {
  --frame-bg: var(--bg-alt);
}

.case-devices-jazz .tablet {
  --tablet-w: calc(600 * var(--px));
  left: calc(var(--ox) + 220 * var(--px));
  top: calc(100 * var(--px));
}

.case-devices-jazz .phone {
  --phone-w: calc(360 * var(--px));
  left: calc(var(--ox) + 860 * var(--px));
  top: calc(170 * var(--px));
}

/* En iPad i en designsektion: i högra halvan, bredvid texten. */
.case-story .tablet {
  --tablet-w: calc(560 * var(--px));
  left: calc(var(--ox) + 800 * var(--px));
  top: calc(110 * var(--px));
}

/* iPad på bredden: samma ram, skärmen 2360 x 1640. */
.tablet--landscape .tablet__screen {
  aspect-ratio: 2360 / 1640;
}

.case-story .tablet--landscape {
  --tablet-w: calc(640 * var(--px));
  left: calc(var(--ox) + 740 * var(--px));
  top: calc(210 * var(--px));
}

/* Festivalens former som dekor: ligger under allt annat i kortet och
   tar inga klick. Läget sätts i markupen, rörelsen av data-drift. */
.deco {
  pointer-events: none;
  height: auto;
  will-change: transform;
}

/* Identiteten: loggan stort på festivalens ljusblå. */
.case-jazz-brand {
  --frame-bg: #addae0;
}

.case-jazz-brand .jazz-logo {
  left: calc(var(--ox) + 340 * var(--px));
  top: calc(225 * var(--px));
  width: calc(760 * var(--px));
  height: auto;
}

/* Texten ska ligga över formerna även när de driver in under den. */
[data-case="stockholm-jazzfestival"] .copy,
[data-case="stockholm-jazzfestival"] .statement {
  z-index: 1;
}

/* ============================================================
   MacBook
   Som telefonen och iPaden: en komponent i kod, mått i cqw. Locket med
   jämn svart ram runt skärmen (16:10, 2880 x 1806) och en bredare,
   platt underdel med ett grepp i mitten.
   ============================================================ */
.laptop {
  container-type: inline-size;
  width: var(--laptop-w, calc(1100 * var(--px)));
}

.laptop__lid {
  margin: 0 7%;
  padding: 1.8cqw 1.8cqw 2.6cqw;
  border-radius: 2.4cqw 2.4cqw 0.6cqw 0.6cqw;
  background: var(--phone-fill);
  box-shadow:
    inset 0 0 0 0.35cqw var(--phone-edge),
    0 0 0 max(1px, 0.1cqw) var(--phone-rim);
}

.laptop__screen {
  aspect-ratio: 2880 / 1806;
  border-radius: 0.5cqw;
  overflow: hidden;
  background: #dc7b7b;
}

.laptop__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.laptop__base {
  position: relative;
  height: 2.2cqw;
  border-radius: 0.3cqw 0.3cqw 2cqw 2cqw;
  background: linear-gradient(to bottom, var(--phone-edge), var(--phone-fill));
  box-shadow:
    0 0 0 max(1px, 0.1cqw) var(--phone-rim),
    0 4cqw 8cqw rgba(0, 0, 0, 0.55);
}

/* Greppet i underdelens framkant. */
.laptop__base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 14%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 1cqw 1cqw;
  background: var(--phone-fill);
}

.case-laptop {
  --frame-bg: var(--bg-alt);
}

.case-laptop .laptop {
  --laptop-w: calc(1180 * var(--px));
  left: calc(var(--ox) + 130 * var(--px));
  top: calc(80 * var(--px));
}

/* Scensidan i EVERY VENUE: en telefon som ligger över iPadens högra
   hörn och kommer in uppifrån. */
.case-story .phone.phone--venue {
  --phone-w: calc(280 * var(--px));
  left: calc(var(--ox) + 1110 * var(--px));
  top: calc(330 * var(--px));
}

/* Jazz-hero: en stor iPad som skjuter in från höger, bara den vänstra
   delen av skärmen syns. */
.case-hero .tablet {
  --tablet-w: calc(860 * var(--px));
  left: calc(var(--ox) + 696 * var(--px));
  top: calc(120 * var(--px));
}

/* Jazz: iPaden på bredden i vyn med iPad och telefon. */
/* Större, och i rimligare relation till varandra: en riktig iPad Air på
   bredden är ungefär tre och en halv iPhone bred. Här 2,6 — telefonen får
   vara lite större än verkligheten så att skärmen går att läsa. */
.case-devices-jazz .tablet--landscape {
  --tablet-w: calc(1000 * var(--px));
  left: calc(var(--ox) + 70 * var(--px));
  top: calc(130 * var(--px));
}

.case-devices-jazz .phone {
  --phone-w: calc(380 * var(--px));
  left: calc(var(--ox) + 990 * var(--px));
  top: calc(110 * var(--px));
}

/* En skärm utan enhet runt: bara bilden, rundade hörn och en kraftig
   skugga. För desktopvyer, där en dator runt omkring mest tar plats. */
.screen-card {
  overflow: hidden;
  border-radius: calc(24 * var(--px));
  box-shadow:
    0 calc(40 * var(--px)) calc(100 * var(--px)) rgba(0, 0, 0, 0.6),
    0 calc(12 * var(--px)) calc(30 * var(--px)) rgba(0, 0, 0, 0.35);
}

.screen-card img {
  display: block;
  width: 100%;
  height: auto;
}

.case-laptop .screen-card {
  left: calc(var(--ox) + 150 * var(--px));
  top: calc(90 * var(--px));
  width: calc(1140 * var(--px));
}

/* Jazz: utmärkelserna. Hibombos rosa i stället för fotot, rubriken i
   Blue 800 och vitt, och de två priserna i klartext under. */
.case-punch--awards {
  /* Hibombos rosa: Pink 400 mot Pink 200. */
  --frame-bg: linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 100%);
}

.case-punch--awards .statement-line {
  color: var(--dark);
}

.case-punch--awards .statement-line:nth-child(even) {
  color: #fff;
}

.awards {
  max-width: calc(620 * var(--px));
  margin-top: calc(40 * var(--px));
  font-size: calc(24 * var(--px));
  line-height: 1.6;
  color: var(--dark);
}

/* ============================================================
   Kortbilder
   Varje kort bär sitt case tema (data-case på kortet), och bilden är
   byggd av caset eget material: en bakgrund med casets hero-skärm i
   vår telefon, eller ett märke (brädet, loggan) på casets färg.
   ============================================================ */
.work-card__art {
  position: relative;
  background: var(--bg-statement);
}

.work-card__art .work-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card__art .phone {
  position: absolute;
  left: 28%;
  top: 16%;
  --phone-w: 44%;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.work-card__art .work-card__mark {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Bilden zoomar inte längre vid hover; telefonen eller märket lyfter. */
.work-card a:hover .work-card__art img.work-card__bg,
.work-card a:focus-visible .work-card__art img.work-card__bg {
  transform: none;
}

.work-card a:hover .work-card__art .phone,
.work-card a:focus-visible .work-card__art .phone {
  transform: translateY(-6%);
}

.work-card a:hover .work-card__mark,
.work-card a:focus-visible .work-card__mark {
  transform: scale(1.05);
}

/* Relaterade case: högre kort, så att sektionen fyller sin höjd. */
.case-related .work-card__art {
  aspect-ratio: 4 / 5;
}

.case-related .overview-grid {
  margin-top: calc(32 * var(--px));
}

/* ============================================================
   Översikten som kortstapel
   Hero med banderollen och bilden på mig, sedan ett
   kort per case. Casekorten bär sitt case tema via data-case på
   sektionen och lånar case-storys upplägg: text till vänster, två
   telefoner till höger.
   ============================================================ */
/* Översikten är Hibombos egen: rosa banderoll och rosa knapp. */
[data-case="overview"] {
  --ticker-bg: var(--pink);
  --ticker-ink: var(--dark);
  --accent: var(--pink);
}

.overview-hero {
  --frame-bg: #0b1f26;
}

.overview-hero .copy {
  width: calc(560 * var(--px));
}

.overview-hero .title {
  font-size: calc(88 * var(--px));
  white-space: nowrap;
}

.overview-hero .copy {
  top: 50%;
  transform: translateY(-50%);
}

.overview-hero .title + .body {
  margin-top: calc(24 * var(--px));
}

/* Bilden på mig fyller högra halvan ända ut till kanten, med skarp kant mot texten. */
.overview-hero .art {
  left: calc(var(--ox) + 780 * var(--px));
  width: calc(100% - var(--ox) - 780 * var(--px));
  object-position: 75% center;
}

/* Casets bakgrund, nedtonad så att texten bär. */
.overview-case .fill {
  opacity: 0.4;
}

.overview-case .title a {
  color: inherit;
  text-decoration: none;
}

.overview-case .eyebrow {
  font-size: calc(32 * var(--px));
}

/* Kontakt på Hibombos rosa, som awards i Jazz: Pink 400 mot Pink 200,
   mörk text och en mörk knapp. */
.overview-contact {
  --frame-bg: linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 100%);
}

.overview-contact .eyebrow,
.overview-contact .body {
  color: var(--dark);
}

.overview-contact .title {
  color: #fff;
}

.overview-contact .button {
  background: var(--dark);
  color: var(--pink-light);
}

/* ============================================================
   Telefon
   Samma brytpunkt och samma form som huvudsidan (styles.css): grafiken
   överst, texten under, typen i vw efter Figma 138:4403. Ramarna ligger
   platt i stället för att staplas; de är högre än skärmen här.

   Allt i casen är placerat på en 1440 x 900-duk med --px och --ox. Här
   får varje ram ett eget fönster ur duken: --src-x och --src-w säger
   vilken bit av desktopbredden som ska fylla telefonens bredd, och
   --stage hur hög grafikytan är (i duk-pixlar). Telefonerna, iPadarna och
   formerna står alltså kvar exakt som på desktop, bara utsnittet ändras.
   Textspalten läggs i flödet under grafikytan, med ramens bakgrund, så
   att grafik som sticker ut nedåt går in under den.
   ============================================================ */
@media (max-width: 767px) and (max-aspect-ratio: 9 / 5), ((max-aspect-ratio: 5 / 4) and (max-width: 820px)) {
  .frame {
    --src-x: 720;
    --src-w: 720;
    --stage: 0;
    --px: calc(100vw / var(--src-w));
    --ox: calc(var(--src-x) * var(--px) * -1);
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding-top: calc(var(--stage) * var(--px));
    box-shadow: none;
  }

  /* ---- Utsnitten ---- */
  .case-hero { --src-x: 672; --stage: 780; }
  .case-story { --src-x: 740; --stage: 760; }
  .case-story--flip { --src-x: -20; }
  .case-story--cta { --src-x: 620; --src-w: 860; --stage: 900; }
  .case-brand { --src-x: 40; --stage: 900; }
  .case-screens { --src-x: 0; --src-w: 1440; --stage: var(--h); }
  .case-details { --src-x: 60; --stage: 900; }
  .case-duo { --src-x: 220; --src-w: 1000; --stage: 900; }
  .case-phones { --src-x: 120; --src-w: 1240; --stage: 900; }
  .case-photo { --src-x: 0; --src-w: 1440; --stage: 1700; }
  .case-jazz-brand { --src-x: 300; --src-w: 840; --stage: 900; }
  .case-devices-jazz { --src-x: 40; --src-w: 1360; --stage: 900; }
  .case-laptop { --src-x: 130; --src-w: 1180; --stage: 900; }
  .case-related,
  .overview-contact { --stage: 0; }

  /* Påståendet är bara text: en hel skärm, raderna centrerade. */
  .case-punch {
    --stage: 0;
    height: 100svh;
  }

  /* ---- Texten under grafiken ---- */
  .frame .copy,
  .frame .copy[style] {
    position: relative;
    z-index: 3;
    left: auto;
    top: auto !important;
    width: auto;
    transform: none;
    padding: clamp(32px, 10.26vw, 56px) clamp(24px, 8.2vw, 44px) clamp(48px, 14vw, 72px);
    background: var(--frame-bg, var(--bg));
  }

  .case-hero .shade {
    display: none;
  }

  .frame .copy .eyebrow {
    font-size: clamp(18px, 5.13vw, 28px);
    margin-bottom: 8px;
  }

  .frame .copy .title {
    font-size: clamp(34px, 14.36vw, 72px);
    white-space: normal;
  }

  .frame .copy .body {
    font-size: clamp(16px, 4.6vw, 22px);
  }

  .frame .copy .body + .body {
    margin-top: 1em;
  }

  .frame .copy .title + .body {
    margin-top: 16px;
  }

  .frame .button-row {
    margin-top: 24px;
  }

  .frame .button {
    font-size: clamp(14px, 4vw, 18px);
    padding: 12px 20px;
    border-radius: 8px;
  }

  .frame .store-badge img {
    height: 48px;
    width: auto;
  }

  .statement-line {
    font-size: clamp(34px, 13vw, 72px);
    white-space: normal;
  }

  .case-punch .statement {
    gap: 4px;
    padding: 0 24px;
  }

  .awards {
    max-width: none;
    margin-top: 24px;
    font-size: clamp(15px, 4.4vw, 20px);
  }

  /* ---- Relaterade case: en spalt ---- */
  .case-related .copy:first-child {
    padding-bottom: 0;
  }

  .case-related .overview-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 16px;
  }

  .case-related .work-card__art {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .case-related .work-card__art .phone {
    left: 20%;
    top: 10%;
    --phone-w: 60%;
  }

  .case-related .work-card__name {
    font-size: clamp(28px, 9vw, 44px);
    margin-top: 16px;
  }

  .case-related .work-card__line,
  .case-related .work-card__tags {
    font-size: clamp(14px, 4.2vw, 18px);
  }

  .case-related .back {
    margin-top: 32px;
  }

  /* ---- Översikten ---- */
  /* Kontakten är sist och kort: en hel skärm, så att den hinner rulla
     upp långt nog för att texten ska tonas in. */
  .overview-contact {
    display: flex;
    align-items: center;
    min-height: 100svh;
  }

  .overview-hero .art {
    left: 0;
    top: 0;
    width: 100%;
    height: calc(var(--stage) * var(--px));
    object-position: 70% 30%;
  }

  .overview-hero .title {
    white-space: normal;
  }

  .back-btn {
    top: 20px;
    left: 16px;
    font-size: 18px;
    padding: 8px 14px 8px 16px;
  }
}