/* Zedia Studio landing page
   "Lights down, lights up": dark hero, green projector glow into white, dark booking section. */

/* ---------- Tokens ---------- */
:root {
  --black: #000000;      /* Screen black: hero + booking */
  --glow: #7cf29c;       /* Projector green: glow + primary button only */
  --glow-hover: #9af6b3;
  --deep: #0f6b3a;       /* Deep green: links + focus on white */
  --paper: #ffffff;      /* Daylight */
  --haze: #f2f5f3;       /* FAQ panel */
  --graphite: #161a18;   /* Text on white */
  --mist: #56605a;       /* Secondary text on white */
  --rule: #dde4e0;

  /* Greens for the glow band: deep to light, cool to warm */
  --g-forest: #062a1b;
  --g-emerald: #0d5c3b;
  --g-jade: #2f9a69;
  --g-seafoam: #52d6a8;
  --g-lime: #c6f48a;
  --g-celadon: #dcf6e5;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.6 -0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.72);

  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --gutter: 20px;
  --max: 1120px;
  --section: clamp(72px, 10vw, 128px);
  --radius-frame: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --radius-frame: 20px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--graphite);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { background: var(--paper); }

h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p { margin: 0; }
img { display: block; max-width: 100%; }

a { color: var(--deep); }

:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 3px;
  border-radius: 8px;
}

.nav :focus-visible,
.hero :focus-visible,
.book :focus-visible { outline-color: var(--glow); }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nowrap { white-space: nowrap; }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--graphite);
  font-weight: 500;
}
.skip-link:focus { top: 16px; }

.section-title {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  max-width: 16ch;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  font: 500 1rem/1 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s, transform 0.2s var(--ease-out), box-shadow 0.3s;
}

.btn--glow {
  background: var(--glow);
  color: #04140a;
  box-shadow: 0 10px 40px -10px rgba(124, 242, 156, 0.6);
}
.btn--glow:hover { background: var(--glow-hover); box-shadow: 0 12px 48px -8px rgba(124, 242, 156, 0.75); }
.btn--glow:active { transform: scale(0.97); }

.btn--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.9375rem;
  box-shadow: none;
}

/* ---------- Nav ---------- */
/* Liquid glass: a lightly tinted, strongly blurred pane with a bright top
   edge and soft inner sheen. It switches to a light pane with dark text
   over the white sections (the script sets .is-light), so it stays legible
   on both. */
.nav {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 5px 5px 5px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  /* Dark glass: the white sheen and edge light are kept faint so they read as
     a soft reflection on black rather than a bright outline */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 55%, rgba(255, 255, 255, 0.03) 100%),
    rgba(16, 20, 18, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    inset 0 0 18px rgba(255, 255, 255, 0.02),
    0 12px 32px -12px rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transform: translateX(-50%);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.nav.is-light {
  border-color: rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0.5) 100%),
    rgba(242, 245, 243, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(22, 26, 24, 0.05),
    0 12px 32px -14px rgba(8, 40, 26, 0.3);
}

.nav__brand {
  margin-right: 12px;
  color: var(--on-dark);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.35s ease;
}

.nav__link {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.35s ease;
}
.nav__link:hover { color: var(--on-dark); }

.nav.is-light .nav__brand { color: var(--graphite); }
.nav.is-light .nav__link { color: var(--mist); }
.nav.is-light .nav__link:hover { color: var(--graphite); }
.nav.is-light :focus-visible { outline-color: var(--deep); }

@media (min-width: 640px) {
  .nav__link { display: inline-flex; }
  .nav .btn { margin-left: 6px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: clamp(108px, 16vw, 176px);
  background: var(--black);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}

/* Faint light from the top, like a dimmed screening room */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 640px;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 0%, rgba(255, 255, 255, 0.07), transparent 70%);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  text-align: center;
}

/* Pixel dot grid behind the headline, fading out towards the edges */
.hero__copy::before {
  content: "";
  position: absolute;
  inset: -72px -140px -48px;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='2' height='2' fill='%23ffffff' fill-opacity='0.2'/%3E%3C/svg%3E");
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 45%, #000 20%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero__copy::before { inset: -56px -8px -24px; opacity: 0.65; }
}

.hero h1 {
  font-size: clamp(2.75rem, 1.6rem + 5.2vw, 5.75rem);
}

/* Typed-out heading on load. Every letter keeps its place while hidden, so
   the layout never shifts. One cursor follows the last typed letter. */
.js .hero h1 {
  visibility: hidden;
  animation: heading-failsafe 0s 4s forwards; /* shows it anyway if the script fails */
}
.js .hero h1.is-typing,
.js .hero h1.is-typed {
  visibility: visible;
  animation: none;
}
@keyframes heading-failsafe {
  to { visibility: visible; }
}

.hero h1 .ch { visibility: hidden; }
.hero h1 .ch.is-shown { visibility: visible; }

.hero h1 { position: relative; }

/* Floats over the text rather than sitting in it, so it can never change
   where the lines break. The script places it after the last typed letter,
   just under that line's baseline. */
.type-caret {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.type-caret::after {
  content: "";
  position: absolute;
  left: 0.05em;
  top: 0.07em;
  width: 0.46em;
  height: 0.07em;
  background: currentColor;
}
/* Solid while typing, blinks while waiting */
.type-caret.is-blinking::after { animation: caret-blink 1s steps(1) infinite; }

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* Instrument Serif italic for the one emphasised word in the heading */
.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  /* Instrument Serif's lowercase letters are ~7% shorter than Geist's at the
     same size. Full matching (1.075em) looked too big, so it sits between */
  font-size: 1.04em;
  letter-spacing: -0.01em;
  line-height: 0.9;
  padding-right: 0.04em; /* keeps the italic "h" from touching "day" */
}

.hero__sub,
.book__lead {
  /* Light weight with open line spacing, so it reads as a quiet supporting
     line under the heading rather than a second block of text */
  color: rgba(255, 255, 255, 0.66);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.hero__sub {
  max-width: 34rem;
  margin: 32px auto 0;
}

@media (min-width: 900px) {
  .hero__sub { max-width: 42rem; } /* two lines on desktop */
}

.hero .btn { margin-top: 36px; }

.hero__micro {
  max-width: 24rem;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* ---------- Video reel ---------- */
.reel {
  --slide-w: min(78vw, 900px);
  --fh: calc(var(--slide-w) * 0.5625); /* height of the centre video */
  position: relative;
  isolation: isolate;
  /* Its own layout box, so the track's negative top margin can't leak out and
     pull the whole reel up over the text above it */
  display: flow-root;
  margin-top: clamp(32px, 6vw, 88px);
  padding-bottom: 48px;
  /* Black above the video, white below it, with the glow band bridging the two */
  background: linear-gradient(180deg,
    var(--black) 0,
    var(--black) calc(var(--fh) * 0.4),
    #020a06 calc(var(--fh) * 0.6),
    #06231a calc(var(--fh) * 0.82),
    #145c3b calc(var(--fh) + 5px),
    #5fbd8c calc(var(--fh) + 50px),
    #bfe9cf calc(var(--fh) + 95px),
    #eef9f2 calc(var(--fh) + 130px),
    var(--paper) calc(var(--fh) + 165px));
}

/* The glow band: a wide, uneven ribbon of light behind the lower half of the
   video, built from several soft pools so the tone shifts along its length */
.reel__glow,
.reel__grain {
  position: absolute;
  left: -12%;
  right: -12%;
  top: calc(var(--fh) * 0.3);
  height: calc(var(--fh) * 0.7 + 170px); /* ends exactly at the bottom of the reel */
  z-index: -1;
  pointer-events: none;
}

.reel__glow {
  /* Blurred wave shapes: black above, a green ribbon whose edges gently rise
     and dip, a pale crest, then white below (same language as the booking band) */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E %3Cdefs%3E %3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%233fcf9e'/%3E%3Cstop offset='0.25' stop-color='%235ce3a4'/%3E%3Cstop offset='0.5' stop-color='%237cf29c'/%3E%3Cstop offset='0.74' stop-color='%239cf097'/%3E%3Cstop offset='1' stop-color='%23bdf08c'/%3E%3C/linearGradient%3E %3Cfilter id='b1' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E %3Cfilter id='b2' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='17'/%3E%3C/filter%3E %3Cfilter id='b3' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E %3C/defs%3E %3Cpath filter='url(%23b1)' fill='url(%23g)' d='M-60 80 C140 60 300 110 500 85 S820 55 1060 90 L1060 268 C860 262 680 262 500 240 S140 205 -60 232 Z'/%3E %3Cpath filter='url(%23b2)' fill='%230d5c3b' fill-opacity='0.8' d='M-60 -40 L1060 -40 L1060 100 C820 72 660 122 500 96 S140 72 -60 106 Z'/%3E %3Cpath filter='url(%23b2)' fill='%23000' d='M-60 -60 L1060 -60 L1060 70 C820 42 660 94 500 66 S140 42 -60 76 Z'/%3E %3Cpath filter='url(%23b3)' fill='%23dcf6e5' fill-opacity='0.8' d='M-60 200 C140 184 300 228 500 214 S820 226 1060 244 L1060 262 C820 246 660 258 500 238 S140 210 -60 236 Z'/%3E %3Cpath filter='url(%23b3)' fill='%23fff' d='M-60 236 C140 216 300 262 500 250 S820 252 1060 262 L1060 380 L-60 380 Z'/%3E %3C/svg%3E") center / 100% 100% no-repeat;
}

/* Fine film grain over the band only */
.reel__grain {
  background-image: var(--grain);
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 72%, transparent 100%);
}

.reel__track {
  position: relative;
  display: flex;
  gap: clamp(10px, 2vw, 28px);
  /* Extra room above and below so the active video's glow isn't clipped */
  margin: -64px 0 -120px;
  padding: 64px calc((100% - var(--slide-w)) / 2) 160px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__track:focus-visible { outline-offset: -2px; border-radius: 0; }

.reel__slide {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  opacity: 0.4;
  transform: scale(0.92);
  transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
  cursor: pointer;
}

@media (min-width: 768px) {
  .reel__slide { opacity: 0.3; }
}

.reel__slide.is-active {
  opacity: 1;
  transform: none;
  cursor: auto;
}

.reel__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-frame);
  background: #0a0d0b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.6s var(--ease-out);
}

/* Light spilling from behind the active screen (a gradient, not a blurred
   shadow, so it renders smoothly on phones) */
.reel__slide { position: relative; }
.reel__slide::before {
  content: "";
  position: absolute;
  inset: -12% -10% -30%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(124, 242, 156, 0.3), rgba(124, 242, 156, 0.1) 55%, rgba(124, 242, 156, 0));
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
}
.reel__slide.is-active::before { opacity: 1; }
.reel__slide.is-active .reel__frame {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.reel__poster,
.reel__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.reel__sound {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--on-dark);
  font: 500 0.875rem/1 var(--font);
  cursor: pointer;
  touch-action: manipulation;
}
.reel__sound:hover { background: rgba(0, 0, 0, 0.8); }
.reel__sound[hidden] { display: none; }
.reel__slide:not(.is-active) .reel__sound { visibility: hidden; }

/* Stand-in until a real video link is added */
.placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  background:
    radial-gradient(80% 90% at var(--px, 30%) 110%, rgba(124, 242, 156, 0.22), transparent 60%),
    radial-gradient(60% 60% at var(--qx, 85%) -10%, rgba(255, 255, 255, 0.08), transparent 70%),
    linear-gradient(160deg, #101512, #050706);
}
.reel__slide:nth-child(2n) .placeholder { --px: 75%; --qx: 15%; }
.reel__slide:nth-child(3n) .placeholder { --px: 50%; --qx: 50%; }

.placeholder__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}
.placeholder__title {
  font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.placeholder__note {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
}

.reel__controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-inline: var(--gutter);
}

.reel__arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(22, 26, 24, 0.22);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--graphite);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s, opacity 0.2s;
}
.reel__arrow:hover:not(:disabled) { background: rgba(255, 255, 255, 0.75); }
.reel__arrow:disabled { opacity: 0.3; cursor: default; }

/* Two-line label under the video: company, then the kind of video */
.reel__caption {
  display: grid;
  gap: 2px;
  min-width: 0;
  width: 15rem;
  text-align: center;
}
.reel__title {
  color: var(--graphite);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.reel__type {
  color: rgba(22, 26, 24, 0.62);
  font-size: 1rem;
  line-height: 1.4;
  text-wrap: balance;
}

.reel__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 10px;
}

.reel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.reel__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(22, 26, 24, 0.28);
  transition: width 0.3s var(--ease-out), background-color 0.3s;
}
.reel__dot[aria-current="true"]::before {
  width: 18px;
  background: var(--graphite);
}

.hero .reel__controls :focus-visible,
.hero .reel__dots :focus-visible { outline-color: var(--graphite); }

/* The one load moment: videos fade up, the glow rises like a projector warming up */
@media (prefers-reduced-motion: no-preference) {
  .reel__track,
  .reel__controls,
  .reel__dots { animation: reel-in 1.1s var(--ease-out) 0.15s both; }
  .reel__glow {
    transform-origin: 50% 60%;
    animation: glow-rise 2.2s var(--ease-out) 0.3s both;
  }
}

@keyframes reel-in {
  from { opacity: 0; transform: translateY(24px); }
}

@keyframes glow-rise {
  from { opacity: 0; transform: scaleY(0.4); }
}

/* ---------- Proof ---------- */
.proof {
  padding: 24px 0 var(--section);
  text-align: center;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px clamp(32px, 6vw, 72px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 479px) {
  .logos { display: grid; grid-template-columns: repeat(2, auto); gap: 14px 40px; }
}

.logos li {
  color: #6f7973;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  font-weight: 500;
  letter-spacing: -0.03em;
}

.logos li {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logos shown in one quiet grey so no client's colours shout louder than another's.
   Heights differ so they look the same size to the eye, not on a ruler. */
.logos img {
  height: var(--logo-h, 28px);
  width: auto;
  filter: grayscale(1) brightness(0);
  opacity: 0.55;
}
.logo--shipper { --logo-h: 26px; }
.logo--aisc    { --logo-h: 52px; }
.logo--revix   { --logo-h: 23px; }

.proof__stat {
  margin-top: 28px;
  color: var(--mist);
  font-size: 1.0625rem;
}
.proof__stat strong {
  color: var(--graphite);
  font-weight: 500;
}

/* ---------- Testimonials ---------- */
/* A looping card carousel: three cards in view, the centre one always the
   green feature card. Cards share one grid cell (so they all match the
   tallest card's height) and slide sideways by their position. */
.voices {
  padding-bottom: var(--section);
  overflow: hidden;
}

.voices__head {
  text-align: center;
}
.voices__head .section-title { margin-inline: auto; max-width: 20ch; }

.voices__intro {
  max-width: 30rem;
  margin: 16px auto 0;
  color: var(--mist);
  font-size: 1.0625rem;
}

.voices__carousel {
  --card-w: min(80vw, 360px);
  --card-gap: 12px;
  margin-top: clamp(40px, 6vw, 64px);
}

@media (min-width: 768px) {
  .voices__carousel { --card-gap: 24px; }
}

.voices__stage {
  display: grid;
  justify-content: center;
  padding-block: 12px 32px;
  touch-action: pan-y;
}

.voice {
  --pos: 0;
  --slide: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative;
  isolation: isolate;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  width: var(--card-w);
  margin: 0;
  padding: 28px 26px 24px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--paper);
  color: var(--graphite);
  /* The grey outline is an inset shadow, so the green layer covers it fully */
  box-shadow: inset 0 0 0 1px #dfe5e1, 0 24px 60px -24px rgba(8, 64, 42, 0);
  transform: translateX(calc(var(--pos) * (var(--card-w) + var(--card-gap))));
  transition:
    transform 0.9s var(--slide),
    opacity 0.6s var(--slide),
    color 0.6s ease,
    box-shadow 0.9s var(--slide);
  cursor: pointer;
}

/* Just out of view on either side: still slides, but invisible */
.voice.is-edge {
  opacity: 0;
  pointer-events: none;
}

/* Further away still */
.voice.is-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* A card wrapping round from one end to the other moves instantly while hidden */
.voice.is-jumping { transition: none; }

/* The centre card: premium green, faded in as a layer so the change is smooth */
.voice__surface {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(124, 242, 156, 0.28), rgba(124, 242, 156, 0) 70%),
    radial-gradient(70% 60% at 0% 100%, rgba(6, 42, 27, 0.7), rgba(6, 42, 27, 0) 70%),
    linear-gradient(150deg, #137a4f 0%, #0d5c3b 48%, #08402a 100%);
  transition: opacity 0.7s var(--slide);
  pointer-events: none;
}

.voice.is-center {
  z-index: 1;
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(223, 229, 225, 0), 0 24px 60px -24px rgba(8, 64, 42, 0.55);
  cursor: auto;
}
.voice.is-center .voice__surface { opacity: 1; }

/* Grain on the green layer, same as the glow bands */
.voice__surface::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  opacity: 0.7;
}

/* The large quote mark: small square blocks with long curved tails */
.voice__surface::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 24px;
  width: 36px;
  height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 44'%3E%3Cpath fill='%237CF29C' d='M0 44V28C0 15 5 5 15 1l1.5 4.5C10.5 8.5 7 15 7 28h9v16H0zM22 44V28C22 15 27 5 37 1l1.5 4.5C32.5 8.5 29 15 29 28h9v16H22z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.voice blockquote { margin: 0 0 24px; }

.voice__pull {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.voice.is-center .voice__pull { padding-right: 40px; }

.voice__full,
.voice__role,
.voice__logo,
.voice__face,
.voice__who { transition: color 0.6s ease, background-color 0.6s ease, border-color 0.6s ease; }

.voice__full {
  margin-top: 12px;
  color: var(--mist);
  font-size: 1rem;
  line-height: 1.6;
}
.voice.is-center .voice__full { color: rgba(255, 255, 255, 0.8); }

.voice__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid #e6ebe8;
}
.voice.is-center .voice__who { border-top-color: rgba(255, 255, 255, 0.18); }

.voice__face {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--haze);
  color: var(--mist);
  font-size: 0.8125rem;
  font-weight: 500;
  object-fit: cover;
}
.voice.is-center .voice__face {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.voice__id { min-width: 0; }

.voice__name {
  display: block;
  font-weight: 500;
  line-height: 1.3;
}

.voice__role {
  display: block;
  color: var(--deep);
  font-size: 0.875rem;
  line-height: 1.35;
}
.voice.is-center .voice__role { color: #a9f3c1; }

.voice__logo {
  margin-left: auto;
  color: #8a938d;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.voice.is-center .voice__logo { color: rgba(255, 255, 255, 0.7); }

.voice__logo img { height: 22px; width: auto; }

/* Arrows and dots under the cards */
.voices__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.carousel-arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #d3dbd6;
  border-radius: 50%;
  background: var(--paper);
  color: var(--graphite);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.2s, border-color 0.2s;
}
.carousel-arrow:hover { background: var(--haze); border-color: #b9c5be; }

.voices__dots { display: flex; gap: 2px; }

.voices__dots .reel__dot::before { background: rgba(22, 26, 24, 0.22); }
.voices__dots .reel__dot[aria-current="true"]::before { background: var(--deep); }

/* ---------- FAQ ---------- */
.faq {
  padding-top: var(--section);
  padding-bottom: clamp(40px, 5vw, 64px);
  background: var(--haze);
}

.faq__grid {
  display: grid;
  gap: 36px;
}

@media (min-width: 900px) {
  .faq__grid { grid-template-columns: 5fr 7fr; gap: 72px; }
}

.faq__intro p {
  max-width: 26rem;
  margin-top: 16px;
  color: var(--mist);
  font-size: 1.0625rem;
}

.faq__item { border-top: 1px solid #cfd8d3; }
.faq__item:last-child { border-bottom: 1px solid #cfd8d3; }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 44px;
  padding: 24px 0;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }

.faq__icon {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid #b9c5be;
  border-radius: 50%;
  transition: transform 0.3s var(--ease-out), background-color 0.2s;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--graphite);
  transform: translate(-50%, -50%);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item summary:hover .faq__icon { background: #e4ebe7; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }

.faq__answer {
  max-width: 60ch;
  padding-bottom: 28px;
  color: #3a4540;
}
.faq__answer p + p { margin-top: 12px; }

/* ---------- Booking ---------- */
.book {
  background: var(--black);
  color: var(--on-dark);
}

/* Glow in reverse: lights go down for the closing credits. Drawn as blurred
   wave shapes (a green ribbon, a pale crest, black rising below) so the
   light rolls across the page instead of sitting in straight stripes. */
.book__horizon {
  position: relative;
  isolation: isolate;
  height: clamp(260px, 26vw, 360px);
  overflow: hidden;
  background: var(--haze);
}

.book__horizon::before,
.book__horizon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.book__horizon::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 300' preserveAspectRatio='none'%3E %3Cdefs%3E %3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='0'%3E%3Cstop offset='0' stop-color='%233fcf9e'/%3E%3Cstop offset='0.25' stop-color='%235ce3a4'/%3E%3Cstop offset='0.5' stop-color='%237cf29c'/%3E%3Cstop offset='0.74' stop-color='%239cf097'/%3E%3Cstop offset='1' stop-color='%23bdf08c'/%3E%3C/linearGradient%3E %3Cfilter id='b1' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='22'/%3E%3C/filter%3E %3Cfilter id='b2' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='18'/%3E%3C/filter%3E %3Cfilter id='b3' x='-20%25' y='-60%25' width='140%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E %3C/defs%3E %3Cpath filter='url(%23b1)' fill='url(%23g)' d='M-60 95 C140 55 300 140 500 100 S820 50 1060 105 L1060 250 C820 210 660 290 500 245 S140 210 -60 255 Z'/%3E %3Cpath filter='url(%23b2)' fill='%230d5c3b' fill-opacity='0.85' d='M-60 180 C140 145 300 225 500 185 S820 140 1060 190 L1060 360 L-60 360 Z'/%3E %3Cpath filter='url(%23b2)' fill='%23000' d='M-60 212 C140 177 300 257 500 217 S820 172 1060 222 L1060 360 L-60 360 Z'/%3E %3Cpath filter='url(%23b3)' fill='%23dcf6e5' fill-opacity='0.85' d='M-60 82 C140 45 300 125 500 88 S820 40 1060 92 L1060 118 C820 80 660 150 500 115 S140 80 -60 120 Z'/%3E %3C/svg%3E") center / 100% 100% no-repeat;
}

.book__horizon::after {
  background-image: var(--grain);
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 74%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 4%, #000 22%, #000 74%, transparent 92%);
}

.book__inner {
  scroll-margin-top: 40px; /* "Book a call" lands with the heading near the top of the screen */
  padding-top: 0;
  padding-bottom: var(--section);
  text-align: center;
}

.book h2 {
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
}

.book__lead {
  max-width: 34rem;
  margin: 28px auto 0;
}

@media (min-width: 900px) {
  .book__lead { max-width: 42rem; } /* two lines on desktop, like the hero */
}

.book .btn { margin-top: 36px; }

.calendar {
  display: grid;
  max-width: 1000px;
  min-height: 420px;
  margin: clamp(48px, 7vw, 72px) auto 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: #070908;
  text-align: left;
}

.calendar.is-live {
  min-height: 0;
  border: 0;
  background: none;
}

.calendar__placeholder a {
  color: var(--glow);
  text-underline-offset: 3px;
}

.calendar__placeholder {
  place-self: center;
  max-width: 24rem;
  padding: 32px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

/* ---------- Footer ---------- */
.footer {
  padding: 28px var(--gutter) 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--black);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.875rem;
  text-align: center;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}