:root {
  --bg: #f3f7fb;
  --soft: #e6eef7;
  --card: #ffffff;
  --ink: #0e2a4d;
  --ink-2: #14365f;
  --ink-3: #1d4a80;
  --text: #44566b;
  --mute: #7c8da3;
  --line: #d8e2ee;
  --on-dark: #cfdced;
  --serif: 'Plus Jakarta Sans', system-ui, sans-serif; /* same font as the text: one font everywhere */
  --sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --radius: 24px;
  --accent: #1f5fbf;
  --accent-soft: #dce8f8;
  --line-dark: #2a4a75;
  --ink-rgb: 14, 42, 77;
  --bg-rgb: 243, 247, 251;
  --accent-rgb: 31, 95, 191;
  --accent-lt: #8db6f0;

  /* "1vw" for the whole page, but it stops growing at 1440 pixels wide, so on a big screen the sizes stay the same
     and the content stays in a centred container with empty space at the sides */
  --vw: min(1vw, 12.8px);
}

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

/* One scroll bar, the same on every laptop and screen: Windows draws a thick bar, a Mac hides it,
   and that changes how wide the page is. Here the bar is always 10 pixels, and its space is always
   reserved, so the page has exactly the same width on every machine. */
html {
  scrollbar-gutter: stable;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--ink-3);
  border: 2px solid var(--bg);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Firefox has its own way of saying the same thing */
@supports (-moz-appearance: none) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-3) var(--bg);
  }
}

html {
  scroll-behavior: smooth; /* only used if JavaScript is off; the script below does it better */
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
p,
figure,
address {
  margin: 0;
}

address {
  font-style: normal;
}

button,
input {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

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

.dark :focus-visible,
.footer :focus-visible,
.np :focus-visible {
  outline-color: #fff;
}

.skip {
  position: absolute;
  left: -999px;
  z-index: 300;
  padding: 0.75rem 1rem;
  color: #fff;
  background: var(--ink);
}

.skip:focus {
  left: 0;
}

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

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, calc(4 * var(--vw)), 2.75rem);
}

h1,
h2,
h3 {
  color: var(--ink);
}

.serif {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
}

em {
  font-style: normal;
  color: var(--accent);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.eyebrow.light {
  color: #fff;
}

.live {
  width: 0.6rem;
  height: 0.6rem;
  background: var(--accent);
  border-radius: 50%;
  animation: blink 1.6s ease-in-out infinite;
}

@keyframes blink {
  50% {
    opacity: 0.25;
  }
}

/* when the script handles scrolling it does it itself, so the browser's own smooth scrolling is switched off */
html.smooth-js {
  scroll-behavior: auto;
}

/* the section that a link scrolled to is focused for keyboard users, without a visible box */
[tabindex='-1']:focus {
  outline: none;
}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(var(--bg-rgb), 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.logo {
  width: auto;
  height: 3.4rem;
}

.logo-dark {
  filter: brightness(0);
}

.footer .logo {
  height: 4.5rem;
}

.brand-tag {
  display: none;
  padding-left: 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  border-left: 1px solid var(--line);
}

.menu-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
}

.nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  padding: 0.5rem clamp(1.25rem, calc(4 * var(--vw)), 2.75rem) 1.25rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.nav.open {
  display: flex;
}

.nav a {
  padding: 0.9rem 0;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.btn.header-cta {
  display: none;
}

@media (min-width: 640px) {
  .btn.header-cta {
    display: inline-flex;
  }
}

@media (min-width: 1240px) {
  .brand-tag {
    display: block;
  }
}

@media (min-width: 1000px) {
  .menu-btn {
    display: none;
  }

  .nav {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 2.4rem;
    padding: 0;
    background: none;
    border: 0;
  }

  .nav a {
    position: relative;
    padding: 0.4rem 0;
    border: 0;
    transition: color 0.2s ease;
  }

  .nav a:hover {
    color: var(--text);
  }

  .nav a[aria-current='page']::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -0.35rem;
    left: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
  }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.6rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: 999px;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.btn svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: currentColor;
}

.btn-ink {
  color: #fff;
  background: var(--accent);
}

.btn-ink:hover {
  background: var(--ink-3);
  transform: translateY(-2px);
}

.btn-line {
  color: var(--ink);
  border-color: rgba(var(--ink-rgb), 0.4);
}

.btn-line:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

/* =====================================================
   1. HERO
   A cinematic hero: moving light that follows the pointer, a big
   headline whose letters rise and shine, a hand-drawn underline,
   a photo collage that wipes in and drifts with the scroll and the
   mouse, a spinning badge, a floating card and a scrolling ribbon
   of topics (index.html > .hero, animated by js/main.js)
   ===================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(3rem, calc(7 * var(--vw)), 5.5rem);
  color: var(--on-dark);
  background: var(--ink);
  overflow: hidden;
}

/* a faint dot grid that fades out towards the edges */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 78%);
}

/* --- hero: the moving light --- */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}

.a1 {
  top: -8rem;
  right: 2%;
  width: 46rem;
  height: 36rem;
  background: radial-gradient(ellipse, rgba(31, 95, 191, 0.55), transparent 70%);
  animation: glow 9s ease-in-out infinite alternate;
}

.a2 {
  bottom: -4rem;
  left: -9rem;
  width: 32rem;
  height: 26rem;
  background: radial-gradient(ellipse, rgba(141, 182, 240, 0.22), transparent 70%);
  animation: glow2 11s ease-in-out infinite alternate;
}

/* a soft spotlight that follows the pointer (js/main.js sets --sx and --sy) */
.spot {
  position: absolute;
  inset: 0;
  background: radial-gradient(520px circle at var(--sx, 72%) var(--sy, 28%), rgba(141, 182, 240, 0.2), transparent 62%);
}

@keyframes glow {
  to {
    transform: translate(-70px, 40px) scale(1.15);
    opacity: 0.75;
  }
}

@keyframes glow2 {
  to {
    transform: translate(90px, -40px) scale(1.2);
  }
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero-grid > * {
  min-width: 0;
}

/* --- hero: the small pill above the headline --- */
.hkick {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
}

.hkick::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  background: var(--accent-lt);
  border-radius: 50%;
  animation: blink 1.6s ease-in-out infinite;
}

/* --- hero: the big headline; every letter rises, the first line shines in a wave --- */
.mega {
  margin-bottom: 1.4rem;
  font-size: clamp(3rem, calc(7.2 * var(--vw)), 6.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.mega .line {
  display: block;
}

.mega .line:first-child {
  color: var(--accent-lt);
}

.split {
  display: inline-block;
  white-space: nowrap;
}

.split .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(70%) rotate(8deg);
  transform-origin: left bottom;
  animation: chUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.15s + var(--i) * 0.04s);
}

.mega .line:first-child .ch {
  animation:
    chUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
    chShine 4.5s ease-in-out infinite;
  animation-delay:
    calc(0.15s + var(--i) * 0.04s),
    calc(2.2s + var(--i) * 0.1s);
}

.split .sp {
  width: 0.28em;
}

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

@keyframes chShine {
  0%,
  100% {
    color: var(--accent-lt);
  }

  50% {
    color: #fff;
  }
}

.hero-lead {
  max-width: 30rem;
  margin-top: 1.6rem;
  font-size: clamp(1rem, calc(1.4 * var(--vw)), 1.15rem);
  color: var(--on-dark);
}

/* --- hero: buttons (the outline button is white on the dark background; both are magnetic) --- */
.hero-actions {
  margin-top: 1.75rem;
}

.hero .btn {
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    translate 0.25s ease-out;
}

.hero .btn-line {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.hero .btn-line:hover {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}

.hero .btn svg {
  transition: transform 0.3s ease;
}

.hero .btn:hover svg {
  transform: translateX(4px);
}

/* a streak of light crossing the main button now and then */
.hero .btn-ink {
  position: relative;
  overflow: hidden;
}

.hero .btn-ink::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
  transform: skewX(-20deg);
  animation: btnShine 3.8s ease-in-out infinite;
}

@keyframes btnShine {
  0%,
  60% {
    left: -60%;
  }

  100% {
    left: 140%;
  }
}

/* --- hero: the three numbers --- */
.hstats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  margin-top: 2.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hstats > div {
  padding: 1.4rem 1.2rem 0 0;
}

.hstats > div + div {
  padding-left: 1.2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.hstats b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.8rem, calc(3 * var(--vw)), 2.4rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent-lt);
}

.hstats span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: var(--mute);
}

/* --- hero: the photo collage with the spinning badge and the floating card --- */
.hmedia {
  --mx: 0;
  --my: 0;
  position: relative;
  height: 28rem;
}

.hm-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 78%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  border-radius: 22px;
  translate: calc(var(--mx) * -10px) calc(var(--my) * -8px + var(--p, 0) * -30px);
}

.hm-second {
  position: absolute;
  bottom: 4.5rem;
  left: 0;
  width: 50%;
  height: 10rem;
  margin: 0;
  overflow: hidden;
  background: #000;
  border: 6px solid var(--ink);
  border-radius: 18px;
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, 0.7);
  translate: calc(var(--mx) * 16px) calc(var(--my) * 12px + var(--p, 0) * -80px);
}

.hm-main img,
.hm-second img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hm-main img {
  object-position: 38% 30%;
  animation: kenburns 16s ease-in-out infinite alternate;
}

.hm-second img {
  object-position: 48% 50%;
  transform: scale(1.14);
  animation: drift 9s ease-in-out infinite alternate;
}

.hm-main:hover img {
  transform: scale(1.05);
}

.hm-second:hover img {
  transform: scale(1.2);
}

@keyframes kenburns {
  to {
    scale: 1.1;
  }
}

@keyframes drift {
  to {
    translate: -4% 3%;
  }
}

/* the photos and the card slide a little against the pointer and the scroll */
.hmedia > figure,
.hmedia > a,
.hmedia > aside {
  transition:
    box-shadow 0.5s ease,
    translate 0.5s ease-out;
}

/* the little tilt the photos get when the pointer moves over them (js/main.js) */
.hmedia .tilting {
  animation: none;
}

/* the white rotating badge with the play button in the middle */
.bspin {
  position: absolute;
  top: 2rem;
  left: calc(24% - 3.5rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.65);
  translate: calc(var(--mx) * 12px) calc(var(--my) * -14px + var(--p, 0) * -120px);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    translate 0.5s ease-out;
}

.bspin:hover {
  transform: scale(1.08);
}

.bspin > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 16s linear infinite;
}

.bspin text {
  font-family: var(--sans);
  font-size: 12.4px;
  font-weight: 600;
  text-transform: uppercase;
  fill: var(--ink);
}

.bspin-play {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
}

/* sound rings spreading out from the badge */
.bspin::before,
.bspin::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(141, 182, 240, 0.55);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: badgeRing 2.8s ease-out infinite;
}

.bspin::after {
  animation-delay: 1.4s;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes badgeRing {
  from {
    opacity: 0.7;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* the white card that floats up and down: "Most Favorite Podcast" */
.hm-card {
  position: absolute;
  right: -0.4rem;
  bottom: 1.6rem;
  width: min(16.4rem, 72%);
  padding: 1.1rem 1.25rem;
  color: var(--text);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.75);
  translate: calc(var(--mx) * -14px) calc(var(--my) * 10px + var(--p, 0) * -50px);
  animation: floatY 6s ease-in-out infinite;
}

@keyframes floatY {
  50% {
    transform: translateY(-8px);
  }
}

.hm-tag {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.hm-card h2 {
  margin-bottom: 0.15rem;
  font-size: 1.15rem;
  line-height: 1.2;
}

.hm-card p {
  font-size: 0.84rem;
}

.deck-bar {
  height: 4px;
  margin-top: 1rem;
  overflow: hidden;
  background: var(--accent-soft);
  border-radius: 4px;
}

.deck-bar i {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  animation: deckBar 7s ease-in-out infinite alternate;
}

@keyframes deckBar {
  to {
    width: 92%;
  }
}

.hm-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.hm-play {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  transition: background-color 0.25s ease;
}

.hm-play:hover {
  background: var(--ink-3);
}

.hm-play::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: 50%;
  animation: ring 2.2s ease-out infinite;
}

@keyframes ring {
  from {
    opacity: 0.8;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* --- hero: the ribbon of topics that scrolls along the bottom --- */
.hero-ticker {
  position: relative;
  margin-top: clamp(2.5rem, calc(5 * var(--vw)), 4rem);
  padding-block: 1.1rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.tick-track {
  display: flex;
  width: max-content;
  animation: tick-scroll 30s linear infinite;
}

.tick {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  min-width: 100vw;
}

.tick li {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding-right: 2.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-dark);
}

.tick li::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent-lt);
  border-radius: 50%;
}

@keyframes tick-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* --- hero: how everything arrives (the intro holds all of this back until it slides away) --- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
}

@keyframes wipeUp {
  from {
    clip-path: inset(100% 0 0 0 round 22px);
  }

  to {
    clip-path: inset(0 0 0 0 round 22px);
  }
}

@keyframes wipeLeft {
  from {
    clip-path: inset(0 100% 0 0 round 18px);
  }

  to {
    clip-path: inset(0 0 0 0 round 18px);
  }
}

@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.94);
  }
}

@keyframes badgeIn {
  from {
    opacity: 0;
    transform: scale(0.2) rotate(-90deg);
  }
}

.js .hkick {
  animation: rise 0.8s 0.1s ease backwards;
}

.js .hero-lead {
  animation: rise 0.8s 0.85s ease backwards;
}

.js .hero-actions {
  animation: rise 0.8s 1s ease backwards;
}

.js .hstats {
  animation: rise 0.8s 1.2s ease backwards;
}

.js .hm-main {
  animation: wipeUp 1.2s 0.2s cubic-bezier(0.7, 0, 0.2, 1) backwards;
}

.js .hm-second {
  animation: wipeLeft 1s 0.7s cubic-bezier(0.7, 0, 0.2, 1) backwards;
}

.js .bspin {
  animation: badgeIn 0.9s 1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.js .hm-card {
  animation:
    cardIn 0.9s 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards,
    floatY 6s 2.1s ease-in-out infinite;
}

.js .hero-ticker {
  animation: rise 0.9s 1.4s ease backwards;
}

@media (min-width: 1000px) {
  .hero-grid {
    grid-template-columns: 1.02fr 1fr;
    gap: 3rem;
  }

  .hmedia {
    height: 38.75rem;
  }

  .hm-second {
    height: 13.4rem;
  }

  .hm-card {
    width: 16.4rem;
  }
}

@media (max-width: 479px) {
  .hstats > div {
    padding-right: 0.8rem;
  }

  .hstats > div + div {
    padding-left: 0.8rem;
  }

  .bspin {
    width: 5.6rem;
    height: 5.6rem;
  }
}

/* visitors who prefer less motion see the finished hero, standing still */
@media (prefers-reduced-motion: reduce) {
  .aurora,
  .hkick::before,
  .split .ch,
  .mega .line:first-child .ch,
  .hero .btn-ink::after,
  .hm-main img,
  .hm-second img,
  .bspin > svg,
  .bspin::before,
  .bspin::after,
  .hm-card,
  .deck-bar i,
  .hm-play::after,
  .js .hkick,
  .js .hero-lead,
  .js .hero-actions,
  .js .hstats,
  .js .hm-main,
  .js .hm-second,
  .js .bspin,
  .js .hm-card,
  .js .hero-ticker {
    animation: none;
  }

  .split .ch {
    opacity: 1;
    transform: none;
  }

  .hm-main,
  .hm-second,
  .bspin,
  .hm-card {
    translate: none;
  }

  .tick-track {
    overflow-x: auto;
  }
}

/* =====================================================
   2. START HERE
   "Where are you in your career?": three choice cards and the
   episode panel that changes with the chosen card
   (index.html > <section id="start">, swapped by js/main.js)
   ===================================================== */
.start {
  padding-block: clamp(3rem, calc(7 * var(--vw)), 5.5rem);
  background:
    radial-gradient(circle at 1px 1px, rgba(var(--ink-rgb), 0.08) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
}

/* --- start: heading block --- */
.start-head {
  max-width: 46rem;
  margin: 0 auto 2.25rem;
  text-align: center;
}

.start-head .eyebrow {
  justify-content: center;
}

.start-head h2 {
  margin-top: 1rem;
  font-size: clamp(2.4rem, calc(5.6 * var(--vw)), 4.4rem);
  line-height: 1.03;
}

.start-lead {
  max-width: 34rem;
  margin: 1.25rem auto 0;
  font-size: clamp(1.02rem, calc(1.5 * var(--vw)), 1.2rem);
}

/* --- start: the three choice cards (radio buttons shown as cards) --- */
.choices {
  display: grid;
  gap: 1rem;
  min-width: 0;
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

/* the real radio button stays invisible on top of the card */
.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.choice-body {
  position: relative;
  display: grid;
  gap: 0.35rem;
  height: 100%;
  padding: 1.4rem 1.5rem 1.5rem;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 22px;
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.choice:hover .choice-body {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(var(--ink-rgb), 0.1);
}

/* the selected card */
.choice input:checked + .choice-body {
  background: #eef4fc;
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(var(--accent-rgb), 0.18);
}

.choice input:focus-visible + .choice-body {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* the small circle in the card corner */
.choice-body::after {
  content: '';
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--line);
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.choice input:checked + .choice-body::after {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 4px #eef4fc;
}

.choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.6rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 14px;
}

.choice-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.choice-body b {
  padding-right: 2rem;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

@media (min-width: 800px) {
  .choices {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* --- start: the result panel (the episode shown after choosing) --- */
.result {
  display: grid;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(var(--ink-rgb), 0.14);
  transition: opacity 0.3s ease;
}

/* JS adds this class for a moment while the panel changes */
.result.swap {
  opacity: 0.2;
}

.result > * {
  min-width: 0;
}

.result-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #0b0c10;
}

/* the whole picture is shown, nothing is cut off; the dark bars match the picture's own dark background */
.result-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.r-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.8rem, calc(8 * var(--vw)), 5.5rem);
  height: clamp(3.8rem, calc(8 * var(--vw)), 5.5rem);
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.5);
  transform: translate(-50%, -50%);
  animation: pulse 2.4s ease-out infinite;
  transition: scale 0.25s ease;
}

.r-play:hover {
  scale: 1.1;
}

.r-play svg {
  width: 38%;
  height: 38%;
  margin-left: 4%;
  fill: currentColor;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 24px rgba(var(--accent-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
  }
}

.result-body {
  padding: clamp(1.5rem, calc(3 * var(--vw)), 2.5rem);
}

.r-tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}

.r-tag i {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
}

.r-tag span:last-child {
  color: var(--accent);
}

.result-body h3 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, calc(3.4 * var(--vw)), 2.8rem);
  line-height: 1.08;
}

.r-meta {
  margin: 0.5rem 0 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
}

/* guest strip: photo, name, company, LinkedIn link */
.r-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 1.5rem;
  padding: 0.75rem;
  background: var(--soft);
  border-radius: 18px;
}

.r-guest img {
  width: 3.4rem;
  height: 3.4rem;
  object-fit: cover;
  border-radius: 50%;
}

.r-guest div {
  flex: 1;
  min-width: 10rem;
}

.r-guest b {
  display: block;
  line-height: 1.25;
  color: var(--ink);
}

.r-guest span {
  font-size: 0.9rem;
}

.r-guest a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
}

@media (min-width: 900px) {
  .result {
    grid-template-columns: 1.15fr 1fr;
  }

  .result-media {
    aspect-ratio: auto;
    min-height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r-play {
    animation: none;
  }
}

/* ---------- sections ---------- */
.section {
  padding-block: clamp(3.5rem, calc(7 * var(--vw)), 6.5rem);
}

.section.soft {
  background: var(--soft);
}

.section.dark {
  color: var(--on-dark);
  background: var(--ink);
}

.head {
  display: grid;
  gap: 1rem;
  align-items: end;
  margin-bottom: 2.75rem;
}

.head h2 {
  margin-top: 0.7rem;
  font-size: clamp(2.1rem, calc(4.2 * var(--vw)), 3.3rem);
  line-height: 1.05;
}

.head > p {
  max-width: 27rem;
}

@media (min-width: 900px) {
  .head {
    grid-template-columns: 1fr auto;
  }

  .head > p {
    justify-self: end;
  }
}

/* ---------- episodes ---------- */
.chapters {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  border-top: 2px solid var(--ink);
}

/* each episode sits in a row that can fold up to nothing and open smoothly */
.ep-item {
  display: grid;
  grid-template-rows: 1fr;
  border-bottom: 1px solid var(--line);
  transition:
    grid-template-rows 0.85s var(--ease) var(--d, 0s),
    opacity 0.7s ease var(--d, 0s),
    visibility 0s linear 0s;
}

.ep-item > .chapter {
  min-height: 0;
  overflow: hidden;
}

/* episodes waiting behind the "More episodes" button (only when JS is on) */
.js .ep-item.is-folded {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  border-bottom-color: transparent;
  transition:
    grid-template-rows 0.85s var(--ease) var(--d, 0s),
    opacity 0.7s ease var(--d, 0s),
    visibility 0s linear calc(0.85s + var(--d, 0s));
}

.chapter {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.25rem;
  align-items: center;
  padding: 1.5rem 1rem;
  isolation: isolate;
  transition: padding-block 0.85s var(--ease) var(--d, 0s);
}

/* a folded episode has no padding either, so it takes up no room at all */
.js .ep-item.is-folded > .chapter {
  padding-block: 0;
}

/* the white card that fades in behind a row on hover (it never moves the text) */
.chapter::before {
  content: '';
  position: absolute;
  inset: 0.35rem 0;
  z-index: -1;
  background: var(--card);
  border-radius: 20px;
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.chapter:hover::before {
  opacity: 1;
  transform: scale(1);
}

.ch-thumb {
  grid-column: 1 / -1;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: 16px;
}

.ch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.chapter:hover .ch-thumb img {
  transform: scale(1.06);
}

.ch-main {
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.chapter:hover .ch-main {
  transform: translateX(6px);
}

.ch-main h3 {
  font-size: clamp(1.35rem, calc(2.3 * var(--vw)), 1.9rem);
  line-height: 1.15;
}

.ch-main h3 a {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size 0.6s var(--ease);
}

.ch-main h3 a:hover,
.ch-main h3 a:focus-visible {
  background-size: 100% 2px;
}

.ch-main p {
  margin-top: 0.5rem;
  max-width: 38rem;
}

.ch-main .ch-who {
  font-size: 0.92rem;
}

.ch-who b {
  color: var(--ink);
}

.ch-when {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--mute);
}

.ch-side {
  display: none;
}

.ch-meta {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
}

.ch-play {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  transition:
    background-color 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.ch-play:hover,
.chapter:hover .ch-play {
  color: #fff;
  background: var(--accent);
}

.ch-play:hover {
  transform: scale(1.08);
}

.ch-play svg {
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 2px;
  fill: currentColor;
}

@media (min-width: 900px) {
  .chapter {
    grid-template-columns: 11rem 1fr 4.5rem 3.4rem;
    gap: 1.75rem;
    padding-block: 1.75rem;
  }

  .ch-thumb {
    grid-column: auto;
  }

  .ch-side {
    display: block;
  }

  .ch-when {
    display: none;
  }
}

/* --- episodes: the "More episodes" button --- */
.ep-more {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2.5rem;
  transition:
    opacity 0.6s ease,
    transform 0.6s var(--ease);
}

.js .ep-more {
  display: flex;
}

.ep-more.is-gone {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.ep-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.7rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--card);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  transition:
    background-color 0.45s var(--ease),
    color 0.45s var(--ease),
    transform 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}

.ep-more-btn:hover:not(:disabled) {
  color: #fff;
  background: var(--ink);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(var(--ink-rgb), 0.2);
}

.ep-more-btn:disabled {
  cursor: progress;
  opacity: 0.6;
}

.ep-more-btn svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.6s var(--ease),
    rotate 0.6s var(--ease);
}

.ep-more-btn:hover:not(:disabled) svg {
  transform: translateY(4px);
}

/* once everything is open the button says "Show less" and the arrow points up */
.ep-more-btn.is-less svg {
  rotate: 180deg;
}

.ep-more-btn.is-less:hover:not(:disabled) svg {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .ep-item,
  .chapter,
  .chapter::before,
  .ch-thumb img,
  .ch-main,
  .ep-more,
  .ep-more-btn,
  .ep-more-btn svg {
    transition: none;
  }
}

/* the latest-episode card in the hero: the title is a link to the episode */
.hm-card h2 a {
  color: inherit;
  transition: color 0.3s ease;
}

.hm-card h2 a:hover {
  color: var(--accent);
}

/* ---------- voices ---------- */
.voices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem 1rem;
}

.voices button {
  display: block;
  width: 100%;
  text-align: center;
}

.ring {
  display: block;
  width: min(100%, 9.5rem);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  padding: 6px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}

.ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.voices b {
  display: block;
  margin-top: 1rem;
  font-size: 0.98rem;
  line-height: 1.25;
  color: var(--ink);
}

.co {
  display: block;
  font-size: 0.86rem;
}

@media (min-width: 700px) {
  .voices {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1100px) {
  .voices {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* only the guest picked in the list is in colour. Hovering, tabbing to or tapping a guest picks that guest (js/main.js), and
   picking one un-picks the one before, so there is never more than one person in colour; the hover itself has no colour
   rule of its own (that is what let a second person light up on a tablet) */
.voices li.is-on .ring {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.voices li.is-on .ring img {
  filter: grayscale(0);
}

.voices button:focus-visible {
  outline-offset: 6px;
  border-radius: 16px;
}

/* the details box: it sits where the host card used to be and shows
   whichever guest is hovered, tabbed to or tapped (js/main.js) */
.gbox {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  margin-top: 3.5rem;
  padding: 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  transition: opacity 0.2s ease;
}

.gbox.swap {
  opacity: 0.2;
}

.gbox > * {
  min-width: 0;
}

.gbox img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  border: 3px solid var(--accent);
  border-radius: 50%;
}

.gbox h3 {
  margin: 0.4rem 0 0.4rem;
  font-size: 1.9rem;
}

.gb-meta {
  margin-top: 0.2rem;
  font-weight: 600;
  color: var(--ink);
}

@media (min-width: 800px) {
  .gbox {
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
  }
}

/* =====================================================
   ABOUT TALKIEPEDIA
   A dark navy band: the story on the left, a collage of three studio
   photos on the right, three pillars underneath and a card for the host
   (index.html > <section id="about">)
   ===================================================== */
.ab {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, calc(7 * var(--vw)), 6.5rem);
  color: var(--on-dark);
  background: var(--ink);
}

/* a soft blue light behind the photos */
.ab::before {
  content: '';
  position: absolute;
  top: -6rem;
  right: -8rem;
  width: 44rem;
  height: 34rem;
  background: radial-gradient(ellipse, rgba(31, 95, 191, 0.5), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.ab > .wrap {
  position: relative;
}

.ab :focus-visible {
  outline-color: #fff;
}

.ab-top {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.ab-top > * {
  min-width: 0;
}

.ab-copy h2 {
  margin: 0.8rem 0 1.25rem;
  font-size: clamp(2.2rem, calc(4.6 * var(--vw)), 3.6rem);
  line-height: 1.05;
  color: #fff;
}

.ab-copy p:not(.eyebrow) {
  max-width: 36rem;
}

.ab-copy p:not(.eyebrow) + p {
  margin-top: 1rem;
  font-weight: 600;
  color: #fff;
}

/* --- about: the photo collage (the wide studio shot on top in full, two clear pictures under it) --- */
.ab-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.ab-photos figure {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
}

.ab-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.ab-photos figure:hover img {
  transform: scale(1.05);
}

/* the wide picture of the host and a guest is shown whole, so both people can be seen */
.abp2 {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 16 / 9;
}

.abp1 {
  grid-row: 2;
  aspect-ratio: 5 / 6;
}

.abp3 {
  grid-row: 2;
  aspect-ratio: 5 / 6;
}

.abp1 img {
  object-position: 50% 45%;
}

/* a wide picture shown in an upright frame: it is cut to the left, where the person is */
.abp3 img {
  object-position: 20% 50%;
}

/* --- about: the three pillars --- */
.ab-pillars {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, calc(5 * var(--vw)), 4rem);
}

.ab-pillars li {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 1.6rem 1.6rem 1.7rem;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 24px;
  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.ab-pillars li:hover {
  background: rgba(31, 95, 191, 0.22);
  border-color: var(--accent-lt);
  transform: translateY(-6px);
}

/* the big faint number in the corner of each pillar */
.ab-no {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
}

.ab-ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.7rem;
  color: var(--accent-lt);
  background: rgba(141, 182, 240, 0.14);
  border-radius: 14px;
}

.ab-ico svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ab-pillars b {
  font-size: 1.45rem;
  color: #fff;
}

/* --- about: the host card --- */
.ab-host {
  display: grid;
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-3);
  border-radius: 28px;
}

.ab-host > * {
  min-width: 0;
}

.ab-host img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  border: 3px solid var(--accent-lt);
  border-radius: 50%;
}

.ab-host h3 {
  margin: 0.4rem 0 0.5rem;
  font-size: 1.9rem;
  color: #fff;
}

.ab .btn-line {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.ab .btn-line:hover {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
}

@media (min-width: 640px) {
  .ab-pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 800px) {
  .ab-host {
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    padding: 1.5rem 2rem 1.5rem 1.5rem;
  }
}

@media (min-width: 1000px) {
  .ab-top {
    grid-template-columns: 1.05fr 1fr;
    gap: 5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-photos img,
  .ab-pillars li {
    transition: none;
  }
}

/* =====================================================
   5. WHAT LISTENER SAYS
   Text and arrows on the left, a slider of listener quotes on
   the right; it plays by itself and pauses when you hover
   (index.html > <section id="listeners">, moved by js/main.js)
   ===================================================== */
.reviews-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.reviews-grid > * {
  min-width: 0;
}

.reviews-copy h2 {
  margin: 0.7rem 0 1.1rem;
  font-size: clamp(2.1rem, calc(4.2 * var(--vw)), 3.3rem);
  line-height: 1.05;
}

.reviews-copy p:not(.eyebrow) {
  max-width: 34rem;
  font-size: 0.98rem;
}

.arrows {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.75rem;
}

.arrows button {
  width: 2.9rem;
  height: 2.9rem;
  font-size: 1.05rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.arrows button {
  display: grid;
  place-items: center;
}

.arrows svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.arrows button:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* --- listeners: the card that holds the slides --- */
.tstage {
  padding: clamp(1.5rem, calc(3 * var(--vw)), 2.25rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 50px rgba(var(--ink-rgb), 0.1);
}

.slides {
  display: grid;
}

/* every slide sits in the same spot; only the one marked .on is visible */
.slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.slide.on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.qm {
  display: block;
  height: 1.9rem;
  font-family: var(--sans);
  font-size: 4rem;
  line-height: 0.8;
  color: var(--accent);
}

.slide blockquote {
  margin: 0.6rem 0 1.5rem;
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--ink);
}

.slide figcaption {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.slide figcaption img {
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  border-radius: 50%;
}

.slide figcaption b {
  display: block;
  color: var(--ink);
}

.slide figcaption small {
  color: var(--mute);
}

/* the thin bar that fills while a quote is on show */
.tprog {
  height: 2px;
  margin-top: 1.4rem;
  overflow: hidden;
  background: var(--line);
}

.tprog i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: fill 6.5s linear forwards;
}

.tstage.paused .tprog i {
  animation-play-state: paused;
}

@keyframes fill {
  to {
    transform: scaleX(1);
  }
}

/* the small round photos under the quote, one per listener */
.tavs {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.tav {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  overflow: hidden;
  opacity: 0.5;
  background: none;
  border: 2px solid transparent;
  border-radius: 50%;
  filter: grayscale(1);
  transition:
    opacity 0.3s ease,
    filter 0.3s ease,
    border-color 0.3s ease,
    transform 0.4s ease;
}

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

.tav:hover {
  opacity: 0.85;
  transform: translateY(-3px);
}

.tav.on {
  opacity: 1;
  border-color: var(--accent);
  filter: none;
  transform: scale(1.1);
}

@media (min-width: 900px) {
  .reviews-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tprog i {
    animation: none;
    transform: scaleX(1);
  }

  .slide {
    transition: none;
  }
}

/* =====================================================
   6. FAQS
   The side text with a card on the left, and the question
   boxes that open one at a time on the right
   (index.html > <section id="faq">, opened by js/main.js)
   ===================================================== */
.faq {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

.faq > * {
  min-width: 0;
}

.faq-side h2 {
  margin: 0.7rem 0 0.9rem;
  font-size: clamp(2.1rem, calc(4 * var(--vw)), 3rem);
  line-height: 1.05;
}

.faq-lead {
  margin-bottom: 1.6rem;
}

.faq-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
}

.faq-card img {
  width: 5.1rem;
  height: 3.9rem;
  object-fit: cover;
  border-radius: 10px;
}

.faq-card b {
  display: block;
  font-family: var(--serif);
  color: var(--ink);
}

.faq-card span {
  font-size: 0.88rem;
  color: var(--mute);
}

.acc-item {
  margin-bottom: 0.75rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.acc-item.open {
  border-color: var(--accent);
  box-shadow: 0 18px 38px rgba(var(--ink-rgb), 0.1);
}

.acc-q {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 1.35rem 1.5rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  text-align: left;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.acc-q i {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}

.acc-q span {
  flex: 1;
}

/* the round plus that turns into a minus when the question is open */
.acc-q b {
  position: relative;
  flex: none;
  width: 2rem;
  height: 2rem;
  background: var(--soft);
  border-radius: 50%;
  transition:
    background-color 0.4s ease,
    transform 0.5s ease;
}

.acc-q b::before,
.acc-q b::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 2px;
  margin: -1px 0 0 -0.375rem;
  background: var(--ink);
  border-radius: 2px;
  transition:
    transform 0.5s ease,
    background-color 0.3s ease;
}

.acc-q b::after {
  transform: rotate(90deg);
}

.open .acc-q b {
  background: var(--accent);
  transform: rotate(180deg);
}

.open .acc-q b::before,
.open .acc-q b::after {
  background: #fff;
}

.open .acc-q b::after {
  transform: rotate(0);
}

/* the answer slides open by growing from zero height */
.acc-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease;
}

.open .acc-a {
  grid-template-rows: 1fr;
}

.acc-a > div {
  overflow: hidden;
}

.acc-a p {
  padding: 0 1.5rem 1.5rem 3.75rem;
  color: var(--text);
}

@media (min-width: 900px) {
  .faq {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4.5rem;
  }

  .faq-side {
    position: sticky;
    top: 6.5rem;
  }
}

@media (max-width: 539px) {
  .acc-a p {
    padding-left: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acc-a,
  .acc-q b,
  .acc-q b::before,
  .acc-q b::after {
    transition: none;
  }
}

/* =====================================================
   8. SUBSCRIBE FOR THE LATEST EPISODES (from the live Talkiepedia site)
   A rounded card over the trailer picture, text on one side and the
   newsletter box on the other (index.html > <section id="subscribe">)
   ===================================================== */
.sub-wrap {
  padding-block: clamp(3rem, calc(6 * var(--vw)), 5rem);
}

.subs {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, calc(5 * var(--vw)), 4rem);
  color: var(--on-dark);
  background: var(--ink) url('../img/site/trailer.png') center / cover no-repeat;
  border-radius: 32px;
}

/* a dark blue wash over the picture, so the text stays easy to read */
.subs::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(14, 42, 77, 0.96) 0%, rgba(14, 42, 77, 0.82) 55%, rgba(14, 42, 77, 0.7) 100%);
}

.subs-in {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2rem;
  align-items: center;
}

.subs-in > * {
  min-width: 0;
}

.subs h2 {
  font-size: clamp(2rem, calc(4.4 * var(--vw)), 3.4rem);
  line-height: 1.08;
  color: #fff;
}

.subs h2 em {
  font-style: normal;
  color: var(--accent-lt);
}

.subs-copy p {
  max-width: 32rem;
  margin-top: 1rem;
}

.subs-label {
  margin-bottom: 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}

.sub-form {
  display: flex;
  padding: 0.35rem;
  background: #fff;
  border-radius: 999px;
}

.sub-form input {
  flex: 1;
  min-width: 0;
  padding: 0 1.25rem;
  color: var(--ink);
  background: none;
  border: 0;
  outline: 0;
}

.sub-form button {
  padding: 0.85rem 1.75rem;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.sub-form button:hover {
  background: var(--ink-3);
}

.sub-msg {
  min-height: 1.7rem;
  margin-top: 0.7rem;
  font-weight: 600;
  color: #fff;
}

.sub-msg.bad {
  color: #ffb4a8;
}

@media (min-width: 900px) {
  .subs-in {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}

/* =====================================================
   9. IN COLLABORATION WITH (from the live Talkiepedia site)
   The company logos scrolling slowly from right to left
   (index.html > <section id="partners">)
   ===================================================== */
.partners {
  padding-block: clamp(2.75rem, calc(5 * var(--vw)), 4.25rem);
  background: var(--card);
}

/* the heading block above the logos: small label, title and a short paragraph */
.partners-head {
  max-width: 46rem;
  margin: 0 auto 2.25rem;
  text-align: center;
}

.partners-head .eyebrow {
  justify-content: center;
}

.partners-head h2 {
  margin-top: 0.8rem;
  font-size: clamp(2rem, calc(4 * var(--vw)), 3rem);
  line-height: 1.1;
}

.partners-head p:not(.eyebrow) {
  margin-top: 1rem;
}

/* the window the logos scroll through; the edges fade out softly */
.logo-scroller {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* the moving belt: two identical lists side by side, moved left by exactly one list */
.logo-track {
  display: flex;
  width: max-content;
  animation: logo-scroll 34s linear infinite;
}

/* the belt never stops: not on hover, not on focus */
.logo-track,
.tick-track {
  will-change: transform;
}

/* each list is at least as wide as the screen, so the belt never runs out of logos */
.logos {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  min-width: 100vw;
}

.logos li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  height: 5rem;
  padding: 0 clamp(1.4rem, calc(3 * var(--vw)), 2.5rem);
}

/* logos stay in full colour; the hovered one grows a little */
.logos img {
  width: auto;
  height: auto;
  max-width: 10rem;
  max-height: 3.8rem;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 0.3s ease;
}

.logos li:hover img {
  transform: scale(1.12);
}

/* the Mercedes-Benz and Philips pictures are trimmed to the logo itself, so they follow the same size rules as the rest */
.logos img[src*='benz'] {
  max-width: 11rem;
}

@keyframes logo-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* visitors who prefer less motion get a row they scroll by hand */
@media (prefers-reduced-motion: reduce) {
  .logos li:hover img {
    transform: none;
  }
}

/* =====================================================
   9. UPCOMING PODCAST: LATEST NEWS FOR YOU
   A dark navy panel: the news text and the "1,000+" number on one
   side, two tall photo cards on the other (the second one sits lower).
   Each card shows its title over the photo and slides its text up on
   hover (index.html > <section id="news">)
   ===================================================== */
.npanel {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(1.75rem, calc(4 * var(--vw)), 3.5rem);
  overflow: hidden;
  color: var(--on-dark);
  background: var(--ink);
  border-radius: 36px;
}

.npanel > * {
  position: relative;
  min-width: 0;
}

/* a soft blue light in the corner of the panel */
.npanel::before {
  content: '';
  position: absolute;
  top: -8rem;
  right: -6rem;
  width: 34rem;
  height: 28rem;
  background: radial-gradient(ellipse, rgba(31, 95, 191, 0.55), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.npanel-copy h2 {
  margin-top: 0.8rem;
  font-size: clamp(2.2rem, calc(4.6 * var(--vw)), 3.6rem);
  line-height: 1.05;
  color: #fff;
}

.npanel-copy h2 span {
  color: var(--accent-lt);
}

.npanel-copy > p:not(.eyebrow) {
  max-width: 34rem;
  margin-top: 1.25rem;
}

.npanel-copy em {
  color: var(--accent-lt);
}

/* the big number */
.nstat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  max-width: 34rem;
  margin: 1.75rem 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.nstat b {
  font-size: clamp(2.2rem, calc(4 * var(--vw)), 3.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-lt);
}

.nstat span {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.npanel .btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- news: the two photo cards --- */
.ncards {
  display: grid;
  gap: 1.1rem;
}

.ncard {
  position: relative;
  display: block;
  min-height: 24rem;
  overflow: hidden;
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
}

.ncard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.ncard:hover img,
.ncard:focus-visible img {
  transform: scale(1.08);
}

/* the dark fade the text sits on */
.ncard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 26, 49, 0.96) 0%, rgba(8, 26, 49, 0.7) 38%, rgba(8, 26, 49, 0) 70%);
  pointer-events: none;
}

.ntag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: 0.35rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(8, 26, 49, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

/* the round arrow in the corner turns to point up and right on hover */
.narrow {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  color: var(--ink);
  background: var(--card);
  border-radius: 50%;
  transition:
    transform 0.4s ease,
    background-color 0.3s ease;
}

.narrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ncard:hover .narrow,
.ncard:focus-visible .narrow {
  background: var(--accent-lt);
  transform: rotate(-45deg);
}

.nbody {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  padding: 1.4rem 1.4rem 1.5rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.nbody b {
  display: block;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #fff;
}

/* the text under the title: open on phones, slides open on hover on computers */
.nexcerpt {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: #e4edf8;
}

.nexcerpt > span {
  overflow: hidden;
}

/* on phones and tablets the card grows with its text, so a long text never spills over the photo */
@media (max-width: 999px) {
  .ncard {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 22rem;
    padding-top: 12rem;
  }

  .nbody {
    position: relative;
  }
}

@media (min-width: 1000px) {
  .npanel {
    grid-template-columns: 1fr 1.25fr;
    gap: 3.5rem;
  }

  .ncards {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .ncard {
    min-height: 31rem;
  }

  /* the second card sits lower, so the two cards are staggered */
  .ncard:nth-child(2) {
    margin-top: 3.5rem;
  }
}

/* on computers the text starts hidden and slides open when you hover or tab to the card */
@media (min-width: 1000px) and (hover: hover) {
  .nexcerpt {
    grid-template-rows: 0fr;
    margin-top: 0;
    transition:
      grid-template-rows 0.5s ease,
      margin-top 0.5s ease;
  }

  .ncard:hover .nexcerpt,
  .ncard:focus-visible .nexcerpt {
    grid-template-rows: 1fr;
    margin-top: 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ncard img,
  .narrow,
  .nexcerpt {
    transition: none;
  }
}

/* ---------- footer ---------- */
.footer {
  padding-top: 4rem;
  color: var(--on-dark);
  background: var(--ink);
  border-top: 1px solid var(--ink-3);
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer-grid > * {
  min-width: 0;
}

.foot-about {
  max-width: 24rem;
  margin-top: 1rem;
}

.footer h2 {
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer a:not(.brand):hover {
  color: #fff;
}

.foot-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--ink-3);
  font-size: 0.88rem;
}

.foot-bar a {
  color: #fff;
}

@media (min-width: 900px) {
  .footer-grid {
    grid-template-columns: 2fr 1fr 1.7fr 1fr;
    gap: 3rem;
  }

  .foot-bar {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---------- footer icons ---------- */
.ico {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico-link {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.45;
}

.ico-link .ico {
  margin-top: 0.2rem;
  color: #d4d7f1;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.soc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  color: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.soc .ico {
  width: 1.3rem;
  height: 1.3rem;
}

.footer .soc:hover,
.footer a.soc:hover {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
  transform: translateY(-3px);
}

.share-note {
  min-height: 1.4rem;
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: #fff;
}

.foot-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 1rem;
  color: #fff;
  border: 1px solid var(--line-dark);
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.footer .to-top:hover,
.footer a.to-top:hover {
  color: var(--ink);
  background: #fff;
}

/* =====================================================
   7. FOOTER EXTRAS (from the build page)
   Faint floating icons in the background, the "Listen" heading
   link, and the "Crafted by [heart] Forge Softech" credit
   ===================================================== */
.footer {
  position: relative;
  overflow: hidden;
}

/* the real footer content sits above the decoration */
.footer > .wrap {
  position: relative;
  z-index: 1;
}

.footer h2 a {
  transition: color 0.2s ease;
}

.footer h2 a:hover {
  color: var(--accent-lt);
}

.foot-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.foot-decor svg {
  position: absolute;
  fill: none;
  stroke: #fff;
  stroke-width: 0.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.08;
}

/* microphone with sound waves: top right, the biggest, standing straight */
.foot-decor .d1 {
  top: -1rem;
  right: 2%;
  width: 32rem;
  height: 19.2rem;
  animation: foot-drift-a 16s ease-in-out infinite;
}

.foot-decor .d1 .w1,
.foot-decor .d1 .w2,
.foot-decor .d1 .w3 {
  animation: foot-wave 3s ease-in-out infinite;
}

.foot-decor .d1 .w2 {
  animation-delay: 0.4s;
}

.foot-decor .d1 .w3 {
  animation-delay: 0.8s;
}

/* headphones: bottom left */
.foot-decor .d2 {
  bottom: -1rem;
  left: -2rem;
  width: 18rem;
  height: 18rem;
  rotate: -10deg;
  animation: foot-drift-b 19s ease-in-out infinite;
  animation-delay: -6s;
}

/* compass: top middle */
.foot-decor .d4 {
  top: 1rem;
  left: 32%;
  width: 11rem;
  height: 11rem;
  animation: foot-drift-b 14s ease-in-out infinite;
  animation-delay: -3s;
}

/* play button: bottom middle */
.foot-decor .d6 {
  bottom: 3rem;
  left: 46%;
  width: 9rem;
  height: 9rem;
  animation: foot-drift-a 17s ease-in-out infinite;
  animation-delay: -9s;
}

@keyframes foot-wave {
  0%,
  100% {
    opacity: 0.2;
  }

  50% {
    opacity: 1;
  }
}

/* two different wandering paths so the icons drift here and there */
@keyframes foot-drift-a {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(-70px, 40px) rotate(6deg);
  }

  50% {
    transform: translate(-30px, 90px) rotate(-5deg);
  }

  75% {
    transform: translate(50px, 30px) rotate(4deg);
  }
}

@keyframes foot-drift-b {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(80px, -40px) rotate(-6deg);
  }

  50% {
    transform: translate(140px, 30px) rotate(5deg);
  }

  75% {
    transform: translate(50px, 70px) rotate(-4deg);
  }
}

/* --- footer: the "Crafted by [heart] Forge Softech" credit --- */
.crafted {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: #b9b2cc;
}

/* two overlapping hearts, pink in front and orange behind, beating gently */
.crafted-heart {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  animation: heart-beat 2s ease-in-out infinite;
}

.crafted-heart svg {
  width: 100%;
  height: 100%;
}

.heart-back {
  fill: #ff9a62;
  fill-opacity: 0.9;
}

.heart-front {
  fill: #ff5c8a;
  fill-opacity: 0.92;
}

/* the name: bold, colour fading from orange to green */
.crafted-name {
  font-weight: 800;
  color: transparent;
  background: linear-gradient(90deg, #ff7a45 0%, #f0a060 45%, #7ec26f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes heart-beat {
  0%,
  60%,
  100% {
    transform: scale(1);
  }

  20% {
    transform: scale(1.18);
  }

  40% {
    transform: scale(1.04);
  }
}

/* on phones the decoration is smaller so the text stays clear */
@media (max-width: 699px) {
  .foot-decor .d4,
  .foot-decor .d6 {
    display: none;
  }

  .foot-decor .d1 {
    width: 20rem;
    height: 12rem;
  }

  .foot-decor .d2 {
    width: 12rem;
    height: 12rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .foot-decor svg,
  .foot-decor .d1 path,
  .crafted-heart {
    animation: none;
  }
}

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.92);
}

.modal-box {
  width: 100%;
  max-width: 62rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 20px;
}

.modal-box iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
}

/* ---------- reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

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

  .live {
    animation: none;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =====================================================
   OPENING ANIMATION (INTRO)
   A cinematic welcome: the logo inside a ring that fills from 0 to
   100, the tagline coming into focus, then two curtains split open
   to reveal the hero (index.html > #intro, run by js/main.js)
   ===================================================== */
.intro {
  display: none;
}

.js .intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: block;
  overflow: hidden;
  color: var(--on-dark);
}

/* shown only on the first visit (the script in the head sets .intro-active) */
.js:not(.intro-active) .intro {
  display: none;
}

/* while the intro plays, the hero waits; its entrance starts as the curtains open */
.intro-active .hero,
.intro-active .hero *,
.intro-active .hero *::before,
.intro-active .hero *::after {
  animation-play-state: paused;
}

/* --- intro: the two curtains (left half and right half of one picture) --- */
.curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}

.curtain-l {
  left: 0;
  background: radial-gradient(circle at 100% 45%, #1d4a80 0%, #0e2a4d 62%, #081a31 100%);
}

.curtain-r {
  right: 0;
  background: radial-gradient(circle at 0% 45%, #1d4a80 0%, #0e2a4d 62%, #081a31 100%);
}

.intro.leave .curtain-l {
  transform: translateX(-101%);
}

.intro.leave .curtain-r {
  transform: translateX(101%);
}

/* everything written on the curtains fades first, then they open */
.intro-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}

.intro.leave .intro-ui {
  opacity: 0;
  pointer-events: none;
}

/* --- intro: the logo with the ring that fills up --- */
.intro-core {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(11rem, calc(26 * var(--vw)), 15rem);
  aspect-ratio: 1;
}

/* a breathing glow behind the logo */
.intro-core::before {
  content: '';
  position: absolute;
  inset: -35%;
  background: radial-gradient(circle, rgba(31, 95, 191, 0.55), transparent 65%);
  animation: breathe 3s ease-in-out infinite;
}

/* a ring that spreads out from the logo again and again */
.intro-core::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(141, 182, 240, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: ring-out 1.8s ease-out infinite;
}

.intro-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.ring-track,
.ring-fill {
  fill: none;
  stroke-width: 2.5;
}

.ring-track {
  stroke: rgba(255, 255, 255, 0.14);
}

.ring-fill {
  stroke: var(--accent-lt);
  stroke-linecap: round;
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
}

.intro-logo {
  position: relative;
  width: 50%;
  height: auto;
  opacity: 0;
  transform: scale(0.8);
  animation: logo-pop 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}

@keyframes logo-pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.6;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes ring-out {
  0% {
    opacity: 0.6;
    transform: scale(0.85);
  }

  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

/* --- intro: the counter, the tagline and the small line under it --- */
.intro-count {
  margin-top: 1.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--mute);
}

.intro-count b {
  display: inline-block;
  min-width: 2.2ch;
  text-align: right;
  font-weight: 700;
  color: #fff;
}

.intro-line {
  margin-top: 0.9rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, calc(6 * var(--vw)), 4rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0;
  filter: blur(12px);
  transition:
    opacity 0.9s ease,
    filter 0.9s ease,
    letter-spacing 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.intro-line em {
  color: var(--accent-lt);
}

.intro-sub {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark);
  opacity: 0;
  transition: opacity 0.9s ease 0.35s;
}

/* JS adds this when the ring passes halfway */
.intro.show-words .intro-line {
  opacity: 1;
  filter: blur(0);
  letter-spacing: -0.02em;
}

.intro.show-words .intro-sub {
  opacity: 1;
}

/* --- intro: corner labels and the skip button --- */
.intro-corner {
  position: absolute;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.intro-tl {
  top: 1.6rem;
  left: 1.75rem;
}

.intro-bl {
  bottom: 1.6rem;
  left: 1.75rem;
}

.intro-skip {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  z-index: 2;
  padding: 0.6rem 1.1rem;
  font-size: 0.8rem;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.intro-skip:hover {
  color: var(--ink);
  background: #fff;
}

/* --- intro: twinkling stars (js/main.js adds them) --- */
.intro-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.spark {
  position: absolute;
  background: #fff;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  animation: twinkle 3.2s ease-in-out infinite;
}

.spark.lime {
  background: var(--accent-lt);
}

.spark.warm {
  background: var(--accent-soft);
}

/* visitors who prefer less motion do not see the intro at all */
@media (prefers-reduced-motion: reduce) {
  .js .intro {
    display: none;
  }
}

/* =====================================================
   THE LATEST EPISODE CARD (small and wide)
   A thumbnail, the title with the guest, and a round play button, in the old card's place.
   ===================================================== */
.hm-card.hm-card-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(27rem, 96%);
  padding: 1rem 1.15rem;
  border-radius: 24px;
}

.hm-card-row .hm-thumb {
  display: block;
  flex: none;
  width: 4.2rem;
  height: 4.2rem;
  overflow: hidden;
  background: var(--ink);
  border-radius: 14px;
}

.hm-card-row .hm-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hm-card-row .hm-text {
  flex: 1;
  min-width: 0;
}

.hm-card-row .hm-tag {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
}

.hm-card-row h2 {
  font-size: 1.1rem;
}

.hm-card-row p {
  line-height: 1.35;
  color: var(--mute);
}

.hm-card-row .hm-play {
  width: 3.5rem;
  height: 3.5rem;
}

@media (min-width: 1000px) {
  .hm-card.hm-card-row {
    width: 27rem;
  }
}

@media (max-width: 479px) {
  .hm-card.hm-card-row {
    gap: 0.8rem;
    padding: 0.85rem 0.95rem;
  }

  .hm-card-row .hm-thumb {
    width: 3.4rem;
    height: 3.4rem;
  }

  .hm-card-row .hm-play {
    width: 3rem;
    height: 3rem;
  }
}

/* the FAQs are back on the soft blue the site already uses (the same as Episodes and What Listener Says) */
#faq {
  background: var(--soft);
}

/* =====================================================
   HERO, STORY-SCAPE STYLE
   Top half: the studio photo under a blue wash, a giant headline with the host's face standing in for the "o",
   a "Start Listening" pill at the end of the last line, the topics as outlined pills, and the latest episode card.
   Bottom half: a dark panel with quarter-circle shapes, a short note and a big number.
   ===================================================== */
.hero.hs {
  padding-top: 0;
  background: #07182f;
}

.hs-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, calc(6 * var(--vw)), 5rem) clamp(2.2rem, calc(4 * var(--vw)), 3.4rem);
}

.hs-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--ink);
}

.hs-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 22%;
  transform: scaleX(-1); /* turned around, so the host stands on the right */
  animation: kenburns 20s ease-in-out infinite alternate;
}

.hs-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 24, 47, 0.9) 0%, rgba(7, 24, 47, 0.6) 48%, rgba(7, 24, 47, 0.2) 100%),
    linear-gradient(0deg, rgba(7, 24, 47, 0.75) 0%, rgba(7, 24, 47, 0) 40%);
}

.hs-grid {
  display: grid;
  gap: 2rem;
  align-items: end;
  min-height: clamp(26rem, calc(36 * var(--vw)), 34rem);
}

.hs-copy .mega {
  margin-bottom: 0;
  font-size: clamp(3rem, calc(8.4 * var(--vw)), 7.4rem);
  line-height: 0.98;
}

/* the last line: "Lead." and the button side by side */
.hs-last {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.5em;
}

.hs-go {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.5rem 0.45rem 1.4rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  background: #fff;
  border-radius: 999px;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease;
}

.hs-go:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.7);
}

.hs-go-dot {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  background: var(--ink);
  border-radius: 50%;
  transition: transform 0.4s ease;
}

.hs-go:hover .hs-go-dot {
  transform: rotate(45deg);
}

.hs-go-dot svg {
  width: 1.1rem;
  height: 1.1rem;
}

.hs-copy .hero-lead {
  max-width: 32rem;
  margin-top: 1.4rem;
}

/* the right side: the card, and under it the topics */
.hero .hs-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.4rem;
  height: auto;
}

.hs-side .hm-card.hm-card-row {
  position: relative;
  right: auto;
  bottom: auto;
  width: min(25rem, 100%);
}

.hs-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem;
  max-width: 25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-pills li {
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: #fff;
  background: rgba(7, 24, 47, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.hs-pills li:hover {
  color: var(--ink);
  background: #fff;
}

/* ----- the bottom half ----- */
.hs-bottom {
  padding-block: clamp(2rem, calc(3.4 * var(--vw)), 3rem);
  overflow: hidden;
  color: #fff;
  background: #07182f;
}

.hs-bgrid {
  display: grid;
  gap: 1.6rem 2rem;
  align-items: center;
}

/* four tiles: quarter-circles in blue and a portrait */

.hs-about h2 {
  font-size: clamp(1.4rem, calc(2.2 * var(--vw)), 2rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.hs-big b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(3rem, calc(6.4 * var(--vw)), 5.6rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

/* a thin line with a round badge in the middle */
.hs-rule {
  position: relative;
  height: 4.4rem;
}

.hs-rule::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
}

.hs-rule-dot {
  position: absolute;
  top: 50%;
  left: 62%;
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  background: #07182f;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  translate: -50% -50%;
}

.hs-rule-dot img {
  width: 60%;
  height: auto;
  filter: brightness(0) invert(1);
}

.hs-text {
  max-width: 28rem;
  font-size: 0.9rem;
  color: var(--on-dark);
}

.hs-join {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.hs-avatars {
  display: inline-flex;
}

.hs-avatars img {
  width: 2.2rem;
  height: 2.2rem;
  object-fit: cover;
  border: 2px solid #07182f;
  border-radius: 50%;
}

.hs-avatars img + img {
  margin-left: -0.6rem;
}

.hs-join a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hs-join a svg {
  width: 1rem;
  height: 1rem;
}

@media (min-width: 1000px) {
  .hs-grid {
    grid-template-columns: 1.5fr 0.7fr;
    gap: 2.5rem;
  }

  /* shapes on the left spanning all rows; heading and number on the first row, the line, then the note and the link */
  .hs-bgrid {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'shapes about big'
      'shapes rule rule'
      'shapes text join';
    gap: 0.4rem 2.4rem;
  }

  .hs-about {
    grid-area: about;
    align-self: end;
  }

  .hs-big {
    grid-area: big;
    align-self: end;
  }

  .hs-rule {
    grid-area: rule;
  }

  .hs-text {
    grid-area: text;
  }

  .hs-join {
    grid-area: join;
    justify-self: end;
  }
}

@media (max-width: 999px) {
  .hs-bg::after {
    background: linear-gradient(0deg, rgba(7, 24, 47, 0.95) 0%, rgba(7, 24, 47, 0.78) 55%, rgba(7, 24, 47, 0.55) 100%);
  }

  .hero .hs-side {
    align-items: flex-start;
  }

  .hs-pills {
    justify-content: flex-start;
  }
}

.js .hs-bg img {
  animation:
    fadeIn 1.4s ease backwards,
    kenburns 20s 1.4s ease-in-out infinite alternate;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-bg img,
  .js .hs-bg img {
    animation: none;
  }
}

/* the same picture as the Subscribe block (the studio microphone on its desk), with the same dark blue wash over it.
   It is turned around so the microphone stands on the right, away from the words. */
.hs-bg {
  background: var(--ink);
}

.hs-bg img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scaleX(-1);
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

.hs-bg::after {
  background: linear-gradient(100deg, rgba(14, 42, 77, 0.96) 0%, rgba(14, 42, 77, 0.82) 55%, rgba(14, 42, 77, 0.7) 100%);
}

@media (max-width: 999px) {
  .hs-bg::after {
    background: linear-gradient(180deg, rgba(14, 42, 77, 0.9) 0%, rgba(14, 42, 77, 0.8) 100%);
  }
}

/* the Start Listening button: sky blue, under the paragraph */
.hs-actions {
  margin-top: 1.6rem;
}

.hs-go {
  color: var(--ink);
  background: var(--accent-lt);
}

.hs-go:hover {
  background: #a9c9f5;
}

.hs-go-dot {
  color: #fff;
  background: var(--ink);
}

/* =====================================================
   THE DARK PANEL UNDER THE HERO, TIDIED
   Even space above and below, tiles sized to match the text beside them, a bigger heading, a bigger note and a
   number that sits on the same line as the heading.
   ===================================================== */
.hs-bottom {
  padding-block: clamp(2.6rem, calc(4.4 * var(--vw)), 4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hs-bgrid {
  align-items: center;
  row-gap: 1rem;
}

.hs-about h2 {
  font-size: clamp(1.5rem, calc(2.4 * var(--vw)), 2.2rem);
}

.hs-big b {
  font-size: clamp(3rem, calc(6 * var(--vw)), 5.2rem);
  line-height: 0.95;
}

.hs-rule {
  height: 3.6rem;
}

.hs-rule-dot {
  width: 3.6rem;
  height: 3.6rem;
}

.hs-text {
  max-width: 32rem;
  font-size: 1rem;
  line-height: 1.6;
}

.hs-join a {
  font-size: 1rem;
}

.hs-avatars img {
  width: 2.5rem;
  height: 2.5rem;
}

@media (min-width: 1000px) {
  .hs-bgrid {
    column-gap: clamp(2rem, calc(4 * var(--vw)), 3.6rem);
  }

  .hs-about,
  .hs-big {
    align-self: end;
  }
}

@media (max-width: 999px) {
}

/* a heading that breaks into two even lines instead of leaving one word alone */
.hs-about h2 {
  text-wrap: balance;
}

/* =====================================================
   THE PANEL WITHOUT THE PICTURES
   The heading, the line, the note and the number now use the whole width.
   ===================================================== */
@media (min-width: 1000px) {
  .hs-bgrid {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'about big'
      'rule rule'
      'text join';
    column-gap: clamp(2rem, calc(5 * var(--vw)), 4rem);
  }

  .hs-about h2 {
    max-width: 34rem;
  }

  .hs-text {
    max-width: 40rem;
  }
}

.hs-rule-dot {
  left: 50%;
}

/* the hero has no photo now: a plain deep blue that deepens towards the bottom, ready for a new background */
.hs-bg {
  background: linear-gradient(180deg, #0b2447 0%, #07182f 100%);
}

.hs-bg::after {
  display: none;
}

/* =====================================================
   THE HERO, ALIGNED
   Left: the headline, the paragraph, the button and the topic pills. Right: the microphone, standing on the same top
   line as the headline, with the latest episode card under it. Equal space above and below.
   ===================================================== */
.hs-photo {
  padding-block: clamp(3.4rem, calc(5 * var(--vw)), 4.6rem);
}

.hs-copy .mega {
  font-size: clamp(3rem, calc(7 * var(--vw)), 6.4rem);
}

.hs-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.6rem;
  max-width: none;
  margin-top: 1.6rem;
}

@media (min-width: 1000px) {
  .hs-grid {
    grid-template-columns: 1.4fr 0.8fr;
    align-items: stretch;
    min-height: 0;
  }

  .hero .hs-side {
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    width: 100%;
    max-width: 26rem;
  }

  .hs-side .hm-card.hm-card-row {
    width: 100%;
  }
}

/* the card sits a little lower, so it hangs below the line of the topic pills */
@media (min-width: 1000px) {
  .hs-side .hm-card.hm-card-row {
    margin-bottom: -2.8rem;
  }
}

/* =====================================================
   THREE NUMBER TILES
   Frosted-glass tiles in the empty top of the right-hand column, level with the headline, with the card at the foot
   of the column. The numbers count up when they come into view.
   ===================================================== */
.hs-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  width: 100%;
}

.hs-tile {
  padding: 1.1rem 0.7rem 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0.4s ease;
}

.hs-tile:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
}

.hs-tile b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, calc(2.6 * var(--vw)), 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-lt);
}

.hs-tile span {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--on-dark);
}

@media (min-width: 1000px) {
  .hero .hs-side {
    justify-content: space-between;
  }
}

@media (max-width: 999px) {
  .hs-tiles {
    max-width: 26rem;
  }
}

/* bigger tiles, so the right-hand column feels full */
.hs-tile {
  padding: 1.9rem 0.7rem 1.7rem;
}

.hs-tile b {
  font-size: clamp(2rem, calc(3.3 * var(--vw)), 3rem);
}

.hs-tile span {
  margin-top: 0.6rem;
  font-size: 0.85rem;
}

/* the three number tiles sit a little lower than the top of the headline */
@media (min-width: 1000px) {
  .hs-tiles {
    margin-top: 2.6rem;
  }
}

/* the number tiles and the card sit a little lower; the hero gets a little more room at the bottom for the card */
@media (min-width: 1000px) {
  .hs-tiles {
    margin-top: 4.2rem;
  }

  .hs-side .hm-card.hm-card-row {
    margin-bottom: -3.6rem;
  }

  .hs-photo {
    padding-bottom: clamp(4.2rem, calc(6 * var(--vw)), 5.4rem);
  }
}

/* =====================================================
   A FIXED BACKGROUND PICTURE, LIKE THE ORIGINAL SITE
   On the original Talkiepedia site the microphone picture behind the footer (and the Subscribe block) is fixed to
   the window: it stays still while the section scrolls over it, so more of the picture is revealed the further down you
   scroll, as if the section were a window onto one big picture. The same is done here behind the hero. The black of the
   picture is mixed into the deep blue, so only the light parts of the microphone show, in blue.
   ===================================================== */
.hs-bg {
  background-color: #0b2447;
  background-image: url('../img/site/mike-hd.jpg');
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: screen;
}

.hs-bg::after {
  display: block;
  background:
    linear-gradient(100deg, rgba(7, 24, 47, 0.55) 0%, rgba(7, 24, 47, 0.15) 55%, rgba(7, 24, 47, 0) 100%),
    linear-gradient(0deg, rgba(7, 24, 47, 0.5) 0%, rgba(7, 24, 47, 0) 28%);
}

/* phones do not handle a fixed background well, so there the picture simply sits behind the hero */
@media (max-width: 999px) {
  .hs-bg {
    background-attachment: scroll;
    background-position: 85% 50%;
  }

  .hs-bg::after {
    background: linear-gradient(180deg, rgba(7, 24, 47, 0.7) 0%, rgba(7, 24, 47, 0.5) 100%);
  }
}

/* the words in the Subscribe block get a soft shadow so they stay easy to read over the microphone */
.subs h2,
.subs-copy p {
  text-shadow: 0 2px 16px rgba(7, 24, 47, 0.9);
}

/* =====================================================
   THE SUBSCRIBE BLOCK, THE WAY IT IS ON THE ORIGINAL SITE
   The real colour photo (the studio microphone on its desk, green plants behind) is fixed to the window and fills the
   block, under a plain dark layer. It stays still while the block scrolls over it, so as you scroll down more of the
   picture slides into view, as if the block were a window onto one big photo.
   ===================================================== */
.subs {
  background-color: #07182f;
  background-image: url('../img/site/trailer.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: normal;
}

.subs::before {
  background: rgba(7, 24, 47, 0.62);
}

/* phones do not handle a fixed background well, so there the photo simply fills the block */
@media (max-width: 999px) {
  .subs {
    background-attachment: scroll;
  }

  .subs::before {
    background: rgba(7, 24, 47, 0.7);
  }
}

/* =====================================================
   THE HERO, THE SAME WAY AS THE SUBSCRIBE BLOCK
   The same colour photo (the studio microphone on its desk), fixed to the window and filling the hero, under the same
   plain dark layer. It stays still while the hero scrolls away over it.
   ===================================================== */
.hs-bg {
  background-color: #07182f;
  background-image: url('../img/site/trailer.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: normal;
}

.hs-bg::after {
  display: block;
  background: rgba(7, 24, 47, 0.62);
}

@media (max-width: 999px) {
  .hs-bg {
    background-attachment: scroll;
  }

  .hs-bg::after {
    background: rgba(7, 24, 47, 0.7);
  }
}

/* =====================================================
   THE PANEL UNDER THE HERO, THE SAME AS THE HERO
   No separate dark block any more: the panel uses the same fixed photo and the same dark layer as the hero, and the
   thin line between them is gone. Because the photo is fixed to the window, the two parts look like one piece.
   ===================================================== */
.hs-bottom {
  position: relative;
  background-color: #07182f;
  background-image: url('../img/site/trailer.png');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: normal;
  border-top: 0;
}

.hs-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 24, 47, 0.62);
}

.hs-bottom > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 999px) {
  .hs-bottom {
    background-attachment: scroll;
  }

  .hs-bottom::before {
    background: rgba(7, 24, 47, 0.7);
  }
}

/* =====================================================
   "FIND EVERY CONVERSATION ON": between the number tiles and the card
   A small label and two frosted-glass buttons, to YouTube and Instagram, filling the space in the right-hand column.
   ===================================================== */
.hs-follow {
  width: 100%;
}

.hs-follow-label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.hs-follow-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.hs-follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hs-follow-btn:hover {
  color: var(--ink);
  background: #fff;
  transform: translateY(-3px);
}

.hs-follow-btn .ico {
  width: 1.2rem;
  height: 1.2rem;
}

/* =====================================================
   THE "FIND EVERY CONVERSATION ON" ROW, NOW UNDER THE TOPIC PILLS
   ===================================================== */
.hs-copy .hs-follow {
  width: auto;
  margin-top: 1.8rem;
}

.hs-copy .hs-follow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.hs-copy .hs-follow-btn {
  padding: 0.75rem 1.5rem;
}

/* =====================================================
   RECENT EPISODES, IN THE RIGHT-HAND COLUMN
   A frosted-glass list of the three newest conversations, each one a link to its video.
   ===================================================== */
.hs-recent {
  width: 100%;
  padding: 1rem 1.15rem 0.5rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hs-recent-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.hs-recent-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-recent-list li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hs-recent-list a {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0;
  color: #fff;
}

.hs-rp {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  transition:
    background-color 0.3s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hs-rp svg {
  margin-left: 1px;
}

.hs-rt {
  min-width: 0;
}

.hs-rt b {
  display: block;
  overflow: hidden;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.hs-rt small {
  display: block;
  font-size: 0.76rem;
  line-height: 1.3;
  color: var(--on-dark);
}

.hs-recent-list a:hover .hs-rt b {
  color: var(--accent-lt);
}

.hs-recent-list a:hover .hs-rp {
  background: var(--accent-lt);
  transform: scale(1.1);
}

/* =====================================================
   A SOUND METER IN THE RIGHT-HAND COLUMN, AND A WAVELENGTH ON THE LINE
   The number tiles and the recent-episodes list are gone. In their place a frosted-glass box holds a row of bars that
   rise and fall like a voice. In the dark panel the logo on the line is gone too: the line itself is now a set of
   flowing waves.
   ===================================================== */

/* the line in the dark panel: three waves of different sizes slide along it */
.hs-rulewave::before {
  display: none;
}

.hs-rulewave {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.hs-rsvg {
  display: block;
  width: 200%;
  height: 100%;
  animation: ruleSlide 16s linear infinite;
}

.rw {
  fill: none;
  stroke: #8db6f0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.rw1 {
  stroke-width: 2;
  opacity: 0.9;
}

.rw2 {
  stroke-width: 1.4;
  opacity: 0.55;
}

.rw3 {
  stroke-width: 1;
  opacity: 0.35;
}

@keyframes ruleSlide {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-meter i,
  .hs-rsvg {
    animation: none;
  }
}

/* =====================================================
   IN COLLABORATION WITH, IN THE RIGHT-HAND COLUMN
   The same partners as the logo belt further down the page, as clean white tiles on a frosted-glass panel: a
   professional "trusted by" block.
   ===================================================== */
.hs-partners {
  width: 100%;
  padding: 1.2rem 1.3rem 1.3rem;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.hs-partners-label {
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.hs-ptiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-ptiles li {
  display: grid;
  place-items: center;
  height: 4.4rem;
  padding: 0.6rem 0.8rem;
  background: #fff;
  border-radius: 14px;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s ease;
}

.hs-ptiles li:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.7);
}

.hs-ptiles img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 2rem;
  object-fit: contain;
}

@media (min-width: 1000px) {
  .hs-partners {
    margin-top: 4.2rem;
  }
}

/* =====================================================
   THE LATEST EPISODE AS A LARGE FEATURED CARD
   The right-hand side now holds one large white card, centred: the episode's artwork on top with a round play button on it,
   and the title and guest underneath.
   ===================================================== */
.hs-feature {
  width: 100%;
  padding: 0.9rem 0.9rem 1rem;
  color: var(--text);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 28px 54px -22px rgba(0, 0, 0, 0.75);
}

.js .hs-feature {
  animation: cardIn 0.9s 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.hs-fimg {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border-radius: 16px;
}

.hs-fimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hs-feature:hover .hs-fimg img {
  transform: scale(1.05);
}

.hs-fplay {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.7);
  translate: -50% -50%;
  transition:
    background-color 0.3s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hs-fplay svg {
  margin-left: 3px;
}

.hs-fplay::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0;
  animation: ring 2.4s ease-out infinite;
}

.hs-fplay:hover {
  background: var(--ink-3);
  transform: scale(1.08);
}

.hs-fbody {
  padding: 1rem 0.5rem 0.2rem;
}

.hs-fbody .hm-tag {
  display: block;
  margin-bottom: 0.35rem;
}

.hs-fbody h2 {
  margin-bottom: 0.2rem;
  font-size: 1.45rem;
  line-height: 1.2;
}

.hs-fbody h2 a {
  color: var(--ink);
  transition: color 0.3s ease;
}

.hs-fbody h2 a:hover {
  color: var(--accent);
}

.hs-fbody p {
  font-size: 0.95rem;
  color: var(--mute);
}

@media (min-width: 1000px) {
  .hero .hs-side {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-fplay::after,
  .js .hs-feature {
    animation: none;
  }
}

/* "Find every conversation on" sits a little lower, with more room under the topic pills */
.hs-copy .hs-follow {
  margin-top: 3rem;
}

/* =====================================================
   A CAPTION UNDER THE CARD, AND A WAVE OF BARS ON THE RIGHT SIDE OF THE HERO
   ===================================================== */
.hs-fcap {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 14px rgba(7, 24, 47, 0.9);
}

/* the wave of bars now stands on its end, to the right of the card: thin rounded bars stacked one above the other, each one
   growing and shrinking sideways from the middle at its own pace, like a voice on a sound meter turned on its side; the
   column fades out at the top and the bottom. It only shows where the screen is wide enough to leave room beside the card. */
.hs-barwave {
  position: absolute;
  top: calc(50% - 2.3rem);
  right: 1rem;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: min(6rem, calc((100vw - 1200px) / 2 + 2.2rem));
  height: 27rem;
  translate: 0 -50%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}

@media (min-width: 1330px) {
  .hs-barwave {
    display: flex;
  }
}

.hs-barwave i {
  display: block;
  width: 100%;
  height: 0.18rem;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-lt) 50%, var(--accent) 100%);
  border-radius: 999px;
  opacity: 0.85;
  transform: scaleX(var(--lo));
  animation: barWaveSide var(--d) ease-in-out infinite alternate;
  animation-delay: var(--w);
}

@keyframes barWaveSide {
  from {
    transform: scaleX(var(--lo));
  }

  to {
    transform: scaleX(var(--hi));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-barwave i {
    animation: none;
  }
}

/* =====================================================
   MORE CONVERSATIONS, UNDER THE CAPTION
   Three small pictures of other episodes, each a link to its video on YouTube (new tab), to fill the space under the card.
   ===================================================== */
.hs-more3 {
  width: 100%;
  margin-top: 1.4rem;
}

.hs-more3-label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.hs-more3 ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-more3 a {
  display: block;
  color: #fff;
}

.hs-m3img {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s ease;
}

.hs-m3img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hs-m3img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 24, 47, 0.35);
  transition: background-color 0.4s ease;
}

.hs-m3play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  translate: -50% -50%;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hs-m3play svg {
  margin-left: 1px;
}

.hs-more3 b {
  display: block;
  margin-top: 0.5rem;
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hs-more3 a:hover .hs-m3img {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px -14px rgba(0, 0, 0, 0.8);
}

.hs-more3 a:hover .hs-m3img img {
  transform: scale(1.08);
}

.hs-more3 a:hover .hs-m3img::after {
  background: rgba(7, 24, 47, 0.1);
}

.hs-more3 a:hover .hs-m3play {
  transform: translate(-50%, -50%) scale(1.12);
}

/* =====================================================
   THE MENU LINE THAT MOVES
   One line under the menu slides from link to link as you move through the page (js/main.js). The link you are on is also
   a little bluer.
   ===================================================== */
.nav a[aria-current='page'] {
  color: var(--accent);
}

.nav-line {
  display: none;
}

@media (min-width: 1000px) {
  .nav {
    position: relative;
  }

  /* the old fixed line under Home is replaced by the sliding one */
  .nav a[aria-current='page']::after {
    display: none;
  }

  .nav-line {
    position: absolute;
    bottom: -0.35rem;
    left: 0;
    display: block;
    width: 0;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    pointer-events: none;
    transition:
      transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
      width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

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

/* =====================================================
   CONTACT
   On the left: a few words, the address, the phone number, the email and the social links. On the right: a white card with
   a short form. Sending it opens the visitor's own email app with the message filled in (js/main.js).
   ===================================================== */
.contact {
  background: var(--bg);
}

.contact-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 4rem;
  }
}

.contact-copy h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, calc(4.2 * var(--vw)), 3.3rem);
  line-height: 1.1;
}

.contact-copy h2 em {
  font-style: normal;
  color: var(--accent);
}

.contact-lead {
  max-width: 30rem;
  color: var(--text);
}

.contact-list {
  display: grid;
  gap: 0.9rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.contact-list a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.4s ease,
    border-color 0.3s ease;
}

.contact-list a:hover {
  border-color: var(--accent);
  box-shadow: 0 16px 30px -18px rgba(var(--ink-rgb), 0.35);
  transform: translateY(-3px);
}

.ci {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.ci .ico {
  width: 1.2rem;
  height: 1.2rem;
}

.contact-list b {
  display: block;
  font-size: 0.95rem;
  line-height: 1.3;
}

.contact-list small {
  display: block;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--mute);
}

.contact-social {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

.contact-social span {
  margin-right: 0.3rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.contact-social a {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.contact-social a:hover {
  color: #fff;
  background: var(--accent);
  transform: translateY(-3px);
}

.contact-social .ico {
  width: 1.15rem;
  height: 1.15rem;
}

/* the form card */
.contact-form {
  padding: clamp(1.4rem, calc(3 * var(--vw)), 2.4rem);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 30px 60px -36px rgba(var(--ink-rgb), 0.4);
}

.cf-title {
  margin-bottom: 1.4rem;
  font-size: 1.35rem;
}

.cf-row {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .cf-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cf-field {
  margin-bottom: 1rem;
}

.cf-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.cf-field input,
.cf-field select,
.cf-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.cf-field textarea {
  resize: vertical;
  min-height: 8rem;
}

.cf-field input:focus,
.cf-field select:focus,
.cf-field textarea:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}

.cf-field .is-bad {
  border-color: #d64a3a;
}

.cf-send {
  width: 100%;
  justify-content: center;
  margin-top: 0.4rem;
}

.cf-msg {
  min-height: 1.5rem;
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
}

.cf-msg.bad {
  color: #c0392b;
}

/* the three states of the Send button and the line under it: sending, sent, and a problem */
.cf-send {
  position: relative;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.cf-send:disabled {
  cursor: default;
}

.cf-send.is-sending {
  background: var(--ink-3);
}

.cf-send.is-sending::before {
  content: '';
  width: 1.1rem;
  height: 1.1rem;
  margin-right: 0.6rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cfSpin 0.8s linear infinite;
}

.cf-send.is-sent {
  background: #1f9d63;
}

@keyframes cfSpin {
  to {
    transform: rotate(360deg);
  }
}

.cf-msg.wait {
  color: var(--ink-3);
}

.cf-msg.ok {
  color: #1f7a4f;
}

@media (prefers-reduced-motion: reduce) {
  .cf-send.is-sending::before {
    animation-duration: 2.4s;
  }
}

/* the red star after the two fields that have to be filled in */
.cf-field .req {
  margin-left: 0.1rem;
  font-weight: 700;
  color: #e03b2f;
}

/* the ribbon of topics is back along the bottom of the hero, directly under the dark panel */
.hero.hs .hero-ticker {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* in the ribbon of topics the blue dot comes before each word, close to it, with room between one topic and the next */
.tick li {
  gap: 0.8rem;
  padding-right: 2.6rem;
}

.tick li::after {
  display: none;
}

.tick li::before {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--accent-lt);
  border-radius: 50%;
}

/* =====================================================
   LAPTOPS AND SMALLER SCREENS: THE HERO SCALES DOWN WITH THE HEIGHT OF THE SCREEN
   On a screen that is not very tall (a typical laptop), the hero used to be almost two screens high. Now the headline, the
   spacing and the cards shrink with the height of the screen, so the main part of the hero fits on one screen, and the
   extra picture row and caption under the card are left out.
   ===================================================== */
@media (min-width: 1000px) and (max-height: 900px) {
  .hs-photo {
    padding-block: clamp(1.6rem, 4.5vh, 3rem);
  }

  .hs-copy .mega {
    font-size: clamp(2.6rem, 8.8vh, 6.4rem);
  }

  .hs-copy .hero-lead {
    margin-top: 0.9rem;
    font-size: clamp(0.92rem, 2vh, 1.1rem);
  }

  .hs-actions {
    margin-top: 1.1rem;
  }

  .hs-pills {
    margin-top: 1.1rem;
  }

  .hs-copy .hs-follow {
    margin-top: 1.5rem;
  }

  .hs-follow-label {
    margin-bottom: 0.5rem;
  }

  .hs-copy .hs-follow-btn {
    padding: 0.6rem 1.2rem;
  }

  /* the card is a little narrower, and the extras under it step aside */
  .hero .hs-side {
    max-width: clamp(19rem, 46vh, 26rem);
  }

  .hs-more3 {
    display: none;
  }

  .hs-fcap {
    margin-top: 0.7rem;
    font-size: 0.85rem;
  }

  .hs-fbody h2 {
    font-size: 1.2rem;
  }

  .hs-fplay {
    width: 3.4rem;
    height: 3.4rem;
  }

  .hs-barwave {
    height: 20rem;
  }

  /* the dark panel under the photo */
  .hs-bottom {
    padding-block: clamp(1.4rem, 3.4vh, 2.6rem);
  }

  .hs-about h2 {
    font-size: clamp(1.25rem, 3.2vh, 1.8rem);
  }

  .hs-big b {
    font-size: clamp(2.4rem, 7vh, 4.4rem);
  }

  .hs-rule {
    height: 2.6rem;
  }

  .hs-text {
    font-size: 0.92rem;
  }
}

/* on narrower laptop widths the headline and the card also come down a little */
@media (min-width: 1000px) and (max-width: 1279px) {
  .hs-copy .mega {
    font-size: clamp(2.6rem, min(6.4vw, 8.8vh), 5rem);
  }
}

/* the tall column of bars beside the card (the "volume" one) is taller now, with slightly thicker bars to match */
.hs-barwave {
  height: 38rem;
}

.hs-barwave i {
  height: 0.22rem;
}

@media (min-width: 1000px) and (max-height: 900px) {
  .hs-barwave {
    height: 29rem;
  }
}

/* the column of volume bars now runs almost the whole height of the hero's picture, and has 120 bars instead of 64 */
.hs-barwave,
.hs-barwave {
  top: 1.2rem;
  bottom: 1.2rem;
  height: auto;
  translate: none;
}

.hs-barwave i {
  height: 0.2rem;
}

@media (min-width: 1000px) and (max-height: 900px) {
  .hs-barwave {
    height: auto;
  }
}

/* =====================================================
   THE YOUTUBE AND INSTAGRAM LOGOS INSTEAD OF WORDS
   The two buttons under "Find every conversation on" now show your own logo files (img/site/youtube-logo.png and
   img/site/instagram-logo.png, cleaned up to be properly transparent) on white pills, so the dark YouTube lettering reads.
   ===================================================== */
.hs-follow-btn.hs-logo-btn {
  gap: 0;
  padding: 0.55rem 1.3rem;
  background: #fff;
  border: 0;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hs-logo-btn img {
  display: block;
  width: auto;
  height: 1.95rem;
}

.hs-logo-btn:last-child img {
  height: 2.4rem;
}

.hs-follow-btn.hs-logo-btn:hover {
  color: inherit;
  background: #fff;
  transform: translateY(-4px);
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.8);
}

.hs-logo-btn img {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hs-logo-btn:hover img {
  transform: scale(1.08);
}

/* =====================================================
   THE YOUTUBE AND INSTAGRAM BUTTONS, WITH THE REAL LOGOS
   Each button is a frosted-glass pill with the official logo (img/site/youtube-play.svg and img/site/instagram-glyph.svg,
   clean vector files with a transparent background) next to the name in white.
   ===================================================== */
.hs-fb-icon {
  display: block;
  flex: none;
  width: auto;
  height: 1.35rem;
}

.hs-fb-ig {
  height: 1.5rem;
}

.hs-follow-btn {
  gap: 0.7rem;
}

.hs-follow-btn:hover .hs-fb-icon {
  transform: scale(1.1);
}

.hs-fb-icon {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* =====================================================
   MORE CONVERSATIONS AS A SCROLLER, AND THE DOWN ARROW ON START LISTENING
   ===================================================== */
.hs-more3-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7rem;
}

.hs-more3-head .hs-more3-label {
  margin-bottom: 0;
}

.hs-more3-nav {
  display: flex;
  gap: 0.4rem;
}

.hs-m3btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.hs-m3btn:hover {
  color: var(--ink);
  background: #fff;
  transform: scale(1.08);
}

/* the row of videos is a scroller: swipe or scroll sideways, or use the two arrows; each video snaps into place */
.hs-more3 ul.hs-m3track {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0 0 0.2rem;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hs-m3track::-webkit-scrollbar {
  display: none;
}

.hs-m3track li {
  flex: 0 0 calc((100% - 1.4rem) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

/* the arrow on Start Listening points down, and bobs a little when you point at the button */
.hs-go-dot svg {
  width: 1.15rem;
  height: 1.15rem;
}

.hs-go:hover .hs-go-dot {
  transform: none;
}

.hs-go:hover .hs-go-dot svg {
  animation: goBob 0.9s ease-in-out infinite;
}

@keyframes goBob {
  0%,
  100% {
    transform: translateY(-1px);
  }

  50% {
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-go:hover .hs-go-dot svg {
    animation: none;
  }
}

/* =====================================================
   MORE CONVERSATIONS SCROLLS BY ITSELF
   No arrows any more: the row of videos slides sideways all the time, round and round, and fades out at both ends. It
   does not stop when you point at it.
   ===================================================== */
.hs-m3view {
  display: flex;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.hs-m3view .hs-m3track {
  display: flex;
  flex: none;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
  animation: m3Slide 34s linear infinite;
}

.hs-m3view .hs-m3track li {
  flex: 0 0 8.2rem;
  min-width: 0;
  margin-right: 0.8rem;
}

@keyframes m3Slide {
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-m3view .hs-m3track {
    animation-duration: 90s;
  }
}

/* =====================================================
   PHONES AND TABLETS, ROUND 1
   The sliding row of videos was pushing the hero's single column out to more than 1500 pixels wide. The column is now
   allowed to be exactly as wide as the screen, and the row stays inside it.
   ===================================================== */
.hs-grid {
  grid-template-columns: minmax(0, 1fr);
}

.hs-grid > *,
.hs-side > *,
.hs-copy > * {
  min-width: 0;
}

.hs-more3 {
  max-width: 100%;
  overflow: hidden;
}

@media (min-width: 1000px) {
  .hs-grid {
    grid-template-columns: 1.4fr 0.8fr;
  }
}

/* =====================================================
   THE FEATURED CARD, REDESIGNED
   A dark frosted-glass card that belongs to the hero: the artwork fills the top with a "Latest Episode" badge on it, and the
   title, guest and a "Watch on YouTube" link sit underneath in white.
   ===================================================== */
.hs-feature {
  padding: 0.6rem 0.6rem 0.4rem;
  color: #fff;
  background: rgba(10, 30, 58, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 26px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.hs-fimg {
  border-radius: 20px;
}

.hs-fimg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 24, 47, 0.35) 0, transparent 35%);
  pointer-events: none;
}

.hs-fbadge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(7, 24, 47, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hs-fbadge i {
  width: 0.5rem;
  height: 0.5rem;
  background: #ff5a5f;
  border-radius: 50%;
  animation: fbPulse 1.8s ease-in-out infinite;
}

@keyframes fbPulse {
  50% {
    opacity: 0.35;
  }
}

.hs-fplay {
  z-index: 1;
}

.hs-fbody {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0.7rem 0.8rem;
}

.hs-fbody h2,
.hs-fbody h2 a {
  color: #fff;
}

.hs-fbody h2 a:hover {
  color: var(--accent-lt);
}

.hs-fbody p {
  color: rgba(255, 255, 255, 0.72);
}

.hs-fwatch {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border-radius: 999px;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.hs-fwatch:hover {
  background: var(--accent-lt);
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .hs-fbody {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-fbadge i {
    animation: none;
  }
}

/* the title gets the full width of the card, and the YouTube link sits under it */
.hs-fbody {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}

/* =====================================================
   THE HEADER AS A FLOATING PILL (like talkiepedia.vercel.app)
   A rounded, frosted-white bar that floats a little below the top edge, centred, and stays there as you scroll. Only the logo
   and the five links are in it. The link you are on is blue with a small rounded dash under it. The bar takes no room in the
   page, so the hero gets the room back with extra padding.
   ===================================================== */
.header {
  position: sticky;
  top: 1rem;
  height: 0;
  background: none;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header .header-row {
  position: relative;
  width: calc(100% - 2rem);
  max-width: 72rem;
  min-height: 0;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -18px rgba(7, 24, 47, 0.5);
}

.header .logo {
  height: 2rem;
}

.header .brand-tag,
.header .btn.header-cta {
  display: none;
}

.hs-photo {
  padding-top: calc(clamp(3.4rem, calc(5 * var(--vw)), 4.6rem) + 4.5rem);
}

.menu-btn {
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: 0;
}

.menu-btn::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
}

/* on phones the links open as a rounded white panel under the bar */
.header .nav {
  top: calc(100% + 0.5rem);
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: 22px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -20px rgba(7, 24, 47, 0.55);
}

.header .nav a {
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  border: 0;
  border-radius: 14px;
}

@media (min-width: 1000px) {
  .header .nav {
    gap: 0.25rem;
    padding: 0;
    background: none;
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .header .nav a {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text);
    transition:
      color 0.25s ease,
      background-color 0.25s ease;
  }

  .header .nav a:hover {
    color: var(--ink);
    background: rgba(7, 24, 47, 0.06);
  }

  .header .nav a[aria-current='page'] {
    color: var(--accent);
  }

  .nav-line {
    bottom: 0.125rem;
    border-radius: 999px;
  }
}

/* =====================================================
   THE WHITE BAND AT THE TOP OF THE PAGE
   As on the podcasts page, the page begins with a white strip that the pill floats on. It is part of the page, so it simply
   scrolls away as you scroll down, and the pill stays where it is. The hero starts right under the strip.
   ===================================================== */
#main {
  padding-top: 5.5rem;
  background: #fff;
}

.hs-photo {
  padding-top: clamp(3.4rem, calc(5 * var(--vw)), 4.6rem);
}

.header .header-row {
  background: rgba(252, 252, 250, 0.9);
}

/* the pill has no shadow and is the same white as the strip, so at the top it does not show as a separate box */
.header .header-row {
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  box-shadow: none;
}

.header .nav {
  box-shadow: none;
}

/* =====================================================
   "FORGE SOFTECH" IN THE FOOTER, WITH COLOURS THAT KEEP MOVING
   The same orange, peach, pink and green as before, now flowing through the letters in a slow loop.
   ===================================================== */
.crafted-name {
  background: linear-gradient(90deg, #ff7a45, #ff5c8a, #f0a060, #7ec26f, #ff7a45, #ff5c8a, #f0a060);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: craftedFlow 6s linear infinite;
}

@keyframes craftedFlow {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crafted-name {
    animation: none;
  }
}

/* the name in the footer: bright colours that run through the letters, round and round */
.crafted-name {
  background: linear-gradient(90deg, #ff5c8a, #ff9a62, #ffd166, #5ee0a0, #4fc3ff, #8b7bff, #ff5c8a);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: craftedFlow 5s linear infinite;
}

/* the colours now travel from the right to the left, and loop with no jump */
.crafted-name {
  background-size: 200% 100%;
  background-repeat: repeat-x;
  animation: craftedFlowLeft 5s linear infinite;
}

@keyframes craftedFlowLeft {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 200% 0;
  }
}

/* =====================================================
   "FORGE SOFTECH" IN THE FOOTER, EXACTLY AS ON THE HRDOCK / FORGE ALUMNUS PAGES
   Purple, orange and green sweeping through the letters from right to left, a new pass every 2.5 seconds
   (copied from the .footer-text rule in hrms.forgealumnus.com/admin_assets/css/app.min.css).
   ===================================================== */
.crafted-name {
  display: inline-block;
  background: linear-gradient(to right, #604ae3 10%, #f0934e 50%, #5cc184 60%);
  background-repeat: repeat;
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2.5s linear infinite;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

/* the heart in the footer: two red hearts like the HRDock icon, a solid one in front and a softer one behind */
.heart-back {
  fill: #ef5f5f;
  fill-opacity: 0.45;
}

.heart-front {
  fill: #ef5f5f;
  fill-opacity: 1;
}

/* =====================================================
   THE "I WOULD LIKE TO" DROPDOWN
   The real select stays in the form (it holds the value), but it is hidden. People see this one instead.
   ===================================================== */
.cf-field .dd-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cf-field {
  position: relative;
}

.dd {
  position: relative;
}

.dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.dd-btn::after {
  content: '';
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.2rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition:
    transform 0.25s ease,
    margin 0.25s ease;
}

.dd.open .dd-btn::after {
  margin-top: 0.25rem;
  transform: rotate(-135deg);
}

.dd-btn:hover,
.dd-btn:focus-visible,
.dd.open .dd-btn {
  background: #fff;
  border-color: var(--accent);
  outline: 0;
}

.dd-btn:focus-visible,
.dd.open .dd-btn {
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}

.dd-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(10, 30, 58, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
}

.dd.open .dd-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.dd-list li {
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  color: var(--ink);
  border-radius: 10px;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.dd-list li:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

.dd-list li[aria-selected='true'] {
  font-weight: 600;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
}

/* =====================================================
   PHONE AND TABLET MENU
   The drop-down menu is solid white, so the headline behind it cannot show through the links.
   ===================================================== */
@media (max-width: 999px) {
  .header .nav {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* =====================================================
   FOOTER ON A TABLET
   Between 640 and 899 pixels the footer was one thin column with the right half empty. Now the logo and the about text
   sit on top with roomier icons, and the three link columns sit side by side underneath.
   ===================================================== */
@media (min-width: 640px) and (max-width: 899px) {
  .footer-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 2.75rem;
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }

  .footer-grid > :nth-child(2) {
    grid-column: span 3;
  }

  .footer-grid > :nth-child(3) {
    grid-column: span 5;
  }

  .footer-grid > :nth-child(4) {
    grid-column: span 4;
  }

  .foot-about {
    max-width: 34rem;
    font-size: 1.02rem;
    line-height: 1.7;
  }

  .socials {
    gap: 1rem;
    margin-top: 1.75rem;
  }

  .soc {
    width: 3.2rem;
    height: 3.2rem;
  }

  .foot-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* narrow tablets: two columns (Explore and Listen), contact underneath across the full width, bottom bar stacked */
@media (min-width: 640px) and (max-width: 759px) {
  .footer-grid > :nth-child(2),
  .footer-grid > :nth-child(4) {
    grid-column: span 6;
  }

  .footer-grid > :nth-child(3) {
    grid-column: 1 / -1;
    order: 5;
  }

  .foot-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* =====================================================
   FOOTER BACKGROUND ICONS ON A TABLET
   The big faint icons were drawn right across the text. On tablets they are smaller and tucked into the corners, and
   the two middle ones are left out, the same as on a phone.
   ===================================================== */
@media (min-width: 640px) and (max-width: 899px) {
  .foot-decor .d4,
  .foot-decor .d6 {
    display: none;
  }

  .foot-decor .d1 {
    top: -0.5rem;
    right: -1.5rem;
    width: 16rem;
    height: 9.6rem;
  }

  .foot-decor .d2 {
    bottom: -1.5rem;
    left: auto;
    right: -2rem;
    width: 11rem;
    height: 11rem;
  }
}

/* =====================================================
   THE PARTNER LOGO BELT: STEADY ON PHONES
   Every logo now sits in a box of a fixed size, so the belt is the same width before and after the pictures load. Before,
   the logos were zero wide at first, the belt was measured too short, and it jumped when they appeared.
   ===================================================== */
.logos img,
.logos img[src*='benz'] {
  width: 8.5rem;
  max-width: none;
  height: 3rem;
  max-height: none;
  object-fit: contain;
}

@media (min-width: 640px) {
  .logos img {
    width: 10rem;
    height: 3.8rem;
  }

  .logos img[src*='benz'] {
    width: 11rem;
  }
}

/* =====================================================
   NO SIDEWAYS SHIFT
   The About section's blue glow sticks out past the edge. A section that only hides its overflow can still be scrolled
   sideways (by a link jump or the keyboard), which pushed the whole About content to the left. "clip" cuts the overflow
   off for good, so it cannot move.
   ===================================================== */
.hs,
.ab,
.footer {
  overflow: hidden;
  overflow: clip;
}

/* the same fix for the other bands, belts and panels that hide what sticks out: none of them can be pushed sideways */
.logo-scroller,
.hero-ticker,
.hs-m3view,
.hs-rulewave,
.npanel {
  overflow: hidden;
  overflow: clip;
}

/* =====================================================
   FOOTER ICONS ON A TABLET
   Roomier round buttons, bigger icons inside them, more space between them, and slightly bigger icons beside the links.
   ===================================================== */
@media (min-width: 640px) and (max-width: 1199px) {
  .socials {
    gap: 1.4rem;
    margin-top: 1.9rem;
  }

  .soc {
    width: 3.5rem;
    height: 3.5rem;
  }

  .soc .ico {
    width: 1.55rem;
    height: 1.55rem;
  }

  .foot-col .ico-link .ico {
    width: 1.3rem;
    height: 1.3rem;
  }

  .foot-col {
    gap: 0.75rem;
  }

  .to-top {
    width: 3rem;
    height: 3rem;
  }
}

/* =====================================================
   FOOTER ON A LANDSCAPE TABLET (900 to 1199 pixels)
   The four columns get more room for the e-mail address, and the faint background pictures are small and kept in the
   corners so they do not run across the links.
   ===================================================== */
@media (min-width: 900px) and (max-width: 1199px) {
  .footer-grid {
    grid-template-columns: 1.6fr 0.9fr 1.9fr 1.3fr;
    gap: 2rem;
  }

  .foot-decor .d4,
  .foot-decor .d6 {
    display: none;
  }

  .foot-decor .d1 {
    top: -0.5rem;
    right: -1rem;
    width: 18rem;
    height: 10.8rem;
  }

  .foot-decor .d2 {
    bottom: -1.5rem;
    left: auto;
    right: -2rem;
    width: 12rem;
    height: 12rem;
  }
}

/* in that landscape range the first column is wider and the five round buttons stay on one row */
@media (min-width: 900px) and (max-width: 1199px) {
  .footer-grid {
    grid-template-columns: 2.3fr 0.9fr 1.9fr 1.3fr;
  }

  .socials {
    flex-wrap: nowrap;
    gap: 0.9rem;
  }

  .soc {
    width: 3.1rem;
    height: 3.1rem;
  }

  .soc .ico {
    width: 1.4rem;
    height: 1.4rem;
  }
}

/* =====================================================
   THE WAVE OF BARS ON TABLETS AND PHONES
   There is no room beside the card on a smaller screen, so the column of bars runs down the right edge of the hero as a
   slim strip, in the margin beside the text.
   ===================================================== */
@media (max-width: 1329px) {
  .hs-barwave {
    display: flex;
    right: 0.25rem;
    width: 1.1rem;
  }
}

@media (min-width: 640px) and (max-width: 1329px) {
  .hs-barwave {
    right: 0.6rem;
    width: 1.8rem;
  }
}

/* a bolder strip: thicker bars, fully bright, and a little wider */
@media (max-width: 1329px) {
  .hs-barwave {
    width: 1.5rem;
    right: 0.2rem;
  }

  .hs-barwave i {
    height: 0.34rem;
    opacity: 1;
  }
}

@media (min-width: 640px) and (max-width: 1329px) {
  .hs-barwave {
    width: 2.6rem;
    right: 0.5rem;
  }

  .hs-barwave i {
    height: 0.4rem;
  }
}

/* =====================================================
   THE WAVE OF BARS, THE SAME AS ON A LAPTOP
   On tablets and phones it keeps the laptop's look: the same wide column of thin bars, standing at the right edge of the
   hero and running behind the text. It is a little narrower on a phone.
   ===================================================== */
@media (max-width: 1329px) {
  .hs-barwave {
    right: 0.25rem;
    width: 4.5rem;
  }

  .hs-barwave i {
    height: 0.2rem;
    opacity: 0.85;
  }
}

@media (min-width: 640px) and (max-width: 1329px) {
  .hs-barwave {
    right: 0.75rem;
    width: 6rem;
  }
}

/* =====================================================
   THE FLOATING FOOTER PICTURES ON PHONES AND TABLETS
   The same faint, slowly drifting pictures as on a laptop. On a narrow screen the text fills the width, so each picture
   is parked in an empty spot: beside the logo and beside the short Explore list, where there is no text.
   ===================================================== */
@media (max-width: 899px) {
  .foot-decor {
    display: block;
  }

  .foot-decor svg {
    opacity: 0.14;
  }

  .foot-decor .d1,
  .foot-decor .d2,
  .foot-decor .d4,
  .foot-decor .d6 {
    display: block;
    bottom: auto;
    left: auto;
  }

  /* the microphone with sound waves: top right, beside the logo */
  .foot-decor .d1 {
    top: 0.6rem;
    right: 0.5rem;
    width: 10.5rem;
    height: 6.3rem;
  }

  /* the compass and the headphones: side by side to the right of the short Explore list */
  .foot-decor .d4 {
    top: 27rem;
    right: 7.6rem;
    width: 5.6rem;
    height: 5.6rem;
  }

  .foot-decor .d2 {
    top: 27.4rem;
    right: 1.2rem;
    width: 5.6rem;
    height: 5.6rem;
    rotate: -10deg;
  }

  /* the play button: to the right of the short Instagram and LinkedIn lines */
  .foot-decor .d6 {
    top: 56rem;
    right: 2rem;
    width: 3.4rem;
    height: 3.4rem;
  }
}

/* the same slow floating, but with a small drift, so on a narrow screen a picture stays in its empty spot */
@keyframes foot-nudge-a {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(-8px, 6px) rotate(3deg);
  }

  50% {
    transform: translate(-4px, 12px) rotate(-3deg);
  }

  75% {
    transform: translate(6px, 5px) rotate(2deg);
  }
}

@keyframes foot-nudge-b {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(8px, -6px) rotate(-3deg);
  }

  50% {
    transform: translate(4px, 7px) rotate(3deg);
  }

  75% {
    transform: translate(-6px, 4px) rotate(-2deg);
  }
}

@media (max-width: 899px) {
  .foot-decor .d1 {
    right: 1rem;
    animation: foot-nudge-a 16s ease-in-out infinite;
  }

  .foot-decor .d4 {
    animation: foot-nudge-b 14s ease-in-out infinite;
    animation-delay: -3s;
  }

  .foot-decor .d2 {
    right: 1.4rem;
    animation: foot-nudge-b 18s ease-in-out infinite;
    animation-delay: -6s;
  }

  .foot-decor .d6 {
    animation: foot-nudge-a 17s ease-in-out infinite;
    animation-delay: -9s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .foot-decor svg {
    animation: none !important;
  }
}

/* tablets (760 to 899 pixels): the microphone at the top right, and the other three in a row to the right of the round
   social buttons, where there is no text */
@media (min-width: 760px) and (max-width: 899px) {
  .foot-decor .d1 {
    top: 1.2rem;
    right: 2rem;
    width: 13rem;
    height: 7.8rem;
  }

  .foot-decor .d4 {
    top: 15.5rem;
    right: 15rem;
    width: 5rem;
    height: 5rem;
  }

  .foot-decor .d2 {
    top: 15.5rem;
    right: 8.5rem;
    width: 5rem;
    height: 5rem;
  }

  .foot-decor .d6 {
    top: 15.6rem;
    right: 2rem;
    width: 5rem;
    height: 5rem;
  }
}

/* narrow tablets (640 to 759 pixels): the same idea, a little smaller */
@media (min-width: 640px) and (max-width: 759px) {
  .foot-decor .d1 {
    top: 0.8rem;
    right: 1.5rem;
    width: 10rem;
    height: 6rem;
  }

  .foot-decor .d4 {
    top: 15.8rem;
    right: 11.9rem;
    width: 4.2rem;
    height: 4.2rem;
  }

  .foot-decor .d2 {
    top: 15.8rem;
    right: 6.7rem;
    width: 4.2rem;
    height: 4.2rem;
  }

  .foot-decor .d6 {
    top: 15.9rem;
    right: 1.5rem;
    width: 4.2rem;
    height: 4.2rem;
  }
}

/* the colour and the lift on a guest are instant: no fade, so it responds the moment you hover */
.voices .ring,
.voices .ring img {
  transition: none;
}

/* =====================================================
   FOOTER PICTURES ON PHONES AND TABLETS, THE FINAL WAY
   The same four faint pictures as on a laptop, big and spread over the footer, behind the text, each floating slowly. They
   are only faint outlines, so the writing on top stays easy to read.
   ===================================================== */
@keyframes foot-float-a {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(-22px, 18px) rotate(5deg);
  }

  50% {
    transform: translate(-10px, 34px) rotate(-4deg);
  }

  75% {
    transform: translate(16px, 14px) rotate(3deg);
  }
}

@keyframes foot-float-b {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  25% {
    transform: translate(22px, -16px) rotate(-5deg);
  }

  50% {
    transform: translate(12px, 26px) rotate(4deg);
  }

  75% {
    transform: translate(-18px, 12px) rotate(-3deg);
  }
}

@media (max-width: 899px) {
  .foot-decor {
    display: block;
  }

  .foot-decor svg {
    opacity: 0.12;
  }

  .foot-decor .d1,
  .foot-decor .d2,
  .foot-decor .d4,
  .foot-decor .d6 {
    display: block;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    rotate: none;
  }

  /* the microphone with sound waves: top right */
  .foot-decor .d1 {
    top: 0.5rem;
    right: -1.5rem;
    width: 15rem;
    height: 9rem;
    animation: foot-float-a 17s ease-in-out infinite;
  }

  /* the compass: left, about a quarter of the way down */
  .foot-decor .d4 {
    top: 24%;
    left: -1.2rem;
    width: 8rem;
    height: 8rem;
    animation: foot-float-b 15s ease-in-out infinite;
    animation-delay: -3s;
  }

  /* the headphones: right, about the middle */
  .foot-decor .d2 {
    top: 50%;
    right: -1.2rem;
    width: 9rem;
    height: 9rem;
    animation: foot-float-a 19s ease-in-out infinite;
    animation-delay: -6s;
  }

  /* the play button: bottom left */
  .foot-decor .d6 {
    bottom: 7rem;
    left: 6%;
    width: 7rem;
    height: 7rem;
    animation: foot-float-b 18s ease-in-out infinite;
    animation-delay: -9s;
  }
}

@media (min-width: 640px) and (max-width: 899px) {
  .foot-decor .d1 {
    top: 0.5rem;
    right: 1rem;
    width: 22rem;
    height: 13.2rem;
  }

  .foot-decor .d4 {
    top: 36%;
    left: 2%;
    width: 10rem;
    height: 10rem;
  }

  .foot-decor .d2 {
    top: 22%;
    right: 8%;
    width: 11rem;
    height: 11rem;
  }

  .foot-decor .d6 {
    bottom: 2.5rem;
    left: 38%;
    width: 9rem;
    height: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .foot-decor svg {
    animation: none !important;
  }
}

/* =====================================================
   THE GUEST DETAILS CARD ON PHONES AND TABLETS
   The photo, the name and details, and the LinkedIn button are all centred in the card (the button no longer stretches
   across it). The button is an outline that fills blue when it is hovered or focused.
   ===================================================== */
@media (max-width: 799px) {
  .gbox {
    justify-items: center;
    padding: 1.75rem 1.25rem;
    text-align: center;
  }

  .gbox img {
    margin-inline: auto;
  }

  .gbox .eyebrow {
    justify-content: center;
  }

  .gbox h3 {
    margin-inline: auto;
  }

  .gbox .btn {
    justify-content: center;
    width: auto;
    min-width: 14rem;
  }
}

.gbox .btn-line:hover,
.gbox .btn-line:focus-visible {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* the LinkedIn button in the guest card is an outline; it turns blue only while it is hovered, pressed or focused */
.gbox a.btn-line:hover,
.gbox a.btn-line:active,
.gbox a.btn-line:focus,
.gbox a.btn-line:focus-visible {
  color: #fff !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}


/* =====================================================
   THE "SEND AN E-MAIL WITH" MENU
   A small white card that opens beside an e-mail link and lets the visitor pick Gmail, Outlook, Yahoo or the mail app on
   their device, or copy the address (js/main.js)
   ===================================================== */
.mail-menu {
  position: absolute;
  z-index: 200;
  width: min(17rem, calc(100vw - 1rem));
  padding: 0.5rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(10, 30, 58, 0.28);
  animation: mailMenuIn 0.15s ease-out;
}

@keyframes mailMenuIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.mail-menu-title {
  margin: 0;
  padding: 0.5rem 0.75rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.mail-menu a,
.mail-menu button {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.mail-menu a:hover,
.mail-menu a:focus-visible,
.mail-menu button:hover,
.mail-menu button:focus-visible {
  color: #fff;
  background: var(--accent);
  outline: 0;
}

.mm-ico {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 50%;
}

.mail-menu a:hover .mm-ico,
.mail-menu a:focus-visible .mm-ico,
.mail-menu button:hover .mm-ico,
.mail-menu button:focus-visible .mm-ico {
  background: #fff;
}