/* ==========================================================================
   Aadland Group — global stylesheet
   ========================================================================== */


:root {
  --ink: #101010;
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.4l2.6 2.6L16 9.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ink-soft: #3c3c3c;
  --muted: #6a6a6a;
  --line: #d8d8d8;
  --line-soft: #e6e6e6;
  --paper: #ffffff;
  --paper-2: #f4f4f4;
  --white: #ffffff;
  --panel: #f4f4f4;
  --cream: #ffffff;
  --accent: #ff6b2c;
  --radius: 0px;
  --radius-sm: 0px;
  --maxw: 2100px;
  --pad: clamp(20px, 6vw, 120px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* data-reveal="scale" skalar element till 103,5 % innan de tonas in -
   klipp horisontellt så det aldrig ger sidan en vågrät scroll */
section { position: relative; overflow-x: clip; }

.section {
  padding: clamp(58px, 8.6vw, 118px) 0;
}

.section--tight { padding: clamp(46px, 6.4vw, 82px) 0; }

/* Ingen färgväxling mellan sektioner - ytan är vit hela vägen och
   linjen gör avgränsningen. Det är därifrån lugnet kommer. */
.bg-gradient { background: var(--white); }
.section + .section, .bg-gradient + .bg-white, .bg-white + .bg-gradient { border-top: 1px solid var(--line-soft); }

.bg-white { background: var(--white); }
.bg-paper { background: var(--paper); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------- Typography ------------------------------------------------ */

.eyebrow {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
}

.eyebrow--center { justify-content: center; }

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.display {
  font-size: clamp(44px, 8.4vw, 108px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.h1 { font-size: clamp(38px, 6.4vw, 84px); line-height: 0.98; }
.h2 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.04; }
.h3 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.12; }

.lead {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 62ch;
}

p { margin: 0 0 1em; line-height: 1.6; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

.mono {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.muted { color: var(--muted); }

/* ---------- Header ---------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line-soft);
  background: rgba(255, 255, 255, 0.96);
}

.nav {
  position: relative;
  height: 72px;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
}

/* Ordningen i HTML är brand, länkar, kontakt, språk. I navigeringen vill vi
   ha kontakt sist längst till höger, så flexordningen sätts här i stället
   för att flytta om markupen. */
.brand { order: 1; }
.nav-links { order: 2; margin-right: auto; }
.lang { order: 3; margin-left: 0; }
.nav-contact { order: 4; margin-left: 0; }
.nav-toggle { order: 5; }

/* ---------- Language switch ------------------------------------------- */

.lang {
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
}

.lang__btn {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  padding: 6px 13px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.lang__btn:hover { color: var(--ink); }
.lang__btn.is-on { background: var(--ink); color: var(--cream); }
.lang__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.brand {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 17px;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 34px;
  margin-left: 42px;
  margin-right: auto;
}

/* only needed once the top-right Contact link is hidden on small screens */
.nav-links__contact { display: none; }

.nav-links a,
.nav-contact {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
  transition: color 0.25s var(--ease);
}

.nav-links a::after,
.nav-contact::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}

.nav-links a:hover::after,
.nav-contact:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* ---------- Buttons --------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: 0;
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease),
              color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--dark { background: var(--ink); color: var(--cream); }
.btn--dark:hover { background: #232427; }

.btn--light {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
}
.btn--light:hover { border-color: rgba(11,11,12,0.28); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { background: rgba(255, 255, 255,0.6); }

.icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: var(--ink);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform 0.35s var(--ease);
}
.icon-btn:hover { transform: translateX(4px); }

.link-row {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 17px;
  font-weight: 500;
}

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

.hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 110px);
}

.hero-top {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 40px;
  align-items: start;
}

.hero-claim {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  max-width: 16ch;
}

.hero-claim .dot { color: var(--muted); }

.hero-stat { text-align: right; }

.hero-stat .num {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}

.hero-stat .label {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 12px;
  line-height: 1.7;
}

/* Storleken här är en säker baslinje som får plats även om webbtypsnittet
   inte har laddat. main.js finjusterar den sedan så ordmärket fyller
   spalten exakt - se fitWordmark(). */
.wordmark {
  font-size: clamp(46px, 11vw, 134px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin: 0;
  color: #c9c9c9;
  white-space: nowrap;
}


.hero-bottom {
  display: grid;
  grid-template-columns: minmax(0, 720px);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}

.hero-meta {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.85;
  color: var(--ink);
}

.hero-meta .dim { color: var(--muted); }

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

.reel-head {
  display: flex;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.reel {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow: hidden;
}

.reel video, .reel img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Handwritten note ------------------------------------------ */

.wordmark-row {
  position: relative;
  padding-top: clamp(52px, 7vw, 96px);
  margin: clamp(28px, 4vw, 48px) 0 24px;
}

.annotation {
  position: absolute;
  right: 1%;
  top: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink);
  pointer-events: none;
}

.annotation .note {
  font-family: inherit;
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.15;
  max-width: 15ch;
  transform: rotate(-2.5deg);
  color: var(--ink-soft);
}

.annotation svg { flex: none; overflow: visible; }

/* the arrow draws itself once, the first time it comes into view */
.annotation svg path {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 1.1s var(--ease) 0.25s;
}

.annotation.is-in svg path { stroke-dashoffset: 0; }

/* ---------- Capabilities ---------------------------------------------- */

/* samma tvåspaltsraster som .section-head: rubrik vänster, text höger */
.cap-head,
.proof-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
  max-width: none;
}

.cap-head .h1,
.proof-head .h1 { max-width: 17ch; margin-top: 0; text-wrap: balance; }
.cap-head .lead,
.proof-head .lead { margin-top: 0; max-width: 48ch; }

@media (max-width: 820px) {
  .cap-head, .proof-head { grid-template-columns: 1fr; align-items: start; }
  .cap-head .lead, .proof-head .lead { margin-top: 16px; }
}

.cap-hint {
  font-family: inherit;
  font-size: clamp(19px, 1.8vw, 24px);
  color: var(--muted);
  margin: clamp(40px, 5vw, 64px) 0 18px;
  transform: rotate(-0.8deg);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
}

.cap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 6px 20px;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: clamp(20px, 2.2vw, 28px);
  cursor: pointer;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              transform 0.5s var(--ease);
}

.cap:hover { transform: translateY(-3px); border-color: rgba(11,11,12,0.2); }
.cap:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.cap__name {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.cap__desc {
  grid-column: 1 / -1;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}

.cap__mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}

.cap__mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid var(--cream);
  border-bottom: 1.6px solid var(--cream);
  transform: rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}

.cap[aria-pressed="true"] {
  background: var(--white);
  border-color: rgba(11, 11, 12, 0.24);
}

.cap[aria-pressed="true"] .cap__mark {
  background: var(--ink);
  border-color: var(--ink);
}

.cap[aria-pressed="true"] .cap__mark::after {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

/* the running scope summary */
.cap-bar {
  position: sticky;
  bottom: clamp(14px, 2vw, 24px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--cream);
  border-radius: 0;
  /* stays out of the layout until something is actually selected */
  margin-top: 0;
  max-height: 0;
  padding: 0 14px 0 clamp(22px, 2.4vw, 30px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease),
              max-height 0.45s var(--ease), padding 0.45s var(--ease),
              margin-top 0.45s var(--ease);
}

.cap-bar.is-live {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  max-height: 140px;
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: 14px 14px 14px clamp(22px, 2.4vw, 30px);
}

.cap-bar__count {
  margin: 0;
  color: var(--cream);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cap-bar__list {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  flex: 1 1 200px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cap-bar .btn { margin-left: auto; }
.cap-bar .btn--light:hover { border-color: transparent; }

/* ---------- Ways to work ---------------------------------------------- */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}

.plan {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 38px);
  display: flex;
  flex-direction: column;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
}

.plan--feature { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.plan--feature p, .plan--feature .plan__terms { color: rgba(255, 255, 255, 0.7); }
.plan--feature .check-list li { color: rgba(255, 255, 255, 0.86); }
.plan--feature .check-list svg { opacity: 0.8; }
.plan--feature .check-list svg circle,
.plan--feature .check-list svg path { stroke: var(--cream); }

.plan__kicker {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan--feature .plan__kicker { color: rgba(255, 255, 255, 0.6); }

.plan h3 { font-size: clamp(23px, 2.3vw, 30px); margin: 16px 0 14px; }
.plan > p { font-size: 15.5px; }
.plan .check-list { margin-top: 26px; }
.plan .spacer { flex: 1; min-height: 26px; }

.plan__terms {
  font-size: 13.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.plan--feature .plan__terms { border-top-color: rgba(255, 255, 255, 0.16); }

/* ---------- Client logos ---------------------------------------------- */

.clients-head { text-align: center; margin-bottom: clamp(38px, 5.4vw, 68px); }
.clients-head .h1 { max-width: none; margin: 22px auto 0; text-wrap: balance; }

/* Looping logo wall ---------------------------------------------------- */

.logo-marquee {
  display: grid;
  gap: clamp(18px, 2.4vw, 34px);
  overflow: hidden;
  /* fade both edges so logos slide in and out instead of being cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}

.marquee-row {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-left var(--speed, 80s) linear infinite;
}

.marquee-row--reverse { animation-name: marquee-right; }

.logo-marquee:hover .marquee-row { animation-play-state: paused; }

@keyframes marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes marquee-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

.logo-cell {
  flex: none;
  width: clamp(126px, 14vw, 190px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(48px, 5vw, 64px);
  padding: 0 clamp(8px, 1.2vw, 18px);
}

.logo-marquee img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(30px, 3.4vw, 46px);
  filter: grayscale(100%) contrast(1.05);
  opacity: 0.68;
  transition: opacity 0.4s var(--ease);
}

.logo-marquee img:hover { opacity: 1; }

/* ---------- Stats ----------------------------------------------------- */



.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(48px, 8vw, 110px);
}

.stat .num {
  font-size: clamp(42px, 6.2vw, 88px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.stat .label {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.stats--promises {
  grid-template-columns: repeat(3, 1fr);
}

.stats--promises .stat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.stats--promises .label {
  margin-top: auto;
  padding-top: 20px;
}

.stats--promises .num {
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.stats--promises .label {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- Showreel (full bredd, överst) ------------------------------ */

.showreel {
  position: relative;
  width: 100%;
  height: clamp(300px, 64vh, 720px);
  overflow: hidden;
  background: #0d0d0d;
}

/* Videon är gjord högre än sektionen och förskjuten uppåt, så den har
   utrymme att ligga kvar när sidan rullar förbi. main.js skriver --py. */
.showreel__video {
  position: absolute;
  top: -12%;
  left: 0;
  height: 124%;
  width: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

/* filmen är mörk - en ljus slöja hade bara lagt grå dis över den.
   I stället en svag mörk vinjett nedtill, så etiketten och ljudknappen
   är läsbara oavsett vilken bildruta som råkar ligga under dem */
.showreel__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 12%, rgba(0,0,0,0) 26%);
}





@media (max-width: 820px) {
  .showreel { height: clamp(240px, 46vh, 380px); }
}

@media (prefers-reduced-motion: reduce) {
  .showreel { height: auto; background: none; }
  .showreel__video { position: static; height: auto; aspect-ratio: 16 / 9; }
  .showreel__veil { display: none; }
}

/* ---------- Media grid ------------------------------------------------ */

.center-head { text-align: center; max-width: 820px; margin: 0 auto clamp(34px, 4.6vw, 58px); }
.center-head .h1, .center-head .lead { text-wrap: balance; }
.center-head .lead { margin: 20px auto 0; }

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

/* BTS-rutnätet: fyra spalter, 3:2 som matchar bildernas beskärning */
.media-grid--bts {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.1vw, 16px);
}

.media-grid--bts .tile {
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
  margin: 0;
}

.tile {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow: hidden;
  transition: transform 0.6s var(--ease);
}

.tile:hover { transform: translateY(-4px); }
.tile img, .tile video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Video strip ----------------------------------------------- */

/* the strip sits outside the text column so it can run close to full width */
.video-strip-wrap {
  padding: 0 var(--pad);
  max-width: 1800px;
  margin: 0 auto;
}

.video-strip {
  --strip-h: clamp(300px, 34vw, 560px);
  display: flex;
  gap: clamp(10px, 1.1vw, 16px);
  height: var(--strip-h);
}

.video-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0d0d0d;
  transition: flex-basis 0.8s var(--ease), flex-grow 0.8s var(--ease);
}

/* the focused panel opens to exactly 16:9; the others share what is left */
.video-strip .video-panel:hover {
  flex-grow: 0;
  flex-basis: calc(var(--strip-h) * 16 / 9);
}

.video-panel__media { position: absolute; inset: 0; }

/* YouTube väljer upplösning efter hur stor spelaren är i CSS-pixlar, inte
   efter hur stor skärmen är. En spelare som ligger i en smal spalt får
   därför 480p oavsett vad klippet håller. Lösningen: bygg ramen i full
   1920x1080 och skala ned den visuellt. YouTube ser en 1080p-stor spelare
   och levererar därefter, medan den renderade storleken blir exakt densamma
   som förut - skalan är strip-höjden delad med 1080, vilket ger samma
   16:9-yta som beräkningen den ersätter. */
.video-panel__media iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  /* --yt-scale sätts per panel av main.js: scale() kan inte räknas fram i
     CSS eftersom en längd inte går att dividera med ett tal där. */
  transform: translate(-50%, -50%) scale(var(--yt-scale, 0.45));
  transform-origin: center center;
  border: 0;
  background: #0d0d0d;
  pointer-events: none;
}

.video-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.7) 100%);
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}

.video-panel:hover::after { opacity: 0.55; }

.video-panel__label {
  position: absolute;
  left: clamp(16px, 1.6vw, 24px);
  right: clamp(16px, 1.6vw, 24px);
  bottom: clamp(16px, 1.6vw, 24px);
  z-index: 2;
  color: var(--cream);
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* the title would only truncate in a collapsed panel, so it waits for hover */
.video-panel__label .name {
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.video-panel:hover .name { opacity: 1; transform: none; }

.video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.45);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Cards ----------------------------------------------------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

.card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 260px;
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
}

.card--soft { background: var(--paper-2); }
.card .spacer { flex: 1; }

.card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(11, 11, 12, 0.05);
  border-radius: 0;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}

.chip b { font-weight: 600; }

.rating {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
}

.stars { letter-spacing: 2px; }

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 15px;
}

.check-list svg { flex: none; opacity: 0.5; }

.availability {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line-soft);
  border-radius: 0;
  padding: 20px;
  display: grid;
  gap: 16px;
}

.availability .row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

/* ---------- Quote / timeline ------------------------------------------ */

.quote-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }

.bullets li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(16px, 1.6vw, 20px);
  color: var(--ink);
}

.bullets li::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  opacity: 0.5;
  background: var(--ink);
  -webkit-mask: var(--check) center / contain no-repeat;
  mask: var(--check) center / contain no-repeat;
}

.years {
  font-size: clamp(46px, 8vw, 104px);
  font-weight: 600;
  letter-spacing: -0.045em;
  color: #c9c9c9;
  margin-top: clamp(40px, 6vw, 78px);
  white-space: nowrap;
}

blockquote {
  margin: 0;
  font-size: clamp(17px, 1.8vw, 22px);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.quote-author { margin-top: 22px; font-size: 15px; line-height: 1.6; }
.quote-author span { color: var(--muted); display: block; }

.portrait {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  margin-bottom: 28px;
  max-width: 220px;
  overflow: hidden;
}

/* ---------- Newsletter / footer --------------------------------------- */

.footer-cta {
  display: grid;
  grid-template-columns: 1fr 0.55fr 0.55fr;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(56px, 8vw, 104px) 0;
}

.footer-title {
  font-size: clamp(34px, 4.6vw, 58px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.02;
  max-width: 12ch;
}

.dots {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-image: none;
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(circle, #000 38%, transparent 72%);
  mask-image: radial-gradient(circle, #000 38%, transparent 72%);
  opacity: 0.8;
  flex: none;
}

.title-row { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }

.newsletter { margin-top: 30px; max-width: 480px; }

.field {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.field input {
  border: 0;
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  width: 100%;
  padding: 6px 0;
  outline: none;
}

.field input::placeholder { color: var(--muted); }

.btn--wide {
  width: 100%;
  justify-content: center;
  background: var(--ink);
  color: var(--cream);
  margin-top: 22px;
}
.btn--wide:hover { background: #262626; }

.fineprint { font-size: 13.5px; color: var(--ink-soft); margin-top: 18px; }
.fineprint + .fineprint { margin-top: 8px; }

.col-title {
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}

.col-list { display: grid; gap: 12px; }

.col-list a {
  font-family: inherit;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  width: fit-content;
  position: relative;
}

.col-list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.col-list a:hover::after { transform: scaleX(1); }

.socials {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: clamp(28px, 4vw, 44px) 0;
}

.socials .label { font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-soft); }
.social-links { display: flex; gap: 22px; align-items: center; }

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  opacity: 0.72;
  transition: opacity 0.3s var(--ease);
}
.social-links a:hover { opacity: 0.55; }

.site-footer { background: var(--paper); }

.footer-main {
  display: grid;
  grid-template-columns: 1fr 0.5fr 0.5fr;
  gap: clamp(28px, 5vw, 64px);
  padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
}

.footer-claim {
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.footer-wordmark {
  font-size: clamp(38px, 6.5vw, 82px);
  font-weight: 600;
  letter-spacing: -0.045em;
  margin: clamp(26px, 4vw, 48px) 0 26px;
  line-height: 1;
}

.footer-blurb { display: flex; align-items: center; gap: 18px; max-width: 520px; }

.orb {
  width: 78px; height: 44px;
  border-radius: 0;
  background: var(--paper-2);
  flex: none;
}

.footer-blurb p { font-size: 14.5px; margin: 0; }

.copyright { font-size: 13.5px; color: var(--ink-soft); margin-top: 30px; }

.contact-block { font-size: 15.5px; line-height: 1.7; }
.contact-block a { border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.contact-block a:hover { border-bottom-color: currentColor; }

.phone { font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -0.03em; }

.to-top {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 34px;
}

.to-top a {
  width: 62px; height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease);
}
.to-top a:hover { transform: translateY(-5px); }

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding: 22px 0 34px;
}

/* ---------- Work page ------------------------------------------------- */

.page-hero { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 6vw, 72px); }
.page-hero .display { margin-top: 26px; }
.page-hero .lead { margin-top: 26px; }

.work-list { display: grid; gap: clamp(16px, 2vw, 26px); }

.work-item {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.work-item:hover {
  transform: translateY(-4px);
}

.work-item:nth-child(even) .work-thumb,
.work-item:nth-child(even) .work-gallery { order: 2; }

.work-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow: hidden;
}

.work-body { padding: clamp(6px, 1.4vw, 22px); }
.work-body .h3 { margin: 14px 0 14px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.tag {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 7px 12px;
}

/* ---------- Studio page ----------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

.service {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(24px, 2.8vw, 34px);
  transition: transform 0.6s var(--ease);
}
.service:hover { transform: translateY(-4px); }
.service h3 { margin: 0 0 12px; font-size: clamp(19px, 1.9vw, 24px); }
.service p { font-size: 15px; }

.steps { display: grid; gap: 0; margin-top: clamp(36px, 5vw, 64px); }

.step {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) 1.3fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step h3 { font-size: clamp(21px, 2.2vw, 28px); }
.step p { font-size: 15.5px; }

/* ---------- Contact page ---------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(26px, 3.2vw, 40px);
}

.form-row { display: grid; gap: 22px; }
.form-row--2 { grid-template-columns: 1fr 1fr; }

.form-field label {
  display: block;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  padding: 8px 0 12px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.3s var(--ease);
}

.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-bottom-color: var(--ink); }

.info-list { display: grid; gap: 0; }

.info-item {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.info-item:last-child { border-bottom: 1px solid var(--line); }
.info-item .col-title { border: 0; padding: 0; margin-bottom: 10px; }


/* ---------- Textblock ---------------------------------------------------
   Ingen fylld ruta - bara en linje till vänster om texten. Det räcker för
   att blocket ska läsa som ett block, och det är den sortens avgränsning
   Polestar och Db använder i stället för kort. */
.panel {
  border-left: 1px solid var(--ink);
  padding-left: clamp(18px, 2vw, 28px);
}

.panel--text { max-width: 54ch; }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* ---------- Craft details ---------------------------------------------- */

/* Scroll progress - en hårfin linje under toppraden. Bredden sätts av
   main.js via --progress, så den följer hur långt ned på sidan man är. */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  opacity: 0.85;
}

/* Rubriker stiger upp bakom en mask i stället för att bara tona in.
   clip-path gör jobbet, så ingen text delas upp i DOM:en - texten går
   fortfarande att markera, läsa upp och språkväxla som vanligt. */
.h1[data-reveal],
.wordmark[data-reveal],
.hero-claim[data-reveal] {
  clip-path: inset(0 0 105% 0);
  transform: translateY(0.18em);
  transition: clip-path 1s var(--ease), transform 1s var(--ease), opacity 0.6s var(--ease);
}

.h1[data-reveal].is-in,
.wordmark[data-reveal].is-in,
.hero-claim[data-reveal].is-in {
  clip-path: inset(-25% 0 -25% 0);
  transform: none;
}

/* Pekarljus: korten får en mjuk ljuskägla där musen är.
   --mx/--my sätts av main.js, och faller tillbaka på mitten. */
.cap,
.plan,
.card {
  position: relative;
  isolation: isolate;
}




/* Magnetiska knappar - --tx/--ty sätts av main.js när musen är nära */
.btn {
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

/* BTS-bilderna: rutan avslöjas nedifrån medan bilden själv
   sakta går från lätt inzoomad till normal - två hastigheter i samma
   rörelse, vilket är det som får den att kännas filmad snarare än css:ad */
/* Bilderna är graderade svartvita i filerna. Tonen läggs här i stället för
   i filerna, så den följer paletten: ändrar du elfenbenet ändrar du en rad
   här och hela serien följer med. */
/* Två rörelser i samma transform: --ps är intoningens skala, --py är
   parallaxen som main.js skriver. De skulle skriva över varandra om båda
   satte transform direkt, så var och en får sin variabel. Vilolaget är
   skalat 1.08 så bilden har marginal att röra sig inom utan att visa kant. */
.media-grid--bts .tile img {
  --ps: 1.26;
  filter: contrast(1.04);
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps));
  transition: clip-path 1.1s var(--ease), transform 1.6s var(--ease),
              filter 0.6s var(--ease);
  will-change: transform;
}

/* Skalan måste vara större än parallaxen, annars glider bildens kant in i
   rutan. Rutan är ~186 px hög, 16 % överskott ger ~15 px marginal åt varje
   håll, och parallaxen är begränsad till 10 px i main.js. */
.media-grid--bts .tile.is-in img {
  clip-path: inset(0 0 0 0);
  --ps: 1.16;
}

.media-grid--bts .tile:hover img { --ps: 1.22; }

/* rutnätet dämpas när man pekar på en bild, så den man tittar på lyfts fram */
.media-grid--bts:hover .tile:not(:hover) img {
  filter: contrast(1.04) opacity(0.6);
}

/* ---------- Hero ---------------------------------------------------------
   Etikett till vänster, innehåll till höger. Det är rastret Polestar
   använder på varje sida, och det ersätter det jättelika ordmärket som
   låg här förut - ett ordmärke tvärs över hela sidan är en mallgest,
   inte ett varumärke. Namnet står i toppraden där det hör hemma. */
/* Etikettspalten ska vara smal - den rymmer två rader text. Textspalten tar
   resten, och rubriken får fylla den. Proportionen är Polestars: ungefär en
   fjärdedel etikett, tre fjärdedelar innehåll. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(0, 2.4fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

/* Hero-etiketten skrivs som Polestar skriver sin: normal versalgemen i
   brödtextstorlek, ingen linje, inga versaler. Den ska läsa som ett namn,
   inte som en rubrikdekoration. */
.hero-grid__label .eyebrow {
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-transform: none;
  color: var(--ink);
  margin: 0;
  display: block;
}

.hero-grid__label .eyebrow::before { display: none; }
.hero-grid__label .eyebrow--dim { color: var(--muted); margin-top: 6px; }

/* Ingen max-width: rubriken var kapad till 20 tecken och slutade därför
   flera hundra pixlar innan spalten tog slut, vilket är det som fick sidan
   att se tom ut i högerkanten. Graden är satt så att den fyller två rader. */
.hero-grid__body .hero-claim {
  font-size: clamp(32px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  max-width: none;
}

.hero-grid__body .hero-meta {
  margin-top: clamp(30px, 4vw, 52px);
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.hero-actions { margin-top: clamp(28px, 3.4vw, 44px); }

/* ---------- Sektionsrubriker --------------------------------------------
   Vänsterställda, aldrig centrerade. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: end;
  margin: 0 0 clamp(34px, 4.6vw, 58px);
  text-align: left;
  max-width: none;
}

.section-head .h1 { text-wrap: balance; max-width: 17ch; }
.section-head .lead { margin: 0; max-width: 48ch; }

@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .section-head .lead { margin-top: 16px; }
}

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid__label { margin-bottom: 8px; }
}

/* ---------- Disciplinerna -----------------------------------------------
   Uppräkningen ska läsas på två sekunder och visa bredden utan att bli en
   textmassa. Fyra spalter hållna av samma hårlinjer som resten av sidan. */
/* ---------- Disciplinrutnat med handritade skisser -------------------
   Rutnatet ar hairlines: gap 1px over en linjefargad bakgrund, precis som
   resten av sajten. Skisserna ar SVG-symboler som ritas med currentColor,
   sa hover farglagger dem via CSS utan att rora markupen.               */
.disciplines {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.disciplines li {
  background: var(--white);
  padding: clamp(16px, 1.8vw, 24px);
  font-size: clamp(16px, 1.5vw, 20px); letter-spacing: -0.01em;
  transition: background 0.25s var(--ease);
}
.disciplines li:hover { background: var(--paper-2); }

.disciplines--sk li {
  display: flex; flex-direction: column;
  gap: clamp(14px, 1.7vw, 24px);
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
  color: var(--ink);
}
.disciplines--sk li span {
  margin-top: auto;
  font-size: clamp(15px, 1.35vw, 19px); line-height: 1.25; letter-spacing: -0.01em;
}
.sk {
  display: block; width: 100%; height: auto;
  max-width: 200px; margin: 0 auto; color: var(--ink);
  transition: color 0.3s var(--ease), transform 0.5s var(--ease);
}
.disciplines--sk li:hover .sk { color: var(--accent); transform: translateY(-4px) rotate(-1.4deg); }

@media (max-width: 1024px) { .disciplines { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .disciplines { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .sk { max-width: 132px; } }


/* Startsidans rutnat ar en oversikt, inte en katalog -- mindre skisser och
   tightare rutor sa hela spalten tar mindre plats an pa Craft-sidan. */
.disciplines--compact li {
  gap: clamp(10px, 1.1vw, 15px);
  padding: clamp(16px, 1.6vw, 22px) clamp(14px, 1.4vw, 18px) clamp(13px, 1.3vw, 16px);
}
.disciplines--compact .sk { max-width: 124px; }
.disciplines--compact li span { font-size: clamp(14px, 1.1vw, 16px); }
@media (max-width: 420px) { .disciplines--compact .sk { max-width: 96px; } }

/* ---------- Skissbordet ----------------------------------------------
   Tva varianter av samma bord: en bred for desktop, en tvakolumnig for
   telefon. Bara en ar i DOM-flodet at gangen, den andra doljs helt.     */
.board-head { margin-bottom: clamp(28px, 3.4vw, 52px); }
.board-note {
  max-width: 54ch; margin: 14px 0 0;
  color: var(--muted); font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5;
}
.board-wrap { border: 1px solid var(--line); background: var(--white); }
.board { display: block; width: 100%; height: auto; color: var(--ink); }
.board-slot--narrow { display: none; }
@media (max-width: 860px) {
  .board-slot--wide   { display: none; }
  .board-slot--narrow { display: block; }
}
.bd-t     { font-family: 'Architects Daughter', 'Schibsted Grotesk', cursive;
            font-size: 21px; fill: var(--ink); }
.bd-s     { font-family: 'Architects Daughter', 'Schibsted Grotesk', cursive;
            font-size: 15px; fill: var(--muted); }
.bd-tick  { font-family: 'Architects Daughter', 'Schibsted Grotesk', cursive;
            font-size: 13px; fill: var(--muted); text-anchor: middle; }
.bd-stamp { font-family: 'Architects Daughter', 'Schibsted Grotesk', cursive;
            font-size: 22px; fill: var(--accent); text-anchor: middle;
            letter-spacing: 0.06em; }
.section--tight { padding-top: clamp(40px, 4vw, 70px); }

/* ---------- Linjerastret ------------------------------------------------
   Korten på sidan var fristående rutor med egen bakgrund, ram och radie.
   Polestar och Db gör tvärtom: ytan är vit rakt igenom och strukturen
   kommer från tunna linjer. Rutnätet ritas med gap i linjefärg och en
   yttre ram, så varje cell delar linje med grannen i stället för att ha
   en egen. En linje, inte två. */
.cap-grid,
.card-grid,
.plan-grid,
.service-grid {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.cap,
.card,
.plan,
.service-grid > * {
  background: var(--white);
  border: 0;
}

.cap:hover,
.card:hover,
.plan:hover { background: var(--paper-2); transform: none; }

/* den valda planen står kvar som svart yta - regeln ovan är bredare och
   skulle annars vitmåla den */
.plan-grid .plan--feature { background: var(--ink); color: var(--white); }
.plan-grid .plan--feature:hover { background: #1c1c1c; }

/* det valda alternativet markeras med svart yta, inte med en glödkant */
.cap[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.cap[aria-pressed="true"] .cap__desc { color: rgba(255, 255, 255, 0.72); }

/* knappar: fylld svart eller vit med en linje - inga piller, ingen skugga */
.btn {
  border-radius: 0;
  padding: 15px 26px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 15px;
}

.btn--dark { background: var(--ink); color: var(--white); border: 1px solid var(--ink); }
.btn--dark:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--light { background: var(--white); color: var(--ink); border: 1px solid var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--white); }

/* pilen är accentens enda plats i vila, precis som hos Polestar */
.btn .arrow, .arrow { color: var(--accent); }
.btn--dark .arrow, .btn--wide .arrow, .plan--feature .arrow { color: inherit; }

/* etiketter: samma grotesk i versaler i stället för monospace */
.col-title,
.hero-stat .label,
.stat .label,
.plan__kicker,
.cap-hint,
.nav-links a,
.nav-contact,
.brand {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* ---------- Case-raden --------------------------------------------------
   Varje case låg i en egen inramad ruta med luft runt om. Det är samma
   kort-tänk som tagits bort på startsidan: nu är raden bara en rad, och
   linjen under skiljer den från nästa. Bilden får gå ända ut. */
.work-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: clamp(34px, 4.5vw, 64px) 0;
  align-items: center;
}

.work-item:last-child { border-bottom: 0; }
.work-item:hover { transform: none; }
.work-list { gap: 0; }

/* etiketterna under ett case är text, inte knappar */
.tag {
  border: 0;
  padding: 0;
  color: var(--muted);
}

.tags { gap: 0; display: flex; flex-wrap: wrap; align-items: baseline; }
.tags .tag + .tag::before { content: "/"; margin: 0 9px; opacity: 0.4; }

/* ---------- Formulär ----------------------------------------------------
   Ingen ruta runt fälten. Varje fält är en linje - det är så både
   Polestar och Db gör sina formulär. */
.form-card {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.availability {
  background: none;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  padding: 18px 0 0;
}

/* tom dekorruta i sidfoten - den innehöll ingenting */
.orb { display: none; }
.footer-blurb { gap: 0; }

/* ---------- Djup vid scroll ---------------------------------------------
   Tre lager som rör sig olika fort: filmen långsammast, bilderna i sina
   ramar näst långsammast, rubrikerna knappt märkbart. Brödtext rör sig
   aldrig - text som glider i förhållande till sin egen rubrik är svårläst
   och är det som får parallax att kännas billigt. */
[data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-parallax], .showreel__video { transform: none !important; }
  .media-grid--bts .tile img { --py: 0px !important; }
}

/* ---------- Scroll animations ----------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: opacity, transform;
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* variants — a slightly different entrance for imagery and wide blocks */
[data-reveal="scale"] { transform: scale(1.035); }
[data-reveal="slide"] { transform: translateY(26px); }

/* containers whose children come in one after another */
[data-stagger] > [data-reveal] { transition-delay: calc(var(--i, 0) * 70ms); }

[data-reveal][data-delay="1"] { transition-delay: 0.08s; }
[data-reveal][data-delay="2"] { transition-delay: 0.16s; }
[data-reveal][data-delay="3"] { transition-delay: 0.24s; }
[data-reveal][data-delay="4"] { transition-delay: 0.32s; }
[data-reveal][data-delay="5"] { transition-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .h1[data-reveal], .wordmark[data-reveal], .hero-claim[data-reveal],
  .media-grid--bts .tile img { clip-path: none !important; }
  .media-grid--bts .tile img { transform: none !important; }
  .media-grid--bts:hover .tile:not(:hover) img { filter: none; }
  .site-header::after { display: none; }
  * { animation: none !important; }

  /* the marquee stops, so lay the logos out as a static wrapping grid */
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-row { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-row [data-clone] { display: none; }
  .annotation svg path { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ---------- Responsive ------------------------------------------------ */

@media (max-width: 1024px) {
  .logo-grid { grid-template-columns: repeat(4, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .stats--promises { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .card-grid, .media-grid, .service-grid { grid-template-columns: repeat(2, 1fr); }
  .media-grid--bts { grid-template-columns: repeat(3, 1fr); }
  .plan-grid { grid-template-columns: 1fr; }
  .footer-cta, .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-cta > :first-child, .footer-main > :first-child { grid-column: 1 / -1; }
  .step { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .nav-links.is-open {
    display: flex;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 24px var(--pad) 30px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-contact { display: none; }
  .nav-links.is-open .nav-links__contact { display: block; }
  .brand { font-size: 14px; }
  .lang__btn { padding: 6px 11px; font-size: 11px; }

  .hero-top, .hero-bottom, .quote-grid, .two-col, .contact-grid { grid-template-columns: 1fr; }
  .hero-stat { text-align: left; }
  .wordmark { white-space: normal; overflow-wrap: break-word; }
  .work-item { grid-template-columns: 1fr; }
  .work-item:nth-child(even) .work-thumb,
  .work-item:nth-child(even) .work-gallery { order: 0; }
  .media-grid, .card-grid, .service-grid { grid-template-columns: 1fr; }
  .media-grid--bts { grid-template-columns: repeat(2, 1fr); }
  .stats--promises { grid-template-columns: 1fr; gap: 32px; }
  .cap-grid, .plan-grid { grid-template-columns: 1fr; }
  .annotation { display: none; }
  .cap-bar { border-radius: 0; padding: 16px; }
  .cap-bar .btn { margin-left: 0; width: 100%; justify-content: center; }

  /* no hover on touch — the strip becomes a swipeable row instead */
  .video-strip {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .video-panel {
    flex: 0 0 82%;
    aspect-ratio: 16 / 9;
    scroll-snap-align: center;
  }
  .video-strip .video-panel:hover { flex: 0 0 82%; }
  .video-panel .name { opacity: 1; transform: none; }
  .video-panel__media iframe { transform: translate(-50%, -50%) scale(var(--yt-scale, 0.18)); }
  .logo-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row--2 { grid-template-columns: 1fr; }
  .footer-cta, .footer-main { grid-template-columns: 1fr; }
}

.footer-blurb--plain { gap: 0; }

/* ==================================================================
   TATHET OCH TELEFONANPASSNING
   ------------------------------------------------------------------
   Sist i filen med flit. Reglerna ska vinna over breakpointarna
   langre upp utan att specificiteten behover trappas upp, sa ordningen
   ar: generellt -> breda skarmar -> smala. Flyttar du blocket uppat
   slutar halften av det att galla.
   ================================================================== */

/* ---------- Startsidans rutnat -------------------------------------
   Sex kolumner i stallet for fyra halverar antalet rader, och det ar
   raderna som star for hojden. I en smal ruta ger en centrerad skiss
   over en vansterstalld etikett ett synligt sicksack — darfor ligger
   bada mot vanstermarginalen har. Craft-sidans rutor ar breda nog att
   behalla centreringen.                                              */
.disciplines--compact { grid-template-columns: repeat(6, 1fr); }
.disciplines--compact li {
  gap: clamp(8px, 0.9vw, 12px);
  padding: clamp(14px, 1.4vw, 20px) clamp(10px, 1vw, 14px) clamp(11px, 1.1vw, 15px);
}
.disciplines--compact .sk { max-width: clamp(72px, 5.4vw, 100px); margin: 0; }
.disciplines--compact li span { font-size: clamp(13px, 0.95vw, 15px); line-height: 1.2; }

#everything { padding: clamp(38px, 4.4vw, 64px) 0; }
#everything .section-head { margin-bottom: clamp(18px, 2.2vw, 30px); }
#everything .section-head .h1 { font-size: clamp(29px, 4.3vw, 56px); }

/* Langa adresser far brytas hellre an att ga utanfor kanten */
.info-item a, .contact-block a { overflow-wrap: anywhere; }

/* ---------- Craft-rutnatets trappa ---------------------------------
   Grundreglerna gick fran fyra kolumner rakt till tva vid 820 px. Pa
   en surfplatta blev rutorna da dubbelt sa hoga som pa dator — tolv
   rutor i sex rader. Skissen maste krympa i takt med kolumnbredden,
   annars ar det den som satter radhojden. :not() haller startsidans
   kompakta rutnat utanfor.                                           */
@media (max-width: 1200px) {
  .disciplines--compact { grid-template-columns: repeat(4, 1fr); }
  .disciplines--sk:not(.disciplines--compact) .sk { max-width: 158px; }
}
@media (max-width: 900px) {
  .disciplines--sk:not(.disciplines--compact) { grid-template-columns: repeat(3, 1fr); }
  .disciplines--sk:not(.disciplines--compact) .sk { max-width: 118px; }
  .disciplines--sk:not(.disciplines--compact) li { gap: 12px; padding: 18px 16px 15px; }
}

/* ---------- Telefon och liggande surfplatta ------------------------ */
@media (max-width: 820px) {
  /* Rytm: mindre luft mellan och inuti sektionerna */
  .section        { padding: 40px 0; }
  .section--tight { padding: 32px 0; }
  #everything     { padding: 36px 0; }

  .section-head, .cap-head, .proof-head { margin-bottom: 22px; gap: 12px; }
  .section-head .lead { margin-top: 10px; }
  .two-col { gap: 16px; margin-bottom: 26px; }

  .h1   { font-size: clamp(31px, 8.4vw, 40px); }
  .h2   { font-size: clamp(25px, 6.6vw, 32px); }
  .lead { font-size: 15px; line-height: 1.5; }

  .cap        { padding: 14px 16px; gap: 4px 12px; }
  .cap__desc  { font-size: 13.5px; line-height: 1.42; }
  .cap-hint   { margin-bottom: 12px; }
  .plan       { padding: 20px; }
  .plan .spacer { min-height: 14px; }
  .check-list { gap: 8px; }
  .service    { padding: 18px 20px; }
  .stats--promises { gap: 18px; }
  .logo-marquee    { gap: 12px; }

  /* Versala mikroetiketter pa 11,5 px ar for smatt pa en telefon.
     Halvpunkten kostar ingen hojd och gor dem lasbara. */
  .plan__kicker, .col-title, .video-panel .name, .eyebrow,
  .form-field label, .stat .label, .tag { font-size: 12.5px; }

  /* Tryckytor: allt man ska traffa med tummen behover hojd */
  .brand      { display: inline-flex; align-items: center; min-height: 44px; }
  .lang__btn  { padding: 11px 15px; font-size: 12px; min-height: 40px; }
  .nav-toggle { padding: 13px 10px; margin-right: -10px; }
  .nav-links.is-open a { display: block; padding: 6px 0; }
  .col-list   { gap: 2px; }
  .col-list a { display: flex; align-items: center; min-height: 40px; }
  .social-links   { gap: 6px; }
  .social-links a { display: flex; align-items: center; justify-content: center;
                    width: 44px; height: 44px; }
  .phone a, .contact-block a, .info-item a {
    display: inline-flex; align-items: center; min-height: 40px;
  }

  /* 16 px ar gransen dar iOS slutar zooma in nar faltet far fokus */
  .newsletter input[type="email"],
  .form-field input, .form-field textarea, .form-field select {
    min-height: 46px; font-size: 16px;
  }
  .form-field textarea { min-height: 120px; }

  /* Storre video i den swipebara raden — en flik av nasta panel
     visar fortfarande att den gar att dra i. */
  .video-panel { flex: 0 0 88%; }

  /* Sidfoten lag pa 1852 px — over tva skarmar, pa varje sida.
     Lanklistorna ar korta nog att sta bredvid varandra; rubrikerna
     (nyhetsbrevet respektive ordmarket) behaller hela bredden. */
  .footer-cta, .footer-main { grid-template-columns: 1fr 1fr; gap: 20px; }
  .footer-cta > :first-child, .footer-main > :first-child { grid-column: 1 / -1; }
  .footer-cta  { padding: 34px 0; }
  .footer-main { padding: 30px 0 24px; }
  .socials     { padding: 22px 0; gap: 16px; }
  .to-top      { padding-bottom: 18px; }
  .to-top a    { width: 48px; height: 48px; }
  .footer-legal{ padding: 16px 0 22px; }
  .newsletter  { margin-top: 20px; }
}

@media (max-width: 640px) {
  .disciplines--compact { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  /* Tightare ruta, storre skiss: samma hojd, battre balans */
  .disciplines--sk:not(.disciplines--compact) { grid-template-columns: repeat(2, 1fr); }
  .disciplines--sk:not(.disciplines--compact) .sk { max-width: 110px; }
  .disciplines--sk:not(.disciplines--compact) li { gap: 12px; padding: 16px 14px 14px; }

  /* Kontaktblocket talde inte tva spalter: mejladressen gick utanfor
     kanten och telefonnumret brots mitt itu. */
  .footer-main { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .disciplines--compact .sk { max-width: 58px; }
}

/* Smalaste telefonerna (320 px, eller en vikbar i hopfallt lage): de
   storre sprakknapparna tryckte ut hamburgaren utanfor hogerkanten.
   Kramp ihop huvudet i stallet for att krympa tryckytorna i hojdled. */
@media (max-width: 380px) {
  .brand      { font-size: 12.5px; letter-spacing: 0.08em; }
  .lang__btn  { padding: 11px 9px; }
  .lang       { padding: 2px; }
  .nav-toggle { padding: 13px 6px; margin-right: -6px; }
}

/* ------------------------------------------------------------------
   Telefon: disciplinrutnatet som lista i stallet for rutor
   Staplat (skiss over etikett) kostar hojd tva ganger om: skissens
   egen hojd plus raden under. Lagger man dem bredvid varandra ryms
   skissen inuti textradens hojd och kostar nastan ingenting.
   ------------------------------------------------------------------ */
@media (max-width: 820px) {
  /* Surfplatta klarar tre spalter; under 640 px blir textkolumnen for
     smal for "Varumarkesplattform" och da ar tva spalter ratt. */
  .disciplines--compact { grid-template-columns: repeat(3, 1fr); }
  .disciplines--compact li {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
  }
  /* 30 px ar golvet. Skissernas streck ar 2,2 enheter i en 120-enheters
     ruta, sa vid 24 px blir det 0,44 px — tunnare an en enhet pa en
     2x-skarm, och ritningen gramelerad i stallet for tecknad. */
  .disciplines--compact .sk {
    flex: 0 0 30px; width: 30px; max-width: 30px;
  }
  .disciplines--compact li span {
    margin-top: 0;
    font-size: 12.5px;
    line-height: 1.15;
  }
  /* Rubriken far ocksa ta mindre plats — sektionen ska lasas i ett svep */
  #everything { padding: 20px 0; }
  #everything .section-head { margin-bottom: 12px; gap: 6px; }
  #everything .section-head .h1 { font-size: clamp(26px, 7.2vw, 32px); }
  #everything .section-head .lead { font-size: 13.5px; line-height: 1.4; margin-top: 6px; }
}

@media (max-width: 640px) {
  .disciplines--compact { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Klickbar videopanel -------------------------------------
   Lanken ligger som ett eget lager ovanpa ramen (som har
   pointer-events: none) och tacker hela panelen. Spelmarket ar en ren
   triangel — ingen rund knapp, sajten har noll radie overallt.
   Pa pekskarmar finns ingen hover, sa det syns svagt hela tiden.     */
.video-panel__open {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  text-decoration: none;
}
.video-panel__open::after {
  content: "";
  width: 0; height: 0;
  border-left: 17px solid rgba(255, 255, 255, 0.94);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.55));
}
.video-panel:hover .video-panel__open::after,
.video-panel__open:focus-visible::after { opacity: 1; transform: scale(1); }
.video-panel__open:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

@media (hover: none) {
  .video-panel__open::after { opacity: 0.75; transform: scale(1); }
}

/* I reduce-laget sitter lanken pa titeln i stallet */
.video-panel__label .name a { color: inherit; text-decoration: none; }
.video-panel__label .name a:hover { text-decoration: underline; }

/* ---------- Videoraden pa dator ------------------------------------
   Panelerna delade forut bredden lika. Med fem klipp blev det ~280 px
   var och man sag vad varje film var. Med nio blev de 132 px — en
   stripa av varje bildruta. Ge dem i stallet en fast vilobredd och lat
   raden rulla i sidled; kanten som skars av visar att det finns mer.
   Hoveruppslaget ar kvar men dampat, sa innehallet inte hoppar bort
   under pekaren i en rullbar rad.                                    */
@media (min-width: 821px) {
  .video-strip {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding-bottom: 4px;
  }
  .video-strip .video-panel {
    flex: 0 0 clamp(230px, 18vw, 300px);
    scroll-snap-align: start;
  }
  .video-strip .video-panel:hover {
    flex-grow: 0;
    flex-basis: clamp(380px, 31vw, 540px);
  }
}

/* Lank ut till kundens egen sajt i ett case */
.work-link { margin: 14px 0 0; }
.work-link a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  color: var(--ink);
  font-size: clamp(15px, 1.2vw, 17px);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.work-link a:hover { color: var(--accent); border-color: var(--accent); }
.work-link .arrow { font-size: 0.85em; }



/* ---------- Bildrulle i ett kundcase -------------------------------------
   Forra losningen var ett rutnat med object-fit: cover. For att brickorna
   ska bli lika hoga maste cover beskara, och pa en produktrendering ar
   det kanterna som ar motivet — hjul, styre, hela cykeln — sa det var
   just dem den at upp.

   Nu far varje bild en egen ruta i en vagrat rulle. object-fit: contain
   gor att hela bilden alltid syns, oavsett om den ar liggande, staende
   eller kvadratisk, och rutan behaller sidans hojdrytm.               */
.work-gallery { position: relative; }

/* Ramen halller pilarna, inte hela rullen: punkterna ligger utanfor den,
   sa pilarna hamnar mitt pa bilden och inte mitt pa bild plus punkter.
   Reveal-animationen skalar rutan — utan clip kan en slide sticka ut
   nagra pixlar under animationen och ge sidan vagrat scroll. */
.work-gallery__frame {
  position: relative;
  overflow-x: clip;
}

.work-gallery__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  /* Rullisten ar overflodig: det finns pilar, punkter och swipe. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.work-gallery__track::-webkit-scrollbar { width: 0; height: 0; display: none; }
.work-gallery__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.work-gallery__slide {
  /* 0 0 100%: varje bild tar exakt rutans bredd, sa snappningen alltid
     landar pa en hel bild och aldrig mellan tva. */
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  aspect-ratio: 16 / 10;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hairline mellan bilderna, samma sprak som resten av sajten. */
  border-right: 1px solid var(--line-soft);
}
.work-gallery__slide:last-child { border-right: 0; }

.work-gallery__slide img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

/* --- Pilar (byggs av main.js) --- */
.work-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease), background 0.3s var(--ease),
              border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.work-gallery__nav--prev { left: 12px; }
.work-gallery__nav--next { right: 12px; }

.work-gallery:hover .work-gallery__nav,
.work-gallery__nav:focus-visible { opacity: 1; }

.work-gallery__nav:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

/* Specificiteten maste mota .work-gallery:hover .work-gallery__nav,
   annars vinner hover-regeln och en slackt pil syns anda. */
.work-gallery .work-gallery__nav[disabled],
.work-gallery:hover .work-gallery__nav[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* --- Punkter (byggs av main.js) --- */
.work-gallery__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.work-gallery__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.work-gallery__dot:hover { background: var(--muted); }
.work-gallery__dot[aria-current='true'] {
  background: var(--ink);
  transform: scale(1.35);
}

/* Pa pekskarm finns ingen hover att visa pilarna pa, och swipe ar det
   naturliga sattet anda. Da tar punkterna over helt och far en storre
   traffyta an de 7 px de ser ut att ha. */
@media (hover: none) {
  .work-gallery__nav { display: none; }
  .work-gallery__dot {
    /* box-shadow ritar prickens storlek, sjalva knappen ar 24 px. */
    width: 24px;
    height: 24px;
    background: none;
    box-shadow: inset 0 0 0 4px var(--line);
    border-radius: 50%;
  }
  .work-gallery__dot[aria-current='true'] {
    background: none;
    box-shadow: inset 0 0 0 5px var(--ink);
    transform: none;
  }
  .work-gallery__dots { gap: 2px; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-gallery__track { scroll-behavior: auto; }
  .work-gallery__nav { opacity: 1; }
}

/* ---------- Forstoring av en casebild ------------------------------------
   Klick pa en bild i rullen lagger den over hela sidan.

   Det viktiga har ar vad som INTE star: ingen width: 100%, ingen height:
   100%. Bilden far sin egen upplosning som tak och skalas aldrig upp —
   en uppskalad bild ar suddig, alltid. Ar skarmen mindre an filen
   krymper den i stallet, och nedskalning ar alltid skarpt.           */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 3vw, 48px);
  /* Extra luft nedtill sa att raknaren far en egen rad i stallet for att
     ligga ovanpa bilden — pa en ljus produktrendering forsvann den. */
  padding-bottom: clamp(54px, 6vw, 78px);
  /* 0.94 racker inte: svart text pa vit sida behaller sin kontrast aven
     under ett morkt lager, sa rubriker och punkter lyste igenom. Suddet
     tar bort formerna, opaciteten tar resten. */
  background: rgba(12, 12, 12, 0.975);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: lightbox-in 0.25s var(--ease);
}

@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }

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

/* Sidan bakom ska inte rulla medan overlagget ligger uppe. */
body.is-locked { overflow: hidden; }

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.lightbox__img {
  /* width/height: auto ar hela poangen — bilden ritas i sin egen
     upplosning och begransas bara nedat av rutan. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--white);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.55);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

.lightbox__close {
  top: clamp(12px, 2vw, 26px);
  right: clamp(12px, 2vw, 26px);
  width: 46px;
  height: 46px;
  font-size: 22px;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 17px;
}
.lightbox__nav--prev { left: clamp(10px, 2vw, 30px); }
.lightbox__nav--next { right: clamp(10px, 2vw, 30px); }

.lightbox__nav[disabled] { opacity: 0.25; pointer-events: none; }

.lightbox__count {
  position: absolute;
  bottom: clamp(18px, 2.4vw, 30px);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Pa en telefon ligger pilarna nere vid tummen i stallet for mitt over
   bilden, dar de hade skymt motivet. */
@media (max-width: 600px) {
  .lightbox { padding-bottom: 104px; }
  .lightbox__nav {
    top: auto;
    bottom: 52px;
    transform: none;
    width: 46px;
    height: 46px;
  }
  .lightbox__count { bottom: 20px; }
}

/* Markoren visar att bilden gar att oppna. */
[data-zoom].is-zoomable { cursor: zoom-in; }
[data-zoom].is-zoomable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ==========================================================================
   Casesidor — /case/<kund>
   ========================================================================== */

/* .wrap ar 2100 px pa vidaste skarm. Det ar ratt for en startsida men fel
   for ett case: en textrad blir olasbar och en bild absurd. Innehallet
   far en egen, smalare spalt. */
.case-blocks {
  max-width: 1560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(38px, 5vw, 78px);
}

/* --- Huvudet --- */
.case-hero .eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.case-back { border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); }
.case-back:hover { border-bottom-color: currentColor; }
.case-back__sep { opacity: 0.4; }

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 40px);
  margin-top: clamp(22px, 3vw, 38px);
}
.case-meta .tags { margin-top: 0; }
.case-meta .work-link { margin: 0; }

.case-contact { margin: 0; font-size: 14.5px; }
.case-contact .mono { margin-right: 8px; }
.case-contact a { border-bottom: 1px solid var(--line); }
.case-contact a:hover { color: var(--accent); border-color: var(--accent); }

/* --- Text --- */
.case-text {
  /* Radlangd, inte spaltbredd: ungefar 65 tecken ar dar ogat slutar
     tappa bort vilken rad det var pa. */
  max-width: 65ch;
  font-size: clamp(16px, 1.15vw, 18.5px);
  line-height: 1.68;
  color: var(--ink-soft);
}
.case-text p { margin: 0 0 1.05em; }
.case-text p:last-child { margin-bottom: 0; }

.case-heading { max-width: 22ch; margin: 0; }

.case-quote { margin: 0; max-width: 46ch; }
.case-quote blockquote {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 33px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.case-quote__by {
  margin-top: 16px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Bilder ---
   Ingen fast ruta och ingen beskarning: bilden far sin egen hojd. Ett
   case ska visa arbetet som det ar, inte som det rakade passa i en mall. */
.case-figure { margin: 0; }
.case-figure img,
.case-pair img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-2);
}

.case-pair {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
}
.case-pair__cell { min-width: 0; }
.case-pair .case-caption { grid-column: 1 / -1; }

.case-caption {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}

.case-gallery .case-caption { margin-top: 14px; }

/* --- Film --- */
.case-video { margin: 0; }
.case-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  cursor: pointer;
}
.case-video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.case-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-video__frame.is-playing { cursor: default; }
.case-video__frame.is-playing .case-video__poster,
.case-video__frame.is-playing .case-video__play { display: none; }

.case-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: rgba(16, 16, 16, 0.35);
  cursor: pointer;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              transform 0.3s var(--ease);
}
.case-video__play span {
  /* Triangeln ritas av ramar i stallet for ett tecken — ett tecken byter
     form med typsnittet, en ram gor inte det. */
  display: block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 15px solid #fff;
}
.case-video__frame:hover .case-video__play {
  background: rgba(16, 16, 16, 0.6);
  border-color: #fff;
  transform: scale(1.06);
}

/* --- Reels ---
   9:16 i full bredd vore flera skarmar hogt for en enda film. De ligger
   pa rad i stallet, med en bredd som halls i schack av clamp. Blir de
   fler an vad raden rymmer gar raden att dra i sidled. */
.case-reels__row {
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.case-reels__row::-webkit-scrollbar { width: 0; height: 0; display: none; }

.case-reel {
  /* Bredden foljer blockets storlek. Utan det blev en ensam reel lika
     liten i ett stort block som i ett litet — blocket var brett, men
     filmen i det satt kvar pa sina 290 px och sag bortglomd ut. */
  flex: 0 0 clamp(250px, 27vw, 400px);
  margin: 0;
  scroll-snap-align: start;
}
.case-reels.case-block--md .case-reel { flex-basis: clamp(230px, 22vw, 330px); }
.case-reels.case-block--sm .case-reel { flex-basis: clamp(200px, 18vw, 260px); }
.case-reel__frame {
  aspect-ratio: 9 / 16;
  cursor: default;
  background: var(--paper-2);
}
.case-reel__label {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* --- Avslutet --- */
.case-next__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
}
.case-next__row .h2 { margin: 0; max-width: 18ch; }
.case-next__back { margin: clamp(26px, 3.4vw, 44px) 0 0; }
.case-next__back a {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.case-next__back a:hover { color: var(--ink); border-bottom-color: var(--line); }

/* --- Lanken fran caselistan --- */
.work-title {
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.work-item:hover .work-title { border-bottom-color: var(--line); }
.work-title:hover { color: var(--accent); border-bottom-color: var(--accent); }

.work-more { margin: 14px 0 0; }
.work-more a {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.work-more a:hover { color: var(--accent); border-color: var(--accent); }

@media (max-width: 700px) {
  /* Tva bilder bredvid varandra pa en telefon blir tva frimarken. */
  .case-pair { grid-template-columns: 1fr; }
  .case-heading { max-width: none; }
  .case-next__row { flex-direction: column; align-items: flex-start; }
}

/* Pa telefon tog casets huvud tre fjardedelar av skarmen innan forsta
   bilden ens borjade. Besokaren har redan klickat pa caset och vet vad
   det heter — luften daruppe gor mindre nytta har an pa en startsida. */
@media (max-width: 820px) {
  .case-hero { padding-top: clamp(26px, 5vw, 44px); padding-bottom: clamp(22px, 3.6vw, 34px); }
  .case-hero .display { margin-top: 16px; }
  .case-hero .lead { margin-top: 18px; }
  .case-meta { margin-top: 18px; gap: 12px 20px; }
}

/* Blockstorlek — valjs per block i redigeraren.
   Reglerna star sist med flit: de ska vinna over blocktypernas egna
   max-width (case-text har 65ch, case-quote 46ch) utan !important. */
.case-block--sm,
.case-block--md {
  /* width: 100% ar inte overflodigt. Blocken ar flexbarn, och ett
     flexbarn med auto-marginaler krymper till sitt innehall — en
     videoruta som bara har absolutplacerat innehall blev noll pixlar
     bred, och ett kort textstycke blev lika brett som texten. */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.case-block--sm { max-width: 780px; }
.case-block--md { max-width: 1120px; }

/* En rubrik eller ett citat mitt i spalten ser vilset ut centrerat.
   Texten bor kvar till vanster aven nar blocket smalnar. */
.case-heading.case-block--sm,
.case-heading.case-block--md,
.case-text.case-block--sm,
.case-text.case-block--md,
.case-quote.case-block--sm,
.case-quote.case-block--md {
  align-self: flex-start;
  margin-left: 0;
  margin-right: 0;
}

/* Ljudknappen pa en film som startat av sig sjalv.
   Den ligger ovanfor spelarens egna kontroller i z-led men utanfor dem
   i hojd, sa att den inte krockar med Bunnys rad langst ner. */
.case-video__sound {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease);
}
.case-video__sound:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}

/* Krysset over hogtalaren visas nar ljudet ar av, vagorna nar det ar pa.
   Samma ikon byter betydelse i stallet for tva ikoner som ska halla
   varandra i schack. */
.case-video__wave { opacity: 0; }
.case-video__cross { opacity: 1; }
.case-video__frame.has-sound .case-video__wave { opacity: 1; }
.case-video__frame.has-sound .case-video__cross { opacity: 0; }

@media (max-width: 600px) {
  /* Pa en reel i telefonbredd tar texten for mycket plats. */
  .case-video__sound { padding: 8px; gap: 0; top: 8px; right: 8px; }
  .case-video__sound-txt { display: none; }
}

/* ---------- hidden-attributet mot display i css -------------------------
   Webblasarens egen regel [hidden] { display: none } har samma tyngd som
   en klassregel, och min egen kommer senare i filen. Alltsa vann
   .lightbox { display: flex } over hidden, och overlagget lag kvar som
   ett osynligt-men-klickbart lager over sidan efter att man stangt det.
   Stangknappen sag ut att vara trasig; den gjorde sitt jobb, rutan
   vagrade bara forsvinna.

   Attributselektorn ihop med klassen ar tyngre an klassen ensam, sa det
   racker — inget !important behovs. Galler alla element som bade har en
   display i css och doljs med hidden. */
.lightbox[hidden],
.lightbox__nav[hidden],
.lightbox__count[hidden],
.case-video__sound[hidden] {
  display: none;
}

/* Bilden i caselistan ar en ingang till caset, inte nagot att forstora.
   Lanken tacker hela rullen men ligger under pilarna och punkterna, sa
   de gar att anvanda utan att man navigerar bort. */
.work-gallery__open {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.work-gallery__slide img { cursor: pointer; }

/* Reels har ingen ljudknapp langre; regeln star kvar for liggande film. */
.case-reel__frame .case-video__sound { display: none; }

/* ---------- Bild och text bredvid varandra ------------------------------
   Casesidans enda tvaspaltiga block. Grid och inte flex: raderna ska
   dela pa bredden i ett bestamt forhallande, inte forhandla om den. */
.case-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 52px);
  align-items: center;
}
.case-split--top { align-items: start; }
.case-split--wide-media { grid-template-columns: 1.55fr 1fr; }
.case-split--wide-text { grid-template-columns: 1fr 1.55fr; }

/* Media till hoger: ordningen i html:en ar alltid media forst, sa att
   telefonen far den overst utan extra regler. Pa dator flyttas den. */
.case-split--media-right .case-split__media { order: 2; }

/* Fordelningen sitter pa spalterna, inte pa innehallet. Flyttas media
   till hoger hamnar den i den andra spalten — da maste forhallandet
   speglas, annars blev "storre bild" i stallet storre text. */
.case-split--media-right.case-split--wide-media { grid-template-columns: 1fr 1.55fr; }
.case-split--media-right.case-split--wide-text { grid-template-columns: 1.55fr 1fr; }

.case-split__media { min-width: 0; }
.case-split__media img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper-2);
}
.case-split__media .case-video__frame { aspect-ratio: 16 / 9; }
.case-split__media .case-reel__frame {
  aspect-ratio: 9 / 16;
  /* En staende film i en halv spalt blir orimligt hog. Taket haller den
     i samma hojdordning som en liggande film bredvid text. */
  max-height: 620px;
  margin: 0 auto;
  width: auto;
  aspect-ratio: 9 / 16;
}
.case-split__media .case-reel__frame iframe { position: absolute; inset: 0; }

.case-split__text { min-width: 0; max-width: none; }

@media (max-width: 820px) {
  .case-split { grid-template-columns: 1fr; gap: clamp(16px, 4vw, 26px); }
  .case-split--wide-media,
  .case-split--wide-text { grid-template-columns: 1fr; }
  .case-split--media-right .case-split__media { order: 0; }
}

/* Placering av ett block som ar smalare an spalten. */
.case-block--start { margin-left: 0 !important; margin-right: auto !important; }
.case-block--end { margin-left: auto !important; margin-right: 0 !important; }

/* Textens egen formatering — fet, kursiv, understruken, listor, lankar. */
.case-text strong { font-weight: 600; }
.case-text em { font-style: italic; }
.case-text u { text-underline-offset: 3px; }
.case-text s { opacity: 0.65; }
.case-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 1px 5px;
}
.case-text a {
  border-bottom: 1px solid var(--line);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.case-text a:hover { color: var(--accent); border-color: var(--accent); }
.case-text ul,
.case-text ol { margin: 0 0 1.05em; padding-left: 1.3em; }
.case-text li { margin-bottom: 0.4em; }
.case-text h2,
.case-text h3,
.case-text h4 { margin: 1.6em 0 0.5em; line-height: 1.2; }
.case-text h2 { font-size: clamp(22px, 2.2vw, 30px); }
.case-text h3 { font-size: clamp(19px, 1.7vw, 23px); }
.case-text h4 { font-size: clamp(17px, 1.4vw, 19px); }
.case-text > :first-child { margin-top: 0; }
.case-text blockquote {
  margin: 1.4em 0;
  padding-left: 18px;
  border-left: 2px solid var(--line);
  font-size: 1.08em;
}

/* ==========================================================================
   Banner hogst upp pa ett case — kant till kant, text ovanpa
   ========================================================================== */
.case-banner {
  position: relative;
  /* Kant till kant trots att sidan ligger i en spalt: bredden satts
     till fonstret och blocket dras ut med negativ marginal. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: clamp(440px, 62vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  color: var(--banner-ink, #fff);
}
.case-banner--tall { min-height: clamp(520px, 80vh, 900px); }
.case-banner--full { min-height: 100vh; min-height: 100svh; }

.case-banner__media {
  position: absolute;
  inset: 0;
}
.case-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Filmen ska tacka rutan som en bakgrund. En iframe kan inte object-fit,
   sa den gors alltid storre an rutan i bada led och centreras — det som
   sticker ut klipps av overflow: hidden pa bannern. */
.case-banner__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  aspect-ratio: auto;
  transform: translate(-50%, -50%);
  background: var(--ink);
  cursor: default;
  pointer-events: none;
}
.case-banner__frame iframe { pointer-events: none; }
.case-banner__frame .case-video__poster { object-fit: cover; }

/* Morkning underifran sa att ljus text alltid gar att lasa, oavsett
   vad som rakar vara i bilden bakom. Kan stangas av per case. */
.case-banner--darken::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 75%);
  pointer-events: none;
}

.case-banner__text {
  position: relative;
  z-index: 1;
  padding-top: clamp(80px, 12vw, 160px);
  padding-bottom: clamp(36px, 5vw, 72px);
  color: var(--banner-ink, #fff);
}
.case-banner--center .case-banner__text { text-align: center; }
.case-banner--center .case-banner__eyebrow { justify-content: center; }
.case-banner--center .case-banner__title,
.case-banner--center .case-banner__sub { margin-left: auto; margin-right: auto; }

.case-banner__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  opacity: 0.8;
}
.case-banner__eyebrow::before { background: currentColor; }
.case-banner__eyebrow .case-back { color: inherit; }

.case-banner__title {
  margin-top: 18px;
  color: inherit;
  max-width: 16ch;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.25);
}
.case-banner__sub {
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  max-width: 54ch;
  font-size: clamp(17px, 1.5vw, 24px);
  line-height: 1.4;
  color: inherit;
  opacity: 0.92;
}

/* Under bannern: ingress och metarad i en tunn sektion. */
.case-under-banner {
  padding: clamp(28px, 4vw, 52px) 0 clamp(22px, 3vw, 40px);
}
.case-under-banner .lead { margin-top: 0; }
.case-under-banner .case-meta { margin-top: clamp(18px, 2.4vw, 30px); }

@media (max-width: 820px) {
  .case-banner { min-height: clamp(380px, 70vh, 560px); }
  .case-banner--full { min-height: 100svh; }
  .case-banner__title { max-width: none; }
}

/* ==========================================================================
   Rad med 1-3 kolumner
   ========================================================================== */
.case-row {
  display: grid;
  gap: clamp(20px, 3vw, 52px);
  align-items: center;
}
.case-row--top { align-items: start; }
.case-row--1 { grid-template-columns: 1fr; }
.case-row--2 { grid-template-columns: 1fr 1fr; }
.case-row--3 { grid-template-columns: 1fr 1fr 1fr; }
.case-row--2.case-row--wide-left { grid-template-columns: 1.55fr 1fr; }
.case-row--2.case-row--wide-right { grid-template-columns: 1fr 1.55fr; }

.case-row__cell { min-width: 0; }
/* Inne i en cell ar blocket alltid cellens bredd — storlek och placering
   styrs av raden, inte av blocket. */
.case-row__cell > .case-block {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
}
.case-row__cell .case-text { max-width: none; }
.case-row__cell .case-heading { max-width: none; }
.case-row__cell .case-quote { max-width: none; }
.case-row__cell .case-reels__row { justify-content: center; }
.case-row__cell .case-reel { flex: 1 1 0; max-width: 400px; }

@media (max-width: 820px) {
  .case-row--2,
  .case-row--3,
  .case-row--2.case-row--wide-left,
  .case-row--2.case-row--wide-right { grid-template-columns: 1fr; }
  .case-row { gap: clamp(16px, 4vw, 26px); }
}

/* Placering av reels-raden. "safe" gor att en rad som ar bredare an
   spalten anda gar att rulla till borjan — utan safe klipps forsta
   reelen bort nar raden centreras. */
.case-reels__row--center { justify-content: safe center; }
.case-reels__row--end { justify-content: safe flex-end; }