/* ==========================================================================
   Sensoriium VSL landing page
   Fluid values interpolate between a 375px and a 1920px viewport and reach
   the Figma value at 1920.
   ========================================================================== */

@font-face {
  font-family: "Switzer";
  src: url("../assets/fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback so the swap to Switzer causes no layout shift. */
@font-face {
  font-family: "Switzer Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 100.77%;
  ascent-override: 97.25%;
  descent-override: 24.81%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Colour (Figma) */
  --color-brand: #d92a79;
  --color-brand-glow: rgb(217 41 120 / 0.35);
  --color-ink: #0d0a0e;
  --color-black: #000000;
  --color-near-black: #0a0a0c;
  --color-card-dark: #161618;
  --color-white: #ffffff;
  --color-surface-light: #f7f4f7;
  --color-text-muted-dark: #b9afbc;
  --color-eyebrow-dark: #8a8a8e;
  --color-eyebrow-light: #6b6b70;
  --color-text-muted-light: #5c5160;
  --color-tag-text: #e4dfe6;
  --color-poster-label: #dfcddd;
  --color-glow-magenta: #ff00fb;
  --color-glow-violet: #5500ff;

  /* Colour: accessibility adjustments pending design sign-off (PRD §9) */
  --color-brand-strong: #c8226d;   /* small pink text on light surfaces, 4.93:1 on #F7F4F7 */
  --color-input-border: #948a97;   /* Figma #D9D1DB is 1.49:1 on white */
  --color-eyebrow-on-white: var(--color-eyebrow-light); /* Figma #8A8A8E is 3.44:1 on white */
  --color-eyebrow-on-image: var(--color-text-muted-dark); /* Figma #8A8A8E drops to ~3:1 over the hero photo's pink band */

  /* Colour: states not designed in Figma */
  --color-brand-hover: var(--color-brand-strong);
  --color-error: #D92A79;
  --color-error-tint: #FDF2F7;
  --focus-ring-pink: rgba(217, 42, 121, 0.24);

  /* Hairlines */
  --line-white-08: rgb(255 255 255 / 0.08);
  --line-white-10: rgb(255 255 255 / 0.10);
  --line-white-12: rgb(255 255 255 / 0.12);
  --line-white-15: rgb(255 255 255 / 0.15);
  --line-white-24: rgb(255 255 255 / 0.24);
  --line-white-28: rgb(255 255 255 / 0.28);
  --line-ink-10: rgb(13 10 14 / 0.10);
  --line-ink-16: rgb(13 10 14 / 0.16);

  /* Background images (flattened Figma fills); the poster image is still to come */
  --image-hero: url("../assets/images/hero-bg.png");
  --image-poster: none;
  --image-proof: url("../assets/images/clients-bg.png");
  --image-final-cta: url("../assets/images/footer-bg.png");

  /* Typography */
  --font-sans: "Switzer", "Switzer Fallback", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-display: clamp(3.25rem, 2.461rem + 3.366vw, 6.5rem);   /* 104 */
  --fs-h1: clamp(2.75rem, 1.961rem + 3.366vw, 6rem);          /* 96 */
  --fs-h2-large: clamp(2.5rem, 1.772rem + 3.107vw, 5.5rem);   /* 88 */
  --fs-h2: clamp(1.875rem, 1.514rem + 2.071vw, 4rem);         /* 64 */
  --fs-h3: clamp(1.75rem, 1.568rem + 0.777vw, 2.5rem);        /* 40 */
  --fs-card-title: clamp(1.5rem, 1.379rem + 0.518vw, 2rem);   /* 32 */
  --fs-title-sm: clamp(1.375rem, 1.284rem + 0.388vw, 1.75rem);/* 28 */
  --fs-statement: clamp(1.25rem, 1.189rem + 0.259vw, 1.5rem); /* 24 */
  --fs-body: clamp(1.125rem, 1.094rem + 0.129vw, 1.25rem);    /* 20 */
  --fs-button: 1.25rem;                                       /* 20 */
  --fs-small: 1rem;                                           /* 16 */
  --fs-tag: 0.875rem;                                         /* 14 */

  --lh-tight: 1;
  --lh-heading: 1.1;
  --lh-title: 1.25;
  --lh-button: 1.2;
  --lh-body: 1.4;
  --lh-relaxed: 1.5;
  --lh-tag: 1.25rem;

  --tracking-eyebrow-wide: 0.12em;
  --tracking-tag: 0.16em;

  /* Spacing (Figma values) */
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-20: 1.25rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-44: 2.75rem;
  --space-60: 3.75rem;

  /* Spacing (fluid) */
  --space-section: clamp(4rem, 3.15rem + 3.625vw, 7.5rem);    /* 120 */
  --space-xl: clamp(3rem, 2.272rem + 3.107vw, 6rem);          /* 96 */
  --space-lg: clamp(2.5rem, 2.136rem + 1.553vw, 4rem);        /* 64 */
  --space-intro: clamp(2rem, 1.575rem + 1.812vw, 3.75rem);    /* 60 */
  --space-hero-top: clamp(8.5rem, 7.225rem + 5.437vw, 13.75rem); /* 220 */
  --grid-gap: clamp(1.5rem, 1.318rem + 0.777vw, 2.25rem);     /* 36 */

  /* Layout */
  --content-max: 96rem;                                       /* 1536 */
  --page-gutter: clamp(1.25rem, 5vw, 6rem);
  --col-4: 30.5rem;                                           /* 488 */
  --col-6: 46.875rem;                                         /* 750 */
  --col-form: 55.0625rem;                                     /* 881 */
  --measure-story: 38.6875rem;                                /* 619 */

  /* Radii */
  --radius-input: 0.5rem;
  --radius-panel: 1rem;
  --radius-card: 1.5rem;
  --radius-pill: 1000px;

  /* Effects */
  --shadow-card: 0 1.5rem 4rem rgb(0 0 0 / 0.4);
  --shadow-play: 0 0 0 1rem var(--color-brand-glow);

  /* Focus: white + ink double ring, visible on light and dark surfaces */
  --focus-outline: 2px solid var(--color-ink);
  --focus-halo: 0 0 0 2px var(--color-white);

  /* Motion */
  --duration-fast: 150ms;
  --duration-base: 225ms;
  --duration-hover: 200ms;
  --duration-accordion: 250ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Scroll reveal */
  --reveal-distance: 24px;
  --reveal-duration: 600ms;
  --reveal-duration-fade: 800ms;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-stagger: 80ms;
}

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-black);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

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

h1, h2, h3 {
  overflow-wrap: break-word;
}

ul[role="list"] {
  list-style: none;
  padding: 0;
}

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

img {
  height: auto;
}

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

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
  box-shadow: var(--focus-halo);
}

[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: var(--space-16);
  left: var(--space-16);
  z-index: 100;
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-input);
  background: var(--color-white);
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Reveal on scroll ----------
   Hidden only once JS has added .js, so content stays visible if the script never runs.
   The hero uses a CSS animation instead, so it plays on first paint without waiting for JS. */
[data-reveal-step="1"] { --i: 1; }
[data-reveal-step="2"] { --i: 2; }
[data-reveal-step="3"] { --i: 3; }
[data-reveal-step="4"] { --i: 4; }

.js [data-reveal]:not([data-reveal="load"]) {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: calc(var(--i, 0) * var(--reveal-stagger));
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal="fade"] {
  --reveal-distance: 0px;
  --reveal-duration: var(--reveal-duration-fade);
}

[data-reveal="load"] {
  animation: reveal-rise var(--reveal-duration) var(--reveal-ease) both;
  animation-delay: calc(var(--i, 0) * var(--reveal-stagger));
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
  }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not([data-reveal="load"]) {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-reveal="load"] {
    animation: none;
  }
}

/* ---------- Layout ---------- */
.container {
  width: min(100% - 2 * var(--page-gutter), var(--content-max));
  margin-inline: auto;
}

/* Two equal columns (750 / 750 at 1920) */
.split-row {
  display: grid;
  gap: var(--space-32) var(--grid-gap);
}

@media (min-width: 64em) {
  .split-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-row--end {
    align-items: end;
  }
}

/* ---------- Themes ---------- */
.theme-dark {
  --text: var(--color-white);
  --text-muted: var(--color-text-muted-dark);
  --eyebrow: var(--color-eyebrow-dark);
  color: var(--text);
}

.theme-light {
  --text: var(--color-ink);
  --text-muted: var(--color-text-muted-light);
  --eyebrow: var(--color-eyebrow-light);
  color: var(--text);
}

.theme-white {
  --text: var(--color-ink);
  --text-muted: var(--color-text-muted-light);
  --eyebrow: var(--color-eyebrow-on-white);
  color: var(--text);
}

/* ---------- Typography ---------- */
.eyebrow {
  color: var(--eyebrow);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
}

.eyebrow--tracked {
  letter-spacing: var(--tracking-eyebrow-wide);
}

.accent {
  color: var(--color-brand);
}

.heading-display,
.hero__title,
.heading-2-large,
.heading-2 {
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.heading-display { font-size: var(--fs-display); }
.hero__title { font-size: var(--fs-h1); }
.heading-2-large { font-size: var(--fs-h2-large); }
.heading-2 { font-size: var(--fs-h2); }

.heading-3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

.body-text,
.lead {
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.small-text {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

.statement {
  color: var(--color-brand);
  font-size: var(--fs-statement);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

@media (max-width: 47.99em) {
  .br-wide {
    display: none;
  }
}

/* ---------- Button/Primary ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  min-height: 3.5rem;
  padding: var(--space-16) var(--space-24);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-white);
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  line-height: var(--lh-button);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-hover) var(--ease-out),
    transform var(--duration-hover) var(--ease-out);
}

.button__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform var(--duration-hover) var(--ease-out);
}

.button:hover {
  background: var(--color-brand-hover);
  transform: translateY(-2px);
}

.button:hover .button__icon {
  transform: translateX(4px);
}

.button:active {
  transform: translateY(0);
}

.button[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.button[aria-disabled="true"] .button__icon {
  transform: none;
}

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  color: var(--color-white);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 4.5rem;
  padding-block: var(--space-12);
}

.site-header__logo {
  flex: none;
  border-radius: 4px;
}

.site-header__logo img {
  width: clamp(6rem, 4.6rem + 6vw, 11.625rem);
}

@media (max-width: 47.99em) {
  .button--header {
    gap: var(--space-8);
    min-height: 2.75rem;
    padding: var(--space-8) var(--space-16);
    font-size: 0.9375rem;
    white-space: normal;
    text-wrap: balance;
  }

  .button--header .button__icon {
    width: 1.125rem;
    height: 1.125rem;
  }
}

@media (max-width: 29.99em) {
  .button--header .button__icon {
    display: none;
  }
}

@media (min-width: 64em) {
  .site-header__inner {
    min-height: 6.5rem;
    padding-block: var(--space-24);
  }
}

/* ---------- Hero ---------- */
/* hero-bg.png is the flattened Figma page fill (photo + glow); no CSS glow on top. */
.hero {
  --eyebrow: var(--color-eyebrow-on-image);
  position: relative;
  overflow: hidden;
  padding-block: var(--space-hero-top) var(--space-section);
  background-color: var(--color-black);
  background-image: var(--image-hero);
  background-size: cover;
  background-position: 30% top;
  background-repeat: no-repeat;
}

@media (min-width: 48em) {
  .hero {
    background-position: center top;
  }
}

.hero__row {
  display: grid;
  gap: var(--space-40) var(--grid-gap);
}

.hero__headline,
.hero__lead {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero__headline {
  gap: var(--space-24);
  max-width: 63.25rem; /* 1012, Figma Hero Headline */
}

.hero__lead {
  gap: var(--space-32);
}

.client-line {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-24);
}

.client-line__label {
  color: var(--text-muted);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

.client-line__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-24) var(--space-40);
}

@media (min-width: 64em) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  .hero__row {
    flex: 1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .hero__headline { grid-column: span 7; }
  .hero__lead { grid-column: span 5; }
}

@media (min-width: 80em) {
  .hero__headline { grid-column: span 8; }
  .hero__lead { grid-column: span 4; }
}

/* ---------- VSL ---------- */
.vsl {
  padding-block: var(--space-section);
  border-top: 1px solid var(--line-white-12);
  background: var(--color-white);
}

.vsl__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.vsl .section-heading {
  gap: var(--space-16);
}

.vsl__player {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line-white-24);
  border-radius: var(--radius-panel);
  background: var(--color-black);
}

.vsl__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-black);
}

/* Poster proportions are percentages of the 1536px Figma poster (cqi = 1% of player width). */
.vsl__poster {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 2.34cqi;
  padding: 6.25cqi 17.71cqi 6.25cqi 6.25cqi;
  color: var(--color-white);
  background-color: var(--color-black);
  background-image:
    radial-gradient(60% 80% at 82% 55%, rgb(217 42 121 / 0.35), rgb(217 42 121 / 0) 70%),
    radial-gradient(70% 90% at 100% 100%, rgb(255 0 251 / 0.28), rgb(85 0 255 / 0.12) 50%, rgb(85 0 255 / 0) 80%),
    var(--image-poster);
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.vsl__poster-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  height: 100%;
}

.vsl__poster-logo {
  width: max(5rem, 9.7cqi);
}

.vsl__poster-headline {
  max-width: 48.83cqi;
  font-size: 4.167cqi;
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
}

.vsl__poster-label {
  color: var(--color-poster-label);
  font-size: max(0.75rem, 1.042cqi);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}

.vsl__play {
  display: grid;
  place-items: center;
  container-type: inline-size;
  width: clamp(4.5rem, 10.417cqi, 10rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-brand);
  box-shadow: 0 0 0 clamp(0.5rem, 1.042cqi, 1rem) var(--color-brand-glow);
  cursor: pointer;
  transition: transform var(--duration-hover) var(--ease-out);
}

.vsl__play:focus-visible {
  box-shadow: var(--focus-halo), 0 0 0 clamp(0.5rem, 1.042cqi, 1rem) var(--color-brand-glow);
}

.vsl__poster:hover .vsl__play {
  transform: scale(1.04);
}

/* 40×44 icon in the 160px circle, nudged 8px right. Both scale with the button (cqi = 1% of the button). */
.vsl__play-icon {
  width: 25cqi;
  aspect-ratio: 40 / 44;
  height: auto;
  transform: translateX(5cqi);
}

.vsl__message {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-16) var(--space-24);
  background: rgb(0 0 0 / 0.8);
  color: var(--color-white);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

@container (max-width: 40rem) {
  .vsl__poster {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: var(--space-16);
  }

  .vsl__poster-copy {
    display: none;
  }
}

.vsl__transcript {
  align-self: flex-start;
  color: var(--text-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

.vsl__transcript summary {
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.vsl__transcript-body {
  max-width: var(--col-form);
  padding-top: var(--space-12);
}

/* ---------- Conversation form ---------- */
.enquiry {
  padding-block: var(--space-section);
  background: var(--color-surface-light);
}

.enquiry__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  border-radius: var(--radius-panel);
}

.enquiry__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-intro);
}

.enquiry__lead {
  color: var(--color-ink);
}

@media (min-width: 64em) {
  .enquiry__panel {
    grid-template-columns: minmax(18rem, var(--col-4)) minmax(0, var(--col-form));
    justify-content: space-between;
    column-gap: var(--space-xl);
  }

  .enquiry__note {
    margin-top: auto;
  }
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.form__grid {
  display: grid;
  gap: var(--space-24);
}

@media (min-width: 48em) {
  .form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.field__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  color: var(--color-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}

.field__optional {
  color: var(--color-text-muted-light);
  font-weight: var(--fw-regular);
}

.field__control {
  width: 100%;
  min-height: 4rem;
  padding: 1.0625rem var(--space-20);
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-input);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.field__control::placeholder {
  color: var(--color-eyebrow-light);
  opacity: 1;
}

.field__control:hover {
  border-color: var(--color-ink);
}

.field__control--textarea {
  min-height: 12.5rem;
  resize: vertical;
}

@media (min-width: 64em) {
  .field__control--textarea {
    min-height: 25rem;
  }
}

.field,
.form__summary,
.form__failed {
  scroll-margin-top: 7.5rem;
}

.field__control:focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-ink), 0 0 0 4px var(--focus-ring-pink);
}

.field__control[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: inset 0 0 0 1px var(--color-error);
  background-color: var(--color-error-tint);
}

.field__control[aria-invalid="true"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-error), 0 0 0 4px var(--focus-ring-pink);
}

.field__error:not([hidden]) {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.field__error-icon {
  flex: none;
  width: 24px;
  height: 24px;
}

.form__summary,
.form__failed {
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--color-error);
  border-left-width: 1px;
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
}

.form__summary-title {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.form__summary-title img {
  flex: none;
  width: 24px;
  height: 24px;
}

.form__summary-list {
  list-style: none;
  margin: 0;
  padding-left: 32px;
  display: grid;
  gap: 4px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.form__summary-list a {
  color: var(--color-ink);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form__failed-body {
  padding-left: 32px;
  display: grid;
  gap: 4px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.form__failed-body p {
  margin: 0;
}

.form__failed-body a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .field__error:not([hidden]),
  .form__summary:not([hidden]),
  .form__failed:not([hidden]) {
    animation: form-message-in 160ms var(--reveal-ease);
  }
}

@keyframes form-message-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16) var(--space-32);
  padding-top: var(--space-8);
}

.form__privacy {
  color: var(--color-text-muted-light);
}

.form__status {
  color: var(--color-text-muted-light);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

.form__status:empty {
  display: none;
}

.form__status--error {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

@media (max-width: 47.99em) {
  .form__actions .button {
    width: 100%;
  }
}

.form-success {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-40);
  border-radius: var(--radius-panel);
  background: var(--color-white);
}

.form-success__title {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}

.form-success .body-text {
  color: var(--color-text-muted-light);
}

/* ---------- Client proof intro ---------- */
/* clients-bg.png is the flattened Figma fill stack (photo + glow); no CSS glow on top. */
.proof-intro {
  --eyebrow: var(--color-eyebrow-on-image);
  padding-block: var(--space-section);
  border-block: 1px solid var(--line-white-10);
  background-color: var(--color-near-black);
  background-image: var(--image-proof);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.proof-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

.proof-intro__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
}

.proof-intro__heading .heading-2-large {
  max-width: 62.5rem;
}

.proof-intro__text {
  max-width: 42.5rem;
}

@media (min-width: 64em) {
  .proof-intro {
    display: flex;
    align-items: center;
    min-height: 60rem;
  }

  .proof-intro__inner {
    width: min(100% - 2 * var(--page-gutter), var(--content-max));
  }
}

.proof-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-32) var(--space-xl);
}

.proof-logos__item {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.proof-logos__item--nodestream img { width: clamp(12.5rem, 10rem + 10vw, 20rem); }
.proof-logos__item--zer img { width: clamp(5.5rem, 4.5rem + 4vw, 9.125rem); }
.proof-logos__item--archisolar img { width: clamp(8.75rem, 7.5rem + 5vw, 13.125rem); }

@media (min-width: 64em) {
  .proof-logos {
    flex-wrap: nowrap;
  }

  .proof-logos__item + .proof-logos__item::before {
    content: "";
    flex: none;
    width: 1px;
    height: 4rem;
    background: var(--line-white-15);
  }
}

/* ---------- Client stories ---------- */
.story {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-section);
  border-top: 1px solid var(--line-white-12);
  background: var(--color-black);
}

.story:first-of-type {
  border-top: 0;
}

.story__row {
  display: grid;
  gap: var(--space-32) var(--grid-gap);
}

@media (min-width: 64em) {
  .story__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }

  .story--top .story__row {
    align-items: start;
  }
}

.story__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.story__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  max-width: var(--measure-story);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding-top: var(--space-24);
}

.tag {
  padding: var(--space-8) var(--space-16);
  border: 1px solid var(--line-white-28);
  border-radius: var(--radius-pill);
  color: var(--color-tag-text);
  font-size: var(--fs-tag);
  line-height: var(--lh-tag);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
}

.story__band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line-white-12);
  background:
    radial-gradient(45% 35% at 25% 35%, rgb(217 42 121 / 0.35), rgb(217 42 121 / 0) 100%),
    radial-gradient(55% 45% at 75% 70%, rgb(255 0 251 / 0.3), rgb(85 0 255 / 0.14) 55%, rgb(85 0 255 / 0) 100%),
    var(--color-black);
}

/* The mockup sits 100px in from the band's left and top edges at 1920 and runs off the right and bottom. */
.story__band {
  padding: 5.2083% 0 0 5.2083%;
}

.story__mockup {
  width: 100%;
}

/* Logo widths are fractions of the 1920px band; offsets are 60px at 1920. */
.story__logo {
  width: 10rem;
  margin: var(--space-24) var(--page-gutter) var(--space-40) auto;
}

@media (min-width: 48em) {
  .story__logo {
    position: absolute;
    right: 3.125%;
    bottom: 3.125vw;
    margin: 0;
  }

  .story__logo--nodestream { width: 20.833%; }
  .story__logo--zer { width: 12.656%; }
  .story__logo--archisolar { width: 16.406%; }
  .story__logo--standard { width: 16.4%; }
}

/* ---------- How we help ---------- */
.services {
  padding-block: var(--space-section);
  background: var(--color-surface-light);
}

.services__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-section);
}

.services__list {
  display: grid;
  gap: var(--space-lg) var(--grid-gap);
}

@media (min-width: 48em) {
  .services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .services__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding-top: var(--space-32);
}

.service-card__icon {
  width: 4.5rem;
  height: 4.5rem;
}

.service-card__title {
  max-width: 23.75rem;
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}

ul.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: var(--space-24) 0 0;
  border-top: 1px solid var(--line-ink-10);
}

.check-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  color: var(--color-brand-strong);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

.check-list__icon {
  flex: none;
  width: 1rem;
  height: 1rem;
}

/* ---------- Why Sensoriium ---------- */
.why {
  padding-block: var(--space-section);
  background: var(--color-black);
}

.why__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.why__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

@media (min-width: 64em) {
  .why__body {
    padding-top: var(--space-44);
  }
}

.commitments {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 48em) {
  .commitments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.commitment-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: clamp(1.5rem, 1.257rem + 1.036vw, 2.5rem);
  border: 1px solid var(--line-white-08);
  border-radius: var(--radius-card);
  background: var(--color-card-dark);
  box-shadow: var(--shadow-card);
}

.commitment-card__title {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}

/* ---------- FAQ ---------- */
.faq {
  padding-block: var(--space-section);
  background: var(--color-surface-light);
}

.faq__row {
  display: grid;
  gap: var(--space-40) var(--grid-gap);
}

@media (min-width: 64em) {
  .faq__row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }

  .faq__heading { grid-column: span 4; }
  .faq__list { grid-column: span 8; }
}

.faq-item {
  border-top: 1px solid var(--line-ink-16);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--line-ink-16);
}

.faq-item__heading {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
}

.faq-item__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-32);
  width: 100%;
  padding: var(--space-32) 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding var(--duration-accordion) ease-out;
}

.faq-item__question[aria-expanded="true"] {
  padding-bottom: var(--space-16);
}

.faq-item__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: calc((1lh - 1.5rem) / 2);
  color: var(--color-brand);
}

.faq-item__question[aria-expanded="true"] .faq-item__icon--plus,
.faq-item__question[aria-expanded="false"] .faq-item__icon--minus {
  display: none;
}

.faq-item__answer {
  overflow: hidden;
  padding-bottom: var(--space-32);
}

.faq-item__answer .body-text {
  max-width: var(--col-form);
}

/* ---------- Final CTA ---------- */
.final-cta {
  display: flex;
  align-items: center;
  min-height: clamp(35rem, 56.25vw, 67.5rem);
  padding-block: var(--space-section);
  background-color: var(--color-black);
  background-image: var(--image-final-cta);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.final-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
}

/* ---------- Footer ---------- */
/* Figma's 1px top stroke sits inside the 40px padding, so the bar stays 112px tall. */
.site-footer {
  padding-block: calc(var(--space-40) - 1px) var(--space-40);
  border-top: 1px solid var(--line-white-12);
  background: var(--color-black);
}

.site-footer__inner,
.site-footer__brand,
.site-footer__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__inner {
  gap: var(--space-24);
}

.site-footer__brand {
  gap: var(--space-16);
}

.site-footer__text {
  gap: 0.25rem;
}

.site-footer__logo {
  flex: none;
  width: 9.3125rem;
  height: 2rem;
}

.site-footer__text,
.site-footer__copyright {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}

.site-footer__title {
  color: var(--color-white);
  font-weight: var(--fw-bold);
}

.site-footer__tagline,
.site-footer__copyright {
  color: var(--color-text-muted-dark);
}

@media (min-width: 64em) {
  .site-footer__inner,
  .site-footer__brand,
  .site-footer__text {
    flex-direction: row;
    align-items: center;
  }

  .site-footer__inner {
    justify-content: space-between;
  }

  .site-footer__brand {
    gap: var(--space-32);
  }

  .site-footer__text {
    gap: var(--space-20);
  }

  .site-footer__text,
  .site-footer__copyright {
    white-space: nowrap;
  }
}

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

.proof-logos__item--standard img { width: clamp(8rem, 6rem + 6vw, 14rem); }