/* =========================================================
   FORTUNE CITY
   SITE CONTINUITY LAYER

   Arena = master visual language.

   This file intentionally affects:
   - Fortune City homepage
   - Golden Willows

   Arena itself remains untouched.
   ========================================================= */


/* =========================================================
   SHARED SCALE
   ========================================================= */

.homepage {
  --page-gutter: clamp(22px, 5.5vw, 82px);
  --content-width: 1280px;
  --section-spacing: clamp(64px, 6vw, 88px);
  --section-title-size: clamp(44px, 4.6vw, 66px);
  --nav-height: 88px;
}


.gw-page {
  --gw-content-width: 1280px;
  --gw-page-gutter: clamp(22px, 5.5vw, 82px);
  --gw-section-gap: clamp(64px, 6vw, 88px);
  --gw-heading-size: clamp(44px, 4.6vw, 66px);
  --gw-rule: rgba(22, 53, 46, 0.20);
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.homepage h2,
.gw-page h2 {
  font-size: clamp(44px, 4.6vw, 66px);
  line-height: 1;
  letter-spacing: -0.025em;
}


.homepage h3,
.gw-page h3 {
  font-size: clamp(32px, 3vw, 43px);
  line-height: 1.08;
  letter-spacing: -0.015em;
}


.homepage p,
.gw-page p {
  line-height: 1.8;
}


.homepage .eyebrow,
.gw-page .gw-eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.17em;
  line-height: 1.6;
  text-transform: uppercase;
}


/* =========================================================
   BUTTON LANGUAGE
   ========================================================= */

.homepage .button,
.gw-page .gw-button {
  min-height: 54px;

  padding: 17px 22px;

  gap: 20px;

  font-size: 12px;
  font-weight: 600;

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

  box-shadow: none;
}


.homepage .text-link,
.homepage .quiet-link,
.gw-page .gw-text-link {
  font-size: 12px;

  font-weight: 600;

  gap: 14px;

  padding-bottom: 7px;
}


/* =========================================================
   HEADER — COMMON LANGUAGE
   ========================================================= */

.home-header {
  height: 88px;

  padding-inline:
    var(--page-gutter);
}


.home-header.is-scrolled {
  height: 88px;

  background:
    var(--color-deep-forest);
}


.home-header .wordmark > span,
.gw-wordmark span {

  font-family:
    var(--font-headline);

  font-size: 26px;

  font-weight: 400;

  line-height: 1.1;

  letter-spacing: 0.025em;
}


.home-header .wordmark small,
.gw-wordmark small {

  margin-top: 7px;

  font-size: 8px;

  font-weight: 500;

  letter-spacing: 0.30em;
}


.home-nav,
.gw-navigation {

  gap: 29px;

  font-size: 11px;

  font-weight: 500;
}


.home-nav .nav-cta,
.gw-nav-request {

  min-height: 44px;

  padding: 12px 17px;

  gap: 20px;

  border:
    1px solid rgba(181, 154, 104, 0.60);

  background: transparent;
}


/* =========================================================
   GOLDEN WILLOWS HEADER
   Make it part of the same family as Arena.
   ========================================================= */

.gw-header {

  height: auto;

  background:
    var(--color-deep-forest);

  color:
    var(--color-warm-white);

  border-bottom:
    1px solid rgba(244, 240, 231, 0.16);
}


.gw-header-inner {
  height: 88px;
}


.gw-nav-request {
  color:
    var(--color-warm-white);
}


.gw-nav-request:hover {

  background:
    rgba(244, 240, 231, 0.08);
}


.gw-menu-button {

  border-color:
    rgba(244, 240, 231, 0.35);
}


.gw-menu-button > span {

  background:
    var(--color-warm-white);
}


/* =========================================================
   HOMEPAGE HERO
   Keep the township hero, but speak Arena's language.
   ========================================================= */

.homepage .hero-copy h1 {

  font-size:
    clamp(76px, 8vw, 124px);

  line-height:
    0.94;

  letter-spacing:
    -0.035em;

  max-width:
    720px;
}


.homepage .hero-description {

  max-width:
    360px;

  font-size:
    12px;

  line-height:
    1.9 !important;

  color:
    rgba(250, 248, 242, 0.78);
}


.homepage .hero-eyebrow {

  color:
    var(--color-brass);
}


.home-hero .button-ivory {

  background:
    var(--color-brass);

  color:
    var(--color-deep-forest) !important;
}


.home-hero .button-ivory:hover {

  background:
    #cab183;
}


/* =========================================================
   GOLDEN WILLOWS HERO
   Biggest continuity improvement.
   ========================================================= */

.gw-hero {

  padding-block:
    0 64px;

  background:
    var(--color-deep-forest);

  color:
    var(--color-warm-white);
}


.gw-breadcrumb {

  padding-top:
    22px;

  margin-bottom:
    22px;

  color:
    rgba(250, 248, 242, 0.55);
}


.gw-breadcrumb [aria-current] {

  color:
    var(--color-warm-white);
}


.gw-hero-grid {

  grid-template-columns:
    minmax(360px, 0.82fr)
    minmax(0, 1.18fr);

  gap:
    clamp(45px, 6vw, 85px);

  align-items:
    stretch;

  min-height:
    620px;
}


.gw-hero-copy {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding-block:
    42px;
}


.gw-hero-copy .gw-eyebrow {

  color:
    var(--color-brass);
}


.gw-hero-copy h1 {

  font-size:
    clamp(72px, 7vw, 108px);

  line-height:
    0.92;

  letter-spacing:
    -0.035em;
}


.gw-page .gw-hero-tagline {

  margin-top:
    23px;

  font-size:
    clamp(34px, 3.2vw, 48px);

  line-height:
    1.05;

  font-style:
    normal;

  color:
    var(--color-warm-ivory);
}


.gw-hero-description {

  max-width:
    360px;

  font-size:
    12px;

  line-height:
    1.9;

  color:
    rgba(250, 248, 242, 0.76);
}


.gw-page .gw-project-status {

  color:
    #dac79f;

  font-size:
    9px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.gw-hero-note {

  border-color:
    rgba(250, 248, 242, 0.20);
}


.gw-hero-note p {

  color:
    rgba(250, 248, 242, 0.55);
}


.gw-hero .gw-button-forest {

  background:
    var(--color-brass);

  color:
    var(--color-deep-forest) !important;
}


.gw-hero .gw-button-forest:hover {

  background:
    #cab183;
}


.gw-hero .gw-text-link {

  color:
    var(--color-warm-white);

  border-color:
    rgba(250, 248, 242, 0.45);
}


.gw-hero-visual {

  min-height:
    620px;

  height:
    auto;
}



/* =========================================================
   FACT STRIPS
   Match Arena's dark hero-bottom information bar.
   ========================================================= */

.quick-facts,
.gw-facts {

  background:
    var(--color-deep-forest);

  color:
    var(--color-warm-white);

  border-color:
    rgba(244, 240, 231, 0.16);
}


.quick-facts .fact {

  border-color:
    rgba(244, 240, 231, 0.16);
}


.quick-facts .fact span,
.gw-facts-inner span {

  color:
    var(--color-muted-sage);

  opacity:
    1;
}


.quick-facts .fact p,
.gw-facts-inner p {

  color:
    var(--color-warm-white);
}


.gw-facts-inner > div {

  border-color:
    rgba(244, 240, 231, 0.16);
}



/* =========================================================
   SECTION HEADINGS
   ========================================================= */

.homepage .section-heading,
.gw-page .gw-section-heading {

  align-items:
    flex-end;

  gap:
    clamp(45px, 7vw, 100px);

  margin-bottom:
    38px;
}


.homepage .section-heading > p,
.gw-page .gw-section-heading > p {

  max-width:
    350px;

  font-size:
    14px;

  color:
    var(--color-muted-text);
}



/* =========================================================
   PAGE SURFACE RHYTHM
   ========================================================= */

.home-story,
.fortune-life,
.home-location {

  background:
    var(--color-warm-ivory);
}


.home-collections,
.home-testimonials {

  background:
    var(--color-soft-stone);
}


.home-faq {

  background:
    var(--color-warm-ivory);

  border-top:
    1px solid rgba(22, 53, 46, 0.20);
}


.gw-residences {

  background:
    var(--color-soft-stone);
}


.gw-plans {

  background:
    var(--color-warm-white);
}


.gw-location,
.gw-faq {

  background:
    var(--color-warm-ivory);
}



/* =========================================================
   GOLDEN WILLOWS CONTROLS
   Remove the slightly "app-like" rounded-card feeling.
   ========================================================= */

.gw-configuration-tabs button,
.gw-plan-mode button,
.gw-request-modes button,
.gw-image-enlarge {

  border-radius:
    0;
}


.gw-residence-copy select,
.gw-floor-picker select {

  border:
    0;

  border-bottom:
    1px solid var(--gw-rule);

  border-radius:
    0;

  padding:
    10px 22px 10px 0;

  background:
    transparent;
}


.gw-configuration-tabs button[aria-selected="true"] {

  background:
    var(--color-primary-forest);

  color:
    var(--color-warm-white);
}



/* =========================================================
   GOLDEN TRUST
   Give it the same dark editorial interlude Arena uses.
   ========================================================= */

.gw-trust {

  background:
    var(--color-deep-forest);

  color:
    var(--color-warm-white);
}


.gw-trust .gw-eyebrow {

  color:
    var(--color-brass);
}


.gw-trust h2,
.gw-trust strong {

  color:
    var(--color-warm-white);
}


.gw-trust-grid > div:first-child > p:not(.gw-eyebrow),
.gw-trust-rows > div p,
.gw-registrations p {

  color:
    rgba(250, 248, 242, 0.62);
}


.gw-trust-rows > div,
.gw-registrations,
.gw-registrations dl > div {

  border-color:
    rgba(250, 248, 242, 0.18);
}


.gw-trust-rows > div > span,
.gw-trust a,
.gw-registration-number {

  color:
    var(--color-brass) !important;
}



/* =========================================================
   ENQUIRY — MATCH ARENA
   Remove the pale floating form cards.
   ========================================================= */

.home-enquiry .enquiry-panel,
.gw-enquiry-panel {

  padding:
    0;

  background:
    transparent;

  color:
    var(--color-warm-white);

  border-radius:
    0;
}


.home-enquiry .enquiry-panel > .eyebrow,
.gw-enquiry-panel > .gw-eyebrow {

  color:
    var(--color-brass);
}


.home-enquiry .enquiry-panel h3,
.gw-enquiry-panel h3 {

  color:
    var(--color-warm-white);

  font-size:
    clamp(32px, 3vw, 43px);
}


.home-enquiry .field label,
.home-enquiry .interest-field legend,
.gw-enquiry .gw-field label {

  color:
    rgba(250, 248, 242, 0.72);

  font-size:
    10px;
}


.home-enquiry .field input {

  border:
    0;

  border-bottom:
    1px solid rgba(250, 248, 242, 0.30);

  border-radius:
    0;

  padding:
    9px 0;

  background:
    transparent;

  color:
    var(--color-warm-white);
}


.home-enquiry .phone-input {

  border:
    0;

  border-bottom:
    1px solid rgba(250, 248, 242, 0.30);

  border-radius:
    0;
}


.home-enquiry .phone-input > span {

  color:
    rgba(250, 248, 242, 0.72);

  padding-left:
    0;
}


.home-enquiry .field input::placeholder {

  color:
    rgba(250, 248, 242, 0.40);
}


.home-enquiry .interest-options span {

  border-color:
    rgba(250, 248, 242, 0.30);

  border-radius:
    0;

  color:
    var(--color-warm-white);
}


.home-enquiry .interest-options input:checked + span {

  background:
    var(--color-warm-ivory);

  border-color:
    var(--color-warm-ivory);

  color:
    var(--color-primary-forest);
}


.home-enquiry .form-submit {

  background:
    var(--color-brass);

  color:
    var(--color-deep-forest) !important;
}


.home-enquiry .form-preview-note,
.home-enquiry .form-visit {

  color:
    rgba(250, 248, 242, 0.55);
}



/* GOLDEN ENQUIRY */

.gw-request-modes button {

  border-color:
    rgba(250, 248, 242, 0.30);

  color:
    var(--color-warm-white);

  background:
    transparent;
}


.gw-request-modes button[aria-pressed="true"] {

  background:
    var(--color-warm-ivory);

  border-color:
    var(--color-warm-ivory);

  color:
    var(--color-primary-forest);
}


.gw-enquiry .gw-field input,
.gw-enquiry .gw-field select {

  min-height:
    46px;

  padding:
    9px 0;

  border:
    0;

  border-bottom:
    1px solid rgba(250, 248, 242, 0.30);

  border-radius:
    0;

  background:
    transparent;

  color:
    var(--color-warm-white);
}


.gw-enquiry .gw-field input::placeholder {

  color:
    rgba(250, 248, 242, 0.40);
}


.gw-enquiry .gw-field select option {

  background:
    var(--color-warm-white);

  color:
    var(--color-dark-ink);
}


.gw-enquiry .gw-phone-input {

  border:
    0;

  border-bottom:
    1px solid rgba(250, 248, 242, 0.30);

  border-radius:
    0;
}


.gw-enquiry .gw-phone-input > span {

  padding-left:
    0;

  color:
    rgba(250, 248, 242, 0.72);
}


.gw-enquiry .gw-submit {

  background:
    var(--color-brass);

  color:
    var(--color-deep-forest) !important;
}


.gw-preview-note {

  color:
    rgba(250, 248, 242, 0.55) !important;
}



/* =========================================================
   FOOTERS — SAME FAMILY AS ARENA
   ========================================================= */

.home-footer,
.gw-footer {

  padding-block:
    36px 26px;

  background:
    var(--color-deep-forest);

  color:
    var(--color-warm-white);

  border-top:
    1px solid rgba(250, 248, 242, 0.16);
}


.home-footer .footer-top,
.gw-footer-top {

  padding-bottom:
    0;

  align-items:
    center;
}


.home-footer .wordmark > span,
.gw-footer .gw-wordmark span {

  font-family:
    var(--font-headline);

  font-size:
    26px;

  font-weight:
    400;

  letter-spacing:
    0.025em;
}


.home-footer .wordmark small,
.gw-footer .gw-wordmark small {

  font-size:
    8px;

  letter-spacing:
    0.30em;
}


.footer-site-nav,
.gw-footer-nav {

  gap:
    27px;
}


.footer-site-nav a,
.gw-footer-nav a,
.back-top,
.gw-footer-back {

  font-size:
    10px;
}


.footer-site-nav a[aria-current="page"],
.gw-footer-nav a[aria-current="page"] {

  color:
    var(--color-brass);
}


.home-footer .footer-bottom,
.gw-footer-bottom {

  margin-top:
    30px;

  padding-top:
    20px;

  border-top:
    1px solid rgba(250, 248, 242, 0.15);
}


.home-footer .footer-disclosure p,
.gw-footer-bottom p {

  font-size:
    8px;

  color:
    rgba(250, 248, 242, 0.50);
}



/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .gw-navigation {

    background:
      var(--color-deep-forest);

    color:
      var(--color-warm-white);
  }


  .gw-menu-button {

    border-color:
      rgba(250, 248, 242, 0.35);
  }


  .gw-menu-button > span {

    background:
      var(--color-warm-white);
  }

}



@media (max-width: 700px) {

  .homepage {

    --page-gutter:
      24px;

    --section-spacing:
      60px;

    --section-title-size:
      clamp(38px, 11vw, 46px);
  }


  .gw-page {

    --gw-page-gutter:
      24px;

    --gw-section-gap:
      60px;

    --gw-heading-size:
      clamp(38px, 11vw, 46px);
  }


  .homepage h2,
  .gw-page h2 {

    font-size:
      clamp(38px, 11vw, 46px);
  }


  .homepage .hero-copy h1 {

    font-size:
      clamp(56px, 17vw, 76px);
  }


  .gw-hero {

    padding-bottom:
      44px;
  }


  .gw-hero-grid {

    grid-template-columns:
      1fr;

    gap:
      28px;

    min-height:
      0;
  }


  .gw-hero-copy {

    padding-block:
      25px 5px;
  }


  .gw-hero-copy h1 {

    font-size:
      clamp(58px, 16vw, 78px);
  }


  .gw-page .gw-hero-tagline {

    font-size:
      34px;
  }


  .gw-hero-visual {

    min-height:
      430px;
  }


  .home-enquiry .enquiry-panel,
  .gw-enquiry-panel {

    padding-top:
      10px;
  }

}