:root {
      --forest: #061313;
      --forest2: #0d2423;
      --deep: #020807;
      --army: #2f3a24;
      --army2: #465936;
      --army3: #1f2a18;
      --gold: #d8a84b;
      --sand: #ead6a5;
      --cream: #fff4dc;
      --shadow: 0 30px 90px rgba(0,0,0,.62);
      --radius: 30px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      color: var(--cream);
      background:
        radial-gradient(circle at 12% 4%, rgba(185,85,36,.32), transparent 28rem),
        radial-gradient(circle at 88% 2%, rgba(31,111,115,.38), transparent 32rem),
        linear-gradient(180deg, var(--forest), var(--forest2) 48%, var(--deep));
      line-height: 1.6;
    }

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

    .wrap {
      width: min(1180px, calc(100% - 40px));
      margin: 0 auto;
    }

    .top {
      background: #0b1c1b;
      color: var(--sand);
      text-align: center;
      padding: 10px 18px;
      font-size: 14px;
      border-bottom: 1px solid rgba(216,168,75,.26);
    }

    .top strong {
      color: var(--cream);
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: linear-gradient(90deg, rgba(6,19,19,.96), rgba(42,24,15,.90));
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(216,168,75,.32);
      box-shadow: 0 12px 40px rgba(0,0,0,.28);
    }

    .nav-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 10px 0;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 23px;
      font-weight: 900;
      letter-spacing: -.05em;
      color: var(--cream);
    }

    .mark {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: block;
      object-fit: cover;
      box-shadow:
        0 0 0 2px rgba(216,168,75,.34),
        0 14px 32px rgba(185,85,36,.38);
      border: 1px solid rgba(255,244,220,.32);
      background: #111827;
    }

    .nav-links {
      display: flex;
      gap: 20px;
      align-items: center;
      color: var(--sand);
      font-size: 15px;
      font-weight: 800;
    }

    .nav-links a:hover {
      color: var(--cream);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 13px 22px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--army3), var(--army2));
      color: var(--cream);
      font-weight: 900;
      box-shadow: 0 16px 36px rgba(31,42,24,.48);
      border: 1px solid rgba(234,214,165,.28);
      transition: .2s ease;
      white-space: nowrap;
    }

    .btn:hover {
      transform: translateY(-2px);
      filter: brightness(1.12);
    }

    .btn.outline {
      background: rgba(47,58,36,.52);
      border-color: rgba(216,168,75,.48);
      box-shadow: none;
    }

    .hero {
      position: relative;
      min-height: 820px;
      display: grid;
      align-items: center;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(6,19,19,.98), rgba(13,36,35,.82) 47%, rgba(42,24,15,.22)),
        radial-gradient(circle at 75% 65%, rgba(216,168,75,.18), transparent 22rem),
        url("sunset%20cypress%20lake.jpeg");
      background-size: cover;
      background-position: center;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 210px;
      background: linear-gradient(to bottom, transparent, var(--forest));
    }

    .hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 34px;
      align-items: center;
      padding: 70px 0 130px;
    }

    .hero-content {
      max-width: 780px;
    }

    .hero-brand-block {
      display: flex;
      align-items: flex-end;
      gap: 30px;
      margin-bottom: 34px;
    }

    .hero-logo {
      width: 235px;
      height: 235px;
      border-radius: 44px;
      display: block;
      object-fit: cover;
      flex: 0 0 auto;
      border: 2px solid rgba(216,168,75,.58);
      box-shadow:
        0 0 0 9px rgba(47,58,36,.34),
        0 28px 80px rgba(0,0,0,.52),
        0 18px 48px rgba(185,85,36,.32);
      background: #111827;
    }

    .hero-info {
      display: grid;
      gap: 6px;
      padding-bottom: 14px;
      transform: translateY(-2px);
    }

    .hero-kicker {
      color: var(--sand);
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .09em;
      text-transform: uppercase;
      line-height: 1.35;
      text-shadow: 0 8px 24px rgba(0,0,0,.55);
    }

    .hero-address {
      color: var(--cream);
      font-size: 14px;
      font-weight: 950;
      letter-spacing: .07em;
      text-transform: uppercase;
      line-height: 1.45;
      text-shadow: 0 8px 24px rgba(0,0,0,.55);
    }

    h1 {
      margin: 22px 0 18px;
      font-size: clamp(50px, 8vw, 94px);
      line-height: .9;
      letter-spacing: -.085em;
      color: var(--cream);
      text-shadow: 0 6px 30px rgba(0,0,0,.42);
    }

    .hero p {
      max-width: 680px;
      margin: 0 0 30px;
      color: #f0ddb8;
      font-size: clamp(18px, 2vw, 22px);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-bottom: 34px;
    }

    .quick-facts {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      max-width: 760px;
    }

    .fact {
      padding: 18px;
      border-radius: 20px;
      background: rgba(13,36,35,.72);
      border: 1px solid rgba(216,168,75,.34);
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 35px rgba(0,0,0,.22);
    }

    .fact strong {
      display: block;
      font-size: 24px;
      letter-spacing: -.04em;
      color: var(--cream);
      line-height: 1.05;
    }

    .fact span {
      color: var(--sand);
      font-size: 14px;
      font-weight: 800;
    }

    .price-card {
      background:
        radial-gradient(circle at top right, rgba(216,168,75,.22), transparent 16rem),
        linear-gradient(135deg, rgba(13,36,35,.94), rgba(42,24,15,.86));
      border: 1px solid rgba(216,168,75,.38);
      border-radius: 34px;
      padding: 32px;
      box-shadow: var(--shadow);
    }

    .price-card .small {
      color: var(--sand);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: 13px;
    }

    .price {
      font-size: clamp(54px, 7vw, 78px);
      line-height: .9;
      letter-spacing: -.08em;
      font-weight: 950;
      margin: 14px 0 8px;
      color: var(--cream);
    }

    .price span {
      font-size: 23px;
      letter-spacing: -.03em;
      color: var(--sand);
    }

    .included {
      margin: 22px 0;
      display: grid;
      gap: 10px;
    }

    .included div,
    .list-item {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      padding: 12px 13px;
      border-radius: 16px;
      background: rgba(255,244,220,.07);
      border: 1px solid rgba(234,214,165,.16);
      color: #f0ddb8;
      font-weight: 800;
    }

    .check {
      color: #c8d6a0;
      font-weight: 950;
    }

    .note {
      color: var(--sand);
      font-size: 14px;
      margin-top: 14px;
    }

    section {
      padding: 86px 0;
    }

    .section-head {
      max-width: 780px;
      margin-bottom: 32px;
    }

    .section-head h2,
    .info-panel h2,
    .location-details h2,
    .cta h2 {
      margin: 0 0 12px;
      font-size: clamp(34px, 5vw, 60px);
      line-height: .95;
      letter-spacing: -.07em;
      color: var(--cream);
    }

    .section-head p,
    .info-panel p,
    .location-details p {
      margin: 0;
      color: var(--sand);
      font-size: 18px;
    }

    .cards {
      display: grid;
      grid-template-columns: 1.05fr .95fr 1fr;
      gap: 18px;
    }

    .card {
      position: relative;
      overflow: hidden;
      min-height: 350px;
      padding: 26px;
      border-radius: var(--radius);
      border: 1px solid rgba(216,168,75,.30);
      box-shadow: 0 18px 50px rgba(0,0,0,.38);
      display: flex;
      align-items: flex-end;
      background-size: cover;
      background-position: center;
    }

    .card.offset {
      transform: translateY(36px);
    }

    .card.small-offset {
      transform: translateY(-18px);
    }

    .card::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to top, rgba(6,19,19,.94), rgba(42,24,15,.30)),
        radial-gradient(circle at bottom left, rgba(185,85,36,.26), transparent 20rem);
    }

    .card-content {
      position: relative;
      z-index: 2;
    }

    .card h3 {
      margin: 0 0 8px;
      font-size: 28px;
      line-height: 1.05;
      letter-spacing: -.05em;
      color: var(--cream);
    }

    .card p {
      margin: 0;
      color: #f0ddb8;
    }

    .park-map-section {
      padding-top: 24px;
    }

    .park-map-card {
      border-radius: 38px;
      padding: 28px;
      background:
        radial-gradient(circle at top right, rgba(216,168,75,.16), transparent 18rem),
        linear-gradient(135deg, rgba(13,36,35,.95), rgba(42,24,15,.84));
      border: 1px solid rgba(216,168,75,.34);
      box-shadow: var(--shadow);
    }

    .park-map-card h2 {
      margin: 0 0 12px;
      font-size: clamp(34px, 5vw, 56px);
      line-height: .95;
      letter-spacing: -.07em;
      color: var(--cream);
    }

    .park-map-card p {
      margin: 0 0 24px;
      color: var(--sand);
      font-size: 18px;
    }

    .park-map-img {
      width: 100%;
      display: block;
      border-radius: 28px;
      border: 1px solid rgba(216,168,75,.30);
      box-shadow: 0 18px 50px rgba(0,0,0,.38);
      background: rgba(255,244,220,.06);
    }

    .amenity-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 28px;
    }

    .amenity {
      background: linear-gradient(135deg, rgba(13,36,35,.86), rgba(47,58,36,.58));
      border: 1px solid rgba(216,168,75,.25);
      border-radius: 22px;
      padding: 20px;
      min-height: 150px;
      box-shadow: 0 16px 42px rgba(0,0,0,.28);
    }

    .amenity-icon {
      font-size: 25px;
      margin-bottom: 10px;
    }

    .amenity h3 {
      margin: 0 0 6px;
      font-size: 19px;
      letter-spacing: -.035em;
      color: var(--cream);
    }

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

    .split,
    .location-card {
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 24px;
      align-items: stretch;
    }

    .photo-panel {
      min-height: 620px;
      border-radius: 38px;
      background:
        linear-gradient(to top, rgba(6,19,19,.42), transparent),
        url("kayak%20group%20cypress.jpeg");
      background-size: cover;
      background-position: center;
      box-shadow: var(--shadow);
      border: 1px solid rgba(216,168,75,.30);
    }

    .info-panel,
    .location-card {
      border-radius: 34px;
      padding: 34px;
      background:
        radial-gradient(circle at top right, rgba(185,85,36,.28), transparent 18rem),
        radial-gradient(circle at bottom left, rgba(47,58,36,.38), transparent 18rem),
        linear-gradient(135deg, rgba(13,36,35,.95), rgba(42,24,15,.86));
      border: 1px solid rgba(216,168,75,.34);
      box-shadow: var(--shadow);
    }

    .list {
      display: grid;
      gap: 12px;
      margin: 24px 0 26px;
    }

    .tag {
      display: inline-flex;
      width: fit-content;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(42,24,15,.82);
      border: 1px solid rgba(216,168,75,.58);
      color: #f9d77d;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    .map-box {
      border-radius: 28px;
      background:
        linear-gradient(to top, rgba(6,19,19,.25), transparent),
        url("IMG_5787.JPG");
      background-size: cover;
      background-position: center;
      min-height: 390px;
      border: 1px solid rgba(216,168,75,.24);
    }

    .location-details {
      padding: 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .address {
      font-size: 22px;
      font-weight: 900;
      color: var(--cream);
      margin: 8px 0 18px;
      line-height: 1.25;
    }

    .distance,
    .policy {
      width: fit-content;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(47,58,36,.70);
      border: 1px solid rgba(216,168,75,.34);
      color: var(--sand);
      font-weight: 900;
      margin: 0 0 20px;
    }

    .policy {
      border-radius: 18px;
      background: rgba(42,24,15,.62);
      font-size: 15px;
      margin-top: 18px;
    }

    .masonry {
      display: grid;
      grid-template-columns: 1.25fr .75fr 1fr .9fr;
      grid-auto-rows: 150px;
      gap: 15px;
    }

    .tile {
      border-radius: 26px;
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(216,168,75,.32);
      box-shadow: 0 18px 45px rgba(0,0,0,.38);
      position: relative;
      overflow: hidden;
    }

    .tile::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(6,19,19,.40), transparent);
    }

    .tile:nth-child(1) { grid-column: span 2; grid-row: span 3; }
    .tile:nth-child(2) { grid-row: span 2; }
    .tile:nth-child(3) { grid-row: span 4; }
    .tile:nth-child(4) { grid-row: span 2; }
    .tile:nth-child(5) { grid-column: span 2; grid-row: span 2; }
    .tile:nth-child(6) { grid-row: span 3; }

    .cta {
      padding: 58px;
      border-radius: 38px;
      background:
        linear-gradient(135deg, rgba(47,58,36,.94), rgba(70,89,54,.78)),
        url("fire%20with%20friends.jpeg");
      background-size: cover;
      background-position: center;
      color: var(--cream);
      box-shadow: var(--shadow);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 28px;
      overflow: hidden;
      border: 1px solid rgba(234,214,165,.30);
    }

    .cta p {
      margin: 0;
      max-width: 650px;
      font-size: 18px;
      font-weight: 800;
      color: #f0ddb8;
    }

    .cta-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: flex-end;
    }

    footer {
      padding: 34px 0;
      color: var(--sand);
      border-top: 1px solid rgba(216,168,75,.24);
      background: #050807;
      font-size: 14px;
    }

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

    @media (max-width: 980px) {
      .nav-links {
        display: none;
      }

      .hero {
        min-height: auto;
      }

      .hero-grid,
      .split,
      .location-card,
      .quick-facts,
      .cards,
      .amenity-grid,
      .masonry {
        grid-template-columns: 1fr;
      }

      .hero-grid {
        padding: 74px 0 96px;
      }

      .hero-logo {
        width: 165px;
        height: 165px;
        border-radius: 32px;
      }

      .hero-kicker,
      .hero-address {
        font-size: 13px;
      }

      .photo-panel,
      .map-box {
        min-height: 390px;
      }

      .card.offset,
      .card.small-offset {
        transform: none;
      }

      .tile,
      .tile:nth-child(1),
      .tile:nth-child(2),
      .tile:nth-child(3),
      .tile:nth-child(4),
      .tile:nth-child(5),
      .tile:nth-child(6) {
        grid-column: auto;
        grid-row: auto;
        min-height: 280px;
      }

      .cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px;
      }

      .cta-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 600px) {
      .wrap {
        width: min(100% - 28px, 1180px);
      }

      .hero-brand-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
      }

      .hero-info {
        width: 100%;
        padding-bottom: 0;
      }

      h1 {
        font-size: clamp(46px, 18vw, 72px);
      }

      .price-card,
      .info-panel,
      .location-card,
      .park-map-card {
        padding: 24px;
      }

      .price {
        font-size: 58px;
      }

      .brand span {
        font-size: 20px;
      }

      .btn {
        width: 100%;
      }

      .hero-actions,
      .cta-actions {
        width: 100%;
      }
    }
  
/* Application buttons echo the logo's warm yellow and red. */
.btn.application-btn {
  background: linear-gradient(110deg, #ffdc65 0%, #f7a04e 55%, #ed7352 100%);
  color: #251006;
  border: 1px solid #f9b45a;
  box-shadow: 0 10px 28px rgba(185, 60, 30, .32);
}
.nav-links .application-btn:hover { color: #251006; }
.application-btn:focus-visible { outline: 3px solid #fff4dc; outline-offset: 4px; }

/* Lake-blue resident access buttons. */
.btn.resident-portal-btn {
  background: linear-gradient(135deg, #086b94, #075176);
  color: #ffffff;
  border-color: #62b7d8;
  box-shadow: 0 10px 28px rgba(4, 74, 112, .32);
}
.nav-links .resident-portal-btn:hover { color: #ffffff; }
.resident-portal-btn:focus-visible { outline: 3px solid #a8e2fa; outline-offset: 4px; }