.page-hero--text {
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  min-height: calc(100vh - var(--header-height) - env(safe-area-inset-top));
  min-height: calc(100svh - var(--header-height) - env(safe-area-inset-top));
  grid-template-columns: minmax(0, 1fr);
  border-bottom-color: var(--line-brand);
  background: var(--surface-canvas);
  color: var(--text-strong);
}

.page-hero--text .page-hero__content {
  width: 100%;
  max-width: 1280px;
  min-height: inherit;
  padding-right: var(--page-gutter);
  background: transparent;
}

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

.page-hero--text h1 {
  max-width: 14ch;
  font-family: var(--font-display);
  font-size: clamp(62px, 8.2vw, 122px);
  line-height: 0.91;
}

.page-hero--text .page-hero__content > p:not(.page-hero__eyebrow) {
  max-width: 630px;
  color: var(--text-muted);
}

.page-hero--text .button:hover {
  background: var(--brand-fresh);
  color: var(--text-strong);
}

.page-hero--text .button:hover span {
  border-left-color: rgba(23, 51, 38, 0.28);
}

.project-gallery,
.principles,
.contact-details {
  padding: var(--section-space) var(--page-gutter);
}

.experience-journey {
  --datum-left: 50%;
  --journey-progress: 1;
  --journey-local-progress: 1;
  --journey-chapter-payoff: 1;
  --material-base-pan-x: 0%;
  --material-drift-x: 0px;
  --material-drift-y: 0px;
  --material-final-pan-x: 0%;
  --material-final-pan-y: 0%;
  --material-light: 0.32;
  --material-pan-x: var(--material-final-pan-x);
  --material-pan-y: var(--material-final-pan-y);
  --material-rotation: 0deg;
  --material-saturation: 0.94;
  --material-scale: 1.03;
  --orbit-mobile-max: 420px;
  --orbit-ratio: 0.9;
  --orbit-width: min(31vw, 430px);
  --plane-one-inset: 12%;
  --plane-one-radius: clamp(22px, 3vw, 42px);
  --plane-two-inset: 20% 5% 5% 20%;
  --plane-three-inset: 30% -2% -2% 30%;
  position: relative;
  overflow: clip;
  padding: clamp(96px, 12vw, 176px) var(--page-gutter);
  border-top: 1px solid var(--line-brand);
  background:
    radial-gradient(circle at 18% 18%, rgba(98, 189, 93, 0.13), transparent 34%),
    linear-gradient(145deg, var(--surface-raised), var(--surface-canvas) 68%);
  isolation: isolate;
}

.experience-journey[data-journey-scene="services"] {
  --datum-left: 52%;
  --material-base-pan-x: 0%;
  --material-final-pan-x: -24%;
  --material-final-pan-y: 0.8%;
  --orbit-mobile-max: 432px;
  --orbit-ratio: 1.18;
  --orbit-width: min(33vw, 458px);
  --plane-one-inset: 16% 7% 14% 6%;
  --plane-one-radius: clamp(18px, 2.4vw, 34px);
  --plane-two-inset: 25% 1% 4% 22%;
  --plane-three-inset: 35% -6% -4% 34%;
  --scene-datum-transform: translate3d(0.0000px, 0, 220px) scaleY(1.0000);
  --scene-orbit-transform: perspective(1100px) rotateX(49.0000deg) rotateY(-2.0000deg) rotateZ(0.0000deg) translate3d(-4.0000px, -16.0000px, 0) scale(1.0300);
  --scene-plane-one-transform: translate3d(-8.1600px, 6.7200px, -12.9600px) rotateZ(-1.6800deg);
  --scene-plane-two-transform: translate3d(9.6000px, -5.2800px, 24.4800px) rotateZ(2.4000deg);
  --scene-plane-three-transform: translate3d(-11.5200px, 3.3600px, 33.1200px) rotateZ(-3.3600deg);
}

.experience-journey[data-journey-scene="kitchen"] {
  --datum-left: 41%;
  --material-base-pan-x: -3%;
  --material-final-pan-x: -8%;
  --material-final-pan-y: -2.2%;
  --orbit-mobile-max: 410px;
  --orbit-ratio: 1.46;
  --orbit-width: min(34vw, 472px);
  --plane-one-inset: 22% 3% 11% 4%;
  --plane-one-radius: clamp(14px, 2vw, 28px);
  --plane-two-inset: 10% 20% 31% 5%;
  --plane-three-inset: 40% -5% -3% 27%;
  --scene-datum-transform: translate3d(0.0000px, 0, 220px) scaleY(0.9800);
  --scene-orbit-transform: perspective(1100px) rotateX(46.0000deg) rotateY(3.0000deg) rotateZ(0.0000deg) translate3d(22.0000px, -12.0000px, 0) scale(1.0400);
  --scene-plane-one-transform: translate3d(-17.4000px, 2.4000px, -9.0000px) rotateZ(-1.2000deg);
  --scene-plane-two-transform: translate3d(13.8000px, -1.8000px, 22.8000px) rotateZ(2.1000deg);
  --scene-plane-three-transform: translate3d(20.4000px, 4.8000px, 38.4000px) rotateZ(1.5000deg);
}

.experience-journey[data-journey-scene="bath"] {
  --datum-left: 64%;
  --material-base-pan-x: 4%;
  --material-final-pan-x: 10%;
  --material-final-pan-y: 2%;
  --orbit-mobile-max: 388px;
  --orbit-ratio: 0.74;
  --orbit-width: min(27vw, 374px);
  --plane-one-inset: 6% 17% 10% 13%;
  --plane-one-radius: clamp(30px, 5vw, 64px);
  --plane-two-inset: 27% 2% 2% 24%;
  --plane-three-inset: 38% 21% -8% -5%;
  --scene-datum-transform: translate3d(0.0000px, 0, 220px) scaleY(1.0000);
  --scene-orbit-transform: perspective(1100px) rotateX(54.0000deg) rotateY(0.0000deg) rotateZ(0.0000deg) translate3d(0.0000px, -18.0000px, 0) scale(1.0200);
  --scene-plane-one-transform: translate3d(-10.6400px, -10.6400px, -12.3200px) rotateZ(-2.8000deg);
  --scene-plane-two-transform: translate3d(10.6400px, 9.5200px, 22.4000px) rotateZ(2.8000deg);
  --scene-plane-three-transform: translate3d(-2.2400px, 14.5600px, 37.5200px) rotateZ(-0.8400deg);
}

.experience-journey[data-journey-scene="windows"] {
  --datum-left: 31%;
  --material-base-pan-x: -5%;
  --material-final-pan-x: -12%;
  --material-final-pan-y: -3%;
  --orbit-mobile-max: 438px;
  --orbit-ratio: 1.62;
  --orbit-width: min(35vw, 488px);
  --plane-one-inset: 9% 2% 18% 9%;
  --plane-one-radius: clamp(10px, 1.4vw, 22px);
  --plane-two-inset: 13% 29% 7% -2%;
  --plane-three-inset: 32% -8% 20% 24%;
  --scene-datum-transform: translate3d(12.0000px, 0, 220px) scaleY(1.0000);
  --scene-orbit-transform: perspective(1100px) rotateX(42.0000deg) rotateY(-8.0000deg) rotateZ(0.0000deg) translate3d(-14.0000px, -12.0000px, 0) scale(1.0400);
  --scene-plane-one-transform: translate3d(-20.1600px, -10.0800px, -12.2400px) rotateZ(-0.7200deg);
  --scene-plane-two-transform: translate3d(20.1600px, -10.0800px, 19.4400px) rotateZ(0.7200deg);
  --scene-plane-three-transform: translate3d(-0.7200px, 18.7200px, 42.4800px) rotateZ(0.0000deg);
}

.experience-journey[data-journey-scene="roofing"] {
  --datum-left: 73%;
  --material-base-pan-x: 5%;
  --material-final-pan-x: 7%;
  --material-final-pan-y: 1.3%;
  --orbit-mobile-max: 446px;
  --orbit-ratio: 1.7;
  --orbit-width: min(36vw, 500px);
  --plane-one-inset: 24% 0 7% 0;
  --plane-one-radius: clamp(12px, 1.7vw, 26px);
  --plane-two-inset: 2% 21% 39% 14%;
  --plane-three-inset: 43% -9% -5% 31%;
  --scene-datum-transform: translate3d(0.0000px, 0, 220px) scaleY(1.0000);
  --scene-orbit-transform: perspective(1100px) rotateX(50.0000deg) rotateY(0.0000deg) rotateZ(8.0000deg) translate3d(0.0000px, -16.0000px, 0) scale(1.0300);
  --scene-plane-one-transform: translate3d(-14.4000px, 7.2000px, -15.0000px) rotateZ(-4.8000deg);
  --scene-plane-two-transform: translate3d(0.0000px, -13.8000px, 25.8000px) rotateZ(0.0000deg);
  --scene-plane-three-transform: translate3d(14.4000px, 7.2000px, 40.8000px) rotateZ(4.8000deg);
}

.experience-journey[data-journey-scene="solar"] {
  --datum-left: 58%;
  --material-base-pan-x: -2%;
  --material-final-pan-x: -6%;
  --material-final-pan-y: -2.5%;
  --orbit-mobile-max: 454px;
  --orbit-ratio: 1.84;
  --orbit-width: min(37vw, 510px);
  --plane-one-inset: 17% 2% 16% 2%;
  --plane-one-radius: clamp(8px, 1vw, 18px);
  --plane-two-inset: 4% 31% 45% -4%;
  --plane-three-inset: 46% -7% -3% 28%;
  --scene-datum-transform: translate3d(14.0000px, 0, 220px) scaleY(1.0000);
  --scene-orbit-transform: perspective(1100px) rotateX(46.0000deg) rotateY(12.0000deg) rotateZ(7.0000deg) translate3d(-18.0000px, -16.0000px, 0) scale(1.0400);
  --scene-plane-one-transform: translate3d(-16.6400px, -5.7600px, -12.1600px) rotateZ(-2.5600deg);
  --scene-plane-two-transform: translate3d(0.0000px, 0.0000px, 24.3200px) rotateZ(0.0000deg);
  --scene-plane-three-transform: translate3d(16.6400px, 5.7600px, 42.8800px) rotateZ(2.5600deg);
}

.experience-journey[data-journey-scene="projects"] {
  --datum-left: 46%;
  --material-base-pan-x: 3%;
  --material-final-pan-x: -14%;
  --material-final-pan-y: 2.4%;
  --orbit-mobile-max: 418px;
  --orbit-ratio: 1.05;
  --orbit-width: min(30vw, 416px);
  --plane-one-inset: 3% 23% 17% 5%;
  --plane-one-radius: clamp(24px, 3.8vw, 52px);
  --plane-two-inset: 31% -3% 8% 26%;
  --plane-three-inset: 18% 35% -6% -8%;
  --scene-datum-transform: translate3d(0.0000px, 0, 220px) scaleY(1.0000);
  --scene-orbit-transform: perspective(1100px) rotateX(47.0000deg) rotateY(-3.0000deg) rotateZ(0.0000deg) translate3d(-6.0000px, -18.0000px, 0) scale(1.0400);
  --scene-plane-one-transform: translate3d(-18.3600px, 10.2000px, -15.6400px) rotateZ(-6.1200deg);
  --scene-plane-two-transform: translate3d(7.4800px, -11.5600px, 27.8800px) rotateZ(3.0600deg);
  --scene-plane-three-transform: translate3d(19.7200px, 4.0800px, 49.6400px) rotateZ(6.4600deg);
}

.experience-journey[data-journey-scene="about"] {
  --datum-left: 37%;
  --material-base-pan-x: -4%;
  --material-final-pan-x: 9%;
  --material-final-pan-y: 0.7%;
  --orbit-mobile-max: 396px;
  --orbit-ratio: 0.82;
  --orbit-width: min(28vw, 388px);
  --plane-one-inset: 13% 19% 7% 8%;
  --plane-one-radius: clamp(34px, 5.2vw, 70px);
  --plane-two-inset: 30% 0 3% 26%;
  --plane-three-inset: 4% 38% 38% -6%;
  --scene-datum-transform: translate3d(0.0000px, 0, 220px) scaleY(1.0000);
  --scene-orbit-transform: perspective(1100px) rotateX(50.0000deg) rotateY(0.0000deg) rotateZ(0.0000deg) translate3d(0.0000px, -18.0000px, 0) scale(1.0200);
  --scene-plane-one-transform: translate3d(-5.2800px, -12.9600px, -10.0800px) rotateZ(-1.4400deg);
  --scene-plane-two-transform: translate3d(3.3600px, 0.0000px, 20.1600px) rotateZ(1.2000deg);
  --scene-plane-three-transform: translate3d(7.2000px, 13.4400px, 33.1200px) rotateZ(2.1600deg);
}

.experience-journey[data-journey-scene="contact"] {
  --datum-left: 68%;
  --material-base-pan-x: 6%;
  --material-final-pan-x: -9%;
  --material-final-pan-y: -1.8%;
  --orbit-mobile-max: 406px;
  --orbit-ratio: 1.3;
  --orbit-width: min(32vw, 444px);
  --plane-one-inset: 18% 4% 5% 17%;
  --plane-one-radius: clamp(20px, 3vw, 40px);
  --plane-two-inset: 5% 28% 29% 1%;
  --plane-three-inset: 39% -5% -7% 32%;
  --scene-datum-transform: translate3d(0.0000px, 0, 220px) scaleY(1.0000);
  --scene-orbit-transform: perspective(1100px) rotateX(48.0000deg) rotateY(0.0000deg) rotateZ(0.0000deg) translate3d(0.0000px, -16.0000px, 0) scale(1.0300);
  --scene-plane-one-transform: translate3d(-9.6800px, 7.9200px, -8.8000px) rotateZ(-2.8600deg);
  --scene-plane-two-transform: translate3d(9.6800px, 7.9200px, 15.8400px) rotateZ(2.8600deg);
  --scene-plane-three-transform: translate3d(0.0000px, -11.4400px, 29.0400px) rotateZ(0.0000deg);
}

.has-js .experience-journey {
  --journey-progress: 0;
  --journey-local-progress: 0;
  --journey-chapter-payoff: 0;
  --material-light: 0;
  --material-pan-x: 0%;
  --material-pan-y: 0%;
  --material-saturation: 1;
  --material-scale: 1;
}

.experience-journey::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 49.95%, rgba(0, 105, 56, 0.06) 50%, transparent 50.05%),
    linear-gradient(transparent 49.95%, rgba(98, 189, 93, 0.055) 50%, transparent 50.05%);
  background-size: clamp(52px, 8vw, 112px) clamp(52px, 8vw, 112px);
  content: "";
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 86%, transparent);
  opacity: 0.7;
}

.experience-journey::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: var(--page-gutter);
  z-index: 2;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--brand-deep),
    var(--brand-fresh),
    transparent
  );
  content: "";
  pointer-events: none;
  opacity: var(--journey-chapter-payoff);
  transform: scaleX(var(--journey-chapter-payoff));
  transform-origin: left;
}

.experience-journey__intro {
  display: grid;
  max-width: 1280px;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  gap: clamp(28px, 6vw, 96px);
  margin: 0 auto clamp(72px, 10vw, 136px);
}

.experience-journey__intro .section-kicker {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.experience-journey__intro h2 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 6.4vw, 96px);
  font-weight: 450;
  letter-spacing: -0.055em;
  line-height: 0.94;
}

.experience-journey__intro > p:last-child {
  max-width: 620px;
  align-self: end;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.7;
}

.experience-journey__layout {
  display: grid;
  max-width: 1280px;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(48px, 8vw, 132px);
  margin: 0 auto;
}

.experience-journey__visual {
  position: sticky;
  top: calc(var(--header-height) + clamp(28px, 5vw, 72px));
  display: grid;
  height: min(66svh, 680px);
  min-height: 440px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(0, 105, 56, 0.16);
  border-radius: clamp(30px, 4vw, 58px);
  background: var(--surface-raised);
  box-shadow:
    0 42px 110px rgba(0, 105, 56, 0.14),
    inset 0 1px rgba(255, 255, 255, 0.88);
  isolation: isolate;
  perspective: 1100px;
}

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

.experience-journey__visual::before {
  z-index: -3;
  background:
    radial-gradient(circle at 26% 24%, rgba(255, 255, 255, 0.76), transparent 46%),
    linear-gradient(135deg, rgba(247, 248, 243, 0.96), rgba(221, 236, 220, 0.82));
}

.experience-journey__material {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  display: block;
  width: 210%;
  height: 112%;
  max-width: none;
  object-fit: cover;
  opacity: 0.82;
  filter: saturate(0.92) contrast(0.98) brightness(1.04);
  transform:
    translate3d(
      calc(
        -50% + var(--material-base-pan-x) + var(--material-pan-x) +
          var(--material-drift-x)
      ),
      calc(-50% + var(--material-pan-y) + var(--material-drift-y)),
      0
    )
    rotate(var(--material-rotation))
    scale(calc(var(--material-scale) + 0.055 - var(--journey-local-progress) * 0.025));
  transform-origin: center;
  transition:
    opacity 560ms ease,
    transform 880ms cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-journey__material-video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.96;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 420ms ease;
}

.experience-journey[data-journey-active="true"] :is(
  .experience-journey__material,
  .experience-journey__material-video,
  .experience-journey__orbit,
  .experience-journey__plane
) {
  will-change: transform;
}

.experience-journey__visual::after {
  z-index: -1;
  background:
    radial-gradient(circle at 72% 26%, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(145deg, rgba(247, 248, 243, 0.04), rgba(23, 51, 38, 0.15));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  opacity: clamp(
    0.58,
    calc(
      0.58 + var(--material-light) * 0.22 +
        (var(--material-saturation) - 0.72) * 0.18
    ),
    0.94
  );
}

.experience-journey[data-active-chapter="1"] .experience-journey__material {
  opacity: 0.82;
}

.experience-journey[data-active-chapter="2"] .experience-journey__material {
  opacity: 0.87;
}

.experience-journey[data-active-chapter="3"] .experience-journey__material {
  opacity: 0.92;
}

.experience-journey[data-active-chapter="4"] .experience-journey__material {
  opacity: 0.96;
}

.experience-journey[data-active-chapter="5"] .experience-journey__material {
  opacity: 1;
}

.experience-journey__orbit {
  position: relative;
  z-index: 1;
  width: var(--orbit-width);
  aspect-ratio: var(--orbit-ratio);
  filter: drop-shadow(0 30px 44px rgba(0, 105, 56, 0.18));
  transform: var(
    --scene-orbit-transform,
    perspective(1100px)
      rotateX(calc(66deg - var(--journey-progress) * 18deg))
      rotateY(calc(-7deg + var(--journey-local-progress) * 14deg + var(--material-rotation)))
      rotateZ(calc(-12deg + var(--journey-progress) * 24deg + var(--material-rotation)))
      translate3d(
        calc(var(--journey-progress) * 24px - 12px + var(--material-drift-x)),
        calc(var(--journey-progress) * -36px + 18px + var(--material-drift-y)),
        0
      )
      scale(calc(0.92 + var(--journey-local-progress) * 0.08))
  );
  transform-style: preserve-3d;
}

/* The process cinema is the visual story; keep generated geometry from
   obscuring its frames. */
.experience-journey__visual > .experience-journey__orbit {
  display: none;
}

.experience-journey[data-journey-beat="arrive"] .experience-journey__orbit {
  opacity: 0.84;
}

.experience-journey[data-journey-beat="build"] .experience-journey__orbit {
  opacity: 0.94;
}

.experience-journey[data-journey-beat="settle"] .experience-journey__orbit {
  opacity: 1;
}

.experience-journey__plane {
  position: absolute;
  inset: var(--plane-one-inset);
  display: block;
  border: 1px solid rgba(0, 105, 56, 0.25);
  border-radius: var(--plane-one-radius);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(237, 245, 236, 0.64));
  box-shadow:
    0 34px 84px rgba(0, 105, 56, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.9);
  transform: var(
    --scene-plane-one-transform,
    translate3d(
        calc(var(--journey-progress) * -38px + 19px),
        calc(var(--journey-progress) * 42px - 21px),
        calc(var(--journey-progress) * 92px - 46px)
      )
      rotateZ(calc(var(--journey-progress) * -9deg + 4.5deg))
  );
  transform-style: preserve-3d;
}

.experience-journey__plane--two {
  inset: var(--plane-two-inset);
  border-color: rgba(98, 189, 93, 0.4);
  background: linear-gradient(145deg, rgba(98, 189, 93, 0.24), rgba(255, 255, 255, 0.7));
  transform: var(
    --scene-plane-two-transform,
    translate3d(
        calc(var(--journey-progress) * 54px - 27px),
        calc(var(--journey-progress) * -30px + 15px),
        calc(var(--journey-progress) * 146px - 73px)
      )
      rotateZ(calc(var(--journey-progress) * 12deg - 6deg))
  );
}

.experience-journey__plane--three {
  inset: var(--plane-three-inset);
  border-color: rgba(0, 105, 56, 0.48);
  background: linear-gradient(145deg, rgba(0, 105, 56, 0.1), rgba(255, 255, 255, 0.72));
  transform: var(
    --scene-plane-three-transform,
    translate3d(
        calc(var(--journey-progress) * -64px + 32px),
        calc(var(--journey-progress) * 18px - 9px),
        calc(var(--journey-progress) * 196px - 98px)
      )
      rotateZ(calc(var(--journey-progress) * -15deg + 7.5deg))
  );
}

.experience-journey__datum {
  position: absolute;
  top: 2%;
  bottom: -8%;
  left: var(--datum-left);
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--brand-fresh) 24%, var(--brand-deep));
  box-shadow: 0 0 24px rgba(98, 189, 93, 0.32);
  transform: var(
    --scene-datum-transform,
    translateZ(220px) scaleY(calc(0.35 + var(--journey-progress) * 0.65))
  );
  transform-origin: top;
}

.experience-journey__progress {
  position: absolute;
  right: clamp(22px, 4vw, 48px);
  bottom: clamp(22px, 4vw, 48px);
  left: clamp(22px, 4vw, 48px);
  z-index: 3;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 0 0 1px rgba(0, 105, 56, 0.1);
}

.experience-journey__progress::after {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand-fresh));
  content: "";
  transform: scaleX(var(--journey-progress));
  transform-origin: left;
}

.experience-journey .process-list {
  display: block;
  margin: 0;
  border-top: 1px solid var(--line-brand);
  counter-reset: none;
}

.experience-journey__chapter {
  --chapter-offset: 1;
  --chapter-proximity: 0;
  display: block;
  min-height: min(66svh, 680px);
  padding: clamp(54px, 8vw, 104px) 0;
  border-bottom: 1px solid var(--line-brand);
  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-journey .process-list > .experience-journey__chapter::before {
  display: none;
  content: none;
}

.experience-journey__chapter article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 0 clamp(20px, 3vw, 42px);
}

.experience-journey__index {
  grid-row: 1 / span 4;
  padding-top: 0.55em;
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.experience-journey__chapter h3 {
  max-width: 17ch;
  margin: 0 0 clamp(24px, 4vw, 42px);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 450;
  letter-spacing: -0.045em;
  line-height: 0.98;
  transform:
    translate3d(
      calc((1 - var(--chapter-proximity)) * 18px),
      calc(var(--chapter-offset) * 10px),
      0
    );
  transition:
    color 320ms ease,
    transform 580ms cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-journey__chapter p,
.experience-journey__chapter ul {
  grid-column: 2;
  max-width: 640px;
  margin: 0;
  color: var(--text-muted);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.75;
  transform: translate3d(0, calc(var(--chapter-offset) * 12px), 0);
  transition:
    opacity 420ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.experience-journey__chapter p + p,
.experience-journey__chapter p + ul {
  margin-top: 18px;
}

.experience-journey__chapter ul {
  display: grid;
  gap: 14px;
  padding: 0;
  list-style: none;
}

.experience-journey__chapter ul li {
  position: relative;
  padding-left: 24px;
}

.experience-journey__chapter ul li::before {
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 8px;
  height: 2px;
  background: var(--brand-fresh);
  content: "";
}

.has-js .experience-journey__chapter {
  opacity: 1;
  transform: translate3d(0, calc(var(--chapter-offset) * 18px), 0);
}

.has-js .experience-journey__chapter[aria-current="step"] {
  opacity: 1;
  transform: none;
}

.has-js .experience-journey__chapter[aria-current="step"] h3 {
  color: var(--brand-deep);
}

.has-js .experience-journey__chapter:not([aria-current="step"]) p,
.has-js .experience-journey__chapter:not([aria-current="step"]) ul {
  opacity: calc(0.88 + var(--chapter-proximity) * 0.12);
}

.consultation-cta__phone {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-left: clamp(14px, 2vw, 28px);
  color: var(--brand-deep);
  font-weight: 700;
  text-decoration-color: var(--brand-fresh);
  text-underline-offset: 6px;
}

.consultation-cta {
  --journey-payoff: 1;
  display: grid;
  min-height: min(100svh, 960px);
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  align-items: center;
  gap: clamp(48px, 7vw, 124px);
  padding-block: clamp(96px, 11vw, 164px);
}

.consultation-cta::before {
  z-index: 4;
  transform: scaleY(calc(0.22 + var(--journey-payoff) * 0.78));
  transform-origin: top;
}

.consultation-cta__content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin-left: clamp(26px, 4vw, 68px);
}

.consultation-cta__art {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: clamp(440px, 54vw, 690px);
  overflow: hidden;
  border: 1px solid rgba(0, 105, 56, 0.2);
  border-radius: clamp(30px, 4vw, 62px);
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 42px 100px rgba(0, 105, 56, 0.16),
    inset 0 1px rgba(255, 255, 255, 0.9);
  isolation: isolate;
  pointer-events: none;
}

.consultation-cta__art::before,
.consultation-cta__art::after {
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
}

.consultation-cta__art::before {
  background:
    linear-gradient(115deg, rgba(247, 248, 243, 0.32), transparent 38%),
    radial-gradient(circle at 78% 34%, rgba(98, 189, 93, 0.2), transparent 44%);
  opacity: calc(0.48 + var(--journey-payoff) * 0.38);
}

.consultation-cta__art::after {
  inset: 1px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44);
}

.consultation-cta__image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: 66% center;
  opacity: calc(0.34 + var(--journey-payoff) * 0.66);
  transform:
    translate3d(calc((1 - var(--journey-payoff)) * 72px), 0, 0)
    scale(calc(0.92 + var(--journey-payoff) * 0.08));
  transform-origin: 72% center;
}

.consultation-cta__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: calc(var(--journey-payoff) * 0.92);
  mix-blend-mode: normal;
  pointer-events: none;
}

.consultation-cta__video:not([data-video-ready="true"]) {
  opacity: 0;
}

.consultation-cta[data-journey-payoff-state="approaching"] .consultation-cta__video {
  will-change: opacity;
}

.consultation-cta[data-journey-payoff-state="approaching"] .consultation-cta__image {
  will-change: transform, opacity;
}

.consultation-cta__thread {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 3;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-fresh), rgba(98, 189, 93, 0));
  box-shadow: 0 0 20px rgba(98, 189, 93, 0.38);
  opacity: calc(0.22 + var(--journey-payoff) * 0.78);
  transform: scaleX(var(--journey-payoff));
  transform-origin: left;
}

.project-gallery {
  background: var(--surface-canvas);
}

.contact-details {
  background: var(--surface-canvas);
}

.project-gallery > h2,
.principles > h2,
.contact-details > h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
}

.project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: clamp(54px, 8vw, 118px) clamp(24px, 4vw, 64px);
  margin-top: clamp(52px, 8vw, 108px);
}

.project-card {
  min-width: 0;
  grid-column: span 7;
  background: transparent;
}

.project-card:nth-child(even) {
  grid-column: span 5;
  margin-top: clamp(54px, 8vw, 112px);
}

.project-card:last-child:nth-child(odd) {
  grid-column: 3 / span 8;
}

.project-card figure {
  margin: 0;
}

.project-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: clamp(18px, 2.4vw, 32px);
  background: var(--surface-sage);
  box-shadow: 0 20px 54px rgba(0, 105, 56, 0.1);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover img {
  transform: scale(1.012);
}

.project-card figcaption {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px;
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--line-brand);
}

.project-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.project-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
}

.principles {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  background: var(--surface-raised);
}

.principles > .section-kicker {
  grid-column: 1 / -1;
}

.principles > h2 {
  grid-column: 1 / span 4;
}

.principles__grid {
  grid-column: 5 / -1;
  border-top: 1px solid var(--line-brand);
  counter-reset: principle;
}

.principle-card {
  display: grid;
  grid-template-columns: 54px minmax(170px, 0.75fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(30px, 4vw, 54px) 0;
  border-bottom: 1px solid var(--line-brand);
  counter-increment: principle;
}

.principle-card::before {
  color: var(--brand-deep);
  content: "0" counter(principle);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.principle-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.4vw, 36px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

.principle-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.65;
}

.contact-details__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(52px, 8vw, 98px);
  border-top: 1px solid var(--line-brand);
  border-bottom: 1px solid var(--line-brand);
}

.contact-channel {
  min-width: 0;
  min-height: 260px;
  padding: clamp(30px, 4vw, 54px);
  background: transparent;
}

.contact-channel + .contact-channel {
  border-left: 1px solid var(--line-brand);
}

.contact-channel h3 {
  margin: 0 0 clamp(66px, 9vw, 118px);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.contact-channel a,
.contact-channel address {
  display: inline;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: clamp(21px, 2.3vw, 36px);
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration-color: var(--brand-fresh);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

.contact-channel a {
  display: inline-flex;
  min-height: 44px;
  max-width: 100%;
  align-items: center;
}

.site-footer {
  position: relative;
  grid-template-columns: minmax(280px, 1.25fr) repeat(2, minmax(180px, 0.75fr));
  gap: clamp(42px, 6vw, 96px);
  border-top: 1px solid var(--line-brand);
  isolation: isolate;
}

.site-footer::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 72px;
  background: linear-gradient(to top, rgba(237, 245, 236, 0.92), rgba(247, 248, 243, 0));
  content: "";
  pointer-events: none;
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

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

.site-footer address a {
  color: var(--brand-deep);
}

.site-footer nav h2 {
  color: var(--text-strong);
}

.site-footer nav ul {
  border-top-color: var(--line-brand);
}

.site-footer nav a {
  border-bottom-color: var(--line-brand);
  color: var(--text-muted);
}

.site-footer nav a:hover {
  color: var(--brand-deep);
}

@media (max-width: 820px) {
  .experience-journey__intro,
  .experience-journey__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .experience-journey__visual {
    position: relative;
    top: auto;
    height: min(72vw, 520px);
    min-height: 360px;
    border-radius: clamp(26px, 7vw, 42px);
  }

  .experience-journey[data-journey-scene="services"] .experience-journey__visual {
    height: clamp(280px, 56vw, 410px);
    min-height: 280px;
  }

  .experience-journey[data-journey-scene="services"] .experience-journey__material {
    width: 112%;
    height: 110%;
  }

  .experience-journey__orbit {
    width: clamp(240px, 62vw, var(--orbit-mobile-max));
  }

  .experience-journey__chapter {
    min-height: 0;
  }

  .page-hero--text .page-hero__content {
    justify-content: center;
    min-height: inherit;
    padding: clamp(64px, 10vw, 96px) var(--page-gutter);
  }

  .project-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px 24px;
  }

  .project-card,
  .project-card:nth-child(even),
  .project-card:last-child:nth-child(odd) {
    grid-column: auto;
    margin-top: 0;
  }

  .project-card figcaption {
    grid-template-columns: minmax(0, 1fr);
  }

  .principles > h2,
  .principles__grid {
    grid-column: 1 / -1;
  }

  .principles__grid {
    margin-top: 52px;
  }

  .principle-card {
    grid-template-columns: 46px minmax(150px, 0.75fr) minmax(0, 1fr);
  }

  .contact-details__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-channel {
    min-height: 0;
  }

  .contact-channel + .contact-channel {
    border-top: 1px solid var(--line-brand);
    border-left: 0;
  }

  .consultation-cta {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(54px, 10vw, 84px);
  }

  .consultation-cta__art {
    min-height: clamp(360px, 76vw, 540px);
  }

  .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__identity {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .experience-journey {
    padding: 82px var(--page-gutter);
  }

  .experience-journey__intro {
    margin-bottom: 54px;
  }

  .experience-journey__intro h2 {
    font-size: clamp(42px, 13vw, 62px);
  }

  .experience-journey__visual {
    min-height: 280px;
  }

  .experience-journey[data-journey-scene="services"] .experience-journey__visual {
    height: min(62vw, 320px);
    min-height: 240px;
  }

  .experience-journey[data-journey-scene="services"] .experience-journey__material {
    width: 110%;
    height: 108%;
  }

  .experience-journey[data-journey-scene="services"] :is(
    .experience-journey__plane--two,
    .experience-journey__plane--three
  ) {
    display: none;
  }

  .experience-journey__chapter article {
    grid-template-columns: minmax(0, 1fr);
  }

  .experience-journey__index,
  .experience-journey__chapter p,
  .experience-journey__chapter ul {
    grid-column: 1;
    grid-row: auto;
  }

  .experience-journey__index {
    margin-bottom: 18px;
    padding-top: 0;
  }

  .consultation-cta__phone {
    margin: 18px 0 0;
    min-height: 48px;
  }

  .consultation-cta__content {
    margin-left: 0;
    padding-left: 24px;
  }

  .consultation-cta__art {
    min-height: clamp(320px, 92vw, 460px);
    border-radius: clamp(24px, 8vw, 38px);
  }

  .page-hero--text h1 {
    font-size: clamp(46px, 14vw, 68px);
  }

  .project-gallery__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 64px;
  }

  .project-card,
  .project-card:nth-child(even),
  .project-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .principle-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .contact-details__grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 46px;
  }

  .contact-channel {
    padding: 32px 0;
  }

  .contact-channel h3 {
    margin-bottom: 42px;
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr);
    gap: 52px;
  }

  .site-footer__identity {
    grid-column: auto;
  }

  .site-footer::before {
    height: 48px;
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .experience-journey__layout,
  .consultation-cta {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .experience-journey__visual {
    position: relative;
    top: auto;
    height: 260px;
    min-height: 0;
  }

  .experience-journey[data-journey-scene="services"] .experience-journey__visual {
    height: 220px;
  }

  .experience-journey[data-journey-scene="services"] .experience-journey__material {
    width: 110%;
    height: 108%;
  }

  .experience-journey[data-journey-scene="services"] :is(
    .experience-journey__plane--two,
    .experience-journey__plane--three
  ) {
    display: none;
  }

  .experience-journey__chapter {
    min-height: 0;
  }

  .consultation-cta {
    min-height: 0;
    padding-block: 56px;
  }

  .consultation-cta__art {
    min-height: 280px;
  }
}

@media (hover: none), (pointer: coarse) {
  .project-card:hover img {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .experience-journey__progress::after,
  .experience-journey__chapter {
    transform: none !important;
    transition: none !important;
  }

  .experience-journey__orbit,
  .experience-journey__plane,
  .experience-journey__datum {
    transition: none !important;
  }

  .experience-journey__material {
    filter: saturate(0.92) contrast(1) brightness(1.04);
    transform:
      translate3d(
        calc(
          -50% + var(--material-base-pan-x) + var(--material-pan-x) +
            var(--material-drift-x)
        ),
        calc(-50% + var(--material-pan-y) + var(--material-drift-y)),
        0
      )
      rotate(var(--material-rotation))
      scale(var(--material-scale)) !important;
    transition: none;
  }

  .experience-journey__material-video {
    transition: none;
  }

  .experience-journey__chapter {
    opacity: 1 !important;
  }

  .consultation-cta::before,
  .consultation-cta__image,
  .consultation-cta__thread {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .project-card img,
  .project-card:hover img {
    transform: none;
    transition: none;
  }
}