/*
  Echo Digital, plain HTML/CSS/vanilla JS build.

  This file holds every component rule. Every color reference is
  var(--token), defined in theme.css. No literal color values live here,
  so the whole page reads correctly in both themes with zero changes below.

  Section order and layout family, one per section, no family repeated:
   1  Nav          floating pill nav
   2  Hero         asymmetric split, copy left / media card right
   3  Proof        stat triptych over a logo row
   4  Manifesto    full bleed editorial statement on a photographic band
   5  Services     interactive menu with a swapping detail panel
   6  Why Echo     bento grid, six cells, mixed spans
   7  Approach     wide media plate over a stepped horizontal timeline
   8  Partners     continuous marquee (the only marquee on the page)
   9  CTA band     centred full bleed brand band
  10  FAQ          disclosure accordion
  11  Footer       link columns plus an oversized cropped brand mark
*/

/* ============================== Reset ============================== */

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

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  background: var(--ink);
  color: var(--fg);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  padding: 0;
}

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

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection {
  background: var(--brand);
  color: #fff;
}

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

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

/* ============================== Tokens (structural) ============================== */

:root {
  --radius-panel: 20px;
  --container: 1180px;
  --font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
}

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

@media (min-width: 640px) {
  .container {
    padding-inline: 1.5rem;
  }
}

/* ============================== Grain ============================== */

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
}

@media (prefers-reduced-transparency: reduce) {
  .grain {
    display: none;
  }
}

/* ============================== Reveal on scroll ============================== */

/*
  Progressive enhancement: without animation-timeline support, content is
  simply visible, never stuck at zero opacity. --stagger nudges where each
  item in a row finishes, so a row cascades instead of arriving as one block.
  Purpose: hierarchy, content arrives in reading order as a section appears.
*/
@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes settle-in {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.rise-in {
  animation: rise-in 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--delay, 0ms);
}

.settle-in {
  animation: settle-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--delay, 0ms);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover calc(26% + var(--stagger, 0%));
    }
  }
}

/* ============================== Shared text / accents ============================== */

.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hairline {
  background: var(--grad-text);
  border-radius: 999px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--ghost-border);
  background: var(--ghost-bg);
  padding: 0.375rem 1rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (min-width: 640px) {
  .eyebrow {
    font-size: 12.5px;
    letter-spacing: 0.14em;
  }
}

/* ============================== Buttons ============================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.875rem 1.75rem;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.btn:hover svg {
  transform: translate(1px, -1px);
}

.btn-primary {
  background-image: var(--grad-surface);
  color: #fff;
  box-shadow: 0 10px 40px -12px rgb(150 30 180 / 0.9);
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-ghost {
  border: 1px solid var(--ghost-border);
  background: var(--ghost-bg);
  color: var(--fg);
}

.btn-ghost:hover {
  border-color: var(--ghost-border-hover);
  background: var(--ghost-bg-hover);
}

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

:root[data-theme="light"] .btn-white {
  color: #191420;
}

.btn-white:hover {
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.625rem 1.75rem;
  font-size: 14px;
}

/* ============================== Nav ============================== */

/*
  Solid, edge to edge bar (not the floating glass pill this page used
  before). The hero is now a full photograph rather than a flat gradient
  wash, so the nav needs a fully opaque surface to stay legible over
  whatever is scrolling underneath it, in either theme: solid --ink, which
  is a near-black bar in dark theme and a near-white bar in light theme.
*/
.nav-wrap {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s ease;
}

.nav.is-scrolled {
  box-shadow: 0 16px 50px -24px rgb(0 0 0 / 0.35);
}

.nav {
  margin-inline: auto;
  max-width: var(--container);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 1.5rem;
}

@media (min-width: 640px) {
  .nav {
    padding-inline: 2rem;
  }
}

.nav__logo {
  display: flex;
  align-items: center;
  height: 30px;
  width: auto;
  color: var(--fg);
}

.nav__links {
  display: none;
  align-items: center;
  gap: 2.25rem;
}

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
  }
}

.nav__links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s ease;
}

.nav__links a:hover {
  color: var(--fg);
}

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

.nav__cta-desktop {
  display: none;
}

@media (min-width: 640px) {
  .nav__cta-desktop {
    display: inline-flex;
  }
}

.nav__burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ghost-border);
  color: var(--fg);
}

@media (min-width: 1024px) {
  .nav__burger {
    display: none;
  }
}

.nav__burger svg {
  width: 18px;
  height: 18px;
}

.nav__sheet {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  background: var(--ink);
  border-bottom: 0 solid var(--line);
  transition: max-height 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
}

@media (min-width: 1024px) {
  .nav__sheet {
    display: none;
  }
}

.nav__sheet.is-open {
  max-height: 400px;
  opacity: 1;
  border-bottom-width: 1px;
}

.nav__sheet-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.5rem 1.5rem 1rem;
}

.nav__sheet a {
  display: block;
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
}

.nav__sheet a:hover {
  background: var(--ghost-bg-hover);
}

.nav__sheet-cta {
  padding: 0.5rem 1.25rem 0;
}

@media (min-width: 640px) {
  .nav__sheet-cta {
    display: none;
  }
}

.nav__sheet-cta .btn {
  width: 100%;
  justify-content: center;
}

/* ============================== Hero ============================== */

/*
  Full bleed photograph, centered content. Like Manifesto below it, this
  section is a deliberate theme lock exception: the photo and its scrim stay
  the same dark-legible treatment in both themes (the text sitting on it is
  fixed light, not theme-driven), while the nav bar above it still follows
  the active theme. See the note on .manifesto for the same reasoning.

  Two photo treatments, swapped by data-hero on this element, for comparing
  a neutral grayscale mountain against a version with the brand hue mixed
  through it as a duotone. Default is grayscale. See js/main.js for the
  internal preview toggle that flips this attribute (REMOVE BEFORE SHIPPING
  once one is chosen, same as the theme toggle).
*/
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding-top: 72px;
  text-align: center;
}

.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  filter: grayscale(1) contrast(1.04) brightness(0.92);
  transition: filter 0.4s ease;
}

/* Duotone overlay: the brand gradient multiplied through the (still
   grayscale) photo. Zero opacity by default, the tint variant brings it up,
   so switching treatments never needs a second image asset. */
.hero__tint {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--grad-surface);
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgb(8 6 10 / 0.35) 0%,
      rgb(8 6 10 / 0.12) 32%,
      rgb(8 6 10 / 0.4) 68%,
      rgb(8 6 10 / 0.72) 100%
    ),
    radial-gradient(60% 42% at 50% 38%, rgb(8 6 10 / 0.28), transparent 72%);
}

.hero[data-hero="tint"] .hero__photo {
  filter: grayscale(0.25) contrast(1.02) brightness(0.85);
}

.hero[data-hero="tint"] .hero__tint {
  opacity: 0.55;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.hero__title {
  margin-top: 1.5rem;
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: #f8f6fa;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.25);
}

@media (min-width: 640px) {
  .hero__title {
    font-size: 4rem;
  }
}

@media (min-width: 1024px) {
  .hero__title {
    font-size: 4.6rem;
  }
}

.hero__subtext {
  margin-top: 1.5rem;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.7;
  color: rgb(246 242 248 / 0.82);
}

.hero__ctas {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.hero .btn-ghost {
  border-color: rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.06);
  color: #f8f6fa;
}

.hero .btn-ghost:hover {
  border-color: rgb(255 255 255 / 0.55);
  background: rgb(255 255 255 / 0.12);
}

/* The eyebrow sits on the photo, so like the rest of the hero it takes a
   fixed light glass treatment rather than the theme-driven tokens the base
   .eyebrow rule uses elsewhere. */
.hero .eyebrow {
  border-color: rgb(255 255 255 / 0.3);
  background: rgb(255 255 255 / 0.08);
}

/* ============================== Proof ============================== */

.proof {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
}

.proof__stats {
  display: grid;
  grid-template-columns: 1fr;
}

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

.proof__stat {
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
  .proof__stat {
    border-bottom: none;
    padding-inline: 2rem;
    border-left: 1px solid var(--line);
  }
  .proof__stat:first-child {
    padding-left: 0;
    border-left: none;
  }
  .proof__stat:last-child {
    padding-right: 0;
  }
}

.proof__stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (min-width: 1024px) {
  .proof__stat-value {
    font-size: 3.75rem;
  }
}

.proof__stat-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 15px;
  color: var(--muted);
}

.proof__logos-row {
  border-top: 1px solid var(--line);
}

.proof__logos-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding-block: 2.5rem;
}

@media (min-width: 768px) {
  .proof__logos-inner {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }
}

.proof__logos-label {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--muted);
}

.proof__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
}

@media (min-width: 768px) {
  .proof__logos {
    justify-content: flex-start;
  }
}

.proof__logos img {
  width: auto;
  opacity: 0.7;
  filter: var(--logo-filter);
  transition: opacity 0.2s ease;
}

.proof__logos img:hover {
  opacity: 1;
}

/* ============================== Manifesto ============================== */

/*
  This section is a deliberate exception to the page theme lock: a full bleed
  photographic band with a dark scrim, in both themes. That is not a light or
  dark mode inversion, it is a contained editorial device (a moody photo
  moment), the same device the hero card and the approach media plate use at
  smaller scale. The page background and every text token around it still
  follow the active theme.
*/
.manifesto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.manifesto__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62) grayscale(1);
}

.manifesto__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgb(11 7 16 / 0.88) 0%,
    rgb(11 7 16 / 0.7) 48%,
    rgb(150 30 180 / 0.5) 100%
  );
}

.manifesto__inner {
  padding-block: 7rem;
}

@media (min-width: 1024px) {
  .manifesto__inner {
    padding-block: 10rem;
  }
}

.manifesto__title {
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #f6f2f8;
}

@media (min-width: 640px) {
  .manifesto__title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .manifesto__title {
    font-size: 3.9rem;
  }
}

.manifesto__body {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .manifesto__body {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.manifesto__body p {
  font-size: 19px;
  line-height: 1.7;
  color: rgb(246 242 248 / 0.9);
}

.manifesto__body p:last-child {
  font-size: 17px;
  color: rgb(246 242 248 / 0.75);
}

/* ============================== Services ============================== */

.services {
  border-bottom: 1px solid var(--line);
  padding-block: 6rem;
}

@media (min-width: 1024px) {
  .services {
    padding-block: 8rem;
  }
}

.section-title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .section-title {
    font-size: 3rem;
  }
}

.services__layout {
  margin-top: 3.5rem;
  display: grid;
  gap: 2.5rem;
}

/* Mobile-first: hidden by default, the 1024px override below turns it back
   on. This rule must stay ABOVE the @media block, not below it: two rules of
   equal specificity resolve by source order, so a later unconditional rule
   would beat an earlier media-queried one even when the query matches. */
.services__panel-col {
  display: none;
}

@media (min-width: 1024px) {
  .services__layout {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }
  .services__list-col {
    grid-column: span 7;
  }
  .services__panel-col {
    grid-column: span 5;
    display: block;
  }
}

.services__list {
  border-top: 1px solid var(--line);
}

.services__row {
  border-bottom: 1px solid var(--line);
}

.services__row-btn {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  text-align: left;
}

.services__row-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg);
  transition: color 0.2s ease;
}

@media (min-width: 640px) {
  .services__row-title {
    font-size: 2.1rem;
  }
}

.services__row-arrow {
  display: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.2s ease;
}

@media (min-width: 1024px) {
  .services__row-arrow {
    display: block;
  }
  .services__row-title {
    color: var(--muted);
  }
  .services__row.is-active .services__row-title {
    color: var(--fg);
  }
  .services__row:hover .services__row-title {
    color: var(--fg);
  }
}

.services__row.is-active .services__row-arrow {
  color: var(--fg);
  opacity: 1;
  transform: translateX(0);
}

.services__row-detail {
  padding-bottom: 2rem;
}

@media (min-width: 1024px) {
  .services__row-detail {
    display: none;
  }
}

.services__row-detail p {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

.services__panel {
  position: sticky;
  top: 7rem;
  overflow: hidden;
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: 2.25rem;
}

.services__panel-lead {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.services__panel-body {
  margin-top: 1rem;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

.tags {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ghost-bg);
  padding: 0.375rem 0.875rem;
  font-size: 13px;
  color: var(--muted);
}

/* ============================== Why Echo (bento) ============================== */

.why {
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: 6rem;
}

@media (min-width: 1024px) {
  .why {
    padding-block: 8rem;
  }
}

.why__grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

.why__cell {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
  padding: 2rem;
}

.why__cell--wide {
  grid-column: span 1;
  min-height: 260px;
}

@media (min-width: 768px) {
  .why__cell--wide {
    grid-column: span 3;
  }
}

.why__cell--half {
  grid-column: span 1;
  min-height: 240px;
}

@media (min-width: 768px) {
  .why__cell--half {
    grid-column: span 2;
  }
}

.why__cell--brand {
  background-image: var(--grad-surface);
  border-color: rgb(255 255 255 / 0.15);
  color: #fff;
}

.why__cell--dark {
  background: var(--ink-3);
}

.why__cell h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.why__cell--wide h3 {
  font-size: 1.5rem;
}

.why__cell--half h3 {
  font-size: 1.25rem;
}

.why__cell p {
  margin-top: 1rem;
  font-size: 15px;
  line-height: 1.7;
}

.why__cell--wide p {
  font-size: 16px;
  max-width: 40ch;
}

.why__cell--brand p {
  color: rgb(255 255 255 / 0.85);
}

.why__cell--dark p {
  color: var(--muted);
}

.why__cell--photo {
  position: relative;
  isolation: isolate;
  grid-column: span 1;
  min-height: 240px;
}

@media (min-width: 768px) {
  .why__cell--photo {
    grid-column: span 2;
  }
}

.why__cell--photo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) grayscale(1);
}

.why__cell--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(11 7 16 / 0.8), rgb(11 7 16 / 0.96));
}

.why__cell--photo p {
  color: rgb(246 242 248 / 0.8);
}

.why__cell--band {
  grid-column: span 1;
  gap: 1.5rem;
  border-color: rgb(150 30 180 / 0.4);
  background: linear-gradient(100deg, rgb(150 30 180 / 0.16), rgb(254 0 124 / 0.1));
}

@media (min-width: 768px) {
  .why__cell--band {
    grid-column: span 6;
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
    padding: 2.5rem;
  }
}

.why__cell--band h3 {
  font-size: 1.5rem;
}

@media (min-width: 768px) {
  .why__cell--band h3 {
    width: 34%;
    flex-shrink: 0;
  }
}

.why__cell--band p {
  font-size: 16px;
  color: rgb(246 242 248 / 0.8);
}

@media (min-width: 768px) {
  .why__cell--band p {
    flex: 1;
    font-size: 17px;
    margin-top: 0;
  }
}

/* ============================== Approach ============================== */

.approach {
  border-bottom: 1px solid var(--line);
  padding-block: 6rem;
}

@media (min-width: 1024px) {
  .approach {
    padding-block: 8rem;
  }
}

.approach__media {
  position: relative;
  margin-top: 3rem;
  overflow: hidden;
  border-radius: var(--radius-panel);
  border: 1px solid var(--line);
}

.approach__media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 640px) {
  .approach__media img {
    height: 300px;
  }
}

.approach__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgb(11 7 16 / 0.62),
    rgb(150 30 180 / 0.42) 58%,
    rgb(254 0 124 / 0.34)
  );
}

.approach__timeline {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 1024px) {
  .approach__timeline {
    margin-top: 5rem;
  }
}

.approach__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem 2.5rem;
  padding-top: 3rem;
}

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

@media (min-width: 1024px) {
  .approach__steps {
    grid-template-columns: repeat(4, 1fr);
  }
  .approach__step:nth-child(even) {
    margin-top: 3rem;
  }
}

.approach__step-tick {
  display: block;
  width: 40px;
  height: 3px;
}

.approach__step h3 {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.approach__step p {
  margin-top: 0.75rem;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ============================== Partners marquee ============================== */

.partners {
  border-bottom: 1px solid var(--line);
  background: var(--ink-2);
  padding-block: 4rem;
}

@media (min-width: 1024px) {
  .partners {
    padding-block: 5rem;
  }
}

.partners__label {
  font-size: 15px;
  color: var(--muted);
}

.marquee {
  margin-top: 2.5rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 4rem;
  padding-right: 4rem;
  animation: marquee-scroll 42s linear infinite;
  will-change: transform;
}

@media (min-width: 640px) {
  .marquee__track {
    gap: 6rem;
    padding-right: 6rem;
  }
}

@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

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

.marquee__track img {
  width: auto;
  opacity: 0.65;
  filter: var(--logo-filter);
}

/* ============================== CTA band ============================== */

.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: var(--grad-surface);
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 80% at 50% 0%, rgb(255 255 255 / 0.14), transparent 70%);
}

.cta-band__inner {
  max-width: 820px;
  margin-inline: auto;
  padding-block: 6rem;
  text-align: center;
}

@media (min-width: 1024px) {
  .cta-band__inner {
    padding-block: 8rem;
  }
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

@media (min-width: 640px) {
  .cta-band__title {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .cta-band__title {
    font-size: 3.4rem;
  }
}

.cta-band__body {
  margin-top: 1.5rem;
  margin-inline: auto;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.7;
  color: rgb(255 255 255 / 0.85);
}

.cta-band__inner .btn {
  margin-top: 2.5rem;
}

/* ============================== FAQ ============================== */

.faq {
  border-bottom: 1px solid var(--line);
  padding-block: 6rem;
}

@media (min-width: 1024px) {
  .faq {
    padding-block: 8rem;
  }
}

.faq__layout {
  display: grid;
  gap: 3rem;
}

@media (min-width: 1024px) {
  .faq__layout {
    grid-template-columns: repeat(12, 1fr);
    gap: 4rem;
  }
  .faq__heading-col {
    grid-column: span 4;
  }
  .faq__list-col {
    grid-column: span 8;
  }
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.5rem;
  text-align: left;
}

.faq__q-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .faq__q-text {
    font-size: 1.35rem;
  }
}

.faq__q-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted);
  transition: transform 0.3s ease, color 0.3s ease;
}

.faq__item.is-open .faq__q-icon {
  transform: rotate(45deg);
  color: var(--fg);
}

.faq__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq__item.is-open .faq__panel {
  max-height: 240px;
}

.faq__panel p {
  max-width: 68ch;
  padding-bottom: 1.75rem;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
}

/* ============================== Footer ============================== */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding-top: 5rem;
}

.footer__top {
  display: grid;
  gap: 3.5rem;
}

@media (min-width: 1024px) {
  .footer__top {
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem;
  }
  .footer__brand {
    grid-column: span 4;
  }
  .footer__nav {
    grid-column: span 8;
  }
}

.footer__logo {
  height: 32px;
  width: auto;
  color: var(--fg);
}

.footer__brand p {
  margin-top: 1.5rem;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}

.footer__nav {
  display: grid;
  gap: 2.5rem;
}

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

.footer__col-heading {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

.footer__col ul {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}

.footer__col a {
  font-size: 15px;
  color: var(--muted);
  transition: color 0.2s ease;
}

.footer__col a:hover {
  color: var(--fg);
}

.footer__bottom {
  margin-top: 4rem;
  display: grid;
  gap: 2.5rem;
  border-top: 1px solid var(--line);
  padding-block: 2.5rem;
}

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

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

.footer__bottom h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
}

.footer__bottom address,
.footer__bottom ul {
  margin-top: 0.75rem;
  font-size: 15px;
  font-style: normal;
  line-height: 1.7;
  color: var(--muted);
}

.footer__bottom address span {
  display: block;
}

.footer__bottom ul li {
  margin-bottom: 0.5rem;
}

.footer__legal {
  font-size: 15px;
  color: var(--muted);
}

.footer__legal p + p {
  margin-top: 0.5rem;
}

/*
  Oversized cropped wordmark. Sized in vw so the crop proportion holds at
  every width, and set in the display face rather than the logo's own vector
  letterforms: crop the ring monogram top and bottom and it stops reading as
  ECHO. Colour is var(--fg), same token as everything else, so it swaps
  automatically with the theme.
*/
.footer__wordmark-wrap {
  margin-top: 2.5rem;
  height: 9.1vw;
  overflow: hidden;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .footer__wordmark-wrap {
    height: 9.6vw;
    padding-inline: 1.5rem;
  }
}

.footer__wordmark {
  display: block;
  margin-top: -2.6vw;
  font-family: var(--font-display);
  font-size: 14.6vw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.055em;
  white-space: nowrap;
  color: var(--fg);
}

@media (min-width: 640px) {
  .footer__wordmark {
    margin-top: -2.75vw;
    font-size: 15.4vw;
  }
}

/* ============================== Internal theme toggle (dev tool) ============================== */

/*
  Not part of the shipped site chrome. See the REMOVE BEFORE SHIPPING comment
  in index.html and js/main.js for how to take this out once a theme is
  chosen.
*/
.theme-toggle {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2.5rem);
  border-radius: 999px;
  border: 1px dashed rgb(255 176 32 / 0.6);
  background: rgb(20 16 10 / 0.9);
  backdrop-filter: blur(10px);
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  font-size: 12px;
  color: #ffd9a0;
}

.theme-toggle__sep {
  width: 1px;
  height: 16px;
  background: rgb(255 176 32 / 0.35);
}

.theme-toggle button {
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  font-weight: 600;
  background: rgb(255 176 32 / 0.15);
  color: #ffd9a0;
}

.theme-toggle button.is-active {
  background: #ffb020;
  color: #201406;
}