/* =========================================================
   Cecilie Mæhre – Creative Portfolio
   ========================================================= */

/* ---------------------------------------------------------
   ENDRE HER
   Farger og skriftstørrelser for hele siden.
   Skriftstørrelser: første tall = desktop (1920px), andre = mobil (390px).
   Alt mellom regnes ut automatisk. Skriv bare tall, uten px.
   --------------------------------------------------------- */
:root {
  /* Farger */
  --farge-bakgrunn: #353535;
  --farge-tekst:    #e4d9cf;
  color-scheme: dark;

  /* Skriftstørrelser          desktop        mobil */
  --hero:         150;  --hero-mobil:         52;  /* CREATIVE PORTFOLIO, HI, */
  --tittel:        90;  --tittel-mobil:       34;  /* Seksjonstitler, case-navn, tall i statistikk */
  --undertittel:   45;  --undertittel-mobil:  24;  /* Undertitler, Neste prosjekt, EXPERIENCE */
  --ingress:       40;  --ingress-mobil:      19;  /* Intro-tekst, HEI-teksten, Før/Etter-etiketter */
  --brodtekst:     24;  --brodtekst-mobil:    17;  /* Vanlig tekst (30px i skissen, satt ned til 24) */
  --liten:         16;  --liten-mobil:        13;  /* Tagger, bildetekster, notater */
  --knapp:         24;  --knapp-mobil:        15;  /* Knapper (LinkedIn, Last ned CV, Se arbeidet) */
}

/* ---------------------------------------------------------
   Utregninger (trenger ikke endres)
   --------------------------------------------------------- */
:root {
  --flate: color-mix(in srgb, var(--farge-tekst) 8%, var(--farge-bakgrunn));

  --fs-hero:        clamp(calc(var(--hero-mobil) * 1px),        calc(var(--hero-mobil) * 1px        + (var(--hero) - var(--hero-mobil))               * (100vw - 390px) / 1530), calc(var(--hero) * 1px));
  --fs-tittel:      clamp(calc(var(--tittel-mobil) * 1px),      calc(var(--tittel-mobil) * 1px      + (var(--tittel) - var(--tittel-mobil))           * (100vw - 390px) / 1530), calc(var(--tittel) * 1px));
  --fs-undertittel: clamp(calc(var(--undertittel-mobil) * 1px), calc(var(--undertittel-mobil) * 1px + (var(--undertittel) - var(--undertittel-mobil)) * (100vw - 390px) / 1530), calc(var(--undertittel) * 1px));
  --fs-ingress:     clamp(calc(var(--ingress-mobil) * 1px),     calc(var(--ingress-mobil) * 1px     + (var(--ingress) - var(--ingress-mobil))         * (100vw - 390px) / 1530), calc(var(--ingress) * 1px));
  --fs-brodtekst:   clamp(calc(var(--brodtekst-mobil) * 1px),   calc(var(--brodtekst-mobil) * 1px   + (var(--brodtekst) - var(--brodtekst-mobil))     * (100vw - 390px) / 1530), calc(var(--brodtekst) * 1px));
  --fs-knapp:       clamp(calc(var(--knapp-mobil) * 1px),       calc(var(--knapp-mobil) * 1px       + (var(--knapp) - var(--knapp-mobil))             * (100vw - 390px) / 1530), calc(var(--knapp) * 1px));
  --fs-liten:       clamp(calc(var(--liten-mobil) * 1px),       calc(var(--liten-mobil) * 1px       + (var(--liten) - var(--liten-mobil))             * (100vw - 390px) / 1530), calc(var(--liten) * 1px));

  /* 1 skisse-piksel: skalerer mål fra Figma (1920px bred) ned på mindre skjermer */
  --u: min(1px, calc(100vw / 1920));

  --font-display: "Unbounded", system-ui, sans-serif;
  --font-body: "Lato", system-ui, sans-serif;

  --gutter: clamp(16px, 6vw, 140px);
  --max: 1640px;
  --radius-pill: 50px;
  --border: 3px solid var(--farge-tekst);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--farge-bakgrunn);
  color: var(--farge-tekst);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-brodtekst);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
strong, b { font-weight: 700; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
}

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Knapper ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .55em 1.4em;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--farge-tekst);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-knapp);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.pill:hover, .pill:focus-visible { background: var(--farge-tekst); color: var(--farge-bakgrunn); }
.pill--big { border-width: 4px; padding: .6em 1.3em; font-size: var(--fs-ingress); }
.pill--small { font-size: var(--fs-liten); border-width: 2px; padding: .7em 1.6em; }

.round-btn {
  display: inline-grid;
  place-items: center;
  width: clamp(44px, 3.1vw, 59px);
  aspect-ratio: 1;
  border: var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--farge-tekst);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-brodtekst);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.round-btn:hover, .round-btn:focus-visible { background: var(--farge-tekst); color: var(--farge-bakgrunn); }

:focus-visible { outline: 2px dashed var(--farge-tekst); outline-offset: 4px; }

/* ---------- Språkvelger (lages av main.js, ligger fast oppe til høyre) ---------- */
.lang {
  position: fixed;
  top: clamp(12px, 2vw, 38px);
  right: clamp(12px, 2vw, 38px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .3em;
  padding: .25em .9em;
  border: var(--border);
  border-radius: var(--radius-pill);
  background: var(--farge-bakgrunn);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-knapp);
  line-height: 1.25;
  transition: opacity .3s;
}
.lang button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--farge-tekst); opacity: .45;
}
.lang button[aria-pressed="true"] { opacity: 1; }
.lang.is-hidden, .back-fixed.is-hidden { opacity: 0; pointer-events: none; }
.back-fixed { transition: opacity .3s; }

/* ---------- Seksjoner (100dvh som i Figma-notatet) ---------- */
.section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(64px, 8vw, 160px);
  overflow: hidden;
}
.section-title {
  font-size: var(--fs-tittel);
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 120px);
}

/* Uskarp, rullende bakgrunnstekst bak hero + HI.
   Fart: --bg-fart i piksler per sekund. Uttoning: prosentene i mask-image. */
.top { position: relative; overflow: hidden; }
.bg-words {
  --bg-fart: 22;
  position: absolute;
  inset: -.4em 0 0 0; /* minus = øverste rekke kuttes litt i toppen */
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(90px, 13vw, 250px);
  line-height: 1.08;
  color: var(--farge-tekst);
  opacity: .1;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 97%);
}
.bg-row { white-space: nowrap; margin-left: -.06em; }
.bg-track {
  display: inline-flex;
  filter: blur(6.5px);
  will-change: transform;
  animation: bg-scroll var(--varighet, 200s) linear infinite;
}
.bg-track span { padding-right: .3em; }
.bg-row:nth-child(even) .bg-track { animation-direction: reverse; }
@keyframes bg-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bg-track { animation: none; } }

/* ---------- 1. Hero ---------- */
.hero { text-align: center; align-items: center; }
.hero h1 {
  position: relative;
  font-size: var(--fs-hero);
  max-width: 7.5em;
  margin-inline: auto;
}
.hero .pill--big { position: relative; margin-top: clamp(28px, 3.5vw, 60px); }

/* ---------- 2. Hei ---------- */
.intro .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 140px);
  align-items: center;
}
.polaroid {
  justify-self: center;
  width: min(100%, 567px);
  margin: 0;
  padding: 5% 5% 0;
  background: var(--farge-tekst);
  transform: rotate(-5.7deg);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--flate); }
.polaroid a {
  display: block;
  padding: 1.1em 0 1.4em;
  color: var(--farge-bakgrunn);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-liten);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.polaroid a:hover { text-decoration: underline; }
.intro h2 { font-size: var(--fs-hero); line-height: 1.1; }
.intro-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-ingress);
  line-height: 1.25;
  max-width: 19em;
  margin: .6em 0 0;
}
.intro-more { display: flex; align-items: center; gap: .6em; margin-top: 1.4em; }

/* ---------- 3. Slik jobber jeg ---------- */
.process { text-align: center; }
.process p.display { font-size: var(--fs-tittel); line-height: 1.25; }
.process .sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-ingress);
  margin-top: 1.5em;
}

/* ---------- 4. Utvalgte annonser (karusell) ---------- */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: clamp(20px, 2.1vw, 40px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  justify-content: safe center;
}
.carousel-track::-webkit-scrollbar { display: none; }
.ad-card {
  flex: 0 0 auto;
  scroll-snap-align: center;
  text-decoration: none;
  width: clamp(220px, 16.5vw, 318px);
}
.ad-card.wide { width: clamp(290px, 22.4vw, 431px); }
.ad-card .thumb {
  height: clamp(380px, 27.9vw, 536px);
  overflow: hidden;
  background: var(--flate);
}
.ad-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.ad-card:hover img, .ad-card:focus-visible img { transform: scale(1.04); }
.ad-card .label {
  margin-top: .6em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}
.ad-card .label b { display: block; font-size: var(--fs-brodtekst); }
.ad-card .label span { font-size: clamp(11px, .8vw, 15px); white-space: nowrap; }
.carousel-btn { position: absolute; top: 40%; z-index: 2; }
.carousel-btn.prev { left: clamp(8px, 3vw, 58px); }
.carousel-btn.next { right: clamp(8px, 3vw, 58px); }
.carousel-btn[disabled] { opacity: .25; pointer-events: none; }

/* ---------- 5. Annet arbeid ---------- */
.other-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 80px);
  align-items: center;
  border: 1px solid var(--farge-tekst);
  border-radius: 5px;
  padding: clamp(20px, 2vw, 32px);
}
.other-card img { width: 100%; aspect-ratio: 706 / 473; object-fit: cover; background: var(--flate); }
.other-card h3 { font-size: var(--fs-undertittel); }
.other-card p { font-size: var(--fs-ingress); line-height: 1.25; margin: .7em 0 1.4em; }

/* ---------- 6. Ferdigheter ---------- */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 120px);
  max-width: 1240px;
  margin-inline: auto;
}
.skill-group { display: flex; gap: clamp(18px, 3vw, 64px); align-items: flex-start; }
.vertical-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-undertittel);
  line-height: 1;
  white-space: nowrap;
  margin: 0;
}
.vertical-label.small { font-size: var(--fs-ingress); }
.tags { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.05vw, 20px); list-style: none; padding: 0; margin: 0; }
.tags li {
  background: var(--flate);
  border-radius: 6px;
  padding: .15em .9em;
  font-size: var(--fs-brodtekst);
  line-height: 2;
}

/* ---------- 7. Kontakt ---------- */
.contact { text-align: center; }
.contact h2 { font-size: var(--fs-hero); }
.contact .mail {
  display: inline-block;
  margin-top: .4em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-undertittel);
  text-decoration: none;
  word-break: break-all;
}
.contact .mail:hover { text-decoration: underline; }
.btn-row { display: flex; gap: clamp(14px, 1.6vw, 30px); justify-content: center; flex-wrap: wrap; margin-top: clamp(28px, 3vw, 56px); }

/* =========================================================
   Case-sider
   ========================================================= */
.back-fixed {
  position: fixed;
  left: clamp(12px, 2.8vw, 53px);
  bottom: clamp(12px, 2.8vw, 53px);
  z-index: 10;
  background: var(--farge-bakgrunn);
}
.case-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 100px);
  align-items: start;
  padding-top: clamp(48px, 6.25vw, 120px);
}
.case-head h1 { font-size: var(--fs-tittel); }
.case-head .subtitle { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-undertittel); margin: .3em 0 0; }
.meta { margin-top: .6em; font-style: italic; }
.meta .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--farge-tekst); vertical-align: middle; margin: 0 .6em; }
.client-logo { max-width: clamp(160px, 15vw, 290px); }
.phone-head { width: clamp(200px, 22vw, 434px); }

.box {
  border: 1px solid var(--farge-tekst);
  border-radius: 5px;
  padding: clamp(24px, 3.4vw, 66px);
}
.box p { margin: 0; }
.box p + p { margin-top: 1.4em; }
.box-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(20px, 3vw, 60px); }

/* Hver blokk = én fullskjerm, som hjelpelinjene i Figma (1920 × 1080) */
.case-block { margin-top: clamp(64px, 10vw, 140px); }
.screen-first .case-block { margin-top: clamp(40px, 6vw, 120px); }
@media (min-width: 901px) {
  .case-block, .screen, .next-project {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding-block: clamp(48px, 5vw, 100px);
    align-content: center;
  }
  .case-block:not(.two-col):not(.box-row):not(.marquee), .screen:not(.two-col), .next-project {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .screen-first { align-content: center; }
  .screen-first .case-head { padding-top: 0; }
  .screen-first .case-block { min-height: 0; padding: 0; margin-top: clamp(40px, 5vw, 100px); }
  .next-project { justify-items: center; }
}
.case-block h2 { font-size: var(--fs-tittel); margin-bottom: .5em; }
.case-block h2.center { text-align: center; }
.statement {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-tittel);
  line-height: 1.2;
  text-align: center;
  max-width: 15em;
  margin-inline: auto;
}
.statement-wrap { position: relative; }
.statement-wrap > img { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(100%, 1400px); opacity: 1; pointer-events: none; }
.box .statement { font-size: var(--fs-undertittel); text-align: left; }

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 110px);
  align-items: center;
}
.two-col.top { align-items: start; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 40px); align-items: end; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 4.4vw, 84px); }
.stats.stack { grid-template-columns: 1fr; width: min(100%, 504px); justify-self: end; }
.stat {
  border: 1px solid var(--farge-tekst);
  border-radius: 5px;
  padding: clamp(28px, 2.7vw, 52px) clamp(28px, 4vw, 76px);
  text-align: center;
}
.stat .label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-brodtekst); margin: 0; }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-tittel); line-height: 1.15; margin: .1em 0 .15em; }
.stat .desc { font-size: var(--fs-liten); margin: 0 auto; max-width: 17em; }


/* Rullende annonserader (Coca-Cola) */
.marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  display: grid;
  gap: 22px;
  overflow: hidden;
}
.marquee-row { overflow: hidden; }
.marquee-track {
  display: flex;
  gap: 25px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee-row.reverse .marquee-track { animation-direction: reverse; }
.marquee-row:hover .marquee-track { animation-play-state: paused; }
.marquee-track img {
  height: clamp(220px, 23vw, 445px);
  width: auto;
  flex: 0 0 auto;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 12.5px)); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee-row { overflow-x: auto; }
}

/* Bilder. Bildene er eksportert med mobilramme fra Figma, så de vises som de er. */
.media { margin: 0; position: relative; }
.media img { width: 100%; height: auto; }
.media .ph {
  display: none;
  place-items: center;
  min-height: 220px;
  padding: 1em;
  background: var(--flate);
  border-radius: 12px;
  font-size: var(--fs-liten);
  text-align: center;
  opacity: .6;
}
.media img.missing { display: none; }
.media img.missing + .ph { display: grid; }
img.missing { visibility: hidden; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(20px, 3vw, 60px); }
.steps figure { margin: 0; }

.img-grid { display: grid; gap: clamp(12px, 2vw, 36px); flex: 1; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.img-grid.squares { grid-template-columns: repeat(auto-fill, minmax(min(46%, 160px), 1fr)); gap: 12px; }

.quote { position: relative; margin-top: 2.5em; }
.quote::before, .quote::after {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-tittel);
  line-height: 1;
  position: absolute;
  background: var(--farge-bakgrunn);
  padding: 0 .15em;
}
.quote::before { content: "“"; top: -.45em; left: .6em; }
.quote::after { content: "”"; bottom: -.75em; right: .6em; }

.numbered { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 40px); }
.numbered .n { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-tittel); line-height: 1; margin: 0; }
.numbered h3 { font-size: var(--fs-ingress); margin-bottom: .4em; }

/* Før/etter øverst på Cavai branding: to skråstilte bilder som overlapper, som i skissen */
.before-after { position: relative; padding-bottom: 40%; }
.ba { position: absolute; width: 78%; margin: 0; }
.ba img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.ba figcaption { margin-top: .4em; font-style: italic; font-size: var(--fs-liten); }
.ba--for { left: 0; top: 0; transform: rotate(3.1deg); }
.ba--etter { right: 0; top: 34%; transform: rotate(-3.18deg); }

.next-project { text-align: center; padding-block: clamp(80px, 10vw, 200px) clamp(80px, 8vw, 140px); }
.next-project a.next {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.15;
}
.next-project a.next small { display: block; font-size: var(--fs-undertittel); }
.next-project a.next span { font-size: var(--fs-tittel); }
.next-project a.next:hover span { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.next-project .pill { margin-top: clamp(28px, 2.5vw, 48px); }

/* Pop-up: Hva er annonseboble */
dialog.popup {
  max-width: min(645px, 92vw);
  border: 1px solid var(--farge-tekst);
  border-radius: 5px;
  background: var(--farge-bakgrunn);
  color: var(--farge-tekst);
  padding: clamp(28px, 3.6vw, 70px);
}
dialog.popup::backdrop { background: rgba(0,0,0,.6); }
dialog.popup h3 { font-size: var(--fs-ingress); margin-bottom: .6em; }
dialog.popup .close { position: absolute; top: 14px; right: 14px; }

/* ---------- Om meg / CV ---------- */
.cv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 120px); }
.cv-col { display: flex; gap: clamp(20px, 3vw, 60px); align-items: flex-start; }
.cv-col h3 { font-family: var(--font-body); font-weight: 700; font-size: inherit; line-height: 1.45; }
.cv-col p { margin: 0 0 1.2em; }
.cv-col article + article { margin-top: 2em; }

/* =========================================================
   Responsivt
   ========================================================= */
@media (max-width: 900px) {
  .intro .wrap, .other-card, .skills-grid, .two-col, .cv, .case-head { grid-template-columns: 1fr; }
  .polaroid { width: min(78%, 420px); }
  .other-card .pill { width: 100%; }
  .case-head .client-logo, .case-head .phone-head { justify-self: start; }
  .carousel-track { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .skill-group, .cv-col { flex-direction: column; }
  .vertical-label { writing-mode: horizontal-tb; transform: none; }
}

/* ---------- Justeringer etter kommentarer ---------- */
/* Første skjerm med mobil: tittel og boks til venstre, mobilen til høyre over begge */
.screen-first:has(.phone-head) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title phone" "box phone";
  column-gap: clamp(32px, 5vw, 100px);
  align-items: start;
}
.screen-first:has(.phone-head) .case-head { display: contents; }
.screen-first:has(.phone-head) .case-head > div { grid-area: title; }
.screen-first:has(.phone-head) .phone-head { grid-area: phone; align-self: center; }
.screen-first:has(.phone-head) .case-block { grid-area: box; max-width: 820px; }

.bubble-foot { display: flex; justify-content: flex-end; margin-top: clamp(16px, 2vw, 32px); }
.btn-end { margin-top: 5em; text-align: right; }

/* Bilder i par har samme høyde */
.pair { align-items: end; }
.pair .media { display: flex; justify-content: center; }
.pair .media img { height: clamp(280px, 30vw, 560px); width: auto; max-width: 100%; object-fit: contain; }

/* Bildegrid med fast antall kolonner, så radene fyller samme bredde */
.img-grid[style*="--cols"] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }

/* Teksten under en overskrift blir like bred som overskriften */
.fit { width: fit-content; max-width: 100%; margin: 0 auto 2.5em; }
.fit h2 { margin-bottom: .4em; }
.fit-text { width: 0; min-width: 100%; margin: 0; text-align: center; }

@media (max-width: 900px) {
  .screen-first:has(.phone-head) { grid-template-columns: 1fr; grid-template-areas: "title" "phone" "box"; }
  .bubble-foot { justify-content: flex-start; }
  .img-grid[style*="--cols"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* =========================================================
   Mål hentet direkte fra Figma-skissen (1920px bred).
   calc(N * var(--u)) = N piksler i skissen, skalert ned på mindre skjermer.
   ========================================================= */

/* Bokser */
.box {
  border-radius: 10px;
  padding: max(24px, calc(59 * var(--u))) max(22px, calc(67 * var(--u)));
  line-height: 1.4;
}
.box p > strong:first-child { font-family: var(--font-display); font-weight: 700; line-height: 1.25; }
.box-row { gap: max(20px, calc(118 * var(--u))); }
strong.black { font-weight: 900; }

/* Statistikk */
.stats { gap: max(20px, calc(84 * var(--u))); align-items: start; }
.stat {
  border-radius: 10px;
  min-height: max(220px, calc(384 * var(--u)));
  padding: max(28px, calc(45 * var(--u))) max(20px, calc(60 * var(--u)));
}
.stat .label { font-size: var(--fs-brodtekst); line-height: 1.1; }
.stat .num { font-size: var(--fs-tittel); line-height: 1.25; margin: .1em 0 0; }
.stat .desc { font-size: var(--fs-brodtekst); line-height: 1.25; max-width: none; margin-top: 1.1em; }
.stats.stack { width: min(100%, max(280px, calc(504 * var(--u)))); gap: max(20px, calc(74 * var(--u))); }
.stats.stack .stat { min-height: max(200px, calc(335 * var(--u))); padding-top: max(28px, calc(52 * var(--u))); }

/* Notater med pil (liten kursiv tekst) */
.note {
  font-size: var(--fs-liten);
  font-style: italic;
  text-align: center;
  margin: 0;
}
.stat-note { position: relative; }
.stat-note .arrow { position: absolute; width: calc(128 * var(--u)); max-width: none; height: auto; }
/* Specsavers: notatet under Tidsbruk-boksen, pila fra boksens hjørne bort til teksten */
.note--side { margin: calc(71 * var(--u)) 0 0 72.8%; width: 15.8%; }
.note--side .arrow { left: calc(100% + 25 * var(--u)); top: calc(-79 * var(--u)); transform: rotate(90deg); }
/* Vy: notatet under Actions-boksen, pila ned fra boksen */
.note--below { margin: calc(111 * var(--u)) 0 0 69.1%; width: 17%; }
.note--below .arrow { left: calc(125 * var(--u)); top: calc(-138 * var(--u)); transform: scaleX(-1); }

/* Coca-Cola: annonseboble-mobil med pil fra ikonet ned til notatet */
.bubble-figure { position: relative; width: 100%; max-width: max(260px, calc(420 * var(--u))); justify-self: center; }
.bubble-figure .arrow { position: absolute; left: 103%; top: 80%; width: 30.5%; max-width: none; }
.bubble-figure .note { position: absolute; left: 98.8%; top: 98%; width: 68%; }

/* Knapper */
.pill--small {
  font-size: calc(var(--fs-knapp) * .84);
  border-width: 4px;
  min-width: min(100%, calc(500 * var(--u)));
  min-height: max(48px, calc(66 * var(--u)));
}
.pill--big { min-width: min(100%, max(260px, calc(500 * var(--u)))); min-height: max(64px, calc(100 * var(--u))); }

/* Specsavers: punktliste og boks med lett og fet skrift */
ul.list { margin: 1.25em 0 0; padding-left: 1.5em; }
ul.list li + li { margin-top: 1.25em; }
.box--quote-stat { display: grid; place-items: center; min-height: max(220px, calc(389 * var(--u))); }
.box--quote-stat p {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-undertittel);
  line-height: 1.25;
  text-align: center;
}
.box--quote-stat b { font-weight: 700; }

/* Nummererte avsnitt og sitat */
.numbered { gap: max(16px, calc(43 * var(--u))); }
.numbered .n { font-size: var(--fs-tittel); line-height: 1; }
.numbered h3 { font-family: var(--font-body); font-weight: 900; font-size: inherit; line-height: 1.25; margin: 0; }
.numbered p { margin-top: 0; }
.quote { margin-top: max(32px, calc(76 * var(--u))); margin-left: calc(-56 * var(--u)); padding: max(28px, calc(59 * var(--u))) max(24px, calc(57 * var(--u))); }
.quote::before, .quote::after { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-tittel); content: "“"; }
.quote::before { top: -.4em; left: .45em; }
.quote::after { bottom: -.4em; right: .45em; transform: rotate(180deg); }
.pair { gap: max(16px, calc(62 * var(--u))); }

/* Utsagn i lett skrift (Vy) */
.statement--light { font-weight: 400; line-height: 1.5; max-width: 14.2em; }
.vy-green { font-weight: 900; color: #00947a; }

/* Steg-bilder med tekst under */
.steps { gap: max(16px, calc(var(--gap, 40) * var(--u))); }
.step-label { font-family: var(--font-body); font-weight: 300; font-size: var(--fs-brodtekst); text-align: center; margin-top: max(12px, calc(43 * var(--u))); }
.vy-steps img { border-radius: max(8px, calc(15 * var(--u))); }
.down-arrow { display: block; width: max(14px, calc(22 * var(--u))); height: auto; margin: max(32px, calc(126 * var(--u))) auto max(40px, calc(196 * var(--u))); color: var(--farge-tekst); }

/* Vy: buet pil fra «Hva gjorde jeg?» over til «Hvorfor?» */
.vy-why-right { padding-top: calc(203 * var(--u)); }
.curve-arrow { display: block; width: calc(499 * var(--u)); height: auto; margin: calc(80 * var(--u) - 15px) 0 0 calc(398 * var(--u)); color: var(--farge-tekst); overflow: visible; }

/* Neste prosjekt */
.next-project a.next small { font-size: calc(var(--fs-undertittel) * 1.22); }

/* Forsiden */
.intro h2 { font-size: calc(var(--fs-hero) * 1.133); }
.polaroid a { font-size: calc(var(--fs-liten) * 1.25); }
.process .sub { font-size: var(--fs-brodtekst); }
.carousel-track { gap: max(16px, calc(40 * var(--u))); }
.ad-card { width: max(200px, calc(318 * var(--u))); }
.ad-card:nth-child(1) { width: max(196px, calc(312 * var(--u))); }
.ad-card:nth-child(4) { width: max(190px, calc(302 * var(--u))); }
.ad-card.wide { width: max(270px, calc(431 * var(--u))); }
.ad-card .thumb { height: max(340px, calc(536 * var(--u))); }
.ad-card .label { margin-top: max(6px, calc(7 * var(--u))); }
.ad-card .label b { font-size: calc(var(--fs-liten) * 1.375); }
.ad-card .label span { font-size: var(--fs-liten); }
.other-card { border-radius: 5px; padding: max(16px, calc(31 * var(--u))) max(16px, calc(35 * var(--u))); gap: max(24px, calc(137 * var(--u))); }
.other-card p { font-size: var(--fs-brodtekst); }
.vertical-label { font-size: var(--fs-ingress); }
.tags li { font-size: calc(var(--fs-liten) * 1.25); }
.contact h2 { font-size: var(--fs-tittel); }
.contact .mail { font-size: calc(var(--fs-undertittel) * 1.22); }

@media (max-width: 900px) {
  .stat-note { margin: 1.5em 0 0; width: auto; }
  .stat-note .arrow, .bubble-figure .arrow, .curve-arrow { display: none; }
  .bubble-figure .note { position: static; width: auto; margin-top: 1em; }
  .quote { margin-left: 0; }
  .vy-why-right { padding-top: 0; }
}

/* Om meg: mindre tekst, så alt får plass på én skjerm */
.cv { font-size: clamp(14px, calc(18 * var(--u) + 2px), 20px); line-height: 1.4; gap: max(32px, calc(110 * var(--u))); }
.cv-col p { margin-bottom: .8em; }
.cv-col article + article { margin-top: 1.2em; }
.cv-col .vertical-label { font-size: var(--fs-ingress); }
.cv .pill { font-size: var(--fs-knapp); }
.cv-section { min-height: 100vh; min-height: 100dvh; padding-block: max(32px, calc(60 * var(--u))); }

/* HEI: pilknappen står inne i teksten, som en sirkel midtstilt på store bokstaver */
.intro-more { display: block; }
.intro-more .round-btn {
  display: inline-grid;
  place-items: center;
  font-size: inherit;
  width: .9em;
  height: .9em;
  padding: 0;
  line-height: 0;
  vertical-align: .07em;
  margin-left: .2em;
  border-width: 2px;
}
.intro-more .round-btn svg { width: 58%; height: 58%; display: block; }
.intro-more { max-width: 21em; }
.nowrap { white-space: nowrap; }

/* Undertekst på annonsekortene: skalerer med kortet så den alltid får plass på én linje */
.ad-card .label b { font-size: max(13px, calc(22 * var(--u))); }
.ad-card .label span { font-size: max(10px, calc(16 * var(--u))); white-space: nowrap; letter-spacing: -.01em; }

/* Annonsekortene: merkenavn og kampanjenavn tett sammen */
.ad-card .label { line-height: 1.1; }
.ad-card .label b { line-height: 1.05; margin-bottom: .1em; }
.ad-card .label span { display: block; line-height: 1.1; }
.ad-card .label { margin-top: max(12px, calc(20 * var(--u))); }

/* Cavai branding: alle etikettene har samme bredde, så bilderadene starter og slutter likt */
.case-block .skill-group .vertical-label.small { width: 2.3em; flex: none; }

/* Neste prosjekt: ingen understrek, liten etikett over prosjektnavnet */
.next-project a.next:hover span, .next-project a.next:focus-visible span { text-decoration: none; }
.next-project a.next { transition: opacity .2s; }
.next-project a.next:hover { opacity: .75; }
.next-project a.next small { font-size: var(--fs-brodtekst); font-weight: 400; margin-bottom: .3em; }
/* Etikettene ligger inntil bildene (høyre kant) og leses høyrestilt, som i skissen */
.case-block .skill-group .vertical-label.small { display: grid; align-content: end; text-align: end; }

/* Neste prosjekt: etiketten står for seg selv, bare prosjektnavnet + sirkelpil er lenken */
.next-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-brodtekst); margin: 0 0 .4em; }
.next-project a.next { display: inline-flex; align-items: center; gap: .3em; font-size: var(--fs-tittel); opacity: 1; }
.next-project a.next:hover { opacity: 1; }
.next-project a.next .next-name { font-size: inherit; }
.next-circle {
  display: inline-grid;
  place-items: center;
  width: .75em;
  height: .75em;
  border: 3px solid currentColor;
  border-radius: 50%;
  transition: background .2s, color .2s;
}
.next-circle svg { width: 55%; height: 55%; }
.next-project a.next:hover .next-circle,
.next-project a.next:focus-visible .next-circle { background: var(--farge-tekst); color: var(--farge-bakgrunn); }
/* Sirkelen rundt pila vises først når man holder musen over */
.next-circle { border-color: transparent; transition: border-color .2s, background .2s, color .2s; }
.next-project a.next:hover .next-circle,
.next-project a.next:focus-visible .next-circle { border-color: var(--farge-tekst); background: transparent; color: var(--farge-tekst); }
.next-circle svg { width: 70%; height: 70%; }
/* Neste prosjekt: ingen sirkel, pila glir litt mot høyre når man holder musen over */
.next-circle,
.next-project a.next:hover .next-circle,
.next-project a.next:focus-visible .next-circle { border-color: transparent; background: transparent; color: var(--farge-tekst); transition: transform .25s ease; }
.next-project a.next:hover .next-circle,
.next-project a.next:focus-visible .next-circle { transform: translateX(.18em); }
@media (prefers-reduced-motion: reduce) { .next-project a.next:hover .next-circle { transform: none; } }

/* Neste prosjekt (som originalen): prosjektnavnet med pil, understrek ved hover kun på navnet */
.next-project a.next { display: inline-block; opacity: 1; }
.next-project a.next .next-name { font-size: var(--fs-tittel); text-decoration: none; text-underline-offset: 8px; text-decoration-thickness: 4px; }
.next-project a.next:hover .next-name,
.next-project a.next:focus-visible .next-name { text-decoration: underline; }

/* Specsavers: notatet henger under Tidsbruk-boksen (som i skissen), ikke under hele raden */
.stats .stat { position: relative; }
.stat .stat-note.note--side { position: absolute; top: calc(100% + 71 * var(--u)); left: calc(47 * var(--u)); width: calc(266 * var(--u)); margin: 0; }

/* Større anførselstegn rundt sitatboksen */
.quote::before, .quote::after { font-size: calc(var(--fs-tittel) * 1.5); line-height: .9; height: .3em; overflow: visible; }
.quote::before { top: -.15em; }
.quote::after { bottom: -.15em; }

/* Specsavers 2for1: to bilder over hverandre */
.img-stack { display: grid; gap: calc(45 * var(--u)); width: min(100%, max(280px, calc(589 * var(--u)))); justify-self: end; align-self: center; }
.img-stack img { width: 100%; height: auto; border-radius: 10px; }

@media (max-width: 900px) {
  .stat .stat-note.note--side { top: calc(100% + 1.2em); left: 0; width: 100%; }
  .stats .stat:has(.note--side) { margin-bottom: 6em; }
}

/* Coca-Cola: håndtegnet sirkel, strek og piler som tegnes inn når teksten kommer til syne */
.doodle .dd { position: relative; display: inline-block; }
.doodle .dd img { position: absolute; max-width: none; height: auto; pointer-events: none; opacity: 0; transition: opacity .9s ease, clip-path 1.1s cubic-bezier(.6,0,.3,1); }
.doodle .dd--sirkel img { width: 1.88em; left: -.2em; top: -.16em; clip-path: circle(0% at 30% 10%); }
.doodle .dd--strek img  { width: 1.02em; left: -.12em; top: 1.07em; clip-path: inset(0 100% 0 0); }
.doodle .dd--piler img  { width: .82em; left: calc(100% + .25em); top: .25em; clip-path: inset(0 0 100% 0); }
.doodle.is-drawn .dd img { opacity: 1; }
.doodle.is-drawn .dd--sirkel img { clip-path: circle(150% at 30% 10%); }
.doodle.is-drawn .dd--strek img  { clip-path: inset(0 0 0 0); transition-delay: .25s; }
.doodle.is-drawn .dd--piler img  { clip-path: inset(0 0 0 0); transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .doodle .dd img { transition: none; } }
@media (max-width: 900px) { .doodle .dd--piler img { display: none; } }
/* Coca-Cola-teksten: faste linjeskift som i skissen på store skjermer */
.doodle { max-width: none; }
@media (max-width: 900px) { .doodle .br-d { display: none; } .doodle { max-width: 15em; } }

/* Mer luft mellom «Cavai sine interne målinger» og boksene (som i skissen) */
.case-block h2.center:has(+ .stats) { margin-bottom: max(32px, calc(110 * var(--u))); }

/* Pop-up: mørkere og mer uskarp bakgrunn */
dialog.popup::backdrop { background: rgba(53,53,53,.85); /* samme farge som --farge-bakgrunn (#353535) */ -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* =====================================================================
   LIV PÅ SIDEN
   1) Innhold glir mykt inn når du scroller dit
   2) Håndtegnede piler tegnes inn
   3) Tallene i boksene teller opp (styres fra js/main.js)
   Alt slås av for dem som har valgt «redusert bevegelse».
   ===================================================================== */
:root { --reveal-avstand: 24px; --reveal-tid: .8s; }

html.js-anim .reveal {
  opacity: 0;
  translate: 0 var(--reveal-avstand);
  transition: opacity var(--reveal-tid) ease, translate var(--reveal-tid) cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js-anim .reveal.is-in { opacity: 1; translate: 0 0; }

/* Piler som bilde: «tegnes» fra halen (oppe til venstre) mot spissen */
html.js-anim .draw .arrow { clip-path: circle(0% at 0 0); }
html.js-anim .draw.is-drawn .arrow { clip-path: circle(150% at 0 0); transition: clip-path 1.1s cubic-bezier(.6,0,.3,1) .35s; }
/* Notatteksten kommer etter pila */
html.js-anim .draw .note { opacity: 0; }
html.js-anim .draw.is-drawn .note { opacity: 1; transition: opacity .7s ease 1.1s; }
/* Piler som SVG: streken tegnes, så pilspissen */
html.js-anim svg.draw path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js-anim svg.draw.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s cubic-bezier(.6,0,.3,1) .25s; }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .reveal { opacity: 1; translate: none; transition: none; }
  html.js-anim .draw .arrow, html.js-anim .draw .note, html.js-anim svg.draw path { clip-path: none; opacity: 1; stroke-dashoffset: 0; transition: none; }
}

/* Vy: grønn bakgrunn bak skjermbildene, så de avrundede hjørnene ikke blir hvite */
.vy-steps img { background-color: #00947a; }

/* Vy: «over 20 000» fylles med grønt fra venstre når du scroller dit (ingen telling – det er et rundt tall) */
html.js-anim .statement .vy-green {
  background: linear-gradient(90deg, #00947a 50%, var(--farge-tekst) 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  transition: background-position 1.4s cubic-bezier(.6,0,.3,1) .2s;
}
html.js-anim .statement.is-on .vy-green { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) { html.js-anim .statement .vy-green { background-position: 0 0; transition: none; } }
html.js-anim .statement .vy-green { display: inline-block; white-space: nowrap; text-align: center; }

/* Innholdet i statistikk-boksene midtstilles loddrett */
.stat { display: flex; flex-direction: column; justify-content: center; }
.stat > p { margin-left: auto; margin-right: auto; }

/* Unngå at ett ord havner alene på siste linje */
p, li, h1, h2, h3 { text-wrap: pretty; }
.note, .stat .label, .stat .desc { text-wrap: balance; }

/* Vy: den buede pila henger nå fast i avsnittet den peker på, så spissen alltid treffer midt på første linje
   uansett tekststørrelse og linjeskift */
.vy-arrow-target { position: relative; }
.vy-arrow-target .curve-arrow { --aw: calc(340 * var(--u)); position: absolute; margin: 0; width: var(--aw); right: calc(100% + max(10px, 18 * var(--u))); top: calc(.5lh - var(--aw) * 104 / 510); }

/* Specsavers «Videre samarbeid»: teksten starter rett under overskriften (som i skissen) i stedet for å midtstilles mot de høye bildene */
.case-block > h2 + .two-col > .numbered { align-self: start; margin-top: max(8px, calc(30 * var(--u))); }

/* Forsiden «Brief → Idé → …»: stegene lyser opp ett og ett mens du scroller,
   og en håndtegnet strek tegnes under når alle er tent */
html.js-anim .process-steps .step { opacity: .22; transition: opacity .6s ease; }
html.js-anim .process-steps .step.lit { opacity: 1; }
.process .sub-line-wrap { position: relative; display: inline-block; }
.process .sub-line { position: absolute; left: 0; top: 100%; width: 100%; height: auto; margin-top: .2em; overflow: visible; color: var(--farge-tekst); pointer-events: none; }
html.js-anim .process .sub-line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .4s ease; }
html.js-anim .process.all-lit .sub-line path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.6,0,.3,1) .1s; }
@media (prefers-reduced-motion: reduce) {
  html.js-anim .process-steps .step { opacity: 1; }
  html.js-anim .process .sub-line path { stroke-dashoffset: 0; transition: none; }
}

/* Specsavers: bildet med annonseboble + fullskjerm litt mindre */
.media img[src$="Specsavers-02.png"] { width: 80%; margin-inline: auto; }
/* Specsavers: desktop-bildet av fullskjermen litt mindre og midtstilt */
.media img[src$="Specsavers-03.jpg"] { width: 78%; margin-inline: auto; }

/* Specsavers resultat-boksen: samme bredde og høyde som statistikk-boksene ellers (504 × 384) */
.box--quote-stat { width: fit-content; min-width: min(100%, max(260px, calc(504 * var(--u)))); max-width: 100%; min-height: max(220px, calc(384 * var(--u))); padding-inline: max(24px, calc(48 * var(--u))); justify-self: end; }
.box--quote-stat p { font-size: calc(var(--fs-undertittel) * .84); }
.box--quote-stat p { white-space: nowrap; } /* linjene brytes bare der det er satt linjeskift, så boksen tilpasser seg teksten */
@media (max-width: 900px) { .box--quote-stat p { white-space: normal; } }

/* Specsavers «Bygg din brille V2»: telefonene like store som de øverst på siden,
   og midtstilt i høyden mot teksten ved siden av */
@media (min-width: 901px) {
  .two-col > .media:has(img[src$="Specsavers-04.png"]) { position: relative; align-self: stretch; }
  .media img[src$="Specsavers-04.png"] {
    position: absolute; top: 50%; left: 50%;
    width: 90%; height: auto; max-width: none;
    transform: translate(-54.5%, -50%); /* -4.5 % retter opp den tomme kanten til venstre i bildet */
  }
}

/* Forsiden «Brief → …»: seksjonen står fast mens du scroller, og stegene lyser opp i takt med scrollingen.
   --pin-lengde styrer hvor langt man må scrolle (høyere = roligere). */
.process.pin { --pin-lengde: 165vh; height: var(--pin-lengde); min-height: 0; display: block; padding-block: 0; overflow: clip; }
.process.pin > .wrap { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: center; }

/* TV2: venstre boks litt smalere, høyre litt bredere, så tekstene dekker like mange linjer */
@media (min-width: 901px) { .box-row--4-5 { grid-template-columns: 4fr 5fr; } }

/* Coca-Cola «Videre samarbeid»: bildene tettere sammen og skjøvet mot høyre */
@media (min-width: 901px) {
  .pair { grid-template-columns: auto auto; justify-content: end; gap: max(16px, calc(40 * var(--u))); }
}

/* Mer luft under alle midtstilte seksjonstitler (som «Fra pressebilde til annonse»), likt som over statistikk-boksene */
.case-block h2.center { margin-bottom: max(32px, calc(110 * var(--u))); }

/* Pilspissen tegnes til slutt, etter streken (ellers dukker den opp først midt på pila) */
html.js-anim svg.draw.is-drawn path.head { transition-duration: .35s; transition-delay: 1.45s; }

/* Cavai: «Før»-bildet (med teksten) litt høyere opp */
.ba--for { top: -6%; }

/* Vy-setningen på engelsk er lengre: litt bredere tekstfelt så den får én linje mindre */
html[lang="en"] .statement--light { max-width: 16.5em; }

/* Klikkbare annonser: den ekte annonsen i en telefonramme (iframe) i stedet for et bilde */
.ad-live iframe {
  display: block; width: 100%; aspect-ratio: 420 / 872; height: auto; border: 0;
  background: transparent; color-scheme: normal; /* holder iframen gjennomsiktig */
}
/* Coca-Cola: telefonen står på skeiva som i den opprinnelige mockupen (annonsen er fortsatt klikkbar) */
.ad-live { transform: rotate(6deg); }

/* Annonsekort på forsiden: video som spilles av fra start når man holder musen over kortet */
.ad-card .thumb { position: relative; }
.ad-card .hover-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.ad-card.is-playing .hover-video { opacity: 1; }
/* Kort med hover-video zoomer ikke inn */
.ad-card:has(.hover-video):hover img, .ad-card:has(.hover-video):focus-visible img { transform: none; }

/* Coca-Cola: telefonen med pil og tekst litt lenger til venstre */
@media (min-width: 901px) { .bubble-figure { left: calc(-70 * var(--u)); } }

/* Specsavers: to ekte annonser på skrå, som i det gamle mockup-bildet.
   Den bakerste (fullskjermen) er låst, den fremste (boblen) er klikkbar. */
.ad-pair { position: relative; width: 80%; margin-inline: auto; aspect-ratio: 1307 / 1600; }
.ad-pair iframe {
  position: absolute; width: 48%; aspect-ratio: 420 / 872; height: auto; border: 0;
  background: transparent; color-scheme: normal;
}
.ad-pair__back  { left: 29%; top: 42%;  transform: translate(-50%, -50%) rotate(-3.5deg); z-index: 1; pointer-events: none; }
.ad-pair__front { left: 64%; top: 57%;  transform: translate(-50%, -50%) rotate(5deg);    z-index: 2; }

/* Specsavers: den ekte desktop-fullskjermen (16:9) i stedet for bildet */
.ad-desktop { width: 78%; margin-inline: auto; }
.ad-desktop iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; background: transparent; color-scheme: normal; }
@media (max-width: 900px) { .ad-desktop { width: 100%; } }

/* =====================================================================
   MOBIL-JUSTERINGER (under 900 px)
   ===================================================================== */
@media (max-width: 900px) {
  /* Forsiden: seksjonene trenger ikke fylle hele skjermen på mobil (unntatt toppen og prosessen) */
  .section:not(.hero):not(.process) { min-height: 0; padding-block: 72px; }
  /* E-postadressen på én linje */
  .contact .mail { font-size: min(calc(var(--fs-undertittel) * 1.22), 6.4vw); white-space: nowrap; }
  /* Prosjektsidene: luft på toppen så tittelen ikke havner under språkknappen */
  .case-head { padding-top: 130px; }
  /* Tilbake-pila øverst til venstre, på linje med språkknappen */
  .back-fixed { top: 12px; bottom: auto; left: 12px; }
  /* Cavai: toppen i én kolonne */
  header.case-head.two-col[style] { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  /* Cavai: Før/Etter-bildene trenger mer høyde når de er fullbredde */
  .before-after { padding-bottom: 84%; margin-bottom: 24px; }
}

/* =====================================================================
   FORSIDEN PÅ MOBIL – etter mobilskissen i Figma («mobil portfolio», 375 × 667)
   calc(N * var(--m)) = N piksler i mobilskissen. Skalerer med skjermbredden,
   men vokser ikke mer enn 1,4 ganger på brede skjermer (nettbrett).
   ===================================================================== */
@media (min-width: 901px) {
  /* Pilene under annonsekortene trengs bare på mobil */
  .carousel-nav { display: none; }
}
@media (max-width: 900px) {
  :root { --m: min(calc(100vw / 375), 1.4px); }

  /* Bakgrunnsordene */
  .bg-words { font-size: calc(91 * var(--m)); line-height: 1.19; }

  /* Språkknappen øverst til høyre */
  .lang {
    top: calc(13.7 * var(--m)); right: calc(13.2 * var(--m));
    width: calc(76 * var(--m)); height: calc(26 * var(--m));
    padding: 0; justify-content: center; gap: .25em;
    font-size: calc(10 * var(--m)); border-width: calc(1.4 * var(--m));
  }

  /* 1. Toppen */
  .section.hero { padding: calc(91 * var(--m)) 0 0; }
  .hero h1 { font-size: calc(35 * var(--m)); line-height: 1.143; }
  .hero .pill--big {
    margin-top: calc(14.6 * var(--m));
    width: calc(134 * var(--m)); height: calc(32 * var(--m));
    min-width: 0; min-height: 0; padding: 0; gap: .35em;
    font-size: calc(10.2 * var(--m)); border-width: calc(1.4 * var(--m));
  }

  /* 2. Hei */
  #hei.section { min-height: 100vh; min-height: 100dvh; padding: calc(39.4 * var(--m)) 0 0; }
  #hei .wrap { display: block; width: auto; margin: 0; }
  #hei .polaroid {
    width: calc(196.6 * var(--m));
    margin: 0 auto;
    position: relative; left: calc(4.7 * var(--m));
    padding: 5% 5% 0;
    transform: rotate(5.5deg);
  }
  #hei .polaroid a { font-size: calc(7 * var(--m)); padding: calc(11 * var(--m)) 0 calc(13 * var(--m)); }
  #hei .wrap > div { width: calc(269 * var(--m)); margin: calc(66.9 * var(--m)) auto 0; }
  #hei h2 { font-size: calc(57 * var(--m)); line-height: 1.1; }
  #hei .intro-text { font-size: calc(13.8 * var(--m)); line-height: 1.27; max-width: none; margin: calc(10.6 * var(--m)) 0 0; }
  #hei .intro-text.intro-more { margin-top: calc(17.8 * var(--m)); }
  #hei .intro-more .round-btn {
    width: calc(19.7 * var(--m)); height: calc(19.7 * var(--m));
    border-width: calc(1.4 * var(--m));
    margin-left: calc(8.8 * var(--m));
    vertical-align: middle; position: relative; top: calc(1 * var(--m));
  }

  /* 3. Prosessen (låses ikke på mobil – stegene lyser opp mens man scroller forbi) */
  /* Prosessen står midt mellom Hei-teksten og «Selected ad designs».
     --hei-luft = tomrommet nederst i Hei-skjermen (måles av main.js, varierer med skjermhøyden) */
  .process.section { min-height: 0; display: block; padding: calc(20 * var(--m)) 0 0; }
  .process .wrap { width: auto; }
  .process p.display { font-size: calc(19 * var(--m)); line-height: 1.27; }
  .process .sub { font-size: calc(10.3 * var(--m)); font-weight: 400; line-height: 1.45; margin-top: calc(27.5 * var(--m)); margin-bottom: 0; }

  /* Seksjonstitlene */
  .section-title { font-size: calc(19 * var(--m)); line-height: 1.15; }

  /* 4. Utvalgte annonser */
  #arbeid.section { padding: calc(var(--hei-luft, 77px) + 33 * var(--m)) 0 0; }
  #arbeid .section-title { margin-bottom: calc(26.5 * var(--m)); }
  #arbeid .carousel-track {
    gap: calc(19.2 * var(--m));
    padding-inline: calc(45 * var(--m));
    scroll-padding-inline: calc(45 * var(--m));
    justify-content: flex-start;
  }
  /* Kortene er 20 % større enn i skissen */
  #arbeid .ad-card { width: calc(203.9 * var(--m)); scroll-snap-align: start; }
  #arbeid .ad-card:nth-child(1) { width: calc(200 * var(--m)); }
  #arbeid .ad-card:nth-child(4) { width: calc(193.7 * var(--m)); }
  #arbeid .ad-card.wide { width: calc(276.4 * var(--m)); }
  #arbeid .ad-card .thumb { height: calc(330.2 * var(--m)); }
  #arbeid .ad-card .label { margin: calc(7.3 * var(--m)) 0 0; }
  /* Teksten under kortene: større enn i skissen (×1,45), samme forhold mellom linjene */
  /* Teksten under kortene: --etikett regnes ut av main.js, så «EPIC SUMMER EXPERIENCES» går kant til kant
     med bildet over. Alle kortene bruker samme størrelse, og merkenavnet er 1,45 ganger større. */
  #arbeid .ad-card .label b { font-size: calc(var(--etikett, calc(8.8 * var(--m))) * 1.45); line-height: 1.15; margin-bottom: calc(1.2 * var(--m)); }
  #arbeid .ad-card .label span { font-size: var(--etikett, calc(8.8 * var(--m))); line-height: 1.2; letter-spacing: 0; }
  .carousel-nav { display: flex; justify-content: center; gap: calc(9 * var(--m)); margin-top: calc(24 * var(--m)); }
  .carousel-nav .carousel-btn {
    position: relative; top: auto; left: auto; right: auto;
    width: calc(28 * var(--m)); height: calc(28 * var(--m)); padding: 0;
    border-width: calc(1.4 * var(--m)); line-height: 0;
  }
  .carousel-nav .carousel-btn svg { width: 62%; height: 62%; display: block; }
  /* Større trykkflate enn sirkelen viser */
  .carousel-nav .carousel-btn::after { content: ""; position: absolute; inset: -12px -6px; }

  /* 5. Annet arbeid */
  #annet.section { padding: calc(110 * var(--m)) 0 0; }
  #annet .wrap { width: calc(301 * var(--m)); }
  #annet .section-title { margin-bottom: calc(36.3 * var(--m)); }
  #annet .other-card {
    display: block;
    padding: calc(18.6 * var(--m)) calc(20 * var(--m)) calc(23 * var(--m));
    border-radius: calc(3 * var(--m));
  }
  #annet .other-card h3 { font-size: calc(15.4 * var(--m)); line-height: 1.15; margin-top: calc(24.9 * var(--m)); }
  #annet .other-card p { font-size: calc(10.5 * var(--m)); line-height: 1.257; margin: calc(8.45 * var(--m)) 0 0; }
  #annet .other-card .pill {
    width: calc(159.5 * var(--m)); height: calc(25.8 * var(--m));
    min-width: 0; min-height: 0; padding: 0;
    margin-top: calc(14.8 * var(--m));
    font-size: calc(10 * var(--m)); border-width: calc(1.4 * var(--m));
  }

  /* 6. Ferdigheter: Hard over Soft, loddrett etikett til venstre for hver gruppe */
  #ferdigheter.section { padding: calc(100 * var(--m)) 0 calc(80 * var(--m)); }
  #ferdigheter .wrap { width: auto; margin: 0; }
  #ferdigheter .section-title { margin-bottom: calc(46 * var(--m)); }
  #ferdigheter .skills-grid {
    display: flex; flex-direction: column; gap: calc(54 * var(--m));
    width: calc(270 * var(--m)); max-width: calc(100% - 32px); margin-inline: auto; padding: 0;
  }
  #ferdigheter .skill-group, #ferdigheter .skill-group + .skill-group { flex-direction: row; gap: calc(22 * var(--m)); align-items: flex-start; }
  #ferdigheter .vertical-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(13 * var(--m)); line-height: 1; flex: none; width: 1em; }
  #ferdigheter .tags, #ferdigheter .skill-group + .skill-group .tags { flex: 1 1 auto; width: auto; min-width: 0; gap: calc(10 * var(--m)) calc(9.5 * var(--m)); }
  #ferdigheter .tags li {
    font-size: calc(9.2 * var(--m)); line-height: 1.2;
    padding: calc(5 * var(--m)) calc(7.2 * var(--m));
    border-radius: calc(1.5 * var(--m));
  }

  /* 7. Kontakt */
  #kontakt.section { padding: calc(48.8 * var(--m)) 0 calc(64 * var(--m)); }
  #kontakt h2 { font-size: calc(19.2 * var(--m)); line-height: 1.15; }
  #kontakt .mail { font-size: calc(10.3 * var(--m)); line-height: 1.25; margin-top: calc(6.5 * var(--m)); white-space: nowrap; }
  #kontakt .btn-row { margin-top: calc(21 * var(--m)); gap: calc(9.3 * var(--m)); }
  #kontakt .pill {
    height: calc(19.2 * var(--m)); min-width: 0; min-height: 0;
    padding: 0 calc(21 * var(--m));
    font-size: calc(6.8 * var(--m)); border-width: calc(1.4 * var(--m));
  }
}

/* =====================================================================
   PROSJEKTSIDENE PÅ MOBIL
   ===================================================================== */
@media (max-width: 900px) {
  /* Specsavers: logoen skjules, mobilene blir litt større i stedet */
  .case-head .client-logo:has(img[src$="specsavers-logo.png"]) { display: none; }
  .ad-pair { width: 100%; }

  /* «67–70 %»-boksen: mindre og midtstilt */
  .box--quote-stat { min-height: 150px; padding: 28px 20px; margin-block: 56px; }
  .box--quote-stat p { font-size: calc(var(--fs-undertittel) * .7); }

  /* Cavai sine interne målinger: samme bredde som boksen over, midtstilt og lavere */
  .stats { gap: 20px; }
  .stats .stat { min-height: 150px; padding: 22px 18px; }

  /* Videre samarbeid nr. 2 (2for1): tekst øverst, så de to bildene, så sitatboksen – alt midtstilt.
     Tallet «2.» står fortsatt til venstre for overskriften. */
  .case-block:has(.quote) { margin-top: 120px; }
  .two-col:has(.quote) { grid-template-columns: auto minmax(0, 1fr); column-gap: max(16px, calc(43 * var(--u))); row-gap: 0; align-items: start; }
  .two-col:has(.quote) > .numbered, .two-col:has(.quote) > .numbered > div { display: contents; }
  .two-col:has(.quote) > .numbered > .n { grid-column: 1; grid-row: 1; }
  .two-col:has(.quote) > .numbered > div > * { grid-column: 2; }
  .two-col:has(.quote) > .img-stack { grid-column: 1 / -1; order: 1; margin-top: 32px; }
  .two-col:has(.quote) > .numbered > div > .quote { grid-column: 1 / -1; order: 2; margin-top: 56px; }
  .img-stack { justify-self: center; width: var(--boks-bredde); margin-inline: auto; }

  /* «Hva er Cavai annonseboble?»-knappen midtstilt */
  .btn-end { text-align: center; }
  .bubble-foot { justify-content: center; }

  /* Like mye luft over og under «Neste prosjekt» + tilbake-knappen på alle prosjektsidene */
  .next-project { padding-block: 160px; }

  /* Alle boksene på prosjektsidene er like brede og midtstilt (endre bredden her) */
  :root { --boks-bredde: 86%; }
  .box, .stats, .stats.stack { width: var(--boks-bredde); max-width: none; margin-inline: auto; justify-self: center; }
  .box-row { justify-items: center; }
  .screen-first:has(.phone-head) .case-block { max-width: none; }

  /* Mer luft over og under «Cavai sine interne målinger» (mer over enn under) */
  .case-block:has(> .stats) { margin-top: 120px; }
  .case-block h2.center:has(+ .stats) { margin-bottom: 48px; }

  /* Mer luft over og under den blå desktop-fullskjermen (Specsavers) */
  .case-block:has(> .ad-desktop) { margin-block: 110px; }
  .btn-end { margin-bottom: 0; }
}

/* =====================================================================
   HELE MOBILVERSJONEN – FASTE TEKSTSTØRRELSER
   Seks størrelser brukes overalt på mobil (forsiden og alle prosjektsidene).
   Endre tallene her, så følger alt med.
   (Tallene er piksler på en 375 px bred skjerm og skalerer med bredden.)
   ===================================================================== */
@media (max-width: 900px) {
  :root {
    --mob-1: 56;   /* HEI, */
    --mob-2: 35;   /* CREATIVE PORTFOLIO, prosjektnavn, store utsagn, tall i statistikk, neste prosjekt */
    --mob-3: 19;   /* Seksjonstitler og overskrifter, undertittel på prosjekt, prosess-stegene, Ta kontakt!, merkenavn på kortene */
    --mob-4: 15;   /* Brødtekst, introteksten, CAVAI BRANDING, loddrette etiketter, statistikk-etiketter, «Neste prosjekt» */
    --mob-5: 12;   /* Knapper, e-post, notater og bildetekster, «Med kundekontakt…», NO / EN */
    --mob-6: 9.5;  /* Tagger, polaroid-teksten, LinkedIn / Last ned CV */
  }
  /* 1 */ #hei h2 { font-size: calc(var(--mob-1) * var(--m)); }
  /* 2 */ .hero h1 { font-size: calc(var(--mob-2) * var(--m)); }
  /* 3 */ .section-title, .process p.display, #kontakt h2 { font-size: calc(var(--mob-3) * var(--m)); }
          #arbeid .ad-card .label b { font-size: calc(var(--mob-3) * var(--m)); }
  /* 4 */ #hei .intro-text, #annet .other-card h3, #ferdigheter .vertical-label { font-size: calc(var(--mob-4) * var(--m)); }
          #hei .wrap > div { width: calc(287 * var(--m)); }
  /* 4 */ #annet .other-card p { font-size: calc(var(--mob-4) * var(--m)); }
  /* 5 */ .process .sub, .hero .pill--big, #annet .other-card .pill, #kontakt .mail, .lang { font-size: calc(var(--mob-5) * var(--m)); }
          #annet .other-card p { line-height: 1.3; }
  /* 6 */ #ferdigheter .tags li, #hei .polaroid a, #kontakt .pill { font-size: calc(var(--mob-6) * var(--m)); }
          #ferdigheter .tags li { padding: calc(5 * var(--m)) calc(7.2 * var(--m)); }
          #kontakt .pill { height: calc(24 * var(--m)); padding: 0 calc(18 * var(--m)); }
          #hei .polaroid a { padding: calc(9 * var(--m)) 0 calc(11 * var(--m)); }
  /* Undertittelen på annonsekortene («EPIC SUMMER EXPERIENCES») tilpasses kortbredden av main.js,
     og blir da omtrent like stor som størrelse 5. */

  /* ---------- Prosjektsidene og Om meg ---------- */
  /* Grunnstørrelsene som resten av CSS-en bygger på, settes til de samme seks trinnene */
  :root {
    --fs-hero:        calc(var(--mob-1) * var(--m));
    --fs-tittel:      calc(var(--mob-2) * var(--m));
    --fs-undertittel: calc(var(--mob-3) * var(--m));
    --fs-ingress:     calc(var(--mob-4) * var(--m));
    --fs-brodtekst:   calc(var(--mob-4) * var(--m));
    --fs-knapp:       calc(var(--mob-5) * var(--m));
    --fs-liten:       calc(var(--mob-5) * var(--m));
  }
  /* 3 */ .case-block h2, .case-head .subtitle, .numbered .n { font-size: calc(var(--mob-3) * var(--m)); }
  /* 4 */ .stat .label, .box--quote-stat p, .next-label, .next-project a.next small,
          .vertical-label, .vertical-label.small, .cv-col .vertical-label, .cv, .box .statement,
          dialog.popup h3 { font-size: calc(var(--mob-4) * var(--m)); }
  /* 5 */ .stat .desc, .note, .ba figcaption, .step-label, .pill--small, .cv .pill, .next-project .pill { font-size: calc(var(--mob-5) * var(--m)); }
}

/* Specsavers: mobilversjonen av fullskjermen vises bare på mobil, desktop-versjonen bare på desktop */
.ad-mobil { display: none; }
@media (max-width: 900px) {
  .ad-desktop { display: none; }
  .ad-mobil { display: block; width: 88%; margin-inline: auto; }
  .ad-mobil iframe { display: block; width: 100%; aspect-ratio: 446 / 900; height: auto; border: 0; background: transparent; color-scheme: normal; }
  .case-block:has(> .ad-mobil) { margin-block: 110px; }
}

/* Coca-Cola på mobil: tittel → rullende annonser → tekstboks → telefonen (rett, samme størrelse og luft som Specsavers) */
@media (max-width: 900px) {
  main.wrap:has(.ad-live) { display: flex; flex-direction: column; }
  main.wrap:has(.ad-live) > * { order: 5; }
  main.wrap:has(.ad-live) > .screen-first,
  main.wrap:has(.ad-live) > .screen-first > .case-head { display: contents; }
  main.wrap:has(.ad-live) > .screen-first > .case-head > div { order: 1; padding-top: 130px; }
  main.wrap:has(.ad-live) > .marquee { order: 2; }
  main.wrap:has(.ad-live) > .screen-first > .case-block { order: 3; }
  main.wrap:has(.ad-live) .ad-live { order: 4; transform: none; width: 88%; align-self: center; margin: 110px 0; }
  /* Coca-annonsen er uten adresselinje på mobil og derfor litt lavere: samme bredde som Specsavers-telefonen */
  main.wrap:has(.ad-live) .ad-live iframe { aspect-ratio: 446 / 844; }
  /* Margene slås ikke sammen i en flex-kolonne: unngå dobbel luft mellom seksjonene */
  main.wrap:has(.ad-live) > .marquee + .case-block { margin-top: 0; }
}

/* Coca-Cola på mobil, runde 2 */
@media (max-width: 900px) {
  /* Annonseboble-telefonen til venstre og vippet andre veien (like mye som bildet, bare med klokka),
     så notatet får plass ved siden av, med pila inn til ikonet nede i skjermen */
  .bubble .bubble-figure { width: 55%; max-width: none; justify-self: start; margin: 10px 0 40px 5%; }
  .bubble .bubble-figure figure img { transform: rotate(15.2deg); }
  /* Notatet (liten tekst, midtstilt) til høyre for telefonen, og en buet pil under teksten som peker inn mot telefonen */
  .bubble .bubble-figure .arrow { display: block; left: 108%; top: 96%; width: 31.2%; transform: rotate(145deg); }
  .bubble .bubble-figure .note { position: absolute; left: 109.5%; top: 73%; width: 63.5%; margin: 0; text-align: center; font-size: calc(var(--mob-6) * var(--m)); line-height: 1.35; }

  /* «10 forskjellige …»: én størrelse ned (størrelse 3), og «2» står aldri alene på en linje */
  .statement.doodle { font-size: calc(var(--mob-3) * var(--m)); max-width: none; text-wrap: balance; }

  /* Videre samarbeid: mer luft over, bildene større og tettere sammen */
  .case-block.two-col:has(.pair), .case-block:has(> h2 + .two-col > .numbered) { margin-top: 120px; }
  .pair { grid-template-columns: 794fr 923fr; gap: 10px; justify-content: stretch; }
  .pair .media img { width: 100%; height: auto; }
}

/* Annonseradene: egne rader for desktop (to) og mobil (tre). Farten styres av --tid på hver rad. */
.marquee-track { animation-duration: var(--tid, 40s); }
.marquee-row.mobil-only { display: none; }
@media (max-width: 900px) {
  .marquee-row.mobil-only { display: block; }
  .marquee-row.desktop-only { display: none; }
  /* Coca-Cola på mobil: tre rader, litt lavere bilder */
  .marquee-track img { height: 180px; }
  .marquee { gap: 14px; }
  /* Mindre luft over raden, mer under */
  main.wrap:has(.ad-live) > .marquee { margin-top: 32px; }
  /* Like mye luft over og under Bakgrunn-boksen (124 px, som rundt telefonen) */
  main.wrap:has(.ad-live) > .screen-first > .case-block { margin-top: 124px; }
  /* «10 forskjellige …»: like mye luft over og under (samme som over og under telefonen) */
  main.wrap:has(.ad-live) .statement.doodle { margin-top: 0; margin-bottom: 0; }
  main.wrap:has(.ad-live) > .bubble { margin-top: 153px; }
  /* «Hva er Cavai annonseboble?» midt på siden */
  .bubble-foot { display: block; width: 100%; text-align: center; }
  .bubble-foot .pill { margin-inline: auto; }
}

/* =====================================================================
   MOBIL: LIK LUFT MELLOM ALLE DELENE
   Hver del (tekstboks, bilde, telefon, statistikk, Videre samarbeid osv.) har like mye luft
   over og under seg på alle sidene. Endre --del-luft for å justere alt samtidig.
   Telefonene i iframe har 14 px gjennomsiktig kant, som trekkes fra så luften ser lik ut.
   ===================================================================== */
@media (max-width: 900px) {
  :root { --del-luft: 110px; }

  /* Prosjektsidene: hver del får den samme luften over seg, ingen ekstra under */
  main.wrap > .case-block,
  main.wrap > .screen-first > .case-block,
  .case-block:has(> .stats),
  .case-block:has(.quote),
  .case-block.two-col:has(.pair),
  .case-block:has(> h2 + .two-col > .numbered) { margin-top: var(--del-luft); margin-bottom: 0; }
  .next-project { margin-top: 0; padding-block: var(--del-luft); }

  /* Ingen avsnittsmarg i starten og slutten av en del (den ville lagt seg oppå luften) */
  .case-block :is(p, ul, h2):first-child { margin-top: 0; }
  .case-block :is(p, ul):last-child { margin-bottom: 0; }
  .box--quote-stat { margin-bottom: 0; }

  /* Specsavers: mobil-fullskjermen (telefon i iframe) */
  main.wrap > .case-block:has(> .ad-mobil) { margin-top: calc(var(--del-luft) - 14px); margin-bottom: 0; }
  main.wrap > .case-block:has(> .ad-mobil) + .case-block { margin-top: calc(var(--del-luft) - 14px); }
  /* Sider med mobil i toppen (Vy): tittelen like langt ned som på de andre sidene, og luft rundt mobilen */
  .screen-first:has(.phone-head) .case-head > div { padding-top: 130px; }
  .screen-first:has(.phone-head:not(.ad-live)) .phone-head { margin-top: var(--del-luft); }
  /* Tittelen: ingen ekstra marg under linjen med år og byrå */
  .case-head .meta { margin-bottom: 0; }

  /* Coca-Cola (delene står i en flex-kolonne der margene ikke slås sammen) */
  main.wrap:has(.ad-live) > .marquee { margin-top: var(--del-luft); }
  main.wrap:has(.ad-live) > .screen-first > .case-block { margin-top: var(--del-luft); }
  main.wrap:has(.ad-live) .ad-live { margin: calc(var(--del-luft) - 14px) 0 0; }
  main.wrap:has(.ad-live) > .marquee + .case-block { margin-top: calc(var(--del-luft) - 14px); }
  /* Den vippede telefonen stikker 19 px over boksen sin */
  main.wrap:has(.ad-live) > .bubble { margin-top: calc(var(--del-luft) + 19px); }

  /* Forsiden: lik luft mellom annonsene, Annet arbeid, Ferdigheter og Kontakt */
  #arbeid.section { padding-bottom: 0; }
  #annet.section { padding-top: var(--del-luft); }
  #ferdigheter.section { padding: var(--del-luft) 0 0; }
  #kontakt.section { padding: var(--del-luft) 0; }

  /* Kundelogoene vises ikke på mobil */
  .case-head .client-logo { display: none; }

  /* TV2: stegbildene to og to (01 og 02, 03 og 04) */
  .steps:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobil, runde med kommentarer på Vy og Coca-Cola */
@media (max-width: 900px) {
  /* Store utsagn (Vy «Selv med høy terskel …») i samme størrelse som Coca-Cola-utsagnet */
  .statement { font-size: calc(var(--mob-3) * var(--m)); text-wrap: balance; max-width: none; }

  /* Vy: mobilen flyttes ned under Bakgrunn-boksen, med samme bredde og luft som de klikkbare annonsene.
     Når den ekte annonsen kommer, settes den inn her i stedet for bildet. */
  .screen-first:has(.phone-head:not(.ad-live)) { grid-template-areas: "title" "box" "phone"; }
  .screen-first:has(.phone-head:not(.ad-live)) .phone-head { width: 88%; justify-self: center; margin-top: var(--del-luft); }
  .screen-first:has(.phone-head:not(.ad-live)) .phone-head img { width: 100%; }

  /* Coca-Cola: «Hva er Cavai annonseboble?» litt ned fra teksten, men fortsatt en del av samme blokk */
  .bubble-foot { margin-top: 56px; }
}

/* Vy: stegbildene som lysbildevisning på mobil (styres av main.js) */
.slide-dots { display: none; }
@media (max-width: 900px) {
  .vy-steps .steps.slides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; width: 70%; margin-inline: auto; }
  .vy-steps .steps.slides > figure { grid-area: 1 / 1; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
  .vy-steps .steps.slides > figure.is-active { opacity: 1; pointer-events: auto; }
  .slide-dots { display: flex; justify-content: center; gap: 12px; margin-top: 18px; }
  .slide-dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--farge-tekst); opacity: .3; cursor: pointer; transition: opacity .3s; }
  .slide-dots button[aria-current="true"] { opacity: 1; }
  .slide-dots button::after { content: ""; position: absolute; inset: -10px; }

  /* Vy: mobilbildet står rett (bildet er vippet 6° i filen) og har samme bredde som de andre telefonene */
  .screen-first:has(.phone-head:not(.ad-live)) .phone-head { overflow: visible; }
  .screen-first:has(.phone-head:not(.ad-live)) .phone-head img { width: 107.8%; max-width: none; margin-left: -3.9%; transform: rotate(-6.1deg); }
}

/* Cavai branding på mobil */
.ba-pairs { display: none; }
@media (max-width: 900px) {
  /* Før/etter: de to radene med tre bilder byttes ut med par side om side */
  .case-block:has(> .ba-pairs) > .skill-group { display: none; }
  .ba-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .ba-pairs__head { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: calc(var(--mob-4) * var(--m)); text-align: center; }
  .ba-pairs img { width: 100%; height: auto; border-radius: 4px; }

  /* LinkedIn-karusellene: ett bilde om gangen som glir sidelengs (styres av main.js) */
  .img-grid.squares.karusell { display: flex; overflow: hidden; gap: 0; flex: 1 1 auto; min-width: 0; }
  .img-grid.squares.karusell > figure { flex: 0 0 100%; transform: translateX(calc(-100% * var(--i, 0))); transition: transform .7s cubic-bezier(.45,0,.25,1); }
  /* Etiketten («Best of 2025», «Stranda») står loddrett til venstre, prikkene under bildet */
  .case-block .skill-group:has(> .karusell) { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .case-block .skill-group:has(> .karusell) > .vertical-label br { display: none; }
  /* Mer luft mellom de to karusellene (overstyrer margen som står i HTML-en) */
  .case-block .skill-group:has(> .karusell):not(:last-child) { margin-bottom: 64px !important; }
  /* Litt luft mellom introteksten og før/etter-bildene øverst */
  .case-head .before-after { margin-top: 48px; }
  .case-block .skill-group:has(> .karusell) > .vertical-label { grid-row: 1 / span 2; writing-mode: vertical-rl; transform: rotate(180deg); width: auto; text-align: right; }
  .case-block .skill-group:has(> .karusell) > .karusell, .case-block .skill-group:has(> .karusell) > .slide-dots { grid-column: 2; }
}