@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/fraunces-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/fraunces-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--page);

  /* Fyra ljusfalt som upprepas nedat med OLIKA intervall: 1700, 2100, 2600
     och 3100 px. Perioderna gar inte jamnt upp i varandra, sa de hamnar aldrig
     i takt och det laser sig inte som ett monster.

     RAKNEREGELN SOM MASTE HALLAS, annars kapas ljusfalten rakt av:
     varje blobb maste rymmas HELT inuti sin bricka i hojdled. Radien blir
     stoppprocenten gange avstandet till brickans lagst bort liggande horn, och
     det avstandet vaxer med skarmbredden. Darfor:

       centrum pa y omkring 50 % av brickan  +  stopp hogst 30 %

     Da spanner blobben som mest cirka 0,45 x brickhojden och nar aldrig kanten,
     inte ens pa en 2560 px bred skarm. Klippning i SIDLED ar ofarlig, den sker
     vid skarmkanten precis som hjaltens egna gradienter.

     Forsta versionen hade centrum pa 16 % och 22 % med stopp pa 34 %. Blobbarna
     stack da ut over brickans over- och underkant och kapades i en rak linje
     tvars over sidan, tydligast bakom navmenyn. Sank aldrig y mot kanten. */
  /* Tat karna, lang svans. Varje ljusfalt gar fran full styrka i mitten till
     45 procent vid 13 procent av radien, 15 procent vid 22, och noll vid
     stoppet. Falloffen ar alltsa brant forst och flack sedan, vilket ger en
     tydlig karna utan att kanten nagonsin blir synlig.

     Toppvardena ar hogre an vid en jamn toning (0,14 till 0,22 mot tidigare
     0,075 till 0,13) just for att det ljusa omradet nu ar litet. Riktmarket
     "hall dig under 0,14" gallde en JAMN alfa over hela blobben.

     STOPPEN I PROCENT AR OFORANDRADE. Det ar de som styr geometrin och
     rakneregeln Cy +- S x Ry, se avsnittet ovan. Andra garna fargstoppen,
     men flytta aldrig det yttersta utan att rakna om. */
  background-image:
    radial-gradient(circle at 14% 50%,
      var(--splash-1) 0%,
      color-mix(in srgb, var(--splash-1) 45%, transparent) 13%,
      color-mix(in srgb, var(--splash-1) 15%, transparent) 22%,
      transparent 30%),
    radial-gradient(circle at 88% 47%,
      var(--splash-2) 0%,
      color-mix(in srgb, var(--splash-2) 45%, transparent) 12%,
      color-mix(in srgb, var(--splash-2) 15%, transparent) 20%,
      transparent 27%),
    radial-gradient(circle at 32% 53%,
      var(--splash-3) 0%,
      color-mix(in srgb, var(--splash-3) 45%, transparent) 11%,
      color-mix(in srgb, var(--splash-3) 15%, transparent) 19%,
      transparent 26%),
    radial-gradient(circle at 72% 49%,
      var(--splash-2) 0%,
      color-mix(in srgb, var(--splash-2) 45%, transparent) 10%,
      color-mix(in srgb, var(--splash-2) 15%, transparent) 18%,
      transparent 24%);
  background-size:
    100% 1700px, 100% 2100px, 100% 2600px, 100% 3100px;
  background-repeat: repeat-y;
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Startsidan scrollar sedan 2026-09-06. Hjalten fyller fortfarande hela
   forsta skarmen, resten av sidan ligger under den. Se project_startsidan_hojd. */
body.home { min-height: 100dvh; }
body.home .hero {
  flex: 0 0 auto;
  min-height: calc(100dvh - var(--nav-h, 84px));
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

html.is-preloading body {
  overflow: hidden;
  animation: preloaderScrollRelease 0.01s linear 2.85s both;
}
@keyframes preloaderScrollRelease {
  from { overflow: hidden; }
  to { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-preloading body { animation-delay: 0.7s; }
}

:root {

  --bg: #FFFFFF;

  /* Sidan ar neutral off-white, panelerna rent vita. Det ar skillnaden mellan
     dem som ger djup, inte en starkare farg. Var #FAF9F7 en kort stund, men
     den kramtonen plus terrakottan gjorde sajten till en Micki-kopia. */
  --page: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --ink: #14171C;
  --muted: #5C6472;
  --border: #E6E5E3;
  --border-strong: #14171C;

  --accent: #1A6FD4;
  --accent-dark: #12539F;
  --accent-bright: #4392F1;
  --accent-soft: #6FB0F7;
  --accent-soft-rgb: 111, 176, 247;
  --accent-deep: #0A3A73;
  --accent-deep-rgb: 10, 58, 115;
  --clay: #C1502E;

  /* Strukturfargen, 2026-09-06. Var terrakotta #A8442A i nagra timmar men
     Hamid sag att den gjorde Kodivo till en kopia av Micki, som har rostrod
     bjorn pa kramvit botten. Nu hallon, som varken Micki eller Neighbourhood
     anvander.
     Blatt bar navigationen, svart handlingen, det har bar STRUKTUREN
     (kapitelmarkorer och etiketter). Ta det aldrig till en knapp eller lank.
     --clay ar kvar for fel och varningar och ska inte anvandas dekorativt. */
  --accent-alt: #A8325A;
  --accent-alt-light: #E8809F;

  --logo-accent: var(--accent-bright);

  --accent-rgb: 26, 111, 212;
  --accent-bright-rgb: 67, 146, 241;
  --accent-dark-rgb: 18, 83, 159;
  --ink-rgb: 20, 23, 28;
  --surface-2-rgb: 255, 255, 255;
  --clay-rgb: 193, 80, 46;
  --accent-alt-rgb: 168, 50, 90;

  /* Blaa ljusfalt i bakgrunden, 2026-09-06. Samma sprak som glodet runt
     orben och som .chapter--dark::before redan anvander, fast utspritt over
     hela sidan.

     Ritas som radial-gradient pa <body>, alltsa ingen bildfil, inga extra
     element och ingenting som kan hamna i vagen for text. Storlekarna ar i
     PIXLAR med flit: procent hade skalat blobbarna med sidhojden och gjort
     dem groteska pa en lang sida.

     Over 0.14 i alfa borjar de lasa sig som farg pa sidan i stallet for ljus
     bakom den. Hall dig under. */
  --splash-1: rgba(var(--accent-bright-rgb), 0.20);
  --splash-2: rgba(var(--accent-bright-rgb), 0.14);
  --splash-3: rgba(var(--accent-bright-rgb), 0.22);

  /* Knappfyllningen, 2026-09-06. Hamid valde nastan svarta knappar.
     Systemet ar: SVART = handling (knappar), BLATT = navigation och
     assistenten (lankar, fokus, orb, chattens skickknapp), VARMT = struktur
     (kapitelmarkorer). Byt bara har, .btn-primary laser --cta. */
  --cta: #14171C;
  --cta-hover: #2A2F38;
  --cta-rgb: 20, 23, 28;

  --nav-h: 84px;
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(155deg, var(--accent) 0%, var(--accent-dark) 100%);
  clip-path: inset(0 0 0 0);
  animation: preloaderExit 0.75s cubic-bezier(.65,0,.35,1) forwards;
  animation-delay: 2s;
}
html.no-preloader .preloader { display: none; }

.preloader-word-stack {
  position: relative;
  height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preloader-word {
  position: absolute;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 2.1rem;
  letter-spacing: -0.01em;
  color: var(--bg);
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px) scale(0.96);
  animation: preloaderWordCycle 0.4s ease forwards;
}
.preloader-word:nth-child(1) { animation-delay: 0s; }
.preloader-word:nth-child(2) { animation-delay: 0.4s; }
.preloader-word:nth-child(3) { animation-delay: 0.8s; }
.preloader-word--brand {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
  font-style: normal;
  font-weight: 600;
  animation-name: preloaderWordFinal;
  animation-delay: 1.2s;
  animation-duration: 0.5s;

  --logo-accent: var(--accent-soft);
}
.preloader-mark {
  width: 1.62em;
  height: 1.62em;
  flex: 0 0 auto;
}

@keyframes preloaderWordCycle {
  0%   { opacity: 0; filter: blur(6px); transform: translateY(12px) scale(0.96); }
  25%  { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  75%  { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
  100% { opacity: 0; filter: blur(6px); transform: translateY(-12px) scale(0.96); }
}
@keyframes preloaderWordFinal {
  0%   { opacity: 0; filter: blur(6px); transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes preloaderExit {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); pointer-events: none; }
}

@media (min-width: 640px) {
  .preloader-word { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {

  .preloader-word { animation: none !important; opacity: 0 !important; }
  .preloader-word--brand { opacity: 1 !important; filter: none !important; transform: none !important; }
  .preloader {
    animation: preloaderExit 0.3s ease forwards;
    animation-delay: 0.4s;
  }
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
}
body { padding-top: var(--nav-h, 84px); }
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.logo-mark {
  width: 1.62em;
  height: 1.62em;
  flex: 0 0 auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 0.95rem;
  color: rgba(var(--ink-rgb), 0.8);
}
.nav-links a {
  position: relative;
  padding-bottom: 4px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(.22,.9,.32,1);
}
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--cta);
  color: #FFFFFF;
  font-size: 0.92rem;
  padding: 10px 22px;
  box-shadow: 0 1px 2px rgba(var(--cta-rgb), 0.2), 0 8px 20px -8px rgba(var(--cta-rgb), 0.45);
  transition: transform 0.18s cubic-bezier(.22,.9,.32,1), box-shadow 0.18s ease, background-color 0.18s ease;
}
.btn-primary:hover {
  background: var(--cta-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(var(--cta-rgb), 0.22), 0 14px 28px -10px rgba(var(--cta-rgb), 0.5);
}
.btn-primary:active { transform: translateY(1px) scale(0.99); }

.nav-cta { display: none; }
.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.menu-btn:active { transform: translateY(1px) scale(0.97); }

.menu-icon {
  position: relative;
  width: 18px;
  height: 12px;
}
.menu-icon span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform 0.35s cubic-bezier(.22,.9,.32,1), top 0.35s cubic-bezier(.22,.9,.32,1);
}
.menu-icon span:nth-child(1) { top: 0; }
.menu-icon span:nth-child(2) { top: 100%; margin-top: -1.5px; }
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(1) {
  top: 50%;
  margin-top: -0.75px;
  transform: rotate(45deg);
}
.menu-btn[aria-expanded="true"] .menu-icon span:nth-child(2) {
  top: 50%;
  margin-top: -0.75px;
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;

  z-index: 25;
  background: var(--bg);

  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.42s cubic-bezier(.22,.9,.32,1), visibility 0s linear 0.42s;
}
.mobile-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.26s ease, transform 0.42s cubic-bezier(.22,.9,.32,1), visibility 0s linear 0s;
}

.mobile-menu-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 84px 24px 28px;
}

.mobile-menu-links {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mobile-menu-links a {
  padding: 17px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,.9,.32,1);
}
.mobile-menu-links a:last-child { border-bottom: none; }
.mobile-menu-links a.active { color: var(--accent-dark); font-weight: 600; }
.mobile-menu[data-open="true"] .mobile-menu-links a {
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu-links a:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu-links a:nth-child(2) { transition-delay: 0.14s; }
.mobile-menu-links a:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu-links a:nth-child(4) { transition-delay: 0.26s; }
.mobile-menu-links a:nth-child(5) { transition-delay: 0.32s; }

.mobile-menu-mark {
  order: 1;
  align-self: center;
  margin: 26px 0 22px;
  width: 30px;
  height: 30px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.38s, transform 0.4s cubic-bezier(.22,.9,.32,1) 0.38s;
  pointer-events: none;
}
.mobile-menu[data-open="true"] .mobile-menu-mark {
  opacity: 0.3;
  transform: translateY(0);
}

.mobile-menu-cta {
  order: 2;
  align-self: stretch;
  padding: 15px 24px;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.44s, transform 0.4s cubic-bezier(.22,.9,.32,1) 0.44s;
}
.mobile-menu[data-open="true"] .mobile-menu-cta {
  opacity: 1;
  transform: translateY(0);
}

body.mobile-menu-open { overflow: hidden; }

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-links a,
  .mobile-menu-cta,
  .mobile-menu-mark,
  .menu-icon span {
    transition: none !important;
  }
}

.hero {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  /* ALLA fem maste rymmas i hojdled inuti hjaltens ruta, annars kapas de rakt
     av vid over- eller underkanten. Hjalten har overflow: hidden, sa kanten ar
     hard. Den syntes tydligast som en linje under navmenyn.

     Regeln: med "radial-gradient(Rx Ry at Cx Cy, farg 0%, transparent 70%)"
     ar den synliga radien 0,7 x Ry. Da kravs

         Cy - 0,7 x Ry  >=  0        och        Cy + 0,7 x Ry  <=  100

     De gamla vardena brot mot bada, till exempel "at 50% 0%" som lag med halva
     blobben ovanfor kanten. Andra aldrig Cy narmare kanten utan att rakna om. */
  background:
    radial-gradient(50% 34% at 78% 30%, rgba(var(--accent-bright-rgb), 0.10) 0%, rgba(var(--accent-bright-rgb), 0) 70%),
    radial-gradient(40% 30% at 20% 74%, rgba(var(--accent-bright-rgb), 0.07) 0%, rgba(var(--accent-bright-rgb), 0) 70%),
    radial-gradient(60% 30% at 50% 34%, rgba(var(--accent-bright-rgb), 0.05) 0%, rgba(var(--accent-bright-rgb), 0) 70%),
    radial-gradient(46% 30% at 14% 30%, rgba(var(--accent-alt-rgb), 0.07) 0%, rgba(var(--accent-alt-rgb), 0) 70%),
    radial-gradient(40% 28% at 88% 78%, rgba(var(--accent-alt-rgb), 0.05) 0%, rgba(var(--accent-alt-rgb), 0) 70%);
  filter: blur(30px);
}
.bg-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-bright-rgb), 0.5) 0%, rgba(var(--accent-bright-rgb), 0) 70%);
  animation: sparkDrift 14s ease-in-out infinite;
  opacity: 0;
}
.bg-spark:nth-child(1) { top: 18%; left: 12%; animation-delay: 0s; }
.bg-spark:nth-child(2) { top: 65%; left: 8%;  animation-delay: 2.2s; width: 3px; height: 3px; }
.bg-spark:nth-child(3) { top: 30%; left: 92%; animation-delay: 4.5s; }
.bg-spark:nth-child(4) { top: 78%; left: 88%; animation-delay: 1.2s; width: 5px; height: 5px; }
.bg-spark:nth-child(5) { top: 50%; left: 50%; animation-delay: 6.8s; width: 3px; height: 3px; }
.bg-spark:nth-child(6) { top: 10%; left: 60%; animation-delay: 3.4s; }

@keyframes sparkDrift {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.8); }
  20%  { opacity: 0.7; }
  50%  { opacity: 0.4; transform: translate(14px, -22px) scale(1.2); }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-10px, 10px) scale(0.8); }
}

.hero-inner {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  width: 100%;
}
.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(8px, 1.8vh, 18px);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  padding: 10px 0;
}

.hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vh, 18px);
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.hero-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  max-width: 30ch;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.eyebrow-text {
  position: relative;
  display: inline-block;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--accent-dark);
  letter-spacing: 0.02em;
  padding-top: 4px;
  padding-bottom: 10px;
}
.eyebrow-text::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 34px;
  height: 1.5px;
  background: var(--accent);
  opacity: 0.55;
  transform: translateX(-50%);
}

.headline {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.7rem, 5.4vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.subhead {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

.btn-hero-primary {
  font-size: 0.98rem;
  padding: 14px 28px;
  gap: 8px;
}
.btn-hero-primary .arrow { transition: transform 0.2s cubic-bezier(.22,.9,.32,1); }
.btn-hero-primary:hover .arrow { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.98rem;
  font-family: inherit;
  color: var(--ink);
  border: none;
  border-bottom: 1px solid rgba(var(--ink-rgb), 0.25);
  padding: 0 0 2px;
  background: none;
  transition: gap 0.18s ease, color 0.18s ease;
  cursor: pointer;
}
.btn-ghost:hover { gap: 12px; color: var(--accent-dark); }
.btn-ghost svg { flex-shrink: 0; }

.hero-ai {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;

  flex: 0 0 auto;
  min-height: 0;
}

.ai-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.6vh, 28px);
}

.orb-btn {
  position: relative;
  width: clamp(150px, 24vh, 220px);
  height: clamp(150px, 24vh, 220px);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(.22,.9,.32,1);
}
.orb-btn:hover,
.orb-btn:focus-visible {
  transform: scale(1.035);
}
.orb-btn:active { transform: scale(0.98); }
.orb-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 10px;
  border-radius: 50%;
}

.orb-cue {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-dark);
  border: 3px solid var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px -6px rgba(var(--accent-dark-rgb), 0.6);
  z-index: 2;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.orb-cue::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--accent-bright-rgb), 0.45);
  animation: cueRing 2.4s ease-out infinite;
}
.orb-cue[data-visible="false"] {
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}
@keyframes cueRing {
  0%   { transform: scale(0.85); opacity: 0.9; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.orb-wrap {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.orb-glow {
  position: absolute;
  inset: -17%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--accent-bright-rgb), 0.38) 0%, rgba(var(--accent-bright-rgb), 0.12) 60%, rgba(var(--accent-bright-rgb), 0) 94%);
  opacity: 0.55;
  transform: scale(0.95);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.orb-wrap.waking .orb-glow,
.orb-wrap.ready .orb-glow { opacity: 0.85; transform: scale(1.04); }
.orb-wrap.near .orb-glow { opacity: 1; transform: scale(1.12); }

.orb-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background:
    radial-gradient(74% 66% at 34% 24%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(118% 106% at 32% 20%,
      var(--accent-soft) 0%,
      var(--accent-bright) 30%,
      var(--accent) 55%,
      var(--accent-dark) 78%,
      var(--accent-deep) 100%);
  box-shadow:
    inset 0 -14px 30px rgba(var(--accent-deep-rgb), 0.5),
    inset 0 10px 24px rgba(255,255,255,0.14),
    0 20px 40px -18px rgba(var(--accent-dark-rgb), 0.55);

  animation: orbBreathe 4.2s ease-in-out infinite;
}

.orb-core::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  padding: 1.1%;
  background: linear-gradient(155deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,0.55) 20%,
    rgba(255,255,255,0.04) 48%,
    rgba(255,255,255,0.28) 80%,
    rgba(255,255,255,0.72) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.orb-core::after {
  content: '';
  position: absolute;
  top: 14%;
  left: 20%;
  width: 34%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
  filter: blur(2px);
}

@keyframes orbBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.orb-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;

  clip-path: circle(50% at 50% 50%);
  pointer-events: none;
}
.orb-flow span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.orb-flow span:nth-child(1) {
  top: -16%;
  left: -18%;
  width: 118%;
  height: 84%;
  background: radial-gradient(closest-side, rgba(var(--accent-soft-rgb), 0.6) 0%, rgba(var(--accent-soft-rgb), 0.16) 52%, rgba(var(--accent-soft-rgb), 0) 100%);
  mix-blend-mode: screen;
  animation: orbFlowA 15s ease-in-out infinite;
}
.orb-flow span:nth-child(2) {
  bottom: -20%;
  right: -20%;
  width: 124%;
  height: 92%;
  background: radial-gradient(closest-side, rgba(var(--accent-deep-rgb), 0.42) 0%, rgba(var(--accent-deep-rgb), 0.13) 50%, rgba(var(--accent-deep-rgb), 0) 100%);
  mix-blend-mode: multiply;
  animation: orbFlowB 21s ease-in-out infinite;
}
.orb-flow span:nth-child(3) {
  top: -4%;
  left: -6%;
  width: 86%;
  height: 62%;
  background: radial-gradient(closest-side, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.07) 46%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen;
  animation: orbFlowC 12s ease-in-out infinite;
}
.orb-flow span:nth-child(4) {
  bottom: -8%;
  left: -14%;
  width: 104%;
  height: 74%;
  background: radial-gradient(closest-side, rgba(var(--accent-bright-rgb), 0.5) 0%, rgba(var(--accent-bright-rgb), 0.14) 50%, rgba(var(--accent-bright-rgb), 0) 100%);
  mix-blend-mode: screen;
  animation: orbFlowD 18s ease-in-out infinite;
}
.orb-flow::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.13;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes orbFlowA {
  0%,100% { transform: translate(-3%, 3%) rotate(0deg) scale(1); }
  33%     { transform: translate(15%, 12%) rotate(42deg) scale(1.14); }
  66%     { transform: translate(3%, 22%) rotate(-26deg) scale(0.93); }
}
@keyframes orbFlowB {
  0%,100% { transform: translate(4%, 2%) rotate(0deg) scale(1); }
  30%     { transform: translate(-18%, -8%) rotate(-34deg) scale(1.1); }
  65%     { transform: translate(-6%, -24%) rotate(28deg) scale(0.95); }
}
@keyframes orbFlowC {
  0%,100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%     { transform: translate(30%, 26%) rotate(56deg) scale(1.18); }
  66%     { transform: translate(10%, 48%) rotate(-40deg) scale(0.9); }
}
@keyframes orbFlowD {
  0%,100% { transform: translate(2%, -2%) rotate(0deg) scale(1); }
  40%     { transform: translate(18%, -16%) rotate(-30deg) scale(1.08); }
  75%     { transform: translate(-14%, -6%) rotate(36deg) scale(0.96); }
}

.orb-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28%;

  padding-bottom: 28%;
  pointer-events: none;
  z-index: 1;
}
.orb-eye {
  position: relative;
  width: 11%;
  aspect-ratio: 1 / 2;
  transform: translate(0, 0);
}

.orb-eye::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400%;
  aspect-ratio: 1;
  margin: -200% 0 0 -200%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.62) 0%,
    rgba(255,255,255,0.26) 30%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.orb-eye.is-blinking .orb-capsule { transform: scaleY(0.08); }
.orb-capsule {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #FFFFFF;
  transform: scaleY(1);
  transition: transform 0.085s ease;
}

.orb-wrap.is-offscreen .orb-core,
.orb-wrap.is-offscreen .orb-particle,
.orb-wrap.is-offscreen .orb-flow span { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .orb-capsule { transition: none; }
  .orb-flow span { animation: none !important; }
}

.orb-particles { position: absolute; inset: 0; }
.orb-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%);
  animation: particleFloat 6s ease-in-out infinite;
}
.orb-particle:nth-child(1) { width: 8px; height: 8px; top: 6%;  left: 48%; animation-delay: 0s; }
.orb-particle:nth-child(2) { width: 5px; height: 5px; top: 50%; left: 2%;  animation-delay: 1.4s; }
.orb-particle:nth-child(3) { width: 6px; height: 6px; top: 78%; left: 62%; animation-delay: 2.6s; }
.orb-particle:nth-child(4) { width: 4px; height: 4px; top: 30%; left: 88%; animation-delay: 3.8s; }
.orb-particle:nth-child(5) { width: 5px; height: 5px; top: 88%; left: 22%; animation-delay: 0.9s; }

@keyframes particleFloat {
  0%, 100% { opacity: 0.25; transform: translate(0,0); }
  50% { opacity: 0.9; transform: translate(6px, -10px); }
}

.ai-speech {
  position: relative;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.speech-bubble {
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 500;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.speech-bubble.hidden-fade { opacity: 0; transform: translateY(4px); }
.speech-hint {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

.speech-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.speech-typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  animation: bounce 1.3s infinite;
}
.speech-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.speech-typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

.chat-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(76% 68% at 34% 24%, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(118% 106% at 32% 20%, var(--accent-soft) 0%, var(--accent-bright) 34%, var(--accent) 62%, var(--accent-dark) 84%, var(--accent-deep) 100%);
  flex-shrink: 0;
}
.chat-head-text { flex: 1; }
.chat-name {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.chat-status {
  font-size: 0.72rem;
  color: var(--accent);
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.bubble-row { display: flex; }
.bubble-row.user { justify-content: flex-end; }
.bubble-row.bot { justify-content: flex-start; }
.bubble {
  font-size: 0.88rem;
  line-height: 1.4;
  border-radius: 18px;
  padding: 10px 16px;
  max-width: 82%;
  opacity: 0;
  transform: translateY(6px);
  animation: bubbleIn 0.35s cubic-bezier(.22,.9,.32,1) forwards;
}
@keyframes bubbleIn { to { opacity: 1; transform: translateY(0); } }
.bubble.user {
  background: var(--ink);
  color: var(--bg);
  border-top-right-radius: 6px;
}
.bubble.bot {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--ink);
  border-top-left-radius: 6px;
}
.typing {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  border-top-left-radius: 6px;
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.typing .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  animation: bounce 1.3s infinite;
}
.typing .dot:nth-child(2) { animation-delay: 0.15s; }
.typing .dot:nth-child(3) { animation-delay: 0.3s; }

.cform-summary {
  white-space: pre-line;
  line-height: 1.65;
  max-width: 100%;

  background: rgba(var(--ink-rgb), 0.05);
}
.bubble.is-pending { opacity: 0.6; }

.chip {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.16);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.chip:hover { background: rgba(var(--accent-rgb), 0.14); }
.chip:active { transform: scale(0.97); }
.chip:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

.chat-input-label,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.chat-input {
  flex: 1;
  height: 42px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 0 16px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
}
.chat-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.chat-send {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.chat-send:hover { background: var(--accent-dark); }
.chat-send:active { transform: scale(0.94); }

.site-footer {
  flex: 0 0 auto;
  position: relative;
  z-index: 20;
  overflow: hidden;
  margin-top: clamp(16px, 3vw, 40px);
  border-radius: clamp(26px, 3.4vw, 44px) clamp(26px, 3.4vw, 44px) 0 0;
  background: var(--ink);
  color: #FFFFFF;
  --logo-accent: var(--accent-soft);
}
.site-footer :focus-visible { outline-color: #FFFFFF; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  padding-top: clamp(52px, 7vw, 88px);
  padding-bottom: clamp(36px, 5vw, 56px);
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footer-logo {
  font-size: 1.5rem;
  color: #FFFFFF;
}
.footer-tagline {
  margin: 0;
  max-width: 26ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}
.footer-links,
.footer-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-links a,
.footer-facts li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.84);
}
.footer-links a {
  transition: color 0.15s ease;
}
.footer-links a:hover,
.footer-facts a:hover { color: var(--accent-soft); }
.footer-links a.active { color: #FFFFFF; font-weight: 600; }
.footer-facts a {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-copy {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-right: -13px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.15s ease;
}
.footer-social a:hover { color: #FFFFFF; }
@media (min-width: 560px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
  .footer-top {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
  .footer-brand { grid-column: auto; }
}

@media (max-width: 559px) {
  .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    padding-bottom: 22px;
  }
  .footer-social { margin: 0 0 0 -13px; }
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal {
  opacity: 0;
  animation: riseIn 0.7s cubic-bezier(.22,.9,.32,1) forwards;
}
.d-1 { animation-delay: 0.05s; }
.d-2 { animation-delay: 0.16s; }
.d-3 { animation-delay: 0.27s; }
.d-4 { animation-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .dot, .bg-spark, .bubble {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .orb-core { animation: none !important; }
  .orb-cue::before { animation: none !important; }
  .orb-btn { transition: none !important; }
  .btn-primary, .btn-ghost, .menu-btn, .orb-glow, .ai-stage, .speech-bubble, .hero-side { transition: none !important; }
}


.reveal-heading { display: inline-block; }

.stack-card {
  position: relative;
  padding: 40px 0;
  background: var(--bg);
}
.stack-card > .wrap.card-panel {
  width: calc(100% - 32px);
  max-width: 1040px;
  margin: 0 auto;
  padding: 48px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: 0 24px 60px -28px rgba(var(--ink-rgb), 0.35);
}
@media (min-width: 640px) {
  .stack-card > .wrap.card-panel { width: calc(100% - 64px); padding: 56px 40px; }
}
@media (min-width: 1024px) {
  .stack-card > .wrap.card-panel { width: calc(100% - 120px); padding: 64px 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .stack-card > .wrap.card-panel { box-shadow: none; }
}

.stack-card > .wrap.panel-wrap {
  width: calc(100% - 32px);
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
}
@media (min-width: 640px) {
  .stack-card > .wrap.panel-wrap { width: calc(100% - 64px); }
}
@media (min-width: 1024px) {
  .stack-card > .wrap.panel-wrap { width: calc(100% - 120px); }
}

.info-section {
  padding: 64px 0;
}

.info-section--muted > .wrap.card-panel { background: var(--surface); }
.info-heading {
  margin: 0 0 36px;
  text-align: left;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.info-heading:has(+ .info-lead) { margin-bottom: 14px; }
.info-lead {
  margin: 0 0 36px;
  max-width: 58ch;
  text-align: left;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}

.mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.mosaic-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}
.info-section--muted .mosaic-tile { background: var(--bg); }

@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  .mosaic-tile:not(.mosaic-tile--media) {
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
  }
  .mosaic-tile:not(.mosaic-tile--media):hover {
    border-color: var(--border-strong);
    box-shadow: 0 16px 32px -20px rgba(var(--ink-rgb), 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mosaic-tile { transition: none; }
}

.mosaic-tile--feature { padding: 28px; }
.mosaic-tile--feature .info-title { font-size: 1.2rem; }
.mosaic-tile--feature .info-desc { font-size: 0.96rem; }

.mosaic-tile--wide { --span: 12; }

.mosaic-tile-heading {
  margin: 0 0 12px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mosaic-tile-text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--muted);
}

.mosaic-tile--media {
  position: relative;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(58% 52% at 50% 46%, rgba(var(--accent-bright-rgb), 0.11) 0%, rgba(var(--accent-bright-rgb), 0) 72%),
    var(--surface);
}
.mosaic-tile--media.is-portrait { aspect-ratio: 4 / 5; }

.orb-figure {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.orb-figure .orb-wrap {
  width: 58%;
  height: auto;
  aspect-ratio: 1;
}
@supports (width: 1cqh) {
  .mosaic-tile--media { container-type: size; }
  .orb-figure .orb-wrap { width: min(58cqw, 64cqh); }
}

.info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent-dark);
  margin-bottom: 14px;
}

.info-icon--num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1;
}
.info-title {
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.info-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--muted);
}

.info-desc a {
  color: var(--accent-dark);
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
  padding-bottom: 1px;
  transition: border-color 0.15s ease;
}
.info-desc a:hover { border-bottom-color: var(--accent-dark); }
@media (prefers-reduced-motion: reduce) {
  .info-desc a { transition: none; }
}

@media (min-width: 640px) {
  .mosaic {
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
  }
  .mosaic-tile { grid-column: span 6; }
  .mosaic-tile--wide { grid-column: span 12; }

  .mosaic-tile--media.is-portrait { aspect-ratio: 4 / 3; }
}

@media (min-width: 1024px) {
  .mosaic { gap: 20px; }
  .mosaic-tile {
    grid-column: span var(--span, 4);
    grid-row: span var(--rows, 1);
  }
  .mosaic-tile--media,
  .mosaic-tile--media.is-portrait {
    aspect-ratio: auto;
    height: 100%;
    min-height: 240px;
  }
  .mosaic-tile-heading { font-size: 1.45rem; }
}

@media (min-width: 768px) {
  .mosaic-tile--wide {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
  }
  .mosaic-tile--wide .info-icon { flex: 0 0 auto; margin-bottom: 0; }
  .mosaic-tile--wide .info-title { flex: 0 0 24%; margin-bottom: 0; }
  .mosaic-tile--wide .info-desc { flex: 1 1 auto; }
  .mosaic-tile--wide .mosaic-tile-heading { flex: 0 0 32%; margin-bottom: 0; }
  .mosaic-tile--wide .mosaic-tile-text { flex: 1 1 auto; max-width: 62ch; }
}

.mosaic-tile--band { --span: 12; }
@media (min-width: 640px) {
  .mosaic-tile--band { grid-column: span 12; aspect-ratio: 16 / 6; }
}
@media (min-width: 1024px) {
  .mosaic-tile--band {
    aspect-ratio: 16 / 6;
    height: auto;
    min-height: 0;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .mosaic--prose > .mosaic-tile { grid-column: span 12; }

  .mosaic--prose > .mosaic-tile--media.is-portrait { aspect-ratio: 16 / 7; }
}

@media (max-width: 639px) {
  .mosaic { gap: 0; }

  .mosaic-tile:not(.mosaic-tile--media) {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    background: none;
    border: none;
    border-radius: 0;
    padding: 22px 0;
  }

  .mosaic-tile:not(.mosaic-tile--media) + .mosaic-tile:not(.mosaic-tile--media) {
    border-top: 1px solid var(--border);
  }
  .mosaic > .mosaic-tile:first-child { padding-top: 0; }
  .mosaic > .mosaic-tile:last-child { padding-bottom: 0; }

  .mosaic-tile .info-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin-bottom: 0;
  }
  .mosaic-tile .info-icon svg { width: 19px; height: 19px; }
  .mosaic-tile .info-icon--num { font-size: 1.05rem; }

  .mosaic-tile .info-title,
  .mosaic-tile .mosaic-tile-heading { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .mosaic-tile .info-desc,
  .mosaic-tile .mosaic-tile-text { grid-column: 2; grid-row: 2; }

  .mosaic-tile:not(:has(> .info-icon)) { grid-template-columns: 1fr; }
  .mosaic-tile:not(:has(> .info-icon)) > * { grid-column: 1; }

  .mosaic-tile--media { margin: 20px 0; }

  .mosaic--prose .mosaic-tile { row-gap: 10px; }
}

@media (min-width: 768px) {
  :root { --nav-h: 96px; }
  .navbar-inner { height: 96px; }
  .orb-glow { inset: -42px; }
}

@media (max-width: 1023px) {
  .nav-links { display: none; }

  .hero-side--support { display: none; }
}

@media (min-width: 1024px) {
  .nav-links { display: flex; }
  .nav-cta { display: inline-flex; }
  .menu-btn { display: none; }

  .hero-layout {
    display: grid;

    grid-template-columns: 1fr 380px 1fr;
    align-items: center;
    column-gap: clamp(24px, 4vw, 72px);
  }
  .hero-side { max-width: 24ch; }
  .hero-side--lead {
    align-items: flex-end;
    text-align: right;
    justify-self: end;
  }
  .hero-side--support {
    align-items: flex-start;
    text-align: left;
    justify-self: start;
  }
  .headline { font-size: clamp(1.9rem, 2.5vw, 2.6rem); }
  .hero-ai { min-height: clamp(280px, 44vh, 440px); }
}

@media (max-width: 1023px) and (max-height: 820px) {
  .orb-btn {
    width: clamp(128px, 19vh, 196px);
    height: clamp(128px, 19vh, 196px);
  }
  .ai-speech { min-height: 38px; }
  .headline { font-size: clamp(1.45rem, 4.8vw, 2rem); }
  .hero-grid,
  .hero-layout { gap: clamp(6px, 1.2vh, 14px); }
  .ai-stage { gap: clamp(8px, 1.6vh, 18px); }
}

@media (max-height: 640px) {
  .hero-grid > .eyebrow { display: none; }
  .ai-speech { min-height: 34px; }
  .orb-btn { width: 130px; height: 130px; }
  .orb-glow { inset: -24px; }
  .orb-cue { width: 30px; height: 30px; border-width: 2px; }
  .headline { font-size: clamp(1.3rem, 3.4vw, 1.9rem); }
  .subhead { font-size: 0.92rem; }
}

@media (min-width: 700px) and (max-height: 640px) {
  .hero-layout {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: clamp(20px, 3vw, 48px);
  }
  .hero-side { max-width: 22ch; }
  .hero-side--lead { align-items: flex-end; text-align: right; justify-self: end; }

  .hero-side--support {
    display: flex;
    align-items: flex-start;
    text-align: left;
    justify-self: start;
  }
}

.chapters-main {
  flex: 1 1 auto;
  position: relative;
}
.chapters-main .wrap {
  max-width: 1180px;
}

.chapter {
  position: relative;
  padding: clamp(80px, 11vw, 148px) 0;
}

.ch-intro {
  padding: clamp(44px, 7vw, 92px) 0 clamp(60px, 9vw, 116px);
}
.ch-intro-inner {
  max-width: 1120px;
}
.ch-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 3vw, 30px);
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--accent-alt);
}
.ch-kicker::before {
  content: '';
  width: 34px;
  height: 1.5px;
  background: var(--accent-alt);
  opacity: 0.6;
}
.ch-intro-title {
  margin: 0;
  max-width: 22ch;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.1rem, 5.4vw, 3.8rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ch-intro-copy {
  margin-top: clamp(30px, 4vw, 52px);
  display: grid;
  gap: 18px;
  max-width: 62ch;
}
.ch-intro-copy p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--muted);
}
@media (min-width: 1024px) {
  .ch-intro-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 5vw, 72px);
    max-width: 940px;
  }
  .ch-intro-copy:has(> p:only-child) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 62ch;
  }
}

.nowrap { white-space: nowrap; }

.ch-marker {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 18px;
}
.ch-num {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-alt);
}
.ch-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-alt);
}
@media (max-width: 767px) {
  .ch-num { display: none; }
}
.ch-title {
  margin: 0;
  max-width: 20ch;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ch-title--large {
  font-size: clamp(2.1rem, 4.8vw, 3.3rem);
  line-height: 1.12;
}
.ch-lead {
  margin: 20px 0 0;
  max-width: 48ch;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.75;
  color: var(--muted);
}
.ch-text {
  margin: 18px 0 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}
.ch-prose {
  margin: clamp(26px, 3.5vw, 40px) 0 0;
  max-width: 64ch;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--muted);
}
.ch-head--center {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.ch-head--center .ch-marker { justify-content: center; }
.ch-head--center .ch-title,
.ch-head--center .ch-lead {
  margin-left: auto;
  margin-right: auto;
}

.ch-orb {
  position: relative;
  width: min(280px, 68vw);
  aspect-ratio: 1;
  margin: clamp(40px, 6vw, 64px) auto;
}
@supports (width: 1cqh) {
  .ch-orb { container-type: size; }
}

.ch-split {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
}
@media (min-width: 900px) {
  .ch-head--sticky {
    position: sticky;
    top: 128px;
  }
}
@media (min-width: 1024px) {
  .ch-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: clamp(40px, 5vw, 88px);
    align-items: center;
  }
  .ch-split > * { grid-column: 1 / -1; }
  .ch-split > .ch-head {
    grid-column: 1;
    grid-row: 1;
  }
  .ch-split > .ch-split-media {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
}

.chapter > .wrap:not(.ch-split) > .ch-head + * {
  margin-top: clamp(52px, 6vw, 92px);
}

.ch-aside {
  margin: clamp(34px, 4vw, 52px) 0 0;
  max-width: 56ch;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--muted);
}
/* Länkar i kapiteltext. .ch-intro-copy a bodde i kundcase.css till 2026-08-24,
   då säkerhetssidan blev den andra sidan som behövde länkstilar i brödtext. */
.ch-aside a,
.ch-intro-copy a,
.ch-prose a,
.ch-lead a,
.ch-pair-text a,
.founder-bio a,
.ch-listing-text a {
  color: var(--accent-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.35);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}
.ch-aside a:hover,
.ch-intro-copy a:hover,
.ch-prose a:hover,
.ch-lead a:hover,
.ch-pair-text a:hover,
.founder-bio a:hover,
.ch-listing-text a:hover { border-bottom-color: var(--accent-dark); }
.chapter--dark .ch-aside { color: rgba(255, 255, 255, 0.62); }
.chapter--dark .ch-aside a {
  color: var(--accent-bright);
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .ch-aside a,
  .ch-intro-copy a,
  .ch-prose a,
  .ch-lead a,
  .ch-pair-text a,
  .founder-bio a,
  .ch-listing-text a { transition: none; }
}

.ch-rows { display: grid; }
.ch-row {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  column-gap: clamp(14px, 2vw, 26px);
  align-items: start;
  padding: clamp(30px, 4vw, 52px) 0;
  border-top: 1px solid var(--border);
}
.ch-row:last-child { border-bottom: 1px solid var(--border); }
.ch-row-num {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;

  /* 2026-09-06: var 0.24, vilket gav 1.61:1 mot vitt och underkandes av axe.
     0.60 ger 4.69:1 och klarar AA aven vid 20.8 px, dar siffran inte raknas
     som stor text. Sank inte tillbaka den. */
  color: rgba(var(--ink-rgb), 0.6);
}
.ch-row-title {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ch-row-text {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
}
@media (min-width: 900px) {
  .ch-row {
    grid-template-columns: 3.6rem minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(24px, 4vw, 64px);
  }
  .ch-row--offset { grid-template-columns: minmax(0, 1fr) 3.6rem minmax(0, 1fr); }
  .ch-row--offset .ch-row-num { grid-column: 2; }
  .ch-row--offset .ch-row-body { grid-column: 3; }
}

.ch-pairs {
  display: grid;
  gap: clamp(38px, 5vw, 68px);
}
.ch-pair-title {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.ch-pair-text {
  margin: 18px 0 0;
  max-width: 44ch;
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--muted);
}
@media (min-width: 768px) {
  .ch-pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(48px, 6vw, 104px);
  }
}

.ch-list { display: grid; }
.ch-listing {
  display: grid;
  gap: 10px;
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--border);
}
.ch-list > .ch-listing:last-child { border-bottom: 1px solid var(--border); }
.ch-listing-title {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink);
}
.ch-listing-text {
  margin: 0;
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
}
@media (min-width: 768px) {
  .ch-listing {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: baseline;
  }
}

.chapter--dark {
  background: var(--ink);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(90px, 12vw, 160px) 0;
}
.chapter--dark::before {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -34%;
  width: min(760px, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-bright-rgb), 0.34) 0%, rgba(var(--accent-bright-rgb), 0) 68%);
  transform: translate3d(0, var(--glow-shift, 0px), 0);
  pointer-events: none;
  z-index: -1;
}
.chapter--dark .ch-title,
.chapter--dark .ch-pair-title,
.chapter--dark .ch-row-title,
.chapter--dark .ch-listing-title { color: #FFFFFF; }
.chapter--dark .ch-lead,
.chapter--dark .ch-text { color: rgba(255, 255, 255, 0.72); }
.chapter--dark .ch-pair-text,
.chapter--dark .ch-row-text,
.chapter--dark .ch-listing-text,
.chapter--dark .ch-prose { color: rgba(255, 255, 255, 0.7); }
.chapter--dark .ch-num { color: var(--accent-alt-light); }
.chapter--dark .ch-label { color: var(--accent-alt-light); }
.chapter--dark .ch-pair-title,
.chapter--dark .ch-row,
.chapter--dark .ch-listing { border-color: rgba(255, 255, 255, 0.16); }
.chapter--dark .ch-row-num { color: rgba(255, 255, 255, 0.3); }
.chapter--dark a { color: var(--accent-bright); }

.ch-stats {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.ch-stat {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.stat-figure {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
.stat-unit {
  font-size: 0.38em;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.6);
}
.stat-label {
  margin: 12px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
@media (min-width: 560px) {
  .ch-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-stat {
    padding: 26px 18px 26px 0;
    border-bottom: none;
  }
  .ch-stat + .ch-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: clamp(20px, 3vw, 34px);
  }
}

.ch-cta {
  padding: clamp(88px, 12vw, 156px) 0 clamp(100px, 13vw, 168px);
}
.ch-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ch-cta .ch-marker { justify-content: center; }
.ch-cta .ch-title,
.ch-cta .ch-lead {
  margin-left: auto;
  margin-right: auto;
}
.ch-cta-action { margin-top: clamp(28px, 4vw, 40px); }

.chapter-nav {
  display: none;
  position: fixed;
  top: 50%;
  right: clamp(18px, 2.4vw, 40px);
  transform: translateY(-50%);
  z-index: 40;
}
.chapter-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}
.chapter-nav a {
  display: grid;
  grid-template-columns: auto 20px;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  /* 2026-09-06: var 0.34 (2.17:1). Interaktiv text pa 11.2 px kraver 4.5:1,
     0.60 ger 4.69:1. Hover och aktivt lage gar fortfarande till full ink. */
  color: rgba(var(--ink-rgb), 0.6);
  transition: color 0.3s ease;
}
.chapter-nav-num {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  font-variant-numeric: tabular-nums;
}
.chapter-nav a.is-active .chapter-nav-num::before {
  content: '';
  position: absolute;
  top: 0.42em;
  right: calc(100% + 9px);
  width: 16px;
  height: 1px;
  background: currentColor;
}
.chapter-nav-name {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.chapter-nav:hover a.is-active .chapter-nav-num::before { opacity: 0; }
.chapter-nav a:hover,
.chapter-nav a.is-active { color: var(--ink); }
.chapter-nav:hover .chapter-nav-name,
.chapter-nav a:focus-visible .chapter-nav-name {
  opacity: 1;
  transform: none;
}
.chapter-nav.is-inverted a { color: rgba(255, 255, 255, 0.62); }
.chapter-nav.is-inverted a:hover,
.chapter-nav.is-inverted a.is-active { color: #FFFFFF; }
@media (min-width: 1200px) {
  .chapter-nav { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter-nav a,
  .chapter-nav-name { transition: none; }
  .chapter--dark::before { transform: none !important; }
}

/* ---- Språkväljare, 2026-08-26 ---------------------------------------
   Sajten finns på svenska och engelska. Svenskan ligger i roten,
   engelskan under /en/. Länken pekar alltid på SAMMA sida i det andra
   språket, aldrig på startsidan, se en/-mappen och .htaccess.

   Den ligger i .nav-actions på desktop och sist i mobilmenyn, alltså
   två element per sida. En och samma nod hade krävt att den flyttades
   i DOM:en vid brytpunkten, och då tappar den tabbordningen. */
.lang-switch {
  display: none;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.lang-switch:hover {
  border-color: rgba(var(--ink-rgb), 0.3);
  color: var(--ink);
}

.mobile-menu-lang {
  display: block;
  margin-top: 18px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mobile-menu-lang:hover { color: var(--ink); }

@media (min-width: 1024px) {
  .lang-switch { display: inline-flex; }
  .mobile-menu-lang { display: none; }
}

/* ---- Startsidans sektioner, 2026-09-06 ------------------------------
   Startsidan aterbruker kapitelsystemet ovan. Bara tre saker ar nya:
   en scrollmarkor i hjalten, en tatare kapitelrytm och ett fyrspaltigt
   siffergrid. Inga nya farger, typsnitt eller komponenter.
   ------------------------------------------------------------------- */

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3vh, 34px);
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: color 0.25s ease, gap 0.25s ease;
}
.hero-scroll:hover { color: var(--ink); }
.hero-scroll svg {
  animation: heroScrollNudge 2.6s ease-in-out infinite;
}
@keyframes heroScrollNudge {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll svg { animation: none; }
}

@media (min-height: 600px) {
  .hero-scroll { display: inline-flex; }
}
@media (min-height: 600px) and (max-height: 759px) {
  .hero-scroll {
    bottom: 12px;
    gap: 6px;
    font-size: 0.76rem;
  }
  .hero-inner { padding-bottom: 30px; }
}
body.home.is-past-hero .bg-spark,
body.home.is-past-hero .hero-scroll svg,
body.home.is-past-hero .orb-cue::before,
body.home.is-past-hero .speech-typing .dot { animation-play-state: paused; }

/* Startsidan ar en overblick, undersidorna ar en lasning. Darfor en
   tatare kapitelrytm har an pa Tjanster och Om oss. */
body.home .chapter { padding: clamp(64px, 8vw, 116px) 0; }
body.home .ch-cta { padding: clamp(76px, 9vw, 128px) 0 clamp(84px, 10vw, 140px); }
body.home .chapters-main .wrap { max-width: 1180px; }

/* Fyra siffror i stallet for tre. Basvarianten .ch-stats ar tre spalter. */
.ch-stats--four { border-top: 1px solid rgba(255, 255, 255, 0.16); }
@media (min-width: 560px) {
  .ch-stats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-stats--four .ch-stat {
    padding: 26px 18px 26px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .ch-stats--four .ch-stat + .ch-stat { border-left: none; padding-left: 0; }
  .ch-stats--four .ch-stat:nth-child(2n) {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: clamp(20px, 3vw, 34px);
  }
}
@media (min-width: 960px) {
  .ch-stats--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ch-stats--four .ch-stat { border-bottom: none; }
  .ch-stats--four .ch-stat + .ch-stat {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: clamp(20px, 3vw, 34px);
  }
}

/* Raden under siffrorna pa den morka scenen. */
.ch-stats-note {
  margin: clamp(26px, 3.5vw, 38px) 0 0;
  max-width: 60ch;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
}
.ch-stats-note a {
  color: var(--accent-bright);
  border-bottom: 1px solid rgba(var(--accent-bright-rgb), 0.4);
}
.ch-stats-note a:hover { border-bottom-color: var(--accent-bright); }

/* Knappraden i Testa-sektionen. Samma knappar som resten av sajten. */
.ch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: clamp(28px, 4vw, 40px);
}

/* ---- Visuella produktbevis, 2026-09-06 ------------------------------
   Konversationsillustration. Ritar upp den riktiga chattrutan i stallet
   for att vara en dekorativ bild, och ateranvander .bubble, .bubble-row,
   .chat-avatar, .chat-name och .chat-status som redan finns ovan.

   Detta ar en ILLUSTRATION, aldrig en skarmdump av ett riktigt kundsamtal.
   Skriv aldrig en bildtext som pastar nagot annat, se kundcasesidans
   forsiktighet med vad den pastar.
   ------------------------------------------------------------------- */

.convo {
  width: 100%;
  max-width: 460px;
  /* Toppmarginalen behovs. Rutan har bade rundade horn och en slagskugga, sa
     den behover mer luft an ett vanligt textblock for att inte se ut som att
     den sitter fast i det som star ovanfor. */
  margin: clamp(36px, 4.6vw, 56px) auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 34px 64px -38px rgba(var(--ink-rgb), 0.34);
}
.convo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.convo-head-text { flex: 1; }

/* Valkomstblocket. Det ar det som gor att rutan laser sig som en fardig
   produkt och inte som en avhuggen bubbellista. Alla riktiga widgetar
   oppnar sa har. */
.convo-intro {
  padding: 26px 22px 4px;
  text-align: center;
}
.convo-intro .chat-avatar {
  /* display: block kravs. .chat-avatar ar en <span> och alltsa inline, dar
     varken bredd, hojd eller margin auto biter. I huvudet fungerar den bara
     for att den ar flexbarn. */
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
}
.convo-intro-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.convo-intro-text {
  margin: 6px auto 0;
  max-width: 30ch;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.convo-body {
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Bubblorna i illustrationen ar luftigare an chattens egna. Andra inte
   .bubble globalt, den delas med kontaktsidans bokningschatt. */
.convo .bubble {
  font-size: 0.845rem;
  line-height: 1.55;
  padding: 12px 16px;
  max-width: 84%;
  border-radius: 17px;
}
.convo .bubble.user { border-top-right-radius: 6px; }
.convo .bubble.bot { border-top-left-radius: 6px; }

/* Skrivfaltet. Utan det ser rutan ut som en skarmdump som klipptes av. */
.convo-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-top: 1px solid var(--border);
  background: rgba(var(--ink-rgb), 0.018);
}
.convo-field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.82rem;
  color: var(--muted);
}
.convo-send {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}
.convo-day {
  margin: 0 0 2px;
  text-align: center;
  font-size: 0.7rem;
  color: var(--muted);
}

/* Forslagsknapparna som chattrutan visar. Ser ut som .chip men ar inte
   klickbara, darfor span och inte button. */
.convo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 2px;
}
.convo-chip {
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: rgba(var(--accent-rgb), 0.09);
}

/* Liten dampad rad under en illustration. Sager vad bilden visar. */
.figure-note {
  margin: 16px auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Bubblorna tonas in vid sidladdning. En illustration langre ner pa sidan
   ska sta klar nar man kommer dit, inte ha animerat fardigt i det tomma. */
.convo .bubble {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ---- Bevisraden under hjalten, 2026-09-06 ---------------------------
   Slankt band direkt under hjalten, INTE ett kapitel. Bara kundernas namn
   som rutor med lank till deras egna sajter.

   VIKTIGT: bara kunder i SKARP DRIFT far sta har. Sweed, Ljudfokus och
   Neighbourhood-ramen ar offerter respektive leveransfiler, inte belagg for
   kundstatus. Se project_bevisraden innan du lagger till ett namn.
   ------------------------------------------------------------------- */

.proofbar {
  border-bottom: 1px solid var(--border);
  padding: clamp(22px, 3vw, 34px) 0;
}
.proofbar-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.proofbar-label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-alt);
}
.proofbar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.proofbar-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: border-color 0.25s ease, color 0.25s ease;
}
.proofbar-logo {
  flex-shrink: 0;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.proofbar-logo--micki {
  width: 24px;
  background-image: url("../img/logos/micki-mark.png");
}
.proofbar-logo--neighbourhood {
  width: 24px;
  background-image: url("../img/logos/neighbourhood-mark.svg");
}

.proofbar-item svg {
  flex-shrink: 0;
  color: var(--muted);
  transition: color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .proofbar-item:hover { border-color: var(--accent); color: var(--accent-dark); }
  .proofbar-item:hover svg { color: var(--accent); transform: translate(2px, -2px); }
}

@media (min-width: 760px) {
  .proofbar-inner {
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
  }
  .proofbar-label { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .proofbar-item,
  .proofbar-item svg { transition: none; }
  .proofbar-item:hover svg { transform: none; }
}

/* ---- Bildrutor, 2026-09-06 ------------------------------------------
   Platser dar Hamid sjalv kan lagga in en bild. Varje ruta har en fast
   aspect-ratio sa att sidan inte hoppar nar bilden laddas, och gommer sig
   sjalv om filen saknas (se slot-koden sist i nav.js). Det gor att sajten
   kan publiceras nar som helst, aven med tomma platser.

   Lagg till en ny ruta:
     <figure class="imgslot" style="--ar: 3 / 2">
       <img data-slot decoding="async" src="/assets/img/…" alt="Beskriv vad bilden visar">
       <figcaption>Valfri bildtext.</figcaption>
     </figure>

   SATT INTE loading="lazy" pa en slot-bild. En lat bild som inte finns hamtas
   aldrig, felar aldrig och goms darfor aldrig. Rutan blir da staende tom tills
   besokaren scrollar dit, och forsvinner mitt framfor ogonen pa hen.
   ------------------------------------------------------------------- */

.imgslot {
  margin: clamp(26px, 3.6vw, 40px) 0 0;
}
.imgslot[hidden] { display: none; }
.imgslot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 3 / 2);
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.imgslot figcaption {
  margin: 12px 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
}
.chapter--dark .imgslot img { border-color: rgba(255, 255, 255, 0.16); }
.chapter--dark .imgslot figcaption { color: rgba(255, 255, 255, 0.62); }

/* Tva bildrutor bredvid varandra. Anvands pa chattrutan.html for att visa
   samma assistent i tva kunders formsprak. */
.imgslot-pair {
  display: grid;
  gap: 16px;
  margin: clamp(26px, 3.6vw, 40px) 0 0;
}
.imgslot-pair .imgslot { margin: 0; }
@media (min-width: 760px) {
  .imgslot-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
}

/* Smal variant for staende skarmbilder, till exempel en telefon. */
.imgslot--narrow { max-width: 300px; }

/* ---- Systemsteg och produktkort i .convo, 2026-09-06 -----------------
   Det som skiljer en koppling fran ett vanligt svar ar att uppgiften kommer
   nagon annanstans ifran. Systemsteget gor den hamtningen synlig.
   ------------------------------------------------------------------- */

.convo-sys {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 2px 0;
  padding: 7px 12px 7px 10px;
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.045);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-dark);
}
.convo-sys svg { flex-shrink: 0; }

.convo-card {
  align-self: flex-start;
  width: min(100%, 260px);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
}
.convo-card-body { padding: 11px 13px 13px; }
.convo-card-name {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.convo-card-price {
  margin: 5px 0 0;
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.convo-card-stock {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--muted);
}
.convo-card-stock::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1F9D55;
  flex-shrink: 0;
}
.convo-card-strip {
  height: 74px;
  background:
    radial-gradient(60% 70% at 30% 25%, rgba(var(--accent-bright-rgb), 0.22) 0%, rgba(var(--accent-bright-rgb), 0) 70%),
    linear-gradient(135deg, rgba(var(--ink-rgb), 0.06) 0%, rgba(var(--ink-rgb), 0.02) 100%);
  border-bottom: 1px solid var(--border);
}

.convo--wide { max-width: 480px; }


.hero-cta { margin-top: 4px; }

@media (max-width: 1023px) {
  .nav-actions { gap: 10px; }
  .nav-cta {
    display: inline-flex;
    padding: 8px 15px;
    font-size: 0.84rem;
    box-shadow: none;
  }
}
@media (max-width: 359px) {
  .nav-cta { display: none; }
}

.ch-case-brief { margin-bottom: clamp(48px, 6vw, 72px); }
.ch-case-result {
  margin: 0 0 18px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-alt-light);
}

.ch-quote {
  margin: clamp(40px, 5vw, 60px) 0 0;
  max-width: 34ch;
}
.ch-quote-text {
  margin: 0;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.ch-quote-meta {
  margin-top: 14px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

#i-verkligheten .imgslot { margin-top: clamp(36px, 5vw, 56px); }

.brandwall {
  list-style: none;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.brandwall-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 16px 12px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(var(--ink-rgb), 0.62);
  text-align: center;
  transition: color 0.25s ease;
}
.brandwall-name {
  display: block;
}
.brandwall-item img {
  display: none;
  width: auto;
  max-width: 100%;
  max-height: var(--logo-h, 26px);
}
.brandwall-item.has-logo img { display: block; }
.brandwall-item.has-logo .brandwall-name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (hover: hover) and (pointer: fine) {
  .brandwall-item:hover { color: var(--ink); }
}
@media (min-width: 560px) {
  .brandwall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .brandwall-item { transition: none; }
}

.site-footer .wrap { max-width: 1180px; }

:root {
  --nav-glass: rgba(255, 255, 255, 0.88);
  --nav-glass-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.07), 0 12px 32px -16px rgba(var(--ink-rgb), 0.28);
}
html { scroll-padding-top: calc(var(--nav-h, 84px) + 12px); }

.navbar {
  will-change: transform;
  transition: transform 0.4s cubic-bezier(.22,.9,.32,1);
}
.navbar.is-hidden { transform: translateY(-110%); }
.navbar .logo {
  margin-left: -12px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.menu-btn,
.lang-switch {
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, transform 0.15s ease, color 0.18s ease;
}
.navbar.is-scrolled .logo,
.navbar.is-scrolled .menu-btn,
.navbar.is-scrolled .lang-switch {
  background-color: var(--nav-glass);
  border-color: transparent;
  box-shadow: var(--nav-glass-shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.navbar.is-scrolled .lang-switch { padding: 7px 12px; }
.navbar.is-scrolled .nav-cta {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 8px 20px -8px rgba(var(--cta-rgb), 0.45);
}
body.mobile-menu-open .navbar .logo,
body.mobile-menu-open .menu-btn {
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.menu-btn { width: 44px; height: 44px; }

.nav-chevron {
  flex: 0 0 auto;
  transition: transform 0.25s cubic-bezier(.22,.9,.32,1);
}
[aria-expanded="true"] > .nav-chevron { transform: rotate(180deg); }

.nav-sub-label {
  display: block;
  margin: 0 0 10px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-dark);
}

@media (min-width: 1024px) {
  .navbar-inner { position: relative; }
  .nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 54px;
    padding: 0 8px;
    gap: 2px;
    isolation: isolate;
  }
  .nav-links::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 999px;
    background-color: var(--nav-glass);
    box-shadow: var(--nav-glass-shadow);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transition: opacity 0.2s ease;
  }
  .nav-links.has-open::before { opacity: 0; }
  .nav-links a { padding-bottom: 0; }
  .nav-links a::after { content: none; }

  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: rgba(var(--ink-rgb), 0.8);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .nav-link:hover,
  .nav-item.is-open > .nav-link {
    background-color: rgba(var(--ink-rgb), 0.06);
    color: var(--ink);
  }
  .nav-link.active {
    color: var(--ink);
    font-weight: 600;
  }

  .nav-sub {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -1;
    width: min(800px, calc(100vw - 48px));
    padding: 78px 30px 30px;
    border-radius: 28px;
    background-color: var(--nav-glass);
    box-shadow: var(--nav-glass-shadow);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity 0.22s ease, transform 0.32s cubic-bezier(.22,.9,.32,1), visibility 0s linear 0.32s;
  }
  .nav-item.is-open > .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.22s ease, transform 0.32s cubic-bezier(.22,.9,.32,1), visibility 0s linear 0s;
  }
  .nav-sub-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 230px;
    gap: 32px;
    align-items: start;
  }
  .nav-sub-list {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-sub-list a {
    display: inline-block;
    color: var(--ink);
    transition: color 0.15s ease;
  }
  .nav-sub-list a:hover,
  .nav-sub-list a[aria-current="page"] { color: var(--accent-dark); }
  .nav-sub-list--large a {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
  }
  .nav-sub-list--small a {
    padding: 3px 0;
    font-size: 1rem;
    color: rgba(var(--ink-rgb), 0.78);
  }
  .nav-feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--ink);
  }
  .nav-feature .nav-sub-label { margin-bottom: 0; }
  .nav-feature-media {
    display: block;
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 16 / 10;
    background: rgba(var(--ink-rgb), 0.06);
  }
  .nav-feature-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(.22,.9,.32,1);
  }
  .nav-feature:hover .nav-feature-media img { transform: scale(1.04); }
  .nav-feature-title {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
  }
  .nav-feature-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-dark);
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .nav-sub { width: 560px; }
  .nav-sub-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .nav-feature { display: none; }
}

@media (max-width: 1023px) {
  .mobile-menu { background: var(--page); }
  .mobile-menu-inner { padding: calc(var(--nav-h, 84px) + 20px) 24px 28px; }
  .mobile-menu-links { justify-content: flex-start; }
  .mobile-menu-links > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.22,.9,.32,1);
  }
  .mobile-menu[data-open="true"] .mobile-menu-links > * {
    opacity: 1;
    transform: translateY(0);
  }
  .mobile-menu-links > :nth-child(1) { transition-delay: 0.08s; }
  .mobile-menu-links > :nth-child(2) { transition-delay: 0.14s; }
  .mobile-menu-links > :nth-child(3) { transition-delay: 0.2s; }
  .mobile-menu-links > :nth-child(4) { transition-delay: 0.26s; }
  .mobile-menu-links .mm-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 7px 0;
    border: 0;
    background: none;
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: clamp(2rem, 9.5vw, 2.7rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--ink);
    cursor: pointer;
  }
  .mobile-menu-links .mm-link.active { color: var(--accent-dark); }
  .mm-trigger .nav-chevron {
    width: 20px;
    height: 20px;
    color: rgba(var(--ink-rgb), 0.55);
  }
  .mm-sub {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.4s cubic-bezier(.22,.9,.32,1), visibility 0s linear 0.4s;
  }
  .mm-sub.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.4s cubic-bezier(.22,.9,.32,1), visibility 0s linear 0s;
  }
  .mm-sub-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.4s cubic-bezier(.22,.9,.32,1);
  }
  .mm-sub.is-open .mm-sub-inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease 0.08s, transform 0.4s cubic-bezier(.22,.9,.32,1);
  }
  .mm-sub-inner > :first-child { margin-top: 6px; }
  .mm-sub-inner > :last-child { margin-bottom: 18px; }
  .mm-sub .nav-sub-label { margin: 12px 0 2px; }
  .mm-trigger .nav-chevron { transition: transform 0.35s cubic-bezier(.22,.9,.32,1); }
  .mm-sub-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mobile-menu-links .mm-sub-list a {
    display: block;
    padding: 7px 0;
    border: 0;
    font-size: 1.2rem;
    letter-spacing: 0;
    color: var(--ink);
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mobile-menu-links .mm-sub-list--small a {
    font-size: 1rem;
    color: rgba(var(--ink-rgb), 0.72);
  }
  .mobile-menu-links .mm-sub-list a[aria-current="page"] { color: var(--accent-dark); font-weight: 600; }
}
@media (min-width: 360px) {
  .mobile-menu-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar .logo,
  .menu-btn,
  .lang-switch,
  .nav-chevron,
  .nav-link,
  .nav-links::before,
  .nav-sub,
  .nav-feature-media img,
  .mm-sub,
  .mm-sub-inner,
  .mobile-menu-links > * { transition: none !important; }
}