:root {
  --green-950: #182018;
  --green-900: #202a20;
  --green-800: #293629;
  --green-700: #3b4939;

  --cream: #f6f4ee;
  --cream-dark: #ece9e0;

  --white: #ffffff;
  --text: #22251f;
  --muted: #686d65;
  --line: #dedfd8;

  --radius: 16px;
  --radius-small: 10px;

  --shadow:
    0 18px 45px rgba(30, 37, 28, 0.10);
}


/* RESET */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  color: var(--text);
  background: var(--white);
  line-height: 1.65;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 10px;
}

.skip-link:focus {
  left: 10px;
  z-index: 999;
  padding: 10px 15px;
  background: white;
  color: black;
}


/* HEADER */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  background:
    rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(12px);

  border-bottom:
    1px solid rgba(0, 0, 0, 0.07);
}

.nav-wrap {
  width: min(1180px, 92%);
  height: 72px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.2px;
}

nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.nav-cta {
  padding: 10px 17px;

  background:
    var(--green-900);

  color:
    var(--white);

  border-radius: 7px;
}


/* GENERAL */

.section {
  width: min(1180px, 90%);
  margin: 0 auto;
  padding: 105px 0;
}

.eyebrow {
  margin: 0 0 17px;

  color:
    #697463;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.eyebrow.light {
  color:
    rgba(255, 255, 255, 0.72);
}

.section-heading {
  max-width: 820px;
  margin-bottom: 52px;
}

.section-heading.narrow {
  max-width: 720px;
}

.section-heading h2,
.outdoor-layout h2,
.location-inner h2,
.lifestyle-card h2 {
  margin: 0;

  font-size:
    clamp(36px, 5vw, 58px);

  line-height: 1.06;
  letter-spacing: -2px;
}

.section-description {
  max-width: 690px;

  margin:
    23px 0 0;

  color:
    var(--muted);

  font-size: 17px;
}

.lead {
  font-size: 21px;
  line-height: 1.55;
}


/* BUTTONS */

.button {
  display: inline-block;

  padding:
    15px 23px;

  border-radius:
    8px;

  text-decoration:
    none;

  font-size:
    14px;

  font-weight:
    800;

  transition:
    transform 0.18s ease,
    opacity 0.18s ease,
    background 0.18s ease;
}

.button:hover {
  transform:
    translateY(-2px);
}

.button-light {
  background:
    var(--white);

  color:
    var(--green-950);
}

.button-outline {
  border:
    1px solid rgba(255, 255, 255, 0.5);

  color:
    white;
}


/* HERO */

.hero {
  min-height:
    710px;

  display:
    flex;

  align-items:
    center;

  color:
    white;

  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(126, 151, 111, 0.45),
      transparent 34%
    ),
    radial-gradient(
      circle at 75% 90%,
      rgba(89, 111, 79, 0.45),
      transparent 34%
    ),
    linear-gradient(
      130deg,
      #182018,
      #2b382b 55%,
      #45533f
    );
}

.hero-content {
  width:
    min(1180px, 90%);

  margin:
    0 auto;

  padding:
    105px 0 145px;
}

.hero h1 {
  max-width:
    900px;

  margin:
    0 0 28px;

  font-size:
    clamp(51px, 7.5vw, 92px);

  line-height:
    0.97;

  letter-spacing:
    -4px;
}

.hero-copy {
  max-width:
    720px;

  margin:
    0 0 34px;

  font-size:
    20px;

  color:
    rgba(255, 255, 255, 0.88);
}

.hero-actions {
  display:
    flex;

  gap:
    12px;

  flex-wrap:
    wrap;
}

.hero-small {
  margin-top:
    28px;

  font-size:
    13px;

  color:
    rgba(255, 255, 255, 0.65);
}


/* VALUE STRIP */

.value-strip {
  width:
    min(1110px, 90%);

  margin:
    -58px auto 0;

  position:
    relative;

  z-index:
    5;

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  background:
    white;

  border-radius:
    var(--radius);

  box-shadow:
    var(--shadow);

  overflow:
    hidden;
}

.value-item {
  min-height:
    120px;

  padding:
    27px 20px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  text-align:
    center;

  border-right:
    1px solid var(--line);
}

.value-item:last-child {
  border-right:
    none;
}

.value-item strong {
  display:
    block;

  font-size:
    20px;
}

.value-item span {
  margin-top:
    3px;

  color:
    var(--muted);

  font-size:
    13px;
}


/* INTRO */

.intro-section {
  padding-top:
    125px;
}

.intro-layout {
  display:
    grid;

  grid-template-columns:
    1.35fr 0.65fr;

  gap:
    85px;

  align-items:
    start;
}

.intro-text {
  max-width:
    700px;
}

.intro-text p {
  margin-top:
    0;

  margin-bottom:
    23px;
}

.included-summary {
  padding:
    34px;

  background:
    var(--cream);

  border-radius:
    var(--radius);
}

.mini-heading {
  margin:
    0;

  color:
    #6d7568;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    1.8px;
}

.included-summary ul {
  list-style:
    none;

  padding:
    0;

  margin:
    22px 0 0;
}

.included-summary li {
  padding:
    11px 0;

  border-bottom:
    1px solid #deddd5;
}

.included-summary li:last-child {
  border-bottom:
    none;
}


/* ROOMS */

.section-soft {
  width:
    100%;

  max-width:
    none;

  padding-left:
    max(5%, calc((100% - 1180px) / 2));

  padding-right:
    max(5%, calc((100% - 1180px) / 2));

  background:
    var(--cream);
}

.room-showcase {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    16px;
}

.room-feature {
  min-height:
    275px;

  padding:
    29px;

  background:
    white;

  border:
    1px solid #e4e2da;

  border-radius:
    13px;
}

.feature-main {
  background:
    var(--green-900);

  color:
    white;
}

.feature-icon {
  margin-bottom:
    42px;

  color:
    #8b9485;

  font-size:
    11px;

  font-weight:
    800;
}

.feature-main .feature-icon {
  color:
    rgba(255, 255, 255, 0.55);
}

.room-feature h3 {
  margin:
    0 0 12px;

  font-size:
    21px;

  line-height:
    1.2;
}

.room-feature p {
  margin:
    0;

  color:
    #686d65;

  font-size:
    15px;
}

.feature-main p {
  color:
    rgba(255, 255, 255, 0.76);
}


/* INCLUDED GRID */

.included-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    16px;
}

.included-card {
  min-height:
    225px;

  padding:
    30px;

  border:
    1px solid var(--line);

  border-radius:
    13px;
}

.included-card span {
  display:
    block;

  margin-bottom:
    25px;

  color:
    #798074;

  font-size:
    11px;

  font-weight:
    800;

  text-transform:
    uppercase;

  letter-spacing:
    1.5px;
}

.included-card h3 {
  margin:
    0 0 12px;

  font-size:
    21px;
}

.included-card p {
  margin:
    0;

  color:
    var(--muted);
}


/* DARK HOME SECTION */

.section-dark {
  width:
    100%;

  max-width:
    none;

  padding:
    0;

  background:
    var(--green-950);

  color:
    white;
}

.dark-inner {
  width:
    min(1180px, 90%);

  margin:
    0 auto;

  padding:
    105px 0;
}

.dark-heading {
  max-width:
    790px;

  margin-bottom:
    55px;
}

.dark-heading h2 {
  margin:
    0;

  font-size:
    clamp(37px, 5vw, 59px);

  line-height:
    1.05;

  letter-spacing:
    -2px;
}

.dark-heading > p:last-child {
  max-width:
    680px;

  color:
    rgba(255, 255, 255, 0.69);

  font-size:
    17px;
}

.facility-columns {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:
    17px;
}

.facility-panel {
  padding:
    34px;

  background:
    rgba(255, 255, 255, 0.06);

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius:
    13px;
}

.facility-panel h3 {
  margin:
    0 0 25px;

  font-size:
    24px;
}

.facility-panel ul {
  list-style:
    none;

  padding:
    0;

  margin:
    0;
}

.facility-panel li {
  padding:
    10px 0;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.09);

  color:
    rgba(255, 255, 255, 0.76);

  font-size:
    14px;
}

.facility-panel li:last-child {
  border-bottom:
    none;
}


/* UPGRADES */

.upgrade-section {
  background:
    var(--green-800);

  color:
    white;
}

.upgrade-wrap {
  width:
    min(1180px, 90%);

  margin:
    0 auto;

  padding:
    90px 0;

  display:
    grid;

  grid-template-columns:
    1.25fr 0.75fr;

  gap:
    75px;

  align-items:
    center;
}

.upgrade-copy h2 {
  margin:
    0 0 23px;

  max-width:
    710px;

  font-size:
    clamp(38px, 5vw, 58px);

  line-height:
    1.04;

  letter-spacing:
    -2px;
}

.upgrade-copy p {
  max-width:
    690px;

  color:
    rgba(255, 255, 255, 0.73);
}

.upgrade-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    12px;
}

.upgrade-card {
  min-height:
    145px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  text-align:
    center;

  background:
    rgba(255, 255, 255, 0.08);

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius:
    11px;
}

.upgrade-card strong {
  display:
    block;

  font-size:
    37px;
}

.upgrade-card span {
  margin-top:
    3px;

  color:
    rgba(255, 255, 255, 0.65);

  font-size:
    12px;
}


/* OUTDOORS */

.outdoor-layout {
  display:
    grid;

  grid-template-columns:
    1.2fr 0.8fr;

  gap:
    80px;

  align-items:
    center;
}

.outdoor-layout > div:first-child {
  max-width:
    680px;
}

.acre-card {
  min-height:
    390px;

  padding:
    44px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    flex-end;

  background:
    linear-gradient(
      145deg,
      #e4e6dc,
      #cbd1c2
    );

  border-radius:
    var(--radius);
}

.acre-number {
  font-size:
    110px;

  font-weight:
    800;

  line-height:
    0.8;

  letter-spacing:
    -7px;
}

.acre-label {
  margin-top:
    17px;

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    4px;
}

.acre-card p {
  max-width:
    330px;

  margin-top:
    30px;
}


/* LOCATION */

.location-section {
  background:
    var(--cream);
}

.location-inner {
  width:
    min(1180px, 90%);

  margin:
    0 auto;

  padding:
    90px 0;

  display:
    grid;

  grid-template-columns:
    1fr 0.65fr;

  gap:
    90px;

  align-items:
    center;
}

.location-details {
  padding:
    35px;

  background:
    white;

  border-radius:
    13px;
}

.location-stat strong {
  display:
    block;

  font-size:
    37px;

  line-height:
    1;
}

.location-stat span {
  display:
    block;

  margin-top:
    8px;

  color:
    var(--muted);

  font-size:
    13px;
}

.location-details > p {
  margin-top:
    28px;
}

.small-text {
  color:
    #7c8179;

  font-size:
    13px;
}


/* GALLERY */

.gallery {
  display:
    grid;

  grid-template-columns:
    2fr 1fr 1fr;

  grid-template-rows:
    240px 240px;

  gap:
    12px;
}

.gallery-placeholder {
  padding:
    22px;

  display:
    flex;

  align-items:
    flex-end;

  background:
    linear-gradient(
      140deg,
      #dfe2d8,
      #c6cdc0
    );

  border-radius:
    11px;

  color:
    #5d6658;

  font-size:
    13px;

  font-weight:
    800;
}

.gallery-main {
  grid-row:
    1 / span 2;
}


/* LIFESTYLE */

.lifestyle-section {
  padding-top:
    20px;
}

.lifestyle-card {
  padding:
    65px;

  display:
    grid;

  grid-template-columns:
    1fr 0.85fr;

  gap:
    70px;

  background:
    var(--cream);

  border-radius:
    var(--radius);
}

.lifestyle-copy p:first-child {
  margin-top:
    0;
}

.lifestyle-copy p {
  color:
    var(--muted);

  font-size:
    17px;
}


/* FAQ */

.faq-section {
  padding-top:
    75px;
}

.faq-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;
}

details {
  padding:
    0 25px;

  border:
    1px solid var(--line);

  border-radius:
    10px;

  background:
    white;
}

summary {
  padding:
    22px 0;

  cursor:
    pointer;

  font-weight:
    800;

  list-style-position:
    inside;
}

details p {
  margin:
    0 0 24px;

  color:
    var(--muted);
}


/* CONTACT */

.contact-section {
  padding:
    120px 5%;

  text-align:
    center;

  background:
    var(--green-950);

  color:
    white;
}

.contact-content {
  max-width:
    760px;

  margin:
    0 auto;
}

.contact-content h2 {
  margin:
    0 0 23px;

  font-size:
    clamp(44px, 6vw, 69px);

  line-height:
    0.99;

  letter-spacing:
    -2.5px;
}

.contact-content > p {
  max-width:
    650px;

  margin-left:
    auto;

  margin-right:
    auto;

  color:
    rgba(255, 255, 255, 0.75);

  font-size:
    18px;
}

.whatsapp-button {
  margin-top:
    22px;

  padding:
    16px 28px;

  background:
    white;

  color:
    var(--green-950);
}

.contact-note {
  margin-top:
    18px !important;

  font-size:
    12px !important;

  color:
    rgba(255, 255, 255, 0.5) !important;
}


/* FOOTER */

footer {
  padding:
    35px 5%;

  background:
    #111611;

  color:
    #989f96;
}

.footer-inner {
  width:
    min(1180px, 100%);

  margin:
    0 auto;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    30px;

  font-size:
    12px;
}

.footer-inner strong {
  color:
    #d3d7d0;
}


/* TABLET */

@media (max-width: 950px) {

  nav a:not(.nav-cta) {
    display:
      none;
  }

  .intro-layout,
  .upgrade-wrap,
  .outdoor-layout,
  .location-inner,
  .lifestyle-card {
    grid-template-columns:
      1fr;
  }

  .intro-layout,
  .outdoor-layout,
  .location-inner {
    gap:
      45px;
  }

  .room-showcase {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .included-grid,
  .facility-columns {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* MOBILE */

@media (max-width: 650px) {

  .nav-wrap {
    height:
      64px;
  }

  .brand {
    font-size:
      14px;
  }

  .nav-cta {
    padding:
      9px 14px;
  }


  .hero {
    min-height:
      660px;
  }

  .hero-content {
    padding:
      90px 0 118px;
  }

  .hero h1 {
    font-size:
      50px;

    letter-spacing:
      -2.5px;
  }

  .hero-copy {
    font-size:
      17px;
  }

  .hero-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }

  .hero-actions .button {
    text-align:
      center;
  }


  .value-strip {
    grid-template-columns:
      repeat(2, 1fr);

    margin-top:
      -45px;
  }

  .value-item {
    min-height:
      105px;

    border-bottom:
      1px solid var(--line);
  }

  .value-item:nth-child(2) {
    border-right:
      none;
  }


  .section {
    padding:
      75px 0;
  }

  .intro-section {
    padding-top:
      95px;
  }

  .section-heading h2,
  .outdoor-layout h2,
  .location-inner h2,
  .lifestyle-card h2 {
    letter-spacing:
      -1.4px;
  }


  .room-showcase,
  .included-grid,
  .facility-columns,
  .faq-grid {
    grid-template-columns:
      1fr;
  }

  .room-feature {
    min-height:
      auto;
  }

  .feature-icon {
    margin-bottom:
      27px;
  }


  .dark-inner {
    padding:
      75px 0;
  }


  .upgrade-wrap {
    padding:
      75px 0;

    gap:
      38px;
  }

  .upgrade-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .acre-card {
    min-height:
      300px;
  }


  .location-inner {
    padding:
      75px 0;
  }


  .gallery {
    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      250px 175px 175px;
  }

  .gallery-main {
    grid-column:
      1 / span 2;

    grid-row:
      auto;
  }


  .lifestyle-card {
    padding:
      37px 27px;

    gap:
      30px;
  }


  .contact-section {
    padding:
      90px 6%;
  }


  .footer-inner {
    flex-direction:
      column;

    gap:
      5px;
  }

}