/* ===========================================================
   Abdimalik Hassan — portfolio, andra versionen
   Affischtypografi, figuren framför texten, lager som rör sig
   olika fort. Två paletter: dag och natt.
   =========================================================== */

/* --- tokens: dag -------------------------------------------- */

:root {
  --canvas: #f4f4f2;
  --panel: #ffffff;
  --ink: #0c0c0c;
  --muted: #6f6f6c;
  --line: rgba(12, 12, 12, 0.14);
  --line-hard: rgba(12, 12, 12, 0.26);

  --accent: #1c6e4a;
  --accent-bright: #2fae72;
  --accent-tint: rgba(28, 110, 74, 0.10);
  --mark-ink: #ffffff;

  --shot-opacity: 0.84;

  --font-poster: "Archivo", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .3, 1);
  --page: 1240px;
  --edge: 34px;
  --gap-section: 128px;
  --radius: 0;
}

/* --- tokens: natt ------------------------------------------- */

[data-theme="dark"] {
  --canvas: #0c0e0d;
  --panel: #151917;
  --ink: #f1f2ef;
  --muted: #8d918c;
  --line: rgba(241, 242, 239, 0.16);
  --line-hard: rgba(241, 242, 239, 0.32);

  --accent: #35c583;
  --accent-bright: #4ee39b;
  --accent-tint: rgba(53, 197, 131, 0.13);
  --mark-ink: #0c0e0d;

  --shot-opacity: 0.56;
}

/* utan js: följ systemet */
html:not(.js) { color-scheme: light dark; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--canvas);
}

/* Surfplatta: samma komposition, nedskalad. */
@media (min-width: 721px) and (max-width: 1100px) {
  .chips--fram .chip { font-size: 13px; }
}

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

section[id], main[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}

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

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--edge); }

/* --- typografiska primitiv ---------------------------------- */

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.big {
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(40px, 6.6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

.lede { max-width: 56ch; margin: 0; color: var(--muted); font-size: 18px; }
.small { font-size: 14px; line-height: 1.6; }

.link {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.link:hover { color: var(--accent); }

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-hard);
  border-radius: 0;
  padding: 12px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}

.btn:hover, .btn:focus-visible { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

.btn--accent { background: var(--accent); border-color: var(--accent); color: #ffffff; }
[data-theme="dark"] .btn--accent { color: #06120c; }
.btn--accent:hover, .btn--accent:focus-visible { background: var(--accent-bright); border-color: var(--accent-bright); color: #06120c; }

.btn[disabled] { opacity: .45; cursor: default; transform: none; }

:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

/* --- öppningen -----------------------------------------------
   Märket står, krymper till en grön prick, och pricken växer ut
   och blir hela skärmen. Sedan är man inne. Inget mer.
   ------------------------------------------------------------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--canvas);
  overflow: hidden;
  opacity: 1;
  transition: opacity .32s var(--ease);
}

html:not(.js) .boot { display: none; }
.boot.is-gone { opacity: 0; pointer-events: none; }
.boot > * { grid-area: 1 / 1; }

.boot__mark { transform: scale(0.9); opacity: 0; }
.boot__mark g polyline, .boot__mark g path { stroke: var(--ink); }
.boot__mark g .k { stroke: var(--accent-bright); }

.boot__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-bright);
  transform: scale(0);
}

/* Snabbare och tätare än förut: märket hinner in, försvinner in i
   pricken, pricken sväljer skärmen, och sen tonar hela laget bort
   i stället för att försvinna med ett hack mitt i svämningen. */
.boot.is-running .boot__mark {
  animation: bMarkIn .4s var(--ease) forwards,
             bMarkOut .2s cubic-bezier(.5,0,.75,.2) .46s forwards;
}

.boot.is-running .boot__dot {
  animation: bDotIn .2s cubic-bezier(.2,.9,.32,1.15) .52s forwards,
             bFlood .46s cubic-bezier(.5,0,.25,1) .72s forwards;
}

@keyframes bMarkIn  { to { transform: scale(1); opacity: 1; } }
@keyframes bMarkOut { to { transform: scale(0.1); opacity: 0; } }
@keyframes bDotIn   { to { transform: scale(1); } }
@keyframes bFlood   { from { transform: scale(1); background: var(--accent-bright); }
                      to   { transform: scale(160); background: var(--accent); } }

/* --- sidhuvud ----------------------------------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: saturate(160%) blur(12px);
  background: color-mix(in srgb, var(--canvas) 82%, transparent);
  border-bottom: 1px solid var(--line);
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}

/* Foten ar alltid morkt oavsett dags- eller nattlage, och tacker
   hela vyn. Utan det har skulle det fasta sidhuvudet sta kvar som
   en ljus list ovanpa ett svart falt. Sidhuvudet vaxlar till samma
   morka palett for sig sjalvt nar foten tacker hela skarmen, och
   tillbaka till det riktiga laget nar man skrollar upp igen. */
.top.is-night {
  --canvas: #0c0e0d;
  --ink: #f1f2ef;
  --muted: #8d918c;
  --line: rgba(241, 242, 239, 0.16);
  --accent: #35c583;
  --accent-bright: #4ee39b;
  --mark-ink: #0c0e0d;
}

/* Markets 54 px ar det som satter radhojden. Den lodrata paddingen
   ar sankt fran 13 till 8 sa sidhuvudet ar exakt lika hogt som forut,
   71 px: markert vaxte, listen gjorde det inte. */
.top__inner {
  max-width: none;
  margin: 0;
  padding: 8px clamp(18px, 2.6vw, 46px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.top__side { display: flex; align-items: center; gap: 18px; min-width: 0; }
.top__side--end { justify-content: flex-end; gap: 22px; }

/* Hårstreck mellan märket och orten. Enda linjen i sidhuvudet. */
.top__rule { width: 1px; height: 26px; background: var(--line); flex: none; }

.brand { color: var(--ink); display: inline-flex; flex: none; }
.brand__mark {
  display: block;
  transition: transform .42s var(--ease);
  transform-origin: 50% 50%;
}
.brand__bar, .brand__k { transition: stroke .3s var(--ease); }

/* Ett varumärke ska inte studsa. Tre procent och en pixel uppåt. */
.brand:hover .brand__mark { transform: translateY(-1px) scale(1.03); }
.brand:hover .brand__bar { stroke: var(--accent); }

.place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.place svg { color: var(--accent); flex: none; transition: transform .4s var(--ease); }
.place { transition: color .3s var(--ease); cursor: default; }
.place:hover { color: var(--accent); }
.place:hover svg { transform: translateY(-2px) scale(1.15); }

.top__mail {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.top__mail:hover { color: var(--accent); }

.top__sock {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--muted);
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.top__sock:hover { color: var(--accent); transform: translateY(-2px); }

/* LinkedIn är bara bokstäverna, ingen ruta runt. Samma optiska
   storlek som katten bredvid. */
.ico-in {
  font-family: var(--font-poster);
  font-size: 17px;
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: lowercase;
}

.pills { position: relative; display: flex; gap: 10px; align-items: center; justify-self: center; }

/* Den svarta rutan är ett eget element som glider mellan flikarna.
   Position och bredd sätts av javascript, css sköter resan. */
.pills__box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--bw, 0);
  background: var(--ink);
  transform: translateX(var(--bx, 0));
  opacity: 0;
  transition: transform .68s var(--ease),
              width .68s var(--ease),
              opacity .3s ease;
}

.pills.is-set .pills__box { opacity: 1; }
.pills.no-move .pills__box { transition: none; }

.pill {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 0;
  border: 1px solid transparent;
  transition: color .3s var(--ease);
}

.pill { position: relative; z-index: 1; border: 0; color: var(--muted); transition: color .3s ease; }
.pill:not(.is-active):hover { color: var(--ink); }
.pill.is-active { color: var(--canvas); }

/* Sidan man redan står på ska svara på hovring: rutan blir grön och
   texten vit, i stället för att sitta svart och död. */
.pills:has(.pill.is-active:hover) .pills__box { background: var(--accent); }
.pill.is-active:hover { color: #fff; }

.tema {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
  transition: color .25s ease;
}

.tema:hover { color: var(--accent); }
.tema svg { grid-area: 1 / 1; transition: opacity .3s ease, transform .5s cubic-bezier(.3,1.3,.4,1); }

.ico-sun  { opacity: 1; transform: rotate(0) scale(1); }
.ico-moon { opacity: 0; transform: rotate(-80deg) scale(.5); }
[data-theme="dark"] .ico-sun  { opacity: 0; transform: rotate(80deg) scale(.5); }
[data-theme="dark"] .ico-moon { opacity: 1; transform: rotate(0) scale(1); }

/* --- mobilmenyn ---------------------------------------------
   Tre streck där det mellersta är kortare och grönt, och som viks
   ihop till ett kryss. Bakom den ligger en hel sida med länkarna
   och mejladressen som annars trängs i sidhuvudet.
   ------------------------------------------------------------ */

.burger {
  display: none;
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  flex: none;
}

.burger span {
  position: absolute;
  left: 6px;
  height: 2px;
  width: 22px;
  background: var(--ink);
  transition: transform .42s var(--ease), opacity .2s ease, width .42s var(--ease), background-color .3s ease;
}

.burger span:nth-child(1) { top: 11px; }
.burger span:nth-child(2) { top: 16px; width: 13px; background: var(--accent); }
.burger span:nth-child(3) { top: 21px; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.sheet {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  padding: 96px var(--edge) 48px;
}

.sheet[hidden] { display: none; }

.sheet__nav { display: flex; flex-direction: column; gap: 6px; }

.sheet__nav a {
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(44px, 15vw, 78px);
  line-height: 1.02;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  opacity: 0;
  transform: translateY(18px);
}

.sheet__nav a.is-active { color: var(--accent); }

.sheet.is-open .sheet__nav a { animation: sheetIn .6s var(--ease) forwards; }
.sheet.is-open .sheet__nav a:nth-child(1) { animation-delay: .06s; }
.sheet.is-open .sheet__nav a:nth-child(2) { animation-delay: .13s; }

@keyframes sheetIn { to { opacity: 1; transform: none; } }

.sheet__meta { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--line); padding-top: 26px; }
.sheet__mail { font-size: 17px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line-hard); align-self: flex-start; padding-bottom: 2px; }
.sheet__mail:hover { color: var(--accent); border-bottom-color: var(--accent); }
.sheet__socks { display: flex; gap: 20px; align-items: center; color: var(--muted); }
.sheet__socks a { display: inline-flex; text-decoration: none; }
.sheet__socks a:hover { color: var(--accent); }
.sheet__place { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }

body.meny-oppen { overflow: hidden; }

/* --- hjälten ------------------------------------------------ */

/* Hjälten är en skärm. Allt ska rymmas utan att man scrollar:
   rubriken, gubben, telefongalleriet bakom och knappen nederst. */
.hero {
  position: relative;
  z-index: 1;
  height: calc(100svh - var(--top-h, 71px));
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

/* bakgrundslagret: en kortlek bredvid figuren som bläddras om i
   exakt samma takt som rubriken under. --i är kortets plats i leken,
   0 är överst. */
/* Aningen mjukare och mattare än förgrunden. Det är hela
   djupeffekten: inget sken, ingen 3D, bara att bakgrunden inte är
   lika skarp som gubben. */
.stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: saturate(0.82); }

.stage::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(42% 72% at 50% 54%, var(--canvas) 0%, var(--canvas) 40%, color-mix(in srgb, var(--canvas) 72%, transparent) 66%, transparent 90%),
    linear-gradient(to bottom, var(--canvas) 0%, transparent 16%, transparent 84%, var(--canvas) 100%);
}

/* Telefonerna går som ett band bakom figuren, åt motsatt håll mot
   textbandet under hjälten och på samma varvtid, 30 sekunder.
   Uppsättningen ligger dubbel så varvet går runt utan skarv.
   Rundade hörn och urtag är enda undantaget från fyrkantsregeln. */

.phones {
  position: absolute;
  top: 52%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  opacity: var(--shot-opacity);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.phones__track {
  display: flex;
  gap: clamp(10px, 1.4vw, 26px);
  align-items: center;
  width: max-content;
  animation: bandBak 30s linear infinite;
}

@keyframes bandBak {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Galleriet står i en flack skål runt gubben: ytterkanterna sitter lägre
   och lutar utåt, mitten står rakt. Mönstret upprepas var sjunde telefon
   så bågen håller i sig medan bandet rullar. */
.phones__track .phone:nth-child(7n+1) { transform: translateY(7%)   rotate(-13deg); }
.phones__track .phone:nth-child(7n+2) { transform: translateY(3.6%) rotate(-8.5deg); }
.phones__track .phone:nth-child(7n+3) { transform: translateY(1.2%) rotate(-4deg); }
.phones__track .phone:nth-child(7n+4) { transform: translateY(0)    rotate(0deg); }
.phones__track .phone:nth-child(7n+5) { transform: translateY(1.2%) rotate(4deg); }
.phones__track .phone:nth-child(7n+6) { transform: translateY(3.6%) rotate(8.5deg); }
.phones__track .phone:nth-child(7n+7) { transform: translateY(7%)   rotate(13deg); }

.phone {
  flex: none;
  height: clamp(240px, 42vh, 500px);
  aspect-ratio: 9 / 19.5;
  border-radius: clamp(20px, 3vw, 42px);
  border: 1px solid var(--line-hard);
  background: var(--panel);
  overflow: hidden;
  position: relative;
  box-shadow: 0 40px 80px -60px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
}

.phone__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 3.2%;
  min-height: 14px;
  background: var(--ink);
  opacity: .5;
  border-bottom-left-radius: 999px;
  border-bottom-right-radius: 999px;
  z-index: 2;
}

/* Skärmbilder i galleriet: riktiga skärmdumpar och några
   platshållar-appar, gråskala i vila och färg vid hovring. Bandet i sig
   är dekorativt (pointer-events: none på .stage), så .phone tar tillbaka
   pekhändelser bara för det här hovret. */
.phone__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(0.55) contrast(1.05) brightness(0.97);
  transition: filter 0.5s var(--ease);
}

.phone:hover .phone__shot,
.phone:focus-visible .phone__shot {
  filter: grayscale(0) contrast(1) brightness(1);
}

@media (prefers-reduced-motion: reduce) {
  .phone__shot { transition: none; }
}

/* flytande symboler */
.chips { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Tre symboler ligger framför kroppen i stället för bakom, så att
   djupet blir läsbart: bakgrund, luft, gubbe, och sedan det här. */
.chips--fram { z-index: 4; }
.chips--fram .chip { opacity: 0.34; filter: blur(0.5px); font-size: 15px; }
.chip--f1 { --x: 11%; --y: 66%; --c: var(--accent); animation-delay: -3.1s; }
.chip--f2 { --x: 88%; --y: 64%; animation-delay: -6.4s; }
.chip--f3 { --x: 83%; --y: 24%; --c: var(--accent); animation-delay: -1.7s; }

/* Bara text, ingen bricka. Egen dämpad färg per språk, låg opacitet,
   så de ligger i luften bakom typen i stället för att konkurrera med den. */
.chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--c, var(--muted));
  opacity: 0.42;
  translate: var(--px, 0) var(--py, 0);
  animation: bob 9s ease-in-out infinite;
  animation-delay: var(--t, 0s);
  will-change: translate, transform;
}

[data-theme="dark"] .chip { opacity: 0.5; filter: brightness(1.6) saturate(1.15); }

/* Plats och färg per symbol. Låg i style-attribut tidigare, men sajtens
   CSP tillåter ingen inline-style, så de blockerades i drift. */
.chip--1 { --c: #4b6f9c; --x: 4%; --y: 16%; --t: 0s; }
.chip--2 { --c: #2f8f5f; --x: 5%; --y: 52%; --t: -3.1s; }
.chip--3 { --c: #6d5b9e; --x: 9%; --y: 87%; --t: -1.4s; }
.chip--4 { --c: #4f8046; --x: 93%; --y: 14%; --t: -2.2s; }
.chip--5 { --c: #7a7d78; --x: 95%; --y: 50%; --t: -4.6s; }
.chip--6 { --c: #96793f; --x: 89%; --y: 86%; --t: -0.7s; }
.chip--7 { --c: #3f7fa0; --x: 24%; --y: 6%; --t: -5.3s; }
.chip--8 { --c: #3f8f9c; --x: 74%; --y: 7%; --t: -2.9s; }
.chip--9 { --c: #a35a42; --x: 15%; --y: 93%; --t: -3.8s; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(1.2deg); }
}

/* innehållet */
.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 62px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  /* Inget här inne är klickbart (titel, gubbe, etiketter), så den släpper
     igenom pekhändelser till telefongalleriet bakom vid hovring. */
  pointer-events: none;
}

.stack { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }

.giant {
  margin: 0;
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: calc(clamp(34px, 7.4vw, 116px) * var(--fit, 1));
  line-height: 0.84;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: skewX(-3deg);
  translate: var(--px, 0) var(--py, 0);
  position: relative;
  z-index: 1;
}

.giant__line { display: block; }

/* Rak text. Bokstäverna lutades tidigare var för sig, vilket bara såg
   skevt ut. Referensen har smal tung typ, inte krokig typ. */
.giant__line--2 { color: var(--accent); }
.giant__line--fixed { color: var(--ink); }

/* "Jag gör" plus det roterande ordet på samma rad, i stället för att
   ordet ensamt utgör hela raden. */
.giant__line--row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
}
.giant__line--label { color: var(--ink); }

/* Övre raden skrivs ut och raderas tecken för tecken. Bredden låses
   till det längsta ordet så raden inte hoppar medan den skriver. */
.rota {
  display: inline-block;
  min-width: var(--rota-w, auto);
  white-space: nowrap;
  color: var(--accent);
}

.rota__caret {
  display: inline-block;
  width: 0.07em;
  height: 0.72em;
  margin-left: 0.06em;
  vertical-align: baseline;
  background: var(--accent-bright);
  animation: blink 1.05s steps(1, end) infinite;
}

.rota.is-typing .rota__caret { animation: none; opacity: 1; }

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hero__lede { max-width: 52ch; margin: 22px 0 0; color: var(--muted); font-size: 17px; pointer-events: auto; }
.hero__actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; pointer-events: auto; }
.hero__actions .btn { align-self: auto; }

.cue {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 9px 16px 10px;
  background: var(--ink);
  color: var(--canvas);
  text-decoration: none;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}

.cue:hover { background: var(--accent); color: #fff; }

.cue__text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cue__arrow { animation: nudge 2.6s var(--ease) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* Två rader som flankerar gubben, som rollraderna på referensen. */
.flank {
  position: absolute;
  bottom: 20%;
  margin: 0;
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(13px, 1.15vw, 19px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  z-index: 4;
}

.flank--v { left: 8%; }
.flank--h { right: 8%; }

/* --- scrollkoreografi ---------------------------------------
   --s gar 0 till 1 medan hjalten lamnar skarmen. Javascript skriver
   bara det talet, en gang per bildruta; all rorelse nedan ar css.
   Varje lager har sin egen faktor, sa de lamnar i olika takt och
   djupet blir lasbart. Negativa tal gar uppat (fortare an sidan),
   positiva slapar efter (langsammare an sidan).

   Lager 1  bakgrund, telefonvaggen ...  slapar mest
   Lager 2  flytande symboler
   Lager 3  telefonbandet inuti scenen
   Lager 4  gubben ....................  slapar, sa han ar kvar langst
   Lager 5  rubriken ..................  gar fortast bort

   --k dampar hela grejen; mobilen far halva utslaget i stallet for
   ingen alls. */
.hero { --k: 1; }

.stage {
  transform: translate3d(0, calc(var(--s, 0) * 86px * var(--k)), 0);
  opacity: calc(1 - var(--s, 0) * 0.85);
}

.chips {
  transform: translate3d(0, calc(var(--s, 0) * 46px * var(--k)), 0);
  opacity: calc(1 - var(--s, 0) * 1.25);
}

.phones__track { will-change: transform; }

.flank { opacity: calc(1 - var(--s, 0) * 1.6); }

.giant {
  transform: skewX(-3deg)
             translate3d(0, calc(var(--s, 0) * -104px * var(--k)), 0)
             scale(calc(1 - var(--s, 0) * 0.07));
  opacity: calc(1 - var(--s, 0) * 1.15);
  will-change: transform, opacity;
}

.hero__lede, .hero__actions { opacity: calc(1 - var(--s, 0) * 1.6); }

.cue {
  transform: translateX(-50%) translateY(calc(var(--s, 0) * 60px));
  opacity: calc(1 - var(--s, 0) * 2.4);
}

/* Bandet mellan hjalten och arbetena ar overgangen, inte en vagg:
   det glider in i samma takt som gubben lamnar. */
.band {
  transform: translate3d(0, calc((1 - var(--b, 1)) * 40px), 0);
  opacity: calc(0.6 + var(--b, 1) * 0.4);
}

@media (max-width: 720px) {
  .hero { --k: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .chips, .giant, .cue, .band, .flank, .hero__lede, .hero__actions {
    transform: none;
    opacity: 1;
  }
  .cue { transform: translateX(-50%); }
  .giant { transform: skewX(-3deg); }
}

/* --- band --------------------------------------------------- */

/* Bandet lag forut i skarven mellan hjalten och arbetena och blev en
   vagg dar overgangen skulle vara. Nu star det mellan det byggda och
   det planerade, dar en paus faktiskt behovs. */
.band--mitt { margin: clamp(110px, 15vh, 200px) 0 clamp(120px, 16vh, 210px); }

.band {
  background: var(--ink);
  color: var(--canvas);
  overflow: hidden;
  padding: 14px 0;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.band__track { display: inline-flex; animation: slide 30s linear infinite; will-change: transform; }
.band__track span { font-family: var(--font-mono); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }
.band:hover .band__track { animation-play-state: paused; }

@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- sektioner ---------------------------------------------- */

.section { padding: var(--gap-section) 0; }

/* Hemsidor-sektionen kryper upp i hjaltens sista bit sa det aldrig blir
   en tom skarv mellan dem. Kameran flyttar sig genom samma affisch. */
#arbete { padding-top: clamp(34px, 5.5vh, 76px); margin-top: 0; position: relative; z-index: 2; }

/* Forsta fallet har inget foregaende uppslag att gripa i, sa dess
   siffra ska inte dras upp lika langt. */
.case:first-of-type { margin-top: 0; }
.case:first-of-type .case__no { top: clamp(-62px, -4.2vw, -30px); }
.section--tint { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 72px; max-width: 62ch; }

/* --- hemsidor: rutnat av exempelsajter ----------------------- */

.sites-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--edge);
  margin-bottom: var(--gap-section);
}

.site { display: block; }

.site__link { display: block; text-decoration: none; color: inherit; }

.site__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
}

.site__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .6s var(--ease);
}

.site__link:hover .site__media img,
.site__link:focus-visible .site__media img { transform: scale(1.035); }

.site__foot { padding-top: 18px; }

.site__mark {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
}

.site__title {
  margin: 6px 0 8px;
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.site__text { margin: 0 0 14px; color: var(--muted); font-size: 14.5px; max-width: 40ch; }

.site__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 4px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}

.site__link:hover .site__cta,
.site__link:focus-visible .site__cta { color: var(--accent); border-bottom-color: var(--accent); gap: 16px; }

.site__ctas { display: flex; flex-wrap: wrap; gap: 18px 26px; }

a.site__cta:hover,
a.site__cta:focus-visible { color: var(--accent); border-bottom-color: var(--accent); gap: 16px; }

@media (max-width: 980px) {
  .sites-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .sites-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* --- hemsidor: sa gar det till -------------------------------- */

.how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--edge);
}

.how__steps li { border-top: 1px solid var(--line); padding-top: 18px; }

.how__no {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 14px;
}

.how__steps h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 8px;
}

.how__steps p { margin: 0; color: var(--muted); font-size: 14.5px; }

@media (max-width: 780px) {
  .how__steps { grid-template-columns: 1fr 1fr; gap: 32px var(--edge); }
}
@media (max-width: 480px) {
  .how__steps { grid-template-columns: 1fr; }
}

.split-note {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}

/* Döljs bara när javascript finns som kan visa det igen. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- fall ---------------------------------------------------
   Etikettspalten står kvar medan fallet rullar förbi, så man aldrig
   tappar vilket projekt det handlar om. Avstånden krymper nedåt i
   listan, sidan blir tätare ju längre man kommer.
   ------------------------------------------------------------ */

/* --- fall -----------------------------------------------------
   Ett kort per projekt, byggt som en affisch: skärmbilden fyller
   ytan och namnet, rubriken, taggarna och knappen står samlade
   nederst. Ramen utanför bär "Case 0X". Korten ligger omlott men
   ingenting pinnas fast, allt rör sig med scrollen.
   ------------------------------------------------------------- */

/* Fallen ar affischer, inte kort. Ingen ram, ingen platta, ingen
   inre panel: skarmbilden ligger direkt pa sidan och siffran ar det
   som holler ihop uppslaget. Overlappningen finns kvar, men det ar
   nasta falls siffra som skjuter upp over det foregaende i stallet
   for att tva vita rutor ligger pa varandra. */
.case {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  margin-top: clamp(96px, 13vh, 190px);
  transform: translate3d(0, calc((1 - var(--in, 1)) * 34px), 0);
  opacity: calc(0.7 + var(--in, 1) * 0.3);
}

/* Delarna kommer in var for sig i stallet for att kortet tonas in
   som ett block: bilden skalas upp fran 0,92, texten stiger, och
   numret kommer in fran sidan sist. Bara transform och opacity. */
.case__media img {
  transform: translate3d(0, calc((1 - var(--in, 1)) * 9%), 0)
             scale(calc(0.92 + var(--in, 1) * 0.08));
  opacity: calc(0.35 + var(--in, 1) * 0.65);
  will-change: transform, opacity;
}

.case__foot > * {
  transform: translate3d(0, calc((1 - var(--in, 1)) * 20px), 0);
  opacity: var(--in, 1);
}


.case__no {
  transform: translate3d(calc((1 - var(--in, 1)) * -30px), 0, 0);
  opacity: clamp(0, calc((var(--in, 1) - 0.4) / 0.6), 1);
}

.live { opacity: clamp(0, calc((var(--in, 1) - 0.55) / 0.45), 1); }

@media (prefers-reduced-motion: reduce) {
  .case, .case__media img,
  .case__foot > *, .case__no, .live {
    transform: none;
    opacity: 1;
  }
}

.case:first-of-type { margin-top: 0; }
.case:nth-of-type(1) { z-index: 1; }
.case:nth-of-type(2) { z-index: 2; }
.case:nth-of-type(3) { z-index: 3; }
.case:nth-of-type(4) { z-index: 4; }
.case:nth-of-type(5) { z-index: 5; }
.case:nth-of-type(6) { z-index: 6; }

/* Siffran ar uppslagets ankare: stor, tyst, och den skjuter upp over
   det foregaende fallet sa sidorna griper i varandra. */
.case__no {
  position: absolute;
  top: clamp(-96px, -7vw, -40px);
  left: 0;
  z-index: 0;
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
  pointer-events: none;
  user-select: none;
}

.case__no span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--muted);
}

.case__no b {
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(64px, 9.4vw, 150px);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--line);
}

.case__panel {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: clamp(30px, 4.4vw, 62px);
}

/* Det som inte ar byggt har ingenting att visa, sa det visar
   ingenting: bara typ, och luft omkring. Battre an en streckad ruta
   som latsas vara en skarmbild. */
.case--ord .case__foot { padding: clamp(56px, 9vh, 130px) 0; }
.case--ord .case__title { font-size: clamp(42px, 8.2vw, 128px); }
.case--ord .case__text { max-width: 38ch; }

/* Varannat uppslag vander pa ordningen: bild forst, sedan text, sedan
   tvartom. Det ar rytmen. Fem likadana enheter i rad ar det som far en
   sida att lasa som en mall. */
.case:nth-of-type(even) .case__media { order: 2; }
.case:nth-of-type(even) .case__foot  { order: 1; }

/* skärmbilden får hela den fria ytan och centreras i den */
/* Bilden gar utanfor textspalten. Den ar arbetet, texten ar bildtexten. */
/* Bilden gar utanfor textspalten och ligger i en fast 16:9-ruta.
   Rutan klipper, bilden glider och skalas inuti den: draperiet blir
   en ren transform i stallet for en clip-path som malas om varje
   bildruta. */
.case__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  width: min(114%, calc(100vw - 2 * var(--edge)));
  margin-inline: calc((100% - min(114%, calc(100vw - 2 * var(--edge)))) / 2);
}

/* Samma ruta for alla, olika innehall. Det ar det som gor dem till
   en serie i stallet for olika saker under varandra. */
.case__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  border: 0;
}

.platshallare {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px dashed var(--line-hard);
  display: grid;
  place-items: center;
}

.platshallare .skel--lg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 7%;
  gap: 3.5%;
  opacity: .8;
}

.platshallare .skel__row { height: 16px; }
.platshallare .skel__row--head { height: 26px; width: 46%; }
.platshallare .skel__blocks { min-height: 34%; }

.platshallare__text {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 9px 16px;
  background: var(--panel);
  border: 1px solid var(--line-hard);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
}

.case__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.case__mark {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
}

.case__title {
  margin: 0;
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(38px, 6.8vw, 104px);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.case__text {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 16px;
}

.case__tags {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--muted);
}

/* Lank, inte knapp. En ruta runt tva ord ar formular, inte affisch. */
.case__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}

.case__cta:hover { color: var(--accent); border-bottom-color: var(--accent); gap: 20px; }

.case__state {
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.case__state::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}

/* Satt forut over appens egen logotyp i skarmbilden. Ligger nu
   nertill, dar den inte tacker nagot. */
.live {
  position: absolute;
  bottom: 14px; left: 14px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: var(--canvas);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  z-index: 2;
}

.live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
  animation: pulse 2.4s ease-in-out infinite;
}

/* Inte i drift, bara en fungerande prototyp med exempeldata. Ingen
   pulserande grön prick här, den betyder "live" på riktigt. */
.live--demo::before {
  background: var(--muted);
  animation: none;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 55%, transparent); }
  70%      { box-shadow: 0 0 0 7px transparent; }
}

/* --- gruppetikett: skiljer byggt från planerat ---------------- */

.group {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.group span { color: var(--accent); flex: none; }
.group i { flex: 1 1 auto; height: 1px; background: var(--line); }
.group em { font-style: normal; color: var(--muted); flex: none; font-variant-numeric: tabular-nums; }
.group--soon { margin-top: 72px; }
.works-end { height: 12vh; }
.group--soon span { color: var(--muted); }

/* --- fall som inte är byggda än ------------------------------ */

.case__state {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin: 8px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.case__state::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}

.skel--lg .skel__row { height: 12px; }
.skel--lg .skel__row--head { height: 18px; }

/* --- sidhuvudblock på undersidor ----------------------------- */

.phead { padding: 56px 0 0; border-bottom: 1px solid var(--line); overflow: hidden; }

.phead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: end;
}

.phead__text { display: flex; flex-direction: column; gap: 16px; padding-bottom: 64px; }
.giant--page { align-items: flex-start; font-size: clamp(38px, 7.4vw, 104px); }
.phead__figure { margin: 0; align-self: end; line-height: 0; }
.phead__figure img { height: clamp(260px, 32vw, 460px); width: auto; max-width: none; }

/* porträttet, tills den riktiga bilden ligger på plats */
.phead__portrait { margin: 0 0 64px; align-self: end; }

.portrait {
  position: relative;
  width: clamp(190px, 25vw, 320px);
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  background: var(--panel);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 0;
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent, var(--accent-tint), transparent);
  transform: translateX(-100%);
  animation: shimmer 2.4s ease-in-out infinite;
}

.portrait:has(img)::after, .portrait:has(img) .portrait__note { display: none; }

.portrait__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.section--slim { padding: 0 0 var(--gap-section); }
.policy { max-width: 74ch; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 26px; }
.policy .small { color: var(--muted); margin: 0; }

/* --- fallstudie ----------------------------------------------- */

.case-shot { border: 1px solid var(--line); overflow: hidden; margin: 0 0 var(--gap-section); }
.case-shot img { width: 100%; height: auto; display: block; }

.case-body { display: flex; flex-direction: column; gap: 48px; max-width: 68ch; }

.case-block h2 {
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.case-block p { margin: 0; color: var(--muted); max-width: 62ch; }
.case-block p + p { margin-top: 12px; }

/* --- bakgrund ----------------------------------------------- */

.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.about__prose { display: flex; flex-direction: column; gap: 18px; max-width: 58ch; }
.about__prose p { margin: 0; }

.spec { width: 100%; border-collapse: collapse; text-align: left; }
.spec caption { text-align: left; padding-bottom: 16px; }
.spec th, .spec td { border-top: 1px solid var(--line); padding: 14px 0; vertical-align: top; font-weight: 400; }
.spec th { width: 36%; padding-right: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.spec tr:last-child td, .spec tr:last-child th { border-bottom: 1px solid var(--line); }
.spec .yr { font-variant-numeric: tabular-nums; color: var(--accent); }

/* --- kontakt ------------------------------------------------ */

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.contact__list { list-style: none; margin: 26px 0 0; padding: 0; }
.contact__list li { border-top: 1px solid var(--line); padding: 14px 0; }
.contact__list li:last-child { border-bottom: 1px solid var(--line); }

.form { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: flex; flex-direction: column; gap: 7px; }
.form__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

.form input, .form textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--canvas);
  border: 1px solid var(--line-hard);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
}

.section--tint .form input, .section--tint .form textarea { background: var(--panel); }
.form input:focus, .form textarea:focus { border-color: var(--accent); outline: none; }
.form textarea { resize: vertical; min-height: 150px; }
.form input::placeholder, .form textarea::placeholder { color: var(--muted); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-width: 2px; border-color: #d2453b; }

.form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.form__status { font-size: 14px; margin: 0; }
.form__status[hidden] { display: none; }
.consent { font-size: 13px; color: var(--muted); max-width: 52ch; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- sidfot: en svart platta, monogrammet stort, inget annat --- */

.foot {
  background: #080a09;
  color: #f4f4f2;
  min-height: 100svh;
  padding: 96px var(--edge) 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
}

.foot__inner { display: grid; justify-items: center; gap: 44px; margin: auto 0; }

.foot__contact { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; }

.foot__mail {
  font-size: 17px;
  font-weight: 500;
  color: #f4f4f2;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 244, 242, 0.3);
  padding-bottom: 2px;
  transition: border-color .18s ease, color .18s ease;
}
.foot__mail:hover { color: var(--accent-bright); border-bottom-color: var(--accent-bright); }

.foot__sock {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgba(244, 244, 242, 0.55);
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.foot__sock .ico-in { font-size: 19px; }
.foot__sock:hover { color: var(--accent-bright); transform: translateY(-2px); }

.foot__mark {
  width: min(440px, 68vw);
  height: auto;
  color: #f4f4f2;
  display: block;
}

.foot__year {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 3px;
  color: rgba(244, 244, 242, 0.55);
  margin: 0;
}

.foot__fine { margin: 0; text-align: center; }
.foot__fine a {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.4);
  text-decoration: none;
}
.foot__fine a:hover { color: var(--accent-bright); }

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

@media (max-width: 1180px) {
  .top__mail { display: none; }
}

@media (max-width: 1000px) {
  :root { --gap-section: 88px; }
  .about, .contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .case { gap: 26px; }
  .case__no b { font-size: clamp(56px, 12vw, 96px); }
  .card--e { display: none; }
  .phead__inner { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; }
  .phead__figure img { height: 300px; }
}

@media (max-width: 720px) {
  :root { --edge: 18px; --gap-section: 68px; }

  .top__inner { grid-template-columns: auto 1fr auto; gap: 8px; padding: 8px var(--edge); }
  .place, .top__mail, .top__sock, .top__rule { display: none; }
  .brand__mark { width: 46px; height: 46px; }
  .burger { display: block; }
  .top__side { gap: 4px; }

  /* menyn större och mitt i */
  .pill { padding: 10px 16px; font-size: 15px; letter-spacing: 1.2px; }
  .pills { gap: 2px; }
  /* Kontakt får plats i burgarmenyns sheet, inte i den smala pill-raden. */
  .pill--kontakt { display: none; }

  .hero { height: auto; min-height: auto; padding: 40px 0 48px; }
  .flank { display: none; }
  /* Rörigt på smala skärmar: ordmolnet och "se arbetet"-knappen
     under två redan synliga knappar. Bort på mobil i stället för
     att klämmas in. */
  .chips, .chips--fram, .cue { display: none; }
  .giant { font-size: calc(clamp(30px, 11.5vw, 78px) * var(--fit, 1)); }
  .hero__lede { font-size: 16px; margin-top: 20px; }
  .hero__actions { margin-top: 22px; }

  .phone { height: 40vh; }

  /* varje projekt som eget kort, och scrollen snäpper till nästa */
  .case { padding: 0; margin-top: clamp(72px, 16vh, 120px); }
  .case__no { left: 0; top: clamp(-58px, -13vw, -34px); }
  .case__panel { min-height: 0; padding: 0; gap: 26px; }
  .case__title { font-size: clamp(32px, 11vw, 56px); }
  .case__text { font-size: 15px; }
  .case__text { font-size: 16px; }
  .group--soon { margin-top: 44px; }

  .phead { padding-top: 34px; }
  .phead__inner { gap: 8px; }
  .phead__text { padding-bottom: 40px; }
  .phead__figure img { height: 210px; }
  .portrait { width: 132px; }
  .phead__portrait { margin-bottom: 40px; }

  .foot { padding-top: 68px; min-height: 100svh; }
  .foot__mark { width: 72vw; }
  .foot__mail { font-size: 15px; }
  .foot__fine { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .band__track, .cue__arrow, .live::before, .rota__caret,
  .skel__row::after, .skel__blocks i::after { animation: none; }
  * { transition-duration: .01ms !important; }
}

@media print {
  .top, .foot, .form, .boot, .stage, .chips, .band, .cue { display: none; }
  body { font-size: 12px; }
  .hero { min-height: auto; }
}

/* ===========================================================
   Tredje omgången, 2026-09-23: utvalda projekt som fallstudier,
   bakgrund ur CV:t, och mer rörelse. All rörelse använder --ease,
   rör bara transform, opacity och clip-path, och stängs av vid
   prefers-reduced-motion längst ned.
   =========================================================== */

/* --- utvalda projekt: ett projekt per rad --------------------- */

.features { display: flex; flex-direction: column; gap: clamp(96px, 14vw, 180px); }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.feature--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.feature--flip .feature__media { order: 2; }

/* Ramen avtäcks nerifrån när projektet kommer in i vyn, och bilden
   inuti panorerar långsammare än sidan (--p sätts av script.js). */
.feature__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: clip-path 1.3s var(--ease) .1s, border-color .3s var(--ease);
}
.js .feature__media { clip-path: inset(100% 0 0 0); }
.feature.is-visible .feature__media { clip-path: inset(0 0 0 0); }
.feature__media:hover, .feature__media:focus-visible { border-color: var(--accent); }
/* LindeMoskes skärmbild är bredare än 16:10, ramen följer bilden i stället för att beskära den. */
.feature__media--wide { aspect-ratio: 1400 / 728; }

.feature__media img {
  position: absolute;
  left: 0; top: -5%;
  width: 100%; height: 110%;
  object-fit: cover;
  object-position: center top;
  transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -8%), 0);
  scale: 1.06;
  transition: scale 1.6s var(--ease);
  will-change: transform;
}
.feature.is-visible .feature__media img { scale: 1; }

.feature__body { position: relative; isolation: isolate; }

/* Siffran står ovanför rubriken som kontur och glider i egen takt. */
.feature__no {
  display: block;
  margin: 0 0 14px -0.04em;
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(84px, 9vw, 140px);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-hard);
  pointer-events: none;
  translate: 0 var(--sy, 0);
  will-change: translate;
}

.feature__title {
  margin: 8px 0 16px;
  font-family: var(--font-poster);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  hyphens: manual;
}
.feature__title a { text-decoration: none; transition: color .3s var(--ease); }
.feature__title a:hover, .feature__title a:focus-visible { color: var(--accent); }

.feature__text { margin: 0 0 26px; color: var(--muted); max-width: 46ch; }

.facts { margin: 0 0 30px; display: grid; gap: 0; }
.facts > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { margin: 0; font-size: 15px; }

.feature__ctas { display: flex; flex-wrap: wrap; gap: 18px 30px; }
.site__cta--quiet { border-bottom-color: var(--line-hard); }

.more { margin-top: 0; }
.sites-grid--two { grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }

/* --- rubriker som reser sig ur en mask ------------------------ */

.ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.ln > span { display: block; transform: translateY(108%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--l, 0) * 110ms + 80ms); }
.is-visible .ln > span, .ln.is-visible > span { transform: none; }

/* --- hjälten: bokstäverna kommer in en i taget ---------------- */

.giant .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotate(4deg);
}
.is-ready .giant .ch {
  animation: chIn 1s var(--ease) forwards;
  animation-delay: calc(var(--i) * 34ms + 120ms);
}
.is-ready .giant .giant__line--2 .ch { animation-delay: calc(var(--i) * 34ms + 360ms); }

@keyframes chIn { to { opacity: 1; transform: none; } }

.hero .kicker, .hero__lede, .hero__actions { animation: fadeUp 1s var(--ease) both; }
.hero .kicker { animation-delay: .75s; }
.hero__lede { animation-delay: .9s; }
.hero__actions { animation-delay: 1.05s; }
body:not(.is-ready) .hero .kicker, body:not(.is-ready) .hero__lede, body:not(.is-ready) .hero__actions { animation-play-state: paused; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* --- bakgrund: tidslinje som ritas medan man scrollar ----------- */

.path { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; max-width: 900px; }
.path::before, .path::after {
  content: "";
  position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 1px;
}
.path::before { background: var(--line); }
.path::after { background: var(--accent); transform: scaleY(var(--t, 0)); transform-origin: top; }

.path__item {
  position: relative;
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 24px;
  padding: 0 0 48px;
}
.path__item::before {
  content: "";
  position: absolute; left: -32px; top: 8px;
  width: 9px; height: 9px;
  background: var(--canvas);
  border: 1px solid var(--accent);
  transition: background-color .5s var(--ease) .3s;
}
.section--tint .path__item::before { background: var(--panel); }
.path__item.is-visible::before { background: var(--accent); }

.path__yr { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--accent); line-height: 1.5; font-variant-numeric: tabular-nums; }
.path__yr span { display: block; color: var(--muted); }
.path__title { margin: 0 0 8px; font-family: var(--font-body); font-size: 19px; font-weight: 600; letter-spacing: -0.3px; }
.path__item p:not(.path__yr) { margin: 0; color: var(--muted); max-width: 62ch; }
.path__item p + p { margin-top: 10px; }
.path__more { margin: 8px 0 0 28px; }

/* --- fallstudier ---------------------------------------------- */

.case-shot { position: relative; }
.case-shot--frame { aspect-ratio: 16 / 10; }
.case-shot--frame img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; object-position: top center; transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * -10%), 0); }
.js .case-shot.reveal { clip-path: inset(100% 0 0 0); opacity: 1; transform: none; transition: clip-path 1.3s var(--ease); }
.js .case-shot.reveal.is-visible { clip-path: inset(0 0 0 0); }

.case-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 0 var(--gap-section);
}
.case-facts > div { padding: 18px 20px 20px 0; }
.case-facts > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.case-facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.case-facts dd { margin: 0; font-size: 15px; }

.case-gallery {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
  gap: var(--edge);
  margin: 0 0 var(--gap-section);
  align-items: start;
}
.case-gallery figure { margin: 0; border: 1px solid var(--line); overflow: hidden; }
.case-gallery figcaption, .case-shot figcaption {
  padding: 12px 14px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; color: var(--muted); background: var(--panel);
}
.case-gallery img { width: 100%; height: auto; }
.case-gallery figure:nth-child(2) { translate: 0 var(--sy, 0); }

.case-block--wide { max-width: none; }
.case-block ul { margin: 12px 0 0; padding-left: 1.1em; color: var(--muted); max-width: 62ch; }
.case-block li + li { margin-top: 6px; }
.case-block code { font-family: var(--font-mono); font-size: 0.88em; color: var(--ink); }

.case-next {
  margin-top: var(--gap-section);
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap;
}
.case-next a { text-decoration: none; }
.case-next__title {
  display: block; margin-top: 8px;
  font-family: var(--font-poster); font-weight: 900; font-stretch: 62%;
  font-size: clamp(36px, 5vw, 72px); line-height: 0.95; text-transform: uppercase;
  transition: color .3s var(--ease);
}
.case-next a:hover .case-next__title, .case-next a:focus-visible .case-next__title { color: var(--accent); }

.giant--page .ch { display: inline-block; }
.giant .w { display: inline-block; white-space: nowrap; }
.case-shot--wide { aspect-ratio: 1400 / 728; }

/* --- smalare skärmar ------------------------------------------ */

@media (max-width: 980px) {
  .feature, .feature--flip { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .feature--flip .feature__media { order: 0; }
  .feature__no { font-size: clamp(72px, 20vw, 120px); }
  .case-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .case-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .sites-grid--two { grid-template-columns: 1fr; gap: 44px; }
  .feature__no { translate: none; }
  .facts > div { grid-template-columns: 7.2em 1fr; }
  .path { padding-left: 22px; }
  .path__item { grid-template-columns: 1fr; gap: 6px; padding-bottom: 36px; }
  .path__item::before { left: -26px; }
  .path__yr span { display: inline; margin-left: 8px; }
  .path__more { margin-left: 22px; }
  .case-gallery { grid-template-columns: 1fr; }
  .case-gallery figure:nth-child(2) { translate: none; max-width: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .feature__media, .case-shot.reveal { clip-path: none !important; }
  .feature__media img, .case-shot--frame img { transform: none; scale: 1; }
  .feature__no, .case-gallery figure:nth-child(2) { translate: none; }
  .ln > span { transform: none; }
  .giant .ch { opacity: 1; transform: none; animation: none !important; }
  .hero .kicker, .hero__lede, .hero__actions { animation: none; }
  .path::after { transform: none; }
}

/* ---------- kopierad mejl och gnistan ---------- */
.js-copy-mail { cursor: copy; }
.js-spark { cursor: pointer; user-select: none; }
.spark-layer { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.spark { position: absolute; display: block; }
.spark-ring { position: absolute; display: block; width: 12px; height: 12px; border: 1.5px solid; }
.copied {
  position: fixed; z-index: 10000; pointer-events: none; white-space: nowrap;
  padding: 7px 10px; background: var(--ink); color: var(--canvas);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
}
.sites-grid--three { margin-bottom: 0; }