/* Messaging Studio homepage
   Black page, centered compositions, two frame styles for pictures and films
   (a black gallery frame with a white inner line on a backlit wall, and a thin
   white frame), rounded buttons. Cyan carries the buttons and information;
   pink is for small highlights and for hover light. No outlines or divider
   lines, except the outline button. */

:root {
  --black: #000000;
  --ink: #0D0D0F;
  --g900: #1A1C1F;
  --g800: #2E3134;
  --g700: #46494E;
  --g600: #5F6469;
  --g500: #72767C;
  --g400: #A1A5AA;
  --g300: #CCD0D4;
  --g200: #E0E2E5;
  --g100: #EDEFF2;
  --g50: #F6F7F9;
  --white: #FFFFFF;
  --sms: #E9E9EB;
  --cyan: #00E5FF;
  --cyan-rgb: 0 229 255;
  --cyan-deep: #0078A0;
  --cobalt: #206BFF;
  --cobalt-deep: #1C4CC8;
  --pink: #FF13BB;
  --pink-rgb: 255 19 187;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-device: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gutter: clamp(20px, 4.5vw, 72px);
  --max: 1440px;
  --header-h: 72px;
  --room: clamp(80px, 11vh, 136px);
  --glow-dual: -16px 0 34px rgb(0 229 255 / 0.6), 16px 0 34px rgb(255 19 187 / 0.65);
  --glow-text: -2px 0 7px rgb(0 229 255 / 0.9), 2px 0 7px rgb(255 19 187 / 0.9), -9px 0 24px rgb(0 229 255 / 0.6), 9px 0 24px rgb(255 19 187 / 0.65);
  --aura: radial-gradient(closest-side at 36% 50%, rgb(0 229 255 / 0.55), rgb(0 229 255 / 0)), radial-gradient(closest-side at 64% 50%, rgb(255 19 187 / 0.6), rgb(255 19 187 / 0));
  --aura-strong: radial-gradient(closest-side at 32% 55%, rgb(0 229 255 / 0.75), rgb(0 229 255 / 0)), radial-gradient(closest-side at 68% 55%, rgb(255 19 187 / 0.8), rgb(255 19 187 / 0));
}

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

html { background: var(--black); color-scheme: dark; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 106%;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
h2 { font-size: clamp(30px, 4vw, 60px); line-height: 1.05; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

a:focus-visible, button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--black), 0 0 0 5px var(--cyan), 0 0 22px rgb(var(--cyan-rgb) / 0.5);
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
main { overflow-x: clip; }
.hl { color: var(--pink); }
/* Eyebrow: a plain search phrase inside a heading, above its catchy line (CEO, 5 Oct 2026) */
.eyebrow { display: block; margin: 0 auto 16px; color: var(--cyan); font-family: var(--font-text); font-size: clamp(12px, 1vw, 14px); font-stretch: 100%; font-weight: 700; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; }
.hl-cyan { color: var(--cyan); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--black);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { top: 12px; }

/* Buttons: cyan pills that turn pink, and white outline pills that glow */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.45s var(--ease); /* colours swap at once: cyan and pink never blend into a third blue */
}
.btn::before {
  content: "";
  position: absolute;
  inset: -16px -22px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgb(var(--pink-rgb) / 0.75), rgb(var(--pink-rgb) / 0.3) 55%, rgb(var(--pink-rgb) / 0));
  filter: blur(8px);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { opacity: 1; transform: scale(1); }
.btn-primary { background: var(--cyan); color: var(--black); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--pink); color: var(--white); box-shadow: var(--glow-dual); }
/* The inverse of the primary button: pink with white text, cyan with black text on hover */
.btn-outline { box-shadow: inset 0 0 0 2px var(--white); }
.btn-primary::before, .btn-outline::before { background: radial-gradient(closest-side, rgb(var(--cyan-rgb) / 0.4), rgb(var(--pink-rgb) / 0.35) 60%, rgb(var(--pink-rgb) / 0)); }
.btn-outline::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
  -webkit-mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000000 0 0) content-box, linear-gradient(#000000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.btn-outline:hover, .btn-outline:focus-visible {
  box-shadow: inset 0 0 0 2px transparent, var(--glow-dual);
}
.btn-outline:hover::after, .btn-outline:focus-visible::after { opacity: 1; }
.btn-lg { padding: 20px 38px; font-size: 17px; }
/* The hero's call to action: big, with a slow cyan halo at rest (CEO, 4 Oct 2026: "big and in your face") */
.btn-xl { gap: 14px; padding: clamp(22px, 2vw, 28px) clamp(38px, 3.6vw, 60px); font-size: clamp(19px, 1.7vw, 24px); }
.btn-primary.btn-xl:not(:hover):not(:focus-visible) { box-shadow: 0 0 44px rgb(var(--cyan-rgb) / 0.4); }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .btn-primary.btn-xl:not(:hover):not(:focus-visible) { animation: halo 2.8s var(--ease) infinite alternate; }
}
@keyframes halo { from { box-shadow: 0 0 26px rgb(0 229 255 / 0.25); } to { box-shadow: 0 0 64px rgb(0 229 255 / 0.55); } }
.button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* Header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--black);
}
.bar {
  max-width: var(--max);
  height: var(--header-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 32px;
}
/* The logo never shrinks or wraps: the header gives way around it (the CMO, 5 Oct 2026) */
.brand { display: inline-flex; flex: none; align-items: center; gap: 12px; color: var(--white); text-decoration: none; }
.brand-mark { width: 33px; height: 28px; flex: none; transition: filter 0.45s var(--ease); }
.brand-name { font-family: var(--font-display); font-stretch: 106%; font-weight: 700; font-size: 18px; letter-spacing: 0.02em; white-space: nowrap; transition: text-shadow 0.45s var(--ease); }
.brand:hover .brand-mark, .brand:focus-visible .brand-mark { filter: drop-shadow(-4px 0 10px rgb(var(--cyan-rgb) / 0.85)) drop-shadow(4px 0 12px rgb(var(--pink-rgb) / 0.75)); }
.brand:hover .brand-name, .brand:focus-visible .brand-name { text-shadow: -6px 0 18px rgb(var(--cyan-rgb) / 0.6), 6px 0 18px rgb(var(--pink-rgb) / 0.6); }
.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--g300);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s var(--ease), text-shadow 0.4s var(--ease);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--white); text-shadow: var(--glow-text); }
/* The logo-wall light (--aura) behind links and steps on hover */
.nav-link, .menu a { position: relative; isolation: isolate; }
.nav-link::before, .menu a::before, .footer-nav a::before, .steps li::before {
  content: "";
  position: absolute;
  inset: -14px -24px;
  z-index: -1;
  border-radius: 999px;
  background: var(--aura-strong);
  filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.nav-link:hover::before, .nav-link:focus-visible::before, .menu a:hover::before, .menu a:focus-visible::before, .footer-nav a:hover::before, .footer-nav a:focus-visible::before { opacity: 1; }
.has-menu.is-open > .nav-link { color: var(--white); }
.has-menu > .nav-link::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.has-menu { position: relative; }
.menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  min-width: 230px;
  margin: 0;
  padding: 10px;
  list-style: none;
  border-radius: 18px;
  background: var(--g900);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  display: none;
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 15px; }
.has-menu.is-open .menu { display: block; }
@media (hover: hover) and (min-width: 1280px) { .has-menu:hover .menu { display: block; } }
.menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--g300);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), text-shadow 0.4s var(--ease);
}
.menu a:hover, .menu a:focus-visible { color: var(--white); text-shadow: var(--glow-text); }
.header-ctas { display: flex; align-items: center; gap: 10px; }
.header-cta { padding: 12px 20px; font-size: 14px; }
.nav-toggle { display: none; }

/* Hero: one centered call to action */
.hero {
  min-height: calc(100vh - 56px);
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--header-h) + clamp(32px, 7vh, 88px)) var(--gutter) clamp(40px, 7vh, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* The floor shrinks under 390px so "From conversations" keeps one line on a phone */
.hero-title { font-size: clamp(min(32px, 8.2vw), 5.2vw, 88px); font-weight: 800; line-height: 1; letter-spacing: 0.015em; }
.hero-title .line { display: block; padding-bottom: 0.06em; }
.hero-title .line > span { display: inline-block; }
/* "You create worlds" lights up with the cyan and pink glow on hover */
.hero-title .line + .line > span { position: relative; isolation: isolate; transition: text-shadow 0.5s var(--ease); }
.hero-title .line + .line > span::before {
  content: "";
  position: absolute;
  inset: -6% -5%;
  z-index: -1;
  background: var(--aura-strong);
  filter: blur(26px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.hero-title .line + .line > span:hover::before, .hero-title .line + .line > span.is-lit::before { opacity: 1; }
.hero-title .line + .line > span:hover, .hero-title .line + .line > span.is-lit { text-shadow: -4px 0 16px rgb(var(--cyan-rgb) / 0.95), 4px 0 16px rgb(var(--pink-rgb) / 0.95), -18px 0 48px rgb(var(--cyan-rgb) / 0.7), 18px 0 48px rgb(var(--pink-rgb) / 0.7); }
@media (min-width: 600px) { .hero-title .line > span { white-space: nowrap; } }
@media (prefers-reduced-motion: no-preference) {
  /* The lines rise from behind their bottom edge; the clip opens after the rise so glows show */
  .js-motion .hero-title .line { clip-path: inset(-1em -100vmax 0 -100vmax); animation: line-open 0.01s linear 1.6s both; }
  .js-motion .hero-title .line > span { animation: title-rise 1.2s var(--ease) both 0.1s; }
  .js-motion .hero-title .line + .line > span { animation-delay: 0.22s; }
  .js-motion .proof-arrow { animation: tri-in 0.6s var(--ease) both 1.1s; }
  /* The second step's triangle arrives after the first */
  .js-motion .proof-arrow ~ .proof-arrow { animation-delay: 1.7s; }
}
@keyframes title-rise { from { transform: translateY(105%); } }
@keyframes line-open { to { clip-path: inset(-1em -100vmax -1em -100vmax); } }
@keyframes tri-in { from { opacity: 0; } }
.proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px clamp(20px, 3vw, 48px);
  margin: clamp(36px, 5vh, 64px) 0 clamp(36px, 5vh, 56px);
}
.stat { display: grid; justify-items: center; gap: 8px; }
.stat-n { font-family: var(--font-display); font-stretch: 112%; font-size: clamp(44px, 5.6vw, 92px); font-weight: 800; line-height: 1; letter-spacing: 0.01em; color: var(--g500); }
.stat-n.hl { color: var(--pink); }
.stat-l { max-width: 26ch; color: var(--g400); font-size: 15px; line-height: 1.4; }
/* Pointers are plain solid triangles, never a drawn line and arrowhead (the CMO, 5 Oct 2026: "very AI") */
.proof-arrow { flex: none; width: clamp(14px, 1.3vw, 20px); height: auto; margin: 0 clamp(4px, 1vw, 16px); }
/* White, not cyan (the CMO, 5 Oct 2026: "little blue arrow should be white") */
.proof-arrow, .state-arrow { fill: var(--white); }
/* Kerstin's three steps (launch meeting, 5 Oct 2026): a display ad's clicks, the RCS
   read rate, the RCS engagement. Smaller numbers so the three fit one row; a column
   below 700px. "Up to" stays visible but small: the read rate is the top of a range */
.proof--steps { flex-wrap: nowrap; gap: 16px clamp(12px, 1.8vw, 32px); }
.proof--steps .stat { flex: 0 1 auto; min-width: 0; }
.proof--steps .stat-n { font-size: clamp(36px, 4.2vw, 72px); white-space: nowrap; }
.proof--steps .stat-l { max-width: 21ch; }
.stat-up { font-size: 0.4em; letter-spacing: 0.02em; }
@media (max-width: 699px) {
  .proof--steps { flex-direction: column; gap: 18px; }
  .proof--steps .proof-arrow { width: 16px; margin: 4px 0; transform: rotate(90deg); }
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; }
/* On a phone the session label is wider than the screen: let it wrap, and trim both buttons */
.hero-actions .btn { max-width: 100%; }
@media (max-width: 599px) { .hero-actions .btn-xl { padding-inline: 26px; font-size: 18px; white-space: normal; text-wrap: balance; } }
.hero-note { margin-top: 22px; color: var(--g400); font-size: 16px; }
.hero-source { max-width: 72ch; margin-top: clamp(28px, 4vh, 48px); color: var(--g600); font-size: 12px; line-height: 1.5; }
.lede { max-width: 56ch; color: var(--g300); font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; }

/* Section rhythm: centered heads, space between sections */
.cases, .partners, .studio, .clients, .story, .visit {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--room) var(--gutter);
}
.section-head { display: grid; justify-items: center; gap: 18px; text-align: center; }
.studio .lede { color: var(--cyan); }
.section-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; margin-top: clamp(48px, 6vw, 80px); text-align: center; }

/* Client wall */
.clients { padding-top: clamp(8px, 2vh, 24px); text-align: center; }
.clients-title { font-family: var(--font-text); font-stretch: 100%; font-size: 15px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; color: var(--g400); }
.logo-wall {
  --logo-gap: clamp(12px, 2vw, 32px);
  --logo-cols: 8;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 24px) var(--logo-gap);
  max-width: 1180px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding: 0;
  list-style: none;
}
.logo-wall li { position: relative; isolation: isolate; flex: 0 0 calc((100% - (var(--logo-cols) - 1) * var(--logo-gap)) / var(--logo-cols)); }
.glow li::before {
  content: "";
  position: absolute;
  inset: -18% -8%;
  z-index: -1;
  background: radial-gradient(closest-side at 38% 50%, rgb(var(--cyan-rgb) / 0.4), rgb(var(--cyan-rgb) / 0)), radial-gradient(closest-side at 62% 50%, rgb(var(--pink-rgb) / 0.42), rgb(var(--pink-rgb) / 0));
  filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
/* Touch screens have no hover: main.js adds .is-lit while an item crosses the middle of the screen */
.glow li:hover::before, .glow li.is-lit::before { opacity: 1; }
.logo {
  display: block;
  position: relative;
  mix-blend-mode: screen;
  aspect-ratio: 208 / 118;
  background-image: url("assets/otm-client-logos.png");
  background-size: 800% 500%;
  background-position: calc(var(--c) * 100% / 7) calc(var(--r) * 100% / 4);
  background-repeat: no-repeat;
  filter: invert(1);
  opacity: 0.66;
  transition: opacity 0.4s var(--ease);
}
.logo-wall li:hover .logo, .logo-wall li.is-lit .logo { opacity: 1; }

/* Frames: square. A black gallery frame with a white inner line on a
   backlit wall, or a thin white frame. Pictures run to the frame's edge. */
.frame-gallery, .frame-white { position: relative; display: block; isolation: isolate; }
.frame-gallery {
  padding: clamp(12px, 1.5vw, 22px);
  background: linear-gradient(150deg, var(--g800) 0%, var(--ink) 34%, var(--black) 68%, var(--g900) 100%);
  box-shadow: 0 0 70px rgb(255 255 255 / 0.12), 0 0 160px rgb(255 255 255 / 0.06), 0 30px 60px rgba(0, 0, 0, 0.8);
}
.frame-gallery::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0));
  pointer-events: none;
}
.frame-gallery > img { border: 3px solid var(--white); }
.frame-white { padding: clamp(6px, 0.7vw, 10px); background: var(--white); }
.frame-gallery > img, .frame-white > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Case films */
.reel { display: grid; justify-items: center; gap: clamp(28px, 3.4vw, 44px); margin-top: clamp(48px, 6vw, 80px); }
.film { width: min(100%, 1060px); margin: 0; }
.film-frame { color: var(--white); text-decoration: none; }
.film-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; background: var(--black); }
.film-frame.is-playing { cursor: default; }
.film-frame > img { transition: opacity 0.3s var(--ease); }
.reel.is-loading .film-frame > img { opacity: 0.3; }
.frame-gallery > iframe { border: 3px solid var(--white); }
.film-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  border-radius: 50%;
  background: var(--cyan);
  color: var(--black);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.film-play svg { width: 42%; height: 42%; margin-left: 6%; }
.film-play--small { width: 56px; height: 56px; }
.film-frame:hover .film-play, .film-frame:focus-visible .film-play {
  background: var(--pink);
  color: var(--white);
  box-shadow: 0 0 40px rgb(var(--pink-rgb) / 0.7);
  transform: translate(-50%, -50%) scale(1.06);
}
.film-frame.is-playing .film-play { display: none; }
.film-caption { display: grid; justify-items: center; gap: 4px; margin-top: 26px; text-align: center; }
.film-brand { font-family: var(--font-display); font-stretch: 106%; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: 0.02em; }
.film-line { color: var(--g400); font-size: 16px; }
.film-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px clamp(32px, 5vw, 80px); }
.film-stats:empty { display: none; }
.film-stats p { display: grid; justify-items: center; gap: 4px; }
.fs-n { font-family: var(--font-display); font-stretch: 112%; font-size: clamp(32px, 3.4vw, 52px); font-weight: 800; line-height: 1; letter-spacing: 0.01em; }
.fs-l { color: var(--g400); font-size: 14px; }
.picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 900px; }
.pill {
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--g900);
  color: var(--g300);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: box-shadow 0.45s var(--ease);
}
.pill[aria-pressed="true"] { background: var(--cyan); color: var(--black); }
.pill:hover, .pill:focus-visible { background: var(--pink); color: var(--white); box-shadow: 0 0 26px rgb(var(--pink-rgb) / 0.55); }

/* Partner films */
.voices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px);
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.voice { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.voice .film-frame { width: 100%; margin-bottom: 16px; }
.voice-name { font-family: var(--font-display); font-stretch: 106%; font-size: 19px; font-weight: 700; letter-spacing: 0.02em; }
.voice-role { color: var(--g400); font-size: 14px; line-height: 1.45; }

/* Phones and messages: software, rounded, set in the device face */
.sw-phone {
  width: clamp(240px, 21vw, 300px);
  aspect-ratio: 300 / 620;
  padding: 9px;
  border-radius: 42px;
  background: var(--g900);
  box-shadow: 0 0 80px rgb(255 255 255 / 0.08), 0 30px 60px rgba(0, 0, 0, 0.7);
}
.sw-screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 33px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-device);
  letter-spacing: 0;
  text-align: left;
}
.sw-appbar { display: flex; align-items: center; gap: 9px; padding: 30px 12px 10px; }
.sw-back { width: 18px; height: 18px; flex: none; }
.sw-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
}
.sw-avatar--plain { background: var(--g400); isolation: isolate; }
.sw-avatar--plain::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--black); opacity: var(--b, 1); }
.sw-sender { display: grid; min-width: 0; line-height: 1.2; }
.sw-name { display: flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.sw-check { width: 15px; height: 15px; flex: none; }
.sw-verified { color: var(--g600); font-size: 11px; }
.sw-thread { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 10px 11px; overflow: hidden; }
.sw-time { color: var(--g500); font-size: 10.5px; text-align: center; }
.sw-card { width: 93%; overflow: hidden; border-radius: 18px; background: var(--g50); }
.sw-media { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 16 / 10.5; padding: 13px 14px 12px; }
.sw-media--cobalt { background: var(--cobalt); color: var(--white); }
.sw-media--white { background: var(--g100); color: var(--black); }
.sw-media--cyan { background: var(--cyan); color: var(--black); }
.sw-media--black { background: var(--black); color: var(--white); }
.sw-media--photo { position: relative; padding: 0; aspect-ratio: 16 / 9; background: var(--black); }
.sw-media--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sw-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: var(--black);
  transform: translate(-50%, -50%);
}
.sw-play svg { width: 46%; height: 46%; margin-left: 6%; }
.poster-big { font-family: var(--font-display); font-stretch: 112%; font-size: 42px; font-weight: 800; line-height: 0.9; letter-spacing: 0.01em; }
.poster-small { font-family: var(--font-text); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; }
.sw-card-body { display: grid; gap: 3px; padding: 10px 12px 9px; }
.sw-card-title { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.sw-card-text { color: var(--g700); font-size: 12px; line-height: 1.4; }
.sw-actions { display: grid; gap: 6px; padding: 0 10px 10px; }
.sw-action { padding: 8px 10px; border-radius: 999px; background: var(--white); color: var(--cobalt-deep); font-size: 12.5px; font-weight: 600; text-align: center; }
.sw-note { color: var(--g700); font-size: 11.5px; }
.sw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-reply { padding: 6px 11px; border-radius: 999px; background: var(--g100); color: var(--cobalt-deep); font-size: 11.5px; font-weight: 600; }
.sw-composer { padding: 8px 11px 16px; }
.sw-composer span { display: block; padding: 9px 14px; border-radius: 999px; background: var(--g100); color: var(--g500); font-size: 11.5px; }
.sw-bubble { max-width: 84%; padding: 10px 13px; border-radius: 18px; font-size: 13px; line-height: 1.4; }
.sw-bubble--sms { background: var(--sms); color: var(--black); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* From mundane to masterpiece, centered: the Porsche SMS becomes the rich message */
.morph { --a: 1; --b: 1; padding: var(--room) var(--gutter); text-align: center; }
.morph-sticky { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: var(--max); margin: 0 auto; }
.morph-state {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-stretch: 112%;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.state--sms { opacity: calc(1 - var(--a) * 0.7); }
.state--rcs { color: var(--g500); opacity: calc(0.3 + var(--b) * 0.7); }
.is-rcs .state--rcs { color: var(--pink); }
/* Once RCS turns pink, "masterpiece" lights up with the cyan and pink glow of the buttons */
.morph-word { text-shadow: 0 0 20px rgb(0 0 0 / 0), -14px 0 40px rgb(0 0 0 / 0), 14px 0 40px rgb(0 0 0 / 0), 0 0 80px rgb(0 0 0 / 0); }
.is-rcs .morph-word { color: var(--pink); text-shadow: 0 0 20px rgb(var(--pink-rgb) / 0.8), -14px 0 40px rgb(var(--cyan-rgb) / 0.75), 14px 0 40px rgb(var(--pink-rgb) / 0.75), 0 0 80px rgb(var(--pink-rgb) / 0.4); }
.js-motion .state--rcs { transition: color 0.5s var(--ease); }
.js-motion .morph-word { transition: color 0.5s var(--ease), text-shadow 0.5s var(--ease); }
.js-motion .is-rcs .morph-word { transition: color 0.8s var(--ease) 0.3s, text-shadow 1s var(--ease) 0.3s; }
.state-arrow { width: 18px; height: auto; opacity: calc(0.3 + var(--b) * 0.7); }
.morph-caption { color: var(--g500); font-size: 14px; }
.morph-text { max-width: 60ch; margin: clamp(32px, 4vw, 48px) auto 0; color: var(--g300); font-size: clamp(17px, 1.3vw, 20px); }
/* The section's button sits under the paragraph with room to breathe: it touched the text until 7 Oct 2026 (the CMO: "please fix the spacing") */
.morph-text + .button-row { margin-top: clamp(28px, 3.2vw, 40px); }
.morph-layers { position: relative; display: grid; }
.morph-layers > * { grid-area: 1 / 1; }
.morph-sms { align-self: start; opacity: calc(1 - var(--a)); transform: translateY(calc(var(--a) * -10px)); }
.morph-rich { display: grid; gap: 8px; opacity: var(--b); transform: translateY(calc((1 - var(--b)) * 18px)); }
.morph-rich .sw-media { clip-path: inset(0 0 calc((1 - var(--b)) * 100%) 0); }
.morph-actions { opacity: clamp(0, calc(var(--b) * 2 - 1), 1); }
.morph-rcs { opacity: var(--b); }
html:not(.js-motion) .morph-layers { gap: 8px; }
html:not(.js-motion) .morph-layers > * { grid-area: auto; }
html:not(.js-motion) .morph-sms { opacity: 1; transform: none; }
/* The track sets how long the phone stays pinned; the text after it arrives once the pin releases */
.js-motion .morph--live { padding-top: 0; }
.js-motion .morph--live .morph-track { height: 230vh; }
.js-motion .morph--live .morph-sticky {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  justify-content: center;
  gap: 18px;
}
.js-motion .morph--live .sw-phone { width: min(300px, max(220px, calc((100vh - 362px) * 0.4839))); }

/* The studio: six steps beside the live phone */
.studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: center;
  margin-top: clamp(56px, 6vw, 88px);
}
.studio-phone { display: grid; justify-items: center; gap: 18px; margin: 0; }
.phone-caption { color: var(--g500); font-size: 14px; text-align: center; }
/* Real campaign screens stacked in the studio phone; the shown one has .is-on */
.sw-screen--shots { position: relative; background: var(--black); }
.sw-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; }
.sw-shot.is-on { opacity: 1; }
.js-motion .sw-shot { transition: opacity 0.8s var(--ease); }
.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.steps li { position: relative; isolation: isolate; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 8px; align-content: start; }
.steps li::before { inset: -18px -26px; border-radius: 32px; filter: blur(18px); }
.steps li:hover::before, .steps li.is-lit::before { opacity: 1; }
.step-n { grid-row: span 2; min-width: 1.2em; color: var(--cyan); font-family: var(--font-display); font-stretch: 112%; font-size: 34px; font-weight: 700; line-height: 1; transition: color 0.35s var(--ease), text-shadow 0.45s var(--ease); }
.steps li:hover .step-n, .steps li.is-lit .step-n { color: var(--pink); text-shadow: 0 0 18px rgb(var(--pink-rgb) / 0.9), 0 0 40px rgb(var(--pink-rgb) / 0.5); }
.steps h3 { font-size: 21px; line-height: 1.2; transition: text-shadow 0.45s var(--ease); }
.steps li:hover h3, .steps li.is-lit h3 { text-shadow: var(--glow-text); }
.steps p { color: var(--g400); font-size: 16px; line-height: 1.55; }

/* Story */
.story { text-align: center; }
.story-text { max-width: 60ch; margin: clamp(28px, 3.4vw, 44px) auto 0; color: var(--g300); font-size: clamp(17px, 1.3vw, 20px); }
.story .button-row { margin-top: 40px; }

/* Visit: two ways in */
.visit { text-align: center; }
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 96px);
  max-width: 1040px;
  margin: clamp(48px, 6vw, 72px) auto 0;
}
.door { display: grid; gap: 16px; align-content: start; justify-items: center; }
.door h3 { font-size: clamp(22px, 2vw, 30px); }
.door p { max-width: 36ch; color: var(--g400); }
.door .btn { margin-top: 10px; }
/* One door since the one call to action (the CMO, 5 Oct 2026) */
.doors--one { grid-template-columns: minmax(0, 1fr); max-width: 560px; }

/* Footer */
/* Legal pages: one centered column of short paragraphs */
.legal { max-width: 70ch; margin: 0 auto; padding: calc(var(--header-h) + clamp(48px, 9vh, 104px)) var(--gutter) var(--room); text-align: center; }
.legal h1 { font-size: clamp(44px, 6vw, 88px); line-height: 1; }
.legal .lede { margin: 24px auto 0; }
.legal-date { margin-top: 14px; color: var(--g500); font-size: 14px; }
.legal section { margin-top: clamp(44px, 7vh, 72px); }
.legal h2 { font-size: clamp(24px, 2.4vw, 34px); }
.legal h3 { margin-top: 26px; font-size: 18px; }
.legal p { max-width: 62ch; margin: 12px auto 0; color: var(--g300); font-size: 16px; line-height: 1.7; }
.legal a { color: var(--cyan); font-weight: 600; text-decoration: none; transition: color 0.3s var(--ease), text-shadow 0.4s var(--ease); }
.legal a:hover, .legal a:focus-visible { color: var(--white); text-shadow: var(--glow-text); }
/* Details the CMO still has to confirm before launch */
.tbc { color: var(--cyan); font-weight: 700; }

/* Contact: one centered column. The visitor first says who is writing; contact.js
   then shows the fields that choice needs. Fields are filled and rounded, with no
   outlines; errors are pink, the palette's only warm colour */
.contact { max-width: 860px; margin: 0 auto; padding: calc(var(--header-h) + clamp(48px, 9vh, 104px)) var(--gutter) var(--room); }
.contact [hidden] { display: none; }
.contact-head { text-align: center; }
.contact-head h1 { font-size: clamp(40px, 5.4vw, 76px); line-height: 1; }
.contact-head .lede { margin: 24px auto 0; text-wrap: pretty; }
.contact a:not(.btn) { color: var(--cyan); font-weight: 600; text-decoration: none; transition: color 0.3s var(--ease), text-shadow 0.4s var(--ease); }
.contact a:not(.btn):hover, .contact a:not(.btn):focus-visible { color: var(--white); text-shadow: var(--glow-text); }
.contact-form { display: grid; gap: clamp(32px, 4vw, 44px); margin-top: clamp(44px, 7vh, 72px); }
.who { min-width: 0; margin: 0; padding: 0; border: 0; text-align: center; }
.who legend { margin: 0 auto 18px; padding: 0; font-family: var(--font-display); font-stretch: 106%; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: 0.02em; }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice label {
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--g900);
  color: var(--g300);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  cursor: pointer;
  transition: box-shadow 0.45s var(--ease); /* colours swap at once, as on every button */
}
.choice input:checked + label { background: var(--cyan); color: var(--black); }
.choice input:hover + label, .choice input:focus-visible + label { background: var(--pink); color: var(--white); box-shadow: 0 0 26px rgb(var(--pink-rgb) / 0.55); }
.choice input:focus-visible + label { box-shadow: 0 0 0 3px var(--black), 0 0 0 5px var(--cyan), 0 0 26px rgb(var(--pink-rgb) / 0.55); }
.js-contact:not(.has-choice) .after-who { display: none; }
.after-who { display: grid; gap: clamp(28px, 3.4vw, 36px); }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .has-choice .after-who { animation: fields-in 0.6s var(--ease) both; }
}
@keyframes fields-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nudge { max-width: 56ch; margin: 0 auto; color: var(--g300); font-size: 16px; line-height: 1.6; text-align: center; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { color: var(--g200); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; }
.optional { margin-left: 6px; color: var(--g500); font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--g900);
  color: var(--white);
  font-family: var(--font-text);
  font-size: 17px; /* 16px or more keeps phones from zooming into the field */
  line-height: 1.4;
  letter-spacing: 0.01em;
  transition: box-shadow 0.3s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A1A5AA' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 12px 8px;
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--g500); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--cyan), 0 0 24px rgb(var(--cyan-rgb) / 0.3); }
.field [aria-invalid="true"] { box-shadow: 0 0 0 2px var(--pink); }
.field-error { color: var(--pink); font-size: 14px; font-weight: 600; }
.field-error:empty { display: none; }
.who .field-error { margin-top: 14px; }
.field-hint { color: var(--g500); font-size: 14px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-end { display: grid; justify-items: center; gap: 16px; text-align: center; }
.form-end .btn[disabled] { opacity: 0.7; cursor: progress; }
.form-status { color: var(--g300); font-size: 15px; }
.form-status:empty { display: none; }
.form-note { max-width: 52ch; color: var(--g500); font-size: 14px; line-height: 1.6; }
/* Notices: shown through :target after a form post without script, or by contact.js */
.notice { display: none; margin-top: clamp(44px, 7vh, 72px); text-align: center; scroll-margin-top: calc(var(--header-h) + 24px); }
.notice:target, .notice.is-shown { display: block; }
.notice:focus { outline: none; }
.notice h2 { font-size: clamp(28px, 3vw, 44px); }
.notice p { max-width: 56ch; margin: 14px auto 0; color: var(--g300); }
.notice .button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }
#sent:target ~ .contact-form, .is-sent .contact-form, .is-sent [data-notice="failed"] { display: none; }
@media (max-width: 599px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
  .choice label { padding: 11px 16px; font-size: 14px; }
}

/* Landing pages (/carina/, /awny/): one offer and one form. The header holds
   only the logo, so every path on the page leads to the form at #join */
.lp { max-width: var(--max); margin: 0 auto; padding: calc(var(--header-h) + clamp(40px, 8vh, 96px)) var(--gutter) var(--room); text-align: center; }
.lp > section + section { margin-top: clamp(88px, 13vh, 150px); }
.lp a:not(.btn) { color: var(--cyan); font-weight: 600; text-decoration: none; transition: color 0.3s var(--ease), text-shadow 0.4s var(--ease); }
.lp a:not(.btn):hover, .lp a:not(.btn):focus-visible { color: var(--white); text-shadow: var(--glow-text); }
.lp h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.05; }
.lp-hero { display: grid; justify-items: center; gap: 24px; }
.lp-title { font-size: clamp(36px, 6vw, 92px); font-weight: 800; line-height: 1; letter-spacing: 0.01em; }
/* Landing headlines read in two lines on a phone: below 600 px they scale with the screen so
   the longer line fits, "of Messaging Studio" (392 px at 36 px) on the Founding User pages and
   "campaign strategy" (362 px) on the strategy page. At a fixed 36 px "Messaging Studio" pushed
   the hero past the margins below 386 px and off a 320 px screen (6 Oct 2026) */
@media (max-width: 599px) { .lp-title { font-size: clamp(25px, 7.9vw, 36px); } }
.lp-hero .lede { margin: 0 auto; text-wrap: pretty; }
.lp-hero .btn-xl { margin-top: 8px; }
/* On phones the landing hero's button takes the homepage hero's size and stays on one
   line: at 38 px padding and 19 px, "Become a Founding User" ran 28 px off a 320 px
   screen (6 Oct 2026; "Join the Founding Users" before it, 25 px) */
@media (max-width: 599px) { .lp-hero .btn-xl { padding-inline: 26px; font-size: 18px; } }
.lp-proof .proof { margin-top: 0; }
.lp-proof .clients-title { margin-top: clamp(48px, 7vh, 80px); }
/* The sources line sits centred under the logos (Kerstin, 5 Oct 2026: it read as stuck to the left) */
.lp-proof .hero-source { margin-inline: auto; text-align: center; }
.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); max-width: 1080px; margin: clamp(36px, 5vw, 56px) auto 0; padding: 0; list-style: none; }
.lp-cards li { display: grid; gap: 12px; align-content: start; justify-items: center; padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 32px); border-radius: 24px; background: var(--g900); }
.lp-cards h3 { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.15; }
.lp-cards p { max-width: 30ch; color: var(--g300); line-height: 1.55; }
.lp-n { font-family: var(--font-display); font-stretch: 112%; font-size: clamp(34px, 3vw, 48px); font-weight: 800; line-height: 1; color: var(--cyan); text-shadow: 0 0 24px rgb(var(--cyan-rgb) / 0.55); }
.lp-note { display: grid; justify-items: center; gap: 26px; max-width: 760px; margin-inline: auto; }
.lp-note img { width: clamp(150px, 16vw, 210px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: var(--glow-dual); }
.lp-note blockquote { margin: 0; }
.lp-note blockquote p { font-family: var(--font-display); font-stretch: 100%; font-size: clamp(21px, 2.2vw, 30px); font-style: italic; font-weight: 600; line-height: 1.4; letter-spacing: 0.005em; text-wrap: pretty; }
.lp-note footer { display: grid; gap: 4px; margin-top: 22px; }
/* Quote marks take the other brand colour (the CMO, 6 Oct 2026): a pink quote has cyan marks, a cyan quote (.q-cyan) pink ones */
.lp-note blockquote p::before { content: "\201C"; color: var(--cyan); }
.lp-note blockquote p::after { content: "\201D"; color: var(--cyan); }
.q-cyan p { color: var(--cyan); }
.q-cyan p::before, .q-cyan p::after { color: var(--pink); }
.lp-note cite { color: var(--white); font-size: 16px; font-style: normal; font-weight: 700; }
.lp-note footer span { color: var(--g400); font-size: 14px; }
.lp-people { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 6vw, 72px); margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.lp-people li { display: grid; justify-items: center; gap: 6px; }
.lp-people img { width: clamp(120px, 12vw, 160px); height: auto; aspect-ratio: 1; margin-bottom: 12px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: var(--glow-dual); }
.lp-people strong { font-size: 18px; }
.lp-people span { color: var(--g400); font-size: 14px; }
.lp-hosts .lede { margin: clamp(28px, 4vw, 40px) auto 0; }
.lp-join { max-width: 860px; margin-inline: auto; scroll-margin-top: calc(var(--header-h) + 24px); }
.lp-join > .lede { margin: 20px auto 0; }
.lp-join .notice { margin-top: clamp(36px, 5vh, 56px); }
.lp-form { margin-top: clamp(36px, 5vh, 56px); text-align: left; }
.lp-form .who, .lp-form .form-end { text-align: center; }
.lp-faq-list { display: grid; gap: 12px; max-width: 760px; margin: clamp(32px, 4vw, 48px) auto 0; }
.lp-faq details { border-radius: 18px; background: var(--g900); }
.lp-faq summary { padding: 22px 24px; font-size: 18px; font-weight: 700; letter-spacing: 0.01em; list-style: none; cursor: pointer; transition: color 0.3s var(--ease), text-shadow 0.4s var(--ease); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary:hover, .lp-faq summary:focus-visible { color: var(--cyan); text-shadow: 0 0 18px rgb(var(--cyan-rgb) / 0.6); outline: none; }
.lp-faq details[open] summary { color: var(--cyan); }
.lp-faq details p { max-width: 60ch; margin: 0 auto; padding: 0 24px 24px; color: var(--g300); line-height: 1.65; }
@media (max-width: 859px) {
  .lp-cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

/* The session page shows a real rich message on a phone */
.lp-phone { display: grid; justify-items: center; gap: 18px; margin: clamp(32px, 4vw, 48px) 0 0; }
.lp-phone figcaption { max-width: 48ch; color: var(--g400); font-size: 15px; line-height: 1.55; }

/* Newsletter: above the footer of every main page */
.newsletter { max-width: 760px; margin: 0 auto; padding: clamp(72px, 11vh, 120px) var(--gutter) 0; text-align: center; }
.newsletter h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; }
.newsletter .lede { margin: 16px auto 0; }
.newsletter-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 560px; margin: 28px auto 0; }
.newsletter-form input[type="email"] { flex: 1 1 260px; min-width: 0; padding: 16px 22px; border: 0; border-radius: 999px; background: var(--g900); color: var(--white); font-family: var(--font-text); font-size: 17px; transition: box-shadow 0.3s var(--ease); }
.newsletter-form input[type="email"]::placeholder { color: var(--g500); }
.newsletter-form input[type="email"]:focus { outline: none; box-shadow: 0 0 0 2px var(--cyan), 0 0 24px rgb(var(--cyan-rgb) / 0.3); }
.newsletter-form input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--pink); }
.newsletter-status { flex-basis: 100%; margin: 4px 0 0; color: var(--g300); font-size: 15px; }
.newsletter-status:empty { display: none; }
.newsletter-form.is-joined input[type="email"], .newsletter-form.is-joined .btn { display: none; }
/* Without script a sign-up comes back to the homepage's #sent, #missing or #failed notice */
.newsletter #sent:target ~ .newsletter-form { display: none; }
.newsletter .form-note { margin: 16px auto 0; }
.newsletter .form-note a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.newsletter .form-note a:hover, .newsletter .form-note a:focus-visible { color: var(--white); text-shadow: var(--glow-text); }

/* RCS calculator (/rcscalculator/): a working tool first, unlike the homepage
   hero, and one calm panel (Carina's reviews, 5 Oct 2026): the four figures in one
   column, top to bottom, beside the results, the optional extras behind "More
   details", stacked on phones. Type is large enough to read at a glance (Carina
   and Kerstin's launch meeting, 5 Oct 2026); with "More details" closed the head
   and the panel still fit a 1280 x 800 screen. The tool shows only once
   calculator.js runs, since it cannot calculate without it */
/* The full calculator inside a landing page, under its own heading (/carina/, /foundinguser/, /rcsstrategy/) */
.lp-calc > .calc-tool { margin-top: clamp(24px, 3.5vw, 40px); }
/* A client's words between the case studies and the calculator (Kerstin's deck quotes, the CMO, 6 Oct 2026) */
.pull-quote { max-width: 760px; margin: clamp(56px, 7vw, 96px) auto 0; text-align: center; }
.pull-quote p { font-family: var(--font-display); font-stretch: 106%; font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.2; letter-spacing: 0.01em; }
.pull-quote p::before { content: "\201C"; color: var(--cyan); }
.pull-quote p::after { content: "\201D"; color: var(--cyan); }
.pull-quote figcaption { margin-top: 18px; color: var(--g400); font-size: 15px; }
/* On the homepage the full calculator follows the case studies (the CMO, 5 Oct 2026: "in full view here, not just the button") */
.home-calc { padding: 0 var(--gutter) var(--room); text-align: center; }
.calc-page { padding-top: calc(var(--header-h) + clamp(16px, 3vh, 36px)); }
.calc-head { display: grid; justify-items: center; gap: 10px; }
.calc-title { font-size: clamp(28px, 3.4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: 0.01em; }
.calc-title .eyebrow { margin-bottom: 10px; }
.calc-head .lede { max-width: 80ch; margin: 0 auto; font-size: clamp(15px, 1.15vw, 18px); text-wrap: pretty; }
.calc-page > .calc-head + .calc { margin-top: clamp(18px, 3vh, 30px); }
.calc, .calc-how { max-width: 1120px; margin-inline: auto; scroll-margin-top: calc(var(--header-h) + 24px); }
.calc-how { max-width: 860px; }
.calc [hidden] { display: none; }
.calc-noscript { max-width: 56ch; margin: 24px auto 0; color: var(--g300); }
.calc-tool { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(16px, 2.2vw, 28px); padding: clamp(16px, 2vw, 24px); border-radius: 28px; background: var(--g900); text-align: left; }
.calc-form { display: grid; gap: 12px; align-content: start; }
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.calc-stack { display: grid; gap: 12px; }
.calc-tool .field { gap: 5px; }
.calc-tool .field label, .calc-channel legend { color: var(--white); font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.calc-tool .field input { padding: 11px 16px; border-radius: 12px; background: var(--black); font-size: 19px; font-weight: 600; }
.calc-tool .field-hint { font-size: 13px; line-height: 1.35; }
.calc-tool .field-error { font-size: 14px; }
.calc-tool .choice label { padding: 8px 16px; background: var(--black); font-size: 15px; }
/* A rate's two ways in, each with its full label: the chosen one is cyan, so the visitor sees which figure they are typing */
.calc-mode { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-tool .calc-mode .choice label { padding: 6px 14px; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.calc-channel { display: grid; gap: 5px; min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-channel legend { margin: 0 0 5px; padding: 0; }
.calc-channel .choices { justify-content: flex-start; gap: 8px; }
.calc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 4px; }
.calc-go .btn { padding: 13px 26px; font-size: 17px; }
.calc-go .calc-more[open] { flex-basis: 100%; }
.calc-more summary { display: inline-block; padding: 2px 4px; border-radius: 8px; color: var(--cyan); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; list-style: none; cursor: pointer; transition: color 0.3s var(--ease), text-shadow 0.4s var(--ease); }
.calc-more summary::-webkit-details-marker { display: none; }
.calc-more summary:hover { color: var(--white); text-shadow: var(--glow-text); }
.calc-more summary:focus-visible { outline: none; color: var(--white); box-shadow: 0 0 0 2px var(--black), 0 0 0 4px var(--cyan); }
.calc-more-close, .calc-more[open] .calc-more-open { display: none; }
.calc-more[open] .calc-more-close { display: inline; }
.calc-more[open] > .calc-grid { margin-top: 12px; }
.calc-out { display: grid; gap: 10px; align-content: start; padding: clamp(16px, 1.8vw, 22px); border-radius: 20px; background: var(--black); text-align: center; scroll-margin-top: calc(var(--header-h) + 16px); }
.calc-out:focus { outline: none; }
.calc-out .calc-out-title { font-family: var(--font-display); font-stretch: 106%; font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; text-wrap: balance; }
.calc-empty { display: grid; gap: 8px; }
.calc-needs { color: var(--g300); font-size: 15px; line-height: 1.5; }
.calc-rows { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.calc-rows li, .calc-time-out p { display: grid; justify-items: center; gap: 1px; padding: 8px 12px; border-radius: 14px; background: var(--g900); }
.calc-n { font-family: var(--font-display); font-stretch: 106%; font-size: clamp(26px, 2.5vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: 0.01em; color: var(--white); }
.calc-n.hl { color: var(--pink); }
.calc-n.hl-cyan { color: var(--cyan); }
.calc-l { color: var(--g300); font-size: 15px; line-height: 1.35; }
.calc-note, .calc-today { max-width: 48ch; margin: 10px auto 0; color: var(--g300); font-size: 14px; line-height: 1.5; }
.calc-caveat { max-width: 52ch; margin: 0 auto; color: var(--g400); font-size: 13px; line-height: 1.5; }
/* The results fill in as the visitor types (the CMO, 5 Oct 2026: "it's automatic"),
   and the card pops in the first time they appear. Every motion here waits for
   .js-motion; with reduced motion the results simply show */
.calc-filled { display: grid; gap: 4px; }
.calc-filled .calc-caveat { margin-top: 10px; }
.calc-basis { font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .js-motion .calc-out.is-popped .calc-filled { animation: calc-pop-in 0.7s cubic-bezier(0.2, 1.4, 0.35, 1) both; }
  .js-motion .calc-out.is-popped { animation: calc-flash 1.4s ease-out both; }
  .js-motion .calc-out.is-popped .calc-rows li { animation: calc-pop-in 0.6s cubic-bezier(0.2, 1.4, 0.35, 1) both; }
  .js-motion .calc-out.is-popped .calc-rows li:nth-child(2) { animation-delay: 0.12s; }
  .js-motion .calc-out.is-popped .calc-rows li:nth-child(3) { animation-delay: 0.24s; }
}
@keyframes calc-pop-in { 0% { opacity: 0; transform: scale(0.7); } 60% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes calc-flash { 0% { box-shadow: var(--glow-dual); } 100% { box-shadow: 0 0 0 transparent; } }
.calc-list { display: grid; gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; text-align: left; }
.calc-list li { padding: 20px 24px; border-radius: 18px; background: var(--g900); color: var(--g300); font-size: 16px; line-height: 1.6; }
.calc-list strong { display: block; margin-bottom: 4px; color: var(--white); }
.calc-src { display: block; margin-top: 6px; color: var(--g500); font-size: 14px; }
/* The booking section confirms the estimate travels with the request; its heading takes focus after a calculation */
.lp-join > .book-carry { max-width: 62ch; margin: 18px auto 0; padding: 12px 18px; border-radius: 16px; background: var(--g900); color: var(--g200); font-size: 15px; line-height: 1.5; }
.lp-join h2:focus { outline: none; }
/* Why RCS: only claims already on the site, each with its footnote */
.calc-why { max-width: 1080px; margin-inline: auto; }
.calc-why > .lede { margin: 20px auto 0; }
.why-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); max-width: 860px; margin: clamp(40px, 6vh, 64px) auto 0; padding: 0; list-style: none; }
.why-stats li { display: grid; justify-items: center; align-content: start; gap: 10px; padding: clamp(24px, 3vw, 36px) clamp(18px, 2.4vw, 28px); border-radius: 24px; background: var(--g900); }
.why-stats .stat-n { font-size: clamp(40px, 4.4vw, 68px); }
.stat-n.hl-cyan { color: var(--cyan); }
.why-src { color: var(--g500); font-size: 12px; line-height: 1.5; }
.calc-why > .why-close { margin-top: clamp(32px, 5vh, 48px); }
@media (max-width: 899px) {
  .calc-tool { grid-template-columns: minmax(0, 1fr); max-width: 640px; margin-inline: auto; }
}
@media (max-width: 859px) {
  .why-stats { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}
@media (max-width: 559px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-go { padding-top: 0; }
  .calc-tool { padding: 14px; border-radius: 22px; }
}
/* The close of the homepage's case studies: one plain button into the calculator, no widget */
/* The agreement box on the calculator's session form: required, unticked at first */
.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: start; max-width: 640px; margin: 0 auto; text-align: left; }
.consent input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--cyan); cursor: pointer; }
.consent input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--black), 0 0 0 5px var(--cyan); }
.consent [aria-invalid="true"] { box-shadow: 0 0 0 2px var(--pink); }
.consent label { color: var(--g300); font-size: 15px; line-height: 1.55; cursor: pointer; }
.consent .field-error { grid-column: 2; }
@media (max-width: 859px) {
  .calc-cards { grid-template-columns: minmax(0, 1fr); }
}

/* Footer: one centered column, links in one centered row that wraps as groups */
.site-footer { max-width: var(--max); margin: 0 auto; padding: 72px var(--gutter) 40px; text-align: center; }
.footer-top { display: grid; justify-items: center; gap: 32px; }
.footer-nav, .footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(24px, 3vw, 40px); }
.footer-nav ul { margin: 0; padding: 0; list-style: none; }
.footer-nav a { position: relative; isolation: isolate; display: inline-block; color: var(--g300); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; transition: color 0.3s var(--ease), text-shadow 0.4s var(--ease); }
.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--white); text-shadow: var(--glow-text); }
.footer-legal { margin-top: 48px; color: var(--g500); font-size: 13px; }

/* Scroll entrances: hidden only once main.js adds .js-reveal, shown as each
   element enters the viewport. Children of [data-reveal-stagger] arrive one
   after another (--i is set by main.js, --stagger per container). */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal], .js-reveal [data-reveal-stagger] > * {
    transition: opacity 0.9s var(--ease), transform 1.1s var(--ease), clip-path 1.1s var(--ease), filter 1s var(--ease);
    transition-delay: calc(var(--i, 0) * var(--stagger, 90ms));
  }
  .js-reveal [data-reveal="up"]:not(.is-in), .js-reveal [data-reveal-stagger] > :not(.is-in) { opacity: 0; transform: translateY(44px); }
  .js-reveal [data-reveal-stagger="right"] > :not(.is-in) { opacity: 0; transform: translateX(60px); }
  .js-reveal [data-reveal="zoom"]:not(.is-in) { opacity: 0; transform: scale(0.9); }
  .js-reveal [data-reveal="left"]:not(.is-in) { opacity: 0; transform: translateX(-80px); }
  .js-reveal [data-reveal="blur"]:not(.is-in) { opacity: 0; filter: blur(14px); }
  .js-reveal .film .frame-gallery { transition: box-shadow 1.6s var(--ease) 0.5s; }
  .js-reveal .film .frame-gallery::before { transition: opacity 1.6s var(--ease) 0.5s; }
  .js-reveal .film:not(.is-in) .frame-gallery { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8); }
  .js-reveal .film:not(.is-in) .frame-gallery::before { opacity: 0; }
}

/* Cursor trail: a cyan light that follows the pointer */
.trail { position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%; pointer-events: none; }

/* Tablet and phone */
/* Below 1280px the five menu items and two buttons no longer fit on one line
   (labels wrapped onto two lines at 1024 and 960, 5 Oct 2026): the menu folds
   into the Menu button and both buttons stay in the bar */
@media (max-width: 1279px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    padding: 11px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--g900);
    color: var(--white);
    font-family: var(--font-text);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
  }
  .header-ctas { margin-left: auto; }
  .nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; display: none; margin: 0; padding: 32px var(--gutter) 48px; overflow-y: auto; background: var(--black); }
  .site-header.nav-open .nav { display: block; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nav-link { padding: 4px 0; color: var(--white); font-family: var(--font-display); font-stretch: 106%; font-size: 30px; font-weight: 700; }
  .has-menu > .nav-link::after { display: none; }
  .menu { position: static; display: block; min-width: 0; padding: 6px 0 4px; border-radius: 0; background: none; box-shadow: none; }
  .menu::before { display: none; }
  .menu a { padding: 7px 0; font-size: 18px; }
  .menu a:hover { background: none; }
}
@media (max-width: 959px) {
  :root { --header-h: 64px; }
  .bar { gap: 12px; }
  .studio-grid, .doors { grid-template-columns: minmax(0, 1fr); }
  .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-wall { --logo-cols: 4; }
}
@media (max-width: 759px) {
}
@media (max-width: 599px) {
  .brand-name { display: none; }
  .header-cta { padding: 11px 16px; font-size: 13px; }
  .steps, .voices { grid-template-columns: minmax(0, 1fr); }
  .logo-wall { --logo-cols: 3; }
  .proof { flex-direction: column; gap: 18px; }
  .proof-arrow { width: 16px; margin: 4px 0; transform: rotate(90deg); }
  .sw-phone { width: min(100%, 280px); }
}
/* The bar holds the mark, the session button and Menu on one line inside
   20 px margins: at 360 px the Menu button ran 13 px off the screen (6 Oct
   2026), so narrow phones tighten the pills. The button never wraps (the CMO:
   "It should be a single line"); measure a new label at 320, 360, 375 and 390 px */
@media (max-width: 389px) {
  .bar { gap: 10px; }
  .header-cta, .nav-toggle { padding-inline: 12px; }
}