:root {
      box-sizing: border-box;
      padding-top: env(safe-area-inset-top, 0px);
      padding-bottom: env(safe-area-inset-bottom, 0px);
      --bg: #FFFEF9;
      --bg2: #F4F2E9;
      --fg: #12352B;
      --muted: #56655D;
      --card: #FFFFFF;
      --line: #E0E5DB;
      --accent: #1F5A45;
      --accent-fg: #FFFFFF;
      --gold: #8A6B27;
      --deep: #0F2E25;
      --shadow: 0 10px 30px rgba(15, 46, 37, .08);
      --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
      --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    }

    :root[data-theme="dark"] {
      --bg: #0F2E25;
      --bg2: #123A2F;
      --fg: #F6F2E6;
      --muted: #B7C4BB;
      --card: #16443A;
      --line: #2A5A4C;
      --accent: #E2C88C;
      --accent-fg: #0F2E25;
      --gold: #E2C88C;
      --deep: #0A211A;
      --shadow: 0 10px 30px rgba(0, 0, 0, .25);
    }

    *,
    *::before,
    *::after {
      box-sizing: inherit
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 86px)
    }

    html,
    body {
      margin: 0
    }

    body {
      background: var(--bg);
      color: var(--fg);
      font-family: var(--sans);
      font-weight: 400;
      line-height: 1.7;
      font-size: 16px;
      -webkit-font-smoothing: antialiased
    }

    img {
      max-width: 100%;
      display: block
    }

    a {
      color: inherit
    }

    h1,
    h2,
    h3 {
      font-family: var(--serif);
      font-weight: 600;
      line-height: 1.16;
      margin: 0
    }

    .wrap {
      max-width: 1180px;
      margin: 0 auto;
      padding: 0 22px
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 500;
      margin: 0 0 16px
    }

    .eyebrow::before {
      content: "";
      width: 34px;
      height: 1.5px;
      background: currentColor;
      display: block
    }

    section {
      padding: 78px 0
    }

    h2 {
      font-size: clamp(28px, 4.6vw, 42px);
      margin-bottom: 16px;
      letter-spacing: -.005em
    }

    h2 em {
      font-style: italic;
      color: var(--gold);
      font-weight: 500
    }

    .lead {
      color: var(--muted);
      max-width: 620px;
      margin: 0 0 34px;
      font-size: 17px
    }

    .ic {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: none
    }

    /* header */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-radius: 999px;
      padding: 14px 26px;
      font-family: var(--sans);
      font-weight: 500;
      font-size: 15px;
      text-decoration: none;
      border: 1.5px solid transparent;
      cursor: pointer;
      line-height: 1;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(15, 46, 37, .18)
    }

    .btn-p {
      background: var(--accent);
      color: var(--accent-fg)
    }

    .btn-o {
      border-color: var(--accent);
      color: var(--fg);
      background: transparent
    }

    .btn-wa {
      background: #1FA855;
      color: #fff
    }

    .btn-sm {
      padding: 11px 18px;
      font-size: 14px
    }

    /* header (dark green, brand match) */
    header {
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 50;
      background: #0F2E25;
      border-bottom: 1px solid rgba(226, 200, 140, .16);
      transition: box-shadow .3s ease, background .3s ease
    }

    header.scrolled {
      box-shadow: 0 10px 30px rgba(0, 0, 0, .30);
      background: rgba(15, 46, 37, .96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px)
    }

    .hbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 68px;
      gap: 24px
    }

    .logo {
      display: flex;
      align-items: center;
      flex: none;
      text-decoration: none
    }

    .logo img {
      height: 50px;
      width: auto
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      flex: none;
      min-width: 0
    }

    .hright {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: none
    }

    .tag {
      display: block;
      color: #E2C88C;
      font-family: var(--serif);
      font-weight: 500;
      font-size: 10.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      line-height: 1.5;
      white-space: nowrap
    }

    .tag span {
      display: inline
    }

    @media(max-width:560px) {
      .tag span {
        display: block
      }

      .tag {
        font-size: 9px;
        letter-spacing: .12em
      }

      .brand {
        gap: 12px
      }
    }

    nav.main {
      display: none;
      align-items: center;
      gap: 30px;
      margin: 0 0 0 auto
    }

    nav.main a {
      position: relative;
      color: #DCE4DC;
      text-decoration: none;
      font-size: 12.5px;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 400;
      padding: 8px 0;
      transition: color .2s
    }

    nav.main a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 2px;
      height: 1.5px;
      background: #E2C88C;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease
    }

    nav.main a:hover,
    nav.main a.active {
      color: #E2C88C
    }

    nav.main a:hover::after,
    nav.main a.active::after {
      transform: scaleX(1)
    }

    .hbtns {
      display: none;
      gap: 10px;
      align-items: center
    }

    .btn-g {
      border-color: rgba(226, 200, 140, .75);
      color: #E2C88C;
      background: transparent
    }

    .btn-g:hover {
      background: rgba(226, 200, 140, .10)
    }

    .btn-gold {
      background: #E2C88C;
      color: #0F2E25
    }

    .btn-book {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding: 8px 18px;
      font-family: var(--sans);
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .03em;
      border-radius: 999px;
      background: #E2C88C;
      color: #0F2E25;
      text-decoration: none;
      line-height: 1;
      white-space: nowrap;
      border: 1px solid transparent;
      box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
      cursor: pointer
    }

    .btn-book .ic {
      width: 15px;
      height: 15px;
      flex-shrink: 0
    }

    .btn-book:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, .20);
      background: #EBD49E
    }

    @media(max-width:340px) {
      .menu {
        width: 34px;
        height: 34px;
        margin-right: 6px
      }

      .brand {
        gap: 8px
      }

      .tag {
        display: none
      }
    }

    .menu {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 1px solid rgba(226, 200, 140, .45);
      border-radius: 12px;
      background: transparent;
      cursor: pointer
    }

    .menu span {
      display: block;
      width: 20px;
      height: 1.8px;
      background: #E2C88C;
      transition: transform .25s ease, opacity .25s ease
    }

    header.open .menu span:nth-child(1) {
      transform: translateY(6.8px) rotate(45deg)
    }

    header.open .menu span:nth-child(2) {
      opacity: 0
    }

    header.open .menu span:nth-child(3) {
      transform: translateY(-6.8px) rotate(-45deg)
    }

    .drop {
      display: none;
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      background: #0F2E25;
      border-bottom: 1px solid rgba(226, 200, 140, .16);
      padding: 6px 22px 22px;
      box-shadow: 0 24px 40px rgba(0, 0, 0, .35)
    }

    header.open .drop {
      display: block
    }

    .drop a.l {
      display: block;
      color: #EDEAD9;
      text-decoration: none;
      padding: 15px 0;
      border-bottom: 1px solid rgba(226, 200, 140, .12);
      font-size: 13px;
      letter-spacing: .16em;
      text-transform: uppercase
    }

    .drop .btn {
      width: 100%;
      margin-top: 18px
    }

    @media(min-width:1200px) {
      .hbar {
        height: 80px
      }

      .logo img {
        height: 54px
      }

      .menu {
        display: none
      }

      nav.main {
        display: flex;
        gap: 20px;
        margin: 0 8px 0 auto
      }

      nav.main a {
        letter-spacing: .12em
      }

      .drop {
        left: auto;
        right: max(22px, calc((100% - 1180px)/2 + 22px));
        width: 270px;
        border: 1px solid rgba(226, 200, 140, .22);
        border-top: 0;
        border-radius: 0 0 18px 18px;
        padding: 16px 18px 18px
      }

      .drop a.l {
        display: none
      }

      .drop .btn {
        margin-top: 0
      }
    }


    /* hero */
    .hero {
      position: relative;
      min-height: 92vh;
      display: flex;
      align-items: flex-end;
      color: #fff;
      padding: 0;
      overflow: hidden
    }

    .hero img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation: zoom 22s ease-out both
    }

    @keyframes zoom {
      from {
        transform: scale(1.08)
      }

      to {
        transform: scale(1)
      }
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(10, 32, 25, .35) 0%, rgba(10, 32, 25, .30) 30%, rgba(10, 32, 25, .78) 68%, rgba(10, 32, 25, .94) 100%)
    }

    .hero h1,
    .hero p.sub {
      text-shadow: 0 2px 18px rgba(0, 0, 0, .35)
    }

    .hero .wrap {
      position: relative;
      z-index: 2;
      width: 100%;
      padding-top: 130px;
      padding-bottom: 58px
    }

    .hero .eyebrow {
      color: #E2C88C
    }

    .hero h1 {
      font-size: clamp(38px, 8vw, 68px);
      max-width: 820px;
      letter-spacing: -.01em
    }

    .hero h1 em {
      display: block;
      font-style: italic;
      color: #E2C88C;
      font-weight: 500
    }

    .hero p.sub {
      font-size: 18px;
      max-width: 560px;
      margin: 20px 0 28px;
      color: #F0EEE4
    }

    .cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px
    }

    .hero .btn-p {
      background: #fff;
      color: #12352B
    }

    .hero .btn-o {
      border-color: rgba(255, 255, 255, .85);
      color: #fff
    }

    /* stat strip */
    .strip {
      background: var(--deep);
      color: #F6F2E6;
      padding: 0
    }

    .strip .wrap {
      display: grid;
      grid-template-columns: repeat(4, 1fr)
    }

    .stat {
      padding: 26px 14px;
      text-align: center;
      border-right: 1px solid rgba(226, 200, 140, .22)
    }

    .stat:last-child {
      border-right: 0
    }

    .stat b {
      display: block;
      font-family: var(--serif);
      font-size: clamp(20px, 2.5vw, 30px);
      font-weight: 600;
      color: #E2C88C;
      line-height: 1.1;
      white-space: nowrap
    }

    .stat span {
      font-size: 12px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: #C9D6CC
    }

    /* cards */
    .grid {
      display: grid;
      gap: 16px
    }

    .grid>* {
      min-width: 0
    }

    .g2 {
      grid-template-columns: 1fr 1fr
    }

    .g3 {
      grid-template-columns: repeat(3, 1fr)
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 24px;
      box-shadow: var(--shadow);
      transition: transform .25s ease, box-shadow .25s ease
    }

    .card:hover {
      transform: translateY(-4px)
    }

    .card h3 {
      font-size: 20px;
      margin-bottom: 6px
    }

    .card p {
      margin: 0;
      color: var(--muted);
      font-size: 15px
    }

    .pillars .card .badge {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--gold) 16%, transparent);
      color: var(--gold);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px
    }

    .pillars .card .badge .ic {
      width: 24px;
      height: 24px
    }

    .pillars h3 {
      font-family: var(--sans);
      font-size: 14px;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 500;
      color: var(--fg)
    }

    .alt {
      background: var(--bg2)
    }

    /* gallery */
    .gal {
      display: grid;
      gap: 14px;
      grid-template-columns: repeat(6, 1fr)
    }

    .gal figure {
      margin: 0;
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: var(--shadow)
    }

    .gal img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .8s ease
    }

    .gal figure:hover img {
      transform: scale(1.05)
    }

    .gal figure::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 55%, rgba(10, 32, 25, .55));
      pointer-events: none
    }

    .gal figcaption {
      position: absolute;
      left: 16px;
      bottom: 14px;
      z-index: 2;
      color: #fff;
      font-size: 12px;
      letter-spacing: .2em;
      text-transform: uppercase;
      font-weight: 500
    }

    .gal .a {
      grid-column: span 6;
      aspect-ratio: 21/8
    }

    .gal .b {
      grid-column: span 3;
      aspect-ratio: 4/3
    }

    .gal .c {
      grid-column: span 3;
      aspect-ratio: 4/3
    }

    .gal .d {
      grid-column: span 6;
      aspect-ratio: 21/8
    }

    .split {
      display: grid;
      gap: 48px;
      grid-template-columns: 1fr 1fr;
      align-items: center
    }

    .rounded {
      border-radius: 22px;
      overflow: hidden;
      box-shadow: var(--shadow)
    }

    .sizes {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 8px 0 24px
    }

    .size {
      border: 1.5px solid var(--accent);
      border-radius: 16px;
      padding: 14px 20px;
      font-family: var(--serif);
      font-size: 24px;
      background: var(--card)
    }

    .size small {
      display: block;
      font-family: var(--sans);
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted)
    }

    ul.tick {
      list-style: none;
      padding: 0;
      margin: 0 0 22px
    }

    ul.tick li {
      padding: 10px 0 10px 32px;
      position: relative;
      border-bottom: 1px solid var(--line)
    }

    ul.tick li::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 18px;
      width: 12px;
      height: 7px;
      border-left: 2px solid var(--gold);
      border-bottom: 2px solid var(--gold);
      transform: rotate(-45deg)
    }

    .club-amenities {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      margin: 44px auto 52px;
      max-width: 1040px;
    }

    .club-amenity {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 40px 24px 36px;
      position: relative;
    }

    .club-amenity:not(:nth-child(3n)) {
      border-right: 1px solid var(--line);
    }

    .club-amenity:nth-child(-n+3) {
      border-bottom: 1px solid var(--line);
    }

    .ca-badge {
      width: 106px;
      height: 106px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: #E4E8D2;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(15, 46, 37, .06);
      transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
    }

    .club-amenity:hover .ca-badge {
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 8px 22px rgba(15, 46, 37, .12);
    }

    .ca-badge img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      border-radius: 50%;
    }

    .ca-title {
      font-family: var(--serif);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: var(--fg);
      margin: 0 0 12px;
      line-height: 1.35;
      max-width: 250px;
    }

    .ca-divider {
      width: 36px;
      height: 1.5px;
      background: var(--gold);
      margin: 0 auto 12px;
      border-radius: 1px;
    }

    .ca-desc {
      font-family: var(--serif);
      font-size: 15px;
      line-height: 1.45;
      color: var(--muted);
      margin: 0;
      max-width: 220px;
    }

    .plans {
      display: grid;
      gap: 14px;
      grid-template-columns: 1fr 1fr;
      margin-top: 24px
    }

    .plans figure {
      margin: 0
    }

    .plans figcaption {
      font-size: 12px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 8px
    }

    .plans img {
      border-radius: 14px;
      border: 1px solid var(--line);
      width: 100%;
      background: #fff
    }

    .note {
      font-size: 13px;
      color: var(--muted)
    }

    /* concept section */
    .concept {
      background: var(--deep);
      color: #F6F2E6;
      position: relative;
      overflow: hidden
    }

    .concept::before {
      content: "";
      position: absolute;
      right: -120px;
      top: -120px;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      border: 1px solid rgba(226, 200, 140, .25)
    }

    .concept::after {
      content: "";
      position: absolute;
      right: -60px;
      top: -60px;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      border: 1px solid rgba(226, 200, 140, .18)
    }

    .concept .wrap {
      position: relative;
      z-index: 2
    }

    .concept h2 {
      max-width: 760px
    }

    .concept .eyebrow {
      color: #E2C88C
    }

    .concept h2 em {
      color: #E2C88C
    }

    .concept .lead {
      color: #C9D6CC
    }

    .concept .card {
      background: rgba(255, 255, 255, .05);
      border-color: rgba(226, 200, 140, .22);
      box-shadow: none
    }

    .concept .card h3 {
      color: #F6F2E6
    }

    .concept .card p {
      color: #C9D6CC
    }

    .concept .btn-p {
      background: #E2C88C;
      color: #0F2E25
    }

    .curated {
      text-align: center
    }

    .curated .names {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px 34px;
      margin-top: 22px;
      font-family: var(--serif);
      font-size: 20px
    }

    .big {
      font-family: var(--serif);
      font-size: clamp(46px, 9vw, 76px);
      color: var(--gold);
      line-height: 1
    }

    /* form */
    .formcard {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 32px;
      max-width: 560px;
      box-shadow: var(--shadow)
    }

    .formcard h3 {
      font-size: 24px;
      margin-bottom: 20px
    }

    label {
      display: block;
      font-size: 13px;
      letter-spacing: .06em;
      font-weight: 500;
      margin: 0 0 6px
    }

    input,
    select {
      width: 100%;
      font: inherit;
      font-size: 16px;
      color: var(--fg);
      background: var(--bg);
      border: 1.5px solid var(--line);
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 16px;
      appearance: none;
      -webkit-appearance: none
    }

    input:focus,
    select:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)
    }

    .err {
      color: #C0392B;
      font-size: 13px;
      margin: -10px 0 10px
    }

    .err:empty {
      display: none
    }

    .formcard .btn {
      width: 100%;
      padding: 17px 22px;
      font-size: 16px
    }

    .formwrap {
      display: grid;
      gap: 48px;
      grid-template-columns: 1fr 1fr;
      align-items: start
    }

    .or {
      display: flex;
      gap: 10px;
      margin-top: 12px
    }

    .or .btn {
      flex: 1;
      padding: 13px 10px;
      font-size: 14px
    }

    footer {
      background: #0A211A;
      color: #DCE4DC;
      padding: 48px 0 calc(32px + 72px + env(safe-area-inset-bottom, 0px));
      font-size: 13px
    }

    footer a {
      color: #E2C88C
    }

    .curby {
      margin-bottom: 30px;
      padding-bottom: 28px;
      border-bottom: 1px solid rgba(226, 200, 140, .18)
    }

    .cb-big {
      font-family: var(--serif);
      font-weight: 600;
      font-size: clamp(22px, 4.4vw, 30px);
      line-height: 1.2;
      color: #F6F2E6;
      margin: 0 0 6px
    }

    .cb-big b {
      color: #E2C88C;
      font-weight: 600
    }

    .cb-sub {
      margin: 0 0 22px;
      color: #C9D6CC;
      font-size: 14px
    }

    .cb-label {
      margin: 0 0 14px;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: #E2C88C
    }

    .cb-logos {
      display: flex;
      flex-wrap: wrap;
      gap: 12px
    }

    .cb {
      background: #FFFEF9;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 62px
    }

    .cb img {
      height: 40px;
      width: auto;
      max-width: 170px;
      object-fit: contain
    }

    @media(max-width:560px) {
      .cb-logos {
        display: grid;
        grid-template-columns: 1fr 1fr
      }

      .cb {
        height: 58px;
        padding: 8px 12px
      }

      .cb img {
        height: 36px;
        max-width: 100%
      }
    }

    footer .row {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      justify-content: space-between
    }

    footer p {
      margin: 0 0 8px
    }

    /* in-page (non-href) links */
    a[data-open],
    a[data-go] {
      cursor: pointer
    }

    /* modal */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px
    }

    .modal[hidden] {
      display: none
    }

    .m-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(6, 20, 15, .68);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      opacity: 0;
      transition: opacity .26s cubic-bezier(.22, .61, .36, 1)
    }

    .m-dialog {
      position: relative;
      width: min(520px, 100%);
      max-height: calc(100vh - 32px);
      max-height: calc(100dvh - 32px);
      overflow: auto;
      border-radius: 24px;
      background: var(--card);
      box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
      opacity: 0;
      transform: translateY(18px) scale(.98);
      transition: opacity .26s cubic-bezier(.22, .61, .36, 1), transform .26s cubic-bezier(.22, .61, .36, 1)
    }

    .modal.in .m-backdrop {
      opacity: 1
    }

    .modal.in .m-dialog {
      opacity: 1;
      transform: none
    }

    .m-dialog .formcard {
      border: 0;
      box-shadow: none;
      max-width: none;
      border-radius: 0;
      padding: 30px 24px 26px;
      background: transparent
    }

    .m-close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 3;
      width: 40px;
      height: 40px;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--fg);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(15, 46, 37, .06);
      transition: background .2s, transform .2s;
      -webkit-tap-highlight-color: transparent;
    }

    .m-close:hover {
      background: var(--bg2);
      transform: scale(1.05);
    }

    .m-close .ic {
      width: 18px;
      height: 18px;
      display: block;
      margin: 0 auto;
      stroke-width: 2.2;
      pointer-events: none;
    }

    @media(max-width:560px) {
      .modal {
        align-items: flex-end;
        padding: 0
      }

      .m-dialog {
        width: 100%;
        border-radius: 24px 24px 0 0;
        max-height: 94vh;
        max-height: 94dvh
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .m-backdrop,
      .m-dialog {
        transition: none
      }
    }

    /* floating call + whatsapp (icon only) */
    .fabs {
      position: fixed;
      right: 16px;
      bottom: calc(16px + env(safe-area-inset-bottom, 0px));
      z-index: 40;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .fab {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
      transition: transform .2s ease, box-shadow .2s ease
    }

    .fab:hover {
      transform: translateY(-3px) scale(1.04)
    }

    .fab .ic {
      width: 26px;
      height: 26px
    }

    .fab-call {
      background: #1F5A45;
      border: 1.5px solid rgba(226, 200, 140, .7)
    }

    .fab-wa {
      background: #1FA855
    }

    @media(min-width:761px) {
      .fabs {
        right: 24px;
        bottom: 24px
      }

      .fab {
        width: 60px;
        height: 60px
      }

      .fab .ic {
        width: 28px;
        height: 28px
      }
    }



    /* ================= ADMIN / SALES DECK ================= */
    .admin {
      position: fixed;
      inset: 0;
      z-index: 200;
      background: var(--bg);
      display: flex;
      flex-direction: column
    }

    .admin[hidden] {
      display: none
    }

    .a-head {
      flex: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 66px;
      padding: 0 20px;
      background: #0F2E25;
      border-bottom: 1px solid rgba(226, 200, 140, .16)
    }

    .a-brand {
      display: flex;
      align-items: center;
      gap: 14px
    }

    .a-brand img {
      height: 42px
    }

    .a-brand span {
      font-family: var(--serif);
      font-weight: 500;
      font-size: 15px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #E2C88C
    }

    .a-close {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(226, 200, 140, .4);
      background: transparent;
      color: #E2C88C;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer
    }

    .a-close .ic {
      width: 18px;
      height: 18px
    }

    .a-login {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px
    }

    .a-login[hidden],
    .a-app[hidden] {
      display: none !important
    }

    .a-login-card {
      width: min(380px, 100%);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 22px;
      box-shadow: var(--shadow);
      padding: 32px 26px;
      text-align: center
    }

    .a-login-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 16px
    }

    .a-login-card h2 {
      font-size: 22px;
      margin-bottom: 8px
    }

    .a-login-card p {
      color: var(--muted);
      font-size: 14px;
      margin: 0 0 20px
    }

    .a-login-card input {
      width: 100%;
      font: inherit;
      font-size: 16px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 6px;
      background: var(--bg);
      color: var(--fg)
    }

    .a-err {
      color: #C0392B;
      font-size: 13px;
      min-height: 20px;
      margin-bottom: 10px
    }

    .a-app {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      padding: 18px 20px;
      gap: 14px;
      overflow: hidden
    }

    .a-toolbar {
      flex: none;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center
    }

    .a-search {
      flex: 1;
      min-width: 220px;
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--card);
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 10px 14px;
      color: var(--muted)
    }

    .a-search .ic {
      width: 18px;
      height: 18px;
      flex: none
    }

    .a-search input {
      flex: 1;
      border: 0;
      background: transparent;
      font: inherit;
      font-size: 15px;
      color: var(--fg);
      outline: none
    }

    .a-tabs {
      flex: none;
      display: flex;
      flex-wrap: wrap;
      gap: 8px
    }

    .a-tabs[hidden] {
      display: none
    }

    .a-tab {
      border: 1.5px solid var(--line);
      background: var(--card);
      color: var(--fg);
      border-radius: 999px;
      padding: 8px 16px;
      font-size: 13px;
      font-family: var(--sans);
      cursor: pointer;
      white-space: nowrap
    }

    .a-tab.on {
      border-color: var(--accent);
      background: var(--accent);
      color: #fff
    }

    .a-legend {
      flex: none;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      font-size: 12.5px;
      color: var(--muted)
    }

    .a-legend[hidden] {
      display: none
    }

    .a-legend span {
      display: flex;
      align-items: center;
      gap: 6px
    }

    .a-sw {
      width: 13px;
      height: 13px;
      border-radius: 4px;
      display: inline-block
    }

    .a-sw-pending {
      background: repeating-linear-gradient(45deg, #ccc, #ccc 3px, #fff 3px, #fff 6px);
      border: 1px solid #bbb
    }

    .a-summary {
      flex: none;
      font-size: 13px;
      color: var(--muted)
    }

    .a-grid {
      flex: 1;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
      gap: 8px;
      align-content: start;
      padding-bottom: 20px
    }

    .a-grid[hidden] {
      display: none
    }

    .a-chip {
      position: relative;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 10px 6px;
      text-align: center;
      cursor: pointer;
      background: #fff;
      font-family: var(--sans);
      transition: transform .15s ease
    }

    .a-chip:hover {
      transform: translateY(-2px)
    }

    .a-chip b {
      display: block;
      font-size: 14px;
      color: #12352B
    }

    .a-chip small {
      display: block;
      font-size: 10.5px;
      color: #667;
      margin-top: 2px
    }

    .a-chip.st-sold {
      background: #C6EFCE;
      border-color: #9FD8AE
    }

    .a-chip.st-hold {
      background: #BDD7EE;
      border-color: #95BEE0
    }

    .a-chip.st-nfs {
      background: #FFF2CC;
      border-color: #EAD98F
    }

    .a-chip.pending::after {
      content: "";
      position: absolute;
      top: 5px;
      right: 5px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: repeating-linear-gradient(45deg, #999, #999 2px, #fff 2px, #fff 4px);
      border: 1px solid #888
    }

    .a-login-card select {
      width: 100%;
      font: inherit;
      font-size: 16px;
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 14px;
      margin-bottom: 14px;
      background: var(--bg);
      color: var(--fg)
    }

    .a-whoami {
      font-size: 12.5px;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 8px
    }

    .a-whoami b {
      color: var(--fg)
    }

    .a-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 0;
      background: var(--accent);
      color: #fff;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      overflow: hidden;
      flex: none;
      padding: 0
    }

    .a-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .a-profile-photo {
      width: 96px;
      height: 96px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-family: var(--sans);
      font-weight: 600;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      margin: 0 auto 18px
    }

    .a-profile-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .a-leg-btn {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: 1px solid transparent;
      border-radius: 999px;
      padding: 4px 10px 4px 6px;
      font: inherit;
      font-size: 12.5px;
      color: var(--muted);
      cursor: pointer
    }

    .a-leg-btn:hover {
      background: var(--bg2)
    }

    .a-leg-btn.on {
      border-color: var(--accent);
      color: var(--fg);
      background: var(--bg2);
      font-weight: 500
    }

    .a-leg-clear {
      background: none;
      border: 0;
      color: var(--accent);
      text-decoration: underline;
      font: inherit;
      font-size: 12.5px;
      cursor: pointer;
      padding: 4px 6px
    }

    .a-radio-row {
      display: flex;
      gap: 16px;
      margin-bottom: 14px
    }

    .a-radio-row label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1.5px solid var(--line);
      transition: background .18s ease, color .18s ease, border-color .18s ease
    }

    .a-radio-row label.sel {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff
    }

    .a-radio-row input[type=radio] {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none
    }

    .a-detail dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 6px 14px;
      margin: 0 0 16px;
      font-size: 14.5px
    }

    .a-detail dt {
      color: var(--muted)
    }

    .a-detail dd {
      margin: 0;
      font-weight: 500
    }

    .a-badge {
      display: inline-block;
      font-size: 11.5px;
      font-weight: 500;
      padding: 3px 10px;
      border-radius: 999px;
      margin-left: 8px
    }

    .a-badge.warn {
      background: #FDECEC;
      color: #B23434
    }

    .a-badge.ok {
      background: #EAF4EC;
      color: #1E7E34
    }

    .a-m-info {
      font-size: 13px;
      color: #1F5A45;
      background: #EAF4EC;
      border: 1px solid #C6EFCE;
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 14px
    }

    .a-empty {
      padding: 40px 10px;
      text-align: center;
      color: var(--muted);
      font-size: 14px
    }

    .a-lay-note {
      font-size: 12.5px;
      color: var(--muted);
      margin-bottom: 10px
    }

    .a-lay-legend {
      margin-bottom: 8px
    }

    .a-layout-view {
      flex: none
    }

    .a-app.a-layout-mode {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch
    }

    .a-lay-wrap {
      position: relative;
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: visible;
      background: #fff
    }

    .a-lay-wrap img {
      width: 100%;
      height: auto;
      display: block;
      -webkit-user-drag: none;
      user-select: none
    }

    .a-lay-wrap svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%
    }

    .a-lay-wrap svg polygon {
      stroke: rgba(15, 46, 37, .55);
      stroke-width: .12;
      cursor: pointer;
      transition: opacity .15s ease;
      fill-opacity: .55
    }

    .a-lay-wrap svg polygon:hover {
      opacity: .72
    }

    .a-lay-wrap svg polygon.a-lay-future {
      cursor: pointer
    }

    .a-lay-wrap svg polygon.a-lay-pending {
      stroke-dasharray: .6, .4
    }

    .a-skel {
      display: contents
    }

    .a-skel-chip {
      border-radius: 12px;
      height: 60px;
      background: linear-gradient(90deg, #eee 25%, #f6f6f2 37%, #eee 63%);
      background-size: 400% 100%;
      animation: a-shimmer 1.3s ease-in-out infinite
    }

    @keyframes a-shimmer {
      0% {
        background-position: 100% 0
      }

      100% {
        background-position: 0 0
      }
    }

    @media(prefers-reduced-motion:reduce) {
      .a-skel-chip {
        animation: none;
        background: #eee
      }
    }

    .a-link-btn {
      display: block;
      width: 100%;
      background: none;
      border: 0;
      color: var(--accent);
      font: inherit;
      font-size: 13.5px;
      text-decoration: underline;
      cursor: pointer;
      margin-top: 12px;
      padding: 6px
    }

    /* small modal used inside admin (plot detail / add-edit) */
    .a-modal {
      position: fixed;
      inset: 0;
      z-index: 220;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px
    }

    .a-modal[hidden] {
      display: none
    }

    .a-m-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(6, 20, 15, .65);
      opacity: 0;
      transition: opacity .26s cubic-bezier(.22, .61, .36, 1)
    }

    .a-m-dialog {
      position: relative;
      width: min(420px, 100%);
      max-height: calc(100vh - 32px);
      overflow: auto;
      background: var(--card);
      border-radius: 20px;
      box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
      padding: 26px 22px;
      opacity: 0;
      transform: translateY(16px) scale(.97);
      transition: opacity .26s cubic-bezier(.22, .61, .36, 1), transform .26s cubic-bezier(.22, .61, .36, 1)
    }

    .a-modal.in .a-m-backdrop {
      opacity: 1
    }

    .a-modal.in .a-m-dialog {
      opacity: 1;
      transform: none
    }

    @media(prefers-reduced-motion:reduce) {

      .a-m-backdrop,
      .a-m-dialog {
        transition: none
      }
    }

    .a-m-dialog h3 {
      font-size: 20px;
      margin-bottom: 4px
    }

    .a-m-dialog .sub {
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 18px
    }

    .a-status-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 16px
    }

    .a-status-btn {
      border: 1.5px solid var(--line);
      border-radius: 12px;
      padding: 12px 8px;
      font: inherit;
      font-size: 14px;
      cursor: pointer;
      background: #fff;
      font-weight: 500
    }

    .a-status-btn.cur {
      border-color: var(--accent);
      box-shadow: inset 0 0 0 1.5px var(--accent)
    }

    .a-status-btn.sold {
      background: #C6EFCE
    }

    .a-status-btn.hold {
      background: #BDD7EE
    }

    .a-status-btn.nfs {
      background: #FFF2CC
    }

    .a-status-btn.available {
      background: #fff
    }

    .a-m-note {
      font-size: 13px;
      color: var(--muted);
      background: var(--bg2);
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 14px
    }

    .a-m-pending {
      font-size: 13px;
      color: #8A6B27;
      background: #FFF7E0;
      border: 1px solid #EAD98F;
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 14px
    }

    .a-field {
      margin-bottom: 14px
    }

    .a-field label {
      display: block;
      font-size: 12.5px;
      font-weight: 500;
      margin-bottom: 5px
    }

    .a-field input,
    .a-field select {
      width: 100%;
      font: inherit;
      font-size: 15px;
      border: 1.5px solid var(--line);
      border-radius: 10px;
      padding: 11px;
      background: var(--bg);
      color: var(--fg)
    }

    @media(max-width:560px) {
      .a-app {
        padding: 14px
      }

      .a-grid {
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr))
      }

      .a-toolbar {
        gap: 8px
      }

      .a-search {
        min-width: 100%
      }
    }

    /* accordion */
    .note a,
    footer p a {
      display: inline-block;
      padding: 12px 8px;
      margin: -12px -8px
    }

    .acc {
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--card);
      box-shadow: var(--shadow);
      overflow: hidden
    }

    .acc details {
      border-bottom: 1px solid var(--line)
    }

    .acc details:last-child {
      border-bottom: 0
    }

    .acc summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 20px 22px;
      font-family: var(--serif);
      font-weight: 600;
      font-size: 20px;
      line-height: 1.25
    }

    .acc summary::-webkit-details-marker {
      display: none
    }

    .acc summary small {
      display: block;
      font-family: var(--sans);
      font-weight: 400;
      font-size: 13px;
      color: var(--muted);
      margin-top: 3px
    }

    .acc summary::after {
      content: "+";
      font-family: var(--sans);
      font-weight: 300;
      font-size: 28px;
      color: var(--gold);
      line-height: 1;
      flex: none
    }

    .acc details[open] summary::after {
      content: "\2212"
    }

    .acc details[open] summary {
      padding-bottom: 12px
    }

    .acc .body {
      padding: 0 22px 22px;
      color: var(--muted);
      font-size: 15px
    }

    .acc .body ul.tick {
      margin: 0
    }

    .dots {
      display: none;
      justify-content: center;
      gap: 8px;
      margin-top: 14px
    }

    .dots i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--line);
      transition: background .2s, width .2s
    }

    .dots i.on {
      background: var(--gold);
      width: 20px;
      border-radius: 6px
    }

    /* form extras */
    #form-home #fields>h3 {
      display: none
    }

    .formwrap {
      align-items: center
    }

    input[type=date] {
      min-height: 52px;
      appearance: auto;
      -webkit-appearance: auto;
      cursor: pointer
    }

    .opt {
      font-weight: 400;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: 0
    }

    .hint {
      font-size: 12px;
      color: var(--muted);
      margin: -10px 0 22px
    }

    .consent {
      font-size: 12px;
      color: var(--muted);
      margin: 12px 0 0;
      text-align: center;
      line-height: 1.5
    }

    #done {
      text-align: center;
      padding: 6px 0 4px
    }

    #done .check {
      width: 58px;
      height: 58px;
      border-radius: 50%;
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--accent)
    }

    #done h3 {
      font-size: 24px;
      margin-bottom: 10px
    }

    #done p {
      color: var(--muted);
      margin: 0 0 22px;
      font-size: 15.5px
    }

    #sub[disabled] {
      opacity: .7;
      cursor: default;
      transform: none;
      box-shadow: none
    }

    /* layout viewer */
    .lay {
      position: relative
    }

    .vp {
      --z: 1;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      height: min(74vh, 760px);
      cursor: grab;
      -webkit-overflow-scrolling: touch;
      box-shadow: var(--shadow)
    }

    .vp.drag {
      cursor: grabbing;
      user-select: none
    }

    .vp img {
      width: calc(var(--z)*100%);
      max-width: none;
      height: auto;
      display: block;
      -webkit-user-drag: none;
      user-select: none
    }

    .zc {
      position: absolute;
      right: 14px;
      top: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 3
    }

    .zc button {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: #12352B;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(15, 46, 37, .15);
      font-family: var(--sans)
    }

    .zc button:active {
      transform: scale(.96)
    }

    .swipe {
      position: absolute;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(15, 46, 37, .88);
      color: #fff;
      font-size: 13px;
      letter-spacing: .06em;
      padding: 9px 16px;
      border-radius: 999px;
      pointer-events: none;
      transition: opacity .5s ease;
      animation: nudge 1.8s ease-in-out infinite
    }

    .swipe.hide {
      opacity: 0
    }

    .swipe .ic {
      width: 18px;
      height: 18px
    }

    @keyframes nudge {

      0%,
      100% {
        transform: translateX(-50%)
      }

      50% {
        transform: translateX(calc(-50% + 8px))
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .swipe {
        animation: none
      }
    }


    /* smooth flow between sections */
    .alt {
      background: var(--bg2)
    }

    /* full-width photo breaks */
    .break {
      position: relative;
      height: clamp(200px, 38vw, 440px);
      overflow: hidden;
      background: #0F2E25
    }

    .break img {
      position: absolute;
      left: 0;
      top: -14%;
      width: 100%;
      height: 128%;
      object-fit: cover;
      will-change: transform
    }

    .b-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(10, 32, 25, .30), rgba(10, 32, 25, .52))
    }

    .b-quote {
      position: absolute;
      inset: 0;
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 clamp(22px, 8vw, 140px);
      color: #F6F2E6;
      font-family: var(--serif);
      font-weight: 500;
      font-size: clamp(22px, 4vw, 42px);
      line-height: 1.28;
      text-shadow: 0 2px 20px rgba(0, 0, 0, .4)
    }

    .b-quote em {
      color: #E2C88C;
      font-style: italic
    }

    /* scroll progress */
    .progress {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: #E2C88C;
      transform-origin: left;
      transform: scaleX(0);
      pointer-events: none
    }

    /* soft motion */
    @media (prefers-reduced-motion:reduce) {

      .js .rv,
      .js .fade {
        opacity: 1;
        transform: none;
        transition: none
      }

      .break img {
        top: 0;
        height: 100%
      }
    }

    .card.rv.in:hover {
      transition: transform .25s ease, box-shadow .25s ease
    }

    .size {
      background: var(--card);
      color: var(--fg);
      cursor: pointer;
      font-family: var(--serif);
      text-align: center;
      transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease
    }

    .size:hover {
      border-color: var(--gold);
      transform: translateY(-2px);
      box-shadow: var(--shadow)
    }

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

    #faq .acc summary {
      font-size: 18px
    }

    @media(max-width:560px) {
      #faq .acc summary {
        font-size: 16.5px
      }
    }

    /* reveal */
    .js .rv {
      opacity: 0;
      transform: translateY(16px);
      transition: opacity 1.5s cubic-bezier(.16, 1, .3, 1), transform 1.5s cubic-bezier(.16, 1, .3, 1)
    }

    .js .fade {
      opacity: 0;
      transition: opacity 1.5s cubic-bezier(.16, 1, .3, 1)
    }

    .js .fade.in {
      opacity: 1
    }

    .js .rv.in {
      opacity: 1;
      transform: none
    }

    @media (prefers-reduced-motion:reduce) {
      .js .rv {
        opacity: 1;
        transform: none;
        transition: none
      }

      .hero img.bg {
        animation: none
      }

      html {
        scroll-behavior: auto
      }
    }

    @media(max-width:760px) {

      .btn-book {
        padding: 8px 16px;
        font-size: 13px;
        gap: 6.5px
      }

      .btn-book .ic {
        width: 15px;
        height: 15px
      }

      .g2,
      .split,
      .formwrap {
        grid-template-columns: 1fr
      }

      .g3 {
        grid-template-columns: 1fr 1fr
      }

      .concept .g3 {
        grid-template-columns: 1fr
      }

      .sportcards {
        grid-template-columns: 1fr
      }

      .mx {
        display: none !important
      }

      .concept .card p {
        display: none
      }

      .pillars:not(.sportcards) .card p {
        display: none
      }

      .pillars:not(.sportcards) .card h3 {
        margin: 0
      }

      .pillars:not(.sportcards) .card .badge {
        margin-bottom: 8px
      }

      .gal .a,
      .gal .d {
        aspect-ratio: 16/9
      }

      .hbtns .hide-m {
        display: none
      }

      section {
        padding: 46px 0
      }

      .split,
      .formwrap {
        gap: 30px
      }

      .strip .wrap {
        grid-template-columns: 1fr 1fr
      }

      .stat:nth-child(2) {
        border-right: 0
      }

      .stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(226, 200, 140, .22)
      }

      .gal {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0 -22px;
        padding: 2px 22px 4px;
        scroll-padding: 0 22px;
        scrollbar-width: none
      }

      .gal::-webkit-scrollbar,
      .plans::-webkit-scrollbar {
        display: none
      }

      .gal figure {
        flex: 0 0 84%;
        scroll-snap-align: center;
        aspect-ratio: 4/3 !important
      }

      .plans {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 22px -22px 0;
        padding: 2px 22px 4px;
        scroll-padding: 0 22px;
        scrollbar-width: none
      }

      .plans figure {
        flex: 0 0 88%;
        scroll-snap-align: center
      }

      .dots {
        display: flex
      }

      .lead {
        margin-bottom: 26px
      }

      .acc summary {
        font-size: 18px;
        padding: 18px 18px
      }

      .acc .body {
        padding: 0 18px 18px
      }

      .fam {
        aspect-ratio: 16/10;
        object-fit: cover;
        object-position: 50% 62%;
        width: 100%
      }

      .concept .card {
        padding: 16px 18px
      }

      .concept .card h3 {
        font-size: 17px
      }

      .concept .card p {
        font-size: 14px
      }

      .pillars .card {
        padding: 14px 12px
      }

      .pillars .card .badge {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
        border-radius: 11px
      }

      .pillars .card .badge .ic {
        width: 20px;
        height: 20px
      }

      .club-amenities {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 28px -22px 0;
        padding: 8px 22px 14px;
        scroll-padding: 0 22px;
        scrollbar-width: none;
      }

      .club-amenities::-webkit-scrollbar {
        display: none;
      }

      .club-amenity {
        flex: 0 0 260px;
        max-width: 82%;
        scroll-snap-align: center;
        background: var(--card);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: 28px 18px 24px;
        box-shadow: 0 6px 20px rgba(15, 46, 37, .06);
      }

      .club-amenity:not(:nth-child(3n)),
      .club-amenity:nth-child(-n+3),
      .club-amenity:nth-child(odd),
      .club-amenity:nth-child(-n+4),
      .club-amenity:not(:last-child) {
        border-right: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
      }

      .ca-title {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      @media (max-width: 520px) {
        .tag {
          display: none
        }

        .btn-book {
          padding: 8px 15px;
          font-size: 12.5px;
          font-weight: 500;
          gap: 6px;
          letter-spacing: .02em
        }

        .btn-book .ic {
          width: 14px;
          height: 14px
        }

        .hright {
          gap: 9px
        }

        .menu {
          width: 38px;
          height: 38px;
          border-radius: 10px;
          gap: 4px
        }

        .menu span {
          width: 16px;
          height: 1.5px
        }

        .brand {
          gap: 10px
        }

        .logo img {
          height: 42px
        }

        .club-amenities {
          margin: 22px -20px 0;
          padding: 6px 20px 12px;
          scroll-padding: 0 20px;
          gap: 12px;
        }

        .club-amenity {
          flex: 0 0 240px;
          max-width: 80%;
          padding: 24px 16px 20px;
        }

        .ca-badge {
          width: 86px;
          height: 86px;
          margin-bottom: 14px;
        }

        .ca-title {
          font-size: 15px;
          min-height: 40px;
        }

        .ca-desc {
          font-size: 13.5px;
          min-height: auto;
        }
      }

      @media (max-width: 420px) {
        .tag {
          display: none
        }

        .btn-book {
          padding: 7.5px 13px;
          font-size: 12px;
          font-weight: 500;
          gap: 5.5px
        }

        .btn-book .ic {
          width: 13.5px;
          height: 13.5px
        }

        .hright {
          gap: 8px
        }

        .menu {
          width: 36px;
          height: 36px
        }

        .logo img {
          height: 38px
        }
      }

      @media (max-width: 340px) {
        .btn-book {
          padding: 6.5px 10px;
          font-size: 11px;
          gap: 4.5px
        }

        .btn-book .ic {
          width: 12px;
          height: 12px
        }

        .menu {
          width: 32px;
          height: 32px
        }
      }

      #location .card {
        padding: 14px 16px
      }

      #location .card h3 {
        font-size: 16px;
        margin: 0
      }

      .vp {
        height: 62vh
      }

      .stat {
        padding: 12px 8px
      }

      .hero {
        min-height: min(82vh, 660px)
      }

      .hbar {
        height: 64px
      }

      .logo img {
        height: 46px
      }

      .hero .wrap {
        padding-top: 90px;
        padding-bottom: 44px
      }

      .hero h1 {
        font-size: 32px
      }

      .hero h1 em {
        display: inline
      }

      .hero p.sub {
        font-size: 16px;
        margin: 14px 0 22px
      }

      .hero .eyebrow {
        font-size: 12px;
        letter-spacing: .16em
      }

      .pillars .card {
        padding: 18px 14px
      }

      .pillars h3 {
        font-size: 11px;
        letter-spacing: .05em;
        overflow-wrap: anywhere
      }

      .card p {
        font-size: 14px
      }

      .stat {
        padding: 16px 8px
      }

      .stat b {
        font-size: 22px
      }

      .stat span {
        font-size: 11.5px;
        letter-spacing: .06em
      }

      .formcard {
        padding: 24px
      }
    }