@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ONN9 Official Brand Typography */
  --_fonts---font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --_fonts---font-accent: 'Cormorant Garamond', Georgia, serif;
  --_fonts---font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ONN9 Official Brand Colors */
  --onn9-park-green: #1F3A32;
  --onn9-limestone: #EFE7DA;
  --onn9-terracotta: #B4532F;
  --onn9-sand: #E2D7C4;
  --onn9-line: #D3C6B1;

  /* Override Webflow Design Tokens centrally */
  --_global-colors---base-0--100: #EFE7DA;
  --_global-colors---base-0--60: rgba(239, 231, 218, 0.6);
  --_global-colors---base-0--30: rgba(239, 231, 218, 0.3);
  --_global-colors---base-0--10: rgba(239, 231, 218, 0.1);
  --_global-colors---base-0--5: rgba(239, 231, 218, 0.05);

  --_global-colors---base-1000--100: #1F3A32;
  --_global-colors---base-1000--60: rgba(31, 58, 50, 0.6);
  --_global-colors---base-1000--30: rgba(31, 58, 50, 0.3);
  --_global-colors---base-1000--10: rgba(31, 58, 50, 0.1);
  --_global-colors---base-1000--5: rgba(31, 58, 50, 0.05);

  --_global-colors---brand-500--powder-sky: #EFE7DA;
  --_global-colors---brand-500--velvet-plum: #1F3A32;
  --_global-colors---brand-500--blush-bloom: #B4532F;

  /* Global background & text */
  --_colors---base-0--primary: #EFE7DA;
  --_colors---base-1000--primary: #1F3A32;
  --_colors---base-1000--gray-text: rgba(31, 58, 50, 0.7);
  --_colors---base-1000--line: #D3C6B1;
  --_colors---other--bg: #EFE7DA;
}

body {
  font-family: var(--_fonts---font-body) !important;
  color: var(--_colors---base-1000--primary);
  background-color: var(--_colors---base-0--primary);
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--_fonts---font-display) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: -0.015em !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.h4, h4, .h5, h5, .h6, h6 {
  letter-spacing: 0.02em !important;
}

.a1, .a2 {
  font-family: var(--_fonts---font-display) !important;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em !important;
}

/* Terracotta Labels */
.l1, .l2, [data-label] {
  font-family: var(--_fonts---font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

/* Selection */
::selection {
  background: var(--onn9-terracotta) !important;
  color: #ffffff !important;
}

/* Double Terracotta Frame graphic element */
.onn9-double-frame {
  position: relative;
  padding: 18px;
}
.onn9-double-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--onn9-terracotta);
  pointer-events: none;
}
.onn9-double-frame::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid var(--onn9-terracotta);
  pointer-events: none;
}

/* Outlined 9 Watermark */
.onn9-watermark {
  position: absolute;
  right: -5%;
  bottom: -10%;
  font-family: var(--_fonts---font-body);
  font-size: 28rem;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 2px var(--onn9-terracotta);
  opacity: 0.06;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

/* Artist impression notice */
.artist-impression-badge {
  font-family: var(--_fonts---font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--onn9-terracotta);
  opacity: 0.85;
}

/* Refined Hero Logo and Tagline according to Brand Guidelines */
.hero-s_logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.hero-s_logo .h1 {
  font-family: var(--_fonts---font-display) !important;
  font-size: clamp(3.5rem, 8vw, 7.5rem) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  line-height: 0.95 !important;
  color: var(--onn9-limestone, #EFE7DA) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hero-s_logo_a {
  transform: none !important;
  margin-top: 14px !important;
  margin-left: 0 !important;
  text-align: center !important;
}

.hero-s_logo_a .a2 {
  font-family: 'Poppins', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: clamp(13px, 1.3vw, 19px) !important;
  letter-spacing: 0.22em !important;
  text-transform: lowercase !important;
  color: var(--onn9-limestone, #EFE7DA) !important;
  opacity: 0.9 !important;
  display: inline-block !important;
}

/* Preloader Refinements */
.preloader_bg_a {
  display: none !important;
}

.preloader_logo_a {
  transform: none !important;
  margin-top: 8px !important;
  margin-left: 0 !important;
  text-align: center !important;
}

.preloader_logo_a .a2 {
  font-family: 'Poppins', sans-serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.2em !important;
  text-transform: lowercase !important;
  color: var(--onn9-limestone, #EFE7DA) !important;
  opacity: 0.9 !important;
}

/* Rotating Header Logo Typography */
.header-logo_bg text,
.header-logo_bg svg text {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.header-logo:hover .logo_symbol.header {
  transform: scale(1.04);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hero section layout refinements */
.hero-s_logo {
  grid-area: 1/2/2/10 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  z-index: 2 !important;
}

.hero-s_logo_a {
  margin: 12px 0 0 0 !important;
  transform: none !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.hero-s_title {
  grid-area: 1/2/2/10 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  z-index: 2 !important;
}

/* Section divider logo symbols */
.s_logo .logo_symbol {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Logo Mark Global Image Styling */
.logo_symbol img,
img.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: filter 0.35s ease !important;
}

/* In dark mode / dark sections (e.g. footer, preloader, mobile menu), adapt the mark to limestone cream */
.theme_on-dark .logo_symbol img,
.theme_on-dark img.logo,
[data-theme="theme_on-dark"] .logo_symbol img,
[data-theme="theme_on-dark"] img.logo {
  filter: brightness(0) invert(95%) sepia(8%) saturate(300%) hue-rotate(340deg);
}

/* Dynamic theme adaptation for the top-left rotating logo badge:
   - When background is dark / color (theme_on-color or theme_on-dark): LOGO IS WHITE
   - When background is bright / light (theme_on-light or theme_on-brand): LOGO IS DARK PARK GREEN */
.header-logo.theme_on-color .logo_symbol img,
.header-logo.theme_on-dark .logo_symbol img,
.theme_on-color .header-logo:not(.theme_on-light):not(.theme_on-brand) .logo_symbol img,
.theme_on-dark .header-logo:not(.theme_on-light):not(.theme_on-brand) .logo_symbol img,
[data-theme="theme_on-color"] .logo_symbol.header img,
[data-theme="theme_on-dark"] .logo_symbol.header img {
  filter: brightness(0) invert(1) !important;
}

.header-logo.theme_on-light .logo_symbol img,
.header-logo.theme_on-brand .logo_symbol img,
.theme_on-light .header-logo .logo_symbol img,
.theme_on-brand .header-logo .logo_symbol img,
[data-theme="theme_on-light"] .logo_symbol.header img,
[data-theme="theme_on-brand"] .logo_symbol.header img {
  filter: none !important;
}

/* Prevent typography breaking mid-word (e.g. "GOLDEN" -> "GOLD" + "EN") */
.loc-intro-s_title {
  grid-area: 1/3/2/10 !important;
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}

.loc-intro-s_title_line {
  display: block;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

@media screen and (max-width: 991px) {
  .loc-intro-s_title {
    grid-area: 1/2/2/5 !important;
    width: auto !important;
  }
  .loc-intro-s_title_line {
    white-space: normal !important;
    word-break: keep-all !important;
  }
}

/* Prevent typography breaking mid-word in Frontage CTA Section ("FRONTAGE" -> never broken) */
.cta-s_title {
  grid-area: 1/1/2/11 !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

.cta-s_title_h1 {
  font-size: clamp(2.8rem, 6.2vw, 6.8rem) !important;
  line-height: 1.05 !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-align: center !important;
}

.cta-s_title_line {
  display: block;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

@media screen and (max-width: 991px) {
  .cta-s_title {
    grid-area: 1/1/2/5 !important;
  }
  .cta-s_title_h1 {
    font-size: clamp(2.2rem, 7.5vw, 3.8rem) !important;
  }
  .cta-s_title_line {
    white-space: normal !important;
    word-break: keep-all !important;
  }
}