.by,
.eyebrow {
  text-transform: uppercase
}

.hero-inner,
.wrap {
  max-width: var(--maxw);
  margin: 0 auto
}

.brand,
.floor-plan-btn,
a {
  text-decoration: none
}

.center,
.club,
.config-note,
.el-card,
.form-foot,
.statbar .grid,
.tabs {
  text-align: center
}

.gal-grid figure,
.hero,
.loc-img {
  overflow: hidden
}

.amen-cat ul,
.enq-left ul,
.loc-list {
  list-style: none
}

:root {
  --forest: #1d3a30;
  --forest-deep: #142a22;
  --forest-ink: #0e1f19;
  --bronze: #a98143;
  --bronze-soft: #c5a063;
  --cream: #f5f1e7;
  --cream-deep: #ebe4d4;
  --paper: #fbf9f3;
  --ink: #2c3530;
  --ink-soft: #5d655e;
  --line: rgba(169, 129, 67, .32);
  --maxw: 1240px
}

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

html {
  scroll-behavior: smooth
}

body {
  font-family: Jost, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

.aerial-band h3,
.amen-cat h4,
.brand .mark,
.club-stats .cs .n,
.config-row .unit,
.dev-stats .d .n,
.display,
.el-card .ic,
.enq-right .formtitle,
.foot-brand .mark,
.gal-grid figcaption b,
.loc-list li .time,
.split .body .tag,
.statbar .num,
.tabs .tab,
h1,
h2,
h3 {
  font-family: 'Cormorant Garamond', serif
}

.display,
h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.08
}

.marcellus {
  font-family: Marcellus, serif;
  font-weight: 400
}

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

.brand-logo {
  width: 60px;
  height: 52px;
  object-fit: contain
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1
}

header,
nav.links {
  align-items: center
}

.mark {
  font-size: 26px;
  font-weight: 700;
  color: #fff
}

.by {
  font-size: 12px;
  color: #d6c59a;
  letter-spacing: 1px
}

@media(max-width:768px) {
  .brand-logo {
    width: 42px;
    height: 42px
  }

  .mark {
    font-size: 22px
  }

  .by {
    font-size: 10px
  }
}

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

.brand,
header,
nav.links {
  display: flex
}

a {
  color: inherit
}

.wrap {
  padding: 0 28px
}

.eyebrow {
  font-family: Jost, sans-serif;
  font-weight: 400;
  letter-spacing: .42em;
  font-size: 11px;
  color: var(--bronze)
}

.btn,
.nav-cta {
  letter-spacing: .16em
}

.brand,
nav.links a {
  color: var(--cream)
}

.italic {
  font-style: italic
}

.topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  z-index: 0
}

.hero,
.hero-inner {
  position: relative
}

.topo svg {
  width: 100%;
  height: 100%
}

.topo path {
  fill: none;
  stroke: var(--bronze);
  stroke-width: .6;
  opacity: .3
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  justify-content: space-between;
  padding: 18px 28px;
  transition: background .4s, padding .4s, box-shadow .4s
}

header.scrolled {
  background: rgba(20, 42, 34, .94);
  backdrop-filter: blur(10px);
  padding: 12px 28px;
  box-shadow: 0 1px 0 rgba(197, 160, 99, .18)
}

.brand {
  align-items: baseline;
  gap: 10px
}

.brand .mark {
  font-weight: 600;
  font-size: 26px;
  letter-spacing: .12em
}

.brand .by,
.btn {
  font-weight: 400;
  text-transform: uppercase
}

.brand .by {
  font-size: 10px;
  letter-spacing: .34em;
  color: var(--bronze-soft)
}

nav.links {
  gap: 30px
}

nav.links a {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 300;
  opacity: .85;
  transition: opacity .25s
}

nav.links a:hover {
  opacity: 1;
  color: #fff
}

.floor-plan-btn {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25)
}

.floor-plan-btn:hover {
  transform: translate(-50%, -50%) scale(1.05)
}

@media (max-width:768px) {
  .floor-plan-btn {
    padding: 10px 18px;
    font-size: 14px
  }

  .g-talls {
    width: 207% !important
  }
}

.nav-cta {
  border: 1px solid var(--bronze);
  color: var(--cream) !important;
  padding: 9px 20px;
  font-size: 12px;
  transition: background .3s, color .3s
}

.nav-cta:hover {
  background: var(--bronze);
  color: var(--forest-ink) !important;
  opacity: 1
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: 0 0;
  border: 0
}

.burger span {
  width: 26px;
  height: 1.5px;
  background: var(--cream);
  transition: .3s
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  color: var(--cream);
  transition: background-image 1s ease-in-out;
  background: linear-gradient(to right, rgba(14, 31, 25, .86) 0, rgba(14, 31, 25, .55) 45%, rgba(14, 31, 25, .28) 100%), url("../image/Elyria Hero Image 1.png") center/cover no-repeat
}

.brochure-popup-close,
.btn {
  transition: .3s;
  cursor: pointer
}

.hero-inner {
  z-index: 2;
  padding: 120px 28px 60px;
  width: 100%
}

.hero .eyebrow {
  color: var(--bronze-soft);
  margin-bottom: 26px;
  display: block
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 5.2rem);
  font-weight: 500;
  letter-spacing: .01em;
  margin-bottom: 6px;
  max-width: 14ch
}

.aerial-band h3 em,
.hero h1 em {
  font-style: italic;
  color: var(--bronze-soft)
}

.hero .sub {
  font-size: clamp(1rem, 1vw, 1rem);
  font-weight: 300;
  max-width: 46ch;
  margin: 24px 0 8px;
  color: rgba(245, 241, 231, .9)
}

.hero .loc {
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--bronze-soft);
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 9px
}

.hero .loc::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--bronze);
  border-radius: 50%;
  display: inline-block
}

.hero-cta {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 13px;
  border: 1px solid transparent
}

.btn-wa {
  background: #25543f;
  color: #eafff2;
  border-color: #3c7a5b
}

.btn-wa:hover,
.wa-big:hover {
  background: #2f6b4f
}

.btn-ghost {
  border-color: var(--bronze);
  color: var(--cream)
}

.btn-ghost:hover,
.btn-solid,
.config-row .req:hover {
  background: var(--bronze);
  color: var(--forest-ink)
}

.lead-h em,
.split .body .tag {
  color: var(--bronze);
  font-style: italic
}

.btn-solid:hover {
  background: var(--bronze-soft)
}

.scroll-hint {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--bronze-soft);
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

.statbar,
section {
  position: relative
}

.scroll-hint .ln {
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--bronze-soft), transparent);
  animation: 2.2s infinite pulse
}

@keyframes pulse {

  0%,
  100% {
    opacity: .3
  }

  50% {
    opacity: 1
  }
}

.statbar {
  background: var(--forest-ink);
  color: var(--cream);
  z-index: 3
}

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

.statbar .cell {
  padding: 38px 18px;
  border-right: 1px solid rgba(197, 160, 99, .14)
}

.statbar .cell:last-child {
  border-right: 0
}

.statbar .num {
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--bronze-soft);
  line-height: 1
}

.statbar .lab {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: 10px;
  color: rgba(245, 241, 231, .72)
}

.pad {
  padding: 108px 0
}

.pad-sm {
  padding: 78px 0
}

.lead-h {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 500;
  color: var(--forest);
  letter-spacing: .005em
}

.section-eyebrow {
  display: block;
  margin-bottom: 18px
}

.brochure-popup-overlay.active,
.divider,
.split .body,
.split .media {
  display: flex
}

.measure {
  max-width: 68ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 1.05rem
}

.divider {
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 auto 30px;
  max-width: 240px
}

.divider .ln {
  height: 1px;
  flex: 1;
  background: var(--line)
}

.divider .dot {
  width: 6px;
  height: 6px;
  border: 1px solid var(--bronze);
  transform: rotate(45deg)
}

.brochure-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(6px);
  z-index: 99999;
  padding: 20px;
  box-sizing: border-box
}

.bp-grid,
.config-row,
.el-grid,
.split {
  display: grid
}

.brochure-popup-box {
  width: min(400px, calc(100% - 40px));
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .25);
  animation: .3s popup
}

.tabs {
  background: #a98143;
  padding: 18px
}

.tabs .tab {
  background: 0 0;
  border: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .5px
}

.config-row.head span,
.el-card .nm {
  letter-spacing: .2em;
  text-transform: uppercase
}

.brochure-popup-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 22px
}

.brochure-popup-close:hover {
  background: #fff;
  color: #111
}

#popupCallbackForm {
  padding: 22px
}

.field input,
.field select {
  height: 48px;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  background: #fafafa;
  transition: .25s
}

.field input:focus,
.field select:focus {
  border-color: #c59b43;
  background: #fff;
  box-shadow: none
}

.submit {
  height: 50px;
  border-radius: 10px;
  background: linear-gradient(90deg, #c59b43, #a77b28);
  font-weight: 600
}

.form-foot {
  margin-top: 12px;
  font-size: 12px;
  color: #777;
  line-height: 1.5
}

.amen,
.blueprint,
.vision {
  background: var(--paper)
}

.split {
  grid-template-columns: 1.05fr 1fr;
  align-items: stretch;
  gap: 40px
}

.split .media {
  align-items: center;
  justify-content: center
}

.split .media img {
  width: 90%;
  height: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: 10px
}

.bp-card .bp-img img,
.bp-img img {
  height: auto;
  width: 100%
}

.split .body {
  padding: 80px clamp(28px, 5vw, 72px);
  flex-direction: column;
  justify-content: center
}

.split .body h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  color: var(--forest);
  margin-bottom: 8px
}

.field,
.split .body p {
  margin-bottom: 18px
}

.split .body .tag {
  font-size: 1.3rem;
  margin-bottom: 24px
}

.split .body p {
  color: var(--ink-soft);
  max-width: 48ch
}

.config-row.head,
.elements {
  background: var(--forest);
  color: var(--cream)
}

.dev .lead-h,
.elements .lead-h {
  color: var(--cream)
}

.club .marcellus.big span,
.dev .lead-h em,
.elements .lead-h em,
.foot-col a:hover {
  color: var(--bronze-soft)
}

.elements .measure {
  color: rgba(245, 241, 231, .8)
}

.el-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 56px
}

.el-card {
  border: 1px solid rgba(197, 160, 99, .26);
  padding: 34px 18px;
  transition: background .35s, border-color .35s
}

.bp-card,
.config-wrap {
  border: 1px solid var(--line)
}

.el-card:hover {
  background: rgba(197, 160, 99, .07);
  border-color: var(--bronze)
}

.el-card .ic {
  font-size: 2rem;
  color: var(--bronze-soft);
  margin-bottom: 8px
}

.el-card .nm,
.gal-grid figcaption {
  color: var(--cream);
  font-size: 12px
}

.el-card .ds {
  font-size: 12.5px;
  color: rgba(245, 241, 231, .62);
  margin-top: 8px;
  letter-spacing: .02em
}

.location,
.residences {
  background: var(--cream)
}

.config-wrap {
  margin-top: 54px;
  background: var(--paper)
}

.config-row {
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 24px 30px;
  border-bottom: 1px solid var(--line)
}

.config-row:last-child {
  border-bottom: 0
}

.config-row.head span {
  font-size: 11px;
  color: var(--bronze-soft)
}

.config-row .unit {
  font-size: 1.5rem;
  color: var(--forest);
  font-weight: 500
}

.config-row .conf {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--ink-soft)
}

.config-row .val {
  font-size: 14px;
  color: var(--ink)
}

.config-row .req,
.config-row .val small {
  color: var(--bronze);
  text-transform: uppercase
}

.config-row .val small {
  display: block;
  font-size: 10.5px;
  letter-spacing: .16em;
  margin-bottom: 2px
}

.config-row .req {
  font-size: 11px;
  letter-spacing: .14em;
  border: 1px solid var(--bronze);
  padding: 8px 14px;
  white-space: nowrap;
  transition: .3s
}

.amen-cat h4,
.bp-card .bp-head {
  border-bottom: 1px solid var(--line)
}

.config-note {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: .03em
}

.bp-grid {
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 50px
}

.bp-card {
  background: #fff
}

.bp-card .bp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px
}

.bp-card .bp-head h3 {
  font-size: 1.4rem;
  color: var(--forest);
  font-weight: 500
}

.bp-card .bp-head span {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze)
}

.bp-img {
  position: relative;
  display: inline-block;
  width: 100%
}

.bp-img img {
  display: block
}

.floor-plan-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 50px;
  background: rgba(197, 155, 67, .95);
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  transition: .3s
}

.floor-plan-btn:hover {
  background: #111;
  color: #fff
}

.bp-card .bp-img {
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center
}

.bp-card .bp-foot {
  padding: 0 24px 20px;
  font-size: 12.5px;
  color: var(--ink-soft);
  letter-spacing: .02em
}

.aerial-band .meta,
.gal-grid figcaption {
  letter-spacing: .16em;
  text-transform: uppercase
}

.gallery {
  background: var(--forest-deep)
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 180px;
  gap: 10px
}

.gal-grid figure {
  position: relative;
  background: #222
}

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

.gal-grid figure:hover img {
  transform: scale(1.06)
}

.gal-grid figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 14px 16px;
  background: linear-gradient(transparent, rgba(14, 31, 25, .85))
}

.aerial-band,
.amen-cat li,
.club,
.enq-left li,
.enquire {
  position: relative
}

.gal-grid figcaption b {
  display: block;
  font-size: 1.15rem;
  letter-spacing: .02em;
  text-transform: none;
  font-weight: 500;
  color: var(--bronze-soft)
}

.g-wide {
  grid-column: span 3
}

.g-tall {
  grid-row: span 2
}

.g-2 {
  grid-column: span 2
}

.amen-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 48px;
  margin-top: 50px
}

.amen-cat h4 {
  font-size: 1.45rem;
  color: var(--forest);
  padding-bottom: 12px;
  margin-bottom: 16px;
  font-weight: 500
}

.amen-cat li {
  font-size: 14px;
  color: var(--ink-soft);
  padding: 6px 0 6px 20px;
  letter-spacing: .01em
}

.aerial-band h3,
.club,
.dev {
  color: var(--cream)
}

.amen-cat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--bronze);
  transform: rotate(45deg)
}

.club {
  background: linear-gradient(rgba(14, 31, 25, .72), rgba(14, 31, 25, .72)), url('img/elysian-club.jpg') center/cover no-repeat fixed
}

.club .marcellus.big {
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: .06em;
  color: var(--cream)
}

.club .measure {
  color: rgba(245, 241, 231, .86)
}

.club-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 44px;
  flex-wrap: wrap
}

.club-stats .cs .n {
  font-size: 2.6rem;
  color: var(--bronze-soft)
}

.club-stats .cs .l {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245, 241, 231, .7)
}

.loc-img {
  border: 1px solid var(--line)
}

.loc-img iframe {
  width: 100%;
  height: 500px;
  border: 0;
  display: block
}

.aerial-band {
  height: 62vh;
  min-height: 420px;
  background: linear-gradient(rgba(14, 31, 25, .34), rgba(14, 31, 25, .5)), url("../image/Elyria Hero Image 1.png") center/cover no-repeat fixed;
  display: flex;
  align-items: flex-end
}

.dev,
.dev-stats .d,
footer {
  background: var(--forest-ink)
}

.aerial-band .cap {
  padding: 46px 0;
  width: 100%
}

.aerial-band .cap .wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap
}

.aerial-band h3 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 500;
  max-width: 18ch;
  line-height: 1.15
}

.aerial-band .meta {
  color: rgba(245, 241, 231, .85);
  font-size: 13px;
  text-align: right
}

.dev-stats .d,
.dev-track,
.wa-sub {
  text-align: center
}

.loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 54px;
  align-items: center;
  margin-top: 50px
}

.loc-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line)
}

.loc-list li .place {
  font-size: 15px;
  color: var(--ink)
}

.loc-list li .place small {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 300
}

.loc-list li .time {
  font-size: 1.5rem;
  color: var(--bronze);
  white-space: nowrap;
  font-weight: 500
}

.dev-stats .d .n,
.dev-track b,
.enq-left h2 em,
.enq-left li::before {
  color: var(--bronze-soft)
}

.dev .measure {
  color: rgba(245, 241, 231, .78)
}

.dev-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(197, 160, 99, .18);
  margin-top: 54px;
  border: 1px solid rgba(197, 160, 99, .18)
}

.dev-stats .d {
  padding: 40px 22px
}

.dev-stats .d .n {
  font-size: 2.7rem;
  line-height: 1
}

.dev-stats .d .l,
footer {
  color: rgba(245, 241, 231, .7)
}

.dev-stats .d .l {
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 10px
}

.dev-track {
  margin-top: 46px;
  font-size: 13.5px;
  letter-spacing: .04em;
  color: rgba(245, 241, 231, .62);
  line-height: 2
}

.dev-track b {
  font-weight: 400
}

.enquire {
  background: var(--cream-deep)
}

.enq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--paper)
}

.enq-left {
  padding: 60px clamp(28px, 4vw, 56px);
  background: var(--forest);
  color: var(--cream)
}

.enq-left h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  color: var(--cream);
  margin-bottom: 8px
}

.enq-left h2 em {
  font-style: italic
}

.enq-left p {
  color: rgba(245, 241, 231, .82);
  margin: 18px 0 30px;
  max-width: 42ch
}

.enq-left ul {
  margin-bottom: 34px
}

.enq-left li {
  padding: 9px 0 9px 26px;
  font-size: 14px;
  color: rgba(245, 241, 231, .9)
}

.enq-left li::before {
  content: "✓";
  position: absolute;
  left: 0
}

.wa-big {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
  background: #25543f;
  color: #eafff2;
  border: 1px solid #3c7a5b;
  padding: 17px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: .3s
}

.wa-sub {
  font-size: 12px;
  color: rgba(245, 241, 231, .6);
  margin-top: 14px;
  letter-spacing: .04em
}

.form-msg,
.form-note {
  margin-top: 16px;
  text-align: center
}

.field label,
.submit {
  letter-spacing: .16em;
  text-transform: uppercase
}

.enq-right {
  padding: 60px clamp(28px, 4vw, 56px)
}

.enq-right .formtitle {
  font-size: 1.7rem;
  color: var(--forest);
  margin-bottom: 6px;
  font-weight: 500
}

.enq-right .formsub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 28px
}

.field label {
  display: block;
  font-size: 11px;
  color: var(--bronze);
  margin-bottom: 7px
}

.field input,
.field select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: Jost, sans-serif;
  font-size: 14px;
  color: var(--ink);
  font-weight: 300
}

.field input:focus,
.field select:focus {
  outline: 0;
  border-color: var(--bronze)
}

.submit {
  width: 100%;
  background: var(--bronze);
  color: #fff;
  border: 0;
  cursor: pointer;
  padding: 16px;
  font-size: 13px;
  transition: .3s
}

.submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(197, 155, 67, .25);
  background: var(--bronze-soft)
}

.form-note {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.6
}

.form-msg {
  display: none;
  padding: 14px;
  font-size: 13.5px;
  letter-spacing: .03em
}

.form-msg.ok {
  display: block;
  background: #dfeee4;
  color: #1d5536;
  border: 1px solid #8cc0a3
}

.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 44px
}

.foot-brand .mark {
  font-size: 2.2rem;
  color: var(--cream);
  letter-spacing: .1em;
  font-weight: 600
}

.foot-brand .by,
.foot-col h5 {
  text-transform: uppercase;
  color: var(--bronze-soft)
}

.foot-brand .by {
  font-size: 10px;
  letter-spacing: .32em;
  margin-top: 4px
}

.foot-brand p {
  margin-top: 20px;
  font-size: 13.5px;
  max-width: 36ch;
  line-height: 1.8
}

.foot-col h5 {
  font-size: 11px;
  letter-spacing: .2em;
  margin-bottom: 18px;
  font-weight: 400
}

.foot-col a,
.foot-col p {
  display: block;
  font-size: 13.5px;
  color: rgba(245, 241, 231, .7);
  margin-bottom: 11px;
  transition: color .25s
}

.rera-box {
  border: 1px solid rgba(197, 160, 99, .26);
  padding: 16px 18px;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(245, 241, 231, .55)
}

.disclaimer {
  border-top: 1px solid rgba(197, 160, 99, .16);
  padding: 26px 0 14px;
  font-size: 11.5px;
  line-height: 1.8;
  color: rgba(245, 241, 231, .45);
  max-width: none
}

.foot-bottom {
  padding: 16px 0 40px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: rgba(245, 241, 231, .5)
}

.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25543f;
  color: #eafff2;
  padding: 13px 20px;
  border-radius: 50px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  font-size: 13px;
  letter-spacing: .08em;
  transition: transform .3s
}

.wa-float:hover {
  transform: translateY(-3px)
}

.wa-float svg {
  width: 20px;
  height: 20px;
  fill: #eafff2
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s, transform .9s
}

.reveal.in {
  opacity: 1;
  transform: none
}

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

  .scroll-hint .ln {
    animation: none
  }

  .aerial-band,
  .club {
    background-attachment: scroll
  }
}

@media(max-width:1000px) {

  .el-grid,
  .statbar .grid {
    grid-template-columns: repeat(2, 1fr)
  }

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

  .bp-grid,
  .dev-stats,
  .enq-grid,
  .loc-grid,
  .split {
    grid-template-columns: 1fr
  }

  .split .media {
    min-height: 340px
  }

  .amen-cols {
    grid-template-columns: 1fr 1fr
  }

  .foot-top {
    grid-template-columns: 1fr;
    gap: 34px
  }

  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px
  }

  .g-2,
  .g-wide {
    grid-column: span 2
  }

  .g-tall {
    grid-row: span 1
  }
}

@media(max-width:680px) {

  .config-row.head,
  .wa-float span,
  nav.links {
    display: none
  }

  nav.links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(20, 42, 34, .98);
    padding: 10px 0
  }

  .burger,
  nav.links.open {
    display: flex
  }

  nav.links a {
    padding: 15px 28px;
    width: 100%;
    border-bottom: 1px solid rgba(197, 160, 99, .12)
  }

  .nav-cta {
    margin: 10px 28px;
    text-align: center
  }

  header {
    padding: 14px 22px
  }

  .config-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }

  .config-row .req {
    grid-column: span 2;
    text-align: center
  }

  .config-row .val small {
    color: var(--bronze)
  }

  .amen-cols,
  .el-grid {
    grid-template-columns: 1fr
  }

  .club-stats {
    gap: 34px
  }

  .wa-float {
    padding: 14px;
    border-radius: 50%
  }

  .pad {
    padding: 72px 0
  }
}

.error {
  border: 1px solid red !important
}

.error-msg {
  color: red;
  font-size: 12px;
  display: block;
  margin-top: 5px
}