/* =========================================================================
   TLA — sections.css (PART 2 of 2)
   Section layout + hero, services, work grid, approach, contact, reveals/motion.
   Loads after style.css.
   ========================================================================= */

/* =========================================================================
   DOCUMENT-SCROLL LAYOUT — sections stack in natural flow; Lenis (main.js)
   drives smooth/inertia scrolling on the document. #snap stays in the markup
   as a passive wrapper that no longer scrolls on its own.
   ========================================================================= */
.section {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  isolation: isolate; /* own stacking context so the starfield (z-index:-1) sits above the bg, below content */
  padding: clamp(4rem, 8vh, 6rem) var(--gutter) clamp(1.4rem, 3.5vh, 2.4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* =========================================================================
   STARFIELD — reusable twinkling backdrop injected into every section except
   the hero (see initStarfield() in main.js). Sits above the section gradient,
   below all content. Each dot fades on its OWN randomized loop (per-element
   --dur/--delay), so it reads as organic twinkling, not a synced blink —
   like a car's starlight headliner. Opacity-only → compositor-driven; the
   whole field pauses while its section is offscreen.
   ========================================================================= */
.starfield {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.starfield__dot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 var(--glow, 0px) var(--tone);
  opacity: 0;
  animation: twinkle var(--dur) var(--delay) ease-in-out infinite;
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: var(--peak, 0.9);
    transform: scale(1);
  }
}
.starfield.is-paused .starfield__dot {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .starfield__dot {
    animation: none;
    opacity: calc(var(--peak, 0.9) * 0.55);
  }
}

.section[data-theme="paper"] {
  background: var(--off);
  color: var(--black);
}
.section[data-theme="ink"] {
  background: var(--black);
  color: var(--off);
}
/* the loud one — deep-blue gradient panel, like Buttermax's yellow block */
.section[data-theme="brand"] {
  background: var(--grad-panel);
  color: var(--off);
}
.section[data-theme="oxblood"] {
  background: var(--grad-panel);
  color: var(--off);
}

/* =========================================================================
   SHARED TYPE
   ========================================================================= */
.eyebrow {
  font-family: var(--grotesk);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
}
.eyebrow--light {
  color: var(--paper);
  opacity: 0.75;
}

.section__head {
  margin-bottom: clamp(0.9rem, 2.4vh, 1.6rem);
}
.section__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-top: 0.6rem;
}

/* =========================================================================
   HERO — full-bleed, edge-to-edge. Wordmark is the loudest thing on the page.
   ========================================================================= */
.hero {
  justify-content: center;
  align-items: flex-start; /* copy sits on the left; nebula owns the rest */
  text-align: left;
  padding-left: clamp(1rem, 3vw, 3rem);
  padding-right: clamp(1rem, 3vw, 3rem);
  background: var(--grad-dark); /* base gradient, shows through only where the nebula is absent */
}
/* particle-nebula Spline scene, full-viewport hero background */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--black);
}
.hero__bg iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  /* The scene is a sparse, dim particle field — lift and saturate it so the
     nebula actually reads, and scale into the denser central band (nudged
     right, away from the left-aligned wordmark). */
  filter: brightness(1.7) saturate(1.5) contrast(1.08);
  transform: scale(1.3);
  transform-origin: 62% 50%;
}
/* additive deep-blue gradient sitting behind the nebula particles */
.hero__grad {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--grad-dark);
}
.hero__grad::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 180px;
  opacity: 0.06;
  mix-blend-mode: soft-light;
  box-shadow: inset 0 0 220px 60px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
/* dark scrim, anchored left: keeps the left-aligned wordmark legible while
   the right side stays clear so the nebula reads as the dominant visual. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.5) 40%,
    rgba(0, 0, 0, 0) 68%
  );
}
.hero__wordmark {
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: 0.84;
  letter-spacing: -0.04em;
  /* Scaled well down from the old full-bleed size so the nebula is the
     dominant visual — the two lines occupy roughly the left ~half. */
  font-size: clamp(2.2rem, 7vw, 6rem);
  text-transform: none;
  pointer-events: none;
}
.wm-line {
  display: block;
  white-space: nowrap;
}
/* treatment 1: bold grotesk */
.wm-grotesk,
.wm-amp {
  font-family: var(--grotesk);
  font-weight: 700;
  color: var(--off);
}
.wm-amp {
  color: var(--off);
}
/* treatment 2: connected script (Fraunces italic). On the dark nebula the
   accent is bright blue (was near-black) so it stays loud and legible. */
.wm-script {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  color: var(--blue-bright);
  letter-spacing: -0.02em;
}
.hero__caption {
  position: relative;
  z-index: 2;
  margin-top: clamp(1rem, 2.5vh, 2rem);
  font-family: var(--grotesk);
  font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--off);
}
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 3.5vh, 2.4rem);
  transform: translateX(-50%);
  z-index: 2;
  font-family: var(--grotesk);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--off);
  opacity: 0.8;
}
/* =========================================================================
   SERVICES — planets composition. Full-bleed looping video behind a dark
   scrim; MAP / italic headline / BUILD overlaid as real text. The video and
   scrim are absolutely positioned layers; the composition sits above them.
   ========================================================================= */
.services--planets {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: clamp(4rem, 8vh, 6rem);
  padding-bottom: clamp(4rem, 8vh, 6rem);
}
.services__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  background: var(--black);
}
.services__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* gentle vertical scrim + a touch more at the very top/bottom for legibility */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.28) 30%,
    rgba(0, 0, 0, 0.32) 70%,
    rgba(0, 0, 0, 0.55) 100%
  );
}
/* MAP | headline | BUILD spread across the full width */
.services__composition {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1rem, 4vw, 3.5rem);
}
.services__word {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.8rem, 9vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--off);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}
.services__word--map {
  justify-self: start;
  text-align: left;
}
.services__word--build {
  justify-self: end;
  text-align: right;
}
.services__lede {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.3rem, 2.8vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--off);
  max-width: 16ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}
.services__lede em {
  font-style: italic;
  color: var(--blue-bright);
}
.services__eyebrow {
  display: block;
  font-family: var(--grotesk);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--off);
  opacity: 0.72;
  margin-bottom: 0.9rem;
}
/* stack on narrow screens: MAP over headline over BUILD */
@media (max-width: 720px) {
  .services__composition {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(1.2rem, 5vh, 2.4rem);
  }
  .services__word--map,
  .services__word--build {
    justify-self: center;
    text-align: center;
  }
  .services__lede {
    order: 2;
    max-width: 24ch;
  }
}

/* =========================================================================
   WORK — project showcase. A vertical stack of alternating preview / copy
   rows (the "Previous projects" pattern). Dark (ink) section; each preview is
   a light browser-chrome frame that tilts toward the cursor and is built to
   swap for a real screenshot / looping video of the deployed Vercel site.
   ========================================================================= */
.work {
  justify-content: center;
}
.work__list {
  list-style: none;
  display: grid;
  gap: clamp(2.4rem, 6vw, 5.5rem);
  margin-top: clamp(1.4rem, 3.5vh, 2.6rem);
}

/* two-column row: media on one side, copy on the other */
.project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1.4rem, 5vw, 4rem);
}
/* alternate the media side row to row for visual rhythm */
.project:nth-child(even) .project__media {
  order: 2;
}

/* ---- media: the live-preview browser frame ---- */
.project__frame {
  background: var(--off);
  border: 1px solid var(--edge-light);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, 0.75);
}
/* browser chrome bar: 3 dots + faux URL pill */
.project__bar {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.55rem 0.8rem;
  background: #e6e2d9;
  border-bottom: 1px solid rgba(13, 28, 84, 0.12);
}
.project__dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(13, 28, 84, 0.22);
}
.project__url {
  flex: 1;
  margin-left: 0.5rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--off);
  font-family: var(--grotesk);
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  color: rgba(13, 28, 84, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* live-preview media area — holds a scaled iframe of the real site that is
   panned top→bottom→top on a loop by initWork(). 16:10 window, clipped. */
.project__frame {
  display: block;
  text-decoration: none;
}
.project__viewport {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--off);
}
/* the scaled layer: JS sets width = natural 1280 and scale = frame/1280,
   so the full-width site fills the window horizontally. */
.project__scaler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 1280px;
  transform-origin: top left;
  will-change: transform;
}
.project__viewport iframe {
  display: block;
  width: 1280px;
  border: 0;
  pointer-events: none; /* page keeps scrolling; custom cursor still reads hovers */
  background: var(--off);
  /* travel + duration set per-frame by JS; alternate = down then back up */
  animation: project-pan var(--pan-dur, 26s) ease-in-out infinite alternate;
}
@keyframes project-pan {
  0%,
  6% {
    transform: translateY(0);
  }
  94%,
  100% {
    transform: translateY(calc(-1 * var(--pan-travel, 0px)));
  }
}
/* pause the pan while the row is out of view (set by IntersectionObserver) */
.project__viewport.is-paused iframe {
  animation-play-state: paused;
}
/* soft shimmer until the iframe has loaded */
.project__loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
      100deg,
      rgba(34, 70, 214, 0.04) 30%,
      rgba(34, 70, 214, 0.11) 50%,
      rgba(34, 70, 214, 0.04) 70%
    )
    var(--off);
  background-size: 200% 100%;
  animation: project-shimmer 1.4s linear infinite;
}
.project__viewport.is-loaded .project__loading {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease);
}
@keyframes project-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project__viewport iframe {
    animation: none;
  }
}

/* ---- copy column ---- */
.project__body {
  max-width: 42ch;
}
.project__cat {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-bright);
}
.project__cat span {
  margin: 0 0.4em;
}
.project__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.8rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 0.7rem;
}
.project__desc {
  font-family: var(--grotesk);
  font-size: clamp(0.9rem, 1.2vw, 1.02rem);
  line-height: 1.55;
  opacity: 0.8;
}
.project__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.project__tags li {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--edge-light);
  border-radius: 999px;
  color: var(--off);
  opacity: 0.85;
}

/* stack the two columns on narrow screens (media always on top) */
@media (max-width: 820px) {
  .project {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 4vw, 1.8rem);
  }
  .project:nth-child(even) .project__media {
    order: 0;
  }
}

/* =========================================================================
   SERVICES / PRICING (#approach) — offerings as separate cards + a wide
   Custom Packages card. Sits on the deep-blue --grad-panel gradient.
   ========================================================================= */
.approach .section__title {
  max-width: 18ch;
}
.offer {
  margin-top: clamp(1rem, 3vh, 2rem);
}
.offer__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--edge-light);
  border: 1px solid var(--edge-light);
}
.offer__card {
  background: rgba(6, 7, 13, 0.72);
  padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.1rem, 2vw, 1.7rem);
  min-height: clamp(8.5rem, 22vh, 13rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: background 0.4s var(--ease);
}
.offer__card:hover {
  background: rgba(13, 28, 84, 0.6);
}
.offer__no {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--blue-bright);
}
.offer__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: auto;
}
.offer__desc {
  font-family: var(--grotesk);
  font-size: 0.9rem;
  line-height: 1.5;
  opacity: 0.82;
  max-width: 34ch;
}
.offer__tags {
  font-family: var(--grotesk);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-bright);
  opacity: 0.85;
  margin-top: 0.3rem;
}
/* wide Custom Packages card — visually distinct from the three service tiles */
.offer__pkg {
  background: rgba(13, 28, 84, 0.55);
  border: 1px solid var(--edge-light);
  border-top: none;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem 2rem;
  transition: background 0.4s var(--ease);
}
.offer__pkg:hover {
  background: rgba(34, 70, 214, 0.3);
}
.offer__pkg-label {
  grid-column: 1;
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-bright);
}
.offer__pkg-title {
  grid-column: 1;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.offer__pkg-desc {
  grid-column: 1;
  font-family: var(--grotesk);
  font-size: 0.92rem;
  line-height: 1.55;
  opacity: 0.85;
  max-width: 64ch;
}
.offer__pkg-desc em {
  color: var(--blue-bright);
  font-style: italic;
}
.offer__cta {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  font-family: var(--grotesk);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.8em 1.5em;
  border: 1px solid var(--blue-bright);
  border-radius: 999px;
  color: var(--off);
  white-space: nowrap;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.offer__cta:hover {
  background: var(--blue-bright);
  color: var(--black);
}
@media (max-width: 820px) {
  .offer__grid {
    grid-template-columns: 1fr;
  }
  .offer__pkg {
    grid-template-columns: 1fr;
  }
  .offer__cta {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 0.7rem;
  }
}

/* =========================================================================
   CONTACT / FOOTER
   ========================================================================= */
.contact {
  justify-content: space-between;
}
.contact__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  margin: 1rem 0 1.6rem;
}
.contact__title em {
  color: var(--oxblood-2);
}
.contact__mail {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 4.5vw, 3rem);
  letter-spacing: -0.02em;
  width: fit-content;
  border-bottom: 2px solid transparent;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.contact__mail:hover {
  color: var(--oxblood-2);
  border-color: var(--oxblood-2);
}
.contact__row {
  display: flex;
  gap: 2rem;
  margin-top: 1.6rem;
  font-family: var(--grotesk);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}
.contact__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem 1.5rem;
  border-top: 1px solid var(--edge-light);
  padding-top: 1.4rem;
  font-family: var(--grotesk);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.75;
}
.contact__social {
  display: flex;
  gap: 1.2rem;
}
.contact__social a {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.contact__social a:hover {
  border-color: var(--paper);
}

/* when the form is present the headline shrinks so both fit above the fold */
.contact__title--form {
  font-size: clamp(2.4rem, 7vw, 5rem);
  margin: 0.6rem 0 1.6rem;
}

/* =========================================================================
   CONTACT FORM — dark, editorial, matches the site type system (grotesk
   labels, off-white text, subtle edges, blue-bright focus). Submits to
   /api/contact and reports status in .cform__status.
   ========================================================================= */
.cform {
  width: min(600px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.cform__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.cform__field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cform__label {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.cform__input {
  width: 100%;
  font-family: var(--grotesk);
  font-size: 0.95rem;
  color: var(--off);
  background: rgba(242, 239, 232, 0.04);
  border: 1px solid var(--edge-light);
  border-radius: 8px;
  padding: 0.72rem 0.9rem;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.cform__input::placeholder {
  color: rgba(242, 239, 232, 0.34);
}
.cform__input:focus {
  outline: none;
  border-color: var(--blue-bright);
  background: rgba(111, 141, 255, 0.08);
}
/* custom chevron on the select (no native default look) */
.cform__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f2efe8' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.cform__select option {
  color: #111;
}
.cform__textarea {
  resize: vertical;
  min-height: 118px;
  line-height: 1.5;
}
.cform__actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.cform__submit {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--black);
  background: var(--off);
  border: 1px solid var(--off);
  border-radius: 999px;
  padding: 0.72rem 1.6rem;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), opacity 0.3s;
}
.cform__submit:hover {
  background: var(--blue-bright);
  border-color: var(--blue-bright);
  color: var(--off);
}
.cform__submit:disabled {
  opacity: 0.5;
  cursor: default;
}
.cform__status {
  font-family: var(--grotesk);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  margin: 0;
}
.cform__status.is-pending {
  color: var(--off);
  opacity: 0.7;
}
.cform__status.is-ok {
  color: #7ce0a3;
}
.cform__status.is-err {
  color: #ff8f8f;
}
.contact__or {
  font-family: var(--grotesk);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.5rem;
}
@media (max-width: 560px) {
  .cform__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   SPLINE EMBEDS — full-bleed nebula section + decorative corner scenes.
   ========================================================================= */
.spline-full {
  padding: 0;
}
.spline-full .spline-embed {
  position: absolute;
  inset: 0;
}
.spline-full iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.spline-full__caption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  z-index: 2;
  font-family: var(--grotesk);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--off);
  pointer-events: none;
}
/* decorative corner scenes — sit behind the section text (z-index:-1),
   pointer-events:none so they never capture scroll (protects snap). */
.spline-corner {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.spline-corner iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}
.spline-corner--approach {
  top: 50%;
  right: clamp(-1rem, 0vw, 1rem);
  width: min(40vw, 460px);
  height: 78%;
  transform: translateY(-50%);
}
.spline-corner--contact {
  right: 0;
  bottom: 0;
  width: min(38vw, 440px);
  height: 72%;
}
@media (max-width: 720px) {
  .spline-corner {
    opacity: 0.5;
    width: 70vw;
  }
}
/* keep section text above the decorative corner scenes */
.approach > .section__head,
.approach > .offer,
.contact > .contact__inner,
.contact > .contact__foot {
  position: relative;
  z-index: 1;
}
/* scrim behind the contact copy so it stays legible over the robot scene */
.contact__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.45) 42%,
    rgba(0, 0, 0, 0) 68%
  );
}