:root {
  --bg: #FFFBEF;
  --brand: #F5A800;
  /* golden yellow */
  --brand-dark: #D98E00;
  --teal: #2AADA8;
  --accent: #3D2B00;
  /* dark brown for text */
  --muted: #7d6f5c;
  --glass: rgba(255, 255, 255, 0.7);
  --footer-bottom-height: 64px;
}

* {
  box-sizing: border-box
}

body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  margin: 0;
  color: var(--accent);
  background: linear-gradient(180deg, #FFFBEF 0%, #FFF6E0 100%)
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px
}

/* Header */
.site-header {
  z-index: 60;
}

.site-header.yellow {
  background: transparent;
  box-shadow: none
}

.site-header.yellow .brand {
  color: var(--accent)
}

.site-header.yellow .nav a {
  color: var(--accent)
}

.site-header.yellow .nav a:hover {
  background: rgba(15, 17, 20, 0.04)
}

/* Overlay header (sits on top of full-bleed hero) */
.site-header.nav-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 70;
  background: transparent;
  box-shadow: none
}

.site-header.nav-overlay .brand,
.site-header.nav-overlay .nav a,
.site-header.nav-overlay .nav-toggle {
  color: #fff
}

.site-header.nav-overlay .nav a:hover {
  background: rgba(255, 255, 255, 0.12)
}

.site-header.nav-overlay .nav.open a {
  color: var(--accent)
}

.site-header.nav-overlay .nav.open a:hover {
  background: rgba(0, 0, 0, 0.04)
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: 0.2px
}

.brand::after {
  display: none
}

.brand img {
  height: 150px;
  display: block;
  object-fit: contain;
  width: auto
}

.brand .sr {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden
}

.brand-text {
  display: none;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--brand);
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0.1px;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center
}

.nav a {
  margin-left: 20px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  padding: 8px;
  border-radius: 6px;
  transition: all 180ms ease
}

.nav a:hover {
  background: rgba(0, 0, 0, 0.04);
  transform: translateY(-1px)
}

.nav a.active {
  color: var(--brand);
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 22px
}

/* Hero / Slideshow */
.hero {
  position: relative;
  margin-top: 10px
}

.slideshow {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
  min-height: clamp(420px, 72vh, 920px);
  max-height: 90vh
}

/* Full-bleed hero with overlaid header */
.hero.hero-overlay {
  margin-top: 0
}

.hero.hero-overlay .slideshow {
  border-radius: 0;
  min-height: clamp(640px, 92vh, 980px);
  max-height: none
}

.hero.hero-overlay .slide-content {
  padding-top: 220px
}

@media(max-width:980px) {
  .hero.hero-overlay .slide-content {
    padding-top: 160px
  }

  .hero.hero-overlay .slideshow {
    min-height: clamp(620px, 92vh, 900px)
  }
}

@media(max-width:800px) {
  .hero.hero-overlay .slide-content {
    padding-top: 140px
  }

  .hero.hero-overlay .slideshow {
    min-height: clamp(580px, 92vh, 860px)
  }
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.02) translateY(6px);
  transition: opacity 900ms cubic-bezier(.2, .9, .3, 1), transform 900ms ease, visibility 0ms linear 900ms;
  display: flex;
  align-items: center
}

.slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  transition-delay: 0ms
}

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.18) 36%, rgba(0, 0, 0, 0.58) 100%);
}

.slide-content {
  position: relative;
  color: #fff;
  padding: 48px 20px;
  max-width: 720px;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: rgba(61, 43, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.4px;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 6px
}

.slide-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block
}

.slide-content h1,
.slide-content h2 {
  font-family: 'Playfair Display', serif
}

.slide-content h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.1
}

.slide-content h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  margin: 0 0 8px;
  font-weight: 700;
  line-height: 1.15
}

.slide-content .accent-text {
  color: var(--teal)
}

.slide-content p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.45;
  max-width: 60ch
}

.cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease
}

.btn.primary {
  background: var(--brand);
  color: var(--accent);
  box-shadow: 0 8px 20px rgba(245, 168, 0, 0.25)
}

.btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(245, 168, 0, 0.3)
}

.btn.outline {
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  background: transparent
}

.btn.outline:hover {
  transform: translateY(-3px);
  background: var(--teal);
  border-color: var(--teal);
  color: #fff
}

/* Arrows & dots */
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(61, 43, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(6, 10, 12, 0.22);
  transition: transform 180ms ease, background 180ms ease
}

.slide-arrow.prev {
  left: 18px
}

.slide-arrow.next {
  right: 18px
}

.slide-arrow:hover {
  transform: translateY(-50%) scale(1.04);
  background: var(--brand);
  color: var(--accent)
}

.dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  display: flex;
  gap: 10px;
  z-index: 40
}

.dots button {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.42);
  transition: all 220ms cubic-bezier(.2, .9, .3, 1)
}

.dots button.active {
  background: var(--brand);
  width: 14px;
  height: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18)
}

/* Anchor specific slides to top so cropping removes bottom area only */
.slide.top-anchor {
  background-position: center top
}

/* Eyebrow badge (used above section headings) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 168, 0, 0.12);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 18px
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block
}

.summary-title {
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  margin: 0 0 18px;
  font-weight: 700
}

.summary-accent {
  color: var(--brand);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.06)
}

/* About split section */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0
}

.about-split-media {
  position: relative
}

.about-split-img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(61, 43, 0, 0.14)
}

.about-split-content .summary-title {
  text-align: left
}

.about-split-content>p {
  color: rgba(61, 43, 0, 0.75);
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 0 0 18px;
  max-width: 56ch
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 8px 0 32px
}

.stat-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 3px solid var(--brand)
}

.stat-chip:nth-child(2) {
  border-left-color: var(--teal)
}

.stat-chip:nth-child(3) {
  border-left-color: var(--accent)
}

.stat-chip strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--accent);
  line-height: 1.1
}

.stat-chip span {
  color: var(--muted);
  font-size: 0.85rem
}

.badge-teal {
  background-color: var(--teal);
  color: #fff;
  border-radius: 999px;
  bottom: 28px;
  left: -16px
}

/* Vision & Mission */
.purpose {
  padding: 20px 0 80px
}

.purpose-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px
}

.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch
}

.mission-card {
  background: #fff;
  border-radius: 20px;
  padding: 44px 36px;
  text-align: left;
  box-shadow: 0 18px 40px rgba(61, 43, 0, 0.06);
  border-top: 4px solid var(--brand);
  transition: transform 260ms cubic-bezier(.2, .9, .3, 1), box-shadow 260ms ease
}

.mission-card--teal {
  border-top-color: var(--teal)
}

.mission-card .icon {
  width: 64px;
  height: 64px;
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(245, 168, 0, 0.12)
}

.mission-card--teal .icon {
  background: rgba(42, 173, 168, 0.12)
}

.mission-card .icon svg {
  width: 30px;
  height: 30px;
  color: var(--brand-dark)
}

.mission-card--teal .icon svg {
  color: var(--teal)
}

.mission-card h3 {
  font-family: 'Playfair Display', serif;
  margin: 0 0 12px;
  font-size: 1.5rem
}

.mission-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8
}

.mission-card:hover,
.mission-card:focus {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(61, 43, 0, 0.12)
}

.mission-card:focus {
  outline: 3px solid rgba(245, 168, 0, 0.25);
  outline-offset: 6px
}

/* Scroll reveal: hide by default and reveal when in view */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(.2, .9, .3, 1), transform 560ms cubic-bezier(.2, .9, .3, 1);
  will-change: opacity, transform
}

.reveal-on-scroll.in-view {
  opacity: 1;
  transform: none
}

@media(max-width:980px) {
  .mission-grid {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .purpose {
    padding: 0 0 48px
  }

  .about-split {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 48px 0
  }

  .about-split-img {
    height: 320px
  }

  .badge-teal {
    left: 16px
  }

  .about-split-content .summary-title {
    text-align: center
  }

  .about-split-content {
    text-align: center
  }

  .about-split-content>p {
    margin-left: auto;
    margin-right: auto
  }

  .about-stats {
    justify-content: center
  }

  .stat-chip {
    align-items: center;
    text-align: center;
    border-left: 0;
    border-top: 3px solid var(--brand);
    padding-left: 0;
    padding-top: 10px
  }

  .stat-chip:nth-child(2) {
    border-top-color: var(--teal)
  }

  .stat-chip:nth-child(3) {
    border-top-color: var(--accent)
  }
}

.content {
  padding: 44px 0
}

.property-list {
  columns: 2;
  list-style: disc;
  padding-left: 20px
}

/* Footer */
.site-footer {
  margin-top: 60px;
  background: var(--accent);
  color: rgba(255, 255, 255, 0.65)
}

.footer-top {
  padding: 70px 0 40px
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.6fr) minmax(110px, 0.8fr) 1fr 1.2fr;
  gap: 40px
}

.footer-col h3 {
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 22px
}

.footer-logo-wrap {
  display: inline-flex;
  margin-bottom: 18px
}

.footer-logo {
  height: 150px;
  width: auto;
  display: block
}

.footer-tag {
  margin: 0 0 24px;
  line-height: 1.7;
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  max-width: 46ch
}

.footer-socials {
  display: flex;
  gap: 12px
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease
}

.footer-socials a:hover {
  background: var(--brand);
  color: var(--accent);
  transform: translateY(-3px)
}

.footer-links-col ul,
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px
}

.footer-links-col a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 160ms ease, padding-left 160ms ease
}

.footer-links-col a:hover {
  color: var(--brand);
  padding-left: 4px
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.6
}

.footer-contact-list i {
  color: var(--brand);
  margin-top: 4px;
  width: 16px;
  text-align: center;
  flex: none
}

.footer-contact-list a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none
}

.footer-contact-list a:hover {
  color: var(--brand)
}

.footer-newsletter-col p {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 32ch
}

.newsletter-form {
  display: flex;
  gap: 0;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 4px
}

.newsletter-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  padding: 12px 18px;
  font-family: inherit;
  font-size: 0.9rem;
  outline: none
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.45)
}

.newsletter-form .btn {
  flex: none;
  padding: 12px 22px;
  white-space: nowrap;
  font-size: 0.9rem;
  border: 0;
  cursor: pointer
}

/* Mobile nav animations */
.nav {
  display: flex;
  align-items: center
}

.nav.open {
  position: absolute;
  top: 66px;
  right: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 12px 40px rgba(16, 24, 40, 0.08);
  padding: 12px;
  border-radius: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 220px;
  transform-origin: top right;
  opacity: 0;
  transform: translateY(-8px) scale(0.995);
  transition: opacity 260ms ease, transform 260ms cubic-bezier(.2, .9, .3, 1)
}

.nav.open.show {
  opacity: 1;
  transform: translateY(0) scale(1)
}

.nav a {
  margin-left: 20px
}

@media(max-width:800px) {
  .nav {
    display: none
  }

  .nav.open {
    display: flex
  }

  .nav a {
    margin: 0;
    padding: 10px 12px;
    width: 100%;
    border-radius: 8px
  }
}

/* Responsive */
@media(max-width:980px) {
  .container {
    padding: 0 18px
  }

  .slide-content {
    padding: 40px 18px
  }

  .summary-title {
    font-size: 2.1rem
  }

  .summary-body {
    padding: 0 8px
  }
}

@media(max-width:800px) {
  .nav {
    display: none
  }

  .nav-toggle {
    display: block
  }

  .slide {
    min-height: 360px
  }

  .slide-content {
    padding: 28px;
    margin-left: 0
  }

  .property-list {
    columns: 1
  }

  .highlights {
    flex-direction: column
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start
  }

  .brand img,
  .footer-logo {
    height: 80px
  }

  .brand-text {
    font-size: 1.1rem
  }
}

/* Properties preview section */
.properties-preview {
  padding-top: 0
}

/* Footer bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 0;
  background: transparent
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center
}

.footer-bottom .copyright {
  color: rgba(255, 255, 255, 0.55);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.2px
}

.footer-bottom .copyright strong {
  color: rgba(255, 255, 255, 0.85)
}

.back-to-top {
  background: var(--brand);
  color: #111;
  border: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(17, 24, 28, 0.06);
  cursor: pointer;
  position: fixed;
  right: 28px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px
}

@media(max-width:980px) {
  .brand img,
  .footer-logo {
    height: 90px
  }

  .back-to-top {
    right: 18px;
    bottom: 18px
  }
}

/* About Page Specifics */
.about-hero {
  padding: 80px 0;
  display: flex;
  align-items: center;
  gap: 60px;
}

.about-text {
  flex: 1;
}

.about-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 22px;
}

.about-text>p {
  color: rgba(61, 43, 0, 0.75);
  font-size: 1.05rem;
  line-height: 1.85;
  margin: 0 0 18px;
  max-width: 56ch
}

.highlight-brand {
  color: var(--brand-dark);
  /* darker yellow for text readability on white if needed, or stick to red/brand based on user req? User said 'company colors'. Our brand is yellow. */
  /* Actually, user ref might have shown red "we are", but said "use cmpany colors". I will use brand color. */
  color: #eb2f2f;
  /* Wait, looking at the user request "Who we are" in the image image might have been red. But user said "like this but using cmpany colors". 
  Company color is Yellow #FFD54A. 
  Let's use a reddish/accent color if strictly following "like this", but "using company colors" implies using the yellow/gold. 
  However, pure yellow on white is hard to read. 
  Let's stick to the brand color or accent. 
  Actually, the user said "html should be styled like this but using cmpany colors". "Like this" (the image) has "we are" in Red. 
  The company colors are Yellow and Dark.
  I will use the Brand color for the highlight but maybe make it readable? 
  Or maybe the user means the *layout* like that, but colors are company colors.
  I will use the brand yellow but text-shadow it or use the brand-dark.
  Let's go with var(--brand-dark) for text to be safe styling-wise. */
  color: var(--brand);
  /* To make it readable if it's too light, I might need a darker shade. 
     var(--brand-dark) is #e6b83a.
     Let's use a custom class or inline style if needed, but for now var(--brand) is what they asked */
}

.about-collage {
  flex: 1;
  position: relative;
  height: 500px;
  /* Simple masonry/collage layout using absolute positioning or grid */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  gap: 10px;
}

.collage-img {
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.img-1 {
  grid-column: 1 / 8;
  grid-row: 1 / 7;
  z-index: 1;
}

.img-2 {
  grid-column: 7 / 13;
  grid-row: 3 / 9;
  z-index: 2;
  border: 4px solid #fff;
}

.img-3 {
  grid-column: 2 / 7;
  grid-row: 6 / 12;
  z-index: 3;
  border: 4px solid #fff;
}

/* Floating Badges */
.floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px 12px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 45px rgba(61, 43, 0, 0.16);
  z-index: 10;
  white-space: nowrap;
}

.floating-badge .badge-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}

.floating-badge .badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25
}

.floating-badge .badge-text strong {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  color: var(--accent)
}

.floating-badge .badge-text span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted)
}

.badge-green {
  top: 28px;
  left: -24px;
}

.badge-green .badge-icon {
  background: var(--accent);
}

.badge-brand {
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
}

.badge-brand .badge-icon {
  background: var(--brand);
}

.badge-dark {
  bottom: 28px;
  left: 48px;
}

.badge-dark .badge-icon {
  background: var(--teal);
}


/* CEO Section */
.ceo-section {
  padding: 80px 0;
  background-color: #f9f9f9;
}

.ceo-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}

.ceo-image-wrapper {
  position: relative;
}

.ceo-image-wrapper::before {
  content: '';
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 2px solid var(--brand);
  border-radius: 16px;
  z-index: -1;
}

.ceo-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(61, 43, 0, 0.16);
}

.ceo-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 20px;
}

.ceo-quote-icon {
  display: block;
  font-size: 1.8rem;
  color: var(--brand);
  opacity: 0.5;
  margin-bottom: 16px;
}

.ceo-bio {
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 20px;
}

.signature {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(61, 43, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.signature-greeting {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
}

.signature-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}

.signature-role {
  font-size: 0.9rem;
  color: var(--muted);
  letter-spacing: 0.3px;
}

@media(max-width: 800px) {
  .about-hero {
    flex-direction: column-reverse;
    text-align: center;
    padding: 40px 0;
  }

  .about-collage {
    width: 100%;
    height: 300px;
    /* shorter on mobile */
  }

  .floating-badge {
    display: none;
  }

  .ceo-grid {
    grid-template-columns: 1fr;
  }

  .ceo-image-wrapper {
    max-width: 320px;
    margin: 0 auto 40px;
  }

  .ceo-image-wrapper::before {
    display: none;
  }

  .img-1 {
    grid-column: 1 / 9;
  }

  .img-2 {
    grid-column: 6 / 13;
  }
}

/* Featured Projects Grid (Properties Page) */
.featured-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 32px;
  padding: 20px 0 60px;
}

.project-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(61, 43, 0, 0.08);
  border: 1px solid rgba(61, 43, 0, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(61, 43, 0, 0.14);
}

.project-card-img-wrapper {
  position: relative;
  height: 340px;
  overflow: hidden;
}

.project-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.project-card:hover .project-card-img {
  transform: scale(1.05);
}

.project-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--brand);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.project-badge--available {
  background: var(--teal);
  color: #fff;
}

.project-badge--coming-soon {
  background: var(--accent);
  color: #fff;
}

.project-card-content {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.project-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.project-card-location {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.95rem;
  margin-bottom: 24px;
}

.project-card-location i {
  color: var(--brand-dark);
}

.project-card-content .btn {
  width: 100%;
  text-align: center;
  justify-content: center;
  margin-top: auto;
}

@media(max-width: 600px) {
  .featured-projects-grid {
    grid-template-columns: 1fr;
    padding: 10px 0 40px;
  }

  .project-card-img-wrapper {
    height: 240px;
  }
}

/* Detail Pages (SFP Phase 1 / ÌRÌ by Sunflower / RÍRỌ̀ / Sunflower Ville) */
.back-link-wrap {
  padding: 24px 24px 0;
  max-width: 1160px;
  margin: 0 auto;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
  transition: color 160ms ease, transform 160ms ease;
}

.back-link:hover {
  color: var(--brand-dark);
  transform: translateX(-4px);
}

.detail-page-header {
  text-align: center;
  padding: 60px 0 10px;
}

.detail-page-header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 3rem);
  margin: 16px 0 12px;
}

.detail-page-header .project-card-location {
  justify-content: center;
  margin-bottom: 0;
}

/* Flyer image display (SFP Phase 1) */
.flyer-section {
  display: flex;
  justify-content: center;
  padding: 30px 0 10px;
}

.flyer-frame {
  max-width: 420px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(61, 43, 0, 0.14);
  border: 1px solid rgba(61, 43, 0, 0.06);
}

.flyer-img {
  width: 100%;
  display: block;
}

/* Gallery (site progress / renders) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}

.gallery-img-wrapper {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(61, 43, 0, 0.08);
  border: 1px solid rgba(61, 43, 0, 0.06);
  height: 280px;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
}

.gallery-img-wrapper:hover .gallery-img {
  transform: scale(1.05);
}

.detail-hero {
  height: 70vh;
  min-height: 480px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  color: #fff;
}

.detail-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 32, 0.15) 0%, rgba(15, 23, 32, 0.78) 100%);
}

.detail-hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: 60px;
}

.detail-hero-content .eyebrow {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(6px);
}

.detail-hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin: 0;
  line-height: 1.15;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.detail-hero-content h1 .accent-text {
  color: var(--brand);
}

/* Detail content sections */
.detail-section {
  padding: 80px 0;
}

.detail-section.alt {
  background: rgba(255, 255, 255, 0.5);
}

.detail-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

.detail-section-head .eyebrow {
  display: inline-flex;
}

.detail-body p {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: rgba(61, 43, 0, 0.8);
  font-size: 1.1rem;
  line-height: 1.9;
}

/* Amenities list */
.amenities-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 820px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.amenities-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  padding: 18px 22px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(61, 43, 0, 0.06);
  font-weight: 600;
  line-height: 1.5;
}

.amenities-list i {
  color: var(--teal);
  font-size: 1.2rem;
  margin-top: 2px;
}

/* Documents grid */
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 0 auto;
}

.document-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(61, 43, 0, 0.06);
  border: 1px solid rgba(61, 43, 0, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.document-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(61, 43, 0, 0.12);
}

.document-card i {
  font-size: 2rem;
  color: var(--brand-dark);
  margin-bottom: 14px;
  display: block;
}

.document-card span {
  font-weight: 700;
}

/* Detail CTA */
.detail-cta {
  text-align: center;
  padding: 80px 0 100px;
}

.detail-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 28px;
}

/* Housing Options Grid (ÌRÌ page) */
.housing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.housing-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(61, 43, 0, 0.06);
  border: 1px solid rgba(61, 43, 0, 0.06);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.housing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(61, 43, 0, 0.12);
}

.housing-img-wrapper {
  height: 200px;
  overflow: hidden;
}

.housing-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.housing-card:hover .housing-img {
  transform: scale(1.05);
}

.housing-content {
  padding: 20px 22px;
}

.housing-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.4;
}

.housing-price {
  color: var(--brand-dark);
  font-weight: 800;
  font-size: 1.2rem;
  font-family: 'Playfair Display', serif;
}

@media(max-width: 800px) {
  .amenities-list {
    grid-template-columns: 1fr;
  }

  .detail-section {
    padding: 60px 0;
  }
}

@media(max-width: 600px) {
  .detail-hero {
    height: 60vh;
    min-height: 420px;
  }

  .detail-hero-content {
    padding-bottom: 36px;
  }
}

@media(max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .container {
    padding: 0 16px;
  }
}

@media(max-width: 360px) {
  .btn {
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .brand-text {
    font-size: 1rem;
  }

  .contact-card {
    padding: 20px;
  }
}

/* Universal Mobile Overflow Fix */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

img {
  max-width: 100%;
  height: auto;
}

/* Contact Page Styles */
.page-header-sub {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.8;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 50px;
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-card {
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(61, 43, 0, 0.05);
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(61, 43, 0, 0.1);
}

.contact-card .icon {
  width: 50px;
  height: 50px;
  background: rgba(245, 168, 0, 0.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-dark);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.contact-card--whatsapp .icon {
  background: rgba(42, 173, 168, 0.16);
  color: var(--teal);
}

.contact-card--whatsapp .btn {
  margin-top: 14px;
  padding: 10px 22px;
  font-size: 0.9rem;
}

.map-container {
  width: 100%;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contact Form */
.contact-form-col {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(61, 43, 0, 0.05);
}

.form-subtitle {
  color: var(--muted);
  margin: -14px 0 36px;
  font-size: 0.95rem;
  line-height: 1.7;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--accent);
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(245, 168, 0, 0.2);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.form-submit-btn {
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-size: 1rem;
}

@media(max-width: 800px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media(max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}