/* ============================================================================
   BYTEWORKS REBUILD — pages.css
   Sidspecifika kompositioner. Komponenterna bor i components.css;
   här bor scenerna de spelar i.
   ========================================================================== */

/* ════ HERO (startsidan) ════════════════════════════════════════════════ */
.hero {
  position: relative;
  display: flex;
  min-height: min(92svh, 60rem);
  align-items: center;
  padding-block: clamp(8.5rem, 16vh, 12rem) clamp(4rem, 8vh, 7rem);
  background: var(--yta-sida);
  overflow: clip;
  isolation: isolate;
}

/* Scenen: Göteborgsbilden bär hela första skärmen. Porträttversionen
   levereras via <picture> när viewporten faktiskt är stående. */
.hero__scen { position: absolute; inset: 0; z-index: -2; }
.hero__scen img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% 50%;
}

/* Scrim: byggd enbart av befintliga ytroller mot transparent — inga nya
   färgvärden. Kurvan är kalibrerad mot bildens faktiska luminans så att
   varje textroll klarar AA även över bildens ljusaste partier. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg,  var(--yta-sida) 0%, var(--yta-sida) 26%, transparent 82%),
    linear-gradient(180deg, var(--yta-sida) 0%, transparent 26%),
    linear-gradient(0deg,   var(--yta-djup) 0%, transparent 22%);
}

.hero__innehall { position: relative; }

/* Linjenätet används av samtliga undersidors sidtopp. */
.hero__nat {
  position: absolute;
  inset: 0;
  pointer-events: none;  /* dekor får aldrig äta klick eller textmarkering */
  background-image:
    linear-gradient(var(--nat-linje) 1px, transparent 1px),
    linear-gradient(90deg, var(--nat-linje) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(75% 65% at 60% 35%, #000 30%, transparent 78%);
  mask-image: radial-gradient(75% 65% at 60% 35%, #000 30%, transparent 78%);
}

/* Stående viewport: porträttbilden bär skärmen, copyn ligger i nedre halvan
   med en bottenviktad scrim så torn, fartyg och linjer syns ovanför. */
@media (max-width: 63.99rem) and (orientation: portrait) {
  .hero {
    min-height: min(100svh, 52rem);
    align-items: flex-end;
    padding-block: clamp(7.5rem, 14vh, 9.5rem) clamp(3rem, 7vh, 4.5rem);
  }
  .hero__scen img { object-position: 46% 50%; }
  /* Copyblocket täcker i praktiken 22–93 % av heron på en telefon. Scrimen
     är därför en jämn slöja under de översta 20 %, med lageropacitet .86 så
     stadens ljuspunkter fortfarande lyser igenom. Kalibrerad mot bildens
     faktiska luminans: lägsta uppmätta kontrast 5,29:1 (etiketten). */
  .hero__scrim {
    opacity: .86;
    background: linear-gradient(180deg, transparent 4%, var(--yta-sida) 20%, var(--yta-sida) 100%);
  }
}

.hero__rubrik {
  font-size: var(--text-display);
  letter-spacing: var(--ls-display);
  max-width: 13ch;
}
.hero__lead { margin-top: 1.5rem; max-width: var(--matt-ingress); }
.hero .knappar { margin-top: 2.3rem; }
.hero__meta {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.9rem;
  font-size: var(--text-liten);
  font-weight: var(--vikt-halvfet);
  color: var(--t-dim);
}
.hero__meta span { display: inline-flex; align-items: center; gap: .55rem; }
.hero__meta svg { width: 15px; height: 15px; color: var(--t-accent); }

/* ════ SIDTOPP (undersidor) ═════════════════════════════════════════════ */
.sidtopp {
  position: relative;
  padding-block: clamp(8.5rem, 14vh, 11rem) clamp(3.5rem, 6vh, 5.5rem);
  background: var(--fond-topp);
  overflow: clip;
}
.sidtopp .hero__nat { position: absolute; inset: 0; z-index: 0; }
.sidtopp > .skal { position: relative; z-index: 1; }  /* innehåll explicit ovanför dekoren */
/* ════ TOP-LEVEL HEROSCENER (RC25) ══════════════════════════════════════
   Sidtoppen bär en Göteborgsscen i stället för fond-topp. Samma familj som
   startsidan, men varje route har egen crop, scrimriktning och höjd.
   Scrimkurvorna är kalibrerade mot varje bilds faktiska luminans i copyzonen
   (lägsta uppmätta kontrast per route redovisad i rapporten).            */
.sidtopp--scen {
  display: flex;
  align-items: center;
  min-height: min(80svh, 46rem);
  background: var(--yta-sida);
  isolation: isolate;
}
.sidtopp__scen { position: absolute; inset: 0; z-index: -2; }
.sidtopp__scen img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.sidtopp__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg,  var(--yta-sida) 0%, var(--yta-sida) 22%, transparent 74%),
    linear-gradient(180deg, var(--yta-sida) 0%, transparent 20%),
    linear-gradient(0deg,   var(--yta-djup) 0%, transparent 18%);
}

/* Route-identitet: crop, scrimstyrka och höjd skiljer sig medvetet åt. */
.sida-marknadsforing .sidtopp--scen { min-height: min(82svh, 47rem); }
.sida-marknadsforing .sidtopp__scen img { object-position: 55% 50%; }
.sida-marknadsforing .sidtopp__scrim {
  background:
    linear-gradient(90deg,  var(--yta-sida) 0%, var(--yta-sida) 26%, transparent 78%),
    linear-gradient(180deg, var(--yta-sida) 0%, transparent 22%),
    linear-gradient(0deg,   var(--yta-djup) 0%, transparent 18%);
}

.sida-support .sidtopp--scen { min-height: min(80svh, 45rem); }
.sida-support .sidtopp__scen img { object-position: 56% 42%; }

.sida-hemsidor .sidtopp--scen { min-height: min(84svh, 48rem); }
.sida-hemsidor .sidtopp__scen img { object-position: 62% 46%; }

.sida-cases .sidtopp--scen { min-height: min(76svh, 43rem); }
.sida-cases .sidtopp__scen img { object-position: 46% 50%; }

.sida-om .sidtopp--scen { min-height: min(86svh, 50rem); }
.sida-om .sidtopp__scen img { object-position: 52% 56%; }
.sida-om .sidtopp__scrim {
  background:
    linear-gradient(90deg,  var(--yta-sida) 0%, var(--yta-sida) 26%, transparent 78%),
    linear-gradient(180deg, var(--yta-sida) 0%, transparent 22%),
    linear-gradient(0deg,   var(--yta-djup) 0%, transparent 20%);
}

/* ── /kontakt/: scenen ligger BAKOM kontaktsektionen, inte bredvid ────────
   Bakgrundslager i stället för <picture>, så den delade contact-final.php
   inte behöver ändras. image-set ger PNG-fallback; sista lagret är en solid
   yta om ingen bildformatvariant stöds. En jämn grundslöja (::after) håller
   formkortet förankrat i scenen i stället för att det svävar fritt.        */
.sida-kontakt .kontaktfinal {
  background:
    image-set(
      url("/assets/images/hero/byteworks-kontakt-hero-goteborg-digital-narvaro.webp") type("image/webp"),
      url("/assets/images/hero/byteworks-kontakt-hero-goteborg-digital-narvaro.png") type("image/png")
    ) center 55% / cover no-repeat,
    var(--yta-sida);
}
.sida-kontakt .kontaktfinal::before,
.sida-kontakt .kontaktfinal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.sida-kontakt .kontaktfinal::before {
  background:
    linear-gradient(90deg,  var(--yta-sida) 0%, var(--yta-sida) 26%, transparent 84%),
    linear-gradient(180deg, var(--yta-sida) 0%, transparent 20%),
    linear-gradient(0deg,   var(--yta-djup) 0%, transparent 18%);
}
.sida-kontakt .kontaktfinal::after { background: var(--yta-sida); opacity: .3; }
.sida-kontakt .kontaktfinal > .skal { position: relative; z-index: 1; }

/* ── Undersidornas hero: copy + tjänstespecifik bild ────────────────────
   Mediakolumnen får något mer utrymme än SEO-referensens 7/5, eftersom
   flera motiv är gränssnitt som måste gå att läsa utan zoom. Bilderna
   behåller sin naturliga proportion — ingen beskärning, ingen mörk
   overlay: de ljusa motiven ska förbli ljusa fönster i den mörka rytmen. */
/* Undersidornas hero: bilden är huvudmotivet, inte en miniatyr. Bredare
   container än övrigt innehåll, mediakolumnen ~58 % och stramare gap ger
   ca 760 px bild på 1440/1920 mot 625 px tidigare. Bilderna renderas i sin
   naturliga proportion — inget object-fit, alltså ingen beskuren UI. */
.sidtopp__grid--media {
  align-items: center;
  gap: clamp(2rem, 3vw, 3.5rem);
}
@media (min-width: 64rem) {
  /* Griden får den bredare containern så bilden kan växa, men copyn skjuts
     in exakt lika mycket som containern är bredare än sajtens normalbredd.
     Textaxeln blir därmed identisk med header och övriga sektioner — och
     bilden får ändå ~760 px på 1440/1920. Formeln räknas ur tokens; inga
     magiska pixelvärden per route. */
  .sidtopp__grid--media {
    width: min(var(--wrap-vid), 100% - var(--kant) * 2);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .sidtopp__grid--media > :first-child {
    padding-inline-start: max(0px, (min(var(--wrap-vid), 100vw - var(--kant) * 2) - var(--wrap)) / 2);
  }
}
.sidtopp__media { min-width: 0; }

/* ── Case-landningssidor (RC27) ────────────────────────────────────────
   En template för åtta projekt. Statusbadgen står överst, projektnamnet är
   h1 och galleriet växlar mellan en stor bild och par — samma rytm för
   alla projekt, ingen komposition per case. */
/* Case-introt är kompakt och textbaserat (RC28-V3). Ingen mediakolumn och
   ingen hero-höjd — sidan ska öppna med projektet, inte med tom navyyta.
   Topppaddingen behålls för den fasta headern; bottenpaddingen kortas så
   lead-materialet kommer in tidigt i första vyn. */
.sida-case .sidtopp {
  min-height: 0;
  padding-block: clamp(7.5rem, 12vh, 9.5rem) clamp(1.75rem, 3vh, 2.75rem);
}
.caselanding__intro { max-width: 46rem; }
.caselanding__intro .lead { max-width: none; }
.sida-case .sektion--tat:first-of-type { padding-top: 0; }

/* Lead media: projektets huvudmaterial, full spaltbredd. */
.caselead__text {
  max-width: var(--matt-text);
  margin-top: 1.1rem;
  font-size: var(--text-kompakt);
  color: var(--t-dim);
}
.casemedia__flode--lead { gap: 0; }

.caselanding__status { margin-bottom: 1.1rem; }
.caselanding .sidtopp__rubrik { max-width: 14ch; }
.caselanding__meta {
  margin-top: .6rem;
  font-size: var(--text-liten);
  color: var(--t-dim);
}
.caselanding .lead { margin-top: 1.2rem; }

/* Rörligt material på case-sidorna. Layoutintentionen kommer ur
   includes/case-media.php; ingen komposition är slug-specifik. */
.casemedia + .casemedia { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.casemedia .etikett { margin-bottom: .8rem; }
.casemedia__text { max-width: var(--matt-text); color: var(--t-mid); margin-bottom: 1.6rem; }
.casemedia__flode { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.casemedia__klipp { overflow: hidden; }
.casemedia__klipp video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 48rem) {
  .casemedia__flode--par    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casemedia__flode--rutnat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Porträttfilm: kontrollerad mobilvisning, aldrig full spaltbredd. */
.casemedia__flode--mobil { justify-items: center; }
.casemedia__flode--mobil > * { width: 100%; max-width: min(20rem, 62vw); }

/* Reels: 9:16 i ett kompakt rutnät så sju klipp inte blir en lodrät stapel. */
.casemedia__flode--reels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .casemedia__flode--reels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .casemedia__flode--reels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.caselanding__kompetenser {
  margin-top: .9rem;
  font-size: var(--text-meta);
  font-weight: var(--vikt-halvfet);
  letter-spacing: var(--ls-knapp);
  color: var(--t-accent);
}

/* Berättelseblocken bryter bildflödet. Kort radlängd och mycket luft —
   sidan ska läsa som ett reportage, inte som en textmassa. */
.casetext {
  max-width: var(--matt-text);
  margin-block: clamp(1rem, 2vw, 2rem);
}
.casetext .etikett { margin-bottom: .8rem; }
.casetext p { color: var(--t-mid); }

.casegalleri { display: grid; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.casegalleri__rad { display: grid; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
@media (min-width: 64rem) {
  .casegalleri__rad--par { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* Två telefonvyer bredvid varandra får dela halva raden — inte hela. */
  .casegalleri__rad--mobilpar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 44rem;
    margin-inline: auto;
    align-items: start;
  }
}
/* En ensam telefonvy är ett avsiktligt mobilobjekt, inte en jättebild.
   Begränsad maxbredd och centrerad — den mörka ytan får göra jobbet. */
.casegalleri__rad--mobil { justify-items: center; }
.casegalleri__rad--mobil > * { width: 100%; max-width: min(22rem, 66vw); }

.sidtopp__rubrik { max-width: 17ch; }
.sidtopp .lead { margin-top: 1.4rem; max-width: 38rem; }
.sidtopp .etikett { margin-bottom: 1.1rem; }
.sidtopp__grid {
  position: relative;
  display: grid;
  gap: clamp(2.5rem, 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .sidtopp__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ════ TJÄNSTESEKTIONER (kategori-/tjänstesidor) ════════════════════════ */
.tjanst {
  scroll-margin-top: 6.5rem;
}
.tjanst + .tjanst { margin-top: clamp(3.5rem, 6vw, 5.5rem); }
.tjanst__huvud {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}
/* Långa sammansatta rubriker (t.ex. "SEO / Sökmotoroptimering") får inte
   tvinga ut flexraden och lägga sig över mediakolumnen. min-width:0 låter
   rubriken krympa; break-word är sista skyddsnät om ett fallback-typsnitt
   renderar bredare under fontladdning. */
.tjanst__huvud > * { min-width: 0; }
.tjanst__huvud h2 { overflow-wrap: break-word; }

.tjanst__glyf {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--ton-cobalt-2);
  border: 1px solid var(--linje-1);
  color: var(--t-accent);
}
.yta-ljus .tjanst__glyf, .yta-moln .tjanst__glyf {
  background: var(--ton-cobalt-1);
  border-color: var(--linje-cobalt);
  color: var(--t-accent-ljus);
}
.tjanst__glyf svg { width: 24px; height: 24px; }
.tjanst__punkter { margin-top: 1.3rem; display: grid; gap: .55rem; max-width: 34rem; }
.tjanst__punkter li {
  position: relative;
  padding-left: 1.6rem;
  font-size: var(--text-kompakt);
}
.tjanst__punkter li::before {
  content: "";
  position: absolute;
  left: 0; top: .52em;
  width: .8rem; height: .5rem;
  border-left: 2px solid var(--bw-cobalt-500);
  border-bottom: 2px solid var(--bw-cobalt-500);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* Punktlista inuti ett kort: kortets bredd gäller, och på ljus yta ska
   texten följa kortets textroll i stället för den mörka sektionens. */
.kort .tjanst__punkter { margin-top: .2rem; max-width: none; }
.kort--ljus .tjanst__punkter li { color: var(--t-soft); }

/* Illustrationer i browserram: enkel SERP/diagram-yta */
.illu { padding: clamp(1.4rem, 2.4vw, 2.2rem); display: grid; gap: .9rem; }
.illu__rad {
  height: 12px;
  border-radius: 999px;
  background: var(--ton-peri-3);
}
.illu__rad--kort { width: 55%; }
.illu__rad--accent { background: var(--grad-accent); width: 38%; height: 14px; }
.illu__block {
  border-radius: 14px;
  border: 1px solid var(--linje-1);
  background: var(--yta-inbaddad);
  padding: 1rem 1.1rem;
  display: grid;
  gap: .55rem;
}
.illu__block .illu__rad { height: 9px; }

/* ════ FAQ / DETALJER ═══════════════════════════════════════════════════ */
.fragor { display: grid; gap: .7rem; max-width: 50rem; }
.fraga {
  border: 1px solid var(--linje-ljus-1);
  border-radius: var(--r-card);
  background: var(--yta-ljus);
  box-shadow: var(--skugga-ljus);
  overflow: hidden;
}
.fraga summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-weight: var(--vikt-fet);
  color: var(--t-ink);
}
.fraga summary::-webkit-details-marker { display: none; }
.fraga summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-right: 2px solid var(--bw-cobalt-500);
  border-bottom: 2px solid var(--bw-cobalt-500);
  transform: rotate(45deg);
  transition: transform var(--t-snabb) var(--ease);
}
.fraga[open] summary::after { transform: rotate(225deg); }
.fraga__svar { padding: 0 1.4rem 1.3rem; color: var(--t-soft); font-size: var(--text-kompakt); }

/* ════ CASES ════════════════════════════════════════════════════════════ */
.case-kort {
  position: relative;
  display: grid;
  border-radius: var(--r-panel);
  overflow: hidden;
  border: 1px solid var(--linje-1);
  background: var(--yta-kort);
  box-shadow: var(--skugga-kort);
  transition: transform var(--t-mellan) var(--ease), border-color var(--t-mellan) var(--ease), box-shadow var(--t-mellan) var(--ease);
}
.case-kort:hover { transform: translateY(-6px); border-color: var(--linje-2); box-shadow: var(--skugga-lyft); }
/* Bild och titel leder till case-sidan. Utseendet är oförändrat; endast
   klickytan och fokusordningen tillkommer. Bildlänken är aria-hidden och
   utanför tabbordningen — titeln och "Se caset" bär det tillgängliga namnet,
   så samma destination får inte tre överlappande fokusstopp. */
.case-kort__bildlank { display: block; }
.case-kort__namnlank { color: inherit; text-decoration: none; }
.case-kort__namnlank:hover { color: var(--t-accent); }
.yta-ljus .case-kort__namnlank:hover, .yta-moln .case-kort__namnlank:hover { color: var(--t-accent-ljus); }
.koncept__handlingar { display: flex; flex-wrap: wrap; gap: .6rem; }

.case-kort__skarm { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--yta-djup); }
.case-kort__skarm img, .case-kort__skarm picture { width: 100%; height: 100%; }
.case-kort__skarm img { object-fit: cover; object-position: top; transition: transform 1.1s var(--ease-ut); }
.case-kort:hover .case-kort__skarm img { transform: scale(1.035); }
.case-kort__skarm::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim-bild);
}
.case-kort__inner { padding: clamp(1.4rem, 2.2vw, 2rem); display: grid; gap: .55rem; }
.case-kort__namn { font-size: var(--text-h4); font-weight: var(--vikt-fet); color: var(--t-hi); letter-spacing: var(--ls-kort); }
.case-kort__meta { font-size: var(--text-liten); color: var(--t-dim); font-weight: var(--vikt-halvfet); }
.case-kort__brod { font-size: var(--text-kompakt); color: var(--t-mid); }
/* Statusbadgen centreras över hero-median i stället för att ligga i övre
   vänstra hörnet, där den annars konkurrerar med projektets egen logotyp,
   navigering eller hero-copy. Centreringen sker relativt mediaramen —
   .case-kort__skarm är position: relative — inte relativt viewporten.
   Endast positioneringen ändras; stil, färg, typografi och pill-form är
   oförändrade. Maxbredden hindrar overflow när etiketten är lång på smal
   skärm. Gäller både statiska hero-bilder och hero-video. */
.case-kort .badge {
  position: absolute;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2.2rem);
  justify-content: center;
  text-align: center;
  z-index: 2;
}
.case-kort__handling { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* Sekundära koncept på /cases/: ljusa kompakta kort i stället för breda
   mörkspråkiga rader. Bygger på .kort--ljus — bara status och CTA är lokala. */
.koncept__status {
  align-self: flex-start;
  padding: .3rem .8rem;
  border-radius: 999px;
  background: var(--ton-cobalt-1);
  border: 1px solid var(--linje-cobalt);
  font-size: var(--text-meta);
  font-weight: var(--vikt-fet);
  letter-spacing: var(--ls-versal);
  line-height: var(--lh-meta);
  text-transform: uppercase;
  color: var(--t-accent-ljus);
}
.koncept .kort__brod { margin-top: -.35rem; }
.koncept__handling { margin-top: auto; align-self: flex-start; }

/* ════ KONTAKTFINAL ═════════════════════════════════════════════════════ */
.kontaktfinal {
  position: relative;
  background:
    radial-gradient(60% 70% at 85% 15%, var(--glod-mjuk), transparent 60%),
    radial-gradient(40% 50% at 8% 90%, var(--glod-peri), transparent 60%),
    linear-gradient(180deg, var(--yta-sida), var(--yta-djup));
  overflow: clip;
}
.kontaktfinal__grid {
  display: grid;
  gap: clamp(2.5rem, 4.5vw, 5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .kontaktfinal__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
.kontaktfinal__rubrik { max-width: 13ch; }
.kontaktfinal .kontaktfakta { margin-top: 2.2rem; }
.kontaktfinal__fin { margin-top: 1.6rem; font-size: var(--text-liten); color: var(--t-dim); }

/* ════ MEDIA-LÄSBARHET (RC15) ═══════════════════════════════════════════
   UI-bevis behöver fysisk bredd för att gå att läsa utan zoom. Tre små
   varianter räcker för hela sajten — inga sidunika media queries.        */

/* Split där mediakolumnen bär ett gränssnitt: media får större andel och
   splitten staplas ända upp till 75rem, så bilden aldrig renderas smalare
   än ~600 px. Staplat läge visar alltid texten först. */
.split--media-vid .split__text  { order: 1; }
.split--media-vid .split__media { order: 2; }
@media (min-width: 60rem) {
  .split--media-vid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 75rem) {
  .split--media-vid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--media-vid .split__text  { order: 0; }
  .split--media-vid .split__media { order: 0; }
  /* Kapitel med extra lång rubrik: jämn fördelning i stället för mediatung,
     så rubriken behåller full vikt utan att kollidera med bilden. */
  .split--media-vid.split--jamn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Två kompletterande bevis sida vid sida — men bara när varje bild får
   minst ~600 px. Under det staplas de i full bredd. */
.bevisrad {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: start;
}
@media (min-width: 84rem) { .bevisrad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sekundärt bevis: mindre än huvudbilden, förskjutet mot högerkanten. */
.bevis--sekundar { max-width: 46rem; margin-left: auto; }

/* ════ TJÄNSTESIDOR: BEVISET ════════════════════════════════════════════ */
/* Generell beviskomponent: stort ljust visuellt ankare på tjänstesidornas
   ljusa kapitel. Ingen mörk ram, ingen overlay, ingen beskärning — bilden
   ÄR det ljusa fönstret. Används av tjänstesidorna under /hemsidor/. */
.bevis { margin: 0; }
.bevis img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-panel);
  border: 1px solid var(--linje-ljus-1);
  box-shadow: var(--skugga-ljus);
}
.bevis .bildtext { text-align: center; }
.bevis--mork img {                       /* bevisbild på mörk/royal yta */
  border-color: var(--linje-2);
  box-shadow: var(--skugga-kort);
}

/* ════ STARTSIDA (RC22) ═════════════════════════════════════════════════
   Startsidans egna kompositioner. Fem komponenter räcker: sektionshuvud med
   handling, bevisrutnätet, de två tjänstevärldarna, länklistan och manifestet. */

/* Sektionshuvud där rubrik och handling delar rad på bred skärm. */
.home-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2.5rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.home-huvud > * + * { flex-shrink: 0; }
.home-huvud .etikett { margin-bottom: .9rem; }
.home-huvud__fin { max-width: 34ch; color: var(--t-dim); font-size: var(--text-kompakt); }
.yta-ljus .home-huvud__fin, .yta-moln .home-huvud__fin { color: var(--t-soft); }

/* Beviset: ett stort featured-projekt + två sekundära. Storleksskiftet är
   poängen — inte tre likvärdiga kort. */
.home-proof {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
@media (min-width: 64rem) {
  .home-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .home-proof__case--stor { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.75rem, 3vw, 3rem); align-items: center; }
}
.home-proof__case { display: grid; gap: 1.25rem; }
.home-proof__media { min-width: 0; }
.home-proof__inner { display: grid; gap: .55rem; justify-items: start; align-content: start; }
.home-proof__namn { font-size: var(--text-h4); font-weight: var(--vikt-fet); letter-spacing: var(--ls-kort); color: var(--t-hi); }
.home-proof__case--stor .home-proof__namn { font-size: var(--text-h3); }
.home-proof__meta { font-size: var(--text-liten); color: var(--t-dim); }
.home-proof__brod { margin-top: .35rem; max-width: 44ch; color: var(--t-mid); }
.home-proof__handlingar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.75rem;
  margin-top: .45rem;
}
/* Previewhandlingen är en <button> enligt previewkontraktet men ska se ut
   och sitta som textlänken bredvid. */
.lank-mer--knapp {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* Tjänstevärld: en stor visual mot en textkolumn. Två världar, inte tolv kort. */
.home-world {
  display: grid;
  gap: clamp(2.25rem, 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 68rem) {
  .home-world { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .home-world--vand .home-world__text { order: 2; }
}
.home-world__text > * + * { margin-top: 1.1rem; }
.home-world__text .etikett + h2 { margin-top: .8rem; }
.home-world__media { min-width: 0; }

/* Tjänstelänkar som lista i stället för kortmatta. */
.home-lankar {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 34rem;
}
.home-lankar a {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .85rem .2rem;
  border-top: 1px solid var(--linje-1);
  font-weight: var(--vikt-halvfet);
  color: var(--t-hi);
  transition: color var(--t-snabb) var(--ease), padding-left var(--t-snabb) var(--ease);
}
.home-lankar li:last-child a { border-bottom: 1px solid var(--linje-1); }
.home-lankar a:hover { color: var(--t-accent); padding-left: .5rem; }
.home-lankar a .ikon-pil { margin-left: auto; color: var(--t-accent); }
.home-lankar__glyf {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--ton-cobalt-2);
  border: 1px solid var(--linje-1);
  color: var(--t-accent);
}
.home-lankar__glyf svg { width: 18px; height: 18px; }
@media (min-width: 40rem) {
  .home-lankar--tva { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; max-width: none; }
  .home-lankar--tva li:nth-last-child(-n+2) a { border-bottom: 1px solid var(--linje-1); }
}

/* Manifestet: lugn, koncentrerad textyta mellan två stora kapitel. */
.home-manifest { max-width: 52rem; }
.home-manifest > * + * { margin-top: 1.15rem; }
.home-manifest h2 { max-width: 18ch; }
.home-manifest .lank-mer { margin-top: 1.6rem; }

/* FAQ i tvåspalt på bred skärm — samma frågekomponent som tjänstesidorna. */
@media (min-width: 64rem) {
  .home-fragor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); }
  .home-fragor .fragor__par { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .home-fragor .fragor__par:nth-last-child(-n+2) { border-bottom: 1px solid var(--linje-ljus-1); }
}

/* ════ TJÄNSTESIDA: SOCIALA MEDIER ══════════════════════════════════════ */
/* Reelparet: två stora vertikala klipp — färre och större än mediaväggen. */
.reelpar {
  display: grid;
  gap: clamp(1rem, 2.5vw, 2rem);
  justify-content: center;
}
.reelpar__reel {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}
.reelpar__reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .reelpar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reelpar__reel { max-width: 28rem; }
}

/* Formatlinjalen: tomma proportionsrutor i verkliga bildförhållanden.
   Ingen fejkad post — bara måtten, i gemensam höjd så de går att jämföra. */
.format {
  --format-hojd: clamp(8rem, 20vw, 13rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}
.format__mall { display: grid; gap: .45rem; justify-items: start; }
.format__ruta {
  display: block;
  height: var(--format-hojd);
  border-radius: 12px;
  background: var(--yta-moln);
  border: 1px solid var(--linje-ljus-2);
}
.format__mall--reel    .format__ruta { aspect-ratio: 9 / 16; }
.format__mall--feed    .format__ruta { aspect-ratio: 4 / 5; }
.format__mall--kvadrat .format__ruta { aspect-ratio: 1 / 1; }
.format__namn {
  font-size: var(--text-meta);
  font-weight: var(--vikt-fet);
  letter-spacing: var(--ls-versal);
  color: var(--t-accent-ljus);
}
.format__roll {
  font-size: var(--text-kompakt);
  line-height: var(--lh-kompakt);
  color: var(--t-soft);
  max-width: 16rem;
}

/* ════ TJÄNSTESIDA: FOTO & VIDEO ════════════════════════════════════════ */
/* Mediavägg: tre vertikala klipp i redaktionell förskjutning i stället för
   en rak rad. Smal skärm = ett klipp i taget, utan förskjutning. */
.mediavagg {
  display: grid;
  gap: clamp(1rem, 2vw, 1.75rem);
  justify-content: center;
}
.mediavagg__objekt {
  aspect-ratio: 9 / 16;
  width: 100%;
  max-width: 21rem;
  margin-inline: auto;
}
.mediavagg__objekt video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .mediavagg { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .mediavagg__objekt { max-width: none; }
  .mediavagg__objekt:nth-child(2) { margin-top: clamp(1.5rem, 3vw, 3rem); }
  .mediavagg__objekt:nth-child(3) { margin-top: clamp(3rem, 6vw, 6rem); }
}

/* ════ TJÄNSTESIDA: CONTENT CREATION ════════════════════════════════════ */
/* Reelraden: 2–3 vertikala klipp i befintliga bildpaneler. På smal skärm
   en tydlig reel i taget i stället för tre oläsliga. */
.reelrad {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  justify-content: center;
}
.reelrad__reel { aspect-ratio: 9 / 16; max-width: 20rem; width: 100%; margin-inline: auto; }
.reelrad__reel video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 48rem) {
  .reelrad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reelrad__reel { max-width: none; }
}
.reelrad + .bildtext { text-align: center; margin-top: 1.2rem; }

/* ════ TJÄNSTESIDA: FÖRETAGSHEMSIDOR ════════════════════════════════════ */
/* Frågorna: besökarens fem frågor som typografiska par på ljus yta.
   Hårlinjer i stället för kort — texten ska bära, inte ytan. */
.fragor {
  margin: 0;
  display: grid;
  gap: 0;
}
.fragor__par {
  display: grid;
  gap: .4rem 2.5rem;
  padding-block: clamp(1.1rem, 1.6vw, 1.5rem);
  border-top: 1px solid var(--linje-ljus-1);
}
.fragor__par:last-child { border-bottom: 1px solid var(--linje-ljus-1); }
.fragor__fraga {
  font-size: var(--text-h3);
  font-weight: var(--vikt-fet);
  line-height: var(--lh-rubrik);
  letter-spacing: var(--ls-rubrik);
  color: var(--t-ink);
}
.fragor__svar {
  margin: 0;
  max-width: var(--matt-lead);
  color: var(--t-soft);
}
@media (min-width: 60rem) {
  .fragor__par { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); align-items: baseline; }
}

/* Berättelsen: processen som redaktionella numrerade rader — inga kort,
   bara hårlinjer och luft. Nummer | rubrik+text i två spalter på bred skärm. */
.berattelse {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.berattelse__steg {
  display: grid;
  gap: .5rem 2.5rem;
  padding-block: clamp(1.4rem, 2.2vw, 2rem);
  border-top: 1px solid var(--linje-1);
}
.berattelse__steg:last-child { border-bottom: 1px solid var(--linje-1); }
.berattelse__nr {
  font-size: var(--text-meta);
  font-weight: var(--vikt-fet);
  letter-spacing: var(--ls-versal);
  color: var(--t-accent);
}
.berattelse__titel { color: var(--t-hi); }
.berattelse__brod {
  margin: 0;
  max-width: var(--matt-text);
  color: var(--t-dim);
}
@media (min-width: 60rem) {
  .berattelse__steg { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
  .berattelse__nr { grid-row: span 2; padding-top: .35rem; }
}

/* ════ TJÄNSTESIDA: GOOGLE ADS ══════════════════════════════════════════ */
/* Flödet: kedjan sökning → annons → landningssida → mätning som en vågrät
   sekvens med pilar. Stackar vertikalt på smal skärm; pilarna vänder med. */
.flode {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: flode;
}
.flode__lank {
  position: relative;
  counter-increment: flode;
  padding: 1.35rem 1.5rem;
  border-radius: var(--r-card);
  background: var(--yta-ljus);
  border: 1px solid var(--linje-ljus-1);
  box-shadow: var(--skugga-ljus);
}
.flode__lank::before {
  content: counter(flode, decimal-leading-zero);
  display: block;
  margin-bottom: .55rem;
  font-size: var(--text-meta);
  font-weight: var(--vikt-fet);
  letter-spacing: var(--ls-versal);
  color: var(--t-accent-ljus);
}
.flode__titel {
  display: block;
  font-size: var(--text-kort);
  font-weight: var(--vikt-fet);
  letter-spacing: var(--ls-kort);
  color: var(--t-ink);
}
.flode__brod {
  display: block;
  margin-top: .35rem;
  font-size: var(--text-kompakt);
  line-height: var(--lh-kompakt);
  color: var(--t-soft);
}
/* Pil mellan länkarna — vågrät på bred skärm, lodrät på smal */
.flode__lank + .flode__lank::after {
  content: "";
  position: absolute;
  top: -1.05rem;
  left: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--linje-cobalt-2);
  border-bottom: 2px solid var(--linje-cobalt-2);
  transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 60rem) {
  .flode { grid-template-columns: repeat(4, 1fr); }
  .flode__lank + .flode__lank::after {
    top: 50%; left: -1.05rem;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* Bildplats: reserverar den kommande assetens yta. Byts rakt av mot ett
   <picture> inuti samma .bevis-figur — 3:2 matchar assetens format. */
.bildplats {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  border-radius: var(--r-panel);
  background: var(--yta-moln);
  border: 1px dashed var(--linje-ljus-2);
}
.bildplats__text {
  font-size: var(--text-meta);
  font-weight: var(--vikt-fet);
  letter-spacing: var(--ls-versal);
  text-transform: uppercase;
  color: var(--t-soft);
}

/* ════ TJÄNSTESIDA: SYSTEM & PORTALER ═══════════════════════════════════ */
/* Byggstenar: kompakta piller som visar exempel på systemets delar utan
   att bli ännu en kortgrid. Semantisk minikomponent för denna sida. */
.byggstenar {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .7rem;
  margin-top: 1.4rem;
  max-width: 52rem;
}
.byggsten {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.05rem;
  border-radius: 999px;
  background: var(--yta-inbaddad);
  border: 1px solid var(--linje-1);
  font-size: var(--text-kompakt);
  font-weight: var(--vikt-halvfet);
  color: var(--t-mid);
}
.byggstenar__not {
  margin-top: 1.4rem;
  font-size: var(--text-liten);
  color: var(--t-dim);
  max-width: var(--matt-smal);
}

/* ════ OM OSS ═══════════════════════════════════════════════════════════ */
.signatur {
  margin-top: 2rem;
  display: inline-grid;
  gap: .2rem;
}
.signatur__namn {
  font-size: var(--text-h3);
  font-weight: var(--vikt-fet);
  letter-spacing: var(--ls-rubrik);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.signatur__roll { font-size: var(--text-liten); color: var(--t-dim); font-weight: var(--vikt-halvfet); }

/* ════ 404 ══════════════════════════════════════════════════════════════ */
.felsida {
  min-height: 88vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 1.2rem;
  padding-block: 8rem 4rem;
}
.felsida__kod {
  font-size: var(--text-marke);
  font-weight: var(--vikt-display);
  line-height: var(--lh-marke);
  letter-spacing: var(--ls-marke);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ════ INTEGRITET (redaktionell längre text) ════════════════════════════ */
.artikel { max-width: 46rem; }
.artikel h2 { font-size: var(--text-h3); margin-top: 2.8rem; }
.artikel p { margin-top: 1rem; }
.artikel ul { margin-top: 1rem; display: grid; gap: .55rem; padding-left: 1.2rem; list-style: disc; }
.artikel li::marker { color: var(--t-accent-ljus); }

/* ============================================================
   .ram — webbläsarram för verkliga projektskärmar (bw_skarm()).
   Markupen kommer byte-trogen från includes/skarmar.php (skyddad
   funktion). Detta är det nya visuella skalet runt den.
   ============================================================ */
.ram {
  margin: 0;
  border-radius: var(--r-panel);
  background: var(--yta-hog);
  border: 1px solid var(--linje-glas);
  box-shadow: var(--skugga-panel), var(--inre-ljus);
  overflow: hidden;
}
.ram__list {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .68rem 1rem;
  border-bottom: 1px solid var(--linje-1);
  background: var(--yta-inbaddad);
}
.ram__prickar { display: inline-flex; gap: .38rem; }
.ram__prickar span {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--linje-2);
}
.ram__flik {
  font-size: var(--text-meta);
  font-weight: var(--vikt-halvfet);
  color: var(--t-dim);
  letter-spacing: var(--ls-knapp);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ram__skarm { display: block; }
.ram__skarm img { display: block; width: 100%; height: auto; }

/* Inuti ett case-kort smälter ramen in i kortet:
   kortet äger radius, border och skugga. */
.case-kort__skarm .ram {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
.case-kort__skarm .ram__skarm {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.case-kort__skarm .ram__skarm img,
.case-kort__skarm video.ram__skarm {
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 1.1s var(--ease-ut);
}
/* Hero-video i kortet beter sig som hero-bilden: samma proportion,
   samma beskärning, samma hover. */
.case-kort__skarm video.ram__skarm { display: block; width: 100%; }
.case-kort:hover .ram__skarm img,
.case-kort:hover video.ram__skarm { transform: scale(1.035); }
/* När ramen ligger i kortet styr ramens egna proportioner (list + 16/10-skärm).
   Utan :has()-stöd klipps nederkanten milt — inget går sönder. */
.case-kort__skarm:has(.ram) { aspect-ratio: auto; }

/* Bildtext under en ram/figur. */
.bildtext { margin-top: .75rem; font-size: var(--text-liten); color: var(--t-dim); }
.yta-ljus .bildtext { color: var(--t-soft); }
.felsida__nav { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; }