/* ============================================================
   Molten Studios — dark iridescent design system
   ------------------------------------------------------------
   Rules this system holds to:
     - No white surfaces anywhere. The page sits on near-black and
       the iridescent colourway runs through every section.
     - White is used for TEXT only, never as a background.
     - Radius is 0px everywhere, or a full 75px pill on buttons.
       Never anything in between.
     - No box-shadows. Separation comes from hairline borders,
       surface lift, and coloured glow.
     - All motion runs on one patient easing curve.
   ============================================================ */

:root {
  /* ---- Surfaces: near-black, lifted in small steps ---------------- */
  --ink-950: #050506; /* page base */
  --ink-900: #0a0b0c; /* default section */
  --ink-850: #0f1012; /* raised section */
  --ink-800: #141518; /* card surface */
  --ink-700: #1c1e22; /* hover surface */

  /* ---- Text ------------------------------------------------------- */
  --text: rgba(255, 255, 255, 0.93);
  --text-soft: rgba(255, 255, 255, 0.68);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-faint: rgba(255, 255, 255, 0.34);

  --hairline: rgba(255, 255, 255, 0.11);
  --hairline-strong: rgba(255, 255, 255, 0.2);

  /* ---- The iridescent colourway ----------------------------------
     Same three stops in the same order everywhere, so every
     appearance reads as one continuous material.
     ---------------------------------------------------------------- */
  --iris-green: rgb(160, 224, 171);
  --iris-amber: rgb(255, 172, 46);
  --iris-oxblood: rgb(165, 45, 37);

  --iris: linear-gradient(
    90deg,
    var(--iris-green) 0%,
    var(--iris-amber) 50%,
    var(--iris-oxblood) 100%
  );
  --iris-diagonal: linear-gradient(
    135deg,
    var(--iris-green) 0%,
    var(--iris-amber) 52%,
    var(--iris-oxblood) 100%
  );
  /* Darkened to a uniform depth so white text stays readable across
     all three stops. Used for filled surfaces and button hovers. */
  --iris-deep: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    var(--iris-diagonal);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* 4px base unit */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 14px;
  --space-4: 24px;
  --space-5: 34px;
  --space-6: 46px;
  --space-7: 72px;
  --space-8: 120px;

  --max-width: 1078px;
  --pill: 75px;

  /* One easing curve for the whole site. */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  background: var(--ink-950);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.58;
  color: var(--text);
  background: var(--ink-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

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

::selection {
  background: var(--iris-amber);
  color: #000;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---- Type roles ---------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

/* Gradient dot marking every eyebrow label. */
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--iris);
  flex: none;
}

.eyebrow-inverse {
  color: var(--text-soft);
}

/* Whisper weight — the signature move: 300 at large size. */
.heading-whisper {
  font-size: clamp(2.25rem, 5.2vw, 4.4rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.heading-anchor {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 400;
  line-height: 1.1;
}

.heading-sm {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.3;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--text-soft);
  max-width: 60ch;
}

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

.fine {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Gradient-filled type. Reserved for LARGE text — across a couple of
   characters the whole ramp compresses into one muddy tone. */
.iris-text {
  background: var(--iris);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.iris-rule {
  height: 1px;
  border: none;
  margin: 0;
  background: var(--iris);
}

/* Reading progress along the very top of the page. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 1200;
  background: var(--iris);
  transform: scaleX(var(--progress, 0)) translateZ(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---- Cursor companion --------------------------------------------------
   A large circle that takes over from the cursor while hovering a
   package card, the way the reference does over its media. The native
   cursor is hidden only inside those cards, never globally. The
   persistent trailing orb that used to follow the pointer everywhere
   was removed per feedback.
   Desktop pointers only; never on touch.
   -------------------------------------------------------------------- */

.hover-bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1150;
  pointer-events: none;
  will-change: transform;
}

.hover-bubble-inner {
  display: grid;
  place-items: center;
  width: 168px;
  height: 168px;
  margin: -84px 0 0 -84px;
  border-radius: 50%;
  background: var(--iris-diagonal);
  color: #000;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  transform: scale(0.35);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.hover-bubble.active .hover-bubble-inner {
  opacity: 1;
  transform: scale(1);
}

/* Hide the real cursor only inside the cards, and only once the
   replacement is actually running. */
body.cursor-fx .package {
  cursor: none;
}

@media (hover: none), (pointer: coarse) {
  .hover-bubble {
    display: none;
  }
}

body.reduce-motion .hover-bubble {
  display: none;
}

/* ---- Section rail ----------------------------------------------------
   Fixed labels down the right edge that jump to a section and show
   which one you're currently in. Labels stay hidden until the section
   is active or hovered, so the rail reads as quiet tick marks.
   -------------------------------------------------------------------- */

.section-rail {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.rail-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 1.25s var(--ease);
}

.rail-item:hover {
  color: var(--text-soft);
}

.rail-item.active {
  color: var(--text);
}

.rail-label {
  opacity: 0;
  transform: translate3d(8px, 0, 0);
  transition: opacity 1.25s var(--ease), transform 1.25s var(--ease);
  white-space: nowrap;
}

.rail-item:hover .rail-label,
.rail-item.active .rail-label {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.rail-tick {
  width: 16px;
  height: 1px;
  flex: none;
  background: currentColor;
  transition: width 1.25s var(--ease), background 1.25s var(--ease);
}

.rail-item.active .rail-tick {
  width: 38px;
  background: var(--iris);
}

/* ---- Scroll reveal ---------------------------------------------------
   Long, gentle rises on the shared easing curve. GPU-composited so the
   motion stays smooth on cheaper machines.
   -------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: opacity, transform;
}

.reveal-stagger.in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Drop the compositing hint once the animation has finished. */
.reveal.in,
.reveal-stagger.in > * {
  will-change: auto;
}

/* Motion is stripped only when the `reduce-motion` class is present.
   JS adds that class based on config.motion.respectReducedMotion — so
   the OS setting is honoured only if the site opts in. */
body.reduce-motion {
  scroll-behavior: auto;
}

body.reduce-motion .reveal,
body.reduce-motion .reveal-stagger > * {
  opacity: 1;
  transform: none;
  transition: none;
}

body.reduce-motion .hero-headline .line-phrase {
  transition: none;
}

/* ---- Buttons: the only place a radius exists ----------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 33px;
  border-radius: var(--pill);
  font-size: 16px;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--text);
  transition: background 1s var(--ease), color 1s var(--ease),
    border-color 1s var(--ease), transform 1s var(--ease);
}

.btn:hover {
  transform: translate3d(0, -2px, 0);
}

.btn:active {
  transform: translate3d(0, 0, 0);
}

/* Ghost on any dark surface — which is now everywhere. */
.btn-ghost-dark,
.btn-ghost-light {
  background: transparent;
  border-color: var(--hairline-strong);
  color: var(--text);
}

.btn-ghost-dark:hover,
.btn-ghost-light:hover {
  background: var(--iris-deep);
  border-color: transparent;
  color: #fff;
}

.btn-solid {
  background: var(--ink-800);
  border-color: var(--hairline-strong);
  color: var(--text);
}

.btn-solid:hover {
  background: var(--iris-deep);
  border-color: transparent;
}

/* The loudest button on the page — filled with the colourway itself. */
.btn-solid-inverse {
  background: var(--iris-deep);
  border-color: transparent;
  color: #fff;
}

.btn-solid-inverse:hover {
  background: var(--iris-diagonal);
  color: #000;
}

/* ---- Header --------------------------------------------------------
   Transparent over the hero, then a tinted glass bar once you scroll —
   never a solid white slab.
   ------------------------------------------------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: 72px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  color: var(--text);
  transition: background-color 1s var(--ease), backdrop-filter 1s var(--ease),
    border-color 1s var(--ease);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header.scrolled {
  background: rgba(8, 9, 10, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: transparent;
  border-image: var(--iris) 1;
}

.wordmark {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.main-nav a {
  position: relative;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
  transition: color 0.9s var(--ease);
}

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

/* Gradient underline sweeping in on hover. */
.main-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 1px;
  width: 100%;
  background: var(--iris);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--ease);
}

.main-nav a:not(.nav-cta):hover::after {
  transform: scaleX(1);
}

.nav-cta {
  padding: 9px 24px;
  border-radius: var(--pill);
  border: 1px solid var(--hairline-strong);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.9s var(--ease), color 0.9s var(--ease),
    border-color 0.9s var(--ease);
}

.nav-cta:hover {
  background: var(--iris-deep);
  border-color: transparent;
  color: #fff;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: inherit;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

/* ---- Hero ----------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--ink-950);
  color: #fff;
  overflow: hidden;
  padding: 140px 0 100px;
}

/* ---- Liquid iridescence ---------------------------------------------
   Five blobs, each on its own duration and path. The durations are
   deliberately non-multiples of each other so the loops never line up
   and the motion never visibly repeats.
   -------------------------------------------------------------------- */

.hero-fluid {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  filter: blur(64px) saturate(135%);
  pointer-events: none;
  contain: paint;
  /* A static wash underneath the blobs so the canvas is never patchy —
     this is also what a reduced-motion visitor sees, since their blobs
     never move off their starting positions. */
  background:
    radial-gradient(70% 80% at 20% 25%, rgba(160, 224, 171, 0.55), transparent 70%),
    radial-gradient(75% 85% at 72% 35%, rgba(255, 172, 46, 0.6), transparent 70%),
    radial-gradient(85% 90% at 45% 85%, rgba(165, 45, 37, 0.75), transparent 72%);
}

.hero-fluid .blob {
  position: absolute;
  border-radius: 50%;
  transform: translateZ(0);
  will-change: transform;
}

.blob-1 {
  width: 68vw;
  height: 68vw;
  top: -22%;
  left: -14%;
  background: radial-gradient(circle, rgba(160, 224, 171, 0.95), transparent 68%);
  animation: float-a 23s var(--ease-soft) infinite alternate;
}

.blob-2 {
  width: 62vw;
  height: 62vw;
  top: -8%;
  left: 30%;
  background: radial-gradient(circle, rgba(255, 172, 46, 1), transparent 66%);
  animation: float-b 31s var(--ease-soft) infinite alternate;
}

.blob-3 {
  width: 78vw;
  height: 78vw;
  top: 28%;
  left: 8%;
  background: radial-gradient(circle, rgba(165, 45, 37, 1), transparent 68%);
  animation: float-c 19s var(--ease-soft) infinite alternate;
}

.blob-4 {
  width: 56vw;
  height: 56vw;
  top: 14%;
  left: 58%;
  background: radial-gradient(circle, rgba(255, 172, 46, 0.85), transparent 65%);
  animation: float-d 37s var(--ease-soft) infinite alternate;
}

.blob-5 {
  width: 60vw;
  height: 60vw;
  top: 44%;
  left: 50%;
  background: radial-gradient(circle, rgba(165, 45, 37, 0.9), transparent 66%);
  animation: float-e 27s var(--ease-soft) infinite alternate;
}

@keyframes float-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(14vw, 10vh, 0) scale(1.18); }
  100% { transform: translate3d(4vw, -8vh, 0) scale(0.92); }
}

@keyframes float-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  50%  { transform: translate3d(-16vw, 14vh, 0) scale(0.88); }
  100% { transform: translate3d(8vw, 6vh, 0) scale(1.2); }
}

@keyframes float-c {
  0%   { transform: translate3d(0, 0, 0) scale(0.95); }
  50%  { transform: translate3d(12vw, -12vh, 0) scale(1.22); }
  100% { transform: translate3d(-10vw, 4vh, 0) scale(1); }
}

@keyframes float-d {
  0%   { transform: translate3d(0, 0, 0) scale(1.1); }
  50%  { transform: translate3d(-12vw, -10vh, 0) scale(0.9); }
  100% { transform: translate3d(-4vw, 12vh, 0) scale(1.15); }
}

@keyframes float-e {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(10vw, -14vh, 0) scale(1.16); }
  100% { transform: translate3d(-14vw, -4vh, 0) scale(0.94); }
}

/* Darkening veil so white type stays readable over the colour. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.38) 45%,
    rgba(5, 5, 6, 0.92) 100%
  );
  pointer-events: none;
}

@keyframes drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-3%, 2%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(3%, -2%, 0) scale(1.04);
  }
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero-inner {
  max-width: 900px;
}

.hero h1 {
  font-size: clamp(2.75rem, 6.4vw, 5.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-5);
}

.hero-headline .line-lead,
.hero-headline .line-phrase {
  display: block;
}

/* The cycling line. Fades, lifts, and blurs out; the next phrase
   arrives the same way in reverse. */
.hero-headline .line-phrase {
  background: linear-gradient(100deg, var(--iris-green), var(--iris-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease),
    filter 0.75s var(--ease);
  will-change: opacity, transform, filter;
}

.hero-headline .line-phrase.swapping {
  opacity: 0;
  transform: translate3d(0, -0.16em, 0);
  filter: blur(10px);
}

.hero .subhead {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 48ch;
  margin: 0 0 var(--space-6);
  font-weight: 300;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Scroll badge — a plain constant spin, exactly like the reference:
   one full turn every 10 seconds, linear, forever. Deliberately NOT
   tied to scroll position; coupling it to scroll made it speed up and
   coast, which read as erratic rather than calm. */
.scroll-badge {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  width: 96px;
  height: 96px;
  z-index: 2;
  animation: badge-spin 10s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

@keyframes badge-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body.reduce-motion .scroll-badge {
  animation: none;
}

.scroll-badge text {
  font-size: 11px;
  letter-spacing: 0.22em;
  fill: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
}

.scroll-badge .badge-dot {
  fill: var(--iris-amber);
}

/* ---- Atmospheric image bands ------------------------------------------
   Full-bleed photographic textures, generated to sit inside the exact
   iris palette rather than stock photography. Treated the same way the
   hero's gradient is: grayscale base + a colour wash blended on top, so
   they read as an extension of the hero's material, not a photo dropped
   into an otherwise text-only system. Deliberately textless — one
   atmospheric gesture per band, not a captioned image.
   -------------------------------------------------------------------- */

.image-band {
  position: relative;
  height: clamp(280px, 40vw, 520px);
  overflow: hidden;
  background: var(--ink-950);
}

.image-band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturate the source photo completely — colour comes only from the
     scrim below, so the band can never introduce an off-palette hue. */
  filter: grayscale(1) contrast(1.08) brightness(0.85);
  transform: scale(1.02); /* hides any sub-pixel edge from the vignette */
}

.image-band-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ink-950) 0%, transparent 16%, transparent 84%, var(--ink-950) 100%),
    linear-gradient(90deg, rgba(160, 224, 171, 0.55), rgba(255, 172, 46, 0.5) 50%, rgba(165, 45, 37, 0.6));
  mix-blend-mode: color;
}

/* A second, plain darkening layer — mix-blend-mode: color only tints,
   it doesn't add contrast, so the edges still need a true fade to black
   to disappear into the surrounding sections. */
.image-band-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--ink-950) 0%, transparent 20%, transparent 80%, var(--ink-950) 100%);
}

/* The second band reverses the wash direction so the two moments don't
   read as identical when scrolled past in sequence. */
.image-band-alt .image-band-scrim {
  background:
    linear-gradient(180deg, var(--ink-950) 0%, transparent 16%, transparent 84%, var(--ink-950) 100%),
    linear-gradient(270deg, rgba(160, 224, 171, 0.55), rgba(255, 172, 46, 0.5) 50%, rgba(165, 45, 37, 0.6));
}

/* ---- Section rhythm ------------------------------------------------ */

.section {
  position: relative;
  padding: var(--space-8) 0;
  background: var(--ink-950);
}

.section-tight {
  padding: var(--space-7) 0;
}

/* Alternate sections lift slightly and carry an ambient colour wash,
   so the page has rhythm without ever going white. */
.section-dark {
  position: relative;
  background: var(--ink-900);
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
}

.section-dark::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 18% 28%, rgba(160, 224, 171, 0.4), transparent 62%),
    radial-gradient(45% 55% at 72% 42%, rgba(255, 172, 46, 0.42), transparent 60%),
    radial-gradient(50% 60% at 45% 88%, rgba(165, 45, 37, 0.5), transparent 62%);
  filter: blur(50px) saturate(115%);
  opacity: 0.5;
  pointer-events: none;
  /* Deliberately static. Two large blurred layers animating forever —
     on top of the hero's — cost real GPU time for a drift that sits at
     50% opacity behind text and is barely perceptible. The hero keeps
     its motion because that one is the signature moment. */
}

/* A gradient hairline marks the top edge of every lifted band. */
.section-dark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--iris);
  pointer-events: none;
}

body.reduce-motion .hero-fluid .blob {
  animation: none;
}

.section-head {
  max-width: 64ch;
  margin-bottom: var(--space-7);
}

.section-head .lede {
  margin-top: var(--space-4);
}

/* ---- Deliverables list --------------------------------------------- */

.deliverables {
  border-top: 1px solid var(--hairline);
}

.deliverable {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 1s var(--ease), background-color 1s var(--ease);
}

/* Gradient bar wiping down from the left on hover. */
.deliverable::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--iris-diagonal);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 1s var(--ease);
}

.deliverable:hover::before {
  transform: scaleY(1);
}

.deliverable:hover {
  padding-left: var(--space-4);
  background: rgba(255, 255, 255, 0.02);
}

.deliverable .index {
  font-size: 13px;
  letter-spacing: 0.14em;
  padding-top: 8px;
  color: var(--iris-amber);
}

.deliverable h3 {
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: var(--space-2);
}

.deliverable p {
  color: var(--text-soft);
  max-width: 62ch;
}

/* ---- Packages -------------------------------------------------------
   Three cards differentiated by colour temperature:
     quiet — restrained, minimal colour
     hot   — amber into oxblood, the featured card
     cool  — sage green, deliberately contrasting the hot card
   ------------------------------------------------------------------ */

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.package {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  background: var(--ink-850);
  border: 1px solid var(--hairline);
  overflow: hidden;
  isolation: isolate;
  transition: transform 1.1s var(--ease), border-color 1.1s var(--ease),
    background-color 1.1s var(--ease);
}

.package:hover {
  transform: translate3d(0, -6px, 0);
  border-color: var(--hairline-strong);
}

/* Ambient glow inside each card, tinted per tone. */
.package-glow {
  position: absolute;
  inset: -50% -20% auto -20%;
  height: 70%;
  z-index: -1;
  filter: blur(60px);
  opacity: 0.5;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}

.package:hover .package-glow {
  opacity: 0.8;
}

/* Gradient cap across the top edge. */
.package::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

/* -- quiet ------------------------------------------------------- */
.package.tone-quiet::before {
  background: var(--hairline-strong);
}

.package.tone-quiet .package-glow {
  background: radial-gradient(
    50% 100% at 50% 0%,
    rgba(255, 255, 255, 0.14),
    transparent 70%
  );
}

.package.tone-quiet .package-price {
  color: var(--text);
}

/* -- hot (featured) ---------------------------------------------- */
.package.tone-hot {
  background: var(--ink-800);
  border-color: rgba(255, 172, 46, 0.32);
}

.package.tone-hot::before {
  height: 3px;
  background: linear-gradient(90deg, var(--iris-amber), var(--iris-oxblood));
}

.package.tone-hot .package-glow {
  background: radial-gradient(
    55% 100% at 50% 0%,
    rgba(255, 172, 46, 0.55),
    rgba(165, 45, 37, 0.3) 55%,
    transparent 75%
  );
  opacity: 0.75;
}

.package.tone-hot:hover .package-glow {
  opacity: 1;
}

.package.tone-hot .package-price {
  background: linear-gradient(100deg, var(--iris-amber), rgb(226, 110, 66));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.package.tone-hot .package-tag {
  color: var(--iris-amber);
}

.package.tone-hot .package-features li::before {
  color: var(--iris-amber);
}

/* The loudest CTA on the page. Uses only the hot half of the ramp so
   white text keeps contrast across the whole button. */
.package.tone-hot .btn {
  background: linear-gradient(100deg, var(--iris-amber), var(--iris-oxblood));
  border-color: transparent;
  color: #fff;
}

.package.tone-hot .btn:hover {
  background: linear-gradient(100deg, rgb(255, 190, 92), rgb(198, 58, 47));
}

/* -- cool (contrast) ---------------------------------------------- */
.package.tone-cool {
  border-color: rgba(160, 224, 171, 0.26);
}

.package.tone-cool::before {
  background: linear-gradient(90deg, var(--iris-green), rgba(160, 224, 171, 0.25));
}

.package.tone-cool .package-glow {
  background: radial-gradient(
    50% 100% at 50% 0%,
    rgba(160, 224, 171, 0.38),
    transparent 72%
  );
}

.package.tone-cool .package-price {
  color: var(--iris-green);
}

.package.tone-cool .package-tag {
  color: var(--iris-green);
}

.package.tone-cool .package-features li::before {
  color: var(--iris-green);
}

/* -- shared card internals ---------------------------------------- */

.package-tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  color: var(--text-muted);
}

.package-price {
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
}

.price-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
}

.package-summary {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-4);
}

.package-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-soft);
  margin-bottom: var(--space-6);
  flex: 1;
}

.package-features li {
  padding-left: 20px;
  position: relative;
}

.package-features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

.package .btn {
  width: 100%;
  font-size: 14px;
  padding: 12px 20px;
}

.package-note {
  margin-top: var(--space-5);
  font-size: 13px;
  color: var(--text-muted);
  max-width: 70ch;
}

/* ---- Process steps ------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.step {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-4);
  transition: border-color 1.1s var(--ease);
}

.step:hover {
  border-top-color: var(--iris-amber);
}

/* Solid rather than gradient: across two characters a gradient
   compresses into a single muddy tone. */
.step .num {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: var(--space-3);
  color: var(--iris-amber);
}

.step h3 {
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: var(--space-3);
}

.step p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* ---- Demo callout -------------------------------------------------- */

.demo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.demo-inner .body {
  color: var(--text-soft);
  margin-bottom: var(--space-5);
}

/* ---- Work / proof -------------------------------------------------- */

.work-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-4);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 1s var(--ease);
}

.work-row:first-child {
  border-top: 1px solid var(--hairline);
}

.work-row::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--iris);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1s var(--ease);
}

.work-row:hover::before {
  transform: scaleX(1);
}

.work-row:hover {
  padding-left: var(--space-3);
}

.work-row .name {
  font-size: 1.5rem;
  font-weight: 400;
}

.work-row .meta {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.work-empty {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-image: var(--iris) 1;
  padding: var(--space-7) 0;
  color: var(--text-soft);
  max-width: 56ch;
}

/* ---- FAQ ----------------------------------------------------------- */

.faq-list {
  border-top: 1px solid var(--hairline);
}

.faq-item {
  position: relative;
  border-bottom: 1px solid var(--hairline);
}

.faq-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--iris);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.1s var(--ease);
}

.faq-item.open::before {
  transform: scaleX(1);
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 400;
  color: inherit;
  text-align: left;
  padding: var(--space-5) 44px var(--space-5) 0;
  cursor: pointer;
  position: relative;
  line-height: 1.35;
  transition: color 0.9s var(--ease);
}

.faq-q:hover {
  color: var(--iris-amber);
}

/* The marker turns a full 135° into an ×, picking up the colourway. */
.faq-q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted);
  transform: translateY(-50%) rotate(0deg);
  transition: transform 1.1s var(--ease), color 0.9s var(--ease);
}

.faq-item.open .faq-q::after {
  color: var(--iris-amber);
  transform: translateY(-50%) rotate(135deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 1.1s var(--ease), opacity 0.9s var(--ease);
}

.faq-item.open .faq-a {
  max-height: 420px;
  opacity: 1;
}

.faq-a p {
  color: var(--text-soft);
  padding-bottom: var(--space-5);
  max-width: 68ch;
}

/* ---- Contact ------------------------------------------------------- */

.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
}

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

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* The underline is drawn as a background strip so it can hold the
   gradient — it lights up in full colour on focus. */
.field input,
.field textarea,
.field select {
  width: 100%;
  border-radius: 0;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(var(--hairline-strong), var(--hairline-strong));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  padding: 10px 0;
  transition: background-size 1s var(--ease);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background-image: var(--iris);
  background-size: 100% 2px;
}

.field select option {
  background: var(--ink-850);
  color: var(--text);
}

.field textarea {
  resize: vertical;
  min-height: 90px;
}

.form-status {
  font-size: 14px;
  color: var(--text-soft);
  min-height: 20px;
}

.form-status.error {
  color: var(--iris-amber);
}

.contact-aside dt {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.contact-aside dd {
  margin: 0 0 var(--space-5);
  font-size: 1.05rem;
}

.contact-aside dd a {
  transition: color 0.9s var(--ease);
}

.contact-aside dd a:hover {
  color: var(--iris-amber);
}

/* ---- Footer -------------------------------------------------------- */

.site-footer {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--hairline);
  background: var(--ink-950);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.site-footer .fine {
  font-size: 11px;
  line-height: 1.36;
}

/* ---- Responsive ---------------------------------------------------- */

/* The rail needs room beside the 1078px container — hide it once the
   viewport gets tight rather than letting it overlap content. */
@media (max-width: 1240px) {
  .section-rail {
    display: none;
  }
}

@media (max-width: 900px) {
  .package-grid {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .demo-inner,
  .contact-inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (max-width: 720px) {
  body {
    font-size: 17px;
  }
  .section {
    padding: var(--space-7) 0;
  }
  .hero {
    min-height: auto;
    padding: 128px 0 88px;
  }
  .scroll-badge {
    display: none;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .nav-toggle {
    display: block;
  }
  .main-nav {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(8, 9, 10, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--hairline);
    display: none;
  }
  .main-nav.open {
    display: flex;
  }
  .main-nav a {
    padding: var(--space-4) 0;
    width: 100%;
    border-bottom: 1px solid var(--hairline);
  }
  .main-nav a:last-child {
    border-bottom: none;
  }
  .nav-cta {
    border: none;
    padding: var(--space-4) 0;
  }
  .deliverable {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .work-row {
    grid-template-columns: 1fr;
  }
}