@font-face {
      font-family: "NHaasGrotesk";
      src: url("Fonts/NHaasGroteskDSPro-45Lt.ttf") format("truetype");
      font-weight: 300;
      font-style: normal;
    }

    @font-face {
      font-family: "NHaasGrotesk";
      src: url("Fonts/NHaasGroteskDSPro-55Rg.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
    }

    @font-face {
      font-family: "NHaasGrotesk";
      src: url("Fonts/NHaasGroteskDSPro-65Md.ttf") format("truetype");
      font-weight: 500;
      font-style: normal;
    }

    @font-face {
      font-family: "NHaasGrotesk";
      src: url("Fonts/NHaasGroteskDSPro-75Bd.ttf") format("truetype");
      font-weight: 700;
      font-style: normal;
    }

    @font-face {
      font-family: "NHaasGrotesk";
      src: url("Fonts/NHaasGroteskDSPro-95Blk.ttf") format("truetype");
      font-weight: 800;
      font-style: normal;
    }

    :root {
      --font: "NHaasGrotesk", "Segoe UI", sans-serif;
      --ink: #f3f7f2;
      --ink-soft: rgba(243, 247, 242, 0.84);
      --bg-deep: #0b1318;
      --bg-mid: #12212a;
      --accent: #e95d40;
      --ft-blue: #00A7E1;
    }

    * { box-sizing: border-box; }

    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
    }

    html {
      margin: 0;
      padding: 0;
      font-family: "NHaasGrotesk", "Segoe UI", sans-serif;
      color: var(--ink);
      background: var(--bg-deep);
    }

    body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    .brandbar {
      position: fixed;
      top: 0;
      left: max(4vw, calc((100vw - 1240px) / 2));
      z-index: 30;
      padding: 20px 20px 20px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 14px;
      border-radius: 0 0 14px 14px;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-top: 0;
      background: #ffffff;
      backdrop-filter: blur(10px);
      /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); */
    }

    .brandbar .logo {
      height: clamp(22px, 2.8vw, 28px);
      width: auto;
      display: block;
      filter: none;
    }

    .brandbar a {
      display: inline-flex;
      line-height: 0;
      text-decoration: none;
    }

    .brandbar .fairtrade-logo {
      transform: scale(1.7);
      transform-origin: left center;
    }

    .brandbar .zure-logo {
      transform: none;
      transform-origin: center;
    }

    .brandbar .zure-wrap {
      background: transparent;
      padding: 0;
      line-height: 0;
    }

    .brandbar .x {
      font-family: "NHaasGrotesk", "Segoe UI", sans-serif;
      font-size: 0.95rem;
      letter-spacing: 0.06em;
      width: 20px;
      color: #111111;
      opacity: 1;
    }

    .story {
      width: 100%;
      height: 100svh;
      overflow-y: auto;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
    }

    .scene {
      position: relative;
      min-height: 100svh;
      width: 100%;
      display: grid;
      align-items: end;
      overflow: hidden;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    .scene-media {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .scene-media img,
    .scene-media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1);
      filter: saturate(1.06) contrast(1.05);
    }

    @media (prefers-reduced-motion: reduce) {
      html,
      .story {
        scroll-behavior: auto;
      }

      .scene-media video {
        animation: none !important;
      }
    }

    .scene-media.satellite img {
      filter: saturate(1.06) contrast(1.35);
    }

    .scene::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(8, 12, 16, 0), rgba(8, 12, 16, 0.35) 42%, rgba(8, 12, 16, 0.7));
    }

    .scene-copy {
      position: relative;
      z-index: 2;
      width: min(1240px, 92vw);
      margin: 0 auto;
      padding: clamp(100px, 12vh, 130px) 0 clamp(48px, 8vh, 80px);
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 560ms ease, transform 560ms ease;
    }

    .scene.in-view .scene-copy {
      opacity: 1;
      transform: translateY(0);
    }

    .hero-title {
      margin: 0;
      max-width: 9.5ch;
      font-size: clamp(3rem, 10vw, 8rem);
      line-height: 0.92;
      letter-spacing: -0.02em;
      text-wrap: balance;
      text-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    }

    .hero-sub {
      margin: clamp(18px, 2.8vw, 26px) 0 0;
      max-width: 56ch;
      font-size: clamp(1.08rem, 2vw, 1.34rem);
      line-height: 1.6;
      color: var(--ink-soft);
    }

    .scene.hero .scene-media img {
      transform: scale(1.05);
      animation: heroSkyDrift 26s ease-in-out infinite alternate;
      will-change: transform;
    }

    @keyframes heroSkyDrift {
      0% {
        transform: scale(1.08) translateY(-1.6%);
      }
      50% {
        transform: scale(1.08) translateY(1.6%);
      }
      100% {
        transform: scale(1.08) translateY(-1.6%);
      }
    }

    .scene-title {
      margin: 0;
      max-width: 12ch;
      font-size: clamp(2.2rem, 7vw, 5.2rem);
      line-height: 0.95;
      letter-spacing: -0.01em;
      text-wrap: balance;
      text-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    }

    .scene-body {
      margin: 16px 0 0;
      max-width: 58ch;
      font-size: clamp(1rem, 1.6vw, 1.2rem);
      line-height: 1.7;
      color: var(--ink-soft);
    }

    .scene-right .scene-copy {
      text-align: right;
      margin-left: auto;
    }

    .scene-right .scene-title,
    .scene-right .scene-body {
      margin-left: auto;
    }

    .scene-alt {
      background: linear-gradient(180deg, var(--bg-mid), var(--bg-deep));
    }

    .scene-alt .scene-copy {
      padding-top: clamp(96px, 14vh, 140px);
    }

    .sat-alerts {
      position: absolute;
      right: max(4vw, calc((100vw - 1240px) / 2));
      top: 0;
      bottom: 0;
      z-index: 5;
      width: clamp(280px, 36vw, 500px);
      pointer-events: none;
    }

    .sat-alert {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 32px 18px 24px;
      border-radius: 60px;
      font-family: "NHaasGrotesk", "Segoe UI", sans-serif;
      font-weight: 700;
      font-size: clamp(1.2rem, 2.4vw, 1.7rem);
      white-space: nowrap;
      opacity: 0;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
      transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: transform, opacity;
      --sat-glow: 210, 210, 210;
    }

    .sat-alert .sat-icon {
      font-size: 1.4em;
      line-height: 1;
      flex-shrink: 0;
    }

    .sat-alert::before {
      content: "";
      position: absolute;
      width: 2px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 600ms ease 200ms;
      border-radius: 0 0 4px 4px;
      z-index: -1;
    }

    .sat-alert.visible::before {
      opacity: 1;
      animation: satLinePulse 4.8s ease-in-out 200ms infinite;
    }

    /* Danger: line from RIGHT side, angling down-right */
    .sat-alert.alert-danger::before {
      top: 100%;
      left: 50%;
      height: 180px;
      transform: translateX(-50%) rotate(-25deg);
      transform-origin: top center;
      background: linear-gradient(180deg, rgba(255, 220, 220, 0.8), rgba(255, 220, 220, 0.08));
      box-shadow: 0 4px 14px 3px rgba(255, 180, 180, 0.5);
    }

    /* Warn: line from LEFT side, angling down-left */
    .sat-alert.alert-warn::before {
      top: 100%;
      left: 50%;
      height: 140px;
      transform: translateX(-50%) rotate(20deg);
      transform-origin: top center;
      background: linear-gradient(180deg, rgba(230, 215, 245, 0.8), rgba(230, 215, 245, 0.08));
      box-shadow: 0 4px 14px 3px rgba(200, 180, 230, 0.5);
    }

    /* Ok: line from RIGHT side, angling down-right */
    .sat-alert.alert-ok::before {
      top: 100%;
      left: 50%;
      height: 120px;
      transform: translateX(-50%) rotate(-10deg);
      transform-origin: top center;
      background: linear-gradient(180deg, rgba(212, 245, 220, 0.8), rgba(212, 245, 220, 0.08));
      box-shadow: 0 4px 14px 3px rgba(180, 230, 190, 0.5);
    }

    .sat-alert.alert-danger {
      top: 30%;
      right: 1%;
      transform: perspective(600px) rotateX(18deg) rotateY(-25deg) rotateZ(4deg) scale(0.15);
    }

    .sat-alert.alert-warn {
      top: 48%;
      right: 24%;
      transform: perspective(600px) rotateX(-12deg) rotateY(20deg) rotateZ(-6deg) scale(0.15);
    }

    .sat-alert.alert-ok {
      top: 62%;
      right: 2%;
      transform: perspective(600px) rotateX(8deg) rotateY(-15deg) rotateZ(3deg) scale(0.15);
    }

    .sat-alert.visible {
      opacity: 1;
    }

    .sat-alert.alert-danger.visible {
      transform: perspective(600px) rotateX(4deg) rotateY(-8deg) rotateZ(2deg) scale(1);
      animation: satBadgePulse 4.8s ease-in-out 200ms infinite;
    }

    .sat-alert.alert-warn.visible {
      transform: perspective(600px) rotateX(-3deg) rotateY(6deg) rotateZ(-2deg) scale(1);
      animation: satBadgePulse 4.8s ease-in-out 200ms infinite;
    }

    .sat-alert.alert-ok.visible {
      transform: perspective(600px) rotateX(2deg) rotateY(-4deg) rotateZ(1deg) scale(1);
      animation: satBadgePulse 4.8s ease-in-out 200ms infinite;
    }

    .sat-alert.alert-danger {
      background: rgba(255, 220, 220, 0.92);
      color: #c62828;
      --sat-glow: 255, 180, 180;
    }

    .sat-alert.alert-ok {
      background: rgba(212, 245, 220, 0.92);
      color: #1b5e20;
      --sat-glow: 180, 230, 190;
    }

    .sat-alert.alert-warn {
      background: rgba(230, 215, 245, 0.92);
      color: #6a1b9a;
      --sat-glow: 200, 180, 230;
    }

    @keyframes satBadgePulse {
      0%,
      100% {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 18px 4px rgba(var(--sat-glow), 0.26);
      }
      50% {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 38px 12px rgba(var(--sat-glow), 0.58);
      }
    }

    @keyframes satLinePulse {
      0%,
      100% {
        opacity: 0.94;
        filter: drop-shadow(0 0 8px rgba(var(--sat-glow), 0.45));
      }
      50% {
        opacity: 1;
        filter: drop-shadow(0 0 18px rgba(var(--sat-glow), 0.88));
      }
    }

    .scene-metric::after {
      background: linear-gradient(180deg, rgba(8, 12, 16, 0), rgba(8, 12, 16, 0.35) 42%, rgba(8, 12, 16, 0.7))
    }

    .scene-metric .scene-copy {
      width: min(1240px, 92vw);
      padding-top: clamp(90px, 11vh, 120px);
      display: grid;
      gap: 28px;
    }

    .metric-intro {
      max-width: 24ch;
      margin: 0;
      font-size: clamp(2.1rem, 6vw, 4.6rem);
      line-height: 0.94;
      letter-spacing: -0.02em;
      text-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(10px, 1.4vw, 18px);
    }

    .metric-item {
      border: none;
      border-radius: 20px;
      background: rgba(7, 11, 15, 0.55);
      min-height: 170px;
      padding: 18px 18px 20px;
      display: grid;
      align-content: start;
      gap: 10px;
      backdrop-filter: blur(6px);
      opacity: 0;
      transform: translateY(24px) scale(0.98);
      transition: opacity 520ms ease, transform 520ms ease;
    }

    .scene-metric.in-view .metric-item {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    .scene-metric.in-view .metric-item:nth-child(1) {
      transition-delay: 80ms;
    }

    .scene-metric.in-view .metric-item:nth-child(2) {
      transition-delay: 180ms;
    }

    .scene-metric.in-view .metric-item:nth-child(3) {
      transition-delay: 280ms;
    }

    .metric-value {
      margin: 0;
      font-size: clamp(2.2rem, 7vw, 5.4rem);
      line-height: 0.9;
      letter-spacing: -0.03em;
      color: #ffffff;
    }

    .metric-label {
      margin: 0;
      max-width: 24ch;
      font-size: clamp(1rem, 1.6vw, 1.16rem);
      line-height: 1.45;
      color: var(--ink-soft);
    }

    .scene-impact::after {
      background: linear-gradient(180deg, rgba(8, 12, 16, 0), rgba(8, 12, 16, 0.35) 42%, rgba(8, 12, 16, 0.7))
    }

    .scene-impact {
      --proof-progress: 0;
      align-items: center;
    }

    .scene-impact .scene-copy {
      width: min(1240px, 92vw);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(18px, 3vw, 40px);
      align-items: center;
    }

    .impact-lede {
      margin: 0;
      font-size: clamp(2.2rem, 7vw, 5.3rem);
      line-height: 0.9;
      letter-spacing: -0.02em;
      max-width: 12ch;
      text-shadow: 0 10px 26px rgba(0, 0, 0, 0.34);
    }

    .impact-lede .impact-word {
      color: #ffffff;
      font-weight: inherit;
      transition: opacity 380ms ease, transform 380ms ease, text-shadow 380ms ease;
    }

    .impact-word {
      display: inline-block;
      opacity: 1;
      transform: translateY(0px);
      text-shadow: none;
    }

    .scene-impact.emphasis-days .impact-word.days {
      transform: translateY(0);
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }

    .months-phrase {
      position: relative;
      display: inline;
      white-space: nowrap;
      opacity: 1;
      transition: opacity 420ms ease 100ms;
    }

    .scene-impact.emphasis-days .months-phrase {
      opacity: 0.5;
    }

    .months-phrase::after {
      content: "";
      position: absolute;
      left: 0;
      top: 48%;
      height: 3px;
      width: 0;
      background: rgba(255, 255, 255, 0.82);
      border-radius: 2px;
      transform: translateY(-50%);
      transition: width 520ms cubic-bezier(0.4, 0, 0.2, 1) 180ms;
    }

    .scene-impact.emphasis-days .months-phrase::after {
      width: 100%;
    }

    .impact-proof {
      border: none;
      border-radius: 20px;
      background: rgba(8, 12, 16, 0.62);
      padding: clamp(18px, 2vw, 28px);
      backdrop-filter: blur(7px);
      justify-self: end;
      width: min(420px, 100%);
    }

    .impact-proof-compliance {
      margin: 0;
      font-size: clamp(1.6rem, 4vw, 3rem);
      line-height: 0.95;
      letter-spacing: -0.02em;
      color: #ffffff;
      text-transform: uppercase;
    }

    .impact-proof-compliance span {
      font-size: 0.5em;
      padding-left: 10px;
      letter-spacing: 0.03em;
      font-weight: 400;
      vertical-align: baseline;
      text-transform: none;
    }

    .impact-proof-divider {
      height: 1px;
      border: 0;
      margin: 16px 0 14px;
      background: rgba(255, 255, 255, 0.28);
    }

    .impact-proof-number {
      margin: 0;
      font-size: clamp(3.2rem, 9vw, 7rem);
      line-height: 0.86;
      letter-spacing: -0.03em;
      color: #ffffff;
      opacity: calc(0.2 + (var(--proof-progress) * 0.8));
      transform: scale(calc(0.98 + (var(--proof-progress) * 0.02)));
      transform-origin: left center;
      transition: opacity 120ms linear, transform 120ms linear;
    }

    .impact-proof-row {
      display: flex;
      align-items: baseline;
      gap: 0.5em;
    }

    .impact-proof-suffix {
      font-size: clamp(1.3rem, 3vw, 2rem);
      font-weight: 400;
      color: #ffffff;
      letter-spacing: -0.01em;
      padding-left: 10px;
    }

    .impact-proof-text {
      margin: 10px 0 0;
      font-size: clamp(1rem, 1.5vw, 1.12rem);
      line-height: 1.6;
      color: var(--ink-soft);
      max-width: 42ch;
    }

    .impact-proof-subtext {
      margin-top: 0;
    }

    .scene-flowbeat::after {
      background: linear-gradient(180deg, rgba(8, 12, 16, 0), rgba(8, 12, 16, 0.35) 42%, rgba(8, 12, 16, 0.7))
    }

    .scene-body .flow-highlight {
      color: #D4FF47;
      font-weight: inherit;
    }

    .scene-flowbeat .scene-copy {
      width: min(1240px, 92vw);
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      align-items: center;
      gap: clamp(24px, 4vw, 60px);
    }

    .flow-stage {
      position: relative;
      width: 100%;
      aspect-ratio: 1.87 / 1;
      border-radius: 10px;
      overflow: visible;
      background: #f5f6f3;
      box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .flow-node {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      margin: 0;
      border-radius: 10px;
      background: #ffffff;
      opacity: 0;
      transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms ease;
    }

    .flow-node img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      display: block;
    }

    .flow-node.queued {
      z-index: 0;
      opacity: 0.15;
      transform: translateX(6%) translateY(-52%) rotate(-3deg);
    }

    .flow-node.next {
      z-index: 1;
      opacity: 0.35;
      transform: translateX(3%) translateY(-26%) rotate(-1.5deg);
    }

    .flow-node.active {
      z-index: 2;
      opacity: 1;
      transform: none;
    }

    .flow-node.active img {
      animation: flowKenBurns 10s ease-in-out forwards;
    }

    @keyframes flowKenBurns {
      0% {
        transform: scale(1) translate(0, 0);
      }
      12% {
        transform: scale(1.5) translate(2.5%, 1.5%);
      }
      65% {
        transform: scale(1.5) translate(-15.0%, -15.0%);
      }
      100% {
        transform: scale(1) translate(0, 0);
      }
    }

    .contact-overlay {
      position: fixed;
      inset: 0;
      z-index: 100;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
    }

    .contact-overlay.open {
      opacity: 1;
      pointer-events: auto;
    }

    .contact-dialog {
      background: linear-gradient(135deg, rgba(17, 29, 36, 0.95), rgba(11, 19, 24, 0.95));
      border: 1px solid rgba(0, 167, 225, 0.2);
      border-radius: 12px;
      width: min(94vw, 520px);
      max-height: 90svh;
      overflow-y: auto;
      padding: clamp(28px, 5vw, 48px);
      position: relative;
      transform: translateY(20px);
      transition: transform 0.35s ease;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
    }

    .contact-overlay.open .contact-dialog {
      transform: translateY(0);
    }

    .contact-dialog-close {
      position: absolute;
      top: 16px;
      right: 16px;
      background: none;
      border: none;
      color: var(--ink-soft);
      font-size: 1.5rem;
      cursor: pointer;
      line-height: 1;
      padding: 4px 8px;
      transition: color 0.2s;
    }

    .contact-dialog-close:hover {
      color: #fff;
    }

    .contact-dialog h3 {
      font-family: var(--font);
      font-weight: 700;
      font-size: clamp(1.4rem, 3vw, 1.8rem);
      color: #fff;
      margin: 0 0 28px;
      line-height: 1.15;
    }

    .contact-field {
      margin-bottom: 18px;
    }

    .contact-field label {
      display: block;
      font-family: var(--font);
      font-weight: 500;
      font-size: 0.85rem;
      color: var(--ink-soft);
      margin-bottom: 6px;
      letter-spacing: 0.01em;
    }

    .contact-field label .optional {
      font-weight: 400;
      opacity: 0.5;
      font-size: 0.8rem;
    }

    .contact-field input,
    .contact-field textarea,
    .contact-field select {
      width: 100%;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      color: #fff;
      font-family: var(--font);
      font-size: 0.95rem;
      padding: 12px 14px;
      outline: none;
      transition: all 0.25s ease;
      box-sizing: border-box;
    }

    .contact-field select option {
      background: #fff;
      color: #111;
    }

    .contact-field input:focus,
    .contact-field textarea:focus,
    .contact-field select:focus {
      border-color: var(--ft-blue);
      background: rgba(0, 167, 225, 0.08);
      box-shadow: 0 0 12px rgba(0, 167, 225, 0.2);
    }

    .contact-field input.invalid,
    .contact-field textarea.invalid {
      border-color: #e05252;
    }

    .contact-field .field-error {
      color: #e05252;
      font-size: 0.78rem;
      margin-top: 4px;
      display: none;
    }

    .contact-field input.invalid + .field-error,
    .contact-field .phone-row.invalid ~ .field-error {
      display: block;
    }

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

    .phone-row {
      display: flex;
      gap: 8px;
    }

    .phone-row select {
      width: 110px;
      flex-shrink: 0;
      cursor: pointer;
    }

    .phone-row input {
      flex: 1;
      min-width: 0;
    }

    .contact-submit {
      margin-top: 26px;
      width: 100%;
      padding: 14px 24px;
      background: var(--ft-blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-family: var(--font);
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      letter-spacing: 0.01em;
      transition: all 0.25s ease;
    }

    .contact-submit:hover {
      background: #0088B8;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 167, 225, 0.3);
    }

    .contact-submit:active {
      transform: translateY(0);
    }

    .contact-success {
      text-align: center;
      padding: 40px 0;
    }

    .contact-success h3 {
      margin-bottom: 12px;
    }

    .contact-success p {
      color: var(--ink-soft);
      font-size: 0.95rem;
      line-height: 1.6;
    }

    /* Testimonials */
    .scene-testimonials {
      background: linear-gradient(180deg, #0e1920, #0b1318);
      align-items: center;
    }

    .scene-testimonials .scene-copy {
      display: flex;
      flex-direction: column;
      gap: clamp(28px, 4vh, 48px);
      padding-top: clamp(80px, 10vh, 120px);
      padding-bottom: clamp(80px, 10vh, 120px);
    }

    .testimonial {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 0 clamp(20px, 2.5vw, 32px);
      max-width: 1020px;
      position: relative;
      padding-bottom: 20px;
    }

    .testimonial::before {
      content: "\201D";
      position: absolute;
      top: 2px;
      left: calc(clamp(64px, 7vw, 88px) - 8px);
      transform: translateX(-50%);
      display: block;
      font-size: clamp(3.8rem, 7.2vw, 5.2rem);
      line-height: 0.7;
      font-family: Georgia, "Times New Roman", serif;
      color: #ffffff;
      font-weight: 700;
      z-index: 3;
      pointer-events: none;
    }

    .testimonial-avatar {
      width: clamp(64px, 7vw, 88px);
      height: clamp(64px, 7vw, 88px);
      border-radius: 50%;
      object-fit: cover;
      grid-row: 1 / 3;
      align-self: start;
      margin-top: 4px;
      border: 2px solid rgba(243, 247, 242, 0.12);
    }

    .testimonial blockquote {
      margin: 0;
      font-size: clamp(1.2rem, 2.2vw, 1.6rem);
      line-height: 1.55;
      color: var(--ink);
      font-weight: 300;
      letter-spacing: 0.005em;
    }

    .testimonial blockquote::before {
      content: none;
    }

    .testimonial-meta {
      margin-top: 20px;
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-size: 1rem;
      letter-spacing: 0.03em;
    }

    .testimonial-name {
      color: var(--ink);
      font-weight: 500;
    }

    .testimonial-title {
      color: var(--ink-soft);
      font-weight: 300;
    }

    .testimonial:nth-child(even) {
      justify-self: end;
    }

    .closing {
      min-height: 100svh;
      background: linear-gradient(180deg, rgba(10, 17, 22, 0.85), rgba(10, 17, 22, 0.76)), url("Images/zure-photo.jpg");
      background-size: cover;
      background-position: center;
      display: grid;
      align-items: center;
      scroll-snap-align: start;
      scroll-snap-stop: always;
    }

    /* Progress indicator */
    .scroll-progress {
      position: fixed;
      right: max(2.4vw, 20px);
      top: 50%;
      transform: translateY(-50%);
      z-index: 40;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    .scroll-progress .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 1.5px solid rgba(243, 247, 242, 0.4);
      background: transparent;
      cursor: pointer;
      transition: background 300ms ease, border-color 300ms ease, transform 300ms ease;
      padding: 0;
    }

    .scroll-progress .dot:hover {
      border-color: rgba(243, 247, 242, 0.7);
      transform: scale(1.25);
    }

    .scroll-progress .dot:focus-visible {
      outline: 2px solid #ffffff;
      outline-offset: 3px;
      border-color: #ffffff;
      transform: scale(1.25);
    }

    .scroll-progress .dot.active {
      background: var(--ink);
      border-color: var(--ink);
      transform: scale(1.2);
    }

    .closing .scene-copy {
      opacity: 1;
      transform: none;
      padding-top: clamp(90px, 13vh, 130px);
      padding-bottom: clamp(70px, 12vh, 100px);
    }

    .closing h2 {
      margin: 0;
      max-width: 14ch;
      font-size: clamp(2.3rem, 7vw, 4.8rem);
      line-height: 0.95;
      letter-spacing: -0.02em;
    }

    .closing p {
      margin: 18px 0 0;
      max-width: 56ch;
      font-size: clamp(1rem, 1.7vw, 1.2rem);
      line-height: 1.7;
      color: var(--ink-soft);
    }

    .closing-left a {
      display: inline-block;
      margin-top: 36px;
      background: var(--ft-blue);
      color: #ffffff;
      text-decoration: none;
      font-weight: 700;
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      letter-spacing: 0.01em;
      padding: 16px 36px;
      border: none;
      border-radius: 4px;
      transition: background 0.2s;
    }

    .closing-left a:hover {
      background: #0088B8;
    }

    .closing .contact-alt-cta {
      margin-top: 12px;
      background: transparent;
      border: 1px solid rgba(243, 247, 242, 0.6);
    }

    .closing .contact-alt-cta:hover {
      background: rgba(243, 247, 242, 0.14);
    }

    /* Closing section layout */
    .closing-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(20px, 3vw, 40px);
      align-items: start;
      width: 100%;
      min-height: clamp(420px, 56vh, 640px);
    }

    .closing-left {
      display: flex;
      flex-direction: column;
      gap: 0;
      align-self: center;
    }

    .closing-left h2 {
      margin: 0;
    }

    .closing-left p {
      margin: 18px 0 0;
    }

    .closing-left a {
      display: inline-block;
      margin-top: 36px;
      width: fit-content;
    }

    .closing-form-wrapper {
      display: block;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      align-self: start;
      transform: translateY(12px);
      transition: max-height 0.55s ease, opacity 0.35s ease, transform 0.35s ease;
    }

    .closing-form-wrapper.open {
      max-height: 1400px;
      opacity: 1;
      transform: translateY(0);
    }

    .closing-form-wrapper.loading .hubspot-form-wrap {
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
    }

    .closing-form-wrapper.ready .hubspot-form-wrap {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    .form-loading {
      display: none;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      padding: 14px 16px;
      border-radius: 8px;
      background: rgba(0, 167, 225, 0.12);
      border: 1px solid rgba(0, 167, 225, 0.35);
      color: #d9f5ff;
      font-size: 0.95rem;
      line-height: 1.4;
    }

    .closing-form-wrapper.loading .form-loading {
      display: inline-flex;
    }

    .form-loading-spinner {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(217, 245, 255, 0.28);
      border-top-color: #9de7ff;
      animation: formSpin 0.9s linear infinite;
      flex-shrink: 0;
    }

    @keyframes formSpin {
      to {
        transform: rotate(360deg);
      }
    }

    #contactCta[aria-busy="true"] {
      opacity: 0.82;
      pointer-events: none;
    }

    .contact-dialog--hubspot {
      width: min(94vw, 760px);
    }

    .hubspot-form-wrap {
      min-height: 420px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.28s ease, transform 0.28s ease;
    }

    /* HubSpot Form Styling */
    .hubspot-form-wrap .hs-form {
      font-family: "NHaasGrotesk", "Segoe UI", sans-serif;
    }

    .hubspot-form-wrap .hs-fieldtype-textarea,
    .hubspot-form-wrap .hs-fieldtype-text,
    .hubspot-form-wrap .hs-fieldtype-email,
    .hubspot-form-wrap .hs-fieldtype-tel,
    .hubspot-form-wrap .hs-fieldtype-select {
      margin-bottom: 18px;
    }

    /* Two-column layout for key fields on desktop only */
    @media (min-width: 601px) {
      .hubspot-form-wrap .hs_lastname,
      .hubspot-form-wrap .hs_company,
      .hubspot-form-wrap .hs_email,
      .hubspot-form-wrap .hs_mobilephone {
        width: calc(50% - 10px) !important;
        float: left !important;
        clear: none !important;
      }

      .hubspot-form-wrap .hs_lastname,
      .hubspot-form-wrap .hs_email {
        margin-right: 20px !important;
      }

      .hubspot-form-wrap .hs_company,
      .hubspot-form-wrap .hs_mobilephone {
        margin-right: 0 !important;
      }

      .hubspot-form-wrap .hs_mobilephone {
        clear: right !important;
      }
    }

    .hubspot-form-wrap .hs-form fieldset {
      max-width: 100%;
    }

    .hubspot-form-wrap .hs-form .hs-form-field {
      width: 100% !important;
      float: none !important;
    }

    /* Two-column overrides for hs-form scoped fields — desktop only */
    @media (min-width: 601px) {
      .hubspot-form-wrap .hs-form .hs_lastname,
      .hubspot-form-wrap .hs-form .hs_company,
      .hubspot-form-wrap .hs-form .hs_email,
      .hubspot-form-wrap .hs-form .hs_mobilephone {
        width: calc(50% - 10px) !important;
        float: left !important;
        clear: none !important;
      }

      .hubspot-form-wrap .hs-form .hs_lastname,
      .hubspot-form-wrap .hs-form .hs_email {
        margin-right: 20px !important;
      }

      .hubspot-form-wrap .hs-form .input {
        margin-right: 0 !important;
      }
    }

    .hubspot-form-wrap label {
      display: block;
      font-family: "NHaasGrotesk", "Segoe UI", sans-serif;
      font-weight: 500;
      font-size: 0.85rem;
      color: var(--ink-soft);
      margin-bottom: 6px;
      letter-spacing: 0.01em;
    }

    .hubspot-form-wrap .hs-input,
    .hubspot-form-wrap textarea,
    .hubspot-form-wrap select,
    .hubspot-form-wrap input[type="text"],
    .hubspot-form-wrap input[type="email"],
    .hubspot-form-wrap input[type="tel"] {
      width: 100%;
      background: rgba(255, 255, 255, 0.16);
      border: 1px solid rgba(255, 255, 255, 0.42);
      border-radius: 6px;
      color: #fff;
      font-family: "NHaasGrotesk", "Segoe UI", sans-serif;
      font-size: 0.95rem;
      padding: 12px 14px;
      outline: none;
      transition: all 0.25s ease;
      box-sizing: border-box;
    }

    .hubspot-form-wrap .hs-input:focus,
    .hubspot-form-wrap textarea:focus,
    .hubspot-form-wrap select:focus,
    .hubspot-form-wrap input[type="text"]:focus,
    .hubspot-form-wrap input[type="email"]:focus,
    .hubspot-form-wrap input[type="tel"]:focus {
      border-color: var(--ft-blue);
      background: rgba(255, 255, 255, 0.22);
      box-shadow: 0 0 0 2px rgba(0, 167, 225, 0.2);
    }

    .hubspot-form-wrap .hs-input::placeholder,
    .hubspot-form-wrap textarea::placeholder,
    .hubspot-form-wrap input[type="text"]::placeholder,
    .hubspot-form-wrap input[type="email"]::placeholder,
    .hubspot-form-wrap input[type="tel"]::placeholder {
      color: rgba(255, 255, 255, 0.78);
    }

    .hubspot-form-wrap textarea {
      resize: vertical;
      min-height: 100px;
    }

    .hubspot-form-wrap .hs-submit {
      margin-top: 28px;
    }

    .hubspot-form-wrap .hs-button,
    .hubspot-form-wrap input[type="submit"],
    .hubspot-form-wrap button {
      width: 100%;
      padding: 14px 24px;
      background: var(--ft-blue);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-family: "NHaasGrotesk", "Segoe UI", sans-serif;
      font-weight: 700;
      font-size: 1rem;
      cursor: pointer;
      letter-spacing: 0.01em;
      transition: all 0.25s ease;
    }

    .hubspot-form-wrap .hs-button:hover,
    .hubspot-form-wrap input[type="submit"]:hover,
    .hubspot-form-wrap button:hover {
      background: #0088B8;
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0, 167, 225, 0.3);
    }

    .hubspot-form-wrap .hs-button:active,
    .hubspot-form-wrap input[type="submit"]:active,
    .hubspot-form-wrap button:active {
      transform: translateY(0);
    }

    .hubspot-form-wrap .hs-error-msgs {
      margin: 6px 0;
      color: #ff6b6b;
      font-size: 0.78rem;
    }

    .hubspot-form-wrap .hs-error-msgs label {
      color: #ff6b6b;
      margin: 0;
    }

    .hubspot-form-wrap .hs-fieldtype-radio,
    .hubspot-form-wrap .hs-fieldtype-checkbox {
      margin-bottom: 18px;
    }

    /* Ensure legal/consent copy below form uses one consistent style */
    .hubspot-form-wrap .legal-consent-container,
    .hubspot-form-wrap .legal-consent-container p,
    .hubspot-form-wrap .legal-consent-container span,
    .hubspot-form-wrap .legal-consent-container label,
    .hubspot-form-wrap .hs-richtext,
    .hubspot-form-wrap .hs-richtext p,
    .hubspot-form-wrap .hs-richtext span {
      font-family: "NHaasGrotesk", "Segoe UI", sans-serif;
      font-size: 0.85rem;
      line-height: 1.45;
      color: var(--ink);
      font-weight: 400;
      letter-spacing: 0;
    }

    .hubspot-form-wrap .legal-consent-container p {
      margin: 0;
    }

    .hubspot-form-wrap .legal-consent-container p + p {
      margin-top: 12px;
    }

    .hubspot-form-wrap .legal-consent-container .hs-richtext,
    .hubspot-form-wrap .legal-consent-container .hs-richtext p {
      margin-top: 12px;
    }

    .hubspot-form-wrap .hs_recaptcha,
    .hubspot-form-wrap .hs-recaptcha {
      margin-top: 14px;
    }

    /* Make Privacy Policy render as a text link, not a button */
    .hubspot-form-wrap .legal-consent-container a,
    .hubspot-form-wrap .hs-richtext a {
      display: inline;
      margin: 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      color: #9bdfff;
      text-decoration: underline;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: 0;
      transition: color 0.2s ease;
    }

    .hubspot-form-wrap .legal-consent-container a:hover,
    .hubspot-form-wrap .hs-richtext a:hover {
      color: #c5efff;
      background: transparent;
      transform: none;
      box-shadow: none;
    }

    .legal-consent-container .hs-form-booleancheckbox-display > span {
      margin-left: 30px !important;
      font-weight: 700;
    }

    /* Remove the list bullet marker from consent checkbox rows */
    .hubspot-form-wrap .inputs-list,
    .hubspot-form-wrap .inputs-list.multi-container {
      list-style: none !important;
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    .hubspot-form-wrap .inputs-list li,
    .hubspot-form-wrap .inputs-list.multi-container li {
      list-style: none !important;
      margin-left: 0 !important;
      padding-left: 0 !important;
    }

    .hubspot-form-wrap .inputs-list li::marker,
    .hubspot-form-wrap .inputs-list.multi-container li::marker {
      content: "";
    }

    .hubspot-form-wrap .hs-fieldtype-radio label,
    .hubspot-form-wrap .hs-fieldtype-checkbox label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 0.9rem;
      cursor: pointer;
    }

    .hubspot-form-wrap input[type="checkbox"],
    .hubspot-form-wrap input[type="radio"] {
      cursor: pointer;
      accent-color: var(--ft-blue);
    }

    @media (max-width: 820px) {
      .hubspot-form-wrap .hs_lastname,
      .hubspot-form-wrap .hs_company,
      .hubspot-form-wrap .hs_email,
      .hubspot-form-wrap .hs_mobilephone {
        width: 100% !important;
        margin-right: 0 !important;
        float: none !important;
        clear: both !important;
      }

      .closing-content {
        grid-template-columns: 1fr;
        gap: clamp(16px, 2vw, 24px);
      }

      .closing-left,
      .closing-form-wrapper {
        align-self: start;
      }

      .closing-form-wrapper {
        max-height: 0;
      }

      .closing-form-wrapper.open {
        max-height: 1200px;
      }

      .brandbar {
        left: 4vw;
        gap: 10px;
        padding: 10px 10px 14px;
      }

      .brandbar .logo {
        height: 20px;
      }

      .brandbar .zure-wrap {
        padding: 0;
      }

      .scene-copy {
        width: min(92vw, 100%);
      }

      .metric-grid {
        grid-template-columns: 1fr;
      }

      .scene-impact .scene-copy {
        grid-template-columns: 1fr;
      }

      .impact-proof {
        justify-self: start;
      }

      .scene-flowbeat .scene-copy {
        grid-template-columns: 1fr;
        gap: 22px;
      }

      .hero-title {
        max-width: 10ch;
      }
    }

    @media (max-width: 600px) {
      /* Mobile: prevent content overlap with progress dots */
      .scene-copy {
        padding-right: clamp(60px, 12vw, 80px);
        padding-bottom: clamp(56px, 8vh, 92px);
      }

      .scene-flowbeat .scene-copy {
        align-content: start;
      }

      .flow-stage {
        margin-top: 16px;
        overflow: hidden;
      }

      .flow-node.queued {
        transform: translateX(4%) translateY(-18%) rotate(-2.4deg);
      }

      .flow-node.next {
        transform: translateX(2%) translateY(-9%) rotate(-1.2deg);
      }

      .scene-right .scene-copy {
        text-align: left;
        margin-left: auto;
        margin-right: auto;
      }

      .scene-right .scene-title,
      .scene-right .scene-body {
        margin-left: 0;
      }

      .impact-proof {
        justify-self: center;
        width: 100%;
      }

      .scroll-progress {
        right: 12px;
        gap: 10px;
      }

      .scroll-progress .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      /* Satellite alerts: compact, staggered left-right-left in top safe zone */
      .scene-alt .sat-alerts {
        top: calc(env(safe-area-inset-top, 0px) + 70px);
        bottom: auto;
        left: 4vw;
        right: 4vw;
        width: auto;
        height: 200px;
      }

      .scene-alt .sat-alert {
        font-size: clamp(0.82rem, 2.8vw, 0.96rem);
        gap: 6px;
        padding: 8px 12px;
        border-radius: 999px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
      }

      .scene-alt .sat-alert::before {
        height: 60px;
      }

      /* Left */
      .scene-alt .sat-alert.alert-danger {
        top: 0;
        left: 8%;
        right: auto;
        transform: perspective(600px) rotateX(2deg) rotateY(-4deg) rotateZ(1deg) scale(0.9);
      }

      /* Right */
      .scene-alt .sat-alert.alert-warn {
        top: 68px;
        left: auto;
        right: 8%;
        transform: perspective(600px) rotateX(-1deg) rotateY(3deg) rotateZ(-1deg) scale(0.9);
      }

      /* Left */
      .scene-alt .sat-alert.alert-ok {
        top: 136px;
        left: 14%;
        right: auto;
        transform: perspective(600px) rotateX(1deg) rotateY(-2deg) rotateZ(0.5deg) scale(0.9);
      }

      .scene-alt .sat-alert.alert-danger.visible,
      .scene-alt .sat-alert.alert-warn.visible,
      .scene-alt .sat-alert.alert-ok.visible {
        transform: perspective(600px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
      }

      /* Metric cards fit vertically */
      .metric-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .metric-item {
        min-height: auto;
        padding: 14px 14px 16px;
      }

      .metric-value {
        font-size: clamp(1.8rem, 5vw, 3rem);
      }

      .metric-label {
        font-size: clamp(0.85rem, 1.4vw, 1rem);
        line-height: 1.4;
      }

      /* Testimonials: compact for mobile */
      .scene-testimonials {
        align-items: stretch;
      }

      .scene-testimonials .scene-copy {
        height: 100svh;
        box-sizing: border-box;
        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: clamp(16px, 2.5vh, 28px);
        padding-top: clamp(60px, 8vh, 90px);
        padding-bottom: clamp(40px, 6vh, 70px);
      }

      .testimonial {
        display: block;
        gap: 0;
        min-height: 0;
        overflow: hidden;
      }

      .testimonial::after {
        content: "";
        display: block;
        clear: both;
      }

      .testimonial-avatar {
        width: 25vw;
        height: 25vw;
        float: left;
        margin: 2px 12px 4px 0;
        max-width: 120px;
        max-height: 120px;
      }

      .testimonial::before {
        top: 6px;
        left: calc(25vw - 16px);
        font-size: 3.2rem;
      }

      .testimonial blockquote {
        font-size: calc(clamp(0.88rem, 2.6vw, 1.05rem) + 0.5rem);
        line-height: 1.45;
        display: block;
        overflow: visible;
        text-wrap: pretty;
      }

      .testimonial-meta {
        clear: both;
        margin-top: 12px;
        font-size: 0.82rem;
        flex-wrap: wrap;
      }

      /* CTA button: single line on mobile */
      .closing-left a {
        white-space: nowrap;
        font-size: 0.95rem;
        padding: 14px 24px;
        margin-top: 24px;
      }

      /* Even spacing between all stacked form fields */
      .hubspot-form-wrap .hs-fieldtype-textarea,
      .hubspot-form-wrap .hs-fieldtype-text,
      .hubspot-form-wrap .hs-fieldtype-email,
      .hubspot-form-wrap .hs-fieldtype-tel,
      .hubspot-form-wrap .hs-fieldtype-select {
        margin-bottom: 20px;
      }

      .hubspot-form-wrap .hs-form fieldset {
        margin: 0;
        padding: 0;
      }
    }

    @media (min-width: 390px) and (max-width: 600px) {
      /* Modern phone screens: slightly larger typography */
      .hero-title {
        font-size: calc(clamp(3rem, 10vw, 8rem) + 0.4rem);
      }

      .scene-title,
      .impact-lede,
      .metric-intro {
        font-size: calc(clamp(2.5rem, 6vw, 4.6rem) + 0.4rem);
      }

      .hero-sub,
      .scene-body,
      .impact-proof-text,
      .impact-proof-subtext,
      .metric-label {
        font-size: calc(clamp(1rem, 1.6vw, 1.2rem) + 0.2rem);
      }
    }

    @media (max-width: 380px), (max-height: 760px) {
      .scene-testimonials .scene-copy {
        gap: clamp(12px, 1.8vh, 18px);
        padding-top: clamp(54px, 7vh, 76px);
        padding-bottom: clamp(30px, 4.5vh, 54px);
      }
    }