body{margin:0}

    /* ─── LOCAL FONTS ─── */
    @font-face {
      font-family: 'Corbyn';
      src: url("../../assets/7c66b053fa54e316423410b61b1ec34f.woff2") format('woff2');
      font-weight: 200; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Corbyn';
      src: url("../../assets/2cb7424c6bcb47082a94d730d02340b2.woff2") format('woff2');
      font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Corbyn';
      src: url("../../assets/a6013a2a768a7b25a722307add7faa6f.woff2") format('woff2');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Corbyn';
      src: url("../../assets/6b475d7835984a1399e73af49e9ef4f2.woff2") format('woff2');
      font-weight: 500; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Jost';
      src: url("../../assets/ddaedaa157df540f345aac7a7499d39c.ttf") format('truetype');
      font-weight: 200; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Jost';
      src: url("../../assets/fc90cf21f274c71f038dfddbee675963.ttf") format('truetype');
      font-weight: 300; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Jost';
      src: url("../../assets/93cb9eb6884d113407775b589ed91cba.ttf") format('truetype');
      font-weight: 400; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Jost';
      src: url("../../assets/07e63203aa039c0def749c15065fc9ee.ttf") format('truetype');
      font-weight: 500; font-style: normal; font-display: swap;
    }
    @font-face {
      font-family: 'Jost';
      src: url("../../assets/29f07da2826d7dc0b3dc2d62c2dc583a.ttf") format('truetype');
      font-weight: 600; font-style: normal; font-display: swap;
    }

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

    :root {
      --cream-light: #E8DFC8;
      --cream:       #DDD3BB;
      --cream-mid:   #CFC4A8;
      --stone:       #B8AA90;
      --sage:        #163D32;
      --sage-dark:   #081F1A;
      --amber:       #F1A62F;
      --amber-deep:  #8A5210;
      --terracotta:  #AD5C4A;
      --dark-red:    #911E1D;
      --charcoal:    #081F1A;
      --ink:         #142E28;
      --warm-gray:   #6B6050;
      --muted:       #9A8E7A;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Jost', sans-serif;
      background: var(--cream-light);
      color: var(--charcoal);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ─────────────────────────── NAV ─────────────────────────── */

    header {
      position: sticky; top: 0; z-index: 100;
      background: #2f413c;
      border-bottom: 1px solid rgba(244,241,212,0.12);
      transition: transform 320ms ease, opacity 320ms ease;
    }
    header.nav-hidden {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
    }
    .nav-inner {
      max-width: 1240px; margin: 0 auto;
      padding: 0 40px; height: 78px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .nav-logo img { height: 32px; width: auto; display: block; }
    .nav-links { display: flex; align-items: center; gap: 36px; }
    .nav-links a {
      text-decoration: none; color: #f4f1d4; opacity: 0.9;
      font-family: 'Jost', sans-serif;
      font-size: 14px; letter-spacing: 0.04em; text-transform: none;
      font-weight: 400; transition: opacity 200ms;
    }
    .nav-links a:hover { opacity: 1; }
    .nav-cta {
      text-decoration: none; color: #20302c;
      font-family: 'Jost', sans-serif; font-weight: 500;
      display: inline-flex; align-items: center; justify-content: center;
      background: #efa945; border: none;
      border-radius: 999px 999px 0 0; padding: 14px 24px;
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      transition: background 200ms, transform 150ms;
    }
    .nav-cta:hover { background: #d68f2c; transform: translateY(-2px); }

    /* ─────────────────────────── HERO ─────────────────────────── */

    .hero {
      position: relative;
      min-height: calc(100vh - 68px);
      overflow: hidden;
    }
    .hero-image {
      position: absolute; inset: 0;
      background: var(--cream-mid);
    }
    .hero-image::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(8,31,26,0.28) 0%, rgba(8,31,26,0.04) 70%);
    }
    .hero-image img, .hero-image video {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .hero-play {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      z-index: 2; cursor: pointer;
      width: 88px; height: 88px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(232,223,200,0.16);
      border: 1.5px solid rgba(232,223,200,0.85);
      backdrop-filter: blur(3px);
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .hero-play:hover {
      background: rgba(232,223,200,0.28);
      transform: translate(-50%, -50%) scale(1.06);
    }
    .hero-play svg { width: 30px; height: 30px; margin-left: 5px; }
    .hero-play svg path { fill: var(--cream-light); }
    .hero-image { cursor: pointer; }
    .hero-vctrl {
      position: absolute; right: 20px; z-index: 3;
      top: 20px; /* top-right of the video, always on the first screen */
      display: flex; gap: 10px;
    }
    .hero-vbtn {
      width: 44px; height: 44px; border-radius: 50%; padding: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(8,31,26,0.35); border: 1px solid rgba(232,223,200,0.6);
      color: var(--cream-light); cursor: pointer;
      backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
      transition: background 0.25s ease;
    }
    .hero-vbtn:hover { background: rgba(8,31,26,0.55); }
    .hero-vbtn svg { width: 20px; height: 20px; display: block; }
    .hero-vbtn .ic-play, .hero-vbtn .ic-sound { display: none; }
    .hero-vbtn.is-paused .ic-pause, .hero-vbtn.is-on .ic-muted { display: none; }
    .hero-vbtn.is-paused .ic-play, .hero-vbtn.is-on .ic-sound { display: block; }
    /* End card: on desktop the video fills only the area right of the text panel (panel = 30% wide), so the logo centers there */
    @media (min-width: 981px) {
      /* Hero keeps the video's 16:9 shape so no clip gets cropped */
      .hero { min-height: 0; aspect-ratio: 16 / 9; }
      html.hero-endcard .hero-image { background: #082620; }
      html.hero-endcard .hero-image .hero-video { position: absolute; top: 0; left: 30%; width: 70%; height: 100%; }
    }
    .video-overlay {
      position: fixed; inset: 0; z-index: 1000;
      display: none; align-items: center; justify-content: center;
      background: rgba(8,31,26,0.94);
      opacity: 0; transition: opacity 0.35s ease;
    }
    .video-overlay.is-open { display: flex; opacity: 1; }
    .video-overlay video {
      width: 92vw; height: 92vh; max-width: 92vw; max-height: 92vh;
      object-fit: contain; background: #000;
    }
    .video-close {
      position: absolute; top: 22px; right: 26px; z-index: 2;
      width: 44px; height: 44px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(232,223,200,0.12); border: 1px solid rgba(232,223,200,0.5);
      color: var(--cream-light); font-size: 22px; line-height: 1; cursor: pointer;
      transition: background 0.25s ease;
    }
    .video-close:hover { background: rgba(232,223,200,0.25); }
    .hero-image-tag {
      position: absolute; left: 20px; bottom: 18px; z-index: 1;
      font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(232,223,200,0.7); font-family: 'Jost', sans-serif;
    }
    .hero-content {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 30%;
      z-index: 2;
      padding: 80px 52px;
      display: flex; flex-direction: column; justify-content: center;
      background: rgba(10, 8, 5, 0.14);
      backdrop-filter: blur(26px) saturate(160%);
      -webkit-backdrop-filter: blur(26px) saturate(160%);
      border: none;
      border-right: 1px solid rgba(255,255,255,0.08);
    }

    .eyebrow {
      font-family: 'Jost', sans-serif;
      font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--amber-deep); margin-bottom: 28px; font-weight: 500;
      display: flex; align-items: center; gap: 14px;
    }
    .eyebrow::before {
      content: ''; display: block; width: 28px; height: 1px;
      background: var(--amber-deep); flex: none; opacity: 0.8;
    }
    .hero-headline {
      font-family: 'Corbyn', serif;
      font-size: clamp(38px, 4.8vw, 70px);
      font-weight: 200; line-height: 1.06;
      letter-spacing: 0em; color: var(--cream-light);
      margin-bottom: 24px;
    }
    .hero-body {
      font-family: 'Jost', sans-serif;
      font-size: 15.5px; line-height: 1.74; font-weight: 300;
      color: rgba(232,223,200,0.75); max-width: 380px;
      margin-bottom: 44px;
    }
    .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

    .btn-primary {
      display: inline-block; text-decoration: none;
      background: var(--amber); color: var(--charcoal);
      padding: 14px 32px; font-family: 'Jost', sans-serif;
      border-radius: 999px 999px 0 0;
      font-size: 10px; letter-spacing: 0.22em; font-weight: 500;
      text-transform: uppercase; transition: background 200ms;
    }
    .btn-primary:hover { background: #d4922a; }
    .btn-ghost {
      display: inline-block; text-decoration: none;
      font-family: 'Jost', sans-serif;
      color: rgba(232,223,200,0.78); font-size: 10px; letter-spacing: 0.18em;
      text-transform: uppercase; border-bottom: 1px solid rgba(232,223,200,0.3);
      padding-bottom: 3px; transition: color 200ms, border-color 200ms;
    }
    .btn-ghost:hover { color: var(--amber); border-color: var(--amber); }

    /* ─────────────────────────── SECTIONS ─────────────────────────── */

    .section { padding: 112px 0; }
    .container { max-width: 1280px; margin: 0 auto; padding: 0 48px; }

    .section-tag {
      display: inline-flex; align-items: center; gap: 14px;
      font-family: 'Jost', sans-serif;
      font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--amber-deep); margin-bottom: 48px; font-weight: 500;
    }
    .section-tag::before {
      content: ''; display: block; width: 28px; height: 1px;
      background: var(--amber-deep); flex: none; opacity: 0.8;
    }

    /* ─────────────────────────── VISION ─────────────────────────── */

    .vision-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 88px; align-items: start;
    }
    .vision-headline {
      font-family: 'Corbyn', serif;
      font-size: clamp(34px, 4.2vw, 58px);
      font-weight: 300; line-height: 1.06;
      letter-spacing: 0.01em; color: var(--charcoal);
    }
    .vision-body { display: flex; flex-direction: column; gap: 22px; }
    .vision-body p {
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 16px; line-height: 1.76; color: var(--warm-gray);
    }

    /* ─────────────────────────── PULL QUOTE ─────────────────────────── */

    .quote-band {
      background: linear-gradient(135deg, var(--terracotta) 0%, var(--sage-dark) 100%);
      position: relative;
      padding: 100px 48px;
      text-align: center;
    }
    .quote-text {
      position: relative; z-index: 1;
      font-family: 'Corbyn', serif;
      font-size: clamp(24px, 3.4vw, 44px);
      font-weight: 200; font-style: normal;
      line-height: 1.34; letter-spacing: 0.02em;
      color: var(--cream-light); max-width: 1100px; margin: 0 auto;
    }
    .quote-image { margin: 0; display: block; width: 100%; line-height: 0; }
    .quote-image img { width: 100%; height: clamp(440px, 62vw, 880px); object-fit: cover; display: block; }
    .lobby-bleed { margin: 0; display: block; width: 100%; line-height: 0; }
    .lobby-bleed img { width: 100%; height: clamp(460px, 66vw, 940px); object-fit: cover; display: block; }
    .quote-logo { display: block; height: 92px; width: auto; margin: 0 auto 30px; opacity: 0.95; }

    /* ─────────────────────────── PILLARS ─────────────────────────── */

    .pillars-bg {
      background: #032b23;
      position: relative;
    }
    .pillars-bg > .container { position: relative; z-index: 1; }
    .pillars-bg::before, .lead-bg::before {
      content: ''; position: absolute; inset: 0;
      background: #02251e;
      -webkit-mask: url("../../assets/b04d98324a963145a1e8ed31736d9ce1.png") center top / auto 380px repeat;
      mask: url("../../assets/b04d98324a963145a1e8ed31736d9ce1.png") center top / auto 380px repeat;
      pointer-events: none;
    }
    .lead-bg::before { -webkit-mask-size: auto 420px; mask-size: auto 420px; }

    .pillars-header {
      display: flex; justify-content: space-between;
      align-items: flex-end; margin-bottom: 64px; gap: 40px;
    }
    .pillars-headline {
      font-family: 'Corbyn', serif;
      font-size: clamp(34px, 4.2vw, 58px);
      font-weight: 300; line-height: 1.04; color: var(--cream-light);
    }
    .pillars-bg .section-tag { color: rgba(232,223,200,0.62); }
    .pillars-bg .section-tag::before,
    .lead-bg .section-tag::before { background: var(--amber); }
    /* Dark grounds get cream eyebrows; light grounds keep the deep brown */
    .hero .eyebrow,
    .pillars-list.pinned .pillar-lead { color: var(--cream-light); }
    .hero .eyebrow::before { background: var(--cream-light); opacity: 0.9; }
    .res-bg .res-dots span.on { background: var(--cream-light); }
    .pillars-list.pinned .pillar-lead { color: var(--amber-deep); }
    .pillars-intro {
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 15.5px; color: rgba(232,223,200,0.72);
      max-width: 260px; text-align: right; line-height: 1.66; padding-bottom: 4px;
    }

    .pillars-list { border-top: 1px solid var(--stone); }

    .pillar-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      padding: 64px 32px;
      border-bottom: 1px solid var(--stone);
      align-items: center;
      background: var(--cream);
      position: relative; z-index: 1;
    }
    .pillar-image {
      width: 100%;
      aspect-ratio: 1;
      overflow: hidden;
      background: var(--stone);
    }
    .pillar-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .pillar-content-block {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .pillar-num {
      font-family: 'Corbyn', serif;
      font-size: 44px; font-weight: 300; color: var(--stone);
      line-height: 1; padding-top: 4px;
    }
    .pillar-name {
      font-family: 'Corbyn', serif;
      font-size: 26px; font-weight: 300; color: var(--charcoal);
      line-height: 1.1;
    }
    .pillar-lead {
      font-family: 'Jost', sans-serif; font-weight: 500;
      font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--amber-deep); margin-bottom: 10px;
    }
    .pillar-body {
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 15px; line-height: 1.7; color: var(--warm-gray);
    }

    /* pinned: full-page image with a bottom band for copy + nav dots */
    .pillars-list.pinned {
      position: relative;
      width: 100vw; max-width: 100vw;
      margin-left: calc(50% - 50vw);
      border-top: none;
    }
    .pillars-list.pinned .pillars-stage {
      --band-h: clamp(180px, 23vh, 250px);
      position: sticky; top: 0; height: 100vh; overflow: hidden;
      display: block;
    }
    .pillars-list.pinned .pillar-row {
      position: absolute; inset: 0;
      display: block; padding: 0; border-bottom: none; gap: 0;
      opacity: 0; transition: opacity .7s ease;
      pointer-events: none;
    }
    .pillars-list.pinned .pillar-row.is-active { opacity: 1; pointer-events: auto; }
    /* photo fills everything above the band */
    .pillars-list.pinned .pillar-image {
      position: absolute; top: 0; left: 0; right: 0; bottom: var(--band-h);
      aspect-ratio: auto; width: auto; height: auto;
    }
    /* bottom band: number, title, copy, dots live at its right edge */
    .pillars-list.pinned .pillar-content-block {
      position: absolute; left: 0; right: 0; bottom: 0;
      height: var(--band-h);
      background: var(--cream-light);
      border-top: 1px solid var(--stone);
      display: grid;
      grid-template-columns: auto minmax(190px, 280px) minmax(0, 1fr);
      align-items: center;
      gap: clamp(20px, 3vw, 48px);
      padding: 0 clamp(120px, 12vw, 200px) 0 clamp(24px, 4vw, 64px);
    }
    .pillars-list.pinned .pillar-num { margin: 0; font-size: clamp(52px, 5vw, 72px); }
    .pillars-list.pinned .pillar-name { margin: 0; font-size: clamp(32px, 3.2vw, 46px); }
    .pillars-list.pinned .pillar-lead { font-size: 12px; letter-spacing: 0.2em; margin-bottom: 4px; }
    .pillars-list.pinned .pillar-content { display: flex; flex-direction: column; gap: 6px; }
    .pillars-list.pinned .pillar-body {
      max-width: 68ch; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.6;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    /* dots sit inside the band, bottom-right */
    .pillars-list.pinned .pillars-progress {
      top: auto; bottom: calc(var(--band-h) / 2); right: clamp(28px, 4vw, 68px);
      transform: translateY(50%);
      flex-direction: column; gap: 0;
    }
    .pillars-progress {
      position: absolute; top: 50%; right: 40px; transform: translateY(-50%);
      z-index: 3; display: flex; flex-direction: column; gap: 6px;
    }
    .pillars-progress button {
      appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0;
      width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer;
      border-radius: 50%;
    }
    /* --s / --o are set per dot from its distance to the active one: nearer = bigger and stronger */
    .pillars-progress button::before {
      content: ''; width: 8px; height: 8px; border-radius: 50%;
      background: var(--stone); opacity: calc(var(--o, 1) * 0.6);
      transform: scale(var(--s, 1));
      transition: opacity .4s ease, background .4s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
    }
    .pillars-progress button:hover::before { opacity: 1; transform: scale(calc(var(--s, 1) * 1.25)); }
    .pillars-progress button.on::before { opacity: 1; background: var(--amber); }
    .pillars-progress button:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
    /* extra stops: green = back to the section intro, sand = on to the sand garden */
    .pillars-progress .dot-intro::before { background: var(--sage); opacity: var(--o, 1); }
    .pillars-progress .dot-sand::before  { background: #C9A86E; opacity: var(--o, 1); }

    /* ─────────────────────────── LOCATION ─────────────────────────── */

    .location-grid {
      display: grid; grid-template-columns: 1fr 1.1fr;
      gap: 88px; align-items: start;
    }
    .location-headline {
      font-family: 'Corbyn', serif;
      font-size: clamp(28px, 3.6vw, 48px);
      font-weight: 300; line-height: 1.07;
      color: var(--charcoal); margin-bottom: 22px;
    }
    .location-body {
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 16px; line-height: 1.74; color: var(--warm-gray);
      margin-bottom: 36px;
    }
    .location-list { border-top: 1px solid var(--stone); list-style: none; }
    .location-list li {
      display: flex; gap: 16px; align-items: flex-start;
      padding: 14px 0; border-bottom: 1px solid var(--stone);
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 14.5px; color: var(--ink); line-height: 1.5;
    }
    .location-list li::before {
      content: ''; display: block; flex: none;
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--amber-deep); margin-top: 9px;
    }
    .map-wrap { border: 1px solid var(--stone); overflow: hidden; }
    .map-label {
      padding: 13px 18px;
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 10.5px; color: var(--warm-gray); letter-spacing: 0.06em;
      border-top: 1px solid var(--stone);
    }

    /* ─────────────────────────── RESIDENCES ─────────────────────────── */

    .res-bg { background: var(--cream); }

    /* full-width image slider */
    .res-full { position: relative; }
    .res-slider {
      position: relative; width: 100%;
      height: clamp(420px, 54vw, 780px);
      overflow: hidden; background: var(--stone);
    }
    .res-slide {
      position: absolute; inset: 0;
      opacity: 0; transition: opacity .8s ease; pointer-events: none;
    }
    .res-slide.is-active { opacity: 1; pointer-events: auto; }
    .res-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .res-slide-cap {
      position: absolute; left: 26px; bottom: 22px; z-index: 2;
      font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: var(--cream-light);
      text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.7);
      pointer-events: none;
    }
    .res-slide::after {
      content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
      pointer-events: none; z-index: 1;
    }
    .res-dots {
      display: flex; gap: 11px; justify-content: center; margin-top: 26px;
    }
    .res-dots span {
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--stone); opacity: 0.45; cursor: pointer;
      transition: opacity .35s, background .35s;
    }
    .res-dots span.on { opacity: 1; background: var(--amber-deep); }
    .res-arrow {
      position: absolute; top: calc(clamp(420px, 54vw, 780px) / 2); transform: translateY(-50%);
      z-index: 3; width: 52px; height: 52px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(3,45,37,0.42); border: 1px solid rgba(232,223,200,0.3);
      color: var(--cream-light); cursor: pointer;
      -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
      transition: background 220ms, border-color 220ms;
    }
    .res-arrow:hover { background: rgba(3,45,37,0.72); border-color: rgba(232,223,200,0.6); }
    .res-arrow.prev { left: 22px; }
    .res-arrow.next { right: 22px; }
    .res-arrow svg { width: 17px; height: 17px; display: block; }

    /* ─── THANK YOU PAGE ─── */
    .ty-page {
      min-height: calc(100vh - 79px); box-sizing: border-box;
      display: flex; align-items: center; padding: 96px 0;
    }
    .ty-page > .container { width: 100%; box-sizing: border-box; }
    .ty-card {
      position: relative; margin: 0 auto; box-sizing: border-box;
      width: min(560px, 100%);
      background: rgba(3, 43, 35, 0.55);
      -webkit-backdrop-filter: blur(26px) saturate(160%);
      backdrop-filter: blur(26px) saturate(160%);
      border: 1px solid rgba(232,223,200,0.22);
      border-radius: 999px 999px 0 0;
      padding: 72px 56px 56px;
      box-shadow: 0 30px 80px -18px rgba(0,0,0,0.6);
      text-align: center;
    }
    .ty-card img { height: 68px; width: auto; margin: 0 auto 26px; display: block; }
    .ty-title {
      font-family: 'Corbyn', serif; font-weight: 300;
      font-size: clamp(38px, 5vw, 54px); line-height: 1.06;
      color: var(--cream-light); margin: 0 0 16px;
    }
    .ty-body {
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 16px; line-height: 1.7;
      color: rgba(232,223,200,0.8);
      max-width: 400px; margin: 0 auto;
    }
    .ty-actions { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
    @media (max-width: 560px) {
      .ty-page { padding: 64px 0; }
      .ty-card { padding: 52px 26px 44px; }
      .ty-card img { height: 52px; }
    }

    .res-copy {
      max-width: 760px; margin: 40px auto 0; text-align: center;
      display: flex; flex-direction: column; align-items: center;
    }
    .res-headline {
      font-family: 'Corbyn', serif;
      font-size: clamp(22px, 2.6vw, 38px);
      font-weight: 200; line-height: 1.08;
      color: var(--charcoal); margin-bottom: 18px;
    }
    .res-body {
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 14.5px; line-height: 1.74;
      color: var(--warm-gray);
      margin-bottom: 32px;
    }

    /* ─────────────────────────── LEAD CAPTURE ─────────────────────────── */

    .lead-bg {
      background: #032b23;
      position: relative;
    }
    .lead-bg > .container { position: relative; z-index: 1; }

    .lead-center {
      max-width: 600px; margin: 0 auto; text-align: center;
      margin-bottom: 52px;
    }
    .lead-tag {
      display: inline-flex; align-items: center; justify-content: center; gap: 14px;
      font-family: 'Jost', sans-serif;
      font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
      color: var(--amber); margin-bottom: 18px; font-weight: 400;
    }
    .lead-tag::before, .lead-tag::after {
      content: ''; display: block; width: 20px; height: 1px;
      background: var(--amber); flex: none; opacity: 0.8;
    }
    .lead-headline {
      font-family: 'Corbyn', serif;
      font-size: clamp(36px, 4.8vw, 60px);
      font-weight: 200; line-height: 1.04;
      letter-spacing: 0.01em;
      color: var(--cream-light); margin-bottom: 16px;
    }
    .lead-body {
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 15.5px; line-height: 1.68; color: rgba(232,223,200,0.72);
    }

    .form-card {
      max-width: 720px; margin: 0 auto;
      background: rgba(8, 31, 26, 0.50);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(232,223,200,0.12);
      padding: 44px;
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .form-field-wide { grid-column: 1 / -1; }
    textarea.form-ctrl { resize: vertical; min-height: 96px; font: inherit; }
    .form-field { display: flex; flex-direction: column; gap: 8px; }
    .form-lbl {
      font-family: 'Jost', sans-serif; font-weight: 500;
      font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(232,223,200,0.55);
    }
    .form-ctrl {
      width: 100%; padding: 12px 14px;
      border: 1px solid rgba(232,223,200,0.18);
      background: rgba(232,223,200,0.06); color: var(--cream-light);
      font-family: 'Jost', sans-serif; font-size: 14.5px; font-weight: 300;
      outline: none; transition: border-color 200ms;
      appearance: auto;
    }
    .form-ctrl::placeholder { color: rgba(232,223,200,0.3); }
    .form-ctrl:focus { border-color: rgba(241,166,47,0.6); }
    .form-ctrl option { background: var(--sage-dark); color: var(--cream-light); }
    .form-submit {
      margin-top: 24px; width: 100%;
      background: var(--amber); color: var(--charcoal);
      border: none; padding: 16px 32px;
      border-radius: 999px 999px 0 0;
      font-family: 'Jost', sans-serif;
      font-size: 10px; letter-spacing: 0.24em; font-weight: 500; text-transform: uppercase;
      cursor: pointer; transition: background 200ms;
      display: block; box-sizing: border-box; text-align: center; text-decoration: none;
    }
    .form-submit:hover { background: #d4922a; }

    /* ─────────────────────────── FOOTER ─────────────────────────── */

    footer {
      background: var(--sage-dark);
      color: rgba(232,223,200,0.65);
    }

    .footer-grid {
      max-width: 1280px; margin: 0 auto;
      padding: 68px 48px 40px;
      display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 48px;
    }
    .footer-brand img { height: 48px; width: auto; display: block; }
    .footer-tagline {
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 13.5px; line-height: 1.66; margin-top: 20px; max-width: 300px;
    }
    .footer-cta {
      display: inline-block; text-decoration: none;
      margin-top: 24px;
      background: transparent; color: rgba(232,223,200,0.72);
      border: 1px solid rgba(232,223,200,0.22); padding: 9px 20px;
      border-radius: 999px 999px 0 0;
      font-family: 'Jost', sans-serif;
      font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
      transition: border-color 200ms, color 200ms;
    }
    .footer-cta:hover { border-color: rgba(232,223,200,0.55); color: var(--cream-light); }
    .footer-col-title {
      font-family: 'Jost', sans-serif; font-weight: 500;
      font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
      color: rgba(232,223,200,0.32); margin-bottom: 20px;
    }
    .footer-nav { display: flex; flex-direction: column; gap: 13px; }
    .footer-nav a {
      font-family: 'Jost', sans-serif; font-weight: 300;
      color: rgba(232,223,200,0.68); text-decoration: none;
      font-size: 14px; transition: color 200ms;
    }
    .footer-nav a:hover { color: var(--cream-light); }
    .footer-contact {
      display: flex; flex-direction: column; gap: 12px;
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 14px;
    }
    .footer-bottom {
      max-width: 1280px; margin: 0 auto;
      padding: 18px 48px;
      border-top: 1px solid rgba(232,223,200,0.07);
      display: flex; justify-content: space-between;
      font-family: 'Jost', sans-serif; font-weight: 300;
      font-size: 10.5px; color: rgba(232,223,200,0.28);
    }
    .footer-legal { display: flex; align-items: center; gap: 20px; }
    .footer-legal a {
      color: rgba(232,223,200,0.42); text-decoration: none;
      transition: color 200ms;
    }
    .footer-legal a:hover { color: var(--cream-light); }

    /* ─────────────────────────── RESPONSIVE ─────────────────────────── */

    /* ─────────────────────────── ZEN SAND ─────────────────────────── */
    #sand-section {
      position: relative; z-index: 2; width: 100%; min-height: 100vh; margin-top: -120px;
      overflow: hidden; cursor: none; touch-action: pan-y; background: #cdbfa3 url("../../assets/195cb844f57096d5669511e7ec6d48b3.jpg") center/cover no-repeat;
    }
    #sand-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; z-index: 1; }
    .sand-hint {
      position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 6;
      font-family: 'Jost', sans-serif; font-size: 9.5px; letter-spacing: 0.22em;
      text-transform: uppercase; color: rgba(90, 72, 44, 0.40);
      pointer-events: none; user-select: none; white-space: nowrap;
    }
    /* Phones/tablets: make the rake hint easy to read */
    @media (hover: none), (pointer: coarse) {
      .sand-hint {
        bottom: 28px; padding: 9px 16px; border-radius: 999px;
        font-size: 11px; font-weight: 500; letter-spacing: 0.16em; line-height: 1.4;
        color: #46321d; background: rgba(244, 236, 220, 0.82);
        box-shadow: 0 2px 10px rgba(48, 32, 15, 0.18);
        white-space: normal; text-align: center; width: max-content; max-width: calc(100% - 48px);
      }
    }
    .sand-reset {
      position: absolute; top: 22px; right: 28px; z-index: 6;
      font-family: 'Jost', sans-serif; font-size: 9px; letter-spacing: 0.20em;
      text-transform: uppercase; color: rgba(90, 72, 44, 0.35);
      cursor: none; user-select: none; transition: color 200ms;
    }
    .sand-reset:hover { color: rgba(90, 72, 44, 0.65); }
    #rock-cursor {
      position: fixed; pointer-events: none; z-index: 9999;
      transform: translate(-50%, -50%); display: none;
    }
    .marble {
      display: block; width: 79px; height: auto;
      will-change: transform;
    }

    @media (max-width: 980px) {
      .hero { min-height: auto; }
      .hero-image { position: relative; height: auto; aspect-ratio: 16 / 9; }
      .hero-image::after { display: none; }
      /* location tag moves out of the photo into a hairline strip beneath it */
      .hero-image-tag {
        left: 40px; right: 40px; top: 100%; bottom: auto;
        display: block; padding: 13px 0;
        border-bottom: 1px solid rgba(232,223,200,0.16);
        color: rgba(232,223,200,0.62);
      }
      .hero-content {
        position: static; width: 100%;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: var(--sage-dark); padding: 82px 40px 44px;
      }
      .res-glass {
        position: static; width: 100%;
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: var(--sage-dark); padding: 40px;
      }
      .vision-grid, .location-grid { grid-template-columns: 1fr; gap: 48px; }
      .pillars-header { flex-direction: column; align-items: flex-start; }
      .pillars-intro { text-align: left; max-width: none; }
      .pillar-row { grid-template-columns: 1fr; gap: 32px; padding: 48px 20px; }
      .pillar-image { aspect-ratio: 1; }
      .pillar-content-block { gap: 12px; }
      .footer-grid { grid-template-columns: 1fr; gap: 36px; }
      .nav-links { display: none; }
    }

    @media (max-width: 600px) {
      .container { padding: 0 24px; }
      .nav-inner { padding: 0 24px; }
      .quote-band { padding: 72px 24px; }
      .section { padding: 80px 0; }
      .form-grid { grid-template-columns: 1fr; }
      .form-card { padding: 28px 24px; }
      .footer-grid { padding: 52px 24px 36px; }
      .footer-bottom { padding: 16px 24px; flex-direction: column; gap: 6px; }
      .res-slider { height: clamp(320px, 62vw, 480px); }
      .res-arrow { width: 42px; height: 42px; top: calc(clamp(320px, 62vw, 480px) / 2); }
      .res-arrow.prev { left: 12px; }
      .res-arrow.next { right: 12px; }
    }
  

    /* ─────────────────────────── ACCESSIBILITY ─────────────────────────── */

    .skip-link {
      position: absolute; left: 16px; top: -100px; z-index: 10000;
      background: var(--amber); color: var(--charcoal);
      padding: 12px 22px; border-radius: 999px 999px 0 0;
      font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500;
      letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
    }
    .skip-link:focus { top: 12px; }
    .sr-only {
      position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    main:focus { outline: none; }

    /* Visible keyboard focus: deep green on light grounds, amber on dark ones */
    a:focus-visible, button:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 2px solid var(--sage-dark); outline-offset: 3px;
    }
    header :focus-visible, footer :focus-visible, .hero :focus-visible,
    .pillars-bg :focus-visible, .lead-bg :focus-visible, .res-slider ~ button:focus-visible,
    .skip-link:focus-visible {
      outline-color: var(--amber);
    }

    /* Sand garden reset is a real <button> now: keep the original text look */
    button.sand-reset {
      background: none; border: 0; padding: 4px 0; margin: 0;
      line-height: normal; -webkit-appearance: none; appearance: none;
    }
    button.sand-reset:focus-visible { outline-color: #46321d; color: rgba(90, 72, 44, 0.85); }

    .res-slider { touch-action: pan-y; }

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

    /* ─── COMING SOON PAGE (built from the Thank You card) ─── */
    .cs-page .ty-card .lead-tag { margin-bottom: 14px; }
    .cs-page .ty-title { font-size: clamp(42px, 5.6vw, 62px); font-weight: 200; }
    .cs-place {
      margin-top: 34px;
      font-family: 'Jost', sans-serif; font-size: 9.5px; font-weight: 400;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(232,223,200,0.62);
    }

    /* ─── PRIVATE PREVIEW PASSWORD (Coming Soon card + approved form controls) ─── */
    .pv-form {
      max-width: 340px; margin: 30px auto 0; text-align: left;
      display: flex; flex-direction: column; gap: 8px;
    }
    .pv-form .form-ctrl:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
    .pv-form .form-ctrl[aria-invalid="true"] { border-color: rgba(242,164,144,0.75); }
    .pv-error {
      margin-top: 4px;
      font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.02em;
      color: #F2A490;
    }
    .pv-form .form-submit { margin-top: 18px; }
    .cs-page .pv-card .ty-title { font-size: clamp(34px, 4.2vw, 48px); white-space: nowrap; }