/* =============================================
   FONT FACES
   ============================================= */

@font-face {
  font-family: "Loren Blake Hybrid";
  src: url("../assets/fonts/LorenBlakeHybrid.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayThin.ttf")
    format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayThinItalic.ttf")
    format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayLight.ttf")
    format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayLightItalic.ttf")
    format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayRoman.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayRomanItalic.ttf")
    format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayMediu.ttf")
    format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayMediumItalic.ttf")
    format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Haas Grotesk Display Pro";
  src: url("../assets/fonts/neue-haas-grotesk-display-pro-cufonfonts/NeueHaasDisplayBold.ttf")
    format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================
   CSS VARIABLES
   ============================================= */

:root {
  --cream: #fffcef;
  --cream-dark: #f1e9d2;
  --cream-mid: #f0eddd;
  --gold: #b08f3d;
  --gold-light: rgba(176, 143, 61, 0.75);
  --dark: #303030;
  --text-muted: #3c3c3a;
  --text-mid: #4e4e50;
  --text-gray: #8a8a8a;
  --white: #ffffff;
  --black: #000000;
  --border-light: rgba(0, 0, 0, 0.1);
  --white-glass: rgba(255, 255, 255, 0.14);
  --white-glass-border: rgba(255, 255, 255, 0.1);
  --black-overlay: rgba(0, 0, 0, 0.5);

  --font-display: "Loren Blake Hybrid", Georgia, serif;
  --font-body:
    "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  --fw-thin: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  --section-pt: 84px;
  --section-pt-sm: 56px;
  --container-max: 1920px;
  --container-pad: 112px;
  --container-pad-md: 60px;
  --container-pad-sm: 20px;

  --z-nav: 1000;
  --z-overlay: 500;
  --z-above: 100;
  --z-base: 1;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-normal: 0.7s;
  --duration-slow: 1.2s;

  --radius-pill: 9999px;
  --radius-sm: 8px;
}

/* =============================================
   RESET
   ============================================= */

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

:root,
html {
  scroll-behavior: auto; /* :root beats Bootstrap's :root{scroll-behavior:smooth}; scrolling is JS-driven */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--cream);
  color: var(--dark);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

ul,
ol {
  list-style: none;
}

input,
textarea,
select {
  font-family: inherit;
  outline: none;
  border: none;
  background: none;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================
   TYPOGRAPHY SCALE UTILITIES
   ============================================= */

.display-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 4.167vw;
  line-height: 1.17;
  letter-spacing: 0;
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.333vw;
  line-height: 1.28;
}

.display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5625vw;
  line-height: 1.37;
}

.body-eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.9375vw;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.body-lg {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.302vw;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.body-md {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.9375vw;
  letter-spacing: 0.05em;
  line-height: 1.56;
}

.body-sm {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.833vw;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.body-xs {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.729vw;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.text-gold {
  color: var(--gold);
}
.text-dark {
  color: var(--dark);
}
.text-muted {
  color: var(--text-muted);
}
.text-white {
  color: var(--white);
}
.text-gray {
  color: var(--text-gray);
}
.text-mid {
  color: var(--text-mid);
}

@media (max-width: 1024px) {
  .display-hero {
    font-size: 5.5vw;
  }
  .display-xl {
    font-size: 4.8vw;
  }
  .display-lg {
    font-size: 2.5vw;
  }
  .body-eyebrow {
    font-size: 1.4vw;
  }
  .body-lg {
    font-size: 2vw;
  }
  .body-md {
    font-size: 1.5vw;
  }
  .body-sm {
    font-size: 1.4vw;
  }
}

@media (max-width: 767px) {
  .display-hero {
    font-size: 2.5rem;
    line-height: 1.2;
  }
  .display-xl {
    font-size: 2rem;
    line-height: 1.25;
  }
  .display-lg {
    font-size: 1.25rem;
  }
  .body-eyebrow {
    font-size: 0.75rem;
  }
  .body-lg {
    font-size: 1.125rem;
  }
  .body-md {
    font-size: 1rem;
  }
  .body-sm {
    font-size: 0.9rem;
  }
  .body-xs {
    font-size: 0.8rem;
  }
}

/* =============================================
   LAYOUT UTILITIES
   ============================================= */

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

.container--narrow {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  position: relative;
  width: 100%;
}
.section--full {
  min-height: 100vh;
}
.section--cream {
  background-color: var(--cream);
}
.section--dark {
  background-color: var(--dark);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 0.729vw;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.gold-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

.overflow-hidden {
  overflow: hidden;
}
.relative {
  position: relative;
}
.absolute-fill {
  position: absolute;
  inset: 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 2em;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 0.729vw;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s var(--ease-out);
  white-space: nowrap;
}

.btn--gold {
  background: var(--gold);
  color: var(--white);
  border: 1px solid var(--gold);
}
.btn--gold:hover {
  background: transparent;
  color: var(--gold);
}

.btn--outline-gold {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.btn--outline-gold:hover {
  background: var(--gold);
  color: var(--white);
}

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn--glass {
  background: var(--white-glass);
  color: var(--white);
  border: 1px solid var(--white-glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 1024px) {
  .container,
  .container--narrow {
    padding: 0 var(--container-pad-md);
  }
  .btn {
    font-size: 1.1vw;
  }
  .eyebrow {
    font-size: 1.1vw;
  }
}

@media (max-width: 767px) {
  .container,
  .container--narrow {
    padding: 0 var(--container-pad-sm);
  }
  .btn {
    font-size: 0.75rem;
    padding: 0.8em 1.5em;
  }
  .eyebrow {
    font-size: 0.7rem;
  }
}

/* =============================================
   NAVIGATION
   ============================================= */

/* Figma has no persistent bar: the nav is transparent over the banner, becomes a compact
   dark bar once scrolled, hides while scrolling down and returns on scroll up (js/navigation.js). */
.site-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 0;
  background: transparent !important;
  background-color: transparent !important;
  z-index: var(--z-nav);
}
.site-nav.nav--ready {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav.nav--hidden {
  transform: translateY(-100%);
}

/* the dark bar lives on a pseudo-element: a backdrop-filter on the nav itself would make it
   the containing block of the fixed full-screen mobile menu */
.site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 7, 3, 0);
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav.nav--scrolled::before {
  background: rgba(10, 7, 3, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Figma Frame 1000011080 @ 102,36 → 1807; logo 93.5×100 @ 102,43; links centred on the frame,
   text centre y≈73; Paradise Group 168×49 @ 1639,48 */
.site-nav .nav-container {
  position: relative;
  padding: 36px 113px 17px 102px;
  align-items: flex-start;
  transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav .navbar-collapse {
  justify-content: flex-end;
}

.nav-logo {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  padding: 0;
  margin-top: 7px;
  transition: margin 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-logo__img {
  width: 94px;
  height: auto;
  display: block;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-links {
  position: absolute;
  left: 50%;
  top: 62px;
  transform: translateX(-50%);
  align-items: center;
  gap: 23px;
  transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* compact bar once scrolled (logo, links and Paradise mark share one centre line) */
.site-nav.nav--scrolled .nav-container {
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-nav.nav--scrolled .nav-logo {
  margin-top: 0;
}
.site-nav.nav--scrolled .nav-logo__img {
  width: 64px;
}
.site-nav.nav--scrolled .nav-links {
  top: 37px;
}
.site-nav.nav--scrolled .nav-paradise {
  margin-top: 9.5px;
}

.nav-links .nav-item .nav-link {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.94vw;
  line-height: normal;
  letter-spacing: 0.9px;
  color: rgba(255, 255, 255, 0.9) !important;
  padding: 0 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.25s;
}

.nav-links .nav-item .nav-link:hover,
.nav-links .nav-item .nav-link.active {
  color: var(--gold) !important;
}

.nav-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  pointer-events: none;
}

.nav-paradise {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 12px;
  transition: margin 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-paradise__img {
  width: 168px;
  height: 49px;
  display: block;
  object-fit: contain;
}

.nav-mobile-right {
  display: none;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.nav-paradise-mobile-img {
  width: 100px;
  height: auto;
  display: block;
  object-fit: contain;
}

.nav-toggler {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggler:focus:not(:focus-visible) {
  outline: none;
}

.nav-toggler__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-toggler[aria-expanded="true"] .nav-toggler__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  width: 100%;
}
.nav-toggler[aria-expanded="true"] .nav-toggler__bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggler[aria-expanded="true"] .nav-toggler__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  width: 100%;
}

@media (max-width: 1200px) {
  .site-nav .nav-container {
    padding-left: 60px;
    padding-right: 71px;
  }
  .nav-links {
    gap: 16px;
  }
  .nav-links .nav-item .nav-link {
    font-size: 1.15vw;
  }
  .nav-paradise__img {
    width: 130px;
    height: 38px;
  }
  .nav-logo__img {
    width: 76px;
  }
}

@media (max-width: 1024px) {
  .site-nav .nav-container {
    padding-left: 40px;
    padding-right: 47px;
  }
  .nav-links {
    gap: 12px;
  }
  .nav-links .nav-item .nav-link {
    font-size: 1.46vw;
  }
  .nav-paradise__img {
    width: 110px;
    height: 32px;
  }
  .nav-logo__img {
    width: 66px;
  }
}

@media (max-width: 991px) {
  .site-nav .nav-container {
    padding: 10px 20px;
    align-items: center;
  }
  .site-nav.nav--scrolled .nav-container {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nav-logo {
    margin-top: 0;
  }
  .site-nav .navbar-collapse {
    justify-content: center;
  }

  .nav-mobile-right {
    display: flex;
  }
  .nav-paradise {
    display: none;
  }
  /* logo + toggler stay above the full-screen menu (both live inside the nav's stacking context) */
  .nav-logo,
  .nav-mobile-right {
    position: relative;
    z-index: 2;
  }

  #navCollapse {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 4, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 80px 20px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #navCollapse.show {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .nav-sep {
    display: none;
  }

  .nav-links .nav-item .nav-link {
    font-size: 1.8vw;
    letter-spacing: 0.15em;
    padding: 10px 0 !important;
  }

  .nav-paradise {
    margin-top: 20px;
  }
  .nav-paradise__img {
    width: 140px;
    height: auto;
  }
  .nav-logo__img {
    width: 52px;
  }
}

@media (max-width: 767px) {
  .nav-links .nav-item .nav-link {
    font-size: 1rem;
    letter-spacing: 0.12em;
  }
  .nav-paradise-mobile-img {
    width: 150px;
  }
  .nav-logo__img {
    width: 44px;
  }
}

/* =============================================
   SECTION SYSTEM
   --dpx is one Figma design pixel of the 1920-wide desktop frame
   (JS keeps it exact: clientWidth / 1920). Every measurement taken
   from Figma is written as calc(N * var(--dpx)) so a section scales
   uniformly with the viewport. Below 992px each section switches to
   a stacked flow layout in its own stylesheet (css/sections/*.css).
   ============================================= */

:root {
  --dpx: calc(100vw / 1920);
}

.sec {
  position: relative;
  width: 100%;
  background: var(--cream);
  color: var(--dark);
}

.sec-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Pinned sections: the wrapper is the trigger (its height = stage + scroll distance,
   kept in sync by the section's JS); .pin-stage is the 100vh element that pins. */
.pin-stage {
  /* The 1080-tall canvas is centred in the stage; on viewports shorter than 16:9 the stage
     crops its top and bottom. These are the visible band's edges in canvas px, so text can
     be kept inside it (both resolve to the canvas edges when the whole canvas fits). */
  --vis-top: max(0px, calc((1080 * var(--dpx) - 100vh) / 2));
  --vis-bottom: min(calc(1080 * var(--dpx)), calc((1080 * var(--dpx) + 100vh) / 2));
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--cream);
}

/* Section headline in the Figma "Loren Blake 64/82" style, gold accent word via .text-gold */
.sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(64 * var(--dpx));
  line-height: calc(82 * var(--dpx));
  letter-spacing: 0;
  color: var(--dark);
  text-transform: none;
  margin: 0;
}

.sec-body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--dark);
  margin: 0;
}

.sec-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

@media (max-width: 991px) {
  .sec-title {
    font-size: 2rem;
    line-height: 1.25;
  }
}

/* =============================================
   HERO + OVERVIEW STAGE
   Figma 175:3928 — variants Default → Variant5

   One pinned 100vh "stage" holds two layers:
     .about-canvas  the Overview composition (Figma 175:5192), always behind
     .hero-layer    the banner video + headline on top, clipped by an
                    arch-shaped mask that GSAP shrinks on scroll
                    (Figma "Rectangle 4": 1996×2657 @ -38,-788 → 228×308 @ 842,122,
                     corner radius 100)

   --stage-dpx is one Figma design pixel here. The 1920×1080 canvas scales with the
   viewport width on desktop and with the viewport height on portrait screens,
   so the arch / heading / decor geometry always keeps its Figma proportions.
   ============================================= */

:root {
  --stage-dpx: max(calc(100vw / 1920), calc(100vh / 1500));
  --pin-scenes: 2; /* pinned scroll distance, in viewport heights (JS mirrors this) */
}

.stage-wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh * (1 + var(--pin-scenes)));
  background: var(--cream);
}

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--cream);
}

/* Scroll target for the "Overview" nav link — JS places it where the
   banner has settled into the arch and the copy is visible */
.nav-anchor {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  visibility: hidden;
  pointer-events: none;
}

/* ---- Overview layer (Figma 175:5192) ---- */
.about-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(1920 * var(--stage-dpx));
  height: calc(1080 * var(--stage-dpx));
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* Columns — Figma Group 1000010856 / 1000010857: 166×901.5 @ -83,77 and 1837,77 */
.about-col {
  position: absolute;
  top: calc(77 * var(--stage-dpx));
  width: calc(166 * var(--stage-dpx));
  height: calc(901.5 * var(--stage-dpx));
  max-width: none;
  pointer-events: none;
}
.about-col--left {
  left: calc(-83 * var(--stage-dpx));
}
.about-col--right {
  left: calc(1837 * var(--stage-dpx));
}

/* Oval — Figma Ellipse 1: 1279×613 rotated -14.76°, centred at 943,489 */
.about-oval {
  position: absolute;
  left: calc(943.18 * var(--stage-dpx));
  top: calc(489.18 * var(--stage-dpx));
  width: calc(1279.12 * var(--stage-dpx));
  height: calc(612.78 * var(--stage-dpx));
  transform: translate(-50%, -50%) rotate(-14.76deg);
  pointer-events: none;
}
.about-oval img {
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

/* Side tick marks — Figma Group 1171276521: 231×142 @ 839,126 */
.about-arch-marks {
  position: absolute;
  left: calc(839.38 * var(--stage-dpx));
  top: calc(126.24 * var(--stage-dpx));
  width: calc(231.32 * var(--stage-dpx));
  height: calc(141.69 * var(--stage-dpx));
  max-width: none;
  pointer-events: none;
}

/* Arch window — Figma hero mask / Rectangle 4: 228×308 @ 842,122, radius 100.
   The banner video lands exactly on this box; the poster shows through
   only if the video is unavailable. */
.about-arch {
  position: absolute;
  left: calc(842 * var(--stage-dpx));
  top: calc(122 * var(--stage-dpx));
  width: calc(228 * var(--stage-dpx));
  height: calc(308 * var(--stage-dpx));
  border-radius: calc(100 * var(--stage-dpx)) calc(100 * var(--stage-dpx)) 0 0;
  background: var(--cream-dark) url("../assets/images/10.webp") no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Arch frame lines — Figma Group 1171276520: 1206.5×786.7 @ 364.5,59 */
.about-arch-frame {
  position: absolute;
  left: calc(364.5 * var(--stage-dpx));
  top: calc(59.01 * var(--stage-dpx));
  width: calc(1206.5 * var(--stage-dpx));
  height: calc(786.75 * var(--stage-dpx));
  max-width: none;
  pointer-events: none;
}

/* Heading + description — Figma text 968 wide @ y 503, 700 wide @ y 687 */
.about-text {
  position: absolute;
  left: 50%;
  top: calc(503.26 * var(--stage-dpx));
  width: min(calc(968 * var(--stage-dpx)), 92vw);
  transform: translateX(-50%);
  text-align: center;
}

/* Loren Blake Hybrid 64/82 (Figma) */
.about-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: max(calc(64 * var(--stage-dpx)), 1.75rem);
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--dark);
  text-transform: none;
  margin: 0;
  opacity: 0;
}

/* Neue Haas 45 Light 16/23, tracking 0.8px (Figma) */
.about-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: max(calc(16 * var(--stage-dpx)), 0.8125rem);
  line-height: 1.44;
  letter-spacing: 0.05em;
  color: var(--dark);
  width: min(calc(700 * var(--stage-dpx)), 88vw);
  margin: max(calc(20 * var(--stage-dpx)), 0.9rem) auto 0;
  opacity: 0;
}

/* ---- Banner layer (Figma 175:3890 → 175:4556) ---- */
.hero-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: var(--cream);
  will-change: clip-path;
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* JS sizes the video to its exact "cover" frame so transforms map 1:1 */
.hero-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  display: block;
  transform-origin: center center;
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      535.49% 169.64% at 33.43% 41.31%,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5) -6.85%,
      rgba(0, 0, 0, 0.1) 16.24%,
      rgba(0, 0, 0, 0) 22.78%
    );
}

/* Headline block — Figma: 510 wide, bottom 77, gap 18 */
.hero-content {
  position: absolute;
  bottom: calc(77 * var(--stage-dpx));
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.hero-eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.94vw;
  line-height: normal;
  letter-spacing: 0.9px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  opacity: 0;
}

.hero-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: 3.33vw;
  line-height: 1.156;
  letter-spacing: 0;
  color: var(--white);
  text-transform: none;
  margin: 0;
  opacity: 0;
}

/* ---- Static fallback: reduced motion / GSAP missing ----
   Banner as a plain full-height block, followed by the finished Overview. */
.motion-off .stage-wrapper {
  height: auto;
}
.motion-off .stage {
  height: auto;
}
.motion-off .hero-layer {
  position: relative;
  height: 100vh;
  clip-path: none !important;
}
.motion-off .about-canvas {
  position: relative;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
}
.motion-off .nav-anchor {
  top: 100vh;
  height: calc(1080 * var(--stage-dpx));
}
.motion-off .about-heading,
.motion-off .about-desc,
.motion-off .hero-eyebrow,
.motion-off .hero-heading {
  opacity: 1 !important;
  transform: none !important;
}
.motion-off #site-nav {
  opacity: 1 !important;
  transform: none !important;
}

/* =============================================
   RESPONSIVE — 1024px
   ============================================= */

@media (max-width: 1024px) {
  .hero-eyebrow {
    font-size: 1.4vw;
  }
  .hero-heading {
    font-size: 5vw;
  }
}

/* =============================================
   RESPONSIVE — 991px
   ============================================= */

@media (max-width: 991px) {
  .hero-eyebrow {
    font-size: 1.6vw;
  }
  .hero-heading {
    font-size: 5.8vw;
  }
}

/* =============================================
   RESPONSIVE — MOBILE 767px
   ============================================= */

@media (max-width: 767px) {
  .hero-content {
    bottom: 40px;
    white-space: normal;
    padding: 0 20px;
    gap: 0.75rem;
  }

  .hero-eyebrow {
    font-size: 0.875rem;
  }
  .hero-heading {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  .about-heading {
    line-height: 1.22;
  }
}

/* =============================================
   FLOATING CTAs — pinned to the bottom-left / bottom-right corners of the
   viewport; open the Enquire Now modal (data-eq-open, see js/main.js).
   ============================================= */
.float-cta {
  position: fixed;
  bottom: 24px;
  z-index: var(--z-above);
}
.float-cta--left  { left: 24px; }
.float-cta--right { right: 24px; }

.float-cta__btn {
  position: relative;
  overflow: hidden;              /* clips the shine sweep to the button's rounded corners */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 15px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
/* Left-to-right glossy shine sweep */
.float-cta__btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: floatCtaShine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floatCtaShine {
  0%   { left: -60%; }
  35%  { left: 130%; }
  100% { left: 130%; }
}
.float-cta__icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.float-cta__btn:hover,
.float-cta__btn:focus-visible {
  background: var(--dark);
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .float-cta { bottom: 14px; }
  .float-cta--left  { left: 14px; }
  .float-cta--right { right: 14px; }
  .float-cta__btn {
    padding: 11px 16px;
    gap: 7px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .float-cta__icon { width: 15px; height: 15px; }
}

@media (max-width: 480px) {
  .float-cta__btn span { display: none; }
  .float-cta__btn { padding: 12px; border-radius: 50%; }
  .float-cta__icon { width: 18px; height: 18px; }
}

/* =============================================
   PAGE LOADER — shown right before the enquiry form's native POST
   navigates to thank-you.php; sits above the enquiry modal (9999).
   ============================================= */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(48, 48, 48, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease-out);
}
.page-loader.is-active {
  opacity: 1;
  visibility: visible;
}
.page-loader img {
  width: 120px;
  height: 120px;
}

/* =============================================
   ENQUIRY MODAL
   ============================================= */
.eq-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.eq-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.eq-modal.is-open .eq-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.eq-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 8, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.eq-modal__dialog {
  position: relative;
  width: 90%;
  max-width: 460px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--cream) 0%, var(--white) 42%);
  border: 1px solid rgba(176, 143, 61, 0.18);
  border-radius: 18px;
  padding: 52px 44px 40px;
  box-shadow:
    0 30px 90px rgba(20, 16, 8, 0.3),
    0 2px 0 rgba(255, 255, 255, 0.6) inset;
  transform: translateY(30px) scale(0.96);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
/* thin gold accent bar across the top, following the dialog's own corner radius */
.eq-modal__dialog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, transparent, var(--gold) 25%, var(--gold) 75%, transparent);
}

.eq-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--border-light);
  font-size: 22px;
  line-height: 1;
  color: var(--text-gray);
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.eq-modal__close:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
  transform: rotate(90deg);
}

.eq-modal__content {
  text-align: center;
}

.eq-modal__logo {
  width: 44px;
  height: auto;
  margin: 0 auto 16px;
  display: block;
}

.eq-modal__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}

.eq-modal__title {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 2.125rem;
  line-height: 1.2;
  color: var(--dark);
  margin: 0 0 10px;
}

.eq-modal__sub {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-gray);
  margin: 0 0 30px;
}

.eq-modal__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.eq-modal__field {
  position: relative;
  text-align: left;
}

.eq-modal__field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-gray);
  pointer-events: none;
  transition: color 0.25s var(--ease-out);
}
.eq-modal__field:focus-within .eq-modal__field-icon {
  color: var(--gold);
}

.eq-modal__input {
  width: 100%;
  padding: 21px 16px 9px 46px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--dark);
  outline: none;
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.eq-modal__input:focus {
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(176, 143, 61, 0.14);
}
.eq-modal__input.is-error {
  border-color: #c0392b;
  animation: eqShake 0.4s ease;
}

@keyframes eqShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.eq-modal__error {
  display: none;
  font-size: 0.75rem;
  color: #c0392b;
  margin: 6px 0 0 2px;
  text-align: left;
}
.eq-modal__input.is-error ~ .eq-modal__error {
  display: block;
}

.eq-modal__label {
  position: absolute;
  left: 46px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-gray);
  pointer-events: none;
  transition: top 0.2s var(--ease-out), font-size 0.2s var(--ease-out), color 0.2s var(--ease-out);
  transform-origin: left center;
}
.eq-modal__input:focus + .eq-modal__label,
.eq-modal__input:not(:placeholder-shown) + .eq-modal__label {
  top: 11px;
  transform: translateY(0);
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--gold);
}

.eq-modal__submit {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border: none;
  border-radius: 10px;
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(176, 143, 61, 0.32);
  transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  margin-top: 10px;
}
.eq-modal__submit-icon {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform 0.3s var(--ease-out);
}
.eq-modal__submit:hover {
  background: var(--dark);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(20, 16, 8, 0.28);
}
.eq-modal__submit:hover .eq-modal__submit-icon {
  transform: translateX(4px);
}
.eq-modal__submit:active {
  transform: scale(0.98);
}
.eq-modal__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.eq-modal__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--text-gray);
}
.eq-modal__trust svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--gold);
}

@media (max-width: 480px) {
  .eq-modal__dialog {
    width: 92%;
    padding: 44px 24px 32px;
    border-radius: 14px;
  }
  .eq-modal__title {
    font-size: 1.625rem;
  }
  .eq-modal__sub {
    margin-bottom: 24px;
  }
}