/* ═══════════════════════════════════════════════════════════════
   FONTS
═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Erode';
  src: url('fonts/Erode-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Erode';
  src: url('fonts/Erode-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════
   COLOUR TOKENS
═══════════════════════════════════════════════════════════════ */

:root {
  --bone:         #F7F0E7;
  --light-brown:  #B4AD9E;
  --medium-brown: #8D8073;
  --dark-brown:   #555047;
  --yellow:       #E5C690;
  --margin:       1.16vw;
}

/* ═══════════════════════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════════════════════ */

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

html, body {
  width: 100%;
  overflow-x: clip;
}

body {
  background: var(--bone);
  color: var(--dark-brown);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--yellow);
  color: var(--dark-brown);
}

img {
  display: block;
}

ul {
  list-style: none;
}

/* ═══════════════════════════════════════════════════════════════
   TYPE SYSTEM
═══════════════════════════════════════════════════════════════ */

.h1 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(18px, 2.45vw, 37px);
  line-height: clamp(17px, 2.25vw, 34px);
  letter-spacing: 0;
}

.sub1 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.49vw, 22.5px);
  line-height: clamp(12px, 1.59vw, 24px);
  letter-spacing: 0;
}

.italic-sub {
  font-family: 'Erode', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(10px, 1.32vw, 20px);
  line-height: clamp(10px, 1.32vw, 20px);
  letter-spacing: 0;
}

.caps-sub {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.49vw, 22.5px);
  line-height: clamp(12px, 1.59vw, 24px);
  letter-spacing: 0;
  text-transform: uppercase;
}

.subbody1 {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 1.16vw, 17.5px);
  line-height: clamp(8px, 1.09vw, 16.5px);
  letter-spacing: -0.013em;
  text-transform: uppercase;
}

.subbody2 {
  font-family: 'Erode', serif;
  font-weight: 600;
  font-size: clamp(9px, 1.16vw, 17.5px);
  line-height: clamp(11px, 1.46vw, 22px);
  letter-spacing: 0.016em;
}

.body {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: clamp(7px, 0.89vw, 13.5px);
  line-height: clamp(11px, 1.49vw, 22.5px);
  letter-spacing: 0.016em;
}

/* ═══════════════════════════════════════════════════════════════
   COLOUR UTILITIES
═══════════════════════════════════════════════════════════════ */

.c-bone         { color: var(--bone); }
.c-light-brown  { color: var(--light-brown); }
.c-medium-brown { color: var(--medium-brown); }
.c-dark-brown   { color: var(--dark-brown); }
.c-yellow       { color: var(--yellow); }

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
═══════════════════════════════════════════════════════════════ */

.reveal-up {
  opacity: 0;
  transform: translateY(0.79vw);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 1 — LANDING
═══════════════════════════════════════════════════════════════ */

.s1 {
  position: relative;
  height: calc(100vh + 1700px);
  width: 100%;
}

.s1-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.s1-slides {
  position: absolute;
  inset: 0;
}

.s1-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.s1-slide.is-active {
  opacity: 1;
}

.s1-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.s1-logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.s1-logo {
  height: min(150px, 9.92vw);
  width: auto;
  color: var(--bone);
  display: block;
  transform-origin: center center;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s ease;
}

.s1-tagline-group {
  position: absolute;
  top: calc(65vh + 3.31vw);
  left: calc(var(--margin) + 0.40vw);
  right: var(--margin);
  display: flex;
  flex-direction: column;
  gap: min(24px, 1.59vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.6s ease 1.0s;
}

.s1-tagline-group.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.s1-cta {
  display: block;
  width: min(465px, 30.75vw);
  height: min(40px, 2.65vw);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 2.6s ease 1.0s;
}

.s1-cta.is-visible {
  opacity: 0.82;
  pointer-events: auto;
}

.s1-cta-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.s1-tagline {
  margin: 0;
  font-size: clamp(20px, 2.68vw, 40.5px);
  line-height: clamp(19px, 2.48vw, 37.5px);
  font-weight: 700;
}


/* fixed corner logo — appears when scroll animation completes */
#logo-corner {
  position: fixed;
  top: var(--margin);
  left: var(--margin);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

#logo-corner svg {
  height: min(51px, 3.37vw);
  width: auto;
  color: var(--bone);
  display: block;
}

#logo-corner.is-visible {
  opacity: 1;
}

#logo-corner.on-bone svg {
  color: var(--medium-brown);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 — THE OFFER
═══════════════════════════════════════════════════════════════ */

.s3 {
  position: relative;
  height: calc(100vh + 3400px);
  background: var(--bone);
}

.s3-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 2.78vw;
  z-index: 1;
  pointer-events: none;
}

.s3-inner {
  position: relative;
  z-index: 1;
  text-align: left;
  max-width: 1700px;
  width: 100%;
  padding: 0 var(--margin);
  margin-bottom: 3vh;
}

.s3-word {
  opacity: 0;
  color: var(--medium-brown);
  font-size: clamp(20px, 2.68vw, 40.5px);
  line-height: clamp(19px, 2.48vw, 37.5px);
  font-weight: 900;
}

.s3-about-wrap {
  padding: 0 var(--margin);
  pointer-events: none;
}

.s3-about {
  text-align: left;
  max-width: calc(53vw - var(--margin) - 1.98vw);
  font-size: clamp(11px, 1.47vw, 22.3px);
}

.s3-about-word {
  opacity: 0;
  color: var(--medium-brown);
}

.s3-tagline {
  position: absolute;
  bottom: calc(var(--margin) + 1.59vw);
  left: var(--margin);
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  transition: opacity 1s 0.4s ease;
  font-size: clamp(21px, 2.78vw, 42px);
  line-height: clamp(19.5px, 2.58vw, 39px);
}

.s3-tagline.is-visible {
  opacity: 1;
}

/* gallery — right column, visible during about-text phases, scroll-driven by JS */
.s3-gallery {
  position: fixed;
  left: 53%;
  right: var(--margin);
  top: var(--margin);
  height: calc(100vh - var(--margin));
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  transform: translateY(100vh);
  will-change: transform;
}

.s3-gallery-inner {
  display: flex;
  flex-direction: column;
  gap: 1.06vw;
  will-change: transform;
}

.s3-gallery-img {
  width: 100%;
  height: auto;
  display: block;
  flex-shrink: 0;
}

/* showcase images — fixed to viewport so they stay static as s5 rises over them */
.s3-img-left {
  position: fixed;
  left: 0;
  top: 0;
  width: 40%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 2;
  transform: translateY(100vh);
  will-change: transform;
  pointer-events: none;
}

.s3-img-right {
  position: fixed;
  left: 53%;
  top: var(--margin);
  right: var(--margin);
  height: calc(100% - var(--margin));
  object-fit: cover;
  object-position: center;
  z-index: 2;
  transform: translateY(100vh);
  will-change: transform;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION 5 — HOW IT WORKS
═══════════════════════════════════════════════════════════════ */

.s5 {
  background: var(--medium-brown);
  height: calc(100vh + 510px);
  position: relative;
  z-index: 600;
}

.s5-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0 var(--margin);
  overflow: hidden;
}

.s5-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--margin);
  height: 100%;
}

.s5-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  transform: translateY(105%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.s5-card.is-entered {
  transform: translateY(0);
}

.s5-card-inner {
  position: absolute;
  width: 100%;
  transition: top 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s ease;
  animation: s5-float 6s ease-in-out infinite;
}

@keyframes s5-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-0.60vw); }
}

.s5-card:nth-child(1) .s5-card-inner { top: 1.65vw;  animation-delay: 0s; }
.s5-card:nth-child(2) .s5-card-inner { top: 6.61vw;  animation-delay: -2.2s; }
.s5-card:nth-child(3) .s5-card-inner { top: 3.64vw;  animation-delay: -4s; }
.s5-card:nth-child(4) .s5-card-inner { top: 8.93vw;  animation-delay: -1s; }

.s5-card:hover .s5-card-inner {
  top: var(--margin);
  animation: none;
  transform: translateY(0);
}

.s5-cards:has(.s5-card:hover) .s5-card:not(:hover) {
  opacity: 0.35;
}

/* hover effects disabled while entry animations are running */
.s5.hover-dormant .s5-cards {
  pointer-events: none;
}

.s5-card-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.66vw;
}

.s5-img-crop {
  overflow: hidden;
  margin-bottom: 0.66vw;
}

.s5-img-crop .s5-card-img {
  margin-bottom: -8.27vw;
}

.s5-card-header {
  display: flex;
  align-items: baseline;
  gap: 0.46vw;
  margin-bottom: 0.46vw;
}

.s5-card-num,
.s5-card-name {
  margin-bottom: 0;
}

.s5-card-name {
  text-transform: uppercase;
}

.s5-card .subbody1 {
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 6 — PRICING
═══════════════════════════════════════════════════════════════ */

.s6 {
  background: var(--medium-brown);
  height: calc(100vh + 1020px);
}

.s6-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.s6-panel {
  position: absolute;
  left: 30%;
  right: 0;
  top: 3vh;
  bottom: 3vh;
  background: var(--dark-brown);
  display: flex;
  flex-direction: column;
  padding-top: 1.65vw;
  overflow: hidden;
  transform: translateX(110%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.s6-panel.is-in {
  transform: translateX(0);
}

.s6-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 28%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform: translateX(-180%);
  clip-path: inset(3vh 0 3vh 0);
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.s6-img.is-in {
  transform: translateX(0);
}

/* Bone overlay — scroll-driven, JS sets opacity directly */
.s6-bg-overlay {
  position: absolute;
  inset: 0;
  background: var(--bone);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

/* header bar above the grid */
.s6-header {
  display: grid;
  grid-template-columns: 12.57vw 7.28vw 1.65vw 7.28vw minmax(0, 13.23vw) minmax(0, 17.20vw);
  column-gap: 1.59vw;
  align-items: start;
  padding: calc(var(--margin) + 0.79vw) var(--margin) 0.66vw var(--margin);
  height: auto;
  min-height: min(90px, 5.95vw);
}

.s6-heading {
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(21px, 2.78vw, 42px);
  line-height: clamp(19.5px, 2.58vw, 39px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.5;
  text-align: left;
  grid-column: 1 / 6;
}

/* 12-col × 3-row grid — cards step diagonally */
.s6-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, auto);
  margin-top: 6.61vw;
}

/* Each card in its own row, stepping right */
.s6-card {
  padding: 0.99vw var(--margin);
  display: grid;
  grid-template-columns: 12.57vw 7.28vw 1.65vw 7.28vw minmax(0, 13.23vw) minmax(0, 17.20vw);
  align-items: start;
  column-gap: 1.59vw;
  position: relative;
  transition: background 0.35s ease, opacity 0.3s ease;
}

[data-tier="pilot"]      { grid-column: 1 / 13; grid-row: 1; }
[data-tier="engine"]     { grid-column: 1 / 13; grid-row: 2; }
[data-tier="engine-pro"] {
  grid-column: 1 / 13;
  grid-row: 3;
}

.s6-card::after,
[data-tier="pilot"]::before {
  content: '';
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  height: 1px;
  background: rgba(247, 240, 231, 0.12);
}

.s6-card::after  { bottom: 0; }
[data-tier="pilot"]::before { top: 0; }

/* Card internals — horizontal layout: name | price | features | tagline */
.s6-tier {
  color: var(--bone);
  font-size: clamp(13.5px, 1.79vw, 27px);
  line-height: clamp(17px, 2.25vw, 34px);
}

.s6-price {
  font-family: 'Satoshi', sans-serif;
  font-weight: 700;
  font-size: clamp(13.5px, 1.79vw, 27px);
  line-height: clamp(14px, 1.85vw, 28px);
  color: var(--bone);
  white-space: nowrap;
}

.s6-per {
  font-size: clamp(5px, 0.66vw, 10px);
  font-weight: 500;
  color: var(--bone);
  opacity: 0.4;
}

.s6-commitment {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 1.16vw, 17.5px);
  line-height: clamp(8px, 1.09vw, 16.5px);
  letter-spacing: -0.013em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.45;
  grid-column: 4;
}

.s6-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.33vw;
  grid-column: 5;
}

.s6-list li {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: clamp(7px, 0.89vw, 13.5px);
  line-height: clamp(8px, 1.06vw, 16px);
  letter-spacing: 0.016em;
  color: var(--bone);
  opacity: 0.45;
  padding-left: 0.46vw;
  position: relative;
}

.s6-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.36vw;
  width: 0.13vw;
  height: 0.13vw;
  border-radius: 50%;
  background: var(--bone);
  opacity: 0.6;
}

.s6-tagline {
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;
  font-size: clamp(9px, 1.16vw, 17.5px);
  line-height: clamp(8px, 1.09vw, 16.5px);
  letter-spacing: -0.013em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.6;
  grid-column: 6;
}

.s6-pro { color: var(--yellow); }

/* hover interaction */
.s6-grid:has(.s6-card:hover) .s6-card:not(:hover) {
  opacity: 0.3;
}

.s6-card:hover {
  background: rgba(229, 198, 144, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 7 — PREVIOUS WORK
═══════════════════════════════════════════════════════════════ */

.s7 {
  background: var(--bone);
  height: calc(100vh + 1020px);
}

.s7-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.s7-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.79vw;
  min-height: 0;
  padding: var(--margin);
  transition: grid-template-columns 2.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.s7-cols.is-expanded {
  grid-template-columns: 1fr 2fr 0fr;
  padding-right: 0;
}

.s7-col-left {
  overflow: hidden;
}

.s7-img-tall {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.s7-col-center {
  display: flex;
  flex-direction: column;
  gap: 0.79vw;
  overflow: hidden;
}

.s7-img-half {
  width: 100%;
  flex: 1;
  object-fit: cover;
  object-position: center;
}

.s7-body {
  text-transform: none;
}

.s7-col-right {
  padding: 0 var(--margin);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease;
}

.s7-col-right.s7-in {
  opacity: 1;
}

.s7-col-right.is-dismissed {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

.s7-arrow {
  position: absolute;
  right: var(--margin);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  width: min(28px, 1.85vw);
  height: min(28px, 1.85vw);
  padding: 0;
  z-index: 10;
}

.s7-arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.s7-col-right-inner {
  display: flex;
  flex-direction: column;
  gap: 0.66vw;
}

.s7-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
  align-self: flex-start;
}

/* ─── S7 track + gallery panel ─── */

.s7-track {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.s7-track::-webkit-scrollbar { display: none; }

.s7-cols {
  flex-shrink: 0;
  width: 100vw;
}

.s7-gallery {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: var(--margin) var(--margin) var(--margin) 1.19vw;
  height: 100%;
}

.s7-gallery-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.79vw;
  height: 100%;
  flex-shrink: 0;
}

/* standalone tall images */
.s7-gimg--tall {
  height: 100%;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* horizontal side-by-side pairs */
.s7-gimg-h-pair {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.79vw;
  height: 100%;
  flex-shrink: 0;
}

.s7-gimg-h-pair--large .s7-gimg {
  height: 100%;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.s7-gimg-pair {
  display: flex;
  flex-direction: column;
  gap: 0.79vw;
  height: 100%;
  flex-shrink: 0;
}

.s7-gimg-pair .s7-gimg {
  display: block;
  height: calc(50% - 0.40vw);
  width: auto;
  flex-shrink: 0;
}

.s7-gallery-text {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.66vw;
  width: calc((100vw - 2 * var(--margin) - 1.59vw) / 3 - 2 * var(--margin));
  padding: 0 var(--margin);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 8 — ABOUT
═══════════════════════════════════════════════════════════════ */

.s8 {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.s8-inner {
  position: absolute;
  inset: 0;
  transform: scale(0.7);
  transform-origin: center center;
  overflow: hidden;
  will-change: transform;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.s8-inner.is-entered {
  transform: scale(1);
}

.s8-slides {
  position: absolute;
  inset: 0;
}

.s8-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

.s8-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.s8-slide.is-active {
  opacity: 1;
}

.s8-tracker {
  position: absolute;
  left: var(--margin);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.19vw;
  z-index: 10;
}

.s8-thumb {
  overflow: hidden;
  cursor: pointer;
  width: min(26px, 1.72vw);
  height: min(19px, 1.26vw);
}

.s8-thumb.is-active {
  width: min(40px, 2.65vw);
  height: min(29px, 1.92vw);
}

.s8-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.s8-footer-row {
  position: absolute;
  bottom: var(--margin);
  left: var(--margin);
  right: var(--margin);
  display: flex;
  align-items: flex-start;
  gap: 1.59vw;
  z-index: 10;
  pointer-events: none;
}
.s8-wordmark {
  width: 25%;
  height: auto;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.s8-contact {
  display: flex;
  flex-direction: column;
  gap: 0.26vw;
  padding-top: 0.99vw;
  margin-left: 3.31vw;
}
.s8-cta {
  display: block;
  width: min(465px, 30.75vw);
  height: min(40px, 2.65vw);
  text-decoration: none;
  cursor: pointer;
  margin-top: 0.99vw;
  flex-shrink: 0;
  margin-left: auto;
  pointer-events: auto;
}
.s8-cta-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.s8-email {
  margin: 0;
  color: var(--bone);
}

/* ═══════════════════════════════════════════════════════════════
   BOOK A CALL MODAL
═══════════════════════════════════════════════════════════════ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(85, 80, 71, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

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

.modal {
  background: rgba(24, 21, 18, 0.38);
  border: 1px solid rgba(247, 240, 231, 0.15);
  border-radius: min(28px, 1.85vw);
  backdrop-filter: blur(38px) saturate(180%);
  -webkit-backdrop-filter: blur(38px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 70px rgba(0, 0, 0, 0.4);
  width: 45vw;
  padding: clamp(20px, 2.2vw, 34px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
}

.modal-close {
  position: absolute;
  top: clamp(18px, 2vw, 30px);
  right: clamp(18px, 2vw, 30px);
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(10px, 0.83vw, 13px);
  font-weight: 500;
  color: rgba(247, 240, 231, 0.55);
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
}

.modal-close:hover {
  color: var(--bone);
}

.modal-heading {
  margin: 0;
  font-family: 'Satoshi', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.1vw, 32px);
  line-height: 1.2;
  letter-spacing: 0;
}

.modal-divider {
  height: 1px;
  width: 100%;
  background: rgba(247, 240, 231, 0.14);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.79vw, 12px);
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.26vw, 4px);
}

.modal-label {
  font-size: clamp(7px, 0.60vw, 9px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

.modal-input {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(247, 240, 231, 0.35);
  padding: clamp(2px, 0.26vw, 4px) 0;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(8px, 0.66vw, 10px);
  font-weight: 400;
  color: var(--bone);
  outline: none;
  width: 100%;
}

.modal-input::placeholder {
  color: rgba(247, 240, 231, 0.45);
}

.modal-submit {
  align-self: flex-end;
  margin-top: clamp(4px, 0.6vw, 10px);
  background: none;
  border: none;
  padding: 0;
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(9px, 0.75vw, 12px);
  font-weight: 700;
  color: var(--bone);
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.modal-submit:hover {
  opacity: 0.6;
}