/* ==========================================================================
   FAVO VIEWER — DESIGN SYSTEM (6.0)
   Premium, minimal, dark cinematic. Grayscale/black base, one restrained
   oxblood accent for UI. The brand's own red (from the logo) appears only
   where the logo itself appears. Bold grotesk display type, per the hero
   reference material; clean sans body; mono for labels and FAQ.
   ========================================================================== */

:root {
  --bg-void: #08080a;
  --bg-surface: #121215;
  --bg-surface-2: #1a1a1e;
  --bg-card: #16161a;

  --border-hairline: rgba(240, 236, 228, 0.08);
  --border-subtle: rgba(240, 236, 228, 0.14);
  --border-strong: rgba(240, 236, 228, 0.24);

  --text-primary: #F3EFE7;
  --text-secondary: rgba(243, 239, 231, 0.68);
  --text-muted: rgba(243, 239, 231, 0.44);
  --silver: #C7BFAE;
  --silver-bright: #E4DCC8;

  --accent: #7C2430;
  --accent-bright: #9C3040;
  --accent-wash: rgba(124, 36, 48, 0.14);
  --brand-red: #E0031A;

  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-hero-headline: 'Anton', 'Archivo Black', sans-serif;
  --font-wordmark: 'Archivo Expanded', 'Arial Black', sans-serif;
  --font-tagline: 'Quicksand', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --trans-fast: 0.22s var(--ease-out);
  --trans-smooth: 0.45s var(--ease-out);
  --trans-slow: 0.9s var(--ease-out);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-deep: 0 30px 70px rgba(0, 0, 0, 0.55);

  --container-max: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-pad: clamp(68px, 8.5vw, 128px);
  --nav-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
/* Stoppar sidledes "wobbel" när man drar snett med tummen på touch-skärmar
   — touch-action styr bara hur pekgester tolkas (inte overflow eller scroll-
   behållare), så det här rör varken position:sticky-pinningen ovan/nedan
   eller scrollning med mus/styrplatta på desktop. Sätts bara för
   pekskärmar (coarse pointer) så mus-/styrplatteanvändare är opåverkade
   även om webbläsarfönstret råkar vara smalt. */
@media (hover: none), (pointer: coarse) {
  html, body { touch-action: pan-y; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

.container { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--gutter); }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.editorial-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 18px;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem);
  line-height: 1.06;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.6rem);
  line-height: 1.14;
  text-transform: uppercase;
  color: var(--text-primary);
}

h3, .h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }

.lead { font-size: clamp(1.02rem, 1.3vw, 1.22rem); line-height: 1.65; color: var(--text-secondary); font-weight: 400; }
p.body-text { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
.mono-label { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.08em; color: var(--text-muted); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  transition: transform var(--trans-fast), border-color var(--trans-fast), background var(--trans-fast), color var(--trans-fast);
  white-space: nowrap;
}
.btn-primary { background: var(--text-primary); color: var(--bg-void); }
.btn-primary:hover { background: var(--accent-bright); color: var(--text-primary); transform: translateY(-1px); }
.btn-secondary { border: 1px solid var(--border-strong); color: var(--text-primary); background: transparent; }
.btn-secondary:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-lg { padding: 17px 32px; font-size: 1rem; }
.w-full { width: 100%; justify-content: center; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: var(--nav-h); display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--trans-smooth), border-color var(--trans-smooth);
}
.site-header.scrolled { background: rgba(8, 8, 10, 0.88); backdrop-filter: blur(14px); border-bottom-color: var(--border-hairline); }
.site-header:not(.scrolled):hover { background: rgba(8, 8, 10, 0.55); backdrop-filter: blur(10px); }

.nav-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand-link { display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 63px; width: auto; object-fit: contain; }
.brand-word { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.02em; text-transform: uppercase; }
.brand-word b { color: var(--accent-bright); font-weight: 400; }

.desktop-nav { display: flex; align-items: center; gap: 22px; }
.nav-item-wrap { position: relative; }
.nav-item {
  font-size: 0.88rem; letter-spacing: 0.02em; color: var(--text-secondary);
  position: relative; padding-block: 4px; display: inline-flex; align-items: center; gap: 6px;
  transition: color var(--trans-fast);
}
.nav-item::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
  background: var(--accent-bright); transition: right var(--trans-smooth);
}
.nav-item:hover { color: var(--text-primary); }
.nav-item:hover::after, .nav-item.active::after { right: 0; }
.nav-item.active { color: var(--text-primary); }
.nav-caret { font-size: 0.6rem; opacity: 0.6; }

.nav-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--bg-surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  padding: 10px; min-width: 210px; box-shadow: var(--shadow-deep);
  opacity: 0; pointer-events: none; transition: opacity var(--trans-fast), transform var(--trans-fast);
}
.nav-item-wrap:hover .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-dropdown a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 0.86rem; color: var(--text-secondary); }
.nav-dropdown a:hover { background: var(--bg-surface-2); color: var(--text-primary); }

.nav-actions { display: flex; align-items: center; gap: 18px; }
.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; width: 26px; }
.mobile-menu-btn span { display: block; height: 1px; background: var(--text-primary); }

.mobile-drawer {
  /* Explicit 100svh istället för att låta inset:0 räkna ut höjden själv —
     mobilwebbläsarens adressfält gör att den "stora" och "synliga" ytan
     skiljer sig åt tills man scrollar en gång, vilket gjorde att menyn
     först ritades ut fel (för hög/överlappade navbaren, svart yta innan
     den "satte sig"). 100svh är alltid den stabila, synliga höjden direkt. */
  position: fixed; inset: 0; height: 100svh; z-index: 600; background: var(--bg-void);
  display: flex; flex-direction: column; justify-content: center; padding: var(--gutter);
  transform: translateY(-8px); opacity: 0; pointer-events: none; overflow-y: auto;
  transition: opacity var(--trans-smooth), transform var(--trans-smooth);
}
.mobile-drawer.open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav { display: flex; flex-direction: column; gap: 12px; padding-block: 32px; max-height: 100%; overflow-y: auto; }
.mobile-nav-item { font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; }
.mobile-nav-sub { display: flex; flex-direction: column; gap: 8px; padding-left: 14px; margin-top: 6px; }
.mobile-nav-sub a { font-size: 0.85rem; color: var(--text-secondary); font-family: var(--font-body); }

@media (max-height: 700px) {
  .mobile-nav { gap: 8px; padding-block: 20px; }
  .mobile-nav-item { font-size: 0.98rem; }
}
.mobile-drawer-close { position: absolute; top: 28px; right: var(--gutter); font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--text-secondary); }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--accent-bright); }
.breadcrumb span[aria-current] { color: var(--text-secondary); }

/* ==========================================================================
   PAGE HEADER
   ========================================================================== */
.page-header { padding-top: calc(var(--nav-h) + var(--section-pad) * 0.5); padding-bottom: clamp(36px, 5vw, 64px); }
.page-header .h1 { max-width: 820px; }
/* Bransch-sidorna (Restaurang & hotell, Varumärken, Distributörer,
   Tjänsteföretag) hade en H1 som radbröt till 3-4 rader — samma
   semantiska <h1>, bara en mindre visuell storlek så den landar på två
   rader istället. Rör inte den generella h1-regeln (den används av SEO-
   kritiska rubriker på övriga sidor). */
.h1-tight { font-size: clamp(1.9rem, 3.6vw, 3.3rem); }
.page-header .lead { max-width: 640px; margin-top: 18px; }
/* Experiment: nedtonad videobakgrund bakom sidhuvudet, likt hero — satt
   på en yttre wrap så .page-header (och alla andra sidor som använder
   den utan wrap) är helt opåverkad. */
.page-header-media-wrap { position: relative; overflow: hidden; }
.page-header-media { position: absolute; inset: 0; z-index: 0; }
.page-header-media video { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: grayscale(0.3) saturate(1.05) brightness(0.55); }
.page-header-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,0.35) 0%, rgba(8,8,10,0.55) 60%, var(--bg-void) 100%); }
.page-header-media-wrap .page-header { position: relative; z-index: 1; }

/* ==========================================================================
   HERO — Start page
   ========================================================================== */
/* Heron är en FAST 16:9-duk som skalar som en enhet — som en videoruta,
   inte som ett vanligt responsivt textflöde. Allt inuti positioneras i
   procent och storleksätts i vw, så kompositionen (var texten sitter i
   förhållande till videon) är identisk på alla skärmbredder; bara den
   absoluta storleken krymper. Ingen omflödning till en "mobil-layout". */
/* Ren CSS position:sticky för "pin"-känslan (samma beprövade teknik som
   den pinnade produktionsberättelsen längre ner) — INGEN GSAP pin/
   ScrollTrigger.matchMedia inblandad, så det finns ingen pin-instans som
   kan byggas om vid resize. Utseendet i vila är identiskt med tidigare
   (position:relative gav exakt samma visuella placering vid scrollY 0). */
/* overflow-anchor: none — stänger av Chrome/Androids "scroll anchoring".
   Den funktionen försöker automatiskt hålla kvar det man tittar på genom
   att själv justera scrollpositionen när den upptäcker layoutförändringar
   i närheten — men i en sektion vi redan styr helt deterministiskt via
   JS/CSS-transitions (opacity/transform som växlas löpande av scrollen)
   misstolkar Chrome våra egna, avsiktliga ändringar som "oväntade" och
   knuffar scrollpositionen, vilket syns som just det hack som
   rapporterats. Safari stödjer inte scroll anchoring alls (varken iOS
   eller macOS) — därför var Safari redan felfri utan denna rad. */
.hero-pin-wrap { position: relative; overflow-anchor: none; }
.hero-pin-spacer { height: 100vh; }
/* will-change: transform ger elementet ett eget kompositeringslager på
   GPU:n. Chrome på Android har ett känt problem där en position:sticky-
   yta repaintas/läggs om på huvudtråden när adressfältet animerar in/ut
   (visas vid uppåtskroll, döljs vid nedåt), vilket syns som ett litet
   hack just under den övergången — Safari på iOS composite:ar redan
   sticky-lager för sig och drabbas inte. Egenskapen är bara en
   renderingshint (ändrar inget om layout/beteende) så den påverkar inte
   det redan korrekta beteendet på Safari/desktop, bara hur Chrome
   hanterar lagret internt. */
.hero { position: sticky; top: 0; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .hero { position: relative; }
  .hero-pin-spacer { display: none; }
}
.hero-media { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; opacity: 0.62; filter: grayscale(0.25) saturate(1.05) contrast(1.05) brightness(0.62); }
.hero-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, transparent 15%, rgba(8,8,10,0.88) 85%), linear-gradient(180deg, rgba(8,8,10,0.35) 0%, rgba(8,8,10,0.5) 55%, var(--bg-void) 100%); }

.hero-content { position: absolute; inset: 0; z-index: 3; }

/* Rubrik och tagline delar samma vänsterkant (samma "linje"). Ordmärket
   är fristående centrerat på hela bredden, och ligger vertikalt mellan de
   två textraderna. */
.hero-headline-block { position: absolute; top: 33%; left: 62%; text-align: right; width: 31%; }
.hero-h1 { font-family: var(--font-hero-headline); font-weight: 400; text-transform: uppercase; font-size: 3.6vw; line-height: 1.15; letter-spacing: 0.005em; color: var(--text-primary); text-shadow: 0 8px 28px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.5); }

.hero-wordmark-block { position: absolute; top: 52%; left: 5%; right: 5%; text-align: center; }
.hero-wordmark-text { display: block; font-family: var(--font-wordmark); font-weight: 700; font-size: 5.3vw; letter-spacing: 0.09em; line-height: 1; white-space: nowrap; text-shadow: 0 8px 28px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.5); }
.hero-wordmark-text .favo { color: var(--brand-red); }
.hero-wordmark-text .viewer { color: var(--text-primary); }

.hero-tagline-text { position: absolute; top: 65%; right: 7%; display: block; font-family: var(--font-tagline); font-weight: 500; letter-spacing: 0.03em; font-size: 1.7vw; color: var(--silver-bright); white-space: nowrap; text-shadow: 0 8px 28px rgba(0,0,0,0.65), 0 2px 6px rgba(0,0,0,0.5); }

.hero-cta-row { position: absolute; top: 82%; left: 5%; display: flex; justify-content: flex-start; gap: 1vw; flex-wrap: nowrap; }
.hero-cta-row .btn { padding: 0.8vw 1.6vw; font-size: 0.95vw; gap: 0.5vw; white-space: nowrap; }

/* Generisk knapprad, återanvänd på CTA-sektioner utanför heron. */
.hero-actions { margin-top: 34px; display: flex; justify-content: flex-start; gap: 16px; flex-wrap: wrap; }
.hero-scroll-hint { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); z-index: 3; font-family: var(--font-body); font-weight: 600; font-size: 0.7vw; letter-spacing: 0.16em; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 0.5vw; }
.hero-scroll-hint .line { width: 1px; height: 1.8vw; background: linear-gradient(var(--text-muted), transparent); }

.hero-headline-block, .hero-wordmark-block, .hero-tagline-text, .hero-cta-row { opacity: 0; transform: translateY(1vw); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.hero-content.hero-in .hero-headline-block { transition-delay: 0.05s; }
.hero-content.hero-in .hero-wordmark-block { transition-delay: 0.2s; }
.hero-content.hero-in .hero-tagline-text { transition-delay: 0.28s; }
.hero-content.hero-in .hero-cta-row { transition-delay: 0.35s; }
.hero-content.hero-in .hero-headline-block,
.hero-content.hero-in .hero-wordmark-block,
.hero-content.hero-in .hero-tagline-text,
.hero-content.hero-in .hero-cta-row { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-headline-block, .hero-wordmark-block, .hero-tagline-text, .hero-cta-row { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   LOGO WALL / SOCIAL PROOF
   ========================================================================== */
.logo-wall-section { padding-block: clamp(52px, 6vw, 88px); border-top: 1px solid var(--border-hairline); text-align: center; }
.logo-wall-label { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 36px; }
.logo-wall-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.logo-wall-item { display: flex; align-items: center; justify-content: center; height: 42px; }
.logo-wall-item img { max-height: 100%; max-width: 120px; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: 0.55; transition: opacity var(--trans-fast); }
.logo-wall-item:hover img { opacity: 0.95; }

/* ==========================================================================
   SECTION SCAFFOLDING
   ========================================================================== */
section { padding-block: var(--section-pad); }
.section-head { max-width: 700px; margin-bottom: clamp(44px, 6vw, 76px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-alt { background: var(--bg-surface); }
/* Delad klass för samma tighta toppadding som redan används punktvis via
   id-selektorer på flera sidor (Metodiken, Utvalt arbete, Dokumenterade
   resultat, Branscher, Arbetssätt, Paket-teaser, Sociala medier,
   Contentproduktion, Varumärken). Används rakt av på nya sidor istället
   för att upprepa samma clamp-värde i en ny id-regel varje gång. */
.pad-top-tight { padding-top: clamp(32px, 4vw, 56px); }
#produktionsexempel { padding-top: clamp(8px, 1vw, 16px); padding-bottom: clamp(16px, 2vw, 28px); }
/* Tjänsteföretag-sidan: halverat mellanrum mellan "Förtroende byggs
   innan mötet" och "Fler röster, mer tillit", nästan ingen bottenpadding
   under bilderna, och halverad bottenpadding på "Så arbetar vi" och FAQ
   (skopat till just den här sidan, inte den delade #faq-regeln). */
#tj-fortroende { padding-bottom: clamp(34px, 4.25vw, 64px); }
#tj-roster { padding-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(8px, 1vw, 16px); }
#tj-process { padding-bottom: clamp(34px, 4.25vw, 64px); }
.faq-tight-bottom { padding-bottom: clamp(34px, 4.25vw, 64px); }
/* Distributörer-sidan: tar bort ramen runt den första bilden (bara på
   den här sidan — .about-frame återanvänds oförändrad på flera andra
   sidor), halverar mellanrummet till "Från produktion till hylla", och
   tar bort nästan all bottenpadding under bildparet där. */
#dist-varumarke .about-frame { border: none; }
#dist-varumarke { padding-bottom: clamp(34px, 4.25vw, 64px); }
#dist-hylla { padding-top: clamp(16px, 2vw, 28px); padding-bottom: clamp(8px, 1vw, 16px); }
#dist-process { padding-bottom: clamp(34px, 4.25vw, 64px); }
#dist-cta { padding-bottom: clamp(34px, 4.25vw, 64px); }
/* Restaurang & hotell — samma paddingbehandling som Distributörer:
   halverad bottenpadding på alla sektioner, och "På plats"
   (bildparet) får samma tighta topp + nästan ingen bottenpadding som
   motsvarande bildsektion där. */
#rh-verksamhet { padding-bottom: clamp(34px, 4.25vw, 64px); }
#rh-behov { padding-bottom: clamp(34px, 4.25vw, 64px); }
#rh-plats { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(8px, 1vw, 16px); }
#rh-resultat { padding-bottom: clamp(34px, 4.25vw, 64px); }
#rh-cta { padding-bottom: clamp(34px, 4.25vw, 64px); }

/* Enhetlig, tightare toppadding för denna klunga av sektioner — mindre
   dött utrymme mellan föregående sektion och rubriken. */
#metodiken, #utvalt-arbete, #dokumenterade-resultat, #branscher, #arbetssatt, #paket-teaser {
  padding-top: clamp(32px, 4vw, 56px);
}
#metodiken .section-head { margin-bottom: clamp(20px, 2.5vw, 32px); }
#utvalt-arbete .section-head { margin-bottom: clamp(36px, 5vw, 60px); }
#production { padding-top: 0; }
/* FAQ — enhetlig, halverad toppadding och avstånd rubrik→frågor på alla
   sidor som har en FAQ-sektion (index, sociala-medier, contentproduktion,
   restaurang-hotell, varumarken). */
#faq { padding-top: clamp(34px, 4.25vw, 64px); }
#faq .section-head { margin-bottom: clamp(22px, 3vw, 38px); }
/* Sociala medier-sidan: samma tighta toppadding som övriga justerade
   sektioner, plus lite mindre bottenpadding på "Anpassat per kanal". */
#vad-som-ingar { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(32px, 4vw, 56px); }
/* Flyttar copyn högre upp i sektionen (mindre luft ovanför rubriken). */
#anpassat-per-kanal { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(16px, 2vw, 28px); }
#feed-galleri { padding-top: clamp(24px, 3vw, 36px); padding-bottom: clamp(24px, 3vw, 36px); }
/* Event & engångsprojekt — "Så skapar vi det": tightare toppadding mot
   sektionen ovanför, och mindre avstånd mellan rubriken och bilderna. */
/* Contentproduktion — samma tighta toppadding som övriga korrigerade
   sektioner på sajten, plus halverad bottenpadding på "Flera format". */
#cp-format, #cp-lopande-produktion, #cp-flera-format, #cp-relaterat { padding-top: clamp(32px, 4vw, 56px); }
#cp-flera-format { padding-bottom: clamp(34px, 4.25vw, 64px); }
#dokumenterade-resultat { padding-bottom: clamp(32px, 4vw, 56px); }

/* ==========================================================================
   CAPABILITY GRID (services / industries)
   ========================================================================== */
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.capability-card { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 30px 26px; background: var(--bg-card); }
.capability-card h3 { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; font-weight: 400; margin-bottom: 12px; }
.capability-card p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; margin-bottom: 18px; }
.capability-card a { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--accent-bright); }
.capability-card a:hover { color: var(--text-primary); }

.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-list li { border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 0.85rem; color: var(--text-secondary); }

/* ==========================================================================
   INDUSTRY / PILLARS ROW
   ========================================================================== */
.pillars-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-hairline); }
.pillar { padding: 32px 28px 0; border-left: 1px solid var(--border-hairline); }
.pillar:first-child { border-left: none; }
.pillar-num { font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; color: var(--accent-bright); margin-bottom: 16px; display: block; letter-spacing: 0.04em; text-transform: uppercase; }
.pillar h3 { margin-bottom: 10px; text-transform: none; font-family: var(--font-body); }
.pillar p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.6; }
.pillar a.pillar-link { display: inline-block; margin-top: 14px; font-family: var(--font-body); font-weight: 700; font-size: 0.88rem; color: var(--accent-bright); }
.pillar a.pillar-link:hover { color: var(--text-primary); }

/* ==========================================================================
   PROCESS STEPS
   ========================================================================== */
.process-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--border-hairline); }
/* Sidor med bara 4 steg (Distributörer, Event & engångsprojekt,
   Tjänsteföretag) satte tidigare kolumnantalet via inline style, vilket
   vann över ALLA responsiva regler nedan oavsett skärmbredd — samma typ av
   bugg som .pricing-grid hade (fyra smala kolumner med textinnehåll som
   inte fick plats, sidled wobble på mobil). En egen klass löser det: den
   har samma specificitet som .process-row-reglerna i RESPONSIVE-blocket
   nedan, men eftersom de kommer senare i filen vinner de vid respektive
   brytpunkt, medan denna gäller på desktop. */
.process-row-4 { grid-template-columns: repeat(4, 1fr); }
.process-step { padding: 28px 18px 0; border-left: 1px solid var(--border-hairline); }
.process-step:first-child { border-left: none; }
.process-num { font-family: var(--font-body); font-weight: 600; font-size: 0.75rem; color: var(--text-muted); display: block; margin-bottom: 14px; }
.process-step h3 { font-size: 0.98rem; margin-bottom: 8px; }
.process-step p { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.55; }

/* ==========================================================================
   LOCATIONS
   ========================================================================== */
/* Grid istället för flex — så mittenkolumnen (Malmö) alltid hamnar exakt
   under den centrerade rubriken ovanför, oavsett att "Göteborg" och
   "Costa Blanca" har olika textbredd (med flex drog den bredare texten
   snett balansen och gjorde raden skev). */
/* repeat(3, 1fr) räknar ändå in varje kolumns innehålls-bredd som minimum
   (grid-standarden min-width:auto), så "Costa Blanca" (längst) gjorde sin
   kolumn bredare än de andra två — då hamnar inte längre Malmös kolumn
   mitt i raden. minmax(0,1fr) tvingar alla tre kolumner till EXAKT samma
   bredd oavsett textlängd, så mittenkolumnen alltid är den sanna mitten. */
.locations-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 4vw, 48px); margin-bottom: 24px; max-width: 760px; margin-inline: auto; }
.location-item { font-family: var(--font-display); font-size: clamp(1.15rem, 2.1vw, 1.9rem); text-transform: uppercase; color: var(--silver-bright); text-align: center; white-space: nowrap; overflow: visible; }

/* ==========================================================================
   CASE TEASER / CARDS
   ========================================================================== */
.case-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-teaser-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--bg-card); border: 1px solid var(--border-hairline); }
.case-teaser-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4) brightness(0.8); transition: transform var(--trans-slow), filter var(--trans-slow); }
.case-teaser-card:hover img { transform: scale(1.045); filter: grayscale(0) brightness(0.9); }
.case-teaser-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8,8,10,0.92) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; }
.case-teaser-industry { font-family: var(--font-body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--accent-bright); text-transform: uppercase; margin-bottom: 6px; }
.case-teaser-client { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; }
.case-teaser-result { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; color: var(--text-secondary); margin-top: 6px; }

.case-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: clamp(32px,4vw,48px); }
.case-filter { border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); padding: 9px 18px; font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.04em; color: var(--text-secondary); }
.case-filter.active { border-color: var(--accent-bright); color: var(--accent-bright); }

.case-plain-card { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); aspect-ratio: 4/5; background: var(--bg-card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.case-plain-card img { max-width: 60%; max-height: 70px; object-fit: contain; filter: grayscale(1) brightness(1.6); opacity: 0.85; }
.case-plain-industry { font-family: var(--font-body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--accent-bright); text-transform: uppercase; }
.case-plain-result { font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; color: var(--text-secondary); }

/* ==========================================================================
   CASE DEEP PANELS / TEMPLATE
   ========================================================================== */
.case-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; padding-block: clamp(56px, 8vw, 112px); border-top: 1px solid var(--border-hairline); }
.case-panel:first-of-type { border-top: none; }
.case-panel.reverse { direction: rtl; }
.case-panel.reverse > * { direction: ltr; }
.case-media-col { position: relative; }
.case-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: #000; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-deep); }
.case-frame video, .case-frame img { width: 100%; height: 100%; object-fit: cover; }
.case-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 58px; height: 58px; border-radius: 50%; background: rgba(8,8,10,0.55); border: 1px solid var(--border-strong); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: var(--text-primary); transition: transform var(--trans-fast), background var(--trans-fast); }
.case-play-btn:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--accent); }
.case-text-col .case-client-logo { height: 26px; object-fit: contain; filter: grayscale(1) brightness(1.6); margin-bottom: 24px; }
.case-index { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; color: var(--text-muted); margin-bottom: 10px; display: block; }
.case-pull { font-family: var(--font-display); font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.32; color: var(--text-primary); margin-bottom: 20px; text-transform: uppercase; }
.case-body { color: var(--text-secondary); line-height: 1.75; margin-bottom: 8px; }
.case-body + .case-body { margin-top: 14px; }
.case-metrics { display: flex; gap: clamp(20px, 3vw, 40px); margin-top: 30px; flex-wrap: wrap; }
.metric-val { font-family: var(--font-display); font-size: 1.7rem; color: var(--text-primary); display: block; }
.metric-arrow { color: var(--accent-bright); margin: 0 6px; font-family: var(--font-body); }
.metric-lbl { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 6px; display: block; }
.case-no-metric { font-family: var(--font-body); font-weight: 600; font-size: 0.78rem; color: var(--text-muted); margin-top: 26px; border-top: 1px solid var(--border-hairline); padding-top: 16px; }

/* Case template meta row */
.case-meta-row { display: flex; flex-wrap: wrap; gap: 28px; padding: 24px 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); margin: 28px 0 40px; }
.case-meta-item .lbl { font-family: var(--font-body); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 4px; }
.case-meta-item .val { font-size: 0.94rem; color: var(--text-primary); }
.case-section-title { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 14px; display: block; }
.case-quote { font-family: var(--font-display); font-size: clamp(1.3rem,2vw,1.7rem); text-transform: none; line-height: 1.4; color: var(--text-primary); border-left: 2px solid var(--accent); padding-left: 20px; margin-block: 12px; }

/* ==========================================================================
   PRICING
   ========================================================================== */
/* Samma grid-template-columns/gap som .pricing-grid nedan, med flit —
   annars hamnar rutorna inte rakt ovanför sin respektive prisbox. */
.responsibility-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: clamp(48px, 6vw, 80px); }
.rl-step { padding: 26px 24px; border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); }
.rl-step.featured { background: var(--accent-wash); border-color: var(--accent); }
.rl-name { font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 10px; }
.rl-chain { font-size: 0.95rem; color: var(--text-primary); display: block; }
.rl-chain i { color: var(--text-muted); margin: 0 6px; font-style: normal; }
.rl-said { display: block; margin-top: 14px; font-size: 0.86rem; color: var(--text-secondary); font-style: normal; line-height: 1.5; }
.pricing-flex-note { font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); font-weight: 500; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tier-card { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 34px 28px; background: var(--bg-card); display: flex; flex-direction: column; position: relative; }
.tier-card.featured { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-wash), var(--bg-card) 40%); }
.tier-flag { position: absolute; top: -1px; right: 26px; background: var(--accent); color: var(--text-primary); font-family: var(--font-body); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.1em; padding: 6px 12px; border-radius: 0 0 8px 8px; }
.tier-badge { font-family: var(--font-body); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 16px; }
.tier-card h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; text-transform: uppercase; margin-bottom: 6px; }
.tier-hook { font-size: 0.9rem; color: var(--silver-bright); margin-bottom: 14px; }
.tier-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; margin-bottom: 22px; }
/* Paket-teasern på startsidan saknar .tier-list (som på /paket har flex-grow
   och håller CTA-knapparna i linje) — utan denna rad hamnar Partnership och
   Growths knappar högre upp än Contents eftersom deras kortare brödtext
   inte fyller ut kortets stretchade höjd. */
#paket-teaser .tier-desc { flex-grow: 1; }
.tier-price { display: flex; align-items: baseline; gap: 8px; }
.tier-price .pre { font-size: 0.85rem; color: var(--text-muted); }
.tier-price .amt { font-family: var(--font-display); font-size: 1.9rem; color: var(--text-primary); }
.tier-price .per { font-size: 0.85rem; color: var(--text-muted); margin-left: -2px; }
.tier-vat { display: block; font-size: 0.72rem; color: var(--text-muted); margin-bottom: 22px; }
.tier-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 26px; flex-grow: 1; }
.tier-list li { font-size: 0.87rem; color: var(--text-secondary); line-height: 1.5; padding-left: 18px; position: relative; }
.tier-list li::before { content: '—'; position: absolute; left: 0; color: var(--text-muted); }
.tier-list li strong { color: var(--text-primary); }

/* ==========================================================================
   FAQ (AEO-critical — plain readable text, no hidden-only content)
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--border-hairline); padding-block: 16px; }
.faq-item:last-child { border-bottom: 1px solid var(--border-hairline); }
.faq-item summary { font-family: var(--font-body); font-size: 1rem; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--text-muted); flex-shrink: 0; transition: transform var(--trans-fast); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--text-secondary); font-size: 0.93rem; line-height: 1.6; margin-top: 10px; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.about-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-deep); position: sticky; top: calc(var(--nav-h) + 24px); }
.about-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.pillars-list { display: flex; flex-direction: column; }
.about-pillar { padding-block: 22px; border-top: 1px solid var(--border-hairline); }
.about-pillar:last-child { border-bottom: 1px solid var(--border-hairline); }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 80px); }
.contact-fact { display: flex; gap: 16px; padding-block: 18px; border-top: 1px solid var(--border-hairline); }
.contact-fact:last-child { border-bottom: 1px solid var(--border-hairline); }
.contact-fact .lbl { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); min-width: 140px; }
.contact-fact .val { color: var(--text-primary); font-size: 0.95rem; }
.contact-fact .val a:hover { color: var(--accent-bright); }
.form-card { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px); background: var(--bg-card); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--text-muted); text-transform: uppercase; }
.field input, .field select, .field textarea { background: var(--bg-surface-2); border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); padding: 13px 15px; color: var(--text-primary); font-family: var(--font-body); font-size: 0.94rem; transition: border-color var(--trans-fast); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--silver); }
.field textarea { resize: vertical; min-height: 100px; }
.checkbox-group { display: flex; flex-direction: column; gap: 8px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-secondary); }
.checkbox-item input { width: 16px; height: 16px; }
.form-feedback { margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; display: none; }
.form-feedback.success { display: block; background: rgba(120, 200, 150, 0.1); border: 1px solid rgba(120, 200, 150, 0.3); color: #bfe9cf; }
.form-feedback.error { display: block; background: rgba(214, 158, 46, 0.1); border: 1px solid rgba(214, 158, 46, 0.35); color: #f0cf8f; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border-hairline); padding-block: clamp(56px, 6vw, 88px) 32px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px; }
.footer-company { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; margin-left: -3px; font-size: 0.92rem; color: var(--text-secondary); }
.footer-brand p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.6; margin-top: 28px; margin-left: -3px; max-width: 280px; }
.footer-locations { white-space: nowrap; }
.footer-tagline-strong { color: var(--text-primary); font-weight: 700; }
.footer-col-title { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; display: block; }
.footer-col a, .footer-col span { display: block; color: var(--text-secondary); font-size: 0.98rem; padding-block: 5px; transition: color var(--trans-fast); }
.footer-col a:hover { color: var(--accent-bright); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--border-hairline); flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.85rem; color: var(--text-muted); }
.to-top { font-family: var(--font-body); font-weight: 600; font-size: 0.76rem; color: var(--text-muted); }
.to-top:hover { color: var(--accent-bright); }

/* ==========================================================================
   SCROLL-DRIVEN MOTION
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms), transform 0.9s var(--ease-out) var(--reveal-delay, 0ms); }
[data-reveal].is-revealing { will-change: opacity, transform; }
[data-reveal].is-revealed { opacity: 1; transform: none; }
.count-target { display: inline-block; font-variant-numeric: tabular-nums; }
.unveil-img { will-change: clip-path; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal].is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-media video { display: none; }
}

/* ==========================================================================
   ROLLANDE LOGOTYPBAND (marquee)
   ========================================================================== */
.marquee-section { padding-block: clamp(52px, 6vw, 88px); padding-bottom: clamp(28px, 3vw, 44px); border-top: 1px solid var(--border-hairline); text-align: center; overflow: hidden; }
/* Kompakt variant för sidor där bandet ska sitta direkt under rubriksektionen
   utan att trycka ner innehållet under vikningen (se event-engangsprojekt). */
.marquee-section-tight { padding-top: clamp(32px, 4vw, 56px); padding-bottom: clamp(14px, 2vw, 22px); border-top: none; }
.marquee-section-tight .editorial-tag { margin-bottom: 10px; }
/* Lite mindre loggor i den tighta varianten (event-bandet) än i
   startsidans .marquee-section, så bandet känns nätt i den kompakta
   sektionen. */
.marquee-section-tight .marquee-track img { width: 114px; height: 42px; margin-right: clamp(30px, 4vw, 54px); }
.marquee-section-tight .marquee-track img.logo-mark { width: 72px; height: 72px; }
/* Event & engångsprojekt: samma luftighet ovanför loggobandet och ovanför
   "Vad vi kan hjälpa till med" som motsvarande mellanrum på Sociala
   medier-sidan (standard .page-header-padding + .pad-top-tight). */
#vad-vi-hjalper-till-med { padding-top: clamp(32px, 4vw, 56px); }
#vad-vi-gor { padding-top: clamp(28px, 3vw, 44px); }
.marquee-section .h2 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); margin-bottom: clamp(36px, 5vw, 56px); }
.marquee-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee-scroll 32s linear infinite; }
/* Fast "logotyp-ruta" per märke istället för bara fast höjd — annars blir
   runda/kvadratiska loggor (Lucente, Stures, Flying Barrel) mycket mindre
   till ytan än breda ordmärken (Malt House, Angelo's) trots "samma"
   höjd. object-fit:contain skalar varje logga proportionerligt så den
   fyller rutan så mycket som möjligt utan att snedvridas.
   Mellanrummet sätts som margin-right per logga istället för `gap` på
   tracket — med `gap` blir "skarven" mellan den sista loggan i första
   varvet och den första i det duplicerade varvet bara EN mellanrumsbredd,
   medan hela banans bredd delas i två för animationen (translateX(-50%)),
   vilket ger en halv mellanrumsbredds osynkat hopp/"hack" varje loop. Med
   margin-right på varje logga (inklusive den sista i varje varv) blir
   mönstret helt periodiskt och loopen sömlös. */
.marquee-track img { width: 132px; height: 48px; object-fit: contain; opacity: 0.65; transition: opacity var(--trans-fast); margin-right: clamp(36px, 4.5vw, 64px); }
.marquee-track img.logo-mark { width: 84px; height: 84px; }
/* Kalle Glader och Beerista har tunnare linjekonst som läser svagt vid
   samma rutstorlek som Stures/Flying Barrel — några px extra hjälper. */
.marquee-track img.logo-mark-kalle, .marquee-track img.logo-mark-beerista { width: 100px; height: 100px; }
/* Lucentes originalfil har mycket luft inbakad i själva PNG-canvasen
   (~90% fyllnadsgrad) så den behöver en större ruta för att kännas lika
   stor som de andra. */
.marquee-track img.logo-mark-lucente { width: 108px; height: 108px; }
/* Daawats originalfil har ännu mer inbakad transparent marginal (bara
   ~65% av canvasen är faktisk logga), vilket gjorde den både mindre och
   "urblekt" — störst ruta av alla för att kompensera. */
.marquee-track img.logo-mark-daawat { width: 118px; height: 118px; }
.marquee-track:hover img { opacity: 0.5; }
.marquee-track img:hover { opacity: 1; }
/* Loggolistan upprepas 4 gånger i DOM (inte bara 2) och banan animeras
   bara en fjärdedel av sin totala bredd (-25%, inte -50%). Anledningen:
   med bara 2 varv kunde den totala bandbredden bli SMALARE än
   webbläsarfönstret på breda/stora skärmar (särskilt på event-sidans
   band med färre och mindre loggor) — då hann hela innehållet rulla ut
   innan loopen skulle nollställas, vilket syntes som en svart lucka
   följt av att en logotyprad plötsligt dök upp mitt i animationen. Fler
   varv ger alltid tillräckligt med bredd oavsett skärmstorlek, och
   -25% fortsätter landa exakt på repetitionspunkten (samma princip som
   -50% vid 2 varv) så loopen är fortsatt sömlös. */
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ==========================================================================
   METODIKEN (loopen)
   ========================================================================== */
.loop-row { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border-hairline); }
.loop-cell { padding: 28px 20px 0; border-left: 1px solid var(--border-hairline); }
.loop-cell:first-child { border-left: none; }
.loop-cell.key { background: var(--accent-wash); }
.loop-cell-name { font-family: var(--font-body); font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.loop-cell-text { color: var(--text-secondary); font-size: 0.86rem; line-height: 1.55; }
.loop-cell-tag { display: inline-block; margin-top: 12px; font-family: var(--font-body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-bright); }

/* ==========================================================================
   UTVALT ARBETE — REELS-GALLERI
   ========================================================================== */
.reels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.reel-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 9/16; background: #000; border: 1px solid var(--border-hairline); cursor: pointer; }
.reel-card video { width: 100%; height: 100%; object-fit: cover; }
.reel-sound-toggle { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(8,8,10,0.6); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; color: var(--text-primary); font-size: 0.85rem; z-index: 2; }
.reel-corner-badge { position: absolute; bottom: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(8,8,10,0.55); backdrop-filter: blur(6px); border-radius: var(--radius-pill); padding: 6px 12px; font-family: var(--font-body); font-weight: 600; font-size: 0.7rem; color: var(--text-primary); z-index: 2; }
.reel-corner-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); }

/* ==========================================================================
   DOKUMENTERADE RESULTAT
   ========================================================================== */
.results-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--border-hairline); }
.results-panel:first-of-type { border-top: none; padding-top: 0; }
#dokumenterade-resultat .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.results-pull { font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); text-transform: none; line-height: 1.35; margin-bottom: 20px; }
.results-visual-col { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 16px; }
.results-media-frame { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 9/16; background: #000; border: 1px solid var(--border-hairline); grid-row: span 2; }
.results-media-frame video { width: 100%; height: 100%; object-fit: cover; }
.results-still { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-hairline); aspect-ratio: 4/5; }
.results-still img { width: 100%; height: 100%; object-fit: cover; }
.results-metrics { display: flex; gap: clamp(20px, 3vw, 36px); margin-top: 28px; flex-wrap: wrap; }

/* ==========================================================================
   PINNAD PRODUKTIONSBERÄTTELSE (scrollväxling mellan bilder)
   ========================================================================== */
.pinned { position: relative; overflow-anchor: none; }
.pinned-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; will-change: transform; }
/* will-change på de faktiska korstonande/skalande lagren inuti den
   pinnade ytan — samma Chrome-motivering som på .pinned-stage. Utan
   detta kunde stagets egna lager vara GPU-kompositerat medan bilderna/
   texten som crossfadear INUTI det ändå repaintades på huvudtråden
   under adressfältets övergång, så hacket syntes kvar bara i den här
   sektionen (även efter fixen på .pinned-stage/.hero). */
.pin-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-out); will-change: opacity; }
.pin-frame.is-live { opacity: 1; }
.pin-frame img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) brightness(0.5) contrast(1.08); transform: scale(1.06); transition: transform 3.6s var(--ease-out); will-change: transform; }
.pin-frame.is-live img { transform: scale(1); }
.pin-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,0.7) 0%, rgba(8,8,10,0.3) 45%, rgba(8,8,10,0.92) 100%); }
.pin-copy { position: relative; z-index: 3; width: 100%; max-width: var(--container-max); padding-inline: var(--gutter); margin: 0 auto; }
/* Smalare textspalt (var 560px) så den håller sig tydligare till vänster
   och lämnar mer luft mot motivet i mitten/höger av varje bild. */
.pin-step { position: absolute; max-width: 460px; opacity: 0; transform: translate(-25%, calc(-17% - 26px)); transition: opacity 0.85s var(--ease-out), transform 0.95s var(--ease-out); pointer-events: none; will-change: opacity, transform; }
.pin-step.is-live { opacity: 1; transform: translate(-25%, -17%); position: relative; pointer-events: auto; }
/* -25%/-17% är räknat på textboxens egen bredd/höjd — på skärmar smalare
   än ~1300px finns inte tillräckligt med marginal kvar innanför guttern
   för det skiftet, så texten klipptes bort utanför synligt område
   (rapporterad bugg). Under den bredden återgår positionen till
   ursprungsläget, som alltid har fungerat säkert på alla skärmstorlekar. */
@media (max-width: 1300px) {
  .pin-step { transform: translateY(26px); }
  .pin-step.is-live { transform: none; }
}
/* "Efterarbetet" (glaset som fylls) hade motivet centrerat rakt bakom
   textspalten — flyttar beskärningen så glaset hamnar längre till höger. */
.pin-frame[data-frame="2"] img { object-position: 20% 45%; }
.pin-rail { position: absolute; left: var(--gutter); bottom: 54px; display: flex; gap: 10px; z-index: 4; }
.pin-rail i { width: 46px; height: 2px; background: var(--border-strong); overflow: hidden; position: relative; display: block; }
.pin-rail i::after { content: ''; position: absolute; inset: 0; background: var(--silver-bright); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out); }
.pin-rail i.is-live::after { transform: scaleX(1); }
/* svh, inte vh — .pinned-stage ovan använder redan 100svh (stabil höjd,
   opåverkad av mobilens adressfält som visas/döljs under scroll). Om
   spacern räknas i vanlig vh blir den totala sektionshöjden en blandning
   av en stabil (100svh) och en instabil (350vh) del: när adressfältet
   animerar in/ut ändras 350vh:s faktiska pixelvärde, vilket flyttar hela
   sektionens scrollHeight och gjorde scrollningen kännas ostadig/hoppig
   genom hela den pinnade berättelsen, inte bara vid riktningsbyte. */
.pin-spacer { height: 350svh; }

@media (prefers-reduced-motion: reduce) {
  .pin-frame, .pin-step { opacity: 1 !important; transform: none !important; transition: none !important; position: relative !important; }
  .pin-frame.is-live img { transform: none !important; }
}


/* ==========================================================================
   ENGÅNGSPRODUKTIONER
   ========================================================================== */
.oneoff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.oneoff-item { border: 1px solid var(--border-hairline); border-radius: var(--radius-lg); padding: 28px 24px; background: var(--bg-card); }
.oneoff-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-wash); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 1.1rem; }
.oneoff-item h3 { margin-bottom: 8px; }
.oneoff-item p { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; }

/* ==========================================================================
   DISTRIBUTIONSMODELLEN
   ========================================================================== */
.dm-chain { display: flex; flex-direction: column; gap: 0; margin-top: clamp(32px, 4vw, 48px); }
.dm-step { display: grid; grid-template-columns: 60px 200px 1fr; gap: 20px; align-items: baseline; padding-block: 18px; border-top: 1px solid var(--border-hairline); }
.dm-step:last-child { border-bottom: 1px solid var(--border-hairline); }
.dm-num { font-family: var(--font-display); font-size: 1.3rem; color: var(--text-muted); }
.dm-label { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; }
.dm-text { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
@media (max-width: 640px) { .dm-step { grid-template-columns: 40px 1fr; } .dm-label { grid-column: 2; } .dm-text { grid-column: 2; } }

/* ==========================================================================
   MEDIA-DUO (bildpar för liv på tjänstesidor)
   ========================================================================== */
.media-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.media-duo-item { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-hairline); aspect-ratio: 4/3; }
.media-duo-item img, .media-duo-item video { width: 100%; height: 100%; object-fit: cover; }
/* Variant som visar bilden i sitt eget originalformat istället för att
   beskära till 4:3 — .media-duo delas av flera sidor, så det här är en
   opt-in-klass snarare än en ändring av standardbeteendet. */
.media-duo-item.no-crop { aspect-ratio: auto; }
.media-duo-item.no-crop img { height: auto; object-fit: contain; }
@media (max-width: 640px) { .media-duo { grid-template-columns: 1fr; } }

/* Instagram-flödeskänsla: två portätt-videor (9:16) flankerar två
   staplade kvadratiska bilder i mitten. Videorna återanvänder
   .results-media-frame (samma svarta 9:16-ram + JS play/pause-vid-scroll
   som redan finns för Dokumenterade resultat).
   align-items:start (inte stretch) + width:100% på kvadraterna är
   avgörande — med stretch fick kvadraterna sin höjd diktat av den höga
   videokolumnen, och aspect-ratio:1/1 tvingade dem då att bli BREDARE än
   sin egen kolumn för att hålla proportionen, vilket fick dem att glida
   in över videon till vänster. Med width:100% + start härleds höjden
   istället från kolumnens egen bredd, helt oberoende av videokolumnerna. */
.feed-collage { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.feed-images-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.feed-image-item { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-hairline); aspect-ratio: 1/1; width: 100%; }
.feed-image-item img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .feed-collage { grid-template-columns: 1fr 1fr; } .feed-video:last-child { grid-column: span 2; } }
@media (max-width: 640px) { .feed-collage { grid-template-columns: 1fr; } .feed-video:last-child { grid-column: auto; } }

/* ==========================================================================
   AMBIENT BILDCOLLAGE (branscher-sektionen m.fl.)
   ========================================================================== */
.ambient-collage { position: relative; overflow: hidden; }
.ambient-collage-imgs { position: absolute; inset: 0; z-index: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.ambient-collage-imgs img { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; filter: grayscale(0.4) brightness(0.5); }
.ambient-collage-imgs::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(18,18,21,0.85) 35%, var(--bg-surface) 100%); }
.ambient-collage .container { position: relative; z-index: 1; }

/* ==========================================================================
   AMBIENT MEDIA SECTION (dämpad bakgrundsvideo bakom innehåll)
   ========================================================================== */
.ambient-section { position: relative; overflow: hidden; }
.ambient-bg { position: absolute; inset: 0; z-index: 0; }
.ambient-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; filter: grayscale(0.5) brightness(0.6); }
.ambient-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-void) 0%, rgba(8,8,10,0.75) 40%, var(--bg-void) 100%); }
.ambient-section .container { position: relative; z-index: 1; }

/* ==========================================================================
   LUCENTE / VARUMÄRKEN-GALLERI
   ========================================================================== */
.brand-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* Samma inline-style-mot-media-query-problem som .process-row-4 ovan —
   se den kommentaren. */
.brand-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.brand-gallery-item { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-hairline); aspect-ratio: 3/4; }
.brand-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--trans-slow); }
.brand-gallery-item:hover img { transform: scale(1.04); }
.brand-gallery-item.tall { grid-row: span 2; aspect-ratio: 3/8; }
.brand-gallery-item.wide { grid-column: span 2; aspect-ratio: 16/9; }

.varumarken-cta { position: relative; overflow: hidden; padding-top: clamp(32px, 4vw, 56px); }
.varumarken-cta-bg { position: absolute; inset: 0; z-index: 0; }
.varumarken-cta-bg video, .varumarken-cta-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.28; filter: grayscale(0.3) brightness(0.55); }
.varumarken-cta-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-void) 0%, rgba(8,8,10,0.55) 50%, var(--bg-void) 100%); }
.varumarken-cta .container { position: relative; z-index: 1; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .desktop-nav, .nav-actions .btn { display: none; }
  .mobile-menu-btn { display: flex; }
  .about-layout, .contact-layout { grid-template-columns: 1fr; }
  .about-frame { position: static; }
  /* .brand-gallery (Varumärken-sidan) är satt till position:sticky via
     inline style för att hålla sig i höjd med brödtexten i tvåkolumns-
     layouten. Vid den här brytpunkten blir .about-layout en kolumn, så
     bildblocket och texten staplas — men sticky-regeln (inline, behöver
     !important för att slås ut) fick bildblocket att fortsätta hänga kvar
     i sikte medan texten scrollade förbi UNDER det, och sedan sitta kvar
     ända in i nästa sektion tills sektionens egen botten nåddes. */
  .brand-gallery { position: static !important; top: auto !important; }
  .pricing-grid, .logo-wall-grid, .capability-grid, .case-teaser-grid, .case-index-grid, .reels-grid, .oneoff-grid, .brand-gallery { grid-template-columns: repeat(2, 1fr); }
  .pillars-row { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(2) { border-left: 1px solid var(--border-hairline); }
  .pillar:nth-child(3) { border-left: none; margin-top: 28px; }
  .process-row { grid-template-columns: repeat(3, 1fr); }
  .process-step:nth-child(4) { border-left: none; }
  .process-step:nth-child(4), .process-step:nth-child(5), .process-step:nth-child(6) { margin-top: 28px; }
  .responsibility-row { grid-template-columns: 1fr; }
  .loop-row { grid-template-columns: repeat(3, 1fr); }
  .loop-cell:nth-child(4) { border-left: none; }
  .loop-cell:nth-child(4), .loop-cell:nth-child(5) { margin-top: 28px; }
}

@media (max-width: 860px) {
  /* Heron är annars en fast 16:9-duk (avsiktligt, samma utsnitt på alla
     bredder) — på smala/höga mobilskärmar gör det att den blir kort och
     lämnar mörk tom yta under. Byter till samma 100svh-teknik som redan
     används i den pinnade produktionsberättelsen (.pinned-stage) så heron
     fyller skärmen på mobil. Texten/knapparna rör vi inte — de är redan
     positionerade i % av höjden och storlekssatta i vw, så de hamnar bara
     med mer luft mellan sig i den högre rutan, ingen omflytning. */
  .hero-pin-spacer { height: 100svh; }
  .hero { height: 100svh; aspect-ratio: unset; }

  /* Hero-texten är annars ren vw (skalar med BREDDEN, ingen golvstorlek —
     avsiktligt, se ovan). På en smal mobilskärm blir samma vw-tal
     mikroskopiskt, och eftersom rutan nu är 100svh hög (se ovan) spreds
     blocken dessutom långt ifrån varandra. Kompositionen (ordmärke
     centrerat, rubrik+tagline delar högerkant på 8%, CTA-raden på vänster
     kant) är oförändrad — bara större vw-tal och tightare top-%. */
  .hero-headline-block { top: 15%; left: auto; right: 8%; width: 74%; }
  .hero-h1 { font-size: 8vw; line-height: 1.16; }

  .hero-wordmark-block { top: 37%; }
  .hero-wordmark-text { font-size: 10vw; }

  .hero-tagline-text { top: 43%; right: 8%; left: 8%; width: auto; white-space: normal; text-align: right; font-size: 3.6vw; line-height: 1.3; }

  .hero-cta-row { top: 60%; left: 8%; right: 8%; gap: 3vw; }
  .hero-cta-row .btn { padding: 3.2vw 5.5vw; font-size: 3.4vw; gap: 1.8vw; }

  /* "Scrolla"-hintet längst ner är också ren vw utan golv — samma
     mikroskopiska-på-mobil-problem som resten av heron. */
  .hero-scroll-hint { font-size: 2.6vw; gap: 1.6vw; letter-spacing: 0.14em; }
  .hero-scroll-hint .line { height: 4.5vw; }

  .case-panel, .case-panel.reverse, .results-panel { grid-template-columns: 1fr; direction: ltr; }
  .case-teaser-grid, .capability-grid, .case-index-grid, .reels-grid, .oneoff-grid { grid-template-columns: 1fr; }
  .brand-gallery { grid-template-columns: repeat(2, 1fr); }
  .brand-gallery-item.tall { grid-row: auto; aspect-ratio: 3/4; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .process-row { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(odd) { border-left: none; }
  .process-step:nth-child(n+3) { margin-top: 28px; }
  .loop-row { grid-template-columns: repeat(2, 1fr); }
  .loop-cell:nth-child(odd) { border-left: none; }
  .loop-cell:nth-child(n+3) { margin-top: 28px; }
}

@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .locations-row { grid-template-columns: 1fr; gap: 16px; }
  .logo-wall-grid, .reels-grid { grid-template-columns: 1fr 1fr; }
  /* .pricing-grid hörde tidigare till gruppen ovan (2 kolumner) — med tre
     priskort och fylligt innehåll (funktionslista, pris, knapp) blev korten
     för smala för att rymma sitt innehåll, vilket tvingade hela sidan att
     bli bredare än skärmen (Content/Partnership hamnade sida vid sida,
     halva Partnership utanför synligt område, och sidan gick att skjuta i
     sidled). Priskort behöver full bredd var för sig på mobil. */
  .pricing-grid { grid-template-columns: 1fr; }
  .pillars-row, .oneoff-grid, .brand-gallery { grid-template-columns: 1fr; }
  /* .brand-gallery-item.wide spänner över 2 kolumner (rätt när gallerit har
     2 kolumner) — i en enda kolumn har den bara en kolumn att spänna över,
     så grid skapade en extra osynlig kolumn åt den istället. Det trängde
     undan/klämde ihop de andra bilderna i layouten (en av dem försvann
     ur sikte på smala skärmar). Nollställs till en vanlig ruta här. */
  .brand-gallery-item.wide { grid-column: auto; }
  .brand-gallery-item.tall { aspect-ratio: 3/4; }
  .pillar { border-left: none !important; border-top: 1px solid var(--border-hairline); padding-top: 28px; margin-top: 0 !important; }
  .pillar:first-child { border-top: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .process-row, .loop-row { grid-template-columns: 1fr; }
  .process-step, .loop-cell { border-left: none !important; border-top: 1px solid var(--border-hairline); margin-top: 0 !important; padding-top: 24px; }
  .process-step:first-child, .loop-cell:first-child { border-top: none; }
}