/* STUDIO SEM · studiosem.se
   Designsystemet är låst i ../../brand/brand-identity.md. Ändra där först, sedan här.

   Layouten är byggd efter byrå-researchen i
   ../../content/benchmarks/analysis/website-copy.md och skärmdumparna av
   Cure Media, UGCers, EMI och Glory Days:
     · stor självsäker wordmark (Cure Media, Glory Days)
     · delad hero med bild (Cure Media)
     · marquee-band med tjänster (UGCers)
     · rutnät av vertikala UGC-klipp (UGCers)
     · pill-knapp med pil (Cure Media, EMI)
   Paletten är vår egen. Alla fyra kör vitt, lila eller mörkgrått; cream + rött
   är det som gör att vi inte ser ut som dem.

   Typsnittsnot: Anton, Cormorant Garamond och EB Garamond är självhostade i assets/fonts/,
   aldrig inbäddade från Google. Skälet står i website/README.md. Skriptypsnittet
   i logotypen finns inte som webbtypsnitt, så logotypen ligger som vektor i
   assets/img/sem-wordmark.svg. Se nav.css. */
/* Page-scoped grid. The palette and the type stack live in tokens.css, which loads
   first; only the measurements that genuinely differ from the home page are set here.
   services.html, more-bookings.html and privacy.html run a narrower measure and a
   wider gutter than index.html does. */
:root {
  --h1-max: 2.9rem;
  --gutter: 104px;
  --measure: 40rem;   /* widened with the ch measures, same reason */
  --maxw: 1440px;
  --side: calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gutter));
}



/* Går ut i högerkant. */
.bleed-r { margin-right: calc(-1 * var(--side)); }
/* Går ut i båda kanterna. */
.bleed-x { margin-left: calc(-1 * var(--side)); margin-right: calc(-1 * var(--side)); }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--cream);
  color: var(--espresso);
  font-family: var(--text);
  /* EB Garamond. Decket satter brodtexten i 300, och 300 ar en
     annan sak an 400 i EB Garamond: den ar markbart luftigare. */
  font-weight: var(--body-weight);
  font-size: var(--body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lätt pappersgrain, inline SVG så att sidan förblir självbärande. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

main, header, footer { position: relative; z-index: 1; }

/* ---------- rutnät ---------- */

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: 96px 0; }

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

/* Vita sektioner varvas med papper för luft och rytm. */
.pale { background: var(--white); }

/* ---------- diagnos-sektion (Cure Media-greppet) ----------
   Kontrastrubrik + specifik diagnos i korta satser. Smal textspalt och mycket
   luft är hela poängen: texten ska läsas långsamt. */

.diagnosis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 5rem; align-items: end; }
.diagnosis h2 { max-width: 27ch; margin-bottom: .5em; }
.diagnosis .stack { max-width: 30rem; }
.diagnosis .stack p { font-size: 1.05rem; }
.diagnosis .stack p + p { margin-top: -.2em; }

/* ---------- "X, inte Y" ---------- */

.contrasts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); }
.contrasts > div { padding: 2.2rem 2rem 2.2rem 0; border-bottom: 1px solid var(--line); }
.contrasts > div:not(:last-child) { border-right: 1px solid var(--line); padding-right: 2rem; }
.contrasts > div:not(:first-child) { padding-left: 2rem; }
.contrasts .yes {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--espresso);
  display: block;
  margin-bottom: .5rem;
}
.contrasts .no {
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
}
.contrasts p { font-size: .94rem; margin: 0; }

/* ---------- typografi ---------- */

h1, h2, h3 {
  font-family: var(--display);
  color: var(--espresso);
  font-weight: var(--h1-weight);
  margin: 0 0 .5em;
}

/* Stora rubriker i VERSALER. Anton är deckets H1, och versalerna är vår
   motsvarighet till Cure Medias jätte-grotesk. Graden är nedtrimmad från
   3,6vw/3,3rem: Anton tar mer plats i bredd än the old serif vid samma grad. */
h1, .display {
  font-size: clamp(1.9rem, 3.1vw, var(--h1-max));
  line-height: 1.06;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
/* H2 är Cormorant Garamond enligt decket, inte Anton: en smal och vid versaltyp som ger
   luft mellan H1:ans tyngd och brödtexten. Den är ljus i teckningen, så den
   behöver större grad och lite spärrning för att inte läsa som en bildtext.
   Sentence case, inte versaler: versaler överallt läser formellt och kallt, och
   rösten ska vara varm (brand-identity.md). */
h2 {
  font-family: var(--wide);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, var(--h2-max));
  line-height: 1.12;
  letter-spacing: .01em;
}
h3 { font-size: 1.3rem; line-height: 1.22; letter-spacing: -.005em; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
a { color: inherit; }

/* Cormorant Garamond har ersatt Courier har. Den ar en hartunn teckning, sa samma grad
   som forut blev nastan osynlig i .63rem. Graden ar darfor uppdragen ett
   steg: samma etikett, samma sparrning, bara lasbar. */
.eyebrow {
  font-family: var(--label);
  font-size: .73rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.9rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: var(--accent);
  flex: none;
}

/* Kursiv i rubriker är borttagen på Noras begäran 2026-07-26: den lutande
   texten mitt i versaler såg inte bra ut. Regeln ligger kvar avstängd så att
   ett <em> som slinker in i en rubrik inte plötsligt lutar igen.
   Kursiv-woff2:an används fortfarande av vanlig brödtext. */
h1 em, h2 em, .big em, .highlight em {
  font-style: normal;
}

.lead { font-size: 1.2rem; line-height: 1.5; color: var(--espresso); }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* ---------- huvud ---------- */

.site-head { padding: 30px 0 0; }
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--wide);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--espresso);
  text-decoration: none;
  white-space: nowrap;
}

.nav { display: flex; gap: 1.9rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-family: var(--label); }
.nav a { text-decoration: none; color: var(--espresso); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--accent); }
.nav a[aria-current='page'] { color: var(--espresso); border-bottom-color: var(--accent); }

/* ---------- jätte-wordmark (Cure Media-greppet) ---------- */

.brandbar {
  padding: 34px 0 0;
  overflow: hidden;
}
/* DÖD REGEL: .brandbar finns inte i någon av de tre sidorna längre, den hörde
   till version 1 av startsidan. Lämnad orörd i väntan på en städning av
   version 1-resterna i den här filen. */
.brandbar .mark {
  font-family: var(--display);
  font-size: clamp(2.6rem, 11.3vw, 10.6rem);
  line-height: .86;
  letter-spacing: -.022em;
  text-transform: uppercase;
  color: var(--espresso);
  margin: 0;
  white-space: nowrap;
}
.brandbar .mark .dot { color: var(--accent); }

/* ---------- hero ---------- */

.hero { padding: 64px 0 0; }
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 4rem;
  align-items: start;
}
.hero-copy { padding-top: 6px; padding-bottom: 88px; }

/* Hero-bilden går ut i högerkant och är hög nog att bära sektionen. */
.hero .media-hero { aspect-ratio: auto; min-height: clamp(420px, 68vh, 720px); }

/* Hårlinje under sidhuvudet: markerar rutnätet i stället för att låta hero
   sväva fritt. */
.head-rule { border: 0; border-top: 1px solid var(--line); margin: 26px 0 0; }

/* Andrabild som överlappar den stora. Ger djup i stället för en enda platt
   yta, samma grepp som UGCers kollage fast lugnare. */
.media-stack { position: relative; }
.media-stack .media-sub {
  position: absolute;
  left: -13%;
  bottom: -52px;
  width: 34%;
  aspect-ratio: 3 / 4;
  border: 8px solid var(--cream);
  z-index: 2;
}
.pale .media-stack .media-sub { border-color: var(--white); }

/* Nedre vänstra hörnet: förankrar den tomma ytan under knapparna med
   information i stället för luft, plus en scroll-markör. */
.hero-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: auto;
  padding-top: 64px;
  border-top: 1px solid var(--line);
}
.hero-foot dl {
  margin: 0;
  display: flex;
  gap: 3.4rem;
  flex-wrap: wrap;
}
.hero-foot dt {
  font-family: var(--label);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
}
.hero-foot dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--espresso);
  line-height: 1.2;
}

.scroll-cue {
  font-family: var(--label);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .8rem;
  white-space: nowrap;
}
.scroll-cue::after {
  content: '';
  width: 46px;
  height: 1px;
  background: var(--accent);
  transform-origin: left;
  animation: cue 2.6s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleX(.3); opacity: .5; }
  50%      { transform: scaleX(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue::after { animation: none; transform: scaleX(1); }
}

/* Hero-kolumnen blir en spalt så att .hero-foot kan tryckas ner mot bilden. */
.hero-copy { display: flex; flex-direction: column; min-height: clamp(420px, 68vh, 720px); }
.hero-copy h1 { max-width: 23ch; margin-bottom: .4em; }
.hero-copy .lead { max-width: 30rem; }

/* ---------- bildplatser ----------
   Riktiga foton saknas än. Slotarna har en avsiktlig behandling så att sidan ser
   färdig ut, och byts mot <img> när materialet finns. Se website/README.md. */

.media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #D9D1C2 0%, #C6BCA9 48%, #B9AE99 100%);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 70% 28%, rgba(78,147,184,.22), transparent 58%),
    radial-gradient(circle at 22% 78%, rgba(0,0,0,.2), transparent 62%);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media .slot-label {
  font-family: var(--label);
  font-size: .6rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(0,0,0,.5);
  padding: 14px 16px;
}
.media-hero { aspect-ratio: 4 / 5; }
.media-tall { aspect-ratio: 9 / 16; }
.media-wide { aspect-ratio: 3 / 2; }
.media-portrait { aspect-ratio: 4 / 5; }

/* Film i en bildplats. Videon läggs OVANPÅ gradienten, inte i stället för den.
   Saknas filerna renderar <video> som en tom ruta och slotten ser ut precis
   som förut: ingen trasig ikon, inget hål i sidan. Samma sak om en <img>
   404:ar, se onerror i markupen. */
.media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Etiketten göms först när riktig media faktiskt målats upp. Klassen sätts av
   onload / onloadeddata i markupen, så texten står kvar så länge slotten är
   tom och försvinner aldrig av misstag. */
.media.has-media .slot-label { display: none; }

/* ---------- knappar ---------- */

.actions { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; margin-top: 2.1rem; }

.btn {
  font-family: var(--label);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 32px;
  border: 1px solid var(--espresso);
  border-radius: 999px;
  background: var(--espresso);
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn .arrow { transition: transform .18s ease; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-quiet { background: transparent; color: var(--espresso); border-color: var(--espresso); }
.btn-quiet:hover { background: var(--espresso); color: var(--cream); border-color: var(--espresso); }

/* ---------- marquee ---------- */

/* An espresso band, not an accent band. It was a solid the accent field, and the note on
   .statement below flagged that a whole field contradicted the accent rule. The brand
   book settles it: cream and espresso are what a page is made of, saffron and air sit
   on top and never become the page. So the field is espresso and the accent is free to
   emphasise a single word on it. .marquee carries .dark, so that word is saffron. */
.marquee {
  background: var(--espresso);
  color: var(--cream);
  padding: 22px 0;
  overflow: hidden;
  white-space: nowrap;
  margin: 96px 0 0;
}
.marquee-track {
  display: inline-flex;
  gap: 0;
  animation: slide 52s linear infinite;
  will-change: transform;
}
.marquee span {
  font-family: var(--label);
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  padding: 0 1.7rem;
  color: var(--cream);
}
.marquee span:nth-child(even) { color: rgba(253, 249, 240,.6); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- arbetsrutnät (vertikala klipp) ---------- */

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* ---------- numrerade block ---------- */

.numbered { list-style: none; padding: 0; margin: 0; }
.numbered > li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 2.2rem;
  padding: 2.2rem 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.numbered > li:last-child { border-bottom: 1px solid var(--line); }
.numbered .n {
  font-family: var(--display);
  font-size: 2.5rem;
  line-height: .85;
  color: var(--accent);
}
.numbered h3 { margin-bottom: .32em; }
.numbered p:last-child { margin-bottom: 0; }

/* ---------- paket ---------- */

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid var(--line);
}
.package { padding: 2.4rem 2rem 2.4rem 0; border-bottom: 1px solid var(--line); }
.package:not(:last-child) { border-right: 1px solid var(--line); padding-right: 2rem; }
.package:not(:first-child) { padding-left: 2rem; }
.package .n {
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--accent);
  display: block;
  margin-bottom: 1rem;
}
.package h3 { margin-bottom: .55em; }
.package p { font-size: .95rem; }
.package ul { margin: 0 0 1.1rem; padding-left: 1.05rem; font-size: .9rem; }
.package li { margin-bottom: .35rem; }
.package .price {
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- mörk sektion ---------- */

.dark { background: var(--espresso); color: var(--cream); padding: 96px 0; }
.dark h2, .dark h3 { color: var(--cream); }
.dark .eyebrow { color: #9A8F91; }
.dark .eyebrow::before { background: var(--accent-hover); }
.dark .accent, .dark .n { color: var(--accent-hover); }
.dark .lead { color: var(--cream); }
.dark .numbered > li { border-color: var(--espresso-lift); }
.dark .btn { background: var(--cream); color: var(--espresso); border-color: var(--cream); }
.dark .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--cream); }
.dark .btn-quiet { background: transparent; color: var(--cream); border-color: #3A3033; }
.dark .btn-quiet:hover { background: var(--cream); color: var(--espresso); }
.dark details { border-color: var(--espresso-lift); }
.dark summary { color: var(--cream); }

/* ---------- the accent-statement ----------
   Modash bär hela sin hero på ett platt rosa fält. Det här är vår version:
   EN sektion som tar färgen fullt ut, som andningspaus mellan papper och vitt.

   OBS mot brand-identity.md: the accent ska användas "sparsamt, som en viskning".
   Ett helt fält är ett medvetet avsteg för att sajten ska ha samma tyngd som
   referenserna. Ta bort sektionen om regeln väger tyngre. */

/* The page's one full-size colour field, the equivalent of Modash's pink hero.
   It was a solid the accent field, carrying a note that a whole field of the accent
   contradicted the "use it sparingly, like a whisper" rule, and asking for one of the
   two to be changed. Resolved 2026-08-05 by the brand book, which is unambiguous:
   cream and espresso are what a page is made of, saffron and air sit on top of them
   and never become the page. So the field is espresso. Cream on it is 16.4:1, and a
   single saffron word carries the emphasis without the section shouting. */
.statement {
  background: var(--espresso);
  color: var(--cream);
  padding: 116px 0;
}
.statement .eyebrow { color: var(--muted-on-dark); }
.statement .eyebrow::before { background: var(--cream); }
.statement p.big {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.2vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--cream);
  max-width: 27ch;
  margin: 0 0 1.6rem;
}
.statement .sub { color: rgba(253, 249, 240,.86); max-width: 34rem; }

/* Två spalter i the accent-sektionen: frågan till vänster, svaret till höger.
   Ersätter de två separata sektioner som tidigare sa samma sak i tur och
   ordning. */
.statement-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: start;
}
.statement-split .big { max-width: 21ch; margin-bottom: 0; }
.statement-split .actions { margin-top: 2rem; }
@media (max-width: 1000px) {
  .statement-split { grid-template-columns: 1fr; gap: 2.2rem; }
  .statement-split .big { max-width: none; }
}
.statement .btn { background: var(--cream); color: var(--espresso); border-color: var(--cream); }
.statement .btn:hover { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }

/* ---------- faktaband ----------
   Fyra saker som är sanna och kontrollerbara. Inga uppfunna resultatsiffror:
   de får läggas till när vi har källkollade case. */

.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.facts > div { padding: 2.4rem 1.6rem 2.4rem 0; border-bottom: 1px solid var(--line); }
.facts > div:not(:last-child) { border-right: 1px solid var(--line); padding-right: 1.6rem; }
.facts > div:not(:first-child) { padding-left: 1.6rem; }
.facts .fig {
  font-family: var(--display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: .95;
  color: var(--accent);
  display: block;
  margin-bottom: .5rem;
}
.facts .cap {
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  line-height: 1.7;
}

/* ---------- arbetsrutnät: hover ---------- */

.work-grid .media {
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.work-grid .media:hover { transform: translateY(-6px); }

/* ---------- hantverksremsa (tjänstesidan) ----------
   Tre rutor som visar arbetet, inte resultatet: ljuset, briefen, texturen.
   Medvetet utan rubrik. Bilderna får bära sektionen själva, och mono-texten
   under fungerar som bildtext i stället för som en till underrubrik. */

.craft-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.craft-strip figure { margin: 0; }
.craft-strip .media { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.craft-strip .media:hover { transform: translateY(-6px); }
.craft-strip figcaption {
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
  padding-top: 14px;
}

/* ---------- bred hero (tjänstesidan) ----------
   Samma formspråk som startsidan (eyebrow, the old serif-versaler, pill-knapp, bild i
   kant) men annan komposition: rubriken går över hela bredden och bilden
   ligger som ett band under, i stället för delad vänster/höger.
   Sidorna ska kännas släkt, inte identiska. */

.hero-wide { padding: 72px 0 0; }
.hero-wide-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: end;
  margin-bottom: 56px;
}
.hero-wide-copy .eyebrow { grid-column: 1 / -1; margin-bottom: .6rem; }
.hero-wide-copy h1 { margin: 0; max-width: 21ch; }
.hero-wide-side .lead { margin-bottom: 1.4rem; }
.hero-wide-side .actions { margin-top: 0; }
.media-band { aspect-ratio: 21 / 8; }

@media (max-width: 1000px) {
  .hero-wide-copy { grid-template-columns: 1fr; gap: 1.8rem; align-items: start; margin-bottom: 36px; }
  .hero-wide-copy h1 { max-width: none; }
  .media-band { aspect-ratio: 3 / 2; }
}

/* ---------- tjänstekort med taggar (inbeat) ----------
   Kort med rubrik, kort beskrivning och pill-taggar som bär detaljerna.
   Taggarna gör att varje kort kan säga mycket utan att bli en textvägg. */

/* Kortformen är tagen rakt av från inbeat: vita kort med stor radie, ingen
   ram, ikon överst, taggar som fyllda pills längst ner. Typsnitten är våra. */
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
/* Måtten är avlästa direkt på inbeat.agency/services 2026-07-27 med
   chrome-devtools: kort radie 14px, padding 21px 16px, ikon 18px med
   opacity .2, rubrik 18px, taggar 12px med padding 8px 16px. */
.service-card {
  background: var(--white);
  border: 0;
  border-radius: 14px;
  padding: 21px 16px;
  display: flex;
  flex-direction: column;
}
.service-card .ico {
  width: 18px;
  height: 18px;
  display: block;
  margin-bottom: 1.3rem;
  color: var(--espresso);
  opacity: .2;
}
.service-card .ico svg { width: 100%; height: 100%; display: block; }
.service-card h3 { font-size: 18px; margin-bottom: .6em; }
.service-card p {
  font-size: .88rem;
  line-height: 1.6;
  margin: 0 0 1.6rem;
  max-width: none;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
  padding: 0;
  list-style: none;
}
/* Fyllda pills utan ram, som förlagan. */
.tags li {
  font-family: var(--text);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--espresso);
  background: var(--cream);
  border: 0;
  border-radius: 360px;
  padding: 8px 16px;
  white-space: nowrap;
}
.pale .service-card { background: var(--cream); }
.pale .tags li { background: var(--white); }

@media (max-width: 1180px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .service-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */

/* Två spalter med separata rundade kort, ett plus till höger. Efter inbeat.
   Korten ligger i ett rutnät i stället för en lista med linjer emellan. */
.faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}
/* FAQ-korten är också avlästa på inbeat: radie 18px, fråga 16px, radhöjd
   ca 56px, 16px mellan raderna. */
details {
  background: var(--white);
  border: 0;
  border-radius: 18px;
  padding: 17px 22px;
}
.pale details { background: var(--cream); }
summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.4;
  color: var(--espresso);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+';
  color: var(--espresso);
  font-family: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
}
details[open] summary::after { content: '\2212'; }
details p {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: .93rem;
  line-height: 1.6;
  max-width: none;
}
details p + p { margin-top: .8rem; }

@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ---------- två spalter ---------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.split p:last-child { margin-bottom: 0; }

/* ---------- sidfot ---------- */

.site-foot { border-top: 1px solid var(--line); padding: 52px 0 64px; font-size: .9rem; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.site-foot a { color: var(--espresso); }
.site-foot .legal { color: var(--muted); font-size: .82rem; }

/* ---------- responsivt ---------- */

@media (max-width: 1000px) {
  :root { --gutter: 32px; }
  .diagnosis { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .diagnosis h2 { max-width: none; }
  .contrasts { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts > div,
  .facts > div:not(:last-child),
  .facts > div:not(:first-child) {
    padding: 1.6rem 1rem 1.6rem 0; border-right: 0;
  }
  .statement { padding: 72px 0; }
  .contrasts > div,
  .contrasts > div:not(:last-child),
  .contrasts > div:not(:first-child) {
    padding: 1.8rem 0; border-right: 0; padding-left: 0; padding-right: 0;
  }
  .hero-split { grid-template-columns: 1fr; gap: 2.2rem; align-items: start; }
  .hero-copy { padding-bottom: 0; }
  .hero-copy h1 { max-width: none; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .craft-strip { grid-template-columns: 1fr; gap: 28px; }
  .split { grid-template-columns: 1fr; gap: 2.2rem; }
  .packages { grid-template-columns: 1fr; }
  .package, .package:not(:last-child), .package:not(:first-child) {
    padding: 2rem 0; border-right: 0; padding-left: 0; padding-right: 0;
  }
  section { padding: 68px 0; }
  .dark { padding: 68px 0; }
  .marquee { margin-top: 68px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .brandbar .mark { letter-spacing: -.01em; }
  .numbered > li { grid-template-columns: 1fr; gap: .7rem; }
  .numbered .n { font-size: 1.9rem; }
  .nav { gap: 1.1rem; font-size: .7rem; }
  .btn { width: 100%; justify-content: space-between; }
}

/* ---------- scroll-highlight (Modash-greppet) ----------
   Stor rubrik som börjar ljus och mörknar ord för ord medan man scrollar
   igenom den. Orden delas av assets/reveal.js.

   Utan JS står rubriken kvar i full läsbar färg, så inget innehåll går
   förlorat om skriptet inte kör. */

.highlight {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.014em;
  color: var(--espresso);
  max-width: 29ch;
  margin: 0;
}
.highlight .w {
  color: var(--espresso);
  transition: color .35s ease;
}
/* Först när JS tagit över dämpas orden. */
.js-highlight .highlight .w { color: #D8CEC2; }
.js-highlight .highlight .w.lit { color: var(--espresso); }
.dark .highlight .w, .js-highlight .dark .highlight .w { color: #3A3033; }
.js-highlight .dark .highlight .w.lit { color: var(--cream); }

/* Mikrotext under CTA: tar bort friktion precis där beslutet tas. */
.micro {
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.4rem 0 0;
  line-height: 1.9;
}

/* ---------- rörelse ----------
   Innehållet stiger in när det scrollas fram. Diskret med flit: sajten säljer
   lugn och substans, så rörelsen ska kännas som papper som läggs ner, inte som
   en presentation.

   .reveal sätts av assets/reveal.js först när JS kör. Utan JS finns klassen
   aldrig, så allt syns direkt. Ingen risk för osynligt innehåll. */

/* Langre och mjukare an forut: 18px pa .7s las som att nagot snappade pa
   plats. 34px pa 1.05s med en kurva som bromsar sent las som att sidan andas.
   Det ar hela skillnaden mot referensen, som inte kapar scrollen alls utan bara
   later saker stiga in langsamt. */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.05s cubic-bezier(.16,.8,.28,1),
              transform 1.05s cubic-bezier(.16,.8,.28,1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Riktningar. Sätts med data-reveal i markupen, som referensens revealFromTop
   och revealFromRight. Utan attribut stiger elementet underifran som forut. */
.reveal[data-reveal="right"] { transform: translateX(46px); }
.reveal[data-reveal="left"]  { transform: translateX(-46px); }
.reveal[data-reveal="top"]   { transform: translateY(-30px); }
.reveal[data-reveal="scale"] { transform: scale(.94); }
.reveal[data-reveal].is-in   { transform: none; }

/* Barn efter varandra i stallet for allt pa en gang. Steget ar litet med flit:
   over ungefar 90ms borjar det kannas som att sidan laddar segt. */
.reveal-seq > *      { transition-delay: 0ms; }
.reveal-seq > *:nth-child(2) { transition-delay: 70ms; }
.reveal-seq > *:nth-child(3) { transition-delay: 140ms; }
.reveal-seq > *:nth-child(4) { transition-delay: 210ms; }
.reveal-seq > *:nth-child(5) { transition-delay: 280ms; }
.reveal-seq > *:nth-child(n+6) { transition-delay: 350ms; }

/* Parallax. Elementet flyttas av assets/reveal.js via --par, som ar rena
   pixlar. Egen variabel och inte transform direkt, sa att .reveal och parallax
   kan sitta pa samma element utan att skriva over varandra. */
[data-parallax] { will-change: transform; }
[data-parallax] > img,
[data-parallax] > video {
  transform: translate3d(0, var(--par, 0px), 0) scale(1.12);
  transition: none;
}

/* Barnen i ett avslöjat block kommer in efter varandra. */
.reveal-stagger > * { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 70ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 140ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 210ms; }

/* Bildplatser och klipp zoomar ut mjukt i stället för att glida. */
.media.reveal { transform: none; opacity: 0; }
.media.reveal > * { opacity: 0; transition: opacity .5s ease .3s; }
.media.reveal.is-in > * { opacity: 1; }
.media.reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--cream);
  transform-origin: bottom;
  transition: transform .9s cubic-bezier(.76,0,.24,1);
  z-index: 1;
}
.pale .media.reveal::before { background: var(--white); }
.media.reveal.is-in { opacity: 1; }
.media.reveal.is-in::before { transform: scaleY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in, .media.reveal, .media.reveal > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .media.reveal::before { display: none; }
}

/* ---------- tillgänglighet ---------- */

a:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--espresso); color: var(--cream);
  padding: .7rem 1.1rem; text-decoration: none;
}